Gutenberg: Existe uma maneira de saber se o bloco atual está dentro dos InnerBlocks?


11

Então, eu estou usando blocos aninhados no Wordpress Gutenberg. Estou aplicando um invólucro nos meus elementos que aplicam uma classe de contêiner de autoinicialização. Obviamente, eu só queria isso nos blocos mais externos, não naqueles dentro de um bloco aninhado.

Existe uma maneira de saber se o bloco atual está dentro de uma InnerBlocksdefinição de um bloco pai? Atualmente, estou aplicando o wrapper dentro do blocks.getSaveElementfiltro.

Existe uma maneira melhor de fazer isso?

Para o contexto: Nas versões anteriores do Gutenberg, costumava haver o atributo de layout para isso, mas ele foi removido. Estou usando a versão 3.9.0.

Esta é uma versão abreviada da minha função de 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);

Você já descobriu?
Matthew Brown aka Lord Matt

Respostas:


3

você pode chamar getBlockHierarchyRootClientIdcom o clientId do bloco, getBlockHierarchyRootClientIdretornará o ID do bloco pai se o bloco atual estiver dentro de innerBlocks e retornará o mesmo ID se for root

você pode chamar assim

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

Além disso, você pode definir uma função auxiliar que você pode usar no seu código

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

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

Penso que o problema é que, no momento em que blocks.getSaveElementnão clientIdé atribuído, ainda não foi atribuído, pelo que parece que não é possível de dentro do filtro. Talvez uma solução possa ser alcançada tentando uma solução alternativa de alguma outra maneira.
Alvaro

você pode usar editor.blockListBlockpara executar uma verificação dentro do bloco e atribuir uma classe ou algo
N. Seghir
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.