معمارية محرر المكونات Gutenberg: البلوكات، إدارة الحالة بـ Redux، وشجرة الـ AST

أهلاً بيك يا صديقي المطور في أضخم وأجرأ نقلة نوعية في تاريخ ووردبريس على الإطلاق: معمارية محرر المكونات Gutenberg. في أواخر سنة 2018 مع إطلاق ووردبريس 5.0، انقسم مجتمع المطورين لفريقين: فريق كان خايف ومرعوب من التغيير وبيطالب بالرجوع للمحرر الكلاسيكي القديم (TinyMCE)، وفريق من مهندسي النظم شافوا في جوتنبرج المستقبل الحقيقي للويب! جوتنبرج مش مجرد محرر نصوص بنكتب بيه مقالات؛ ده عبارة عن تطبيق React و Redux عملاق وشديد التعقيد شغال داخل متصفحك، بيتعامل مع المحتوى كشجرة كائنات برمجية (Abstract Syntax Tree – AST)، وبيمهد الطريق لمنظومة Full Site Editing (FSE). في الدليل المعماري ده، هنغوص في كواليس المحرر، نفهم عبقرية تخزين البلوكات في الداتابيز، ونفكك دورة حياة إدارة الحالة بـ @wordpress/data، ونبني أدوات تحليل بلوكات برودكشن حقيقية.

المعضلة التخزينية: كيف يخزن جوتنبرج المحتوى في قاعدة البيانات؟

أول سؤال هندسي بيسأله أي مطور لما يفتح جدول wp_posts في قاعدة بيانات MySQL هو: “هو جوتنبرج بيخزن البلوكات فين؟ هل عمل جدول جديد للبلوكات؟ هل بيخزنها كـ JSON في عمود مخصص؟” المفاجأة الصادمة لمعظم المطورين هي: جوتنبرج بيخزن المحتوى كله في نفس عمود post_content الكلاسيكي! طب إزاي ووردبريس بيفرق بين فقرة عادية، وصورة، وجدول، وزرار تفاعلي؟ هنا تظهر العبقرية الهندسية لفريق Core: تعليقات الـ HTML المهيكلة (HTML Block Comment Delimiters):

<!-- wp:paragraph {"fontSize":"large","textColor":"vivid-red"} -->
<p class="has-vivid-red-color has-text-color has-large-font-size">أهلاً بكم في المعمارية الحديثة!</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":42,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://example.com/photo.jpg" alt="تجربة" class="wp-image-42"/></figure>
<!-- /wp:image -->

لماذا لم يختر ووردبريس تخزين البيانات كـ JSON خالص؟

المطورين في البداية اقترحوا تخزين كل مقال كملف JSON خالص في الداتابيز. لكن فريق المعمارية في ووردبريس رفض الاقتراح ده تماماً لـ 3 أسباب استراتيجية عبقرية:

1. التوافقية العكسية المطلقة (Zero Breaking Changes): لو موقعك قرر يعطل جوتنبرج ويرجع للمحرر الكلاسيكي، أو لو في تطبيق قديم بيقرا من جدول wp_posts مباشرة، كود الـ HTML هيتعرض للزوار عادي جداً بدون أي انهيار؛ لأن المتصفحات بتتجاهل تعليقات الـ HTML <!-- --> وتعرض النصوص والصور اللي جواها بسلاسة!
2. تغذية محركات البحث وخلاصات الـ RSS: عناكب Google وخلاصات RSS Feeds مش محتاجة محرك JavaScript عشان تفك شفرة المقال؛ هي شايفة Semantic HTML نظيف جاهز للأرشفة الفورية.
3. سرعة الاستعلامات وقوة البحث: استعلامات LIKE '%كلمة%' في MySQL بتشتغل بسرعة فائقة على النصوص المباشرة بدون الحاجة لتفكيك كائنات JSON معقدة في كل ريكوست.

من النص الخام إلى شجرة الكائنات: محرك Block Parser و AST

لما ووردبريس بيحتاج يعالج المقال برمجياً (مثلاً في الـ REST API أو عند تطبيق الفلاتر)، بيشغل المحرك النواتي المكتوب بـ C/PHP والموجود في wp-includes/blocks.php عبر الدالة: parse_blocks( $content ). المحرك ده شغال كـ Lexer & Tokenizer؛ بيقرأ النص، ويحول تعليقات الـ HTML إلى شجرة كائنات مهيكلة (Abstract Syntax Tree – AST):

