Option to disable duotone

[ajlende]

What problem does this address?

There should be a way to disable the duotone UI from theme.json

What is your proposed solution?

I think for colors, if you set an empty palette [] and set custom to false in theme.json the control disappears entirely, so maybe something similar could work here too

[ajlende]

I think for colors, if you set an empty palette [] and set custom to false in theme.json the control disappears entirely, so maybe something similar could work here too

@mtias and @youknowriad I confirmed that this doesn't actually work for colors. Setting the values in the theme.json as specified still just shows the default palette.

These are the relevant parts of the theme.json config that I have:

{
	"version": 1,
	"settings": {
		"color": {
			"custom": false,
			"customGradient": false,
			"duotone": [],
			"gradients": [],
			"link": false,
			"palette": []
		}
	}
}

And this is what I see:

Setting gradients or palette to false causes errors just like duotone.

Since there isn't already a system for disabling block supports via theme.json, I think having a separate setting to enable and disable them makes more sense. Palettes are used outside of block supports, so it may make sense that you want the supports disabled, but you still want the color/gradient/duotone palettes in other places like for border color for examaple.

I propose adding a block-supports option directly under settings to enable or disable the supports.

{
	"version": 1,
	"settings": {
		"block-supports": {
            "alignWide": false,
			"color": {
              "__experimentalDuotone": false,
              "background": false,
              "gradients": false,
              "text": false
           }
		}
	}
}

We default to having all block supports enabled. Setting to a value of false disables the block support. The support won't be added unless both the theme and the block have it enabled.

What do you think?

[youknowriad]

I think you can disable colors by doing two things, setting the palette to [] and custom to false. Confirm @jorgefilipecosta ?

[erikjoling]

I found out I can disable colors and gradients by setting:

"color": {
	"custom": false,
	"customGradient": false,
	"gradients": null,
	"palette": null
}

I believe this mimics the behavior of add_theme_support where you had to add:

add_theme_support( 'disable-custom-colors' );
add_theme_support( 'disable-custom-gradients' );
add_theme_support( 'editor-color-palette' );
add_theme_support( 'editor-gradient-presets' );

But it's quite confusing and I haven't found a solution for duotone yet.

[erikjoling]

#31986

[ajlende]

So it sounds like for this, in order to be consistent with existing settings, there are a few things that need to happen:

1. The DuotoneControl needs to be disabled when color.duotone === null to hide the toolbar item.
2. The ColorListPicker in the DuotonePicker dropdown needs to be disabled when color.palette === null.
3. The CustomDuotoneBar in the DuotonePicker dropdown needs to be disabled (but probably still shown?) when color.custom === false.

Does that sound accurate?

[youknowriad]

That makes sense yes.

[oandregal]

After some conversation at #33280 I've prepared #33295 to update the logic that handles the visibility of the duotone control.