شكل البداية/المتعلقة بالمعرفة/ووردبريس/تفاصيل المحتوى

إليك دليل التطوير الكامل والتقدم العملي في استخدام محرر الكتل (Block Editor) الخاص بـ WordPress Gutenberg:

قراءة 3 دقائق
2026-03-17
2026-06-04
2,388
أنا أحصل على عمولة عند التسوق عبر الروابط أدناه، ولا يُضاف أي تكلفة عليك.

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

فهم البنية الأساسية لمحررات الكتل (Block Editors)

محرر غوتنبرغ (Gutenberg Editor) ليس تطبيقًا متكاملًا واحدًا، بل هو نظام بيئي (ecosystem) يتكون من عدة حزم (packages) مستقلة. فهم بنيته أمر أساسي للقيام بعمليات التطوير بشكل فعال.

فصل المحرر عن طبقة البيانات

واجهة المحرر نفسها منفصلة عن طبقة البيانات في ووردبريس. الجزء الأساسي (الكور من WordPress)… @wordpress/editor توفر الحزمة مكونات واجهة المستخدم (UI) الخاصة بالمحرر. @wordpress/data تقوم ميزة “الحزم” (Packages) بتنفيذ آلية إدارة الحالة (State Management) مشابهة لتلك الموجودة في مكتبة Redux. يسمح هذا التفكيك بأن يركز المطورون على عرض البيانات ومنطق التفاعل معها، بينما يتم التعامل مع عملية تخزين البيانات بشكل دائم (Data Persistence) تلقائيًا من خلال

القراءة الموصى بها إتقان أنواع المقالات المخصصة في ووردبريس: دليلًا عملي كاملًا من الإنشاء إلى النشر.。

تسجيل الكتل ودورة حياتها

كل كتلة (block) تحتاج إلى أن تمر بعملية معينة (يجب أن تخضع لمعالجة معينة). registerBlockType يتم تسجيل الدالة. تقبل هذه الدالة معلمتين: الاسم الفريد للكتلة (مثل)... my-plugin/my-custom-blockوكذلك كائن يحتوي على جميع معلومات الإعدادات الخاصة بالكتلة.
بعد التسجيل، تمر الكتل (blocks) بعمليات مثل التهيئة (initialization)، والعرض (rendering)، والتعديل (editing)، والحفظ (saving)، وهي تشكل جزءًا من دورة حياتها (lifecycle). يقوم المطورون بشكل أساسي بتحديد هذه العمليات عن ط edit و save هناك دالتان رئيسيتان تُستخدمان للتحكم في طريقة ظهور الكتل (blocks) في محرر النصوص وفي الواجهة الأمامية (البرنامج النهائي).

خادم ووردبريس من شركة UltaHost
ضمان استرداد المال خلال 30 يومًا، عرض نطاق ترددي وقواعد بيانات غير محدودين، حماية مجانية ضد هجمات DDoS، خصم 50% عند الشراء لمدة 3 سنوات (السعة المتاحة: 501–4 تيرابايت).
شعار شركة UltaHost صفحة الوصول

ابدأ من الصفر لإنشاء أول كتلة مخصصة (custom block) الخاصة بك.

سنقوم بإنشاء كتلة بسيطة للتنبيهات المميزة (highlighted alerts)، تسمح للمستخدمين بإضافة مربعات تنبيه تحتوي على لون خلفي وعنوان.

إعداد بيئة التطوير والملفات الأساسية

أولاً، تأكد من أن بيئة التطوير الخاصة بك جاهزة. تحتاج إلى بيئة Node.js وnpm. قم بإنشاء مجلد جديد للإضافات (plugins) داخل دليل الإضافات (plugin directory). my-custom-blocksفي هذا المجلد، قم بإنشاء الملفات الأساسية التالية:
- my-custom-blocks.php (ملف رئيسي للإضافة)
- package.json (يُستخدم لإدارة اعتمادات Node.js وسكريبتات البناء)
- src/ المحتويات (لتخزين الكود المصدري)
- build/ المحتويات (المجلد الناتج عن أداة البناء، والذي يتم قراءته بواسطة ووردبريس)

