Skip to content

Unable to remove underline from Post Title links #46180

@terra-incognita

Description

@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"
						}
					}
				}
			},
...
  1. Click Update File.
  2. Go to Homepage and notice that the Post Title links are still underlined.
  3. 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.
  4. 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

Screen Shot 2022-11-29 at 9 58 19 PM

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:

Screen Shot 2022-11-29 at 10 15 05 PM

The above theme.json produces the following embedded stylesheet:
204721994-4cb77a4b-24f8-4577-b3db-95de26530828

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

Metadata

Metadata

Labels

Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.json[Block] Post TitleAffects the Post Title Block[Type] BugAn existing feature does not function as intended

Type

No type
No fields configured for issues without a type.

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions