شرح Block Supports: أدوات تصميم متوافقة مع المحرر والثيم

أهلاً بيك يا صديقي المطور في المحطة اللي هتحررك للأبد من كتابة مئات أسطر الـ CSS والـ React المعقدة عشان تعمل شوية ألوان وهوامش للبلوك بتاعك: Block Supports API.

زمان أول ما جوتنبرج ظهر، كنا بنشوف كوارث معمارية في الكود: المطور يعمل بلوك بسيط جداً (وليكن كارت تنبيه Alert Box)، ويقضي 3 أيام يكتب في ملف edit.js كومبوننتات ColorPicker، و FontSizePicker، و RangeControl عشان يعمل Padding و Margin، ويقعد يخزن 10 خصائص مختلفة في attributes، وفي الآخر التصميم يطلع شاذ تماماً عن باقي ألوان وهوية الموقع، والمستخدم يختار لون غير متناسق يبوظ شغل مصمم الـ UI/UX بالكامل!

فريق ووردبريس فكر بأسلوب هندسي عبقري وقال: “ليه كل مطور يخترع العجلة من الصفر؟ إحنا هنعمل نظام مركزي تصريحي (Declarative Design Engine)؛ المطور يكتب سطرين اتنين في ملف block.json يقول فيهم: أنا بدعم الألوان والهوامش والخطوط، والنواة هي اللي هتتولى إظهار أدوات التصميم في شريط الـ Inspector، وتطبيق فئات الـ CSS الموحدة، وتوليد الـ Inline Styles، وربط البلوك تلقائياً بنظام الثيم المركزي theme.json“! في الدليل ده، هنشرح إزاي تستغل Block Supports لأقصى درجة، إزاي تستغني عن الأكواد الزائدة، وهندرس تجربة حقيقية لوكالة برمجيات مصرية بالعامية المصرية التقنية الأصيلة.

المعيار المعماري	نظام Block Supports المدمج	بناء أدوات تحكم يدوية (Custom Inspector)	فئات الـ Utility Classes الخارجية (Tailwind)	الأنماط المضمنة اليدوية (Inline Styles)
طريقة الإعلان والتفعيل	تصريحي بالكامل (Declarative) عبر مفتاح `supports` في `block.json`.	إجرائي (Imperative) بكتابة مكونات React و Hooks وحفظ Attributes مخصصة.	تتطلب كتابة حقول إدخال نصوص أو كلاسات يدوية من قبل الكاتب.	حساب قيم CSS وتمريرها في خاصية `style={{}}` يدوياً.
التكامل مع theme.json	تكامل أصلي ومثالي؛ يرث لوحة الألوان وأحجام الخطوط وهوامش الموقع تلقائياً.	منعدم؛ يتطلب كتابة كود مخصص لجلب إعدادات الثيم عبر `useSetting`.	منفصل تماماً عن نظام قوالب ووردبريس الحديثة (FSE).	يتجاوز إعدادات الثيم بالقوة ويكسر التناسق البصري للموقع.
حجم كود الـ JavaScript المكتوب	صفر أسطر كود في ملفات الـ JS لتوليد لوحات التحكم!	مئات الأسطر لكل بلوك لإدارة الحالة وحفظ الخصائص ومعالجة الألوان.	أسطر متعددة لإدارة قوائم الفئات والتبديل بينها.	متوسط لإجراء العمليات الحسابية والتحقق من القيم المدخلة.
توليد كود الـ HTML والـ CSS	ووردبريس يولد فئات قياسية (مثل `has-primary-background-color`) ومتغيرات CSS.	المطور مسؤول عن كتابة وتحديث الـ CSS والـ Classes يدوياً في كل مكان.	يولد سلاسل طويلة جداً من الفئات تزيد من حجم كود المقال.	يحقن نصوص CSS مباشرة داخل وسم العنصر في قاعدة البيانات.
الصيانة المستقبلية وتحديث الهوية	تعديل ملف `theme.json` يغير ألوان وهوامش كل البلوكات بالموقع فورياً.	كابوس؛ يتطلب فتح كل بلوك وتعديل كود الـ React وإعادة نشر الإضافة.	يتطلب تعديل ملفات الإعدادات وإعادة بناء الأصول المجمعة (Bundles).	شبه مستحيلة بدون تشغيل سكربتات بحث واستبدال معقدة في قاعدة البيانات.

