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

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

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

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

WordPressブロックで外部APIを使用して

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

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

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

メソッドを使用してプロパティを設定する必要があります。これは、1つのデータエンドポイントのみを使用する場合、より簡単です。しかし、今では複数の入力がありますが、もう少し複雑です。

// 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

確認する別の方法は、devtoolsで

を実行してプロパティを見つけることです。 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,
};

これはブロックエディターでの動作です：

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

APIデータはより強力です。このシリーズの次の部分でこれを探ります。

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