Payment Buttons block doesn't honor width setting

[tanjoymor]

Impacted plugin

Jetpack

Quick summary

When you add a Payment Buttons block and set the width on the button it isn't honored.

Steps to reproduce

1. Add the Payment Buttons block
2. Set the width to 100%
3. Save
4. (Need to have a Stripe account connected)

A clear and concise description of what you expected to happen.

I expected the button to display on the live site at 100% of the content area width.

What actually happened

The width of the button doesn't change. It's also worth nothing that regardless of the width setting, in the editor the button displays as full-width.

Impact

All

Available workarounds?

No but the platform is still usable

Platform (Simple and/or Atomic)

Simple, Atomic, Self-hosted

Logs or notes

I've tested this on Atomic, Simple, and Pressable with various themes including Classic and Block and all with the same result.

I spent a fair bit of time trying to come up with some CSS to override it and wasn't able to.

[tanjoymor]

Customer report 7229965-zen

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 7229965-zen
• [ ] 7216676-zen
• [ ] 7294455-zen
• [ ] 7587931-zen
• [ ] -zen

[msilbers]

also reported in 7216676-zen

[radtechgh]

7294455-zen

[jp-imagines]

Another report in 7587931-zd-a8c.

This user has a page with some newer Payment Buttons blocks that are structured differently than older ones, and only the new ones are affected. (Older buttons are Payment Button > Button, newer ones are Payment Buttons > Payment Button > Button.)

Some CSS can be used to force the buttons to 100% as needed:

/* Force payment buttons to 100% width | xxx -zen */
.wp-block-jetpack-payment-buttons-is-layout-flex a.wp-block-button__link {
    width: 100%;
}

.wp-block-jetpack-payment-buttons.is-layout-flex.wp-block-jetpack-payment-buttons-is-layout-flex {
    display: block;
}
/* /end xxx -zen */

[github-actions[bot]]

This issue has been marked as stale. This happened because:

• It has been inactive for the past 6 months.
• It hasn’t been labeled `[Pri] BLOCKER`, `[Pri] High`, `[Type] Feature Request`, `[Type] Enhancement`, `[Type] Janitorial`, `Good For Community`, `[Type] Good First Bug`, etc.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.