reactjs - Gutenberg InnerBlocks 传递 Prop 或获取信息

Question

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

//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 );

But I am having a hard time, to inform the outer block, when one of the innerBlocks is selected.我的目标是创建类似于我的 block 的“编辑模式”的东西，当 block 或其中一个子 block 处于事件状态时，它会自动启用。

Answer 1

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

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

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

对于每个数据模块，您都可以在浏览器控制台中看到所有可用的 getter 和 setter，还可以从控制台测试它们。只有一个条件是您在使用控制台时必须处于 Gutenberg Editor 屏幕中。

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

• wp.data.select('核心')
• wp.data.dispatch('核心')
• wp.data.select('核心/ block ')
• wp.data.dispatch('核心/ block ')
• wp.data.select('core/block-editor')
• wp.data.dispatch('core/block-editor')

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