ورڈپریس بلاک تھیمز میں اسٹائلنگ بٹن

تھوڑی دیر پہلے ، گنیش دہل نے یہاں CSS-Tricks پر ایک پوسٹ لکھی۔ ایک ٹویٹ کا جواب دیتے ہوئے جس میں ورڈپریس بلاکس اور عناصر پر سی ایس ایس باکس شیڈو شامل کرنے کے بارے میں پوچھا گیا تھا۔ وہاں بہت ساری عمدہ چیزیں ہیں جو ورڈپریس 6.1 میں بھیجی گئی نئی خصوصیات کا فائدہ اٹھاتی ہیں جو بلاک ایڈیٹر اور سائٹ ایڈیٹر UI میں براہ راست چیزوں پر شیڈو لگانے کے لیے کنٹرول فراہم کرتی ہیں۔

گنیش نے اس پوسٹ میں بٹن عناصر کو مختصراً چھوا۔ میں اسے اٹھانا چاہتا ہوں اور ورڈپریس بلاک تھیمز میں اسٹائلنگ بٹنوں کے نقطہ نظر میں گہرائی میں جانا چاہتا ہوں۔ خاص طور پر، ہم ایک تازہ کھولنے کے لئے جا رہے ہیں 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. یہ سلیکٹر ایچ ٹی ایم ایل عناصر کو نشانہ بناتا ہے جو بلاکس کے درمیان مشترکہ ہوتے ہیں۔ یہ وہ بنیادی شیل ہے جس کے ساتھ ہم کام کر رہے ہیں:

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

تو ہمیں کیا کرنے کی ضرورت ہے a کی وضاحت کریں۔ button عنصر

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

کہ button HTML عناصر سے مماثل ہے جو سامنے والے سرے پر بٹن عناصر کو نشان زد کرنے کے لیے استعمال ہوتے ہیں۔ ان بٹنوں میں ایچ ٹی ایم ایل ٹیگز ہوتے ہیں جو کہ ہمارے دو بٹن اقسام میں سے کسی ایک میں سے ہو سکتے ہیں: ایک اسٹینڈ اکیلا جزو (یعنی بٹن بلاک) یا ایک جزو دوسرے بلاک (مثلاً پوسٹ کمنٹ بلاک) کے اندر اندر بنا ہوا ہے۔

ہر ایک بلاک کو اسٹائل کرنے کے بجائے، ہم مشترکہ اسٹائل بناتے ہیں۔ آئیے آگے بڑھیں اور اپنے تھیم میں دونوں قسم کے بٹنوں کے لیے پہلے سے طے شدہ پس منظر اور متن کا رنگ تبدیل کریں۔ وہاں ایک color وہاں اعتراض ہے کہ، بدلے میں، حمایت کرتا ہے background اور text خصوصیات جہاں ہم اپنی مطلوبہ اقدار کو سیٹ کرتے ہیں:

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

یہ دونوں قسم کے بٹن کا رنگ تبدیل کرتا ہے:

اگر DevTools کو کھولیں اور CSS پر ایک نظر ڈالیں جو ورڈپریس بٹنوں کے لیے تیار کرتا ہے، تو ہم دیکھتے ہیں کہ .wp-element-button کلاس ان شیلیوں کو شامل کرتا ہے جن کی ہم نے وضاحت کی ہے۔ theme.json:

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

یہ ہمارے پہلے سے طے شدہ رنگ ہیں! اگلا، ہم صارفین کو بصری تاثرات دینا چاہتے ہیں جب وہ بٹن کے ساتھ تعامل کرتے ہیں۔

انٹرایکٹو بٹن اسٹائل کو نافذ کرنا

چونکہ یہ سی ایس ایس کے بارے میں ایک سائٹ ہے، میں شرط لگا سکتا ہوں کہ آپ میں سے بہت سے لوگ پہلے سے ہی لنکس اور بٹنوں کی انٹرایکٹو حالتوں سے واقف ہیں۔ ہم کر سکتے ہیں :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. } } } } }
}

