古腾堡块，通过控件更改支持

Question

我正在开发我的插件，但我受困于块支持。我需要使用检查器控件更改块的支持。就像属性一样。但是，我还没有在任何地方看到可以使用检查器控件来编辑支撑部分。让我详细解释一下：

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 3,
    "name": "myplugin/name",
    "supports": {
        "html": false,
        "spacing": {
            "__experimentalSkipSerialization": true,
            "margin": true,
            "padding": true
        }
    },
    "attributes": {
        ...      
    }
}

我想创建一个用于更改的句柄函数支持>间距>填充真和假。有没有像 setAttribute({anyAttr: newValue }) 这样的支持？任何帮助都是完美的。

Answer 1

您可以查看在 reapplyBlockTypeFilters

 数据存储上使用 

core/blocks

 操作

来“重新过滤”块类型，以运行您自己的

blocks.registerBlockType

过滤器。

示例伪代码（无构建步骤）：

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();
  };

  // …
}

构建步骤：

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();
  };

  // …
}

示例

onChange

函数将是一个道具，它将在检查器控件中的某些控制值更改时触发。另请注意，这会影响同一类型的所有块。