Add typography block style variations #330
Conversation
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
This looks good to me! |
|
It's more a matter of if this is really something that we want to do. Is having two font size controls the best experience for the user. |
There was a problem hiding this comment.
Personally, I am not sure about adding this one. I believe it could be confusing for users having two places competing for the same functionality, so close to each other and with the same name (XL). I believe, for many users, the difference between both of these won't be clear.
Are we going to be adding more of these?
|
I like that we're providing another styling option, but it can seem a bit incoherent to see two XL in two different places. |
|
If a style variation adds more than just a size, for example size, letter-spacing, transformation, weight and line height combinations; then they are more helpful because they are like shortcuts, much like the "pill" or "rounded" styles. But Rich only pointed out this one combination, which is used in two patterns: this and one other. What kind of names could this type of variation use? |
|
Lede? Callout? Byline? Kicker? -Yes I asked Chat GPT for examples from the news world. |
|
BTW these section style names still needs to be updated "Style 1" 😄 |
Yes that's the best term, I like that we'd be providing shortcuts 👍 I find "Intro" or "Large Lead" more intuitive than the others. |
|
This example uses the XL font size so maybe "Large lead" then. It depends on if we are adding more... |
|
Another style I can think of we could add is this one:
It has specific letter spacing and can work nicely in some occasions. It would be a nice shortcut to add. It's used in some categories: And H6: |
Preview changesYou can preview these changes by following the link below: I will update this comment with the latest preview links as you push more changes to this PR. |
carolinan
changed the title
| "$schema": "https://schemas.wp.org/trunk/theme.json", | ||
| "version": 3, | ||
| "slug": "uppercase", | ||
| "title": "Uppercase", |
There was a problem hiding this comment.
I also tried "Bold Uppercase" but it did not fit inside the button in the interface, it got truncated.
More-posts.php: Apply style variation to heading Add the transaltion function around the heading text
|
Thanks for the exploration. Here's a quick GIF of the interface:
My main comment here would be the user experience of using these variations for paragraphs. I think the instinct behind #305 (CC: @richtabor) is a good one: making it easy for someone to easily apply visual styles across text-blocks so as to easily achieve a coherence across content. The main problem with this is the variation interface itself. It has high prominence, being at the top of the inspector, which for a base atomic block such as the paragraph is pretty big. It's also not that valuable in most cases of authoring blog posts; all-caps and pill shaped notably are not going to make good reading experiences in those cases. Those styles are perfect for unique use cases such as subheadings or other section delimiters. Pending any additional thoughts by Rich, I'd lean towards not adding these variations, at the very least not to the Paragraph block, since improvements to the variation UI are not immediately on the radar for the block editor. Would it be possible instead to have a category of utility patterns? Subheadings, things like that, which come with these all-caps and pill shape styles by default? "Lead" is also very close to the XL default font size, even if it has a tighter line-height. I don't know that's sufficent to add this. |
|
The problem with adding them as patterns is that all the styling is in the markup, so they can not be changed in the global style variations and section styles. |
|
Yep, that would be the trade-off, and not ideal. I think we should work to improve this, through type styles or otherwise, in the block editor itself. That's a longer term view. |
|
Can we review the use of paragraphs with the pill style and uppercase again, and use the headings -with the correct heading levels as suggested and disregarded in past pull requests. Using all uppercase for large sections of text reduces readability*, having these options for the paragraph may encourage unintended use. https://accessibility.huit.harvard.edu/design-readability |
Just to clarify, that's specifically one of the reasons why I'd suggest not making these into block variations. But that doesn't mean it's not useful as patterns, whether small utility patterns on their own, or as part of larger patterns, where these styles are used well. |
|
After removing the paragraph styles, the theme is still left with the uppercase block style for the heading and post terms, is there value in keeping them? I did not finish implementing it since we were still discussing it, there are more places where using the CSS class could help remove the hard coded style from the markup. |
|
I don't think we should have one-off text styles applicable to some content/text blocks, but not others. It creates an inconsistent experience. And it's not really solving the typography situation we have today, where some styles are hardcoded into paragraphs and headings (already). |
Description
This is an experiment for #305
This does not replace the custom font sizes in theme.json, it is a complement that helps us remove hard coded font sizes in the markup.
This means that the size and line height can be adjusted in a global style variation, if we want.
What was changed:
Screenshots
This screenshot shows the "Lead" paragraph style variation, text with the old markup first, and the new variation second: There should be no visible difference:
This video shows how the style is applied:
https://github.com/user-attachments/assets/af5eb091-3efa-412c-9c91-b8b5b1cbc8be
Testing Instructions
Place a paragraph, a post terms block and two heading blocks: One of the headings should use the H6 level.
Apply the different style variations, and compare the result in the editor and front.
The uppercase variation should match the style of the H6.