구텐베르크 : 현재 블록이 InnerBlocks에 있는지 알 수있는 방법이 있습니까?


11

그래서 Wordpress Gutenberg에서 중첩 블록을 사용하고 있습니다. 부트 스트랩 컨테이너 클래스를 적용하는 요소에 래퍼를 적용하고 있습니다. 분명히 중첩 블록 내부의 블록이 아닌 가장 바깥 쪽 블록에서만 원합니다.

현재 블록이 InnerBlocks부모 블록 의 Definiton 안에 있는지 알 수있는 방법이 있습니까? 현재 blocks.getSaveElement필터 내부에 래퍼를 적용하고 있습니다.

더 좋은 방법이 있습니까?

맥락 : 이전 구텐베르크 버전에서는이를 달성하기위한 레이아웃 속성이 있었지만 이후 제거되었습니다. 버전 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아직 할당되지 않았기 때문에 필터 내부에서 불가능한 것 같습니다. 다른 방법으로 해결을 시도하여 해결책을 얻을 수 있습니다.
Alvaro

editor.blockListBlock블록 안에서 검사를 실행하고 클래스 또는 무언가를 할당하는 데 사용할 수 있습니다
N. Seghir
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.