البلوكات الثابتة والديناميكية: اختيار مصدر الحقيقة وطريقة العرض

يا هلا بيك يا صديقي في واحد من أهم مفترقات الطرق الهندسية في رحلة احتراف تطوير ووردبريس ومحرر المكونات Gutenberg. أول ما تبدأ تبني بلوك جديد، أول سؤال هندسي لازم تسأله لنفسك ومش تسيبه للصدفة هو: “يا ترى البلوك ده أخليه بلوك ثابت (Static Block) ولا بلوك ديناميكي (Dynamic Block)؟”.

القرار ده مش مجرد تفضيل شخصي أو رفاهية برمجية؛ ده قرار بيحدد مصير موقعك بالكامل من حيث سرعة الأداء (Performance)، استهلاك السيرفر، مرونة التحديثات المستقبلية، وقبل كل ده: الأمان ضد كابوس Block Invalidation Error الشهير اللي ممكن يصحيك الصبح يلاقي آلاف المقالات ضاربة في وش المحررين! في المقال ده، هنشرح الفروق المعمارية الجوهرية بين النوعين، إزاي تختار “مصدر الحقيقة الوحيد” (Single Source of Truth – SSOT)، إزاي تبني النوعين بكود إنتاجي مع ملف render.php الحديث، وهندرس معمارية الهجين (Hybrid Architecture) وحالة عملية حقيقية من السوق المصري بالعامية المصرية التقنية الأصيلة.

معمارية مصدر الحقيقة الوحيد (Single Source of Truth – SSOT)

عشان تفهم الفلسفة وراء التقسيم ده، تعال نبص على السؤال الفلسفي في علوم هندسة البرمجيات: أين يكمن مصدر الحقيقة للبيانات (Where does truth live)?

1. في البلوكات الثابتة (Static Blocks): “المقال هو الحقيقة”

تخيل إنك بتكتب مقال عادي فيه فقرة نصية (Paragraph) أو اقتباس (Quote). المقال ده مش معتمد على أي بيانات خارجية في الموقع. الكلام اللي كتبته في المحرر هو هو اللي المفروض الزائر يشوفه النهاردة وبكرة وبعد سنة. هنا الـ HTML الناتج هو الحقيقة!

لما المحرر يضغط “نشر” (Publish)، محرر جوتنبرج بيشغل دالة save()، يحول الـ JSX لكود HTML خام، ويحطه جوة جدول wp_posts. ميزة الحركة دي إيه؟

• أداء خارق للعادة: لما الزائر يطلب الصفحة، ووردبريس مش محتاج يشغل دوال معقدة ولا يعمل استعلامات إضافية على قاعدة البيانات؛ السيرفر بيقذف الـ HTML للمتصفح فوراً، ولو عندك موديول كاش زي WP Rocket أو LiteSpeed أو Cloudflare، الصفحة بتتسلم من الرام في أجزاء من الألف من الثانية!
• استقلالية تامة عن الـ PHP: حتى لو قفلت البلجن اللي عمل البلوك بعد سنة، المحتوى هيفضل ظاهر في الصفحة زي الفل ومش هيختفي لأن الـ HTML خلاص اتطبع في جسم المقال.

2. في البلوكات الديناميكية (Dynamic Blocks): “قاعدة البيانات هي الحقيقة الحية”

تخيل بقى سيناريو مختلف تماماً: بتعمل بلوك يعرض “أحدث 5 مقالات” أو “سعر جرام الذهب عيار 21 اليوم في السوق المصري” أو “بيانات كارت المنتج وسعره بالجنيه في ووكومرس”.

لو استخدمت هنا بلوك ثابت، الـ HTML هيتحفظ بسعر الذهب النهاردة (وليكن 3,800 جنيه). بكرة السعر بقى 3,900 جنيه؛ المقال هيفضل عارض 3,800 لأن الـ HTML اتجمد في قاعدة البيانات خلاص! عشان يتحدث، هتضطر تفتح 500 مقال وتدوس “Update” يدوياً!

