Site Title block: Not able to remove underline

[paaljoachim]

Description

In Full Site Editing.
Site Title block.
I am not able to remove the underline.

Step-by-step reproduction instructions

1. In TT1 Full Site Editing.
2. Add a Site Title.
3. Notice the underline.
4. It can not be removed.

Expected behaviour

I expected there to be a way to remove the underline.

Actual behaviour

This is what I see:

Backend:

Frontend:

WordPress information

• WordPress version: 5.7
• Gutenberg version: 10.3.2
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? TT1

Device information

• Device: Desktop
• Operating system: OSX
• Browser: Chrome

[carolinan]

I also noticed this yesterday: The site title is a link, but if I add

		"core/site-title": {
			"typography": {
				"textDecoration": "none"
			}
		},

to the experimental-theme.json file, this rule is added only to the heading /p element, not the link.

@paaljoachim Unless you are using TT1 Blocks it is just an ordinary link underline that can be removed with CSS by targeting the class in the element wrapper.

(TT1 Blocks changes this because it is adding the link underline in the editor.)

[paaljoachim]

I tested again this time using Gutenberg RC 10.4
WP 5.7 and TT1

From what I see the Site Title needs its own link decoration UI control. (Perhaps a link control panel in the sidebar.) Which should be the same on the backend and frontend. As one might want to not have any underlining or other text decoration effects, but still might want to change the hover color for just the Site Title.

Site-Title-block-underline.mp4

[carolinan]

So this is a duplicate of #23011 ?

[paaljoachim]

I was thinking a sidebar link control panel. For text decoration in relation to hover and other link effects such as color.
I would likely also be in the Global Styles.

In general there should be an easy way to change text decoration through the UI. To turn off underline etc.

[priethor]

It's worth noting that this doesn't happen when setting the Site Title to H1, as the blocks.css includes the following code:

/*--------------------------------------------------------------
# Site Title
--------------------------------------------------------------*/

h1.wp-block-site-title a:not(:hover):not(:focus):not(:active) {
	text-decoration: none;
}

Would there be any contraindication to directly removing the underline from all heading levels?

[carolinan]

All links should be underlined by default, it is also the browser default, removing them would have a negative impact on accessibility, that I don't think should be encouraged.

I mean that not having an underline should not be the default.

[creativecoder]

Note that I'm attempting to solve this for the Post Title block over in #31623, using the relevant block supports for typography.

The post title and site title blocks are very similar--the solution should generalize to both blocks.

[glendaviesnz]

I have added some additional formatting options to the site title in #31734, but will wait until #31623 lands before looking at the underlining, because as @creativecoder notes it should just reflect what is decided for the post title.

[mirka]

Can this issue be closed, given that it's been decided not to expose underline controls on the Site Title block?

[paaljoachim]

Hey @mirka Lena

It would be helpful to give the user somekind of easy to decide option on how they are to style the Site Title. Which includes the underline. It could of course could be added somewhere in a sub panel inside the Typography panel.

Should we include warnings when a user decides to do something that works against accessibility? Something similar to the color contrast warnings?

[mirka]

So the next steps for this issue would be to devise some kind of warning system, as described in #31623 (comment) ?

We already have a system in place to optionally show the Text Decoration controls as part of the Typography panel, so my understanding is that a warning system is now being considered a prerequisite for this option to be added back.

[zaguiini]

Hi all!

What if we adapt to whatever the live site styles are?

The Blockbase theme, for example, does not add the underline style to the site title:

Look how "gutenberg" (the site title) does not have an underline.

But I am seeing it when using the Site Title block inside FSE:

That's because we're forcing underline via CSS for all links inside a block:

That anchor is wrapped on h1.wp-block-site-title, and the styling for that varies by theme, not directly related to FSE.

On Blockbase, that selector has a rule to remove text-decoration:

And Gutenberg is not respecting that. Which leads to inconsistency and, as a consequence, confusing user experience.

[PerryRylance]

I'm trying to remove the underline on all headings by default, I gather this is still outstanding?

[carolinan]

The only block that had the textDecoration control (underline, strike through) enabled was the navigation block.
This was temporarily removed because of bugs: #37963

To remove underlines one can use elements in theme.json. Removing it from the heading block also removes it from
the post title, site title etc as long as they are h1-h6 elements:

{
	"version": 2,
	"styles": {
		"blocks": {
			"core/heading": {
				"elements": {
					"link": {
						"typography": {
							"textDecoration": "none"
						}
					}
				}
			}
		}
	}
}