المعمارية الشاملة لعائلة Block Supports: ما الذي يمكنك تفعيله؟

مفتاح supports داخل block.json مش مجرد خيار واحد؛ ده نظام تصنيف هندسي واسع بيغطي كافة جوانب التصميم العصري في الويب. تعال نتعرف على الفروع الرئيسية:

1. دعم الألوان (Color Supports):

{
  "supports": {
    "color": {
      "background": true,
      "text": true,
      "link": true,
      "gradients": true,
      "heading": true,
      "button": true
    }
  }
}

بمجرد تفعيل الكائن ده، محرر جوتنبرج بيفتح تبويب الألوان تلقائياً في الشريط الجانبي للبلوك، مع استخدام لوحة الألوان المعتمدة في الثيم (Theme Palette). لما المستخدم يختار لون خلفية “primary”، ووردبريس بيضيف كلاس has-primary-background-color و has-background على الغلاف الخارجي للبلوك تلقائياً!

2. دعم الخطوط والطباعة (Typography Supports):

{
  "supports": {
    "typography": {
      "fontSize": true,
      "lineHeight": true,
      "fontFamily": true,
      "fontWeight": true,
      "fontStyle": true,
      "textTransform": true,
      "textDecoration": true,
      "letterSpacing": true
    }
  }
}

هنا أنت بتمنح الكاتب حرية التحكم في حجم الخط (بناءً على أحجام الثيم الرسمية مثل Small, Medium, Large) مع إمكانية ضبط تباعد الأحرف وارتفاع السطر، دون كتابة سطر كود واحد!

3. دعم المسافات والأبعاد (Spacing & Dimensions):

{
  "supports": {
    "spacing": {
      "margin": [ "top", "bottom" ],
      "padding": true,
      "blockGap": true
    },
    "dimensions": {
      "minHeight": true,
      "aspectRatio": true
    }
  }
}

لاحظ التخصيص الدقيق هنا: يمكنك تمرير true للسماح بالهوامش من كل الجهات، أو تمرير مصفوفة مثل [ "top", "bottom" ] لو كنت تريد منع المحرر من العبث بالهوامش الجانبية لحماية محاذاة النص الشبكية! وخاصية blockGap تتولى التحكم في الفراغ بين الأبناء المتداخلين عند استخدام Flex/Grid.

4. دعم الحدود والإطارات (Border Supports):

{
  "supports": {
    "border": {
      "color": true,
      "radius": true,
      "style": true,
      "width": true
    }
  }
}

5. دعم تخطيط العناصر (Layout Supports):

{
  "supports": {
    "layout": {
      "allowSwitching": true,
      "allowInheriting": true,
      "default": {
        "type": "flex",
        "flexWrap": "wrap"
      }
    }
  }
}

مخصص للبلوكات الحاوية (Containers) لتحويل الأبناء لشبكة مرنة (Flexbox) أو شبكة أعمدة (CSS Grid) مع دعم محاذاة المحتوى وتبرير العناصر رأسياً وأفقياً بسلاسة.

تطبيق عملي كامل: بناء بلوك إشعار بنكي متقدم (Enterprise Alert Banner)

تعال نبني مع بعض بلوك إشعار وتنبيهات مصرفية (enterprise/alert-banner) يستفيد بالكامل من Block Supports API، بدون أي كومبوننت ألوان يدوي، مع توافق كامل بين المتصفح والسيرفر وملف theme.json.

