基于内部块是否为空的条件布局

时间:2019-08-15 作者:jshwlkr

这似乎是一个简单的问题,但我似乎找不到答案。我正在使用InnerBlocks在包装器中堆叠一些段落。如果没有设置块,我希望根本不输出包装器。(目前)有没有一种直接的方法来做到这一点?似乎我可以针对InnerBlocks本身进行测试,但我还没有看到任何文档表明这是可靠的。

save( { attributes } ) {
  return (
     <div className="header__text">
        <InnerBlocks.Content />
     </div>
  );
}
如果InnerBlocks为空,基本上我不需要header\\uu文本。

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

我不确定这是否可能以直接的方式实现。

您可以添加一个属性来检查块是否具有内部块。然后在中使用它save 是否呈现包装器。它可以工作,但不是一种非常干净的解决方案:

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { InnerBlocks } = wp.blockEditor;
const { useSelect } = wp.data;
const { useEffect } = wp.element;

registerBlockType("my-plugin/my-block", {
    title: __("My block"),
    icon: "carrot",
    category: "common",
    attributes: {
        innerBlocks_length: {
            type: "number",
            default: 0
        }
    },
    edit: props => {
        const { className, clientId, setAttributes } = props;
        const { innerBlocks_length } = useSelect(select => ({
            innerBlocks_length: select("core/block-editor").getBlockCount(clientId)
        }));

        useEffect(() => {
            setAttributes({ innerBlocks_length });
        }, [innerBlocks_length]);

        return (
            <div className={className}>
                <div className="innerBlocks_wrapper">
                    <InnerBlocks />
                </div>
            </div>
        );
    },
    save: props => {
        const { innerBlocks_length } = props.attributes;

        return (
            <div>
                {innerBlocks_length > 0 && (
                    <div className="innerBlocks_wrapper">
                        <InnerBlocks.Content />
                    </div>
                )}
            </div>
        );
    }
});

相关推荐

由于出现javascript MIME类型错误,无法加载脚本

我正在尝试让jQuery砌体插件在站点上运行。我已经更新了模板文件,以获得插件需要的适当类。然后我将脚本按如下方式排队:function masonry_scripts() { wp_enqueue_script(\'masonry\'); wp_enqueue_script( \'masonry-script\', get_template_directory_uri() . \'/assets/js/masonry-script.js\', array(), false