Gutenberg Block, Change supports with controls

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.

January 7, 2024