जिस तरह से हम वर्डप्रेस थीम के लिए सीएसएस लिखते हैं वह व्यापक बदलावों के बीच है। मैंने हाल ही में के लिए एक तकनीक साझा की है वर्डप्रेस में फ्लुइड टाइप सपोर्ट जोड़ना के माध्यम से theme.json, एक नई फ़ाइल जो वर्डप्रेस कड़ी मेहनत कर रहा है वर्डप्रेस थीम में शैलियों को परिभाषित करने के लिए सच्चाई का एक केंद्रीय स्रोत बनने के लिए जो पूर्ण-साइट संपादन (एफएसई) सुविधाओं का समर्थन करते हैं।

इंतजार नहीं style.css फ़ाइल? हमारे पास अभी भी वह है। वास्तव में, style.css is अभी भी एक आवश्यक फ़ाइल ब्लॉक विषयों में, हालांकि इसकी भूमिका विषय को पंजीकृत करने के लिए उपयोग की जाने वाली मेटा जानकारी तक बहुत कम हो जाती है। उसने कहा, तथ्य यह है कि theme.json अभी भी सक्रिय विकास में है, जिसका अर्थ है कि हम एक संक्रमणकालीन अवधि में हैं जहाँ आपको वहाँ परिभाषित शैलियाँ मिल सकती हैं, in styles.css या ब्लॉक स्तर पर भी।

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

वर्डप्रेस शैलियों का विकास

नई विकासात्मक विशेषताएं जो में शामिल हैं WordPress के 6.1 हमें शैलियों की एक प्रणाली के करीब ले जाएं जो पूरी तरह से परिभाषित हैं theme.json, लेकिन इस पर पूरी तरह से भरोसा करने से पहले अभी भी बहुत काम करना बाकी है। भविष्य की रिलीज़ में क्या आ रहा है, इसका अंदाजा लगाने का एक तरीका यह है कि गुटेनबर्ग प्लगइन. यह वह जगह है जहां प्रयोगात्मक सुविधाओं को अक्सर सूखा दिया जाता है।

एक और तरीका है कि हम यह महसूस कर सकते हैं कि हम कहां हैं के विकास को देखकर डिफ़ॉल्ट वर्डप्रेस थीम. आज तक, तीन डिफ़ॉल्ट थीम हैं जो पूर्ण-साइट संपादन का समर्थन करती हैं:

लेकिन सीएसएस का व्यापार शुरू न करें style.css JSON संपत्ति-मूल्य जोड़े के लिए theme.json बस अभी तक। अभी भी CSS स्टाइलिंग नियम हैं जिनका समर्थन करने की आवश्यकता है theme.json इससे पहले कि हम ऐसा करने के बारे में सोचें। शेष महत्वपूर्ण मुद्दों पर वर्तमान में सभी सीएसएस शैली नियमों को पूरी तरह से स्थानांतरित करने के उद्देश्य से चर्चा की जा रही है theme.json और के विभिन्न स्रोतों को समेकित करें theme.json एक में वैश्विक शैलियों की स्थापना के लिए UI सीधे में वर्डप्रेस साइट संपादक.

यह हमें अपेक्षाकृत कठिन स्थान पर छोड़ देता है। इतना ही नहीं है थीम शैलियों को ओवरराइड करने के लिए कोई स्पष्ट रास्ता नहीं है, लेकिन यह स्पष्ट नहीं है कि उन शैलियों का स्रोत भी कहाँ से आया है — क्या यह की विभिन्न परतों से है theme.json फ़ाइलें, style.css, गुटेनबर्ग प्लगइन, या कहीं और?

क्यों theme.json के बजाय style.css?

आप सोच रहे होंगे कि वर्डप्रेस पारंपरिक CSS फ़ाइल के बजाय JSON-आधारित शैलियों की परिभाषा की ओर क्यों बढ़ रहा है। गुटेनबर्ग विकास दल के बेन ड्वायर वाक्पटुता से व्यक्त करते हैं कि क्यों theme.json दृष्टिकोण थीम डेवलपर्स के लिए एक लाभ है.

