पिछली पोस्ट में हमने ब्लॉक स्टाइल वेरिएशंस के बारे में सब कुछ सीखा और कैसे वे नए WordPress 5.0 एडिटर में आसानी से प्रीडिफाइंड स्टाइल्स के बीच स्विच करने के लिए उपयोग किए जाते हैं।

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

फिर हम एक अलग प्लगइन के माध्यम से आगे के ब्लॉक स्टाइल वेरिएशंस (शॉर्ट में BSVs) को जोड़कर हमारे ब्लॉक को एक्सटेंड करने पर ध्यान देंगे। आप आमतौर पर इसे तब करना चाहेंगे यदि आप ब्लॉक स्टाइल को एक्सटेंड करना चाहते हो लेकिन ब्लॉक के सोर्स कोड तक आपकी पहुंच ना हो।

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

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

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

एक ब्लॉक के अंदर BSV को रजिस्टर करना

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

सबसे पहले, हमे नया ब्लॉक स्पिन करना होगा। इससे वास्तव में कोई फर्क नहीं पड़ता कि ब्लॉक क्या करता है क्योंकि हमें अपने कस्टम ब्लॉक स्टाइल वेरिएशंस को जोड़ने के लिए भी कुछ चाहिए। संभवत ऐसा करने का सबसे आसान तरीका create-guten-block यूटिलिटी का उपयोग करना है जो एक नया प्लगइन बनाता है और कस्टमाइज करने के लिए तैयार एक सैंपल ब्लॉक को ब्लॉग जोड़ता है। और यह एक ही टर्मिनल कमांड से यह सब करता है!

यदि आपने पहले इस उपयोगी यूटिलिटी का उपयोग नहीं किया है, तो आप अधिक जानकारी के लिए प्रोजेक्ट रिपोजिटरी पर एक नजर डाल सकते हैं। इसके अलावा, यहां एक डेडीकेटेड ट्यूटोरियल है यदि आवश्यक हो तो आपको यह गति प्रदान करेगा।

अपने लोकल WordPress प्लगइन फोल्डर के अंदर एक कमांड लाइन विंडो खोलें और एंटर करें:

npx create-guten-block bsv-plugin

मैंने नाम के लिए यहां bsv-plugin का उपयोग किया है लेकिन आप अपनी पसंद के अनुसार कुछ भी उपयोग कर सकते हैं। कुछ ही मिनट लगेंगे जिसके बाद जब इंस्टॉलेशन पूरा हो जाता है:

cd bsv-plugin
npm start

अब हम अपने नए बनाए ब्लॉक के अंदर सोर्स कोड को एडिट कर सकते हैं और create-guten-block हर बदलाव के बाद हमारे लिए सोर्स कोड को ऑटोमेटिक रूप से कंपाइल करेंगे। बहुत बढ़िया।

आगे बढ़े और WordPress एडमिन के अंदर प्लगइन को एक्टिव करें और एक नया पेज बनाकर या किसी मौजूदा पेज को एडिट करके एडिटर पर अपने नए ब्लाक का एक इंस्टेंस जोड़ें।

एडिटर-ओनली स्टाइल को हटाए

इससे पहले कि हम आगे बढ़े हमें CSS को डिफ़ॉल्ट रूप से बदलने की जरूरत है।

हमारे लिए अभी बनाए गए कस्टम ब्लॉक create-guten-block में दो स्टाइल शीट्स शामिल है। एक एडिटर पर एनक्यू है और दूसरी एडिटर और फ्रंटएंड पर एनक्यू की गई है। हमें इस टूटोरियल के लिए एडिटर ओनली स्टाइल्स की आवश्यकता नहीं है। इसलिए bsv_plugin_cgb_editor_assets() में wp_enqueue_style() को कॉल करने के लिए .\bsv-plugin\src\init.php कमेंट करें या डिलीट करें।

