Gutenberg InnerBlocks 传递道具或获取信息

Question

我刚刚接触古腾堡，尤其是 InnerBlocks。我想要实现的是父块和内部块之间的一种通信形式。我会例如爱显示，在父块中创建了多少个内部块

//registering Blocks
registerBlockType( 'xxx/outer-block', {
    ...
} );

registerBlockType( 'xxx/inner-block', {
    ...
    parent: [ 'xxx/outer-block' ],
    ...
} );

来自outer-block的编辑功能

edit: ( { attributes, setAttributes, className, isSelected } ) => {

  return (
    <div className={ className }>
      <p>There are { innerBlockCount } innerBlocks</p>
      <p>One of the inner blocks is selected: { isInnerBlockSelected }</p>
      <InnerBlocks />
    </div>
  );

我设法通过 wordpress withSelect 函数获得 innerBlockCount，如下所示：

export default compose( [
    withSelect( ( select, ownProps ) => {
        const blocks = select( 'core/editor' ).getBlocksByClientId( ownProps.clientId );
        const innerBlocks = blocks.length ? blocks[ 0 ].innerBlocks : [];
        return {
            innerBlocks: innerBlocks,
            innerBlocks: select( 'core/editor' ).getBlocks( ownProps.clientId ),
            innerBlocksCount: innerBlocks.length,
        };
    } ),
    withNotices,
] )( OuterBlock );

但是我很难在选择了其中一个 innerBlock 时通知外部块。我的目标是创建类似 "edit-mode" 我的块的东西，当块或其中一个子块处于活动状态时，它会自动启用。

Answer 1

很高兴知道您已经尝试并弄清楚了一些事情。

正如您已经知道的那样，Gutenberg 是一个基于 React 的编辑器，并且在 React 组件上存在一些状态，因此应用程序 handles/use 数据因此逻辑上 Gutenberg 也应该将这些数据存储在某个地方，我很高兴告诉你，它不仅存储数据，还提供getters和setters。 Gutenberg 将此数据存储在它的 数据模块 中，您已经在使用它，这里是它的 reference page。

正如我想象的那样，您已经研究了其中的一些内容并发现它不是对开发人员非常友好的文档，但是有一种友好且快速的方法可以访问所有功能并进行测试。

对于每个数据模块，您可以在浏览器控制台中查看所有可用的 getter 和 setter，还可以从控制台测试它们。只有一个条件，您必须在使用控制台时进入古腾堡编辑器屏幕。

在控制台上编写以下 select 方法来获取 getter 和调度方法来获取 setter。

wp.data.select('core')
wp.data.dispatch('core')
wp.data.select('core/blocks')
wp.data.dispatch('core/blocks')
wp.data.select('core/block-editor')
wp.data.dispatch('core/block-editor')

以及更多我认为您明白了，请转到该参考页面并将该模块传递给 wp.data.select() 或 wp.data.dispatch()，然后您就可以获取或设置数据。我希望它能帮助你解决你当前的所有问题，也可能是未来的问题。

Gutenberg InnerBlocks 传递道具或获取信息

Gutenberg InnerBlocks pass props or get info

reactjs

wordpress-gutenberg

gutenberg-blocks