Skip to content

Tracking: Typography Design Tools Consistency #43242

Open

Description

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Labels

Needs Dev NoteRequires a developer note for a major WordPress release cycle[Feature] Design ToolsTools that impact the appearance of blocks both to expand the number of tools and improve the experi[Type] Tracking IssueTactical breakdown of efforts across the codebase and/or tied to Overview issues.

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions