गुटेनबर्ग के लिए अपने प्लगइन को कैसे अनुकूलित करें: भाग 1 (ब्लॉक एपीआई)

"मेरे पास एक प्लगइन है," आप कहते हैं, "मैं इसे गुटेनबर्ग कैसे तैयार करूं?"


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

कौन प्रभावित हुआ?

लगभग सभी प्लगइन्स पोस्ट संपादक के साथ कुछ भी करने के लिए गुटेनबर्ग से प्रभावित होगा। उदाहरण के लिए, यदि आपका प्लगइन TinyMCE में एक बटन जोड़ता है, तो संपादक में एक शोर्ट, बुरी खबर; यह इसका अंत होगा.
गुटेनबर्ग के लिए अपने प्लगइन को अनुकूलित करें: भाग 1 (ब्लॉक एपीआई)

"क्या मुझे गुटेनबर्ग के लिए अपने प्लगइन्स को अनुकूलित करने की आवश्यकता है?"

तो गुटेनबर्ग के लिए कौन से प्लगइन्स को अपडेट करने की आवश्यकता है? कोई भी प्लगइन्स जो साथ काम करता है:

  • कस्टम मेटाबोक्स
  • शॉर्टकोड
  • TinyMCE बटन
  • या किसी भी संपादक की सुविधा

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

यहां तक ​​कि शॉर्टकोड पहले की तरह काम करते रहेंगे, लेकिन यह सिर्फ एडिटर में प्लेन टेक्स्ट नोड होगा, जबकि गुटेनबर्ग के सभी शोर्ट प्लग इन के ब्लॉक यूआई का अनुसरण करेंगे और उपयोगकर्ताओं के लिए उपयोग करना आसान होगा.

तो हां, उपयोगकर्ता उन प्लगइन्स को पसंद करेंगे जो गुटेनबर्ग अनुभव के लिए तैयार किए गए हैं। और पीछे रहने वालों को एक प्रतियोगी प्लगइन द्वारा प्रतिस्थापित किया जाएगा.

बस आपको एक विचार देने के लिए, यहाँ एक उदाहरण दिया गया है कि उपयोगकर्ता के मानक पुराने-संपादक अनुभव हमारे जैसे प्लगइन के साथ क्या दिखते हैं (ए), और फिर यह गुटेनबर्ग में कैसा दिखता है (ख) – इसके लिए अनुकूलित प्लगइन के साथ.

(ख)फीडज़ी आरएसएस फीड्स - एक प्लगइन गुटेनबर्ग-तैयार

डर नहीं! हम यहां आपके प्लगइन्स गुटेनबर्ग-तैयार करने में आपकी सहायता करने के लिए हैं। Gutenberg की ओर अपने प्लगइन को एकीकृत करने के कई तरीके हैं, इस बात पर निर्भर करता है कि आपका प्लगइन कैसे काम करता है, जिस पर हम इस लेख में चर्चा करने जा रहे हैं.

पहले से जानने लायक बातें रिएक्ट पर लिखी गई हैं। और गुटेनबर्ग प्लगइन्स को जावास्क्रिप्ट में कोडित किया गया है, जो केवल उन डेवलपर्स के लिए एक मोटा संक्रमण हो सकता है जो केवल PHP में कोड करते हैं। जबकि आपको गुटेनबर्ग के लिए प्लगइन्स बनाने के लिए रिएक्ट का ज्ञान होना आवश्यक नहीं है, आपको जावास्क्रिप्ट की कुछ बुनियादी समझ की आवश्यकता होगी। यदि आपने पहले रिएक्ट और जेएसएक्स पर काम किया है तो यह आपके लिए समान आधार होगा.

जबकि वहां पर्याप्त नहीं है गुटेनबर्ग के लिए आधिकारिक दस्तावेज, इसके Github रिपॉजिटरी में डेवलपर्स के लिए बहुत सारी मूल्यवान जानकारी है। यदि आप गुटेनबर्ग के विकास को गहराई से सीखना चाहते हैं, तो आपको अपनी आँखें हर उस चीज़ पर खुली रखनी होंगी जो गुटेनबर्ग के गिटहब रिपॉजिटरी में चल रही है क्योंकि परियोजना वास्तव में बहुत तेजी से आगे बढ़ रही है, और हर एक दिन चीजें बदल रही हैं।.

