Membuat UI Tetapan untuk Blok WordPress tersuai

Artikel ini menunjukkan mewujudkan UI tetapan untuk blok WordPress tersuai yang berinteraksi dengan API luaran. Blok memaparkan kedudukan bola sepak, dan tetapan membolehkan pengguna menapis data mengikut negara, liga, dan musim.

Artikel sebelumnya meliputi pengambilan dan rendering data API dalam editor blok dan di bahagian depan. Artikel ini memberi tumpuan kepada mengintegrasikan panel tetapan dalam panel kawalan editor WordPress Block (bar sisi kanan). Panel ini membolehkan pengguna menyesuaikan data yang dipaparkan oleh blok.

Proses ini melibatkan memanfaatkan komponen WordPress

dan teras seperti InspectorControls dan PanelBody untuk membina antara muka mesra pengguna. Senibina API digariskan, menonjolkan hubungan antara negara, liga, musim, dan data kedudukan. ComboboxControl

Langkah -langkah utama termasuk:

1. Mengambil data negara: Artikel menunjukkan cara mengambil senarai negara dari Rapidapi menggunakan dan useEffect, menyimpan hasil dalam keadaan. fetch

2. pelaksanaan : InspectorControls komponen diimport dan digunakan untuk menempatkan UI tetapan tersuai. InspectorControls

3. Mewujudkan komponen tersuai (): LeagueSettings.js Komponen berasingan menguruskan UI tetapan, meningkatkan organisasi kod. Komponen ini menggunakan untuk tetapan kumpulan dan PanelBody untuk pemilihan negara, liga, dan musim. ComboboxControl membolehkan mencari dalam pilihan. ComboboxControl

4. Pengendalian perubahan data: fungsi seperti , handleCountryChange, dan handleLeagueChange mengemas kini keadaan komponen berdasarkan pilihan pengguna, secara dinamik menapis data API. handleSeasonChange

5. mengambil data pada hantar: butang "Ambil Data" mencetuskan panggilan API menggunakan tetapan yang dipilih, mengemas kini kedudukan yang dipaparkan.

Artikel menyediakan coretan kod yang menggambarkan langkah -langkah ini, termasuk penukaran data API ke dalam format yang sesuai untuk

. Ia juga menangani pengendalian ralat yang berpotensi untuk kes -kes di mana data mungkin hilang dari API. ComboboxControl

Walaupun pelaksanaan semasa membolehkan pengambilan data dinamik, tetapan belum berterusan. Artikel seterusnya akan merangkumi menyimpan tetapan ini untuk menjadikan pilihan pengguna kekal.

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