Buttons Block: Extra vertical space between buttons in the Editor

[alaczek]

Description

I noticed that when I insert Buttons block and set the buttons to 100% width, there's large vertical spacing between the buttons, to accommodate the block appender. This causes the editor view to be different than the preview. This behaviour is also different than if no width is set on the buttons - in that case no extra appenders appear between the buttons. This might be the intended behavior, but I found those differences confusing.

Step-by-step reproduction instructions

1. Create a new post or a page.
2. Add Buttons block with three to four buttons inside.
3. Set each button to 100% width, so that each button sits on a separate line.
4. Note that large vertical space between the buttons. If you hover over that space, a block appender will appear.
5. Preview the site. Note that the spacing between the buttons is much smaller.
6. Go back to the editor. De-select the width setting for each button, so that they all appear on the same line. Note the narrow spacing between buttons, and no appender when hovering over the spaces.
7. Preview the site and note that the spacing between the buttons in the editor and in the preview are the same.

Expected behaviour

I didn't expect the extra vertical space in the editor when the button width is set to 100%.

Actual behaviour

I expected the spacing between the buttons to be the same in the preview and in the editor. I realize this will depend on the theme as well, but before this can be tackled in the theme, the issue of extra appenders needs to be hashed out.

Screenshots or screen recording (optional)

Editor view - large vertical spacing between buttons:

Preview - much smaller vertical spacing:

Here's a short video: https://www.loom.com/share/0f138caac58147a6ab0dc9564e950c9f

WordPress information

• WordPress version: 5.6.0
• Gutenberg version: 9.8.3
• Are all plugins except Gutenberg deactivated? Yes (Jetpack)
• Are you using a default theme (e.g. Twenty Twenty-One)? Yes (TT1)

Device information

• Device: Desktop
• Operating system: macOS 10.15.7
• Browser: Chrome 87.0

[paaljoachim]

Thank you for creating the issue @alaczek !
I am also seeing this using Twenty Twenty One, Gutenberg plugin 10, and WordPress 5.7 beta 3.

Backend Twenty Twenty One:

Frontend:

@tellthemachines @carolinan

[paaljoachim]

I did an inspect element on the backend and noticed this.

.editor-styles-wrapper [data-block] {
    margin-top: var(--global--spacing-vertical);
    margin-bottom: var(--global--spacing-vertical);
}

These margins should be collapsed making the backend look closer to the frontend.

Commenting out the above margins.

[ryelle]

It turns out this is also the case with the default block-library styles (ex, Twenty Fifteen) - margins don't collapse between buttons in the editor, so each space between buttons has 2x margin, meanwhile on the frontend the margin is only applied to the bottom.

Could the margin top set here be removed or set to 0, maybe? Twenty Twenty & Twenty Twenty-One will still need to update too, since they set their own margins.

[jasmussen]

Is this issue fixed by the new block spacing (gap) control?

[paaljoachim]

Testing using
Twenty Twenty Two.
WordPress 6.0.2
Gutenberg plugin 14.2

Testing instructions from original post
1- Create a new post or a page.
2- Add Buttons block with three to four buttons inside.
3- Set each button to 100% width, so that each button sits on a separate line.
4- Note that large vertical space between the buttons. If you hover over that space, a block appender will appear.

Getting the appender on hover in between the buttons is kind of tricky. It looks like I need to have the parent Buttons block selected for the appender on hover to show up.

5- Preview the site. Note that the spacing between the buttons is much smaller.

I see an identical spacing on the frontend.

6- Go back to the editor. De-select the width setting for each button, so that they all appear on the same line. Note the narrow spacing between buttons, and no appender when hovering over the spaces.

I am not able to get the appender on hover to be seen. Or it might just be difficult to get to show.

No appender on hover between the buttons.

8- Preview the site and note that the spacing between the buttons in the editor and in the preview are the same.

Yes. I see the same identical buttons on the backend and frontend.

[paaljoachim]

From what I am seeing the appender in between the buttons is having a hard time showing up and could be fixed.
We should close this issue and open a new issue in relation to getting a more stable appender in place which will easier show up between the buttons.

[jasmussen]

Getting the appender to show between buttons in small-gap situations feels like a separate issue to being able to controlling the gap, right?

[paaljoachim]

Yes. Here is the new issue for the in between appender: #44728

Closing this issue.