वर्डप्रेस ब्लॉक डेवलपमेंट के साथ शुरुआत करना

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

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

बिंदु में मामला: 2018 में, एक परिचयात्मक श्रृंखला गुटेनबर्ग विकास में आने के बारे में यहाँ CSS-tricks पर प्रकाशित किया गया था। तब से समय बदल गया है, और, जबकि विकास की वह शैली अभी भी काम करती है, यह है सिफारिश नहीं की गई अब और (इसके अलावा, create-guten-block जिस प्रोजेक्ट पर यह आधारित है वह भी अब बनाए नहीं रखा गया है)।

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

वर्डप्रेस ब्लॉक क्या हैं, बिल्कुल?

आइए कुछ भ्रम को दूर करके शुरू करें जैसे शब्दों से हमारा क्या मतलब है ब्लॉक. वर्डप्रेस 5.0 तक जाने वाली इन सुविधाओं में जाने वाले सभी विकासों का कोडनेम था “गुटेनबर्ग"- आप जानते हैं, के आविष्कारक मुद्रणालय.

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

इसलिए, जब हम इस लेख में "ब्लॉक" का उल्लेख करते हैं, तो हमारा मतलब है कि वर्डप्रेस ब्लॉक एडिटर में सामग्री बनाने के लिए घटक हैं। ब्लॉक एक पेज या पोस्ट में डाले जाते हैं और एक विशेष प्रकार की सामग्री के लिए संरचना प्रदान करते हैं। सामान्य सामग्री प्रकारों के लिए मुट्ठी भर "कोर" ब्लॉक के साथ वर्डप्रेस जहाज, जैसे पैराग्राफ, सूची, छवि, वीडियो और ऑडियो, कुछ नाम है.

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

क्या ब्लॉक करते हैं

इससे पहले कि हम ब्लॉक बनाने में गोता लगाएँ, हमें पहले यह समझ लेना चाहिए कि ब्लॉक आंतरिक रूप से कैसे काम करते हैं। यह निश्चित रूप से हमें बाद में एक टन निराशा से बचाएगा।

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

जब आप WordPress Block Editor खोलते हैं और एक Block डालते हैं, जैसे कि एक Pulquote Block, तो आपको एक अच्छा इंटरफ़ेस मिलता है। आप उस इंटरफ़ेस में क्लिक कर सकते हैं और उद्धृत पाठ को संपादित कर सकते हैं। ब्लॉक संपादक UI के दाईं ओर सेटिंग पैनल टेक्स्ट को समायोजित करने और ब्लॉक की उपस्थिति को सेट करने के विकल्प प्रदान करता है।

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

यह प्रतिनिधित्व कैसा दिखता है? एक नज़र देख लो:

  

    
It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.
    The Encyclopedia of world peas
  

सादा HTML जैसा दिखता है, है ना?! यह, तकनीकी भाषा में, "क्रमबद्ध" ब्लॉक है। HTML टिप्पणी में JSON डेटा पर ध्यान दें, "textAlign": "right". वह एक है विशेषता - ब्लॉक से जुड़ी एक संपत्ति।

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

...

... यह ज़ोर से अपने आप से कहता है:

ठीक है, यह मेरे लिए एक पुलक्वॉट ब्लॉक जैसा लगता है। हम्म.. इसकी एक विशेषता भी है… मेरे पास एक जावास्क्रिप्ट फ़ाइल है जो मुझे बताती है कि संपादक में पुलक्वॉट ब्लॉक के लिए इसकी विशेषताओं से ग्राफिकल इंटरफ़ेस कैसे बनाया जाए। मुझे अब यह करना चाहिए ताकि इस ब्लॉक को इसकी सारी महिमा में प्रस्तुत किया जा सके।

एक ब्लॉक डेवलपर के रूप में, आपका काम है:

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

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

उम्मीद है, यह आपको कुछ स्पष्टता देता है कि ब्लॉक कैसे काम करता है।

ब्लॉक सिर्फ प्लगइन्स हैं

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

लेकिन आइए एक पल के लिए मान लें कि आपने कभी वर्डप्रेस प्लगइन सेट नहीं किया है, अकेले ब्लॉक करें। तुम भी कहाँ से शुरू करते हो?

एक ब्लॉक की स्थापना

हमने कवर किया है कि ब्लॉक क्या हैं। आइए एक बनाने के लिए चीजों को सेट करना शुरू करें।

सुनिश्चित करें कि आपके पास नोड स्थापित है

