Twenty Twenty: "Add citation" text font-weight issue in Quote block#8997
Twenty Twenty: "Add citation" text font-weight issue in Quote block#8997shubhtoy wants to merge 1 commit into
Conversation
|
Hi @shubhtoy! 👋 Thank you for your contribution to WordPress! 💖 It looks like this is your first pull request to No one monitors this repository for new pull requests. Pull requests must be attached to a Trac ticket to be considered for inclusion in WordPress Core. To attach a pull request to a Trac ticket, please include the ticket's full URL in your pull request description. Pull requests are never merged on GitHub. The WordPress codebase continues to be managed through the SVN repository that this GitHub repository mirrors. Please feel free to open pull requests to work on any contribution you are making. More information about how GitHub pull requests can be used to contribute to WordPress can be found in the Core Handbook. Please include automated tests. Including tests in your pull request is one way to help your patch be considered faster. To learn about WordPress' test suites, visit the Automated Testing page in the handbook. If you have not had a chance, please review the Contribute with Code page in the WordPress Core Handbook. The Developer Hub also documents the various coding standards that are followed:
Thank you, |
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
sabernhardt
left a comment
There was a problem hiding this comment.
Thanks! This patch works for me in the block editor, matching the editor styles to the front end.
Before the patch, the em and strong elements had the same font-weight as the rest of the cite element (600).
With the patch, the em has a font-weight of 900, and the strong has a font-weight of 700.
Compare to the front end (screenshot taken with patch, but it matches the appearance before the patch):
To correct the Classic Editor styles too, you could edit editor-style-classic.css and editor-style-classic-rtl.css:
body#tinymce.wp-editor.content cite {
color: #6d6d6d;
font-size: 14px;
font-weight: 600;
font-style: normal;
}
body#tinymce.wp-editor.content cite em {
font-weight: bolder;
}
body#tinymce.wp-editor.content cite strong {
font-weight: 700;
}
| font-weight: 700; | ||
| } | ||
|
|
||
| .editor-styles-wrapper .wp-block-quote cite { |
There was a problem hiding this comment.
I would add the cite em and cite strong rules after the cite, but that is minor.
In Twenty Twenty Theme, when italic formatting is applied to citation text in the Quote block's "Add citation" field, the editor and frontend display different font-weight styles. While the editor shows the italic text with normal font-weight, the frontend displays it with bolder font-weight, creating an inconsistency in the visual representation. The inconsistency also exist with bold font styles.
Steps to replicate:
Expected behavior: Editor should match frontend styling for italic citations
Solution: Added CSS rule to ensure italic citations display with bolder font-weight in the editor, matching the frontend appearance.
Trac ticket: #55934
**This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more