cite element inherits quote font-size line-height by default

[mrwweb]

Description

(I debated whether this is a Twenty Twenty-Four bug or something upstream and think it belongs in the Gutenberg repo.)

Current things that are true:

• Most themes apply a smaller font-size to the cite element
• It's possible to style the cite elements font-size and line-height via theme.json
• cite is an inline element by default
• Elements need to be inline-block or block to honor line-height correctly based on their font-size (Tested in Chrome and Firefox. Reduced test case)

This problem is already avoided in the editor due to an inline style of display: block on cite elements. However, that style is not present on the front, leading to really bad line-height issues unless a theme proactively adds display: inline-block; or display: block to cite elements.

This issue is present in Twenty Twenty-Four (see screenshots). I believe Twenty Twenty-Three has a custom style to handle this.

Since theme.json implies it's possible to set a line-height for cite and that line height works in the editor, I believe there should automatically be a front-end style of cite { display: block; } for all sites by default.

Step-by-step reproduction instructions

See reduced test case on CodePen

Screenshots, screen recording, code snippet

Twenty Twenty-Four demo site with extra long citation added via dev tools:

From a modified theme based on Twenty Twenty-Four:

Environment info

• WordPress 6.4
• Twenty Twenty-Four

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[carolinan]

I agree that ideally the same CSS should be applied in the editor and front.

---

Contributors have spent a lot of time and effort to make the font size, line height and appearance settings work for the quote and pullquote blocks in the classic bundled themes, so any changes to this needs to be tested extensively.

[mrwweb]

Contributors have spent a lot of time and effort to make the font size, line height and appearance settings work for the quote and pullquote blocks in the classic bundled themes, so any changes to this needs to be tested extensively.

I have tested all default themes from Twenty Nineteen to Twenty Twenty-Four I tested the Quote and Pullquote blocks with a multi-line citation. My findings were that themes occasionally had custom styles that fixed this, but not always.

For each theme, I tried adding the following rule:

cite {
    display: block;
}

In every case, this fixed the line-height issue and did not change anything else. As expected, text-alignment was not impacted.

I have screenshots of both before and after if people need to see this.

Conclusion: Every default theme built since the block editor appears to be either improved or unchanged with this fix for cite line-height.