ظل النص في ووردبريس 7.2: إعداد textShadow في theme.json

عايز عنوان بظل خفيف في محرر المكونات؟ لحد دلوقتي كان الحل سطر CSS مخصص أو إضافة تصميم. ووردبريس 7.2 بيحل ده من جوه المحرر نفسه.

الإصدار يضيف أداة ظل النص (Text Shadow) لمكوّني الفقرة والعنوان، مع قوالب جاهزة يديرها صاحب القالب ويختار منها المستخدم. هنا هتعرف إزاي تفعّلها لمكوناتك، وتعرّف ظلالك الخاصة، أو تقفلها تمامًا.

ملاحظة: ووردبريس 7.2 ما زال في مرحلة التجربة (Beta) وقت كتابة هذا المقال. جرّب الكود على نسخة تجريبية، لا على موقع حي.

ما الذي تغيّر بالضبط؟

ووردبريس 7.1 سمح بكتابة قيمة text-shadow تحت styles.typography في ملف theme.json، لكن بلا أي أداة في المحرر، وبلا قوالب جاهزة، ولا طريقة لوضع ظل على مكوّن واحد بعينه.

في 7.2 صار ظل النص يعمل بالطريقة نفسها التي تعمل بها أحجام الخطوط والظلال العادية:

• صاحب القالب يعرّف قوالب جاهزة (Presets) في theme.json.
• المستخدم يعدّلها أو يضيف غيرها من الأنماط العامة (Global Styles).
• أي مكوّن يعلن دعمه للميزة تظهر له أداة في لوحة Typography.

المكوّنان core/paragraph وcore/heading يدعمان الميزة افتراضيًا، وهما أول مكوّنات النواة التي تعتمدها.

كيف تضيف ظل النص لمكوّن خاص بك؟

لو تبني مكوّنًا مخصصًا، أضف الدعم في block.json تحت supports.typography:

{
    "supports": {
        "typography": {
            "textShadow": true
        }
    }
}

الأداة لا تظهر افتراضيًا في لوحة الإعدادات، بل يكشفها المستخدم من قائمة الخيارات في لوحة Typography. لو تريدها ظاهرة مباشرة، أضف __experimentalDefaultControls:

{
    "supports": {
        "typography": {
            "textShadow": true,
            "__experimentalDefaultControls": {
                "textShadow": true
            }
        }
    }
}

تنبيه: البادئة __experimental تعني أن الخاصية قد يتغير اسمها أو سلوكها في إصدار لاحق. استخدمها وأنت مستعد لمراجعة الكود عند كل تحديث كبير.

عند اختيار ظل لمكوّن، يُحفظ معرّف القالب في الخاصية textShadow ويُطبَّق كـ class في HTML:

<!-- wp:paragraph {"textShadow":"strong"} -->
<p class="has-strong-text-shadow">Hello World</p>
<!-- /wp:paragraph -->

كيف تعرّف قوالب ظل خاصة بقالبك؟

ووردبريس يأتي بقالبين افتراضيين: Light وStrong، ويمكن تعديلهما من Global Styles عبر Typography > Text shadow presets.

لتضيف قوالبك أنت، استخدم settings.typography.textShadowPresets في theme.json. كل قالب يحتاج name وslug وقيمة textShadow:

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "settings": {
        "typography": {
            "textShadowPresets": [
                {
                    "name": "Soft",
                    "slug": "soft",
                    "textShadow": "1px 1px 2px rgba(0, 0, 0, 0.3)"
                },
                {
                    "name": "Glow",
                    "slug": "glow",
                    "textShadow": "0 0 8px rgba(255, 215, 0, 0.8)"
                }
            ]
        }
    }
}

كل قالب يُنتج متغير CSS باسم --wp--preset--text-shadow--{slug} وclass باسم .has-{slug}-text-shadow، فتستطيع استخدامه في CSS خارج المحرر أيضًا.

ثلاث تفاصيل تهمك وأنت تصمم:

