الجديد في WordPress 5.9 - تحرير الموقع بالكامل والأنماط العامة والكتل والأنماط وواجهات برمجة التطبيقات وتحسينات واجهة المستخدم وغير ذلك الكثير

ووردبريس 5.9 جوزفين هنا! كان من المقرر مبدئيًا إصدار أول إصدار من WordPress لهذا العام في 14 ديسمبر 2021. نظرًا لوجود العديد من المشكلات المفتوحة والأخطاء التي لم يتم حلها ، فقد تم تأخير الإصدار النهائي وتم إصداره أخيرًا في 25 يناير 2022.

إذا كنت تتساءل عن الجديد في WordPress 5.9 ، فإن الإجابة المختصرة هي تحرير الموقع الكامل (FSE).

وبالفعل ، تتوفر العديد من الميزات 5.9 فقط إذا كنت تستخدم سمة تدعم تحرير الموقع بالكامل ، مثل السمة الافتراضية الجديدة ، Twenty-Two.

باستخدام WordPress 5.9 ، نصل إلى قلب المرحلة الثانية من خارطة طريق Gutenberg: مرحلة التخصيص ، والتي تركز في الغالب على تحرير الموقع الكامل ، وأنماط الكتلة ، ودليل الحظر ، والسمات القائمة على الكتلة.

مع الإصدار 5.9 ، الذي سيصدر الشهر المقبل ، نحن - أود أن أقول - في MVP ، المنتج القابل للتطبيق الأدنى لمرحلة التخصيص هذه من Gutenberg.

تلخص هذه الكلمات من Matt Mullenweg في 2021 State of the Word بشكل أفضل الميزات الرئيسية لإصدار WordPress الجديد.

ومع ذلك ، ما الجديد في إصدار WordPress الأول لعام 2022؟

هيا نكتشف!

الأنماط العالمية: واجهة رسومية لـ theme.json

مع إصدار WordPress 5.8 في عام 2021 ، أصبح التعامل مع ملف theme.json هو الطريقة القياسية لمطوري السمات لتخصيص إعدادات وأنماط المحرر.

ينتقل WordPress 5.9 بالأشياء إلى المستوى التالي من خلال تقديم واجهة رسومية تتيح للمستخدمين تخصيص الإعدادات المسبقة للأنماط لمواقعهم على الويب ، إما على مستوى العالم أو على مستوى الكتلة ، دون كتابة سطر واحد من التعليمات البرمجية.

يجب أن تغير آلية الأنماط العالمية بشكل كبير الطريقة التي تستخدمها لتخصيص مظهر مواقع الويب الخاصة بك ، حيث تؤثر الأنماط العالمية على العديد من جوانب تصميم موقع WordPress.

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

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

يتوفر الآن شريط جانبي جديد في محرر الموقع ، ستجد في الجزء العلوي منه لوحة معاينة صغيرة وأربعة مكونات بالترتيب التالي:

• الطباعة
• الألوان
• تَخطِيط
• كتل

يمكننا توقع إضافة مكونات جديدة بمرور الوقت.

دعنا نلقي نظرة فاحصة على الواجهة الجديدة.

إنه هنا! كل ما تحتاج لمعرفته حول WordPress 5.9 ، كل ذلك في منشور واحد ضخم انقر للتغريد
[CTA]

معاينة النمط

أول عنصر في الشريط الجانبي Global Styles هو لوحة المعاينة. تتيح لك هذه اللوحة التحقق من نتيجة تخصيصاتك وتكون مفيدة بشكل خاص عندما يتم تطبيق التغييرات على عناصر غير مرئية في لوحة محرر الموقع.

تُظهر الصورة التالية ثلاث مجموعات أنماط مختلفة مقارنة:

الطباعة

لوحة الطباعة هي المكان الذي تتحكم فيه في طباعة موقع الويب الخاص بك. بالطبع ، تعتمد عناصر التحكم المتوفرة في هذه اللوحة على إعدادات theme.json الخاصة بك.

على سبيل المثال ، يوضح النسق Twenty-One Blocks (TT1 Blocks) خصائص الطباعة التالية:

 "settings": { "typography": { "customLineHeight": true, "fontSizes": [], "fontFamilies": [] } }

تُظهر الصورة التالية إعدادات الطباعة الناتجة في الشريط الجانبي للأنماط العامة:

