Make WordPress Core

Opened 3 years ago

Closed 4 weeks ago

#51933 closed defect (bug) (worksforme)

Twenty Twelve: Specificity issues with heading font sizes & the block editor

Reported by: mrfoxtalbot's profile mrfoxtalbot Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords:
Focuses: css Cc:

Description

TwentyTwelve font sizes on headings only work if you add a specific number. Adding the "preset" sizes does not work due to the theme's styles being too specific:

.entry-content h2 {font-size: 18px;}

This seems to prevent the less specific heading font sizes styles (which only use one class) from working.

.has-huge-font-size {
    font-size: 42;
}

I have also noticed an error in the inspector, I am not sure why the "42" there has does not specify px, rem or something.

Attachments (4)

Screen Shot on 2020-12-04 at 09:52:12.png (873.2 KB) - added by mrfoxtalbot 3 years ago.
2012-headings-front.png (32.5 KB) - added by sabernhardt 4 weeks ago.
headings with and without preset sizes, using WordPress 6.5.2
2012-headings-iframe.png (36.4 KB) - added by sabernhardt 4 weeks ago.
the same heading blocks in the iframe editor
2012-headings-nonframed.png (39.1 KB) - added by sabernhardt 4 weeks ago.
heading blocks in the non-framed editor

Download all attachments as: .zip

Change History (10)

#1 @SergeyBiryukov
3 years ago

  • Component changed from Themes to Bundled Theme
  • Summary changed from Specificity issues with TwentyTwelve heading font sizes & the block editor to Twenty Twelve: Specificity issues with heading font sizes & the block editor

This ticket was mentioned in Slack in #core by lukecarbis. View the logs.


3 years ago

#3 @lukecarbis
3 years ago

I'm not getting the 42 font-size issue, but I can confirm that Heading blocks in Twenty Twelve don't respect the Typography > Font Size setting on the frontend (though they do in the editor). It seems like it is indeed overridden by the .entry-content h2 class.

#4 @hellofromTonya
3 years ago

  • Focuses css added

#5 @karmatosed
7 weeks ago

  • Keywords needs-patch added

@sabernhardt
4 weeks ago

headings with and without preset sizes, using WordPress 6.5.2

@sabernhardt
4 weeks ago

the same heading blocks in the iframe editor

@sabernhardt
4 weeks ago

heading blocks in the non-framed editor

#6 @sabernhardt
4 weeks ago

  • Keywords needs-patch removed
  • Milestone Awaiting Review deleted
  • Resolution set to worksforme
  • Status changed from new to closed

This still happened with WordPress 5.8, but 5.9 fixed the issue (involving at least [52049]).

  • Added !important to the size classes' value, so that overrides the specificity difference
  • Replaced "Huge" font size with "Extra Large" (XL)
Note: See TracTickets for help on using tickets.