بناء نمط كتلة صورة "شريط سكوتش"

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

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

منذ أن بدأت هذه السلسلة ، أردت الإجابة على سؤال تلقيناه بالفعل من أحد قرائنا. سبق لي أن شاركت نمط كتلة مخصص مع مظهر "شريط سكوتش" في تغطيتي لدعوة برنامج التواصل FSE لاختبار الوسائط:

سأل Devendra Meena في التعليقات:

مرحبًا يا رجل ، كيف تحصل على صورة الكتلة المخصصة "الشريط"؟

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

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

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

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

كمكافأة ، تعمل أنماط الكتلة المخصصة في السمات الكلاسيكية والكتل.

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

لذلك ، اخترت البدء من السمة الافتراضية Twenty-Two. في الاختبار ، أقترح العمل معها. قد يحتاج كود CSS في القسم التالي إلى تعديلات طفيفة للآخرين.

إنشاء نمط كتلة "شريط سكوتش"

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

لتسجيل نمط الكتلة المخصص ، أضف الكود التالي إلى ملف functions.php الخاص بالقالب الخاص بك:

 // Register block styles on the init hook. add_action( 'init', 'tavern_register_block_styles' ); // Wrapper function for registering all block styles. function tavern_register_block_styles() { register_block_style( 'core/image', [ 'name' => 'scotch-tape', 'label' => __( 'Scotch Tape', 'tavern' ) ] ); }

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

تسجيل أسلوب هو الجزء السهل. كتابة الكود هو المكان الذي يمكن أن تصبح فيه الأشياء مشبوهًا. يحتوي WordPress على العديد من الطرق لتحميل أنماط CSS والتي قد لا تعرف من أين تبدأ.

تتيح الوظيفة register_block_style() المستخدمة سابقًا للمطورين إضافة style_handle ، وهو مرجع إلى ورقة أنماط مسجلة. يمكن لهم أيضًا إضافة نمط مضمّن مباشرةً عبر وسيطة inline_style . بالنسبة إلى بضعة أسطر من CSS ، يعمل هذا بشكل جيد.

في السمات الخاصة بي ، أسجل أوراق أنماط خاصة بالكتلة عبر وظيفة wp_enqueue_block_style() - نعم ، أسماء الوظائف محيرة للغاية . تمت إضافة هذا رسميًا في WordPress 5.9. سيتم إخراج CSS فقط عند استخدام كتلة على الصفحة. على سبيل المثال ، أقوم بإضافة ملف core-image.css لإيواء جميع CSS لكتلة الصور. هذه هي الطريقة التي أوصي بها.

ومع ذلك ، من أجل البساطة ، أضفت الكود التالي إلى نهاية ملف style.css الخاص بـ Twenty-Twenty-Two:

 /* Design for the <figure> wrapper. */ .wp-block-image.is-style-scotch-tape { position: relative; overflow: visible; padding: 1rem; background-color: #fff; box-shadow: 0 4px 10px 0 rgba( 0, 0, 0, 0.3 ), 0 0 4rem rgba( 255, 255, 235, 0.5 ) inset; } /* Design for the "tape". */ .wp-block-image.is-style-scotch-tape::before { content: ""; display: block; position: absolute; width: 7rem; height: 2rem; margin: auto auto auto -3.5rem; z-index: 1; left: 50%; top: -0.5rem; background: rgba( 255, 255, 235, 0.5 ); box-shadow: 0 4px 10px 0 rgba( 0, 0, 0, 0.3 ); } /* Remove TT2's image shadow. */ .wp-block-image.is-style-scotch-tape img { box-shadow: none; } /* Adjustments for the caption. */ .wp-block-image.is-style-scotch-tape figcaption { display: block; margin: 1rem 0 0; line-height: 1; font-size: 1rem; font-family: 'Fuzzy Bubbles', sans-serif; }

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

إذا كنت ترغب في إضافة القليل من الذوق إلى التسميات التوضيحية الخاصة بك ، فقم بتحميل Fuzzy Bubbles أو خط خط آخر بخط اليد من Google Fonts.

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

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