دعنا نتعمق قليلاً ونرى كيف يعلن موضوع TT1 Blocks عن fontFamilies :

 "fontFamilies": [ { "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", "slug": "system-font", "name": "System Font" }, { "fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif", "slug": "helvetica-arial" }, { "fontFamily": "Geneva, Tahoma, Verdana, sans-serif", "slug": "geneva-verdana" }, { "fontFamily": "Cambria, Georgia, serif", "slug": "cambria-georgia" }, { "fontFamily": "Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif", "slug": "hoefler-times-new-roman" } ]

يمكنك التحقق من مجموعات الخطوط هذه في لوحة معاينة الأنماط العالمية:

الألوان

في قسم الألوان ، يمكنك عرض لوحات الألوان وتحريرها وتخصيص لون العديد من عناصر الموقع.

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

في هذه اللوحة ، ستتمكن من ضبط وتعديل لون العنصر الحالي.

تَخطِيط

المجموعة الأخيرة من الأدوات مخصصة لتخصيصات التخطيط. في السياق العالمي ، يقتصر هذا على حاوية الموقع.

كتل

من خلال تنفيذ آلية الأنماط العامة ، أصبح من الممكن الآن أيضًا تغيير مظهر كتل معينة ، مثل الفقرة (الطباعة والألوان) والأزرار (التخطيط) والعمود (الألوان والتخطيط).

لاحظ أنه لا يمكن تخصيص أنماط الكتلة من واجهة الأنماط العامة إلا إذا أعلنت الكتلة دعمها لوظيفة معينة في ملف block.json المقابل. على سبيل المثال ، تدعم الكتلة core/post-title حاليًا الأنماط التالية:

 "supports": { "align": [ "wide", "full" ], "html": false, "color": { "gradients": true, "link": true }, "spacing": { "margin": true }, "typography": { "fontSize": true, "lineHeight": true, "__experimentalFontFamily": true, "__experimentalFontWeight": true, "__experimentalFontStyle": true, "__experimentalTextTransform": true, "__experimentalLetterSpacing": true, "__experimentalDefaultControls": { "fontSize": true, "fontAppearance": true, "textTransform": true } } },

نظرًا لأن الكتلة core/post-title تدعم الألوان والتباعد والطباعة ، فستجد الإدخالات المقابلة في إعدادات الأنماط العامة من كتلة عنوان المنشور.

توضح الصورة التالية إعدادات الطباعة ، والتي يمكنك مقارنتها بسهولة بالكود أعلاه:

تجدر الإشارة إلى أن WordPress 5.9 يقدم فقط التطبيق الأول لواجهة الأنماط العالمية. كما يشير ماتياس فينتورا ، يمكننا أن نتوقع بشكل معقول مزيدًا من التطوير لميزة التحكم في النمط الجديد:

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

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

يمكن أن تتضمن التحسينات الإضافية قدرة السمات على توفير لوحات ألوان بديلة وتنوعات نمط عالمية متعددة.

في الأسبوع الماضي ، قمت ببناء عدد قليل من تنوعات الألوان + الخطوط في Twenty-Two إلى سمات فرعية فائقة البساطة. إنها خفيفة الوزن حقًا ، وأنا أحب فكرة تقديم موقع مختلف تمامًا للناس بنقرة واحدة. https://t.co/dItIkvvhK9 pic.twitter.com/rB4CcTfW0A

- kjellr (kjellr) 15 نوفمبر 2021

يمكن للمطورين التعمق في آلية التصميم العالمية في مقالة دعم الإعدادات والأنماط العامة (theme.json). ستجد أمثلة إضافية في مقدمتنا إلى السمة الافتراضية Twenty-Two.

كتلة التنقل

تمت تسمية مجموعة التنقل بأنها "واحدة من أكثر مجموعات السمات تأثيرًا" ، ولا نخشى أن نقول إننا نتفق معها.

كانت الكتلة في المرحلة الجنينية لفترة من الوقت (انظر أيضًا مشكلة تتبع كتلة التنقل ومسألة التتبع i2). ومع ذلك ، بعد أن تم إصلاح جميع المشكلات المعلقة وأدوات الحظر المدرجة في WordPress 5.9 ، يمكننا أخيرًا البدء في استخدام واحدة من أقوى الميزات المدمجة في جوهر WordPress 5.9.
[CTA]

نظرة عامة سريعة على واجهة كتلة التنقل

قد يكون استخدام الكتلة الجديدة مربكًا بعض الشيء في البداية ، ولكن بمجرد تعطلها ، ستقدر إمكاناتها الكاملة.

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

تتيح لك قائمة التنقل الجديدة أيضًا استيراد القوائم التي تم إنشاؤها من خلال شاشة قوائم المظهر المتوفرة مع السمات الكلاسيكية.

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

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