यह आपको पहुंच प्रदान करेगा npm और npx आदेश, जहां npm आपके ब्लॉक की निर्भरता को स्थापित करता है और सामग्री को संकलित करने में मदद करता है, जबकि npx पैकेजों को इंस्टाल किए बिना कमांड चलाता है। यदि आप macOS पर हैं, तो संभवतः आपके पास पहले से ही Node है और आप इसका उपयोग कर सकते हैं nvm संस्करणों को अद्यतन करने के लिए। यदि आप विंडोज़ पर हैं, तो आपको निम्न करने की आवश्यकता होगी नोड डाउनलोड और इंस्टॉल करें.

प्रोजेक्ट फोल्डर बनाएं

अब, आप अन्य ट्यूटोरियल में भाग सकते हैं जो सीधे कमांड लाइन में कूदते हैं और आपको एक पैकेज स्थापित करने का निर्देश देते हैं जिसे कहा जाता है @wordpress/create-block. यह पैकेज बहुत अच्छा है क्योंकि यह पूरी तरह से गठित प्रोजेक्ट फ़ोल्डर को सभी निर्भरताओं और उपकरणों के साथ थूकता है जिन्हें आपको विकसित करने के लिए आवश्यक है।

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

ये वे फ़ाइलें हैं जिन्हें मैं विशेष रूप से कॉल करना चाहता हूं:

• readme.txt: यह प्लगइन निर्देशिका के सामने के चेहरे की तरह है, आमतौर पर प्लगइन का वर्णन करने और उपयोग और स्थापना पर अतिरिक्त विवरण प्रदान करने के लिए उपयोग किया जाता है। यदि आप अपना ब्लॉक को सबमिट करते हैं WordPress प्लगइन निर्देशिका, यह फ़ाइल प्लगइन पेज को पॉप्युलेट करने में मदद करती है। यदि आप अपने ब्लॉक प्लगइन के लिए गिटहब रेपो बनाने की योजना बना रहे हैं, तो आप एक पर भी विचार कर सकते हैं README.md एक ही जानकारी के साथ फाइल करें ताकि यह वहां अच्छी तरह से प्रदर्शित हो।
• package.json: यह उन नोड पैकेजों को परिभाषित करता है जो विकास के लिए आवश्यक हैं। जब हम इंस्टालेशन पर पहुंचेंगे तो हम इसे खोल देंगे। क्लासिक वर्डप्रेस प्लगइन विकास में, आप संगीतकार और ए . के साथ काम करने के आदी हो सकते हैं composer.json इसके बजाय फ़ाइल। यह उसी के तुल्य है।
• plugin.php: यह मुख्य प्लगइन फ़ाइल है और हाँ, यह क्लासिक PHP है! हम यहां अपना प्लगइन हेडर और मेटाडेटा डालेंगे और प्लगइन को पंजीकृत करने के लिए इसका इस्तेमाल करेंगे।

इन फ़ाइलों के अलावा, वहाँ भी है src निर्देशिका, जिसमें हमारे ब्लॉक का स्रोत कोड होना चाहिए।

इन फाइलों का होना और src निर्देशिका वह है जो आपको आरंभ करने की आवश्यकता है। उस समूह में से, ध्यान दें कि हमें तकनीकी रूप से केवल एक फ़ाइल की आवश्यकता है (plugin.php) प्लगइन बनाने के लिए। बाकी या तो जानकारी प्रदान करते हैं या विकास पर्यावरण के प्रबंधन के लिए उपयोग किए जाते हैं।

पूर्वकथित @wordpress/create-block पैकेज हमारे लिए इन फ़ाइलों (और अधिक) को मचान करता है। आप इसे आवश्यकता के बजाय एक स्वचालन उपकरण के रूप में सोच सकते हैं। भले ही, यह काम को आसान बना देता है, इसलिए आप इसके साथ एक ब्लॉक मचान चलाने की स्वतंत्रता ले सकते हैं:

npx @wordpress/create-block

ब्लॉक निर्भरताएँ स्थापित करें

यह मानते हुए कि आपके पास पिछले खंड में उल्लिखित तीन फाइलें तैयार हैं, अब निर्भरताओं को स्थापित करने का समय आ गया है। सबसे पहले, हमें उन निर्भरताओं को निर्दिष्ट करने की आवश्यकता है जिनकी हमें आवश्यकता होगी। हम इसे संपादित करके करते हैं package.json। का उपयोग करते समय @wordpress/create-block उपयोगिता, हमारे लिए निम्नलिखित उत्पन्न होता है (टिप्पणियां जोड़ी गईं; JSON टिप्पणियों का समर्थन नहीं करता है, इसलिए यदि आप कोड कॉपी कर रहे हैं तो टिप्पणियों को हटा दें):

