Memberi data API luaran di blok WordPress di hujung belakang

Artikel ini mengikuti artikel sebelumnya tentang "memberikan data API luaran di hujung depan blok WordPress". Dalam jawatan terdahulu, kami belajar bagaimana untuk mendapatkan API luaran dan mengintegrasikannya dengan blok yang menjadikan data yang diambil di hujung depan laman web WordPress.

Masalahnya ialah cara kami melaksanakannya menghalang kami melihat data dalam editor Blok WordPress. Dalam erti kata lain, kita boleh memasukkan blok ke dalam halaman, tetapi kita tidak dapat melihat pratontonnya. Blok hanya boleh dilihat selepas dibebaskan.

mari kita semak plugin blok sampel yang dibuat dalam jawatan terdahulu. Kali ini, kami akan menggunakan JavaScript WordPress dan Ekosistem React untuk mendapatkan dan membuat data dalam editor Blok Backend.

menggunakan API luaran dalam blok WordPress

data rendering front-end
data rendering backend
• (lokasi semasa anda)
Buat tetapan tersuai ui
simpan tetapan blok tersuai
menggunakan data API masa nyata
• (akan datang)

Hasil artikel sebelumnya

Sebelum memulakan, inilah demo yang kami selesaikan dalam jawatan terdahulu, anda boleh merujuk. Anda mungkin menyedari bahawa saya menggunakan kaedah

dalam jawatan terdahulu saya untuk dapat menggunakan sifat dan menjadikan kandungan dalam fail PHP. render_callback

Ini berguna dalam situasi di mana anda mungkin perlu menggunakan beberapa fungsi WordPress atau PHP asli untuk membuat blok dinamik. Walau bagaimanapun, jika anda hanya mahu menggunakan ekosistem JavaScript dan React (terutamanya JSX) WordPress untuk menjadikan HTML statik dan sifat yang disimpan dalam pangkalan data, anda hanya perlu memberi tumpuan kepada fungsi plugin

dan Edit plugin blok. Save

Fungsi

• edit memberikan kandungan berdasarkan apa yang anda mahu lihat dalam editor blok. Anda boleh menggunakan komponen React Interactive di sini. Fungsi
• SAVE memberikan kandungan berdasarkan apa yang anda mahu lihat di hujung depan. Anda tidak boleh menggunakan komponen reaksi biasa atau cangkuk di sini. Ia digunakan untuk mengembalikan HTML statik yang disimpan ke pangkalan data serta sifat.
Fungsi

adalah tumpuan perbincangan kami hari ini. Kita boleh membuat komponen interaktif di hujung depan, tetapi untuk ini kita perlu memasukkan dan mengaksesnya secara manual dalam fail seperti yang kita lakukan dalam jawatan terdahulu. Save

Jadi saya akan menutup perkara yang sama yang kami lakukan dalam jawatan terdahulu, tetapi kali ini anda dapat melihat pratonton dalam editor blok sebelum menghantar ke frontend

. Properties blok

Saya sengaja menghilangkan sebarang penjelasan mengenai ciri -ciri fungsi

dalam jawatan terdahulu kerana ini mengganggu kandungan utama (rendering).

edit Jika anda mempunyai latar belakang yang bertindak balas, anda mungkin memahami apa yang saya katakan, tetapi jika anda baru kepada anda, saya cadangkan anda menyemak komponen dan sifat dalam dokumentasi React.

Jika kita merakam objek

ke konsol, ia akan mengembalikan senarai fungsi WordPress dan pembolehubah yang berkaitan dengan blok kami:

kita hanya memerlukan objek attributes dan fungsi setAttributes, dan saya akan membongkar mereka dari objek props dalam kod saya. Dalam jawatan terdahulu, saya mengubahsuai kod Rapidapi supaya data API dapat disimpan melalui setAttributes(). Props hanya dibaca, jadi kita tidak dapat mengubahnya secara langsung.

Atribut blok

adalah serupa dengan pembolehubah keadaan dan setState dalam React, tetapi React berjalan pada klien, manakala setAttributes() digunakan untuk menyimpan atribut secara kekal dalam pangkalan data WordPress selepas menyimpan jawatan. Jadi apa yang perlu kita lakukan ialah menyelamatkan mereka untuk attributes.data dan kemudian panggil mereka sebagai nilai awal pembolehubah useState().

edit fungsi

Saya akan menyalin dan menyisipkan kod HTML yang kami gunakan dalam jawatan terdahulu dalam football-rankings.php dan melakukan beberapa penyuntingan untuk beralih ke latar belakang JavaScript. Ingat kami mencipta dua fail tambahan untuk gaya depan dan skrip dalam jawatan terdahulu? Ikuti pendekatan kami hari ini, tidak perlu membuat fail ini. Sebaliknya, kita boleh memindahkan segala -galanya ke dalam fungsi Edit.

Kod penuh

