Pengembangan Gutenberg dengan Contoh: Google Maps (bagian 3)

Selamat datang di posting ketiga dan terakhir tentang cara membuat plugin peta untuk Gutenberg. Postingan terakhir kami cukup padat dan kami melihat banyak hal yang berbeda: atribut yang dimiliki blok kami, cara menyisipkan peta menggunakan komponen React, cara menggunakan komponen WordPress atau bahkan membuat komponen kami sendiri untuk mendefinisikan antarmuka pengguna, dll. Hari ini kita akan membahas sesuatu yang lebih sederhana.

Dalam posting ini kita akan melihat bagaimana membuat peta Google Maps di front-end. Untuk melakukan ini, kita akan melihat lebih dekat save.js dan kita akan membuat beberapa perubahan pada plugin sehingga semuanya bekerja seperti yang diharapkan. Saya juga akan menggunakan posting terakhir ini untuk mengomentari setiap poin yang mungkin belum jelas sampai sekarang.

Bagaimana Menyimpan Blok Peta Kami untuk Menampilkannya di Front-End

Untuk menampilkan peta di front-end pertama-tama kita harus mendefinisikan HTML yang ingin kita render di front-end. Dalam blok Gutenberg, ini dicapai dengan mendefinisikan metode save dari fungsi registerBlockType . Seperti yang sudah saya sebutkan di posting sebelumnya, metode ini didefinisikan dalam file save.js di packages/blocks/nelio-maps/ .

Sekali lagi, ini adalah fungsi yang sangat sederhana untuk dipahami:

• Dari baris 7 hingga 25 kami mengekstrak semua atribut yang relevan dengan blok kami. Yaitu, semua atribut yang kita definisikan di attributes.js dan yang mengubah tampilan peta kita.
• Pada baris 41 kita membuka div yang akan berfungsi sebagai wadah untuk blok tersebut.
• Pada baris 47 kita menemukan div yang akan membungkus peta itu sendiri. Lihatlah sesuatu yang sangat menarik: div ini menyertakan semua objek attributes dalam definisinya. Ini berarti bahwa semua properti dalam attributes (misalnya, 'data-lat': lat of line 34) akan dirender sebagai atribut HTML (misalnya, dengan asumsi bahwa variabel lat adalah 2.48171 , lat akan muncul di HTML final sebagai data-lat="2.48171" ).
• Pada baris 49, sebuah div kecil ditambahkan yang berisi koordinat penanda.
• Pada baris 59, isi RichText yang telah kita definisikan di edit.js .

Jadi, pada intinya, metode save menghasilkan HTML yang berisi semua atribut yang relevan untuk merender peta di front-end. Jadi, apa yang bisa salah? Nah, jika Anda membuka front-end sekarang, yang akan Anda lihat hanyalah ini:

Blok kosong yang hanya memiliki beberapa konten RichText . Apa yang terjadi?

Cara Memodifikasi Plugin untuk Membuat Peta Google yang Dibuat dengan Blok Gutenberg kami

Untuk menampilkan Google Map di front-end, kita perlu memuat perpustakaan Google Maps dan skrip yang menggunakannya untuk membangun peta itu sendiri. Ini sangat sederhana dan jika Anda pernah mengembangkan untuk WordPress, Anda harus tahu bagaimana melakukannya.

Hal pertama yang harus kita lakukan adalah membuat skrip yang dapat membangun Google Map menggunakan data yang telah kita masukkan ke dalam HTML. Skrip ini ada di assets/src/js/public/public.js . Lihatlah lebih dekat untuk memahami cara kerjanya:

• Pada baris 9 kami mencari semua simpul yang berisi peta (memfilter menurut salah satu kelas yang telah kami sertakan dalam metode save ) dan, untuk masing-masing simpul tersebut, kami memanggil metode initGoogleMap .
• Metode ini mengandalkan dua fungsi untuk melakukan tugasnya. Di satu sisi, itu mengekstrak koordinat penanda yang mungkin dengan fungsi extractMarkerPositionIfAny dari baris 55 dan, di sisi lain, mengekstrak semua properti peta (koordinat tengah, tingkat zoom, daftar tombol yang terlihat, dll) dengan function extractMapOptions dari baris 26. Perhatikan bahwa kedua fungsi hanya didedikasikan untuk membaca nilai-nilai atribut data-something yang telah kita masukkan ke dalam metode save .
• Terakhir, kami membuat peta (baris 18) dan menambahkan penanda (baris 21) masing-masing menggunakan kelas Map dan Marker , yang disediakan oleh perpustakaan Google Maps.

Sekarang kita memiliki skrip ini, kita hanya perlu dua tweak tambahan di proyek kita:

