Cara Menambahkan Tombol ke Editor Gutenberg

Dibenci oleh beberapa orang dan dicintai oleh banyak orang, jelas bahwa editor blok WordPress baru tidak membuat Anda acuh tak acuh. Sudah bersama kami selama lebih dari sebulan sekarang dan lebih banyak plugin dan tema yang kompatibel dengannya.

Sebagai pengembang plugin, saya harus mengatakan bahwa mengadaptasi produk kami ke Gutenberg bukanlah sesuatu yang dapat dilakukan dalam beberapa hari. Di Nelio, kami telah mengikuti evolusi dan pengembangan editor blok baru selama beberapa waktu agar dapat mempertahankan fungsionalitas yang sama dari plugin kami tanpa perubahan signifikan.

Salah satu poin kunci untuk dapat mengadaptasi Nelio Content ke Gutenberg adalah kemampuan menambahkan tombol di blok teks untuk terus melakukan hal yang sama seperti yang kami lakukan dengan TinyMCE (editor klasik). Saya mengingatkan Anda bahwa salah satu fitur paling menarik dari Konten Nelio adalah memungkinkan Anda memilih frasa di dalam konten untuk dibagikan ke jejaring sosial Anda secara langsung, atau untuk menandainya dan kemudian algoritme kami akan memilih yang paling relevan dan menyiapkan rangkaian. pesan promosi otomatis. Saya menjelaskannya kepada Anda sebelumnya di posting ini.

Untuk memasukkan tombol tambahan di TinyMCE, WordPress memiliki dokumentasi yang cukup lengkap. Tapi bagaimana kita melakukannya di Gutenberg? Bagaimana cara menambahkan tombol di blok teks kaya di WordPress?

Jelas bahwa menjaga fungsi ini adalah kunci untuk terus menyediakan produk berkualitas seperti Konten Nelio, tidak hanya untuk pelanggan kami tetapi juga untuk diri kami sendiri, karena kami juga tertarik untuk menggunakan fungsi penyorotan kalimat di Gutenberg.

Untuk alasan ini, saya memutuskan untuk membuka masalah di GitHub dari proyek Gutenberg yang menjelaskan masalahnya dan meminta bantuan pada Januari 2018 (hampir setahun yang lalu, pada saat menerbitkan posting ini). Di sana saya meminta kemungkinan menambahkan tombol ke blok teks Gutenberg untuk bekerja dengan teks yang dipilih di blok tersebut.

Evolusi masalah itu positif dan pada akhirnya fungsionalitas seperti itu ditambahkan berkat Jenis Format Gutenberg. Karena dokumentasinya masih sangat buruk (saat saya menulis posting ini), saya akan menjelaskan cara menambahkan tombol khusus ke blok teks editor blok, sehingga Anda tidak membuang waktu dan memiliki waktu yang lebih mudah daripada Aku.

Anda akan menemukan semua kode plugin yang menambahkan tombol ke editor di repositori GitHub ini. Meskipun cukup sederhana, saya akan menjelaskan lebih detail bagian terpenting dari proyek ini.

File proyek utama adalah yang akan Anda temukan di /src/js/gutenberg.js dan yang Anda miliki di bawah ini:

Fungsi registerFormatType khusus untuk inti WordPress dan merupakan fungsi yang memungkinkan Anda menambahkan tipe format baru, bersama dengan tombol yang memicu tindakan. Anda memberikan nama ( 'nelio/button' ) dan objek JavaScript dengan argumen sebagai parameter. Di antara argumen tersebut, Anda memiliki metode edit , yang merupakan salah satu yang mengembalikan React Element , yang dalam kasus kami akan menjadi tombol yang ingin kami tempatkan di blok.