`` `` JavaScript import {useState} dari "@wordpress/element"; Eksport Fungsi Default Edit (props) { const {atribut, setAttributes} = props; const [apidata, setapidata] = useState (atribut.data);

fungsi fetchData () { const options = { Kaedah: "Dapatkan", tajuk: { "X-Rapidapi-Key": "Kunci API Rapid Anda", "X-Rapidapi-Host": "API-Football-V1.P.Rapidapi.com", }, }; Ambil ( "" " pilihan ) .then ((respons) = & gt; response.json ()) .THEN ((response) = & gt; { Biarkan NewData = {... respons}; setAttributes ({data: newData}); setapidata (newdata); }) .catch ((err) = & gt; console.error (err)); }

kembali (

mengambil data

{/

butang mencetuskan pengambilalihan data /} {apidata && ( {/ Tambah id untuk pemilih gaya /}

{/ Gunakan ClassName /}

pangkat logo

Nama Pasukan

gp

{/ ... statistik lain ...

/}

Bentuk Sejarah

{apidata.response [0] .league.standings [0] .map ((el) = & gt; { // ... data jadual rendering ... })}

)}

); } `` 我已经从@wordpress/element 中包含了React钩子 useState () ，而不是从React库中使用它。这是因为如果我以常规方式加载，它会为我使用的每个区块下载React。但是，如果我使用@wordpress/element`, yang dimuatkan dari satu sumber, lapisan WordPress di atas bertindak balas.

Kali ini, bukannya membungkus kod dalam useEffect(), saya membungkusnya dalam fungsi yang hanya dipanggil apabila butang diklik supaya kita dapat pratonton data yang diambil dalam masa nyata. Saya telah menggunakan pemboleh ubah keadaan yang dipanggil apiData untuk menjadikan jadual liga secara kondusif. Jadi sebaik sahaja butang diklik dan data diambil, saya menetapkan apiData ke data baru dalam fetchData() dan akan membuat semula dengan jadual bola sepak yang tersedia HTML.

anda akan melihat bahawa sebaik sahaja jawatan disimpan dan halaman itu disegarkan semula, jadual liga akan hilang. Ini kerana kita menggunakan keadaan null (null) sebagai nilai awal apiData. Apabila jawatan disimpan, harta itu disimpan ke objek attributes.data, yang kami panggil sebagai nilai awal pembolehubah useState() seperti yang ditunjukkan di bawah:

const [apiData, setApiData] = useState(attributes.data);

Simpan fungsi

Kami akan melakukan hampir perkara yang sama dengan fungsi save, tetapi dengan sedikit pengubahsuaian. Sebagai contoh, bahagian depan tidak memerlukan butang "Dapatkan Data", dan tidak juga pemboleh ubah keadaan apiData, kerana kami telah menyemaknya dalam fungsi edit. Tetapi kita memerlukan pembolehubah rawak apiData untuk memeriksa attributes.data untuk menjadikan JSX secara kondusif, jika tidak, ia melemparkan ralat yang tidak ditentukan dan UI editor blok akan menjadi kosong.

Kod penuh

`` `` JavaScript Eksport fungsi lalai Simpan (props) { const {attributes} = props; const apidata = atribut.data;

kembali ( apidata && (// render hanya apabila apidata tersedia

{/ ... data jadual rendering, yang pada dasarnya sama dengan kod dalam fungsi edit ...

/} ) ); } Fungsi `` 如果您在区块已存在于区块编辑器中后修改 simpan `, ia akan memaparkan ralat berikut:

Ini kerana tag dalam kandungan yang disimpan adalah berbeza daripada fungsi baru save kami. Oleh kerana kita berada dalam mod pembangunan, lebih mudah untuk memadam blok dari halaman semasa dan memasukkan semula mereka sebagai blok baru - dengan cara ini, kod yang dikemas kini akan digunakan dan semuanya akan dipulihkan untuk disegerakkan.

Jika kita menggunakan kaedah render_callback, ini boleh dielakkan kerana output dinamik dan dikawal oleh PHP dan bukannya fungsi save. Oleh itu, setiap kaedah mempunyai kelebihan dan kekurangannya sendiri.

Tom Nowell memberikan penjelasan terperinci tentang apa yang tidak boleh dilakukan dalam fungsi save dalam jawapan limpahan timbunan ini.

Tetapkan gaya blok dalam editor dan front-end

Mengenai gaya, ia akan hampir sama seperti yang kita lihat dalam jawatan terdahulu, tetapi terdapat beberapa perubahan kecil yang saya jelaskan dalam komen. Saya hanya menyediakan gaya penuh di sini, kerana ia hanya bukti konsep, bukan apa yang anda mahu salin dan tampal (kecuali jika anda memerlukan blok yang menunjukkan kedudukan bola sepak dalam gaya seperti ini). Perhatikan bahawa saya masih menggunakan SCSS yang dikumpulkan kepada CSS pada masa membina.

gaya editor

css /* 目标所有带有 data-title="Football Rankings" 的区块 */ .block-editor-block-list__layout .block-editor-block-list__block.wp-block[data-title="Football Rankings"] { /* 默认情况下，区块被限制在 650px 最大宽度加上其他设计特定代码 */ max-width: unset; /* ... 其他样式 ... */ }

gaya depan-end

`` css /

gaya blok depan / .wp-block-post-content .wp-block-football-rankings-league-table { / ... gaya ... / }

liga-{ /

menggunakan pemilih id /

/

... gaya ... / } `` Kami menambah ini ke src/style.scss`, yang bertanggungjawab untuk gaya editor dan front-end. Saya tidak dapat berkongsi url demo kerana ia memerlukan akses editor, tetapi saya telah mencatatkan video untuk anda menonton demo: 我们将此添加到

Lihat demo itu sangat kemas, bukan? Sekarang kita mempunyai blok berfungsi sepenuhnya yang bukan sahaja membuat di bahagian depan, tetapi juga mendapat data API dan menjadikan dalam editor blok - dan terdapat butang penyegaran!

Walau bagaimanapun, jika kita mahu memanfaatkan editor blok WordPress, kita harus mempertimbangkan pemetaan beberapa unsur UI blok untuk menghalang kawalan seperti menetapkan warna, tipografi, dan jarak. Ini adalah langkah seterusnya yang baik dalam perjalanan pembelajaran pembangunan blok.

Atas ialah kandungan terperinci Memberi data API luaran di blok WordPress di hujung belakang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!