गुटेनबर्ग के लिए अपने प्लगइन को कैसे अनुकूलित करें

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

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

इसके अलावा, हम NodeJS, NPM, webpack, और ESNext जैसे जावास्क्रिप्ट विकास उपकरणों के एक आधुनिक स्टैक का उपयोग करेंगे। हम आपको उदाहरण फ़ाइलें प्रदान करेंगे, इसलिए आपको अपने विकास के वातावरण को स्थापित करने के बारे में चिंता करने की आवश्यकता नहीं है.

इस पोस्ट में, हम देख रहे होंगे ब्लॉक एपीआई का उपयोग करके अपने प्लगइन गुटेनबर्ग-संगत कैसे करें. हम अन्य तरीकों (साइडबार एपीआई, पब्लिश पैनल, स्टेटस बार) में प्रवेश करेंगे & यदि आवश्यक हो तो भाग दो में समान एपीआई).

आप सभी उल्लिखित उदाहरण पा सकते हैं इस GitHub भंडार.

गुटेनबर्ग विकास का वातावरण

गुटेनबर्ग के लिए विकसित करने के लिए आपको एनपीएम, वेबपैक, बैबेल और जेएसएक्स जैसे उपकरणों के गुच्छा की आवश्यकता होती है। इसमें बहुत समय और प्रयास लगता है, इसलिए हमने आपके लिए पर्यावरण तैयार किया है.

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

गुटेनबर्ग बॉयलरप्लेट

आप कांटा या क्लोन कर सकते हैं गुटेनबर्ग बॉयलरप्लेट रिपॉजिटरी आपके / WP-सामग्री / plugins / और इसे अपने विकास के वातावरण के रूप में उपयोग करें.

उसके बाद, आपको आरंभ करने के लिए अपनी मशीन में NodeJS इंस्टॉल करना होगा। गुटेनबर्ग बॉयलरप्लेट फ़ोल्डर में नेविगेट करें, और एनपीएम इंस्टॉल करें

इस बिंदु से, आपको तीन आदेशों को जानना होगा जो आप विकास प्रक्रिया के दौरान उपयोग करेंगे:

  • npm इंस्टॉल – प्रोजेक्ट क्लोन करते समय प्रोजेक्ट निर्भरता स्थापित करें.
  • npm रन देव – विकास प्रक्रिया के दौरान संकलन कोड। आपको इसे एक बार चलाने की आवश्यकता है, और यह परिवर्तनों को देखता रहेगा.
  • npm रन बिल्ड – विकास प्रक्रिया समाप्त होने के बाद एक अनुकूलित बिल्ड के लिए संकलन कोड.

API ब्लॉक करें

ब्लॉक गुटेनबर्ग के मूल तत्व हैं, यह ब्लॉक-आधारित संपादक है। ब्लॉक एपीआई आपको गुटेनबर्ग के लिए ब्लॉक बनाने की अनुमति देता है। आप ऐसे ब्लॉक बना सकते हैं जो मूल HTML, शॉर्टकोड प्रस्तुत कर सकते हैं, या यहां तक ​​कि डायनामिक ब्लॉक भी प्रदर्शित कर सकते हैं, उदाहरण के लिए, आपके नवीनतम पोस्ट.

मौजूदा प्लगइन पर आधारित प्रक्रिया

हमारे उदाहरण में, हम एक क्लॉक टू ट्वीट शोर्ट को एक गुटेनबर्ग ब्लॉक में अपनाएंगे। शोर्ट टू ट्वीट शोर्ट अपने पाठ के साथ एक ट्वीट बॉक्स और उस पाठ को ट्वीट करने के लिए एक बटन प्रदान करता है। ऐशे ही:

कलरव लेआउट पर क्लिक करें

हमारा शोर्ट कुछ इस तरह दिखता है:

[clicktotweet ट्वीट ="प्रदर्शित होने वाला पाठ" tweetsent ="पाठ ट्वीट किया जाना है" बटन ="कलरव" विषय ="क्लिक-टू-ट्वीट"]

