[wp-trac] [WordPress Trac] #56222: Twenty Twenty-One: Remove spacer block styles

[WordPress Trac]

#56222: Twenty Twenty-One: Remove spacer block styles
---------------------------+-----------------------------
 Reporter:  poena          |      Owner:  poena
     Type:  defect (bug)   |     Status:  assigned
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Bundled Theme  |    Version:
 Severity:  normal         |   Keywords:
  Focuses:                 |
---------------------------+-----------------------------
 Twenty Twenty-One includes styles for the spacer block for the front.
 I suggest that the styles should be removed:

 It adds display:block even though display:block is the default.

 It removes top and bottom margin, even though this is not needed in the
 post content because of collapsing margins between blocks.
 I could not find any scenario where disabling this made a difference to
 the spacing on the front, which makes me believe it is not needed.
 Tested on 5.3, 5.6, 6.0 Chrome and Firefox on Mac.

 It uses a custom CSS property to force a specific height on mobile. This
 affects the patterns in the theme negatively.
 It also causes styling problems:
 -When the spacer block has a height set to 0 in the navigation block, as
 the theme forces this to be larger on smaller screens.
 -When the block is horizontal. Horizontal was not an option when this
 style was added.


 Consequences of removal:
 -Removing the use of the custom CSS property will cause a style change for
 websites that has adjusted the spacing property.


 == Testing instructions
 Activate Twenty Twenty-One.

 In the block editor, create a new post and place a 200px spacer block
 between any two blocks.
 Add a navigation block. Add a spacer block inside it.

 Save, and view the post on the front.

 Reduce the browser window width to below 482px.
 Select the spacer block and confirm that its height is no longer 200px.

 Open the navigation block. Confirm that the spacer block has a 20px height
 and not the expected 0px.


 Optionally to test removal of the margin styles, open the browser
 developer console, locate the block and remove the assigned CSS:

 {{{
 wp-block-spacer {
     /* display: block; */
     /* margin-bottom: 0 !important; */
     /* margin-top: 0 !important; */
 }
 }}}

 Confirm wether the spacing stays the same.

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