如何访问古腾堡内部块的值？

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 存储库。核心块也使用这些函数，例如在 columns 中。