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

نشرت: 2020-12-25

هذا المنشور هو الجزء الثاني من الدليل الكامل لأنماط Gutenberg Block ، والذي يتضمن النقاط التالية:

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

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

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

5. إنشاء نمط جديد

لإنشاء نمط كتلة ، يجب عليك استخدام واجهة برمجة تطبيقات Block Pattern. على وجه التحديد ، دالة PHP register_block_pattern() . دعونا نرى بإيجاز الخطوات المختلفة التي يجب أن نتبعها بمثال بسيط.

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

الآن ، ماذا عن أنماط الكتلة؟ يمكنك إضافة تعريف نمط كتلة جديد في قالبك (بعض السمات ، مثل Twenty-One ، تتضمن بالفعل سماتها الخاصة) ، أو يمكنك إضافتها في مكون إضافي مخصص. أنا متأكد من أنك ستجد مدافعين ومنتقدين لكلا الحلين ، لذلك فقط اختر الحل الذي يناسب احتياجاتك بشكل أفضل.

# 1 صمم الكتل التي ستشكل نمطك

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

للقيام بذلك ، في صفحة بعنوان "إنشاء نمط" ، أبدأ بإنشاء كتلة عنوان ، "قسم 6 ميزات" ، ثم أقوم بإدراج كتلة مكونة من 3 أعمدة.

في الكتلة الأولى ، أقوم بإضافة صورة ، وتحتها ، عنوان الميزة ووصفها.

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

لقد قمت بالفعل بإنشاء مجموعة الكتل التي ستشكل نمطي الجديد.

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

# 2 انسخ محتوى الكتل

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

حدد وانقر فوق نسخ. — حدد مجموعة الكتل التي ستشكل النمط وانقر فوق نسخ.

# 3 Escape نسخ محتوى HTML

لتجنب المشاكل ، نحتاج إلى الهروب من النص الذي نسخته للتو ، حتى يتمكن الكمبيوتر من فهم الأحرف الخاصة مثل فواصل الأسطر وأحرف الجدولة وما إلى ذلك. يمكنك بسهولة الهروب من نص باستخدام أدوات عبر الإنترنت مثل onlinestringtools.com أو JSON Escape / Unescape: فقط الصق الكود الذي نسخته مسبقًا وستحصل على نص تم تجاوزه بشكل صحيح.

# 4 سجل النمط

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

هذا مثالنا:

 register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "<!-- wp:heading {\"textAlign\":\"center\"} -->\n<h2 class=\"has-text-align-center\">6 Features Section</h2>\n<!-- /wp:heading -->\n\n<!-- wp:columns {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-columns are-vertically-aligned-center\"><!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:columns {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-columns are-vertically-aligned-center\"><!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->", ) );

كما ترى في المقتطف السابق ، نحدد أولاً اسمًا فريدًا لتحديد النمط الخاص بنا ( ruth-gutenberg-blocks-patterns/section-with-six-features ) ، ثم نحدد مصفوفة بخاصيتين: title ("قسم يحتوي على 6 ميزات") سيرى مستخدم النمط content نفسه. content هو النص الذي هربنا منه في الخطوة السابقة.

# 5 قم بإنشاء مكون إضافي بالنمط المسجل

لتسجيل النمط في محررنا ، يمكننا إنشاء مكون إضافي أو يمكننا وضعه في موضوعنا النشط. إذا قمت بإنشاء مكون إضافي ، فهذا ما تحتاجه:

 <?php /** * Plugin Name: Ruth's Block Patterns * Description: My personal block patterns * Version: 1.0.0 */ defined( 'ABSPATH' ) or die(); function ruth_patterns_register_block_patterns() { if ( ! class_exists( 'WP_Block_Patterns_Registry' ) ) { return; } register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "…", ) ); } add_action( 'init', 'ruth_patterns_register_block_patterns' );

وفويلا! إذا قمنا الآن بتحديث محررنا (بافتراض أنك قمت بتنشيط المكون الإضافي بالطبع) ، فسترى النمط الجديد:

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

# 6 أضف فئة جديدة من الأنماط

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

هذا مثال:

 function ruth_patterns_register_block_pattern_category() { if ( ! class_exists( 'WP_Block_Patterns_Registry') ) { return; } register_block_pattern_category ( 'ruth-features', array( 'label' => _x( 'Features', 'Block pattern category', 'nelio' ) ) ); } add_action( 'init', 'ruth_patterns_register_block_pattern_category' );

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

 function ruth_patterns_register_block_patterns() { if ( ! class_exists( 'WP_Block_Patterns_Registry' ) ) { return; } register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "…", 'categories' => [ 'ruth-features' ], ) ); } add_action( 'init', 'ruth_patterns_register_block_patterns' );

وهناك لديك:

تم إنشاء نمط الكتلة مع الفئة المشار إليها. — تم إنشاء نمط الكتلة وإتاحته مع الفئة المشار إليها.

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

خصائص نمط الكتلة

في مثالنا ، حددنا title content وخصائص categories لنمط الكتلة ، ولكن هناك المزيد. ستجد التفاصيل في الوثائق التي تصف وظيفة register_block_pattern ، ولكن فيما يلي ملخص:

title (مطلوب): عنوان النمط.
content (مطلوب): محتوى النمط.
description : نص مخفي مرئيًا يستخدم لوصف النمط في أداة الإدخال. الوصف اختياري ، لكن يوصى به بشدة عندما لا يصف العنوان ما يفعله النمط بشكل كامل.
categories : سلسلة من فئات الأنماط المستخدمة لتجميع أنماط الكتلة. يمكن عرض أنماط الكتلة في فئات متعددة.
keywords : مجموعة من الأسماء المستعارة أو الكلمات الرئيسية التي تساعد المستخدمين على اكتشاف النمط أثناء البحث.
viewportWidth : عدد صحيح يحدد عرض النمط في أداة الإدخال.

في حالة تسجيل الفئة ، يتعين علينا فقط تحديد خاصية label ، نظرًا لعدم وجود المزيد من الدعائم.

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

صورة مميزة لجون كاميرون على Unsplash.