Gutenberg: Existe-t-il un moyen de savoir si le bloc actuel se trouve dans InnerBlocks?

11

J'utilise donc des blocs imbriqués dans Wordpress Gutenberg. J'applique un wrapper sur mes éléments qui appliquent une classe de conteneur d'amorçage. Évidemment, je ne voudrais que cela sur les blocs les plus externes, pas sur ceux à l'intérieur d'un bloc imbriqué.

Existe-t-il un moyen de savoir si le bloc actuel se trouve dans une InnerBlocksdéfinition d'un bloc parent? J'applique actuellement le wrapper à l'intérieur du blocks.getSaveElementfiltre.

Y a-t-il une meilleure manière de faire cela?

Pour le contexte: dans les versions précédentes de gutenberg, l'attribut layout était utilisé pour cela, mais il a depuis été supprimé. J'utilise la version 3.9.0.

Il s'agit d'une version abrégée de ma fonction wrapper:

    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);
deadfishli
la source
L'avez-vous déjà découvert?
Matthew Brown alias Lord Matt

Réponses:

3

vous pouvez appeler getBlockHierarchyRootClientIdavec le clientId du bloc, getBlockHierarchyRootClientIdretournera l'ID du bloc parent si le bloc actuel est à l'intérieur de innerBlocks et renverra le même id s'il est root

vous pouvez l'appeler comme ça

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

en outre, vous pouvez définir une fonction d'aide que vous pouvez utiliser dans votre code

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

if ( blockHasParent( yourClientId ) { 
    ....
}
N. Seghir
la source
Je pense que le problème est qu'au moment de l' blocks.getSaveElementexécution, aucun clientIdn'a encore été attribué, il semble donc que ce ne soit pas possible de l'intérieur du filtre. Peut-être qu'une solution pourrait être trouvée en essayant une solution de contournement d'une autre manière.
Alvaro
vous pouvez utiliser editor.blockListBlockpour exécuter une vérification à l'intérieur du bloc et attribuer une classe ou quelque chose
N. Seghir