#58383 closed defect (bug) (fixed)
Twenty Twenty One: Paragraph / Buttons block font weight inconsistency
Reported by: |
|
Owned by: |
|
---|---|---|---|
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:
- Activate the Twenty Twenty One theme
- Add the Buttons block or paragraph text
- Highlight the text and apply the bold style from the toolbar
- Save the page/post
- View bold text style editor side and then compare with front end
Attachments (8)
Change History (22)
#1
@
21 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:
↓ 3
@
21 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!
#3
in reply to:
↑ 2
@
21 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
@
21 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
@
21 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
@
21 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.
#7
@
21 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.
21 months ago
#9
@
21 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
@
20 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.
20 months ago
#11
Sets font-weight: 700
for these elements in the editor.
- Matches the front end styles.
- Overrides the admin
font-weight
of600
.
@audrasjb commented on PR #4815:
20 months ago
#14
committed in https://core.trac.wordpress.org/changeset/56172
Editor Example