1. ملف block.json المنضبط معمارياً

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "enterprise/alert-banner",
  "version": "1.0.0",
  "title": "شريط الإشعارات والتنبيهات المصرفية",
  "category": "widgets",
  "icon": "warning",
  "description": "بلوك رسمي للإعلانات الهامة يعتمد بنسبة 100% على Block Supports القياسية.",
  "supports": {
    "html": false,
    "anchor": true,
    "customClassName": true,
    "align": [ "wide", "full" ],
    "color": {
      "background": true,
      "text": true,
      "link": true,
      "gradients": true
    },
    "typography": {
      "fontSize": true,
      "lineHeight": true,
      "fontFamily": true
    },
    "spacing": {
      "padding": true,
      "margin": [ "top", "bottom" ]
    },
    "border": {
      "color": true,
      "radius": true,
      "style": true,
      "width": true
    }
  },
  "attributes": {
    "message": {
      "type": "string",
      "default": "تنبيه أمني: لن يطلب البنك كلمة المرور السرية الخاصة بك مطلقاً."
    },
    "alertType": {
      "type": "string",
      "default": "info"
    }
  },
  "render": "file:./render.php",
  "editorScript": "file:./index.js",
  "style": "file:./style-index.css"
}

2. كود التحرير: edit.js شديد النقاء والسرعة

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

export default function Edit( { attributes, setAttributes } ) {
    const { message, alertType } = attributes;

    // السحر الهندسي: useBlockProps يجمع كل تنسيقات الألوان والحدود والهوامش تلقائياً!
    const blockProps = useBlockProps( {
        className: `az-alert-banner az-type-${ alertType }`
    } );

    return (
        
            
                
                     setAttributes( { alertType: val } ) }
                        help={ __( 'يحدد الأيقونة الدلالية، بينما يمكنك تخصيص الألوان من تبويب الألوان المدمج أعلاه.', 'az-alert' ) }
                    />
                
            

            
                
                    
                
                
                     setAttributes( { message: val } ) }
                        placeholder={ __( 'اكتب نص التنبيه البنكي هنا...', 'az-alert' ) }
                    />

تأمل النقاء الهندسي في كود edit.js أعلاه: لا يوجد ColorPicker واحد، ولا يوجد BoxControl للهوامش، ولا يوجد قياسات خطوط! السطر البسيط useBlockProps(...) قام بسحب اختيارات المحرر وحولها لفئات CSS قياسية وأنماط مضمنة، وتم دمجها مباشرة على وسم <aside>!

`3. كود الحفظ في البلوكات الثابتة: save.js`


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

export default function save( { attributes } ) {
    const { message, alertType } = attributes;
    const blockProps = useBlockProps.save( {
        className: `az-alert-banner az-type-${ alertType }`
    } );

    return (
        
            
                
            
            
                
            
        
    );
}
4. كود العرض السيرفري في البلوكات الديناميكية: render.php
<?php
/**
 * ملف العرض السيرفري لبلوك التنبيه البنكي
 *
 * @var array    $attributes خصائص البلوك
 * @var string   $content    المحتوى الداخلي
 * @var WP_Block $block      كائن البلوك
 */

$alert_type = isset( $attributes['alertType'] ) ? sanitize_html_class( $attributes['alertType'] ) : 'info';
$message    = isset( $attributes['message'] ) ? wp_kses_post( $attributes['message'] ) : '';

// get_block_wrapper_attributes تقوم بتوليد كافة كلاسات Block Supports وأنماط الـ Inline CSS بسلاسة
$wrapper_attributes = get_block_wrapper_attributes( [
    'class' => 'az-alert-banner az-type-' . $alert_type,
    'role'  => ( 'critical' === $alert_type ? 'alert' : 'status' ),
] );
?>

<aside <?php echo $wrapper_attributes; ?>>
    <div class="az-alert-icon-wrapper">
        <span class="dashicons dashicons-shield" aria-hidden="true"></span>
    </div>
    <div class="az-alert-content">
        <p class="az-alert-text"><?php echo $message; ?></p>
    </div>
