Збереження налаштувань для спеціального блоку 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",
      },
    },
  },
},

Далі нам потрібно встановити атрибути from LeagueSettings.js. Кожного разу, коли a 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(), я збираюся створити a 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 є більш потужними, коли дані в реальному часі можна показувати без необхідності кожного разу оновлювати їх вручну. Ми розглянемо це в наступній частині цієї серії.