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

Question

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

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

我尝试过的一些事情是：

使用块过滤器editor.BlockListBlock，但据我所知，我能做的最多就是调整道具和className。添加data-align =“ full”只是意味着在此处添加一个称为data-alignment的道具。

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()自己定义了代码块，则可以使用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属性，您可以传递merged with what is defined in getEditWrapperProps()的wrapperProps。

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