Resulting CSS:

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    text-decoration: none;
}

[TinPoChan]

I am really surprised that this is still open after all the months... I simply go to the css file and change all the a element to:

a {
	text-decoration: none;
}

[ramonjd]

Just adding some context:

We added Typography default controls for the Site Title block over at #34064

It was decided to hold off on adding text decoration controls due to the challenging nature of inheritance and accessibility; issues already mentioned above.

See the discussion: #35604 (comment)

I enabled text decoration for the Site Title to test things out:

At the moment the control adds an inline style of text-decoration: underline; when activated and nothing when not, which means it will inherit.

Either way the default underline for <a /> displays.

Dealing with that inheritance is where the balance lies I feel, that is allowing the default <a /> rules to flow through where no text decoration block support value is present.

Perhaps the text decoration control needs an extension to cover text-decoration-thickness and text-underline-offset as @kjellr raises.

[paaljoachim]

Associated issue:
FSE Link Styles: can we have an option to control underlines?
#40002

From the looks of it it looks like WP 6.0 and Gutenberg plugin 13.7.2 do not have the Decoration area any longer.
I selected the Site Title block and see this:

---

--

It would be nice with a status update. To get an understanding how things are going.

[ndiego]

@paaljoachim are you ok with converting this issue from a "bug" to an "enhancement"? It looks like everything is working correctly, the functionality for controling text decoration on Site Title blocks just hasn't been implemented yet.

[paaljoachim]

Hey @ndiego Nick. Good point! I have adjusted.

[Thelmachido]

The Site Title still has the default text underline, however, l can see the Decoration settings under styles but they don't remove the default text underline.

WordPress 6.0.2
Gutenberg 14.1.1
TT2 theme

[ramonjd]

The Site Title still has the default text underline, however, l can see the Decoration settings under styles but they don't remove the default text underline.

I think this is because the default style of link elements has text-decoration: underline enabled. See the theme.json

Setting that to the following:

			"link": {
				"typography": {
					"textDecoration": "none"
				}
			}

And it works:

So, I'd say it's up to the theme to override this, but yeah it seems a bit strange when the control appears to have no effect.

Maybe another approach would be to enable textDecoration for link elements in global styles?

What do you reckon @aaronrobertshaw?

cc / @paaljoachim

[aaronrobertshaw]

I think this is because the default style of link elements has text-decoration: underline

Text decoration is a bit of a special case. Browsers render it differently than other typographic styles. Once it is applied to the parent, it can't really be overridden on inner elements.

In this case, setting the inner link text-decoration to none means the parent text-decoration is painted on all child elements hence visually now looking to work (well, visually working is all there really is here). Note that the none isn't being honoured.

Maybe another approach would be to enable text-decoration for link elements in global styles?

There was a deliberate decision not to expose text decoration in Global Styles as the general feeling was it shouldn't be set globally, especially given the way text-decoration is rendered differently by browsers compared to other typographic styles.

However, if theme.json is going to set values that can't be overridden on elements as opposed to blocks, we need some kind of solution.

We could update the Site Title block to apply the text decoration styles to the inner link element if it has one. This would only address individual blocks, not all Site Title blocks if styled via theme.json. In that case, however, the theme author could just define the inner link's text-decoration style via the elements API similar to how it was done here.

Another thing to consider is the UX impact of removing the underline text decoration from links. I believe the text-decoration controls on the Site Title were more geared to when the title wasn't a link. The confusion when it is a link is a concern, as this issue highlights.

[paaljoachim]

It would be helpful to also add the underline option to the textDecoration along with the other options. Removing underline for links an accessibility warning could show up. Letting the user know that removing underline for links is a bad idea, but it can be done if the user wants. Similar to using low contrast background and text colors gives a warning.

[paaljoachim]

Retesting using WordPress 6.1.
Gutenberg plugin 14.5

Various default themes.

TT1.

Has the Site Title block text underlined.

Backend and frontend.

---

Twenty Twenty Two

Has the Site Title block text underlined.

Backend and frontend.

---

Twenty Twenty Three

Underlined in the backend.

But not the frontend.

I believe this now merged PR Global Styles: Elements: Add a text decoration control to link elements #45643
will also have an impact on this issue.

Can we now update the Site Title block Typography panel so that we have a consistent Typography panel for all areas where it is used.

Going from:

To:

+ Letter spacing and whatever else that has not yet been added.

