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	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	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Query Total	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Quote	✅ 👀	✅	✅	✅	✅	✅	✅	✅
Read More	✅ 👀	✅	✅	✅	✅	✅	✅	✅
RSS	#66991	#66991	#66991	#66991	#66991	#66991	#66991	#66991
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

• Post Title Block: add typography formatting options #31623
• Typography block support: add typography support and defaults #34064
• Post date Block: Add font weight support to the block #34070
• Post terms: add font weight support to the block #34142
• [Block Library - Post Navigation Link]: Add typography settings #35324
• Post Date: Add more typography options #35422
• Add fontStyle control to Site Tagline block #35507
• [Block: Post comment author]: Add link settings and block supports #35595
• Add the typography support to group/row blocks #37456
• Add font family and text-decoration typography supports to paragraph blocks #39642
• Query page numbers block: add same supports that next/prev page have #39835
• Post Navigation Link: add design controls (color, text decoration, and font family) #41378
• Adds text decoration support to post title block #42328
• 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 Numbers: Add typography support #43289
• 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
• Latest Comments: Add typography support #43310
• List: Add missing typography block supports #43311
• List Item: Adopt typography supports #43312
• Media & Text: Add typography support #43314
• Page List: Add typography supports #43316
• 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
• Tag Cloud: Add typography supports (except font size) #43452
• 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
• Add Typography: text orientation (writing mode) #50822
• Add writing mode support to other blocks #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: #42646 cc @ndiego as a heads up!