[
    [
        'blockName'    => 'core/paragraph',
        'attrs'        => [
            'fontSize'  => 'large',
            'textColor' => 'vivid-red',
        ],
        'innerBlocks'  => [],
        'innerHTML'    => '
أهلاً بكم في المعمارية الحديثة!
',
        'innerContent' => ['
أهلاً بكم في المعمارية الحديثة!
'],
    ]
]

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

إدارة الحالة في الواجهة الأمامية: معمارية @wordpress/data و Redux

داخل المتصفح، محرر جوتنبرج مش شغال بأكواد jQuery قديمة؛ جوتنبرج مبني بالكامل كـ Single Page Application (SPA) بيعتمد على React. عشان يدير الحالة المعقدة دي (النصوص المكتوبة، البلوكات المحددة، التراجع والتقدم Undo/Redo، حفظ المسودات، وتحميل الميتا داتا)، فريق ووردبريس بنى حزمة: @wordpress/data.

الحزمة دي مبنية فوق مبادئ Redux مع إضافات سحرية:

• المتاجر المركزية (Data Stores): كل جزء في المحرر له متجر خاص مسجل بنظام فضاء الأسماء:
  • core/block-editor: مسؤول عن شجرة البلوكات، البلوك النشط حالياً، وتحديد النصوص.
  • core/editor: مسؤول عن بيانات المقال نفسه (العنوان، الحالة، الرابط اللطيف، التصنيفات، وتاريخ النشر).
  • core/notices: مسؤول عن إشعارات النجاح والتحذيرات المنبثقة.
• المحددات (Selectors): دوال بنستخدمها لقراءة البيانات من المتجر بدون تعديلها: wp.data.select('core/block-editor').getBlocks().
• المعالجات (Actions & Dispatches): دوال بنطلقها لتعديل الحالة: wp.data.dispatch('core/block-editor').insertBlock(newBlock).
• الحلالات التلقائية (Resolvers): لما تطلب بيانات مش موجودة في الرام (زي جلب بيانات مستخدم أو تصنيف)، الـ Resolver بينطلق تلقائياً ويبعت ريكوست لـ REST API في الخلفية ويملأ المتجر بالبيانات أوتوماتيكياً!

مقارنة معمارية شاملة: Gutenberg مقابل المحرر الكلاسيكي مقابل بناة الصفحات (Page Builders)

تطبيق برودكشن متكامل: بناء محلل ومعدل شجرة البلوكات (Gutenberg Block AST Transformer)

الكود ده بيوضح إزاي تستغل خوارزمية الـ Block Parser في ووردبريس لتحليل محتوى أي مقال برمجياً، واستخراج إحصائيات دقيقة عن البلوكات المستخدمة، وحقن بلوك إعلاني أو ويدجت CTA تفاعلي تلقائياً بعد الفقرة الثالثة:

<?php
/**
 * أداة تحليل وتعديل شجرة بلوكات جوتنبرج (Block AST Transformer)
 * Author: Mohamed Abozaid
 */

if (!defined('ABSPATH')) {
    exit;
}

class Enterprise_Gutenberg_AST_Transformer {

    public static function init(): void {
        // حقن البلوكات الديناميكية قبل عرض المحتوى للزائر
        add_filter('the_content', [__CLASS__, 'inject_dynamic_cta_into_blocks'], 20);

        // تسجيل نقطة REST API لتحليل إحصائيات البلوكات
        add_action('rest_api_init', [__CLASS__, 'register_analytics_endpoint']);
    }

    /**
     * تفكيك شجرة البلوكات وحقن كتل تفاعلية بعد الفقرة الثالثة
     */
    public static function inject_dynamic_cta_into_blocks(string $content): string {
        // إذا كان المحتوى لا يحتوي على بلوكات جوتنبرج، نتجاوز
        if (!has_blocks($content)) {
            return $content;
        }

        // 1. تحويل نص الـ HTML إلى شجرة كائنات AST مهيكلة
        $blocks = parse_blocks($content);

        $paragraph_count = 0;
        $modified_blocks = [];
        $cta_injected    = false;

        foreach ($blocks as $block) {
            $modified_blocks[] = $block;

            // عد الفقرات الرئيسية فقط
            if ($block['blockName'] === 'core/paragraph') {
                $paragraph_count++;

                // حقن البلوك الإعلاني فور اكتمال الفقرة الثالثة
                if ($paragraph_count === 3 && !$cta_injected) {
                    $modified_blocks[] = self::build_custom_cta_block();
                    $cta_injected      = true;
                }
            }
        }

        // 2. إعادة تجميع وتصيير شجرة البلوكات إلى HTML نهائي نظيف
        $rendered_output = '';
        foreach ($modified_blocks as $b) {
            $rendered_output .= render_block($b);
        }

        return $rendered_output;
    }

    /**
     * بناء بلوك جوتنبرج برمجي متوافق مع معايير الـ AST
     */
    private static function build_custom_cta_block(): array {
        return [
            'blockName'    => 'core/group',
            'attrs'        => [
                'backgroundColor' => 'vivid-cyan-blue',
                'textColor'       => 'white',
                'style'           => [
                    'spacing' => ['padding' => ['top' => '20px', 'bottom' => '20px', 'left' => '20px', 'right' => '20px']],
                    'border'  => ['radius' => '12px'],
                ],
            ],
            'innerBlocks'  => [
                [
                    'blockName'    => 'core/heading',
                    'attrs'        => ['level' => 3, 'textAlign' => 'center'],
                    'innerBlocks'  => [],
                    'innerHTML'    => '
انضم لنخبة مهندسي ووردبريس في مصر والعالم العربي!
',
                    'innerContent' => ['
انضم لنخبة مهندسي ووردبريس في مصر والعالم العربي!
'],
                ],
                [
                    'blockName'    => 'core/paragraph',
                    'attrs'        => ['align' => 'center'],
                    'innerBlocks'  => [],
                    'innerHTML'    => '
اشترك في النشرة الهندسية الأسبوعية لمحمد أبوزيد لتصلك أحدث المقالات المعمارية.
',
                    'innerContent' => ['
اشترك في النشرة الهندسية الأسبوعية لمحمد أبوزيد لتصلك أحدث المقالات المعمارية.
'],
                ]
            ],
            'innerHTML'    => '',
            'innerContent' => [],
        ];
    }

    /**
     * تسجيل مسار REST API لتحليل تركيبة البلوكات في أي مقال
     */
    public static function register_analytics_endpoint(): void {
        register_rest_route('gutenberg/v1', '/analyze/(?P[d]+)', [
            'methods'             => WP_REST_Server::READABLE,
            'callback'            => [__CLASS__, 'analyze_post_blocks'],
            'permission_callback' => function() {
                return current_user_can('edit_posts');
            },
        ]);
    }

    public static function analyze_post_blocks(WP_REST_Request $request): WP_REST_Response|WP_Error {
        $post_id = (int) $request->get_param('id');
        $post    = get_post($post_id);

        if (!$post) {
            return new WP_Error('post_not_found', __('المقال غير موجود.', 'text-domain'), ['status' => 404]);
        }

        $blocks = parse_blocks($post->post_content);

        $block_stats = [];
        $total_words = 0;
        $image_count = 0;

        self::traverse_blocks_recursive($blocks, $block_stats, $total_words, $image_count);

        return new WP_REST_Response([
            'post_id'      => $post_id,
            'is_gutenberg' => has_blocks($post->post_content),
            'total_blocks' => count($blocks),
            'total_words'  => $total_words,
            'image_count'  => $image_count,
            'breakdown'    => $block_stats,
        ], 200);
    }

    private static function traverse_blocks_recursive(array $blocks, array &$stats, int &$words, int &$images): void {
        foreach ($blocks as $block) {
            $name = $block['blockName'] ?: 'core/classic-html';
            $stats[$name] = ($stats[$name] ?? 0) + 1;

            if ($name === 'core/image') {
                $images++;
            }

            // حساب الكلمات في المحتوى الداخلي
            if (!empty($block['innerHTML'])) {
                $words += count(preg_split('/s+/u', trim(strip_tags($block['innerHTML']))));
            }

            // تتبع البلوكات المتداخلة (Nested Inner Blocks)
            if (!empty($block['innerBlocks'])) {
                self::traverse_blocks_recursive($block['innerBlocks'], $stats, $words, $images);
            }
        }
    }
}

Enterprise_Gutenberg_AST_Transformer::init();

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

شوف يا صديقي الجمال الهندسي اللي الكود ده بيقدمه:

• التعديل على شجرة الـ AST بدلاً من التلاعب العشوائي بالنصوص بـ Regex: زمان المطور كان بيستخدم preg_replace() عشان يدور على وسم </p> ويحقن كود إعلاني، وطبعاً التعبير النمطي كان بيبوظ الـ HTML ويقفل وسوم بالغلط! باستخدام parse_blocks()، إحنا بنتعامل مع شجرة بيانات كائنية نظيفة، بنعد الفقرات الحقيقية ونحقن البلوك في مكانه المظبوط، وننادي render_block() عشان ووردبريس يولد الكود المتوافق مع الثيم بنسبة 100%.
• دعم البلوكات المتداخلة (Recursive Inner Blocks): في ميثود traverse_blocks_recursive، عملنا تتبع تكراري (Recursive Traversal) عشان لو المحرر حاطط أعمدة (Columns) وجواها صور أو نصوص، الكود يغوص جوة مصفوفة innerBlocks ويحلل كل العناصر بدقة متناهية.
• التحليل الإحصائي عبر الـ REST API: أنشأنا مسار بيطلع لفريق التحرير تقرير فوري: المقال فيه كام بلوك، كام صورة، ونسبة استخدام كل نوع، وده بيساعد في بناء أنظمة التدقيق التحريري وضمان جودة المقالات.

دراسة حالة واقعية من السوق المصري: إنقاذ مجلة أزياء كبرى من مستنقع الـ 8 مليون سطر Postmeta

تعال أحكيلك حكاية حقيقية لمجلة أزياء وموضة إلكترونية شهيرة في مصر (مقرها الزمالك):

الكارثة في عصر Elementor

المجلة كانت شغالة بإضافة Elementor لبناء كل صفحات ومقالات الموقع. بعد 4 سنين من النشر اليومي، الموقع بقى فيه أكثر من 12,000 مقال. ولأن بناة الصفحات الخارجية بيخزنوا كل عنصر وزرار وإعدادات الهوامش كـ JSON متداخل جوة جدول wp_postmeta تحت مفتاح _elementor_data: 1. جدول wp_postmeta تضخم ووصل لأكثر من 8.5 مليون سجل! 2. حجم قاعدة البيانات تجاوز 14 جيجابايت! 3. لوحة تحكم ووردبريس بقت تاخد 25 ثانية عشان تفتح صفحة تحرير المقال، والمحررين كانوا بيشتكوا إن المتصفح بيهنج (Browser Tab Out of Memory) ويمسح المقالات قبل حفظها! 4. زمن فتح المقال للزائر في الهاتف وصل لـ 7.2 ثانية، والموقع فقد أكثر من 65% من زيارات Google بسبب فشل Core Web Vitals.

خطة الإنقاذ والهجرة المعمارية إلى جوتنبرج النواتي

1. بناء ثيم حديث معتمد بالكامل على Full Site Editing (FSE): لغينا الـ Page Builder تماماً، وبنينا Block Theme نقي جداً مبني ببلوكات جوتنبرج النواتية مع ملف theme.json موحد للألوان والخطوط.
2. كتابة سكريبت هجرة بالـ AST (Migration Script): كتبنا سكريبت بايثون و PHP قرأ بيانات الـ _elementor_data المعقدة، وفككها، وحولها تلقائياً إلى بلوكات جوتنبرج قياسية (Paragraphs, Headings, Images, Galleries) وخزنها في post_content.
3. تنظيف قاعدة البيانات: حذفنا الـ 8.5 مليون سجل القديمة من جدول wp_postmeta بضغطة زر واحدة بعد نجاح التحويل.

جدول نتائج التحول الهندسي

الوصايا العشر لمعمارية محرر المكونات Gutenberg

1. احترم تعليقات الـ HTML المهيكلة (Delimiters): لا تعدل محتوى تعليقات البلوكات يدوياً في قاعدة البيانات؛ دع دوال النواة تتولى التوليد والتحليل.
2. استخدم parse_blocks() لمعالجة المحتوى: تجنب التعبيرات النمطية العشوائية؛ شجرة الـ AST هي الطريقة الآمنة الوحيدة لتعديل البلوكات برمجياً.
3. اعتمد على theme.json لضبط التصميم: لا تكرر الأكواد؛ وحد الألوان والخطوط والمسافات في ملف theme.json لتستفيد منها كل البلوكات تلقائياً.
4. احرص على خفة كود الـ Save في الواجهة الأمامية: اجعل مخرجات دالة save في البلوك كود HTML دلالي خالص وخفيف بدون أي سكريبتات زائدة.
5. استثمر في حزمة @wordpress/data: تعلم مبادئ Redux وتفاعل مع الـ Stores الرسمية عبر Selectors و Actions بدلاً من الـ DOM Manipulation المباشر.
6. استخدم Dynamic Blocks للمحتوى المتغير: إذا كان البلوك يعرض بيانات تتغير لحظياً (مثل أحدث الأخبار)، اعتمد على ميثود render_callback في PHP بدلاً من تخزين HTML ثابت.
7. تجنب أخطاء Block Validation Errors: تأكد دائماً من أن كود الـ HTML المولد من دالة save يطابق تماماً ما هو مخزن في الداتابيز لتفادي تحذيرات الانهيار التحريري.
8. استفد من ميزة Block Supports: لا تعيد اختراع ميزات الألوان والمسافات؛ فعل خصائص supports في ملف block.json ودع ووردبريس يديرها نيابة عنك.
9. حمل أصول البلوك بشرط الاستخدام (Conditional Enqueuing): استخدم خاصيتي style و script في block.json لضمان عدم تحميل الملفات إلا في الصفحات التي تحتوي على البلوك فقط.
10. اختبر البلوكات مع قارئات الشاشة (Accessibility First): تأكد من أن مكونات التحرير والعرض تدعم التنقل بلوحة المفاتيح والـ ARIA Attributes القياسية.

التعمق المعماري: خط أنابيب التصيير في السيرفر (Server-Side Rendering Pipeline)

يا صديقي المطور، لما الزائر بيفتح صفحة في موقعك، ووردبريس بيشغل الدالة النواتية do_blocks($content). الدالة دي بتمشي على شجرة الـ AST وبتشغل ميثود render_block( $parsed_block ) لكل بلوك بالترتيب. في المرحلة دي، في 3 فلاتر نواتية بتشتغل وتعتبر كنز لأي مهندس برمجيات:

1. render_block_context: بيسمحلك بحقن بيانات سياقية للبلوك (Context Injection)، زي تمرير رقم المقال، أو صلاحيات المستخدم الحالي، أو إعدادات القالب للبلوكات المتداخلة بدون ما تعدل خصائص البلوك نفسه!
2. pre_render_block: فلتر اعتراض مبكر؛ لو الدالة بتاعتك رجعت منه كود HTML (Not Null)، ووردبريس هيتخطى تصيير البلوك ده بالكامل ويعرض الكود بتاعك، وده المكان المثالي لعمل Block-level Caching عبر Redis!
3. render_block: بيستلم كود الـ HTML النهائي للبلوك قبل طباعته للزائر، وده اللي بنستخدمه لإضافة فئات CSS ديناميكية، أو تتبع التحليلات، أو تعديل الروابط.

ثورة الـ Interactivity API في ووردبريس الحديث

من أول إصدار ووردبريس 6.5، دخلت معمارية جديدة قلبت الموازين اسمها WordPress Interactivity API. زمان، لو كنت عايز تعمل بلوك تفاعلي في الواجهة الأمامية (زي عداد لايكات، سلة مشتريات فورية، أو قائمة منسدلة)، كنت بتضطر تحمل مكتبات خارجية زي React كاملة أو jQuery في الفرونت إند، فكان حجم الصفحة بيكبر وسرعتها بتقل. الـ Interactivity API حلت المشكلة دي بنظام مبني فوق Preact Signals فائق الخفة (أقل من 10 كيلوبايت!): المطور بيعرف الحالة التفاعلية بـ HTML Directives بسيطة زي: data-wp-interactive="myPlugin" و data-wp-on--click="actions.toggle". البلوك بيبقى تفاعلي وفوري وسلس جداً في الفرونت إند بدون ما يستهلك أي موارد، وبدون ما يتطلب أي إعدادات Build معقدة للفرونت إند!