Tutorial Gutenberg untuk Pengembang Pemula: Buat Plugin Blok Pertama Anda

Gutenberg Tutorial untuk Pemula


Jika Anda berpikir untuk mengembangkan sesuatu untuk WordPress pada tahun 2020, mengabaikan Gutenberg sama sekali bukan pilihan. Plugin dan tema semua harus bekerja sama dengan Gutenberg dengan baik dan memberikan pengalaman pengguna yang konsisten di semua hal yang dapat dilihat pengguna di dasbor WordPress. Dan terutama karena Gutenberg adalah bagian integral dari WordPress sekarang – cukup disebut sebagai editor blok.

Karena itu, memulai dengan Gutenberg tidak semudah itu. Padahal beberapa tahun yang lalu Anda bisa menulis plugin WordPress berkualitas menggunakan Notepad selain Notepad, prosesnya menjadi lebih sulit sekarang.

Gutenberg menggunakan teknologi seperti API REST WordPress, JavaScript, dan React. Dengan demikian, persyaratan baru untuk plugin dan tema diperlukan untuk bekerja dengan Gutenberg.

Berita baiknya adalah kita akan membicarakan semua itu hari ini! Posting ini berfungsi sebagai tutorial Gutenberg untuk pemula, yang mencari untuk membuat plugin untuk Gutenberg untuk pertama kalinya.

Kami fokus terutama pada berbagai aspek membuat plugin untuk Gutenberg – mengatur lingkungan pengembangan, membuat plugin dasar dan beberapa nuansa bekerja dengan blok.

1. Siapkan lingkungan pengembangan Gutenberg Anda

Untuk memulai dengan pengembangan Gutenberg, Anda memerlukan pengetahuan dasar tentang JavaScript dan React. Berikut ini adalah tutorial tentang JavaScript untuk pengembang WordPress. Selanjutnya, paket tambahan di Gutenberg mungkin memerlukan penggunaan manajer paket NodeJS, npm.

Anda dapat menginstal versi stabil terbaru NodeJS pada Windows atau MacOS menggunakan installer di situs resmi. Jika Anda memiliki server Linux, Anda dapat mengkompilasi kode sumber atau menggunakan manajer paket yang sesuai (seperti apt dan yum). Misalnya, jika Anda menggunakan Ubuntu, jalankan perintah berikut di terminal.

sudo apt pembaruan
sudo apt install nodejs npm

Setelah instalasi berhasil, Anda dapat menjalankan perintah berikut untuk memverifikasi versi NodeJS.

nodejs –version

Setelah mencentang kotak-kotak itu, ide yang baik untuk mengatur situs web pengujian WordPress Anda dengan sebuah instance dari plugin Gutenberg saat ini (plugin mandiri) atau bahkan versi pengembangannya – Anda dapat memperolehnya dari GitHub.

⚠️ Catatan; sementara Gutenberg sekarang terintegrasi dengan WordPress, versi itu bukan yang terbaru. Pengembangan pada Gutenberg masih terjadi secara terpisah dan semua yang baru dimasukkan dalam plugin mandiri Gutenberg terlebih dahulu. Versi Gutenberg yang sebenarnya dalam inti belum menerima pembaruan besar sejak dimasukkan dalam WordPress 5.0. Anda selalu ingin mengerjakan versi terbaru Gutenberg karena memberi Anda peluang lebih baik untuk memeriksa pekerjaan Anda di masa depan dan memastikan bahwa kreasi Anda akan selaras dengan semua yang datang ke inti WordPress nanti.

Pada catatan lain, jika Anda bermaksud berkontribusi pada plugin inti Gutenberg, repositori memilikinya pedoman kontribusi tentang cara mengatur lingkungan lokal Anda dan mengatur perubahan untuk ditinjau.

�� Akhirnya, jika Anda ingin menyesuaikan plugin yang ada dengan Gutenberg, berikut adalah tutorial terperinci tentang cara mencapai ini: bagian 1 dan bagian 2.

Untuk memulai dengan direktori plugin templat yang sudah siap bekerja sama dengan Gutenberg, Anda dapat mempertimbangkan untuk menggunakannya plugin Gutenberg boilerplate. Solusi semacam itu membantu Anda dengan struktur file dasar sehingga Anda dapat fokus pada konten plugin. Untuk menggunakan boilerplate, unduh dan instal plugin dari sini (zip). Menginstal dan mengaktifkan plugin boilerplate mengaktifkan blok sampel, yang akan kita eksplorasi dalam tutorial ini. Anda dapat menemukan kode untuk setiap blok di direktori masing-masing di lokasi plugin boilerplate.

2. Konfigurasi awal

Sekadar mengingatkan Anda, Gutenberg memperkenalkan konsep blok, yang merupakan pengganti kanvas editor TinyMCE standar. Dalam beberapa kasus, blok juga dapat mengganti kode pendek dan elemen konten tambahan lainnya yang digunakan plugin untuk menambah konten WordPress dengan berbagai cara.

Jika Anda tertarik membuat Gutenberg, pendekatan yang paling umum adalah membuat plugin yang membuat blok baru dan membuatnya tersedia untuk pengguna. Inilah yang akan kita lakukan dalam tutorial Gutenberg ini.

Bagian berikut menjelaskan proses dari awal hingga selesai.

Plugin khusus yang akan kami buat mencetak pesan dengan latar belakang tertentu yang dapat disesuaikan. Hanya contoh pembuatan, tetapi Anda dapat mengambil prinsip yang disajikan di sini dan menerapkannya pada plugin Anda yang lebih kompleks.

