Cara Menyesuaikan Plugin Anda untuk Gutenberg: Bagian 1 (Blok API)

"Saya punya plugin," kata kamu, "bagaimana cara membuatnya siap Gutenberg?"


Kisahnya sederhana; Gutenberg adalah pengalaman editor baru di WordPress, yang akan digabungkan menjadi inti dalam rilis besar berikutnya. Banyak plugin yang tidak mengikuti ini akan menjadi usang. Ini membuatnya penting bahwa Anda mengadaptasi plugin Anda untuk Gutenberg sebelum terlambat.

Siapa yang terpengaruh?

Hampir semua plugin yang ada hubungannya dengan editor pos akan dipengaruhi oleh Gutenberg. Misalnya, jika plugin Anda menambahkan tombol di TinyMCE untuk kemudian menempatkan kode pendek di editor, berita buruk; itu akan menjadi akhirnya.
Adaptasikan Plugin Anda untuk Gutenberg: Bagian 1 (Blok API)

"Apakah saya perlu menyesuaikan plugin saya untuk Gutenberg?"

Jadi plugin mana yang perlu diperbarui untuk Gutenberg? Plugin apa pun yang berfungsi:

  • Metabox khusus
  • Kode pendek
  • Tombol TinyMCE
  • atau fitur editor apa pun

Meskipun beberapa plugin masih akan bekerja dengan Gutenberg, seperti plugin yang menambahkan metabox sederhana, misalnya, itu tidak akan semulus pengalaman bagi pengguna Anda.

Bahkan kode pendek akan tetap berfungsi seperti sebelumnya, tetapi hanya akan menjadi simpul teks biasa di editor, sementara semua plugin kode pendek untuk Gutenberg akan mengikuti UI bloknya dan akan lebih mudah bagi pengguna untuk menggunakan.

Jadi ya, pengguna akan lebih memilih plugin yang dibuat untuk pengalaman Gutenberg. Dan yang tertinggal akan digantikan oleh plugin pesaing.

Sekadar memberi Anda ide, inilah contoh bagaimana pengalaman editor lama standar pengguna dengan sebuah plugin milik kami (Sebuah), dan kemudian seperti apa di Gutenberg (b) – dengan plugin yang dioptimalkan untuk itu.

(b)Feedzy Feed RSS - plugin siap Gutenberg

Jangan takut! Kami di sini untuk membantu Anda membuat plugin Anda siap-Gutenberg. Ada banyak cara untuk mengintegrasikan plugin Anda ke Gutenberg, tergantung pada cara kerja plugin Anda, yang akan kita diskusikan di artikel ini.

Hal-hal yang perlu diketahui sebelumnya. Gutenberg ditulis di React. Dan plugin Gutenberg dikodekan dalam JavaScript, yang juga dapat menjadi transisi kasar bagi pengembang yang hanya kode dalam PHP. Meskipun Anda tidak perlu memiliki pengetahuan tentang Bereaksi untuk membuat plugin untuk Gutenberg, Anda akan memerlukan pemahaman dasar tentang JavaScript. Jika sebelumnya Anda pernah bekerja pada Bereaksi dan BEJ maka itu akan menjadi alasan yang sama untuk Anda.

Meskipun tidak cukup dokumentasi resmi untuk Gutenberg, repositori Github-nya memiliki banyak informasi berharga untuk pengembang. Jika Anda ingin mempelajari perkembangan Gutenberg secara mendalam, Anda harus tetap membuka mata terhadap segala sesuatu yang terjadi di repositori Gitberg Gutenberg karena proyek ini bergerak sangat cepat, dan banyak hal berubah setiap hari..

Cara menyesuaikan plugin Anda untuk Gutenberg

API Gutenberg memberi kami banyak cara untuk memperluas editor, seperti Block API, Shortcode API, dan banyak lagi. API mana yang digunakan tergantung pada jenis plugin apa yang kami bangun.

Jika plugin Anda adalah plugin shortcode sederhana, maka Block API dapat digunakan untuk membuat blok yang indah untuk editor. Tetapi jika plugin Anda menggunakan metabox kompleks di mana blok tidak cukup, kita bisa menggunakan Sidebar API.

Selain itu, kami akan menggunakan tumpukan modern alat pengembangan JavaScript, seperti NodeJS, NPM, webpack, dan ESNext. Kami akan memberi Anda contoh file, sehingga Anda tidak perlu khawatir tentang pengaturan lingkungan pengembangan Anda.

