Unable to remove underline from Post Title links

[terra-incognita]

Description

Post Title blocks have an option to turn the title into a link, as you'd want on a homepage. But you can't set text-decoration on such links from the editor. It's always just underlined.

Even if you edit theme.json, the WP-generated #wp-block-post-title-inline-css embedded stylesheet seems to ignore what you set for textDecoration on Post Title links even though:

• it respects other typography attributes, such as fontWeight and fontSize
• it lets you set textDecoration for :hover, :active and :focus for Post Title links

I also tried adding :link or :any-link selectors as an attempted workaround, but WP just ignored them.

Step-by-step reproduction instructions

1. Install WP 6.1.1.
2. Apply the Twenty Twenty-Three theme.
3. Edit the Home template.
4. Select the Post Title block.
5. Make sure Make title a link is enabled in the settings for that block.
6. Add the Decoration typography option in the block settings.
7. Set it to - (none).
8. Observe that nothing happens, and the links are still underlined.
9. Go to Tools > Theme File Editor and select the Twenty Twenty-Three theme.
10. Click on Theme Styles & Block Settings (theme.json) from the file selector.
11. Search for the core/post-title block under styles > blocks, and try to set the Post Title block's "link" element's textDecoration to "none":

...
			"core/post-title": {
				...
				"elements": {
					"link": {
						":hover": {
							...
						},
						":focus": {
							...
						},
						":active": {
							...
						},
						"typography": {
							"textDecoration": "none"
						}
					}
				}
			},
...

12. Click Update File.
13. Go to Homepage and notice that the Post Title links are still underlined.
14. Look at the #wp-block-post-title-inline-css <style> element and notice that the .wp-block-navigation a:where(:not(.wp-element-button)) selector still has text-decoration: underline.
15. Try setting the fontSize or fontWeight attribute on Post Title links in the exact same place as above in theme.json. Notice that the embedded stylesheet changes to reflect those values, and your Post Title links can have a custom size or weight, just not text-decoration.

Screenshots, screen recording, code snippet

The text-decoration attribute on the .wp-block-post-title a:where(:not(.wp-element-button)) selector will always be set to underline no matter what you do.

You can add font-weight or font-size to that selector. But WP won't let you change the text-decoration attribute:

The above theme.json produces the following embedded stylesheet:

Environment info

• WordPress 6.1.1
• Chrome on MacOS

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[calvin-powers]

I have this issue too. I am on WP 6.1.1 using Firefox Browser on Windows. I believe my issue is the same as this one. Here's how I described it elsewhere:

If you have the "Make Title A Link" option turned OFF, you can change the typography all you want, including setting the typography decorations.

But if you turn the "Make Title A Link" ON, text decorations do not work. Size, Line Height, Appearance, and Letter case all work just fine. But Decoration does not work.

I ran across this because I have a somewhat brutalist approach to web pages. In my world, if text is clickable, it must be visibly underlined at all times.

Ideally, I would like to see two complete sets of typography options. One set of typography options for when it's just displayed and another set of typography options for :hover. So for example, I would like to have the text underlined at all times but if a mouse is hovering over it, I'd like change the text to bold. And then have it go back to normal when the mouse is no longer hovering over it. I see no way to do this with the current behavior.

[aaronrobertshaw]

Thanks for writing up this issue @terra-incognita 👍

Testing with the latest version of the TwentyTwentyThree theme, it appears that the Post Title block has the text decoration removed for its link element. If I edit this link element style, to something else e.g. line-through, following the steps in the reproduction instructions here it is reflected in the editors and frontend.

The Post Title block's "make title a link" option semantically changes the markup to include an anchor tag. This link is then subject to the Global Styles element settings.

Please correct me if I'm wrong but the issue as I see it, is that setting typography styles at the block level are not inherited by the block's link element when the "make title a link" option is enabled due to theme.json and global styles for links. This is a problem for more than just text decoration, if the link elements are styled with say a custom font size, that will take precedence over the block's style applied to the wrapper as well.

It might be possible for us to force styles set at the block level for the Post Title block, to be inherited by any inner link. It would involve adding some default block styles that hook onto the addition of inline styles or preset CSS classes on the block wrapper and styling the inner link to then inherit values. This is a bit of a hack and not a very clean option.

Something like the following would allow an individual block's text decoration to override the link element's if set:

.wp-block-post-title[style*="text-decoration"] a {
	text-decoration: inherit;
}

An alternative solution would be to update the post title block to apply all typography styles on the inner anchor tag when set. As Post Title is a dynamic block we might be able to achieve this without the need for a block deprecation.

I'll be AFK for a few weeks, so happy for someone else to explore solutions here. If not, it might be something I can pick up in the new year.

