Gutenberg: Gibt es eine Möglichkeit festzustellen, ob sich der aktuelle Block in InnerBlocks befindet?

11

Ich verwende also verschachtelte Blöcke in Wordpress Gutenberg. Ich wende einen Wrapper auf meine Elemente an, die eine Bootstrap-Containerklasse anwenden. Offensichtlich möchte ich das nur für die äußersten Blöcke, nicht für die innerhalb eines verschachtelten Blocks.

Gibt es eine Möglichkeit festzustellen, ob sich der aktuelle Block in einer InnerBlocksDefinition eines übergeordneten Blocks befindet? Ich wende gerade den Wrapper im blocks.getSaveElementFilter an.

Gibt es einen besseren Weg, dies zu tun?

Zum Kontext: In früheren gutenberg-Versionen gab es früher das Layout-Attribut, um dies zu erreichen, aber es wurde inzwischen entfernt. Ich benutze Version 3.9.0.

Dies ist eine verkürzte Version meiner Wrapper-Funktion:

    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
quelle
Hast du jemals herausgefunden?
Matthew Brown alias Lord Matt

Antworten:

3

Sie können getBlockHierarchyRootClientIdmit der clientId des Blocks aufrufen, getBlockHierarchyRootClientIdgeben die übergeordnete Block-ID zurück, wenn sich der aktuelle Block in innerBlocks befindet, und geben dieselbe ID zurück, wenn es sich um root handelt

Sie können es so nennen

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

Darüber hinaus können Sie eine Hilfsfunktion definieren, die Sie in Ihrem Code verwenden können

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

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

N. Seghir
quelle
Ich denke, das Problem ist, dass zum Zeitpunkt der blocks.getSaveElementAusführung noch keine clientIdzugewiesen wurde, so dass es so aussieht, als ob es nicht innerhalb des Filters möglich ist. Vielleicht könnte eine Lösung erreicht werden, indem man es auf andere Weise versucht.
Alvaro
Sie können verwenden editor.blockListBlock, um eine Prüfung innerhalb des Blocks durchzuführen und eine Klasse oder etwas zuzuweisen
N. Seghir