ان بٹنوں کا کیا ہوگا جو بلاکس میں نہیں ہیں؟

ورڈپریس خود بخود ان بٹن اسٹائلز کو آؤٹ پٹ کرنے کے لیے صحیح کلاسز تیار اور لاگو کرتا ہے۔ لیکن کیا ہوگا اگر آپ "ہائبرڈ" ورڈپریس تھیم استعمال کرتے ہیں جو بلاکس اور فل سائٹ ایڈیٹنگ کو سپورٹ کرتا ہے، لیکن اس میں "کلاسک" پی ایچ پی ٹیمپلیٹس بھی شامل ہیں؟ یا اگر آپ نے ایک حسب ضرورت بلاک بنایا ہے، یا یہاں تک کہ ایک میراثی شارٹ کوڈ ہے، جس میں بٹن ہیں؟ ان میں سے کوئی بھی اس کے ذریعہ سنبھالا نہیں جاتا ہے۔ ورڈپریس اسٹائل انجن!

کوئی غم نہیں. ان تمام معاملات میں، آپ شامل کریں گے۔ .wp-element-button ٹیمپلیٹ، بلاک، یا شارٹ کوڈ مارک اپ میں کلاس۔ ورڈپریس کے ذریعہ تیار کردہ طرزیں پھر ان مثالوں میں لاگو ہوں گی۔

اور کچھ ایسے حالات بھی ہوسکتے ہیں جہاں مارک اپ پر آپ کا کوئی کنٹرول نہیں ہے۔ مثال کے طور پر، کچھ بلاک پلگ ان قدرے زیادہ رائے رکھنے والے ہو سکتے ہیں اور آزادانہ طور پر اپنا اسٹائل لگا سکتے ہیں۔ یہ وہ جگہ ہے جہاں آپ عام طور پر بلاک کے سیٹنگ پینل میں "ایڈوانسڈ" آپشن پر جا سکتے ہیں اور وہاں کلاس کو لاگو کر سکتے ہیں:

اپ ریپنگ

میں "CSS" لکھتے وقت theme.json پہلے تو عجیب محسوس ہو سکتا ہے، میں نے محسوس کیا ہے کہ یہ دوسری فطرت بن جاتی ہے۔ CSS کی طرح، خصوصیات کی ایک محدود تعداد ہے جسے آپ صحیح سلیکٹرز کا استعمال کرتے ہوئے یا تو وسیع یا بہت تنگ انداز میں لاگو کر سکتے ہیں۔

اور آئیے استعمال کرنے کے تین اہم فوائد کو نہ بھولیں۔ theme.json:

1. اسٹائلز فرنٹ اینڈ ویو اور بلاک ایڈیٹر دونوں میں بٹنوں پر لاگو ہوتے ہیں۔
2. آپ کا CSS مستقبل کے ورڈپریس اپ ڈیٹس کے ساتھ مطابقت رکھتا ہے۔
3. تیار کردہ طرزیں بلاک تھیمز اور کلاسک تھیمز کے ساتھ یکساں کام کرتی ہیں — الگ اسٹائل شیٹ میں کسی بھی چیز کو نقل کرنے کی ضرورت نہیں ہے۔

اگر آپ نے استعمال کیا ہے theme.json آپ کے منصوبوں میں طرزیں، براہ کرم اپنے تجربات اور خیالات کا اشتراک کریں۔ میں کسی بھی تبصرے اور آراء کو پڑھنے کے منتظر ہوں!

• SEO سے چلنے والا مواد اور PR کی تقسیم۔ آج ہی بڑھا دیں۔
• پلیٹو بلاک چین۔ Web3 Metaverse Intelligence. علم میں اضافہ۔ یہاں تک رسائی حاصل کریں۔
• ماخذ: https://css-tricks.com/styling-buttons-in-wordpress-block-themes/