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

Membuat Variasi Gaya untuk WordPress Gutenberg Blok: Bagian 2

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Imam Firmansyah (you can also view the original English article)

Dalam tulisan sebelumnya kita mempelajari semua tentang variasi gaya blok dan bagaimana mereka digunakan dalam editor WordPress 5.0 yang baru untuk beralih di antara gaya yang telah ditentukan sebelumnya dengan mudah.

Kami akan mengambil sedikit lebih jauh dalam tulisan ini dengan memberikan lebih banyak contoh untuk memberi Anda dasar yang kuat untuk menerapkan variasi gaya blok dalam proyek Anda sendiri. Khususnya, kami akan membuat blok kami sendiri dari awal untuk mendemonstrasikan cara menambahkan banyak variasi gaya secara langsung dalam definisi blok itu sendiri. Saya juga akan menunjukkan kepada Anda bagaimana mengatur gaya blok mana yang digunakan sebagai standarnya yang juga akan dibahas disini.

Kemudian kita akan melihat perluasan dari blok kita dengan menambahkan variasi gaya blok lebih lanjut (singkatnya BSV) melalui plugin terpisah. Anda biasanya ingin melakukan ini jika Anda perlu memperluas gaya blok tetapi tidak memiliki akses ke kode sumber blok.

Pendekatan yang sama akan digunakan lagi tetapi kali ini melalui child theme. Anda mungkin ingin melakukan hal ini untuk memberikan variasi gaya tambahan untuk blok utama agar sesuai dengan gaya tema Anda sendiri.

Sama pentingnya dengan mendaftarkan gaya baru adalah cara membatalkan registrasi juga. Dan ada fungsi khusus yang akan kita gunakan untuk melakukan hal ini.

Semua kode untuk tutorial ini tersedia untuk diunduh pada repositori GitHub kami di sebelah kanan, jadi Anda tidak perlu mengetikkan kode secara manual jika Anda hanya ingin mengikuti.

Mendaftarkan BSV Di Dalam Blok a

Jika Anda memiliki akses ke kode sumber blok maka Anda dapat mengelola variasi gaya blok secara langsung di dalam registerBlockType(). Mari kita lihat lebih dekat.

Pertama, kita perlu memutar blok baru. Tidak masalah apa yang blok lakukan karena kami hanya perlu sesuatu untuk menambahkan variasi gaya blok khusus kami juga. Mungkin cara termudah untuk melakukan ini adalah dengan menggunakan utilitas create-guten-block yang membuat plugin baru dan menambahkan contoh blok yang siap untuk dikustomisasi. Dan hal tersebut melakukan semuanya melalui satu perintah terminal!

Jika Anda belum pernah menggunakan utilitas praktis ini sebelumnya, maka Anda dapat melihat repositori proyek untuk informasi lebih lanjut. Juga, inilah tutorial khusus untuk mempercepat Anda jika diperlukan.

Di dalam folder plugin WordPress lokal Anda, buka jendela command-line dan masukkan:

Saya telah menggunakan bsv-plugin di sini untuk nama, tetapi Anda dapat menggunakan apa pun yang Anda suka. Setelah beberapa menit ketika instalasi selesai, masukkan:

Kita sekarang dapat mengedit kode sumber untuk blok yang baru dibuat dan create-guten-block akan secara otomatis mengkompilasi kode sumber untuk kita setiap kita telah melakukan perubahan. Bagus.

Lanjutkan dan aktifkan plugin di dalam admin WordPress dan tambahkan contoh blok baru Anda ke editor dengan membuat halaman baru atau mengedit yang sudah ada.

Block created with create-guten-block

Hapus Gaya Editor-Only

Sebelum kita melangkah lebih jauh, kita hanya perlu mengubah cara CSS di enqueued secara default.

Blok custom create-guten-block yang baru saja dibuat untuk kami menyertakan dua style sheet. Yang satu enqueued pada editor dan yang lainnya enqueued pada editor dan frontend. Kami tidak memerlukan gaya editor-only untuk tutorial ini, .\bsv-plugin\src\init.php jadikan komentar atau hapus panggilan ke wp_enqueue_style() di bsv_plugin_cgb_editor_assets().

Tetap di init.php sejenak, kita juga perlu menjadikan komentar array dependensi untuk wp_enqueue_style() di bsv_plugin_cgb_block_assets() karena untuk beberapa alasan ini, saat ini mencegah gaya ter-enqueue dengan benar. Saya menggunakan create-guten-block v1.11.0 dalam tutorial ini sehingga Anda mungkin atau mungkin juga tidak memiliki masalah yang sama tergantung pada versi yang Anda gunakan.

Fungsi bsv_plugin_cgb_block_assets() sekarang akan terlihat seperti ini:

Sekarang ketika Anda memuat halaman, Anda akan melihat gaya blok yang diterapkan pada editor dan pada bagian front end yang kita inginkan.

Block styles enqueued on frontend and backend

Daftarkan Variasi Gaya Blok

Kita semua sudah siap sekarang untuk menambahkan CSS khusus kami yang akan kami buat secara singkat. Pertama, kami harus mendaftarkan variasi gaya blok kami.

