-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Preformatted block: Add support for font sizes #27584
Preformatted block: Add support for font sizes #27584
Conversation
@@ -0,0 +1,4 @@ | |||
.wp-block-preformatted { | |||
overflow-x: auto; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The style.scss
file always gets loaded into the editor, so if a rule exists in that file, it does not need to be replicated in editor.scss
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh, yes, true that. I'll fix accordingly.
@@ -0,0 +1,4 @@ | |||
.wp-block-preformatted { | |||
overflow-x: auto; | |||
white-space: pre !important; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since this rule also exists in style.scss
, we are so close to not needing any editor style at all for this block. And we should be avoiding !important anyway, if at all possible. I dug in to see why the !important was necessary, and it appears that white-space: pre-wrap;
is applied as an inline style on the preformatted block:
Why does that exist? I'm not sure, but from digging at the code, it looks to be related to this PR: #18656. Or possibly #17779. Specifically there's some commentary in https://github.com/WordPress/gutenberg/pull/17779/files#diff-7df6f5253ccec2f2e6d1bb22e81f87a4b6bccd2604463eeecded163aa27fd333R70 which seems relevant.
It seems we need to figure out why that output
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The pre-wrap
inline style is coming from the <RichText>
component, and its value is defined here: https://github.com/WordPress/gutenberg/blob/master/packages/rich-text/src/component/index.js#L82
The value is set on the whiteSpace
variable, which is then added to defaultStyle
, which subsequently makes it to the component's inline styles via the style
prop here: https://github.com/WordPress/gutenberg/blob/master/packages/rich-text/src/component/index.js#L1075
According to the inspector, I can see that besides the pre-wrap
inline style, there's the pre-wrap
style attribute coming from the Block's style.scss
stylesheet. If neither the inline style nor the block style are present, then, the <pre>
element will get its default style from the browser defaults.
This makes me think we can live with the inline style, since the <RichText>
component is using the style attribute to guarantee its proper display (my assumption). Assuming a future scenario where the <RichText>
component removes the pre-wrap
inline style, then we'll still be covered by the pre-wrap
style available in the preformatted block's style.scss
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why not just remove the inline style?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's a quite considerable change. The <RichText>
component uses it by default, and it (the component) is used in many places. Changing this may change the overall behavior of the <RichText>
component.
Thanks so much for this PR! Here's the editor, before: Frontend, before: Here's the editor, after: Here's the frontend, after: The font size control is also added: That font size stuff all seems fine. It also adds a
It seems the safest way forward, which still puts the frontend in sync with the editor, is to go in the opposite direction. Instead of:
you output
That way you can also remove the editor style you added again, and we sync up the frontend. I'd also argue that this serves as a good bugfix for the lacklustre overflow handling. What do you think? |
This is a more elegant solution compared to the previous one, which relied on overflow.
@jasmussen What I think would make sense here is to do the following: Set the default font size to match the existing size in Gutenberg. Right now it is My thinking here is that this needs to be done as progressive enhancement instead of doing it like I did initially. It must have backwards compatibility with the existing preformatted block, which means it would be totally better for it to have the same size it had. I'll work on the backwards compatibility fix for the font size and will keep you posted.
Makes absolute sense, I pushed a commit to address the |
The size looks the same to me in my testing of TT1🔳s, but definitely worth testing the before and after in a few themes to be sure.
I think that's generally the safe mindset, but it doesn't have to be the case always. If the existing block has a bug or something in that category, it's fine to fix it. So the fact that it goes out to every user, is arguably a key benefit. So this isn't a fundamental issue, so much as us being careful that we do this deliberately and thinking through any potential side effects. |
I have removed editor.scss to leave only the |
@@ -0,0 +1,4 @@ | |||
.wp-block-preformatted { | |||
font-size: var(--wp--preset--font-size--extra-small, 1em); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👋 We should remove the CSS Custom Property from here. I've seen that the code block recently got it added as well in https://github.com/WordPress/gutenberg/pull/27294/files#r540890153 and I've prepared a PR that fixes and explain why we shouldn't do that #27672
The changes to add the font-size look fine by me (other than removing the CSS Custom Property, see comment). I see there's some conversation about how to handle the wrapping, as soon as that's sorted out, it's fine to land this PR. |
This is the theme's job. For more information, see #27672
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This seems good to me! I'd love a sanity check from Andrés or Ben or Kjell, but otherwise, thank you for your work and congrats on your first PR!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
We should also add this to the docs (docs/designers-developers/developers/themes/theme-json.md) |
This is added due to new requirement implemented in #25220 Co-authored-by: Ari Stathopoulos <[email protected]>
Congratulations on your first merged pull request, @mendezcode! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts: https://profiles.wordpress.org/me/profile/edit/ And if you don't have a WordPress.org account, you can create one on this page: https://login.wordpress.org/register Kudos! |
Description
Adds support for font sizes to the preformatted code block. It also changes the CSS for this block to use the global styles variable, setting a fallback font size.
How has this been tested?
Tested with a block based and non block based version of
twentytwentyone
.Screenshots
Types of changes
New feature (non-breaking change which adds functionality).
Checklist: