جس طرح سے ہم ورڈپریس تھیمز کے لیے CSS لکھتے ہیں وہ بڑی تبدیلیوں کے درمیان ہے۔ میں نے حال ہی میں ایک تکنیک کا اشتراک کیا۔ ورڈپریس میں سیال قسم کی مدد شامل کرنا کی راہ کی طرف theme.json، ایک نئی فائل جو ورڈپریس سخت زور دے رہا ہے۔ ورڈپریس تھیمز میں اسٹائل کی وضاحت کرنے کے لیے سچائی کا مرکزی ذریعہ بننے کے لیے جو فل سائٹ ایڈیٹنگ (FSE) کی خصوصیات کو سپورٹ کرتے ہیں۔

رکو، نہیں style.css فائل؟ ہمارے پاس اب بھی وہ ہے۔ حقیقت میں، style.css is اب بھی ایک مطلوبہ فائل بلاک تھیمز میں، اگرچہ تھیم کو رجسٹر کرنے کے لیے استعمال ہونے والی میٹا معلومات تک اس کا کردار بہت کم ہے۔ اس نے کہا، حقیقت یہ ہے کہ theme.json ابھی بھی فعال ترقی میں ہے، مطلب کہ ہم ایک عبوری دور میں ہیں جہاں آپ کو وہاں کی تعریفیں مل سکتی ہیں، styles.css یا بلاک سطح پر بھی۔

تو، ان ورڈپریس FSE دنوں میں اسٹائل دراصل کیسا لگتا ہے؟ میں اس مضمون میں اسی کا احاطہ کرنا چاہتا ہوں۔ میں اسٹائل بلاک تھیمز کے لیے دستاویزات کی کمی ہے۔ ورڈپریس تھیم ڈویلپر ہینڈ بک، لہذا ہم یہاں ہر چیز کا احاطہ کر رہے ہیں جو میں نے اس بارے میں جمع کیا ہے کہ چیزیں اس وقت کہاں ہیں نیز ورڈپریس تھیمنگ کے مستقبل کے بارے میں بات چیت۔

ورڈپریس طرزوں کا ارتقاء

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

ایک اور طریقہ جس سے ہم یہ محسوس کر سکتے ہیں کہ ہم کہاں ہیں کے ارتقاء کو دیکھ کر پہلے سے طے شدہ ورڈپریس تھیمز. آج تک، تین ڈیفالٹ تھیمز ہیں جو مکمل سائٹ میں ترمیم کی حمایت کرتے ہیں:

لیکن CSS میں ٹریڈنگ شروع نہ کریں۔ style.css JSON پراپرٹی ویلیو کے جوڑوں کے لیے theme.json ابھی تک ابھی بھی سی ایس ایس اسٹائل کے قواعد موجود ہیں جن میں تعاون کی ضرورت ہے۔ theme.json اس سے پہلے کہ ہم ایسا کرنے کے بارے میں سوچیں۔ باقی اہم مسائل پر فی الحال بحث کی جارہی ہے جس کا مقصد CSS طرز کے تمام اصولوں کو مکمل طور پر منتقل کرنا ہے۔ theme.json اور کے مختلف ذرائع کو اکٹھا کریں۔ theme.json ایک میں عالمی طرزیں ترتیب دینے کے لیے UI براہ راست میں ورڈپریس سائٹ ایڈیٹر.

یہ ہمیں نسبتاً مشکل جگہ پر چھوڑ دیتا ہے۔ نہ صرف وہاں ہے۔ اوور رائیڈنگ تھیم اسٹائل کے لیے کوئی واضح راستہ نہیں ہے۔، لیکن یہ واضح نہیں ہے کہ ان طرزوں کا ماخذ کہاں سے آیا ہے - کیا یہ مختلف پرتوں سے ہے theme.json فائلوں، style.css، Gutenberg پلگ ان، یا کہیں اور؟

کیوں theme.json بجائے style.css?

آپ سوچ رہے ہوں گے کہ ورڈپریس روایتی سی ایس ایس فائل کے بجائے اسٹائلز کی JSON پر مبنی تعریف کی طرف کیوں بڑھ رہا ہے۔ گوٹن برگ ڈویلپمنٹ ٹیم کے بین ڈوئیر نے فصاحت کے ساتھ واضح کیا کہ کیوں theme.json نقطہ نظر تھیم ڈویلپرز کے لئے ایک فائدہ ہے۔.