बेन की पोस्ट पढ़ने लायक है, लेकिन मांस इस उद्धरण में है:

सीएसएस को ओवरराइड करना, चाहे लेआउट, प्रीसेट, या ब्लॉक स्टाइल, एकीकरण और इंटरऑपरेबिलिटी के लिए एक बाधा प्रस्तुत करता है: फ्रंटएंड और एडिटर के बीच दृश्य समानता को बनाए रखना अधिक कठिन हो जाता है, आंतरिक को ब्लॉक करने के लिए अपग्रेड ओवरराइड के साथ संघर्ष कर सकता है। इसके अलावा, कस्टम सीएसएस अन्य ब्लॉक थीम में कम पोर्टेबल है।

थीम लेखकों को उपयोग करने के लिए प्रोत्साहित करके theme.json एपीआई जहां संभव हो, "आधार> थीम> उपयोगकर्ता" परिभाषित शैलियों के पदानुक्रम को सही ढंग से हल किया जा सकता है।

CSS को JSON में ले जाने के प्रमुख लाभों में से एक यह है कि JSON एक मशीन-पठनीय प्रारूप है, जिसका अर्थ है कि इसे एपीआई लाकर वर्डप्रेस साइट एडिटर UI में उजागर किया जा सकता है, इस प्रकार उपयोगकर्ताओं को डिफ़ॉल्ट मानों को संशोधित करने और साइट की उपस्थिति को अनुकूलित करने की अनुमति मिलती है। किसी भी सीएसएस को बिल्कुल लिखना। यह एक ऐसी संरचना प्रदान करते हुए लगातार ब्लॉक को स्टाइल करने का एक तरीका प्रदान करता है जो विशिष्टता की परतें बनाता है जैसे कि उपयोगकर्ता सेटिंग्स में परिभाषित लोगों की तुलना में सर्वोच्च प्राथमिकता लेते हैं theme.json. थीम-स्तरीय शैलियों के बीच वह परस्पर क्रिया theme.json और वैश्विक शैलियाँ UI में उपयोगकर्ता-परिभाषित शैलियाँ ही JSON दृष्टिकोण को इतना आकर्षक बनाती हैं।

डेवलपर्स JSON में निरंतरता बनाए रखते हैं, और उपयोगकर्ता कोड-रहित अनुकूलन के साथ लचीलापन प्राप्त करते हैं। यह एक जीत-जीत है।

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

JSON तत्वों के साथ शैलियों को परिभाषित करना

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

और हम इसे परिभाषित करके करते हैं JSON तत्व. तत्वों को अलग-अलग घटकों के रूप में सोचें जो एक वर्डप्रेस ब्लॉक में रहते हैं। मान लें कि हमारे पास एक ब्लॉक है जिसमें एक शीर्षक, एक पैराग्राफ और एक बटन है। वे अलग-अलग टुकड़े तत्व हैं, और वहाँ एक है elements में वस्तु theme.json जहां हम उनकी शैलियों को परिभाषित करते हैं:

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { ... },
        "h1": { ... },
        "heading": { ... },
    },
  },
  "templateParts": {}
}

JSON तत्वों का वर्णन करने का एक बेहतर तरीका थीम और ब्लॉक के लिए निम्न-स्तरीय घटक हैं जिन्हें ब्लॉक की जटिलता की आवश्यकता नहीं है। वे HTML आदिम का प्रतिनिधित्व कर रहे हैं जिन्हें किसी ब्लॉक में परिभाषित नहीं किया गया है लेकिन ब्लॉक में उपयोग किया जा सकता है। वर्डप्रेस (और गुटेनबर्ग प्लगइन) में उनका समर्थन कैसे किया जाता है, इसका वर्णन किया गया है ब्लॉक संपादक हैंडबुक और इस पूर्ण साइट संपादन ट्यूटोरियल कैरोलिना न्यमार्क द्वारा।

