グーテンベルク:現在のブロックがInnerBlocks内にあるかどうかを知る方法はありますか?


11

したがって、Wordpress Gutenbergでネストされたブロックを使用しています。ブートストラップコンテナークラスを適用するラッパーを要素に適用しています。明らかに、それを入れ子のブロック内のブロックではなく、最も外側のブロックのみにしたいと思います。

現在のブロックがInnerBlocks親ブロックのDefiniton 内にあるかどうかを知る方法はありますか?現在、blocks.getSaveElementフィルター内にラッパーを適用しています。

これを行うより良い方法はありますか?

コンテキスト:以前のgutenbergバージョンでは、これを実現するためにlayout属性が使用されていましたが、その後削除されました。バージョン3.9.0を使用しています。

これは私のラッパー関数の短縮版です:

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

回答:


3

getBlockHierarchyRootClientIdブロックのclientIdで呼び出すことができgetBlockHierarchyRootClientId、現在のブロックがinnerBlocks内にある場合は親ブロックIDを返し、ルートの場合は同じIDを返します

あなたはこのようにそれを呼び出すことができます

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

さらに、コードで使用できるヘルパー関数を定義できます

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

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

問題は、blocks.getSaveElement実行時にclientIdまだ割り当てられていないため、フィルター内からは実行できないように見えることです。たぶん、別の方法で回避策を試して解決策を達成できるでしょう。
アルバロ

editor.blockListBlockブロック内でチェックを実行し、クラスまたは何かを割り当てるために使用できます
N. Seghir
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.