ब्लॉक संपादक हुक्स

हुक WordPress की मूलभूत सुविधाओं में से एक हैं। वे आपको WordPress कोर में “हुक” करने और WordPress लाइफ़साइकल के विशिष्ट बिंदुओं पर अपना कोड चलाने की अनुमति देते हैं।

ब्लॉक एडिटर के अपने हुक्स का एक सेट है, जो आपको एडिटर के साथ इंटरैक्ट करने और उसके व्यवहार को संशोधित करने की अनुमति देता है।

यह पाठ आपको ब्लॉक एडिटर में उपलब्ध कुछ अलग-अलग हुक्स और एडिटर की कार्यक्षमता बढ़ाने के लिए उनका उपयोग करने का तरीका बताएगा।

@wordpress/hooks पैकेज

हालाँकि ऐक्शन और फ़िल्टर हुक ऐतिहासिक रूप से केवल PHP में उपलब्ध रहे हैं, लेकिन ब्लॉक एडिटर JavaScript का उपयोग करके बनाया गया है, इसलिए अब JavaScript हुक्स का एक नया सेट भी उपलब्ध है।

ये JavaScript ऐक्शन और फ़िल्टर हुक्स आपको एडिटर के विभिन्न पहलुओं में हुक करने और एडिटर के व्यवहार या स्वयं ब्लॉक्स में बदलाव करने की अनुमति देते हैं।

JavaScript हुक्स को addAction और addFilter फ़ंक्शनों का उपयोग करके @wordpress/hooks पैकेज में पंजीकृत किया जाता है।

PHP संस्करणों के समान, आप इन फ़ंक्शनों को हुक का नाम और कॉलबैक फ़ंक्शन देते हैं।

एक उल्लेखनीय अंतर यह है कि आपको हुक का नेमस्पेस भी देना होता है। नेमस्पेस कॉलबैक फ़ंक्शन के लिए एक विशिष्ट पहचानकर्ता है और यह नाम संबंधी टकरावों को रोकने में मदद करता है।

आइए JavaScript हुक का उपयोग करने का तरीका दिखाने के लिए एक उदाहरण देखते हैं।

blocks.registerBlockType फ़िल्टर

अब तक आपने जो भी ब्लॉक उदाहरण देखे हैं, उनमें JavaScript में ब्लॉक पंजीकृत करने के लिए @wordpress/blocks पैकेज के registerBlockType फ़ंक्शन का उपयोग किया है।

हर ब्लॉक इस फ़ंक्शन का उपयोग करके एक नई ब्लॉक प्रकार परिभाषा पंजीकृत करने से शुरू होता है।

/**
 * Every block starts by registering a new block type definition.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
 */
registerBlockType( metadata.name, {
    /**
     * @see ./edit.js
     */
    edit: Edit,

    /**
     * @see ./save.js
     */
    save,
} );

जब सभी पंजीकृत ब्लॉक्स को प्रोसेस करने वाला कोड चलता है, तो blocks.registerBlockType फ़िल्टर हुक में जुड़े किसी भी कॉलबैक फ़ंक्शन को चलाया जाता है और उसे संशोधित ब्लॉक सेटिंग्स ऑब्जेक्ट लौटाना चाहिए।

    const settings = applyFilters(
        'blocks.registerBlockType',
        blockType,
        name,
        null
    );

यह फ़िल्टर हुक आपको ब्लॉक के पंजीकृत होने से पहले ब्लॉक सेटिंग्स ऑब्जेक्ट को संशोधित करने की अनुमति देता है।

blocks.registerBlockType फ़िल्टर में कॉलबैक फ़ंक्शन पंजीकृत करने के लिए आप @wordpress/hooks पैकेज के addFilter फ़ंक्शन का उपयोग करते हैं।

फ़िल्टर पंजीकृत करने के लिए JavaScript फ़ाइल को एनक्यू करने वाला एक प्लगइन बनाते हैं।

सबसे पहले अपने ब्लॉक हुक्स कोड को संग्रहीत करने के लिए अपनी wp-content/plugins डायरेक्टरी में एक डायरेक्टरी बनाएँ।

