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

Add quick uppercase option #20801

Closed
Tracked by #33447
iamtakashi opened this issue Mar 11, 2020 · 27 comments
Closed
Tracked by #33447

Add quick uppercase option #20801

iamtakashi opened this issue Mar 11, 2020 · 27 comments
Assignees
Labels
[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement.

Comments

@iamtakashi
Copy link

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.

Pattern 38

@aduth
Copy link
Member

aduth commented Mar 11, 2020

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

aduth commented Mar 11, 2020

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

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.

@aduth aduth added the [Type] Enhancement A suggestion for improvement. label Mar 11, 2020
@phpbits
Copy link
Contributor

phpbits commented Mar 12, 2020

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

@iamtakashi
Copy link
Author

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

afercia commented Mar 12, 2020

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

mtias commented Mar 13, 2020

Also somewhat related: #20739

@mtias mtias added [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable Needs Design Feedback Needs general design feedback. labels Mar 13, 2020
@mtias
Copy link
Member

mtias commented Mar 13, 2020

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

karmatosed commented Mar 16, 2020

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

lancewillett commented Apr 4, 2020

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

Screen Shot 2020-04-04 at 12 39 52

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

@afercia
Copy link
Contributor

afercia commented Apr 6, 2020

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

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

Yup, it is.

@ianstewart
Copy link
Contributor

ianstewart commented Aug 7, 2020

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

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.

Screenshot 2020-09-21 at 11 29 22

@paaljoachim
Copy link
Contributor

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

Related issue #28106

@paaljoachim
Copy link
Contributor

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

@skorasaurus
Copy link
Member

related #22163

@ramonjd
Copy link
Member

ramonjd commented Nov 9, 2021

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

Nov-09-2021 11-44-52

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

Screen Shot 2021-11-09 at 11 56 02 am

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

@ramonjd
Copy link
Member

ramonjd commented Nov 11, 2021

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!

@ramonjd ramonjd closed this as completed Nov 11, 2021
Repository owner moved this from ⏱ Not Started to ✅ Done in Design Tools Project Nov 11, 2021
@dashkevych
Copy link

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

ramonjd commented Nov 17, 2021

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

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

peXed commented Jan 25, 2023

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

Is there a way to achieve this?

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

CleanShot 2023-01-25 at 13 43 29

@peXed
Copy link

peXed commented Feb 10, 2023

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

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:

CleanShot 2023-02-10 at 10 09 21

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.

CleanShot 2023-02-10 at 10 11 03

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement.
Projects
Status: Done
Development

No branches or pull requests