تغيير وضع محرر جوتنبرغ بين التحرير والمعاينة برمجياً

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

فهم الأوضاع في محرر غوتنبرغ

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

تسجيل مستمع لتغيير الوضع

من أجل تنفيذ هذا التبديل بفعالية، يجب على المطورين تسجيل مستمع (Listener) ضمن نظام البيانات الخاص بـ WordPress. هذا المستمع سيتحكم في كيفية إصدار الأوامر لتغيير أوضاع الكتل عند تحديد كتلة جديدة. يشمل ذلك استعلام حول الكتلة المحددة حاليًا ومقارنة معرف الجدول الزمني الحالي بالمعرف السابق.

تنفيذ الوظيفة البرمجية

يمكن أن يبدأ المطور بتكوين وظيفة للقيام بذلك، على أن تحتوي هذه الوظيفة على منطق لمقارنة المعرفات. في حال كانت الكتلة المحددة هي نفسها الكتلة السابقة، يتم تعيين وضع "التحرير" للكتلة، بينما يتم تعيين وضع "المعاينة" للكتلة السابقة. هذا يسمح بتدفق مريح لتغيير الأوضاع.

إليكم كيف يمكن كتابة وظيفة بسيطة لتحقيق ذلك:

function makeListener() {
    let prevBlockId;
    return function updateBlockMode() {         
        const currentSelectedBlock = wp.data.select('core/block-editor').getSelectedBlock();
        const currentBlockId = (currentSelectedBlock) ? currentSelectedBlock.clientId : null;
        if (currentBlockId === prevBlockId) {
            wp.data.dispatch('core/block-editor').updateBlockAttributes(currentBlockId, { mode: 'edit' });
        } else {
            wp.data.dispatch('core/block-editor').updateBlockAttributes(prevBlockId, { mode: 'preview' });
        }       
        prevBlockId = currentBlockId;
    };
};
const unsubscribe = wp.data.subscribe(_.throttle((makeListener()), 200));

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

تجنب الحلقة اللانهائية

من المهم تجنب الدخول في حلقة لانهائية عند كتابة هذه الشيفرة. استخدام دالة "throttle" يساعد على تقليل عدد المرات التي يتم فيها استدعاء الوظيفة، مما يضمن أداءً مثاليًا دون التأثير السلبي على واجهة المستخدم.

توجهات المستقبل

على الرغم من أن الحل المقترح يمكن أن يكون فعالاً، إلا أن هناك دائمًا مساحة للتحسين. قد يكون من المفيد الاشتراك في المجتمعات والمناقشات المتعلقة بتطوير غوتنبرغ، حيث يمكن تبادل الأفكار والحلول. التفاعل مع المطورين الآخرين يمكن أن يوفر رؤى جديدة تساعد في تحسين الأكواد والأدوات.

الخلاصة

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