Make WordPress Core

Opened 18 months ago

Last modified 2 weeks ago

#56904 new defect (bug)

Twenty Twenty-Two: Block Navigation "no decoration" does not work

Reported by: mrfoxtalbot's profile mrfoxtalbot Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: dev-feedback
Focuses: Cc:

Description

The "decoration" option in the Navigation Block has an option NOT to underline links in the menu (decoration:none). This option works correctly on some themes (Twenty Twenty-Three, Sparkle FSE) but not in Twenty Twenty-Two:

https://cloudup.com/cwGQKTvnyzF

Upstreamed from this original report: https://github.com/WordPress/gutenberg/issues/42766

Attachments (2)

Screen Shot on 2022-10-25 at 10:51:01.png (216.4 KB) - added by mrfoxtalbot 18 months ago.
TT2 "no decoration" does not work
Screen Shot on 2022-10-25 at 11:29:12.png (226.5 KB) - added by mrfoxtalbot 18 months ago.
TT3 "no decoration" does work

Download all attachments as: .zip

Change History (5)

@mrfoxtalbot
18 months ago

TT2 "no decoration" does not work

@mrfoxtalbot
18 months ago

TT3 "no decoration" does work

#1 @poena
18 months ago

This issue is not theme specific. It affects any theme that has styled the block with CSS.

The control is not aware of underlines or other textdecorations that are not added through the control itself or theme.json.

Because this theme supports WordPress versions that are older than this textdecoration setting, it might not be easy to solve. I'll do some testing.

#2 @poena
18 months ago

First, I confirmed that the original design has no underline on the default state of the link:
https://www.figma.com/file/J9Nr1Xi63Y3dqeWwPLMKa3/Twenty-Twenty-Two-(Copy)?node-id=729%3A4819

TT2 with WP 6.1 RC5 without Gutenberg:

The link's default state has no underline.

Enabling the text decoration none setting actually *adds* an underline to the link default state in the editor and front. The link underline comes from:

.editor-styles-wrapper a {
    color: var(--wp--preset--color--foreground);
    text-decoration: underline;
}

and

a:where(:not(.wp-element-button)) {
    color: var(--wp--preset--color--foreground);
    text-decoration: underline;
}

If we want to fix this in the theme, adding the following to style.css works in 6.1:

.wp-block-navigation.has-text-decoration-none .wp-block-navigation-item a {
	text-decoration: none;
}

TT2 with WP 6.1 RC5 with Gutenberg 14.4.0 active.

The link's default state has an underline in the editor (incorrect) but not on the front (correct).
The link underline comes from:

.editor-styles-wrapper a {
    color: var(--wp--preset--color--foreground);
    text-decoration: underline;
}

On the front, the link underline is removed by:

.wp-block-navigation:where(:not([class*=has-text-decoration])) a {
    text-decoration: none;
}

#3 @karmatosed
2 weeks ago

  • Keywords dev-feedback added
Note: See TracTickets for help on using tickets.