Menyimpan Tetapan untuk Blok WordPress Custom di Editor Blok

Banyak kerja telah dilakukan dalam siri tutorial ini! Kami mencipta blok WordPress tersuai yang mengambil data dari API luaran dan menjadikannya di hujung depan. Kami kemudian memperluaskan kerja supaya data juga boleh diberikan secara langsung dalam editor Blok WordPress. Selepas itu, kami mencipta UI Tetapan untuk blok itu menggunakan komponen dalam pakej WordPress InspectorControls.

Langkah terakhir adalah untuk menyimpan pilihan tetapan. Jika kita ingat kandungan jawatan terdahulu, kita sebenarnya dapat "menyimpan" pilihan kita dalam UI Tetapan Blok, tetapi pilihan -pilihan tersebut sebenarnya tidak disimpan di mana -mana sahaja. Jika kita membuat beberapa pilihan, simpannya dan kemudian kembali ke jawatan, tetapan akan ditetapkan semula sepenuhnya.

mari kita tutup gelung dan simpan tetapan ini supaya mereka dapat bertahan apabila anda mengedit jawatan yang mengandungi blok tersuai kami!

menggunakan API luaran dalam blok WordPress

data rendering front-end
data rendering back-end
Buat tetapan tersuai ui
Simpan Tetapan Blok Custom
• (di sini!)
menggunakan data API masa nyata
• (akan datang)

Simpan sifat tetapan

Kami menggunakan API yang menyediakan kedudukan pasukan bola sepak, yang kami gunakan untuk mendapatkan paparan ranking berdasarkan negara, liga dan musim. Kami boleh membuat sifat baru untuk setiap harta seperti yang ditunjukkan di bawah:

// index.js

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

Seterusnya, kita perlu menetapkan sifat dari LeagueSettings.js. Apabila ComboBoxControl dalam UI Tetapan kami dikemas kini, kami perlu menetapkan sifat menggunakan kaedah

. Ini lebih mudah apabila kita hanya menggunakan satu titik akhir data. Tetapi sekarang kita mempunyai banyak input, ia sedikit lebih rumit. setAttributes()

Ini adalah bagaimana saya akan mengaturnya. Saya akan membuat objek baru dalam leaguesettings.js yang mengikuti struktur penetapan sifat dan nilai mereka.

// LeagueSettings.js

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

Saya juga menukar pemboleh ubah keadaan awal dari null ke pemboleh ubah tetapan yang sepadan.

// LeagueSettings.js

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

dalam setiap

saya akan membuat handle______Change() dengan parameter yang diklon menggunakan pengendali lanjutan dan menimpa objek setLocalAttributes() sebelumnya dengan nilai negara, liga dan musim baru. localSettings

// LeagueSettings.js

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

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

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

kita boleh menentukannya seperti ini:

setLocalAttributes() Oleh itu, kami menggunakan

untuk menggabungkan kedua -dua objek. Kita kemudian boleh mengklonkan objek

// LeagueSettings.js

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

kembali ke

kerana kita juga perlu mempertimbangkan setiap penetapan harta setiap kali pemilihan baru dibuat dan perubahan berlaku. Object.assign() newSettings Akhirnya, kita boleh menggunakan localSettings seperti biasa untuk menetapkan objek akhir. Anda boleh mengesahkan sama ada atribut di atas berubah dengan mengemas kini pemilihan dalam UI.

Satu lagi cara untuk mengesahkan adalah untuk melaksanakan setAttributes() di DevTools untuk mencari sifat.

Lihat tangkapan skrin dengan teliti. Nilai -nilai ini disimpan dalam attributes.settings. Terima kasih kepada cangkuk useState(), reaksi reaksi setiap kali kita membuat perubahan dalam tetapan, jadi kita dapat melihatnya berlaku dalam masa nyata.

tunjukkan nilai dalam tetapan blok ui

Menyimpan nilai tetapan dalam pilihan kawalan sendiri tidak begitu berguna kerana setiap kawalan bergantung pada nilai tetapan lain (mis. Kedudukan oleh liga bergantung pada musim yang dipilih). Tetapi ia sangat berguna apabila nilai tetapan adalah statik dan ditetapkan bebas antara satu sama lain.

tanpa merumitkan tetapan semasa, kita boleh membuat bahagian lain dalam panel Tetapan untuk memaparkan sifat semasa. Anda boleh memilih cara anda sendiri untuk memaparkan nilai tetapan, tetapi saya akan mengimport komponen tip dari pakej @wordpress/components:

// index.js

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

di sini, saya akan menyemak nilai -nilai sebelum memaparkannya dalam komponen tip:

// LeagueSettings.js

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

ini adalah bagaimana ia berfungsi dalam editor blok:

Data API lebih kuat apabila data masa nyata boleh dipaparkan tanpa mengemas kini secara manual setiap kali. Kami akan meneroka ini di bahagian seterusnya siri ini.

Atas ialah kandungan terperinci Menyimpan Tetapan untuk Blok WordPress Custom di Editor Blok. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!