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

[mrfoxtalbot]

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

[mrfoxtalbot]

TT2 "no decoration" does not work

[mrfoxtalbot]

TT3 "no decoration" does work

[poena]

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.

[poena]

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