[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         |   Keywords:
  Focuses:                 |
---------------------------+-----------------------------
 Twenty Twenty One has a few style rules in the editor that will causes
 issues when the Buttons block is refactored to use `gap` to control
 vertical spacing in between buttons, rather than using margins.
 (https://github.com/WordPress/gutenberg/pull/34546)

 It enforces a 0px margin on the Buttons container, and applies additional
 margin to the first and last children of the Buttons block. With margins
 removed from individual buttons, this causes:

 * Insufficient space between Buttons container and adjacent blocks
 * The first button in a Buttons group is vertically offset from its
 siblings


 {{{
 [data-block].wp-block-buttons {
         margin-top: 0;
         margin-bottom: 0;
 }

 [data-block].wp-block-buttons .wp-block-button:first-child {
         margin-top: var(--global--spacing-vertical);
 }

 [data-block].wp-block-buttons .wp-block-button:last-child {
         margin-bottom: var(--global--spacing-vertical);
 }
 }}}


 Proposed Solution:
 * Remove the rule setting 0px margin on the container, allowing it to fall
 back to default spacing
 * Remove the rules setting extra margin-top/bottom on first/last buttons
 as it is no longer necessary

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