یہ بین کی پوسٹ پڑھنے کے قابل ہے، لیکن گوشت اس اقتباس میں ہے:

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

تھیم مصنفین کو استعمال کرنے کی ترغیب دے کر theme.json API جہاں ممکن ہو، "بیس> تھیم> صارف" کی وضاحت شدہ طرزوں کے درجہ بندی کو صحیح طریقے سے حل کیا جاسکتا ہے۔

CSS کو JSON میں منتقل کرنے کا ایک بڑا فائدہ یہ ہے کہ JSON ایک مشین پڑھنے کے قابل فارمیٹ ہے، جس کا مطلب ہے کہ اسے ورڈپریس Site Editor UI میں API لا کر ظاہر کیا جا سکتا ہے، اس طرح صارفین کو پہلے سے طے شدہ اقدار میں ترمیم کرنے اور سائٹ کی ظاہری شکل کو اپنی مرضی کے مطابق بنانے کی اجازت ملتی ہے۔ کوئی بھی سی ایس ایس لکھنا۔ یہ مستقل طور پر بلاکس کو اسٹائل کرنے کا ایک طریقہ بھی فراہم کرتا ہے، جبکہ ایک ایسا ڈھانچہ فراہم کرتا ہے جو مخصوصیت کی تہوں کو تخلیق کرتا ہے جیسے کہ صارف کی ترتیبات ان میں بیان کردہ پر سب سے زیادہ ترجیح دیتی ہیں۔ theme.json. میں تھیم لیول اسٹائلز کے درمیان انٹرپلے theme.json اور گلوبل اسٹائلز UI میں صارف کی وضاحت کردہ طرزیں ہی JSON نقطہ نظر کو بہت دلکش بناتی ہیں۔

ڈیولپرز JSON میں مستقل مزاجی کو برقرار رکھتے ہیں، اور صارفین کوڈ سے کم تخصیصات کے ساتھ لچک حاصل کرتے ہیں۔ یہ ایک جیت ہے.

یقینی طور پر، اور بھی فوائد ہیں ڈبلیو پی انجن سے مائیک میک ایلسٹر اس ٹویٹر تھریڈ میں متعدد کی فہرست دیتے ہیں۔. آپ اس میں مزید فوائد حاصل کر سکتے ہیں۔ گہری بحث ورڈپریس کور بلاگ بنائیں۔ اور ایک بار جب آپ اسے پڑھ چکے ہیں، تو JSON اپروچ کے فوائد کا موازنہ کریں۔ کلاسک تھیمز میں اسٹائل کی وضاحت اور اوور رائڈ کرنے کے دستیاب طریقے.

JSON عناصر کے ساتھ اسٹائل کی وضاحت کرنا

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

اور ہم یہ وضاحت کرکے کرتے ہیں۔ JSON عناصر. عناصر کو انفرادی اجزاء کے طور پر سوچیں جو ورڈپریس بلاک میں رہتے ہیں۔ کہتے ہیں کہ ہمارے پاس ایک بلاک ہے جس میں ایک سرخی، ایک پیراگراف اور ایک بٹن ہے۔ وہ انفرادی ٹکڑے عناصر ہیں، اور ایک ہے elements اعتراض theme.json جہاں ہم ان کے انداز کی وضاحت کرتے ہیں:

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

JSON عناصر کو بیان کرنے کا ایک بہتر طریقہ تھیمز اور بلاکس کے لیے نچلے درجے کے اجزاء ہیں جنہیں بلاکس کی پیچیدگی کی ضرورت نہیں ہے۔ وہ ایچ ٹی ایم ایل پرائمیٹوز کی نمائندگی کرتے ہیں۔ جو بلاک میں بیان نہیں کیے گئے ہیں لیکن بلاکس میں استعمال کیے جا سکتے ہیں۔ ورڈپریس (اور گٹن برگ پلگ ان) میں ان کی حمایت کیسے کی جاتی ہے اس میں بیان کیا گیا ہے۔ بلاک ایڈیٹر ہینڈ بک اور اس مکمل سائٹ ایڈیٹنگ ٹیوٹوریل کیرولینا نیومارک کے ذریعہ۔

