Color Panel appears on group block even if disabled in theme.json

[johnstonphilip]

Description

If I disable everything relating to colors in theme.json, the panel still shows up on blocks that support it, such the group block.

Step-by-step reproduction instructions

1. In a block theme, set theme.json like this:

{
    "version": 2,
    "settings": {
        "color": {
            "custom": false,
            "customDuotone": false,
            "customGradient": false,
            "defaultGradients": false,
            "defaultPalette": false,
            "background": false,
            "defaultDuotone": false,
            "text": false
        }
    }
}

2. In the block editor, ad a group block. Notice you'll still see a Color panel in the sidebar, even though you can't do anything with it. Interestingly it shows a "background" option that opens a popover with nothing inside it.

Screenshots, screen recording, code snippet

No response

Environment info

• Gutenberg 13.3.0-rc.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[delawski]

@johnstonphilip Thanks for filing an issue.

While reviewing your ticket, I learned that in order to disable the color panel for a given block, you need to disable color-related properties in the theme.json on a per-block basis.

I.e. setting settings.color. … properties to false globally is insufficient. You need to specifically disable them for every block, like:

{
	"version": 2,
	"settings": {
		"appearanceTools": true,
		"blocks": {
			"core/paragraph": {
				"color": {
					"link": false
				}
			}
		}
	}
}

[johnstonphilip]

Interesting. Despite that this is a bug though right? It should never be in this state where it shows but there's no controls within it, unless I'm missing something!

[MatzeKitt]

By the way, it’s the same if you don’t use a theme.json (so if you’re not using a block-based theme) and disable it via add_theme_support( 'disable-custom-colors' );.

[ALJ]

@johnstonphilip I experimented with the color object from your theme.json and just one inclusion successfully hid that broken Color panel. Try this; notice the inclusion of "gradients": []:

"color": {
  "custom": false,
  "customDuotone": false,
  "customGradient": false,
  "defaultGradients": false,
  "defaultPalette": false,
  "background": false,
  "defaultDuotone": false,
  "text": false,
  "gradients": []
},

Having said that, I've come across a very similar bug (I assume it's a bug). The core/button block's Border panel still displays even when disabling borders globally with:

{
  "version": 2,
  "settings": {
    "appearanceTools": false,
    "border": {
      "color": false,
      "radius": false,
      "style": false,
      "width": false
    },
  },
}

Even with the above, I have to add the same radius: false on core/button later in the same theme.json file in order to hide the panel.

[MatzeKitt]

This seems to be because there is a check beforehand if __experimentalBorder is supported:

gutenberg/packages/block-editor/src/hooks/border.js

Lines 319 to 323 in 046ca65

	const support = getBlockSupport( blockName, BORDER_SUPPORT_KEY );
	if ( support === true ) {
	return true;
	}

However, you can disable it specifically for the button block:

https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#settings-examples

[ALJ]

Thank you @MatzeKitt for the context and look through the code 😄 ... my point was this behavior is unexpected to me. I expect no block to show Radius in a Border panel when that is specifically set to false in the global theme.json settings.

[MatzeKitt]

I’m absolutely on the same side but just wanted to point out a solution, since I needed it. 😄

[johnstonphilip]

I was able to trace this down to 2 places.

The first place is here:

gutenberg/packages/block-editor/src/components/colors-gradients/dropdown.js

Line 141 in 04802c3

const toggleSettings = {

Really, if there's nothing to show, that should return null instead of the Dropdown component. I wasn't able to find the right way to check what is available to show though.

I wasn't able to track down whether the value of toggleSettings would help to know if there's anything to show.

But while fixing that would at least make the Background button dissapear, you'd then be left with an empty color panel like this:

I was able to track that down to here:

gutenberg/packages/block-editor/src/hooks/color-panel.js

Line 65 in 04802c3

<InspectorControls __experimentalGroup="color">

This would be the more ideal place to do a should we show anything here? before rendering a blank Color Panel.

Unfortunately I ran out of time to pursue this further today.

[tellthemachines]

Looking into this behaviour a bit, it seems that both on a global and a block level, it's possible to disable text and link colors individually, but for background to disappear altogether we need at least

"color": {
  "background": false,
  "gradients": [],
  "customGradient": false
}

(Also, setting gradient to false triggers a PHP warning, which is unexpected.)

For the color panel to not render for a specific block type, it's enough to disable all the color settings for that block, e.g., for Gallery, that has only background, the above code snippet is enough to make the panel go away.

In my testing, the following global setting was enough to hide the color controls altogether for all blocks:

"color": {
	"link": false,
  	"text": false,
  	"background": false,
  	"gradients": [],
	"customGradient": false
}

While this works, it's not at all intuitive and could use some improvement.

It should be possible to remove the "background" control by just setting "background': false. Likewise, ideally it should be possible to disable the whole color panel by setting "color": false, rather than being forced to disable each individual setting within color.

[carolinan]

I am not able to reproduce this issue anymore in 6.4.3 and 6.5 RC.
The following disables the color panel for me:

		"color": {
			"text": false,
			"background": false,
			"link": false,
			"custom": false,
			"customDuotone": false,
			"customGradient": false,
			"defaultDuotone": false,
			"defaultGradients": false,
			"defaultPalette": false
		}

[MatzeKitt]

Can confirm that the settings are now being respected correctly.