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

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

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

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

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

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

تتوفر جميع التعليمات البرمجية لهذا البرنامج التعليمي لتنزيل GitHub repo على اليمين ، لذا لن تضطر إلى كتابة التعليمات يدويًا إذا كنت تريد المتابعة معك فقط.

تسجيل BSV داخل مجموعة

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

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

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

داخل مجلد WordPress plugin المحلي الخاص بك ، افتح نافذة سطر الأوامر وأدخل:

npx create-guten-block bsv-plugin

لقد استخدمت bsv-plugin هنا للاسم ولكن يمكنك استخدام أي شيء تحبه. بعد بضع دقائق عند اكتمال التثبيت ، أدخل:

cd bsv-plugin
npm start

يمكننا الآن تعديل الشفرة المصدرية للمجموعة التي تم إنشاؤها حديثًا وإنشاء block-guten-set تلقائيا كود المصدر لنا بعد كل تغيير.

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

إزالة أنماط Editor-Only

قبل أن نذهب إلى أبعد من ذلك ، نحتاج فقط إلى تغيير طريقة تضمين CSS افتراضيًا.

تتضمن المجموعة المخصصة create-guten-block التي تم إنشاؤها للتو لنا صحيفتي نمط. أحدها محصور في المحرر والآخر محصور على المحرر والواجهة الأمامية. نحن لا نحتاج إلى أنماط المحرر فقط لهذا البرنامج التعليمي لذا في. \ bsv-plugin \ src \ init.php أو حذف الدعوة إلى () wp_enqueue_style في () bsv_plugin_cgb_editor_assets.

عند البقاء في init.php للحظة نحتاج أيضًا إلى التعليق على مصفوفة التبعية لـ () wp_enqueue_style في () bsv_plugin_cgb_block_assets لأن هذا يمنع في الوقت الحالي الأنماط من أن تكون متضمنة بشكل صحيح. أستخدم create-guten-block بإصدار v1.11.0 في هذا البرنامج التعليمي ، لذا قد تكون أو لا تكون لديك المشكلة نفسها وفقًا للإصدار الذي تستخدمه.

يجب أن تبدو الدالة () bsv_plugin_cgb_block_assets كما يلي:

function bsv_plugin_cgb_block_assets() {
    // Styles.
    wp_enqueue_style(
        'bsv_plugin-cgb-style-css', // Handle.
        plugins_url( 'dist/blocks.style.build.css', dirname( __FILE__ ) ) // Block style CSS.
        //array( 'wp-blocks' ) // Dependency to include the CSS after it.
        // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.style.build.css' ) // Version: filemtime — Gets file modification time.
    );

} // End function bsv_plugin_cgb_block_assets().

الآن عند تحميل الصفحة سترى أنماط الحظر التي يتم تطبيقها في المحرر وعلى الواجهة الأمامية وهو ما نريده.

أشكال نمط تسجيل مجموعة

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

إفتح. \ bsv-plugin \ src \ block \ block.js وإضافة ما يلي إلى كائن تكوين وظائف registerBlockType (على سبيل المثال مباشرة أسفل خاصية الكلمات الرئيسية ستفعل هنا).

styles: [
    {
        name: "style1",
        label: __("Style 1"),
        isDefault: true
    },
    {
        name: "style2",
        label: __("Style 2")
    },
    {
        name: "style3",
        label: __("Style 3")
    }
],

يسجل هذا ثلاثة أشكال نمط جديدة للمجموعة المخصصة. لاحظ كيف أن الاختلاف في نمط المجموعة المسمى style1 لديه الخاصية isDefault لتعيين true. هذا يحدد ببساطة تنوع نمط مجموعة Style 1 عند فتح خيارات الحظر في المحرر. لا يقوم بالفعل بتعيين أي فئات CSS للمجموعة كما قد تعتقد.

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

قم بتحديث صفحة المحرر وافتح خيارات تنوع النمط من خلال النقر فوق الرمز الموجود أعلى يمين المجموعة لرؤية صيغ نمط المجموعة الثلاثة التي قمنا بتعريفها للتو.

