गुटेनबर्ग: क्या यह जानने का कोई तरीका है कि क्या वर्तमान ब्लॉक इनरब्लॉक के अंदर है?

Question

इसलिए मैं Wordpress Gutenberg में नेस्टेड ब्लॉक का उपयोग कर रहा हूं। मैं अपने तत्वों पर एक आवरण लागू कर रहा हूं जो बूटस्ट्रैप कंटेनर क्लास को लागू करता है। जाहिर है मैं केवल यही चाहूंगा कि सबसे बाहरी ब्लॉक पर, नेस्टेड ब्लॉक के अंदर वाले पर नहीं।

क्या यह जानने का कोई तरीका है कि क्या वर्तमान ब्लॉक InnerBlocksपेरेंट ब्लॉक के एक निश्चित भाग के अंदर है ? मैं फ़िलहाल 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);

Comments

क्या आपको कभी पता चला?

— मैथ्यू ब्राउन उर्फ ​​लॉर्ड मैट

Answer 1

आप getBlockHierarchyRootClientIdब्लॉक के क्लाइंट के साथ कॉल कर सकते हैं , getBlockHierarchyRootClientIdयदि मूल ब्लॉक इनरब्लॉक के अंदर है, तो मूल ब्लॉक आईडी वापस कर देगा और यदि रूट है तो उसी आईडी को वापस कर देगा।

आप इसे इस तरह कह सकते हैं

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

इसके अतिरिक्त, आप एक सहायक फ़ंक्शन को परिभाषित कर सकते हैं जिसे आप अपने कोड में उपयोग कर सकते हैं

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

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

Comments

मुझे लगता है कि समस्या यह है कि समय पर blocks.getSaveElementरन clientIdअभी तक नहीं सौंपा गया है इसलिए ऐसा लग रहा है कि यह फिल्टर के अंदर से संभव नहीं है। हो सकता है कि किसी समाधान को किसी अन्य तरीके से काम करने की कोशिश में प्राप्त किया जा सकता है।

— अल्वारो

आप editor.blockListBlockब्लॉक के अंदर एक चेक को चलाने के लिए उपयोग कर सकते हैं और एक वर्ग या कुछ को असाइन कर सकते हैं

— एन। सेगिर