مثال کے طور پر، لنکس میں سٹائل کیا جاتا ہے elements اعتراض لیکن اپنے طور پر بلاک نہیں ہیں۔ لیکن ایک لنک کو ایک بلاک میں استعمال کیا جا سکتا ہے اور یہ اس پر بیان کردہ شیلیوں کا وارث ہوگا۔ elements.link اعتراض theme.json. یہ کسی عنصر کی تعریف کو مکمل طور پر شامل نہیں کرتا ہے، اگرچہ، کچھ عناصر بلاکس کے طور پر بھی رجسٹرڈ ہوتے ہیں، جیسے کہ ہیڈنگ اور بٹن بلاکس — لیکن ان بلاکس کو اب بھی دوسرے بلاکس میں استعمال کیا جا سکتا ہے۔

یہاں ان عناصر کی ایک جدول ہے جو اس وقت اسٹائل کے لیے دستیاب ہیں۔ theme.json, بشکریہ کیرولینا:

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

اس کے علاوہ، آپ یہ بھی دیکھنا شروع کر سکتے ہیں کہ کس طرح کی ساخت theme.json عالمی عناصر (جیسے headings) انفرادی عناصر تک (مثال کے طور پر h1)، اور بلاک سطح کی طرزیں (جیسے h1 ایک بلاک میں موجود ہے)۔

JSON عناصر پر اضافی معلومات دستیاب ہے۔ یہ ورڈپریس کی تجویز بنائیں اور یہ کھلا ٹکٹ گٹنبرگ پلگ ان کے GitHub ریپو میں۔

JSON اور CSS کی خصوصیت

آئیے سی ایس ایس کی خصوصیت کے بارے میں بات کرتے رہیں۔ میں نے پہلے ذکر کیا تھا کہ اسٹائلنگ کے لیے JSON نقطہ نظر ایک درجہ بندی قائم کرتا ہے۔ اور یہ سچ ہے۔ طرزیں جو JSON عناصر پر بیان کی گئی ہیں۔ theme.json پہلے سے طے شدہ تھیم اسٹائل سمجھے جاتے ہیں۔ اور گلوبل اسٹائلز UI میں صارف کی طرف سے سیٹ کردہ کوئی بھی چیز ڈیفالٹس کو اوور رائیڈ کر دے گی۔

دوسرے الفاظ میں: صارف کی طرزیں پہلے سے طے شدہ تھیم کے انداز سے زیادہ خاصیت رکھتی ہیں۔. آئیے بٹن بلاک پر ایک نظر ڈالتے ہیں کہ یہ کیسے کام کرتا ہے۔

میں استعمال کر رہا ہوں خالی تھیمایک خالی ورڈپریس تھیم جس میں سی ایس ایس اسٹائل نہیں ہے۔ میں ایک نئے صفحہ پر بٹن بلاک شامل کرنے جا رہا ہوں۔

ٹھیک ہے، ہم جانتے ہیں کہ ورڈپریس کور کچھ ہلکے اسٹائل کے ساتھ بھیجتا ہے۔ اب، میں ورڈپریس 3 سے ڈیفالٹ TT6.1 تھیم پر جا رہا ہوں اور اسے ایکٹیویٹ کرنے جا رہا ہوں۔ اگر میں بٹن کے ساتھ اپنے صفحہ کو ریفریش کرتا ہوں، تو بٹن انداز بدل دیتا ہے۔

آپ بالکل دیکھ سکتے ہیں۔ جہاں سے وہ نئے انداز آرہے ہیں۔ TT3 میں theme.json فائل یہ ہمیں بتاتا ہے کہ JSON عنصر کی طرزیں ورڈپریس کور کی طرز پر فوقیت رکھتی ہیں۔

اب میں TT3 کو a کے ساتھ اوور رائیڈ کرکے اس میں ترمیم کرنے جا رہا ہوں۔ theme.json چائلڈ تھیم میں فائل، جہاں بٹن بلاک کا پہلے سے طے شدہ پس منظر کا رنگ سرخ پر سیٹ ہوتا ہے۔

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

ہم نے دونوں بٹنوں کے پس منظر کے رنگ کو نیلے رنگ میں تبدیل کیا اور گلوبل اسٹائل UI کا استعمال کرتے ہوئے متن میں ترمیم کی۔ نوٹ کریں کہ وہاں سے نیلے رنگ کو تھیم کے انداز پر فوقیت حاصل ہے!

اسٹائل انجن