في package.json في هذا السياق، قم بتكوين سكريبت البناء (build script) واستورده (import it). @wordpress/scripts الحزم (packages) يمكن أن تسهل بشكل كبير إعداد أدوات مثل Webpack وBabel.

{
  "name": "my-custom-blocks",
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  },
  "devDependencies": {
    "@wordpress/scripts": "^26.0.0"
  }
}

في الملف الرئيسي للإضافة (plugin main file) my-custom-blocks.php في هذا المثال، تحتاج إلى استخدام register_block_type هذه الدالة تُخبر ووردبريس بأنه يجب البدء في تنفيذ بعض الإجراءات أو العمليات. build محتويات الكتلة المستخدمة لتحميل القوائم (المجلدات).

القراءة الموصى بها دليل تطوير موضوعات ووردبريس: بناء موضوعات مخصصة عالية الأداء من الصفر.。

<?php
/**
 * Plugin Name: My Custom Blocks
 */
function my_custom_blocks_register_block() {
    register_block_type( __DIR__ . '/build/highlight-box' );
}
add_action( 'init', 'my_custom_blocks_register_block' );

كود مصدر JavaScript لكتابة الكتل (blocks):

في src إنشاء ملفات داخل المجلد highlight-box/index.js هذا الملف هو المدخل الرئيسي للوحدة (البلوك).

import { registerBlockType } from '@wordpress/blocks';
import { RichText, useBlockProps, InspectorControls, ColorPalette } from '@wordpress/block-editor';
import { PanelBody, PanelRow } from '@wordpress/components';

registerBlockType('my-custom-blocks/highlight-box', {
    title: '高亮提示框',
    icon: 'warning', // 从 Dashicons 中选择
    category: 'design',
    attributes: {
        title: {
            type: 'string',
            source: 'html',
            selector: '.highlight-title',
        },
        content: {
            type: 'string',
            source: 'html',
            selector: '.highlight-content',
        },
        backgroundColor: {
            type: 'string',
            default: '#fff3cd',
        },
    },
    edit: ({ attributes, setAttributes }) =&gt; {
        const blockProps = useBlockProps();
        const { title, content, backgroundColor } = attributes;

const onChangeTitle = (newTitle) =&gt; {
            setAttributes({ title: newTitle });
        };
        const onChangeContent = (newContent) =&gt; {
            setAttributes({ content: newContent });
        };
        const onChangeBackgroundColor = (newColor) =&gt; {
            setAttributes({ backgroundColor: newColor });
        };

return (
            <>
                <inspectorcontrols>
                    <panelbody title="إعدادات الألوان">
                        <panelrow>
                            <colorpalette
                                value="{backgroundColor}"
                                onchange="{onChangeBackgroundColor}"
                            />
                        </panelrow>
                    </panelbody>
                </inspectorcontrols>
                <div {...blockprops} style="{{" backgroundcolor, padding: '20px', borderradius: '5px' }}>
                    <richtext
                        tagname="h3"
                        classname="highlight-title"
                        onchange="{onChangeTitle}"
                        value="{title}"
                        placeholder="输入标题..."
                    />
                    <richtext
                        tagname="p"
                        classname="highlight-content"
                        onchange="{onChangeContent}"
                        value="{content}"
                        placeholder="输入提示内容..."
                    />
                </div>
            </>
        );
    },
    save: ({ attributes }) =&gt; {
        const blockProps = useBlockProps.save();
        const { title, content, backgroundColor } = attributes;
        return (
            <div {...blockprops} style="{{" backgroundcolor, padding: '20px', borderradius: '5px' }}>
                <RichText.Content tagName="h3" className="highlight-title" value={title} />
                <RichText.Content tagName="p" className="highlight-content" value={content} />
            </div>
        );
    },
});

كن متحركًا npm start بدء وضع التطوير (مراقبة تغييرات الملفات) npm run build قم بإجراء عملية البناء (production build). بعد ذلك، في محرر ووردبريس (WordPress Editor)، ستتمكن من العثور على هذا الكتلة (block) المسماة “مربع التنبيه الملون” (Highlighting Alert Box) تحت تصنيف “التصميم” (Design) واستخدامها.

