Membuat Blok Gutenberg Kustom Untuk WordPress

Membuat blok Gutenberg khusus untuk WordPress tidak harus sulit. Bahkan, dengan sedikit kode, Anda dapat membuat blok kustom Anda sendiri tanpa harus menggunakan plugin. Gutenberg adalah editor baru untuk WordPress yang memungkinkan Anda membuat blok khusus untuk konten Anda. Blok adalah blok bangunan konten Anda di Gutenberg. Mereka dapat digunakan untuk menambahkan teks, gambar, video, dan lainnya. Untuk membuat blok khusus , Anda harus menggunakan editor teks seperti Editor Kode WordPress atau plugin seperti Block Lab. Setelah Anda memiliki editor teks, Anda dapat membuat file baru di direktori tema atau plugin Anda. Hal pertama yang harus Anda lakukan adalah membuat tipe blok. Jenis blok adalah kumpulan pengaturan yang menentukan bagaimana blok Anda berperilaku. Untuk melakukan ini, Anda harus menggunakan fungsi register_block_type. Setelah Anda memiliki jenis blok, Anda dapat mendaftarkannya ke WordPress. Fungsi ini akan mengambil dua argumen: nama jenis blok Anda dan objek yang berisi pengaturan untuk blok Anda. Setelah Anda mendaftarkan jenis blokir Anda, Anda dapat mulai menambahkan bidang ke dalamnya. Bidang adalah pengaturan yang mengontrol tampilan dan perilaku blok Anda. Untuk menambahkan bidang ke jenis blok Anda, Anda harus menggunakan fungsi add_field. Setelah Anda menambahkan semua bidang yang Anda inginkan ke jenis blok Anda, Anda dapat mendaftarkannya ke WordPress. Dan itu saja! Anda sekarang telah membuat blok Gutenberg khusus untuk WordPress.

Editor blok Gutenberg adalah salah satu peningkatan pada WordPress 5.0. Editor Gutenberg membagi konten menjadi beberapa blok, yang merupakan bagian yang mudah diatur ulang. Sebagian besar pengembang tidak akan dapat membuat blok yang dirancang secara asli karena mereka tidak memiliki keterampilan Bereaksi. Komunitas pengembang WordPress telah merespon dengan mengembangkan alat yang dapat memenuhi persyaratan React/JavaScript. Blok di Block Lab dibuat dalam tiga tahap: menambahkannya di dalam admin, menyalin dan menempelkannya, lalu mengekspornya. API juga dapat digunakan untuk membuat kontrol khusus untuk blok Anda. Ini mungkin tidak banyak untuk dilihat, tetapi ini akan memberi Anda gambaran tentang apa yang dapat Anda lakukan dengan blok Gutenberg khusus.

Untuk membuat blok, kita perlu membuat file baru bernama block-notification-bar.php, yang berisi judul (Notification Bar) dan tiga bidang. Menanggapi file ini, pesan pemberitahuan akan muncul yang menginstruksikan kami untuk menempatkan templat blok khusus kami di tema kami. Sebelum mengunggah file, pastikan sudah disimpan dan diunggah ke server web Anda. Sebuah blok kustom sekarang telah dibuat untuk kita. Yang penting adalah Anda mencapai tujuan itu. Kami memiliki banyak pilihan jika kami ingin memperluas apa yang telah kami buat. Ikon, tombol, dan kemampuan untuk menautkan ke postingan atau halaman lain hanyalah beberapa fitur yang dapat ditambahkan. Semua kemampuan ini dapat dicapai melalui Block Lab, serta plugin lain yang disebutkan di atas.

Plugin Blok Kustom WordPress

Ada banyak plugin blok kustom hebat yang tersedia untuk WordPress. Setiap plugin menawarkan serangkaian fitur dan opsi yang berbeda. Beberapa plugin blok khusus memungkinkan Anda membuat blok khusus untuk posting dan halaman Anda, sementara yang lain menyediakan satu set blok yang telah dirancang sebelumnya yang dapat Anda gunakan.

