Multiple themes: Verse block font family is different in front-end

[pranitdugad]

Hello all,

I have reviewed the "verse" block into the twenty-seventeen theme and found that verse block font family is different in front-end side.

For better understanding I have attached its screenshots at bottom of the page.
Thanks,

[pranitdugad]

I have attached Screenshot for better Understanding

[pranitdugad]

I have attached Screenshot for better Understanding

[pranitdugad]

After applying this patch , this issue is resolved

[poena]

Hi @pranitdugad Thank you for reporting this issue.

When the style in the editor and front do not match, the first thing to do is find out or decide which of the two styles is the correct one.

Twenty Seventeen styles the pre tag to use font-family: "Courier 10 Pitch", Courier, monospace; in both the editor and front.

The block editor overrides this font, so in this case, it is the editor that is breaking the theme's original design, and it is the editor stylesheet in the theme that needs to be updated.

If the CSS is removed from the block on the front, then it will be an unexpected and visible change on live websites, which should be avoided.

The patch changes files that are not inside the theme folder, and this is problematic because these changes would be deleted, they would not be permanent because the files are generated when the block editor is updated.
Changes to the blocks would also affect all themes, not only Twenty Seventeen.

The correct file to update is twentyseventeen/assets/css/editor-style.css.

[pitamdey]

Updated Patch

[sabernhardt]

Matching the editor to the front end is usually the best approach, and removing inherit from editor styles probably is the best option in this case (61140.1.patch​).

However, it is debatable because the front end has been both ways at different times. The Verse block had the pre element's monospace font for the first two years, then WordPress 5.7 inherited Libre Franklin, and the block has been monospace again on the front since WordPress 6.2.

• ​Gutenberg added a Verse block that inherited the font-family unless themes would set it to something else.
• With WordPress 5.0, Twenty Seventeen 1.8 did not inherit the font. The .editor-styles-wrapper pre selector from editor-styles.css overrode block styles in the editor, and the theme had no front-end Verse block style.
• GB27332 added style.scss for the block while removing styles from the editor, so the front end changed with Twenty Seventeen.
• [50358] added editor styles to seven default themes to match the front-end style.
• GB46560 reduced specificity to honor theme.json styles, which returned Twenty Seventeen's Verse block to monospace.

I have added font-size: inherit to a client's site based on Twenty Sixteen, so that is my preference. For everyone else, though, consistently using monospace is likely the more appropriate choice because it was first, last, and for a longer amount of time overall. Note: the other themes probably would need a similar update too.

[pitamdey]

I have added monospace font for consistent

[sabernhardt]

removes font-family editor style that does not match the front anymore from 7 themes

[sabernhardt]

screenshots with patch: front end and both editors

[sabernhardt]

collection of cropped screenshots for each theme with 61140.monospace-7-themes.patch

[sabernhardt]

#61328 was marked as a duplicate. (add props: viralsampat, karmatosed)

[sabernhardt]

#61527 was marked as a duplicate.

[sabernhardt]

61140.monospace-7-themes.patch​ removes the font styles added in [50358] because they do not match the front anymore.

• Twenty Twenty had specified monospace in its editor styles, which indicates that it is the intended design for that theme. The patch removes the serif font stack to match the front.
• The patch removes inherit from the other six themes so the Verse block is in the theme's selected monospace font(s), without re-assigning them.

[karmatosed]

I am going to assign this to myself for testing with a hope to get to commit. Thank you everyone.