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: #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: Post Comments Count: Prevent text-decoration from affecting warning #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
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	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Embed	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫
Details	✅ 👀	✅	✅	✅	✅	✅	✅	✅
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	🚫	🚫	🚫	🚫	🚫	🚫	🚫	🚫
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

• Add font family and text-decoration typography supports to paragraph blocks #39642
• Column Block: Adopt typography supports #43252
• Columns Block: Add typography supports #43253
• Categories List: Add typography support #43254
• Code Block: Add missing typography supports to code block #43255
• Comment Author Name: Add missing typography support #43256
• Comments Content: Add missing typography support #43257
• Comment Date: Add missing typography support #43262
• Comment Edit Link: Add missing typography support #43263
• Comments Reply Link: Add missing typography support #43264
• Comment Template: Adopt typography supports #43266
• Comments: Add typography support #43286
• Comments Pagination: Add typography support #43287
• Comments Pagination Next: Add missing typography supports #43288
• Comments Pagination Previous: Add missing typography supports #43290
• Comments Title: Add missing typography supports #43291
• Cover: Add typography supports #43298
• Home Link: Add typography support #43307
• Group: Add missing typography supports #43308
• List: Add missing typography block supports #43311
• Media & Text: Add typography support #43314
• Post Author: Add missing typography supports #43317
• Post Author Biography: Add missing typography support #43318
• Post Author Name: Add missing typography supports #43319
• Post Comments Count: Add missing typography supports #43321
• Post Comments Link: Add missing typography supports #43338
• Post Content: Add typography supports #43339
• Post Date: Add missing typography supports #43340
• Post Excerpt: Add missing typography supports #43341
• Post Template: Add typography supports #43342
• Post Terms: Add missing typography supports #43343
• Post Navigation Link: Add missing typography supports #43344
• Preformatted: Add missing typography supports #43345
• Pullquote: Add missing typography supports #43346
• Post Comments Count: Prevent text-decoration from affecting warning #43497
• Search block: Add typography supports #43499
• Table of Contents: Add typography support #43509
• Latest Posts: Add typography supports #43540
• Navigation: Add missing typography support #43542
• Query No Results: Add typography supports #43551
• Query Pagination: Add typography support #43552
• Query Pagination Next: Add missing typography supports #43555
• Query Pagination Previous: Add missing typography supports #43556
• Query Pagination Numbers: Add missing typography supports #43559
• Query Title: Add missing typography supports #43565
• Quote: Add missing typography supports #43567
• Term Description: Add missing typography supports #43568
• Verse: Add missing typography supports #43569
• Buttons: Add typography supports to button/s blocks #43934
• Archives: Add typography support #43935
• Calendar: Add typography supports (except text-decoration) #43969
• Site Title and Tagline: Add text decoration support #43972
• Table: Add missing typography supports #43974
• Heading: Add missing typography support #44003
• Navigation Link: Add typography support #44005
• Tag Cloud: Add typography supports (except font size) #43452
• Add typography support to time to read block #49257

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: #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.

[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.