उदाहरण के लिए, लिंक में स्टाइल किया गया है elements वस्तु लेकिन अपने आप में एक ब्लॉक नहीं हैं। लेकिन एक लिंक को एक ब्लॉक में इस्तेमाल किया जा सकता है और यह उस पर परिभाषित शैलियों को प्राप्त करेगा elements.link में वस्तु theme.json. यह किसी तत्व की परिभाषा को पूरी तरह से एनकैप्सुलेट नहीं करता है, हालांकि, कुछ तत्वों को ब्लॉक के रूप में भी पंजीकृत किया जाता है, जैसे कि हेडिंग और बटन ब्लॉक - लेकिन उन ब्लॉकों का उपयोग अभी भी अन्य ब्लॉकों में किया जा सकता है।

यहां उन तत्वों की तालिका दी गई है जो वर्तमान में शैली में उपलब्ध हैं theme.json, कैरोलिना के सौजन्य से:

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

इसके अलावा, आप यह भी देखना शुरू कर सकते हैं कि की संरचना कैसी है theme.json विशिष्टता की परतें, वैश्विक तत्वों से जा रही हैं (उदाहरण के लिए) headings) व्यक्तिगत तत्वों के लिए (जैसे h1), और ब्लॉक-स्तरीय शैलियाँ (जैसे .) h1 एक ब्लॉक में निहित)।

JSON तत्वों पर अतिरिक्त जानकारी उपलब्ध है यह वर्डप्रेस प्रस्ताव बनाएं और यह खुला टिकट गुटेनबर्ग प्लगइन के गिटहब रेपो में।

JSON और CSS विशिष्टता

आइए CSS विशिष्टता के बारे में बात करते रहें। मैंने पहले उल्लेख किया था कि स्टाइल के लिए JSON दृष्टिकोण एक पदानुक्रम स्थापित करता है। और यह सच है। शैलियाँ जो JSON तत्वों पर परिभाषित हैं theme.json डिफ़ॉल्ट थीम शैलियाँ मानी जाती हैं। और वैश्विक शैलियाँ UI में उपयोगकर्ता द्वारा सेट की गई कोई भी चीज़ डिफ़ॉल्ट को ओवरराइड कर देगी।

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

मैं उपयोग कर रहा हूँ खाली विषय, एक खाली वर्डप्रेस थीम जिसमें कोई CSS स्टाइल नहीं है। मैं एक नए पेज पर एक बटन ब्लॉक जोड़ने जा रहा हूँ।

ठीक है, हम जानते हैं कि वर्डप्रेस कोर कुछ हल्के स्टाइल के साथ आता है। अब, मैं वर्डप्रेस 3 से डिफ़ॉल्ट TT6.1 थीम पर स्विच करने जा रहा हूं और इसे सक्रिय करता हूं। अगर मैं बटन के साथ अपना पेज रीफ्रेश करता हूं, तो बटन शैलियों को बदलता है।

आप बिल्कुल देख सकते हैं जहां से वे नए स्टाइल आ रहे हैं TT3's में theme.json फ़ाइल। यह हमें बताता है कि JSON तत्व शैलियाँ वर्डप्रेस कोर शैलियों पर पूर्वता लेती हैं।

अब मैं TT3 को a के साथ ओवरराइड करके संशोधित करने जा रहा हूं theme.json चाइल्ड थीम में फ़ाइल, जहां बटन ब्लॉक का डिफ़ॉल्ट पृष्ठभूमि रंग लाल पर सेट है।

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

हमने दोनों बटनों की पृष्ठभूमि का रंग बदलकर नीला कर दिया और ग्लोबल स्टाइल UI का उपयोग करके टेक्स्ट को भी संशोधित किया। ध्यान दें कि वहां से नीले रंग ने थीम शैलियों पर पूर्वता ली है!

स्टाइल इंजन

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

क्या वे शैलियाँ इनलाइन हैं? क्या वे एक अलग स्टाइलशीट में हैं? हो सकता है कि उन्हें पृष्ठ पर a . में इंजेक्ट किया गया हो ?

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

हम केवल स्टाइल इंजन पर पहली नज़र डाल रहे हैं। वास्तव में, यहाँ अब तक क्या पूरा किया गया है, टिकट के अनुसार:

