Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
Advertisement
  1. Code
  2. WordPress Gutenberg

واجهة برمجة تطبيقات بلوك-كتلة- Gutenberg لورد برس : صنع بلوكات نموذجية

by
Read Time:18 minsLanguages:
This post is part of a series called WordPress Gutenberg Block API.
WordPress Gutenberg Block API: Block Look and Feel
WordPress Gutenberg Block API: Extending Blocks

Arabic (العربية/عربي) translation by osamagaradh (you can also view the original English article)

محرر ووردبريس الجديد (الاسم الرمزي جوتنبرج) من المقرر إصداره في الإصدار 5.0.الآن هو الوقت المثالي للقبض عليه قبل أن يهبط في جوهر وورد. في هذه السلسلة ، أعرض لك كيفية العمل مع واجهة برمجة التطبيقات لـ بلوك -Block -وإنشاء كتل المحتوى الخاصة بك والتي يمكنك استخدامها لإنشاء مشاركاتك وصفحاتك.

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

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

ولكننا سنبدأ أولاً في التعرُّف على كيفية تشفير نصوص النصوص والأساليب قبل الانتقال إلىوظيفة recordBlockType () الهامة للغاية ، والتي تعد أساسية لإنشاء الكتل في Gutenberg.

ميكوبينج كتلة البرامج النصية والأنماط

لإضافة جافا سكريبت و CSS المطلوبة من خلال كتلنا ، يمكننا استخدام خطافين جديدين في WordPress يوفرهما Gutenberg:

  • enqueue_block_editor_assets
  • enqueue_block_assets

لا تتوفر هذه الأدوات إلا إذا كان المكوِّن الإضافي لـ Gutenberg نشطًا ، وتعمل بطريقة مماثلة لخطافات WordPress القياسية لوضع نصوص برمجية. ومع ذلك ، فهي مخصصة بشكل خاص للعمل مع كتل Gutenberg.

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

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

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

لتضمين البرامج النصية والأسطر فعليًا باستخدام هذين الخطاطين الجديدين ، يمكنك استخدام وظائف wp_enqueue_style () وwp_enqueue_scripts () كما تفعل عادة.

ومع ذلك ، تحتاج إلى التأكد من أنك تستخدم تبعيات البرنامج النصي الصحيحة. لإدخال نصوص برمجية على المحرر ، يمكنك استخدام التبعيات التالية:

  • مخطوطات: صفيف ('wp-blocks' ، 'wp-i18n' ، 'wp-element' ، 'wp-components')
  • الأنماط: الصفيف ('wp-edit-blocks')

