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

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

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

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

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

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

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

ארכיטקטורת ה-API

לפני שאנחנו מתחברים למשהו, מומלץ למפות מה אנחנו צריכים מלכתחילה. מיפיתי את המבנה של נתוני RapidAPI שאנו מביאים כדי שנדע מה זמין עבורנו:

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

כדי להגיע לדירוג, אנחנו צריכים קודם כל להשיג את הליגות. וכדי להשיג את הליגות צריך קודם כל להשיג את המדינות ו/או את העונות. אתה יכול להציג את נקודות הקצה השונות בלוח המחוונים של RapidAPI.

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

• בחר מדינה
• בחר ליגה
• בחר עונה

לאחר מכן יהיה לנו כפתור כדי לשלוח את הבחירות הללו ולאחזר את הנתונים הרלוונטיים ולהעביר אותם לטבלת הדירוג.

טען ואחסן רשימה של מדינות

אנחנו לא יכולים לבחור לאיזו מדינה אנחנו רוצים נתונים אם אין לנו רשימה של מדינות לבחירה. אז, המשימה הראשונה שלנו היא לתפוס רשימה של מדינות מ-RapidAPI.

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

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

// edit.js
const [countriesList, setCountriesList] = useState(null);

useEffect(() => {
  let countryOptions = {
    method: "GET",
    headers: {
      "X-RapidAPI-Key": "Your Rapid API key",
      "X-RapidAPI-Host": "api-football-v1.p.rapidapi.com",
    },
  };
  fetch("https://api-football-v1.p.rapidapi.com/v3/countries", countryOptions)
    .then( (response) => response.json() )
    .then( (response) => {
      let countriesArray = { ...response };
      console.log("Countries list", countriesArray.response);
      setCountriesList(countriesArray.response);
    })
  .catch((err) => console.error(err));
}, []);

יש לנו משתנה מצב לאחסון רשימת המדינות. לאחר מכן, אנו הולכים לייבא רכיב מה- @wordpress/block-editor חבילה שנקראה InspectorControls שם נמצאים כל הרכיבים הדרושים לנו ליצירת פקדי ההגדרות שלנו.

import { InspectorControls } from "@wordpress/block-editor";

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

וברגע שהבחירות האלה נעשות בהגדרות הבלוק, אנחנו משתמשים בהן ב של הבלוק Edit פונקציה:

  { countriesList && (
    
  )}

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

אנחנו יכולים לייבא אותו לתוך edit.js קובץ כזה:

import { LeagueSettings } from "./components/LeagueSettings";

לאחר מכן, אנו מעבירים את האביזרים הנדרשים ל- LeagueSettings מרכיב מההורה Edit רכיב כדי שנוכל לגשת למשתני המצב ולתכונות מה- LeagueSettings מרכיב ילד. אנחנו יכולים לעשות זאת גם בשיטות אחרות כמו ה ממשק API בהקשר כדי להימנע מקידוחי אבזר, אבל מה שיש לנו כרגע מתאים לחלוטין למה שאנחנו עושים.

שאר החלקים של Edit ניתן להמיר פונקציה גם לרכיבים. לדוגמה, ניתן להכניס את קוד הדירוג של הליגה בתוך רכיב נפרד - כמו אולי LeagueTable.js - ולאחר מכן ייבא בדיוק כמו שייבאנו LeagueSettings אל Edit פונקציה.

בתוך LeagueSettings.js פילה

LeagueSettings הוא בדיוק כמו אחר רכיב תגובה שממנו נוכל לפרק את האביזרים ממרכיב האב. אני הולך להשתמש בשלושה משתני מצב ובנוסף leagueID המדינה כי אנחנו הולכים לחלץ את המזהה מה- league אובייקט:

const [country, setCountry] = useState(null);
const [league, setLeague] = useState(null);
const [season, setSeason] = useState(null);
const [leagueID, setLeagueID] = useState(null);

הדבר הראשון שאנחנו הולכים לעשות הוא לייבא את PanelBody רכיב מחבילת @wordpress/block-editor:

import { PanelBody } from "@wordpress/block-editor";

...וכללו אותו אצלנו return פוּנקצִיָה:

יש תגיות ותכונות אחרות של פאנל - זו רק העדפה אישית שלי להשתמש באלה. אף אחד מהאחרים לא נדרש... אבל להסתכל על כל הרכיבים יש לנו זמין ליצור פאנל הגדרות! אני אוהב את הפשטות של PanelBody למקרה השימוש שלנו. זה מתרחב ומתמוטט כדי לחשוף את ההגדרות הנפתחות של הבלוק וזהו.

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

הנה דוגמה כיצד א ComboboxControl יכול לעבוד עבור רשימת המדינות שלנו:

 handleCountryChange(value) }
  onInputChange={ (inputValue) => {
    setFilteredCountryOptions(
      setupCountrySelect.filter((option) =>
        option.label
          .toLowerCase()
          .startsWith(inputValue.toLowerCase())
      )
    );
  }}
