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

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

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

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

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

保存設(shè)置屬性

我們正在使用一個提供足球隊排名的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設(shè)置屬性。每當(dāng)我們的設(shè)置UI中的ComboboxControl更新時，我們需要使用setAttributes()方法設(shè)置屬性。當(dāng)我們只使用一個數(shù)據(jù)端點(diǎn)時，這更直接。但是現(xiàn)在我們有多個輸入，它就稍微複雜一些。

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

// LeagueSettings.js

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

我還將初始狀態(tài)變量從null更改為相應(yīng)的設(shè)置變量。

// 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ù)使用擴(kuò)展運(yùn)算符克隆並用新的國家、聯(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，因為我們還需要在每次進(jìn)行新的選擇並發(fā)生更改時考慮每個設(shè)置屬性。

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

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

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

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

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

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

// index.js

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

在這裡，我將對值進(jìn)行條件檢查，然後再在Tip組件中顯示它們：

// LeagueSettings.js

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

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

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

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