</aside>
5. التخصيص المركزي للموقع عبر theme.json

الآن يأتي أعظم انتصار معماري لـ Block Supports: مصمم الموقع ومدير النظام يمكنه التحكم في المظهر الافتراضي لهذا البلوك في كامل صفحات الموقع بملف theme.json فقط، دون لمس سطر كود JavaScript واحد:
{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "styles": {
    "blocks": {
      "enterprise/alert-banner": {
        "color": {
          "background": "var(--wp--preset--color--luminous-vivid-amber)",
          "text": "var(--wp--preset--color--black)"
        },
        "spacing": {
          "padding": {
            "top": "1.5rem",
            "bottom": "1.5rem",
            "left": "2rem",
            "right": "2rem"
          },
          "margin": {
            "top": "2rem",
            "bottom": "2rem"
          }
        },
        "border": {
          "radius": "8px",
          "width": "2px",
          "style": "solid",
          "color": "var(--wp--preset--color--primary)"
        }
      }
    }
  }
}
دراسة حالة واقعية: كارثة وكالة المعادي البرمجية مع مواقع البنوك والاستثمار
خلفية المشروع وأبعاد الأزمة

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

المطور المسؤول عن البلوكات قرر بناء كل أدوات التصميم بشكل يدوي (Imperative Controls) داخل ملفات الـ JavaScript:
قام بكتابة ColorPalette مخصص في كل بلوك، وبنى حقول إدخال لأرقام الـ Margins والـ Font Sizes يدوياً داخل مصفوفة attributes بكل بلوك.
حجم ملف جافاسكريبت المحرر (editor.js) تضخم ليصل إلى 4.8 ميجابايت، مما تسبب في بطء وتجمد متصفحات فريق المحتوى أثناء العمل في المقالات الطويلة.
عندما قررت إدارة البنك تغيير هوية العلامة التجارية واللون الأخضر الرسمي (Rebranding)، اكتشف الفريق استحالة تغيير اللون عبر الثيم؛ لأن الألوان القديمة كانت مخزنة بأكواد HEX صلبة (Hardcoded Hexes) في قاعدة بيانات آلاف المقالات!
الموقع كان يفتقر تماماً لدعم الوضع الليلي (Dark Mode) وكان التصميم ينهار عند محاولة تطبيق تباين ألوان منخفض التباين في شاشات الموبايل.
الحل المعماري الجذري (The Architectural Solution)

