Gutenberg: ¿Hay alguna manera de saber si el bloque actual está dentro de InnerBlocks?


11

Entonces estoy usando bloques anidados en Wordpress Gutenberg. Estoy aplicando un contenedor en mis elementos que aplican una clase de contenedor de arranque. Obviamente, solo quiero eso en los bloques más externos, no en los que están dentro de un bloque anidado.

¿Hay alguna manera de saber si el bloque actual está dentro de una InnerBlocksdefinición de un bloque padre? Actualmente estoy aplicando el contenedor dentro del blocks.getSaveElementfiltro.

¿Hay una mejor manera de hacer esto?

Para el contexto: en versiones anteriores de Gutenberg solía haber un atributo de diseño para lograr eso, pero desde entonces se ha eliminado. Estoy usando la versión 3.9.0.

Esta es una versión abreviada de mi función de contenedor:

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

Respuestas:


3

puede llamar getBlockHierarchyRootClientIdcon el ID de cliente del bloque, getBlockHierarchyRootClientIddevolverá el ID del bloque principal si el bloque actual está dentro de innerBlocks y devolverá el mismo ID si es root

puedes llamarlo asi

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

Además, puede definir una función auxiliar que puede usar en su código

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

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


Creo que el problema es que en el momento de la blocks.getSaveElementejecución no clientIdse ha asignado todavía, por lo que parece que no es posible desde el interior del filtro. Tal vez se pueda lograr una solución intentando solucionarlo de alguna otra manera.
Alvaro

puedes usar editor.blockListBlockpara hacer un chequeo dentro del bloque y asignar una clase o algo
N. Seghir
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.