Cara Menambahkan Tombol ke Editor Gutenberg menggunakan @wordpress/scripts

Hampir satu setengah tahun yang lalu, Antonio menulis posting blog ini menjelaskan salah satu kesulitan yang kami hadapi saat mengadaptasi plugin kami ke editor blok WordPress yang baru. Hasil tutorialnya terlihat seperti ini:

Untungnya atau sayangnya, Gutenberg telah banyak berubah dalam satu setengah tahun ini. Tumpukan pengembangan telah berkembang dan meningkat dan pengembang plugin dan tema harus merangkul dan mengadaptasi teknologi baru. Dan kami yang juga menulis tentang pengalaman kami dan membagikan apa yang kami pelajari sekarang "dipaksa" untuk memperbarui tutorial kami sehingga Anda dapat tetap up to date. Tapi kami senang tentang itu!

Beberapa minggu yang lalu, Ivan, salah satu pembaca kami, meninggalkan kami komentar di tutorial Antonio meminta bantuan. Rupanya dia tidak dapat mengimplementasikan plugin Antonio. Dan, sejujurnya, ini tidak mengejutkan saya, karena banyak hal telah berubah akhir-akhir ini. Jadi, untuk membantu Ivan dan Anda semua yang membaca kami dan ingin terus belajar tentang WordPress, mari buat ulang tutorial tentang cara menambahkan tombol ke editor blok Gutenberg dengan memanfaatkan semua alat baru yang ditawarkan WordPress kepada kami!

Buat plugin

Hal pertama yang harus kita lakukan adalah membuat plugin WordPress. Ini cukup mudah. Pada dasarnya, yang harus kita lakukan adalah membuat folder di wp-content/plugins dengan nama yang ingin kita berikan pada plugin kita (misalnya, gutenberg-button ) dan, di dalamnya, buat file dengan nama yang sama dan .php ekstensi .php . Kemudian ketik kode berikut di file plugin Anda:

Sekarang, mari kita lihat lebih dekat apa yang dilakukan cuplikan sebelumnya:

• Pertama kita buka tag <?php . Tidak ada kejutan di sini.
• Selanjutnya, di file utama ini, kami menambahkan komentar multi-baris. Komentar mencakup beberapa baris dengan pasangan “Kunci / Nilai”. Misalnya, kita melihat bagaimana kita menentukan nama plugin ( Plugin Name ), versinya ( Version ) atau nama pembuatnya ( Author ). Semua informasi ini kemudian akan terlihat di bagian Plugin di WordPress.
• Terakhir, kami menambahkan beberapa kode boilerplate:
  • kami menentukan namespace (kami berbicara tentang namespace di sini),
  • kami memastikan bahwa, jika file berjalan, itu dijalankan sebagai bagian dari WordPress, dan
  • kami mendefinisikan beberapa konstanta tentang plugin (yang akan membantu nanti).

Setelah kita melakukan semua ini, jika kita pergi ke layar Plugin WordPress kita, kita akan melihat bahwa Tombol Gutenberg ada di sana:

kami mengaktifkannya dan… voila! Tentu, itu tidak akan melakukan apa-apa, tetapi itu sudah ada di sana.

Pengembangan plugin JavaScript

Saat ini, pengembang WordPress harus mahir dengan JavaScript. Itulah salah satu konsekuensi Gutenberg menjadi inti, saya kira. Dan tutorial ini tidak terkecuali.

Mempersiapkan lingkungan

Jika kita ingin menambahkan tombol baru ke antarmuka Gutenberg, kita harus mengkodekan fitur ini dalam JavaScript. Jadi mari kita siapkan lingkungan pengembangan JavaScript di plugin kita. Untuk melakukan ini, cukup jalankan perintah berikut dari baris perintah Anda (pastikan Anda menggunakan wp-content/plugins/gutenberg-button saat melakukannya):

 npm init

dan ikuti petunjuknya:

 This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (gutenberg-button) version: (1.0.0) description: Adding a formatting button in Gutenberg. entry point: (index.js) ...

Hasil dari proses ini adalah file package.json . Seperti yang akan Anda lihat beberapa saat lagi, file ini akan sangat membantu di masa mendatang.

Seperti yang telah saya ungkapkan dalam judul posting ini, kami akan menggunakan @wordpress/scripts untuk membuat plugin kami. Jadi mari kita tambahkan sebagai ketergantungan dengan menjalankan perintah berikut:

 npm install --save-dev @wordpress/scripts

Perintah ini akan mengunduh banyak dependensi di dalam plugin kami (di bawah node_modules ) dan akan memodifikasi package.json kami sehingga jelas bahwa @wordpress/scripts sekarang menjadi dependensi pengembangan.

Jika Anda melihat dokumentasi paket ini, Anda akan melihat bahwa paket ini menyertakan banyak skrip untuk dibuat, memvalidasi sintaks, kode format, dll:

 { "scripts": { "build": "wp-scripts build", "check-engines": "wp-scripts check-engines", "check-licenses": "wp-scripts check-licenses", "format:js": "wp-scripts format-js", "lint:css": "wp-scripts lint-style", "lint:js": "wp-scripts lint-js", "lint:md:docs": "wp-scripts lint-md-docs", "lint:md:js": "wp-scripts lint-md-js", "lint:pkg-json": "wp-scripts lint-pkg-json", "packages-update": "wp-scripts packages-update", "start": "wp-scripts start", "test:e2e": "wp-scripts test-e2e", "test:unit": "wp-scripts test-unit-js" } }

