استفاده از طرح بندی محدود جدید در تم های بلوکی وردپرس

یکی از اهداف اصلی ویرایشگر سایت وردپرس (و، بله، اکنون همین است "نام رسمی) به حرکت دادن یک ظاهر طراحی اولیه بلوک است از جانب CSS به JSON ساختار یافته. فایل‌های JSON قابل خواندن توسط ماشین هستند، که باعث می‌شود توسط ویرایشگر سایت مبتنی بر جاوا اسکریپت برای پیکربندی سبک‌های جهانی یک موضوع به طور مستقیم در وردپرس قابل مصرف باشد.

هنوز تمام راه به آنجا نرسیده است! اگر به تم پیش فرض بیست و بیست و دو (TT2) نگاه کنیم، دو مشکل اصلی حل نشده وجود دارد: تعاملات سبک (پسندیدن :hover, :active, :focus)، و حاشیه ها و لایه بندی ظروف چیدمان. می توانید ببینید که چگونه آن ها به طور موقت در TT2 رفع شدند style.css به جای ایجاد آن در فایل theme.json فایل.

وردپرس 6.1 آن مسائل را رفع کردم و کاری که می خواهم انجام دهم این است که به طور خاص به دومی نگاه کنم. اکنون که سبک‌های JSON را برای حاشیه‌ها و لایه‌بندی کانتینرهای طرح‌بندی داریم، این ما را به روش‌های انعطاف‌پذیرتر و قوی‌تر برای تعریف فاصله در طرح‌بندی‌های تم ما.

در مورد چه نوع فاصله ای صحبت می کنیم؟

اول از همه، ما در حال حاضر بالشتک در سطح ریشه که روشی فانتزی برای توصیف بالشتک روی آن است عنصر این خوب است زیرا فاصله ثابتی را روی عنصری که در همه صفحات و پست‌ها به اشتراک گذاشته می‌شود، تضمین می‌کند.

اما چیزهای بیشتری برای آن وجود دارد زیرا اکنون ما راهی برای بلوک‌ها داریم تا از آن لایه عبور کنند و خود را در عرض کامل تراز کنند. که به لطف ترازهای آگاه از لایه که یک ویژگی Opt-in جدید در است theme.json. بنابراین، حتی اگر padding در سطح ریشه داشته باشید، همچنان می‌توانید اجازه دهید مثلاً یک تصویر (یا بلوک دیگری) بیرون بیاید و به عرض کامل برود.

این ما را به چیز دیگری می برد: طرح بندی های محدود. ایده در اینجا این است که هر بلوک تودرتو در طرح به عرض محتوای طرح - که یک تنظیم جهانی است - احترام می گذارد و خارج از آن جریان ندارد. ما می‌توانیم آن رفتار را به‌صورت بلوک به بلوک با هم‌ترازی‌ها لغو کنیم، اما به آن خواهیم رسید.

بیا شروع کنیم با…

بالشتک در سطح ریشه

باز هم، این جدید نیست. ما این قابلیت را داشتیم که بالشتک را روی آن تنظیم کنیم عنصر در 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 را باز کنیم و آن را بررسی کنیم عنصر، ما این سبک های CSS را می بینیم:

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;
}

سرد. اما این مسئله در اینجا نهفته است که چگونه در دنیا می‌توانیم اجازه دهیم برخی بلوک‌ها از آن فاصله خارج شوند تا تمام صفحه را لبه به لبه پر کنند. به همین دلیل فاصله وجود دارد، درست است؟ این به جلوگیری از وقوع آن کمک می کند!

اما در واقع موارد زیادی وجود دارد که ممکن است بخواهید هنگام کار در Block Editor در یک نمونه از این فاصله فاصله بگیرید. می‌گوییم ما یک بلوک تصویر را در یک صفحه می‌زنیم و می‌خواهیم آن را به عرض کامل برسانیم در حالی که بقیه محتوا به لایه‌های سطح ریشه احترام می‌گذارد؟

وارد…

ترازهای آگاه از پد

هنگام تلاش برای ایجاد اولین تم پیش‌فرض وردپرس که همه سبک‌ها را در آن تعریف می‌کند theme.json در فایل، طراح اصلی، Kjell Reigstad، جنبه های چالش برانگیز شکستن لایه های سطح ریشه را در این نشان می دهد. مشکل GitHub.

ویژگی های جدیدی در وردپرس 6.1 برای رفع این مشکل ایجاد شده است. بیایید به آن موارد بعدی بپردازیم.

useRootPaddingAwareAlignments

جدید useRootPaddingAwareAlignments اموال برای رفع مشکل ایجاد شده است. در واقع اولین بار در افزونه گوتنبرگ نسخه 13.8 معرفی شد. را درخواست اصلی کشش یک پرایمر خوب در مورد نحوه عملکرد آن است.

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

بلافاصله، توجه کنید که این ویژگی است که ما باید از آن استفاده کنیم. ملک تنظیم شده است false به طور پیش فرض و ما باید به صراحت آن را تنظیم کنیم true به منظور فعال کردن آن همچنین توجه کنید که ما داریم appearanceTools مجموعه را به true نیز هست. این ما را به کنترل‌های رابط کاربری سوق می‌دهد در ویرایشگر سایت برای شکل‌دهی حاشیه‌ها، رنگ‌های پیوند، تایپوگرافی و، بله، فاصله‌ای که شامل حاشیه و بالشتک است.

محیط appearanceTools مجموعه را به true به طور خودکار بلوک ها را در حاشیه و بالشتک انتخاب می کند بدون نیاز به تنظیم settings.spacing.padding or setting.spacing.margin به true.

