Make WordPress Core

Opened 4 months ago

Last modified 2 months ago

#53220 new defect (bug)

Twenty Twenty-One: Refactor or remove navigation item padding CSS

Reported by: Joen Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords:
Focuses: Cc:


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;

Change History (1)

#1 @desrosj
2 months ago

  • Version changed from trunk to 5.6

Looks like this line has been included since the theme was first moved to SVN. Updating the version.

Note: See TracTickets for help on using tickets.