हमारे शोर्ट में चार पैरामीटर हैं:

  • ट्वीट: पाठ जो आपकी साइट पर दिखाई देता है.
  • tweetsent: पाठ जो ट्विटर पर जाता है.
  • बटन: कलरव बटन पाठ.
  • विषय: या तो क्लिक-टू-ट्वीट या क्लिक-टू-ट्वीट-ऑल बॉक्स थीम के रूप में.

ब्लॉक एपीआई के साथ गुटेनबर्ग के लिए प्लगइन्स को अपनाना

गुटेनबर्ग के साथ इसके बारे में जाने के दो तरीके हैं, या तो हम HTML को फ्रंट-एंड पर रेंडर कर सकते हैं, या हम फ्रंट-एंड के शोर्ट को प्रस्तुत करने के लिए अपने गुटेनबर्ग ब्लॉक का उपयोग कर सकते हैं। इस लेख के लिए, हम बाद में करेंगे.

सभी कोड में उपलब्ध है GitHub पर हैलो गुटेनबर्ग प्लगइन रिपॉजिटरी. आप कार्रवाई में प्लगइन को देखने के लिए या कोड को संशोधित करने के लिए रिपॉजिटरी को क्लोन कर सकते हैं.

गुटेनबर्ग के लिए लिपि / शैली की व्याख्या करें

सबसे पहले, हमें अपनी स्क्रिप्ट और शैली को गुटेनबर्ग के संपादक को enqueue_block_assets का उपयोग करने की आवश्यकता है:

/ **
* सामने अंत और संपादक जावास्क्रिप्ट और सीएसएस enqueue
* /
समारोह hello_gutenberg_scripts () {
$ ब्लॉकपाथ = ‘/ डस्ट /ब्लॉक.जेएस’;
$ स्टाइलपाठ = ‘/ डस्ट /ब्लॉक। एसके’;

// बंडल किए गए ब्लॉक JS फाइल को एनक्यू करें
wp_enqueue_script (
‘हैलो-गुटेनबर्ग-ब्लॉक-js’,
plugins_url ($ blockPath, __FILE__),
[‘wp-i18n’, ‘wp-block’, ‘wp-editor’, ‘wp-Components’],
फ़िल्मटाइम (प्लगइन_डिर_पथ (__ फ़िले__)। $ ब्लॉकपाथ)
);

// एन्क्यू फ्रंट और एडिटर ब्लॉक स्टाइल
wp_enqueue_style (
‘हैलो-गुटेनबर्ग-ब्लॉक-सीएसएस’,
plugins_url ($ शैलीपठ, __FILE__),
”,
फ़िल्मटाइम (प्लगइन_डिर_पथ (__ फ़िले__)। $ स्टाइलपाथ)
);

}

// हुक स्क्रिप्ट ब्लॉक एडिटर हुक में कार्य करता है
add_action (‘enqueue_block_assets’, ‘hello_gutenberg_scripts’);

हमने अपनी स्क्रिप्ट में चार निर्भरताएं जोड़ी हैं, जिनका उपयोग हम अपने ब्लॉक में करेंगे। आइए पहले इन निर्भरताओं के बारे में जानें:

wp-i18n, गुटेनबर्ग के अंतर्राष्ट्रीयकरण कार्यों का संस्करण है, जैसे कि __ (). wp-block का उपयोग registerBlockType फ़ंक्शन के लिए किया जाता है जो आपके ब्लॉक को पंजीकृत करता है। हम अपने ब्लॉक में विभिन्न घटकों के लिए wp-editor और wp-Components स्क्रिप्ट का उपयोग करते हैं.

अब जब हमने आपकी संपत्ति की गणना की है, तो हम अपना ब्लॉक लिखना शुरू कर सकते हैं /src/block.js फ़ाइल.

आयात निर्भरताएँ

यदि आप गुटेनबर्ग बॉयलरप्लेट का उपयोग कर रहे हैं तो आपके block.js फ़ाइल में एक बुनियादी ब्लॉक संरचना होनी चाहिए जिसका उपयोग आप गुटेनबर्ग के लिए प्लगइन्स बनाने के लिए कर सकते हैं:

/ **
* आंतरिक ब्लॉक पुस्तकालयों
* /
const {__} = wp.i18n;

const {registerBlockType} = wp.blocks;