• ऑडिट और समेकित करें जहां कोड बैक एंड में ब्लॉक सपोर्ट सीएसएस उत्पन्न करता है ताकि उन्हें एक ही स्थान से वितरित किया जा सके (कई स्थानों के विपरीत)। इसमें सीएसएस नियम जैसे मार्जिन, पैडिंग, टाइपोग्राफी, रंग और बॉर्डर शामिल हैं।
• दोहराव वाले लेआउट-विशिष्ट शैलियों को हटा दें और सिमेंटिक वर्ग के नाम उत्पन्न करें।
• ब्लॉक, लेआउट और एलिमेंट सपोर्ट के लिए हमारे द्वारा पेज पर प्रिंट किए जाने वाले इनलाइन स्टाइल टैग्स की संख्या कम करें।

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

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

JSON तत्वों के साथ कार्य करना

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

JSON तत्वों में आम तौर पर दो संदर्भ होते हैं: वैश्विक स्तर और ब्लॉक स्तर. वैश्विक स्तर की शैलियों को ब्लॉक स्तर की तुलना में कम विशिष्टता के साथ परिभाषित किया गया है ताकि यह सुनिश्चित किया जा सके कि ब्लॉक-विशिष्ट शैलियों को जहां भी ब्लॉक का उपयोग किया जाता है, वहां स्थिरता के लिए प्राथमिकता दी जाती है।

JSON तत्वों के लिए वैश्विक शैलियाँ

आइए नई डिफ़ॉल्ट TT3 थीम देखें और जांचें कि इसके बटन कैसे स्टाइल किए जाते हैं। निम्नलिखित TT3 का संक्षिप्त कॉपी-पेस्ट है theme.json फ़ाइल (यहाँ है पूरा कोड) वैश्विक शैली अनुभाग दिखा रहा है, लेकिन आप यहां मूल कोड पा सकते हैं।

{
  "version": 2,
  "settings": {},
    // ...
  "styles": {
    // ...
    "elements": {
      "button": {
        "border": {
          "radius": "0"
        },
        "color": {
          "background": "var(--wp--preset--color--primary)",
          "text": "var(--wp--preset--color--contrast)"
        },
        ":hover": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":focus": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":active": {
          "color": {
            "background": "var(--wp--preset--color--secondary)",
            "text": "var(--wp--preset--color--base)"
          }
        }
      },
      "h1": {
        "typography": { }
      },
      // ...
      "heading": {
        "typography": {
          "fontWeight": "400",
          "lineHeight": "1.4"
      }
      },
      "link": {
        "color": {
          "text": "var(--wp--preset--color--contrast)"
        },
        ":hover": {
          "typography": {
            "textDecoration": "none"
          }
        },
        ":focus": {
          "typography": {
            "textDecoration": "underline dashed"
          }
        },
        ":active": {
          "color": {
            "text": "var(--wp--preset--color--secondary)"
          },
          "typography": {
            "textDecoration": "none"
          }
        },
        "typography": {
          "textDecoration": "underline"
        }
      }
     },
    // ...
  },
  "templateParts": {}
}

सभी बटन वैश्विक स्तर पर स्टाइल किए गए हैं (styles.elements.button).

हम DevTools में भी इसकी पुष्टि कर सकते हैं। ध्यान दें कि एक वर्ग कहा जाता है .wp-element-button चयनकर्ता है। इंटरेक्टिव स्टेट्स को भी स्टाइल करने के लिए उसी क्लास का इस्तेमाल किया जाता है।

फिर से, यह स्टाइल वैश्विक स्तर पर हो रहा है, से आ रहा है theme.json. जब भी हम एक बटन का उपयोग करते हैं, तो उसकी पृष्ठभूमि समान होगी क्योंकि वे एक ही चयनकर्ता को साझा करते हैं और कोई अन्य शैली नियम इसे ओवरराइड नहीं कर रहे हैं।

