ما وراء الكتل الأساسية: صياغة كتل جوتنبرج المخصصة لتعزيز وظائف ووردبريس

ملخص

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

ما وراء الكتل الأساسية: صياغة كتل جوتنبرج المخصصة لتعزيز وظائف ووردبريس

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

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

فهم بنية محرر الكتل

قبل الغوص في التطوير، من الضروري فهم كيفية عمل جوتنبرج وكتله ضمن نظام ووردبريس البيئي. تم بناء ووردبريس نفسه على بنية معيارية من PHP و MySQL. تتحكم السمات في العرض، وتضيف الإضافات الوظائف. يندمج جوتنبرج، كميزة أساسية في ووردبريس، بسلاسة في هذه البنية. يستفيد من JavaScript (بشكل أساسي React) لتجربة التحرير الديناميكية في المتصفح، بينما تتعامل PHP مع التسجيل والعرض من جانب الخادم.

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

المكونات الأساسية للكتلة المخصصة

تتكون كل كتلة جوتنبرج مخصصة، في جوهرها، من عدة أجزاء رئيسية:

1. التسجيل: هذه هي عملية إخبار ووردبريس بكتلتك الجديدة. يتضمن تحديد اسمها وعنوانها وأيقونتها وبيانات وصفية أخرى. يتم ذلك بشكل أساسي باستخدام دالة JavaScript registerBlockType.
2. السمات: هذه هي حقول البيانات المرتبطة بكتلتك. فكر فيها كإعدادات أو خصائص يمكن للمستخدم تعديلها لنسخة معينة من الكتلة (مثل محتوى النص، عنوان URL للصورة، اختيار اللون). يتم تعريف السمات في تسجيل JavaScript الخاص بالكتلة.
3. وظيفة التحرير (Edit): تحدد دالة JavaScript هذه كيف تظهر الكتلة وتتصرف داخل محرر جوتنبرج. هذا هو المكان الذي تبني فيه واجهة المستخدم التفاعلية التي سيستخدمها منشئو المحتوى لتكوين الكتلة.
4. وظيفة الحفظ (Save): تحدد دالة JavaScript هذه علامات HTML الثابتة التي سيتم حفظها في قاعدة البيانات وعرضها على الواجهة الأمامية لموقعك. يجب أن تعكس الحالة الحالية لسمات الكتلة.

خطوة بخطوة: إنشاء أول كتلة مخصصة لك

لننشئ كتلة مخصصة بسيطة تعرض "دعوة لاتخاذ إجراء" (CTA) مع عنوان وزر. سيركز هذا المثال على جوانب JavaScript الأساسية لتسجيل الكتل وتحريرها، بافتراض إعداد بيئة تطوير ووردبريس أساسية.

المتطلبات الأساسية:

• بيئة تطوير ووردبريس محلية.
• فهم أساسي لـ JavaScript و React و PHP.
• تثبيت Node.js و npm (أو yarn) لتجميع الأصول.

1. إعداد المشروع:

عادةً ما يتم تطوير الكتل المخصصة كجزء من إضافة. أنشئ ملف إضافة جديد (مثل my-custom-blocks/my-custom-blocks.php) وملف JavaScript لكتلتك (مثل src/index.js). ستحتاج أيضًا إلى عملية بناء لتجميع JavaScript الخاص بك. النهج الشائع هو استخدام @wordpress/scripts الذي يوفر طريقة مريحة للتعامل مع التجميع.

في الدليل الجذر للإضافة الخاصة بك، أنشئ ملف package.json:

{
  "name": "my-custom-blocks",
  "version": "1.0.0",
  "description": "A plugin for custom Gutenberg blocks.",
  "main": "index.js",
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  },
  "keywords": ["wordpress", "gutenberg", "block"],
  "author": "Your Name",
  "license": "GPL-2.0-or-later",
  "devDependencies": {
    "@wordpress/scripts": "^26.0.0" 
  }
}

قم بتثبيت التبعيات: npm install.

2. تسجيل الكتلة (JavaScript):

في ملف src/index.js، ستستخدم registerBlockType من حزمة @wordpress/blocks.

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';

// Import components for the editor
import { Edit } from './edit';
import { Save } from './save';

registerBlockType( 'my-custom-blocks/cta', {
    title: __( 'Call to Action', 'my-custom-blocks' ),
    icon: 'megaphone',
    category: 'widgets',
    attributes: {
        headline: {
            type: 'string',
            default: '',
        },
        buttonText: {
            type: 'string',
            default: 'Learn More',
        },
        buttonUrl: {
            type: 'string',
            default: '#',
        },
    },
    edit: Edit,
    save: Save,
} );

