Δημιουργία διεπαφής χρήστη ρυθμίσεων για προσαρμοσμένο μπλοκ WordPress

Μέχρι στιγμής, έχουμε καλύψει τον τρόπο εργασίας με δεδομένα από ένα εξωτερικό API σε ένα προσαρμοσμένο μπλοκ WordPress. Περπατήσαμε στη διαδικασία του λήψη αυτών των δεδομένων για χρήση στο μπροστινό μέρος ενός ιστότοπου WordPress και πώς να το κάνετε αποδώστε το απευθείας στο WordPress Block Editor κατά την τοποθέτηση του μπλοκ σε περιεχόμενο. Αυτή τη φορά, θα γεφυρώσουμε αυτά τα δύο άρθρα συνδέοντας τον πίνακα ελέγχου του προγράμματος επεξεργασίας μπλοκ για να δημιουργήσουμε μια διεπαφή χρήστη ρυθμίσεων για το μπλοκ που δημιουργήσαμε.

Γνωρίζετε τον πίνακα ελέγχου στον οποίο αναφέρομαι, σωστά; Είναι αυτό το πλαίσιο στα δεξιά που περιέχει τις ρυθμίσεις ανάρτησης και αποκλεισμού στο πρόγραμμα επεξεργασίας μπλοκ.

Βλέπετε αυτή την κόκκινη τονισμένη περιοχή; Αυτός είναι ο πίνακας ελέγχου. Αυτήν τη στιγμή είναι επιλεγμένο ένα μπλοκ παραγράφου και οι ρυθμίσεις για αυτό εμφανίζονται στον πίνακα. Μπορούμε να αλλάξουμε στυλ, χρώμα, τυπογραφία… πολλά πράγματα!

Λοιπόν, αυτό ακριβώς κάνουμε αυτή τη φορά. Θα δημιουργήσουμε τα στοιχεία ελέγχου για τις ρυθμίσεις του μπλοκ Βαθμολογίες ποδοσφαίρου που δουλέψαμε στα δύο τελευταία άρθρα. Την τελευταία φορά, φτιάξαμε ένα κουμπί στο μπλοκ μας που ανακτά τα εξωτερικά δεδομένα για την κατάταξη ποδοσφαίρου. Γνωρίζαμε ήδη τη διεύθυνση URL και τα τελικά σημεία που χρειαζόμασταν. Τι γίνεται όμως αν θέλουμε να πάρουμε κατάταξη για μια διαφορετική χώρα; Ή μήπως ένα διαφορετικό πρωτάθλημα; Τι θα λέγατε για δεδομένα από μια διαφορετική σεζόν;

Χρειαζόμαστε στοιχεία ελέγχου φόρμας για να το κάνουμε αυτό. Θα μπορούσαμε να χρησιμοποιήσουμε διαδραστικά στοιχεία React — όπως React-Select — για να περιηγηθείτε στις διάφορες επιλογές API που είναι διαθέσιμες για την ανάλυση αυτών των δεδομένων. Αλλά δεν χρειάζεται κάτι τέτοιο, καθώς το WordPress συνοδεύεται από ένα σωρό βασικά στοιχεία στα οποία συνδέουμε αμέσως!

Η τεκμηρίωση για αυτά τα εξαρτήματα — ονομάζεται InspectorControls — βελτιώνεται στο Εγχειρίδιο WordPress Block Editor. Αυτό θα γίνει ακόμα καλύτερο με την πάροδο του χρόνου, αλλά εν τω μεταξύ έχουμε και το WordPress Gutenberg Storybook και Στοιχεία WordPress Gutenberg ιστοσελίδες για πρόσθετη βοήθεια.

Η αρχιτεκτονική API

Πριν κολλήσουμε σε οτιδήποτε, είναι καλή ιδέα να χαρτογραφήσουμε τι είναι αυτό που χρειαζόμαστε αρχικά. Έχω χαρτογραφήσει τη δομή των δεδομένων RapidAPI που λαμβάνουμε, ώστε να γνωρίζουμε τι είναι διαθέσιμο σε εμάς:

