Как я могу получить доступ к значениям внутреннего блока в Гутенберге?

Question

Я пытаюсь создать специальный блок для Гутенберба. Это карусель и использует дочерние блоки (изображения). Я пытаюсь найти способ узнать, сколько блоков изображений было создано внутри, чтобы блокировать, чтобы я мог соответственно создавать слайды для карусели.

Чтобы сделать это, я думал о том, чтобы взять URL-адрес изображения из каждого блока изображения и сохранить его в массиве, чтобы затем я мог просто отобразить массив для создания каждого слайда, но я понятия не имею, как получить доступ к значению URL-адреса из дочерний блок.

Есть идеи?

Answer 1

Вы можете прочитать (очень крошечную) документацию по функции getBlock в Руководстве редактора блоков. Вы должны использовать withDispatch компонент более высокого порядка, чтобы снабдить ваши компоненты (блоки) действиями.

withDispatch( ( dispatch, ownProps, registry ) => {

  return {
    updateEditable( isEditing ) {
      const { clientId, setAttributes } = ownProps;
      const { getBlockOrder, getBlock } = registry.select( 'core/block-editor' );

      //get all innerBlockIds
      const innerBlockIds = getBlockOrder( clientId );
      innerBlockIds.forEach( ( innerBlockId ) => {
        console.log( getBlock( innerBlockId ) );
      } );
    },
  };
} )

Чтобы поиграться с модулем данных WordPress, который предлагает клиенту данные о редакторе или блоках, вы также можете использовать wp.data-Модуль. В бэкэнд-представлении редактора Гутенберга вы можете, например, перейти в консоль браузера и набрать wp.data.select( 'core/block-editor' ).getBlock(<blocks-client-id>) чтобы проверить, что делает функция.

Вы также можете заглянуть в репозиторий Gutenberg GitHub. Базовые блоки также используют эти функции, например, в столбцах.

Answer 2

Вы можете получить доступ к родительским внутренним блокам, используя приведенный ниже код.

      const { __ } = wp.i18n;
const { useSelect } = wp.data;
const { store: blockEditorStore } = wp.blockEditor;

/**
 * Block Edit Component
 */
const Edit = (props) => {
    const { clientId } = props;
    const innerBlocks = useSelect(
        (select) => select(blockEditorStore).getBlock(clientId).innerBlocks,
    );

    console.log( innerBlocks ); // This will log all the inner blocks on your browser console
};

Если вам также нужен доступ к ним через рендеринг PHP, вы можете проверить эту статью: https://jeffreycarandang.com/how-to-access-innerblocks-attributes-within-the-parent-block-on-the-wordpress-gutenberg -редактор/