Tracking: Addressing Design Tooling Consistency

[aaronrobertshaw]

Overview

This issue will outline and track efforts toward increasing consistency across all our blocks and their design tools.

Goal

1. To ensure as few gaps in design tools and block supports across blocks as possible.
2. For any omission of support to be a deliberate and documented choice.

Opportunities to Improve Consistency

• Adopt all block supports for all blocks (with exceptions where a deliberate choice is made and the reason why is documented)
• Move all related controls within relevant panels e.g. width or height controls moved into the Dimensions panel.
• Display the same controls by default for each block support or for each related set of blocks e.g. image-related blocks.
• Ensure all non-block-support, bespoke controls use the same components and styling
• Leverage feature level selectors or the elements API to ensure functionality across theme.json, global styles, and individual blocks.

General Approach

An initial audit of blocks vs block supports/design tools has already been conducted to assist in identifying gaps in our support. This current state of our design tools will be outlined per block support in sub-issues tracking them.

Phase 1 - Adopting all supports, for all blocks

This involves creating a suite of PRs to opt into any missing supports for all blocks.

As with most things, there will be edge cases adopting various supports that might slow down the process. Given the time remaining before the 6.1 code freeze, we'll need to be fairly pragmatic here to ensure we get the design tools added in time. We can refine the UX and smooth out some edge cases as "bug fixes" after the initial beta is cut.

Low hanging fruit in this phase will be any support that can simply be opted into and works out of the box. Essentially, supports where the resulting styles can be applied to the block's wrapper. Anything that involves skipping serialization of block support styles will likely take longer to ensure compatibility with theme.json and global styles.

An approach to addressing a missing block support might be:

1. Identify a gap you'd like to fill via the individual block support tracking issues (linked in section below)
2. Search GitHub for existing PRs that might expedite or inform your efforts.
   • Terminology used in this area is often extremely varied so you might need to get creative with your searches.
3. Create PR to adopt missing support (updating block.json, edit.js/index.php etc if skipping serialization).
4. Double check similar or related blocks and make the default controls exposed by the block support match.
5. Update the block support's tracking issue, linking the PR within the block supports table
6. Ping for review

Phase 2 - Consistent Default Controls

Once we have all blocks adopting all block supports that are viable for them, we'll need to make which controls are shown by default as consistent as possible.

This might involve updating each block support to define a set of default controls. Once that is available we can remove default control specification from individual block.json files unless there is a glaring need for a given block to override things. In such a case, that should be discussed in its own dedicated issue/PR.

Alternatively, we might wish to display different sets of default controls for related groups of blocks. The difficulty here is that some blocks might span multiple "block groups" leading to some of the inconsistencies we are trying to avoid.

Phase 3 - Stabilization, Follow-ups, and Documentation

By now, the vast majority of gaps should be filled, and we can revisit any blockers that prevented block support adoption, refine edge cases, refactor blocks etc.

Given the widespread adoption of supports, now is also the time to stabilize the block support APIs.

Now might also be the time to pursue new block supports that may replace ad hoc or bespoke controls. For example, several blocks have width, height, or size-related controls.

In addition to the follow-ups, we should have a clearer view of how many exceptions there are to the "all supports, all blocks" goal and their reasons. This will help inform us of how best to document these exceptions to reduce the occurrence of users feeling that something is "missing".

Further Follow-ups

• Design tools: Better handling of unset / inherited values #43082

Tracking Issues for Individual Block Supports

• Typography
• Dimensions & Spacing
• Colors
• Borders
• Layout

[aaronrobertshaw]

Update: 5 September 2022

Current Status

Work towards completing Phase 1, as outlined in this PR, is still ongoing. We have several contributors from the wider WordPress community assisting in these efforts, which is greatly appreciated 🙇