/ **
* रजिस्टर ब्लॉक
* /
निर्यात डिफ़ॉल्ट रजिस्टरब्लॉक टाइप (‘गुटेनबर्ग-बॉयलरप्लेट / ब्लॉक’, {
// ब्लॉक शीर्षक
शीर्षक: __ (‘गुटेनबर्ग बॉयलरप्लेट’),
// ब्लॉक विवरण
विवरण: __ (‘एक उदाहरण ब्लॉक।’),
// ब्लॉक श्रेणी
श्रेणी: ‘आम’,
// ब्लॉक आइकन
आइकन: ‘व्यवस्थापक-साइट’,
// ब्लॉक कीवर्ड
कीवर्ड: [
__ (‘बॉयलरप्लेट’),
__( ‘नमस्ते दुनिया’ ),
__( ‘उदाहरण’ ),
],
विशेषताएं: {
},
// संपादित इंटरफ़ेस को परिभाषित करना
संपादित करें: सहारा => {
वापसी (

{__ (‘हैलो बैकेंड’)}

);
},
// फ्रंट-एंड इंटरफेस को परिभाषित करना
बचाओ: सहारा => {
वापसी (

{__ (‘हैलो फ्रंटेंड’)}

);
},
});

आप वास्तविक समय में हमारे कोड का संकलन शुरू करने के लिए npm रन देव चला सकते हैं.

सबसे पहले, हम उन सभी घटकों और पुस्तकालयों को आयात करेंगे जिन्हें हमें शीर्ष पर ब्लॉक के लिए आवश्यक है:

/ **
* ब्लॉक निर्भरता
* /

‘classnames’ से आयात वर्ग के नाम;

/ **
* आंतरिक ब्लॉक पुस्तकालयों
* /
const {__} = wp.i18n;

const {registerBlockType} = wp.blocks;

कास्ट {
अमीर पाठ,
InspectorControls,
BlockControls,
} = wp.editor;

कास्ट {
PanelBody,
TextareaControl,
TextControl,
Dashicon,
टूलबार,
बटन,
टूलटिप,
} = wp.compords;

पहला आयात classnames जिसे हमने अपने कोड में कई वर्गों का उपयोग करने के लिए npm का उपयोग करके स्थापित किया है, क्योंकि JSX तत्वों में कई वर्गों की अनुमति नहीं देता है.

हम उन अन्य घटकों के बारे में जानेंगे जिन्हें हमने आयात किया है क्योंकि हम उनका उपयोग करते हैं.

विशेषताएँ परिभाषित करें

अब हम अपने शोर्ट के रूप में, गुटेनबर्ग ब्लॉक के लिए चार विशेषताओं को परिभाषित करेंगे:

विशेषताएं: {
ट्वीट: {
प्रकार: ‘स्ट्रिंग’,
},
ट्वीट्स: {
प्रकार: ‘स्ट्रिंग’,
},
बटन: {
प्रकार: ‘स्ट्रिंग’,
डिफ़ॉल्ट: __ (‘ट्वीट’),
},
विषय: {
प्रकार: ‘बूलियन’,
डिफ़ॉल्ट: गलत,
},
},

जैसा कि आप देख सकते हैं, सभी विशेषताएं हमारे शोर्ट के समान हैं। सभी विशेषताओं में एक प्रकार की कुंजी होती है, जो गुटेनबर्ग को अपना डेटा प्रकार बताती है। आप स्ट्रिंग, संख्या, बूलियन का उपयोग कर सकते हैं & ऑब्जेक्ट को स्वीकृत प्रकार के रूप में.

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

इंटरफ़ेस संपादित करें

अब हम अपने ब्लॉक के एडिट इंटरफेस का निर्माण करेंगे, जो डिस्प्ले होगा – यूजर्स इसे Gutenberg में ब्लॉक को एडिट करते हुए देखेंगे.

एक मूल विचार प्राप्त करने के लिए, हम पहले अपने ब्लॉक को हार्ड-कोड कर सकते हैं और अपने कोड में निम्नलिखित क्षेत्र को बदलकर इसका निर्माण कर सकते हैं:

// संपादित इंटरफ़ेस को परिभाषित करना
संपादित करें: सहारा => {
वापसी (

{__ (‘हैलो बैकेंड’)}

);
},

निम्नलिखित कोड के साथ:

