الدليل الكامل لأنماط كتلة جوتنبرج (III)

هذا هو الجزء الثالث والأخير من الدليل الكامل لأنماط الكتلة الذي يتضمن الموضوعات التالية:

1. مقدمة لأنماط الكتلة
2. أدخل نمطًا على الصفحة
3. أنماط محددة مسبقًا وأنماط أخرى متوفرة في الدلائل
4. أضف الأنماط المتوفرة في الدلائل إلى موقعك
5. كيفية إنشاء نمط من الصفر
6. كيفية إنشاء نمط إذا لم تكن مطورًا
7. كيفية تحويل الكتل التي يعاد استخدامها إلى أنماط كتلة
8. السمات باستخدام أنماط الكتلة
9. الوثائق الرسمية.

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

6. كيفية إنشاء نمط إذا لم تكن مطورًا

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

• بلوك باتر بيلدر لجوستين تادلوك ،
• BlockMeister - Block Patter Builder بواسطة BlockMeister ،
• كتل جوتنبرج منشئ الصفحة - كتل مجمعة بواسطة GoDaddy

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

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

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

تُظهر لقطة الشاشة السابقة محرر نمط الكتلة كما هو منصوص عليه في المكون الإضافي BlockMeister. كما ترى ، فإنه يوفر مجموعة من الخصائص الإضافية في الشريط الجانبي الأيمن: الاسم ، والسبائك ، والوصف ، وعرض النمط والفئات. من ناحية أخرى ، لا يسمح لك المكون الإضافي Justin Tadlock بإضافة الفئة. وتتيح لك CoBlocks أيضًا إضافة الخصائص الإضافية للأنماط.

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

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

7. كيفية تحويل الكتل القابلة لإعادة الاستخدام إلى أنماط الكتلة

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

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

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

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

يوفر لنا المكون الإضافي القابل لإعادة الاستخدام Block Extended من JB Audras هذه الوظيفة. دعونا نرى كيف نفعل ذلك.

بعد تثبيت المكون الإضافي ، سيظهر خيار قائمة لإدارة الكتل القابلة لإعادة الاستخدام. إذا قمت بالنقر فوق All Reusable Blocks ، فسترى قائمة الكتل التي حددتها.

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

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

8. ثيمات باستخدام أنماط الكتلة

في وقت كتابة هذا التقرير ، كان هناك بالفعل 14 سمة ذات أنماط كتلة مخصصة في دليل قوالب WordPress.org ، والقائمة تنمو بسرعة.

• Twenty-One الإصدار 1.0 بواسطة WordPress.org
• C9 Starter الإصدار 2.4.4 بواسطة covertnine
• C9 إصدار العمل 2.3.1 بواسطة covertnine
• إصدار Seedlet 1.1.2 بواسطة Automattic
• ExS الإصدار 0.9.0 بواسطة exstheme
• Cordero الإصدار 1.2.2 بواسطة uxl
• Bigwigs الإصدار 0.7.1 بواسطة Dinev Dmitry
• مستحلب الإصدار 1.6.9 بواسطة nobita
• Twenty Twenty الإصدار 1.6 بواسطة WordPress.org
• إصدار VW Health Coaching 0.6.5 بواسطة VW THEMES
• إصدار Twenty Nineteen 4.9.6 بواسطة WordPress.org
• كتابات الإصدار 1.3.0 بواسطة Dinev Dmitry
• Twenty Seventeen Version 2.5 بواسطة WordPress.org
• Twenty Sixteen الإصدار 2.3 بواسطة WordPress.org

أغتنم هذه الفرصة لأذكر أنه إذا كنت مطورًا للقوالب وتريد إزالة الكتل المحددة مسبقًا (أنماط الكتلة الأساسية) التي تأتي في WordPress 5.5 ، فيمكنك القيام بذلك باستخدام الكود التالي:

 remove_theme_support( 'core-block-patterns' );

9. التوثيق الرسمي

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

• للمستخدم النهائي - فيديو تمهيدي لمنع الأنماط لفهم ماهية الأنماط وكيفية الوصول إليها وكيفية إضافتها في المنشورات والصفحات وفهم كيفية تخصيصها للمحتوى الخاص بك. هذا الفيديو عبارة عن ورشة عمل نشرها فريق تدريب WordPress.
• للمستخدم النهائي - توثيق نماذج الحظر التي أنشأها فريق التوثيق.
• للمطورين - صفحة Block Patterns في وثائق Block API ، التي نشرها فريق Gutenberg والتي أخبرتك بها بالفعل في المنشور السابق.

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

الصورة المميزة باتريك هندري على Unsplash .