Cara Membuat Plugin Anda Kompatibel dengan Gutenberg: Bagian 2 (Sidebar API)

Jika Anda mencoba membuat plugin Anda kompatibel dengan Gutenberg, Anda memiliki beberapa jalur yang dapat / harus Anda ambil – tergantung pada apa yang dilakukan plugin Anda dan bagaimana plugin tersebut memberikan fitur-fiturnya kepada pengguna.


Pada bagian pertama dari seri-mini ini, kami menjelajahi Blok API Gutenberg – yang dibutuhkan sebagian besar plugin dalam hal kompatibilitas Gutenberg. Kali ini, kita akan mengeksplorasi bagian lain dari teka-teki Gutenberg – API Sidebar Gutenberg.

Hanya untuk memastikan kami berada di halaman yang sama, penjelasan singkat:

  • Block API Gutenberg sangat luas dan memungkinkan Anda untuk membangun hampir semuanya sebagai blok, tetapi, kadang-kadang, itu tidak cukup.
  • Sidebar API, di sisi lain, memungkinkan plugin untuk mendaftarkan sidebar di mana mereka dapat mengambil fungsionalitasnya di luar blok. Sidebar mirip dengan Block Inspector.

Jadikan Plugin Anda Kompatibel Dengan Gutenberg - Sidebar API

Misalnya, Gutenberg Sidebar API yang digunakan seperti yang ditunjukkan oleh Yoast SEO:

API Sidebar Gutenberg

Di mana Anda dapat menggunakan Sidebar API?

Kami baru-baru ini berupaya membuat plugin kami – Ulasan Produk WP – siap untuk Gutenberg. Tinjauan Produk WP menggunakan bidang meta untuk menambahkan data ulasan ke pos, dan kami tidak dapat berubah menjadi blok karena berbagai alasan kompatibilitas ke belakang. Karenanya, kami menggunakan Sidebar API.

Inilah cara kami mengintegrasikan Review Produk WP ke dalam editor Gutenberg:Ulasan Produk WP Gutenberg

Ketika pengguna menunjukkan bahwa posting tersebut adalah ulasan dengan toggle sidebar, mereka akan dapat mengonfigurasi segala sesuatu tentang kotak ulasan mereka dari opsi sidebar.

Ulasan Produk WP adalah salah satu contoh di mana Sidebar API dapat bermanfaat. Contoh bagus lainnya adalah Jatuhkan plugin, yang memungkinkan pengguna untuk memasukkan stok gambar dari Unsplash dan Giphy menggunakan bilah samping.

Di pos ini, saya akan memandu Anda melalui proses penerapan sesuatu yang serupa dan membuat plugin Anda kompatibel dengan Gutenberg melalui Sidebar API.

Kotak meta agak siap untuk Gutenberg secara default, tetapi tidak cukup

Mari kita mulai dengan kotak meta. Mari kita ambil sebuah plugin yang menggunakan kotak meta sederhana untuk memberikan beberapa fungsionalitas kepada pengguna di layar editor.

Ini dapat terlihat seperti berikut ini di Editor Klasik:

Kotak Meta di Editor Klasik

Anda dapat menggunakan kode berikut untuk membuat kotak meta – itu juga tersedia di Halo Gutenberg gudang:

/ **
* Daftarkan Hello Gutenbert Meta Box
* /
function hello_gutenberg_add_meta_box () {
add_meta_box (‘hello_gutenberg_meta_box’, __ (‘Hello Gutenberg Meta Box’, ‘hello-gutenberg’), ‘hello_gutenberg_metabox_callback’, ‘post’);
}
add_action (‘add_meta_boxes’, ‘hello_gutenberg_add_meta_box’);

/ **
* Halo Gutenberg Metabox Callback
* /
function hello_gutenberg_metabox_callback ($ post) {
$ value = get_post_meta ($ post->ID, ‘_hello_gutenberg_field’, true);
?>
<?php _e (‘Siapa namamu?’, ‘hello-gutenberg’) ?>

<?php
}

/ **
* Simpan Hello Gutenberg Metabox
* /
function hello_gutenberg_save_postdata ($ post_id) {
if (array_key_exists (‘hello_gutenberg_field’, $ _POST)) {
update_post_meta ($ post_id, ‘_hello_gutenberg_field’, $ _POST [‘hello_gutenberg_field’]);
}
}
add_action (‘save_post’, ‘hello_gutenberg_save_postdata’);

Jadi pertanyaan untuk ditanyakan di sini adalah:

Apakah kita perlu membuat Gutenberg ini kompatibel di tempat pertama?

Pada titik ini, kita harus mempertimbangkan untuk bertanya pada diri sendiri apa yang kompatibel dengan Gutenberg. Misalnya, jika Anda menggunakan kotak meta yang sangat ini di Gutenberg tanpa membuat perubahan padanya, itu akan tetap berfungsi.

Namun, ketika kita berbicara tentang kompatibilitas Gutenberg, kita tidak hanya berbicara tentang plugin yang berfungsi di lingkungan Gutenberg, tetapi plugin yang berfungsi * seperti Gutenberg *.

