Mengambil Lompatan: Membangun Plugin Blok WordPress Pertama Saya

Seperti tahun-tahun sebelumnya, saya menghabiskan Hari Kemerdekaan AS ini bersama teman-teman berbulu saya. Saya menutup semua jendela, menutup tirai, menyalakan beberapa kipas untuk white noise, dan mengklik televisi. Saya dan kucing saya santai. Adalah tugas saya untuk membuat mereka tetap tenang sementara rekan-rekan saya — yang biasanya mabuk — menghabiskan ratusan dolar di langit malam. Ini adalah ritual saya, dan saya menikmatinya.

Untuk liburan ini, kami menonton ulang Musim 1 Star Trek: Dek Bawah , dan saya belajar cara membuat plugin blok.

Ini bukan usaha pertama saya. Ketika editor blok diluncurkan hampir tiga tahun yang lalu, saya mengotak-atik beberapa ide tipe blok. Namun, saya tidak pernah pergi jauh. Dokumentasi jarang, dan saya hampir tidak memiliki pengalaman dengan JavaScript selain membangun lonceng dan peluit sepele untuk desain front-end.

Meninggalkan pekerjaan harian saya sebagai pengembang untuk menulis untuk WP Tavern juga berarti waktu yang terbatas untuk mempelajari pengembangan blok. Dan, waktu luang saya selama beberapa tahun terakhir telah diisi dengan proyek-proyek lain. Akhir-akhir ini, saya memiliki keinginan untuk melompat kembali dan mulai membangun sesuatu untuk bersenang-senang sekali lagi. Cuti panjang saya dari pekerjaan pengembangan memberi saya waktu untuk mengejar minat lain sambil memberi kesempatan pada sumur kreativitas saya untuk diisi ulang. Istirahat itu membuatku baik-baik saja.

Dengan waktu untuk membunuh kemarin sore, saya terjun langsung. Setelah beberapa jam membaca dokumen, mempelajari kode pengembang lain, dan memecahkan banyak hal, saya memiliki blok fungsional untuk daftar remah roti.

Plugin Blok Hak Cipta Marcus Kazmierczak membantu saya mengatasi salah satu gundukan awal. Sangat membantu untuk melihat dunia nyata, kode non-contoh yang ditulis dalam vanilla JavaScript untuk memahami cara kerja sistem.

Keseluruhan pemikiran saya tentang membangun jenis blok khusus?

Itu lebih mudah daripada yang saya kira. Dokumentasi, pada saat yang sama, sangat banyak dan membatasi. Sulit untuk menemukan jawaban yang benar jika Anda bahkan tidak tahu apa yang Anda cari. Hambatan untuk masuk jauh lebih tinggi daripada ketika saya membuat plugin pertama saya di tahun 2007. Block Type API membuat beberapa hal menjadi sangat sederhana tetapi memperumit yang lain.

Berhasil memasukkan jenis blok pertama saya ke dalam kanvas editor sangat memuaskan. Saya tidak berpikir perasaan itu pernah hilang sebagai pengembang.

Saya senang dengan potensi pemblokiran, seperti daftar remah roti, saat editor situs diluncurkan. Banyak fitur serupa tidak masuk akal di editor pos. Namun, ketika pengguna dapat mengedit langsung template mereka, itu akan membuka banyak kemungkinan.

Kurva Pembelajaran

Saya cukup tahu JavaScript untuk menjadi bahaya bagi diri saya sendiri dan orang lain. Setelah menghabiskan hampir seluruh karir profesional saya di ranah WordPress berarti fokus pada PHP. Tapi, pemrograman adalah pemrograman. Setelah Anda memiliki pemahaman yang kuat tentang satu bahasa, bukan hal yang mustahil untuk bermain-main cukup untuk membuat skrip fungsional dalam bahasa lain. Sebagian besar konsep dasar yang sama ada di sana. Rintangannya sering kali dengan mempelajari beberapa sintaks baru.