Οι εποχές και οι χώρες είναι δύο τελικά σημεία ανώτατου επιπέδου που αντιστοιχίζονται σε ένα τελικό σημείο πρωταθλημάτων. Από εκεί, έχουμε τα υπόλοιπα δεδομένα που χρησιμοποιούμε ήδη για να συμπληρώσουμε τον πίνακα κατάταξης. Έτσι, αυτό που θέλουμε να κάνουμε είναι να δημιουργήσουμε ρυθμίσεις στον επεξεργαστή αποκλεισμού του WordPress που φιλτράρουν τα δεδομένα κατά σεζόν, χώρα και πρωτάθλημα και, στη συνέχεια, να μεταφέρουμε αυτά τα φιλτραρισμένα δεδομένα στον πίνακα κατάταξης. Αυτό μας δίνει τη δυνατότητα να απορρίψουμε το μπλοκ σε οποιαδήποτε σελίδα WordPress ή ανάρτηση και να εμφανίσουμε παραλλαγές των δεδομένων στο μπλοκ.

Για να πάρουμε τη βαθμολογία, πρέπει πρώτα να πάρουμε τα πρωταθλήματα. Και για να πάρουμε τα πρωταθλήματα, πρέπει πρώτα να πάρουμε τις χώρες ή/και τις εποχές. Μπορείτε να προβάλετε τα διάφορα τελικά σημεία στον πίνακα εργαλείων RapidAPI.

Υπάρχουν διάφοροι συνδυασμοί δεδομένων που μπορούμε να χρησιμοποιήσουμε για να συμπληρώσουμε τις κατατάξεις και μπορεί να έχετε μια προτίμηση για τα δεδομένα που θέλετε. Για χάρη αυτού του άρθρου, πρόκειται να δημιουργήσουμε τις ακόλουθες επιλογές στον πίνακα ρυθμίσεων μπλοκ:

• Διάλεξε χώρα
• Επιλέξτε League
• Επιλέξτε Εποχή

Στη συνέχεια, θα έχουμε ένα κουμπί για να υποβάλουμε αυτές τις επιλογές και να ανακτήσουμε τα σχετικά δεδομένα και να τα μεταφέρουμε στον πίνακα κατάταξης.

Φορτώστε και αποθηκεύστε μια λίστα χωρών

Δεν μπορούμε να επιλέξουμε για ποια χώρα θέλουμε δεδομένα εάν δεν έχουμε μια λίστα χωρών για να διαλέξουμε. Έτσι, το πρώτο μας καθήκον είναι να αποκτήσουμε μια λίστα χωρών από το RapidAPI.

Το ιδανικό είναι να ανακτήσετε τη λίστα των χωρών όταν ο αποκλεισμός χρησιμοποιείται πραγματικά στη σελίδα ή στο περιεχόμενο της ανάρτησης. Δεν χρειάζεται να φέρετε τίποτα εάν το μπλοκ δεν χρησιμοποιείται. Η προσέγγιση είναι πολύ παρόμοια με αυτή που κάναμε το πρώτο άρθρο, η διαφορά είναι ότι χρησιμοποιούμε διαφορετικό τελικό σημείο API και διαφορετικά χαρακτηριστικά για την αποθήκευση της λίστας των επιστρεφόμενων χωρών. Υπάρχουν άλλοι τρόποι για τη λήψη δεδομένων του WordPress, όπως π.χ 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 repo κάνει καλή δουλειά εξηγώντας InspectorControls. Στο παράδειγμά μας, μπορούμε να το χρησιμοποιήσουμε για να ελέγξουμε τις ρυθμίσεις δεδομένων API όπως Country, League και Season. Ακολουθεί μια προεπισκόπηση για να έχετε μια ιδέα για τη διεπαφή χρήστη που φτιάχνουμε:

Και μόλις γίνουν αυτές οι επιλογές στις ρυθμίσεις μπλοκ, τις χρησιμοποιούμε του μπλοκ 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 με βάση μια επιλογή ρυθμίσεων που δημιουργήσαμε που φιλτράρουν τα δεδομένα. Είναι αρκετά λειτουργικό!

Αλλά υπάρχει ένα άλλο πράγμα που πρέπει να αντιμετωπίσουμε. Αυτήν τη στιγμή, όταν αποθηκεύουμε τη σελίδα ή την ανάρτηση που περιέχει το μπλοκ, επαναφέρονται οι ρυθμίσεις που επιλέξαμε για το μπλοκ. Με άλλα λόγια, αυτές οι επιλογές δεν αποθηκεύονται πουθενά. Υπάρχει λίγη περισσότερη δουλειά για να γίνουν επίμονες αυτές οι επιλογές. Εκεί σκοπεύουμε να πάμε στο επόμενο άρθρο, οπότε μείνετε συντονισμένοι.