3. تعريف واجهة المحرر (src/edit.js):

يعالج هذا المكون كيف تبدو الكتلة وتعمل داخل المحرر.

import { __ } from '@wordpress/i18n';
import { useBlockProps, RichText, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, TextControl } from '@wordpress/components';

export const Edit = ( { attributes, setAttributes } ) => {
    const blockProps = useBlockProps();

    const onChangeHeadline = ( newHeadline ) => {
        setAttributes( { headline: newHeadline } );
    };

    const onChangeButtonText = ( newButtonText ) => {
        setAttributes( { buttonText: newButtonText } );
    };

    const onChangeButtonUrl = ( newButtonUrl ) => {
        setAttributes( { buttonUrl: newButtonUrl } );
    };

    return (
        <>
            <InspectorControls>
                <PanelBody title={ __( 'Button Settings', 'my-custom-blocks' ) }>
                    <TextControl
                        label={ __( 'Button Text', 'my-custom-blocks' ) }
                        value={ attributes.buttonText }
                        onChange={ onChangeButtonText }
                    />
                    <TextControl
                        label={ __( 'Button URL', 'my-custom-blocks' ) }
                        value={ attributes.buttonUrl }
                        onChange={ onChangeButtonUrl }
                    />
                </PanelBody>
            </InspectorControls>
            <div { ...blockProps }>
                <RichText
                    tagName="h3"
                    placeholder={ __( 'Enter your headline here...', 'my-custom-blocks' ) }
                    value={ attributes.headline }
                    onChange={ onChangeHeadline }
                    allowedFormats={ [ 'core/bold', 'core/italic' ] }
                />
                <a href={ attributes.buttonUrl } className="wp-element-button">
                    { attributes.buttonText }
                </a>
            </div>
        </>
    );
};

4. تعريف وظيفة الحفظ (src/save.js):

تحدد هذه الوظيفة إخراج HTML للواجهة الأمامية.

import { useBlockProps, RichText } from '@wordpress/block-editor';

export const Save = ( { attributes } ) => {
    const blockProps = useBlockProps.save();

    return (
        <div { ...blockProps }>
            <RichText.Content
                tagName="h3"
                value={ attributes.headline }
            />
            <a href={ attributes.buttonUrl } className="wp-element-button">
                { attributes.buttonText }
            </a>
        </div>
    );
};

5. استدعاء سكربت الكتلة (PHP):

في ملف الإضافة الرئيسي الخاص بك (my-custom-blocks.php)، تحتاج إلى تسجيل واستدعاء ملف JavaScript المجمع الخاص بك.

<?php
/**
 * Plugin Name: My Custom Blocks
 * Description: Adds custom Gutenberg blocks.
 * Version: 1.0
 * Author: Your Name
 */

function my_custom_blocks_register_block() {
    // Automatically loads the block.json file and enqueues the script.
    register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'my_custom_blocks_register_block' );
?>

6. بناء الأصول:

قم بتشغيل npm run build في دليل الإضافة الخاص بك. سيؤدي هذا إلى تجميع JavaScript الخاص بك في مجلد build.

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

أفضل الممارسات لتطوير الكتل المخصصة

يتجاوز تطوير الكتل المخصصة مجرد جعلها وظيفية. يضمن الالتزام بأفضل الممارسات أن تكون الكتل الخاصة بك آمنة وفعالة وسهلة الوصول وقابلة للصيانة.

• التسمية الفضائية (Namespacing): استخدم دائمًا مساحة اسم فريدة لكتلتك (مثل my-custom-blocks/cta). هذا يمنع التعارض مع الكتل الأخرى. تتعامل دالة registerBlockType مع هذا.
• تنظيم الكود: حافظ على كود JavaScript و PHP الخاص بك نظيفًا ومنظمًا. بالنسبة للكتل المعقدة، فكر في تقسيم JavaScript الخاص بك إلى مكونات أصغر قابلة لإعادة الاستخدام.
• الأمان:
  • التنقية (Sanitization): عند حفظ البيانات في قاعدة البيانات (خاصة المحتوى الذي ينشئه المستخدم)، قم دائمًا بتنقيته. يوفر ووردبريس وظائف مثل sanitize_text_field و esc_url وما إلى ذلك.
  • الهروب (Escaping): عند إخراج البيانات إلى المتصفح، قم دائمًا بالهروب منها لمنع هجمات البرمجة النصية عبر المواقع (XSS). استخدم وظائف مثل esc_html و esc_attr و esc_url.
  • Nonces: لأي طلبات AJAX أو عمليات إرسال نماذج متعلقة بكتلتك، استخدم nonces للتحقق من أن الطلب نشأ من مصدر ووردبريس شرعي.