تم تعيين مهندس برمجيات ووردبريس أول لإعادة هيكلة المنظومة من جذورها:
حذف كافة مكونات الألوان والهوامش اليدوية من ملفات edit.js، وتفعيل مفتاح Block Supports القياسي في ملفات block.json لجميع البلوكات الـ 18.
ربط البلوكات بنظام theme.json المركزي؛ بحيث يتم تطبيق لوحة ألوان البنك الرسمية كمتغيرات CSS قياسية (var(--wp--preset--color--...)).
استخدام get_block_wrapper_attributes() في السيرفر لضمان أن أي تغيير في إعدادات الثيم أو تفعيل الوضع الليلي ينعكس فورياً في نفس اللحظة على آلاف المقالات القديمة والحديثة تلقائياً.
كتابة مصفوفة ترحيل deprecated لتنظيف المقالات القديمة من الـ Attributes اليدوية الزائدة وتخفيف حمل قاعدة البيانات.
جدول قياس مؤشرات الأداء والتحول الهندسي (Metrics Table)
مؤشر الأداء والبرمجة أثناء الأزمة (التحكم اليدوي المخصص) بعد التحول إلى Block Supports نسبة التحسن والوفر المحقق
حجم حزمة الجافاسكريبت في المحرر (Bundle Size) 4.8 ميجابايت (ثقيل ومسبب للتجمد) 1.4 ميجابايت فقط (تخفيف جذري) تقليص حجم الكود بنسبة 70.8%
زمن استجابة الكتابة في المحرر (Input Latency) 180 مللي ثانية لكل ضغطة زر 16 مللي ثانية (60 إطار بالثانية) تسريع تجربة التحرير بـ 11 ضعفاً
زمن تطبيق الهوية الجديدة وتعديل الألوان 3 أسابيع من التعديل اليدوي في DB دقيقة واحدة بتعديل ملف theme.json وفر زمني فوري بنسبة 99.9%
التوافق مع الوضع الليلي (Dark Mode) غير متوافق ومحتوى مشوه وغير مقروء توافق تلقائي بنسبة 100% عبر CSS Vars حماية الامتثال لمعايير إمكانية الوصول A11y
الوصايا العشر لمعمارية Block Supports الاحترافية
ابدأ بـ Block Supports كخيارك الافتراضي: لا تفكر أبداً في برمجة لوحة ألوان أو منتقي خطوط يدوي إلا لو كانت لديك متطلبات وظيفية مستحيلة التحقيق بالنظام المدمج.
استخدم useBlockProps في التحرير و useBlockProps.save في الحفظ: هما الرابط السحري الذي ينقل إعدادات الـ Supports من الذاكرة إلى وسوم الـ HTML.
اطبع get_block_wrapper_attributes دائماً في السيرفر: في أي بلوك ديناميكي أو render.php، لا تكتب كلاسات الغلاف يدوياً بل دع الدالة تقوم بتجميعها.
حدد الهوامش المسموحة بمصفوفة صارمة: إذا كان التصميم يتطلب هوامش أفقية ثابتة، استخدم "margin": [ "top", "bottom" ] لمنع المحررين من تشويه المحاذاة.
اربط البلوك بـ theme.json دائماً: خصص المظهر الافتراضي للبلوك داخل ملف theme.json الخاص بالقالب لتوحيد الرؤية البصرية للموقع.
عطل html: false لحماية البنية: أضف "html": false في supports لمنع المستخدم من العبث بكود الـ HTML الداخلي وحذف فئات الدعم.
احذر من تضارب الـ CSS المخصص مع الفئات المولدة: لا تكتب في ملفات الـ SCSS قواعد تجبر الألوان بـ !important حتى لا تحجب خيارات المحرر.
استفد من layout supports للبلوكات الحاوية: استخدم "layout": { "default": { "type": "flex" } } لإدارة تخطيط الأبناء باحترافية عصرية.
اختبر تناسق التباين (Contrast Checking): تأكد من أن تركيبة ألوان النصوص والخلفيات التي يتيحها البلوك تلتزم بمعايير إمكانية الوصول WCAG AA.
وثق الخصائص المدعومة لفريق التحرير: وضح للمحررين في دليل استخدام الموقع كيفية استخدام تبويبات التصميم في الشريط الجانبي بدلاً من استخدام كلاسات CSS عشوائية.
المعمارية المتقدمة: توجيه التنسيقات للعناصر الفرعية عبر Selectors API

يا صديقي المطور، من أكثر الأسئلة المعمارية المتقدمة التي يطرحها كبار مهندسي Gutenberg: "لو أنا عندي بلوك مركب بيتكون من غلاف خارجي (Card Wrapper) وبداخله زرار أكشن (Action Button) وعنوان رئيسي (Header)؛ لما المحرر يختار لون النص أو لون الخلفية في Block Supports، إزاي أخلي لون الخلفية يروح للغلاف، بس لون النص يروح حصرياً للعنوان أو للزرار الداخلي؟"

في الإصدارات الأولى من Gutenberg، كان ووردبريس يطبق كل شيء على الغلاف الخارجي فقط. ولكن في الإصدارات الحديثة (ووردبريس 6.3 فما فوق)، قدمت النواة ما يسمى بـ Block Supports Selectors API!
كود عملي: توجيه الألوان والخطوط عبر كائن selectors في block.json
{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "name": "enterprise/compound-banner",
  "supports": {
    "color": {
      "text": true,
      "background": true
    },
    "typography": {
      "fontSize": true
    }
  },
  "selectors": {
    "root": ".az-compound-banner",
    "color": {
      "text": ".az-compound-banner .az-banner-title",
      "background": ".az-compound-banner"
    },
    "typography": {
      "root": ".az-compound-banner .az-banner-title"
    }
  }
}