{
  // Defines the name of the project
  "name": "block-example",
  // Sets the project version number using semantic versioning
  "version": "0.1.0",
  // A brief description of the project
  "description": "Example block scaffolded with Create Block tool.",
  // You could replace this with yourself
  "author": "The WordPress Contributors",
  // Standard licensing information
  "license": "GPL-2.0-or-later",
  // Defines the main JavaScript file
  "main": "build/index.js",
  // Everything we need for building and compiling the plugin during development
  "scripts": {
    "build": "wp-scripts build",
    "format": "wp-scripts format",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "packages-update": "wp-scripts packages-update",
    "plugin-zip": "wp-scripts plugin-zip",
    "start": "wp-scripts start"
  },
  // Defines which version of the scripts packages are used (24.1.0 at time of writing)
  // https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/
  "devDependencies": {
    "@wordpress/scripts": "^24.1.0"
  }
}

{
  "name": "block-example",
  "version": "0.1.0",
  "description": "Example block scaffolded with Create Block tool.",
  "author": "The WordPress Contributors",
  "license": "GPL-2.0-or-later",
  "main": "build/index.js",
  "scripts": {
    "build": "wp-scripts build",
    "format": "wp-scripts format",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "packages-update": "wp-scripts packages-update",
    "plugin-zip": "wp-scripts plugin-zip",
    "start": "wp-scripts start"
  },
  "devDependencies": {
    "@wordpress/scripts": "^24.1.0"
  }
}

RSI @wordpress/scripts पैकेज यहां मुख्य निर्भरता है। जैसा कि आप देख सकते हैं, यह एक है devDependency जिसका अर्थ है कि यह विकास में सहायता करता है। ऐसा कैसे? यह उजागर करता है wp-scripts बाइनरी जिसका उपयोग हम अपने कोड को संकलित करने के लिए कर सकते हैं src निर्देशिका को build निर्देशिका, अन्य बातों के अलावा।

कई अन्य पैकेज हैं जो वर्डप्रेस विभिन्न उद्देश्यों के लिए रखता है। उदाहरण के लिए, @wordpress/components पैकेज प्रदान करता है कई पूर्व फैब UI घटकों वर्डप्रेस ब्लॉक एडिटर के लिए जिसका उपयोग आपके ब्लॉक के लिए लगातार उपयोगकर्ता अनुभव बनाने के लिए किया जा सकता है जो वर्डप्रेस डिजाइन मानकों के साथ संरेखित होता है।

आप वास्तव में नहीं आवश्यकता इन पैकेजों को स्थापित करने के लिए, भले ही आप उनका उपयोग करना चाहें। ऐसा इसलिए है क्योंकि ये @wordpress निर्भरताएँ आपके ब्लॉक कोड के साथ बंडल नहीं की जाती हैं। इसके बजाय, कोई भी import यूटिलिटी पैकेज से कोड को संदर्भित करने वाले स्टेटमेंट - जैसे @wordpress/components - संकलन के दौरान "संपत्ति" फ़ाइल बनाने के लिए उपयोग किया जाता है। इसके अलावा, इन आयात विवरणों को एक वैश्विक वस्तु के गुणों के आयात को मैप करने वाले बयानों में बदल दिया जाता है। उदाहरण के लिए, import { __ } from "@wordpress/i18n" के एक छोटे से संस्करण में परिवर्तित कर दिया गया है const __ = window.wp.i18n.__। (window.wp.i18n एक ऐसी वस्तु होने के नाते जो वैश्विक दायरे में उपलब्ध होने की गारंटी है, एक बार संबंधित i18n पैकेज फ़ाइल संलग्न है)।

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

// etc.
"devDependencies": {
  "@wordpress/scripts": "^24.1.0"
},
"dependencies": {
  "@wordpress/components": "^19.17.0"
}

अब जब कि package.json सेट किया गया है, हमें कमांड लाइन में प्रोजेक्ट फ़ोल्डर में नेविगेट करके और चलकर उन सभी निर्भरताओं को स्थापित करने में सक्षम होना चाहिए npm install.

प्लगइन हेडर जोड़ें

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

यहाँ क्या है @wordpress/create-block रचनात्मक रूप से "हैलो वर्ल्ड" नामक प्लगइन के लिए मेरे लिए जेनरेट किया गया:

<?php
/**
 * Plugin Name:       Block Example
 * Description:       Example block scaffolded with Create Block tool.
 * Requires at least: 5.9
 * Requires PHP:      7.0
 * Version:           0.1.0
 * Author:            The WordPress Contributors
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       css-tricks
 *
 * @package           create-block
 */

यह मुख्य प्लगइन फ़ाइल में है, जिसे आप जो चाहें कॉल कर सकते हैं। आप इसे कुछ सामान्य कह सकते हैं जैसे index.php or plugin.php। create-block पैकेज स्वचालित रूप से इसे स्थापित करते समय प्रोजेक्ट नाम के रूप में जो कुछ भी प्रदान करता है उसे कॉल करता है। चूंकि मैंने इस उदाहरण को "ब्लॉक उदाहरण" कहा है, इसलिए पैकेज ने हमें एक block-example.php इन सभी चीजों के साथ फाइल करें।

