कैसे अपने प्लगिन Gutenberg के साथ संगत बनाने के लिए: भाग 2 (साइडबार एपीआई)

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


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

बस यह सुनिश्चित करने के लिए कि हम एक ही पृष्ठ पर हैं, एक त्वरित स्पष्टीकरण:

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

Gutenberg - साइडबार एपीआई के साथ अपने प्लगइन संगत बनाओ

उदाहरण के लिए, Yutast SEO द्वारा प्रदर्शित के रूप में गुटेनबर्ग साइडबार एपीआई उपयोग में है:

गुटेनबर्ग साइडबार एपीआई

आप साइडबार एपीआई का उपयोग कहां कर सकते हैं?

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

यहां हमने Gutenberg संपादक में WP उत्पाद समीक्षा को कैसे एकीकृत किया है:WP उत्पाद समीक्षा गुटेनबर्ग

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

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

इस पोस्ट में, मैं आपको कुछ समान लागू करने और साइडबार एपीआई के माध्यम से अपने प्लगइन गुटेनबर्ग-संगत बनाने की प्रक्रिया से गुजरूंगा.

मेटा बॉक्स डिफ़ॉल्ट रूप से गुटेनबर्ग के लिए तैयार हैं, लेकिन काफी नहीं

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

यह क्लासिक संपादक में निम्नलिखित की तरह लग सकता है:

क्लासिक एडिटर में मेटा बॉक्स

आप ऐसे मेटा बॉक्स बनाने के लिए निम्न कोड का उपयोग कर सकते हैं – यह भी उपलब्ध है हैलो गुटेनबर्ग भंडार:

/ **
* रजिस्टर हैलो गुटेनबर्ट मेटा बॉक्स
* /
समारोह hello_gutenberg_add_meta_box () {
add_meta_box (‘hello_gutenberg_meta_box’, __ (‘Hello Gutenberg Meta Box’, ‘hello-gutenberg’), ‘hello_gutenberg_metabox_allback’, ‘post’);
}
add_action (‘add_meta_boxes’, ‘hello_gutenberg_add_meta_box’);

/ **
* हैलो गुटेनबर्ग मेटाबॉक्स कॉलबैक
* /
समारोह hello_gutenberg_metabox_callback ($ पोस्ट) {
$ मूल्य = get_post_meta ($ पोस्ट)->ID, ‘_hello_gutenberg_field’, सच);
?>
<?php _e (‘क्या नाम है तुम्हारा?’, ‘हैलो-गुटेनबर्ग’) ?>

<?php
}

/ **
* हैलो गुटेनबर्ग मेटाबॉक्स को बचाओ
* /
समारोह hello_gutenberg_save_postdata ($ post_id) {
अगर (array_key_exists (‘hello_gutenberg_field’, $ _POST)) {
update_post_meta ($ post_id, ‘_hello_gutenberg_field’, $ _POST [‘hello_gutenberg_field’]];
}
}
add_action (‘save_post’, ‘hello_gutenberg_save_postdata’);

तो यहाँ पूछने के लिए प्रश्न है:

क्या हमें पहले स्थान पर इस गुटेनबर्ग-संगत बनाने की आवश्यकता है?

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

हालाँकि, जब हम गुटेनबर्ग संगतता के बारे में बात करते हैं, तो हम केवल गुटेनबर्ग वातावरण में काम करने वाले प्लगइन के बारे में बात नहीं कर रहे हैं, लेकिन प्लगइन * गुटेनबर्ग * की तरह काम कर रहे हैं.

"क्यों?" – आप पूछ रहे हैं काफी आसानी से, जो उपयोगकर्ता Gutenberg के बाद वर्डप्रेस का उपयोग करना शुरू कर देंगे, डिफ़ॉल्ट संपादक को काउंटर-सहज ज्ञान युक्त होने के पुराने तरीके मिलेंगे। इसके अलावा, वे संपादक में सब कुछ के लिए एक और गुटेनबर्ग जैसी शैली की उम्मीद करेंगे.

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

