موارد لإتقان التقنيات وراء Gutenberg For WordPress

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

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

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

تعلم JavaScript

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

إذا لم تكن قد فعلت شيئًا باستخدام JavaScript من قبل ، فهذه بعض البرامج التعليمية بتنسيقات مختلفة ستساعدك على البدء:

• أساسيات لغة JavaScript: دورة مجانية بواسطة Zac Gordon بتنسيق فيديو.
• JavaScript 30: تعلم من خلال القيام بتحدي كل يوم لمدة 30 يومًا مع Wes Bos في هذه الدورة التدريبية المجانية.
• إعادة مقدمة إلى JavaScript: مقدمة موجزة عن JavaScript بواسطة الرجال في Mozilla.
• JavaScript For Cats: مقدمة أخرى لجافا سكريبت مع لمسات معينة من فكاهة القطط.
• Exercism.io: ويب مجاني حيث يمكنك القيام بتمارين في JavaScript وتحميل الحل الخاص بك لموجه لتقييمه.
• JSBooks: إذا كنت ممن يفضلون التعلم باستخدام الكتب ، فلديك هنا الكثير منها مجانًا.

على العكس من ذلك ، إذا كان لديك بالفعل بعض الخبرة في استخدام JavaScript ، فقم بتوسيع معرفتك من خلال دراسة المفاهيم المتقدمة حول الوظائف ، والتنفيذ غير المتزامن مع الوعود وعدم التزامن / الانتظار ، وباختصار ، كل ما يتعلق بـ ESNext.

مع يوم من التدريب على JavaScript ، يجب أن يكون أكثر من كافٍ لاكتساب المعرفة الأساسية للتحرك بسهولة في كل ما يتعلق بما ستحتاج إلى تطويره فوق محرر قوالب WordPress.

تعلم React و Redux

بالإضافة إلى JavaScript ، للتطوير على محرر قوالب WordPress ، ستحتاج إلى بعض المفاهيم الخاصة بـ React و Redux.

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

تفاعل ، وقبل كل شيء ، JSX

ما لا يمكنك تجنبه هو معرفة كيفية عمل صيغة JSX لإنشاء عناصر داخل React ، والتي سنستخدمها لتحديد واجهة مكوناتنا (سواء كانت كتل Gutenberg أو عروض داخل المحرر).

تخيل أنك تريد تحديد الواجهة لمكونات Product وقائمة ShoppingList ثم استخدامها في كتلة جوتنبرج. باستخدام الترميز القياسي ، يمكنك القيام بذلك بالطريقة التالية ، باستخدام wp.element.createElement() التي يوفرها Gutenberg:

من ناحية أخرى ، إذا كنت تستخدم JSX ضمن طريقة العرض render() ، والتي لا تعدو كونها تدوينًا مشابهًا لـ HTML ، فإن ما لديك هو ما يلي:

يؤدي استخدام JSX إلى تبسيط كتابة المكونات وإعادة استخدامها ، نظرًا لأن الشفرة أبسط بكثير وأسهل في القراءة. كما ترون ، في المثال السابق ، نقوم بإنشاء مكونات React دون أن تكون لدينا أي فكرة عن React ، وذلك فقط من خلال معرفة كيفية التعامل مع JSX واستخدامها كما لو كانت HTML ذات قوى خارقة. بالإضافة إلى ذلك ، يمكنك أيضًا استخدام المكونات الموجودة في Gutenberg. يمكنك رؤيتها في هذا العارض المرتبط أيضًا بالوثائق الرسمية.

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

استعيد للحفاظ على حالة التطبيق الخاص بك

من ناحية أخرى ، ربما سمعت عن Redux. إنها أداة لحفظ وإدارة الحالة في تطبيقات JavaScript. مرة أخرى ، إذا كنت مهتمًا بتعلم كيفية استخدامه ، فإنني أوصي بمقاطع فيديو Wes Bos هذه ، ولكنها ليست ضرورية أيضًا.

إذا كنت بحاجة إلى إنشاء مخزن بيانات خاص بك ، فلن تفعل ذلك مع Redux ، لكنك ستستخدم حزمة wordpress / data @ المضمنة في Gutenberg. تستخدم هذه الحزمة Redux داخليًا ، لكن هذا لا يهم. نتحدث أيضًا عن حالة استخدام معقدة ربما لا تحتاجها ، على الأقل في مرحلة أولية. حتى الآن نسيانها.

NPM و WebPack و Babel و PostCSS و ESLint

بالإضافة إلى JavaScript والمفاهيم الأساسية لـ React و JSX ، بالنسبة للعصر الجديد الموجود بالفعل هنا في WordPress ، ستحتاج إلى معرفة التقنيات التالية حتى تكون مهام المطور الخاصة بك أبسط وأتمتة للغاية:

• NPM: مدير التبعية لجافا سكريبت. ما عليك سوى تحديد التبعيات التي تحتاجها وتثبيتها عن طريق إجراء npm install .
• WebPack: حزمة JavaScript. ليس من السهل تكوينه في البداية ، ولكن بمجرد الحصول عليه ، فإنه يسهل عمل إدارة ملفات JavaScript: transpilation ، minification ...
• Babel: مترجم JavaScript لتتمكن من استخدام صيغة الإصدارات التالية من هذه اللغة اليوم.
• PostCSS: مثل Babel ، لكن لأوراق أنماط CSS الخاصة بك.
• ESLint: يكتشف استخدام JavaScript وأخطاء النمط بحيث يمكنك تجنبها أثناء كتابة التعليمات البرمجية.

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

كيفية إنشاء كتل جديدة لجوتنبرج

الآن ، دعنا ننتقل إلى الجزء الأكثر أهمية: ما نحتاجه لبدء إنشاء كتل جديدة لمحرر WordPress.

أول شيء تحتاجه لبدء إنشاء الكتل الخاصة بك هو إتقان الوظيفة wp.blocks.registerBlockType() . ستجد أكثر الوثائق اكتمالا حول هذه الوظيفة في دليل Gutenberg الرسمي.

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

إذا كان هذا يبدو معقدًا للغاية ، يمكنك البدء في استخدام مجموعة أدوات أحمد عويس التي تسمى create-guten-block . يؤدي هذا إلى إنشاء بنية مجلد مع جميع التبعيات اللازمة لإنشاء الكتلة الأولى. يمكنك مشاهدة برنامج تعليمي حول استخدامه في الفيديو التالي:

أخيرًا ، إذا كان هذا لا يزال يبدو معقدًا للغاية ، فلديك خيار أخير متاح. من المؤكد أنك تعرف البرنامج المساعد Advanced Custom Fields (المعروف أيضًا باسم ACF ، للاختصار). حسنًا ، سيسمح لك هذا المكون الإضافي بإنشاء كتل لـ Gutenberg دون أي فكرة عن JavaScript.

لكنني لن أشرحها لك ، سأدع ماوريسيو جلفيس يفعل ذلك. اذهب للتحقق من عرضه التقديمي حول هذا الموضوع في WordCamp Zaragoza 2019 الذي لديك بالفعل على WordPress.tv (بالإسبانية):

كيفية توسيع محرر القوالب في WordPress

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

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

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

صورة مميزة بواسطة Christian Fregnan في Unsplash .