تتم إضافة روابط التنقل الجديدة على الفور إلى مجموعة التنقل بالنقر فوق رمز علامة الجمع ( + ) على الجانب الأيمن (انظر أيضًا ملاحظات إصدار Gutenberg 11.7) ، ما لم تتم إضافة أنواع أخرى من الكتل بالفعل إلى القائمة.

يؤدي النقر فوق الزر " تحرير " في شريط أدوات كتلة Navigation Link إلى تحويل عنصر قائمة إلى ارتباط مخصص. يتيح لك ذلك إضافة العناصر وتحريرها وإعادة ترتيبها وإزالتها بشكل فردي.

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

الارتباط المخصص ، والفاصل ، وشعار الموقع ، والرابط الرئيسي ، والرموز الاجتماعية ، وكتل البحث معروضة الآن للمستخدمين عند إضافة كتل إلى قوائم التنقل.

في الشريط الجانبي "الإعدادات" ، ستجد مجموعة شاملة من الخيارات للتحكم في العديد من جوانب قوائم التنقل الخاصة بك.

تتضمن لوحة Layout عناصر تحكم للضبط والاتجاه والالتفاف.

تتميز مجموعة التنقل أيضًا بلوحة إعدادات عرض محسّنة مع خيار لقائمة برجر تعمل دائمًا.

يمكنك أيضًا تخصيص ألوان النص والخلفية لقوائمك وقوائمك الفرعية.

إضافة مفيدة أخرى تمت إضافتها مؤخرًا إلى مجموعة التنقل هي دعم Block Gap ، والذي يضيف قدرة المستخدمين على التحكم في المسافة بين عناصر القائمة.

توفر لوحة Typography مجموعة من عناصر التحكم لعائلة الخط ، والمظهر ، وارتفاع الخط ، والزخرفة ، وحالة الأحرف. يمكن تشغيل / إيقاف تشغيل جميع عناصر التحكم هذه من القائمة المنسدلة التي تظهر عند النقر فوق رمز علامة القطع على اليمين.

كتلة التنقل: تحت الغطاء

يتم تخزين بيانات كتلة التنقل في قاعدة البيانات باستخدام نوع المنشور المخصص wp_navigation .

لماذا هذا مثير للاهتمام لمستخدمي WordPress ، وكيف يعمل؟

لنفترض أنك أنشأت قائمة تنقل تتكون من رابطين مخصصين ومربع بحث. مع تثبيت موضوع Twenty-Two ، يمكن أن تبدو القائمة كما هو موضح في الصورة التالية:

يتم تخزين كتلة التنقل أعلاه في قاعدة البيانات كنوع نشر wp_navigation على النحو التالي:

 <!-- wp:navigation-link {"label":"Contacts","type":"page","id":7,"url":"http://wordpress-59.local/?page_id=7","kind":"post-type","isTopLevelLink":true} /--> <!-- wp:navigation-link {"label":"About Us","type":"page","id":10,"url":"http://wordpress-59.local/?page_id=10","kind":"post-type","isTopLevelLink":true} /--> <!-- wp:search {"showLabel":false,"placeholder":"Search the site","buttonPosition":"button-inside","buttonUseIcon":true} /-->