init.php में एक पल के लिए रहने से हमें bsv_plugin_cgb_block_assets() में wp_enqueue_style() के लिए डिपेंडेंसी array पर कमेंट करने की आवश्यकता होती है क्योंकि किसी कारण से स्टाइल्स को ठीक से ध्यान में रखने से रोकता है। मैं इस टिटोरियल में create-guten-block v1.11.0 का उपयोग कर रहा हूं ताकि आपके द्वारा उपयोग किए जा रहे वर्जन के आधार पर आपके पास एक ही इशू हो या ना हो।

bsv_plugin_cgb_block_assets() फंक्शन को अब इस तरह दिखना चाहिए:

function bsv_plugin_cgb_block_assets() {
    // Styles.
    wp_enqueue_style(
        'bsv_plugin-cgb-style-css', // Handle.
        plugins_url( 'dist/blocks.style.build.css', dirname( __FILE__ ) ) // Block style CSS.
        //array( 'wp-blocks' ) // Dependency to include the CSS after it.
        // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.style.build.css' ) // Version: filemtime — Gets file modification time.
    );

} // End function bsv_plugin_cgb_block_assets().

अब जब आप पेज को लोड करते हैं, तो आप उस ब्लॉक स्टाइल्स को देखेंगे जो एडिटर में अप्लाई होता है और फ्रंटएंड पर जो हम चाहते हैं।

ब्लॉक स्टाइल वेरिएशंस को रजिस्टर करना

हम अपने कस्टम CSS में जोड़ने के लिए अभी तैयार है जिसे हम छोटा करेंगे। पहले हांलांकि हमें अपने ब्लॉग टाइल वेरिएशंस को रजिस्टर करने की जरूरत है।

.\bsv\plugin\src\block\block.js को खोलें और निम्न को registerBlockType फंक्शन कॉन्फ़िगरेशन ऑब्जेक्ट में जोड़ें (उदाहरण के लिए सीधे keywords प्रॉपर्टी के नीचे यह काम करेगा)।

styles: [
    {
        name: "style1",
        label: __("Style 1"),
        isDefault: true
    },
    {
        name: "style2",
        label: __("Style 2")
    },
    {
        name: "style3",
        label: __("Style 3")
    }
],

यह हमारे ब्लॉक के लिए तीन नए स्टाइल वेरिएशंस को रजिस्टर करता है। ध्यान दें कि कैसे style1 नाम का ब्लॉक स्टाइल वेरिएशन के पास एक isDefault प्रॉपर्टी है जो true पर सेट है। जब आप एडिटर में ब्लॉक ऑप्शन खोलते हैं तो यह Style 1 ब्लॉक स्टाइल वेरिएशन को सिलेक्ट करता है। यह वास्तव में ब्लॉक के लिए कोई CSS क्लासेज नहीं लगाता जैसा कि आप सोच सकते हैं।

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

एडिटर पेज को रिफ्रेश करें और तीन ब्लॉक स्टाइल वेरिएशंस को देखने के लिए ब्लॉक के टॉप लेफ्ट ओर आइकन पर क्लिक करके स्टाइल वेरिएशन ऑप्शन खोलें।

ध्यान दें कि Style 1 ब्लॉक स्टाइल वेरिएशन को डिफ़ॉल्ट रूप से कैसे चुना जाता है जो कि ऊपर के styles प्रॉपर्टी में हमने स्पेसिफाई किया है। ब्लॉक के रैपर में जोड़े जा रहे विभिन्न CSS क्लासेज के तीन ब्लॉक स्टाइल वेरिएशंस में से किसी एक को सिलेक्ट करना। उदाहरण के लिए Style 2 का सिलेक्शन is-style-style2 क्लास को जोड़ता है।

वर्तमान में कुछ भी नहीं होता है जब प्रत्येक ब्लॉक स्टाइल वेरिएशन को सिलेक्ट किया जाता है तो चलो इसे ठीक करने के लिए कुछ बेसिक स्टाइल्स को जोड़ें। मौजूदा स्टाइल्स के बाद .\bsv-plugin\src\ block\style.scss में निम्नलिखित को जोड़ते हैं:

.wp-block-cgb-block-bsv-plugin.is-style-style2 {
    background: pink;
}

