Twenty Twenty: text-transform issue in H6 Heading block

[kajalgohel]

In Twenty Twenty Theme, when we add Heading block in editor side and change heading level to H6, it is reflected normal in editor side but it is reflected in front side into the uppercase.

Steps to replicate:
1: Activate the Twenty Twenty Theme
2: Add Heading block
3: Choose H6 heading level
4: View the page/post at editor side
5: Save page/post
6: View the page/post at front side

For better understanding I provide video attachment link.
Video link: ​https://share.cleanshot.com/TBUMwAVxcXpfQiFfAEvD

Thanks

[kmadhak]

Added Patch

[kmadhak]

Hello @kajalgohel,

Thanks for reporting this! In this H6 heading block we can see that there is a CSS text-transform:uppercase; if it is not intentionally we should remove it, I have added patch for the same.

Thank you.

[poena]

Hi!
As far as I remember it is intended as part of the design, but the editor and front should match. The editor default should also be upper case for the H6.

The letter casing option should also work, so it should be possible to switch to H6, see the uppercase, and change it to another case with the option.

[sabernhardt]

Removes .wp-block from heading styles in block editor, supports .heading-size- classes in both block and classic editors

[sabernhardt]

Headings are no longer inside a .wp-block container, so the heading styles do not apply in the block editor (classic still has them).

The patch removes that class, and I wanted the special classes to apply heading styles in the editors.

[sabernhardt]

I forgot about the styles in PHP.

[multidots1896]

added patch

[sabernhardt]

The text-transform property was a design decision, so it needs to stay that way in the theme. Anyone who does not appreciate it probably has switched the theme or worked around that style by now (in the Additional CSS or a child theme, or by using the Letter case block setting).

56194.3.patch​ removes .wp-block from heading selectors in the 'block-editor' array of twentytwenty_get_localized_font_family_elements. The 'front-end' array needs updating, too, but that is not exactly related (see #56396).

This patch should also help on #56360.

[tahmidulkarim]

Test Report

This report validates that the patch 56194.3 addresses the issue.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/56194/56194.3.patch

Environment

• OS: macOS 11.5.2
• Web Server: Nginx
• PHP: 7.4.29
• WordPress: WordPress 6.1-alpha-53344-src
• Browser: Chrome 102.0.5
• Theme: Twenty Twenty

Actual Results

• ✅ The patch is working as intended

Screenshot

​https://prnt.sc/CQeLipuvVUUv

[audrasjb]

Front end styles

[audrasjb]

Before patch (editor)

[audrasjb]

After patch (editor)

[audrasjb]

Works fine. Self assigning for commit.

[audrasjb]

In 54154:

Twenty Twenty: Ensure headings styles are consistent between editor and front-end.

This changeset removes .wp-block container from headings CSS selectors to restore consistency between editor and front-end styles. It also removes .wp-block from headings selectors in the 'block-editor' array of twentytwenty_get_localized_font_family_elements().

Props kajalgohel, kmadhak, poena, multidots1896, tahmidulkarim, audrasjb.
Fixes #56194.