وعند وضع أنماط محورية لكل من المحرر والواجهة الأمامية ، يمكنك استخدام هذه التبعية:

  • (`array( 'wp-blocks

هناك شيء جدير بالذكر هنا هو أن الملفات الفعلية المتضمنة في المكون الإضافي لحصاتيالمخصصة هي الإصدارات المجمعة من جافا سكريبت و CSS وليست الملفات التي تحتوي على كود مصدر JSX و SAS.

هذا شيء يجب وضعه في اعتبارك عند وضع الملفات يدويًا. إذا حاولت تضمين شفرة المصدر الأولية التي تتضمن React ، أو ES6 + ، أو Sass ، فستواجه أخطاء عديدة.

هذا هو السبب في أنه من المفيد استخدام مجموعة أدوات مثل block-guten-block ، حيث تقوم بمعالجة البرامج النصية وتضعها في موضع تلقائي بالنسبة لك!

تسجيل كتل جوتنبرج

لإنشاء قالب جديد ، نحتاج إلى تسجيله مع Gutenberg عن طريق استدعاءregisterBlockType () وتمريره باسم الكتلة بالإضافة إلى كائن التكوين.يحتوي هذا الكائن على عدد غير قليل من الخصائص التي تتطلب تفسيرًا مناسبًا.

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

فمثلا:

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

المعلمة recordBlockType () الثانية هي كائن إعدادات وتتطلب تحديد عدد من الخصائص:

  • هناك شيء جدير بالذكر هنا هو أن الملفات الفعلية المتضمنة في المكون الإضافي لحصاتيالمخصصة هي الإصدارات المجمعة من جافا سكريبت و CSS وليست الملفات التي تحتوي على كود مصدر JSX و SAS.
  • وصف (سلسلة اختيارية): يصف الغرض من كتلة
  • أيقونة (عنصر Dashicon أو JSX اختياري): أيقونة مقترنة بالكتلة
  • الفئة (سلسلة): حيث تظهر الكتلة في مربع الحوار " إضافة كتل"
  • الكلمات الرئيسية (مصفوفة اختيارية): ما يصل إلى ثلاث كلمات رئيسية مستخدمة في عمليات بحث الحظر
  • سمات (كائن اختياري): يعالج بيانات كتلة ديناميكية
  • edit (function): وظيفة تقوم بإرجاع العلامات ليتم عرضها في المحرر
  • save (function): دالة تقوم بارجاع الترميز ليتم عرضه على الواجهة الأمامية
  • useOnce (منطقي اختياري): تقييد الحظر من إضافته أكثر من مرة
  • يدعم (كائن اختياري): يحدد الميزات المدعومة بالكتل

إذا افترضنا أننا نستخدم JSX لتطوير الكتلة ، فإليك مثالاً يمكن أن تبدو عليه مكالمةrecordBlockType () ككتلة بسيطة جدًا:

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

دعونا الآن تغطية خصائص كائن التكوين registerBlockType () بمزيد من التفصيل واحدا تلو الآخر.

العنوان والوصف

عند إدراج أو البحث عن كتلة في المحرر ، سيتم عرض العنوان في قائمة الكتل المتاحة.

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

Block title and descriptionBlock title and descriptionBlock title and description

من المفترض أن يتم تغليف حقول العنوان والوصف بشكل مثالي في وظائف i18n للسماح بالترجمة إلى اللغات الأخرى.

الفئة

هناك خمس فئات للكتلة متاحة حاليًا:

  • common
  • h
  • h
  • widgets
  • embed

تحدد هذه الفئة القسم حيث يتم سرد الحظر الخاص بك داخل نافذة إضافة كتلة .

Block categoriesBlock categoriesBlock categories

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

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

أيقونة

بشكل افتراضي ، يتم تعيين كتلة الدرع Dashicon الخاص بك ، ولكن يمكنك تجاوز هذا عن طريق تحديد Dashicon مخصص في حقل الرمز .

DashiconsDashiconsDashicons

يكون كل Dashicon مسبوقًا بـ dashicons- متبوعًا بسلسلة فريدة. على سبيل المثال ، يحتوي رمز الترس على اسم dashicons-admin-generic. لاستخدام هذا كأيقونة كتلة ، ما عليك سوى إزالة البادئات - البادئات حتى يتم التعرف عليها ، على سبيل المثال ، الرمز: "admin-generic" .

ومع ذلك ، فأنت لا تقتصر على استخدام Dashicons كخاصية الرمز. تقبل الدالة أيضًا عنصر JSX ، مما يعني أنه يمكنك استخدام أي صورة أو عنصر SVG كرمز الحظر الخاص بك.

ما عليك سوى التأكد من أن حجم الرمز متناسق مع أيقونات الحظر الأخرى ، والتي تبلغ 20 × 20 بكسل افتراضيًا.

الكلمات الدالة

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

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

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

سمات

تساعد السمات في إدارة البيانات الديناميكية في كتلة. هذه الخاصية اختيارية لأنك لا تحتاج إليها لكتل ​​بسيطة للغاية تنتج محتوى ثابتًا.

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

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

لاسترداد بيانات السمة المخزنة في محتوى المشاركة ، نحتاج إلى تحديد مكانها في الترميز.يمكننا القيام بذلك عن طريق تحديد محدد CSS الذي يشير إلى بيانات السمة.

على سبيل المثال ، إذا كانت الفدرة الخاصة بنا تحتوي على علامة ارتساء ، فيمكننا استخدامحقل العنوان الخاص بها كخاصية مميزة كما يلي:

هنا ، اسم السمة هو linktitle ، وهو عبارة عن سلسلة عشوائية ويمكن أن يكون أي شيء تحبه.

على سبيل المثال ، يمكننا استخدام هذه السمة لتخزين عنوان الوصلة <a title="some title"> الذي تم إدخاله عبر مربع نص في إعدادات الحظر.يؤدي إجراء ذلك فجأة إلى جعل حقل العنوان ديناميكيًا ويسمح لك بتغيير قيمته في المحرر.

عند حفظ المنشور ، يتم إدراج قيمة السمة في حقل عنوان الارتباطات . وبالمثل ، عند تحميل المحرر ، يتم استرداد قيمة علامة العنوان من المحتوى وإدراجه في سمةlinktitle .

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

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

يؤدي ذلك إلى تحديد العنصر بفئة .parent وتخزين جميع العقد التابعة في سمةeditablecontent .

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

سنرى مثالًا محددًا لهذا النوع من السمة عندما نصل إلى تنفيذ مجموعة الصور العشوائية في وقت لاحق من هذا البرنامج التعليمي.

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

تصحيح

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

من الشائع إضافة className = {props.className} إلى عنصر الحظر الرئيسي لإخراج فئة CSS خاصة بالكتلة الخاصة بك. لا يضيف WordPress هذا لك داخل المحرر ، لذا يجب إضافته يدويًا لكل كتلة إذا كنت تريد تضمينه.

يعد استخدام props.className ممارسة قياسية ويوصى به لأنه يوفر طريقة لتخصيص أنماط CSS لكل كتلة فردية. تنسيق طبقة CSS التي تم إنشاؤها هو .wp-block- {namespace} - {name} . كما ترى ، يعتمد هذا على مساحة / اسم مساحة الاسم ويجعله مثاليًا لاستخدامه كمعرف كتلة فريد.

تتطلب وظيفة التحرير إرجاع علامة صالحة عبر طريقة التقديم () ، والتي يتم استخدامها بعد ذلك لعرض الحظر الخاص بك داخل المحرر.

حفظ

على غرار وظيفة التحرير ، يقوم الحفظ بعرض تمثيل مرئي للكتلة ولكن في الواجهة الأمامية. كما يتلقى بيانات كتلة ديناميكية (إذا تم تعريفها) عبر الدعائم.

يتمثل أحد الاختلافات الرئيسية في أن props.className غير متوفر داخلالحفظ ، ولكن هذه ليست مشكلة نظرًا لأنها تم إدراجها تلقائيًا بواسطة Gutenberg.

الدعم

و يدعم خاصية تقبل كائن من القيم المنطقية لتحديد ما إذا كانت كتلة يدعم بعض الميزات الأساسية.

خصائص الكائن المتوفرة التي يمكنك تعيينها هي كما يلي.

  • الارتساء (خطأ إفتراضى): يسمح لك بالربط مباشرة بكتلة معينة
  • customClassName (true): يضيف حقل في عارض الكتلة لتعريفclassName مخصص للكتلة
  • className (true): يضيف className إلى عنصر كتلة المجلد استنادًا إلى اسم الكتلة
  • html (true): يسمح بتعديل ترميز الكتلة مباشرة

و useOnce الملكية

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

useOnce propertyuseOnce propertyuseOnce property

كما ترى ، بمجرد إضافة كتلة " المزيد" ، يظهر رمز الحظر باللون الرمادي ولا يمكن تحديده. و useOnce يتم تعيين الخاصية إلى كاذبة افتراضيا.

دعنا نبدع!

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

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

Our random image blockOur random image blockOur random image block

للراحة، سنقوم بإضافة لدينا كتلة جديدة لنفس بلدي خصيصا لبنة المساعد، بدلا من إنشاء المساعد العلامة التجارية الجديدة. يوجد رمز الكتلة الافتراضية داخل المجلد / src / block ، لذلك أضف مجلد آخر داخل / src يسمى صورة عشوائية وأضف ثلاثة ملفات جديدة:

  • index.js : يسجل الحظر الجديد
  • editor.scss : لأنماط المحرر
  • style.scss : الأنماط الخاصة بالمحرر ونهاية الواجهة

بدلاً من ذلك ، يمكنك نسخ المجلد / src / block وإعادة تسميته إذا كنت لا تريد كتابة كل شيء يدويًا. ومع ذلك ، تأكد من إعادة تسمية block.js إلى index.js داخل مجلد الحظر الجديد.

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

افتح /src/blocks.js وأضف مرجعًا إلى قسم جديد في أعلى الملف ، أسفل بيان الاستيراد الحالي مباشرةً.

من الداخل /src/random-image/index.js ، أضف الشفرة التالية لبدء التشغيل الجديد.

يقوم هذا بإعداد إطار العمل الخاص بنا وهو يشبه إلى حد كبير كود الكتلة المتسلسل الذي تم إنشاؤه بواسطة مجموعة أدوات إنشاء guten-block .

نبدأ باستيراد محرر وأوراق نمط الواجهة الأمامية ، ثم سنقوم باستخراج بعض الوظائف الشائعة من wp.i18n و wp.blocks إلى المتغيرات المحلية.

داخل registerBlockType () ، وقد دخلت القيم لل عنوان ، رمز ، فئة، و الكلمات الرئيسية خصائص، في حين أن تحرير و حفظ وظائف محتوى ثابت حاليا مجرد إخراج.

أضف كتلة الصور العشوائية إلى صفحة جديدة لمشاهدة المخرجات التي تم إنشاؤها حتى الآن.

Bare bones block outputBare bones block outputBare bones block output

تأكد من أنك لا تزال تشاهد الملفات للتغييرات بحيث يتم تحويل أي شفرة مصدر كتلة (JSX و ES6 + و Sass وغيرها) إلى جافا سكريبت و CSS صالح. إذا كنت لا تشاهد الملفات حاليًا لإجراء تغييرات ، فافتح نافذة سطر الأوامر داخل مجلد الجذر للمكوِّن الإضافي لحظرالفلاش الخاص بي وأدخل npm start .

قد تتساءل عن سبب عدم الحاجة إلى إضافة أي كود PHP لتضمين نصوص برمجية إضافية. البرامج النصية كتلة ل بلدي مخصص لبنة وenqueued كتلة عبرinit.php ، ولكن نحن لسنا بحاجة إلى إدراج بقائمة الانتظار البرامج النصية خصيصا لكتلة جديدة لدينا ويتم أخذ هذه الرعاية من قبل بالنسبة لنا إنشاء guten كتلة.

وطالما أننا نستورد ملف الكتلة الرئيسي إلى src / blocks.js (كما فعلنا أعلاه) ، فإننا لا نحتاج إلى القيام بأي عمل إضافي. سيتم تجميع جميع JSX و ES6 + و Sass تلقائيًا في الملفات التالية:

  • dist / blocks.style.build.css : الأنماط للمحرر والواجهة الأمامية
  • dist / blocks.build.js :جافا سكريبت للمُحرّر فقط
  • dist / blocks.editor.build.css : الأنماط للمحرر فقط

تحتوي هذه الملفات على جافا سكريبت و CSS لكل الكتل ، لذا يجب وضع مجموعة واحدة فقط من الملفات في قائمة الانتظار ، بغض النظر عن عدد الكتل التي تم إنشاؤها!

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

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

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

هذا ما سيبدو عليه:

Adding a block select drop down controlAdding a block select drop down controlAdding a block select drop down control

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

أضفنا أولاً عنصر تحكم منسدل محدد مع عدة خيارات تطابق فئات الصور المتاحة علىموقع PlaceIMG .

PlaceIMG image categoriesPlaceIMG image categoriesPlaceIMG image categories

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

الآن ، عند تحديد فئة جديدة ، يتم تحديث قيمة السمة ويتم تمريرها مرة أخرى إلى وظيفةالتحرير ، والتي تقوم بتحديث رسالة الإخراج.

Image category updatedImage category updatedImage category updated

يتعين علينا إكمال خطوة أخيرة للحصول على صورة عشوائية لعرضها. نحتاج إلى إنشاء مكون بسيط يأخذ في الفئة الحالية ويخرج علامة <img> مع صورة عشوائية يتم الحصول عليها من موقع PlaceIMG.

الطلب الذي نحتاج إلى تقديمه إلى PlaceIMG هو النموذج:https://placeimg.com/[width]/[height]/[category]

سنحافظ على العرض والارتفاع ثابتًا في الوقت الحالي ، لذا لن نضطر إلا إلى إضافة الفئة الحالية إلى نهاية عنوان URL للطلب. على سبيل المثال ، إذا كانت الفئة "طبيعة" ،فسيكون عنوان URL الكامل للطلب هو: https://placeimg.com/320/220/nature.

إضافة مكون RandomImage أعلاه registerBlockType () :

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

يجب أن يبدو الآن ملف index.js الكامل كما يلي:

وأخيرًا (في الوقت الحالي) ، أضف الأنماط التالية إلى editor.scss لإضافة حد ملون حول الصورة.

ستحتاج أيضًا إلى بعض الأنماط في style.css .

كلما يتم تحديث الصفحة في المحرر أو على الواجهة الأمامية ، سيتم عرض صورة عشوائية جديدة.

Finished editor viewFinished editor viewFinished editor view
Final front end viewFinal front end viewFinal front end view

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

استنتاج

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

على طول الطريق ، لقد تعلمنا كيفية كتابة قوالب وأساليب كتلة وتغطية وظيفةregisterBlockType () في العمق.

لقد اتبعنا ذلك بوضع النظرية موضع التنفيذ وإنشاء قالب مخصص من البداية لعرض صورة عشوائية من فئة معينة باستخدام خدمة الويب الخاصة بـ PlaceIMG.

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

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.