Menyimpan Pengaturan untuk Blok WordPress Khusus di Editor Blok

Kami telah menyelesaikan banyak hal dalam seri ini! Kami membuat blok WordPress khusus yang mengambil data dari API eksternal dan merendernya di ujung depan. Kemudian kami mengambil pekerjaan itu dan memperluasnya sehingga data juga dirender langsung di editor blok WordPress. Setelah itu, kami membuat UI pengaturan untuk blok menggunakan komponen dari WordPress InspectorControls paket.

Ada satu bagian terakhir yang harus kami bahas dan itu menyimpan opsi pengaturan. Jika kita ingat dari artikel terakhir, secara teknis kita dapat "menyimpan" pilihan kita di UI pengaturan blok, tetapi itu sebenarnya tidak disimpan di mana pun. Jika kami membuat beberapa pilihan, menyimpannya, lalu kembali ke pos, pengaturannya disetel ulang sepenuhnya.

Mari kita tutup loop dan simpan pengaturan itu sehingga tetap ada saat kita mengedit posting berikutnya yang berisi blok khusus kita!

Menyimpan atribut pengaturan

Kami bekerja dengan API yang memberi kami sepak bola peringkat tim sepak bola dan kami menggunakannya untuk mengambil untuk menampilkan peringkat berdasarkan negara, liga, dan musim. Kita dapat membuat atribut baru untuk masing-masing seperti ini:

// index.js

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

Selanjutnya, kita perlu mengatur atribut dari LeagueSettings.js. Kapanpun a ComboboxControl diperbarui di UI pengaturan kami, kami perlu mengatur atribut menggunakan setAttributes() metode. Ini lebih mudah saat kami hanya bekerja dengan satu titik akhir data. Tapi sekarang kami memiliki banyak masukan, itu sedikit lebih terlibat.

Ini adalah bagaimana saya akan mengaturnya. Saya akan membuat objek baru di LeagueSettings.js yang mengikuti struktur atribut pengaturan dan nilainya.

// LeagueSettings.js

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

Saya juga akan mengubah variabel keadaan awal dari null ke variabel pengaturan masing-masing.

// LeagueSettings.js

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

Di masing-masing handle______Change(), saya akan membuat setLocalAttributes() yang memiliki argumen yang mengkloning dan menimpa yang sebelumnya localSettings objek dengan nilai negara, liga, dan musim yang baru. Ini dilakukan dengan menggunakan bantuan operator spread.

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

Kita dapat mendefinisikan setLocalAttributes() seperti ini:

// LeagueSettings.js

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

Jadi, kami menggunakan Object.assign() untuk menggabungkan dua objek. Kemudian kita bisa mengkloning newSettings objek kembali ke localSettings karena kita juga perlu memperhitungkan setiap atribut pengaturan ketika ada pilihan baru dan terjadi perubahan.

Akhirnya, kita bisa menggunakan setAttributes() seperti yang biasa kita lakukan untuk menyetel objek akhir. Anda dapat mengonfirmasi apakah atribut di atas berubah dengan memperbarui pilihan di UI.

Cara lain untuk mengonfirmasi adalah dengan melakukan console.log() di DevTools untuk menemukan atribut.

Lihat lebih dekat tangkapan layar itu. Nilai disimpan di attributes.settings. Kami dapat melihatnya secara langsung karena React merender ulang setiap kali kami melakukan perubahan pada pengaturan, berkat useState() menghubungkan.

Menampilkan nilai di UI pengaturan blok

Tidak terlalu berguna untuk menyimpan nilai pengaturan dalam opsi kontrol itu sendiri karena masing-masing bergantung pada nilai pengaturan lainnya (mis. peringkat berdasarkan liga bergantung pada musim mana yang dipilih). Tapi ini sangat berguna dalam situasi di mana nilai pengaturan statis dan pengaturan independen satu sama lain.

Tanpa mempersulit pengaturan saat ini, kita dapat membuat bagian lain di dalam panel pengaturan yang menunjukkan atribut saat ini. Anda dapat memilih cara untuk menampilkan nilai pengaturan tetapi saya akan mengimpor a Tip komponen dari @wordpress/components paket:

// LeagueSettings.js
import { Tip } from "@wordpress/components";

Sementara saya di sini, saya akan melakukan pemeriksaan kondisional untuk nilai sebelum menampilkannya di dalam Tip komponen:

  {country && league && season && (
    
      
Current Settings: 
      

        

          Country: {attributes.settings.country}
        
        

          League: {attributes.settings.league}
        
        

          Season: {attributes.settings.season}
        
      
    
  )}

Inilah cara akhirnya bekerja di editor blok:

Data API lebih kuat saat data langsung dapat ditampilkan tanpa harus memperbaruinya secara manual setiap saat. Kami akan membahasnya di bagian berikutnya dari seri ini.