अंत में, कुछ कोड के साथ हमारे हाथ गंदे हो जाते हैं!

साइडबार एपीआई के साथ शुरुआत करना

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

गुटेनबर्ग के लिए आपका मेटा बॉक्स तैयार हो रहा है

शुरू करने से पहले, हमें पहले गुटेनबर्ग को बताना होगा कि हमने गुटेनबर्ग में अपने मेटा बॉक्स का उपयोग नहीं किया है। आप इसे add_meta_box फ़ंक्शन में __back_compat_meta_box तर्क पास करके कर सकते हैं, जैसे:

/ **
* रजिस्टर हैलो गुटेनबर्ग मेटाबॉक्स
* /
समारोह hello_gutenberg_add_meta_box () {
add_meta_box (‘hello_gutenberg_meta_box’, __ (‘Hello Gutenberg Meta Box’, ‘hello-gutenberg’), ‘hello_gutenberg_metabox_allback’, ‘post’, array ()
‘__back_compat_meta_box’ => असत्य,
));
}
add_action (‘add_meta_boxes’, ‘hello_gutenberg_add_meta_box’);

गुटेनबर्ग हैंडबुक में अधिक विवरण है कि आप PHP मेटा बॉक्स को गुटेनबर्ग (टेक्सास) में पोर्ट कैसे कर सकते हैंयहाँ).

इससे यह सुनिश्चित हो जाएगा कि हमारे पुराने PHP मेटा बॉक्स अब Gutenberg में दिखाई नहीं देंगे। अब हमें अपने मेटा फ़ील्ड को भी Gestenberg के लिए वर्डप्रेस रीस्ट एपीआई में जोड़कर तैयार करने की आवश्यकता है। REST API के साथ मेटा फ़ील्ड को पंजीकृत करने के लिए आप निम्न कोड जोड़ सकते हैं:

/ **
* रजिस्टर एपीआई एपीआई के लिए हैलो Gutenberg मेटा फील्ड
* /
समारोह hello_gutenberg_register_meta () {
register_meta (
‘पोस्ट’, ‘_हेल्लो_गुटेनबर्ग_फील्ड’, सरणी (
‘प्रकार’ => ‘स्ट्रिंग’,
‘एकल’ => सच,
‘Show_in_rest’ => सच,
)
);
}
add_action (‘init’, ‘hello_gutenberg_register_meta’);

यह _hello_gutenberg_field को जोड़ देगा मेटा REST API में ऑब्जेक्ट.

यह फ़ंक्शन केवल REST API में हमारे मान को प्रदर्शित करने का कार्य करेगा। अब हमें REST API का उपयोग करके अपने मेटा फ़ील्ड को अपडेट करने के लिए एक विधि भी जोड़ने की आवश्यकता है.

निम्नलिखित कोड वर्डप्रेस रीस्ट एपीआई के लिए हमारे कस्टम मार्ग को जोड़ देगा, जो कि होगा / हैलो-गुटेनबर्ग / v1 / अद्यतन-मेटा /:

/ **
* आराम एपीआई के लिए हैलो गुटेनबर्ग Metabox रजिस्टर
* /
समारोह hello_gutenberg_api_posts_meta_field () {
register_rest_route (
‘हैलो-गुटेनबर्ग / v1’, ‘/ अपडेट-मेटा’, सरणी (
‘विधियाँ’ => ‘पद’,
‘कॉलबैक’ => ‘Hello_gutenberg_update_callback’,
‘आर्ग्स ’=> सरणी (
‘इद’ => सरणी (
‘sanitize_callback’ => ‘Absint’,
),
),
)
);
}
add_action (‘rest_api_init’, ‘hello_gutenberg_api_posts_meta_field’);

/ **
* गुटेनबर्ग के लिए हैलो गुटेनबर्ग रीस्ट एपीआई कॉलबैक
* /
समारोह hello_gutenberg_update_callback ($ डेटा) {
वापसी update_post_meta ($ डेटा [‘आईडी’], $ डेटा [] कुंजी ’], $ डेटा [‘मूल्य]];
}