.wp-block-cgb-block-bsv-plugin.is-style-style3 {
    background: purple;
    color: white;
}

Style 2 और Style 3 ब्लॉक स्टाइल वेरिएशंस के लिए केवल कस्टम स्टाइल्स को यहां जोड़ा जा रहा है ताकि डिफॉल्ट ब्लॉक टाइल्स को तब भी अप्लाई किया जाए जब कोई ब्लॉक स्टाइल वेरिएशन विशेष रूप से क्लिक नहीं किया जाता है।

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

एक प्लगइन के माध्यम से BSV को रजिस्टर करना

यदि आप किसी ऐसे ब्लॉक में स्टाइल वेरिएशंस जोड़ना चाहते हैं जिसके लिए आपके पास सोर्स कोड एक्सेस नहीं है, तो आप registerBlockStyle() का उपयोग कर सकते हैं। कि 3rd पार्टी ब्लॉक के लिए अतिरिक्त स्टाइल वेरिएशंस को परिभाषित करने में सक्षम बनाता है, registerBlockType() के बाहर।

कोर बटन ब्लॉक में अपने खुद के कुछ स्टाइल वेरिएशन को जोड़कर आइए इसे टेस्ट करते हैं। यह ब्लॉक पहले से डिफाइन किए गए तीन स्टाइल वेरिएशंस के साथ आता है: Rounded, Outline, और Squared।

हम अपने खुद के दो और स्टाइल में बदलाव लाएंगे: Pill Shaped, और Uppercase।

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

अपने लोकल WordPress के .\wp-content\plugins फोल्डर के अंदर एक नया bsv फोल्डर बनाएं और तीन फाइलें जोड़े:

• bsv.php
• bsv.js
• bsv.css

bsv.php में निम्न कोड को जोड़ें:

<?php
/*
Plugin Name: Block Style Variations
Version: 0.1
Description: Demonstrates how to add block style variations to an existing block.
Author: David Gwyer
Author URI: https://www.wpgoplugins.com
*/

// editor scripts
function bsv_editor($hook) {
    wp_enqueue_script( 'bsv_js', plugins_url( 'bsv.js', __FILE__ ) );
}
add_action('enqueue_block_editor_assets', 'bsv_editor');

// frontend and editor scripts
function bsv_frontend_editor($hook) {
    wp_enqueue_style( 'bsv_css', plugins_url( 'bsv.css', __FILE__ ) );
}
add_action('enqueue_block_assets', 'bsv_frontend_editor');

bsv.js में फ्रंट-एंड कोड जोड़ें:

jQuery(document).ready(function($) {
  wp.blocks.registerBlockStyle("core/button", {
    name: "upper-case",
    label: "Upper Case"
  });

  wp.blocks.registerBlockStyle("core/button", {
    name: "pill",
    label: "Pill Shaped"
  });
});

और bsv.css में स्टाइल्स को स्वयं जोड़ें:

.wp-block-button.is-style-upper-case {
  text-transform: uppercase;
}

.wp-block-button.is-style-pill .wp-block-button__link {
  border-radius: 30px !important;
}

लॉग इन को एक्टिवेट करें और एडिटर में बटन ब्लॉक का एक नया इंस्टेंस डालें। आपको अब उपलब्ध दो नए ब्लाक टाइल वेरिएशंस को देखना चाहिए!

bsv प्लगइन कोड को समझना

आइए समीक्षा करें कि हमने अभी क्या किया है। bsv.php में जावास्क्रिप्ट फाइल को enqueue_block_editor_assets हुक के माध्यम से एनक्यू किया गया था, इसलिए यह केवल एडमिन एडिटर पर लोड होता है। हालांकि, हम चाहते है कि CSS एडिटर और फ्रंट एंड पर लोड हो, इसलिए हम enqueue_block_assets हुक का उपयोग करते हैं।

