वर्डप्रेस ब्लॉक थीम्स में नए विवश लेआउट का उपयोग करना

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

यह अभी तक वहाँ नहीं है! यदि हम ट्वेंटी ट्वेंटी (TT2) डिफ़ॉल्ट थीम को देखें, तो दो मुख्य अनसुलझे मुद्दे थे: स्टाइलिंग इंटरैक्शन (पसंद :hover, :active, :focus), और मार्जिन और लेआउट कंटेनरों की गद्दी. आप देख सकते हैं कि कैसे उन्हें TT2 में अस्थायी रूप से ठीक किया गया था style.css इसे बनाने के बजाय फ़ाइल करें theme.json फ़ाइल.

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

हम किस तरह की दूरी की बात कर रहे हैं?

सबसे पहले, हमारे पास पहले से ही है रूट-लेवल पैडिंग जो पैडिंग का वर्णन करने का एक शानदार तरीका है तत्व। यह अच्छा है क्योंकि यह सभी पृष्ठों और पोस्ट पर साझा किए जाने वाले तत्व पर लगातार रिक्ति सुनिश्चित करता है।

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

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

चलो साथ - साथ शुरू करते हैं…

रूट-लेवल पैडिंग

दोबारा, यह नया नहीं है। हमारे पास पैडिंग को सेट करने की क्षमता है में तत्व theme.json प्रयोगात्मक के बाद से गुटेनबर्ग प्लगइन इसे संस्करण 11.7 में पेश किया। हम इसे पर सेट करते हैं styles.spacing वस्तु, जहाँ हमारे पास है margin और padding शरीर पर ऊपर, दाएँ, नीचे और बाएँ रिक्ति को परिभाषित करने के लिए ऑब्जेक्ट:

{
  "version": 2,
  "styles": {
    "spacing": {
      "margin": {
        "top": "60px",
        "right": "30px",
        "bottom": "60px",
        "left": "30px"
      },
      "padding": {
        "top": "30px",
        "right": "30px",
        "bottom": "30px",
        "left": "30px"
      }
    }
  }
}

यह एक वैश्विक सेटिंग है। इसलिए, अगर हमें DevTools को खोलना है और उसका निरीक्षण करना है तत्व, हम इन सीएसएस शैलियों को देखेंगे:

body {
  margin-top: 60px;
  margin-right: 30px;
  margin-bottom: 60px;
  margin-left: 30px;
  padding-top: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  padding-left: 30px;
}

ठंडा। लेकिन यहाँ यह मुद्दा निहित है कि कैसे दुनिया में हम कुछ ब्लॉकों को पूर्ण स्क्रीन, किनारे से किनारे तक भरने के लिए उस रिक्ति से बाहर निकलने की अनुमति दे सकते हैं। इसलिए रिक्ति है, है ना? ऐसा होने से रोकने में मदद करता है!

लेकिन वास्तव में ऐसे बहुत से मामले हैं जहां आप ब्लॉक एडिटर में काम करते समय एक बार के उदाहरण पर उस रिक्ति को तोड़ना चाह सकते हैं। कहते हैं कि हम एक पृष्ठ पर एक छवि ब्लॉक लगाते हैं और हम चाहते हैं कि यह पूर्ण-चौड़ाई में चले, जबकि बाकी सामग्री रूट-लेवल पैडिंग का सम्मान करती है?

दर्ज…

पैडिंग-जागरूक संरेखण

में सभी शैलियों को परिभाषित करने वाली पहली डिफ़ॉल्ट वर्डप्रेस थीम बनाने का प्रयास करते समय theme.json फ़ाइल, लीड डिज़ाइनर केजेल रेगस्टैड इसमें रूट-लेवल पैडिंग को तोड़ने के चुनौतीपूर्ण पहलुओं को दिखाता है GitHub मुद्दा.

इस समस्या को हल करने के लिए वर्डप्रेस 6.1 में नई सुविधाएँ बनाई गई हैं। आइए उन अगले में खुदाई करें।

useRootPaddingAwareAlignments

एक नया useRootPaddingAwareAlignments संपत्ति समस्या का समाधान करने के लिए बनाई गई थी। यह वास्तव में पहली बार Gutenberg plugin v13.8 में पेश किया गया था। मूल पुल अनुरोध यह कैसे काम करता है पर एक अच्छा प्राइमर है।

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "useRootPaddingAwareAlignments": true,
    // etc.
  },

