古腾堡(Gutenberg):有没有办法知道当前块是否在InnerBlocks内部?


11

所以我在Wordpress Gutenberg中使用嵌套块。我正在对应用引导容器类的元素应用包装器。显然,我只希望在最外层的块上,而不是在嵌套块内的块上。

有没有办法知道当前块是否在InnerBlocks父块的Definiton内?我当前在包装器内应用包装blocks.getSaveElement器。

有一个更好的方法吗?

对于上下文:在以前的gutenberg版本中,以前是layout属性来实现的,但此后已被删除。我正在使用3.9.0版。

这是包装函数的简化版本:

    namespace.saveElement = ( element, blockType, attributes ) => {
        const hasBootstrapWrapper = hasBlockSupport( blockType.name, 'bootstrapWrapper' );

        if (hasBlockSupport( blockType.name, 'anchor' )) {
            element.props.id = attributes.anchor;
        }
        if (hasBootstrapWrapper) {

            // HERE I NEED TO CHECK IF THE CURRENT ELEMENT IS INSIDE A INNERBLOCKS ELEMENT AND THEN APPLY DIFFERENT WRAPPER

            var setWrapperInnerClass = wrapperInnerClass;
            var setWrapperClass = wrapperClass;
            if (attributes.containerSize) {
                setWrapperInnerClass = wrapperInnerClass + ' ' + attributes.containerSize;
            }
            if (attributes.wrapperType) {
                setWrapperClass = wrapperClass + ' ' + attributes.wrapperType;
            }

            const setWrapperAnchor = (attributes.wrapperAnchor) ? attributes.wrapperAnchor : false;

            return (
                newEl('div', { key: wrapperClass, className: setWrapperClass, id: setWrapperAnchor},
                    newEl('div', { key: wrapperInnerClass, className: setWrapperInnerClass},
                        element
                    )
                )
            );
        } else {
            return element;
        }
    };

wp.hooks.addFilter('blocks.getSaveElement', 'namespace/gutenberg', namespace.saveElement);

你有没有发现?
马修·布朗又名马特勋爵,

Answers:


3

您可以getBlockHierarchyRootClientId使用该块的clientId进行调用,getBlockHierarchyRootClientId如果当前块位于innerBlocks内,则将返回父块ID;如果是根,则将返回相同的ID

你可以这样称呼它

wp.data.select( 'core/editor' ).getBlockHierarchyRootClientId( clientId );

另外,您可以定义一个可以在代码中使用的辅助函数

const blockHasParent = ( clientId ) => clientId !== wp.data.select( 'core/editor' ).getBlockHierarchyRootClientId( clientId );

if ( blockHasParent( yourClientId ) { 
    ....
}

我认为问题在于,在blocks.getSaveElement运行时clientId尚未分配任何内容,因此看起来无法从过滤器内部进行。尝试以其他方式解决可能会获得解决方案。
Alvaro

您可以用来editor.blockListBlock在块内运行检查并分配类或其他内容
N. Seghir
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.