Automattic / Automattic/jetpack

Pay with PayPal Block: Add additional design/layout tools

Open
#18,684 1 comment 2 reactions 0 assignees View on GitHub
[Block] Pay With Paypal [Feature] Pay with PayPal [Status] Needs Design Enhancement
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

@melchoyce, @beafialho, and I had wanted to incorporate the PayPal Block into some recent block patterns, but we ran into some issues:

- It's not possible to modify the font size/style of the text fields.
- It's not possible to modify the color/style/size of the button.
- It's not possible to modify the appearance of the image:
- Position (to the left/right of the text)
- Setting it to stack on mobile or not.
- Stretching/cropping to fill the available space in the column.

Here are a couple examples of the less-than-great layouts in case they're helpful to see:

Captura de ecrã 2021-02-02, às 16 22 56

![Screen Shot 2021-02-02 at 10 19 26 AM](https://user-images.githubusercontent.com/1202812/106657342-e43b6000-6569-11eb-9ff8-9f8c19ad736c.png)

Contributor guide

Open the contributing guide

Research direction

Locate the PayPal Block implementation and trace how its text fields, button, and image are laid out on desktop and mobile. Compare the current output with the screenshots; done means the block exposes controls for text styling, button appearance, image position and sizing, and mobile stacking.

Written by the indexing model from the issue text.

Assessment

Tech stack
php
Domain
design, frontend, payments
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.