هنا بنقول: الـ HTML مش هو الحقيقة، ده “البيانات الخارجية اللحظية” هي الحقيقة! وبالتالي دالة save() في الجافاسكريبت بترجع null، ومفيش أي كود HTML بيتخزن في جسم المقال؛ اللي بيتخزن هو تعليق كده:

<!-- wp:market/gold-price {"karat":21,"showChart":true} /-->

ولما الزائر يفتح الصفحة، ووردبريس بيشوف التعليق ده ويقول: “أها! البلوك ده ديناميكي، استنى لما استدعي ملف render.php عشان يجيب السعر اللحظي من قاعدة البيانات أو الـ API، ويعمل Render للـ HTML ويرسله للزائر طازة!”.

تطبيق عملي كامل: بناء البلوكين جنباً إلى جنب

تعال نبني مثالين حقيقيين عشان تشوف الفرق بالسطر والرمز، وكيف تنفذ المعماريتين باحترافية كاملة وفق معايير apiVersion: 3 الحديثة.

أولاً: بناء البلوك الثابت (Static Testimonial Block)

بلوك آراء العملاء؛ نصوص واقتباسات ثابتة يكتبها المحرر ولا تتغير لحظياً.

1. ملف block.json للبلوك الثابت

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "enterprise/static-testimonial",
  "version": "1.0.0",
  "title": "رأي العميل الثابت",
  "category": "text",
  "icon": "format-quote",
  "attributes": {
    "quote": {
      "type": "string",
      "source": "html",
      "selector": ".az-quote-text"
    },
    "author": {
      "type": "string",
      "source": "text",
      "selector": ".az-author-name"
    },
    "role": {
      "type": "string",
      "default": "عميل موثق"
    }
  },
  "editorScript": "file:./index.js",
  "style": "file:./style-index.css"
}

2. كود edit.js للبلوك الثابت

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

export default function Edit( { attributes, setAttributes } ) {
    const { quote, author, role } = attributes;
    const blockProps = useBlockProps( { className: 'az-testimonial-box' } );

    return (
        

            

                 setAttributes( { quote: val } ) }
                    placeholder={ __( 'اكتب شهادة أو رأي العميل هنا...', 'az-blocks' ) }
                />
                
                     setAttributes( { author: val } ) }
                        placeholder={ __( 'اسم العميل...', 'az-blocks' ) }
                    />
                     ( { role } ) 
                
            
        
    );
}

3. كود save.js للبلوك الثابت

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

export default function save( { attributes } ) {
    const { quote, author, role } = attributes;
    const blockProps = useBlockProps.save( { className: 'az-testimonial-box' } );

    return (
        

            

                
                
                    
                     ( { role } ) 
                
            
        
    );
}

لاحظ هنا: دالة save رجعت كود JSX كامل، وتم استخدام RichText.Content لحفظ الـ HTML في قاعدة البيانات. لو قمت مستقبلاً بتغيير وسم <cite> إلى <footer> دون كتابة Deprecation، فإن ووردبريس سيرفض البلوك ويعتبره تالفاً!

ثانياً: بناء البلوك الديناميكي (Dynamic Product Pricing Block)

بلوك يعرض السعر اللحظي لمنتج معين مع التوفر في المخزن مباشرة من قاعدة البيانات.

1. ملف block.json للبلوك الديناميكي

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "enterprise/dynamic-pricing-card",
  "version": "1.0.0",
  "title": "بطاقة السعر اللحظي الديناميكية",
  "category": "widgets",
  "icon": "cart",
  "attributes": {
    "productId": {
      "type": "number",
      "default": 0
    },
    "showStockStatus": {
      "type": "boolean",
      "default": true
    }
  },
  "render": "file:./render.php",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css"
}

2. كود edit.js للبلوك الديناميكي

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

