Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Site Title block: Not able to remove underline #30701

Open
paaljoachim opened this issue Apr 10, 2021 · 31 comments
Open

Site Title block: Not able to remove underline #30701

paaljoachim opened this issue Apr 10, 2021 · 31 comments
Labels
[Block] Site Title Affects the Site Title Block [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") Needs Technical Feedback Needs testing from a developer perspective. [Priority] Low Used to indicate that the issue at hand isn't a top priority to address and can be handled later [Type] Enhancement A suggestion for improvement.

Comments

@paaljoachim
Copy link
Contributor

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:
Site-title-underlined

Screen Shot 2021-04-10 at 18 13 22

Frontend:
Screen Shot 2021-04-10 at 18 13 39

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
@paaljoachim paaljoachim added [Block] Site Title Affects the Site Title Block [Feature] Full Site Editing [Type] Bug An existing feature does not function as intended labels Apr 10, 2021
@carolinan
Copy link
Contributor

carolinan commented Apr 11, 2021

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
Copy link
Contributor Author

paaljoachim commented Apr 11, 2021

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
Copy link
Contributor

So this is a duplicate of #23011 ?

@paaljoachim
Copy link
Contributor Author

paaljoachim commented Apr 12, 2021

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
Copy link
Contributor

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
Copy link
Contributor

carolinan commented Apr 18, 2021

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
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Member

mirka commented Nov 22, 2021

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

@paaljoachim
Copy link
Contributor Author

paaljoachim commented Nov 22, 2021

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.

Screenshot 2021-11-22 at 13 17 15

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

@mirka
Copy link
Member

mirka commented Nov 22, 2021

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
Copy link
Member

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:

image

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

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

image

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

image

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:

image

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

@PerryRylance
Copy link

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

@carolinan carolinan added the Needs Testing Needs further testing to be confirmed. label Jan 31, 2022
@carolinan
Copy link
Contributor

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
Copy link

TinPoChan commented Feb 18, 2022

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
Copy link
Member

ramonjd commented Mar 23, 2022

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:

Screen Shot 2022-03-24 at 8 33 01 am

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.

Screen Shot 2022-03-24 at 8 43 35 am

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
Copy link
Contributor Author

paaljoachim commented Jul 26, 2022

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:

Screenshot 2022-07-26 at 09 27 39


--

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

@ndiego
Copy link
Member

ndiego commented Aug 2, 2022

@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 paaljoachim added [Type] Enhancement A suggestion for improvement. and removed [Type] Bug An existing feature does not function as intended labels Aug 2, 2022
@paaljoachim
Copy link
Contributor Author

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

@github-actions github-actions bot added the [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. label Sep 2, 2022
@kathrynwp kathrynwp removed the [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. label Sep 5, 2022
@Thelmachido Thelmachido removed the Needs Testing Needs further testing to be confirmed. label Sep 23, 2022
@Thelmachido Thelmachido added the [Priority] Low Used to indicate that the issue at hand isn't a top priority to address and can be handled later label Sep 23, 2022
@Thelmachido
Copy link

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.

Untitled

WordPress 6.0.2
Gutenberg 14.1.1
TT2 theme

@ramonjd
Copy link
Member

ramonjd commented Nov 3, 2022

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:

2022-11-04 09 00 25

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?

Screen Shot 2022-11-04 at 8 58 08 am

What do you reckon @aaronrobertshaw?

cc / @paaljoachim

@aaronrobertshaw
Copy link
Contributor

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
Copy link
Contributor Author

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
Copy link
Contributor Author

paaljoachim commented Nov 12, 2022

Retesting using WordPress 6.1.
Gutenberg plugin 14.5

Various default themes.

TT1.

Has the Site Title block text underlined.

Screenshot 2022-11-12 at 09 12 19

Backend and frontend.


Twenty Twenty Two

Has the Site Title block text underlined.

Screenshot 2022-11-12 at 09 14 12

Backend and frontend.


Twenty Twenty Three

Underlined in the backend.
Screenshot 2022-11-12 at 09 16 54

But not the frontend.
Screenshot 2022-11-12 at 09 17 00

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:
Screenshot 2022-11-12 at 09 23 46

To:

Screenshot 2022-11-12 at 09 23 06 + Letter spacing and whatever else that has not yet been added.

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

@scruffian
Copy link
Contributor

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

@aaronrobertshaw
Copy link
Contributor

@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 paaljoachim added the Needs Technical Feedback Needs testing from a developer perspective. label Nov 16, 2022
@paaljoachim
Copy link
Contributor Author

paaljoachim commented Nov 16, 2022

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
Copy link
Contributor Author

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.

@annezazu annezazu added [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") and removed [Feature] Full Site Editing labels Jul 24, 2023
@paaljoachim
Copy link
Contributor Author

Retesting this issue.
Gutenberg plugin 19.1.0 is active.

Twenty Twenty One.
Backend.
Screenshot 2024-08-30 at 21 16 48

Frontend.
Screenshot 2024-08-30 at 21 16 59

Twenty Twenty Two
Also has an underline.
If I open up Typography -> Decoration and click Underline I see a double underline backend and frontend.
Screenshot 2024-08-30 at 21 21 31

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
Copy link
Contributor

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
Copy link
Contributor Author

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.

Screenshot 2024-09-04 at 23 28 59


2022

Site title has an underline.

Screenshot 2024-09-04 at 23 32 18

Hello world!
Does not have an underline.
Screenshot 2024-09-04 at 23 33 33

--

2023

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

Screenshot 2024-09-04 at 23 35 10

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Site Title Affects the Site Title Block [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") Needs Technical Feedback Needs testing from a developer perspective. [Priority] Low Used to indicate that the issue at hand isn't a top priority to address and can be handled later [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests