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

[brianhogg]

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.

[brianhogg]

Backend output (h4 with link)

[brianhogg]

Front-end output

[laurelfulford]

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!

[brianhogg]

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.