@scruffian Ben could you perhaps take a look at this issue? Thanks.

[scruffian]

I'd love to, but I am unlikely to have time to look at it until after 6.2.

[aaronrobertshaw]

@paaljoachim I've gone on a bit of an exploration for some possible solutions here. They each have some quirks but I'll try and outline them clearly below.

Problem

We want a means of setting text decoration (including none) on individual blocks as well as theme.json & global styles.

Possible Solutions

Individual Blocks

1. Skip serialization of text-decoration and apply it to the inner a element or leave it on the outer wrapper if the site title isn't to include a link
   • Pro: No additional CSS
   • Con: Adds more complexity to the block requiring updates to block.json, edit.js, and index.php
2. Add simple CSS rule to inherit text-decoration when it is inlined on the Site Title block's wrapper
   • Pro: Very simple and just works
   • Con: Adds an extra CSS rule to the block's styles

Personally, I'd prefer option 2 here but don't feel strongly about it.

Theme.json & Global Styles

1. Rely on the elements API for configuring text-decoration on the Site Title's inner link.
   • Pro: No changes required to the block
   • Con: If we decide to expose text-decoration in Global Styles for the Site Title block, it will be broken. (theme.json styles would target outer wrapper)
   • Con: Requires theme authors to know they have to use the elements API within the Site Title block styles to set text-decoration. This would be inconsistent with the rest of the typography styles here.
2. Use block.json feature-level selectors so that theme.json (and therefore Global Styles) can generate styles for the inner link without needing the elements API
   • Pro: A little more future proof than option 1 as if we do make text-decoration available for the Site Title block in Global Styles, it would work out of the box.
   • Pro: Configuration in theme.json is more succinct and ergonomic for theme authors
   • Pro: Configuring text-decoration in theme.json is consistent with the rest of the typography styles
   • Con: Relies on some unexpected behaviour of feature-level selectors to generate selectors that target both the root block wrapper and the inner link i.e. it sets __experimentalSelector to , a. Feature-level selectors split that value on the , and append the result to the root block selector.

I'm undecided as to the better option here. If we can be sure that we will not expose text-decoration for Site Title in the Global Styles, then option 1 requires no changes at all. If we can't then option 2 might be a slightly better option. More so, if we were to formalize that the , a feature-level selector is an accepted use of that property.

If we get a consensus on which approach is desired, I'd be happy to knock up a PR.

Let me know what you think 🙂

---

Can we now update the Site Title block Typography panel so that we have a consistent Typography panel for all areas where it is used.

When text-decoration support was added, there was a clear decision made that it should not be exposed in Global Styles. It isn't something that should be configured globally by users. Having said that, we can revisit that decision if there is sufficient desire and use cases.

I'm not sure we need 100% consistency between the block editor and the global styles typography panels given their slightly different contexts and uses. One thing to note is that all controls in Global Styles typography panels are displayed by default, while only a curated subset of them are displayed by default on individual blocks.

[paaljoachim]

Thank you for sharing your explorations @aaronrobertshaw !
I added your comment to todays core editor agenda to give it more exposure.
I am wondering if @tellthemachines Isabel might have some additional comments to add to this issue.
I also went ahead and added the label "Needs Technical Feedback".

[paaljoachim]

I see this issue has stopped up.
Does anyone have any feedback to share related to adding underline to the Typography toolset or something else related to this issue.....? Thanks.

[paaljoachim]

Retesting this issue.
Gutenberg plugin 19.1.0 is active.

Twenty Twenty One.
Backend.

Frontend.

Twenty Twenty Two
Also has an underline.
If I open up Typography -> Decoration and click Underline I see a double underline backend and frontend.

Twenty Twenty Three
--> Does not have any underline in backend or frontend.

Twenty Twenty Four
---> Does not have any underline in backend or frontend.

[rafaelgallani]

I see this issue has stopped up. Does anyone have any feedback to share related to adding underline to the Typography toolset or something else related to this issue.....? Thanks.

Howdy @paaljoachim! Could you test this one with #64911 and see if that fixes it? I'm trying to gather all related issues to add them to its description.

[paaljoachim]

Hey @rafaelgallani

Testing #64911 using Playground where I installed 2021, 2022 and 2023 themes.
https://playground.wordpress.net/gutenberg.html

2021
Site title does not have an underline.
Hello world post title has an underline.

---

2022

Site title has an underline.

Hello world!
Does not have an underline.

--

2023

Site title does not have an underline.
Hello World post title does not have an underline.