mkdir -p wp-content/plugins/wp-learn-block-hooks

नई बनाई गई डायरेक्टरी में मुख्य प्लगइन PHP फ़ाइल, wp-learn-block-hooks.php, बनाएँ।

फिर प्लगइन हेडर सेट करने और यह सुनिश्चित करने के लिए कि प्लगइन कोड केवल WordPress वातावरण में चले, निम्नलिखित कोड जोड़ें:

<?php
/**
 * Plugin Name:       WP Learn Block Hooks
 * Description:       WP Learn Block Hooks
 * Requires at least: 6.6
 * Requires PHP:      7.0
 * Version:           1.0.0
 * Author:            The WordPress Contributors
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       wp-learn-block-hooks
 *
 */
if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

इसके बाद JavaScript फ़ाइल को एनक्यू करने के लिए आप enqueue_block_editor_assets ऐक्शन में एक कॉलबैक फ़ंक्शन हुक कर सकते हैं।

add_action( 'enqueue_block_editor_assets', 'wp_learn_block_hooks_editor_assets' );
function wp_learn_block_hooks_editor_assets() {
    wp_enqueue_script(
        'wp-learn-block-hooks-editor-script',
        plugin_dir_url( __FILE__ ) . 'block-hooks.js',
        array(
            'wp-hooks',
        ),
    );
}

ध्यान दें कि आपको wp-hooks निर्भरता निर्दिष्ट करनी होगी ताकि यह सुनिश्चित हो सके कि आपका ब्लॉक हुक्स कोड केवल @wordpress/hooks पैकेज के उपलब्ध होने के बाद ही लोड हो। ऐसा इसलिए है क्योंकि JavaScript फ़ाइल में आप @wordpress/hooks पैकेज के addFilter फ़ंक्शन का उपयोग करने वाले हैं।

अब प्लगइन डायरेक्टरी में एक block-hooks.js फ़ाइल बनाएँ और किसी भी वेरिएबल को ग्लोबल स्कोप में लीक होने से रोकने के लिए IIFE (Immediately Invoked Function Expression) से शुरुआत करें:

( function(){

} )()

इसके बाद blocks.registerBlockType फ़िल्टर हुक पर कॉलबैक पंजीकृत करने के लिए addFilter फ़ंक्शन का उपयोग करें:

( function(){
    wp.hooks.addFilter(
        'blocks.registerBlockType',
        'wp-learn-block-hooks/list-block-description',
        addListBlockDescription
    );
} )()

ध्यान दें कि कॉलबैक फ़ंक्शन addListBlockDescription से पहले आप एक विशिष्ट नेमस्पेस निर्दिष्ट करते हैं। नेमस्पेस डेवलपर द्वारा परिभाषित किया जाता है और आपके प्लगइन के लिए विशिष्ट होना चाहिए।

अब कुछ करने के लिए addListBlockDescription कॉलबैक फ़ंक्शन बनाएँ:

    function addListBlockDescription( settings, name ) {
        if ( name === 'core/list' ) {
            settings.description = 'This is a list block';
        }
        return settings;
    }

यहाँ addListBlockDescription कॉलबैक फ़ंक्शन ब्लॉक के सेटिंग्स ऑब्जेक्ट और ब्लॉक का नाम पैरामीटर के रूप में प्राप्त करता है।

इसके बाद यह जाँचता है कि पंजीकृत किया जा रहा ब्लॉक एक सूची ब्लॉक है या नहीं और यदि है, तो यह ब्लॉक के सेटिंग्स ऑब्जेक्ट की description प्रॉपर्टी को बदल देता है।

अंत में, क्योंकि यह एक फ़िल्टर है, इसे कुछ लौटाना आवश्यक है; इस मामले में इसे संशोधित सेटिंग्स ऑब्जेक्ट लौटाना होगा।

इसे जाँचने के लिए अभी प्लगइन सक्रिय न करें। इसके बजाय किसी पोस्ट या पेज को संपादित करें और ब्लॉक इंसर्टर से सूची ब्लॉक खोजें।

