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

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

// index.js

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

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

また、初期狀態(tài)変數(shù)をnullから対応する設(shè)定変數(shù)に変更しました。

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

// LeagueSettings.js

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

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

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

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

ブロック設(shè)定で値を表示ui

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

パッケージからチップコンポーネントをインポートします：@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ブロックの設(shè)定を保存するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。