After spending a few hours getting a custom color palette setup on a block I discovered a guide that mentioned the Supports API. I had somehow missed this feature, the release articles explanation of it's functionality along with the block.json schema make it sounds fairly self explanatory. But I can't seem to get this to work at all.
My understanding is that you add a support for one of the base features, and add the selector classes for your desired element via either a new global root, or a targeted option / sub option. When Guttenberg injects its classes it will not inject into the root element as per usual, but will instead use your selector to target the desired element and inject the classes there.
However when I've tried to make use of this it does nothing at all. For reference I've been testing on WordPress 6.8.1.
For a basic example of what I've tried (Though this is not actual code I've been using)
block.json
...
"apiVersion": 3,
"name": "example/test",
"supports": {
"html": false,
"color": {
"text": true,
"background": true
}
},
"selectors": {
"root": ".wp-block-example-test",
"color": {
"text": ".wp-block-example-test > h2",
"background": ".wp-block-example-test > p"
}
},
...
index.js
...
edit: () => {
return (
<div {...useBlockProps.()}>
<h2>I should have color</h2>
<p>I should have background</p>
</div>
);
}
save: () => {
return (
<div {...useBlockProps.save()}>
<h2>I should have color</h2>
<p>I should have background</p>
</div>
);
}
...
I've tried a fair few things playing wound with this basic example but nothing works. The only thing that does anything is to use "__experimentalSkipSerialization": true to just disable the output all together.
Unfortunately if you try to google the Selectors API all you seem to get is a load of people parroting the 2023 introductory article. WP Directory has a few examples of its use, though these are generally extremely complex uses in already complex and hard to parse blocks, from what I've seen there is no "basic" example of this feature.
Has anyone made use of this feature? Am I misinterpreting it's functionality?
block.jsonwill not take effect if the same support(s) are set via PHP in the theme/plugin. Could this be the issue? I have stumbled over this in the past.