مكونات G2 ، إعادة تخيل من الصفر لمكونات WordPress

تحديث بعض الأشياء.

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

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

هذه هي خطة دمج مكونات G2 في Gutenberg.

قال كواش "G2 Components هو مشروع يجسد فكرة جعل واجهات المستخدم وتجارب المستخدم أفضل للآخرين". "في الوقت الحالي ، تم تجسيده كنظام مكون مصمم للعمل ضمن سياق وبيئات Gutenberg و WordPress."

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

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

يعتقد Quach أن المنصات قد استفادت من اتباع نهج مماثلة. وأشار إلى أن التصميم متعدد الأبعاد من Google قد رفع مستوى نظام Android الأساسي وجلب التماسك عبر منتجات الشركة.

بدأ فريق Gutenberg بالفعل في دمج مكونات G2 في المشروع. يحل هذا التكامل محل مكونات WordPress (@ wordpress / Components) بطريقة خاضعة للرقابة بحيث لا يجب أن تكسر عمليات التنفيذ الحالية داخل المحرر الأساسي أو مشاريع الطرف الثالث. سيتم تبديل المكونات الجديدة عندما تصبح جاهزة. قال كوتش: "مثل الضغط على مفتاح".

الفيديو التالي عبارة عن جولة تجول مدتها ساعة حول مكونات G2 التي نشرها Quach على YouTube:

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

ما هي المكونات؟

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

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

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

قال Quach إن إحدى أسهل الطرق للنظر إلى هذا هي من منظور الخلفية - يحتوي نظام المكونات أيضًا على نظام فرعي خاص. "بدلاً من الطريقة التقليدية لكتابة CSS كـ" مظهر "للطبقة في الأعلى ، يمكن تعديل جماليات واجهة المستخدم من خلال قيم التكوين - على غرار كيفية تكوين WordPress بالتعريفات في wp-config.php ،" قال. "هذا التمييز مهم لأن هذه القيم تدخل مباشرة في نظام النمط ، مما يسمح للأنماط بالتحميل بشكل صحيح في المكان المناسب وفي الوقت المناسب. كل ذلك دون التأثير على أنماط البيئة الحالية ، والأهم من ذلك ، عدم التأثر بأنماط البيئة الحالية ".

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

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

ماذا يعني هذا للمطورين؟

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

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

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

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

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

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