ورڈپریس بلاک تھیمز میں سی ایس ایس کی خصوصیت کو کس طرح منظم کیا جاتا ہے اس کا یہ ایک بہت ہی تیز، لیکن اچھا خیال ہے۔ لیکن یہ مکمل تصویر نہیں ہے کیونکہ یہ ابھی تک واضح نہیں ہے۔ کہاں وہ سٹائل پیدا ہوتے ہیں. ورڈپریس کے اپنے پہلے سے طے شدہ انداز ہیں جو کہیں سے آتے ہیں، ڈیٹا کو استعمال کرتے ہیں۔ theme.json اسٹائل کے مزید اصولوں کے لیے، اور گلوبل اسٹائلز میں سیٹ کردہ کسی بھی چیز کو اوور رائیڈ کرتا ہے۔

کیا وہ انداز ان لائن ہیں؟ کیا وہ الگ اسٹائل شیٹ میں ہیں؟ شاید وہ صفحہ پر ایک میں انجکشن کر رہے ہیں ?

یہی نیا ہے۔ اسٹائل انجن امید ہے کہ حل ہو جائے گا. اسٹائل انجن ورڈپریس 6.1 میں ایک نیا API ہے جس کا مقصد اس بات میں مستقل مزاجی لانا ہے کہ اسٹائل کیسے بنائے جاتے ہیں اور اسٹائل کہاں لاگو ہوتے ہیں۔ دوسرے لفظوں میں، یہ اسٹائل کے تمام ممکنہ ذرائع لیتا ہے اور بلاک اسٹائل کو صحیح طریقے سے تیار کرنے کے لیے واحد ذمہ دار ہے۔ میں جانتا ہوں میں جانتا ہوں. دیگر تجریدوں کے اوپر ایک اور تجرید صرف کچھ سٹائل کے مصنف کے لیے۔ لیکن اسٹائلز کے لیے مرکزی API کا ہونا شاید سب سے خوبصورت حل ہے اس لیے کہ اسٹائل کئی جگہوں سے آسکتے ہیں۔

ہمیں صرف اسٹائل انجن پر پہلی نظر مل رہی ہے۔ درحقیقت یہ ہے جو اب تک مکمل ہو چکا ہے، ٹکٹ کے مطابق:

• آڈٹ اور مضبوط کریں جہاں کوڈ پچھلے سرے میں بلاک سپورٹ CSS تیار کرتا ہے تاکہ وہ ایک ہی جگہ سے ڈیلیور کیے جائیں (ایک سے زیادہ جگہوں کے برعکس)۔ یہ سی ایس ایس کے قوانین جیسے مارجن، پیڈنگ، نوع ٹائپ، رنگ، اور بارڈرز کا احاطہ کرتا ہے۔
• دہرائے جانے والے لے آؤٹ کے مخصوص انداز کو ہٹائیں اور سیمنٹک کلاس کے نام بنائیں۔
• ان لائن اسٹائل ٹیگز کی تعداد کو کم کریں جو ہم بلاک، لے آؤٹ، اور عنصر کی مدد کے لیے صفحہ پر پرنٹ کرتے ہیں۔

بنیادی طور پر، یہ ایک واحد API قائم کرنے کی بنیاد ہے جس میں ایک تھیم کے لیے تمام CSS طرز کے اصول شامل ہیں، وہ جہاں سے بھی آتے ہیں۔ یہ اس طریقے کو صاف کرتا ہے جس طرح ورڈپریس 6.1 سے پہلے کے ان لائن اسٹائل کو انجیکشن کرتا ہے اور سیمنٹک کلاس کے ناموں کے لیے ایک نظام قائم کرتا ہے۔

اسٹائل انجن کے طویل مدتی اور قلیل مدتی اہداف کے بارے میں مزید تفصیلات اس میں مل سکتی ہیں۔ ورڈپریس کور ڈسکشن بنائیں. آپ بھی فالو کر سکتے ہیں۔ ٹریکنگ کا مسئلہ اور پروجیکٹ بورڈ مزید اپ ڈیٹس کے لئے

JSON عناصر کے ساتھ کام کرنا

ہم نے JSON عناصر کے بارے میں تھوڑی بات کی۔ theme.json فائل اور یہ کہ وہ بنیادی طور پر ایچ ٹی ایم ایل پرائمیٹوز ہیں جو کہ دوسروں کے درمیان ہیڈنگز، بٹنز اور لنکس جیسی چیزوں کے لیے ڈیفالٹ اسٹائل کی وضاحت کرتے ہیں۔ اب، اصل میں دیکھتے ہیں کا استعمال کرتے ہوئے ایک 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۔ خودکار انجینئر ڈیو سمتھ ثبوت یہ خصوصیت ایک YouTube ویڈیو میں۔

