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

【问题标题】：How can I access the values of an inner block in Gutenberg?如何访问古腾堡内部块的值？
【发布时间】：2019-07-28 01:17:37
【问题描述】：

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

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

有什么想法吗？

【问题讨论】：

标签： wordpress-gutenberg gutenberg-blocks project-gutenberg

【解决方案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-Module。例如，在 Gutenberg 编辑器的后端视图中，您可以转到浏览器控制台并键入 wp.data.select( 'core/block-editor' ).getBlock(<blocks-client-id>) 以测试该函数的作用。

您还可以查看 Gutenberg GitHub 存储库。 Core Blocks also use these function, for example in columns.

【讨论】：