सबसे पहले, ध्यान दें कि यह एक ऐसी सुविधा है जिसे हमें चुनना है। संपत्ति पर सेट है false डिफ़ॉल्ट रूप से और हमें इसे स्पष्ट रूप से सेट करना होगा true इसे सक्षम करने के लिए। यह भी ध्यान दें कि हमारे पास है appearanceTools करने के लिए सेट true किया जा सकता है। यह हमें UI नियंत्रणों में शामिल करता है साइट एडिटर में स्टाइलिंग बॉर्डर्स, लिंक कलर्स, टाइपोग्राफी, और, हां, स्पेसिंग जिसमें मार्जिन और पैडिंग शामिल है।

की स्थापना appearanceTools करने के लिए सेट true स्वचालित रूप से मार्जिन और पैडिंग में ब्लॉक का चयन करता है बिना सेट किए settings.spacing.padding or setting.spacing.margin सेवा मेरे true.

जब हम सक्षम करते हैं useRootPaddingAwareAlignments, हमें रूट पैडिंग मानों के साथ कस्टम गुण प्रदान किए जाते हैं जो कि पर सेट होते हैं सामने के छोर पर तत्व। दिलचस्प बात यह है कि यह पैडिंग को भी लागू करता है .editor-styles-wrapper क्लास ताकि बैक-एंड ब्लॉक एडिटर में काम करते समय रिक्ति प्रदर्शित हो। बहुत अच्छा!

खुदाई करते समय मैं DevTools में उन CSS कस्टम गुणों की पुष्टि करने में सक्षम था।

सक्षम करने से useRootPaddingAwareAlignments ऊपर दी गई वैश्विक शैलियाँ छवि में "सामग्री" चौड़ाई और "विस्तृत" चौड़ाई मानों का समर्थन करने वाले किसी भी ब्लॉक के लिए बाएँ और दाएँ पैडिंग को भी लागू करता है। हम उन मानों को इसमें भी परिभाषित कर सकते हैं theme.json:

{
  "version": 2,
  "settings": {
    "layout": {
      "contentSize": "640px",
      "wideSize": "1000px"
    }
  }
}

यदि वैश्विक शैलियाँ सेटिंग्स में परिभाषित की गई सेटिंग से भिन्न हैं theme.json, तो ग्लोबल स्टाइल्स को प्राथमिकता दी जाती है। आप ब्लॉक थीम शैलियों को प्रबंधित करने के बारे में सब कुछ सीख सकते हैं मेरे पिछले लेख में.

• contentSize ब्लॉक के लिए डिफ़ॉल्ट चौड़ाई है।
• wideSize एक "विस्तृत" लेआउट विकल्प प्रदान करता है और ब्लॉक को फैलाने के लिए एक व्यापक स्तंभ स्थापित करता है।

तो, वह अंतिम कोड उदाहरण हमें निम्नलिखित CSS देगा:

