filters - Gutenberg: Is there a way to know if current block is inside InnerBlocks?

admin管理员组

文章数量:1336633

So I am using nested blocks in Wordpress Gutenberg. I am applying a wrapper on my elements that apply a bootstrap container class. Obviously I'd only want that on the outermost blocks, not on the ones inside a nested block.

Is there a way to know if the current block is inside a InnerBlocks Definiton of a parent block? I am currently applying the wrapper inside the blocks.getSaveElement Filter.

Is there a better way to do this?

For context: In previous gutenberg versions there used to be the layout attribute to achieve that, but it has since been removed. I am using Version 3.9.0.

This is a shortened version of my wrapper function:

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

So I am using nested blocks in Wordpress Gutenberg. I am applying a wrapper on my elements that apply a bootstrap container class. Obviously I'd only want that on the outermost blocks, not on the ones inside a nested block.

Is there a way to know if the current block is inside a InnerBlocks Definiton of a parent block? I am currently applying the wrapper inside the blocks.getSaveElement Filter.

Is there a better way to do this?

For context: In previous gutenberg versions there used to be the layout attribute to achieve that, but it has since been removed. I am using Version 3.9.0.

This is a shortened version of my wrapper function:

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

• filters
• block-editor

Share Improve this question asked Oct 18, 2018 at 8:50 deadfishlideadfishli 30022 silver badges1111 bronze badges 1

• Did you ever find out? – Matthew Brown aka Lord Matt Commented Sep 2, 2019 at 0:12

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 11

getBlockParents will work accurately. You can use getBlockParents with the clientId of the block, getBlockParents will return the all parent blocks id if the current block is under any Blocks. It will return blank if current block is not under any Block

here is a method that you can use:

const innerBlock = "namespace/block-name";
const parentBlocks = wp.data.select( 'core/block-editor' ).getBlockParents(props.clientId); 
const parentAttributes = wp.data.select('core/block-editor').getBlocksByClientId(parentBlocks);

var is_under_inner = false;
for (i = 0; i < parentAttributes.length; i++) {
    if ( parentAttributes[i].name == innerBlock ) {
        is_under_inner = true;
    }
}

//console.log(is_under_inner);

you can call getBlockHierarchyRootClientId with the clientId of the block, getBlockHierarchyRootClientId will return the parent block id if the current block is inside innerBlocks and will return the same id if it's root

you can call it like this

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

additionally, you can define a helper function that you can use in your code

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

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

本文标签： filtersGutenberg Is there a way to know if current block is inside InnerBlocks