Twenty Twenty One: Paragraph / Buttons block font weight inconsistency

[nkeller15]

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

[nkeller15]

Editor Example

[nkeller15]

Front Side Example

[nkeller15]

Patch for issue

[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!

[nkeller15]

Patch for style-rtl.css

[nkeller15]

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.

[sabernhardt]

​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?

[pavanpatil1]

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!

[iamfarhan09]

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.

[sabernhardt]

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

[costdev]

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

[poena]

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.

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]

Testing PR4815: front-end

[audrasjb]

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

[audrasjb]

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

[audrasjb]

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

[audrasjb]

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.

committed in https://core.trac.wordpress.org/changeset/56172