वर्डप्रेस ब्लॉक थीम्स में स्टाइलिंग बटन

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

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

बटन क्यों, तुम पूछते हो? यह एक अच्छा सवाल है तो चलिए इसके साथ शुरू करते हैं।

विभिन्न प्रकार के बटन

जब हम वर्डप्रेस ब्लॉक एडिटर के संदर्भ में बटनों के बारे में बात कर रहे हैं, तो हमें दो अलग-अलग प्रकारों के बीच अंतर करना होगा:

1. चाइल्ड बटन ब्लॉक के अंदर ब्लॉक हो जाता है
2. बटन जो अन्य ब्लॉक के अंदर नेस्टेड हैं (उदाहरण के लिए पोस्ट कमेंट्स फॉर्म ब्लॉक)

यदि हम इन दोनों ब्लॉकों को एक टेम्प्लेट में जोड़ते हैं, तो उनका डिफ़ॉल्ट रूप से समान रूप होता है।

लेकिन मार्कअप बहुत अलग है:

<div class="wp-block-button"> <a class="wp-block-button__link wp-element-button">Button 1</a>
</div>
<p class="form-submit wp-block-button"> <input name="submit" type="submit" id="submit" class="wp-block-button__link wp-element-button" value="Post Comment"> </p>

जैसा कि हम देख सकते हैं, HTML टैग के नाम अलग-अलग हैं। यह सामान्य वर्ग है - .wp-block-button और .wp-element-button - जो दो बटनों के बीच लगातार स्टाइल सुनिश्चित करता है।

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

तो, हम बटन शैलियों को कैसे परिभाषित करते हैं theme.json वास्तविक सीएसएस लिखे बिना? इसे साथ मिलकर करतें हैं।

आधार शैलियों का निर्माण

theme.json स्कीमा का एक संरचित सेट है जिसे प्रॉपर्टी: वैल्यू पेयर में लिखा गया है। शीर्ष स्तर की संपत्तियों को "अनुभाग" कहा जाता है, और हम इसके साथ काम करने जा रहे हैं styles खंड। यह वह जगह है जहाँ सभी स्टाइलिंग निर्देश चलते हैं।

हम विशेष रूप से पर ध्यान केंद्रित करेंगे elements में styles. यह चयनकर्ता ब्लॉक के बीच साझा किए गए HTML तत्वों को लक्षित करता है। यह मूल शेल है जिसके साथ हम काम कर रहे हैं:

// theme.json
{ "version": 2, "styles": { "elements": { // etc. } }
}

तो हमें क्या करने की जरूरत है एक परिभाषित करें button तत्व।

={ "version": 2, "styles": { "elements": { "button": { // etc. } } }
}

कि button HTML तत्वों से मेल खाता है जिसका उपयोग फ्रंट एंड पर बटन तत्वों को चिह्नित करने के लिए किया जाता है। इन बटनों में HTML टैग होते हैं जो हमारे दो बटन प्रकारों में से एक हो सकते हैं: एक स्टैंडअलोन घटक (यानी बटन ब्लॉक) या किसी अन्य ब्लॉक के भीतर नेस्टेड घटक (उदाहरण पोस्ट टिप्पणी ब्लॉक)।

प्रत्येक अलग-अलग ब्लॉक को स्टाइल करने के बजाय, हम साझा स्टाइल बनाते हैं। आइए आगे बढ़ते हैं और अपनी थीम में दोनों प्रकार के बटनों के लिए डिफ़ॉल्ट पृष्ठभूमि और टेक्स्ट का रंग बदलते हैं। वहां एक color वस्तु वहाँ है, जो बदले में, समर्थन करती है background और text गुण जहां हम वे मान सेट करते हैं जो हम चाहते हैं:

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } } } }
}

यह दोनों प्रकार के बटन का रंग बदलता है:

यदि DevTools को खोलें और उस CSS पर एक नज़र डालें जिसे WordPress बटनों के लिए उत्पन्न करता है, तो हम देखते हैं कि .wp-element-button वर्ग उन शैलियों को जोड़ता है जिन्हें हमने परिभाषित किया है theme.json:

.wp-element-button { background-color: #17a2b8; color: #ffffff;
}

वे हमारे डिफ़ॉल्ट रंग हैं! अगला, हम उपयोगकर्ताओं को बटन के साथ इंटरैक्ट करने पर विज़ुअल फ़ीडबैक देना चाहते हैं।

इंटरैक्टिव बटन शैलियों को लागू करना

चूँकि यह साइट पूरी तरह से CSS के बारे में है, मैं शर्त लगा सकता हूँ कि आप में से कई पहले से ही लिंक्स और बटनों की इंटरएक्टिव स्थितियों से परिचित होंगे। हम कर सकते हैं :hover उन पर माउस कर्सर, उन्हें टैब करें :focus, उन्हें बनाने के लिए उन पर क्लिक करें :active. अरे, यहाँ तक कि एक भी है :visited राज्य उपयोगकर्ताओं को एक दृश्य संकेत देने के लिए कि उन्होंने इसे पहले क्लिक किया है।

