Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

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

by
Difficulty:IntermediateLength:MediumLanguages:

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

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

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

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

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

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

Additional CSS Class text field

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

المتطلبات الأساسية

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

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

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

خلفية

تم تقديم واجهة برمجة التطبيقات لمتغيرات نمط الكتلة إلى مشروع Gutenberg في الإصدار v3.2 من المكوِّن الإضافي ، وتسمح لك بتطبيق أنماط الحظر البديلة مباشرةً عبر واجهة المحرر.

لتحقيق نفس النتيجة قبل اختلافات نمط الكتلة ، كان عليك إدخال فئات CSS مخصصة يدويًا في الحقل النصي Class CSS Class في لوحة لوحة الفحص ، الموجودة أسفل قسم المتقدم .

إذا كنت مهتمًا بالاقتراح الأصلي لاختلافات نمط الكتلة ، فيمكنك قراءة التفاصيل الكاملة في طلب السحب في ريب غوتبورغ الرسمي .

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

Block Styles pane

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

Block style variations in the block inspector

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

دعم كتلة الأساسية

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

  • زر
  • سحب الاقتباس
  • اقتبس
  • الفاصل
  • الطاولة

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

يمكنك إضافة صيغ نمط الكتلة إلى كتلك أيضًا بالطبع. سنستكشف تفاصيل التنفيذ المحددة بعد ذلك.

تنفيذ أشكال نمط الكتلة

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

على سبيل المثال ، هذا هو ما يشبه تعريف خاصية أنماط كتلة الأساسية الزر.

هنا ، يتم تسجيل ثلاثة اختلافات نمط كتلة جديدة. لاحظ أن النمط Rounded تم تعيينه أيضًا على أنه الإعداد الافتراضي.

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

لتسجيل تغيير نمط قالب مخصص استخدم الدالة registerBlockStyle ()كما يلي:

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

Custom block style variation available

بمجرد أن يتم تحديده ، يضيف اختلاف نمط الكتلة نمط CSS بنمط- custom-button-style إلى حقل النص Class CSS الإضافية في لوحة أداة فحص الكتلة.

CSS class added to Additional CSS Class text field

يؤدي هذا إلى تشغيل تحديث لمخزّنة الكتلة وإضافتها إلى ترميز HTML.

Block markup showing the style variation class added

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

مسكتك صغير!

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

جربها بنفسك.

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

الآن عد إلى إعدادات شكل نمط كتلة لزر الزر الخاص بك وانقر فوق الخيار الافتراضي (الذي تم تحديده) أو أي من خيارات نمط الكتلة الأخرى. سترى على الفور طبقة CSS تتم إضافتها إلى حقل النص الخاص بـ CSS Class الإضافي وترميز مجمّع الكتل. سيتم أيضًا تطبيق أي قواعد CSS مخصصة تم تعريفها للفئة المخصصة بمجرد تحديد شكل نمط الحظر.

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

استنتاج

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

في المقالة التالية ، سنتناول أمثلة كاملة عن كيفية تسجيل أنماط الحظر الخاصة بك وربط CSS عبر المكون الإضافي وأيضًا عبر موضوع الطفل.

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

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.