Gutenberg: 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: https://github.com/WordPress/gutenberg/issues/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.