التطوير المتقدم: الكتل الديناميكية والتصميم على الجانب الخادم (Server-side rendering)

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

استضافة.كوم استضافة مشتركة
أداء عالٍ مع وحدات المعالجة المركزية AMD EPYC، ووحدات تخزين NVMe SSD وLiteSpeed، ودعم داخلي متخصص على مدار الساعة طوال أيام الأسبوع، وتدابير أمنية متقدمة بما في ذلك SSL، وقوة الغاشمة، والحماية من البرامج الضارة والحماية من DDoS، وتوفير ما يصل إلى 731 تيرابايت 4 تيرابايت
شعار الاستضافة.كوم صفحة الوصول

تحويل الكتل الثابتة إلى كتل ديناميكية

أولاً، قم بتعديل إعدادات تسجيل الكتل (blocks) لتغيير القيم المطلوبة. save تم تغيير الدالة لتعيد القيمة المطلوبة. nullوأضف واحدًا آخر. render_callback الخصائص.

// 在 registerBlockType 的配置对象中
save: () => {
    return null; // 动态区块不在内容中保存 HTML
},

ثم، قم بتحديث كود التسجيل على جانب PHP لتحديد دالة الاستدعاء الخاصة بالعرض (rendering callback function).

function my_custom_blocks_register_dynamic_block() {
    register_block_type( __DIR__ . '/build/latest-posts', [
        'render_callback' =&gt; 'my_custom_blocks_render_latest_posts'
    ] );
}
add_action( 'init', 'my_custom_blocks_register_dynamic_block' );