ہم بٹن کے پس منظر کے رنگ کو اوور رائیڈ کر سکتے ہیں۔ 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": { }
  }
}

یہ تمام عنوانات کا رنگ ورڈپریس میں پیش سیٹ بیس کلر پر سیٹ کرتا ہے۔ آئیے عالمی سطح پر Heading 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": { }
  }
}

اب، تمام Heading 2 عناصر کو a کے ساتھ بنیادی پیش سیٹ رنگ کے لیے سیٹ کیا گیا ہے۔ سیال فونٹ کا سائز. لیکن شاید ہم ایک فکسڈ چاہتے ہیں fontSize Heading 2 عنصر کے لیے جب اسے Query Look بلاک میں استعمال کیا جاتا ہے:

{
  "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
            }
          }
        }
      }
    }
  }
}

اب ہمارے پاس Heading 2 عناصر کے لیے اسٹائل کی تین سطحیں ہیں: تمام عنوانات، تمام Heading 2 عناصر، اور Heading 2 عناصر جو Query Loop بلاک میں استعمال ہوتے ہیں۔

موجودہ تھیم کی مثالیں۔

جب کہ ہم نے اس مضمون میں صرف بٹنوں اور عنوانات کے لیے اسٹائل کی مثالوں کو دیکھا، ورڈپریس 6.1 اضافی عناصر کو اسٹائل کرنے کی حمایت کرتا ہے۔ میں ان کا خاکہ ایک میز ہے۔ "JSON عناصر کے ساتھ طرز کی وضاحت کرنا" سیکشن پر ایک اقتصادی کینڈر سکین کر لیں۔

آپ شاید سوچ رہے ہوں گے کہ کون سے JSON عناصر کون سی سی ایس ایس خصوصیات کی حمایت کرتے ہیں، اس بات کا ذکر نہیں کرنا کہ آپ ان کا اعلان کیسے کریں گے۔ جب کہ ہم سرکاری دستاویزات کا انتظار کرتے ہیں، ہمارے پاس موجود بہترین وسائل ہونے جا رہے ہیں۔ theme.json موجودہ تھیمز کے لیے فائلیں میں ان عناصر کی بنیاد پر تھیمز کے لنکس فراہم کرنے جا رہا ہوں جو وہ اپنی مرضی کے مطابق بناتے ہیں، اور بتاؤں گا کہ کن خصوصیات کو اپنی مرضی کے مطابق بنایا گیا ہے۔

ہر ایک کو ضرور دیں۔ theme.json ایک اچھی شکل فائل کریں کیونکہ ان تھیمز میں بلاک لیول اسٹائل کی بہترین مثالیں شامل ہیں۔ styles.blocks اعتراض

اپ ریپنگ

فل سائٹ ایڈیٹر میں بار بار تبدیلیاں ہوتی جارہی ہیں۔ بہت سے لوگوں کے لیے جلن کا بڑا ذریعہ، سمیت ٹیک سیوی گٹنبرگ صارفین. یہاں تک کہ سی ایس ایس کے بہت آسان اصول، جو کلاسک تھیمز کے ساتھ اچھی طرح کام کرتے ہیں، بلاک تھیمز کے لیے کام نہیں کرتے کیونکہ مخصوصیت کی نئی پرتیں۔ ہم نے پہلے احاطہ کیا.

کے بارے میں a GitHub تجویز سائٹ ایڈیٹر کو نئے براؤزر موڈ میں دوبارہ ڈیزائن کرنے کے لیے، سارہ گڈنگ WP Tavern پوسٹ میں لکھتی ہیں۔:

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

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

حوالہ جات

میں ان تمام وسائل کی فہرست بنا رہا ہوں جو میں نے اس مضمون کے لیے معلومات کی تحقیق کے دوران استعمال کیے تھے۔

JSON عناصر

عالمی طرزیں

اسٹائل انجن

پڑھنے کا شکریہ! میں بلاک تھیمز کے استعمال اور آپ اپنے سی ایس ایس کو کیسے منظم کرتے ہیں اس کے بارے میں آپ کے اپنے تاثرات سننا پسند کروں گا۔