[wp-trac] [WordPress Trac] #54250: Twenty Twenty One: Editor Buttons margins incompatible with gap

[WordPress Trac]

#54250: Twenty Twenty One: Editor Buttons margins incompatible with gap
------------------------------+------------------------------
 Reporter:  stacimc           |       Owner:  (none)
     Type:  defect (bug)      |      Status:  new
 Priority:  normal            |   Milestone:  Awaiting Review
Component:  Bundled Theme     |     Version:  trunk
 Severity:  normal            |  Resolution:
 Keywords:  has-testing-info  |     Focuses:
------------------------------+------------------------------

Comment (by stacimc):

 Since writing this ticket, the Buttons gap support was merged
 (https://github.com/WordPress/gutenberg/pull/34546). It refactors Buttons
 to use `gap` for vertical spacing rather than margins, and forces all
 margins on Button blocks to `0`. This causes the described regressions to
 vertical spacing.

 To test:

 1. Use the Twenty Twenty One theme
 2. Insert a Buttons block into a new post, and add several buttons to it,
 enough that they take up multiple rows.
 3. Insert a second Buttons block immediately afterward, and add several
 buttons to it.
 4. Observe that there is no margin in between the two Buttons containers.
 5. Inspect the first Button in either group and observe this CSS rule:
 {{{
 [data-block].wp-block-buttons .wp-block-button:first-child {
         margin-top: var(--global--spacing-vertical);
 }
 }}}

 The first-child (and corresponding last-child) rule do not cause a visual
 bug because they are overridden by the block, but these styles could be
 deleted. The lack of margin between Buttons containers does cause a visual
 issue.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/54250#comment:5>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform