أنماط Gutenberg الجاهزة: Patterns العادية والمتزامنة Synced Patterns

أهلاً بك يا بطل في المحطة رقم 98 من سلسلتنا المعمارية الشاملة في ووردبريس! لو كنت بتصمم صفحات ووردبريس زمان، أكيد فاكر المعاناة لما كان العميل يطلب منك قسم “جدول أسعار” أو “آراء عملاء” أو “بانر عروض”، كنت تروح تفتح صفحة جديدة وتبدأ ترص الكتل من الصفر: صف وجواه ثلاثة أعمدة وكل عمود جواه صورة وعنوان وزرار وظلال وبادينج… وتكرر نفس الموال في كل صفحة!

معمارية أنماط الكتل (Block Patterns) في جوتنبرج جاءت لتقضي على هذا التكرار الممل وتحول عملية بناء المحتوى إلى لعبة تركيب قطع Lego سريعة وممتعة! لكن الموضوع مش مجرد كتل مرصوصة؛ الأنماط تطورت معمارياً لتشمل الأنماط العادية (Standard Patterns)، و الأنماط المتزامنة (Synced Patterns) التي حلت محل الكتل القابلة لإعادة الاستخدام القديمة (Reusable Blocks)، ومؤخراً مع ووردبريس 6.5 وما بعدها ظهرت الميزة الثورية Pattern Overrides! في هذا الدليل العملي المعمق، هنشرح الفروق الجوهرية، إزاي تسجل الأنماط برمجياً وتلقائياً، إزاي تستغل الـ Overrides، وهنشوف دراسة حالة حية لمتجر ملابس شهير في الإسكندرية مع كود كامل و 20 سؤالاً معمارياً متقدماً!

الفلسفة المعمارية: كيف غيرت الأنماط سرعة بناء الصفحات؟

النمط (Block Pattern) في أبسط تعريفاته المعمارية هو عبارة عن تجميعة مسبقة التهيئة من الكتل (Pre-configured Block Group) تم تصميمها وضبط خصائصها (الهوامش، الألوان، الخطوط، التخطيط الشبكي) لتؤدي وظيفة بصرية وتسويقية محددة، مثل:

• بانرات الترحيب (Hero Sections).
• جداول مقارنة الأسعار والخطط (Pricing Tables).
• أقسام آراء وتقييمات العملاء (Testimonials & Reviews).
• دعوات اتخاذ الإجراء (Call to Action – CTA).

بدلاً من أن يحتاج كاتب المحتوى لمهارات مصمم واجهات، هو ببساطة يفتح الـ Block Inserter، يدخل على تبويب “Patterns”، يختار النمط المناسب بضغطة زر واحدة، فيتم إسقاط التصميم كاملاً وجاهزاً في الصفحة، ليركز المحرر فقط على استبدال الكلمات والصور!

الأنماط العادية مقابل المتزامنة (Synced Patterns): أسرار الذاكرة وقاعدة البيانات

عشان تفهم ووردبريس كمهندس معماري محترف، لازم تعرف إزاي كل نوع من الأنماط بيتعامل مع قاعدة البيانات:

• الأنماط العادية غير المتزامنة (Standard Unsynced Patterns): عندما يقوم المستخدم بإدراج نمط عادي في مقال، يقوم ووردبريس بعمل نسخ ولصق مستقل (Detached Copy) لكود الـ HTML الخاص بالكتل وحقنه مباشرة داخل post_content للمنشور الحالي. لا يوجد أي رابط يربط هذا الكود بالنمط الأصلي بعد الإدراج! لو عدلت أي نص أو لون، التعديل يخص هذا المنشور فقط، ولو تم تعديل ملف النمط الأصلي في القالب لاحقاً، لن تتأثر المنشورات القديمة نهائياً.
• الأنماط المتزامنة (Synced Patterns – Reusable Blocks سابقاً): هنا الفلسفة مختلفة تماماً! النمط المتزامن يتم تخزينه في قاعدة البيانات في جدول wp_posts كمنشور مخصص بنوع wp_block. وعند إدراجه في مقال، لا يتم نسخ كود الكتل، بل يتم فقط إدراج إشارة مرجعية (Pointer): <!-- wp:block {"ref":1420} /-->. هذا يعني أن محتوى وتصميم النمط يتم جلبه ديناميكياً أثناء تصيير الصفحة، ولو قام مدير الموقع بتعديل هذا النمط في أي صفحة، سينعكس التعديل فورياً في الـ 100 صفحة التي تستخدم نفس النمط!

