Ensure Equal Vertical and Horizontal Spacing Between ECE Buttons and WooPay Button

[lovo-h]

Description

Currently, the vertical spacing between ECE buttons and the WooPay button is not equal. The fix for this issue will ensure that the vertical and horizontal spacing between ECE buttons and the Woopay button are equal.

Acceptance criteria

• Ensure the vertical spacing between ECE buttons are equal.
• Ensure the vertical spacing between ECE buttons and the WooPay button is equal.
• Ensure the horizontal spacing between ECE buttons are equal.
• Ensure the horizontal spacing between ECE buttons and the WooPay button is equal.
• Ensure the vertical and horizontal spacing is equal.
• Ensure the implementation matches the designs in c8VYjXqluE9vlVSE1RgJix-fi-858_15405.

Designs

An example of vertical and horizontal space not being equal:

An example of the vertical and horizontal space being equal:

Testing instructions

1. As a shopper, navigate to the merchant shop, add an item to the cart, and navigate to the cart page.
2. Ensure the vertical and horizontal spacing of the buttons are equal.
3. Navigate to the checkout page.
4. Ensure the vertical and horizontal spacing of the buttons are equal.

Additional context

• See the following thread for additional context: p1721680636834669-slack-C01BZUL57SQ

[pierorocca]

Noting this occurs on PDP, Cart, Checkout and both blocks and shortcode.

[bborman22]

Hey team! Please add your planning poker estimate with Zenhub @lovo-h @cesarcosta99 @asumaran @reykjalin

[asumaran]

According to the acceptance criteria of this issue:

Ensure the implementation matches the designs in c8VYjXqluE9vlVSE1RgJix-fi-858_15405.

@pierorocca, should I focus only on the spacing issues, or should I also make changes so that the buttons look identical to the Figma file?

For example, on the Cart page, the ‘Proceed to checkout’ button is located after the express checkout buttons, whereas in the Figma design, it is placed at the top.

Currently	Design

On the checkout page, the title of the ‘Express checkout’ section is centered and currently it's aligned to the left.

Currently	Design

Additionally, on checkout page's design, the three buttons are shown to take up the entire width of their container. However, currently, they are distributed in columns, switching to full width when the browser viewport is narrowed. Will the ECE buttons be displayed in rows or columns and rows depending on the viewport width? If so, at what point does it change from columns to rows?

[pierorocca]

Just the spacing for now. I think those other design elements are Blocks specific and are being updated by Alex.

[asumaran]

It seems that the spacing between the ECE buttons on the shortcode-based cart and checkout pages cannot be adjusted because they are within an IFRAME. The design cannot be applied to those instances. Is that okay, @pierorocca? – Block-based pages look good because each button is a separate instance of ECE, allowing each button to be spaced independently

The space between buttons according to the designs is 14px while Stripe is using "8px".

@pierorocca would you like me to use the same spacing that Stripe uses so that the buttons appear correctly spaced? (only on shortcode)

[pierorocca]

Yes, let's reduce to align with Stripe since that seems like our only option here. I prefer the reduced spacing. I find that the increased spacing creates a barcode stripe like effect that's distracting.

@nikkivias we have a technical limitation here that will have impact in a multi gateway scenario.

@asumaran could we double check with Stripe just in case? I don't think gridrowspacing and gridcolumnspacing can be used for ECE buttons.

[asumaran]

@asumaran could we double check with Stripe just in case? I don't think gridrowspacing and gridcolumnspacing can be used for ECE buttons.

I'll double check their documentation.

[asumaran]

@pierorocca, good call on recommending the Elements appearance variables. gridRowSpacing and gridColumnSpacing don't apply in this case, but I was able to customize the spacing by setting the spacingUnit variable.

The space looks as the proposed design now.

[pierorocca]

Cool. @asumaran could we get side by side at 8px and 14px? The extra spacing looks unpleasant to me when the buttons are stacked. I'd like to do a quick informal poll on what people prefer and why.

[pierorocca]

Oops sorry see the other version above...

[pierorocca]

Quick poll @csmcneill @c-shultz @bborman22 @frosso @reykjalin @leonardola @asumaran which do you prefer left or right?

[asumaran]