jadi mari kita edit file package.json kita sehingga bagian "scripts" berisi semua perintah yang direkomendasikan.

Cara memverifikasi bahwa semuanya berfungsi…

Mari buat folder src di root proyek Anda dan tambahkan file index.js di dalamnya. Ini akan menjadi file JavaScript utama dari plugin kami dan akan berisi semua kode Anda (Anda kemudian dapat mengatur kode sesuka Anda, selama file utamanya adalah src/index.js ).

Mari kita coba apakah semuanya berjalan seperti yang diharapkan dengan menambahkan pernyataan berikut index.js :

 console.log( 'Hi!' );

dan membangun proyek menggunakan npm run build . Ini akan mengubah kode Anda menjadi sesuatu yang dapat dijalankan oleh browser (sebenarnya tidak diperlukan saat ini, tetapi hanya dalam beberapa menit) dan menghasilkan skrip baru di dalam folder build .

Yang harus kita lakukan sekarang adalah memberi tahu WordPress bahwa skrip ini ada sehingga dapat memuatnya. Untuk melakukannya, cukup buka file utama plugin Anda ( gutenberg-button.php ) dan tambahkan baris berikut di akhir:

 function enqueue_script() { wp_enqueue_script( 'gutenberg-button', GUTENBERG_BUTTON_URL . '/build/index.js', [], GUTENBERG_BUTTON_VERSION ); }//end enqueue_script() add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\enqueue_script' );

Jika Anda memperhatikan, Anda akan melihat bahwa kami hanya memberi tahu WordPress untuk mengantrekan skrip baru kami /build/index.js sebagai sumber editor blok. Dengan cara ini, ketika pengguna mengakses editor blok, skrip kami akan menjadi bagian dari aset yang akan disertakan oleh editor.

Jadi mari kita periksa ini. Buka Dasbor WordPress Anda, edit posting dan lihat konsol JavaScript browser Anda. Jika semuanya berjalan seperti yang diharapkan, Anda akan melihat "Hai!" tertulis di konsol:

Mereplikasi tutorial kami untuk menambahkan tombol ke Gutenberg

Oke, sekarang kita telah melihat bahwa kita dapat menulis kode JavaScript dan npm run build menjadi sesuatu yang akan dimengerti oleh browser kita, saatnya untuk meniru tutorial Antonio. Dan ini, pembaca yang budiman, sangat sederhana.

Buka file src/index.js dan ganti pernyataan console.log sebelumnya dengan berikut ini:

Seperti yang Anda lihat, ini hampir sama dengan kode yang ditulis Antonio beberapa bulan lalu. Perbedaan utama adalah fakta bahwa kita tidak lagi menggunakan variabel global wp untuk mengakses fungsi dan komponen Gutenberg; sebagai gantinya, kami sekarang mengandalkan pernyataan import . Tapi selain itu, hampir sama.

Setelah Anda memiliki kode yang ditulis, npm run build dan hanya itu! Anda sekarang memiliki tombol di Gutenberg:

Mari kita pastikan itu berfungsi dengan memilih beberapa teks dan mengklik tombol:

dan begitulah, kami melihat teks muncul di konsol lagi!

Catatan terakhir tentang dependensi…

Jika Anda melihat ke dalam folder build , Anda akan melihat bahwa @wordpress/scripts tidak hanya membuat file index.js , tetapi juga memiliki file index.asset.php . File ini mendefinisikan objek kecil dengan dua properti:

• daftar dependensi (yaitu, skrip WordPress) yang diperlukan oleh plugin kami
• versi build

Kita dapat (dan harus) menggunakan kedua properti ini saat mengantrekan skrip di WordPress jika kita ingin memastikan skrip akan berjalan dengan benar. Untuk melakukannya, cukup kembali ke gutenberg-button.php dan ubah seperti yang ditunjukkan di bawah ini:

 function enqueue_script() { $asset = include GUTENBERG_BUTTON_PATH . '/build/index.asset.php'; wp_enqueue_script( 'gutenberg-button', GUTENBERG_BUTTON_URL . '/build/index.js', $asset['dependencies'], $asset['version'] ); }//end enqueue_script() add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\enqueue_script' );

Cukup muat objek di index.asset.php menggunakan pernyataan include dan ganti daftar dependensi yang kita miliki ( [] ) dengan dependensi aktual dan gunakan nomor build sebagai versi plugin.

Kesimpulan

Membuat plugin WordPress yang sangat berguna itu rumit. Anda harus memahami dengan baik cara kerja JavaScript dan terbiasa dengan semua sumber daya yang dimiliki WordPress. Namun berkat paket @wordpress/scripts , menyiapkan lingkungan pengembang JavaScript dan membangun plugin JavaScript yang dapat berjalan di dalam WordPress menjadi lebih mudah dari sebelumnya.

Saya harap Anda menyukai posting hari ini. Dan, seperti biasa, jika Anda mengalami kesulitan atau memiliki pertanyaan, silakan tinggalkan komentar dan kami akan membantu Anda.

Oh dan omong-omong, ini tautan ke proyeknya, siap diunduh dan diuji jika Anda mau. Cukup klon proyek, npm install semua dependensi, npm run build , dan coba!

Gambar unggulan oleh Ashim D'Silva di Unsplash.