इस REST API रूट का उपयोग हमारे मेटा फ़ील्ड को Gutenberg साइडबार से संशोधित करने के लिए किया जाएगा। आप वर्डप्रेस रीस्ट एपीआई और कैसे करें के बारे में अधिक जान सकते हैं यहां से कस्टम रूट रजिस्टर करें.

इसी तरह, यदि आप जानना चाहते हैं कि WordPress REST API क्या है और इसकी शुरुआत कैसे की जाती है, तो आप हमारे ब्लॉग पोस्ट को पढ़ सकते हैं: WordPress REST API: यह क्या है और इसका उपयोग कैसे करना है.

गुटेनबर्ग के लिए एक साइडबार ब्लॉक जोड़ना

चलो साइडबार कोड से शुरू करते हैं गुटेनबर्ग बॉयलरप्लेट:

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

const {टुकड़े करना} = wp.element;

कास्ट {
PluginSidebar,
PluginSidebarMoreMenuItem,
} = wp.editPost;

const {registerPlugin} = wp.plugins;

const घटक = () => (

{__ (‘गुटेनबर्ग बॉयलरप्लेट’)}

{ __( ‘नमस्ते दुनिया!’ ) }

);

रजिस्टरप्लुजिन (‘गुटेनबर्ग-बॉयलरप्लेट’, {
आइकन: ‘व्यवस्थापक-साइट’,
रेंडर: घटक,
};

यह गुटेनबर्ग संपादक के लिए एक बहुत ही सरल साइडबार सम्मिलित करेगा। हम इसे एक शुरुआती बिंदु के रूप में लेंगे और इस पर अपनी परियोजना का निर्माण करेंगे.

उदाहरण कोड हमारे गुटेनबर्ग बॉयलरप्लेट रिपॉजिटरी से है, और परिणामस्वरूप, हमें सभी घटनाओं को बदलने की आवश्यकता है "गुटेनबर्ग बॉयलरप्लेट" साथ में "हैलो गुटेनबर्ग".

उपयोग किए गए घटक

जबकि हमारा साइडबार पहले से ही कई घटकों का आयात करता है, हमें और अधिक की आवश्यकता होगी। आप निम्नलिखित के साथ कोड के शीर्ष भाग को बदल सकते हैं:

/ **
* आंतरिक ब्लॉक पुस्तकालयों
* /

const {__} = wp.i18n;

कास्ट {
PluginSidebar,
PluginSidebarMoreMenuItem
} = wp.editPost;

कास्ट {
PanelBody,
TextControl
} = wp.compords;

कास्ट {
अंग,
टुकड़ा
} = wp.element;

const {withSelect} = wp.data;

const {registerPlugin} = wp.plugins;

हमारे द्वारा आयात किए गए सभी घटकों के बारे में जल्दी से जानें.

  1. जैसा कि पिछले लेख में चर्चा की गई है, __ घटक का उपयोग हमारे पाठ को अनुवाद करने योग्य बनाने के लिए किया जाता है.
  2. PluginSidebar घटक का उपयोग हमारे साइडबार को गुटेनबर्ग से जोड़ने के लिए किया जाता है.
  3. PluginSidebarMoreMenuItem इसका उपयोग गुटेनबर्ग मेनू में एक बटन जोड़ने के लिए किया जाता है, जो साइडबार की दृश्यता को बढ़ाता है.
  4. PanelBody हमारे साइडबार में एक पैनल को जोड़ने के लिए घटक का उपयोग किया जाता है.
  5. TextControl हमारे इनपुट क्षेत्र के लिए उपयोग किया जाता है.
  6. उसके बाद, हमने आयात किया अंग तथा टुकड़ा अवयव। वे दोनों रिएक्ट घटक हैं जो हम अपने साइडबार में उपयोग करते हैं.
    • डीओआर में अतिरिक्त नोड्स जोड़े बिना बच्चों की सूची को समूहित करने के लिए फ्रैगमेंट घटक का उपयोग किया जाता है। हमें अपने कोड में फ़्रैगमेंट घटक का उपयोग करने की आवश्यकता है क्योंकि JSX हमें एक से अधिक अभिभावक नोड रखने की अनुमति नहीं देता है.
  7. withSelect एक उच्च-क्रम घटक है। यह जानने के लिए कि उच्च-क्रम के घटक क्या हैं, मैं सुझाव देता हूं कि आप पढ़ें यह प्रलेखन.
  8. और अंत में, हम आयात करते हैं registerPlugin, जो registerBlockType के समान है जिसका उपयोग हमने पिछले लेख में किया था। ब्लॉक दर्ज करने के बजाय, रजिस्टरप्लगिन आपके प्लगइन को पंजीकृत करता है.

नियंत्रण जोड़ना

अब तक हमारा साइडबार सिर्फ एक कंपोनेंट फ़ंक्शन है, लेकिन चूंकि हम रिएक्ट के जीवनचक्र के तरीकों का उपयोग कर रहे हैं, इसलिए हम इसे रिएक्ट घटक में बदल देंगे, जैसे:

कक्षा Hello_Gutenberg फैली हुई है घटक {
प्रस्तुत करना() {
वापसी (

{__ (‘हैलो गुटेनबर्ग’)}

{ __( ‘नमस्ते दुनिया!’ ) }

)
}
}

रजिस्टरप्लुजिन (‘हैलो-गुटेनबर्ग’, {
आइकन: ‘व्यवस्थापक-साइट’,
प्रस्तुत करें: Hello_Gutenberg,
};

इससे आपके साइडबार को सादे पाठ के साथ काम करना चाहिए.

अब हमारे क्षेत्र को साइडबार में जोड़ें। यह हमारे घटक को इस तरह बनाना चाहिए:

कक्षा Hello_Gutenberg फैली हुई है घटक {
प्रस्तुत करना() {
वापसी (

{__ (‘हैलो गुटेनबर्ग’)}

)
}
}

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

हम $ {this.props.postId} चर के साथ अपनी वर्तमान पोस्ट की आईडी पास कर रहे हैं। हम बाद में इस बिंदु पर वापस आएंगे.

डेटा प्राप्त होने के बाद, हम अपने REST API से मान के साथ अपने राज्य को अपडेट करते हैं.

अब, पोस्टआईड चर पर वापस जाने दें। वर्तमान में हम अपने वर्तमान पोस्ट की आईडी नहीं जानते हैं, इसलिए इसके लिए हम उच्च-क्रम वाले घटक का उपयोग करते हैं, जैसे:

const HOC = withSelect ((select) => {
const {getCurrentPostId} = select (‘कोर / एडिटर’);
वापसी {
पोस्टआईड: getCurrentPostId (),
};
}) (हैलो_गुटेनबर्ग);

रजिस्टरप्लुजिन (‘हैलो-गुटेनबर्ग’, {
आइकन: ‘व्यवस्थापक-साइट’,
रेंडर: HOC,
};

यह हमारे वर्तमान पोस्ट की आईडी को पोस्टआईड चर के रूप में पास करेगा। अब आप एक पुराना पोस्ट चला सकते हैं, और हमारे गुटेनबर्ग साइडबार आपके मेटा फ़ील्ड का मान प्रदर्शित करेंगे.

मेटा वैल्यू अपडेट करें

अब हमें अपने साइडबार को मेटा वैल्यू को भी अपडेट करने की अनुमति देने की आवश्यकता है। विवरण प्राप्त करने के समान, हम इसका उपयोग करेंगे wp.apiRequest उपयोगिता.

जब भी हमारे राज्य का मूल्य बदलता है, हम इसे REST API के साथ अपडेट करते रहेंगे। इसके लिए, हमें सबसे पहले अपने TextControl पर एक onChange घटना को इस तरह जोड़ना होगा:

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