आप कुछ विवरण बदलना चाहेंगे, जैसे स्वयं को लेखक बनाना और क्या नहीं। और यह सब जरूरी नहीं है। अगर मैं इसे "स्क्रैच" से रोल कर रहा था, तो यह इसके करीब कुछ दिख सकता है:

<?php
/**
 * Plugin Name:       Block Example
 * Plugin URI:        https://css-tricks.com
 * Description:       An example plugin for learning WordPress block development.
 * Version:           1.0.0
 * Author:            Arjun Singh
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       css-tricks
 */

मैं प्रत्येक पंक्ति के सटीक उद्देश्य में नहीं जाऊँगा क्योंकि वह पहले से ही एक है वर्डप्रेस प्लगइन हैंडबुक में अच्छी तरह से स्थापित पैटर्न.

फ़ाइल संरचना

हमने अपने ब्लॉक के लिए आवश्यक फाइलों को पहले ही देख लिया है। लेकिन अगर आप उपयोग कर रहे हैं @wordpress/create-block, आप प्रोजेक्ट फ़ोल्डर में अन्य फाइलों का एक गुच्छा देखेंगे।

यहाँ इस समय क्या है:

block-example/
├── build
├── node_modules
├── src/
│   ├── block.json
│   ├── edit.js
│   ├── editor.scss
│   ├── index.js
│   ├── save.js
│   └── style.scss
├── .editorconfig
├── .gitignore
├── block-example.php
├── package-lock.json
├── package.json
└── readme.txt

ओह, यह बहुत है! आइए नई सामग्री को कॉल करें:

• build/: उत्पादन उपयोग के लिए फ़ाइलों को संसाधित करते समय इस फ़ोल्डर को संकलित संपत्ति प्राप्त हुई।
• node_modules: यह सभी विकास निर्भरताएं रखता है जिन्हें हमने चलाते समय स्थापित किया था npm install.
• src/: यह फ़ोल्डर प्लगइन का स्रोत कोड रखता है जो संकलित हो जाता है और उसे भेजा जाता है build निर्देशिका। हम यहां प्रत्येक फाइल को कुछ ही देर में देखेंगे।
• .editorconfig: इसमें कोड संगतता के लिए आपके कोड संपादक को अनुकूलित करने के लिए कॉन्फ़िगरेशन शामिल हैं।
• .gitignore: यह एक मानक रेपो फ़ाइल है जो स्थानीय फ़ाइलों की पहचान करती है जिन्हें संस्करण नियंत्रण ट्रैकिंग से बाहर रखा जाना चाहिए। तुम्हारी node_modules निश्चित रूप से यहां शामिल किया जाना चाहिए।
• package-lock.json: यह एक ऑटो-जेनरेटेड फ़ाइल है जिसमें हमारे द्वारा इंस्टॉल किए गए आवश्यक पैकेजों के अपडेट को ट्रैक करने के लिए है npm install.

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

मैं में खुदाई करना चाहता हूँ src निर्देशिका आपके साथ है, लेकिन पहले इसमें केवल एक फ़ाइल पर ध्यान केंद्रित करेगी: block.json। यदि आपने उपयोग किया है create-block , यह आपके लिए पहले से मौजूद है; यदि नहीं, तो आगे बढ़ें और इसे बनाएं। वर्डप्रेस इसे मानक, विहित तरीका बनाने के लिए कड़ी मेहनत कर रहा है ताकि मेटाडेटा प्रदान करके ब्लॉक को पंजीकृत किया जा सके जो ब्लॉक को पहचानने और इसे ब्लॉक संपादक में प्रस्तुत करने के लिए वर्डप्रेस संदर्भ प्रदान करता है।

यहाँ क्या है @wordpress/create-block मेरे लिए उत्पन्न:

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 2,
  "name": "create-block/block example",
  "version": "0.1.0",
  "title": "Block Example",
  "category": "widgets",
  "icon": "smiley",
  "description": "Example block scaffolded with Create Block tool.",
  "supports": {
    "html": false
  },
  "textdomain": "css-tricks",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css"
}

वास्तव में एक है विभिन्न सूचनाओं का गुच्छा हम यहां शामिल कर सकते हैं, लेकिन वास्तव में इसकी आवश्यकता है name और title. एक सुपर न्यूनतम संस्करण इस तरह दिख सकता है:

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 2,
  "name": "css-tricks/block-example",
  "version": "1.0.0",
  "title": "Block Example",
  "category": "text",
  "icon": "format-quote",
  "editorScript": "file:./index.js",
}