// संपादित इंटरफ़ेस को परिभाषित करना
संपादित करें: सहारा => {
वापसी [

कद्दू और पेंगुइन

कलरव

];
},

इससे आपको हमारे अंतिम परिणाम का अंदाजा होना चाहिए। यह कुछ इस तरह दिखेगा:

गुटेनबर्ग के लिए प्लगइन्स

ब्लॉक का पहला तत्व ट्वीट टेक्स्ट क्षेत्र है। हम इसे गुटेनबर्ग के हेडिंग ब्लॉक के समान एक संपादन योग्य टेक्स्ट फ़ील्ड से बदल देंगे.

हम इस्तेमाल करेंगे अमीर पाठ घटक जो हमने पहले अपने हार्ड-कोडित पाठ को बदलने के लिए आयात किया था.

हमारे RichText घटक में पाँच तर्क हैं। प्रारूप एक स्ट्रिंग है, जैसा कि हम फ्रंट-एंड में तत्वों को प्रदर्शित करने के लिए अपने शोर्टकोड का उपयोग करने जा रहे हैं। यदि हम अपनी विशेषता में चयनकर्ता का उपयोग करना चाहते हैं, तो प्रारूप एक सरणी होता.

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

प्लेसहोल्डर प्लेसहोल्डर टेक्स्ट होता है जब फील्ड में कोई टेक्स्ट नहीं होता है, और जब कोई बदलाव होता है, तो onChange ऑनक्रॉफ्ट फ़ंक्शन को चालू करेगा।.

अंत में, मूल्य हमारे क्षेत्र का मूल्य होगा, जिसे ट्वीट विशेषता से लिया जाएगा जिसे हमने पहले परिभाषित किया था.

एक बार जब हमने अपने रिचटेक्स्ट क्षेत्र को परिभाषित कर लिया है, तो हमें onChangeTweet फ़ंक्शन का निर्माण करने की आवश्यकता है, जो हमारे टेक्स्ट फ़ील्ड में मूल्य परिवर्तन होने पर ट्रिगर होगा.