एक तरफ, वर्डप्रेस 6.1 जोड़ा गया इंटरैक्टिव राज्यों को स्टाइल करने के लिए समर्थन कुछ तत्वों के लिए, जैसे बटन और लिंक, में छद्म वर्गों का उपयोग करना theme.json - समेत :hover, :focus, तथा :active - या ग्लोबल स्टाइल्स UI। स्वचालित इंजीनियर डेव स्मिथ दर्शाता यह सुविधा एक यूट्यूब वीडियो में।

हम बटन के पृष्ठभूमि रंग को या तो ओवरराइड कर सकते हैं theme.json (अधिमानतः एक चाइल्ड थीम में क्योंकि हम एक डिफ़ॉल्ट वर्डप्रेस थीम का उपयोग कर रहे हैं) या साइट एडिटर में ग्लोबल स्टाइल्स सेटिंग्स में (कोई चाइल्ड थीम की आवश्यकता नहीं है क्योंकि इसमें कोड परिवर्तन की आवश्यकता नहीं है)।

लेकिन फिर बटन एक ही बार में बदल जाएंगे। क्या होगा यदि हम पृष्ठभूमि रंग को ओवरराइड करना चाहते हैं जब बटन एक निश्चित ब्लॉक का हिस्सा होता है? यहीं से ब्लॉक-स्तरीय शैलियाँ चलन में आती हैं।

तत्वों के लिए ब्लॉक-स्तरीय शैलियाँ

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

ऐसा करने के लिए, हम शैलियों को परिभाषित करते हैं styles.blocks में वस्तु theme.json. यह सही है, अगर हम सभी बटनों के लिए वैश्विक शैलियों को परिभाषित करते हैं styles.elements, हम बटन तत्वों के लिए ब्लॉक-विशिष्ट शैलियों को परिभाषित कर सकते हैं styles.block, जो एक समान संरचना का अनुसरण करता है:

{
  "version": 2,
  // ...
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": {
      "core/search": {
        "elements": {
          "button": {
            "color": {
              "background": "var(--wp--preset--color--quaternary)",
              "text": "var(--wp--preset--color--base)"
            }
          }
        },
        // ...
      }
    }
  }
}

देखना है कि? मैंने सेट किया background और text पर गुण styles.blocks.core/search.elements.button दो सीएसएस वैरिएबल के साथ जो वर्डप्रेस में प्रीसेट हैं।

परिणाम? खोज बटन अब लाल है (--wp--preset--color--quaternary), और डिफ़ॉल्ट बटन ब्लॉक अपने चमकीले हरे रंग की पृष्ठभूमि को बरकरार रखता है।

हम DevTools में भी बदलाव देख सकते हैं।

वही सच है अगर हम अन्य ब्लॉक में शामिल बटनों को स्टाइल करना चाहते हैं। और बटन केवल एक उदाहरण हैं, तो आइए एक दूसरे को देखें।

उदाहरण: प्रत्येक स्तर पर स्टाइलिंग शीर्षक

आइए इस सारी जानकारी को एक उदाहरण के साथ घर ले जाएं। इस बार, हम करेंगे:

• विश्व स्तर पर सभी शीर्षकों को स्टाइल करें
• सभी शीर्षक 2 तत्वों को स्टाइल करें
• क्वेरी लूप ब्लॉक में शैली शीर्षक 2 तत्व

सबसे पहले, आइए बुनियादी संरचना के साथ शुरू करें theme.json:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

यह हमारी वैश्विक और ब्लॉक-स्तरीय शैलियों की रूपरेखा स्थापित करता है।

विश्व स्तर पर सभी शीर्षकों को स्टाइल करें

आइए जोड़ते हैं headings हमारी वैश्विक शैलियों पर आपत्ति करें और कुछ शैलियों को लागू करें:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
    },
    // Block-level styles
    "blocks": { }
  }
}

यह सभी शीर्षकों के लिए वर्डप्रेस में प्रीसेट बेस कलर के लिए रंग सेट करता है। आइए वैश्विक स्तर पर भी शीर्षक 2 तत्वों का रंग और फ़ॉन्ट आकार बदलें:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
      "h2": {
        "color": "var(--wp--preset--color--primary)",
        "typography": {
          "fontSize": "clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)"
        }
      }
    },
    // Block-level styles
    "blocks": { }
  }
}