وقتی فعال کنیم useRootPaddingAwareAlignments، ویژگی های سفارشی با مقادیر روت padding در اختیار ما قرار می گیرد عنصر در قسمت جلویی جالب توجه است، آن را نیز اعمال می کند padding به .editor-styles-wrapper کلاس بنابراین فاصله زمانی نمایش داده می شود که در ویرایشگر بلاک پشتی کار می کنید. خیلی باحال!

من توانستم آن ویژگی های سفارشی CSS را در DevTools در حین حفاری تأیید کنم.

را قادر می سازد useRootPaddingAwareAlignments همچنین بالشتک چپ و راست را برای هر بلوکی اعمال می‌کند که از مقادیر عرض «محتوا» و عرض «عریض» در تصویر Global Styles در بالا پشتیبانی می‌کند. ما همچنین می توانیم آن مقادیر را در آن تعریف کنیم 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، همچنین یک کلاس CSS تراز کامل برای مجموع سه پیکربندی کانتینر برای کنترل عرض بلوک هایی که به صفحات و پست ها اضافه می شوند دریافت می کنیم.

این در مورد بلوک‌های خاص طرح‌بندی زیر اعمال می‌شود: ستون‌ها، گروه، محتوای پست و حلقه پرس و جو.

کنترل های طرح بندی بلوک

فرض کنید هر یک از بلوک های مربوط به طرح بندی فوق الذکر را به یک صفحه اضافه می کنیم. وقتی بلوک را انتخاب می کنیم، رابط کاربری تنظیمات بلوک تنظیمات طرح بندی جدیدی را بر اساس آن به ما ارائه می دهد settings.layout مقادیری که در آنها تعریف کردیم theme.json (یا رابط کاربری جهانی استایلز).

ما در اینجا با بلوک‌های بسیار خاصی سروکار داریم - بلوک‌هایی که می‌توانند بلوک‌های دیگری را در داخل خود داشته باشند. بنابراین، این تنظیمات Layout واقعاً در مورد کنترل عرض و تراز آن بلوک‌های تودرتو هستند. تنظیم «بلوک‌های داخلی از عرض محتوا استفاده می‌کنند» به‌طور پیش‌فرض فعال است. اگر آن را خاموش کنیم، دیگر نداریم max-width روی ظرف و بلوک های داخل آن لبه به لبه می شوند.

اگر ضامن را روشن بگذاریم، بلوک‌های تودرتو به یکی از آنها می‌چسبند contentWidth or wideWidth مقادیر (در ادامه در مورد آن بیشتر خواهد شد). یا می توانیم از ورودی های عددی برای تعریف سفارشی استفاده کنیم contentWidth و wideWidth مقادیر در این نمونه یکباره این انعطاف پذیری عالی است!

بلوک های عریض

تنظیماتی که به تازگی بررسی کردیم در بلوک والد تنظیم شده اند. هنگامی که یک بلوک را در داخل تودرتو قرار دادیم و آن را انتخاب کردیم، گزینه های دیگری در آن بلوک برای استفاده از آن داریم contentWidth, wideWidth، یا به عرض کامل بروید.

توجه داشته باشید که چگونه وردپرس ویژگی های سفارشی CSS padding سطح ریشه را در ضرب می کند -1 برای ایجاد حاشیه های منفی هنگام انتخاب گزینه "Full width".

استفاده از طرح بندی محدود

ما فقط فاصله ها و ترازهای جدیدی را که با WordPress 6.1 دریافت می کنیم پوشش دادیم. اینها مختص بلوک ها و هر بلوک تودرتو در داخل بلوک هستند. اما وردپرس 6.1 همچنین ویژگی های طرح بندی جدیدی را برای انعطاف پذیری و ثبات بیشتر در قالب های یک موضوع معرفی می کند.

نمونه موردی: وردپرس به طور کامل انواع طرح بندی Flex و Flow خود را بازسازی کرده و به ما پاسخ داده است محدود شده طرح نوعی که تراز کردن طرح‌بندی بلوک‌ها را با استفاده از تنظیمات عرض محتوا در رابط کاربری جهانی سبک‌های ویرایشگر سایت آسان‌تر می‌کند.

طرح بندی فلکس، جریان و محدود

تفاوت بین این سه نوع چیدمان در استایل هایی است که آنها خروجی می دهند. ایزابل بریسون نوشته بسیار خوبی دارد که به خوبی تفاوت ها را مشخص می کند، اما اجازه دهید آنها را برای مرجع در اینجا بازنویسی کنیم:

• طرح جریان: فاصله عمودی بین بلوک های تو در تو را اضافه می کند margin-block جهت. آن بلوک های تو در تو را نیز می توان در سمت چپ، راست یا مرکز تراز کرد.
• چیدمان محدود: دقیقاً مشابه طرح‌بندی جریان، اما با محدودیت‌های عرض در بلوک‌های تودرتو که بر اساس contentWidth و wideWidth تنظیمات (یا در theme.json یا سبک های جهانی).
• طرح بندی فلکس: این در وردپرس 6.1 بدون تغییر بود. استفاده می کند CSS Flexbox برای ایجاد طرح‌بندی که به‌طور پیش‌فرض به صورت افقی (در یک ردیف) جریان داشته باشد، اما می‌تواند به صورت عمودی نیز جریان داشته باشد، بنابراین بلوک‌ها یکی روی دیگری قرار می‌گیرند. فاصله گذاری با استفاده از 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