If there are particular block supports you wish to ensure land in time for 6.1, please feel free to jump in and create or review relevant PRs. If you submit a PR, it would be great if you could also update the relevant block support tracking issue or comment on them (see links at bottom of this issue's description). We'd like to keep these as up-to-date as possible, so anyone can quickly identify gaps and contribute without overlapping the efforts of others.

Rough guide to current Phase 1 completion:

Block Support	Blocks with Full Support	% Complete	# Open PRs (as of this writing)
Typography	46/84	54.76%	9
Spacing	34/84	40.47%	5
Layout	12/23 *	52.17%	1
Color	41/84 **	48.81%	5
Border	8/84	9.52%	3

* Not all blocks will be candidates for adopting layout support. As such, the available blocks number reflects eligibility.
** What makes sense for color support can differ more from block to block. This figure is a very rough approximation.

The figures above don't yet acknowledge any blocks we determine should not in fact opt into a particular block support. As a result, these numbers will tend to be conservative.

What's planned for WordPress 6.1

The current plan is to achieve as much as possible towards completing Phase 1.

Given the large number of blocks and the potential for tricky edge cases, we won't be able to complete phase 1 across all block supports. As such, we'll be approaching them in general order of priority:

Typography > Spacing > Layout > Color > Border

Beyond 6.1

WordPress 6.1 will only be the start of our efforts to achieve consistency across our design tools. The immediate goal post 6.1 will be to complete Phase 1 for all block supports. From there, we should be well positioned to complete phases 2 & 3 for WordPress 6.2.

[aaronrobertshaw]

Update: 16 September 2022

This update is a little late as I was AFK for a few days recently but here goes 🙂

Current Status

In the lead up to the 6.1 feature freeze, we focused primarily on Typography and Spacing supports.

The majority of blocks requiring typography design tools received them. There were of course several exceptions such as captioned blocks e.g. Image, Embed, Video etc. While these blocks could have benefited from typography supports, the potential in the near future for them to be refactored to use an inner standalone Caption block made it worth holding off here to avoid any backwards compatibility issues.

Phase 1 is continuing however the pace here might slow in the short term as we shift focus to help iron out kinks for the 6.1 beta.

Phase 1 completion so far:

Block Support	Blocks with Full Support	No Support Required	Postponed	# Open PRs	% Complete
Typography	59	9	4	4	85.71%
Spacing	42	0	0	4	54.76%
Layout	12 *	0	0	0	52.17%
Color	50 **	5	0	6	65.47%
Border	12	0	0	2	14.28%

* Not all blocks will be candidates for adopting layout support. As such, the available blocks number reflects eligibility.
** What makes sense for color support can differ more from block to block. This figure is a very rough approximation.

[aaronrobertshaw]

Quick comment to drop a link to a PR aiming to extend and stabilize our block.json selectors API.

• Block.json: Refactor and stabilize selectors API #46496

It will offer the ability to specify CSS selectors for individual styles (e.g. font size), not just features (e.g. typography). In turn, that extra flexibility might help smooth out edge cases and make adoption of block supports easier.

[paaljoachim]

It would be great with an update in regards to the upcoming WordPress 6.2. Beta 1 is 7th of February.
Thanks!

[aaronrobertshaw]

Hi @paaljoachim 👋

There hasn't been much progress on further block support adoptions for this release.

Most of the low-hanging fruit (especially for typography supports) has been picked. Those remaining have some trickier edge cases requiring greater control over CSS selectors to ensure we don't create a disjoint between individual blocks and theme.json/global styles (more on this in a moment).

We also ran into some issues with margins being broken by the new layout supports, which became a blocker to adopting spacing supports. With any luck that will be resolved later this week. You can follow progress there on #47399.

With the rapid adoption of block supports adding more and more controls to our sidebar, we've needed to switch focus a little this release to refining the sidebar. A big part of that was the sidebar tabs experiment #45005.

Back to the CSS selectors mentioned earlier, I've been working on stabilizing and extending the block.json selectors API. This will provide blocks with greater control over the selectors used for each block support feature (e.g. color, typography) and subfeature (e.g. background color, font size).

The combination of these efforts should help reduce the friction in adopting missing block supports. Hopefully, allowing for this issue to regain some of its lost momentum.

[t-hamano]

A new "Post Time To Read" block has been merged with #43403. This is an experimental block, but please add it to each table if needed 🙏

[Marc-pi]

@aaronrobertshaw would be great to update the stats. What's planned for 6.3 ?

[aaronrobertshaw]

This is an experimental block, but please add it to each table if needed

@t-hamano, I think it can be added once it's no longer experimental. That said, if anyone feels differently, anyone can update the tracking issues with up-to-date information.

would be great to update the stats. What's planned for 6.3 ?

@Marc-pi I can provide another stat update soon.

Focus generally shifted away from filling design tool gaps toward higher priority issues for 6.2, and wrapping up Gutenberg Phase 2. In addition, we needed to address the crowded sidebar (#45005) and provide more flexibility in how Global Styles for different design tool features could be applied to blocks (#46496).

In terms of what's planned for 6.3, we'll continue to chip away here although my understanding is that more focus will be given to laying groundwork for improved workflows, collaboration, and Gutenberg Phase 3 in general.

Anyone is welcome to submit PRs adopting design tools for blocks they feel are missing them. The more contributors that can help here the better, as it will be a slow process otherwise.

[aaronrobertshaw]

Update: 30 March 2023

Current Status

The adoption of specific design tools for individual blocks became a lower priority as the proliferation of tools in the sidebar became a usability issue. For 6.2, the organisation of the Block Inspector has been updated with the introduction of tabs within the sidebar.

The initial rush of design tool adoption was anticipated to slow naturally as easier adoptions were cherry-picked. What we began to find after that was that we were facing an increasing number of blocks that had edge cases we couldn't quite resolve e.g. ensuring that the application of global styles matched the styles provided by individual block supports. It's expected that with Gutenberg 15.5, we'll have access to a stabilized and extended block selectors API. This will provide us with much greater control over the application of global styles and should unblock further design tool adoption.

Over the last couple of WordPress releases, we've also had new layout supports introduced. These caused an unfortunate regression with margins which blocked several blocks from adopting more spacing supports. A fix for this is almost ready to land.

While the adoption of design tools across blocks hasn't progressed rapidly in the last few months, a lot has been done to position the project for another push. Anyone with the bandwidth to submit PRs filling design tool gaps is encouraged to do so.

Phase 1 completion so far:

Block Support	Blocks with Full Support	No Support Required	Postponed	# Open PRs	% Complete
Typography	64	14	0	0	92.86%
Spacing	51	1	0	9	61.9%
Layout	13 *	0	0	0	56.52%
Color	53 **	5	0	1	69.04%
Border	15	1	0	2	17.88%

* Not all blocks will be candidates for adopting layout support. As such, the available blocks number reflects eligibility.
** What makes sense for color support can differ more from block to block. This figure is a very rough approximation.

[t-hamano]

@aaronrobertshaw

I think it can be added once it's no longer experimental. That said, if anyone feels differently, anyone can update the tracking issues with up-to-date information.

I also added Time To Read block to Tracking Issues for Individual Block Supports since the experimental Table Of Contents block was already present in the listing.