Question

我只是进入古腾堡，尤其是InnerBlocks。我要达到的目标是父块和内部块之间的一种通信形式。我会喜欢显示，在父块中创建了多少个内部块

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

registerBlockType( 'xxx/inner-block', {
    ...
    parent: [ 'xxx/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>
  );

我设法通过innerBlockCount这样的wordpress功能获得了withSelect：

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

但是，当选择了innerBlocks之一时，我很难通知外部块。我的目标是在该块或其中一个子块处于活动状态时，为我的块创建类似自动进入启用状态的“编辑模式”。

Answer 1

很高兴知道您已经尝试并发现了一些问题。

您已经知道Gutenberg是基于React的编辑器，并且在react组件上存在一些状态，由于这些状态，应用程序会处理/使用数据，因此从逻辑上讲Gutenberg也应该将数据存储在某个地方，我很高兴地告诉您，它不仅存储数据，还提供获取器和设置器。古腾堡将此数据存储在您已经使用过的数据模块中，这里是其reference page。

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

对于每个数据模块，您都可以在浏览器控制台中查看所有可用的getter和setter，也可以从控制台对其进行测试。使用控制台时，只有一种情况是必须在Gutenberg编辑器屏幕中。

在控制台上，编写以下任何命令以查看所有获取器和设置器。

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

还有更多，我认为您可以将其转到参考页并将该模块传递到wp.data.select()，然后可以获取或设置数据。我希望它能帮助您解决当前的所有问题，甚至可能解决将来的所有问题。

古腾堡InnerBlocks通过道具或获取信息

1 个答案: