在块编辑器中保存自定义 WordPress 块的设置

我们在这个系列中完成了很多东西！ 我们创建了一个自定义 WordPress 块，它从外部 API 获取数据并将其呈现在前端。 然后我们接受了这项工作并对其进行了扩展，因此数据也可以直接在 WordPress 块编辑器中呈现。 之后，我们使用 WordPress 中的组件为块创建了一个设置 UI InspectorControls 包.

我们还有最后一点要介绍，那就是保存设置选项。 如果我们回想一下上一篇文章，我们在技术上能够在块设置 UI 中“保存”我们的选择，但这些实际上并没有存储在任何地方。 如果我们进行一些选择，保存它们，然后返回帖子，设置将完全重置。

让我们关闭循环并保存这些设置，以便下次我们编辑包含自定义块的帖子时它们会持续存在！

保存设置属性

我们正在使用为我们提供的 API 足球 足球队排名，我们使用它来获取显示基于国家、联赛和赛季的排名。 我们可以像这样为每个属性创建新属性：

// index.js

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

接下来，我们需要设置属性 LeagueSettings.js. 每当一个 ComboboxControl 在我们的设置 UI 中更新，我们需要使用 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) {
  // 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() 正如我们通常所做的那样设置最终对象。 您可以通过更新 UI 中的选择来确认上述属性是否正在更改。

另一种确认方法是在 DevTools 中执行 console.log() 以查找属性。

仔细看看那个截图。 这些值存储在 attributes.settings. 我们能够实时看到它的发生，因为每次我们更改设置时 React 都会重新渲染，这要归功于 useState() 钩。

在块设置 UI 中显示值

将设置值存储在控制选项本身中不是很有用，因为每个设置值都依赖于另一个设置值（例如，联赛排名取决于选择的赛季）。 但它在设置值是静态的且设置彼此独立的情况下非常有用。

在不使当前设置复杂化的情况下，我们可以在设置面板中创建另一个部分来显示当前属性。 您可以选择显示设置值的方式，但我要导入一个 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 数据会更加强大。 我们将在本系列的下一部分中对此进行研究。