स्टाइल्स काफी आत्मव्याख्यात्मक (self explanatory) हैं, लेकिन ध्यान दें कि हमने विशिष्ट ब्लॉक स्टाइल वेरिएशन क्लासेज के साथ ब्लॉक इंस्टेंसस को कैसे टारगेट किया है। यह हमें अलग-अलग ब्लॉक स्टाइल वेरिएशंस के लिए हमारे CSS को अलग करने का एक साफ तरीका देता है।

यहां ध्यान देने वाली महत्वपूर्ण बात यह है कि दो registerBlockStyle() कॉल हैं। यह फंक्शन ग्लोबल wp.blocks ऑब्जेक्ट में रहता है, इसलिए हमें उस फंक्शन को उपयोग करने के लिए प्रीफिक्स को स्पष्ट रूप से शामिल करना होगा।

registerBlockStyle() दो अरगुमेंट्स को लेता है। पहला उस ब्लॉक का नाम है जिसमें आप स्टाइल वेरिएशन को जोड़ना चाहते हैं, और दूसरा कंफीग्रेशन ऑब्जेक्ट है। यह ठीक वैसा ही ऑब्जेक्ट है जो हमारे सामने पहले आया था जब हमने styles प्रॉपर्टी के माध्यम से सीधे ब्लॉक डेफिनेशन में ब्लॉक स्टाइल वेरिएशन को जोड़ा था।

यहां एक बात ध्यान लायक है की यदि आप ब्लॉक स्टाइल वेरिएशन के लिए registerBlockStyle() के माध्यम से isDefault: true जोड़ते हैं तो यह नजरअंदाज कर दिया जाएगा कि क्या डिफॉल्ट स्टाइल वेरिएशन पहले से सेट है। बस कुछ नजर रखने के लिए अगर आप (मेरी तरह) इसे डिफॉल्ट स्टाइल वेरिएशन को ओवरराइड करने की उम्मीद कर रहे थे।

डॉक्यूमेंटेशन के अनुसार आप unregisterBlockStyle() के साथ ब्लॉक स्टाइल वेरिएशन को अनरजिस्टर भी कर सकते हैं। इसका प्रयोग काफी हद तक registerBlockStyle() की तरह है, लेकिन आपको केवल ब्लॉक के नाम और स्टाइल वेरिएशन नाम स्पेसिफाई करने की जरूरत है।

इसलिए, उदाहरण के लिए, आपके द्वारा उपयोग किए जा सकने वाले बटन ब्लॉक से Outline स्टाइल वेरिएशन को अनरजिस्टर करने के लिए आप यह कर सकते हैं:

wp.blocks.unregisterBlockStyle("core/button", "outline");

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

एक BSV को एक थीम के माध्यम से रजिस्टर करना

हमारे अंतिम उदाहरण के लिए आइए कोर बटन ब्लॉक में एक और स्टाइल वेरिएशन जोड़ते हैं ताकि एक फ्लैट कलर के बजाय ग्रेडियंट बैकग्राउंड कलर के साथ बटन रेंडर करने का ऑप्शन जोड़ा जा सके।

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

मैं पैरंट थीम के रूप में Twenty Nineteen का उपयोग कर रहा हूं, क्योंकि यह WordPress 5.0 के साथ शामिल है, लेकिन आप इसे किसी भी पैरंट थीम के लिए छोड़ सकते हैं जिसे आप चाहते हैं।

अपने लोकल WordPress के .\wp-content-themes फोल्डर के अंदर एक नया twntynineteen-child फोल्डर बनाएं और चार फाइलें जोड़ें:

• style.css
• functions.php
• tnc_bsv.js
• tnc_bsv.css

हम किसी भी विशिष्ट चाइल्ड थीम स्टाइल को style.css में शामिल नहीं करेंगे। लेकिन हमें इसे शामिल करने की जरूरत है इसलिए थीम WordPress द्वारा मान्यता प्राप्त हो।

style.css में जोड़ें:

/*
 Theme Name:   Twenty Nineteen Child
 Author:       David Gwyer
 Author URI:   https://wpgoplugins.com/
 Template:     twentynineteen
 Version:      0.1
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
*/

