طريقة عرض جدول Grid.js في save.js لكتلة Gutenberg في ووردبريس

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

مقدمة عن Grid.js وجوتنبرغ

Grid.js هو مكتبة JavaScript مفتوحة المصدر توفر أداة قوية لإنشاء جداول بيانات تفاعلية. يتيح للمطورين إنشاء جداول جميلة وسهلة الاستخدام، مما يعزز تجربة المستخدم بشكل كبير. من جهة أخرى، جوتنبرغ هو المحرر الجديد لووردبريس، الذي يعتمد على الكتل (Blocks) لإنشاء المحتوى بشكل مرن وسهل.

إعداد بيئة العمل

قبل البدء في التنفيذ، يجب التأكد من أنك قد قمت بإنشاء كتلة جوتنبرغ باستخدام JavaScript وReact. يجب أن تحتوي الكتلة على ملفي edit.js وsave.js. بينما يتم تكوين الجدول في ملف edit.js، فإن هدفنا هو عرض نفس الجدول في ملف save.js.

إضافة Grid.js في ملف save.js

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

function enqueue_gridjs() {
   wp_enqueue_script('gridjs', 'https://unpkg.com/gridjs/dist/gridjs.umd.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_gridjs');

بعد التأكد من تحميل المكتبة، يمكنك الآن استخدام Grid.js لإنشاء الجدول في ملف save.js. ستحتاج إلى كتابة الكود المناسب لطريقة عرض البيانات. مثلاً، يمكنك استخدام الكود التالي:

const { registerBlockType } = wp.blocks;
const { Fragment } = wp.element;
registerBlockType('my-plugin/my-table', {
    save: () => {
        return (
            <Fragment>
                <div id="my-table"></div>
                <script>
                    new gridjs.Grid({
                        columns: ["اسم", "عمر", "مدينة"],
                        data: [
                            ["علي", 25, "القاهرة"],
                            ["سارة", 30, "الإسكندرية"],
                            ["محمد", 28, "الجيزة"],
                        ],
                        pagination: {
                            enabled: true,
                            limit: 5,
                        },
                    }).render(document.getElementById("my-table"));
                </script>
            </Fragment>
        );
    }
});

هنا، نحن ننشئ جدولاً جديداً باستخدام Grid.js ونقوم بعرضه داخل عنصر HTML يُعرف ب"id=my-table".

اختبار الجدول على الواجهة الأمامية

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

الاستفادة من Grid.js

استخدام Grid.js في مشاريع ووردبريس يوفر لك مجموعة لا حصر لها من الفوائد. ليس فقط أنه يسهل إنشاء الجداول، بل يتيح لك تحسين تجربة المستخدم عن طريق تقديم معلومات منظمة وسهلة الفهم.

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