@pierorocca here's how it looks with "8px" padding. Same as Stripe.

Product page

Cart Block

Checkout Block

Cart Shortcode

Checkout Shortcode

[pierorocca]

OK 8px looks too tight.

One more data point - Shopify If I'm reading it right is using 11px grid spacing?

[asumaran]

@pierorocca I prefer the right option. The one that has less space between buttons.

[asumaran]

One more data point - Shopify If I'm reading it right is using 11px grid spacing?

Yes, technically, Shopify is using 1.1rem internally which translates to 11px.

[leonardola]

@pierorocca I like the right one more

[asumaran]

@pierorocca let me know what value we want to use 8px or 11px or 14px.

[pierorocca]

8px is looking really tight now that I've had time with it. @nikkivias thoughts on compromising down to 11px from 14px to avoid what to my eyes looks like a banding or striping effect at 14px?

@asumaran regarding the - OR - separation, that was removed on shortcode for compatibility not because we preferred it. Too many sites had multiple - OR -, often in the wrong place or where there should have been none. We made a call to remove it to eliminate the compatibility issue at the expense of nice separation between Add to cart and Proceed to checkout buttons.

[asumaran]

@asumaran regarding the - OR - separation, that was removed on shortcode for compatibility not because we preferred it. Too many sites had multiple - OR -, often in the wrong place or where there should have been none. We made a call to remove it to eliminate the compatibility issue at the expense of nice separation between Add to cart and Proceed to checkout buttons.

@pierorocca, are you suggesting that I should remove the "or" separator from the block-based pages as well, or should I restore it on the shortcode-based pages?

[pierorocca]

@pierorocca, are you suggesting that I should remove the "or" separator from the block-based pages as well, or should I restore it on the shortcode-based pages?

Neither. Just fyi to an earlier question of yours :) Blocks doesn't suffer the same issue of extra and rogue - or - separators. And we don't want to restore it on shortcode because it'll bring back all of the problems we got rid of.

[csmcneill]

I prefer more spacing, but that could also be my deteriorating eyeballs 👀

Some questions:

• Is the limit three payment request buttons? Are there instances where we can have more buttons rendered?
• Would more or less spacing be preferable if other buttons were added via a different extension (e.g., PayPal Payments)?

[pierorocca]

Amazon Pay is a possibility for a 4th button and Link could potentially be a 5th. Buttons from other gateways will add to the count, but I don't think they should look different or be spaced differently. The design guidelines don't mention vertical spacing between buttons which may create inconsistencies over time in multi-gateway scenarios.

Visually if it's 1 or 5 buttons, they should feel like a cohesive block. There's a point where if the spacing is too big and the buttons are decently wide, to my eyes it creates a banding effect similar to, but not as extreme, as the attached image.

@asumaran mind adding an 11px option here for comparison?

[asumaran]

@pierorocca here's some screenshots with 11px separation between buttons.

---

---

[pierorocca]

14px here for reference. I think 11px is the best balance of space but not too much space that the buttons looks like they're not part of a block of buttons. Up to @nikkivias here to make the final call since the size we pick, and add to the 3P guidelines, will impact everyone.

[nikkivias]

Hi team. Vertical and horizontal spacing MUST be equal.

From Slack:

Shopify uses 11px and to my eyes that creates less of a banding or stripe effect visually than 14px.

It could be good to reference if it works with Shopify. We just want to use an even number gap, so I used 12PX instead. Here is the Public figma file

[pierorocca]

Thanks @nikkivias! That takes us down from almost 27% larger spacing to 9% relative to Shopify.

[asumaran]

I updated the PR with 12px spacing and marked it as ready for review.

[alexflorisca]

Hi @nikkivias this seems to clash with the changes from your figma file that I implemented in woocommerce/woocommerce#50644 where I set it to 14px. Which one is the right one here?

[pierorocca]

@alexflorisca correct changing to 12px to be more space efficient and to soften what I was seeing as banding or striping effect at the larger spacing. We looked at Stripe's spacing (8px) and Shopify's spacing (11px) and settled on 12px. 14px puts us at almost double Stripe's spacing and 30% above Shopify's spacing.

Sorry for the changeup. OK to update your PR to 12px?

[alexflorisca]

Sure no problem