अब, सभी शीर्षक 2 तत्व a . के साथ प्राथमिक प्रीसेट रंग के रूप में सेट हैं द्रव फ़ॉन्ट आकार. लेकिन शायद हम एक निश्चित चाहते हैं fontSize शीर्षक 2 तत्व के लिए जब इसे क्वेरी लुक ब्लॉक में उपयोग किया जाता है:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
      "h2": {
        "color": "var(--wp--preset--color--primary)",
        "typography": {
          "fontSize": "clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)"
        }
      }
    },
    // Block-level styles
    "blocks": {
      "core/query": {
        "elements": {
          "h2": {
            "typography": {
              "fontSize": 3.25rem
            }
          }
        }
      }
    }
  }
}

अब हमारे पास शीर्षक 2 तत्वों के लिए शैलियों के तीन स्तर हैं: सभी शीर्षक, सभी शीर्षक 2 तत्व, और शीर्षक 2 तत्व जो क्वेरी लूप ब्लॉक में उपयोग किए जाते हैं।

मौजूदा विषय उदाहरण

जबकि हमने इस लेख में केवल बटन और शीर्षकों के लिए स्टाइलिंग उदाहरणों को देखा, वर्डप्रेस 6.1 अतिरिक्त तत्वों को स्टाइल करने का समर्थन करता है। में उन्हें रेखांकित करने वाली एक तालिका है "JSON तत्वों के साथ शैलियों को परिभाषित करना" अनुभाग।

आप शायद सोच रहे हैं कि कौन से JSON तत्व कौन से CSS गुणों का समर्थन करते हैं, यह उल्लेख करने के लिए नहीं कि आप उन्हें कैसे घोषित करेंगे। जब तक हम आधिकारिक दस्तावेज़ीकरण की प्रतीक्षा करते हैं, हमारे पास सबसे अच्छे संसाधन होने जा रहे हैं theme.json मौजूदा विषयों के लिए फ़ाइलें। मैं उनके द्वारा अनुकूलित किए गए तत्वों के आधार पर विषयों के लिंक प्रदान करने जा रहा हूं, और इंगित करता हूं कि कौन से गुण अनुकूलित किए गए हैं।

प्रत्येक देना सुनिश्चित करें theme.json एक अच्छा रूप दर्ज करें क्योंकि इन विषयों में ब्लॉक-स्तरीय स्टाइलिंग के उत्कृष्ट उदाहरण शामिल हैं styles.blocks वस्तु।

ऊपर लपेटकर

पूर्ण-साइट संपादक में बार-बार परिवर्तन होते जा रहे हैं कई लोगों के लिए जलन के प्रमुख स्रोतसहित, तकनीक की समझ रखने वाले गुटेनबर्ग उपयोगकर्ता. यहां तक ​​​​कि बहुत ही सरल सीएसएस नियम, जो क्लासिक थीम के साथ अच्छी तरह से काम करते हैं, ब्लॉक थीम के लिए काम नहीं करते क्योंकि विशिष्टता की नई परतें हमने पहले कवर किया था।

के बारे में ए गिटहब प्रस्ताव साइट संपादक को नए ब्राउज़र मोड में पुन: डिज़ाइन करने के लिए, सारा गुडिंग WP टैवर्न पोस्ट में लिखती हैं:

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

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

संदर्भ

मैं उन सभी संसाधनों को सूचीबद्ध कर रहा हूँ जिनका उपयोग मैंने इस लेख के लिए जानकारी पर शोध करते समय किया था।

JSON तत्व

ग्लोबल स्टाइल्स

स्टाइल इंजन

पढ़ने के लिए धन्यवाद! मुझे ब्लॉक थीम का उपयोग करने और आप अपने सीएसएस को कैसे प्रबंधित करते हैं, इस पर आपके अपने विचार सुनना अच्छा लगेगा।