Buka .\bsv-plugin\src\block\block.js dan tambahkan kode berikut ini ke konfigurasi objek fungsi registerBlockType (misalnya. Tepat di bawah properti keywords akan dilakukan di sini).

Ini mendaftarkan tiga variasi gaya baru untuk blok khusus kami. Perhatikan bagaimana variasi gaya blok bernama style1 memiliki properti isDefault disetel ke true. Ini cukup memilih variasi gaya blok Style 1 ketika Anda membuka opsi blok pada editor. Seperti yang mungkin Anda pikirkan, ini sebenarnya tidak mengatur kelas CSS apa pun untuk blok.

Ini sedikit hambatan bagi saya ketika saya pertama kali mulai bekerja dengan variasi gaya blok dan merupakan sumber dari banyak kebingungan. Mudah-mudahan kedepannya properti isDefault juga akan memicu kelas CSS untuk ditambahkan ke pembungkus (wrapper) blok yang menurut saya lebih intuitif.

Refresh halaman editor dan buka opsi variasi gaya dengan mengklik ikon di kiri atas blok untuk melihat tiga variasi gaya blok yang baru saja kita tentukan.

Our three new block style variations

Perhatikan bagaimana variasi gaya blok Style 1 dipilih secara default yang telah kami tentukan di properti styles di atas. Memilih salah satu dari tiga variasi variasi gaya blok menghasilkan berbagai kelas CSS yang ditambahkan ke wrapper blok. Misalnya memilih Style 2 menambahkan kelas is-style-style2.

Block style variation CSS class added to markup

Saat ini tidak ada yang terjadi ketika setiap variasi gaya blok dipilih, jadi mari kita tambahkan beberapa gaya dasar untuk memperbaikinya. Di .\bsvplugin\src\block\style.scss tambahkan kode berikut setelah style yang ada:

Hanya gaya khusus untuk variasi blok gaya Style 2 dan Style 3 yang ditambahkan di sini sehingga gaya blok default masih diterapkan bahkan ketika tidak ada variasi gaya blok diklik secara spesifik.

Our block styles added

Seperti yang Anda lihat, variasi gaya blok kami sekarang tersedia dengan gaya yang diterapkan. Saya sangat suka cara Anda dapat melihat pratinjau dari setiap variasi gaya saat Anda mengarahkan mouse pada blok tersebut, dan tanpa harus memilihnya juga!

Mendaftarkan BSV Melalui Plugin

Jika Anda ingin menambahkan variasi gaya ke blok yang Anda tidak memiliki akses kode sumber, maka Anda dapat menggunakan registerBlockStyle(). Fungsi ini memungkinkan Anda untuk menentukan variasi gaya tambahan untuk blok utama dan blok pihak ke-3, di luar registerBlockType().

Mari kita coba ini dengan menambahkan beberapa variasi gaya kita sendiri ke blok tombol utama. Blok ini hadir dengan tiga variasi gaya yang sudah ditentukan: Bulat (Rounded), Bergaris (Outline), dan Kotak (Squared).

Default block style variations for the button block

Kami akan menambahkan dua variasi gaya kami lebih lanjut: Berbentuk Pill, dan Huruf Besar (Uppercase).

Sebelum kita melakukannya, kita membutuhkan plugin untuk menyimpan kode khusus tersebut. Saya tidak akan membahas ini secara mendalam karena fokus tutorial ini adalah variasi gaya blok daripada pengembangan plugin. Jika Anda memiliki masalah berikut, maka Anda bisa mengunduh plugin yang sudah selesai melalui tautan GitHub di sebelah kanan.

Buat folder bsv baru di dalam WordPress lokal Anda, folder .\wp-content\plugins dan tambahkan tiga file:

  • bsv.php
  • bsv.js
  • bsv.css

Dalam bsv.php, tambahkan kode berikut:

Dalam bsv.js tambahkan kode front-end:

Dan dalam bsv.css tambahkan gaya sendiri:

Aktifkan plugin dan masukkan contoh baru dari blok tombol pada editor. Sekarang Anda akan melihat dua variasi gaya blok baru tersedia!

Two new block style variations added

Memahami Kode Plugin BSV

Mari kita ulas apa yang baru saja kita lakukan. Pada bsv.php file JavaScript di-enqueued melalui hook enqueue_block_editor_assets sehingga hanya dimuat di editor admin. Namun, kami ingin CSS dimuat di editor dan front-end jadi kami menggunakan hook enqueue_block_assets untuk ini.

Untuk gaya cukup jelas, tetapi perhatikan bagaimana kami menargetkan instance blok dengan kelas variasi gaya blok tertentu. Ini memberi kami cara yang bersih untuk memisahkan CSS kami untuk variasi gaya blok yang berbeda.

Yang penting untuk diperhatikan di sini adalah dua panggilan registerBlockStyle(). Fungsi ini hidup pada objek global wp.blocks sehingga kita perlu secara eksplisit menyertakan awalan dimana pun fungsi itu digunakan.

