Make WordPress Core

Opened 2 months ago

Last modified 6 days ago

#61140 assigned defect (bug)

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

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

Description

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,

Attachments (8)

Screenshot 2024-05-03 at 2.34.09 PM.png (466.6 KB) - added by pranitdugad 2 months ago.
I have attached Screenshot for better Understanding
Screenshot 2024-05-03 at 2.33.24 PM.png (262.9 KB) - added by pranitdugad 2 months ago.
I have attached Screenshot for better Understanding
61140.patch (790 bytes) - added by pranitdugad 2 months ago.
After applying this patch , this issue is resolved
61140.1.patch (599 bytes) - added by pitamdey 2 months ago.
Updated Patch
61140.2.patch (531 bytes) - added by pitamdey 10 days ago.
I have added monospace font for consistent
61140.monospace-7-themes.patch (4.6 KB) - added by sabernhardt 10 days ago.
removes font-family editor style that does not match the front anymore from 7 themes
screenshots-verse-block-with-patch.zip (1.3 MB) - added by sabernhardt 10 days ago.
screenshots with patch: front end and both editors
verse-block-font-with-patch.png (86.2 KB) - added by sabernhardt 10 days ago.
collection of cropped screenshots for each theme with 61140.monospace-7-themes.patch

Change History (14)

@pranitdugad
2 months ago

I have attached Screenshot for better Understanding

@pranitdugad
2 months ago

I have attached Screenshot for better Understanding

@pranitdugad
2 months ago

After applying this patch , this issue is resolved

#1 @poena
2 months ago

  • Keywords changes-requested added

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 in 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.

Version 0, edited 2 months ago by poena (next)

@pitamdey
2 months ago

Updated Patch

#2 @sabernhardt
2 months ago

  • Focuses css added
  • Keywords has-patch added; changes-requested removed
  • Summary changed from Twenty Seventeen Theme: verse block font family is different in front-end side. to Twenty Seventeen: Verse block font family is different in front-end

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
10 days ago

I have added monospace font for consistent

@sabernhardt
10 days ago

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

@sabernhardt
10 days ago

screenshots with patch: front end and both editors

@sabernhardt
10 days ago

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

#3 @sabernhardt
10 days ago

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

Last edited 9 days ago by sabernhardt (previous) (diff)

#4 @sabernhardt
10 days ago

#61527 was marked as a duplicate.

#5 @sabernhardt
10 days ago

  • Keywords needs-testing added
  • Milestone changed from Awaiting Review to Future Release
  • Severity changed from trivial to normal
  • Summary changed from Twenty Seventeen: Verse block font family is different in front-end to Multiple themes: Verse block font family is different in front-end

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.

#6 @karmatosed
6 days ago

  • Milestone changed from Future Release to 6.7
  • Owner set to karmatosed
  • Status changed from new to assigned

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

Note: See TracTickets for help on using tickets.