إذا كان هذا هو تطوير موضوع WordPress الحديث ، فسجّل لي

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

جاء الإلهام لهذا الموضوع من عدد قليل من الأشخاص والمشاريع الأخرى. بدأت تجربة الصفحة المقصودة المكونة من عمودين من Kjell Reigstad اعتبارًا من أكتوبر 2020 في تشغيلها لأول مرة. أدى سؤال أخير إلى عمود اسأل النادل حول السمات المدمجة والمريحة إلى تدفق عصائر الإبداعية مرة أخرى. ومع ذلك ، فإن رؤية فريق Themes يوافق على سمة كتلة مماثلة ، Miniblock OOAK ، من قبل Carolina Nymark تعني أن القواعد أصبحت الآن متساهلة بما يكفي لوضع شيء مثل هذا في العالم.

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

مع WordPress 5.9 ونظام أكثر ثباتًا لتخصيص الكتل قبل أيام قليلة فقط ، حان الوقت لمنحه فرصة أخرى.

أردت أن أتعلم منعهم بعمق . كانت الطريقة الوحيدة لفعل ذلك هي العودة إلى البداية. كنت بحاجة إلى إعادة التعرف على تلك العناصر التأسيسية لـ HTML و CSS و PHP. وننسى كل ما كنت أعتقد أنني أعرفه عند البناء على قمة شبكة الويب الحديثة. كنت بحاجة إلى أن أصبح مستجدًا مرة أخرى.

من الناحية الفنية ، من المستحيل أن أنسى كل ما أعرفه دون أن أتحمل نوعًا من فقدان الذاكرة. ومع ذلك ، ربما - ربما - يمكنني العودة إلى اللبنات الأساسية للويب.

هل يمكنني تدوير سمة WordPress بدون شبكة معقدة من التبعيات تمتد على أكثر من 900 مشروع في مجلد /node_modules ؟

هل يمكنني إنشاء شيء ما دون أن أقوم بسحب نصوص PHP البرمجية الأساسية الخاصة بي عبر Composer؟

هل يمكنني ، كما تعلم ، إنشاء قالب WordPress؟

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

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

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

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

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

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

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

ما تعلمته من التجربة

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

لقد قمت ببناء السمة من البداية باستخدام محرر الكود الخاص بي وتثبيت WordPress محلي فقط. لا توجد وحدات عقدة. لا توجد مكتبات PHP. لا يوجد إعداد بناء على الإطلاق.

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

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

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

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

أنا متردد في مشاركة العمل الذي لم يتم الانتهاء منه ، ولكن يجب علي أيضًا إظهار الدليل. يمكن للمهتمين مراجعة GitHub repo في تاريخ هذه المقالة ، على الأقل قبل أن أفعل أي شيء مجنون به.

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

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

فرصة ضائعة

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

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

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

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

على سبيل المثال ، فيما يلي قوالب الرأس التي يسجلها Twenty-Two-Two كما تظهر ضمن عنصر قائمة شريط أدوات "استبدال":

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

أحد الجوانب السلبية لإنشاء أنماط مخصصة لأجزاء قالب معينة هو أن المستخدمين النهائيين ليس لديهم طريقة لاستبدال أو تحويل جزء بالجملة بنمط جديد.

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

 <!-- wp:pattern { "slug":"namespace/slug" } -->

تكمن المشكلة في هذا الأسلوب في أن محرر الموقع لا يعرض محتوى النمط في القائمة المنسدلة "استبدال" ( هل اكتشفت خطأ للتو؟ ):

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