Anda dapat dengan mudah membuat posting dan halaman dengan WordPress dengan menambahkan elemen konten dan tata letak sebagai blok. WordPress menawarkan berbagai macam blok dalam konfigurasi defaultnya. Namun, Anda mungkin ingin membuat blok khusus untuk menyelesaikan tugas tertentu. Tutorial ini akan memandu Anda melalui langkah-langkah membuat blok yang benar-benar unik. Langkah pertama adalah memasukkan tiga bidang ke dalam blok testimonial Anda. Klik tombol Tambah Bidang untuk mulai mengisi bidang pertama. Langkah kedua adalah membuat template blok, yang akan menentukan dengan tepat bagaimana data akan ditampilkan.

Langkah ketiga adalah menata markup keluaran blok dengan mengklik tab CSS. Dengan mengunggah template secara manual, Anda dapat membuat blok kustom Anda sendiri. Dalam hal ini, PHP adalah cara terbaik untuk berinteraksi dengan bidang blok khusus Anda. Cukup unggah template editor ke tema Anda menggunakan metode unggah. Untuk memulai, pratinjau blok khusus Anda. Sebelum Anda dapat melihat pratinjau HTML/CSS, Anda harus menyediakan beberapa data pengujian. Buat situs web WordPress yang dibuat khusus dengan blok Gutenberg.

Untuk mencari blok, ketikkan nama atau kata kuncinya ke dalam kotak yang muncul setelah mengklik tombol tambah blok baru. Anda dapat melihat pratinjau blok dengan menyimpan dan mengedit posting dan halaman Anda. Di situs pengujian kami, Anda dapat melihat bagaimana blok testimonial terlihat.

Buat Reaksi Blok Gutenberg

Ada beberapa cara untuk membuat blok Gutenberg di React. Cara pertama adalah dengan menggunakan alat CLI create-guten-block. Ini akan membuat perancah blok Gutenberg baru untuk Anda. Untuk menggunakan metode ini, Anda harus menginstal Node.js dan npm di mesin Anda. Setelah Anda menginstal dependensi tersebut, Anda dapat membuat blok Gutenberg baru dengan menjalankan perintah berikut: create-guten-block my-block Ini akan membuat direktori baru bernama my-block dengan semua file yang diperlukan untuk blok Gutenberg. Cara kedua untuk membuat blok Gutenberg di React adalah dengan menggunakan paket @wordpress/block-editor. Paket ini menyertakan fungsi pembantu yang disebut createBlock yang dapat digunakan untuk membuat blok Gutenberg. Untuk menggunakan metode ini, Anda perlu menginstal paket @wordpress/block-editor di proyek Anda. Setelah Anda menginstal paket, Anda dapat membuat blok Gutenberg baru dengan menjalankan kode berikut: import { createBlock } from '@wordpress/block-editor'; createBlock( 'blok-saya/blok-saya', { judul: 'Blok Saya', kategori: 'umum', } ); Ini akan membuat blok baru yang disebut blok-saya dalam kategori umum. Cara ketiga untuk membuat blok Gutenberg di React adalah dengan menggunakan fungsi wp.blocks.createBlock . Fungsi ini adalah bagian dari WordPress JavaScript API dan dapat digunakan untuk membuat blok Gutenberg. Untuk menggunakan metode ini, Anda harus menyertakan paket wp-api-request di proyek Anda. Setelah Anda menginstal paket, Anda dapat membuat blok Gutenberg baru dengan menjalankan kode berikut: import { wp } from 'wp'; wp.blocks.createBlock( 'blok-saya/blok-saya', { judul: 'Blok Saya', kategori: 'umum', } ); Ini akan membuat blok baru yang disebut blok-saya dalam kategori umum.

Pelajari cara membuat blok khusus dalam tutorial ini untuk editor Gutenberg. Anda akan menggunakan plugin yang dibuat sendiri untuk menyelesaikan tugas. Meskipun salah satu tema default tersedia untuk membuat blok Gutenberg kustom, kita harus mengakui bahwa itu mungkin. Dalam tutorial ini, kita akan membahas cara membuat blok kustom baru dengan Gutenberg. Selain itu, kami akan menyesuaikan tampilan frontend dan editor berdasarkan preferensi desain yang kami berikan. Jika Anda tidak ingin menghabiskan banyak waktu untuk membuat blok, Anda cukup menambahkan satu dan kemudian menyesuaikannya sesuai dengan kebutuhan Anda.