• $schema फ़ाइल में सामग्री को मान्य करने के लिए उपयोग किए जाने वाले स्कीमा स्वरूपण को परिभाषित करता है। यह एक आवश्यक चीज़ की तरह लगता है, लेकिन यह पूरी तरह से वैकल्पिक है क्योंकि यह सहायक कोड संपादकों को सिंटैक्स को मान्य करने और टूलटिप संकेत और ऑटो-पूर्णता जैसे अन्य अतिरिक्त खर्च प्रदान करने की अनुमति देता है।
• apiVersion के किस संस्करण को संदर्भित करता है ब्लॉक एपीआई प्लगइन का उपयोग करता है। आज, संस्करण 2 नवीनतम है।
• name एक आवश्यक अद्वितीय स्ट्रिंग है जो प्लगइन की पहचान करने में मदद करती है। ध्यान दें कि मैंने इसके साथ उपसर्ग किया है css-tricks/ जिसे मैं नामस्थान के रूप में उपयोग कर रहा हूं ताकि अन्य प्लगइन्स के साथ संघर्ष से बचने में मदद मिल सके जिनके पास समान नाम हो। आप इसके बजाय अपने आद्याक्षर जैसी किसी चीज़ का उपयोग करना चुन सकते हैं (उदा as/block-example).
• version कुछ है वर्डप्रेस का उपयोग करने का सुझाव देता है नए संस्करण जारी होने पर कैश-बस्टिंग तंत्र के रूप में।
• title अन्य आवश्यक फ़ील्ड है, और यह उस नाम को सेट करता है जिसका उपयोग प्लगइन प्रदर्शित होने पर कहीं भी किया जाता है।
• category ब्लॉक को अन्य ब्लॉक के साथ समूहित करता है और उन्हें ब्लॉक एडिटर में एक साथ प्रदर्शित करता है। वर्तमान मौजूदा श्रेणियों में शामिल हैं text, media, design, widgets, theme, तथा embed, और आप बना भी सकते हैं कस्टम श्रेणियां.
• icon आपको इनमें से कुछ चुनने देता है डैशिकन्स लाइब्रेरी ब्लॉक एडिटर में अपने ब्लॉक को नेत्रहीन रूप से दर्शाने के लिए। मैं का उपयोग कर रहा हूँ format-quote icon](https://developer.wordpress.org/resource/dashicons/#format-quote) क्योंकि हम इस उदाहरण में अपना खुद का पुलकोट बना रहे हैं। यह अच्छा है कि हम अपना खुद का बनाने के बजाय मौजूदा आइकन का लाभ उठा सकते हैं, हालांकि यह निश्चित रूप से संभव है।
• editorScript वह जगह है जहाँ मुख्य जावास्क्रिप्ट फ़ाइल है, index.js, ज़िंदगियाँ।

ब्लॉक रजिस्टर करें

वास्तविक कोड को हिट करने से पहले एक आखिरी चीज, और वह है प्लगइन को पंजीकृत करना। हमने बस उस सभी मेटाडेटा को सेट किया है और हमें वर्डप्रेस के उपभोग के लिए एक तरीका चाहिए। इस तरह, वर्डप्रेस जानता है कि सभी प्लगइन संपत्तियों को कहां खोजना है ताकि उन्हें ब्लॉक संपादक में उपयोग के लिए लगाया जा सके।

ब्लॉक का पंजीकरण एक दो गुना प्रक्रिया है। हमें इसे PHP और JavaScript दोनों में पंजीकृत करने की आवश्यकता है। PHP पक्ष के लिए, मुख्य प्लगइन फ़ाइल खोलें (block-example.php इस मामले में) और प्लगइन हेडर के ठीक बाद निम्नलिखित जोड़ें:

function create_block_block_example_block_init() {
  register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'create_block_block_example_block_init' );

यह क्या है create-block उपयोगिता मेरे लिए उत्पन्न हुई है, इसलिए फ़ंक्शन का नाम इस तरह रखा गया है। हम एक अलग नाम का उपयोग कर सकते हैं। कुंजी, फिर से, अन्य प्लगइन्स के साथ टकराव से बच रही है, इसलिए इसे यथासंभव अद्वितीय बनाने के लिए यहां अपने नामस्थान का उपयोग करना एक अच्छा विचार है:

function css_tricks_block_example_block_init() {
  register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'css_tricks_block_example_block_init' );

हम क्यों इशारा कर रहे हैं build निर्देशिका यदि block.json सभी ब्लॉक मेटाडेटा के साथ में है src? ऐसा इसलिए है क्योंकि हमारे कोड को अभी भी संकलित करने की आवश्यकता है। scripts पैकेज फाइलों से कोड को प्रोसेस करता है src निर्देशिका और उत्पादन में प्रयुक्त संकलित फाइलों को में रखता है build निर्देशिका, जबकि भी नकल करना block.json पट्टिका प्रक्रिया में है।

ठीक है, चलिए ब्लॉक को पंजीकृत करने के जावास्क्रिप्ट पक्ष पर चलते हैं। खुलना src/index.js और सुनिश्चित करें कि यह इस तरह दिखता है:

import { registerBlockType } from "@wordpress/blocks";

import metadata from "./block.json";
import Edit from "./edit.js";
import Save from "./save.js";

const { name } = metadata;

registerBlockType(name, {
  edit: Edit,
  save: Save,
});

हम रिएक्ट और JSX भूमि में प्रवेश कर रहे हैं! यह वर्डप्रेस को बताता है:

• आयात करें registerBlockType मॉड्यूल से @wordpress/blocks पैकेज.
• से मेटाडेटा आयात करें block.json.
• आयात करें Edit और Save उनकी संबंधित फाइलों से घटक। हम बाद में उन फाइलों में कोड डालेंगे।
• ब्लॉक पंजीकृत करें, और उपयोग करें Edit और Save ब्लॉक को प्रतिपादित करने और इसकी सामग्री को डेटाबेस में सहेजने के लिए घटक।

के साथ क्या हो रहा है edit और save कार्य? वर्डप्रेस ब्लॉक डेवलपमेंट की बारीकियों में से एक "बैक एंड" को "फ्रंट एंड" से अलग करना है और इन कार्यों का उपयोग उन संदर्भों में ब्लॉक की सामग्री को प्रस्तुत करने के लिए किया जाता है, जहां edit बैक-एंड रेंडरिंग को संभालता है और save साइट के सामने के छोर पर सामग्री को प्रस्तुत करने के लिए ब्लॉक संपादक से डेटाबेस में सामग्री लिखता है।

एक त्वरित परीक्षण

हम अपने ब्लॉक को ब्लॉक एडिटर में काम करते हुए देखने के लिए और फ्रंट एंड पर रेंडर करने के लिए कुछ त्वरित काम कर सकते हैं। चलो, खोलो index.js फिर से और उपयोग करें edit और save कुछ बुनियादी सामग्री को वापस करने के लिए कार्य करता है जो बताता है कि वे कैसे काम करते हैं:

import { registerBlockType } from "@wordpress/blocks";
import metadata from "./block.json";

const { name } = metadata;

registerBlockType(name, {
  edit: () => {
    return (
      "Hello from the Block Editor"
    );
  },
  save: () => {
    return (
      "Hello from the front end"
    );
  }
});

यह मूल रूप से उसी कोड का एक अलग-अलग संस्करण है जो हमारे पास पहले था, केवल हम सीधे मेटाडेटा की ओर इशारा कर रहे हैं block.json ब्लॉक नाम लाने के लिए, और छोड़ दिया Edit और Save घटक क्योंकि हम यहां से सीधे कार्य चला रहे हैं।

हम इसे चलाकर संकलित कर सकते हैं npm run build कमांड लाइन में। उसके बाद, हमारे पास ब्लॉक संपादक में "ब्लॉक उदाहरण" नामक ब्लॉक तक पहुंच है:

यदि हम ब्लॉक को सामग्री क्षेत्र में छोड़ देते हैं, तो हमें वह संदेश मिलता है जो हम वापस करते हैं edit समारोह:

अगर हम पोस्ट को सेव और पब्लिश करते हैं, तो हमें वह मैसेज मिलना चाहिए जो हम वापस करते हैं save इसे सामने के छोर पर देखते समय कार्य करें:

एक ब्लॉक बनाना

लगता है सब कुछ बंधा हुआ है! हमारे पास जो था, हम उस पर वापस लौट सकते हैं index.js परीक्षण से पहले अब हमने पुष्टि कर ली है कि चीजें काम कर रही हैं:

import { registerBlockType } from "@wordpress/blocks";

import metadata from "./block.json";
import Edit from "./edit.js";
import Save from "./save.js";

const { name } = metadata;

registerBlockType(name, {
  edit: Edit,
  save: Save,
});

गौर करें कि द edit और save फ़ंक्शंस दो मौजूदा फाइलों से बंधे हैं src निर्देशिका कि @wordpress/create-block हमारे लिए जेनरेट किया गया है और इसमें वे सभी अतिरिक्त आयात शामिल हैं जिनकी हमें प्रत्येक फ़ाइल में आवश्यकता है। हालांकि, इससे भी महत्वपूर्ण बात यह है कि वे फाइलें स्थापित करती हैं Edit और Save घटक जिनमें ब्लॉक का मार्कअप होता है।

बैक एंड मार्कअप (src/edit.js)

import { useBlockProps } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";

export default function Edit() {
  return (
    

      {__("Hello from the Block Editor", "block-example")}
    
  );
}

देखें कि हमने वहां क्या किया? हम प्रोप से आयात कर रहे हैं @wordpress/block-editor पैकेज जो हमें कक्षाएं उत्पन्न करने की अनुमति देता है जिसे हम बाद में स्टाइल के लिए उपयोग कर सकते हैं। हम भी आयात कर रहे हैं __ अनुवाद से निपटने के लिए अंतर्राष्ट्रीयकरण समारोह।

फ्रंट-एंड मार्कअप (src/save.js)

यह एक बनाता है Save घटक और हम लगभग उसी चीज़ का उपयोग करने जा रहे हैं src/edit.js थोड़ा अलग पाठ के साथ:

import { useBlockProps } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";

export default function Save() {
  return (
    

      {__("Hello from the front end", "block-example")}
    
  );
}

फिर से, हमें एक अच्छी क्लास मिलती है जिसका उपयोग हम अपने CSS में कर सकते हैं:

स्टाइलिंग ब्लॉक

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

फ्रंट और बैक-एंड शैलियों में अंतर करना

अगर आप एक नज़र डालते हैं block.json में src निर्देशिका में आपको शैलियों से संबंधित दो फ़ील्ड मिलेंगे:

• editorStyle बैक एंड पर लागू शैलियों के लिए पथ प्रदान करता है।
• style साझा शैलियों के लिए पथ है जो आगे और पीछे दोनों छोर पर लागू होते हैं।

केव क्वर्क का एक विस्तृत लेख है जो बैक-एंड संपादक को फ़्रंट-एंड UI जैसा दिखने के लिए उनके दृष्टिकोण को दर्शाता है।

याद करो कि @wordpress/scripts पैकेज कॉपी करता है block.json फ़ाइल जब यह कोड को संसाधित करता है /src निर्देशिका और स्थान संकलित संपत्ति /build निर्देशिका। यह है build/block.json फ़ाइल जो ब्लॉक को पंजीकृत करने के लिए उपयोग की जाती है। इसका मतलब है कि कोई भी रास्ता जो हम प्रदान करते हैं src/block.json के सापेक्ष लिखा जाना चाहिए build/block.json.

Sass . का उपयोग करना

हम कुछ सीएसएस फाइलों को इसमें छोड़ सकते हैं build निर्देशिका, पथों का संदर्भ लें src/block.json, बिल्ड चलाएँ, और इसे एक दिन कहें। लेकिन यह की पूरी ताकत का लाभ नहीं उठाता है @wordpress/scripts संकलन प्रक्रिया, जो सैस को सीएसएस में संकलित करने में सक्षम है। इसके बजाय, हम अपनी शैली फ़ाइलें इसमें रखते हैं src निर्देशिका और उन्हें जावास्क्रिप्ट में आयात करें।

ऐसा करते समय, हमें इस बात का ध्यान रखना होगा कि कैसे @wordpress/scripts प्रक्रिया शैलियाँ:

• नामक एक फाइल style.css or style.scss or style.sass, जावास्क्रिप्ट कोड में आयात किया गया है, जिसे संकलित किया गया है style-index.css.
• अन्य सभी स्टाइल फाइलें संकलित और बंडल की जाती हैं index.css.

RSI @wordpress/scripts पैकेज का उपयोग करता है वेबपैक बंडलिंग के लिए और @wordpress/scripts का उपयोग करता है पोस्टसीएसएस प्लगइन प्रसंस्करण शैलियों के लिए काम करने के लिए। PostCSS को अतिरिक्त प्लगइन्स के साथ बढ़ाया जा सकता है। scripts पैकेज Sass, SCSS और Autoprefixer के लिए उपयोग करता है, जो सभी अतिरिक्त पैकेज स्थापित किए बिना उपयोग के लिए उपलब्ध हैं।

वास्तव में, जब आप अपने प्रारंभिक ब्लॉक को स्पिन करते हैं @wordpress/create-block, आपको एससीएसएस फाइलों के साथ एक अच्छी शुरुआत मिलती है जिसका उपयोग आप जमीन पर चलने के लिए कर सकते हैं:

• editor.scss बैक-एंड संपादक पर लागू होने वाली सभी शैलियाँ शामिल हैं।
• style.scss फ्रंट और बैक एंड दोनों द्वारा साझा की गई सभी शैलियों को शामिल करता है।

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

सामने और बैक-एंड स्टाइल

ठीक है, चलिए उन शैलियों से शुरू करते हैं जो आगे और पीछे दोनों छोर पर लागू होती हैं। सबसे पहले, हमें बनाने की जरूरत है src/style.scss (यदि आप उपयोग कर रहे हैं तो यह पहले से मौजूद है @wordpress/create-block) और सुनिश्चित करें कि हम इसे आयात करते हैं, जो हम कर सकते हैं index.js:

import "./style.scss";

खोलो src/style.scss और ब्लॉक प्रॉप्स से हमारे लिए जेनरेट की गई क्लास का उपयोग करके कुछ बुनियादी शैलियों को वहां छोड़ दें:

.wp-block-css-tricks-block-example {
  background-color: rebeccapurple;
  border-radius: 4px;
  color: white;
  font-size: 24px;
}

अभी के लिए बस इतना ही! जब हम बिल्ड चलाते हैं, तो यह संकलित हो जाता है build/style.css और इसे ब्लॉक एडिटर और फ्रंट एंड दोनों द्वारा संदर्भित किया जाता है।

बैक-एंड स्टाइल

आपको ब्लॉक संपादक के लिए विशिष्ट शैलियों को लिखने की आवश्यकता हो सकती है। उसके लिए, बनाएं src/editor.scss (फिर, @wordpress/create-block यह आपके लिए करता है) और वहां कुछ शैलियों को छोड़ दें:

.wp-block-css-tricks-block-example {
  background-color: tomato;
  color: black;
}

फिर इसे आयात करें edit.js, वह कौन सी फाइल है जिसमें हमारा Edit घटक (हम इसे कहीं भी आयात कर सकते हैं, लेकिन चूंकि ये शैलियाँ संपादक के लिए हैं, इसलिए यहाँ घटक आयात करना अधिक तर्कसंगत है):

import "./editor.scss";

अब जब हम दौड़ते हैं npm run build, शैलियों को दोनों संदर्भों में ब्लॉक पर लागू किया जाता है:

संदर्भ शैलियों में block.json

हमने स्टाइलिंग फ़ाइलें आयात कीं edit.js और index.js, लेकिन याद रखें कि संकलन चरण में हमारे लिए दो सीएसएस फ़ाइलें उत्पन्न होती हैं build निर्देशिका: index.css और style-index.css क्रमश। हमें इन जेनरेट की गई फ़ाइलों को ब्लॉक मेटाडेटा में संदर्भित करने की आवश्यकता है।

आइए इसमें कुछ कथन जोड़ें block.json मेटाडेटा:

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 2,
  "name": "css-tricks/block-example",
  "version": "1.0.0",
  "title": "Block Example",
  "category": "text",
  "icon": "format-quote",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css"
}