/>

אל האני ComboboxControl ניתן להגדרה במובן שאנו יכולים להחיל גודל שונה עבור התווית והערכים של הפקד:

{
  value: 'small',
  label: 'Small',
},

אבל נתוני ה-API שלנו אינם בתחביר הזה, אז אנחנו יכולים להמיר את countriesList מערך שמגיע מהרכיב האב כאשר הבלוק כלול:

let setupCountrySelect;

setupCountrySelect = countriesList.map((country) => {
  return {
    label: country.name,
    value: country.name,
  };
});

כאשר נבחרת מדינה מתוך ComboboxControl, ערך המדינה משתנה ואנו מסננים את הנתונים בהתאם:

function handleCountryChange(value) {
  // Set state of the country 
  setCountry(value); 

  // League code from RapidAPI
  const options = {
    method: "GET",
    headers: {
      "X-RapidAPI-Key": "Your RapidAPI key",
      "X-RapidAPI-Host": "api-football-v1.p.rapidapi.com",
    },
  };

  fetch(`https://api-football-v1.p.rapidapi.com/v3/leagues?country=${value}`, options)
    .then((response) => response.json())
    .then((response) => {
      return response.response;
    })
    .then((leagueOptions) => {
      // Set state of the league variable
      setLeague(leagueOptions);

      // Convert it as we did for Country options
      setupLeagueSelect = leagueOptions.map((league) => {
        return {
          label: league.league.name,
          value: league.league.name,
        };
      });
      setFilteredLeagueOptions(setupLeagueSelect);
    })
  .catch((err) => console.error(err));
}

שים לב שאני משתמש בעוד שלושה משתני מצב כדי לטפל בשינויים כאשר בחירת המדינה משתנה:

const [filteredCountryOptions, setFilteredCountryOptions] = useState(setupCountrySelect);
const [filteredLeagueOptions, setFilteredLeagueOptions] = useState(null);
const [filteredSeasonOptions, setFilteredSeasonOptions] = useState(null);

מה לגבי אפשרויות ההגדרות האחרות?

אני אראה את הקוד שהשתמשתי בו עבור ההגדרות האחרות אבל כל מה שהוא עושה זה לקחת בחשבון מקרים רגילים תוך הגדרת שגיאות למקרים מיוחדים. לדוגמה, יהיו שגיאות בחלק מהמדינות והליגות בגלל:

• אין דירוגים עבור חלק מהליגות, ו
• לחלק מהליגות יש דירוג אבל הן לא נמצאות בטבלה אחת.

זה לא הדרכה של JavaScript או React, אז אני אתן לך לטפל במקרים המיוחדים של ה-API שבו אתה מתכנן להשתמש:

function handleLeagueChange(value) {
  setLeague(value);
  if (league) {
    const selectedLeague = league.filter((el) => {
      if (el.league.name === value) {
        return el;
      }
    });

    if (selectedLeague) {
      setLeague(selectedLeague[0].league.name);
      setLeagueID(selectedLeague[0].league.id);
      setupSeasonSelect = selectedLeague[0].seasons.map((season) => {
        return {
          label: season.year,
          value: season.year,
        };
      });
      setFilteredSeasonOptions(setupSeasonSelect);
    }
  } else {
    return;
  }
}

function handleSeasonChange(value) {
  setSeason(value);
}

שליחת בחירות ההגדרות

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

אז, חזרה פנימה LeagueSettings.js:

// When countriesList is loaded, show the country combo box
{ countriesList && (
   handleCountryChange(value)}
    onInputChange={(inputValue) => {
      setFilteredCountryOptions(
        setupCountrySelect.filter((option) =>
          option.label
            .toLowerCase()
            .startsWith(inputValue.toLowerCase())
        )
      );
    }}
  />
)}

// When filteredLeagueOptions is set through handleCountryChange, show league combobox
{ filteredLeagueOptions && (
   handleLeagueChange(value)}
    onInputChange={(inputValue) => {
      setFilteredLeagueOptions(
        setupLeagueSelect.filter((option) =>
          option.label
            .toLowerCase()
            .startsWith(inputValue.toLowerCase())
        )
      );
    }}
  />
)}

// When filteredSeasonOptions is set through handleLeagueChange, show season combobox
{ filteredSeasonOptions && (
  
     handleSeasonChange(value)}
      onInputChange={
          (inputValue) => {
            setFilteredSeasonOptions(
              setupSeasonSelect.filter((option) =>
              option.label
              .toLowerCase()
              .startsWith(inputValue.toLowerCase()
            )
          );
        }
      }
    />

    // When season is set through handleSeasonChange, show the "Fetch data" button
    {
      season && (
         getData()}>Fetch data
      )
    }
    
  
)}

הנה התוצאה!

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

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