Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Block API WordPress Gutenberg: Block Look dan Feel

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called WordPress Gutenberg Block API.
WordPress Gutenberg Block API: An Introduction
WordPress Gutenberg Block API: Creating Custom Blocks

Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (you can also view the original English article)

Editor WordPress baru (nama kode Gutenberg) akan dirilis pada versi 5.0. Sekarang adalah waktu yang tepat untuk mencengkeramnya sebelum masuk ke inti WordPress. Dalam seri ini, saya akan menunjukkan cara bekerja dengan Block API dan membuat block konten Anda sendiri yang dapat Anda gunakan untuk membuat posting dan halaman Anda.

Dalam posting pertama dari seri ini, kita memiliki gambaran tentang Block API dan membuat block sederhana untuk pengujian. Kita akan segera melihat di Block API, tapi pertama mari kita edit block default yang kita buat di posting sebelumnya untuk merasakan bagaimana mudahnya membuat perubahan pada block yang ada.

Jika Anda ingat, block khusus kita dirender secara berbeda di bagian depan dan belakang untuk menunjukkan bahwa Anda memiliki kontrol penuh atas bagaimana block tersebut dirender di dalam editor dan bagaimana pengunjung situs melihat blokir tersebut.

Default views for our custom block

Jika Anda telah mengikuti, buka folder /wp-content/plugins/my-custom-blocksrc/block tempat kode sumber block berada. Folder itu berisi file JavaScript dan dua file Sass, yang mengontrol perilaku block dan bagaimana itu merender di dalam editor dan di bagian depan.

Block source code files

File JavaScript block.js berisi JSX, yang di-transpile selama proses build menjadi JavaScript yang valid. Demikian pula, dua file Sass dikonversi menjadi CSS standar.

Selama proses pembuatan, file-file ini memerlukan pemrosesan untuk membuat file distribusi di dalam dist/ folder plugin. Ini adalah file aktual yang di-enqueued oleh WordPress karena berisi JavaScript dan CSS yang valid yang dapat dipahami semua browser.

Untungnya, toolkit create-guten-block menangani pembangunan dan pengiriman data bagi kita dengan memperhatikan perubahan pada file block kita. Ini adalah fitur yang sangat bagus karena itu satu hal yang kurang untuk kita khawatirkan. Kita hanya bisa fokus pada penulisan kode block kita (dan style), dan file plugin semua akan diperbarui secara otomatis. Nice!

Pastikan Anda menjalankan perintah npm start dari dalam folder akar plugin untuk memicu file yang ditonton.

Saatnya Mengedit Beberapa Kode!

Jangan khawatir tentang detail kode JSX di block.js dulu karena kita akan membahasnya nanti. Untuk saat ini, mari kita fokus pada membuat beberapa perubahan sederhana pada keluaran block untuk tampilan depan dan belakang.

Buka block.js, temukan metode edit untuk objek yang argumen kedua dilewatkan ke registerBlockType(), dan ganti dengan yang berikut:

Metode ini mengontrol bagaimana block membuat di jendela editor. Sekarang temukan metode save dan ganti dengan:

Metode ini digunakan untuk membuat keluaran block di ujung depan.

Dalam style.scss, ganti semua style dengan:

Kemudian, di editor.scss, ganti semua style dengan:

Anda dapat melihat di screenshot di bawah ini bagaimana perubahan ini memengaruhi perenderan block kita bergantung pada apakah kita melihatnya di jendela editor atau bagian depan.

Updated editor view
Updated frontend view

Kita tidak akan membahas script block enqueueing dulu, tetapi cukup sekarang untuk mengetahui bahwa style editor.scss hanya diterapkan pada jendela editor dan style.scss ditambahkan ke jendela editor ke dua dan front end. Oleh karena itu, style yang digunakan baik di editor dan front end dapat dihilangkan dari style.scss.

Perhatikan bagaimana di file Sass yang kita referensikan pemilih CSS yang panjang untuk menargetkan elemen block kita.

Kelas ini ditambahkan secara otomatis oleh Gutenberg ke elemen penampung block di bagian depan, tetapi kita harus menerapkannya secara manual di jendela editor untuk mendapatkan kelas yang sama, seperti yang Anda lihat pada metode edit di bawah ini.

