Как добавить пользовательские атрибуты данных в редактор Gutenburg.BlockListBlock?

Question

Для блока "ядро / изображение" Гутенбурга у них есть различные варианты выравнивания, в частности, два, которые выставляют "полный" и "широкий".Если щелкнуть любой из этих параметров, вы увидите, что атрибут данных «data-align» добавляется в компонент оболочки редактора блоков со значением «full» или «wide».

Iпытаюсь создать пользовательский блок, который имеет функции, аналогичные описанным выше.Но мне трудно разобраться, как добавить этот пользовательский атрибут в оболочку редактора блоков моего компонента.

Я попробовал несколько вещей:

Использование редактора фильтра блоков.BlockListBlock, но самое большее, что я мог сделать с этим, исходя из моих собственных знаний, - это настроить реквизиты и className.Добавление 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
);