Dalam posting ini, kita akan melihat cara membuat plugin Anda kompatibel dengan Gutenberg dengan menggunakan Block API. Kami akan masuk ke metode lain (API Bilah Samping, Panel Publikasi, Bilah Status & API serupa) pada bagian dua jika diperlukan.

Anda dapat menemukan semua contoh yang disebutkan di repositori GitHub ini.

Lingkungan pengembangan Gutenberg

Berkembang untuk Gutenberg mengharuskan Anda menyiapkan banyak alat, seperti NPM, paket web, Babel, dan JSX. Butuh banyak waktu dan usaha, jadi kami telah menyiapkan lingkungan untuk Anda.

Gutenberg Boilerplate adalah sebuah plugin dengan setup dan contoh pengembangan Gutenberg minimal. Ini berisi satu blok dan contoh sidebar. Anda dapat menggunakan ini untuk memperluas ke blok kustom Anda.

Gutenberg Boilerplate

Anda dapat melakukan fork atau clone Repositori Gutenberg Boilerplate untuk Anda / wp-content / plugins / dan menggunakannya sebagai lingkungan pengembangan Anda.

Setelah itu, Anda perlu menginstal NodeJS ke mesin Anda untuk memulai. Arahkan ke folder Gutenberg Boilerplate, dan jalankan npm install

Dari titik ini, Anda perlu mengetahui tiga perintah yang akan Anda gunakan selama proses pengembangan:

  • npm install – Instal dependensi proyek ketika Anda mengkloning proyek.
  • npm run dev – Kompilasi kode selama proses pengembangan. Anda perlu menjalankan ini sekali, dan itu akan terus memantau perubahannya.
  • npm run build – Kompilasi kode untuk build yang dioptimalkan setelah proses pengembangan selesai.

Blokir API

Blok adalah elemen dasar dari Gutenberg, itu menjadi editor berbasis blok. Blokir API memungkinkan Anda membuat blokir untuk Gutenberg. Anda dapat membuat blok yang dapat merender HTML dasar, kode pendek, atau bahkan membuat blok dinamis untuk ditampilkan, misalnya, posting terbaru Anda.

Prosesnya didasarkan pada plugin yang ada

Dalam contoh kami, kami akan mengadopsi kode pendek Klik untuk Tweet ke blok Gutenberg. Kode pendek Klik untuk Tweet ini membuat Kotak Tweet dengan teks Anda, dan tombol untuk menciak teks itu. Seperti ini:

Klik untuk Tweet Layout

Kode pendek kami terlihat seperti ini:

[clicktotweet tweet ="Teks yang akan ditampilkan" tweetsent ="Teks yang akan di-tweet" tombol ="Menciak" tema ="klik untuk tweet"]

Kode pendek kami memiliki empat parameter:

  • tweet: Teks yang muncul di situs Anda.
  • tweetsent: Teks yang masuk ke Twitter.
  • tombol: tombol Tweet teks.
  • tema: Baik klik untuk tweet atau klik untuk tweet-alt sebagai tema kotak.

Mengadaptasi plugin untuk Gutenberg dengan Block API

Ada dua cara untuk melakukannya dengan Gutenberg, baik kita dapat merender HTML ke front-end, atau kita dapat menggunakan blok Gutenberg untuk merender kode pendek ke front-end. Untuk artikel ini, kita akan melakukan yang terakhir.

Semua kode tersedia di Halo repositori plugin Gutenberg di GitHub. Anda dapat mengkloning repositori untuk melihat plugin beraksi, atau mengubah kode.

Skrip / gaya enqueue untuk Gutenberg

Pertama, kita perlu mengirimkan skrip dan gaya kita ke editor Gutenberg menggunakan enqueue_block_assets:

/ **
* Enqueue front end dan editor JavaScript dan CSS
* /
function hello_gutenberg_scripts () {
$ blockPath = ‘/dist/block.js’;
$ stylePath = ‘/dist/block.css’;

// Enqueue file JS blok yang dibundel
wp_enqueue_script (
‘hello-gutenberg-block-js’,
plugins_url ($ blockPath, __FILE__),
[‘wp-i18n’, ‘wp-blocks’, ‘wp-editor’, ‘wp-components’],
filemtime (plugin_dir_path (__ FILE__). $ blockPath)
);

// Enqueue frontend dan gaya blok editor
wp_enqueue_style (
‘hello-gutenberg-block-css’,
plugins_url ($ stylePath, __FILE__),
”,
filemtime (plugin_dir_path (__ FILE__). $ stylePath)
);

}