जावास्क्रिप्ट और CSS फाइलों को functions.php के माध्यम से एनक्यू किया जाता है। इसलिए इस फाइल में निम्न कोड जोड़ें:

<?php

// tnc = twenty nineteen child

// Include parent theme styles
function tnc_enqueue_parent_theme_styles() {
    wp_enqueue_style( 'parent-theme-styles', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'tnc_enqueue_parent_theme_styles' );

function tnc_add_styles() {
    wp_enqueue_style( 'tnc-bsv-css', get_stylesheet_directory_uri() . '/tnc_bsv.css' );
}
add_action('enqueue_block_assets', 'tnc_add_styles');

function tnc_add_scripts() {
    wp_enqueue_script(
        'tnc-bsv-js',
        get_stylesheet_directory_uri() . '/tnc_bsv.js'
    );
}
add_action( 'enqueue_block_editor_assets', 'tnc_add_scripts' );

tnc_bsv.js में हमारी ब्लॉक स्टाइल वेरिएशन एंटर करने के लिए कोड जोड़ें:

jQuery(document).ready(function($) {
  wp.blocks.registerBlockStyle("core/button", {
    name: "gradient",
    label: "Gradient"
  });
});

अंत में हमारे ब्लॉक स्टाइल में बदलाव के लिए CSS को tnc_bsv.css में जोड़ा गया है:

.wp-block-button.is-style-gradient .wp-block-button__link {
  background: linear-gradient(
    to bottom,
    #6db3f2 0%,
    #54a3ee 50%,
    #3690f0 51%,
    #1e69de 100%
  ) !important;
}

.wp-block-button.is-style-gradient .wp-block-button__link:hover {
  opacity: 0.9;
  cursor: pointer;
}

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

थीम को एक्टिवेट करें और फिर एडिटर में हमारे नए क्रिएशन को देखने के लिए एक बटन ब्लॉक जोड़ें।

आपने देखा होगा कि मैंने जावास्क्रिप्ट कोड को jQuery स्टेटमेंट के अंदर लपेटा है:

jQuery(document).ready(function($) {
    // ...
});

यह वास्तव में बहुत जरूरी नहीं है। कोड के टेस्टिंग के दौरान यह ठीक काम करता हुआ दिख रहा था वह भी बिना jQuery रैपर के। हालांकि, अभी तक कोई ऑफिशल गाइडलाइन नहीं है कि नए एडिटर API के साथ इंटरेक्ट करने वाले जावास्क्रिप्ट कोड को कैसे जोड़ा जाए। इस बीच ऊपर वाले jQuery रैपर मेथड का उपयोग करने की सलाह दी जा सकती है। लेकिन इसका चुनाव आप पर निर्भर है।

कोड को डाउनलोड करें

जैसा कि पहले ही बताया गया है, कोड पेज के राइट साइड में GitHub लिंक के माध्यम से डाउनलोड करने के लिए उपलब्ध है।

इस रेपो में थीम और दो प्लगइन शामिल हैं जिन्हें हमने इस टुटोरिअल में डेवलप किया है। जब आप कंटेंट डाउनलोड कर लेंगे तो आपको तीन फोल्डर दिखाई देंगे। twentynineteen-child फोल्डर को अपने .\wp-content\themes थीम फोल्डर में जोड़ें और दूसरे दो प्लगइन फोल्डर को अपने .\wp-content\plugins प्लगइन फोल्डर में जोड़ें।

नए WordPress एडिटर में ब्लॉक स्टाइल वेरिएशन को उपलब्ध कराने के लिए प्लगिंस और थीम दोनों को एक्टिवेट करें।

निष्कर्ष

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

मुझे यकीन है कि यह प्लगइन डेवलपर्स और थीम डेवलपर्स द्वारा समान रूप से उनके नए एडिटर में एक भारी उपयोग किया जाने वाला फीचर है। थीम डेवलपर्स के लिए विशेष रूप से यह आपको अपने थीम स्टाइल्स से मैच करने के लिए ब्लॉक स्टाइल्स को कस्टमाइज करने की बहुत गुंजाइश देता है।