حفظ الإعدادات لقالب WordPress المخصص في محرر الكتل

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

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

دعنا نغلق الحلقة ونحفظ هذه الإعدادات حتى تستمر في المرة القادمة التي نقوم فيها بتحرير منشور يحتوي على الكتلة المخصصة لدينا!

حفظ سمات الإعدادات

نحن نعمل مع واجهة برمجة تطبيقات تزودنا بها كرة القدم تصنيف فريق كرة القدم ونستخدمه لجلبه لعرض التصنيفات بناءً على الدولة والدوري والموسم. يمكننا إنشاء سمات جديدة لكل من هؤلاء مثل هذا:

// index.js

attributes: {
  data: {
    type: "object",
  },
  settings: {
    type: "object",
    default: {
      country: {
        type: "string",
      },
      league: {
        type: "string",
      },
      season: {
        type: "string",
      },
    },
  },
},

بعد ذلك ، نحتاج إلى تعيين السمات من LeagueSettings.js. كلما أ ComboboxControl تم تحديثه في واجهة مستخدم الإعدادات الخاصة بنا ، فنحن بحاجة إلى تعيين السمات باستخدام ملف setAttributes() طريقة. كان هذا أكثر مباشرة عندما كنا نعمل مع نقطة نهاية واحدة للبيانات. ولكن الآن بعد أن أصبح لدينا العديد من المدخلات ، فقد أصبح الأمر أكثر انخراطًا.

هذه هي الطريقة التي سأقوم بتنظيمها. سأقوم بإنشاء كائن جديد في LeagueSettings.js التي تتبع هيكل سمات الإعدادات وقيمها.

// LeagueSettings.js

let localSettings = {
  country: attributes.settings.country,
  league: attributes.settings.league,
  season: attributes.settings.season,
};

سأقوم أيضًا بتغيير متغيرات الحالة الأولية من null إلى متغيرات الإعدادات المعنية.

// LeagueSettings.js

const [country, setCountry] = useState(attributes.settings.country);
const [league, setLeague] = useState(attributes.settings.league);
const [season, setSeason] = useState(attributes.settings.season);

في كل من handle______Change()، سأقوم بإنشاء ملف setLocalAttributes() التي لديها حجة أن استنساخ واستبدال السابق localSettings الاعتراض على قيم الدولة والدوري والموسم الجديدة. يتم ذلك باستخدام مساعدة عامل الانتشار.

// LeagueSettings.js

function handleCountryChange(value) {
  // Initial code
  setLocalAttributes({ ...localSettings, country: value });
  // Rest of the code
}

function handleLeagueChange(value) {
  // Initial code
  setLocalAttributes({ ...localSettings, league: value });
  // Rest of the code
}

function handleSeasonChange(value) {
  // Initial code
  setLocalAttributes({ ...localSettings, season: value });
  // Rest of the code
}

يمكننا تحديد setLocalAttributes() مثله:

// LeagueSettings.js

function setLocalAttributes(value) {
  let newSettings = Object.assign(localSettings, value);
  localSettings = { ...newSettings };
  setAttributes({ settings: localSettings });
}

لذلك ، نحن نستخدم Object.assign() لدمج الكائنين. ثم يمكننا استنساخ ملف newSettings العودة إلى localSettings لأننا نحتاج أيضًا إلى حساب كل سمة من سمات الإعدادات عند إجراء تحديد جديد وحدث تغيير.

أخيرًا ، يمكننا استخدام setAttributes() كما نفعل عادة لتعيين الكائن النهائي. يمكنك تأكيد ما إذا كانت السمات المذكورة أعلاه تتغير عن طريق تحديث التحديدات في واجهة المستخدم.

هناك طريقة أخرى للتأكيد وهي إجراء console.log () في DevTools للعثور على السمات.

ننظر عن كثب في تلك لقطة الشاشة. يتم تخزين القيم في attributes.settings. يمكننا أن نرى ذلك يحدث على الهواء مباشرة لأن React يعيد عرضه في كل مرة نجري فيها تغييرًا في الإعدادات ، وذلك بفضل useState() صنارة صيد.

عرض القيم في واجهة مستخدم إعدادات الكتل

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

بدون تعقيد الإعدادات الحالية ، يمكننا إنشاء قسم آخر داخل لوحة الإعدادات يعرض السمات الحالية. يمكنك اختيار طريقتك لعرض قيم الإعدادات لكنني سأقوم باستيراد ملف Tip عنصر من @wordpress/components صفقة:

// LeagueSettings.js
import { Tip } from "@wordpress/components";

أثناء وجودي هنا ، سأقوم بإجراء فحص شرطي للقيم قبل عرضها داخل ملف Tip مكون:

  {country && league && season && (
    
      
Current Settings: 
      

        

          Country: {attributes.settings.country}
        
        

          League: {attributes.settings.league}
        
        

          Season: {attributes.settings.season}
        
      
    
  )}

إليك كيف ينتهي الأمر بالعمل في محرر الكتلة:

تكون بيانات API أكثر قوة عندما يمكن عرض البيانات الحية دون الحاجة إلى تحديثها يدويًا في كل مرة. سننظر في ذلك في الدفعة التالية من هذه السلسلة.