Make WordPress Core

Opened 11 months ago

Closed 10 months ago

Last modified 10 months ago

#58383 closed defect (bug) (fixed)

Twenty Twenty One: Paragraph / Buttons block font weight inconsistency

Reported by: nkeller15's profile nkeller15 Owned by: audrasjb's profile audrasjb
Milestone: 6.3 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-screenshots has-patch changes-requested dev-feedback
Focuses: ui, css Cc:

Description

Hello,

In the Twenty Twenty One theme, the front-end style sheet is applying a different font weight than that in the editor in the Paragraph and Buttons block text. The font weight editor side is 600 while the front side is at 700.

Steps to reproduce:

  1. Activate the Twenty Twenty One theme
  2. Add the Buttons block or paragraph text
  3. Highlight the text and apply the bold style from the toolbar
  4. Save the page/post
  5. View bold text style editor side and then compare with front end

Attachments (8)

SCR-20230523-jmmx.png (134.5 KB) - added by nkeller15 11 months ago.
Editor Example
SCR-20230523-jmrw.png (321.1 KB) - added by nkeller15 11 months ago.
Front Side Example
58383.1.patch (424 bytes) - added by nkeller15 11 months ago.
Patch for issue
58383.2.patch (860 bytes) - added by nkeller15 11 months ago.
Patch for style-rtl.css
58383-common.css.diff (382 bytes) - added by iamfarhan09 11 months ago.
Capture d’écran 2023-07-09 à 17.31.13.png (118.1 KB) - added by audrasjb 10 months ago.
Testing PR4815: front-end
Capture d’écran 2023-07-09 à 17.31.39.png (254.6 KB) - added by audrasjb 10 months ago.
Testing PR4815: Editor inconsistent with front-end before applying the patch
Capture d’écran 2023-07-09 à 17.33.57.png (307.1 KB) - added by audrasjb 10 months ago.
Testing PR4815: Editor consistent with front-end after applying the patch ✅

Download all attachments as: .zip

Change History (22)

@nkeller15
11 months ago

Editor Example

@nkeller15
11 months ago

Front Side Example

@nkeller15
11 months ago

Patch for issue

#1 @audrasjb
11 months ago

  • Keywords has-patch added; needs-testing-info removed
  • Milestone changed from Awaiting Review to 6.3
  • Owner set to audrasjb
  • Status changed from new to reviewing
  • Version 6.2 deleted

#2 follow-up: @audrasjb
11 months ago

  • Keywords changes-requested added

Hello @nkeller15, welcome to WordPress Core Trac and thank you for the ticket and patch!

The patch looks quite good to me, except that we also need to update the style-rtl.css stylesheet :)

Would you mind adding a new patch for this?

Thanks!

@nkeller15
11 months ago

Patch for style-rtl.css

#3 in reply to: ↑ 2 @nkeller15
11 months ago

Replying to audrasjb:

Hello @nkeller15, welcome to WordPress Core Trac and thank you for the ticket and patch!

The patch looks quite good to me, except that we also need to update the style-rtl.css stylesheet :)

Would you mind adding a new patch for this?

Thanks!

Sure, have updated with a new patch. Thank you.

#4 @sabernhardt
11 months ago

PR 513 purposely changed the front-end font-weight from 600 to 700 for strong elements before the theme went public. The editor's font-weight comes from wp-admin/css/common.css, but Twenty Twenty-One should override that. Should the theme's editor style import all of 04-elements/misc.scss or only b, strong?

#5 @pavanpatil1
11 months ago

Test report - https://core.trac.wordpress.org/attachment/ticket/58383/58383.2.patch

Environment-
WordPress- v6.2.2
Os- Win10
Browser- Chrome
Theme- Twenty Twenty One

Screenshot:
Before backend- https://prnt.sc/L-jRUc8OvQCC
Before frontend- https://prnt.sc/lRAfj-If4t1h

After backend- https://prnt.sc/L-jRUc8OvQCC
After frontend - https://prnt.sc/nPat3sguzk4L

The patch is working fine!

#6 @iamfarhan09
11 months ago

Hello @audrasjb ,
I have reviewed the issue and found that the CSS rule strong, b { font-weight: 600; } in the common.css file of the wp-admin directory is unnecessary since the strong element already has the font-weight: bold; style applied by the user agent stylesheet.

I have created a patch (58383-common.css.diff) that removes the strong, b { font-weight: 600; } rule from common.css. This will help maintain consistency between the editor page and the front-end styles.

Please review and test the patch to verify its effectiveness in resolving the font-weight inconsistency issue.

Thank you.

Last edited 11 months ago by iamfarhan09 (previous) (diff)

#7 @sabernhardt
11 months ago

Admin pages have given strong elements a font-weight of 600 since [26072], and it should stay that way (except within the editor canvas). Themes that specify the weight on the front end should also set it in the editor, though every bundled theme since Twenty Seventeen has the discrepancy. Twenty Seventeen to Twenty Twenty-One set the weight to either 700 or bolder in style.css without matching it in the editor; the two block themes rely on browser defaults.

For another possibility, the CSS reset could include font-weight: bold for strong and b elements in any theme.

Related: #56427, GB36435 and GB27269

This ticket was mentioned in Slack in #core by mukeshpanchal27. View the logs.


11 months ago

#9 @costdev
11 months ago

  • Keywords dev-feedback added

This ticket was discussed during the bug scrub. This is an active ticket and in good hands. To help bring further feedback on the suggested paths forward, we agreed to add the dev-feedback keyword.

Additional props: @mukesh27 @oglekler @nazmul111

#10 @poena
10 months ago

I agree that the change should be in the theme and not the WordPress admin styles.

Only b and strong should be added to the editor style.

Updating the <cite> to be italic has complications because it cannot be reset using the toolbars for the quote block cite, and would not match the theme design.
Updating <pre> can affect the code block and the preformatted text blocks.

This ticket was mentioned in PR #4815 on WordPress/wordpress-develop by @sabernhardt.


10 months ago
#11

Sets font-weight: 700 for these elements in the editor.

  • Matches the front end styles.
  • Overrides the admin font-weight of 600.

https://core.trac.wordpress.org/ticket/58383

@audrasjb
10 months ago

Testing PR4815: front-end

@audrasjb
10 months ago

Testing PR4815: Editor inconsistent with front-end before applying the patch

@audrasjb
10 months ago

Testing PR4815: Editor consistent with front-end after applying the patch ✅

#12 @audrasjb
10 months ago

I tested the proposed patch successfully.
Self assigning for commit.

#13 @audrasjb
10 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 56172:

Twenty Twenty-One: Add b and strong elements to editor styles.

Sets font-weight: 700 for these elements in the editor, in order to match the front end styles. It overrides the default admin font-weight of 600 for
these HTML elements.

Props nkeller15, audrasjb, sabernhardt, pavanpatil1, iamfarhan09, poena.
Fixes #58383.

Note: See TracTickets for help on using tickets.