// Kaitkan skrip berfungsi ke dalam block editor hook
add_action (‘enqueue_block_assets’, ‘hello_gutenberg_scripts’);

Kami telah menambahkan empat dependensi ke skrip kami yang akan kami gunakan di blok kami. Mari kita pelajari dependensi ini terlebih dahulu:

wp-i18n adalah versi fungsi internasionalisasi Gutenberg, seperti __ (). wp-blocks digunakan untuk fungsi registerBlockType yang mendaftarkan blok Anda. Kami menggunakan wp-editor dan skrip wp-komponen untuk berbagai komponen di blok kami.

Sekarang setelah kami merealisasikan aset Anda, kami dapat mulai menulis blokir kami /src/block.js mengajukan.

Mengimpor dependensi

Jika Anda menggunakan Gutenberg Boilerplate, maka Anda block.js file harus memiliki struktur blok dasar yang dapat Anda gunakan untuk membangun plugin untuk Gutenberg:

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

const {registerBlockType} = wp.blocks;

/ **
* Daftar blokir
* /
ekspor default registerBlockType (‘gutenberg-boilerplate / block’, {
// Blokir Judul
judul: __ (‘Gutenberg Boilerplate’),
// Blokir Deskripsi
deskripsi: __ (‘Contoh blok.’),
// Kategori Blokir
kategori: ‘umum’,
// Blokir Ikon
ikon: ‘situs admin’,
// Blokir Kata Kunci
kata kunci: [
__ (‘Boilerplate’),
__( ‘Halo Dunia’ ),
__ (‘Contoh’),
],
atribut: {
},
// Mendefinisikan antarmuka edit
edit: props => {
kembali (

{__ (‘Halo Backend’)}

);
},
// Mendefinisikan antarmuka front-end
save: props => {
kembali (

{__ (‘Hello Frontend’)}

);
},
});

Anda dapat menjalankan npm run dev untuk mulai mengkompilasi kode kami secara real time.

Pertama, kami akan mengimpor semua komponen dan pustaka yang kami butuhkan untuk blok di atas:

/ **
* Blok dependensi
* /

impor nama kelas dari ‘nama kelas’;

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

const {registerBlockType} = wp.blocks;

const {
Teks yang kaya,
InspectorControls,
BlockControls,
} = wp.editor;

const {
PanelBody,
TextareaControl,
TextControl,
Dashicon,
Bilah Alat,
Tombol,
Tip alat,
} = wp.components;

Impor pertama nama kelas yang kami instal menggunakan npm untuk menggunakan beberapa kelas dalam kode kami, karena JSX tidak mengizinkan beberapa kelas dalam elemen.

Kita akan belajar tentang komponen lain yang telah kita impor saat kita menggunakannya.

Tentukan atribut

Sekarang kita akan mendefinisikan empat atribut untuk blok Gutenberg kita, sama dengan kode pendek kita:

atribut: {
tweet: {
ketik: ‘string’,
},
tweetsent: {
ketik: ‘string’,
},
tombol: {
ketik: ‘string’,
default: __ (‘Tweet’),
},
tema: {
ketik: ‘boolean’,
default: false,
},
},

Seperti yang Anda lihat, semua atribut sama dengan kode pendek kami. Semua atribut memiliki kunci jenis, yang memberi tahu Gutenberg tipe datanya. Anda dapat menggunakan string, angka, boolean & objek sebagai tipe yang diterima.

Beberapa atribut juga mengandung nilai default. Atribut juga dapat memiliki properti lain, seperti sumber dan pemilih, yang tidak akan kami gunakan dalam contoh kami, tetapi Anda dapat pelajari lebih lanjut di sini.

Edit antarmuka

Sekarang kita akan membangun antarmuka edit blok kita, yang akan menjadi tampilan – pengguna akan melihatnya saat mengedit blok di Gutenberg.

Untuk mendapatkan ide dasar, pertama-tama kita dapat melakukan hard-code pada blok kita dan membangunnya dengan mengganti area berikut dalam kode kita:

// Mendefinisikan antarmuka edit
edit: props => {
kembali (

{__ (‘Halo Backend’)}

);
},

Dengan kode berikut:

// Mendefinisikan antarmuka edit
edit: props => {
kembali [

Labu dan Penguins

Menciak

];
},

Ini akan memberi Anda gambaran tentang hasil akhir kami. Akan terlihat seperti ini:

Pengaya untuk Gutenberg

Elemen pertama dari blok adalah area teks tweet. Kami akan menggantinya dengan bidang teks yang dapat diedit, mirip dengan blok heading Gutenberg.