Nama kelas yang dihasilkan oleh Gutenberg ditentukan sebagai berikut: wp-block-[block namespace] - [block name.

Dalam kasus kita, kita menggunakan toolkit create-guten-block untuk membuat block kita, yang menggunakan cgb untuk namespace secara default, dan block-my-custom-block didasarkan pada nama block yang kita tentukan. Ini menghasilkan nama kelas CSS wp-block-cgb-block-my-custom-block yang ditambahkan ke block container. Namespace dan nama block digunakan oleh Gutenberg secara internal untuk mengidentifikasi block secara unik.

Ketika membuat perubahan untuk memblokir file di sana, saya menemukan beberapa pain point yang layak disebutkan.

Pertama, ketika membuat perubahan pada metode edit, saya mendapati diri saya harus membersihkan cache browser sebelum menyegarkan jendela editor untuk melihat perubahan terbaru. Ini tidak terjadi sepanjang waktu, tetapi cukup sering terjadi. Jika Anda menemukan hal yang sama terjadi pada Anda, cukup hapus cache browser Anda dan coba lagi.

Kedua, ketika mengedit isi dari metode save, sesuatu yang aneh tampaknya terjadi pada jendela editor ketika disegarkan berikutnya.

Untuk mendemonstrasikan ini, saya menambahkan list item baru (<li>Indigo</li>) dalam metode save dan kemudian me-refresh post editor (setelah harus mengosongkan cache lagi, tentu saja!). Inilah hasilnya:

Block update issue

Jika Anda memilih Convert to Blocks atau Edit as HTML, maka Anda akan disajikan dengan isi metode save, yang dimaksudkan untuk dilihat di bagian depan dan bukan di editor.

Convert to blocks and edit as HTML views

Ini sangat membingungkan, dan satu-satunya cara yang jelas untuk mengembalikan keadaan menjadi normal adalah dengan menghapus block dari jendela editor dan memasukkannya lagi. Seperti yang saya sebutkan di posting sebelumnya, Gutenberg masih dalam proses, dan ini adalah contoh yang bagus untuk itu!

Mudah-mudahan ini akan dibuat lebih intuitif dalam versi masa depan, tetapi untuk sekarang ini adalah sesuatu yang harus diwaspadai. Ketika membuat perubahan pada fungsi save, bersiaplah untuk menghapus block terkait di jendela editor dan tambahkan lagi.

Seperti yang disebutkan sebelumnya, output dari metode save dan edit bisa sangat berbeda. Namun, dalam banyak kasus Anda mungkin menginginkan front end output untuk mencocokkan output editor sehingga editing experience konsisten mungkin dengan render front-end.

Dalam contoh yang kita buat di atas, saya hanya menambahkan konten dan gaya yang berbeda di editor dan tampilan front-end untuk tujuan demonstrasi.

Overview Block API

Block API terdiri dari sekumpulan objek JavaScript yang ditambahkan ke objek admin wp global. Dan karena wp bersifat global, kita tidak perlu secara khusus mengimpornya dalam source code kita — ini tersedia sesuai permintaan.

Objek yang tersedia dalam wp bergantung pada halaman admin yang sedang Anda lihat. Misalnya, jika Anda menyesuaikan situs Anda, maka wp menyertakan objek API main customizer.

Namun, saat ini, Gutenberg Block API hanya tersedia di post editor. Saya mengantisipasi ini akan berubah di masa depan ketika integrasi antara post editor dan site customizer bergerak lebih dekat.

Anda dapat melihat struktur wp dengan membuka editor Gutenberg dan memasukkan wp di konsol browser.

Block API objects added to global wp JavaScript object

Seperti yang Anda lihat, wp berisi banyak objek, tetapi yang paling kita minati adalah:

Objek-objek ini memberi Anda akses ke semua alat yang diperlukan untuk membuat beberapa block yang sangat kompleks. Coba ketikkan nama objek lengkap mereka di konsol browser untuk menjelajahi objek-objek ini lebih lanjut.

Misalnya, jika Anda mengetik di wp.blocks dan memperluas objek, Anda akan melihat salah satu fungsi yang tersedia adalah registerBlockType(). Ini adalah fungsi yang sangat penting yang akan kita bahas secara mendalam di posting berikutnya

Objek wp.elements

Objek ini adalah abstraction layer di atas React (dan ReactDom) yang mengekspos fungsi React dengan cara yang dapat diprediksi dan konsisten. Ini tetap benar bahkan jika implementasi yang mendasarinya diubah atau diubah sepenuhnya.

Selama interface tetap sama, plugin yang berinteraksi dengan Block API tidak akan terpengaruh di masa mendatang.

Object wp.blocks

Fungsi inti untuk membuat block (registerBlockType()) terdapat dalam wp.blocks bersama dengan fungsi-fungsi lain yang diperlukan untuk manajemen block umum seperti:

  • getBlockType()
  • getBlockContent()
  • getBlockAttributes()
  • hasBlockSupport()
  • isValidBlock()

Objek ini juga berisi serangkaian block yang dapat digunakan kembali yang dapat Anda sertakan dalam block Anda sendiri untuk menyediakan fungsionalitas tanpa biaya tambahan. Block siap pakai ini dapat mempercepat pengembangan block secara dramatis, dan kita akan memanfaatkan beberapa di antaranya pada posting berikutnya saat kita menggali lebih jauh ke dalam pembuatan block.

Beberapa yang tersedia adalah:

  • alignment toolbar
  • autocomplete
  • media uploader
  • color palette
  • rich text editor

Object wp.components

Objek wp.components juga mengandung komponen yang dapat digunakan kembali, tetapi ini lebih umum dan biasanya digunakan untuk membuat elemen UI tambahan di jendela editor, seperti panel kontrol untuk pengaturan block.

Itu termasuk:

  • button
  • checkbox
  • code editor
  • dash Icon
  • date/time
  • dropdown
  • menu item
  • radio button
  • range control

Object wp.data

Data module mengelola status aplikasi di editor Gutenberg, yang mencakup pengaturan penyimpanan untuk setiap block. Kita akan melihat berbagai cara Anda dapat menambahkan pengaturan ke block di posting terakhir dari seri ini.

wp.data diimplementasikan di atas Redux, jadi ketika Gutenberg digabungkan dengan inti, kita tidak akan hanya memiliki akses ke React tetapi juga ke toko data terpusat lengkap yang didukung oleh Redux!

Object wp.i18n

Plugin dan tema telah dengan mudah menerjemahkan string PHP selama bertahun-tahun sekarang, dan metode serupa juga tersedia untuk menerjemahkan string dalam JavaScript berkat objek wp.i18n. Ini berarti semua string yang ada di block Anda — termasuk nama block, kata kunci, dan label — dapat diterjemahkan ke bahasa apa pun.

Jika Anda telah menggunakan fungsi terjemahan PHP standar sebelumnya maka Anda akan merasa seperti di rumah karena prosesnya hampir sama. Saya pikir ini adalah langkah yang cerdas karena akan mendorong developer untuk mengaktifkan terjemahan string di block mereka dari awal.

Di dalam block code Anda, menerjemahkan string sama sederhananya dengan:

Kesimpulan

Dalam tutorial ini, kita telah menerapkan block dasar dan mengedit kode. Kita juga telah melihat bahwa kita memiliki kontrol penuh atas pembuatan block dan dapat memiliki pandangan block yang berbeda di editor dibandingkan dengan bagian depan.

Editor masih memiliki beberapa masalah yang dapat mengejutkan Anda dari waktu ke waktu — ini berfungsi sebagai pengingat bahwa Gutenberg masih dalam pengembangan dan mungkin tidak siap digunakan di lokasi produksi.

Akhirnya, kita selesai dengan gambaran tentang block API, yang memperkenalkan beberapa objek baru pada objek JavaScript global wp untuk membuat dan mengelola block.

Di posting berikutnya, kita akan menambah kecepatan dan membuat block yang lebih komprehensif. Untuk melakukannya, kita akan menjelajahi fungsi registerBlockType() secara mendalam. Kita juga akan melihat lebih dekat pengetikan script block Anda dengan benar.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.