שמירת הגדרות עבור בלוק וורדפרס מותאם אישית בעורך החסימה

השגנו המון דברים בסדרה הזו! יצרנו בלוק וורדפרס מותאם אישית שמביא נתונים מ-API חיצוני ומציג אותם בחזית הקצה. לאחר מכן לקחנו את העבודה הזו והרחבנו אותה כך שהנתונים יוצגו גם ישירות בעורך הבלוק של וורדפרס. לאחר מכן, יצרנו ממשק משתמש הגדרות לבלוק באמצעות רכיבים מהוורדפרס InspectorControls חבילה.

יש לנו עוד קצת לכסות וזה שמירת אפשרויות ההגדרות. אם אנו זוכרים מהמאמר האחרון, אנו מסוגלים מבחינה טכנית "לשמור" את הבחירות שלנו בממשק המשתמש של הגדרות הבלוק, אך אלה למעשה לא מאוחסנות בשום מקום. אם נעשה כמה בחירות, נשמור אותן, ואז נחזור לפוסט, ההגדרות מאופסות לחלוטין.

בואו נסגור את הלולאה ונשמור את ההגדרות האלו כך שימשיכו בפעם הבאה שנערוך פוסט שמכיל את הבלוק המותאם אישית שלנו!

שמירת תכונות הגדרות

אנחנו עובדים עם API שמספק לנו כדורגל דירוג קבוצת הכדורגל ואנחנו משתמשים בו כדי להביא להצגת דירוגים על סמך מדינה, ליגה ועונה. אנו יכולים ליצור תכונות חדשות עבור כל אחד מאלה כך:

// 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 חזקים יותר כאשר ניתן להציג נתונים חיים מבלי לעדכן אותם באופן ידני בכל פעם. נבדוק את זה בפרק הבא של סדרה זו.