Tombol ini adalah RichTextToolbarButton , yang tidak lebih dari komponen React dari editor Gutenberg itu sendiri yang dapat Anda temukan didefinisikan di sini. Komponen ini membutuhkan ikon (dalam hal ini file SVG dengan logo Nelio), judul tombol, dan fungsi yang akan dijalankan saat tombol diklik. Fungsi ini akhirnya memanggil fungsi doTheJob , di mana teks yang dipilih diambil dan dicetak di konsol browser. Itu adalah tempat di mana Anda dapat menambahkan kode JavaScript apa pun yang Anda inginkan untuk menangani teks yang dipilih itu.

Di atribut ikon RichTextToolbarButton Anda dapat meletakkan string dengan nama Dashicon WordPress alih-alih SVG. Agar SVG berfungsi, perlu diingat bahwa kami menggunakan paket svg-react-loader yang mengubah file SVG menjadi elemen React, yang dibutuhkan oleh komponen React ini.

Kode menggunakan sintaks ES6+ untuk membuatnya lebih mudah dipahami, tetapi untuk membuatnya berfungsi, Anda harus memprosesnya dengan Babel, dan untuk itu kami memiliki konfigurasi ini di webpack:

Saya tidak akan menjelaskan secara rinci untuk apa setiap baris dari file konfigurasi webpack sebelumnya, tetapi jika Anda melihatnya, Anda akan melihat bahwa kami menggunakan svg-react-loader untuk file SVG dan babel-loader untuk memproses JavaScript dan mengonversi menjadi kode yang berfungsi di browser apa pun. Saya sudah membicarakan semua teknologi modern ini di posting ini.

Hasilnya adalah file JavaScript gutenberg.js yang muncul di /dist/js . Sekarang yang harus kita lakukan adalah memuat file ini ke layar edit WordPress, menggunakan (seperti biasa) wp_enqueue_script :

Perhatikan bahwa skrip diantrekan di enqueue_block_editor_assets hook, yang memastikan bahwa skrip hanya akan dimuat saat editor blok WordPress digunakan.

Jika Anda ingin mencoba kodenya, unduh proyek GitHub dan pindahkan folder ke WordPress Anda di dalam /wp-content/plugins . Di sana, buka terminal dan jalankan npm install . Anda harus menginstal NodeJS agar semuanya berfungsi dan dapat menyertakan dependensi yang diperlukan yang diperlukan kode kami.

Ketika Anda memiliki dependensi, jalankan npm run build di terminal untuk menghasilkan kode akhir (memproses JavaScript dan seterusnya). Sekarang Anda dapat membuka WordPress Anda dan mengaktifkan plugin yang baru saja kami tambahkan.

Saat Anda membuka posting untuk diedit, Anda akan melihat tombol baru muncul di blok teks. Jika Anda memilih fragmen teks dan mengklik tombol, Anda akan melihat teks yang dipilih muncul di konsol browser. Inilah yang kami harapkan terjadi seperti yang kami lihat pada kode di atas.

Untuk mengetahui lebih lanjut…

Ini hanya contoh minimal bagaimana menempatkan tombol di blok teks. Jika Anda ingin teks yang dipilih diubah ketika Anda mengklik tombol, saya mendorong Anda untuk meninjau kode plugin ini di mana beberapa tombol dengan format yang berbeda dan lebih kompleks ditambahkan.

Di sisi lain, bagi Anda yang ingin masuk lebih dalam ke subjek, saya sarankan Anda melihat kode plugin GhostKit, yang memodifikasi antarmuka default Gutenberg dengan menambahkan elemen tambahan yang berbeda. Ini juga merupakan kode yang terstruktur dengan sangat baik dan mudah dimengerti.

Pada titik tertentu kami akan memiliki dokumentasi resmi dan terperinci yang mencakup semua aspek fitur Gutenberg ini, tetapi untuk saat ini kami harus membaca kode untuk mempelajari cara menerapkan jenis modifikasi editor blok WordPress ini. Semoga beruntung!

Gambar unggulan oleh Ashim D'Silva di Unsplash.