Make WordPress Core

Opened 14 months ago

Closed 7 weeks ago

Last modified 7 weeks ago

#58440 closed defect (bug) (fixed)

Twenty Nineteen: Inconsistent H1 font size

Reported by: nkeller15's profile nkeller15 Owned by: karmatosed's profile karmatosed
Milestone: 6.6 Priority: normal
Severity: minor Version: 5.0
Component: Bundled Theme Keywords: has-screenshots has-patch needs-testing
Focuses: css Cc:

Description

The H1 or .entry-title for pages is not the same between the editor and the front end for the Twenty Nineteen theme. The .entry-title class in the style.css overwriting it to be 2.25em large.

Steps to reproduce the issue:

  1. Activate Twenty Nineteen theme.
  2. Edit a page
  3. Inspect or notice page title font size in the editor (H1)
  4. Save and view front end of page and inspect/notice difference in font size of page title

Attachments (6)

SCR-20230601-lsvo.png (210.7 KB) - added by nkeller15 14 months ago.
editor screenshot
SCR-20230601-ltbx.png (141.0 KB) - added by nkeller15 14 months ago.
front end screenshot
58440.1.patch (780 bytes) - added by nkeller15 14 months ago.
patch
58440-frontend.png (52.7 KB) - added by shailu25 8 weeks ago.
Frontend - Page/Post Title's font size
58440-backend-before-patch.png (71.6 KB) - added by shailu25 8 weeks ago.
Backend - Page/Post Title's font size Before Patch.
58440-backend-after-patch.png (69.6 KB) - added by shailu25 8 weeks ago.
Backend - Page/Post Title's font size After Patch.

Download all attachments as: .zip

Change History (15)

@nkeller15
14 months ago

editor screenshot

@nkeller15
14 months ago

front end screenshot

@nkeller15
14 months ago

patch

#1 @sabernhardt
13 months ago

  • Summary changed from Twenty Nineteen - Inconsistent H1 font size to Twenty Nineteen: Inconsistent H1 font size
  • Version changed from 6.2.2 to 5.0

Headings with the entry-title class have always been smaller than the h1 element's size. I do not recommend increasing the size on the front end unexpectedly after more than four years, even if that is an improvement.

Matching the editor to the front might be as simple as adding .wp-block-post-title with the h2 editor styles:

.wp-block-post-title,
h2 {
  font-size: $font__size-lg;
  @include post-section-dash;

  @include media(tablet) {
    font-size: $font__size-xl;
  }
}

(Note: The .wp-block-post-title class would not work in older versions of WordPress, such as 5.0 and 5.3.)

#2 @karmatosed
3 months ago

  • Keywords changes-requested added

I think it makes sense to ensure that the front looks like the editor where possible. I agree with you, @sabernhardt, that increasing the size doesn't feel the right path here. If a more passive patch, as you recommend, could be produced, I would like to explore that. Thank you, everyone.

#3 @karmatosed
3 months ago

  • Milestone changed from Awaiting Review to Future Release

#4 @karmatosed
2 months ago

  • Keywords needs-refresh added; has-patch removed

This ticket was mentioned in PR #6543 on WordPress/wordpress-develop by @sabernhardt.


2 months ago
#5

  • Keywords has-patch added; needs-refresh removed
  • Sets the .wp-block-post-title font sizes together with h2.
  • Combines the post-section-dash mixin for both h1 and h2 in the same rulesets.

Trac 58440

#6 @sabernhardt
2 months ago

  • Keywords needs-testing added; changes-requested removed
  • Milestone changed from Future Release to 6.6

#7 @shailu25
8 weeks ago

Test Report

Patch Tested: https://github.com/WordPress/wordpress-develop/pull/6543

Environment:

WordPress - 6.5.3
OS - Windows
Browser - Firefox
Theme: Twenty Nineteen
PHP - 8.1.23

Actual Results:

  • Page/Post Title's font size are showing same in Back-End & Front-End with Patch.✅

@shailu25
8 weeks ago

Frontend - Page/Post Title's font size

@shailu25
8 weeks ago

Backend - Page/Post Title's font size Before Patch.

@shailu25
8 weeks ago

Backend - Page/Post Title's font size After Patch.

#8 @karmatosed
7 weeks ago

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

In 58198:

Twenty Nineteen: Make h1 consistent for entry title.

The h1 for entry-title was not the same between the editor and front end. This fixes that in the by setting wp-block-post-title font sizes together with h2 and combines post-section-dash mixin for both h1 and h2.

Props sabernhardt, nkeller15, shailu25.
Fixes #58440.

#9 @karmatosed
7 weeks ago

Thank you everyone for this work. I have moved this forward and committed after testing.

Note: See TracTickets for help on using tickets.