Tracking: Disabling Design Tool UIs

[aaronrobertshaw]

Overview

When theme.json was created, one of its features was to allow theme authors to be able to lock down certain design tools by disabling their UIs. This meant that blocks could opt into a support and be style-able by theme.json, yet not present that support's UI to end users in global styles or the block inspector.

A few instances of odd behaviour with the ability to disable design tool UIs via theme.json have surfaced lately. This prompted some testing across all our block supports. The issues uncovered have been broken down by block support.

Border Support

Cannot opt-out of only border-color or only border-width support

Currently, the combined border control is rendered if either the border color or border width is enabled. For example, if you disabled border color but enabled width, you'd still see the border color option in the combined border control.

An empty "Border" panel

If borders have been disabled at the root level, but only border style gets re-enabled at the block level, an empty Border panel is rendered. Border style isn't supposed to be editable without border color and width support.

Color Support

Elements Color Screen in Global Styles

If all color supports are disabled, the color options, e.g. text, background etc, are still visible in the Global Styles sidebar.

Empty Color Screens in Global Styles Sidebar

When all color features have been disabled in theme.json, you can still see the options in the global styles sidebar. Once you click on these, however, the sidebar moves to an empty view with no back navigation options. The only way to get back to the previous screen is to switch away from global styles e.g. to the block inspector, then back to global styles and re-navigate to where you were.

No Padding on Color Screen for Gradients Only Configuration

If only the gradients UI is enabled (i.e. no background), you'll still see the "background" option in the global styles color screen. Once you click into that option, there is no padding at all around the contents as it is expecting to have been inside a Tab that provides padding, such as in the case when background is also enabled.

Unintuitive Disabling of Background/Gradients

The background color support covers both solid colors and gradients. At present, you can disable only the background UI in theme.json and it will still be presented.

This is due to the "background" control still being shown if background OR gradients are enabled.

The real trick is disabling gradients. The only way to do this is to both empty the gradients palette and set customGradient to false.

Layout Support

Layout support hasn't matured to a point yet where the ability for theme authors to disable its UI has been implemented.

Spacing Support

At the root level in Global Styles, when you navigate into "Layout", the padding control is expanded and states it has a mixed value. Core sets 0px on all sides at the root level. This should be treated as a single uniform value which would reduce the clutter here.

Typography Support

Empty Panel in Global Styles

Disabling the typography design tool UIs leaves an empty panel but with a "Font size" option in the tools panel menu. This only occurs in Global Styles as, unlike the block editor, the inclusion of the font size control doesn't check for the presence of font size presets.

While this is an extreme edge case, it's a quick and easy fix, so we should do so.

Tasks

• Update combined border control to adapt to disabling one of color and width
• Prevent empty Border panel when style gets enabled at block level without color and width
• Explore preventing color options showing if all color support UIs have been disabled
• Prevent empty color screens when all color support UIs have been disabled
• If gradient only background options are acceptable, add padding around them in global styles panel
• Simplify and improve logic around disabling background color controls
• Implement theme.json UI disabling for layout supports
• Prevent core's root padding from being treated as a mixed value in the global styles sidebar to reduce clutter
• Prevent empty typography panel in global styles sidebar if font size UIs have been disable

Existing Issues

• Setting to disable Layout controls #31980
• Color Panel appears on group block even if disabled in theme.json #41293