Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tracking: Typography Design Tools Consistency #43242

Open
6 tasks
aaronrobertshaw opened this issue Aug 16, 2022 · 16 comments
Open
6 tasks

Tracking: Typography Design Tools Consistency #43242

aaronrobertshaw opened this issue Aug 16, 2022 · 16 comments
Assignees
Labels
[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi Needs Dev Note Requires a developer note for a major WordPress release cycle [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues.

Comments

@aaronrobertshaw
Copy link
Contributor

aaronrobertshaw commented Aug 16, 2022

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

@aaronrobertshaw aaronrobertshaw added [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues. [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels Aug 16, 2022
@aaronrobertshaw aaronrobertshaw self-assigned this Aug 16, 2022
@annezazu
Copy link
Contributor

Related issue: #42646 cc @ndiego as a heads up!

@ndiego
Copy link
Member

ndiego commented Aug 16, 2022

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
Copy link
Contributor Author

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
Copy link
Contributor Author

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
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor

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
Copy link

Adding full typography controls to Audio, Embed, Gallery, Image, Login/logout, Post Featured Image, T_ag 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
Copy link
Contributor

t-hamano commented Jul 28, 2024

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:

@aaronrobertshaw
Copy link
Contributor Author

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
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi Needs Dev Note Requires a developer note for a major WordPress release cycle [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues.
Projects
None yet
Development

No branches or pull requests

8 participants