[t-hamano]

It might be possible for us to force styles set at the block level for the Post Title block, to be inherited by any inner link. It would involve adding some default block styles that hook onto the addition of inline styles or preset CSS classes on the block wrapper and styling the inner link to then inherit values. This is a bit of a hack and not a very clean option.

Something like the following would allow an individual block's text decoration to override the link element's if set:

→I was looking for a solution to this and discovered that a similar approach had already been taken in some blocks:

• If a core/button block has text-decoration set, the links inside will inherit it
• Comment reply title in core/post-comments-form block inherits typography-related styles

If this approach is the best we currently have, I would like to test it and submit a PR.

[carolinan]

I believe we need the same for the site title:
#42404

[aadilayub]

It would be nice if we had an option to customize the way links appear in general. Different sites choose different methods of making links stand out, such as changing text color, adding a background highlight, etc. Currently there is no way to do this inside Gutenberg or theme.json.

Here I'm talking about changing the appearance of specific links, or links within a section, as opposed to changing the appearance of links globally.

[aaronrobertshaw]

Here I'm talking about changing the appearance of specific links, or links within a section, as opposed to changing the appearance of links globally.

HI @aadilayub 👋

There's is actually some ongoing work at the moment that will help address this. You can follow along or gain some extra context via #57537.

In essence, block style variations are being extended to allow support for element styles. This would open up the possibility to create a block style variation for the container block being used for a section of your page and style the links there differently to the global link styles.

[noisysocks]

Ran into this yesterday while creating a block theme. Reproduced the issue with the Emptytheme theme. Definitely frustrating.

Kapture.2024-06-04.at.15.08.00.mp4

[aadilayub]

HI @aadilayub 👋

There's is actually some ongoing work at the moment that will help address this. You can follow along or gain some extra context via #57537.

In essence, block style variations are being extended to allow support for element styles. This would open up the possibility to create a block style variation for the container block being used for a section of your page and style the links there differently to the global link styles.

@aaronrobertshaw thanks for the recommendation! This is a potential solution, but I don't know if it is a good idea to create a whole separate style variation for styling links differently on a section of a page. I was hoping there could be some solution like going in and setting typography/color styles for links directly, similar to how we currently do for paragraph, heading blocks.

[jorgefilipecosta]

This issue creates a bad experience as it seems like the editor does not follow what we defined.
I think the solution for this issue is on the post title, site title, etc change this markup:

<h2 style="text-decoration:line-through;" class="wp-block-post-title"><a href="http://localhost:7888/site-wp-dev/2024/05/31/gfhgfhgfhfg4-copy/" target="_self">gfhgfhgfhfg4 (Copy)</a></h2>

Into this one:

<h2><a style="text-decoration:line-through;" class="wp-block-post-title" href="http://localhost:7888/site-wp-dev/2024/05/31/gfhgfhgfhfg4-copy/" target="_self">gfhgfhgfhfg4 (Copy)</a></h2>

It is not a perfect solution it goes a little against the convention that wp-block-* class is the wrapper of a block, but I think the results people get would be better.

Any thoughts on this solution?

[rafaelgallani]

This issue creates a bad experience as it seems like the editor does not follow what we defined. I think the solution for this issue is on the post title, site title, etc change this markup:

<h2 style="text-decoration:line-through;" class="wp-block-post-title"><a href="http://localhost:7888/site-wp-dev/2024/05/31/gfhgfhgfhfg4-copy/" target="_self">gfhgfhgfhfg4 (Copy)</a></h2>

Into this one:

<h2><a style="text-decoration:line-through;" class="wp-block-post-title" href="http://localhost:7888/site-wp-dev/2024/05/31/gfhgfhgfhfg4-copy/" target="_self">gfhgfhgfhfg4 (Copy)</a></h2>

It is not a perfect solution it goes a little against the convention that wp-block-* class is the wrapper of a block, but I think the results people get would be better.

Any thoughts on this solution?

@jorgefilipecosta What about this: #64911?

I'm still working on the description, but I think this is a good solution to handle both theme.json specific styles being applied and also handling the issue described here. I'm unsure (Gutenberg/convention-wise) whether it'd be OK to update the selectors in the block.json.

[noisysocks]

@rafaelgallani: Did #64911 fix this issue?

[rafaelgallani]

@rafaelgallani: Did #64911 fix this issue?

Hey, @noisysocks! Yes, I haven't been able to reproduce any of the linked issues in #64911, but I wanted a second opinion before closing them... Or should I just close them and have someone reopen them if they still persist?

[noisysocks]

Yes you can close them if your PR fixed those issues! We can always re-open as you say.

[jorgefilipecosta]

Cosing as the issue is now fixed.