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

Question

我正在尝试为 Gutenberb 构建一个自定义块。它是一个轮播并使用子块（图像）。我正在尝试找到一种方法来找出在内部创建了多少图像块来阻止，以便我可以相应地为轮播创建幻灯片。

为了做到这一点，我正在考虑从每个图像块中获取图像 url 并将其存储在一个数组中，这样我就可以通过数组映射来创建每张幻灯片，但我不知道如何访问 url 值子块。

有任何想法吗？

Answer 1

您可以阅读Block Editor Handbook 中关于 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-Module。例如，在 Gutenberg 编辑器的后端视图中，您可以转到浏览器控制台并键入wp.data.select( 'core/block-editor' ).getBlock(<blocks-client-id>)以测试该功能的作用。

您还可以查看 Gutenberg GitHub 存储库。核心块也使用这些功能，例如在 columns 中。