Twenty Twenty: Vertical buttons spacing on frontend dependent on margins

[stacimc]

The vertical spacing of buttons in Twenty Twenty relies on overriding margins. This is not compatible with efforts to refactor the Buttons block to use gap to control vertical spacing in between buttons, rather than using margins ​https://github.com/WordPress/gutenberg/pull/34546.

.wp-block-button:not(.alignleft):not(.alignright) {
	margin-bottom: 30px;
	margin-top: 30px;
}

.wp-block-button {
	margin: 3rem 0;
}

These styles will break with the linked gap refactor; the margins are overridden and the vertical spacing between buttons shrinks considerably.

Proposed Solution: Remove the margin-based styling in Twenty Twenty and instead add a rule increasing the size of the row-gap.

[stacimc]

Before: Vertical spacing of buttons before refactoring the block to use gap

[stacimc]

After: Significantly reduced vertical spacing when the block is refactored to use gap

[stacimc]

The Buttons gap PR has been merged so this can be tested on trunk. To test:

1. Use the Twenty Twenty theme
2. Insert a Buttons block into a new post and add several buttons, enough so that they wrap onto multiple rows.
3. View the post on the frontend.
4. Observe that the row-gap between buttons has decreased considerably. If you inspect the buttons, you will see that this is because the margins applied by the theme styles are overridden in favor of the new gap-based spacing.

[umesh84]

extra margin remove from style.css

[audrasjb]

Moving to milestone 5.9 as there is indeed an issue introduced in 5.9.

[audrasjb]

Moving to 5.9.1 as WP 5.9 RC 1 is today and this still needs broader testing.

[hellofromTonya]

5.9.1 is happening in about 30 minutes. As broader testing activity hasn't yet happened since being put in the milestone, moving to 5.9.2 to give it more time.

[ironprogrammer]

tl;dr
I'd like to propose that this ticket be closed, as the concern was resolved with @stacimc's ​PR 34546.

Discovery

A few days after this ticket was originally created, ​PR 34546 introduced a ​highly-specific override that prevents the reported margins in "Twenty Twenty" from taking effect, resetting them and resulting in:

.wp-block-buttons > .wp-block-button.wp-block-button.wp-block-button.wp-block-button.wp-block-button {
    margin: 0;
}

The above ensures that the gap setting of the wrapping .wp-block-buttons controls spacing, which was the original concern voiced in this ticket 👍🏻.

Screenshots

Here are current screenshots of the editor and front end (WordPress 6.0-alpha-52448-src), which render consistently. Buttons within the same block adhere to gap: 0.5em set by the editor.

Additionally, a new row with a button block has been added to show that spacing between button blocks is not being set by the theme, but defaulting to editor classic styles.

Consecutive Buttons blocks rendered in post editor.

Consecutive Buttons blocks rendered on front end post page.

[nidhidhandhukiya]

I Think this issue is resolved with the latest update 5.9.1
Because i'm checking it in my local and this is not happen.

[audrasjb]

Let's close this ticket as reported-upstream, as it was fixed in ​https://github.com/WordPress/gutenberg/pull/34546