ثورة Pattern Overrides: تصميم موحد ومحتوى مخصص لكل صفحة

زمان كان في معضلة كبيرة: “لو أنا عايز أعمل بانر بنفس التصميم والألوان والبادينج والأزرار في 50 صفحة، بس في كل صفحة عايز العنوان والصورة يكونوا مختلفين حسب محتوى الصفحة… أعمل إيه؟”. النمط العادي كان هيخليك تفقد ميزة التحديث الموحد للتصميم، والنمط المتزامن كان هيغير النصوص في الـ 50 صفحة كلهم!

الحل السحري جاء مع ووردبريس 6.5 عبر ميزة Pattern Overrides! الميزة دي بتمكنك من تحويل النمط المتزامن إلى قالب ذكي: الهيكل، الألوان، التباعد، وموضع العناصر متزامن وموحد عالمياً، ولكن داخل النمط يمكنك تحديد كتل معينة (مثل العنوان core/heading أو الصورة core/image أو الفقرة core/paragraph) وتفعيل خاصية "allowOverrides": true عليها. النتيجة: يستطيع كاتب المحتوى تعديل النص في صفحته بشكل مستقل، بينما يظل التصميم والألوان مرتبطة بالنمط المركزي، وإذا غيرت لون الخلفية في النمط المركزي غداً، سيتغير في كل الصفحات مع بقاء نصوص كل صفحة كما هي دون مساس!

جدول المقارنة المعمارية: Standard Patterns مقابل Synced Patterns مقابل Pattern Overrides

التسجيل التلقائي عبر مجلد patterns/ في الثيم

أسهل وأحدث طريقة لتسجيل الأنماط في ووردبريس الحديث هي وضع ملفات PHP داخل مجلد patterns/ في القالب الخاص بك. ووردبريس يقوم بعمل Auto-discovery لهذه الملفات وقراءة الترويسة التعريفية في أعلى الملف:

<?php
/**
 * Title: بطاقة اشتراك النشرة البريدية المتطورة
 * Slug: abozaid/newsletter-card
 * Categories: call-to-action, banner
 * Description: بطاقة اشتراك تفاعلية مع حقل بريد وزر إرسال متناسق
 * Keywords: newsletter, subscribe, email, mailchimp
 * Viewport Width: 1200
 * Inserter: true
 */
?>



    
    
اشترك في نشرتنا التقنية الأسبوعية
    

    
    
انضم لأكثر من 50,000 مهندس ومطور عربي يستلمون تحليلات معمارية ووردبريس مباشرة في بريدهم.
    

    
    

        
        
اشترك مجاناً الآن
        
    
    

التسجيل البرمجي المتقدم عبر دالة register_block_pattern()

لو كنت تبني إضافة مخصصة (Plugin) وتريد تسجيل أنماط بناءً على شروط منطقية (Conditional Patterns)، أو جلب المحتوى من قاعدة بيانات أو ترجمته عبر دوال __()، يمكنك استخدام الدالة المعيارية register_block_pattern() المرتبطة بخطاف init:

add_action( 'init', 'abozaid_register_conditional_patterns' );

function abozaid_register_conditional_patterns() {
    // التحقق من تفعيل إضافة معينة قبل تسجيل النمط
    if ( ! class_exists( 'WooCommerce' ) ) {
        return;
    }

    // أولاً: تسجيل تصنيف مخصص للأنماط إن لم يكن موجوداً
    register_block_pattern_category(
        'abozaid-ecommerce',
        array( 'label' => __( 'أنماط التجارة الإلكترونية لأبو زيد', 'abozaid' ) )
    );

    // ثانياً: تسجيل النمط البرمجي
    register_block_pattern(
        'abozaid/flash-sale-badge',
        array(
            'title'         => __( 'لافتة تخفيضات البرق الحصرية', 'abozaid' ),
            'categories'    => array( 'abozaid-ecommerce' ),
            'keywords'      => array( 'sale', 'discount', 'عروض', 'تخفيض' ),
            'viewportWidth' => 800,
            'content'       => '
                

                    
                    
⚡ خصم 40% لجميع الطلبات اليوم فقط بمناسبة إطلاق التحديث المعماري!
                    
                
                ',
        )
    );
}

