Αποθήκευση ρυθμίσεων για ένα προσαρμοσμένο μπλοκ WordPress στο πρόγραμμα επεξεργασίας μπλοκ

Έχουμε καταφέρει πολλά πράγματα σε αυτή τη σειρά! Δημιουργήσαμε ένα προσαρμοσμένο μπλοκ WordPress που ανακτά δεδομένα από ένα εξωτερικό API και τα αποδίδει στη διεπαφή. Στη συνέχεια, πήραμε αυτό το έργο και το επεκτείναμε, ώστε τα δεδομένα να αποδίδονται επίσης απευθείας στον επεξεργαστή μπλοκ του WordPress. Μετά από αυτό, δημιουργήσαμε μια διεπαφή ρυθμίσεων για το μπλοκ χρησιμοποιώντας στοιχεία από το WordPress 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 αντικείμενο με τις νέες τιμές χώρας, πρωταθλήματος και σεζόν. Αυτό γίνεται με τη βοήθεια του τελεστή spread.

// 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() άγκιστρο.

Εμφάνιση των τιμών στη διεπαφή χρήστη των ρυθμίσεων μπλοκ

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

Χωρίς να κάνουμε τις τρέχουσες ρυθμίσεις περίπλοκες, μπορούμε να δημιουργήσουμε μια άλλη ενότητα μέσα στον πίνακα ρυθμίσεων που εμφανίζει τα τρέχοντα χαρακτηριστικά. Μπορείτε να επιλέξετε τον τρόπο εμφάνισης των τιμών των ρυθμίσεων, αλλά θα εισαγάγω a 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 είναι πιο ισχυρά όταν τα ζωντανά δεδομένα μπορούν να εμφανιστούν χωρίς να χρειάζεται να τα ενημερώνετε με μη αυτόματο τρόπο κάθε φορά. Θα το εξετάσουμε στην επόμενη δόση αυτής της σειράς.