// संपादित इंटरफ़ेस को परिभाषित करना
संपादित करें: सहारा => {
const onChangeTweet = value => {
props.setAttributes ({कलरव: मूल्य});
};
वापसी [
…बाकी कोड

हम रिच-टेक्स्ट फील्ड का ऑन-ऑफ-ट्राउट फ़ंक्शन का मान पास करते हैं, जो उपयोग करता है props.setAttributes ट्वीट विशेषता के मूल्य को अद्यतन करने के लिए कार्य करता है.

जब आप अपने ब्लॉक का उपयोग करेंगे तो आपको गुटेनबर्ग की शक्ति दिखाई देगी.

गुटेनबर्ग में रिचफिल्ड

यह बहुत बढ़िया नहीं है?

ब्लॉक इंस्पेक्टर

जब गुटेनबर्ग के लिए प्लगइन्स का निर्माण करते हैं, तो आपको अपने प्लगइन्स के लिए विकल्प पैनल बनाने के लिए हर बार पहिया को सुदृढ़ करने की आवश्यकता नहीं होती है। गुटेनबर्ग हमें ब्लॉक अनुकूलन की अनुमति देने के लिए एक सरलीकृत तरीका प्रदान करता है और यह सुनिश्चित करता है कि प्रत्येक उपयोगकर्ता को अंतर्निहित यूआई पैटर्न के साथ एक सुसंगत अनुभव हो.

रिचटेक्स्ट घटक के समान, इंस्पेक्टरकंट्रोल घटक ब्लॉक को चयनित करने पर एक साइडबार जोड़ता है। कुछ इस तरह:

गुटेनबर्ग इंस्पेक्टर नियंत्रण

हम अपने निरीक्षक क्षेत्र में एक textarea और पाठ इनपुट क्षेत्र को जोड़ने के लिए TextareaControl और TextControl का उपयोग भी करेंगे.

हम आपके रिटर्न स्टेटमेंट में निम्नलिखित कोड जोड़ेंगे:

!! props.isSelected && (

),

props.isSelected चेक यह सुनिश्चित करने के लिए कि निरीक्षक केवल तब प्रकट होता है जब ब्लॉक का चयन किया जाता है.

TextareaControl और TextControl घटकों, इसी तरह RichText के लिए, एक मूल्य और onChange विधि है.

हमें नए परिवर्तनों को समायोजित करने के लिए अपने ब्लॉक डिस्प्ले के कोड को भी बदलना होगा। हमारे मामले में, हमें केवल अपने ब्लॉक में बटन पाठ जोड़ना होगा क्योंकि ट्वीट पाठ लिंक में जोड़ा जाएगा, इसलिए हमें इसे अपने बैकएंड में दिखाने की आवश्यकता नहीं है.

आप निम्न के साथ हमारे प्रारंभिक कोड में हाइपरलिंक को बदल सकते हैं:


{props.attributes.button}

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

गुटेनबर्ग इंस्पेक्टर कंट्रोल को ट्वीट करने के लिए क्लिक करें

ब्लॉक इंस्पेक्टर आपके ब्लॉक के लिए एक शक्तिशाली उपकरण हो सकता है। यदि आपके प्लगइन में उन्नत विकल्प हैं जो संपादक क्षेत्र के लिए बहुत जटिल हैं, तो आप उन्हें निरीक्षक क्षेत्र में रख सकते हैं.

जावास्क्रिप्ट खंड को अगले भाग में समाप्त करने के लिए हम अपने ब्लॉक में एक अंतिम विकल्प जोड़ेंगे.

टूलबार को ब्लॉक करें

ब्लॉक टूलबार एक अन्य पूर्व-निर्मित यूआई घटक है जिसका उपयोग हम अपने ब्लॉक में अधिक विकल्प जोड़ने के लिए कर सकते हैं। जब आप इसे चुनते हैं तो यह आपके ब्लॉक के ऊपर दिखाई देगा। उदाहरण:

गुटेनबर्ग ब्लॉक टूलबार

आदर्श रूप में, ब्लॉक टूलबार में आपके ब्लॉक के प्राथमिक नियंत्रण शामिल होने चाहिए, जिसमें इंस्पेक्टर माध्यमिक नियंत्रणों की मेजबानी करेगा। हालाँकि, यह बहस का विषय है और आपके ब्लॉक पर निर्भर करता है.

हम अपने वैकल्पिक शैली नियंत्रण की मेजबानी के लिए ब्लॉक टूलबार क्षेत्र का उपयोग करेंगे.

ब्लॉक इंस्पेक्टर के समान, हमें अपने ब्लॉक में टूलबार को जोड़ने के लिए अपने रिटर्न स्टेटमेंट में निम्नलिखित कोड जोड़ना होगा:

!! props.isSelected && (

),

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

हम अपने नियंत्रण के लिए टूलटिप और बटन घटकों का भी उपयोग करते हैं। टूलटिप घटक को बटन घटक के चारों ओर लपेटा जाता है ताकि यह सुनिश्चित किया जा सके कि जब आप और अधिक देने के लिए नियंत्रण पर होवर करें.

बटन घटक क्लासनामेस मॉड्यूल का उपयोग कर रहा है जिसे हमने पहले लेख में आयात किया था। हमने अपने नियंत्रण में तीन कक्षाएं देने के लिए क्लासनेम फ़ंक्शन का उपयोग किया। तीसरा वर्ग, सक्रिय है, केवल तब प्रकट होता है जब हमारा विषय विशेषता मान सत्य होता है.

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

बदलावों के साथ काम करने के लिए हमें अपना ब्लॉक कोड भी बदलना होगा। हमें निम्नलिखित पंक्ति को बदलने की आवश्यकता है:

साथ में:

हम जाँच कर रहे हैं कि क्या विषय विशेषता सही या गलत है, और उसी के अनुसार हमारे ब्लॉक को एक क्लास असाइन करना.

अब आपका ब्लॉक कुछ इस तरह दिखना चाहिए:

टूलबार को ट्वीट करने के लिए क्लिक करें

हमने अपने गुटेनबर्ग ब्लॉक के जावास्क्रिप्ट-साइड भाग को समाप्त कर दिया है। आप फ़ाइल का संपूर्ण स्रोत कोड पा सकते हैं यहाँ.

अब हम सर्वर-साइड आउटपुट को हैंडल करके अपने ब्लॉक को समाप्त करेंगे.

सर्वर-साइड प्रतिपादन

गुटेनबर्ग आपको फ्रंट-एंड पर अपने ब्लॉक दिखाने के लिए सर्वर-साइड रेंडरिंग का उपयोग करने की अनुमति देता है। वह सर्वर-साइड रेंडरिंग हमारे लिए शॉर्टकोड के लिए ब्लॉक बनाना संभव बनाता है.

सबसे पहले, हम अपने कोड को निम्न कोड के साथ बदलकर वापस करने के लिए अपनी बचत विधि बनाएंगे:

// फ्रंट-एंड इंटरफेस को परिभाषित करना
सहेजें() {
// PHP में प्रतिपादन
वापसी;
},

हम अपने ब्लॉक प्रकार को PHP में पंजीकृत करने के लिए register_block_type PHP फ़ंक्शन का उपयोग करेंगे:

अगर (function_exists (‘register_block_type’)) {
// हुक सर्वर साइड रेंडरिंग कॉलबैक में
register_block_type (
‘हैलो-गुटेनबर्ग / क्लिक-टू-ट्वीट’, [
‘रेंडर_कॉलबैक’ => ‘Hello_gutenberg_block_callback’,
‘गुण’ => सरणी (
‘ट्वीट’ => सरणी (
‘प्रकार’ => ‘स्ट्रिंग’,
),
‘tweetsent’ => सरणी (
‘प्रकार’ => ‘स्ट्रिंग’,
),
‘बटन’ => सरणी (
‘प्रकार’ => ‘स्ट्रिंग’,
‘डिफ़ॉल्ट’ => ‘ट्वीट’,
),
‘थीम’ => सरणी (
‘प्रकार’ => ‘बूलियन’,
‘डिफ़ॉल्ट’ => असत्य,
),
),
]
);
}

हमारे register_block_type फ़ंक्शन। हम पहले अपने ब्लॉक का नाम पास करते हैं, साथ ही तर्कों की एक सरणी के साथ.

पहला तर्क रेंडर_कॉलबैक फ़ंक्शन है, जो सर्वर-साइड रेंडरिंग के लिए हमारे hello_gutenberg_block_callback फ़ंक्शन को कॉल करता है.

हमारे कॉलबैक को रेंडर करने के बाद, हम एक एरे के रूप में विशेषताओं को पास करते हैं, जो ब्लॉक.जेएस फाइल के समान है, जिसे हम अपने रेंडरबैक कॉलबैक फ़ंक्शन में उपयोग करते हैं।.

हमारे रेंडर कॉलबैक फ़ंक्शन इस तरह दिखता है:

समारोह hello_gutenberg_block_callback ($ attr) {
अर्क ($ attr);
अगर (isset ($ कलरव)) {
$ थीम = ($ थीम === सच? ‘क्लिक-टू-ट्वीट-एएलटी’: ‘क्लिक-टू-ट्वीट’);
$ शोर्ट_स्ट्रिंग = ‘[क्लिकटॉट ट्विट ="% s" tweetsent ="% s" बटन ="% s" विषय ="% s"] ‘;
वापसी स्प्रिंटफ ($ शोर्ट_स्ट्रीमिंग, $ ट्वीट, $ ट्वीट, $ बटन, $ थीम);
}
}

हम सभी विशेषताओं को निकालते हैं और फिर इसे हमारे शोर्ट में वापस करते हैं। यह सब गुटेनबर्ग के लिए अपने शोर्ट प्लगइन्स को अनुकूलित करने के लिए लेता है.

आप इस लेख में उपयोग किए गए सभी कोड इस में पा सकते हैं हैलो-गुटेनबर्ग कोष.

अगले भाग में, हम साइडबार एपीआई सहित गुटेनबर्ग के लिए मौजूदा प्लगइन्स को अनुकूलित करने के अन्य तरीकों पर एक नज़र डालेंगे.

यदि आपके पास गुटेनबर्ग के लिए अपने प्लगइन को अनुकूलित करने का कोई प्रश्न है, तो कृपया उन्हें टिप्पणियों में पूछें!

अपनी वर्डप्रेस साइट को गति देने पर हमारे क्रैश कोर्स में शामिल होना न भूलें। कुछ सरल सुधारों के साथ, आप अपने लोडिंग समय को 50-80% तक कम कर सकते हैं:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map