registerBlockStyle() membutuhkan dua argumen. Yang pertama adalah nama blok yang ingin Anda tambahkan variasi gayanya, dan yang kedua adalah objek konfigurasi. Ini sama persis dengan objek yang kami temui sebelumnya ketika kami menambahkan variasi gaya blok secara langsung ke definisi blok melalui properti styles.

Satu hal perhatikan di sini adalah jika Anda menambahkan isDefault: true untuk variasi gaya blok melalui registerBlockStyle() itu akan diabaikan jika variasi gaya standar yang sudah ditetapkan. Hanya sesuatu yang harus diperhatikan jika (seperti saya) yang Anda harapkan itu untuk menimpa default gaya variasi.

Menurut dokumentasi Anda juga dapat membatalkan registrasi variasi gaya blok dengan unregisterBlockStyle(). Penggunaannya sangat mirip dengan registerBlockStyle() tetapi Anda hanya perlu menentukan nama blok dan nama variasi gaya.

Jadi, misalnya, untuk membatalkan pendaftaran variasi gaya pada Outline dari blok tombol, Anda dapat gunakan:

Namun, tampaknya ada sedikit masalah dengan ini sekarang. Ini berfungsi jika Anda memasukkan baris kode di atas pada jendela konsol tetapi tampaknya tidak selalu berfungsi ketika digunakan melalui plugin. Semoga masalah ini akan segera diatasi.

Mendaftarkan BSV melalui Tema

Untuk contoh terakhir, mari kita tambahkan variasi gaya lain ke blok tombol utama untuk menambahkan opsi untuk membuat tombol dengan warna latar gradasi daripada hanya warna datar.

Kami akan menerapkan variasi gaya baru ini melalui child theme saat ini karena saya pikir ini akan menjadi kasus penggunaan umum agar memberikan gaya alternatif untuk blok yang cocok dengan tema Anda sendiri. (Tema ini juga termasuk dalam file yang dapat diunduh untuk tutorial ini jika Anda tidak ingin membuatnya secara manual.)

Saya menggunakan Twenty Nineteen sebagai tema induk karena sudah termasuk dalam WordPress 5.0 tetapi Anda dapat mendasarkannya pada setiap tema induk yang Anda inginkan.

Buat folder baru twentynineteen-child dalam folder WordPress lokal Anda .\wp-content\themes dan tambahkan empat file:

  • style.css
  • functions.php
  • tnc_bsv.js
  • tnc_bsv.css

Kami tidak akan menambahkan gaya khusus apa pun pada child theme style.css tetapi kami harus memasukkannya agar tema tersebut dikenali oleh WordPress.

Dalam style.css tambahkan:

File JavaScript dan CSS di-enqueued melalui functions.php jadi tambahkan kode berikut ke file ini:

Pada tnc_bsv.js tambahkan kode untuk mendaftarkan variasi gaya blok kami:

Akhirnya CSS untuk variasi gaya blok kami ditambahkan ke tnc_bsv.css:

Kode ini hampir sama dengan plugin yang kami buat pada contoh terakhir untuk menambahkan dua variasi gaya blok baru. Yang kami lakukan di sini adalah menambahkan yang lain tetapi kali ini melalui child theme.

Aktifkan tema dan kemudian tambahkan blok tombol ke editor untuk melihat kreasi baru kami.

New block style variation added via a child theme

Anda mungkin telah memperhatikan bahwa saya telah memasukkan kode JavaScript ke dalam pernyataan jQuery:

Ini sebenarnya tidak sepenuhnya diperlukan. Selama pengujian, kode tersebut tampaknya berfungsi dengan baik tanpa pembungkus (wrapper) jQuery. Namun, belum ada pedoman resmi tentang cara menambahkan kode JavaScript yang berinteraksi dengan API editor baru. Sementara itu mungkin disarankan untuk tetap menggunakan metode pembungkus (wrapper) jQuery di atas tetapi pilihannya terserah Anda.

Unduh Kode

Seperti yang telah disebutkan, kode tersedia untuk diunduh melalui tautan GitHub di sebelah kanan halaman.

Repositori ini berisi tema dan dua plugin yang kami kembangkan dalam tutorial ini. Setelah mengunduh konten, Anda akan melihat tiga folder. Tambahkan folder twentynineteen-child ke folder tema .\wp-content\themes Anda dan dua folder plugin lainnya ke folder plugin .\wp-content\plugins.

Aktifkan plugin dan tema untuk membuat variasi gaya blok yang tersedia di editor WordPress baru.

Kesimpulan

Terima kasih telah bergabung dengan saya dalam tutorial ini! Saya harap Anda sekarang memiliki lebih banyak gagasan tentang variasi gaya blok. Beri tahu saya di komentar tentang ide apa yang mungkin Anda miliki untuk menggunakannya dalam proyek Anda sendiri

Saya yakin ini akan menjadi fitur editor baru yang banyak digunakan oleh pengembang plugin dan juga pengembang tema. Khususnya untuk pengembang tema, ini memberi Anda banyak ruang untuk menyesuaikan gaya blok agar sesuai dengan gaya tema Anda.

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.