Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. WordPress
Code

إنشاء أشكال نمطية لمجموعات WordPress Gutenberg: الجزء الثاني

by
Difficulty:IntermediateLength:LongLanguages:

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

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

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

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

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

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

تتوفر جميع التعليمات البرمجية لهذا البرنامج التعليمي لتنزيل GitHub repo على اليمين ، لذا لن تضطر إلى كتابة التعليمات يدويًا إذا كنت تريد المتابعة معك فقط.

تسجيل BSV داخل مجموعة

إذا كان لديك حق الوصول إلى شفرة مصدر مجموعة، فيمكنك إدارة تنوعات نمط المجموعة مباشرة داخل registerBlockType (). دعونا نلقي نظرة فاحصة.

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

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

داخل مجلد WordPress plugin المحلي الخاص بك ، افتح نافذة سطر الأوامر وأدخل:

لقد استخدمت bsv-plugin هنا للاسم ولكن يمكنك استخدام أي شيء تحبه. بعد بضع دقائق عند اكتمال التثبيت ، أدخل:

يمكننا الآن تعديل الشفرة المصدرية للمجموعة التي تم إنشاؤها حديثًا وإنشاء block-guten-set تلقائيا كود المصدر لنا بعد كل تغيير.

قم بالمتابعة وقم بتنشيط المكوِّن الإضافي داخل مسؤول WordPress وأضف مثيلًا لمجموعة جديدة إلى المحرر عن طريق إنشاء صفحة جديدة أو تحرير صفحة موجودة.

Block created with create-guten-block

إزالة أنماط Editor-Only

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

تتضمن المجموعة المخصصة create-guten-block التي تم إنشاؤها للتو لنا صحيفتي نمط. أحدها محصور في المحرر والآخر محصور على المحرر والواجهة الأمامية. نحن لا نحتاج إلى أنماط المحرر فقط لهذا البرنامج التعليمي لذا في. \ bsv-plugin \ src \ init.php أو حذف الدعوة إلى () wp_enqueue_style في () bsv_plugin_cgb_editor_assets.

عند البقاء في init.php للحظة نحتاج أيضًا إلى التعليق على مصفوفة التبعية لـ () wp_enqueue_style في () bsv_plugin_cgb_block_assets لأن هذا يمنع في الوقت الحالي الأنماط من أن تكون متضمنة بشكل صحيح. أستخدم create-guten-block بإصدار v1.11.0 في هذا البرنامج التعليمي ، لذا قد تكون أو لا تكون لديك المشكلة نفسها وفقًا للإصدار الذي تستخدمه.

يجب أن تبدو الدالة () bsv_plugin_cgb_block_assets كما يلي:

الآن عند تحميل الصفحة سترى أنماط الحظر التي يتم تطبيقها في المحرر وعلى الواجهة الأمامية وهو ما نريده.

Block styles enqueued on frontend and backend

أشكال نمط تسجيل مجموعة

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

إفتح. \ bsv-plugin \ src \ block \ block.js وإضافة ما يلي إلى كائن تكوين وظائف registerBlockType (على سبيل المثال مباشرة أسفل خاصية الكلمات الرئيسية ستفعل هنا).

يسجل هذا ثلاثة أشكال نمط جديدة للمجموعة المخصصة. لاحظ كيف أن الاختلاف في نمط المجموعة المسمى style1 لديه الخاصية isDefault لتعيين true. هذا يحدد ببساطة تنوع نمط مجموعة Style 1 عند فتح خيارات الحظر في المحرر. لا يقوم بالفعل بتعيين أي فئات CSS للمجموعة كما قد تعتقد.

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

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

Our three new block style variations

لاحظ كيف يتم تحديد شكل نمط مجموعة Style 1 بشكل افتراضي وهو الذي حددناه في خاصية styles أعلاه. يؤدي تحديد أيٍّ من اختلافات نمط المجموعة الثلاث إلى فئات CSS مختلفة يتم إضافتها إلى مجمّع المجموعة. على سبيل المثال ، يؤدي تحديد style 2 إلى إضافة فئة style-style-style2.

Block style variation CSS class added to markup

لا يحدث أي شيء حاليًا عندما يتم تحديد كل شكل من أنماط مجموعة القوالب لذلك دعنا نضيف بعض الأنماط الأساسية لإصلاح هذا. في. \ bsv-plugin \ src \ block \ style.scss أضف ما يلي بعد الأنماط الموجودة:

