Gutenberg: มีวิธีที่จะทราบว่าบล็อกปัจจุบันอยู่ใน InnerBlocks หรือไม่?


11

ดังนั้นฉันจึงใช้บล็อกซ้อนใน Wordpress Gutenberg ฉันกำลังใช้ wrapper กับองค์ประกอบที่ใช้คลาส bootstrap container เห็นได้ชัดว่าฉันต้องการเพียงแค่นั้นในบล็อกด้านนอกไม่ได้อยู่ในบล็อกที่ซ้อนกัน

มีวิธีที่จะทราบว่าบล็อกปัจจุบันอยู่ในInnerBlocksDefiniton ของบล็อกหลักหรือไม่? ฉันกำลังใช้ wrapper ภายในblocks.getSaveElementตัวกรอง

มีวิธีที่ดีกว่าในการทำเช่นนี้?

สำหรับบริบท: ในรุ่นกูเทนแบร์กก่อนหน้านี้เคยมีคุณลักษณะเค้าโครงเพื่อให้บรรลุ แต่หลังจากนั้นก็ถูกลบทิ้งไป ฉันใช้เวอร์ชั่น 3.9.0

นี่เป็นฟังก์ชั่น 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);

คุณเคยรู้หรือไม่?
แมทธิวบราวน์อาคาลอร์ดแมตต์

คำตอบ:


3

คุณสามารถโทรหาgetBlockHierarchyRootClientIdด้วยรหัสลูกค้าของบล็อกgetBlockHierarchyRootClientIdจะส่งกลับรหัสบล็อกหลักถ้าบล็อกปัจจุบันอยู่ภายใน InnerBlocks และจะส่งกลับรหัสเดียวกันถ้ามันเป็นราก

คุณสามารถเรียกมันว่าสิ่งนี้

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.