Make WordPress Core

#56194 closed defect (bug) (fixed)

Twenty Twenty: text-transform issue in H6 Heading block

Reported by: kajalgohel's profile kajalgohel Owned by: audrasjb's profile audrasjb
Milestone: 6.1 Priority: normal
Severity: normal Version: 5.5
Component: Bundled Theme Keywords: has-patch has-screenshots commit
Focuses: ui, css Cc:

Description

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

Attachments (7)

#56194.patch (744 bytes) - added by kmadhak 23 months ago.
Added Patch
56194.1.diff (11.5 KB) - added by sabernhardt 23 months ago.
Removes .wp-block from heading styles in block editor, supports .heading-size- classes in both block and classic editors
56194.2.patch (1.9 KB) - added by multidots1896 23 months ago.
added patch
56194.3.patch (15.0 KB) - added by sabernhardt 22 months ago.
Capture d’écran 2022-09-14 à 12.22.19.png (113.2 KB) - added by audrasjb 21 months ago.
Front end styles
Capture d’écran 2022-09-14 à 12.21.59.png (207.1 KB) - added by audrasjb 21 months ago.
Before patch (editor)
Capture d’écran 2022-09-14 à 12.35.36.png (331.1 KB) - added by audrasjb 21 months ago.
After patch (editor)

Download all attachments as: .zip

Change History (15)

@kmadhak
23 months ago

Added Patch

#1 @kmadhak
23 months ago

  • Keywords has-patch added; needs-patch removed

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.

#2 @poena
23 months ago

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
23 months ago

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

#3 @sabernhardt
23 months ago

  • Milestone changed from Awaiting Review to 6.1
  • Version changed from 6.0 to 5.5

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.

#4 @sabernhardt
23 months ago

  • Keywords needs-refresh added

I forgot about the styles in PHP.

@multidots1896
23 months ago

added patch

#5 @sabernhardt
22 months ago

  • Keywords needs-testing added; needs-refresh removed

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.

Last edited 21 months ago by sabernhardt (previous) (diff)

#6 @tahmidulkarim
21 months ago

  • Keywords needs-testing removed

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
21 months ago

Before patch (editor)

@audrasjb
21 months ago

After patch (editor)

#7 @audrasjb
21 months ago

  • Keywords has-screenshots commit added

Works fine. Self assigning for commit.

#8 @audrasjb
21 months ago

  • Owner set to audrasjb
  • Resolution set to fixed
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.