Gutenberg Block, Change supports with controls

Question

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.

Answer 1

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.