- 274views
- 7
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.
Gutenberg Masalah Besar Gutenberg 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.
Warning: The account for einz.my needs to be reconnected.
Due to Instagram platform changes on March 2, 2020, this Instagram account needs to be reconnected to allow the feed to continue updating. Reconnect on plugin Settings page
Follow Twitter @EinzMY
Jom follow twitter @EinzMY
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
- 274views
- 7
zatiewander
Terima kasih atas tutorialnya bro Einz. Sbg penulis blog zatiewanderer.com dan blog2 lain sejak 10 tahun lalu, muscle memory masih lagi kuat. Agak sukar utk beralih ke Gutenberg. Pada mula testing, hanya mampu bertahan 5 minit sahaja dan awal2 lagi terus install Classic Editor. Nanti saya akan cuba terutama fungsi wide tu. Masalah utama sbg travel blogger ialah untuk masukkan mass photo ke dalam posting. Kalau guna classic editor, Add Media semudah select all photo dari File Explorer dan upload. Tak pasti pula kalau di Gutenberg, harapnya boleh. Jika mengabaikan Gutenberg, ibarat masih kekal menggunakan phone bar zaman dulu berbanding smartphone.
Einz
Sama2. Planning nak edit lagi tutorial gutenberg ni untuk add more info, so boleh follow up dalam few days okay. Kalau pakai gutenberg, taip dalam block Classic Paragraph, dan tekan button insert media, boleh import/upload photos secara bulk. Ada macam2 jenis gallery atau slider yang possible hanya bila pakai gutenberg.