Skip to content

Subscription Block: Submit button width issues when stacked. #31063

Closed
@alaczek

Description

Impacted plugin

Jetpack

Quick summary

When Subscription block is configured to display the button on the new line and the block width is set to 100% the button either sticks to to input field, or if padding is added to fix that, the button won't stretch full 100% of the container.****

Editor settings:
image

Fronted preview:
image

When the space between is set to 0 in the editor:
image

When the space between is set to 0 on the front end (as expected):
image

Steps to reproduce

  1. Add a Subscription block to a post or a page.
  2. Configure the block settings:
  • Check place button on the new line option.
  • set width to 100% under spacing.
  1. Save and preview. Note that in the editor the button stretches 100%, but in the preview it doesn't. This is because the space between is set to 10px by default, and the width of the button is set to calc(100% - 10px).
  2. Go back to the editor and set the "Space between" to 0.
  3. Note that in the editor there's still space between the input and the button, but on the front end they are sticking together (it fixes the button width issue though).

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

I expected that the editor view and site preview would match. When the button is set to display on a new line, the space between setting should affect only the spacing between the input field and the button, not the width if the button itself.

What actually happened

No response

Impact

One

Available workarounds?

No but the platform is still usable

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

No response

Metadata

Assignees

Labels

Customer ReportIssues or PRs that were reported via Happiness. aka "Happiness Request", or "User Report"Triaged[Block] Subscriptions[Feature] SubscriptionsAll subscription-related things such as paid and unpaid, user management, and newsletter settings.[Platform] Atomic[Platform] Simple[Plugin] JetpackIssues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/[Pri] Normal[Type] BugWhen a feature is broken and / or not performing as intended

Type

No type

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions