本系列教程已經(jīng)完成了許多工作！我們創(chuàng)建了一個自定義WordPress區(qū)塊，它從外部API獲取數(shù)據(jù)并在前端渲染。然后，我們擴展了這項工作，使數(shù)據(jù)也能直接在WordPress區(qū)塊編輯器中渲染。之后，我們使用WordPress InspectorControls包中的組件創(chuàng)建了該區(qū)塊的設置UI。

最后一步是保存設置選項。如果我們回憶上一篇文章的內(nèi)容，我們實際上能夠“保存”我們在區(qū)塊設置UI中的選擇，但是這些選擇實際上并沒有存儲在任何地方。如果我們進行一些選擇，保存它們，然后返回到帖子，設置將完全重置。

讓我們閉環(huán)并保存這些設置，以便在下一次編輯包含我們自定義區(qū)塊的帖子時，它們能夠持久保存！

在WordPress區(qū)塊中使用外部API

• 前端渲染數(shù)據(jù)
• 后端渲染數(shù)據(jù)
• 創(chuàng)建自定義設置UI
• 保存自定義區(qū)塊設置 (此處！)
• 使用實時API數(shù)據(jù) (即將推出)

保存設置屬性

我們正在使用一個提供足球隊排名的API，我們用它來獲取基于國家、聯(lián)賽和賽季的排名顯示。我們可以為每個屬性創(chuàng)建新的屬性，如下所示：

// index.js

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

接下來，我們需要從LeagueSettings.js設置屬性。每當我們的設置UI中的ComboboxControl更新時，我們需要使用setAttributes()方法設置屬性。當我們只使用一個數(shù)據(jù)端點時，這更直接。但是現(xiàn)在我們有多個輸入，它就稍微復雜一些。

這就是我將如何組織它。我將在LeagueSettings.js中創(chuàng)建一個新的對象，它遵循設置屬性及其值的結(jié)構(gòu)。

// LeagueSettings.js

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

我還將初始狀態(tài)變量從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()中，我將創(chuàng)建一個setLocalAttributes()，它帶有一個參數(shù)，該參數(shù)使用擴展運算符克隆并用新的國家、聯(lián)賽和賽季值覆蓋之前的localSettings對象。

// LeagueSettings.js

function handleCountryChange(value) {
  // 初始代碼
  setLocalAttributes({ ...localSettings, country: value });
  // 代碼的其余部分
}

function handleLeagueChange(value) {
  // 初始代碼
  setLocalAttributes({ ...localSettings, league: value });
  // 代碼的其余部分
}

function handleSeasonChange(value) {
  // 初始代碼
  setLocalAttributes({ ...localSettings, season: value });
  // 代碼的其余部分
}

我們可以這樣定義setLocalAttributes()：

// LeagueSettings.js

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

因此，我們使用Object.assign()來合并這兩個對象。然后我們可以將newSettings對象克隆回localSettings，因為我們還需要在每次進行新的選擇并發(fā)生更改時考慮每個設置屬性。

最后，我們可以像平時一樣使用setAttributes()來設置最終對象。您可以通過更新UI中的選擇來確認上述屬性是否正在更改。

另一個確認方法是在DevTools中執(zhí)行console.log()來查找屬性。

仔細看看那個截圖。這些值存儲在attributes.settings中。由于useState()鉤子，每次我們在設置中進行更改時，React都會重新渲染，因此我們能夠看到它實時發(fā)生。

在區(qū)塊設置UI中顯示值

將設置值存儲在控件選項本身中并不是很有用，因為每個控件都依賴于其他設置值（例如，按聯(lián)賽的排名取決于選擇的賽季）。但在設置值是靜態(tài)的并且設置彼此獨立的情況下，它非常有用。

在不使當前設置復雜化的前提下，我們可以在設置面板內(nèi)創(chuàng)建另一個部分來顯示當前屬性。您可以選擇自己的方式來顯示設置值，但我將從@wordpress/components包中導入一個Tip組件：

// index.js

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

在這里，我將對值進行條件檢查，然后再在Tip組件中顯示它們：

// LeagueSettings.js

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

這就是它在區(qū)塊編輯器中的工作方式：

當可以顯示實時數(shù)據(jù)而無需每次都手動更新它們時，API數(shù)據(jù)更強大。我們將在本系列的下一部分中探討這一點。

以上是在塊編輯器中保存自定義WordPress塊的設置的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！