شرح السحر المعماري لكائن selectors:
selectors.color.text: يخبر محرك ووردبريس المركزي: "عندما يختار المحرر لون نص، لا تطبق كلاس اللون على الغلاف، بل ولد قاعدة CSS تستهدف فئة .az-banner-title الداخلية مباشرة!".
selectors.color.background: يوجه لون الخلفية ليطبق على الغلاف الخارجي الرئيسي.
selectors.typography.root: يضمن أن خيارات حجم الخط وتباعد الأسطر تطبق حصرياً على العنوان دون تشويه نصوص الأزرار أو التفاصيل الثانوية.
محرك متغيرات الـ CSS: كيف يولد ووردبريس أكواد الأنماط المركزية؟

عندما يختار المستخدم لوناً مخصصاً أو حجم خط من خيارات Block Supports، لا يقوم ووردبريس بحشو قاعدة البيانات بأسماء الخصائص مجردة؛ بل يمتلك محركاً مركزياً لتوليد الـ CSS يسمى WP_Theme_JSON_Processor.

هذا المحرك يتبع نمط التصميم المعتمد على CSS Custom Properties:
إذا اختار المستخدم لوناً مسجلاً في الثيم، يولد كلاس مثل: has-vivid-cyan-blue-color، وفي ملف الـ CSS المركزي للثيم تكون هناك قاعدة:
.has-vivid-cyan-blue-color { color: var(--wp--preset--color--vivid-cyan-blue) !important; }.
إذا اختار المستخدم لوناً حراً مخصصاً من عجلة الألوان (Custom Color Hex)، يقوم ووردبريس بحقن نمط مضمن دقيق: style="color: #ff5722;" عبر دالة useBlockProps أو get_block_wrapper_attributes().

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

