Make WordPress Core

Opened 8 weeks ago

Last modified 6 weeks ago

#61140 new defect (bug)

Twenty Seventeen: Verse block font family is different in front-end

Reported by: pranitdugad's profile pranitdugad Owned by:
Milestone: Awaiting Review Priority: normal
Severity: trivial Version:
Component: Bundled Theme Keywords: has-screenshots has-patch
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 (4)

Screenshot 2024-05-03 at 2.34.09 PM.png (466.6 KB) - added by pranitdugad 8 weeks ago.
I have attached Screenshot for better Understanding
Screenshot 2024-05-03 at 2.33.24 PM.png (262.9 KB) - added by pranitdugad 8 weeks ago.
I have attached Screenshot for better Understanding
61140.patch (790 bytes) - added by pranitdugad 8 weeks ago.
After applying this patch , this issue is resolved
61140.1.patch (599 bytes) - added by pitamdey 7 weeks ago.
Updated Patch

Download all attachments as: .zip

Change History (6)

@pranitdugad
8 weeks ago

I have attached Screenshot for better Understanding

@pranitdugad
8 weeks ago

I have attached Screenshot for better Understanding

@pranitdugad
8 weeks ago

After applying this patch , this issue is resolved

#1 @poena
8 weeks 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 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.

Last edited 8 weeks ago by poena (previous) (diff)

@pitamdey
7 weeks ago

Updated Patch

#2 @sabernhardt
6 weeks 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.

Note: See TracTickets for help on using tickets.