يتم فقط إضافة الأنماط المخصصة للأنماط ذات النمط كتلة Style 2 وStyle 3 بحيث تظل أنماط الحظر الافتراضية مطبقة حتى في حالة عدم النقر على أي من أشكال أنماط الحظر بشكل محدد.

Our block styles added

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

تسجيل BSV عن طريق ملحق

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

دعنا نختبر ذلك من خلال إضافة بعض اختلافات نمطنا الخاص إلى مجموعة الزر الأساسي. تأتي هذه المجموعة مع ثلاثة أنماط مختلفة تم تعريفها بالفعل: Rounded و Outline و Squared.

Default block style variations for the button block

سنقوم بإضافة نمطين مختلفين من نمطنا الخاص: Pill Shaped ، وUppercase.

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

أنشئ مجلد bsv جديدًا داخل مجلد WordPress. \ wp-content \ plugins المحلي وأضف ثلاثة ملفات:

  • bsv.php
  • bsv.js
  • bsv.css

في bsv.php أضف الكود التالي:

في bsv.js أضف رمز الواجهة الأمامية:

وفي bsv.css ، أضف الأنماط نفسها:

قم بتنشيط الملحق وقم بإدراج مثيل جديد لمجموعة الزر في المحرر. يجب أن تشاهد الآن الاختلافات الجديدة في نمط المجموعة المتاحة!

Two new block style variations added

فهم كود ملحق BSV 

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

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

المهم أن تنتبه هنا هي استدعاءات () registerBlockStyle. هذه الوظيفة تعيش في كائن wp.blocks العالمي لذا نحن بحاجة إلى تضمين البادئة بوضوح أينما تستخدم هذه الوظيفة.

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

شيء واحد يجب أن نلاحظه هنا على الرغم من ذلك هو إذا قمت بإضافة isDefault: true لتنوع نمط مجموعة عن طريق () registerBlockStyle سيتم تجاهلها إذا تم بالفعل تعيين صيغة نمط افتراضية. ما عليك سوى الانتباه إلى ما إذا كنت تتوقع (منه مثلي) تجاوز تنسيق النمط الافتراضي.

وفقًا للوثائق ، يمكنك أيضًا إلغاء تسجيل صيغة نمط مجموعة باستخدام () unregisterBlockStyle. الاستخدام مشابه جدًا لـ () registerBlockStyle ولكنك تحتاج فقط إلى تحديد اسم المجموعة واسم الشكل المناسب.

لذلك ، على سبيل المثال ، لإلغاء تسجيل شكل نمط المخطط التفصيلي من كتلة الزر ، يمكنك استخدام:

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

تسجيل BSV عن طريق الموضوع

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

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

أنا أستخدم Twenty Nineteen كموضوع رئيسي كما هو مضمن في WordPress 5.0 ولكن يمكنك تأسيسه على أي سمة رئيسية تريدها.

أنشئ مجلدًا جديدًا من twentynineteen-child داخل مجلد WordPress. \ wp-content \ themes المحلي وأضف أربعة ملفات:

  • style.css
  • functions.php
  • tnc_bsv.js
  • tnc_bsv.css

لن نقوم بإضافة أنماط أنماط فرعية معينة إلى style.css ولكننا بحاجة إلى تضمينها حتى يتم التعرف على السمة بواسطة WordPress.

في style.css أضف:

يتم وضع ملفات جافا سكريبت و CSS في enqueued عبر functions.php لذا أضف الكود التالي إلى هذا الملف:

في tnc_bsv.js أضف الشفرة لتسجيل تنوع نمط الحظر الخاص بنا:

وأخيرًا ، تتم إضافة CSS لتنويعات نمط الحظر إلى tnc_bsv.css:

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

قم بتفعيل النسق ثم أضف زرًا إلى المحرر لمشاهدة الإنشاء الجديد.

New block style variation added via a child theme

ربما لاحظت أنني قمت بلف شفرة جافا سكريبت JavaScript داخل عبارة jQuery:

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

قم بتنزيل الكود

كما سبق ذكره ، يتوفر الرمز للتنزيل عبر رابط GitHub على يسار الصفحة.

يحتوي هذا الريبو على موضوع واثنين من الإضافات التي قمنا بتطويرها في هذا البرنامج التعليمي. عند تنزيل المحتويات ، سترى ثلاثة مجلدات. قم بإضافة المجلد twentynineteen-child إلى مجلد السمة .wp-content \ themes ومجلدتي plugin الآخرين إلى مجلد الملحق \ wp-content \ plugins.

قم بتنشيط كل من الإضافات والمظهر لجعل أشكال نمط المجموعة متاحة في محرر WordPress الجديد.

خاتمة

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

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

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.