Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#45817 closed defect (bug) (invalid)

Twenty Nineteen: h4 and links styling in editor does not match actual

Reported by: brianhogg's profile brianhogg Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.0.2
Component: Bundled Theme Keywords:
Focuses: Cc:


Related to #45470, using a new install of 5.0.2 with TwentyNinteen, the editor styling for h4 and links does not match the front end.

See attached example using The Events Calendar Block (with data from a couple sample events from The Events Calendar) and the preview on the front-end.

Attachments (2)

Screenshot 2019-01-03 11.21.26.png (159.5 KB) - added by brianhogg 5 years ago.
Backend output (h4 with link)
Screenshot 2019-01-03 11.21.45.png (172.2 KB) - added by brianhogg 5 years ago.
Front-end output

Download all attachments as: .zip

Change History (6)

5 years ago

Backend output (h4 with link)

5 years ago

Front-end output

#1 @SergeyBiryukov
5 years ago

  • Component changed from Editor to Bundled Theme
  • Summary changed from Styling in editor does not match actual to Twenty Nineteen: h4 and links styling in editor does not match actual

#2 @laurelfulford
5 years ago

Thanks for this report, @brianhogg!

It looks like the plugin adds the .entry-title class -- the same class used on post titles in many themes -- to each h4 it outputs.

It does the same in the editor, but because the .entry-title styles wouldn't be included on that selector in a theme's editor styles (since the title is a text input in the editor, with different classes), the styles don't line up.

I was able to recreate similar issues in Twenty Seventeen and Twenty Sixteen, where the h4 with the .entry-title class inherited the font size, weight and/or family from the .entry-title class, causing it to display differently on the front-end.

I see that The Events Calendar Block is your plugin. I'm not sure which is the intended header size -- either in the editor, with the smaller h4, or the larger version on the front-end. If it's the former, removing the .entry-title class should get the title inheriting individual theme's h4 styles.

If it's the latter, that's a bit trickier -- as mentioned, the .entry-title class doesn't exist in the editor, so the plugin might have to rely on using a different heading tag to get larger headers that display consistently across Gutenberg-supporting themes, rather than a class.

The theme itself seems to functioning as expected, so I'm going to close this issue. But please let me know if you have any questions at all about the above!

#3 @laurelfulford
5 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from new to closed

#4 @brianhogg
5 years ago

Hi @laurelfulford

Thanks for the notes! Yes, the .entry-title was added before I took over the plugin, and at this point not something that could be removed as it would affect those relying it on it being there for their CSS rules etc. Regardless, it is an example of where the Gutenberg/block editor styling does not match the styling on the front-end so it is still valid (IMO).

Will be less of an issue where two sets of styling won't need to be set up (front vs. back end) once the block editor makes it to the front-end in later releases.

Note: See TracTickets for help on using tickets.