[wp-trac] [WordPress Trac] #53220: Twenty Twenty-One: Refactor or remove navigation item padding CSS

[WordPress Trac]

#53220: Twenty Twenty-One: Refactor or remove navigation item padding CSS
---------------------------+-----------------------------
 Reporter:  Joen           |      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 CSS custom property that targets navigation menu
 items:

 {{{
 .wp-block-navigation .wp-block-navigation-link .wp-block-navigation-
 link__content {
     padding: var(--primary-nav--padding);
 }
 }}}

 There are a few problems with that. First off, it prevents the block from
 inheriting padding values set by the Global Styles system. See
 https://github.com/WordPress/gutenberg/issues/31784

 Secondly, it overrides new default behavior for the navigation block,
 which is to have zero padding for menu items unless a background color is
 set. This behavior is created to enable navigation menus that align with
 headings and site titles that don't have any padding. See
 https://github.com/WordPress/gutenberg/pull/30805.

 Finally, the rule targets only custom menu items, not menu items generated
 by the dynamic Page List block.

 Recommended solution: either remove the rule entirely and rely on default
 values, or leverage the global styles system to apply padding.

 For reference, here is the CSS the will be applying padding to the
 navigation menu item in the future:

 {{{
 .wp-block-navigation .wp-block-pages-list__item a,
 .wp-block-navigation .wp-block-navigation-link a {
     padding: 0;
 }
 }}}

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