function my_custom_blocks_render_latest_posts( $attributes ) {
    $posts = get_posts( [
        'posts_per_page' =&gt; $attributes['numberOfPosts'] ?? 5,
    ] );

if ( empty( $posts ) ) {
        return '<p>لا توجد مقالات حاليًا.</p>'$output = '<ul class="wp-block-my-custom-blocks-latest-posts">';
    foreach ( $posts as $post ) {
        $output .= sprintf(
            '<li><a href="/ar/%s/">%s</a></li>'php
    esc_url(get_permalink($post));
    esc_html(get_the_title($post));
    $output .= '';'</ul>';

return $output;
}

استخدام ملفات قوالب الكتل (block template files) للتصميم والعرض.

بالنسبة للكتل الديناميكية الأكثر تعقيدًا، يُنصح باستخدام ملفات قوالب. قم بإنشاء هذه الملفات في دليل الإضافات (plugins directory). templates/latest-posts.phpقم بنقل منطق الترجمة المذكور أعلاه إلى الملف المطلوب، ثم… render_callback استخدمه في ob_get_clean و include يتم استخدام هذا الأسلوب لتحميل القوالب، مما يجعل منطق كود PHP وHTML أكثر وضوحًا وسهولة في الصيانة.

القراءة الموصى بها دليل استخدام إضافة WooCommerce: من التثبيت والتكوين إلى تشغيل المتجر بشكل كامل。

مواضيع متقدمة وأفضل الممارسات.

بعد إتقان الأساسيات والكتل الديناميكية، يمكن للمواضيع التالية أن تساعدك في تطوير كتل أقوى وأكثر احترافية.

تنفيذ وظيفة تغيير أشكال الكتل (block variants)

تسمح ميزة “تنويعات الكتل” (Block Variations) بإنشاء عدة أنماط أو إعدادات محددة مسبقًا بناءً على كتلة أساسية واحدة. على سبيل المثال، يمكن إنشاء تنويعات مثل “ناجح”، “تحذيري”， “خاطئ” لكتلة “مربع التنبيه المُبرز”.

الاستضافة المشتركة InterServer
استضافة مشتركة $2.50 دولار أمريكي في الشهر، الشهر الأول $0.1 دولار أمريكي الرمز الترويجي tryinterserver، 461 نص برمجي للتطبيقات السحابية، تثبيت بنقرة واحدة.
انتر سيرفر LOGO صفحة الوصول 
import { registerBlockVariation } from '@wordpress/blocks';

registerBlockVariation('my-custom-blocks/highlight-box', [
    {
        name: 'success',
        title: '成功提示',
        icon: 'yes-alt',
        attributes: {
            title: '操作成功',
            backgroundColor: '#d4edda',
        },
        isDefault: false,
    },
    {
        name: 'error',
        title: '错误警告',
        icon: 'dismiss',
        attributes: {
            title: '发生错误',
            backgroundColor: '#f8d7da',
        },
    },
]);

استخدام أنماط الكتل (blocks) وأنماط المحرر (editor styles)

الاستفادة من registerBlockStyle يمكن للدوال أن تضيف أنماطًا بصرية مختلفة للكتل (blocks)، ويمكن للمستخدمين التبديل بين هذه الأنماط من خلال الشريط الجانبي. في الوقت نفسه، يتم استخدام… add_editor_style يمكن ضمان أن المعاينة داخل المحرر تتوافق مع أنماط الواجهة الأمامية (الفرينت إند)، مما يوفر تجربة “ما تراه هو ما تحصل عليه” (What You See Is What You Get).

تحسين الأداء وتقسيم الكود

مع زيادة عدد الكتل (blocks)، فإن تجميع جميع ملفات JavaScript في ملف واحد قد يؤثر سلبًا على أداء التحميل. يمكن استخدام تقنيات معينة لتحسين هذا الأمر. @wordpress/dependency-extraction-webpack-pluginمتضمن بالفعل. @wordpress/scripts (تأكد من تحديد الاعتمادات الخارجية على حزم WordPress بشكل صحيح.) بالنسبة للإضافات الكبيرة، يمكن النظر في استخدام تقنيات التحميل حسب الحاجة أو تقسيم الكود.

الملخصات

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

الأسئلة الشائعة الأسئلة المتداولة

هل يجب استخدام React لتطوير وحدات البناء (blocks) الخاصة بمشروع غوتنبرغ (Gutenberg)؟

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

كيف يمكنني إضافة عناصر جانبية مخصصة إلى الكتلة (block) الخاصة بي؟

يمكنك استخدامه. <code>InspectorControls</code> المكونات… داخل الكتلة. edit داخل الدالة، يتم إرجاعه مع المحتوى الرئيسي للعرض التقديمي. <code>InspectorControls</code> داخليًا، يمكنك استخدام… <code>PanelBody</code>、<code>TextControl</code>、<code>SelectControl</code>、<code>RangeControl</code></code> 等来自 استخدم مكونات حزمة `@wordpress/components` لبناء واجهات إعدادات متنوعة ومتقدمة.

ما الفرق بين الكتل الديناميكية (Dynamic Blocks) والكتل الثابتة (Static Blocks) من حيث الأداء؟

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

هل يمكنني استخدام هذه الكتل (blocks) في المنطقة المخصصة للأدوات التقليدية أو في مربع بيانات المقالات (article metadata boxes)؟

نعم، يتم تسمية هذه الميزات “الأدوات الصغيرة للكتل” (block widgets) و “مربعات بيانات الكتل” (block meta boxes). ابتداءً من إصدار WordPress 5.8، أصبحت منطقة الأدوات الصغيرة تعتمد بالكامل على محرر الكتل من نوع Gutenberg. كما يمكنك أيضًا استخدام هذه الميزات register_block_type أنا أحبك، أيها الأخ الأكبر. widget_types يجب استخدام المعايير (أو الواجهات البرمجية التطبيقية ذات الصلة) لجعل الكتل متاحة في محرر الإضافات (التطبيقات الصغيرة). بالنسبة لمربع بيانات المقالة (Article Metadata Box)، يمكن استخدام…register_post_meta يمكن استخدام واجهات برمجة التطبيقات (APIs) بالاقتران مع الكتل (blocks) لإنشاء واجهات تحرير للبيانات الوصفية (metadata) أكثر سهولة في الاستخدام ووضوحًا.

ما التالي، ما التالي؟

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

القراءة الموسعة والمعرفة العملية

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

الوسوم