React Mudah Digunakan Dalam Tema Kustom

React adalah perpustakaan yang sangat baik untuk membuat antarmuka pengguna dengan JavaScript. WordPress telah menggunakannya untuk mendukung editor Gutenberg baru , serta layar admin widget dan pembaruan terkini untuk kemampuan pengeditan konten situs. Karena React sudah tertanam di WordPress, maka mudah digunakan dalam tema khusus.

Gutenberg Buat Blok Tombol Kustom

Gutenberg create custom button block adalah alat yang sangat berguna untuk membuat tombol khusus untuk situs web Anda. Dengan alat ini, Anda dapat dengan mudah membuat tombol yang menarik sekaligus fungsional. Ini adalah cara yang bagus untuk menambahkan sentuhan pribadi ke situs web Anda dan membuatnya menonjol dari yang lain.

Dalam tutorial ini, Anda akan belajar cara membuat blok sederhana pertama Anda di aplikasi populer. Aplikasi WordPress @create-block kami adalah alat resmi yang memungkinkan kami menghasilkan kode Javascript/PHP/CSS dengan cepat. Dalam mode interaktif, Anda dapat mengonfigurasi blok Anda dalam serangkaian langkah. Saat Anda baru belajar tentang Gutenberg, ini bisa sangat berguna. Jika Anda telah membuat perancah blok, Anda sekarang dapat mengakses direktori yang baru dibuat melalui editor kode. Struktur plugin blok mengikuti ini seperti saat ini (pada saat menulis tutorial ini). Kami akan membahas detail setiap file dan penggunaannya dalam modul ini.

Bendera baris perintah adalah metode umum untuk menentukan opsi untuk program baris perintah. Sebelum menggunakan flag, ganti nilai di direktori flags dengan yang ingin Anda gunakan. Lembar gaya yang akan diantrekan atau diterapkan di editor. Rincian dasar plugin dibahas secara rinci. WordPress menampilkan informasi plugin secara default. Untuk memberi tahu Git file mana yang harus diabaikan saat membuat proyek yang dikontrol versi, file Gitigore A. harus disertakan. Repositori berisi informasi. Config memungkinkan pengembang untuk mempertahankan gaya pengkodean yang konsisten di beberapa proyek.

Pengembangan Plugin Gutenberg WordPress

Plugin WordPress Gutenberg adalah proyek open source yang dikembangkan oleh komunitas sukarelawan. Siapa pun dapat berkontribusi pada proyek dan membantu membuatnya lebih baik. Plugin ini terus diperbarui dan ditingkatkan. Jika Anda seorang pengembang, Anda dapat membantu berkontribusi pada proyek dengan mengembangkan fitur baru atau memperbaiki bug.

Anda mungkin pernah mendengar tentang Gutenberg (editor blok WordPress), tetapi bagaimana Anda memulai membuat plugin sendiri? Blok dibuat dengan skrip WordPress sederhana. Jenis plugin WordPress yang dibuat di sini biasanya berupa blok, tetapi ini memberikan titik awal yang baik bagi orang lain dalam prosesnya. Create Block Script dapat digunakan sebagai template untuk membuat plugin Anda sendiri. Anda dapat dengan mudah melihat blok di ujung depan WordPress, tetapi memiliki tampilan yang berbeda untuk membantu Anda terbiasa dengannya di ujung belakang. File ini harus dibuat dalam mode pengembangan hanya setelah aset dikompilasi. /node_modules – Ini adalah folder tempat semua parameter tergantung JavaScript dari plugin Anda disimpan.

File preset yang berisi lingkungan Visual Studio Code (VDC) yang berguna dapat ditemukan di file ini. Anda harus memastikan bahwa Anda berada di folder plugin WordPress jika ingin membuat plugin. Hasilnya, Anda akan dapat melihat tahap pengembangan dan produksi plugin. Buka /src/save.js di editor Anda untuk mengganti fungsi simpan dengan yang berikut ini: BlockText dapat di-output sebagai string dengan cara ini. Kode berikut harus ditambahkan ke root plugin untuk menampilkan blok Anda dalam kategori blok khusus. Fungsi registerBlockType.js mengembalikan daftar kategori blok Anda, yang kemudian dapat dikompilasi ulang menggunakan fungsi registerBlockType.js plugin.

