在塊編輯器中保存自定義WordPress塊的設置

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

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

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

在WordPress區塊中使用外部API

• 前端渲染數據
• 後端渲染數據
• 創建自定義設置UI
• 保存自定義區塊設置 (此處！)
• 使用實時API數據 (即將推出)

保存設置屬性

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

// index.js

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

接下來，我們需要從LeagueSettings.js設置屬性。每當我們的設置UI中的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對象。

// 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，因為我們還需要在每次進行新的選擇並發生更改時考慮每個設置屬性。

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

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

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

在區塊設置UI中顯示值

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

在不使當前設置複雜化的前提下，我們可以在設置面板內創建另一個部分來顯示當前屬性。您可以選擇自己的方式來顯示設置值，但我將從@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,
};

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

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

以上是在塊編輯器中保存自定義WordPress塊的設置的詳細內容。更多資訊請關注PHP中文網其他相關文章！