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