Twenty Sixteen theme does not respect letter case styling options in Buttons Block

[pauljacobson]

Quick summary

The Twenty Sixteen theme doesn't seem to respect the letter case styling option (under Typography) in the Buttons Block. It does seem to respect the styling option for regular Paragraph text, though.

Here is a demo of the issue with voiceover:

CleanShot.2024-12-25.at.12.53.07.mp4

Steps to reproduce

1. Add a Buttons block to a post or page on a site with Twenty Sixteen enabled
2. Add text to the button - observe that it is styled as uppercase by default
3. Select the Button or Buttons blocks, try change the letter case option under the block's Typography styles
4. Observe that the letter case for the button text doesn't change based on the letter case selection

What you expected to happen

The button text should change case as letter case selections are made in the block styles.

What actually happened

The letter case option is not being applied to button text.

Impact

Most (> 50%)

Available workarounds?

Yes, easy to implement

If the above answer is "Yes...", outline the workaround.

We can use Custom CSS code to disable the text-transform rule being applied to the button text, like this:

#post-1>div>div:nth-child(2)>div>div>div>a {
    text-transform: none;
}

Platform (Simple and/or Atomic)

Simple

Logs or notes

This was reported in 9209528-zen and tested on sites with a WordPress.com Personal Plan and on a free plan.

Tested on macOS 15.2 using Microsoft Edge Dev browser, v133.0.3014.0

[github-actions]

Support References

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

• 9209528-zen

[ramonjd]

I think this will be fixed by:

• Button Block: Set proper typography for inner elements  WordPress/gutenberg#68023

The bug affects all typography changes to the Button block.

[ramonjd]

WordPress/gutenberg#68023 has been merged so this issue should be fixed with Gutenberg 20 🤞🏻