Code block: Add support for font sizes #27294
Conversation
scruffian
added
[Block] Code
|
Hmmm I can see why we'd want that as an option in the block's global-styles, but having it available on a per-block basis seems like overkill to me. Though I don't think it can be available in global-styles without being exposed in the block options so I'm on the fence here 🤔 Code-wise this PR looks OK, it's the concept of the PR that troubles me a bit. |
|
Size Change: +69 B (0%) Total Size: 1.2 MB
ℹ️ View Unchanged
|
|
In general my hope for global styles is that it can provide solid defaults for these things, which can then be overridden on a per-block basis. That appears to be the case with this PR. 👍 It then becomes a question of whether a feature should then be highlighted as something to override on a per-block basis. That's what Ari refers to — is it a good user experience to surface font size for the code block? On the one hand, if the code size is too small, ideally you should change the font size for all code blocks, in Global Styles, not just one. On the other hand, I can see a use case — say for highlighting some code in a blog post extra large — where you'd want a default font size, and extra emphasis for just this one block. I think there's a separate opportunity for us to improve the design of sidebar components to balance the prominence of these features, that perhaps also provide a shortcut to editing the global styes instance. But in the mean time, I think I'm leaning towards this one being cool, because of the use case mentioned. |
|
I think this highlights a conversation we're having at the moment: how to control what style properties are exposed at the block level and at the global level #27295 |
|
Thanks @aristath |
| white-space: pre-wrap; | ||
| overflow-wrap: break-word; | ||
| .wp-block-code { | ||
| font-size: var(--wp--preset--font-size--extra-small, 0.9em); |
There was a problem hiding this comment.
👋 we shouldn't have used a CSS Custom Property here, explained the rationale, and prepared a bugfix at #27672
oandregal
added
the
Needs Dev Note
|
I've added the "Needs Dev Note" in this issue so we don't forget to create a Dev Note for WP 5.7 for this kind of change: list all the new style properties that were added to blocks and users can update. This should be useful for themes and plugins to check whether they need to adapt anything. Hat tip to Riad for the suggestion. |
|
As per #28539 (comment) I've removed the "Needs dev note" from this PR. |
oandregal
removed
the
Needs Dev Note
Description
This adds support for font sizes to the code block. It also changes the CSS for this block to use the global styles variable with the old size as a fallback.
How has this been tested?
Tested with a block based and non block based themes (twentytwentyone)
Screenshots
Types of changes
New feature (non-breaking change which adds functionality)
Checklist: