التحكم في تصميم الكتل عبر البرنامج المساعد EditorPlus WordPress

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

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

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

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

كيف يعمل EditorPlus

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

• الحدود
• مربع الظل
• تحجيم
• خلفية
• هامش
• حشوة
• نصف قطر الحدود
• إضافات

ستظهر علامات التبويب هذه فقط لكتل ​​WordPress الأساسية وليس لكتل ​​المكونات الإضافية لجهات خارجية في الوقت الحالي. بصرف النظر عن علامة التبويب Extras ، تتوافق كل علامة تبويب مع نظيراتها في CSS. توفر علامة التبويب "الإضافات" خيار "عرض" أكثر تقدمًا ، والذي يسمح للمستخدمين بتغيير قيمة display عنصر التفاف الكتلة في CSS. من الأفضل ترك هذا الخيار للمستخدمين الأكثر تقدمًا. كما يوفر خيار انتقال يعمل بشكل جيد مع أنماط التمرير.

تحتوي كل علامة من علامات تبويب خيارات الكتلة أيضًا على أزرار "R" و "H" غامضة. يسمح الزر "R" للمستخدمين بتمكين خيارات الاستجابة ، مما يعني أنه يمكنهم تغيير أنماط الحظر بناءً على شاشات سطح المكتب والجهاز اللوحي والجوال. يتيح الزر "H" للمستخدمين تغيير التصميم بناءً على حالة التمرير بالماوس.

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

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

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

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

كانت إحدى المشكلات التي واجهتها مع المكون الإضافي هي أنماط السمة النشطة الخاصة بي التي تجاوزت أنماط المكون الإضافي بشكل عام. على سبيل المثال ، يستهدف نسق Twenty Twenty الافتراضي p.has-background في CSS الخاص به لإضافة حشوة مخصصة. لذلك ، فإنه يلغي CSS الخاص ببرنامج EditorPlus بدرجة أعلى من التحديد. كانت هذه المشكلة متوقعة ، وقد أضاف مطور البرنامج المساعد حلاً لها في شكل مربع اختيار "هام" لكل خيار تصميم. إذا حدد المستخدم هذا المربع ، فإنه يضيف !important إلى قاعدة النمط في الإخراج ، والتي ستسمح له بإلغاء أنماط السمة. إنه ليس حلاً مقاومًا للخداع بنسبة 100٪. قد تختلف المسافة المقطوعة حسب الموضوع ، ولكن يجب أن تعمل مع غالبية حالات الاستخدام.

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

افكار اخيرة

بالنسبة لإصدار الإصدار 1.0 ، تم إيقاف تشغيل EditorPlus بداية قوية. في اختباراتي ، وجدت بعض العيوب. من المحتمل أن تأتي أي مشاكل للمستخدم العادي في شكل تعارضات موضوع ، ومن المرجح أن تكون تلك التعارضات حول السمات التي تستخدم خصوصية عالية أو !important في CSS الخاصة بهم.

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

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