يتيح تخزين محتوى كتلة التنقل في قاعدة البيانات للمستخدمين استخدام قوائم التنقل نفسها عبر سمات الكتلة المختلفة. إذا لم تكن القائمة مرئية على الفور ، فما عليك سوى اختيار قائمة التنقل المطلوبة في محدد القائمة (انظر أيضًا الإصدار # 36087 و PR # 36178).

تُظهر الصورة التالية القائمة أعلاه مع سمة Twenty-One Blocks:

لقد مرت كتلة التنقل بالعديد من التكرارات. يمكنك التعمق في كل تطبيق في ملاحظات إصدار Gutenberg 11.7 و 11.8 و 11.9.

يمكنك أيضًا قراءة المزيد حول مجموعة التنقل في ملاحظة مطور مجموعة التنقل الجديدة ومقال دعم مجموعة التنقل.
[CTA]

معارض الصور والصور المميزة وأيقونات الموقع

بهدف جعل الصور تتصرف بشكل أكثر اتساقًا عبر السياقات المختلفة ، يقدم WordPress 5.9 ميزات جديدة وتحسينات على العديد من الكتل. تمت مراجعة Gallery Block بالكامل ، في حين أن التغييرات المختلفة التي تم إجراؤها على كتل الصور المميزة ورمز الموقع تمنح المستخدمين مزيدًا من التحكم الدقيق في الصور المعنية.

كتلة معرض مُعاد تشكيلها

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

بالإضافة إلى ذلك ، كانت الميزات المهمة مفقودة من صور المعرض ، مثل إضافة روابط مخصصة إلى الصور الفردية في المعرض.

لفهم سبب عدم التناسق بين الصور في السياقين المختلفين لصورة واحدة وصورة في معرض بشكل أفضل ، دعنا نلقي نظرة على كتلة المعرض في طريقة العرض Code في WordPress 5.8:

لاحظ أن تفاصيل الصورة مخزنة فقط في محدد كتلة المعرض (راجع أيضًا ما المقصود بكتلة Gutenberg؟).

هذا جعل الصور الفردية تتصرف بشكل مختلف عن الصور الموجودة في المعارض.

لجعل الصور تتصرف بشكل متسق في سياقين مختلفين ، يقدم WordPress 5.9 كتلة معرض معاد تصميمها بالكامل ، والتي تتصرف الآن كحاوية لمجموعة من عناصر الشكل بدلاً من قائمة الصور غير المرتبة.

في WordPress 5.9 ، يتم دمج صور المعرض باستخدام واجهات برمجة تطبيقات innerBlocks الأساسية ، وتخزن كل صورة مجموعة التفاصيل الخاصة بها ، تمامًا مثل الصور الفردية.

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

باستخدام قالب المعرض الجديد ، ستتمكن من تصميم الصور بشكل فردي. هذا يمنح مجموعة واسعة من فرص التخصيص.

تعرض الصورة أدناه صورًا متعددة في معرض ، كل منها بزوايا دائرية مختلفة:

يمكنك أيضًا استخدام مرشحات ثنائية مختلفة على صور مختلفة في نفس المعرض.

وبالطبع ، يمكنك تعيين فئة CSS محددة لكل صورة ، مما يمنحك قوى خارقة إضافية لإضافة أي تخصيص تحتاجه إلى صور معرضك.

للحصول على عرض أقرب لكتلة المعرض الجديدة ، راجع أيضًا Gallery Block Refactor Dev Note ، وتحسينات قالب المعرض القادم ، وملاحظات إصدار Gutenberg 11.4.

تحسينات الصورة المميزة

تم أيضًا إدخال العديد من التحسينات على كتلة الصور المميزة.

ضوابط الأبعاد الأساسية

تتميز كتلة الصور المميزة الآن بلوحة إعدادات أبعاد جديدة توفر عناصر تحكم في الارتفاع والعرض والمقياس.

ينطبق التحكم في الأبعاد أيضًا على الصور المميزة في كتل Query Loop ، كما هو موضح في الصورة التالية:

مرشحات Duotone على الصور المميزة

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

الآن ، بدءًا من WordPress 5.9 ، تتوفر أيضًا مرشحات ثنائية اللون في كتل الصور المميزة في أي سياق ، من قوالب المنشورات والصفحات إلى كتل Query Loop.

تفتح هذه الميزة الباب أمام مجموعات ألوان إبداعية ومتسقة في جميع أنحاء الموقع.

اقتصاص الصورة في شعار الموقع

قبل إصدار WordPress 5.9 (و Gutenberg 11.6) ، لا يمكن تحرير صور الشعار إلا قبل تحميلها. باستخدام WordPress 5.9 ، يمكنك اقتصاص الصور المستخدمة في قالب شعار الموقع وتصغيرها وتدويرها مباشرةً من شريط أدوات الحظر.

أدوات التصميم الجديدة والكتل وتحسينات واجهة المستخدم

يتم دمج أحد عشر إصدارًا من إصدارات Gutenberg في جوهر WordPress 5.9 ، مما يوفر العديد من الميزات والتحسينات وإصلاحات الأخطاء التي لن يكون من الممكن تغطيتها جميعًا في مقال واحد.

لذلك اخترنا بعضًا من تلك التي وجدنا أنها تستحق الاهتمام. للحصول على نظرة عامة أعمق على هذه الميزات والتحسينات ، قد ترغب أيضًا في التحقق من منشورات الإصدار لـ Gutenberg 10.8 و 10.9 و 11.0 و 11.1 و 11.2 و 11.3 و 11.4 و 11.5 و 11.6 و 11.7 و 11.8 و 11.9.

مع ذلك ، سيغطي هذا القسم التغييرات التالية:

تدعم الحدود واجهة المستخدم

بدءًا من WordPress 5.9 ، عندما تعلن theme.json عن إعدادات border وتعلن الكتلة عن دعم الحدود عبر Block Support API ، ستوفر لوحة الإعدادات الجديدة عناصر تحكم لنصف قطر الحدود والعرض والنمط واللون والوحدات (انظر أيضًا Gutenberg 11.1) .

تعد كتلة المجموعة الأساسية مثالاً جيدًا على هذا التحسين المفيد لواجهة المستخدم. يشتمل ملف block.json الخاص بلوك المجموعة الآن على تصريحات supports التالية:

 { ... "supports": { "align": [ "wide", "full" ], "anchor": true, "html": false, "color": { "gradients": true, "link": true }, "spacing": { "padding": true, "__experimentalDefaultControls": { "padding": true } }, "__experimentalBorder": { "color": true, "radius": true, "style": true, "width": true, "__experimentalDefaultControls": { "color": true, "radius": true, "style": true, "width": true } }, ... }, ... }

تتيح هذه الميزة للمستخدمين إنشاء تأثيرات رسومية رائعة على مواقع الويب الخاصة بهم بأقل جهد ممكن. يمكنك رؤيته أثناء العمل مع موضوع Twenty-Two الجديد.

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

إذا كنت مطورًا للقوالب وتريد إضافة هذه الميزة إلى السمات الخاصة بك ، فافتح ملف theme.json وأعلن دعم الحدود كما هو موضح في الكود التالي:

 { "version": 1, "settings": { "border": { "customColor": true, "customRadius": true, "customStyle": true, "customWidth": true } } }

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

تحسينات طريقة عرض القائمة

مع WordPress 5.9 ، تم تحسين عرض القائمة وهو الآن يتميز بالسحب والإفلات ، والأقسام القابلة للطي ، ونقاط ارتساء HTML.

السحب والإفلات في عرض القائمة

كما هو مذكور في طلب السحب رقم 33320 ، تم تنفيذ السحب والإفلات في عرض القائمة ولكن تم تعطيله بسبب مشاكل في الأداء.

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

عرض قائمة المقاطع القابلة للطي

من التحسينات المهمة الأخرى في طريقة عرض القائمة القدرة على توسيع / ​​طي أقسام الكتل المتداخلة. يتيح لك ذلك التنقل بسهولة في هياكل الكتل المعقدة ، وتوسيع مجموعات واحدة من الكتل مع ترك كل البقية منهارة.

يمكنك أيضًا توسيع أقسام عرض القائمة وطيها باستخدام الأسهم اليمنى واليسرى.

نقاط ارتساء HTML في عناصر عرض القائمة

هناك تحسين آخر مفيد وهو القدرة على إضافة روابط HTML إلى كتلك في عرض القائمة ورؤيتها في لمحة.

كتلة التحكم في تباعد الفجوة

تم تقديمه لأول مرة في Gutenberg 11.4 وتم دمجه الآن مع WordPress 5.9 ، يتيح لك عنصر التحكم الجديد في Block Spacing تعيين مسافة مخصصة بين العناصر داخل الكتلة. أدناه ، يمكنك مشاهدة معاينة بقيم مختلفة لتباعد الكتل في كتلة أعمدة مع السمة الافتراضية Twenty-Two:

يتوفر تباعد الفجوات مبدئيًا لكتل ​​معينة ، بما في ذلك الأزرار والصور والأعمدة والعناوين والتنقل ، ولكن الدعم يجب أن يمتد إلى المزيد من الكتل في المستقبل.

يجب أن تقوم السمات بتمكين تباعد الفراغات في theme.json باستخدام خاصية "أدوات المظهر " الجديدة. يمكنك قراءة المزيد عن أدوات المظهر في غوصنا العميق في Twenty-Two. راجع أيضًا طلبات السحب # 33991 و # 34630.

معاينة عنوان URL المنسق للتحكم في الارتباط

من خلال الاستفادة من نقطة نهاية تفاصيل عنوان URL الجديدة لـ REST ، يوفر عنصر التحكم في الارتباط الآن معاينة عنوان URL منسقًا تعرض تفاصيل مورد هدف الارتباط.

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

قم بإنشاء صفحات من Link Popup

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

تحسينات على كتلة البحث

تعرض "كتلة البحث" الآن إعدادات الزر ولون الحدود.

يمكنك الآن أيضًا تخصيص الخلفية ولون النص ولون الحدود ونصف القطر.

ضوابط جديدة لأبعاد الكتلة

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

سيجد مطورو الكتلة مكون <DimensionControl /> موثقًا على GitHub ، لكن لاحظ أنه لا يزال مميزًا كميزة تجريبية ويمكن أن يخضع لتغييرات متقطعة في وقت كتابة هذه السطور.

تمت إضافة كتلة مجموعة عناصر واجهة مستخدم جديدة إلى شاشة الأدوات

كتلة مجموعة عناصر واجهة مستخدم جديدة متاحة الآن في محرر عناصر واجهة المستخدم المستند إلى الكتلة. تسمح لك أحدث كتلة بإضافة مجموعة من الكتل في عنصر واجهة مستخدم بعنوان في السمات الكلاسيكية "محرر أدوات ومخصص".

يمكنك قراءة المزيد عن محرر الأدوات في محرر عناصر واجهة المستخدم Block-Based Widgets Editor و Block Widgets في Customizer.

Flex Layout وكتلة الصف الجديدة

تم تقديم التصميم المرن في الأصل كميزة تجريبية مع Gutenberg 11.2 ، وتم توسيعه ليشمل عدة كتل ، بما في ذلك الروابط الاجتماعية وكتل المجموعة.

توفر بعض الكتل ، مثل كتلة الروابط الاجتماعية ، الآن مجموعة من عناصر تحكم شريط الأدوات وإعدادات الشريط الجانبي التي تسمح لك بتخصيص التخطيط المرن.

تتوفر هذه الوظيفة نفسها في كتلة التنقل وكتلة الصف ، وهو شكل جديد من كتلة المجموعة تم تقديمه مع Gutenberg 11.5.

تُظهر الصورة التالية كتلة الصف مع عناصر تحكم التخطيط في الشريط الجانبي للإعدادات:

أدناه ، يمكنك رؤية كتلة الصف نفسها على الواجهة الأمامية وفي أداة فحص Chrome.

تحسينات نمط الكتلة

تم تقديم أنماط الحظر لأول مرة مع WordPress 5.5 ، حيث تسمح أنماط الحظر لمستخدمي WordPress بتضمين هياكل معقدة جاهزة للاستخدام من الكتل المتداخلة في محتواهم ببضع نقرات فقط.

الآن ، يعمل WordPress 5.9 على نقل الأشياء خطوة إلى الأمام نحو إضفاء الطابع الديمقراطي على التصميم وتمكين المستخدم من خلال إدخال بعض التحسينات على نظام نمط الكتلة.

إذن ، ما الجديد في أنماط الكتلة في WordPress 5.9؟

الأنماط المميزة من دليل الأنماط

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

على نفس المنوال ، مع دخول الأنماط مباشرة إلى لوحة معلومات WordPress ، يجب تشجيع مطوري WordPress على إنشاء ونشر المزيد والمزيد من الأنماط بمرور الوقت ، مما يؤدي إلى قدرات تصميم متقدمة بشكل متزايد للمستخدمين.

مستكشف أنماط ملء الشاشة جديد

مع استمرار تزايد عدد أنماط الكتلة المتاحة في دليل الأنماط واستخدام المزيد من السمات لها ، يقدم WordPress 5.9 واجهة تنقل نمط كتلة جديدة: مستكشف الأنماط.

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

ستجد أيضًا ملاحظات إضافية والعديد من أمثلة أنماط الكتلة في غوصنا العميق في موضوع Twenty-Two WordPress.

إذا كنت مهتمًا وترغب في معرفة المزيد ، فاستمع إلى بودكاست Josepha Haden Chomphosy الحلقة 16 و 21 ، وشاهد فيديو Exploring WordPress 5.9 على YouTube من آن مكارثي.

قالب Twenty-Two والعشرون وموضوعات قوالب WordPress

باستخدام WordPress 5.9 ، لم تعد بحاجة إلى تثبيت المكون الإضافي Gutenberg لتمكين تحرير الموقع بالكامل على موقع WordPress الخاص بك. تحتاج فقط إلى السماح لموضوع الكتلة بالاستفادة من جميع ميزات FSE.

بالإضافة إلى ذلك ، تم تجميع WordPress 5.9 مع سمة افتراضية جديدة تمامًا ، Twenty-Two ، وهو مغير للعبة حيث أن Twenty Twenty-Two هو أول قالب افتراضي على الإطلاق.

Twenty-Two هو موضوع مرن للغاية وقابل للتخصيص. يوفر صندوق رمل مثالي لتجربة تدفق تحرير القالب الجديد ، والكتل الجديدة ، وتحسينات الواجهة ، وجميع ميزات تحرير الموقع المضافة إلى النواة ، بدءًا من WordPress 5.9.

كما ذكرنا أعلاه ، كل ما عليك فعله هو تثبيت وتفعيل سمة كتلة ، مثل Twenty-Two. بمجرد تنشيط السمة ، سيظهر عنصر قائمة محرر (تجريبي) جديد في قائمة مسؤول لوحة معلومات WordPress.

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

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

لذلك ، اعتبارًا من WordPress 5.9 ، لم تعد نقطة الوصول إلى Customizer متوفرة في قائمة المسؤول عندما تكون سمة الحظر نشطة (إلا إذا كنت تستخدم مكونًا إضافيًا يستخدمها).

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

لديك حاليًا أربع فئات مختلفة من السمات للاختيار من بينها:

• سمات الكتلة : السمات المصممة لـ FSE
• السمات العامة: السمات التي تعمل مع كل من أداة التخصيص ومحرر الموقع
• السمات المختلطة : السمات الكلاسيكية التي تدعم ميزات FSE مثل theme.json
• السمات الكلاسيكية : السمات مع قوالب PHP ، و function.php ، إلخ.

نظرًا للتأثير الذي من المحتمل أن تحدثه القوالب على نظام WordPress البيئي ، فلدينا مقالة كاملة تغطي قالب Twenty-Two و WordPress. تأكد من التحقق من ذلك للحصول على نظرة عامة أكثر تعمقًا.

تحسينات في الأداء

هنا في Kinsta ، نحن مهووسون بسرعة موقع الويب. لهذا السبب نحن متحمسون بشأن تحسينات الأداء التي تأتي مع WordPress 5.9.

ستؤثر هذه التحسينات على العديد من مناطق نظام إدارة المحتوى ، بدءًا من محرر الكتلة وحتى السمات المحظورة والتحميل البطيء وغير ذلك. دعنا نتعمق.

حظر التحسينات

منذ إصدار WordPress 5.9 ، يتم عرض أنواع وأنماط وفئات الكتل بشكل بطيء في Block Inserter. يقوم المتصفح بتحميل المحتوى ذي الأولوية الأعلى أولاً ، مما يمنح المستخدم تجربة تحرير أكثر سلاسة وأداءً محسنًا.

تؤثر تحسينات الأداء الملحوظة الأخرى في سياق محرر الكتلة على الكتل القابلة لإعادة الاستخدام وعرض القائمة.

تم تحميل CSS أقل

بالنسبة للواجهة الأمامية ، خفض WordPress 5.9 بشكل كبير كمية CSS المحملة بواسطة سمات الكتلة ، مما أدى إلى تحميل الصفحات بشكل أسرع.

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

تحسينات أداء التحميل الكسول

تم تقديم التحميل البطيء للصور لأول مرة في WordPress 5.5. بدءًا من WordPress 5.7 ، تم توسيع وظيفة التحميل البطيء لتشمل إطارات iframe ، مما يسمح لأصحاب المواقع ببناء مواقع ويب أسرع وتحسين مُحسّنات محرّكات البحث الخاصة بهم.

على أي حال ، بعد تحليل أكبر رسم للمحتوى (LCP) ، اتضح أن تعيين سمة loading="lazy" لجميع الصور وإطارات iframes على الصفحة يتسبب في تدهور طفيف في الأداء.

لم يكن مجرد تخطي سمة loading="lazy" حلاً لأن القيام بذلك سيؤدي إلى فقدان المزايا الواضحة للتحميل البطيء.

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

الآن ، كحل للمقايضة ، بدءًا من WordPress 5.9 ، لا يتم تطبيق سمة loading="lazy" على صورة المحتوى الأولى أو iframe. وجد تحليل أجري على 50 سمة شائعة في WordPress أن هذا الحل يؤدي إلى تحسينات كبيرة في الأداء وتحميل الصفحات بنسبة تصل إلى 30٪ أسرع.

يوضح فيليكس أرنتز كيف يعمل:

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

يمكن لمطوري السمات الآن استخدام مرشح wp_omit_loading_attr_threshold لتغيير عدد الصور / إطارات iframes التي سيتم تخطيها من التحميل البطيء.

أوراق أنماط متعددة لكل كتلة

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

بالنسبة الى آري ستاثوبولوس:

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

ميزات إضافية للمطورين

بالإضافة إلى العديد من الميزات وتحسينات واجهة المستخدم التي تمت مناقشتها حتى الآن ، يقدم WordPress 5.9 أيضًا العديد من الميزات للمطورين.

سمة جديدة لقفل الكتل

يمكن لمطوري الحظر الآن منع المستخدمين من نقل أو حذف الكتل الفردية عن طريق إضافة سمة lock في إعدادات الحظر:

 { ... "attributes": { "lock": { "type": "object", "default": { "move": true, "remove": true } } } }

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

يؤدي تحديد سمة lock ، كما هو موضح في الكود أعلاه ، إلى إخفاء محركات الكتلة وعناصر التحكم في النقل إلى وإزالة من شريط أدوات الحظر. الصورة أدناه توضح النتيجة النهائية على الشاشة:

يمكنك أيضًا قفل كتلة معينة في نمط كتلة. على سبيل المثال ، راجع أيضًا تأمين الكتل في WordPress 5.9.

واجهة برمجة تطبيقات جديدة للوصول إلى الإعدادات والأنماط العالمية

يقدم WordPress 5.9 واجهة برمجة تطبيقات PHP عامة جديدة لقراءة البيانات من theme.json .

إعدادات وأنماط القراءة من theme.json

هناك وظيفتان جديدتان لقراءة البيانات من أقسام settings styles المعلنة في theme.json :

 wp_get_global_settings( $path = array() , $context = array() ); wp_get_global_styles( $path = array(), $context = array() );

• $path عبارة عن مصفوفة تسرد المسار إلى الإعداد المحدد
• $context مصفوفة تحدد سياق هذه البيانات. يمكن للمطورين القراءة من قسم محدد لإعدادات الحظر - على سبيل المثال ، array( 'block_name' => 'core/paragraph' ) . يسمح مفتاح orygin الذي تم ضبطه على base بتجاهل البيانات المخصصة المحفوظة من قبل المستخدم.

إرجاع نموذج التعليمات البرمجية التالي قيمة الإعداد contentSize . في Twenty-Two ، سيكون 650px :

 wp_get_global_settings( array( 'layout', 'contentSize' ) );

من خلال تحديد سياق ، يمكنك استرداد أنماط كتل معينة. يُظهر الكود التالي كيفية استرداد قيمة نصف قطر الحدود للكتلة core/button :

 function get_global_styles() { return wp_get_global_styles( array( 'border', 'radius' ), array( 'block_name' => 'core/button' ) ); }

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

لتجاهل بيانات المستخدم ، يمكنك استخدام الكود التالي:

 function get_global_styles() { return wp_get_global_styles( array( 'border', 'radius' ), array( 'block_name' => 'core/button', 'origin' => 'base' ) ); }

الحصول على ورقة الأنماط التي تم إنشاؤها

يقدم WordPress 5.9 أيضًا وظيفة جديدة للحصول على ورقة الأنماط الناتجة عن الأنماط الافتراضية والموضوع والأنماط المخصصة:

 wp_get_global_stylesheet( $types = array() );

$types هي قائمة بالأنماط المراد إنشاؤها.

يمكنك قراءة المزيد عن واجهة برمجة التطبيقات الجديدة في واجهة برمجة التطبيقات الجديدة للوصول إلى الإعدادات والأنماط العالمية.

المزيد من الميزات للمطورين

تتضمن تغييرات WordPress 5.9 الإضافية للمطورين التي قد ترغب في معرفتها ما يلي:

• قوالب القوالب ، طريقة جديدة لبناء السمات في WordPress 5.9
• تحديثات الإعدادات والأنماط و theme.json
• التغييرات والمرشحات التي تركز على الموضوع في WordPress 5.9
• استعلامات القدرات الجديدة في WordPress 5.9
• التغييرات الأساسية المتنوعة في WordPress 5.9
• تغييرات محرر الكتل المتنوعة في WordPress 5.9
• تمتع بمزيد من التحكم في مناطق الكتلة الداخلية (كمطور كتلة)

دليلك النهائي إلى WordPress 5.9: من تحسينات واجهة المستخدم إلى الأنماط العالمية (والمزيد!) انقر للتغريد

ملخص

سنختتم هذه المقالة بملاحظة سريعة حول حصة سوق WordPress. يشغل WordPress حاليًا أكثر من 65 ٪ من جميع مواقع الويب التي يُعرف نظام إدارة المحتوى بها ويقع شمال 43 ٪ من جميع مواقع الويب .

هذه الأرقام مثيرة للإعجاب ، خاصة عند مقارنتها بأقرب المنافسين الذين لديهم أقل من 5 ٪ من حصة السوق ، مثل Shopify.

وهذا يعني أيضًا أنه لا يمكنك التغاضي عن تطور WP CMS. كل إصدار جديد من WordPress يجلب ميزات جديدة ، وتحسينات للواجهة ، وتحسينات في الأداء ، و WordPress 5.9 ليس استثناءً. كل ما تحتاجه لاختبار الميزات الجديدة هو سمة الكتلة ، مثل السمة الافتراضية الجديدة Twenty-Two ، وستكون جاهزًا للانطلاق.

إليكم الآن! هل أنت مستعد لإجراء التبديل لحظر السمات و FSE؟ وما هي التغييرات المفضلة لديك القادمة مع WordPress 5.9؟