باستخدام أداة create-block

مرحبًا، وأهلًا بك في Learn WordPress.

في هذا البرنامج التعليمي، ستتعلم كيفية استخدام أداة create-block لإنشاء الهيكل الأساسي لإضافة بلوك جديدة. في هذا الفيديو، سنتناول ماهية أداة create-block، والبرامج التي تحتاج إليها لاستخدام create-block، وكيفية إنشاء الهيكل الأساسي لبلوك جديدة باستخدام create-block، والشيفرة التي تنشئها create-block.

Create-block هي أداة رسمية تعمل عبر سطر الأوامر، طوّرها مساهمو WordPress لإنشاء الهيكل الأساسي لإضافة بلوك جديدة أو إنشائها. تنشئ كل ما تحتاج إليه لبدء إضافة بلوك جديدة، وتدمج إعداد بناء حديثًا دون الحاجة إلى أي إعدادات. يمكنك قراءة المزيد عن create-block من خلال زيارة كتيب محرر البلوكات في صفحة موارد مطوري WordPress ضمن الأدلة المرجعية -> الحزم -> @wordpress/create-block.

لاستخدام أداة create-block، ستحتاج إلى تثبيت WordPress محليًا، وطرفية لتشغيل الأوامر، وNode.js وnpm. يمكنك استخدام أي تثبيت محلي لـ WordPress تشعر بالارتياح تجاهه، مثل LocalWP أو DesktopServer. إذا لم يكن لديك تثبيت محلي لـ WordPress، فيُرجى الاطلاع على البرنامج التعليمي «تثبيت WordPress محليًا للمبتدئين» على learn.wordpress.org.

إذا كنت تستخدم نظام Mac OS أو أي نظام تشغيل Linux، فيمكنك استخدام الطرفية المضمّنة. أما مستخدمو Windows، فنوصي بتثبيت PowerShell واستخدامه، ويمكنك العثور عليه بالانتقال إلى microsoft.com/powershell.

أخيرًا، تحتاج إلى تثبيت Node.js، الذي يثبّت npm أيضًا. ستعمل أداة create-block مع أي إصدار مستقر من Node.js أحدث من الإصدار 12. ومع ذلك، وبناءً على متطلبات التطوير لديك، قد تحتاج إلى إمكانية التبديل بسرعة بين إصدارات Node.js للمشروعات المختلفة. ولحسن الحظ، يمكنك القيام بذلك باستخدام مدير إصدارات node مفتوح المصدر، المعروف أيضًا باسم nvm. للعثور عليه، يمكنك الانتقال إلى nvm.sh، الذي سيوجهك إلى صفحة GitHub. ومن الميزات الرائعة لاستخدام nvm أنه إذا تغيرت متطلبات الإصدار لديك، فمن السهل جدًا تحديث إصدار Node.js باستخدام nvm. لأغراض هذا البرنامج التعليمي، سنثبّت الإصدار نفسه المطلوب لتطوير نواة البلوكات، وهو مدرج في كتيب محرر البلوكات ضمن صفحة بيئة التطوير «البدء».

حاليًا، يُنصح بتثبيت الإصدار 14 من Node.js. إذا كنت تستخدم macOS أو Linux، فيمكنك فتح تطبيق الطرفية الافتراضي وتثبيت nvm من خلال تشغيل برنامج تثبيت npm الذي تنسخه من وثائق nvm.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

بعد تثبيت npm، تحتاج إلى إغلاق الطرفية وإعادة فتحها.

بعد ذلك، يمكنك استخدام الأمر nvm install لتثبيت إصدارات Node.js وnpm التي تحتاج إليها.

nvm install 14

إذا كنت تستخدم جهاز Windows، فستحتاج إلى تثبيت مدير حزم Chocolatey لنظام Windows لتثبيت nvm. افتح PowerShell أولًا بامتيازات إدارية من خلال النقر بزر الفأرة الأيمن على عنصر قائمة PowerShell واختيار «تشغيل كمسؤول». ثم انتقل إلى وثائق إعداد Chocolatey ومرر إلى الأسفل حتى تصل إلى تعليمات «التثبيت باستخدام PowerShell». انسخ التعليمات وانقر بزر الفأرة الأيمن داخل نافذة PowerShell للصقها.

بعد تثبيت Chocolatey، استخدم الأمر التالي لتثبيت nvm:

choco install -y nvm

بعد تثبيت nvm، استخدم الأمر nvm install لتثبيت إصدارات Node.js وnpm المطلوبة؛

nvm install 14

أخيرًا، شغّل الأمر nvm use لاستخدام إصدار Node.js وnpm الذي ثبّتَّه للتو.

nvm use 14.20.0

أصبحت الآن جاهزًا لاستخدام أداة create-block لإنشاء أول بلوك لك. في الطرفية، غيّر المجلد إلى مجلد إضافات محتوى WP في تثبيت WordPress المحلي لديك. في حالتي، المسار هو:

cd development/websites/wordpress/wp-content/plugins

ثم شغّل الأمر create-block ومرّر معرّف إضافة إلى هذا الأمر. المعرّف هو الاسم الفريد للإضافة.

npx @wordpress/create-block wp-learn-todo

سيؤدي ذلك إلى إنشاء إضافة جديدة في مجلد wp-learn-todo، وتثبيت أي حزم مطلوبة، وإنشاء الملفات اللازمة. ستلاحظ أننا لم نضطر إلى تثبيت حزمة create-block. يتيح لنا الأمر npx تشغيل الحزمة من المكان المستضافة فيه على السحابة.

بعد إنشاء الهيكل الأساسي للإضافة الجديدة، يجب أن يكون لديك مجلد إضافة جديد في تثبيت WordPress، يحمل اسم المعرّف الذي مررته إلى create-block.

ها هو مجلد wp-learn-todo. لنلقِ نظرة على أهم المجلدات والملفات في هذه الإضافة.

مجلد build هو الموقع الذي ستُبنى فيه ملفات أصول البلوك النهائية للتوزيع. ويحتوي node_modules على أي حزم أو وحدات node تحتاج إليها للتطوير. أما مجلد src أو source فهو المكان الذي ستنجز فيه معظم أعمال البرمجة؛ إذ توجد هنا كل شيفرة البلوك. وملف package.json هو الملف الذي يحدد الحزم التي تحتاج إليها شيفرتك. وملف readme.txt هو ملف يستخدمه مستودع إضافات WordPress.org لإدارة إضافتك. أما ملف wp-learn-todo.php فهو ملف الإضافة الرئيسي الذي يخبر WordPress بأن هذه إضافة.

إذا فتحنا WordPress وانتقلنا إلى محرر البلوكات، فمن المفترض أن نتمكن من إضافة هذا البلوك. أولًا، سنحتاج إلى تفعيل البلوك، وقد تم تفعيل learn-todo. لننشئ منشورًا جديدًا ونضف بلوكًا جديدًا. ها هو. في الوقت الحالي، لا يحتوي إلا على فقرة تتضمن بعض النص.

وهكذا نختتم هذا البرنامج التعليمي حول استخدام create-block. إذا كنت مستعدًا لبدء إنشاء بلوكات مخصصة، فألقِ نظرة على البرنامج التعليمي «إضافة دعم البلوكات إلى إضافة موجودة». ولمزيد من البرامج التعليمية لمطوري WordPress، تفضل بزيارة learn.wordpress.org.

برمجة ممتعة.