-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Comments
I also noticed this yesterday: The site title is a link, but if I add
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.) |
I tested again this time using Gutenberg RC 10.4 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 |
So this is a duplicate of #23011 ? |
I was thinking a sidebar link control panel. For text decoration in relation to hover and other link effects such as color. In general there should be an easy way to change text decoration through the UI. To turn off underline etc. |
It's worth noting that this doesn't happen when setting the Site Title to H1, as the blocks.css includes the following code:
Would there be any contraindication to directly removing the underline from all heading levels? |
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. |
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. |
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. |
Can this issue be closed, given that it's been decided not to expose underline controls on the Site Title block? |
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? |
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. |
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 That's because we're forcing underline via CSS for all links inside a block: That anchor is wrapped on 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. |
I'm trying to remove the underline on all headings by default, I gather this is still outstanding? |
The only block that had the textDecoration control (underline, strike through) enabled was the navigation block. To remove underlines one can use elements in theme.json. Removing it from the heading block also removes it from
Resulting CSS:
|
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:
|
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 Either way the default underline for Dealing with that inheritance is where the balance lies I feel, that is allowing the default Perhaps the text decoration control needs an extension to cover |
Associated issue: 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. -- It would be nice with a status update. To get an understanding how things are going. |
@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. |
Hey @ndiego Nick. Good point! I have adjusted. |
I think this is because the default style of link elements has 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 What do you reckon @aaronrobertshaw? cc / @paaljoachim |
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
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 |
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. |
Retesting using WordPress 6.1. Various default themes. TT1.Has the Site Title block text underlined. Backend and frontend. Twenty Twenty TwoHas the Site Title block text underlined. Backend and frontend. Twenty Twenty ThreeI believe this now merged PR Global Styles: Elements: Add a text decoration control to link elements #45643 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. To: + Letter spacing and whatever else that has not yet been added. @scruffian Ben could you perhaps take a look at this issue? Thanks. |
I'd love to, but I am unlikely to have time to look at it until after 6.2. |
@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. ProblemWe want a means of setting text decoration (including Possible SolutionsIndividual Blocks
Personally, I'd prefer option 2 here but don't feel strongly about it. Theme.json & Global Styles
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 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 🙂
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. |
Thank you for sharing your explorations @aaronrobertshaw ! |
I see this issue has stopped up. |
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. |
Hey @rafaelgallani Testing #64911 using Playground where I installed 2021, 2022 and 2023 themes. 2021 2022 Site title has an underline. Hello world! -- 2023 Site title does not have an underline. |
Description
In Full Site Editing.
Site Title block.
I am not able to remove the underline.
Step-by-step reproduction instructions
Expected behaviour
I expected there to be a way to remove the underline.
Actual behaviour
This is what I see:
Backend:
Frontend:
WordPress information
Device information
The text was updated successfully, but these errors were encountered: