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

Question

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

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

有什么想法吗？

Answer 1

您可以阅读 getBlock function in the Block Editor Handbook 上的（非常小的）文档。您应该使用 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 存储库。 Core Blocks also use these function, for example in columns.

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

How can I access the values of an inner block in Gutenberg?

wordpress-gutenberg

gutenberg-blocks

project-gutenberg