Tracking: Typography Design Tools Consistency

[aaronrobertshaw]

Overview

This issue details the current state of typography block support or design tool adoption across all blocks as well as tasks required to fill any gaps. Overall design tool consistency efforts are being tracked via the parent issue: https://github.com/WordPress/gutenberg/issues/43241.

Known Issues

• [ ] Typography styles applying to block placeholders
• [ ] Any block conditionally displaying a <Warning> within the editor will have text-decoration styles forced upon it unless explicitly omitting the text decoration style before applying the styles its wrapper.
  • text-decoration cannot be reset as per other typography styles.
  • This will need to be addressed on a block-by-block basis.
  • Example PR addressing this problem: https://github.com/WordPress/gutenberg/pull/43497
• [ ] Experimental typography block support APIs should be stabilized
• [ ] Once a set "default" configuration is clear for typography supports including what controls show by default, implement shorthand configuration e.g. "typography": true or "typography": "default"
• [ ] The Navigation block applies classes direct to it's li items which will conflict with font size classes for the HomeLink block.
• [ ] Text decoration control is not made available in Global Styles (this is due to past decision we shouldn't encourage such styling at a global level)

Legend

Value	Description
✅ 👀	Feature has been adopted and is visible by default control
✅	Feature has been adopted but is an optional control
⚠	There is a bug or issue with this block support feature's adoption
❌	Feature has been explicitly opted out of
<PR#>	Links to PR adopting the feature for this block
-	Feature has not explicitly been adopted/omitted
🛠	Implemented via an ad hoc / bespoke control
🚧	Work is in progress towards adopting this feature (no PR yet)
🚫	Block support will not be adopted for this block
⏳	Adoption of block supports is pending block refactoring

Block Support Adoption

Note: Deprecated blocks have been omitted from this table. e.g. Comment Author Avatar, Post Comment & Text Columns.

Block	Font Size	Line Height	Font Style	Font Weight	Text Transform	Letter Spacing	Font Family	Text Decoration	Writing Mode
Archives	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Audio	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫
Avatar	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫
Button	✅ 👀	✅	✅	✅	✅	✅	✅	✅	✅
Buttons	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Calendar	✅ 👀	✅	✅	✅	✅	✅	✅	🚫
Categories	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Code	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Column	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Columns	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Comment Author Name	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Comment Content	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Comment Date	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Comment Edit Link	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Comment Reply Link	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Comment Template	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Comments	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Comments Pagination	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Comments Pagination Next	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Comments Pagination Numbers	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Comments Pagination Previous	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Comments Title	✅ 👀	✅	✅ 👀	✅ 👀	✅	✅	✅ 👀	✅
Cover	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Details	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Embed	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫
File	-	-	-	-	-	-	-	-
Footnotes	✅ 👀	✅	✅	✅	✅	✅	✅	✅	✅
Gallery	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫
Group	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Heading	✅ 👀	✅	✅	✅	✅	✅	✅	✅	✅
Home Link - Navigation	✅ 👀	✅	✅	✅	✅	✅	✅	✅
HTML	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫
Image	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫
Latest Comments	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Latest Posts	✅ 👀	✅	✅	✅	✅	✅	✅	✅
List	✅ 👀	✅	✅	✅	✅	✅	✅	✅
List Item	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Login/logout	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Media & Text	✅ 👀	✅	✅	✅	✅	✅	✅	✅
More (Read More)	-	-	-	-	-	-	-	-
Navigation	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Navigation Link	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Navigation Submenu	-	-	-	-	-	-	-	-
Next Page (Page Break)	-	-	-	-	-	-	-	-
Page List	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Paragraph	✅ 👀	✅	✅	✅	✅	✅	✅	✅	✅
Post Author	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Post Author Biography	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Post Author Name	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Post Comments Count	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Post Comments Form	✅ 👀	✅	✅	✅	✅	✅	-	-
Post Comments Link	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Post Content	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Post Date	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Post Excerpt	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Post Featured Image	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫
Post Navigation Link	✅ 👀	✅	✅	✅	✅	✅	✅	✅	✅
Post Template	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Post Terms	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Post Title	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Preformatted	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Pullquote	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Query	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫
Query No Results	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Query Pagination	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Query Pagination Next	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Query Pagination Numbers	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Query Pagination Previous	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Query Title	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Quote	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Read More	✅ 👀	✅	✅	✅	✅	✅	✅	✅
RSS	-	-	-	-	-	-	-	-
Search	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Separator	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫
Shortcode	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫
Site Logo	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫
Site Tagline	✅ 👀	✅	✅	✅	✅	✅	✅	✅	✅
Site Title	✅ 👀	✅	✅	✅	✅	✅	✅	✅	✅
Social Link	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫
Social Links	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫
Spacer	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫
Table	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Table of Contents	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Tag Cloud	🚫	✅	✅	✅	✅	✅	✅	🚫
Term Description	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Time To Read	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Verse	✅ 👀	✅	✅	✅	✅	✅	✅	✅	✅
Video	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫

Merged PRs

The following list details all the PRs merged as part of this effort to increase typography support.

Click to expand list of merged PRs

- https://github.com/WordPress/gutenberg/pull/31623 - https://github.com/WordPress/gutenberg/pull/34064 - https://github.com/WordPress/gutenberg/pull/34070 - https://github.com/WordPress/gutenberg/pull/34142 - https://github.com/WordPress/gutenberg/pull/35324 - https://github.com/WordPress/gutenberg/pull/35422 - https://github.com/WordPress/gutenberg/pull/35507 - https://github.com/WordPress/gutenberg/pull/35595 - https://github.com/WordPress/gutenberg/pull/37456 - https://github.com/WordPress/gutenberg/pull/39642 - https://github.com/WordPress/gutenberg/pull/39835 - https://github.com/WordPress/gutenberg/pull/41378 - https://github.com/WordPress/gutenberg/pull/42328 - https://github.com/WordPress/gutenberg/pull/43252 - https://github.com/WordPress/gutenberg/pull/43253 - https://github.com/WordPress/gutenberg/pull/43254 - https://github.com/WordPress/gutenberg/pull/43255 - https://github.com/WordPress/gutenberg/pull/43256 - https://github.com/WordPress/gutenberg/pull/43257 - https://github.com/WordPress/gutenberg/pull/43262 - https://github.com/WordPress/gutenberg/pull/43263 - https://github.com/WordPress/gutenberg/pull/43264 - https://github.com/WordPress/gutenberg/pull/43266 - https://github.com/WordPress/gutenberg/pull/43286 - https://github.com/WordPress/gutenberg/pull/43287 - https://github.com/WordPress/gutenberg/pull/43289 - https://github.com/WordPress/gutenberg/pull/43288 - https://github.com/WordPress/gutenberg/pull/43290 - https://github.com/WordPress/gutenberg/pull/43291 - https://github.com/WordPress/gutenberg/pull/43298 - https://github.com/WordPress/gutenberg/pull/43307 - https://github.com/WordPress/gutenberg/pull/43308 - https://github.com/WordPress/gutenberg/pull/43310 - https://github.com/WordPress/gutenberg/pull/43311 - https://github.com/WordPress/gutenberg/pull/43312 - https://github.com/WordPress/gutenberg/pull/43314 - https://github.com/WordPress/gutenberg/pull/43316 - https://github.com/WordPress/gutenberg/pull/43317 - https://github.com/WordPress/gutenberg/pull/43318 - https://github.com/WordPress/gutenberg/pull/43319 - https://github.com/WordPress/gutenberg/pull/43321 - https://github.com/WordPress/gutenberg/pull/43338 - https://github.com/WordPress/gutenberg/pull/43339 - https://github.com/WordPress/gutenberg/pull/43340 - https://github.com/WordPress/gutenberg/pull/43341 - https://github.com/WordPress/gutenberg/pull/43342 - https://github.com/WordPress/gutenberg/pull/43343 - https://github.com/WordPress/gutenberg/pull/43344 - https://github.com/WordPress/gutenberg/pull/43345 - https://github.com/WordPress/gutenberg/pull/43346 - https://github.com/WordPress/gutenberg/pull/43452 - https://github.com/WordPress/gutenberg/pull/43499 - https://github.com/WordPress/gutenberg/pull/43509 - https://github.com/WordPress/gutenberg/pull/43540 - https://github.com/WordPress/gutenberg/pull/43542 - https://github.com/WordPress/gutenberg/pull/43551 - https://github.com/WordPress/gutenberg/pull/43552 - https://github.com/WordPress/gutenberg/pull/43555 - https://github.com/WordPress/gutenberg/pull/43556 - https://github.com/WordPress/gutenberg/pull/43559 - https://github.com/WordPress/gutenberg/pull/43565 - https://github.com/WordPress/gutenberg/pull/43567 - https://github.com/WordPress/gutenberg/pull/43568 - https://github.com/WordPress/gutenberg/pull/43569 - https://github.com/WordPress/gutenberg/pull/43934 - https://github.com/WordPress/gutenberg/pull/43935 - https://github.com/WordPress/gutenberg/pull/43969 - https://github.com/WordPress/gutenberg/pull/43972 - https://github.com/WordPress/gutenberg/pull/43974 - https://github.com/WordPress/gutenberg/pull/44003 - https://github.com/WordPress/gutenberg/pull/44005 - https://github.com/WordPress/gutenberg/pull/43452 - https://github.com/WordPress/gutenberg/pull/49257 - https://github.com/WordPress/gutenberg/pull/50822 - https://github.com/WordPress/gutenberg/pull/62727

PRs with pending questions, discussions, or concerns

...

Blocks where we're making a conscious decision to skip Typography support

Block	Reason
Audio	Application of typography styles would mess with the balance between the track progress, icons etc
Avatar	Avatar's don't have a caption or textual elements to style
HTML	While contents of this block might benefit from styling, the custom HTML only gets a wrapper block to apply typography styles to in the editor, which is also wrapped in an iframe sandbox. There are also no guarantees for the custom HTML to have a single wrapping element we could attempt to inject styles into either.
Post Feature Image	There's no caption for the post feature image block so typography styles don't make sense here.
Separator	Typography styles won't impact this block.
Site Logo	Another image block with no caption and therefore no need for typography support
Social Link	There's little that would apply from typography styles to this block. Line height might be the only one. Skipping typography support as that might be better handled via a height control/support. Height should also be uniform across children of the parent Social Links block.
Social Links	Similar to above. Typography styles don't make a lot of sense on this block. Height would be better handled via a control dedicated to that.
Spacer	There's no typography within the block. Height is controlled explicitly so even line-height wouldn't make sense

Captioned Blocks

There are several blocks which only have a caption as an inner textual element. While it is possible to adopt typography supports for these, there have been explorations towards implementing a Caption block that could be used as an inner block. Adopting typography supports now would likely mean needing to maintain their classes and styles or add extra deprecations should a Caption block land. Additionally, some captioned blocks add their own styles around captions that would override or conflict with those provided by the typography supports.

The current thinking is that we'll postpone any block support adoption here until after 6.1 as that will provide a window to revisit a dedicated Caption block, refactors, and explorations for more complicated blocks such as the Gallery block, which still might benefit from typography supports (so users have a single place to set all the caption styles for its inner images).

The captioned blocks to be revisited after 6.1 are;

• Embed
• Gallery
• Image
• Video

Planned Follow-ups

• Prevent text-decoration block supports from affecting placeholder text.

Possible Follow-ups

• Add a way to scale font size relatively on parent blocks.

[annezazu]

Related issue: https://github.com/WordPress/gutenberg/issues/42646 cc @ndiego as a heads up!

[ndiego]

This is great, thanks @aaronrobertshaw just closed out mine in favor of this issue. Let's fill out this table! I'm happy to pick off a few if you want help Aaron.

[gziolo]

I see a big number of PRs adding a similar changes to core blocks:

"typography": {
    "fontSize": true,
    "lineHeight": true,
    "__experimentalFontFamily": true,
    "__experimentalFontWeight": true,
    "__experimentalFontStyle": true,
    "__experimentalTextTransform": true,
    "__experimentalTextDecoration": true,
    "__experimentalLetterSpacing": true,
    "__experimentalDefaultControls": {
        "fontSize": true
    }
 }

I'm all in for consistency, so this is a great effort that I greatly appreciate. Excellent work championing that!

---

I have two questions related to the changes proposed:

1. Should we promote all experimental typography options to stable now that they are going to be used with most of the blocks?
2. Are there any differences in how typography is configured for the blocks that use it? Should we introduce a shorthand so we don't have to repeat the most popular setting like "typography": true or "typography": "default"?

[aaronrobertshaw]

Thanks for checking in on this @gziolo 👍

I see a big number of PRs adding a similar changes to core blocks:

🤞 I hope the number isn't too many, too fast. We decided that it would be best to split all the adoptions up so each could be treated on its merits and any problem blocks didn't derail the whole process.

I have two questions related to the changes proposed:

Those are great questions.

Should we promote all experimental typography options to stable now that they are going to be used with most of the blocks?

This has crossed my mind and was on the radar. I've explicitly added it within the final phase of these design tool consistency efforts.

Are there any differences in how typography is configured for the blocks that use it? Should we introduce a shorthand so we don't have to repeat the most popular setting like "typography": true or "typography": "default"?

I don't think any of the differences would prevent us from adopting a shorthand config. Those blocks that want the default supports but wish to skip serialization of the styles or set their own feature level selector would only need to use the current longhand config.

We might also need to tweak the automatic doc generation etc.

I'll add this to the tracking issue as well.

[bph]

Added needs dev note label in case typography supports makes it into 6.1 - this table is very helpful. 🙂👏

[ndiego]

Are there any differences in how typography is configured for the blocks that use it? Should we introduce a shorthand so we don't have to repeat the most popular setting like "typography": true or "typography": "default"?

I would love to see something like this for both theme.json and block.json. A shorthand that allows you to turn everything on or everything off rather than having to specify each setting individually.

[aaronrobertshaw]

I would love to see something like this for both theme.json and block.json.

@ndiego you might already be aware, but there is a setting for theme.json that allows quick opt-in to all the standard supports, appearanceTools.

While I would also love to have a shorthand config option available at the moment, it obviously makes a lot of sense for the work outlined in this issue, I'm cautious that it might derail or block our current efforts to improve consistency which was one of the goals outlined in the 6.1 roadmap.

There's not a lot of time left before code freeze so I'm inclined towards the shorthand being a very nice to have feature, if we can get to it. Failing that, I'm sure it could be something for the next release.

[aaronrobertshaw]

An overall update on progress towards design tools consistency has been added to the primary tracking issue, including our goals for WordPress 6.1.

[aaronrobertshaw]

I've updated this tracking issue's description to include a brief section on "Captioned Blocks" and why we won't be adopting typography supports for them just yet.

TL;DR

• There's the potential for a Caption block that would alter the need to adopt typography support for Embed, Image, Gallery, and Video blocks
• Adoption of typography supports now would need to resolve some style conflicts which complicate matters
• Adoption of typography supports now would mean maintaining support for those classes and styles or adding more deprecations.

[t-hamano]

Update:

• I have added the Footnotes and Details blocks to the list.
• #50822 added new __experimentalWritingMode support. Some blocks already support this, so it might be worth adding to the list.

[bacoords]

Is anyone aware of a similar issue but for adding more of the typography design tools to the supports for custom blocks? (As of writing, custom blocks only support fontSize and lineHeight)

[t-hamano]

You should be able to opt-in to various features not only in core blocks but also in custom blocks using properties with the __experimental prefix. For example, various features supported by the Paragraph block could also be opted-in to a custom block.

Note that this may be an experimental property. Previously, an article was posted about experimental APIs. I don't know exactly how experimental features that are already in the core will be handled in the future, but you may need to be careful when using them.

[markhowellsmead]

Adding full typography controls to Audio, Embed, Gallery, Image, Login/logout, Post Featured Image, Tag Cloud and Video would make sense. In particular, allowing the user to control the typography of the media caption for a specific block instance.

[t-hamano]

Update: I have updated the table with the latest specs.

At the same time, I also added the wirtingMode support column. We need to also consider whether we can add this support, except for blocks that already have it and blocks that clearly do not need it.

It is also worth noting that three new block support additions have been proposed:

• textIndent: #59496
• textShadow: #63937
• textOrientation: #60030

[aaronrobertshaw]

Thanks for updating this one @t-hamano 🙇

There's a few too many revisions to go through on the issue description. Can you link any PRs for what changed under the merged PRs section? It helps others tracking these efforts.

[t-hamano]

I've rechecked all the core blocks and added all the PRs that added typography support to the merged PRs list 👍