export default function Edit( { attributes, setAttributes } ) {
    const { productId, showStockStatus } = attributes;
    const blockProps = useBlockProps( { className: 'az-pricing-card-preview' } );

    // جلب بيانات المنتج الحية داخل شاشة التحرير لمعاينة شكل البلوك للمحرر
    const { product, isResolving } = useSelect( ( select ) => {
        if ( ! productId ) return { product: null, isResolving: false };
        const { getEntityRecord, isResolving: resolving } = select( 'core' );
        return {
            product: getEntityRecord( 'postType', 'product', productId ),
            isResolving: resolving( 'getEntityRecord', [ 'postType', 'product', productId ] )
        };
    }, [ productId ] );

    return (
        

            
                
                     setAttributes( { productId: parseInt( val, 10 ) || 0 } ) }
                        help={ __( 'أدخل الرقم التعريفي للمنتج في ووكومرس', 'az-blocks' ) }
                    />
                     setAttributes( { showStockStatus: val } ) }
                    />
                
            

            

                
{ __( 'معاينة بطاقة السعر الديناميكية (Live SSR)', 'az-blocks' ) }
                { isResolving &&  }
                { ! isResolving && product && (
                    

                        
{ product.title?.rendered || __( 'منتج بدون اسم', 'az-blocks' ) }
                        

                            { __( 'السعر الحالي: ', 'az-blocks' ) }
                            { product.meta?._price || '0.00' } ج.م
                        
                    
                ) }
                { ! isResolving && ! product && (
                    
{ __( 'الرجاء إدخال معرف منتج صالح في الشريط الجانبي.', 'az-blocks' ) }
                ) }
            
        
    );
}

3. كود save.js للبلوك الديناميكي: القفل الآمن

/**
 * في البلوك الديناميكي: دالة save ترجع null دائماً!
 * لا يتم حفظ أي وسم HTML في قاعدة البيانات، مما يضمن حصانة مطلقة ضد أخطاء Invalidation.
 */
export default function save() {
    return null;
}

4. كود ملف السيرفر: render.php المحصن بالتخزين المؤقت (Transients Caching)

<?php
/**
 * ملف render.php لبلوك كارت السعر الديناميكي
 *
 * @var array    $attributes خصائص البلوك المخزنة
 * @var string   $content    المحتوى الداخلي (فارغ في هذا النمط)
 * @var WP_Block $block      كائن البلوك
 */

$product_id = isset( $attributes['productId'] ) ? absint( $attributes['productId'] ) : 0;
$show_stock = ! empty( $attributes['showStockStatus'] );

if ( ! $product_id ) {
    return; // لا تطبع شيئاً في الواجهة الأمامية إذا لم يحدد المنتج
}

// مفتاح كاش ذكي لتفادي الضغط على قاعدة البيانات في الصفحات كثيفة الزيارات
$cache_key = 'az_dyn_product_' . $product_id;
$card_data = get_transient( $cache_key );

if ( false === $card_data ) {
    // جلب بيانات ووكومرس بأمان
    if ( ! function_exists( 'wc_get_product' ) ) {
        return;
    }
    
    $product = wc_get_product( $product_id );
    if ( ! $product || ! $product->is_visible() ) {
        return;
    }

    $card_data = [
        'name'      => $product->get_name(),
        'price_html'=> $product->get_price_html(),
        'in_stock'  => $product->is_in_stock(),
        'stock_qty' => $product->get_stock_quantity(),
        'permalink' => $product->get_permalink(),
    ];

    // تخزين مؤقت لمدة 10 دقائق فقط لتسريع التصفح مع الحفاظ على حداثة السعر
    set_transient( $cache_key, $card_data, 10 * MINUTE_IN_SECONDS );
}

$wrapper_attributes = get_block_wrapper_attributes( [
    'class' => 'az-dynamic-pricing-card-wrapper',
] );
?>

