Gutenberg All आपको WordPress के Latest Editor के बारे में जानना होगा
गुटेनबर्ग वर्डप्रेस के लिए एक नया संपादक है जो पूरी तरह से होगा वर्तमान TinyMCE द्वारा संचालित संपादक को बदलें. यह एक महत्वाकांक्षी परियोजना है जो कई मायनों में वर्डप्रेस को यकीनन बदल देगा और यह नियमित रूप से अंतिम उपयोगकर्ताओं और डेवलपर्स दोनों को प्रभावित करेगा, विशेष रूप से, वे जो वर्डप्रेस पर काम करने के लिए संपादक स्क्रीन पर निर्भर हैं। यहाँ है कि यह कैसा दिखता है.
गुटेनबर्ग ने वर्डप्रेस नामक एक नए प्रतिमान का भी परिचय दिया “खंड”.
“खंड” वर्णन करने के लिए प्रयुक्त अमूर्त शब्द है मार्कअप की इकाइयाँ जो वेब पेज की सामग्री या लेआउट से बना होता है। विचार वर्डप्रेस में उन अवधारणाओं को जोड़ता है जो आज हम प्राप्त करते हैं लघुकोड, कस्टम HTML, और एक ही संगत एपीआई में खोज एम्बेड करें और उपयोगकर्ता अनुभव.
परियोजना की स्थापना
इस तथ्य को जानकर कि गुटेनबर्ग को रिएक्ट के शीर्ष पर बनाया गया है, कुछ डेवलपर्स चिंतित हैं कि गुटेनबर्ग के विकास के लिए प्रवेश स्तर के डेवलपर्स के लिए बाधा बहुत अधिक है.
यदि आपने अभी इसके साथ शुरुआत की है, तो React.js सेट करना काफी समय लेने वाला और भ्रमित करने वाला हो सकता है। आपको अपने कोड के आधार पर कम से कम, JSX ट्रांसफ़ॉर्मर, बैबेल की आवश्यकता होगी, आपको कुछ बैबल प्लगइन्स, और वेबपैक, रोलअप या पार्सल जैसे बुंदेलर की आवश्यकता हो सकती है।.
भाग्यवश, WordPress समुदाय के कुछ लोगों ने कदम बढ़ाया और सभी के पालन के लिए गुटेनबर्ग को विकसित करना आसान बनाने की कोशिश कर रहे हैं। आज, हमारे पास एक उपकरण है जो गुटेनबर्ग बॉयलरप्लेट उत्पन्न करेगा हम तुरंत कोड लिखना शुरू कर सकते हैं उपकरण और विन्यास के साथ befuddling के बजाय.
गुटन ब्लॉक बनाएं
create-guten-ब्लॉक
अहमद आवा द्वारा एक पहल परियोजना है। यह है शून्य-विन्यास टूल किट (# 0CJS
) जो आपको प्रतिक्रिया, वेबपैक, ESNext, बैबेल, ESLint, और सैस सहित कुछ आधुनिक स्टैक प्रीसेट के साथ गुटेनबर्ग ब्लॉक को विकसित करने की अनुमति देगा। Create Guten Block से आरंभ करने के लिए अनुदेश का पालन करें.
ES5 (ECMAScript 5) का उपयोग करना
एक सरल बनाने के लिए इन सभी उपकरणों का उपयोग करना “नमस्ते दुनिया” ब्लॉक बस बहुत ज्यादा लग सकता है। यदि आप अपने स्टैक को दुबला रखना पसंद करते हैं, तो आप वास्तव में एक सादे अच्छे ol 'ECMAScript 5 का उपयोग करके एक गुटेनबर्ग ब्लॉक विकसित कर सकते हैं, जिसके बारे में आप पहले से ही परिचित हो सकते हैं। यदि आपके पास है WP-CLI 1.5.0 आपके कंप्यूटर पर स्थापित है, आप बस चला सकते हैं ...
wp पाड़ ब्लॉक[--Title = ] [- दादिकोन = ] [- श्रेणी = ] [--थीम] [--plugin = ] [- प्रवर्तन]
… सेवा मेरे अपने प्लगइन या विषय के लिए गुटेनबर्ग ब्लॉक बॉयलरप्लेट उत्पन्न करें. यह दृष्टिकोण विशेष रूप से मौजूदा प्लगइन्स और थीम के लिए अधिक समझदार है, जिसे आपने गुटेनबर्ग युग से पहले विकसित किया है.
गुटेनबर्ग ब्लॉक को समायोजित करने के लिए एक नया प्लगइन बनाने के बजाय, आप अपने प्लगइन्स या थीम को ब्लॉक एकीकृत करना चाह सकते हैं। और इस ट्यूटोरियल को सभी के लिए अनुसरण करना आसान बनाता है, हम WP-CLI के साथ ECMAScript 5 का उपयोग करेंगे.
नया ब्लॉक पंजीकृत करना
गुटेनबर्ग को वर्तमान में एक प्लगइन के रूप में विकसित किया गया है और जब भी टीम को लगता है कि यह वर्डप्रेस 5.0 में विलय कर दिया जाएगा। तो, कुछ समय के लिए, आपको इसे से इंस्टॉल करना होगा प्लग इन पेज WP-व्यवस्थापक
. एक बार जब आप इसे स्थापित और सक्रिय कर लेते हैं, तो टर्मिनल या कमांड प्रॉम्प्ट में निम्न कमांड चलाएं यदि आप विंडोज मशीन पर हैं.
wp पाड़ ब्लॉक श्रृंखला - title = "एचटीएमएल 5 सीरीज" --थीम
यह कमांड वर्तमान में सक्रिय थीम के लिए एक ब्लॉक उत्पन्न करेगा। हमारे ब्लॉक में निम्नलिखित फाइलें होंगी:
. ए¢Â ??  हैं ?? एक¢Â ??  हैं ?? एक¢Â ??  ?? श्रृंखला â ?? Â'Ã' Ã'à â ??  हैं ?? एक¢Â ??  हैं ?? एक¢Â ??  ?? block.js â ?? Â'Ã' Ã'à â ??  हैं ?? एक¢Â ??  हैं ?? एक¢Â ??  ?? Editor.css â ?? Â'Ã' Ã'à â ??  हैं ?? एक¢Â ??  हैं ?? एक¢Â ??  ?? style.css â ??  हैं ?? एक¢Â ??  हैं ?? एक¢Â ??  ?? series.php
हमारे ब्लॉक की मुख्य फाइल को इसमें लोड करते हैं functions.php
हमारे विषय की:
if (function_exists ('register_block_type')) आवश्यकता get_template_directory ()। '/Blocks/series.php';
ध्यान दें कि हम एक सशर्त के साथ फ़ाइल लोडिंग को संलग्न करते हैं। यह सुनिश्चित करते है पिछले वर्डप्रेस संस्करण के साथ संगतता कि हमारा ब्लॉक केवल तब लोड होता है जब गुटेनबर्ग मौजूद होता है. हमारा ब्लॉक अब गुटेनबर्ग इंटरफेस के भीतर उपलब्ध होना चाहिए.
यह तब दिखता है जब हम ब्लॉक को सम्मिलित करते हैं.
गुटेनबर्ग एपीआई
गुटेनबर्ग ने नए ब्लॉक को पंजीकृत करने के लिए एपीआई के दो सेट पेश किए। अगर हम देखें series.php
, हम निम्नलिखित कोड पाएंगे जो हमारे नए ब्लॉक को पंजीकृत करता है। यह भी फ्रंट-एंड और एडिटर पर स्टाइलशीट और जावा स्क्रिप्ट्स को लोड करता है.
register_block_type ('बीसवें सत्र / श्रृंखला', सरणी ('Editor_script' => 'श्रृंखला-ब्लॉक-संपादक', 'Editor_style' => 'श्रृंखला-ब्लॉक-संपादक', 'शैली' => 'श्रृंखला-ब्लॉक'),);
जैसा कि हम ऊपर देख सकते हैं, हमारे ब्लॉक का नाम है twentyseventeen / श्रृंखला
, अन्य प्लगइन्स द्वारा लाए गए अन्य ब्लॉक के साथ टकराव से बचने के लिए ब्लॉक का नाम अद्वितीय और नामांकित होना चाहिए.
और भी, गुटेनबर्ग के साथ बातचीत करने के लिए नए जावास्क्रिप्ट एपीआई का एक सेट प्रदान करता है “खंड” इंटरफेस संपादक में। चूंकि एपीआई काफी प्रचुर मात्रा में है, इसलिए हम कुछ बारीकियों पर ध्यान केंद्रित करेंगे जो मुझे लगता है कि आपको एक सरल अभी तक काम कर रहे गुटबर्ग के बारे में जानना चाहिए।.
wp.blocks.registerBlockType
सबसे पहले, हम देखेंगे wp.blocks.registerBlockType
. इस फ़ंक्शन का उपयोग किया जाता है एक नया रजिस्टर करें “खंड” गुटेनबर्ग संपादक को. इसके लिए दो तर्क चाहिए। पहला तर्क ब्लॉक नाम है जिसे पंजीकृत नाम का पालन करना चाहिए register_block_type
PHP पक्ष में कार्य। दूसरा तर्क ए है ब्लॉक गुणों को परिभाषित करने वाली वस्तु ब्लॉक इंटरफ़ेस को रेंडर करने के लिए शीर्षक, श्रेणी और कुछ फ़ंक्शन जैसे.
var registerBlockType = wp.blocks.registerBlockType; registerBlockType ('बीसवें सत्र / श्रृंखला', शीर्षक: __ ('एचटीएमएल 5 सीरीज'), श्रेणी: 'विगेट्स', कीवर्ड: ['एचटीएमएल'], संपादित करें: फ़ंक्शन (प्रॉप्स) , सहेजें: फ़ंक्शन (प्रॉप्स) ;
wp.element.createElement
यह फ़ंक्शन आपको तत्व को भीतर बनाने की अनुमति देता है “खंड” संपादक के बाद। wp.element.createElement
फ़ंक्शन मूल रूप से प्रतिक्रिया का एक अमूर्त है createElement ()
फ़ंक्शन इस प्रकार यह तर्कों के एक ही सेट को स्वीकार करता है। पहला तर्क तत्व के प्रकार को लेता है उदाहरण के लिए एक पैराग्राफ, ए अवधि
, या ए div
जैसा की नीचे दिखाया गया:
wp.element.createElement ( 'div');
हम कर सकते हैं एक चर में उर्फ समारोह इसलिए यह लिखना कम है। उदाहरण के लिए:
var el = wp.element.createElement; एल ( 'div');
अगर तुम नए ES6 सिंटैक्स का उपयोग करना पसंद करते हैं, आप इसे इस तरह से भी कर सकते हैं:
const createElement: el = wp.element; एल ( 'div');
हम भी कर सकते हैं तत्व गुण जोड़ें जैसे कक्षा
नाम या आईडी
दूसरे पैरामीटर पर निम्नानुसार है:
var el = wp.element.createElement; el ('div', 'class': 'series-html5', 'id': 'Series-html-post-id-001');
div
हमने जो बनाया है वह सामग्री के बिना समझ में नहीं आएगा। हम कर सकते हैं तीसरे पैरामीटर के तर्क पर सामग्री जोड़ें:
var el = wp.element.createElement; el ('p', 'class': 'series-html5', 'id': 'series-html-post-id-001'), 'यह लेख हमारे "HTML5 / CSS3 के ट्यूटोरियल सीरीज़ का हिस्सा है" - समर्पित आपको एक बेहतर डिजाइनर और / या डेवलपर बनाने में मदद करने के लिए (उसी श्रृंखला के और अधिक लेख देखने के लिए यहां क्लिक करें ');
wp.components
wp.components
जैसा कि नाम का अर्थ है, गुटेनबर्ग घटकों का एक संग्रह है। ये घटक तकनीकी रूप से प्रतिक्रियाशील कस्टम घटक हैं जिनमें बटन, पॉपओवर, स्पिनर, टूलटिप और दूसरों का एक समूह शामिल है। हम कर सकते हैं इन घटकों का हमारे अपने ब्लॉक में पुन: उपयोग करें. निम्नलिखित उदाहरण में, हम एक बटन घटक जोड़ते हैं.
var Button = wp.compords.Button; एल (बटन, 'वर्ग': 'डाउनलोड-बटन',, 'डाउनलोड');
गुण
विशेषताएँ हमारे ब्लॉक में डेटा को संग्रहीत करने का तरीका है, यह डेटा सामग्री, रंग, संरेखण, URL, आदि की तरह हो सकता है। संपादित करें ()
फ़ंक्शन, निम्नानुसार है:
edit: function (props) var content = props.attributes.seriesContent; वापसी el ('div', 'class': 'series-html5', 'id': 'Series-html-post-id-001', सामग्री);
गुण को अद्यतन करने के लिए, हम उपयोग करते हैं setAttributes ()
समारोह। आमतौर पर हम कुछ कार्रवाई पर सामग्री को बदलते हैं जैसे कि जब एक बटन पर क्लिक किया जाता है, तो एक इनपुट भरा जाता है, एक विकल्प चुना जाता है, आदि। निम्नलिखित उदाहरण में, हम इसका उपयोग एक जोड़ने के लिए करते हैं। मैदान छोड़ना हमारे ब्लॉक की सामग्री के मामले में कुछ अप्रत्याशित हमारे साथ हुआ seriesContent
गुण.
edit: function (props) if (typeof props.attributes.seriesContent === '' unffined ''! ) var सामग्री = props.attributes.seriesContent; वापसी [el ('div', 'class': 'Series-html5', 'id': 'Series-html-post-id-001', सामग्री),];
ब्लॉक की बचत
बचाना()
फंक्शन इसी तरह काम करता है संपादित करें ()
, सिवाय इसके कि पोस्ट डेटाबेस को बचाने के लिए हमारे ब्लॉक की सामग्री को परिभाषित करता है। ब्लॉक सामग्री को सहेजना काफी सरल है, जैसा कि हम नीचे देख सकते हैं:
सहेजें: फ़ंक्शन (रंगमंच की सामग्री) यदि (?! प्रॉम्प्स !!? props.attributes.seriesContent) वापसी; var सामग्री = props.attributes.seriesContent; वापसी [el ('div', 'class': 'Series-html5', 'id': 'Series-html-post-id-001', सामग्री),];
आगे क्या होगा?
गुटेनबर्ग बेहतर (या संभवतः बदतर) के लिए वर्डप्रेस पारिस्थितिकी तंत्र को बदल देगा। यह डेवलपर्स को सक्षम बनाता है WordPress plugins और themes विकसित करने का एक नया तरीका अपनाएं. गुटेनबर्ग सिर्फ एक शुरुआत है। जल्द ही “खंड” प्रतिमान को वर्डप्रेस के अन्य क्षेत्रों जैसे सेटिंग्स एपीआई और विजेट्स तक विस्तारित किया जाएगा.
जावास्क्रिप्ट को गहराई से जानें; यह गुटेनबर्ग में आने और वर्डप्रेस उद्योग में भविष्य के लिए प्रासंगिक रहने का एकमात्र तरीका है। यदि आप पहले से ही जावास्क्रिप्ट बेसिक्स, क्वार्क्स, फ़ंक्शंस, टूल्स, गुड्स और बैड्स से परिचित हैं, तो मुझे यकीन है कि आप गुटेनबर्ग के साथ गति प्राप्त करेंगे.
जैसा कि उल्लेख किया गया है, गुटेनबर्ग एपीआई की एक बहुतायत को उजागर करता है, आपके ब्लॉक में लगभग कुछ भी करने के लिए पर्याप्त है। आप चुन सकते हैं कि क्या अपने ब्लॉक को एक सादे पुराने जावास्क्रिप्ट, जावास्क्रिप्ट के साथ ES6 सिंटेक्स, रिएक्ट, या यहां तक कि Vue के साथ कोड करें.
विचार और प्रेरणाएँ
मैंने एक बहुत (बहुत) सरल गुटेनबर्ग ब्लॉक बनाया है जिसे आप हमारे गिथूब खाते के भंडार में पा सकते हैं। इसके अलावा, मैंने कई रिपॉजिटरी को भी एक साथ रखा है जहाँ से आप एक अधिक जटिल ब्लॉक के निर्माण पर प्रेरणा पा सकते हैं.
- Gutenblocks - ईएस 5 सिंटैक्स के साथ जावास्क्रिप्ट में मैथ्यू विएट द्वारा ब्लॉक का एक संग्रह
- Jetpack Gutenblocks Project - Jetpack में बंडल किए गए ब्लॉक का एक संग्रह
- Vue.js सहित गुटेनबर्ग कार्यान्वयन के उदाहरणों की एक सूची
आगे का संदर्भ
- गुटेनबर्ग आधिकारिक रिपोजिटरी
- गुटेनबर्ग हैंडबुक