عندما تعمل في بيئة مؤسسية (Enterprise Environment) تضم عشرات المطورين، يجب وضع ميثاق كودي (Code Standards Guideline) يمنع كتابة أي تنسيقات ألوان مباشرة داخل ملفات الـ SASS أو الـ CSS للبلوك. القاعدة الذهبية تنص على: "إذا كانت الخاصية يمكن التعبير عنها عبر Block Supports أو theme.json، فكتابتها كـ CSS صلب في ملفات الإضافة يُعتبر ديناً تقنياً (Technical Debt) يجب تصحيحه فوراً". هذا الانضباط هو ما يميز المنصات القابلة للتوسع والتكيف مع مختلف هوامش الشاشات وأنظمة التصميم الحديثة.
الأسئلة الشائعة حول Block Supports API في جوتنبرج (20 سؤالاً وجواباً تفصيلياً)
1. ما هو Block Supports API في ووردبريس؟
هو نظام تصريحي في نواة ووردبريس يسمح للمطور بإعلان دعمه لميزات التصميم (الألوان، الخطوط، الهوامش، والحدود) عبر ملف block.json لتقوم النواة بتوليد عناصر التحكم وفئات الـ CSS تلقائياً.
2. كيف أفعل دعم ألوان الخلفية والنص للبلوك؟
بإضافة "supports": { "color": { "background": true, "text": true } } داخل ملف block.json الخاص بالبلوك.
3. ما هي وظيفة دالة get_block_wrapper_attributes() في السيرفر؟
تقوم بتجميع كافة فئات الـ CSS وأنماط الـ Inline CSS الناتجة عن اختيارات المستخدم في Block Supports وطباعتها على وسم الغلاف الخارجي في ملف render.php.
4. لماذا يُعتبر بناء لوحة ألوان يدوية في InspectorControls ممارسة سيئة؟
لأنه يعيد اختراع العجلة، ويزيد حجم حزمة الجافاسكريبت، ويفصل البلوك عن نظام ألوان theme.json، ويجعل الصيانة المستقبلية كابوساً عند تغيير الهوية البصرية.
5. كيف أمنع المحرر من تعديل الهامش الأيمن والأيسر في البلوك؟
بتحديد اتجاهات الهوامش المسموحة في block.json بمصفوفة محددة: "spacing": { "margin": [ "top", "bottom" ] }.
6. كيف تؤثر Block Supports على كود المقال في قاعدة البيانات؟
تضيف فئات CSS قياسية (مثل has-primary-color) أو قيماً لمتغيرات الأنماط في تعليق البلوك أو على وسم الغلاف الخارجي بطريقة معيارية موحدة.
7. هل يدعم Block Supports إمكانية تدرج الألوان (Gradients)؟
نعم، بإضافة "gradients": true داخل كائن color في إعدادات supports في block.json.
8. ما هو دور خاصية "html": false في Block Supports؟
تمنع ظهور خيار "Edit as HTML" في قائمة خيارات البلوك في المحرر، لحماية بنية البلوك وكلاسات الدعم من التلف العفوي بواسطة الكاتب.
9. كيف أحدد قيماً افتراضية لـ Block Supports في القالب؟
عبر ملف theme.json داخل مسار styles.blocks["vendor/block-name"] حيث يمكنك تعيين ألوان وهوامش افتراضية تطبق على كافة المقالات.
10. هل تعمل ميزة blockGap مع البلوكات العادية؟
ميزة blockGap مخصصة للبلوكات الحاوية التي تحتوي على أبناء متداخلين (InnerBlocks) للتحكم في المسافات البينية بين العناصر بنظام Flexbox و Grid.
11. كيف أضيف كلاس مخصص إلى وسم الغلاف مع الحفاظ على كلاسات Supports؟
بتمرير الكلاس داخل دالة useBlockProps( { className: 'my-custom-class' } ) في التحرير أو داخل get_block_wrapper_attributes( [ 'class' => 'my-class' ] ) في السيرفر.
12. هل يدعم Block Supports تدوير الزوايا (Border Radius)؟
نعم، عبر تفعيل "border": { "radius": true } في block.json.
13. ماذا يحدث لو قام المستخدم بتغيير لون البلوك ثم تم تغيير اسم اللون في الثيم؟
ووردبريس يولد فئات تعتمد على Slug اللون (مثل has-primary-color)؛ لذا طالما ظل الـ Slug ثابتاً في theme.json سيتحدث اللون تلقائياً في كافة المقالات.
14. هل يمكن إيقاف فئات المحاذاة العريضة (align wide and full) لبلوك معين؟
نعم، بضبط "align": false أو تحديد المحاذاة المقبولة فقط مثل "align": [ "left", "right" ].
15. كيف أتحقق من أن Block Supports تعمل بنجاح في بيئة الاختبارات الآلية؟
بفحص أن مخرجات useBlockProps() تحتوي على الفئات المتوقعة عند تمرير خصائص ألوان أو خطوط محددة في كائن الـ Attributes.
16. ما الفارق بين customClassName: true و customClassName: false؟
القيمة true تتيح للمحرر حقل "Additional CSS Class(es)" في تبويب المتقدم لإضافة كلاسات حرة، بينما false تخفي هذا الحقل لحماية التصميم.
17. هل تدعم Block Supports التحكم في تباعد الأسطر (Line Height)؟
نعم، بإضافة "lineHeight": true داخل كائن typography في block.json.
18. كيف أضمن دعم الوضع الليلي (Dark Mode) للبلوكات التي تستخدم Block Supports؟
بتعريف ألوان الثيم كمتغيرات CSS في theme.json وتغيير قيم تلك المتغيرات في استعلامات الوسائط @media (prefers-color-scheme: dark).
19. هل يؤثر تفعيل كل ميزات Supports على أداء البلوك؟
النواة تقوم فقط بتحميل عناصر التحكم في التبويبات النشطة داخل الذاكرة؛ ومع ذلك يفضل دائماً تفعيل ما يحتاجه البلوك فعلياً فقط للحفاظ على واجهة تحرير بسيطة للمحررين.
20. ما هي القاعدة الذهبية لتطوير بلوكات ووردبريس عصرية متوافقة مع المستقبل؟
"اجعل Block Supports هي لسانك التصميمي، و theme.json هو عقل موقعك المركزي، و useBlockProps هو يدك التي تدمج الاثنين معاً بنقاء مطلق".
المراجع الرسمية والتوثيق المعتمد
WordPress Developer Handbook: Block Supports API Architecture
WordPress Developer Guide: Global Settings and Styles (theme.json)
WordPress Reference: get_block_wrapper_attributes Function
Gutenberg Core: Block Supports React Hooks Source Code on GitHub
Make WordPress Core Architecture: Evolution of Block Supports

