javascript - 我们如何向古腾堡的 editor.BlockListBlock 添加自定义数据属性？

Question

对于古腾堡的“核心/图像” block ，它们有不同的对齐选项，特别是两个暴露“完整”和“宽”的对齐选项。当您单击这些选项之一时，您将看到数据属性“data-align”被添加到 block 编辑器的包装器组件中，其值为“full”或“wide”。

我正在尝试创建一个具有与上述类似功能的自定义 block 。但我很难弄清楚如何将该自定义属性添加到我的组件的 block 编辑器包装器中。

我尝试过的一些事情是:

使用 block 过滤器编辑器。BlockListBlock，但根据我自己的知识，我最多能做的是调整 Prop 和类名。添加 data-align="full"只是意味着在这里添加一个名为 data-alignment 的 prop。

https://developer.wordpress.org/block-editor/developers/filters/block-filters/#editor-blocklistblock

我也尝试过使用 jQuery 来做到这一点。即使这有效，我也绝对不想将其用作永久解决方案，我只是想看看它是否有效。因此，我向其中一个按钮添加了一个 on('click') 事件，以便它能够定位包装器组件并修改节点，但这也不起作用。可能是因为 block 元素是动态元素，所以它甚至无法被选择。

这是我试图添加自定义属性的包装器，

<div id="block-388288fa-ff20-459e-bce7-543b94fd77c4" class="wp-block editor-block-list__block block-editor-block-list__block is-selected" data-type="cgb/block-ee-hero-slider" tabindex="0" aria-label="Block: Hero Slider">

Answer 1

我刚刚遇到了同样的问题。我找到了两个解决方案。

与 getEditWrapperProps()

如果您通过 registerBlockType() 自己定义 block ，那么您可以使用 getEditWrapperProps定义data-align属性:

registerBlockType('my-fully-aligned-block', {
  title: 'My Fully Aligned Block',
  category: 'common',
  icon: 'admin-appearance',

  /**
   * Sets alignment.
   *
   * @param attributes
   * @returns {{'data-align': *}}
   */
  getEditWrapperProps(attributes) {
    return {
      'data-align': 'full'
    };
  },

  edit,

  save: () => null
});

与 editor.BlockListBlock过滤器

如果要更改现有 block 的对齐方式，可以使用 editor.BlockListBlock您已经尝试过的过滤器。而不是设置 className属性，就像文档中的示例一样，您可以传入 wrapperProps ，这将是 merged with what is defined in getEditWrapperProps() 。

function FullAlign(BlockListBlock) {
  return props => {
    const { block } = props;

    // Bail out if it’s not the block we want to target.
    if ('cgb/block-ee-hero-slider' !== block.name) {
      return <BlockListBlock {...props} />;
    }

    return (
      <BlockListBlock {...props} wrapperProps={{ 'data-align': 'full' }} />
    );
  };
}

wp.hooks.addFilter(
  'editor.BlockListBlock',
  'cgb/block-ee-hero-slider',
  FullAlign
);