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

Question

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

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

我尝试过的一些事情是：

使用块过滤器 editor.BlockListBlock 但我可以用我自己的知识做的最多的是调整道具和类名。添加一个 data-align="full" 只是意味着在这里添加一个名为 data-alignment 的道具。

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

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

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

<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()，那么您可以使用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过滤器

如果要更改现有块的对齐方式，可以使用editor.BlockListBlock您已经尝试过的过滤器。className您可以传入wrapperProps，而不是像文档中的示例那样设置属性，这将与 中定义的内容合并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
);