كود عملي متكامل: بناء نمط جدول أسعار تفاعلي يدعم التعريب والـ Overrides

تعال نبني معاً نمطاً معمارياً متقدماً لجدول أسعار مكون من ثلاثة أعمدة، جاهز للاستخدام في المواقع العربية المتطورة:

    
    
    

        
        
الباقة الأساسية
        
        
        
199 ج.م / شهرياً
        
        
        

            
موقع واحد سحابي فائق السرعة
            
مساحة تخزين 20GB NVMe SSD
            
شهادة أمان SSL مجانية للأبد
        
        
        
        

            
            
اختر الباقة الأساسية
            
        
        
    
    

    
    
    

        
        
الأكثر طلباً بين الشركات
        
        
        
الباقة المتقدمة Pro
        
        
        
449 ج.م / شهرياً
        
        
        

            
حتى 5 مواقع سحابية معزولة
            
مساحة تخزين 100GB NVMe فائقة السرعة
            
Redis Object Cache مدمج مجاناً
            
نسخ احتياطي يومي تلقائي خارجي
        
        
        
        

            
            
ابدأ التجربة المجانية 14 يوماً
            
        
        
    
    

    
    
    

        
        
باقة المؤسسات Enterprise
        
        
        
999 ج.م / شهرياً
        
        
        

            
عدد غير محدود من المواقع
            
خادم مخصص vCPU و RAM مستقلة
            
دعم فني خاص على مدار الساعة عبر واتساب
        
        
        
        

            
            
تواصل مع مستشار المبيعات
            
        
        
    
    

دراسة حالة حقيقية: متجر ملابس في الإسكندرية وإدارة لافتات العروض في 400 منتج

الوصايا العشر لمهندسي أنماط الكتل في ووردبريس

1. اعتمد على Synced Patterns للمحتوى المشترك: أي إشعار، نموذج تواصل، أو شريط عروض يظهر في أكثر من مكان يجب أن يكون نمطاً متزامناً لتعديله من مكان واحد.
2. استخدم Pattern Overrides لتفادي تكرار الأنماط المتشابهة: إذا كان الاختلاف الوحيد بين الصفحات هو النصوص والصور مع بقاء التصميم متطابقاً، فعل خاصية Overrides فوراً.
3. نظم أنماطك داخل تصنيفات Categories معيارية: اختر تصنيفات مثل featured و call-to-action لتسهيل العثور على أنماطك في Block Inserter.
4. سجل الأنماط تلقائياً عبر مجلد patterns/: لا تملأ functions.php بأكواد تسجيل يدوية؛ دع ووردبريس يكتشف ملفات PHP تلقائياً من مجلد الأنماط.
5. اضبط Viewport Width المناسب في الترويسة: تحديد عرض المعاينة مثل Viewport Width: 1200 يضمن ظهور النمط بشكل جذاب في نافذة الاستكشاف.
6. استخدم متغيرات theme.json في تنسيق الأنماط: لا تكتب ألواناً صلبة في كود النمط؛ استخدم var(--wp--preset--color--primary) ليتكيف النمط مع أي ثيم.
7. لا تخزن استعلامات SQL ثقيلة داخل ملفات الأنماط: أنماط الكتل مخصصة لهيكلة العرض، والعمليات الحسابية مكانها كتل ديناميكية Render Callbacks.
8. افحص التوافقية مع الجوال والشاشات الصغيرة: تأكد من أن كتل الأعمدة المدمجة في النمط تتراص رأسياً بسلاسة على شاشات الموبايل.
9. نظف الأنماط غير المستخدمة في المشاريع القديمة: احذف الأنماط الملغاة لتفادي تشتيت المحررين وتراكم سجلات غير مفيدة في قاعدة البيانات.
10. وفر نصوصاً بديلة باللغة العربية (i18n): عند بناء أنماط لقوالب قابلة للتوزيع، استخدم دوال الترجمة لوضع نصوص إرشادية واضحة للمستخدم العربي.

أنماط البدء التفاعلية (Starter Patterns) ودورها في تجربة إنشاء الصفحات

واحدة من أحدث الميزات المعمارية التي قدمها ووردبريس لتحسين تجربة المستخدم (UX) هي ما يُعرف بـ Page Creation Starter Patterns. زمان لما المحرر كان يضغط “Add New Page”، كان بيظهر له محرر أبيض فارغ ومؤشر كتابة يومض، مما يسبب ما يسمى بـ “متلازمة الصفحة البيضاء” (Blank Page Syndrome) وصعوبة في تخيل الصفحة.

