-
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
Add quick uppercase option #20801
Comments
Do you imagine this would be an option to control the styling of the text (i.e. |
By coincidence, I just stumbled upon this related conversation: https://core.trac.wordpress.org/ticket/48412 From @afercia :
|
I imagined an option that controls the styling of the text. |
@iamtakashi You could use EditorsKit plugin which adds Uppercase Text Transforms and other formats. I hope this could help. Thanks! |
@phpbits Thanks! I've also seen this option in other plugins too. That suggests it's a popular feature, and it's worth considering adding it to Gutenberg as well. |
A while ago there was an interesting conversation on Slack #accessibility about uppercase text and its impact on assistive technologies: https://wordpress.slack.com/archives/C02RP4X03/p1573228360336200 (requires registration) Real case from another project: "ADD SITE" (styled with text-transform) Apart from accessibility concerns, uppercase text does have a meaning, whether it's "more important"., "shouting", or anything else. Meaning should be separate from presentation and not rely on CSS. It might also have impact on SEO, as some text styled as uppercase might be perceived as lowercase by search engines. Users already have the ability to type uppercase text, if they want to do so. Worth also considering that copy/paste operations appear to behave differently across browsers. For example, copying and pasting some lowercase text transformed with
|
Also somewhat related: #20739 |
This is good context. I think it's super important as we expand the customization tools to ensure the outcome is the most semantic representation possible — and that we keep improving upon it. Is it clear if the limitations of |
I can see both sides here regarding adding uppercase. I can see how it's a nice option for people, I can also see how it makes longer text, over one sentence harder to read. In this case, I would probably advise a few options:
|
Seems .com uses CSS though: which bring us to the previous point:
|
Yup, it is. |
For follow-up, I'm curious if there are ways to avoid that. Does that always happen with every reader, in every case of text-transform? Are there cases where it doesn't? (I'm curious about the mechanics of that.)
I am definitely not an SEO expert. It would be good to get a teensy bit of research here. My quick looking around suggests that it is not a concern. Fwiw, I can think of a somewhat SEO-related case where using text-transform would be preferable for this block. My site-title block. It seems relatively common to have a site-title styled in all uppercase in some sort of header treatment. That text is special since it's drawn from the database. If I wanted to re-purpose that text again in the footer of my site but lowercase — would I have to not use a site-title block in order to have it styled differently there if it wasn't using CSS? I can see this being important for themes. But the SEO thing: If I wanted my site-title to appear in uppercase and couldn't use styles that could potentially affect how it appears in search results since it's also re-purposed in the title element? Without text-transform styles users could be creating titles like "IAN'S BLOG" for visual reasons and wondering why people searching for it always saw, relatively un-professional or hokey in this context, uppercase in search results. That's partly why I wondered if there were any technical ways to resolve the display issue to also address a11y needs, especially, for screen readers. |
I believe that @ItsJonQ Jon is working on improving the typography controls used in the sidebar for various blocks that have a focus on text. Transform I believe might be one of the controls. |
Related issue #28106 |
Btw here is a PR that uses the new typography options. |
related #22163 |
Closing this issue as I think the tools required to achieve the desired effects are there. Feel free to reopen if this isn't the case. Thank you! |
I've tested this feature using WordPress 5.9-alpha-52192, and it looks like the options adds Is it possible to use CSS class instead of inline styling for the letter case? Maybe something similar that we have right now for the text alignment: |
👋 Many of the block supports add inline styles to a block's container element, for example, padding, margin and other typography settings. One advantage is that inline styles provide high specificity, which is great since user-defined values will override any theme defaults, which, I believe, is the intention. Is there a specific reason for using a CSS class in this instance? |
Thank you very much for explanation 🙏 It makes sense now. |
I apologize for bringing up an old issue, but I am currently experiencing a problem with the inline styles that have been added. We would like to utilize a class instead, because the uppercase text requires a different letter-spacing in our design. Is there a way to achieve this? |
Thank you for you reply. Unfortunatly, that is not what we need. Because of the font we are using, we always want to have a fixed letter spacing value for font that is all uppercase. |
You can leverage theme.json Here's how I did it with the Or you can skip theme.json and do it right within Global Styles > Blocks > Heading > Typography, which would apply that spacing globally across all heading blocks. |
It'd be great if there is an uppercase option for text so the user can change text to uppercase quickly without actually typing it in uppercase.
The text was updated successfully, but these errors were encountered: