ठीक है, मैं इसके साथ थोड़े समय के लिए खेल रहा हूं और निम्नलिखित चेतावनी के साथ गैलरी ब्लॉक का आउटपुट बदलने में कामयाब रहा:
- पूर्वावलोकन आउटपुट से मेल नहीं खाता है। मुझे लगता है कि यह संभव है लेकिन थोड़ा और अधिक शामिल प्रतीत होता है।
- आउटपुट को पार्स करने में सक्षम होने और इसे संपादन योग्य बनाए रखने के लिए आउटपुट में कुछ वर्गों और मार्कअप की आवश्यकता होती है। इन वर्गों में फ्रंट-एंड स्टाइल हैं जिनसे निपटने की आवश्यकता होगी। मैं इस बिंदु पर निश्चित नहीं हूं कि अगर फ़िल्टर करने का कोई तरीका है कि ब्लॉक यह कैसे करता है। यदि यह संभव था तो यह भी एक अच्छा विचार नहीं हो सकता है अगर इसका मतलब है कि किसी विषय या प्लगइन को निष्क्रिय करने पर गैलरी ब्लॉक टूट गए हैं। एक पूरी तरह से नया ब्लॉक संभवतः उन स्थितियों के लिए जाने का रास्ता होगा जहां इसकी आवश्यकता होगी।
- मुझे वास्तव में यकीन नहीं है कि इस स्तर पर छवि का आकार कैसे काम करता है।
- जावास्क्रिप्ट हुक का उपयोग अंतिम रिलीज में प्रासंगिक नहीं हो सकता है। गुटेनबर्ग
@wordpress/hooksकोर में उपयोग करने के लिए हुक प्रणाली के बारे में चर्चा करते हुए उपयोग करता है ।
- चूंकि ब्लॉक का आउटपुट HTML के रूप में सहेजा जाता है, शोर्ट या मेटा के रूप में नहीं, इसलिए उन्हें संपादित किए बिना मौजूदा गैलरियों के आउटपुट को संशोधित करना संभव नहीं होगा।
पहली चीज जो हमें करने की ज़रूरत है वह एक स्क्रिप्ट को पंजीकृत करना है। इसके साथ किया जाता है wp_enqueue_scripts(), लेकिन enqueue_block_editor_assetsहुक पर।
स्क्रिप्ट पर wp-blocksनिर्भरता के रूप में स्क्रिप्ट होनी चाहिए । यह लगभग निश्चित रूप से पहले से ही संपादक में लोड किया गया है, लेकिन इसे एक निर्भरता बनाने के लिए संभवतः यह सुनिश्चित करता है कि यह हमारी स्क्रिप्ट से पहले लोड हो।
function wpse_298225_enqueue_block_assets() {
wp_enqueue_script(
'wpse-298225-gallery-block',
get_theme_file_uri( 'block.js' ),
['wp-blocks']
);
}
add_action( 'enqueue_block_editor_assets', 'wpse_298225_enqueue_block_assets' );
ब्लॉक के आउटपुट के लिए HTML को ब्लॉक की save()विधि द्वारा नियंत्रित किया जाता है । आप इस फाइल में गैलरी ब्लॉक देख सकते हैं ।
इस स्तर पर (मार्च 2018) गुटेनबर्ग ने ब्लॉकों की बचत विधि पर एक फिल्टर का समर्थन किया है blocks.getSaveElement। हम इस तरह जावास्क्रिप्ट में एक हुक जोड़ सकते हैं:
wp.hooks.addFilter(
'blocks.getSaveElement',
'wpse-298225',
wpse298225GallerySaveElement
)
पहला तर्क हुक नाम है, दूसरा तर्क है - मुझे लगता है - एक नाम स्थान, और अंतिम तर्क कॉलबैक फ़ंक्शन है।
चूंकि हम save()ब्लॉक की विधि की जगह ले रहे हैं , हमें एक नया तत्व वापस करने की आवश्यकता है। हालाँकि, यह एक सामान्य HTML तत्व नहीं है जिसे हमें वापस करने की आवश्यकता है। हमें एक प्रतिक्रिया तत्व को वापस करने की आवश्यकता है ।
जब आप मूल ब्लॉक की save()विधि को देखते हैं तो आप जो देखते हैं वह JSX है। रिएक्ट, जो गुटेनबर्ग अंडर-द-हूड का उपयोग करता है, इसे रेंडरिंग तत्वों के लिए समर्थन करता है। उस पर और अधिक के लिए यह लेख देखें ।
JSX को आम तौर पर एक बिल्ड स्टेप की आवश्यकता होती है, लेकिन जब से मैं इस उदाहरण के लिए बिल्ड स्टेप पेश नहीं कर रहा हूं, हमें JSX के बिना एक तत्व बनाने का तरीका चाहिए। रिएक्ट इसे प्रदान करता है createElement()। वर्डप्रेस इसके लिए एक आवरण प्रदान करता है और अन्य प्रतिक्रिया कार्यक्षमता के रूप में wp.element। इसलिए उपयोग करने के लिए createElement()हम उपयोग करते हैं wp.element.createElement()।
कॉलबैक फ़ंक्शन में blocks.getSaveElementहमें मिलता है:
element ब्लॉक द्वारा बनाया गया मूल तत्व।blockType उपयोग की जा रही ब्लॉक का प्रतिनिधित्व करने वाली वस्तु।attributesब्लॉक उदाहरण के गुण। हमारे उदाहरण में इसमें गैलरी में चित्र और कॉलम की संख्या जैसी सेटिंग्स शामिल हैं।
तो हमारे कॉलबैक फ़ंक्शन की आवश्यकता है:
- गैर-ब्लॉक दीर्घाओं के लिए मूल तत्व लौटाएं।
- विशेषताओं, विशेष रूप से छवियों को लें, और गैलरी का प्रतिनिधित्व करते हुए उनमें से एक नया रिएक्ट तत्व बनाएं।
यहां एक पूर्ण उदाहरण है जो केवल ulएक वर्ग के साथ आउटपुट करता है my-gallery, और liप्रत्येक छवि के लिए वर्ग के साथ my-gallery-itemऔर imgप्रत्येक srcमें छवि URL पर सेट के साथ है ।
function wpse298225GallerySaveElement( element, blockType, attributes ) {
if ( blockType.name !== 'core/gallery' ) {
return element;
}
var newElement = wp.element.createElement(
'ul',
{
'className': 'wp-block-gallery my-gallery',
},
attributes.images.map(
function( image ) {
return wp.element.createElement(
'li',
{
'className': 'blocks-gallery-item my-gallery-item',
},
wp.element.createElement(
'img',
{
'src': image.url,
}
)
)
}
)
)
return newElement
}
कुछ बातों का ध्यान रखना चाहिए:
- मूल गैलरी ब्लॉक छवियों को ढूंढती है
ul.wp-block-gallery .blocks-gallery-item, इसलिए ब्लॉक को संपादित करने के लिए यह मार्कअप और उन कक्षाओं की आवश्यकता होती है। यह मार्कअप डिफ़ॉल्ट स्टाइल के लिए भी उपयोग किया जाता है।
attributes.images.mapप्रत्येक छवि पर लूपिंग है और मुख्य तत्व के लिए सामग्री के रूप में बाल तत्वों की एक सरणी लौटाता है। इन तत्वों के अंदर छवि के लिए एक और बाल तत्व है।