لاحظ كيف يتم تحديد شكل نمط مجموعة Style 1 بشكل افتراضي وهو الذي حددناه في خاصية styles أعلاه. يؤدي تحديد أيٍّ من اختلافات نمط المجموعة الثلاث إلى فئات CSS مختلفة يتم إضافتها إلى مجمّع المجموعة. على سبيل المثال ، يؤدي تحديد style 2 إلى إضافة فئة style-style-style2.

لا يحدث أي شيء حاليًا عندما يتم تحديد كل شكل من أنماط مجموعة القوالب لذلك دعنا نضيف بعض الأنماط الأساسية لإصلاح هذا. في. \ bsv-plugin \ src \ block \ style.scss أضف ما يلي بعد الأنماط الموجودة:

.wp-block-cgb-block-bsv-plugin.is-style-style2 {
    background: pink;
}

.wp-block-cgb-block-bsv-plugin.is-style-style3 {
    background: purple;
    color: white;
}

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

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

تسجيل BSV عن طريق ملحق

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

دعنا نختبر ذلك من خلال إضافة بعض اختلافات نمطنا الخاص إلى مجموعة الزر الأساسي. تأتي هذه المجموعة مع ثلاثة أنماط مختلفة تم تعريفها بالفعل: Rounded و Outline و Squared.

سنقوم بإضافة نمطين مختلفين من نمطنا الخاص: Pill Shaped ، وUppercase.

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

أنشئ مجلد bsv جديدًا داخل مجلد WordPress. \ wp-content \ plugins المحلي وأضف ثلاثة ملفات:

• bsv.php
• bsv.js
• bsv.css

في bsv.php أضف الكود التالي:

<?php
/*
Plugin Name: Block Style Variations
Version: 0.1
Description: Demonstrates how to add block style variations to an existing block.
Author: David Gwyer
Author URI: https://www.wpgoplugins.com
*/

// editor scripts
function bsv_editor($hook) {
    wp_enqueue_script( 'bsv_js', plugins_url( 'bsv.js', __FILE__ ) );
}
add_action('enqueue_block_editor_assets', 'bsv_editor');

// frontend and editor scripts
function bsv_frontend_editor($hook) {
    wp_enqueue_style( 'bsv_css', plugins_url( 'bsv.css', __FILE__ ) );
}
add_action('enqueue_block_assets', 'bsv_frontend_editor');

في bsv.js أضف رمز الواجهة الأمامية:

jQuery(document).ready(function($) {
  wp.blocks.registerBlockStyle("core/button", {
    name: "upper-case",
    label: "Upper Case"
  });

  wp.blocks.registerBlockStyle("core/button", {
    name: "pill",
    label: "Pill Shaped"
  });
});

وفي bsv.css ، أضف الأنماط نفسها:

.wp-block-button.is-style-upper-case {
  text-transform: uppercase;
}

.wp-block-button.is-style-pill .wp-block-button__link {
  border-radius: 30px !important;
}

قم بتنشيط الملحق وقم بإدراج مثيل جديد لمجموعة الزر في المحرر. يجب أن تشاهد الآن الاختلافات الجديدة في نمط المجموعة المتاحة!

فهم كود ملحق BSV 

دعونا نراجع ما قمنا به للتو. في bsv.php ، تم وضع ملف جافا سكريبت في enqueue_block_editor_assets ، بحيث يتم تحميله فقط على محرر المشرف. ومع ذلك ، فإننا نريد تحميل CSS على المحرر والواجهة الأمامية حتى نستخدم ربط enqueue_block_assets لهذا الغرض.

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

المهم أن تنتبه هنا هي استدعاءات () registerBlockStyle. هذه الوظيفة تعيش في كائن wp.blocks العالمي لذا نحن بحاجة إلى تضمين البادئة بوضوح أينما تستخدم هذه الوظيفة.

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