Kami akan gunakan Teks yang kaya komponen yang sebelumnya kami impor untuk mengganti teks hard-coded kami.

Komponen RichText kami memiliki lima argumen. format adalah string, karena kita akan menggunakan kode pendek untuk menampilkan elemen di front-end. Jika kami ingin menggunakan pemilih dalam atribut kami, maka format akan menjadi array.

RichText memiliki beberapa opsi pemformatan secara default, seperti tebal dan miring, yang telah kami nonaktifkan dengan melewatkan array kosong dalam argumen pemformatanControls.

placeholder adalah teks placeholder ketika tidak ada teks di lapangan, dan onChange akan memicu fungsi onChangeTweet ketika acara perubahan terjadi.

Akhirnya, nilai akan menjadi nilai dari bidang kami, yang akan diambil dari atribut tweet yang kami definisikan sebelumnya.

Setelah kami menentukan area RichText kami, kami perlu membangun fungsiChangeTweet yang akan memicu ketika nilai berubah di bidang teks kami.

// Mendefinisikan antarmuka edit
edit: props => {
const onChangeTweet = value => {
props.setAttributes ({tweet: value});
};
kembali [
…sisa kode

Kami meneruskan nilai bidang RichText ke fungsi onChangeTweet, yang menggunakan props.setAttributes berfungsi untuk memperbarui nilai atribut tweet.

Anda akan melihat kekuatan Gutenberg sekarang ketika Anda menggunakan blok Anda.

RichField di Gutenberg

Bukankah itu luar biasa?

Inspektur Blok

Saat membuat plugin untuk Gutenberg, Anda tidak perlu menemukan kembali roda setiap kali untuk membuat panel opsi untuk plugin Anda. Gutenberg memberi kami cara yang disederhanakan untuk memungkinkan kustomisasi blok dan memastikan bahwa setiap pengguna memiliki pengalaman yang konsisten dengan pola UI bawaan.

Demikian pula dengan komponen RichText, komponen InspectorControls menambahkan bilah sisi saat blok dipilih. Sesuatu seperti ini:

Kontrol Inspektur Gutenberg

Kami juga akan menggunakan TextareaControl dan TextControl untuk menambahkan bidang textarea dan input teks ke area Inspektur kami.

Kami akan menambahkan kode berikut ke pernyataan pengembalian Anda:

!! props.is Terpilih && (

),

props.is Dipilih memeriksa untuk memastikan bahwa Inspektur hanya muncul ketika blok dipilih.

Komponen TextareaControl dan TextControl, mirip dengan RichText, memiliki nilai dan metode onChange.

Kami juga perlu mengubah kode tampilan blok Anda untuk mengakomodasi perubahan baru. Dalam kasus kami, kami hanya perlu menambahkan Teks Tombol ke blok kami karena Tweet Tweet akan ditambahkan ke tautan, jadi kami tidak perlu menampilkannya di backend kami.

Anda dapat mengganti hyperlink dalam kode awal kami dengan yang berikut ini:


{props.attributes.button}

Seperti disebutkan sebelumnya, kami menghapus hyperlink dari kode kami karena kami tidak perlu menampilkannya di backend. Ini akan membuat blok kami terlihat seperti ini:

Gutenberg Klik untuk Menciak Kontrol Inspektur

Block Inspector dapat menjadi alat yang ampuh untuk blok Anda. Jika plugin Anda memiliki opsi tingkat lanjut yang terlalu rumit untuk area editor, maka Anda dapat meletakkannya di area Inspektur.

Kami akan menambahkan satu opsi terakhir ke blok kami untuk menyelesaikan bagian JavaScript di bagian berikutnya.

Blok Toolbar

Block Toolbar adalah komponen UI pra-bangun lain yang dapat kita gunakan untuk menambahkan lebih banyak opsi ke blok kita. Ini akan muncul di atas blok Anda ketika Anda memilihnya. Contoh:

Gutenberg Block Toolbar

Idealnya, Block Toolbar harus berisi kontrol utama blok Anda, dengan Inspektur menampung kontrol sekunder. Namun, itu masih bisa diperdebatkan dan tergantung pada blok Anda.

Kami akan menggunakan area Block Toolbar untuk meng-host kontrol gaya alternatif kami.

Mirip dengan Block Inspector, kita perlu menambahkan kode berikut ke pernyataan kembali untuk menambahkan Toolbar Blok ke blok kita:

!! props.is Terpilih && (

),

Kami menggunakan komponen BlockControls dan Toolbar untuk menambahkan bilah alat ke blok kami. Mirip dengan Block Inspector, props.isSelected memastikan toolbar kami hanya muncul ketika kami menempatkan fokus pada blok kami.

Kami juga menggunakan komponen Tooltip dan Tombol untuk kontrol kami. Komponen tooltip melilit komponen Button untuk memastikan ada tooltip ketika Anda mengarahkan kontrol untuk memberi Anda lebih banyak konteks.

Komponen tombol menggunakan modul classnames yang kami impor sebelumnya dalam artikel. Kami menggunakan fungsi classnames untuk memberikan tiga kelas ke kontrol kami. Kelas ketiga, aktif, hanya muncul ketika nilai atribut tema kami benar.

Fungsi onChange-nya mengubah atribut tema menjadi true / false. Pada akhirnya, komponen Dashicon digunakan untuk menampilkan ikon untuk kontrol kami.

Kami juga harus mengubah kode blok kami agar dapat berfungsi dengan perubahan. Kita perlu mengganti baris berikut:

Dengan:

Kami sedang memeriksa apakah atribut tema benar atau salah, dan menetapkan kelas ke blok kami sesuai.

Sekarang blokir Anda akan terlihat seperti ini:

Klik untuk Tweet Toolbar

Kami telah menyelesaikan bagian sisi JavaScript dari blok Gutenberg kami. Anda dapat menemukan seluruh kode sumber file sini.

Sekarang kita akan menyelesaikan blok kita dengan menangani output sisi server.

Render sisi server

Gutenberg memungkinkan Anda untuk menggunakan rendering sisi server untuk menunjukkan blok Anda di front-end. Render sisi server memungkinkan kami membuat blok untuk kode pendek.

Pertama, kami akan membuat metode penyimpanan kami untuk mengembalikan nol dengan menggantinya dengan kode berikut:

// Mendefinisikan antarmuka front-end
save () {
// Rendering dalam PHP
kembali nol;
},

Kami akan menggunakan fungsi register_block_type PHP untuk mendaftarkan jenis blok kami di PHP:

if (function_exists (‘register_block_type’)) {
// Kaitkan rendering sisi server menjadi render callback
register_block_type (
‘hello-gutenberg / click-to-tweet’, [
‘render_callback’ => ‘hello_gutenberg_block_callback’,
‘atribut’ => Himpunan(
‘tweet’ => Himpunan(
‘type’ => ‘tali’,
),
‘tweetsent’ => Himpunan(
‘type’ => ‘tali’,
),
‘tombol’ => Himpunan(
‘type’ => ‘tali’,
‘default’ => ‘Menciak’,
),
‘tema’ => Himpunan(
‘type’ => ‘boolean’,
‘default’ => Salah,
),
),
]
);
}

Fungsi register_block_type kami. Kami pertama-tama memberikan nama blokir kepada kami, bersama dengan serangkaian argumen.

Argumen pertama adalah fungsi render_callback, yang memanggil fungsi hello_gutenberg_block_callback kami untuk rendering sisi server.

Setelah panggilan balik render kami, kami meneruskan atribut sebagai array, mirip dengan file block.js, yang kami gunakan dalam fungsi panggil balik render kami.

Fungsi panggilan balik render kami terlihat seperti ini:

function hello_gutenberg_block_callback ($ attr) {
ekstrak ($ ​​attr);
if (isset ($ tweet)) {
$ theme = ($ theme === true? ‘click-to-tweet-alt’: ‘click-to-tweet’);
$ shortcode_string = ‘[clicktotweet tweet ="% s" tweetsent ="% s" tombol ="% s" tema ="% s"] ‘;
kembalikan sprintf ($ shortcode_string, $ tweet, $ tweetsent, $ button, $ theme);
}
}

Kami mengekstrak semua atribut dan mengembalikannya di dalam kode pendek kami. Hanya itu yang diperlukan untuk mengadaptasi plugin shortcode Anda untuk Gutenberg.

Anda dapat menemukan semua kode yang digunakan dalam artikel ini dalam artikel ini halo-gutenberg gudang.

Pada bagian selanjutnya, kita akan melihat cara lain untuk mengadaptasi plugin yang ada untuk Gutenberg, termasuk Sidebar API.

Jika Anda memiliki pertanyaan tentang cara mengadaptasi plugin Anda untuk Gutenberg, silakan tanyakan di komentar!

Jangan lupa untuk bergabung dengan kursus kilat kami tentang mempercepat situs WordPress Anda. Dengan beberapa perbaikan sederhana, Anda dapat mengurangi waktu loading hingga 50-80%:

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