ورڈپریس سائٹ ایڈیٹر کے اہم اہداف میں سے ایک (اور، ہاں، اب یہ ہے۔ "سرکاری" نام) بنیادی بلاک اسٹائل کو منتقل کرنا ہے۔ سے ساختی JSON سے CSS. JSON فائلیں مشین کے ذریعے پڑھنے کے قابل ہیں، جو اسے جاوا اسکرپٹ پر مبنی سائٹ ایڈیٹر کے ذریعے براہ راست ورڈپریس میں تھیم کے عالمی انداز کو ترتیب دینے کے لیے قابل استعمال بناتی ہے۔
یہ ابھی تک وہاں نہیں ہے! اگر ہم ٹوئنٹی ٹوئنٹی ٹو (TT2) ڈیفالٹ تھیم کو دیکھیں تو دو اہم حل طلب مسائل تھے: اسٹائل کے تعاملات (جیسے :hover, :active, :focus)، اور مارجن اور لے آؤٹ کنٹینرز کی بھرتی. آپ دیکھ سکتے ہیں کہ انہیں TT2 میں عارضی طور پر کیسے طے کیا گیا تھا۔ style.css فائل میں بنانے کے بجائے theme.json فائل.
ورڈپریس 6.1 ان مسائل کو طے کیا اور میں جو کرنا چاہتا ہوں وہ خاص طور پر بعد میں دیکھنا ہے۔ اب جب کہ ہمارے پاس لے آؤٹ کنٹینرز کے مارجن اور پیڈنگ کے لیے JSON-ified طرزیں ہیں، جو ہمیں ہمارے تھیم لے آؤٹ میں وقفہ کاری کی وضاحت کرنے کے زیادہ لچکدار اور مضبوط طریقے.
ہم کس قسم کی وقفہ کاری کے بارے میں بات کر رہے ہیں؟
سب سے پہلے، ہمارے پاس پہلے سے ہی ہے جڑ کی سطح کی بھرتی جو پر پیڈنگ کو بیان کرنے کا ایک عمدہ طریقہ ہے۔ <body> عنصر یہ اچھا ہے کیونکہ یہ ایک ایسے عنصر پر مستقل وقفہ کاری کو یقینی بناتا ہے جو تمام صفحات اور پوسٹس پر شیئر کیا جاتا ہے۔
لیکن اس میں اور بھی بہت کچھ ہے کیونکہ اب ہمارے پاس بلاکس کے پاس اس پیڈنگ کو نظرانداز کرنے اور خود کو پوری چوڑائی میں سیدھ کرنے کا ایک طریقہ ہے۔ اس کا شکریہ پیڈنگ سے آگاہ سیدھ جو کہ میں ایک نئی آپٹ ان فیچر ہے۔ theme.json. لہذا، یہاں تک کہ اگر آپ کے پاس روٹ لیول پیڈنگ ہے، تب بھی آپ کسی تصویر (یا کوئی اور بلاک) کو توڑنے اور پوری چوڑائی میں جانے کی اجازت دے سکتے ہیں۔
یہ ہمیں ایک اور چیز کی طرف لے جاتا ہے جو ہمیں ملتا ہے: محدود ترتیب. یہاں خیال یہ ہے کہ لے آؤٹ میں موجود کوئی بھی بلاکس لے آؤٹ کے مواد کی چوڑائی کا احترام کرتے ہیں — جو کہ ایک عالمی ترتیب ہے — اور اس سے باہر نہیں نکلتے ہیں۔ ہم صف بندی کے ساتھ بلاک بہ بلاک کی بنیاد پر اس رویے کو اوور رائیڈ کر سکتے ہیں، لیکن ہم اس تک پہنچ جائیں گے۔
آئیے شروع کرتے ہیں…
روٹ لیول پیڈنگ
ایک بار پھر، یہ نیا نہیں ہے. ہمارے پاس پیڈنگ سیٹ کرنے کی صلاحیت ہے۔ <body> عنصر میں 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" } } }
}یہ ایک عالمی ترتیب ہے۔ لہذا، اگر ہم ڈیو ٹولز کو کھولیں اور ان کا معائنہ کریں۔ <body> عنصر، ہم یہ سی ایس ایس سٹائل دیکھیں گے:
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 فائل، لیڈ ڈیزائنر Kjell Reigstad اس میں جڑ کی سطح کی پیڈنگ کو توڑنے کے چیلنجنگ پہلوؤں کی وضاحت کرتا ہے گٹ ہب کا مسئلہ.
اس مسئلے کو حل کرنے کے لیے ورڈپریس 6.1 میں نئی خصوصیات بنائی گئی ہیں۔ آئیے ان کے بعد میں کھودتے ہیں۔
useRootPaddingAwareAlignments
ایک نئی useRootPaddingAwareAlignments مسئلہ کو حل کرنے کے لیے پراپرٹی بنائی گئی۔ یہ اصل میں سب سے پہلے Gutenberg پلگ ان 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، ہمیں روٹ پیڈنگ ویلیوز کے ساتھ حسب ضرورت خصوصیات فراہم کی جاتی ہیں جو کہ پر سیٹ ہیں۔ <body> سامنے کے آخر میں عنصر. دلچسپ بات یہ ہے کہ یہ پیڈنگ پر بھی لاگو ہوتا ہے۔ .editor-styles-wrapper کلاس ہے تاکہ بیک اینڈ بلاک ایڈیٹر میں کام کرتے وقت وقفہ کاری ظاہر ہو۔ بہت اچھا!
میں ادھر ادھر کھودتے ہوئے ڈیو ٹولز میں ان سی ایس ایس کسٹم پراپرٹیز کی تصدیق کرنے کے قابل تھا۔
چالو کرنا useRootPaddingAwareAlignments کسی بھی بلاک پر بائیں اور دائیں پیڈنگ کا اطلاق ہوتا ہے جو اوپر گلوبل اسٹائل کی تصویر میں "مواد" چوڑائی اور "وسیع" چوڑائی کی قدروں کو سپورٹ کرتا ہے۔ ہم ان اقدار کی وضاحت بھی کر سکتے ہیں۔ theme.json:
{ "version": 2, "settings": { "layout": { "contentSize": "640px", "wideSize": "1000px" } }
}اگر گلوبل اسٹائل کی سیٹنگز اس سے مختلف ہیں جس کی وضاحت کی گئی ہے۔ theme.json، پھر گلوبل اسٹائلز کو فوقیت حاصل ہے۔ آپ بلاک تھیم اسٹائلز کے انتظام کے بارے میں سب کچھ سیکھ سکتے ہیں۔ میرے آخری مضمون میں.
contentSizeبلاکس کے لیے پہلے سے طے شدہ چوڑائی ہے۔wideSizeایک "وسیع" ترتیب کا اختیار فراہم کرتا ہے اور بلاکس کو پھیلانے کے لیے ایک وسیع کالم قائم کرتا ہے۔
لہذا، آخری کوڈ کی مثال ہمیں درج ذیل سی ایس ایس دے گی۔
/* 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، ہمیں صفحات اور پوسٹس میں شامل کیے گئے بلاکس کی چوڑائی کو کنٹرول کرنے کے لیے کل تین کنٹینر کنفیگریشنز کے لیے ایک مکمل الائنمنٹ CSS کلاس بھی ملتی ہے۔
یہ مندرجہ ذیل ترتیب کے مخصوص بلاکس پر لاگو ہوتا ہے: کالم، گروپ، پوسٹ مواد، اور سوال لوپ۔
لے آؤٹ کنٹرولز کو مسدود کریں۔
ہم کہتے ہیں کہ ہم ان مذکورہ بالا ترتیب کے مخصوص بلاکس کو صفحہ میں شامل کرتے ہیں۔ جب ہم بلاک کو منتخب کرتے ہیں، تو بلاک کی ترتیبات UI ہمیں کی بنیاد پر نئی ترتیب کی ترتیبات پیش کرتا ہے۔ settings.layout اقدار جن کی ہم نے تعریف کی ہے۔ theme.json (یا گلوبل اسٹائلز UI)۔
ہم یہاں بہت ہی مخصوص بلاکس کے ساتھ نمٹ رہے ہیں — جن کے اندر اندر دوسرے بلاکس موجود ہو سکتے ہیں۔ لہذا، یہ لے آؤٹ سیٹنگز واقعی ان نیسٹڈ بلاکس کی چوڑائی اور سیدھ کو کنٹرول کرنے کے بارے میں ہیں۔ "اندرونی بلاکس مواد کی چوڑائی کا استعمال کرتے ہیں" ترتیب بطور ڈیفالٹ فعال ہے۔ اگر ہم اسے ٹوگل کرتے ہیں، تو ہمارے پاس نہیں ہے۔ max-width کنٹینر پر اور اس کے اندر کے بلاکس کنارے سے کنارے جاتے ہیں۔
اگر ہم ٹوگل کو آن چھوڑ دیتے ہیں، تو نیسٹڈ بلاکس دونوں میں سے کسی ایک پر عمل کریں گے۔ contentWidth or wideWidth اقدار (تھوڑی دیر میں اس پر مزید)۔ یا ہم حسب ضرورت کی وضاحت کے لیے عددی ان پٹ استعمال کر سکتے ہیں۔ contentWidth اور wideWidth اس یک طرفہ مثال میں اقدار۔ یہ بڑی لچک ہے!
چوڑے بلاکس
ہم نے ابھی جو ترتیبات دیکھی ہیں وہ پیرنٹ بلاک پر سیٹ ہیں۔ ایک بار جب ہم نے ایک بلاک کو اندر بنا لیا اور اسے منتخب کر لیا، تو ہمارے پاس اس بلاک کو استعمال کرنے کے لیے اضافی اختیارات ہیں۔ contentWidth, wideWidth، یا پوری چوڑائی پر جائیں۔
contentWidth ترتیب، سیاق و سباق کے مینو میں "کوئی نہیں" کا لیبل لگا ہوا ہے، لیکن اس پر بھی سیٹ کیا جا سکتا ہے۔ wideWidth ("چوڑی چوڑائی" کا لیبل لگا ہوا) یا "مکمل چوڑائی"۔غور کریں کہ ورڈپریس روٹ لیول پیڈنگ سی ایس ایس کسٹم پراپرٹیز کو کس طرح ضرب دیتا ہے۔ -1 "مکمل چوڑائی" کے اختیار کو منتخب کرتے وقت منفی مارجن بنانے کے لیے۔
.alignfull کلاس ایک نیسٹڈ بلاک پر منفی مارجن سیٹ کرتا ہے تاکہ یہ یقینی بنایا جا سکے کہ یہ روٹ لیول پیڈنگ سیٹنگز سے متصادم ہوئے بغیر مکمل ویو پورٹ کی چوڑائی لیتا ہے۔ایک محدود ترتیب کا استعمال کرتے ہوئے
ہم نے ابھی ورڈپریس 6.1 کے ساتھ ملنے والی نئی اسپیسنگ اور صف بندی کا احاطہ کیا ہے۔ وہ بلاکس اور بلاکس کے اندر کسی بھی نیسٹڈ بلاکس کے لیے مخصوص ہیں۔ لیکن ورڈپریس 6.1 تھیم کی ٹیمپلیٹس میں مزید لچک اور مستقل مزاجی کے لیے نئے لے آؤٹ فیچرز بھی متعارف کراتا ہے۔
مثال کے طور پر: ورڈپریس نے اپنی فلیکس اور فلو لے آؤٹ کی اقسام کو مکمل طور پر دوبارہ ترتیب دیا ہے اور ہمیں ایک دیا ہے۔ مجبور ترتیب ٹائپ کریں جو سائٹ ایڈیٹر کے گلوبل اسٹائلز UI میں مواد کی چوڑائی کی ترتیبات کا استعمال کرتے ہوئے تھیمز میں بلاک لے آؤٹ کو سیدھ میں لانا آسان بناتا ہے۔
فلیکس، فلو، اور محدود ترتیب
ان تینوں ترتیب کی اقسام کے درمیان فرق وہ انداز ہے جو وہ آؤٹ پٹ کرتے ہیں۔ ازابیل برسن کی تحریر بہترین ہے۔ جو اختلافات کو اچھی طرح سے بیان کرتا ہے، لیکن آئیے حوالہ کے لیے انہیں یہاں بیان کرتے ہیں:
- بہاؤ لے آؤٹ: میں نیسٹڈ بلاکس کے درمیان عمودی فاصلہ شامل کرتا ہے۔
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 کے آنے والے ورژن میں کیا ہوگا۔ کچھ چیزیں، جن پر میں گہری نظر رکھ رہا ہوں وہ چیزیں ہیں۔ خصوصیات پر غور کیا جا رہا ہے۔ شامل کرنے کے لیے، حمایت کے لیے چپچپا پوزیشننگ, نئے لے آؤٹ کلاس کے نام اندرونی بلاک ریپرز کے لیے، اپ ڈیٹ فوٹر سیدھ کے اختیارات، اور کور بلاکس میں محدود اور بہاؤ لے آؤٹ کے اختیارات شامل کرنا.
یہ GitHub کے مسائل #44720 ترتیب سے متعلق بات چیت کی فہرست دیتا ہے۔ ورڈپریس 6.2 کے لیے تیار.
اضافی وسائل
میں نے اس سب کو کھودتے ہوئے بہت سارے ذرائع سے مشورہ کیا اور ان کا حوالہ دیا۔ یہاں ان چیزوں کی ایک بڑی فہرست ہے جو مجھے مفید معلوم ہوئی اور لگتا ہے کہ آپ بھی لطف اندوز ہو سکتے ہیں۔
سبق
ورڈپریس پوسٹس
GitHub پل کی درخواستیں اور مسائل
- سکے سمارٹ۔ یورپ کا بہترین بٹ کوائن اور کرپٹو ایکسچینج۔یہاں کلک کریں
- پلیٹو بلاک چین۔ Web3 Metaverse Intelligence. علم میں اضافہ۔ یہاں تک رسائی حاصل کریں۔
- ماخذ: https://css-tricks.com/using-the-new-constrained-layout-in-wordpress-block-themes/
