الدليل الكامل لأنماط كتلة جوتنبرج (I)
نشرت: 2020-12-23في الأسبوع الماضي ، قدم Matt Mullenweg ، كما هو معتاد كل عام ، عرضه التقديمي (افتراضي في هذه الحالة) ، حالة الكلمة ، والذي قدم فيه ملخصًا موجزًا عن الوضع الحالي والميزات الجديدة لـ WordPress.
يركز Matt أكثر من أي وقت مضى على جعلنا نقع في حب التجربة التي يوفرها محرر كتلة Gutenberg. إحدى الميزات الجديدة التي أبرزها Matt ، والتي جاءت مع الإصدار 5.5 من WordPress ، هي أنماط الكتلة . اعتقدت أنه سيكون من المثير للاهتمام عمل هذا الدليل الكامل عليهم.
الدليل مقسم إلى ثلاث منشورات وسنلقي نظرة على المواضيع التالية:
- مقدمة لأنماط الكتلة
- أدخل نمطًا على الصفحة
- أنماط محددة مسبقًا وأنماط أخرى متوفرة في الدلائل
- أضف الأنماط المتوفرة في الدلائل إلى موقعك
- كيفية إنشاء نمط من الصفر
- كيفية إنشاء نمط إذا لم تكن مطورًا
- كيفية تحويل الكتل القابلة لإعادة الاستخدام إلى أنماط الحظر
- مواضيع باستخدام أنماط الكتلة
- الوثائق الرسمية.
لذلك ، دون مزيد من التأخير ، فلنبدأ!
1. مقدمة لأنماط الكتلة
عندما وصل Gutenberg ، كان التغيير الكبير فيما يتعلق بالمحرر الكلاسيكي الذي اعتدنا عليه في WordPress هو إدخال مفهوم "block". كان من المفترض أن يكون كل شيء كتلة: عنوان المنشور ، وفقراته ، وقوائمه ، وصورته ... كل منها كان عبارة عن كتلة ، مع خصائص التخصيص الخاصة بها لإعداد حجم الخط ، والعنوان ، والمحاذاة ، وما إلى ذلك.
سرعان ما أصبحت الكتل أكثر تعقيدًا وأصبح لدينا الآن معارض صور أو كتل وسائط / نصية أو حتى كتل تحتوي على كتل أخرى.
في نفس الوقت ، قدم العديد من المطورين أيضًا مجموعة كبيرة من الكتل بميزات فريدة حتى تتمكن من تحسين تصميم صفحاتك. على سبيل المثال ، في Nelio قمنا بتطوير Nelio Compare Images لمقارنة صورتين بشريط تمرير بسيط:
لم يكن هناك انفجار في الكتل التي يمكن العثور عليها في المكونات الإضافية والسمات فحسب ، بل تطورت قدراتها أيضًا مع الإصدارات المختلفة من WordPress. وبالتالي ، يمكنك حاليًا إنشاء كتل قابلة لإعادة الاستخدام ، وحتى إنشاء صفحة أو قالب نشر معهم.
استمرارًا لفكرة وجود تصميمات محددة مسبقًا يمكن إعادة استخدامها بسرعة وسهولة ، مع الإصدار 5.5 من WordPress ، وصلت أنماط الكتلة. إن فكرة نمط الكتلة بسيطة للغاية: فهي عبارة عن أقسام أو أجزاء محددة مسبقًا تتكون من مجموعة من الكتل التي يمكنك استخدامها في إنشاء الصفحات والمشاركات. يمكن أن تكون هذه الأنماط شيئًا بسيطًا مثل قسم يعرض زرين أو قسمًا للسعر بتصميمات لافتة للنظر ومعقدة.
2. إدراج نقش على الصفحة
لنبدأ بالأساسيات ، كيف تقوم بإدراج نمط جديد في الصفحة؟ سهل جدا! كما هو الحال مع الكتل ، لإدراج نمط ، ما عليك سوى النقر فوق الزر + في الجزء العلوي الأيسر من المحرر الخاص بك ، وبدلاً من إضافة كتلة ، حدد علامة التبويب Patterns . هناك سترى قائمة منسدلة صغيرة تحتوي على أنواع الأنماط التي يمكنك تحديدها ، والأنماط المحددة مسبقًا في WordPress ، وتلك الخاصة بالقالب التي قمت بتثبيتها وأي نمط آخر قمت بتثبيته باستخدام مكون إضافي.
حدد النمط الذي تفضله وشاهد كيف يتم إدراج مجموعة الكتل التي تتكون منه في صفحتك:
بعد إدخال النمط ، يمكنك تعديل كل كتلة كما كنت تفعل حتى الآن. أيضًا إذا تم تجميع كتل هذا النمط ، فيمكنك أيضًا تعديل خصائص المجموعة ككل. بسيط ، أليس كذلك؟
3. الأنماط الافتراضية والمزيد من الأنماط من دلائل الجهات الخارجية
يأتي إصدار WordPress 5.5 مزودًا بمجموعة من أنماط الحظر المحددة مسبقًا والتي يمكنك استخدامها الآن لإنشاء صفحاتك. عليك فقط النقر فوق الزر + الذي ذكرته أعلاه لمعرفة الأنماط المتوفرة على موقعك.
أيضًا ، قد يحدد المظهر النشط أيضًا أنماط الكتلة الخاصة به. على سبيل المثال ، يتضمن موضوع Twenty Seventeen أو Twenty-One WordPress بعض أنماط الكتلة ، وكذلك الحال بالنسبة لـ GoDaddy's و Genesis Blocks ، على سبيل المثال لا الحصر.
بعد إصدار WordPress 5.0 ، كان لدينا انفجار في الكتل ، ونرى الآن نفس النتيجة إذا كانت أنماط الكتلة: يمكنك تنزيل وتثبيت الكتل والأنماط على موقع الويب الخاص بك بسهولة شديدة ، كما سأشرح لاحقًا. لديك هنا شبكتان من الكتل والأنماط تحت تصرفك ، على الرغم من أنني متأكد من أنه سيكون هناك المزيد قريبًا:
- أنماط Shareablock by Jeffrey Carandang - موقع ويب رائع حيث يمكنك مشاركة والحصول على الكثير من الكتل والقوالب والأنماط لتنزيلها وتثبيتها على موقعك.
- منير كمال في Gutenberg Hub - حيث ستجد أيضًا مجموعة من الكتل والقوالب والأنماط.
هناك أيضًا المكوِّن الإضافي Redux Framework ، والذي يوفر مكتبة بها أكثر من 1000 قالب وقوالب وأنماط تابعة لجهات خارجية (بما في ذلك تلك المتوفرة في الدلائل أعلاه) لإدراجها في صفحاتك. يسمح لك البرنامج المساعد بتنزيل ما يصل إلى 5 أنماط مجانية ثم يمكنك الترقية إلى الإصدار المدفوع.
4. أضف الأنماط المتوفرة في الدلائل إلى موقعك
كما ذكرت سابقًا ، يمكنك استخدام المكون الإضافي Redux Framework لإضافة أنماط من Shareablock و GutenbergHub بسهولة. إذا كنت مصمم مواقع ويب WordPress محترفًا ، فمن المؤكد أنه خيار جيد أن تجد دائمًا العديد من الأنماط التي تريدها بسرعة كبيرة. ولكن يمكنك أيضًا استخدام أنماط كتلة جديدة دون الحاجة إلى مكون إضافي مميز. دعونا نرى كيف.
أضف نمط Shareablock
في حالة Shareablock ، لتثبيت نمط (وبالطبع ، قالب أو قالب) ، عليك فقط تحديده من الويب والنقر فوق الزر " تنزيل الآن ".
في المرة الأولى سيُطلب منك عنوان بريد إلكتروني حتى تتمكن من الحصول على اسم مستخدم وكلمة مرور.
يوجد في البريد الإلكتروني رابط لتسجيل الدخول إلى موقع الويب الخاص بهم ؛ قم بتسجيل الدخول وستتمكن الآن من تنزيل النمط الذي تهتم به. ما عليك سوى تحديده والنقر فوق " تنزيل الآن " مرة أخرى ، حتى تتلقى نمط الحظر في بريدك الإلكتروني.
بعد النقر فوق الارتباط الموجود في البريد الإلكتروني ، يمكنك الوصول إلى الويب لتنزيل ملف .json الخاص بالنمط. بمجرد التنزيل ، فقط اسحبه إلى محرر قوالب WordPress وسترى تلقائيًا جميع الكتل التي يتكون منها النموذج.
إنها عملية مرهقة ، لكنها تنجز المهمة. لسوء الحظ ، ستلاحظ أن نمط الحظر لا يظهر في مكتبتك ...
أضف نمط Gutenberg Hub
تعد إضافة نمط من Gutenberg Hub أسهل. كما في السابق ، حدد النمط الذي تريد نسخه أولاً.
على يمين النمط ، سترى زر نسخ الرمز . انقر فوق الزر لنسخه إلى الحافظة الخاصة بك ثم الصقه في محرر Gutenberg. سيؤدي هذا إلى لصق الكتلة في المحرر الخاص بك ، لكنه سيتخطى المكتبة.
لكن انتظر! ليس بهذه السرعة. إذا كنت ترغب في تخصيص الكتلة (المقاطع) الناتجة بالكامل ، يوصي منير كمال بتثبيت المكون الإضافي المجاني ، EditorPlus ، الذي يضيف كتلًا جديدة إلى المحرر ويمد Gutenberg بعناصر تحكم تصميم وخطوط وأيقونات وفواصل ورسوم متحركة متقدمة وغير ذلك الكثير الميزات.
إذا قمت بذلك ، فسترى في الشريط الجانبي الأيمن للمحرر لديك عناصر تحكم متقدمة لتعديل تصميم النمط المنسوخ.
أنت الآن تعرف ما هي أنماط الكتلة ، وأين تجدها ، وكيفية إدراجها في موقع الويب الخاص بك لإنشاء تصميمات رائعة. لا تفوت المنشور التالي حيث ستتعلم كيفية إنشاء الأنماط الخاصة بك!
صورة مميزة لـ Raul Cacho Oses على Unsplash .