Pernahkah kamu melihat kotak persegi di bagian teks pada salah satu laman website milik saya dan beberapa diantaranya? Contoh seperti kotak di bawah ini.
Contoh teks dalam kotak
Nah kotaknya seperti di atas, dan ini tinggal aktifin dengan cara klik dibagian Gaya di editor Gutenberg. Enak sekali tanpa perlu custom code dengan menambahkan class ID.
// Custom CSS Kotak
add_action('init', function() {
$inline_css = '.is-style-kotak, .editor-styles-wrapper .is-style-kotak {padding: 20px 25px; border: 1px dashed #ddd;}';
register_block_style('core/paragraph', [
'name' => 'kotak',
'label' => __('Kotak', 'txtdomain'),
'inline_style' => $inline_css
]);
});
Scriptnya bisa kamu copy saja di atas, kemudian masuk ke Theme -> Editor Berkas Tema -> Function.php
Taruh aja di sana, tapi kamu harus pakai Child Theme dari tema yang kamu gunakan ya supaya kalau ada update tidak perlu memasang scriptnya lagi.
Kalau tidak mau ribet tinggal pakai code snippet aja, gampang kan?
Ohya nanti tampilan di dalam editor gutenberg nya akan seperti ini.
Cara pakainya gampang juga, kamu tinggal bikin teksnya pakai “Paragraf” kemudian ke menu Gaya dan pilih “Kotak” dan voila langsung jadi.
Kalau kamu mau edit style dari bordernya juga bisa kok, tinggal edit aja bagian ini
{padding: 20px 25px; border: 1px dashed #ddd;}Dan ini untuk macam-macam style border;
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
Kayak gitu dulu aja ya, babay…