4. كود العرض السيرفري في البلوكات الديناميكية: render.php

5. التخصيص المركزي للموقع عبر theme.json

دراسة حالة واقعية: كارثة وكالة المعادي البرمجية مع مواقع البنوك والاستثمار

خلفية المشروع وأبعاد الأزمة

الأزمة التشخيصية (The Crisis)

الحل المعماري الجذري (The Architectural Solution)

جدول قياس مؤشرات الأداء والتحول الهندسي (Metrics Table)

الوصايا العشر لمعمارية Block Supports الاحترافية

المعمارية المتقدمة: توجيه التنسيقات للعناصر الفرعية عبر Selectors API

كود عملي: توجيه الألوان والخطوط عبر كائن selectors في block.json

محرك متغيرات الـ CSS: كيف يولد ووردبريس أكواد الأنماط المركزية؟

قواعد التسمية والمعايير القياسية لفرق التطوير الكبرى

الأسئلة الشائعة حول Block Supports API في جوتنبرج (20 سؤالاً وجواباً تفصيلياً)

1. ما هو Block Supports API في ووردبريس؟

2. كيف أفعل دعم ألوان الخلفية والنص للبلوك؟

3. ما هي وظيفة دالة `get_block_wrapper_attributes()` في السيرفر؟

4. لماذا يُعتبر بناء لوحة ألوان يدوية في InspectorControls ممارسة سيئة؟

5. كيف أمنع المحرر من تعديل الهامش الأيمن والأيسر في البلوك؟

6. كيف تؤثر Block Supports على كود المقال في قاعدة البيانات؟

7. هل يدعم Block Supports إمكانية تدرج الألوان (Gradients)؟

8. ما هو دور خاصية `"html": false` في Block Supports؟

9. كيف أحدد قيماً افتراضية لـ Block Supports في القالب؟

10. هل تعمل ميزة `blockGap` مع البلوكات العادية؟

11. كيف أضيف كلاس مخصص إلى وسم الغلاف مع الحفاظ على كلاسات Supports؟

12. هل يدعم Block Supports تدوير الزوايا (Border Radius)؟

13. ماذا يحدث لو قام المستخدم بتغيير لون البلوك ثم تم تغيير اسم اللون في الثيم؟

14. هل يمكن إيقاف فئات المحاذاة العريضة (align wide and full) لبلوك معين؟

15. كيف أتحقق من أن Block Supports تعمل بنجاح في بيئة الاختبارات الآلية؟

16. ما الفارق بين `customClassName: true` و `customClassName: false`؟

17. هل تدعم Block Supports التحكم في تباعد الأسطر (Line Height)؟

18. كيف أضمن دعم الوضع الليلي (Dark Mode) للبلوكات التي تستخدم Block Supports؟

19. هل يؤثر تفعيل كل ميزات Supports على أداء البلوك؟

20. ما هي القاعدة الذهبية لتطوير بلوكات ووردبريس عصرية متوافقة مع المستقبل؟

المراجع الرسمية والتوثيق المعتمد

`م. محمد أبو زيد`