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

この一連のチュートリアルでは多くの作業が行われました！外部APIからデータを取得し、フロントエンドでレンダリングするカスタムWordPressブロックを作成しました。次に、WordPressブロックエディターでデータを直接レンダリングできるように、作業を拡張しました。その後、WordPress InspectorControlsパッケージのコンポーネントを使用して、そのブロックの設定UIを作成しました。

最後のステップは、設定オプションを保存することです。前の投稿の内容を思い出した場合、実際にブロック設定UIで選択を「保存」することができましたが、これらの選択は実際にはどこにも保存されていませんでした。いくつかの選択を行う場合は、それらを保存してから投稿に戻ると、設定が完全​​にリセットされます。

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

• フロントエンドのレンダリングデータ
• バックエンドのレンダリングデータ
• カスタム設定ui
を作成します
• カスタムブロック設定を保存（こちら！）
リアルタイムAPIデータの使用
• （近日公開）
設定プロパティを保存

フットボールチームのランキングを提供するAPIを使用しています。これは、国、リーグ、シーズンに基づいてランキングディスプレイを取得するために使用しています。以下に示すように、各プロパティの新しいプロパティを作成できます。

次に、leaguesettings.jsからプロパティを設定する必要があります。設定UIのコンボボックスコントロールが更新されたときはいつでも、

// index.js

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

これが私がそれを整理する方法です。 leaguesettings.jsに新しいオブジェクトを作成し、プロパティの設定構造とその値に従います。 setAttributes()

また、初期状態変数をnullから対応する設定変数に変更しました。

// LeagueSettings.js

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

各

// 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()を使用して、2つのオブジェクトをマージします。次に、新しい選択が行われ、変更が発生するたびに各設定プロパティを考慮する必要があるため、

// LeagueSettings.js

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

Object.assign()最後に、通常どおりnewSettingsを使用して最終オブジェクトを設定できます。 UIの選択を更新することにより、上記の属性が変更されているかどうかを確認できます。 localSettings

を実行してプロパティを見つけることです。 setAttributes()

そのスクリーンショットを注意深く見てください。これらの値はattributes.settingsに保存されます。 useState()フックのおかげで、設定を変更するたびに再レンダーを反応するため、リアルタイムで発生することがわかります。

ブロック設定で値を表示ui

コントロールオプション自体に設定値を保存することは、各コントロールが他の設定値に依存するため、あまり有用ではありません（たとえば、リーグによるランキングは選択されたシーズンに依存します）。しかし、設定値が静的であり、互いに独立している場合は非常に便利です。

パッケージからチップコンポーネントをインポートします：@wordpress/components

// index.js

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

// LeagueSettings.js

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

リアルタイムデータを毎回手動で更新せずに表示できる場合、

以上がブロックエディターのカスタムWordPressブロックの設定を保存するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。