ブロックエディターでカスタム WordPress ブロックの設定を保存する

プラトン再発行

フォロワー： 0

このシリーズでたくさんのことを成し遂げました！外部 API からデータをフェッチし、フロントエンドでレンダリングするカスタム WordPress ブロックを作成しました。次に、その作業を拡張して、WordPress のブロックエディターでもデータが直接レンダリングされるようにしました。その後、WordPress のコンポーネントを使用してブロックの設定 UI を作成しました。 InspectorControls パッケージ.

最後にもう XNUMX つ、設定オプションの保存について説明します。前回の記事を思い出すと、技術的にはブロック設定 UI で選択内容を「保存」できますが、実際にはどこにも保存されません。いくつか選択して保存し、投稿に戻ると、設定は完全にリセットされます。

ループを閉じてこれらの設定を保存して、次にカスタムブロックを含む投稿を編集するときに保持されるようにしましょう。

WordPress ブロックで外部 API を操作する

設定属性の保存

私たちは、私たちに提供する 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() 方法。これは、データエンドポイントを XNUMX つだけ使用していた場合はより単純でした。しかし、複数の入力があるので、もう少し複雑です。

こんな感じで整理していきます。新しいオブジェクトを作成します 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() XNUMX つのオブジェクトをマージします。次に、クローンを作成できます newSettings オブジェクトに戻る localSettings 新しい選択が行われ、変更が発生したときに、各設定属性も考慮する必要があるためです。

最後に、 setAttributes() 最終的なオブジェクトを設定するために通常行うように。上記の属性が変更されているかどうかは、UI の選択を更新することで確認できます。

確認する別の方法は、DevTools で console.log() を実行して属性を見つけることです。

ブロックエディターでカスタム WordPress ブロックの設定を保存する

そのスクリーンショットをよく見てください。値は 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 データは、毎回手動で更新しなくてもライブデータを表示できると、より強力になります。これについては、このシリーズの次回の記事で検討します。

タイムスタンプ： 2022 年 12 月 12 日2022 年 12 月 13 日