Dasar-dasar membangun plugin semacam itu harus familier. Anda mulai dengan membuat direktori baru di direktori plugin WordPress. Di dalamnya, kami akan menempatkan empat file:

  • index.php – File ini berisi metadata tentang blok Gutenberg baru.
  • block.js – File JavaScript ini mendaftarkan blok Gutenberg khusus.
  • editor.css – File ini berisi gaya untuk editor.
  • style.css – File ini berisi gaya untuk ujung depan blok.

Dua file pertama dalam daftar mengurus pendaftaran blok dan dua file berikutnya menentukan gaya visual elemen blok..

3. Mendaftarkan blok

Dalam langkah mendaftarkan blok untuk Gutenberg ini, kami akan membahas dua hal secara luas:

  • mendaftarkan metadata plugin dengan mesin PHP WordPress,
  • mendaftarkan blok dengan kerangka Bereaksi yang dijalankan Gutenberg.

File index.php berisi aset enqueue dari blok dan editor.

  • Pertama, daftarkan fungsi kustom melalui add_action.
  • Kemudian, tentukan fungsi yang mencantumkan jalur file JavaScript dan CSS untuk blok dan editor menggunakan fungsi wp_enqueue_style dan wp_enqueue_script.

Mari kita rangkum ini melalui kode PHP di bawah ini:

add_action (‘enqueue_block_editor_assets’, ‘gb_block_01_basic_editor_assets’);

function gb_block_01_basic_editor_assets () {
// Naskah.
wp_enqueue_script (
‘gb-block-01-basic’,
plugins_url (‘block.js’, __FILE__),
array (‘wp-blocks’, ‘wp-i18n’, ‘wp-element’),
filemtime (plugin_dir_path (__FILE__). ‘block.js’)
);

// Gaya.
wp_enqueue_style (
‘gb-block-01-basic-editor’,
plugins_url (‘editor.css’, __FILE__),
array (‘wp-edit-blok’),
filemtime (plugin_dir_path (__FILE__). ‘editor.css’)
);
}

Ini mendefinisikan sumber daya untuk editor dasar. Untuk blok, hanya file CSS yang diperlukan, yang didefinisikan melalui fungsi wp_enqueue_style.

File block.js menjelaskan properti blok di editor Gutenberg. Kami mendefinisikan atribut dan properti berikut:

  • title – Judul blok
  • ikon – Ikon untuk ditampilkan untuk blok; Anda dapat memilih ikon apa saja dari koleksi dashicons ini
  • kategori – Grup tempat blok akan dimiliki. Contoh kelompok balok adalah "umum," "pemformatan," "menanamkan."
  • edit – Fungsi JavaScript yang mengembalikan elemen DOM. Kami menggunakan fungsi wp.element.createElement untuk membuat elemen DOM paragraf khusus, p, dengan teks khusus yang tertulis di dalamnya. Gutenberg memanggil properti ini ketika pengguna mengklik blok dari editor.

(fungsi () {
var registerBlockType = wp.blocks.registerBlockType;

registerBlockType (‘gb / basic-01’, {
judul: __ (‘GB Basic’, ‘GB’),
ikon: ‘shield-alt’,
kategori: ‘umum’,

edit: function (props) {
return wp.element.createElement (
‘p’,
{className: props.className},
‘Halo Dunia! – dari editor (01 Blok Dasar). ‘
);
},

});
}) ();

Demikian pula, Anda dapat membuat properti penyimpanan yang dipanggil saat blok dipilih dari ujung depan.

Dalam kode di atas, kita mendefinisikan className dari elemen p dengan props.className, yang akan membuat nama kelas dimulai dengan wp-block, diikuti oleh nama blok. Di bagian selanjutnya dari tutorial Gutenberg ini, kami mendefinisikan gaya dari kelas ini.

4. Menyesuaikan blok

Seperti dibahas di bagian sebelumnya, langkah selanjutnya dalam tutorial ini adalah mendefinisikan properti dari elemen blok. Mari kita mendefinisikan warna latar belakang, warna teks, dan garis tepi.

.wp-block-gb-basic-01 {
warna: # 000;
latar belakang: mistyrose;
perbatasan: 0.2rem merah solid;
}

Di tempat file CSS, Anda juga dapat menambahkan file SCSS dan kompilasi dengan Node. Lebih lanjut, ini dia tutorial tentang styling elemen Gutenberg dari Trik CSS.

Hasil tutorial Gutenberg pertama Anda

Kami akhirnya siap untuk menguji blok yang telah kami buat. Jika plugin Gutenberg diaktifkan, buka bagian + ikon dan periksa apakah blok baru muncul di sana.

blok Gutenberg baru

Selanjutnya, jika Anda mengklik pada blok, Anda akan melihat bahwa pesan dari atas terlihat, dengan warna latar belakang dan perbatasan dari file CSS:

blokir dalam aksi

Kesimpulan

Kami sampai pada akhir tutorial Gutenberg pertama Anda. Saya harap ini bermanfaat. Memang, apa yang kami buat di sini bukan super kompleks, tetapi seharusnya memberi Anda gambaran tentang struktur dasar ketika bekerja dengan Gutenberg dan bagaimana merencanakan plugin Anda berikutnya.

Pertama, kami membahas langkah-langkah untuk mengatur lingkungan pengembangan Gutenberg. Selanjutnya, kami memperkenalkan plugin boilerplate untuk membantu pengembangan lebih lanjut. Kemudian, fokus diskusi bergeser ke berbagai langkah dalam mendaftar dan menata blok baru.

Saya harap tutorial Gutenberg ini telah membantu Anda membuat plugin Gutenberg pertama Anda!

Jika Anda memiliki pertanyaan, lanjutkan dengan komentar di bawah.

Jangan lupa untuk bergabung dengan kursus kilat kami tentang mempercepat situs WordPress Anda. Dengan beberapa perbaikan sederhana, Anda dapat mengurangi waktu loading hingga 50-80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map