• Di satu sisi, kita harus memodifikasi file konfigurasi webpack webpack.config.js sehingga mentranspilasikan skrip public.js yang baru saja kita buat. Ini mungkin terdengar sulit, tetapi sebenarnya cukup mudah: lihat saja perubahan yang saya buat pada file itu di komit ini.
• Di sisi lain, kita harus memodifikasi plugin untuk mengantrekan skrip baru ini (dan perpustakaan Google Maps!) di front-end. Sekali lagi, perubahan yang sangat sederhana yang dapat Anda lihat di komit ini.

Setelah semua perubahan ini dilakukan, inilah hasil akhirnya:

Saya tahu apa yang Anda pikirkan: mengapa, alih-alih melakukan semua ini dengan tangan, kami tidak menggunakan komponen React yang telah kami gunakan di edit.js ? Bukankah ini akan menghemat waktu?

Memang, menggunakan komponen React yang kita lihat di posting sebelumnya akan menyelamatkan kita dari beberapa masalah… tapi ada masalah: itu bergantung pada React, yang berarti kita harus memuat React di front-end untuk menggunakannya juga. Dan itu sepertinya terlalu banyak, bukan begitu?

Detail Tertunda

Terakhir, izinkan saya membahas secara singkat satu aspek yang sangat penting, atau plugin Anda tidak akan berfungsi: Kunci Google Maps API.

Kunci Google Maps API

Untuk menggunakan Google Maps, Anda harus memiliki kunci API. Cara mendapatkannya adalah sesuatu yang Antonio jelaskan kepada kami beberapa hari yang lalu. Sekarang, bagaimana kita menggunakannya?

Salah satu opsi adalah melakukan hardcode kunci API kami di plugin. Jika Anda satu-satunya yang akan menggunakan plugin, itu akan berhasil. Tetapi jika Anda berencana mendistribusikan plugin Anda ke pengguna nyata, itu ide yang sangat buruk, karena tidak semua layanan Google gratis—beberapa berbayar, dan biayanya bisa sangat mahal jika semua orang menggunakan kunci Anda.

Apa yang harus dilakukan dalam kasus ini? Idenya sangat sederhana: cukup tambahkan opsi konfigurasi di plugin agar orang dapat memasukkan kunci API mereka sendiri.

Dalam kasus kami, jika Anda menambahkan peta tanpa kunci API, Anda akan melihat pesan peringatan berikut:

mendesak Anda untuk menambahkan kunci API.

Biasanya, Anda akan membuat halaman khusus untuk mengelola pengaturan plugin Anda. Tetapi untuk plugin yang semudah dan sesederhana yang kami buat, saya pikir akan lebih mudah jika kami memilih solusi yang berbeda.

Di WordPress ada layar opsi di /wp-admin/options.php yang terlihat seperti ini:

Ini adalah semacam "antarmuka yang bagus" untuk mengedit (hampir) semua opsi yang telah terdaftar di WordPress dan ada di tabel wp_options . Jadi, yang harus dilakukan plugin kita adalah memastikan bahwa opsi ini selalu ada di database (bahkan ketika belum ada set kunci API) dan kita akan memiliki "antarmuka yang bagus" bagi pengguna untuk menempelkan kunci API mereka tanpa kita melakukan apa pun !

Untuk mencapai ini, gunakan init hook (lihat baris 73 dari komit ini) dengan fungsi (baris 134) yang selalu menetapkan nilai ke opsi kunci Anda. Jika opsi belum ada, fungsi ini akan menetapkan nilainya ke nilai default (string kosong) dan menyimpan opsi. Jika sudah ada, nilai barunya akan sama dengan yang sudah kita miliki, sehingga fungsi pembaruan tidak akan melakukan apa pun. Retasan yang cerdas dan efektif!

Singkatnya

Dalam posting ini kami telah mengatasi penghalang terakhir dalam proyek kami: cara menyimpan peta dan cara menampilkannya di front-end. Pada dasarnya, yang kami butuhkan hanyalah div dengan semua informasi yang relevan tentang peta (pusatnya, opsi untuk menampilkan tombol, penanda, dll.) dan skrip kecil untuk membangunnya kembali di front-end.

Saya harap tutorial ini menyenangkan Anda dan menjadi contoh untuk mengerjakan proyek Anda sendiri. Seperti yang Anda lihat, jika Anda memulai proyek baru dengan dasar yang baik seperti yang telah kami buat di Nelio dengan boilerplate untuk pengembangan Gutenberg, mewujudkan ide Anda ke dalam proyek nyata akan jauh lebih mudah.

Jika Anda memiliki pertanyaan, beri tahu kami di bagian komentar di bawah. Semoga beruntung!

Gambar unggulan oleh Artem Bali di Unsplash .