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

[markhowellsmead]

As @t-hamano mentioned in #63050, this might be the better place to track all of the requirements and missing features. I have compiled a task list in that issue: does it make sense to bring that here? I imagine that a revised list would make sense once 6.6 drops and I would imagine that having one issue per requirement would lead to them all receiving very little attention in the wider context.

[aaronrobertshaw]

does it make sense to bring that here?

I think so.

The linked issues here per block support also capture when deliberate decisions have been made to omit a support from a block when it doesn't make sense.

[markhowellsmead]

Adding the list of outstanding missing supports (which @bph originally compiled).

Edit: see the existing summaries linked at the top of this issue under Tracking Issues for Individual Block Supports.

[markhowellsmead]

Note from #63050 (comment):

Can you expand on your comment, how some features “don’t apply”?

It can sometimes be difficult to predict how and why a support might be hard to implement for a particular block. I.e. the block might have a particular markup structure or server-rendering that means it isn't very straightforward. So, it can be useful to contain the discussion to an issue that's related to that particular block support.

I don't feel that the difficulty of implementation is a valid reason to exclude support of a particular feature.

[aaronrobertshaw]

Thanks for consolidating #63050 into this and adding that list @markhowellsmead 👍

I don't know how useful it is in that long form though. In addition to pushing the rest of this issue's conversation way down the page for a while, it won't act as a source of truth or task list over the dedicated feature issues linked in the description.

For me, it is also a bit misleading as it suggests some supports should be adopted, or are missing, when they were deliberately omitted previously.

Perhaps it could be collapsed under a <details> block if we wish to keep it, what do you think?

Each of the individual feature issues linked in the description will need a quick pass to make sure they are up to date. I suspect they'll only need a few minor tweaks but I don't really have the bandwidth at the moment to do that pass myself.

I don't feel that the difficulty of implementation is a valid reason to exclude support of a particular feature.

My interpretation of that comment was it was highlighting not that support couldn't be adopted but that discussion around it should be contained to an issue that's related to that particular block support.

[Marc-pi]

Hello,
don’t forget the highly needed radius on column (so border is partially implemented on child columns, it’s ok on the parent column). In case we need to build pricing grids, we have to encapsulate a group just to get the radius option.
Related

• Tracking: Border Design Tools Consistency #43247
• Columns Block > allow border radius on columns #41345
• feat(column-block): add rounded block style Automattic/newspack-block-theme#170

[markhowellsmead]

@aaronrobertshaw I agree that it is a very long list, but it also highlights the disparity between the many blocks; some of which have been incomplete for a very long time. Hiding it in a Details block (is that even possible in Github?) is brushing the many problems under the carpet.

I'd opened #63050 in order to try and have a central overview, but it was agreed that this issue (#43241) is the correct place to continue the discussion. I don't want to drag this in the direction of issue administration, but it's more than possible that the summaries are best retained within the issues linked under the original Tracking Issues for Individual Block Supports heading at the top of this issue, rather than having a single check-list here. To that end, I've removed the check-list from my previous comment.

[aaronrobertshaw]

highlights the disparity between the many blocks; some of which have been incomplete for a very long time

@markhowellsmead that's exactly the reason all these design tooling issues were created in the first place 🙂

Hiding it in a Details block (is that even possible in Github?) is brushing the many problems under the carpet.

The details block was a compromise to keep a historical record of where things are at right now.

Contrary to "sweeping problems under the carpet", the dedicated feature issues are more discoverable than a list in a single comment on this issue. So I think we are on the same team here in that we'd both like to see progress made. The dedicated issues per block support are our best bet to do that.

it was agreed that this issue (#43241) is the correct place to continue the discussion

To this point, yes, #43241 was referred to explicitly but I think it was more meant as the collective set of design tooling issues. This is just the primary entry point to those.

To that end, I've removed the check-list from my previous comment.

Thank you 🙇

Having a single checklist or source of truth per block support should help limit confusion and hopefully make it easier for anyone to contribute if they have a particular block and support they'd like to see adopted 🤞

---

P.S. Yes, you can use a simple HTML details block in GitHub comments.

Click for snippet

<details>
<summary>Hello</summary>

World :)
</details>

[andrewserong]

My interpretation of that comment was it was highlighting not that support couldn't be adopted but that discussion around it should be contained to an issue that's related to that particular block support.

Yes, that was my intention — there are heaps of great features that folks would love to implement but some will require more discussion than others. My main hesitation with big tasks lists is that they can sometimes obfuscate how challenging and involved each task might be, and that there'll be discussions to be had along the way.

To be clear, though, I'm very excited seeing all the enthusiasm for improving block supports consistency and feature support here! With many eyes, hopefully it'll be easier for us to tackle in the long term.

[t-hamano]

Should the following block support also be managed in a separate tracking issue?

• background
  • backgroundImage
  • backgroundSize
• shadow

[aaronrobertshaw]

Should the following block support also be managed in a separate tracking issue?

Eventually yes.

My preference would be to address the issues we have now, moving them to a point we can call them complete, before splitting effort further.

Background supports are still in flux, in particular the merging of color gradient and background image support. So that one needs some more time.

Shadow support is only new as well. There is nothing stopping it being adopted for critical use cases but I think its a little premature to try and get it adopted widely over the other pre-existing supports.

[simison]

@aaronrobertshaw related to design tooling:

• Embed blocks: adding captions via toolbar #64385

[aaronrobertshaw]

Thanks for flagging that one and creating a separate issue @simison 👍

Given it's only a handful of blocks that need an update around caption handling, it might be best to track that via #64385. I've added the [Feature] Design Tools and [Type] Enhancement labels to the issue so it should come up in related searches and work efforts.