WordPress.org

Make WordPress Core

Opened 8 months ago

Last modified 4 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: has-patch
Focuses: Cc:

Description

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;
}

Attachments (2)

before.png (95.7 KB) - added by Joen 4 months ago.
Before the patch.
after.png (83.5 KB) - added by Joen 4 months ago.
After the patch in https://github.com/WordPress/wordpress-develop/pull/1723

Download all attachments as: .zip

Change History (5)

#1 @desrosj
6 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.

This ticket was mentioned in PR #1723 on WordPress/wordpress-develop by jasmussen.


4 months ago

  • Keywords has-patch added

This PR aims to fix obsolete navigation block styles in the TwentyTwentyOne theme.

Trac ticket: https://core.trac.wordpress.org/ticket/53220

#3 @Joen
4 months ago

I took a stab at a patch for this in https://github.com/WordPress/wordpress-develop/pull/1723. There are a few issues around the padding, much of it related to how heavily TT1 styles the navigation block, which has then drifted due to how much the block has evolved over the past year. In this gallery there are a few screenshots of how there's a top/bottom margin on every block, there's a separate padding value attached to the wrong element, and incorrect spacing between items due to the change to using gap: https://cloudup.com/c5HjvVORdzJ

I haven't been working on TT1 initially, so there's likely a lot of context for the original styles that I'm unaware of. So I would appreciate a good test.

@Joen
4 months ago

Before the patch.

Note: See TracTickets for help on using tickets.