Gutenburg InnerBlock独生子女

时间:2019-10-11 作者:Zachary

我有一个名为Custom Card 这需要InnerBlock 作为一个孩子。这样做的目的是因为我想在Custom Card 非常具体的方式。

这个Custom Card 有三个允许的块:

  • core/quote
  • core/video
  • core/image
我遇到的问题是,用户选择一个块后,可以继续向同一张卡添加更多块。我想限制这张卡,允许他们从三个可用选项中选择一个。我可以用什么方法来做这件事?

2 个回复
最合适的回答,由SO网友:Welcher 整理而成

目前唯一的方法是使用renderAppender支柱打开InnerBlocks. 在WordPress 5.3发布之前,此道具仅在Gutenberg插件中可用。理论是在每个CustomCard 要跟踪是否添加了块,请从renderAppender 功能,以便用户无法插入更多项目。

SO网友:user3283637

下面是我使用renderAppender 道具,灵感来自韦尔彻的上述评论this post over on Stack.

<InnerBlocks
  renderAppender={() => {
    const blocks = select(\'core/editor\').getBlocks();
    const block = find(blocks, [\'name\', \'NAME_OF_YOUR_BLOCK\']);
    // don\'t return appender if there\'s one or more blocks:
    if (block && block.innerBlocks.length > 0) return null;
    // otherwise, return default appender
    return (<InnerBlocks.DefaultBlockAppender />);
  }}
/>
Note: 此示例使用lodash find 函数来获取我的目标块。也许有更好的方法可以做到这一点,但目前它确实起到了作用。

此外,请确保导入select 作用E、 g。

import { select } from \'@wordpress/data\';

相关推荐