إضافة كتلة ACF مع عرض صورة المعاينة عند التحويم

في عالم تطوير المواقع الإلكترونية، تعتبر إضافة الكتل (Blocks) من الميزات المهمة التي تقدمها ووردبريس. تُستخدم هذه الكتل لتسهيل تخصيص المحتوى وترتيبه بشكل مرن ومتجاوب. إحدى الطرق الحديثة لإضافة الكتل هي استخدام ملف block.json، والذي يتيح لك عرض الصورة التوضيحية عند التمرير فوق أيقونات الإدراج. سنقوم في هذا المقال بمناقشة كيفية استخدام block.json لإضافة الكتل مع التركيز على كيفية عرض الصور عند التمرير عبر الأيقونات.

خطوات إعداد كتلة ACF باستخدام block.json

للبدء، يجب عليك تسجيل الكتل الخاصة بك بطريقة تتماشى مع أفضل الممارسات التي أوصت بها فرق دعم ACF. للقيام بذلك، يمكن إضافة الدالة التالية إلى ملف functions.php:

function register_acf_blocks() {
    register_block_type(__DIR__ . '/blocks/primary-thin-banner');
}
add_action('init', 'register_acf_blocks');

تتيح لك هذه الدالة تسجيل كتل ACF. بعد ذلك، يجب عليك نقل كل ملف php مرتبط بالنموذج إلى مجلدات مسماة بشكل فردي، ضمن مجلد يسمى BLOCKS. في كل مجلد، تحتاج إلى إنشاء ملف block.json يحتوي على تعريفات الكتلة.

مثال على ملف block.json

إليك تصميماً مثالياً لملف block.json:

{
    "name": "acf/primary-thin-banner",
    "title": "Primary Thin Banner",
    "description": "لإضافة بانر رفيع. يمكن استخدامه في أي صفحة.",
    "category": "formatting",
    "icon": "align-pull-left",
    "keywords": ["صفحة", "مقال", "أساسي", "رفيع", "بانر"],
    "acf": {
        "mode": "edit",
        "renderTemplate": "primary-thin-banner.php"
    },
    "supports": {
        "align": false,
        "anchor": true,
        "customClassName": false,
        "jsx": false,
        "multiple": true,
        "mode": true,
        "inserter": true
    },
    "example": {
        "attributes": {
            "title": "عنوان المثال",
            "description": "وصف نص المثال الذي يظهر في المعاينة.",
            "backgroundImage": "https://url-to-the-image.jpg"
        }
    }
}

يعرض هذا الملف تفاصيل الكتلة من اسمها، الوصف، الأيقونة، والسمات المدعومة. ضمن عنصر example، يمكن إدخال بيانات عينة تعرض بشكل صحيح عند التمرير.

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

إذا واجهت مشكلة في عدم عمل الصورة التوضيحية عند التمرير فوق أيقونات الإدراج بعد استخدام طريقة block.json، فإنه يجب التأكد من أن جميع العناصر قد تم تعريفها بشكل صحيح. يمكنك العودة إلى ملف block.json الخاص بك ومراجعة عنصر example لضمان احتوائه على جميع السمات المطلوبة مثل title وdescription وbackgroundImage.

إذا كانت الأمور لا تزال لا تعمل كما هو متوقع، فقد تحتاج إلى العودة إلى الوثائق الرسمية أو الاستعانة بالمنتديات المتخصصة للحصول على نصائح تفصيلية تتماشى مع المتطلبات الجديدة. ربما يتطلب الأمر إضافة تعريفات جديدة أو تغيير بعض القيم لإعادة إحياء وظيفة المعاينة.

خلاصة

في النهاية، يمكن أن تساعدك معرفة كيفية إعداد كتل ACF باستخدام ملف block.json على تحسين تجربتك في تطوير المحتوى في ووردبريس. تعتبر هذه الطريقة خيارًا ممتازًا من أجل تجهيز المكونات بشكل بسيط ومرن. ومع ذلك، تأكد دائماً من متابعة التحديثات الجديدة واتباع أفضل الممارسات لتجنب المشكلات وضمان تشغيل جميع الميزات بالشكل الأمثل.

بهذا، نكون قد استعرضنا كيفية إضافة كتل ACF باستخدام block.json مع التركيز على عرض صورة المعاينة عند التمرير. إذا كنت تبحث عن خيارات مرنة في تطوير المحتوى، فإن هذه الطريقة تعد من أفضل الحلول المتاحة.