تطوير جوتنبرج بأمثلة: خرائط جوجل (الجزء الأول)

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

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

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

تحديد مشروعنا والملحق الذي نريده

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

هذه هي متطلبات المشروع:

1. يجب أن يكون المرء قادرًا على إضافة خريطة (أو أكثر من واحدة) إلى صفحاته أو منشوراته.
2. يجب أن يكون من الممكن توسيط الخريطة في أي مكان بواسطة
   
   • إما سحب الخريطة بالماوس
   • أو البحث عن الموقع في مربع البحث.
3. يجب أن يكون حجم الخريطة قابلاً للتعديل من حيث العرض والارتفاع
4. يجب أن تتضمن الخريطة أنماطًا مختلفة (أبيض وأسود ، لوحات ألوان مخصصة ، إلخ.)
5. يجب أن يكون المستخدم قادرًا على إضافة علامة في الخريطة.
6. إذا كانت هناك علامة ، فيجب أن تكون الخريطة مصحوبة بمربع نص به معلومات إضافية حول العلامة.

طموح ، صحيح؟ حسنًا ، لنبدأ!

كيفية إنشاء مكون إضافي لجوتنبرج "من الصفر"

إذا كنت تتابع مدونتنا ، فمن المحتمل أنك رأيت أنه قبل بضعة أيام نشر أنطونيو منشورًا يشرح كيفية إنشاء مكونات إضافية باستخدام نموذج مرجعي للمكوِّن الإضافي أنشأناه في Nelio. إذا لم تكن قد قرأت منشوره بعد ، فإنني أوصيك بقراءته أولاً ، لأن المكون الإضافي الخاص بنا سيعتمد على المكون الإضافي wp-beb الذي يشرحه أنطونيو هناك.

لبدء مشروعنا ، فإن أول شيء سنفعله هو عكس المكوِّن الإضافي لـ Nelio. أولاً ، قم بإنشاء مستودع جديد في حساب GitHub الخاص بك. بعد ذلك ، اتبع الخطوات الموضحة في صفحات المساعدة الخاصة بـ Github لتعكس النموذج المعياري الخاص بنا:

 git clone --bare https://github.com/avillegasn/wp-beb.git cd wp-beb.git git push --mirror https://github.com/your-username/your-repo.git

بمجرد أن يصبح مشروعك جاهزًا ، اتبع الإرشادات الموجودة في README.md لتجميع المشروع وبالتالي يمكنك رؤيته في موقع WordPress الخاص بك.

كيفية تحويل البرنامج المساعد Boilerplate إلى البرنامج المساعد الخاص بك

كما يظهر في توثيق البرنامج المساعد Boilerplate ، فإن أول شيء يتعين علينا القيام به هو تغيير اسم المشروع في كود المصدر. وهذا يعني أنه يجب عليك تغيير جميع تكرارات wp-beb (كل من الأحرف الكبيرة والصغيرة ، مع واصلات أو شرطات سفلية) من خلال اسم المكون الإضافي الخاص بنا (في حالتي ، nelio-maps ).

لهذا ، يمكننا استخدام البرنامج النصي التالي:

فقط ضع في اعتبارك أنه سيتعين عليك استبدال سلسلة nelio Maps int الأسطر 5 و 8 و 9 و 10 بأي اسم سيكون المكون الإضافي الخاص بك.

من ناحية أخرى ، الآن هو الوقت المناسب لتغيير وثائق البرنامج المساعد. من ناحية ، يجب عليك تعديل الملفين README.md و readme.txt لتعكس الغرض من المكون الإضافي الجديد (دون أن تنسى ذكر حقيقة أنك تستخدم نموذجنا المعياري كقاعدة بالطبع). من ناحية أخرى ، يجب تغيير التعليق الأول في ملف PHP الرئيسي ، حيث إنها البيانات التي يستخدمها WordPress لعرض المكون الإضافي في شاشة الملحقات .

يمكنك أن ترى كيف أجريت كل هذه التغييرات في أول التزام بمشروع Nelio Maps.

كيفية تنظيف البرنامج المساعد Boilerplate للأشياء غير الضرورية

يتضمن المكون الإضافي Boilerplate الخاص بـ Nelio ، افتراضيًا ، مكونين: (أ) كتلة تجريبية و (ب) مكون إضافي لـ Gutenberg. نظرًا لأننا مهتمون فقط بإنشاء كتلة (الخريطة) ، فسنقوم بإزالة كل ما تبقى (مكون Gutenberg الإضافي).

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

1. تخلص من كل المحتوى الذي يظهر في مجلد assets (حيث تمت إضافة ملحق Gutenberg وأسلوبه ورمزه).
2. قم بتنظيف الملف webpack.config.js ، نظرًا لوجود عدد من القواعد التي تستخدم الملفات في assets التي قمنا بإزالتها للتو.
3. قم بتنظيف الملف الرئيسي للمكوِّن الإضافي ، لأنه يدرج في قائمة الأنماط ملفًا وجافا سكريبت لم يعد موجودًا.

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

ملخص

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

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

صورة مميزة لبريت زيك على Unsplash .