रन npm run build एक बार फिर, अपनी वर्डप्रेस साइट पर प्लगइन स्थापित और सक्रिय करें, और आप इसका उपयोग करने के लिए तैयार हैं!

आप का उपयोग कर सकते हैं npm run start अपने बिल्ड को वॉच मोड में चलाने के लिए, हर बार जब आप अपने कोड में बदलाव करते हैं और सहेजते हैं तो स्वचालित रूप से अपना कोड संकलित करते हैं।

हम सतह को खरोंच रहे हैं

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

लेकिन उम्मीद है कि यह वर्डप्रेस ब्लॉक बनाने की सामान्य प्रक्रिया को डी-रहस्यमय बनाने में मदद करता है। यह वास्तव में वर्डप्रेस विकास में एक नया युग है। चीजों को करने के नए तरीके सीखना कठिन है, लेकिन मैं यह देखने के लिए उत्सुक हूं कि यह कैसे विकसित होता है। जैसे उपकरण @wordpress/create-block मदद, लेकिन फिर भी यह जानना अच्छा है कि यह वास्तव में क्या कर रहा है और क्यों।

क्या जिन चीजों को हमने यहां कवर किया है, वे बदलने जा रही हैं? सबसे अधिक संभावना! लेकिन कम से कम आपके पास काम करने के लिए एक आधार रेखा है क्योंकि हम वर्डप्रेस ब्लॉक को परिपक्व होते देखते हैं, जिसमें उन्हें बनाने की सर्वोत्तम प्रथाएं भी शामिल हैं।

संदर्भ

फिर से, मेरा लक्ष्य इस मौसम में ब्लॉक विकास में शामिल होने के लिए एक कुशल मार्ग का नक्शा बनाना है जहां चीजें तेजी से विकसित हो रही हैं और वर्डप्रेस प्रलेखन को पकड़ने में थोड़ा कठिन समय हो रहा है। यहां कुछ संसाधन दिए गए हैं जिनका उपयोग मैंने इसे एक साथ खींचने के लिए किया था: