استخدام التخطيط المقيد الجديد في قوالب قوالب WordPress

أحد الأهداف الرئيسية لمحرر موقع WordPress (ونعم ، هذا هو الآن "اسم رسمي) هو نقل نمط الكتلة الأساسي تبدأ من CSS إلى JSON منظم. ملفات JSON قابلة للقراءة آليًا ، مما يجعلها قابلة للاستهلاك بواسطة محرر الموقع المستند إلى JavaScript لتكوين الأنماط العامة للقالب مباشرةً في WordPress.

لم يصل الأمر إلى هناك حتى الآن! إذا نظرنا إلى السمة الافتراضية Twenty-Two (TT2) ، فهناك مشكلتان رئيسيتان لم يتم حلهما: تفاعلات التصميم (مثل :hover, :active, :focus)، و الهوامش و حشو حاويات التخطيط. يمكنك أن ترى كيف تم إصلاحها مؤقتًا في TT2 style.css بدلاً من تحويله إلى ملف theme.json ملف.

وورد 6.1 أصلحت هذه المشكلات وما أريد فعله هو إلقاء نظرة على الأخيرة تحديدًا. الآن بعد أن أصبح لدينا أنماط JSON-ified للهوامش والحشو لحاويات التخطيط ، فإن هذا يفتح لنا طرق أكثر مرونة وقوة لتحديد التباعد في تخطيطات السمات الخاصة بنا.

ما نوع التباعد الذي نتحدث عنه؟

أولا ، لدينا بالفعل حشوة على مستوى الجذر وهي طريقة رائعة لوصف الحشو على عنصر. هذا جيد لأنه يضمن تباعدًا ثابتًا على عنصر تتم مشاركته في جميع الصفحات والمنشورات.

ولكن هناك ما هو أكثر من ذلك لأنه لدينا الآن طريقة للكتل لتجاوز تلك المساحة المتروكة ومحاذاة نفسها بالعرض الكامل. هذا بفضل محاذاة تدرك الحشو وهي ميزة جديدة للاشتراك في theme.json. لذلك ، حتى إذا كان لديك حشوة على مستوى الجذر ، فلا يزال بإمكانك السماح ، على سبيل المثال ، لصورة (أو بعض الكتل الأخرى) بالانفصال والعرض الكامل.

هذا يقودنا إلى شيء آخر نحصل عليه: تخطيطات مقيدة. الفكرة هنا هي أن أي كتل متداخلة في التخطيط تحترم عرض محتوى التخطيط - وهو إعداد عام - ولا تتدفق خارجه. يمكننا تجاوز هذا السلوك على أساس كتلة بمحاذاة ، لكننا سنصل إلى ذلك.

دعنا نبدء ب…

حشوة على مستوى الجذر

مرة أخرى ، هذا ليس جديدًا. لدينا القدرة على وضع الحشو على عنصر في 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. لنفترض أننا نضع كتلة صورة على صفحة ونريدها أن تكون كاملة العرض بينما يحترم باقي المحتوى الحشو على مستوى الجذر؟

أدخل…

محاذاة مراعاة الحشو

أثناء محاولة إنشاء أول سمة افتراضية لـ WordPress تحدد جميع الأنماط في ملف theme.json ملف ، يوضح المصمم الرئيسي Kjell Reigstad الجوانب الصعبة لكسر حشوة مستوى الجذر في هذا مشكلة جيثب.

تم إنشاء ميزات جديدة في WordPress 6.1 لمعالجة هذه المشكلة. دعنا نتعمق في الأمور التالية.

useRootPaddingAwareAlignments

جديد useRootPaddingAwareAlignments تم إنشاء الخاصية لمعالجة المشكلة. تم تقديمه لأول مرة في البرنامج المساعد Gutenberg v13.8. ال طلب السحب الأصلي هو كتاب تمهيدي لطيف حول كيفية عمله.

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

فورًا ، لاحظ أن هذه ميزة يتعين علينا الاشتراك فيها. تم تعيين الخاصية على false افتراضيًا وعلينا تعيينه صراحةً على true من أجل تمكينها. لاحظ أيضًا أن لدينا appearanceTools تعيين إلى true كذلك. هذا يضعنا في ضوابط واجهة المستخدم في محرر الموقع لتصميم الحدود ، وألوان الارتباط ، والطباعة ، ونعم ، التباعد الذي يتضمن الهامش والحشو.

الضبط appearanceTools تعيين إلى true يختار تلقائيًا الكتل في الهامش والحشو دون الحاجة إلى تعيين أي منهما settings.spacing.padding or setting.spacing.margin إلى true.

عندما نقوم بتمكين useRootPaddingAwareAlignments، يتم تزويدنا بخصائص مخصصة مع قيم حشو الجذر التي تم تعيينها على عنصر في الواجهة الأمامية. ومن المثير للاهتمام ، أنه يطبق أيضًا الحشو على ملف .editor-styles-wrapper class بحيث يتم عرض التباعد عند العمل في محرر الكتلة الخلفية. لطيف جدا!

تمكنت من تأكيد خصائص CSS المخصصة في DevTools أثناء البحث.

تمكين useRootPaddingAwareAlignments يطبق أيضًا الحشو الأيسر والأيمن على أي كتلة تدعم قيم عرض "المحتوى" والعرض "الواسع" في صورة الأنماط العامة أعلاه. يمكننا أيضًا تحديد هذه القيم في 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] يشير إلى رقم فريد تم إنشاؤه تلقائيًا بواسطة WordPress.