<aside <?php echo $wrapper_attributes; ?>>
    <div class="az-dynamic-card-header">
        <h4 class="az-product-title">
            <a href="<?php echo esc_url( $card_data['permalink'] ); ?>">
                <?php echo esc_html( $card_data['name'] ); ?>
            </a>
        </h4>
    </div>

    <div class="az-dynamic-card-body">
        <div class="az-price-tag">
            <?php echo wp_kses_post( $card_data['price_html'] ); ?>
        </div>

        <?php if ( $show_stock ) : ?>
            <div class="az-stock-status <?php echo $card_data['in_stock'] ? 'is-in-stock' : 'is-out-of-stock'; ?>">
                <?php if ( $card_data['in_stock'] ) : ?>
                    <span class="az-badge-available"><?php esc_html_e( 'متوفر في المخزن والشحن فوري', 'az-blocks' ); ?></span>
                <?php else : ?>
                    <span class="az-badge-unavailable"><?php esc_html_e( 'نفد من المخزن مؤقتاً', 'az-blocks' ); ?></span>
                <?php endif; ?>
            </div>
        <?php endif; ?>
    </div>

    <div class="az-dynamic-card-footer">
        <a href="<?php echo esc_url( $card_data['permalink'] ); ?>" class="az-btn-order">
            <?php esc_html_e( 'شراء الآن بالسعر المحدث', 'az-blocks' ); ?>
        </a>
    </div>
</aside>

دراسة حالة واقعية: أزمة متجر السوبر ماركت وتطبيق طلبات البقالة في القاهرة الكبرى

الوصايا العشر لاختيار المعمارية المناسبة بين البلوكات الثابتة والديناميكية

1. طبق قاعدة الشك: هل البيانات تتغير بمرور الوقت؟ لو الإجابة نعم (سعر، مخزون، عدد متابعين، أحدث منشورات)، اجعل البلوك ديناميكياً فوراً بلا تردد.
2. البلوك الثابت للمحتوى التحريري الصرف: المقالات، الاقتباسات، العناوين، وبلوكات التصميم الهيكلي البحت هي المرشح المثالي للبلوكات الثابتة لتوفير أداء فائق.
3. في البلوك الديناميكي: save() ترجع null دائماً: لا تضع وسوماً إضافية في الجافاسكريبت حتى لا تقع في فخ المقارنة العقيمة في محرر Gutenberg.
4. اعتمد على render.php بدلاً من render_callback: استخدام ملف منفصل في block.json أنظف معمارياً، يسهل اختبار الكود، ويفصل العرض عن منطق التسجيل.
5. لا تشغل استعلامات SQL ثقيلة بدون Transients: البلوك الديناميكي قد يُطلب ملايين المرات يومياً؛ خزّن نتائج العمليات الحسابية في كاش مؤقت دائماً.
6. اربط حذف الكاش بـ Hooks التحديث: عند تغيير البيانات المصدرية، احذف الـ Transient فوراً لضمان عدم ظهور بيانات قديمة للمستخدمين.
7. وفر معاينة حية في شاشة التحرير: لا تجعل المحرر يرى مربعاً أسود أو نصاً جافاً؛ استخدم getEntityRecord داخل edit.js ليشاهد البلوك كما سيظهر بالضبط.
8. اهرب من الـ Invalidation في الثابت بكتابة Deprecations: إذا اضطررت لتغيير بنية الـ HTML في بلوك ثابت منشور، اكتب قواعد الترحيل في مصفوفة deprecated فوراً.
9. استخدم esc_html و wp_kses دائماً في السيرفر: مجرد أن البلوك مبرمج بواسطة فريقك لا يعفيك من تعقيم كل متغير يُطبع داخل ملف render.php.
10. وثق قرارك المعماري في الـ Readme: اذكر سبب اختيار النمط الثابت أو الديناميكي في توثيق المشروع ليفهم زملاؤك في الفريق الفلسفة وراء المعمارية.