Namun, kendala terbesar dengan JavaScript "modern" adalah menyiapkan alat build, bundler, dan banyak lagi. Ini bisa menjadi tugas yang sulit untuk bahkan mengetikkan baris kode pertama itu.

Tentu, beberapa dokumentasi memiliki contoh JavaScript vanilla, tetapi ketika Anda masuk ke sesuatu yang lebih kompleks daripada dasar-dasarnya, itu bukan vanilla lagi. Anda akan membutuhkan cara untuk menggabungkan JavaScript dan mengubah sintaks JSX. Itu berarti alat seperti webpack dan Babel.

WordPress memiliki skrip sendiri untuk memotong sebagian besar kerumitan, tetapi saya merekomendasikan Laravel Mix. Ini cukup sederhana bahkan untuk programmer JavaScript yang paling tidak mengerti di antara kita dan memiliki dokumentasi yang menyeluruh. Ini adalah skrip yang dibuat untuk orang-orang yang tidak ingin terlalu khawatir tentang perkakas dan lebih banyak tentang menulis kode.

Membangun blok juga merupakan jenis lompatan yang berbeda. Baik itu tag templat khusus, kode pendek, widget, atau kait, pengembangan WordPress tradisional berarti membangunnya di lingkungan PHP. Saya menduga bahwa sebagian besar pengembang plugin memiliki banyak fitur yang dapat mereka bawa ke massa melalui editor blok. Mereka akan sering mengandalkan rendering sisi server. WordPress memiliki komponen ServerSideRender untuk benar-benar menangani ini.

Salah satu fitur paling praktis dari mendaftarkan jenis blok adalah sistem "mendukung" blok. Ingin pilihan warna latar belakang? Hanya satu baris kode yang akan dilakukan. Ingin pengguna mengakses kontrol ukuran font? Itu juga satu baris. Dengan sedikit usaha, saya memperluas blok remah roti saya untuk menyertakan banyak opsi gaya untuk pengguna. Dan, mereka beradaptasi dengan tema aktif situs.

Daftar fitur yang didukung blok menawarkan serangkaian opsi standar tanpa biaya pengembangan. Bahkan Customize API, yang sebelumnya merupakan alat paling canggih untuk membuat bidang formulir, tidak sedekat ini.

Membangun kontrol inspektur khusus sangat mudah setelah saya memahami cara kerja blok edit potongan teka-teki. Untuk saat ini, saya memiliki opsi sakelar sederhana untuk mengaktifkan/menonaktifkan fitur. Seringkali, bagian tersulit hanyalah menemukan apa yang Anda cari. WordPress memiliki perpustakaan besar komponen untuk dipilih.

Pada titik ini, saya memiliki blok dasar di sisi klien (editor). Sebagian besar kerumitan ditangani di server melalui PHP. Jika saya bisa membangun ini di sore hari saat merawat kucing yang gugup, seharusnya tidak terlalu sulit bagi lebih banyak penulis plugin untuk naik kereta ini. Ada ribuan kode pendek dan widget yang dapat dikonversi pengembang menjadi blok dengan kode minimal.

Saya belum siap untuk melepaskan blok remah roti saya ke alam liar dulu. Masih ada beberapa penyempurnaan yang harus dilakukan dan beberapa fitur lanjutan untuk diterapkan. Juga, daftar remah roti terutama diperlukan dalam konteks editor situs di mana pengguna dapat memasukkannya ke dalam sesuatu seperti templat tajuk mereka. Kami belum sampai di sana, tetapi saya pasti akan membagikan hasil akhirnya dengan komunitas ketika kami berada.

Selanjutnya, saya akan mencoba membangun blok yang tidak bergantung pada rendering sisi server. Saya pikir saya sudah menguasainya sekarang. Menerobos penghalang awal itu selalu merupakan langkah tersulit.