كيف يستخدم Game Studio ومقره ميونيخ WordPress و Gutenberg لتعزيز موقعه على الويب

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

قامت Luehrsen Heinrich ، وهي وكالة إعلانات محلية ، ببناء الموقع بموضوع مخصص وسبع كتل مصممة لدعم متطلبات التحرير لفريق Mimimi.

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

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

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

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

يستخدم موقع Mimimi أيضًا كتلة تسجيل مخصصة في Mailchimp وكتلة فاصلة مخصصة توفر مزيدًا من المرونة ونقاط التوقف سريعة الاستجابة.

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

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

تجربة Gutenberg من Mimimi Games: المحررون يقدرون مفهوم الكتلة ولكنهم ما زالوا يواجهون مشكلات في قابلية الاستخدام

قال يوهانس روث ، الرئيس التنفيذي لشركة Mimimi Games ، إن فريقه استخدم WordPress في الماضي ويرى أن Gutenberg يمثل تحسينًا كبيرًا في تحرير المحتوى.

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

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

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

حدد روث شيئين فقدهما فريق Mimimi من المحرر السابق:

• الضغط على مفتاح الجدولة لوضع مسافة بادئة لقوائم التعداد النقطي وتحويل علامة التبويب إلى الخلف
• استخدام ctrl + a لتحديد كل النص بسرعة داخل كتلة (في بعض الأحيان يتم تحديد الصفحة بأكملها ، وهذا لا يساعد).

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

تمكين رواة القصص على شبكة الويب الحديثة: لماذا اتخذ Luehrsen Heinrich قفزة في تطوير Gutenberg كوكالة

قال Luehrsen إن وكالته قررت ركوب قطار Gutenberg العام الماضي في WordCamp Europe ، بعد التخلي عن أفكارهم الخاصة لإنشاء أداة إنشاء صفحات جديدة.

قال Luehrsen: "قبل شهر أو شهرين من WCEU في باريس ، كنا نجلس على مفهوم ونسخة ألفا من نظام بناء الصفحات الخاص بنا والذي كان مشابهًا بشكل مخيف للنهج القائم على الكتلة". "هذه الأسئلة والأجوبة التي أجراها مات جعلتنا ندرك بسرعة أن مشروعنا قد عفا عليه الزمن بالفعل. كنا محظوظين لأننا مررنا بسرعة كبيرة بالمراحل الخمس للحزن (يجب أن يكون هذا المنشور حول البيانات المنظمة "مساومة"). أعدنا ترتيب أولوياتنا وبدأنا العمل مع وعلى Gutenberg في نهاية أكتوبر أو نوفمبر من عام 2017. "

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

قال Luehrsen إن كونك مساهمًا في Gutenberg ساعد بشكل كبير في تعلم إنشاء الكتل ، على الرغم من عدم وجود خبرة سابقة في React و ES6.

قال Luehrsen: "لقد ساعدنا العمل مع Gutenberg ، والمساهمة في المشروع والحصول على تعليقات فورية من فريق Gutenberg المذهل ، كثيرًا في تمهيد عمليتنا". "تعتمد عملية إنشاء الكتل الحالية بشكل كبير على العمل الذي قام به Gary و Adam و Matias وجميع الآخرين ، ربما باستثناء أننا نستخدم LESS داخليًا وليس SCSS. ولكن من بنية المجلد ، إلى عملية الإنشاء ، إلى هيكلة الملف ، نحاول اتباع أسلوب Gutenberg repo بأكبر قدر ممكن ، لأن ذلك يجعل تصحيح الأخطاء وإيجاد المشكلات أمرًا سهلاً للغاية. "

بعد القيام بالقفزة الناجحة لبناء موقع ويب Gutenberg الجديد الخاص بـ Mimimi Games ، يعمل فريق Luehrsen على إنشاء المزيد من مواقع العملاء باستخدام المحرر الجديد. وهو يرى أنها طريقة لتقديم تجربة مستخدم أفضل بقيمة أفضل للعميل.

قال Luehrsen: "يشترك عملاؤنا في اعتقادنا بأن سرد القصص في الويب الحديث هو أكثر بكثير من مجرد كتابة نص". "TinyMCE كمحرر 'Rich Text' قام بعمل رائع ، ولكن مع ذلك ، فإن الجمع بين أنواع مختلفة من الوسائط لقصة متماسكة كان عبارة عن فوضى مع مربعات التعريف ، والرموز القصيرة ، وفي بعض الأحيان بالنسبة للمضايقين ، كان عليك حتى مغادرة شاشة التحرير. يجمع جوتنبرج كل هذا بطريقة لطيفة وغير مزعجة. وكالعادة: إذا تمكنت من الوصول إلى نتيجة جيدة بطريقة أسرع ، فإن توفير الوقت هو ما يشتريه العميل أساسًا ".