Pengeditan Konten Gutenberg

Pengguna WordPress dapat membuat, mengedit, dan menghapus konten melalui Single Page Application (SPA) yang dibangun di atas React. Berbeda dengan editor konten tradisional, yang satu ini menyediakan antarmuka yang lebih lancar dan ramah pengguna. Jika Anda menginginkan editor konten yang lebih kuat, aplikasi Gutenberg bukan untuk Anda. Jika Anda lebih suka tampilan yang lebih santai, Anda bisa mengandalkan Gutenberg.

Editor Blok Kustom WordPress

Anda dapat menggunakan blok ini pada setiap posting atau halaman yang Anda inginkan. Pada layar Tambahkan Blok Baru, gunakan kotak pencarian untuk mencari blok Anda dengan mengetikkan nama atau kata kuncinya. Setelah Anda memasukkan blok ke dalam area konten, Anda akan melihat bidang blok yang Anda buat untuk blok khusus ini.

Tutorial ini akan memandu Anda melalui proses pembuatan instance editor blok kustom yang berfungsi penuh di dalam WordPress. Editor ini akan dibangun seluruhnya dalam halaman Admin WP khusus yang disebut Block Editor (dengan cara yang paling kreatif). Di Plug-A-Thon WordPress kami, kami akan membuat editor. Kita sekarang harus menghasilkan beberapa HTML ke dalam halaman kustom kita dengan menggunakan komponen React editor blok. Sebagai argumen ketiga, kami menggunakan baris dependensi skrip ($script_asset['dependencies']). Ini akan memastikan bahwa skrip terkait WordPress tidak termasuk dalam bundel yang dibuat. Kami juga harus mendaftarkan gaya CSS khusus kami dan perpustakaan pemformatan default WordPress untuk menggunakannya.

Ini memungkinkan kita untuk menggunakan JavaScript untuk menghasilkan Editor Blok di HTML halaman. Keajaiban terjadi ketika komponen untuk ini disebut BlockEditor. Dimungkinkan untuk merender editor dari PHP tanpa membuat JS global. Tata letak editor dibangun di atas perancah, seperti yang Anda lihat di sini, di samping beberapa penyedia konteks khusus. Block EditorProvider adalah komponen terpenting dari paket editor blok WordPress. Seperti yang telah kami jelaskan sebelumnya, ini memberikan konteks baru untuk editor blok baru dalam konteks pengeditan blok. Ini menyelesaikan ini dengan berlangganan ke registri yang disediakan (melalui withRegistry Provider HOC), mendengarkan peristiwa perubahan blok, menentukan apakah perubahan blok tetap ada, dan memanggil penangan input onChange bila diperlukan.

Komponen yang paling menarik adalah komponen BlockList, yang menambahkan daftar blok ke editor. Ada baiknya mempelajari komponen-komponen ini secara rinci karena mereka adalah beberapa yang paling rumit dan terlibat. Untuk mempelajari lebih lanjut tentang komponen EditorBlock kustom kami, silakan lihat artikel berikut. Slot/fill diimplementasikan dengan memanfaatkan komponen Blockeditor kami (lihat di atas) untuk mengekspos Fill (Sidebar. InspectorFill) di dalamnya, yang kami impor dan render ke dalam implementasi setelahnya. Akibatnya, React memungkinkan kita untuk menyimpan komponen inspeksi di DOM-nya sambil merendernya ke dalam markup di lokasi terpisah (misalnya, di Sidebar). Blok juga dapat ditemukan di LocalStorage di bawah kunci getdavesbeBlocks.

Data ini diserialkan ke dalam format Block Grammar, yang berarti dapat disimpan dalam sebuah string. GitHub telah mengkompilasi seluruh kode untuk editor blok yang berfungsi khusus. Program ini dapat diunduh dan dicoba sendiri secara gratis.