I'm working on my plugin but I'm stuck with block supports. I need to change supports of block with inspector controls. It's like attributes. However, I have not seen anywhere that the supports section can be edited with inspector controls. Let me explain in detail:
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "myplugin/name",
"supports": {
"html": false,
"spacing": {
"__experimentalSkipSerialization": true,
"margin": true,
"padding": true
}
},
"attributes": {
...
}
}
I want to create a handle function for change supports > spacing > padding true and false. Is there anything like setAttribute({anyAttr: newValue }) for supports? Any help would be perfect.
You could look at using the reapplyBlockTypeFilters
action on the core/blocks
data store to "re-filter" the blocks types, to run your own blocks.registerBlockType
filter.
Example pseudo-code (no build step):
function MyBlockEdit() {
const reapplyBlockTypeFilters = wp.data.useSelect(
(select) => select('core/blocks').reapplyBlockTypeFilters,
);
const onChange = (event) => {
// Remove old hook.
wp.hooks.removeFilter(
'blocks.registerBlockType',
'myplugin/name/filterBlockType',
);
// Refresh hook.
wp.hooks.addFilter(
'blocks.registerBlockType',
'myplugin/name/filterBlockType',
(settings, name) =>
name === 'myplugin/name'
? {
...settings,
supports: {
...settings.supports,
padding: /* true or false */,
},
}
: settings,
);
reapplyBlockTypeFilters();
};
// …
}
With build step:
import { useSelect } from '@wordpress/data';
import { addFilter, removeFilter } from '@wordpress/hooks';
function MyBlockEdit() {
const reapplyBlockTypeFilters = useSelect(
(select) => select('core/blocks').reapplyBlockTypeFilters,
);
const onChange = (event) => {
// Remove old hook.
removeFilter('blocks.registerBlockType', 'myplugin/name/filterBlockType');
// Refresh hook.
addFilter(
'blocks.registerBlockType',
'myplugin/name/filterBlockType',
(settings, name) =>
name === 'myplugin/name'
? {
...settings,
supports: {
...settings.supports,
padding: /* true or false */,
},
}
: settings,
);
reapplyBlockTypeFilters();
};
// …
}
The example onChange
function would be a prop that would fire on some control value change in the inspector controls. Also be aware that this would affect all blocks of the same type.