Zapisywanie ustawień niestandardowego bloku WordPress w edytorze bloków

Osiągnęliśmy wiele rzeczy w tej serii! Stworzyliśmy niestandardowy blok WordPress, który pobiera dane z zewnętrznego interfejsu API i renderuje je w interfejsie użytkownika. Następnie podjęliśmy tę pracę i rozszerzyliśmy ją, aby dane były również renderowane bezpośrednio w edytorze bloków WordPress. Następnie stworzyliśmy interfejs użytkownika ustawień dla bloku przy użyciu komponentów z WordPress InspectorControls pakiet.

Jest jeszcze jeden ostatni kawałek do omówienia, a mianowicie zapisanie opcji ustawień. Jeśli pamiętamy z poprzedniego artykułu, technicznie jesteśmy w stanie „zapisać” nasze wybory w interfejsie ustawień bloków, ale tak naprawdę nie są one nigdzie przechowywane. Jeśli dokonamy kilku wyborów, zapiszemy je, a następnie wrócimy do wpisu, ustawienia zostaną całkowicie zresetowane.

Zamknijmy pętlę i zapiszmy te ustawienia, aby zachowały się przy następnej edycji posta zawierającego nasz niestandardowy blok!

Zapisywanie atrybutów ustawień

Pracujemy z interfejsem API, który zapewnia nam piłka nożna ranking drużyn piłkarskich i używamy go do pobierania do wyświetlania rankingów na podstawie kraju, ligi i sezonu. Możemy utworzyć nowe atrybuty dla każdego z nich w następujący sposób:

// index.js

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

Następnie musimy ustawić atrybuty z LeagueSettings.js. Ilekroć a ComboboxControl jest aktualizowany w naszym interfejsie ustawień, musimy ustawić atrybuty za pomocą setAttributes() metoda. Było to prostsze, gdy pracowaliśmy tylko z jednym punktem końcowym danych. Ale teraz, gdy mamy wiele danych wejściowych, jest to trochę bardziej zaangażowane.

W ten sposób zamierzam to zorganizować. Zamierzam utworzyć nowy obiekt w LeagueSettings.js który jest zgodny ze strukturą atrybutów ustawień i ich wartości.

// LeagueSettings.js

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

Zamierzam również zmienić zmienne stanu początkowego z null do odpowiednich zmiennych ustawień.

// LeagueSettings.js

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

W każdym z handle______Change(), mam zamiar utworzyć setLocalAttributes() który ma argument, który klonuje i nadpisuje poprzedni localSettings obiekt z nowymi wartościami kraju, ligi i sezonu. Odbywa się to za pomocą operatora 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
}

Możemy określić setLocalAttributes() lubię to:

// LeagueSettings.js

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

Więc używamy Object.assign() aby połączyć oba obiekty. Następnie możemy sklonować plik newSettings obiekt z powrotem do localSettings ponieważ musimy również uwzględnić każdy atrybut ustawień, gdy dokonywany jest nowy wybór i następuje zmiana.

Wreszcie możemy skorzystać z tzw setAttributes() jak zwykle, aby ustawić ostateczny obiekt. Możesz potwierdzić, czy powyższe atrybuty się zmieniają, aktualizując wybory w interfejsie użytkownika.

Innym sposobem potwierdzenia jest wykonanie console.log() w DevTools w celu znalezienia atrybutów.

Przyjrzyj się bliżej temu zrzutowi ekranu. Wartości są przechowywane w attributes.settings. Możemy zobaczyć, jak to się dzieje na żywo, ponieważ React renderuje ponownie za każdym razem, gdy dokonujemy zmiany w ustawieniach, dzięki useState() hak.

Wyświetlanie wartości w interfejsie ustawień bloków

Nie jest zbyt przydatne przechowywanie wartości ustawień w samych opcjach sterowania, ponieważ każda z nich jest zależna od innej wartości ustawienia (np. ranking według ligi zależy od wybranego sezonu). Jest to jednak bardzo przydatne w sytuacjach, gdy wartości ustawień są statyczne i gdy ustawienia są od siebie niezależne.

Bez komplikowania bieżących ustawień możemy utworzyć kolejną sekcję w panelu ustawień, która pokazuje bieżące atrybuty. Możesz wybrać sposób wyświetlania wartości ustawień, ale zamierzam zaimportować plik Tip składnik z @wordpress/components pakiet:

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

Kiedy tu jestem, zamierzam przeprowadzić warunkowe sprawdzenie wartości przed wyświetleniem ich w pliku Tip składnik:

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

        

          Country: {attributes.settings.country}
        
        

          League: {attributes.settings.league}
        
        

          Season: {attributes.settings.season}
        
      
    
  )}

Oto jak to działa w edytorze bloków:

Dane API są bardziej wydajne, gdy można wyświetlać dane na żywo bez konieczności ich każdorazowej ręcznej aktualizacji. Przyjrzymy się temu w kolejnej odsłonie tej serii.