• قوالبك تظهر بجانب القالبين الافتراضيين، لا بدلًا منهما.
• لو صار عدد القوالب 7 أو أكثر، تتحول الأداة من قائمة ظاهرة إلى قائمة منسدلة مختصرة.
• الخاصية styles.typography.textShadow التي جاءت في 7.1 تقبل الآن مرجعًا لقالب، مثل var:preset|text-shadow|light.

ترتيب الأولوية

القيمة على المكوّن نفسه تغلب قيمة Global Styles، وقيمة Global Styles تغلب الافتراضي في القالب. هذا الترتيب نفسه المتبع في باقي خيارات الخطوط، فلن تفاجئك نتيجة غير متوقعة.

ظل النص مع الخطوط العربية

الحروف العربية فيها نقاط وتشكيل وخطوط رفيعة، والظل الكبير ينشر حولها ضبابًا يقلل وضوحها، خصوصًا في الفقرات وعلى شاشات الموبايل. اجعل نصف قطر التمويه (Blur) صغيرًا، واحتفظ بالظل الواضح للعناوين الكبيرة فقط.

ملاحظة: إزاحة text-shadow الأفقية فيزيائية لا منطقية. القيمة الموجبة تحرك الظل لليمين حتى في موقع RTL، فلو تريد الظل في اتجاه القراءة العربية، استخدم قيمة سالبة.

كيف تعطّل الميزة؟

لإخفاء القالبين الافتراضيين فقط، اجعل defaultTextShadowPresets بقيمة false. ولإلغاء الميزة كلها من المحرر، أضف أيضًا textShadow بقيمة false:

{
    "version": 3,
    "settings": {
        "typography": {
            "textShadow": false,
            "defaultTextShadowPresets": false
        }
    }
}

هذا مفيد لو تسلّم موقعًا لعميل وتريد أن يبقى التصميم موحّدًا، دون أن يضيف ظلالًا عشوائية على كل عنوان.

في Elementor: لو موقعك مبني بـ Elementor، فظل النص متاح عندك من قبل في تبويب Style لعناصر مثل Heading، ولن يغيّر هذا التحديث شيئًا في صفحاتك. الميزة الجديدة تخص محرر المكونات (Gutenberg) والقوالب المبنية على theme.json، مثل صفحات المقالات التي تكتبها في المحرر الافتراضي.

الأسئلة الشائعة

س: هل يعمل ظل النص على كل المكوّنات في ووردبريس 7.2؟
ج: لا. الفقرة والعنوان فقط يدعمانه افتراضيًا، وأي مكوّن آخر يحتاج إعلان الدعم في block.json.

س: لماذا لا أرى أداة ظل النص في لوحة Typography؟
ج: لأنها مخفية افتراضيًا. افتح قائمة الخيارات في لوحة Typography وفعّلها، أو تأكد أن القالب لم يعطّلها بـ "textShadow": false.

س: هل أحتاج لتحديث القالب لاستخدام الميزة؟
ج: لا، القالبان Light وStrong متاحان مع ووردبريس نفسه. تحديث theme.json مطلوب فقط لو تريد قوالب ظل خاصة بك أو تريد تعطيل الميزة.

س: هل تؤثر الميزة على مواقع Elementor؟
ج: لا، Elementor يدير تنسيق عناصره بنفسه. التغيير يظهر في محرر المكونات وقوالب الكتل فقط.

الخلاصة

ظل النص في 7.2 بقى جزء من نظام الـ Presets، زي أحجام الخطوط بالظبط: القالب يعرّف، والمستخدم يختار، والكود ينضف. لو بتبني قوالب كتل لعملاء، جهّز قالبين أو تلاتة بظلال هادية تناسب الخط العربي، أو اقفل الميزة خالص لو التصميم ثابت.

مراجع إضافية: Text Shadow Support in Global Styles — Make WordPress Core

مرجع المقال (بالإنجليزية): New Block Support in WordPress 7.2: Text Shadow (textShadow)
المقال ده مش ترجمة حرفية: متكيّف للقارئ العربي ومضاف عليه سياق ووردبريس وElementor وJetEngine.