أعد استخدام مكونات React من Gutenberg في إضافات WordPress الخاصة بك

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

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

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

مكونات React المضمنة في WordPress

يوفر WordPress أكثر من 80 مكونًا من مكونات React التي يمكنك إعادة استخدامها في تطويرك ، من خلال حزمة Gutenberg @wordpress/components :

في كل مجلد من مجلدات المكونات التي ستجدها هنا في Github الخاص بمشروع Gutenberg ، لديك شفرة مصدر JavaScript لكل مكون بالإضافة إلى أنماط CSS ووثائق لمعرفة كيفية ووقت استخدامها.

من بين المكونات التي استخدمناها في Nelio لواجهات React الجديدة ، يجدر تمييز Button و ButtonGroup لتحديد الأزرار. جميع وحدات التحكم للحقول والخيارات مثل CheckboxControl أو InputControl أو NumberControl أو RadioControl أو RangeControl أو SelectControl أو TextControl . أو حتى TabPanel المبوبة أو Popover و Modal لمربعات الحوار العائمة. وهناك غيرها الكثير…

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

كيفية إعادة استخدام مكونات تفاعل WordPress

تخيل أنك تريد استخدام زر في واجهتك تم تطويره في React. بفضل المكونات الموجودة في Gutenberg ، يمكنك استخدام مكون Button مباشرة كما ترى في المثال التالي:

 /** * WordPress dependencies */ import { Button } from '@wordpress/components'; export default function MyComponent() { return <Button>Click Me!</Button>; }

قد تتساءل أنه بالنسبة إلى الزر ، لن تحتاج إلى استخدام مكون Gutenberg وبدلاً من ذلك استخدم علامة <button> مباشرةً. وكنت على حق.

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

لإعادة استخدام مكون Gutenberg موجود ، عليك فقط التحقق مما إذا كان هذا المكون موجودًا واستيراده إلى الكود الخاص بك من خلال حزمة @wordpress/components . كما ترى في مقتطف الشفرة أعلاه ، قمنا باستيراد مكون Button من هذه الحزمة. ولإتاحة الحزمة داخل مشروعك ، يجب عليك تثبيتها باستخدام الأمر npm install @wordpress/components في المحطة. لكن هذا أوضحه ديفيد بالفعل في مشاركاته ، لذلك لن أغطي هذا مرة أخرى.

ما عليك أن تضعه في اعتبارك هو أنه لكي تأخذ هذه المكونات أنماط WordPress ، يجب عليك تعيين wp-components باعتبارها تبعية لملف نمط CSS الخاص بك عندما تقوم بإدراجها في قائمة WordPress باستخدام دالة PHP wp_enqueue_style .

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

مكونات رد فعل جوتنبرج

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

من بين الخيارات المختلفة المضمنة في Gutenberg Storybook ، لدينا إمكانية تجربة محرر الكتلة من خلال قائمة Playground . لكن الخيار الأكثر إثارة للاهتمام هو أن تكون قادرًا على رؤية توثيق مكونات Gutenberg بطريقة ودية.

عليك فقط فتح قائمة المكونات وستجد هناك قائمة المكونات التي يوفرها WordPress من خلال حزمة @wordpress/components . يمكنك استكشاف كل مكون من مكونات React والاطلاع على أمثلة الاستخدام مع كود JavaScript الكامل الخاص بهم.

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

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

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

لا تحتوي جميع مكونات حزمة @wordpress/components على توثيق كامل في Storybook ، لذلك سيتعين عليك الانتقال إلى قسم حزمة المكونات على Github لمشاهدة أحدث إصدار من حالة مكونات React في Gutenberg.

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

لقد رأيت بالفعل كل ما يمكن أن توفره مكونات Gutenberg's React لتطويرات WordPress الخاصة بك. بدلاً من إعادة اختراع العجلة وتطوير المكونات الأساسية الخاصة بك ، ألق نظرة على مكونات React الخاصة بـ Gutenberg أولاً لتحقيق الاتساق مع باقي واجهة WordPress وتوفير وقت التطوير والصيانة. إعادة استخدام البرنامج هو المفتاح لزيادة كفاءة مطوري WordPress.

صورة مميزة بواسطة Morning Brew على Unsplash.