在块编辑器中保存自定义WordPress块的设置-css教程-PHP中文网

Saving Settings for a Custom WordPress Block in the Block Editor

本系列教程已经完成了许多工作！我们创建了一个自定义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中文网其他相关文章！