شيء واحد يجب أن نلاحظه هنا على الرغم من ذلك هو إذا قمت بإضافة isDefault: true لتنوع نمط مجموعة عن طريق () registerBlockStyle سيتم تجاهلها إذا تم بالفعل تعيين صيغة نمط افتراضية. ما عليك سوى الانتباه إلى ما إذا كنت تتوقع (منه مثلي) تجاوز تنسيق النمط الافتراضي.

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

لذلك ، على سبيل المثال ، لإلغاء تسجيل شكل نمط المخطط التفصيلي من كتلة الزر ، يمكنك استخدام:

wp.blocks.unregisterBlockStyle("core/button", "outline");

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

تسجيل BSV عن طريق الموضوع

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

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

أنا أستخدم Twenty Nineteen كموضوع رئيسي كما هو مضمن في WordPress 5.0 ولكن يمكنك تأسيسه على أي سمة رئيسية تريدها.

أنشئ مجلدًا جديدًا من twentynineteen-child داخل مجلد WordPress. \ wp-content \ themes المحلي وأضف أربعة ملفات:

• style.css
• functions.php
• tnc_bsv.js
• tnc_bsv.css

لن نقوم بإضافة أنماط أنماط فرعية معينة إلى style.css ولكننا بحاجة إلى تضمينها حتى يتم التعرف على السمة بواسطة WordPress.

في style.css أضف:

/*
 Theme Name:   Twenty Nineteen Child
 Author:       David Gwyer
 Author URI:   https://wpgoplugins.com/
 Template:     twentynineteen
 Version:      0.1
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
*/

يتم وضع ملفات جافا سكريبت و CSS في enqueued عبر functions.php لذا أضف الكود التالي إلى هذا الملف:

<?php

// tnc = twenty nineteen child

// Include parent theme styles
function tnc_enqueue_parent_theme_styles() {
    wp_enqueue_style( 'parent-theme-styles', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'tnc_enqueue_parent_theme_styles' );

function tnc_add_styles() {
    wp_enqueue_style( 'tnc-bsv-css', get_stylesheet_directory_uri() . '/tnc_bsv.css' );
}
add_action('enqueue_block_assets', 'tnc_add_styles');

function tnc_add_scripts() {
    wp_enqueue_script(
        'tnc-bsv-js',
        get_stylesheet_directory_uri() . '/tnc_bsv.js'
    );
}
add_action( 'enqueue_block_editor_assets', 'tnc_add_scripts' );

في tnc_bsv.js أضف الشفرة لتسجيل تنوع نمط الحظر الخاص بنا:

jQuery(document).ready(function($) {
  wp.blocks.registerBlockStyle("core/button", {
    name: "gradient",
    label: "Gradient"
  });
});

وأخيرًا ، تتم إضافة CSS لتنويعات نمط الحظر إلى tnc_bsv.css:

.wp-block-button.is-style-gradient .wp-block-button__link {
  background: linear-gradient(
    to bottom,
    #6db3f2 0%,
    #54a3ee 50%,
    #3690f0 51%,
    #1e69de 100%
  ) !important;
}

.wp-block-button.is-style-gradient .wp-block-button__link:hover {
  opacity: 0.9;
  cursor: pointer;
}

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

قم بتفعيل النسق ثم أضف زرًا إلى المحرر لمشاهدة الإنشاء الجديد.

ربما لاحظت أنني قمت بلف شفرة جافا سكريبت JavaScript داخل عبارة jQuery:

jQuery(document).ready(function($) {
    // ...
});

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

قم بتنزيل الكود

كما سبق ذكره ، يتوفر الرمز للتنزيل عبر رابط GitHub على يسار الصفحة.

يحتوي هذا الريبو على موضوع واثنين من الإضافات التي قمنا بتطويرها في هذا البرنامج التعليمي. عند تنزيل المحتويات ، سترى ثلاثة مجلدات. قم بإضافة المجلد twentynineteen-child إلى مجلد السمة .wp-content \ themes ومجلدتي plugin الآخرين إلى مجلد الملحق \ wp-content \ plugins.

قم بتنشيط كل من الإضافات والمظهر لجعل أشكال نمط المجموعة متاحة في محرر WordPress الجديد.

خاتمة

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

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