WordPress Tutorial – Cara Guna Gutenberg Editor Untuk Tulis Post/Page/Content

Ketika pertama kali diperkenalkan, Gutenberg  atau juga dikenali sebagai Block Editor digambarkan sebagai perubahan besar kepada teras asas WordPress ke arah yang lebih moden, multi-media, pantas dan mesra semua jenis peranti dari desktop PC, laptop, tablet dan telefon pintar.  Walau bagaimanapun, sehingga kini masih ramai pengguna WordPress termasuklah pengguna veteran lebih gemar menulis content untuk laman web atau blog mereka menggunakan Classic Editor. 

Puncanya? Gutenberg tak mesra pengguna dan mengelirukan.

Perbezaan Classic Editor vs Gutenberg Editor WordPress

Hujung 2018 merupakan pertama kali saya mencuba Gutenberg dan dalam 2 minit pertama tu dah keliru dengan pelbagai isu. Tutorial mengenai Gutenberg juga masih tak banyak ketika itu dan tidak berapa membantu. Akhirnya saya patah balik kepada Classic Editor kerana mudah dan cepat. Orang kata dah jadi macam muscle memory, semua butang, fungsi, code dah dalam kepala.

Tapi pertengahan 2019, saya akhirnya menggunakan Gutenberg sepenuh masa kerana beberapa faktor. Banyak themes, plugins baru serta artikel-artikel berkaitan WordPress yang relevan hampir semuanya dibangunkan/ditujukan khas untuk Gutenberg. Saya juga akhirnya faham cara, tips dan trick guna Gutenberg yang boleh membantu menghasilkan content yang lebih dinamik dan menjimatkan masa dan tenaga berbanding menggunakan Classic Editor.

Masalah terbesar bila guna Block Editor ialah ruang menulis content yang terlalu sempit (by default). Tulis Post Title pun dah bazir beberapa baris (row) dalam usable screen estate. Jika dibandingkan Classic Editor yang lebih mudah kerana menggunakan full-width untuk ruangan menulis content, by default.  

Classic Editor juga memudahkan tukar kepada WYSIWYG editor dan HTML editor serta akses kepada element penting dan core UI wordpress dengan mudah dan cepat. Berbanding  Gutenberg yang terlalu banyak elements dan UI penting yang tersembunyi dan perlu scroll, click, cari, repeat.

Tukar Editor Gutenberg Kepada Full Width

Perkara paling penting sebelum guna Block Editor sepenuh masa ialah menukar max width kepada lebih luas Tak perlu pakai plugin tambahan, hanya edit CSS theme anda dan tambah code di bawah. Bergantung kepada saiz screen dan resolution PC anda, saya berpendapat max-width 1200px adalah paling sesuai dengan monitor 1920×1080 tanpa menjejaskan fungsi asas lain. Anda boleh ubah mengikut kesesuaian sendiri. 

Dirujuk daripada Gutenberg Github.

.wp-block {
  max-width: 1200px;
}

.block-editor-writing-flow {
  padding-left: 3rem;
}

Asas Menggunakan Gutenberg Block Editor

Untuk menulis content, tambah Block baru dengan klik butang  ➕ dan pilih Classic Paragraph untuk memudahkan transisi dari Classic Editor. Classic Editor juga memudahkan anda tukar ke HTML view. 

Di menu block, anda ada pilihan untuk Insert before/after, convert, duplicate dan remove block samada manual click atau menggunakan keyboard shortcut. Untuk memasukkan block lain, hanya perlu klik butang ➕ sahaja selepas paragraph.

Anda juga boleh guna block Classic Editor untuk menulis content cuma secara peribadi saya lebih selesa guna block Classic Paragraph.

Selain itu, anda juga boleh mencuba pelbagai lagi block yang ada seperti Quote, Image, Gallery, Audio, Embed dan banyak lagi. Semua ini terbina dalam Gutenberg sendiri tanpa perlu anda install plugin tambahan.

Gutenberg Block Yang Lebih Interaktif – Table of Contents, Buttons, Instagram Feed, Gallery, Slider, Related Posts

WordPress kini mempunyai ramai pembangun plugin khas untuk Gutenberg yang boleh menjadikan content anda lebih interaktif, eye-catching dan lebih moden. Plugin ini memberikan anda fungsi yang tidak ada secara default dalam Gutenberg ataupun menggantikan fungsi sesuatu block asal kepada yang lebih baik.

Anda boleh tambah plugin tambahan jika anda perlukan sesuatu fungsi seperti Table of Contents, Sliders, Related Posts, Instagram Feed ke dalam post Gutenberg. Tak perlu install banyak, pilih yang perlu saja.

Contoh Interaktif Content Semudah 1 Klik Guna Gutenberg

Anda boleh memasukkan kod HTML, membuat table of contents, gallery, sliders dan banyak lagi menggunakan Classic Editor. Tapi Gutenberg memudahkan proses kerana anda hanya perlu ➕ dan pilih jenis Block yang anda mahu, semudah 1 klik. Boleh susun, duplicate block dan lihat secara masa nyata tanpa perlu preview post.

Ini contoh Instagram block, Twitter, progress bar, button, slider, CTA button. Banyak lagi yang boleh buat cuma kena kreatif dan pandai pilih bila nak guna tanpa rasa semak.

einz.my

📷 Samsung Galaxy Note FE / iPhone 6. Sony Mirrorless camera enthusiast. Blogger, tech enthusiast, avid manga reader. Father of two awesome kids.

جؤكير ستيراس، فؤتري حاربور

Dah 3 bulan beli mic Boya BY-MM1 ni, now baru nak

Hello guys, dah dekat setahun tak post kat IG ni.

Sedap betul air tin $0.99 ni, banyak perisa ada da

Lightroom Mobile tips; enable HDR Raw features dal

Hari ini balik kampung wife so otw balik tu singga

Xiaomi 10W fast wireless charger quick review . Ko

Lawa gila graphic dan fluid gameplay, main Dragon

Dragon Ball Fighter Z dah ada kat Switch. Awal tah

Load More... Follow on Instagram

Gutenberg Mudah Digunakan Walaupun User Interface Kurang Mesra Pengguna

Jika anda baca artikel ini dari awal sampai habis, saya yakin kurang daripada 1 jam anda sudah boleh menguasai asas penggunaan Gutenberg. Kalau diikutkan, banyak lagi peningkatan yang perlu dibuat oleh pembangun Gutenberg dan WordPress untuk lebih mesra pengguna terutama mereka yang baru dalam dunia WordPress.

Jom kongsikan artikel ini dengan rakan-rakan anda di Facebook, Twitter dan Whatsapp.

Suka baca artikel2 di Einz Dot My ?Jom follow kami di media sosial dan berkongsi pandangan atau persoalan anda; https://fb.com/einsmy https://twitter.com/einztrigger https://instagram.com/einz.my