Add quick uppercase option

[iamtakashi]

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.

[aduth]

Do you imagine this would be an option to control the styling of the text (i.e. text-transform), or transforming the content itself? Not sure if the latter might have any impact on zero or more of: Ability to copy text meaningfully, ability to translate, accessibility, HTML semantics (SEO, etc).

[aduth]

Not sure if [transforming the content] might have any impact on zero or more of: Ability to copy text meaningfully, ability to translate, accessibility, HTML semantics (SEO, etc).

By coincidence, I just stumbled upon this related conversation:

https://core.trac.wordpress.org/ticket/48412

From @afercia :

I'd like to propose to remove all of them: all caps should be avoided for better readability and because screen readers may pronounce all caps words as abbreviations.

[iamtakashi]

Do you imagine this would be an option to control the styling of the text (i.e. text-transform), or transforming the content itself?

I imagined an option that controls the styling of the text.

[phpbits]

@iamtakashi You could use EditorsKit plugin which adds Uppercase Text Transforms and other formats. I hope this could help. Thanks!

[iamtakashi]

@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.

[afercia]

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)
was being read out as "ei dee dee site" 🙂

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 text-transform: uppercase:

• Chrome: the pasted text is uppercase
• Firefox: the pasted text is lowercase

[mtias]

Also somewhat related: #20739

[mtias]

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 text-transform are structural or implementation details of how browsers are interpreting it?

[karmatosed]

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:

• Limit to headings, button and cover blocks. Basically, all short-form text feels a compromise here.
• Add a warning similar to contrast if we do add to all text blocks.

[lancewillett]

On WordPress.com sites we employ a tool in the formatting bar to quickly change text to uppercase:

I'm not 100% sure, but I believe it loads from the CoBlocks plugin.

[afercia]

Seems .com uses CSS though: <span class="uppercase">text</span>

which bring us to the previous point:

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 ...

[richtabor]

I'm not 100% sure, but I believe it loads from the CoBlocks plugin.

Yup, it is.

[ianstewart]

Is it clear if the limitations of text-transform are structural or implementation details of how browsers are interpreting it?
— mtias

Real case from another project:
"ADD SITE" (styled with text-transform)
was being read out as "ei dee dee site" 🙂
— afercia

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.)

It might also have impact on SEO, as some text styled as uppercase might be perceived as lowercase by search engines.
— aferica

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.

[iamtakashi]

It's not uncommon to display post titles and meta (category, date, etc.) in all uppercase too. It'd be a real pain if the users need to type all uppercase all the time.

[paaljoachim]

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.

[ianstewart]

Related issue #28106

[paaljoachim]

Btw here is a PR that uses the new typography options.
#29623

[skorasaurus]

related #22163

[ramonjd]

👋 Since #34064 most core text blocks have support for text transforms:

Post Title styles can also be targeted in the Site Editor since #31623

What do folks think? Are these merged typography supports PRs sufficient to close this issue?

[ramonjd]

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!

[dashkevych]

I've tested this feature using WordPress 5.9-alpha-52192, and it looks like the options adds style="text-transform:uppercase" to the element to change text to uppercase.

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: has-text-align-left, has-text-align-center, has-text-align-right

[ramonjd]

Is it possible to use CSS class instead of inline styling for the letter case?

👋

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?

[dashkevych]

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.

Thank you very much for explanation 🙏 It makes sense now.

[peXed]

@ramonjd

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?

[richtabor]

Is there a way to achieve this?

You can now also add tracking/letter-spacing to blocks:

[peXed]

Is there a way to achieve this?

You can now also add tracking/letter-spacing to blocks:

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.
Always setting the letter spacing by hand will cause a lot of errors.

[richtabor]

You can leverage theme.json styles.blocks settings to add letterSpacing to specific blocks — or styles.typography to apply it across the whole site.

Here's how I did it with the core/navigation blocks, but you can do the same with elements.headings to target all headings:

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.