/* The default content container */
.wp-container-[id] > * {
  max-width: 640px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* The wider content container */
.wp-container-[id] > .alignwide {
  max-width: 1000px;
}

[id] वर्डप्रेस द्वारा स्वचालित रूप से उत्पन्न एक अद्वितीय संख्या को इंगित करता है।

लेकिन अंदाजा लगाइए कि हमें और क्या मिलता है? पूर्ण संरेखण भी!

.wp-container-[id] .alignfull {
  max-width: none;
}

देखना है कि? सक्षम करके useRootPaddingAwareAlignments और परिभाषित contentSize और wideSize, हम पृष्ठों और पोस्ट में जोड़े गए ब्लॉक की चौड़ाई को नियंत्रित करने के लिए कुल तीन कंटेनर कॉन्फ़िगरेशन के लिए एक पूर्ण संरेखण सीएसएस वर्ग भी प्राप्त करते हैं।

यह निम्नलिखित लेआउट-विशिष्ट ब्लॉकों पर लागू होता है: कॉलम, समूह, पोस्ट सामग्री और क्वेरी लूप।

ब्लॉक लेआउट नियंत्रण

मान लीजिए कि हम उन पूर्वोक्त लेआउट-विशिष्ट ब्लॉकों में से किसी को एक पृष्ठ पर जोड़ते हैं। जब हम ब्लॉक का चयन करते हैं, तो ब्लॉक सेटिंग UI हमें इसके आधार पर नई लेआउट सेटिंग प्रदान करता है settings.layout जिन मूल्यों को हमने परिभाषित किया है theme.json (या ग्लोबल स्टाइल्स यूआई)।

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

यदि हम टॉगल को चालू छोड़ देते हैं, तो नेस्टेड ब्लॉक या तो का पालन करेंगे contentWidth or wideWidth मान (उस पर थोड़ा और अधिक)। या हम कस्टम को परिभाषित करने के लिए न्यूमेरिक इनपुट का उपयोग कर सकते हैं contentWidth और wideWidth इस एकबारगी उदाहरण में मान। यह बहुत अच्छा लचीलापन है!

चौड़े ब्लॉक

हमने अभी जो सेटिंग्स देखीं, वे पैरेंट ब्लॉक पर सेट हैं। एक बार जब हम एक ब्लॉक को अंदर नेस्ट कर लेते हैं और उसका चयन कर लेते हैं, तो हमारे पास उस ब्लॉक का उपयोग करने के लिए अतिरिक्त विकल्प होते हैं contentWidth, wideWidth, या पूरी चौड़ाई में जाएं.

ध्यान दें कि कैसे वर्डप्रेस रूट-लेवल पैडिंग CSS कस्टम गुणों को गुणा करता है -1 "पूर्ण चौड़ाई" विकल्प का चयन करते समय नकारात्मक मार्जिन बनाने के लिए।

प्रतिबंधित लेआउट का उपयोग करना

हमने अभी वर्डप्रेस 6.1 के साथ मिलने वाली नई रिक्ति और संरेखण को कवर किया है। वे ब्लॉक और ब्लॉक के भीतर किसी भी नेस्टेड ब्लॉक के लिए विशिष्ट हैं। लेकिन वर्डप्रेस 6.1 थीम के टेम्प्लेट में और भी अधिक लचीलेपन और स्थिरता के लिए नई लेआउट सुविधाओं को भी पेश करता है।

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

फ्लेक्स, फ्लो और कंस्ट्रेन्ड लेआउट

इन तीन लेआउट प्रकारों के बीच का अंतर उन शैलियों का है जो वे आउटपुट करते हैं। इसाबेल ब्रिसन का लेखन उत्कृष्ट है यह अच्छी तरह से अंतरों को रेखांकित करता है, लेकिन आइए संदर्भ के लिए उन्हें यहां संक्षिप्त करें:

• प्रवाह लेआउट: में नेस्टेड ब्लॉक के बीच वर्टिकल स्पेसिंग जोड़ता है margin-block दिशा। उन नेस्टेड ब्लॉकों को बाएँ, दाएँ या केंद्र से भी जोड़ा जा सकता है।
• प्रतिबंधित लेआउट: फ्लो लेआउट के समान सटीक डील, लेकिन नेस्टेड ब्लॉक पर चौड़ाई की कमी के साथ जो पर आधारित हैं contentWidth और wideWidth सेटिंग्स (या तो में theme.json या ग्लोबल स्टाइल्स)।
• फ्लेक्स लेआउट: यह वर्डप्रेस 6.1 में अपरिवर्तित था। यह उपयोगकर्ता है सीएसएस फ्लेक्सबॉक्स एक लेआउट बनाने के लिए जो डिफ़ॉल्ट रूप से क्षैतिज रूप से (एक पंक्ति में) प्रवाहित होता है, लेकिन लंबवत रूप से भी प्रवाहित हो सकता है, इसलिए ब्लॉक एक के ऊपर एक ढेर हो जाते हैं। CSS का उपयोग करके रिक्ति लागू की जाती है gap संपत्ति।

लेआउट प्रकार का यह नया स्लेट प्रत्येक लेआउट के लिए सिमेंटिक क्लास नाम बनाता है:

सिमेंटिक लेआउट क्लास	लेआउट प्रकार	समर्थित ब्लॉक
.is-layout-flow	प्रवाह लेआउट	कॉलम, समूह, पोस्ट सामग्री और क्वेरी लूप।
.is-layout-constrained	विवश लेआउट	कॉलम, समूह, पोस्ट सामग्री और क्वेरी लूप।
.is-layout-flex	फ्लेक्स लेआउट	कॉलम, बटन, सामाजिक चिह्न

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

प्रतिबंधित लेआउट का समर्थन करने के लिए अपनी थीम को अपडेट करना

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

{
  "version": 2,
  "settings": {
    "layout": {
      "type": "constrained", // replaces `"inherit": true`
      "type": "default", // replaces `"inherit": false`
    }
  }
}

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

लेआउट शैलियों को अक्षम करना

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

// Remove layout styles.
add_theme_support( 'disable-layout-styles' );

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

ऊपर लपेटकर

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

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

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

इस गिटहब अंक #44720 लेआउट संबंधी चर्चाओं को सूचीबद्ध करता है वर्डप्रेस 6.2 के लिए स्लेटेड.

अतिरिक्त संसाधन

इस सब में खुदाई करते समय मैंने बहुत सारे स्रोतों से परामर्श किया और उनका संदर्भ दिया। यहाँ उन चीजों की एक बड़ी राजभाषा सूची है जो मुझे मददगार लगीं और मुझे लगता है कि आप भी इसका आनंद ले सकते हैं।

ट्यूटोरियल

वर्डप्रेस पोस्ट

गिटहब पुल अनुरोध और मुद्दे