اليوم، بمجرد تسجيل نمط وتعيين templateTypes: array( 'page' )، ووردبريس بيفتح نافذة منبثقة تفاعلية (Modal Dialog) تعرض له خيارات تصميم كاملة للصفحة (مثل صفحة “من نحن”، “اتصل بنا”، “خدماتنا”). عندما يختار المستخدم أحد الأنماط، يتم ملء الصفحة فورياً بكافة الكتل المنظمة.

// patterns/about-us-starter.php
/**
 * Title: صفحة من نحن التعريفية الكاملة
 * Slug: abozaid/starter-about-us
 * Template Types: page
 * Categories: pages, about
 * Description: نمط بداية متكامل يحتوي على قسم قصة الشركة، فريق العمل، وإحصائيات النجاح
 */

هذا الربط المعماري بين الـ Template Types ومحرك المحرر ينقل تجربة إدارة ووردبريس إلى مستوى احترافي يضاهي منصات مثل Squarespace و Webflow، ولكنه يعمل بنظام مفتوح المصدر بالكامل وتحت سيطرتك المطلقة كمهندس برمجيات.

تبديل الأنماط السياقي (Pattern Shuffling): تغيير التصميم بضغطة زر

خاصية معمارية مذهلة أخرى في كتل Group و Template Parts هي إمكانية عمل Pattern Shuffling. تخيل أنك وضعت قسم نداء لاتخاذ إجراء (CTA) في صفحتك، ولكن العميل غير معجب بشكل الأزرار أو مكان الصورة. بدلاً من حذف القسم والبدء من الصفر، يمكنك الضغط على زر “Shuffle” في شريط أدوات الكتلة!

خلف الكواليس، يقوم محرر جوتنبرج بالبحث عن كافة الأنماط المسجلة في نفس التصنيف (مثلاً call-to-action)، ويقوم تلقائياً بنقل النصوص والصور الحالية إلى القالب الجديد للنمط التالي في القائمة! هذه الميزة تعتمد على محاذاة أسماء السمات (Attribute Mapping) بين الكتل، وتمنح المستخدم النهائي مرونة لا مثيل لها دون أن يخرج عن إطار النظام التصميمي المحدد في theme.json.

التشريح الداخلي لكائن البيانات في Pattern Overrides

عندما يتم حفظ منشور يحتوي على نمط متزامن مع تجاوزات (Pattern Overrides)، كيف يخزن ووردبريس تلك البيانات في قاعدة البيانات دون كسر التوافق؟ المفاجأة المعمارية هي أن ووردبريس لا يمس سجل الـ CPT الأصلي، بل يضيف داخل وسم الكتلة المرجعية في المنشور مصفوفة محاذاة تُسمى metadata.bindings. يقوم المحرك بتخزين التجاوزات كـ key-value pairs حيث يشير المفتاح إلى اسم الكتلة الداخلية الفريد (مثلاً: "name": "pricing-headline") وتشير القيمة إلى النص أو الرابط المخصص. أثناء التفسير وعرض الصفحة (Render Time)، يقوم معالج WP_Block بدمج هذه القيم ديناميكياً في شجرة الكتل، مما يمنحك أقصى درجات المرونة مع كفاءة استعلامات قاعدة البيانات وخلو الموقع من أي تكرار غير مبرر.

معايير أداء التخزين المؤقت للأنماط المعقدة تحت الضغط العالي

في الاختبارات المعيارية التي أجريت على بيئات سحابية ضخمة تخدم أكثر من 100,000 طلب في الدقيقة، أظهرت النتائج أن الأنماط المتزامنة المخزنة في Redis Object Cache تحقق زمناً قياسياً في المعالجة لا يتجاوز 1.8 مللي ثانية لكل استدعاء، مقارنة بـ 28 مللي ثانية عند جلبها بدون كاش كائنات مفعل. هذا يثبت أن استثمار بنية الأنماط الحديثة لا يوفر فقط وقت المطورين والمحررين، بل يحمي البنية التحتية للسيرفر ويضمن أعلى درجات الكفاءة التشغيلية الممكنة في أسواق العمل الرقمية الحديثة.