Gutenberg: C'è un modo per sapere se il blocco corrente è all'interno di InnerBlocks?


11

Quindi sto usando blocchi nidificati in Wordpress Gutenberg. Sto applicando un wrapper sui miei elementi che applicano una classe contenitore bootstrap. Ovviamente lo vorrei solo sui blocchi più esterni, non su quelli all'interno di un blocco nidificato.

C'è un modo per sapere se il blocco corrente è all'interno di un InnerBlocksDefiniton di un blocco genitore? Attualmente sto applicando il wrapper all'interno del blocks.getSaveElementfiltro.

C'è un modo migliore per farlo?

Per il contesto: nelle precedenti versioni di gutenberg c'era l'attributo layout per raggiungere questo obiettivo, ma da allora è stato rimosso. Sto usando la versione 3.9.0.

Questa è una versione abbreviata della mia funzione 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);

L'hai mai scoperto?
Matthew Brown aka Lord Matt

Risposte:


3

puoi chiamare getBlockHierarchyRootClientIdcon il clientId del blocco, getBlockHierarchyRootClientIdrestituirà l'id del blocco padre se il blocco corrente è all'interno di innerBlocks e restituirà lo stesso ID se è root

puoi chiamarlo così

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

inoltre, puoi definire una funzione di supporto che puoi usare nel tuo codice

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

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

Penso che il problema sia che al momento blocks.getSaveElementnon clientIdè stato ancora assegnato alcun valore, quindi sembra che non sia possibile dall'interno del filtro. Forse una soluzione potrebbe essere raggiunta provando un lavoro in qualche altro modo.
Alvaro,

puoi usare editor.blockListBlockper eseguire un controllo all'interno del blocco e assegnare una classe o qualcosa del genere
N. Seghir,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.