لكن خمن ماذا سنحصل؟ محاذاة كاملة كذلك!

.wp-container-[id] .alignfull {
  max-width: none;
}

أنظر لهذا؟ من خلال تمكين useRootPaddingAwareAlignments وتحديد contentSize و wideSize، نحصل أيضًا على فئة CSS للمحاذاة الكاملة لما مجموعه ثلاثة تكوينات للحاوية للتحكم في عرض الكتل التي تمت إضافتها إلى الصفحات والمشاركات.

ينطبق هذا على الكتل التالية الخاصة بالتخطيط: الأعمدة والمجموعة ومحتوى المشاركة وحلقة الاستعلام.

ضوابط تخطيط الكتلة

لنفترض أننا أضفنا أيًا من تلك الكتل الخاصة بالتخطيط المذكورة أعلاه إلى صفحة. عندما نختار الكتلة ، فإن واجهة مستخدم إعدادات الحظر تقدم لنا إعدادات تخطيط جديدة بناءً على ملف settings.layout القيم التي حددناها في theme.json (أو واجهة مستخدم الأنماط العامة).

نحن نتعامل مع كتل محددة جدًا هنا - تلك التي يمكن أن تحتوي على كتل أخرى متداخلة بداخلها. لذلك ، تتعلق إعدادات التخطيط هذه بالتحكم في عرض ومحاذاة تلك الكتل المتداخلة. يتم تمكين الإعداد "الكتل الداخلية تستخدم عرض المحتوى" افتراضيًا. إذا قمنا بتبديله ، فلن يكون لدينا max-width على الحاوية وتنتقل الكتل الموجودة بداخلها من الحافة إلى الحافة.

إذا تركنا مفتاح التبديل قيد التشغيل ، فستلتزم الكتل المتداخلة بامتداد contentWidth or wideWidth القيم (المزيد عن ذلك قليلاً). أو يمكننا استخدام المدخلات الرقمية لتحديد العرف contentWidth و wideWidth القيم في هذا المثال الفريد. هذه مرونة كبيرة!

كتل واسعة

تم تعيين الإعدادات التي نظرنا إليها للتو على الكتلة الأصلية. بمجرد قيامنا بتضمين كتلة بداخلها وتحديدها ، لدينا خيارات إضافية في تلك الكتلة لاستخدام contentWidth, wideWidth، أو العرض الكامل.

لاحظ كيف يضاعف WordPress خصائص CSS المخصصة لحشو مستوى الجذر بواسطة -1 لإنشاء هوامش سالبة عند تحديد خيار "العرض الكامل".

باستخدام تخطيط مقيد

لقد غطينا للتو المسافات والمحاذاة الجديدة التي نحصل عليها مع WordPress 6.1. هذه خاصة بالكتل وأي كتل متداخلة داخل الكتل. لكن WordPress 6.1 يقدم أيضًا ميزات تخطيط جديدة لمزيد من المرونة والاتساق في قوالب القالب.