"Mengapa?" – kamu akan bertanya. Sederhananya, pengguna yang akan mulai menggunakan WordPress setelah Gutenberg adalah editor default akan menemukan cara lama untuk menjadi kontra-intuitif. Selain itu, mereka akan mengharapkan gaya yang lebih mirip Gutenberg untuk semua yang ada di editor.

Jika Anda tidak memberi nuansa asli kepada pengguna, mereka pasti akan mencari alternatif yang akan bekerja lebih baik dengan Gutenberg.

Akhirnya, mari kita membuat tangan kita kotor dengan beberapa kode!

Memulai dengan Sidebar API

Kami akan mulai mengkode Sidebar kami di Gutenberg untuk memasukkan bidang meta kami. Anda dapat terus menggunakan Gutenberg Boilerplate repositori sebagai titik awal.

Mempersiapkan kotak meta Anda untuk Gutenberg

Sebelum kita mulai, pertama-tama kita harus memberi tahu Gutenberg bahwa kita tidak akan menggunakan kotak meta kita di Gutenberg. Anda dapat melakukannya dengan meneruskan argumen __back_compat_meta_box ke fungsi add_meta_box, seperti:

/ **
* Daftarkan Hello Gutenberg Metabox
* /
function hello_gutenberg_add_meta_box () {
add_meta_box (‘hello_gutenberg_meta_box’, __ (‘Hello Gutenberg Meta Box’, ‘hello-gutenberg’), ‘hello_gutenberg_metabox_callback’, ‘post’, array (
‘__back_compat_meta_box’ => Salah,
));
}
add_action (‘add_meta_boxes’, ‘hello_gutenberg_add_meta_box’);

Gutenberg Handbook memiliki detail lebih lanjut tentang cara menangani porta kotak meta PHP ke Gutenberg (sini).

Ini akan memastikan bahwa kotak meta PHP lama kami tidak lagi muncul di Gutenberg. Sekarang kita juga perlu membuat bidang meta kita siap untuk Gutenberg dengan menambahkannya ke WordPress REST API. Anda dapat menambahkan kode berikut untuk mendaftarkan bidang meta dengan REST API:

/ **
* Daftarkan Hello Gutenberg Meta Field ke Rest API
* /
function hello_gutenberg_register_meta () {
register_meta (
‘pos’, ‘_hello_gutenberg_field’, array (
‘type’ => ‘tali’,
‘tunggal’ => benar,
‘show_in_rest’ => benar,
)
);
}
add_action (‘init’, ‘hello_gutenberg_register_meta’);

Ini akan menambahkan _hello_gutenberg_field ke meta objek di REST API.

Fungsi ini hanya akan melakukan pekerjaan menampilkan nilai kami di REST API. Sekarang kita juga perlu menambahkan metode untuk memperbarui bidang meta kita menggunakan REST API.

Kode berikut akan menambahkan rute khusus kami ke WordPress REST API, yang akan menjadi / hello-gutenberg / v1 / update-meta /:

/ **
* Daftarkan Hello Gutenberg Metabox ke Rest API
* /
function hello_gutenberg_api_posts_meta_field () {
register_rest_route (
‘hello-gutenberg / v1’, ‘/ update-meta’, array (
‘metode’ => ‘POS’,
‘callback’ => ‘hello_gutenberg_update_callback’,
‘args’ => Himpunan(
‘id’ => Himpunan(
‘sanitize_callback’ => ‘absint’,
),
),
)
);
}
add_action (‘rest_api_init’, ‘hello_gutenberg_api_posts_meta_field’);

/ **
* Hello Gutenberg REST API Callback untuk Gutenberg
* /
function hello_gutenberg_update_callback ($ data) {
return update_post_meta ($ data [‘id’], $ data [‘key’], $ data [‘value’]);
}

Rute REST API ini akan digunakan untuk memodifikasi bidang meta kami dari bilah samping Gutenberg. Anda dapat mempelajari lebih lanjut tentang WordPress REST API dan caranya daftarkan rute khusus dari sini.

Demikian pula, jika Anda ingin tahu apa itu WordPress REST API dan bagaimana memulainya, Anda dapat membaca posting blog kami: WordPress REST API: Apa itu dan bagaimana memulai menggunakannya.

Menambahkan blok bilah sisi ke Gutenberg

Mari kita mulai dengan kode Bilah Samping dari Gutenberg Boilerplate:

/ **
* Pustaka blok internal
* /
const {__} = wp.i18n;

const {Fragment} = wp.element;

const {
PluginSidebar,
PluginSidebarMoreMenuItem,
} = wp.editPost;

const {registerPlugin} = wp.plugins;

const komponen = () => (

{__ (‘Gutenberg Boilerplate’)}

{ __( ‘Halo Dunia!’ ) }

);

registerPlugin (‘gutenberg-boilerplate’, {
ikon: ‘situs admin’,
render: Komponen,
});