वो है सीएसएस छद्म वर्ग और हम उनका उपयोग किसी लिंक या बटन के इंटरैक्शन को लक्षित करने के लिए करते हैं.

CSS में, हम a को स्टाइल कर सकते हैं :hover राज्य इस प्रकार है:

a:hover { /* Styles */
}

In theme.json, हम इन स्यूडो-क्लासेस के साथ अपने मौजूदा बटन डिक्लेरेशन का विस्तार करने जा रहे हैं।

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } ":hover": { "color": { "background": "#138496" } }, ":focus": { "color": { "background": "#138496" } }, ":active": { "color": { "background": "#138496" } } } } }
}

इसकी "संरचित" प्रकृति पर ध्यान दें। हम मूल रूप से एक रूपरेखा का अनुसरण कर रहे हैं:

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

स्टाइलिंग बटन अलग-अलग ब्लॉक में नेस्टेड हैं

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

यह ब्लॉक बटन ब्लॉक की तुलना में अधिक जटिल है क्योंकि इसमें अधिक गतिमान भाग हैं: फॉर्म, इनपुट, शिक्षाप्रद टेक्स्ट और बटन। इस ब्लॉक में बटन को लक्षित करने के लिए, हमें उसी प्रकार की JSON संरचना का पालन करना होगा जो हमने इसके लिए किया था button तत्व, लेकिन पोस्ट कमेंट फॉर्म ब्लॉक पर लागू होता है, जिसे मैप किया जाता है core/post-comments-form तत्व:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { // etc. } } }
}

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

JSON संरचना तत्वों के भीतर तत्वों का समर्थन करती है। तो, अगर वहाँ है button पोस्ट कमेंट फॉर्म ब्लॉक में तत्व, हम इसे इसमें लक्षित कर सकते हैं core/post-comments-form खंड मैथा:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } } } } } }
}

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

वर्डप्रेस द्वारा उत्पन्न सीएसएस के परिणामस्वरूप एक अधिक सटीक चयनकर्ता है:

.wp-block-post-comments-form .wp-element-button,
.wp-block-post-comments-form .wp-block-button__link { background-color: #007bff;
}

और क्या होगा अगर हम पोस्ट टिप्पणी फॉर्म बटन के लिए विभिन्न इंटरैक्टिव शैलियों को परिभाषित करना चाहते हैं? यह वही सौदा है जिस तरह से हमने इसे डिफ़ॉल्ट शैलियों के लिए किया था, केवल उन्हें अंदर परिभाषित किया गया है core/post-comments-form खंड मैथा:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } ":hover": { "color": { "background": "#138496" } }, // etc. } } } } }
}

उन बटनों के बारे में क्या जो ब्लॉक में नहीं हैं?

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

चिंता न करें। उन सभी मामलों में, आप जोड़ देंगे .wp-element-button टेम्प्लेट, ब्लॉक या शोर्ट मार्कअप में क्लास। वर्डप्रेस द्वारा उत्पन्न शैलियों को तब उन उदाहरणों में लागू किया जाएगा।

और ऐसी कुछ स्थितियाँ हो सकती हैं जहाँ आपका मार्कअप पर कोई नियंत्रण नहीं है। उदाहरण के लिए, कुछ ब्लॉक प्लगइन थोड़े बहुत राय वाले हो सकते हैं और उदारतापूर्वक अपनी स्टाइल लागू कर सकते हैं। यहीं पर आप आमतौर पर ब्लॉक के सेटिंग पैनल में "उन्नत" विकल्प पर जा सकते हैं और वहां कक्षा लागू कर सकते हैं:

ऊपर लपेटकर

में "सीएसएस" लिखते समय theme.json पहली बार में अजीब लग सकता है, मैंने पाया है कि यह दूसरी प्रकृति बन जाती है। CSS की तरह, सीमित संख्या में गुण हैं जिन्हें आप सही चयनकर्ताओं का उपयोग करके या तो व्यापक रूप से या बहुत संकीर्ण रूप से लागू कर सकते हैं।

और आइए उपयोग करने के तीन मुख्य लाभों को न भूलें theme.json:

1. शैलियों को फ्रंट-एंड व्यू और ब्लॉक एडिटर दोनों में बटन पर लागू किया जाता है।
2. आपका सीएसएस भविष्य के वर्डप्रेस अपडेट के साथ संगत होगा।
3. जेनरेट की गई शैलियाँ ब्लॉक थीम और क्लासिक थीम के साथ समान रूप से काम करती हैं — अलग स्टाइलशीट में किसी चीज़ की नकल करने की कोई आवश्यकता नहीं है।

अगर आपने इस्तेमाल किया है theme.json अपनी परियोजनाओं में शैलियों, कृपया अपने अनुभव और विचार साझा करें। मैं किसी भी टिप्पणी और प्रतिक्रिया को पढ़ने के लिए उत्सुक हूं!

• एसईओ संचालित सामग्री और पीआर वितरण। आज ही प्रवर्धित हो जाओ।
• प्लेटोब्लॉकचैन। Web3 मेटावर्स इंटेलिजेंस। ज्ञान प्रवर्धित। यहां पहुंचें।
• स्रोत: https://css-tricks.com/styling-buttons-in-wordpress-block-themes/