Saving Settings for a Custom WordPress Block in the Block Editor

A lot of work has been done in this series of tutorials! We created a custom WordPress block that fetches data from external API and renders it on the front end. We then extended the work so that the data can also be rendered directly in the WordPress block editor. After that, we created the settings UI for that block using the components in the WordPress InspectorControls package.

The last step is to save the settings options. If we recall the contents of the previous post, we were actually able to "save" our choices in the block settings UI, but those choices weren't actually stored anywhere. If we make some selections, save them and then return to the post, the settings will be reset completely.

Let's close the loop and save these settings so that they can be persisted the next time you edit a post that contains our custom blocks!

Using external API in WordPress block

• Front-end rendering data
• Back-end rendering data
• Create custom settings UI
• Save custom block settings (here!)
• Using real-time API data (coming soon)

Save Settings Properties

We are using an API that provides football team rankings, which we use to get ranking displays based on the country, league and season. We can create new properties for each property as shown below:

// index.js

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

Next, we need to set the properties from LeagueSettings.js. Whenever the ComboboxControl in our settings UI is updated, we need to set the properties using the setAttributes() method. This is more straightforward when we only use one data endpoint. But now we have multiple inputs, it is a little more complicated.

This is how I will organize it. I'm going to create a new object in LeagueSettings.js which follows the structure of setting properties and their values.

// LeagueSettings.js

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

I also changed the initial state variable from null to the corresponding setting variable.

// LeagueSettings.js

const [country, setCountry] = useState(attributes.settings.country);
const [league, setLeague] = useState(attributes.settings.league);
const [season, setSeason] = useState(attributes.settings.season);

In each handle______Change() I will create a setLocalAttributes() with a parameter that cloned using the extension operator and overwrites the previous localSettings object with new country, league and season values.

// LeagueSettings.js

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

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

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

We can define it like this: setLocalAttributes()

// LeagueSettings.js

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

Therefore, we use

to merge the two objects. We can then clone the Object.assign() object back to newSettings because we also need to consider each setting property every time a new selection is made and changes occur. localSettings

Finally, we can use

as usual to set the final object. You can confirm whether the above attributes are changing by updating the selection in the UI. setAttributes()

Another way to confirm is to execute

in DevTools to find the properties. console.log()

Look at that screenshot carefully. These values ​​are stored in attributes.settings. Thanks to the useState() hook, React re-renders every time we make changes in the settings, so we are able to see it happen in real time.

Show value in the block settings UI

Storing the settings values ​​in the control options themselves is not very useful because each control depends on other settings values ​​(e.g. ranking by league depends on the season selected). But it is very useful when the setting values ​​are static and set independent of each other.

Without complicating the current settings, we can create another section in the settings panel to display the current properties. You can choose your own way to display the settings value, but I will import a Tip component from the @wordpress/components package:

// index.js

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

Here, I will conditionally check the values ​​before displaying them in the Tip component:

// LeagueSettings.js

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

This is how it works in the block editor:

API data is more powerful when real-time data can be displayed without manually updating them every time. We will explore this in the next part of this series.

The above is the detailed content of Saving Settings for a Custom WordPress Block in the Block Editor. For more information, please follow other related articles on the PHP Chinese website!