यदि आप सूची ब्लॉक पर माउस ले जाएँगे, तो आपको “Create a bulleted or numbered list” विवरण दिखाई देना चाहिए।

अब प्लगइन सक्रिय करें।

प्लगइन सक्रिय होने पर सूची ब्लॉक का विवरण बदलकर “This is a list block” दिखाई देना चाहिए।

ब्लॉक एडिटर हुक्स का दस्तावेज़ीकरण

ब्लॉक एडिटर हैंडबुक में ब्लॉक एडिटर हुक्स के लिए एक समर्पित अनुभाग है, जिसमें उपलब्ध विभिन्न प्रकार के हुक्स के लिए अलग-अलग पृष्ठ शामिल हैं।

ब्लॉक फ़िल्टर पृष्ठ में उपलब्ध सभी फ़िल्टरों की सूची है, जो आपको मौजूदा ब्लॉक्स के व्यवहार को संशोधित करने की अनुमति देते हैं। इसमें ब्लॉक पंजीकरण के दौरान ब्लॉक्स को संशोधित करना, फ्रंट एंड पर ब्लॉक्स को संशोधित करना, ब्लॉक एडिटर में ब्लॉक्स का व्यवहार बदलना, ब्लॉक्स हटाना, ब्लॉक्स छिपाना और ब्लॉक श्रेणियों को प्रबंधित करना शामिल है।

एडिटर हुक्स उन सभी हुक्स का दस्तावेज़ीकरण करता है, जो आपको एडिटर अनुभव को संशोधित करने की अनुमति देते हैं। इनमें एडिटर सेटिंग्स को संशोधित करना, ब्लॉक डायरेक्टरी और पैटर्न डायरेक्टरी सुविधाओं को अक्षम करना, एडिटर सुविधाओं का विस्तार करना, एडिटर के लिए REST API डेटा नियंत्रित करना और एडिटर त्रुटियों को लॉग करना शामिल है।

i18n फ़िल्टर पृष्ठ उन फ़िल्टरों की सूची प्रदान करता है, जो आपको एडिटर में उपयोग किए जाने वाले अंतर्राष्ट्रीयकरण फ़ंक्शनों को संशोधित करने की अनुमति देते हैं।

पार्सर फ़िल्टर उन सभी फ़िल्टरों का दस्तावेज़ीकरण करता है, जो ब्लॉक पार्सर को संशोधित करने की अनुमति देते हैं। इसका उपयोग मेमोरी में संग्रहीत ब्लॉक डेटा को डेटाबेस में पोस्ट सामग्री के रूप में संग्रहीत ब्लॉक मार्कअप में बदलने के लिए किया जाता है।

ऑटोकम्प्लीट @wordpress/block-editor पैकेज का एक घटक है, जो एडिटर में ऑटोकम्प्लीटर जोड़ने का तरीका प्रदान करता है।

यदि आपने कभी ब्लॉक एडिटर में @username फ़ंक्शन का उपयोग किया है, तो यह ऑटोकम्प्लीट घटक द्वारा संचालित होता है।

ऑटोकम्प्लीट फ़िल्टर पृष्ठ आपके स्वयं के ऑटोकम्प्लीटर को एडिटर में जोड़ने का तरीका बताता है।

अंत में, ग्लोबल स्टाइल्स फ़िल्टर पृष्ठ WordPress संस्करण 6.1 में जोड़े गए उन फ़िल्टरों का दस्तावेज़ीकरण करता है, जो डेवलपर्स को theme.json फ़ाइल में परिभाषित ब्लॉक थीम की ग्लोबल सेटिंग्स और स्टाइल्स को संशोधित करने की अनुमति देते हैं।

इन सभी पृष्ठों में इन हुक्स का उपयोग करने और ब्लॉक एडिटर की कार्यक्षमता बढ़ाने के लिए उनका उपयोग करने के तरीके के विस्तृत उदाहरण शामिल हैं।