• التدويل (i18n): استخدم وظائف __() و _x() (من @wordpress/i18n) لجميع السلاسل النصية التي تواجه المستخدم في JavaScript الخاص بك. هذا يجعل كتلتك قابلة للترجمة.
• إمكانية الوصول: تأكد من أن كتلتك قابلة للاستخدام من قبل الجميع. استخدم HTML دلاليًا، وقدم سمات ARIA عند الضرورة، واختبر باستخدام قارئات الشاشة.
• الأداء:
  • التحميل الكسول (Lazy Loading): بالنسبة للكتل التي تقوم بتحميل أصول ثقيلة أو بيانات معقدة، فكر في تطبيق تقنيات التحميل الكسول.
  • العرض الفعال: قم بتحسين وظيفة save وأي عرض من جانب الخادم ليكون فعالاً قدر الإمكان.
  • استدعاء الأصول: قم فقط باستدعاء البرامج النصية والأنماط الضرورية لكتلتك. استخدم enqueue_block_style و enqueue_block_script_handle للأصول الخاصة بالكتلة.
• النمطية والقابلية للتوسيع: استفد من خطافات ووردبريس (الإجراءات والمرشحات) داخل PHP الخاص بك للسماح للإضافات أو السمات الأخرى بتعديل سلوك كتلتك أو إخراجها.
• block.json: بالنسبة للكتل الأكثر تعقيدًا، استخدم ملف block.json للإعلان عن بيانات الكتلة الوصفية والتبعيات والأنماط ومقابض البرامج النصية. هذا هو المعيار الحديث لتطوير الكتل ويبسط إدارة الأصول.

التكامل مع بنية ووردبريس

الكتل المخصصة ليست كيانات معزولة. إنها تتكامل بعمق مع بنية ووردبريس الأساسية:

• الخطافات (Hooks): يمكنك استخدام إجراءات ومرشحات PHP في الإضافة الخاصة بك لتعديل تسجيل الكتلة، أو إضافة أنماط أو برامج نصية مخصصة بشكل شرطي، أو حتى تغيير الإخراج المعروض للكتل الأساسية. على سبيل المثال، قد تستخدم مرشح block_type_metadata_settings لتعديل إعدادات كتلة مسجلة.
• تكامل السمة (Theme Integration): تعتمد السمات المستندة إلى الكتل والتحرير الكامل للموقع (FSE) بشكل كبير على الكتل. يمكن تصميم الكتل المخصصة لتتناسب بسلاسة مع قوالب FSE، مما يسمح للمستخدمين ببناء مواقع كاملة باستخدام سير عمل معياري متسق للكتل.
• التوافق مع الإضافات (Plugin Interoperability): يمكن لكتلك المخصصة التفاعل مع الإضافات الأخرى. على سبيل المثال، يمكن لكتلة منتج مخصصة سحب البيانات من إضافة تجارة إلكترونية، أو يمكن لكتلة معرض مخصصة التكامل مع إضافة مكتبة وسائط معينة.

مفاهيم واعتبارات متقدمة

• العرض من جانب الخادم (SSR): بالنسبة للكتل التي تتطلب بيانات ديناميكية أو منطقًا معقدًا من الأفضل معالجته على الخادم، يمكنك تنفيذ العرض من جانب الخادم. يتضمن ذلك تحديد وظيفة render_callback في PHP الخاص بك عند تسجيل الكتلة.
• الكتل الديناميكية: غالبًا ما يشار إلى الكتل التي تستخدم SSR باسم الكتل الديناميكية. لا تقوم بحفظ HTML ثابت في قاعدة البيانات؛ بدلاً من ذلك، تقوم فقط بحفظ سماتها، وتقوم render_callback بإنشاء HTML عند كل تحميل للصفحة.
• أنماط الكتل: يمكنك تحديد أنماط مخصصة لكتلك يمكن للمستخدمين تحديدها من داخل المحرر.
• اختلافات الكتل: قم بإنشاء اختلافات لكتلة أساسية لتقديم إصدارات معدة مسبقًا بإعدادات افتراضية أو مظاهر مختلفة.
• الاختلافات بين المحرر والواجهة الأمامية: كن على دراية بأن وظائف edit و save قد تحتاج إلى التعامل مع سيناريوهات مختلفة. وظيفة edit مخصصة لتجربة التحرير التفاعلية، بينما وظيفة save مخصصة لإخراج HTML الثابت. في بعض الأحيان، قد تحتاج إلى render_callback منفصل للعرض الديناميكي للواجهة الأمامية.

الخلاصة

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