مثال على ذلك: أعاد WordPress هيكلة أنواع تخطيطات Flex و Flow وأعطانا ملف مقيدة نسق الكتابة التي تسهل محاذاة تخطيطات الكتلة في السمات باستخدام إعدادات عرض المحتوى في واجهة مستخدم الأنماط العامة لمحرر الموقع.

تنسيقات مرنة وتدفق ومقيدة

الفرق بين هذه الأنواع الثلاثة من التخطيطات هو الأنماط التي ينتجونها. تتمتع إيزابيل بريسون بكتابة ممتازة التي تحدد الاختلافات بشكل جيد ، ولكن دعنا نعيد صياغتها هنا للرجوع إليها:

• تخطيط تدفق: يضيف تباعدًا رأسيًا بين الكتل المتداخلة في margin-block اتجاه. يمكن أيضًا محاذاة تلك الكتل المتداخلة إلى اليسار أو اليمين أو الوسط.
• تخطيط مقيد: نفس الصفقة بالضبط كتخطيط التدفق ، ولكن مع قيود العرض على الكتل المتداخلة التي تستند إلى contentWidth و wideWidth الإعدادات (إما بتنسيق theme.json أو الأنماط العالمية).
• تخطيط المرن: لم يتغير هذا في WordPress 6.1. يستخدم فليكس بوكس ​​CSS لإنشاء تخطيط يتدفق أفقيًا (في صف) بشكل افتراضي ، ولكن يمكن أن يتدفق عموديًا أيضًا بحيث تتراكم الكتل واحدة فوق الأخرى. يتم تطبيق التباعد باستخدام 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 ملف يحدد تنسيقًا مقيدًا:

تعطيل أنماط التخطيط

أنماط التخطيط الأساسية هي ميزات افتراضية يتم شحنها في WordPress 6.1 Core. بعبارة أخرى ، يتم تمكينها فور إخراجها من منطقة الجزاء. لكن يمكننا تعطيلها إذا احتجنا إلى ذلك باستخدام هذا المقتطف الصغير functions.php:

// Remove layout styles.
add_theme_support( 'disable-layout-styles' );

تحذير كبير هنا: تعطيل الدعم لأنواع التخطيط الافتراضي أيضًا يزيل كل التصميم الأساسي لتلك التخطيطات. هذا يعني أنك ستحتاج إلى تدوير الأنماط الخاصة بك للتباعد والمحاذاة وأي شيء آخر لازم لعرض المحتوى في قوالب مختلفة وسياقات الحظر.

اختتام

بصفتي معجبًا كبيرًا بالصور ذات العرض الكامل ، فإن تصميم WordPress 6.1 الجديد المتضمن وميزات المحاذاة المدركة للحشو هما من أكثر الأشياء المفضلة لدي حتى الآن. تم أخذها مع أدوات أخرى بما في ذلك التحكم الأفضل في الهامش والحشو ، طباعة السوائل، وكتلة List and Quote المحدثة ، من بين أمور أخرى ، دليل قوي على أن WordPress يتجه نحو تجربة إنشاء محتوى أفضل.

الآن ، علينا أن ننتظر وننظر في كيفية استخدام خيال وإبداع المصممين العاديين ومنشئي المحتوى لهذه الأدوات المذهلة والارتقاء بها إلى مستوى جديد.

نظرًا لتكرار تطوير محرر الموقع قيد التقدم ، يجب أن نتوقع دائمًا مسارًا صعبًا في المستقبل. ومع ذلك ، بصفتي متفائلًا ، فأنا حريص على رؤية ما سيحدث في الإصدار القادم من WordPress 6.2. بعض الأشياء التي أراقبها عن كثب هي أشياء مثل الميزات قيد النظر للتضمين ، ودعم تحديد المواقع اللزجة, أسماء فئات التخطيط الجديدة لأغلفة الكتل الداخلية ، خيارات محاذاة التذييل المحدثةو إضافة خيارات تخطيط مقيدة وتدفق إلى كتل الغلاف.

هذه إصدارات جيثب # 44720 يسرد المناقشات ذات الصلة التخطيط المقرر لـ WordPress 6.2.

موارد إضافية

لقد استشرت وأشرت إلى الكثير من المصادر أثناء البحث في كل هذا. فيما يلي قائمة كبيرة بالأشياء التي وجدتها مفيدة وأعتقد أنك قد تستمتع بها أيضًا.

الدروس

مشاركات ووردبريس

طلبات السحب والمشكلات على GitHub