Button block not following Letter Case settings in some themes

manuelrebollo-a11y commented 2 years ago

Quick summary

The text in a Button block will display in all-caps, regarding of the typed text or the setting under Typography > Letter Case, in themes such as Archeo and Skatepark.

Steps to reproduce

Edit a Post or Page.
Add a Buttons set with at least one Button block.
Type lower case text in the Button.
Preview the Page or Post.

What you expected to happen

If the Button text is typed in lower case, or if it is set to lower case or mixed case in Typography > Letter Case, this should show in the Preview or Published Page or Post.

What actually happened

The text is all upper case in the Preview and Published Page or Post when using themes such as Archeo or Skatepark.

Context

Customer report in 5362753-zd-woothemes

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

Archeo, Skatepark, perhaps others.

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

No but the platform is still usable

Workaround details

No response

arunsathiya commented 2 years ago

📌 HOUSEKEEPING

Labels ✅
Priority ✅
Replicable on Core - Yes

📌 SCRUBBING

Tested on P2 - no
Tested on Simple - ✅
Tested on AT - ✅
Tested on Self-hosted - ✅

📌 FINDINGS/SCREENSHOTS/VIDEO

I can reproduce on Archeo and Skatepark. This is both on simple and self-hosted.
I cannot reproduce on Twenty Twenty-Two.

📌 ACTIONS

Transferring to themes repository.

📌 Message to Author

None.

github-actions[bot] commented 2 years ago

Support References

This comment is automatically generated. Please do not edit it.

[ ] 5362753-zen
[ ] 5558284-zen

bobmatyas commented 2 years ago

@arunsathiya -

It seems like this is a design choice in Skatepark:

The preview matches the frontend of the site. I think if a user wanted the to adjust the case, a CSS adjustment would be the way to go:

.wp-block-button__link {
    text-transform: unset;
}

I couldn't reproduce on Archeo. I was able to use uppercase, lowercase, and mixed case without an issue and have it reflected on the frontend:

I think we could probably close this issue.

thekingsprojects commented 2 years ago

I just had a case of this reported for Meraki:

[ ] 5558284-zen

I can confirm this happens on a test site, using Meraki and also Pendant (I just tried grabbing another random theme that looked like it had all-caps button text; Marl also seems to default to all-caps but the Letter case setting works for it).

Not sure if this is maybe also a deliberate design choice for Meraki and Pendant? If it is then the CSS should be fine, but just wanted to chime in here in case the Letter case setting should actually be able to override this!

Automattic / themes