Ini akan menyisipkan sidebar yang sangat sederhana ke editor Gutenberg. Kami akan mengambil ini sebagai titik awal dan membangun proyek kami di atasnya.

Contoh kode berasal dari repositori Gutenberg Boilerplate kami, dan sebagai hasilnya, kami perlu mengganti semua kemunculan "Gutenberg Boilerplate" dengan "Halo Gutenberg".

Komponen yang Digunakan

Sementara sidebar kami sudah mengimpor banyak komponen, kami akan membutuhkan lebih banyak. Anda dapat mengganti bagian atas kode dengan yang berikut ini:

/ **
* Pustaka blok internal
* /

const {__} = wp.i18n;

const {
PluginSidebar,
PluginSidebarMoreMenuItem
} = wp.editPost;

const {
PanelBody,
TextControl
} = wp.components;

const {
Komponen,
Pecahan
} = wp.element;

const {withSelect} = wp.data;

const {registerPlugin} = wp.plugins;

Mari belajar dengan cepat tentang semua komponen yang telah kami impor.

  1. Seperti dibahas dalam artikel sebelumnya, the __ komponen digunakan untuk membuat teks kami dapat diterjemahkan.
  2. Itu PluginSidebar komponen digunakan untuk menambahkan bilah sisi kami ke Gutenberg.
  3. PluginSidebarMoreMenuItem digunakan untuk menambahkan tombol ke menu Gutenberg, yang mengubah visibilitas sidebar.
  4. Itu PanelBody komponen digunakan untuk menambahkan panel ke bilah sisi kami.
  5. TextControl digunakan untuk bidang input kami.
  6. Setelah itu, kami mengimpor Komponen dan Pecahan komponen. Keduanya adalah komponen Bereaksi yang kami gunakan di sidebar kami.
    • Komponen Fragmen digunakan untuk mengelompokkan daftar anak-anak tanpa menambahkan node tambahan ke DOM. Kita perlu menggunakan komponen Fragmen dalam kode kita karena JSX tidak mengizinkan kita untuk memiliki lebih dari satu simpul induk.
  7. denganPilih adalah komponen tingkat tinggi. Untuk mempelajari komponen tingkat tinggi, saya sarankan Anda membaca dokumentasi ini.
  8. Dan akhirnya, kami mengimpor daftarPlugin, yang mirip dengan registerBlockType yang kami gunakan di artikel sebelumnya. Alih-alih mendaftarkan blok, registerPlugin mendaftarkan plugin Anda.

Menambahkan Kontrol

Sejauh ini sidebar kami hanyalah fungsi Komponen, tetapi karena kami akan menggunakan metode siklus hidup React, kami akan mengubahnya menjadi komponen Bereaksi, seperti:

class Hello_Gutenberg memperluas Component {
render () {
kembali (

{__ (‘Hello Gutenberg’)}

{ __( ‘Halo Dunia!’ ) }

)
}
}

registerPlugin (‘hello-gutenberg’, {
ikon: ‘situs admin’,
render: Hello_Gutenberg,
});

Ini akan membuat sidebar Anda berfungsi dengan teks biasa.

Sekarang, mari tambahkan bidang kami ke bilah sisi. Seharusnya komponen kita terlihat seperti ini:

class Hello_Gutenberg memperluas Component {
render () {
kembali (

{__ (‘Hello Gutenberg’)}

)
}
}

Pertama, kami telah mendefinisikan keadaan awal, yang pada dasarnya adalah kunci dan nilai dari bidang meta kami. Setelah itu, kami menggunakan apiFetch untuk mengambil data dari pos kami saat ini.

Kami melewati ID dari posting kami saat ini dengan variabel $ {this.props.postId}. Kami akan kembali ke titik ini nanti.

Setelah data diambil, kami memperbarui status kami dengan nilai dari REST API kami.

Sekarang, mari kita kembali ke variabel postId. Kami saat ini tidak tahu ID dari posting kami saat ini, jadi untuk itu kami menggunakan komponen withSelect yang lebih tinggi, seperti ini:

const HOC = withSelect ((pilih) => {
const {getCurrentPostId} = select (‘core / editor’);
kembali {
postId: getCurrentPostId (),
};
}) (Hello_Gutenberg);

registerPlugin (‘hello-gutenberg’, {
ikon: ‘situs admin’,
render: HOC,
});

Ini akan melewati ID posting kami saat ini sebagai variabel postId. Sekarang Anda dapat menjalankan pos yang lebih lama, dan bilah samping Gutenberg kami akan menampilkan nilai bidang meta Anda.

Perbarui nilai meta

Sekarang kita perlu mengizinkan bilah sisi kita juga memperbarui nilai meta. Mirip dengan mengambil detail, kami akan menggunakan wp.apiRequest utilitas.

Setiap kali nilai kondisi kami berubah, kami akan memperbaruinya dengan REST API. Untuk ini, pertama-tama kita perlu menambahkan acara onChange ke TextControl kita, seperti ini:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map