Panduan Lengkap Editor Baru WordPress Gutenberg. WordPress merupakan platform website yang memiliki editor yang sudah sangat bagus dan mudah digunakan, tapi WordPress juga selalu mengembangkan platformnya agar menjadi yang terbaik. Maka dari itu, saat ini WordPress mengenalkan kepada pengguna sebuah editor revolusioner yang bernama Gutenberg.

Anda mungkin saat ini masih belum tahu atau mungkin belum akrab dengan editor Gutenberg WordPress, karena memang editor Gutenberg saat ini belum digunakan di WordPress secara penuh dan belum menjadi fitur bawaan, namun Gutenberg sudah dikenalkan oleh WordPress pada semua pengguna.

Jika Anda sudah mengetahui sedikit tentang Gutenberg atau mungkin sudah mencoba editor ini, ada sebagian pengguna yang merasa terpukau dan menyukainya dan ada sebagian pengguna lagi mereasa kesulitan dan bingung dengan editor baru ini. Tapi perlu Anda ketahui bahwa editor Gutenberg ini suatu saat akan digunakan sebagai fitur bawaan oleh WordPress dengan tujuan membawa fitur yang baru, lebih segar, lebih modern dan masih banyak lagi.

Baca : Cara Menonaktifkan Gutenberg dan Beralih ke Editor Lama WordPress

Dan bagi Anda yang merasa kurang suka dengan editor Gutenberg, mau tidak mau suatu saat nanti Anda juga harus menggunakan ini, dan alangkah baiknya jika Anda mempelajarinya mulai hari ini.

Pada artikel kali ini saya akan membantu Anda mempelajari bagaimana Anda dapat menggunakan editor baru Gutenberg untuk membuat tata letak untuk konten WordPress Anda.

Baca : Cara Memulai Membuat Blog WordPress dalam Waktu 30 Menit

Apa itu Gutenberg?

Gutenberg adalah editor WordPress baru yang akan dirilis pada update besar WordPress versi 5.0 yang kemungkinan akan dilakukan pada akhir tahun 2018 ini dan editor Gutenberg akan menggantikan editor WordPress yang kita gunakan saat ini yaitu editor TinyMCE (editor teks WYSIWYG saat ini yang bisa kita lihat ketika menulis posting dan halaman Anda).

Gutenberg saat ini masih berupa plugin dan belum menjadi fitur bawaan dari WordPress secara utuh, saat ini Gutenberg sudah di download sebanyak 2,5 juta lebih pengguna WordPress. Dan saat ini diperkenalkan di WordPress, banyak pengguna memberikan kritikan dan rating rendah lebih besar daripada rating tinggi, hal ini kemungkinan banyak pengguna yang tidak siap dan sudah tidak ingin belajar lagi hal baru yang sedikit rumit.

Dan inilah tampilan editor WordPress TinyMCE:

Dan inilah tampilan editor WordPress Gutenberg baru:

Gutenberg lebih dari sekedar pembaruan estetik. Gutenberg akan benar-benar mengubah pengalaman pengeditan pengguna dengan berpindah ke pendekatan berbasis blok ke konten. Ini akan menjadikan kita mudah dalam menulis artikel dan membuat jenis konten lainnya.

Gutenberg sementara masih fokus pada pembuatan konten, tapi tujuan akhirnya adalah kustomisasi situs lengkap pada bagian posting dan halaman WordPress. Ini berarti Anda akan dapat membangun seluruh situs Anda menggunakan Gutenberg, termasuk halaman arahan dan konten penting lainnya dengan fungsional yang jauh lebih lengkap dibanding editor yang kita gunakan saat ini, banyak hal bisa kita lakukan dengan editor Gutenberg ini.

Kapan Gutenberg akan menjadi bagian dari WordPress?

Gutenberg saat ini masih dalam masa percobaan dan belum menjadi satu bagian dari WordPress secara keseluruhan dan masih berupa sebuah plugin, namun Gutenberg akan benar-benar digunakan secara default pada update WordPress versi 5.0. Dan semoga tim inti WordPress akan menyempurnakan editor Gutenberg sampai benar-benar editor ini digunakan sebagai editor WordPress default.

Anda bisa mencoba Gutenberg versi beta ini pada situs demo Anda, dan jangan menggunakan pada situs bisnis atau situs yang sedang live.

Baca : Panduan Membuat Postingan di WordPress dan Penjelasan Fiturnya

Bagaimana cara kerja editor Gutenberg WordPress

Seperti yang sudah saya katakan sebelumnya bahwa Gutenberg adalah editor berbasis blok.

Jadi pengeditan berbasis blok di sini pada dasarnya Gutenberg menggantikan bidang pengeditan tunggal dari editor WordPress TinyMCE saat ini dengan banyak “blok” individual. Anda bisa sambil membaca artikel ini dengan melihat interface dan mencobanya secara live disini ⇒ Gutenberg WordPress.

Editor berbasis blok ini memungkinkan Anda untuk membuat desain konten yang lebih rumit dengan pilihan yang lebih lengkap dibanding ketika Anda menggunakan editor WordPress TinyMCE saat ini dimana dengan TinyMCE kita cenderung hanya dapat membuat konten teks biasa, dan gambar.

Jadi apa itu blok?

Nah, blok bisa sangat banyak. Misalnya, Anda dapat memiliki blok untuk:

• Teks biasa
• Gambar
• Video Embed
• Tabel
• Tombol
• Widget (widget yang sama yang Anda gunakan di sidebar Anda)
• Dan lain-lain

Dan yang paling bagus adalah pengembang akan dapat membuat blok pihak ketiga mereka sendiri yang dapat Anda akses melalui plugin untuk fleksibilitas lebih banyak lagi.

Setiap blok adalah entitasnya sendiri yang dapat Anda manipulasikan secara individual. Misalnya, berikut merupakan postingan Gutenberg cepat yang berisi dua blok:

• Teks
• Gambar

Lihat seberapa mudah saya dapat mengatur ulang dua blok tersebut hanya dengan mengklik tombol:

Versi terbaru Gutenberg juga memiliki pengeditan drag-and-drop! Silahkan terus membaca.

Dan karena setiap blok “terpisah”, Anda juga dapat menambahkan hal-hal seperti latar belakang khusus hanya untuk bagian tertentu.

Secara umum, ini memberi Anda lebih banyak fleksibilitas dan kontrol yang mendalam.

Jadi, Gutenberg pada bagian tertentu memiliki fitur yang hampir mirip dengan Pagebuilder. Gutenberg akan membuatnya lebih mudah untuk menata konten biasa seperti posting blog atau halaman standar, tetapi Pagebuilder masih memiliki fungsi lebih dari editor ini karena memang mempunyai tujuan yang tidak sepenuhnya sama.

Karena ini masih permulaan, maka Gutenberg juga memiliki kekurangan seperti:

• Kolom fleksibel – (sekarang ada blok kolom dalam versi beta, tetapi cukup mendasar dan memiliki beberapa bug)
• Drag and drop – versi yang lebih baru dari Gutenberg memungkinkan Anda mengatur ulang blok dengan drag and drop, tetapi masih tidak berbentuk bebas seperti kebanyakan yang ditawarkan oleh Pagebuilder.

Dengan itu dikatakan, Gutenberg siap untuk menghilangkan kebutuhan untuk pembangun halaman untuk sebagian besar konten “standar”, dan itu juga menciptakan metode terpadu tunggal untuk membuat layout posting yang lebih kompleks di WordPress.

Namun ketika membuat halaman yang lebih rumit, seperti halaman arahan, Page builder masih unggul dalam hal fleksibilitas yang lebih besar (setidaknya selama rilis awal Gutenberg).

Sebagai contoh, dalam perbandingan antara Elementor vs Divi Builder vs Beaver Builder, Anda dapat melihat bagaimana ketiga page builder tersebut menawarkan hal-hal seperti:

• Pengeditan drag and drop padaa form
• Dukungan multi-kolom yang benar di mana Anda dapat membuat sejumlah kolom untuk menyeret masing-masing elemen ke dalamnya
• Banyak template yang dibuat sebelumnya
• Opsi style canggih, dengan dashed untuk margin / padding khusus dan banyak lagi
• Pengaturan desain responsif

Gutenberg mungkin akan bisa memiliki fitur yang sama suatu hari nanti. Tapi setidaknya dalam rilis awal, Page builder akan tetap memberikan Anda fleksibilitas untuk mendesain halaman yang lebih rumit.

Bagaimana cara memasang Gutenberg di situs WordPress Anda

Seperti yang sudah saya katakan, Gutenberg akan menggantikan editor WordPress default di WordPress 5.0. Tapi untuk saat ini, satu-satunya pilihan Anda untuk bermain-main dengan itu adalah menginstal plugin Gutenberg.

Ingat, meskipun – Gutenberg masih dalam versi beta, jadi saya sangat menyarankan Anda untuk tidak menginstalnya di situs web yang sedang live, Anda bisa mencoba pada situs demo terlebih dahulu.

Berikut ini cara memasang plugin Gutenberg disitus WordPress Anda:

• Buka menu Plugins → Add New
• Ketik “Gutenberg” pada kolom pencarian
• Klik Install Now
• Dan Klik Activated

Setelah Anda mengaktifkan plugin, situs Anda akan secara otomatis menggunakan editor Gutenberg ketika Anda masuk pada bagian editor post dan hamalan, Anda bisa mencoba masuk pada Posts → Add New untuk melihatnya:

Gunakan tema Gutenberg untuk hasil terbaik

Sementara Gutenberg dirancang untuk bekerja dengan tema WordPress (seperti editor WordPress), memilih tema yang secara khusus menawarkan kompatibilitas Gutenberg akan menawarkan beberapa manfaat nyata, karena saat ini tidak semua tema bisa menjalankan hasil terbaik ketika menggunakan Gutenberg, dan mungkin hanya untuk konten dasar saja.

Jika Gutenberg sudah benar-benar digunakan oleh WordPress sebagai fitur bawaan, maka banyak pengembang tema WordPress harus menyesuaikan tema mereka agar dapat memaksimalkan penggunaan editor Gutenberg.

Pertama, tema dapat menawarkan style bawaan untuk blok Gutenberg. Lebih baik lagi, tema sebenarnya dapat memuat gaya ini di dalam editor. Itu berarti Anda dapat melihat styling nyata untuk blok Anda saat Anda membangun konten Anda untuk pengalaman WYSIWYG yang lebih baik. (lihat versi dasar dari aksi ini di sini)

Tema Gutenberg juga akan dapat menawarkan template siap pakai yang terdiri dari berbagai blok sehingga yang perlu Anda lakukan hanyalah menyambungkan konten Anda ke dalam blok yang ada dan tekan tombol “Publish”.

Saat ini juga sudah mulai terdapat beberapa pengembang mulai merilis tema yang mendukung fitur Gutenberg. Beberapa opsi bagus yang bisa Anda mainkan adalah:

• Ohana Theme – Anda harus mendownload tema ini dari Github
• Atomic Block – Anda dapat download secara gratis dari Array themes

Membangun Layout pertama Anda dengan editor Gutenberg WordPress

Ok – sekarang setelah Anda memasang Gutenberg, mari masuk pada bagian terpenting dari artikel ini. Di bawah ini, saya akan menunjukkan kepada Anda cara menggunakan editor WordPress Gutenberg baru untuk membuat tata letak halaman yang lengkap.

Dengan begitu, Anda akan siap untuk menyesuaikan diri ketika WordPress versi 5.0 dirilis dan Gutenberg menjadi editor default WordPress.

Sebelum Anda mulai menambahkan beberapa blok, mari kita bahas secara singkat elemen-elemen antarmuka Gutenberg utama:

• (A) – Tombol untuk menambahkan blok baru.
• (B) – Tombol undo / redo
• (C) – Tombol untuk akses ke pengaturan dokumen, mencakup hal-hal seperti kategori & tag, gambar unggulan (Featured Image), dll. Ini mirip dengan featured image pada sidebar seperti di editor WordPress saat ini.
• (D) – Ketika Anda memiliki blok individu yang dipilih, ini memberi Anda akses ke pengaturan yang khusus untuk blok itu
• (E) – Memungkinkan Anda mengakses live preview dari posting Anda atau mempublikasikan / memperbarui posting Anda
• (F) – Area konten postingan Anda, disinilah Anda bekerja dengan konten Anda.

Menambahkan blok ke Gutenberg

Saat saya membahas dalam pembukaan artikel ini, saya mengatakan bahwa kita akan bekerja menggunakan editor berbasis “blok” terpisah untuk membangun tata letak postingan dan halaman Anda dengan Gutenberg.

Untuk menambahkan blok baru, Anda hanya perlu mengeklik ikon + Plus dan memilih jenis konten yang ingin Anda tambahkan:

Dalam contoh di atas, saya menunjukkan cara menambahkan blok paragraf dasar. Tapi sebenarnya Gutenberg mencakup banyak blok yang berbeda, dibagi menjadi beberapa bagian berbeda:

Di bagian atas, Anda melihat daftar blok Paling Sering Digunakan “Most Used”. Tetapi jika Anda menggulir ke bawah, Anda juga akan melihat bagian untuk Common Blocks, Formatting, Layout Elements, Widgets, dan Embeds:

• Common Blocks – berisi blok bangunan dasar seperti gambar, paragraf (teks biasa), judul, kutipan, dll.
• Formatting – memungkinkan Anda menambahkan lebih banyak konten berformat seperti kutipan tarik, tabel, atau editor teks WordPress klasik
• Layout Elements – memungkinkan Anda membagi teks menjadi dua kolom, menyertakan tombol, pemisah, atau tag “Lainnya”
• Widgets – memungkinkan Anda menambahkan shortcode, posting terbaru, atau kategori. Bahkan dimungkinkan untuk menampilkan widget sidebar langsung di Gutenberg.
• Embeds – membantu Anda menyematkan konten dari sumber eksternal seperti Twitter, YouTube, Facebook, Instagram, dan lainnya.

Membuat layout dasar dengan editor Gutenberg

Mari kita mencoba mulai dengan cara paling sederhana. Misal Anda hanya ingin membangun layout posting blog dasar yang dalam konten Anda tersebut hanya meliputi:

• Teks biasa
• Gambar
• Kutipan
• Video YouTube

Inilah cara Anda melakukannya dengan Gutenberg:

Pertama, Anda akan menulis seluruh pos Anda di editor. Atau, jika Anda lebih suka menulis di Google Doc, Anda juga dapat menyalin semua dan kemudian editor Gutenberg akan secara otomatis mengonversinya menjadi blok.

Menambahkan blok non-teks

Setelah konten Anda dibagi menjadi blok, Anda dapat mengarahkan kursor ke tempat di mana Anda ingin memasukkan gambar pertama Anda dan klik ikon plus (+) pada pojok kiri atas. Itu akan menciptakan sebuah ruang atau space. Kemudian, klik ikon plus (+) lagi untuk memasukkan blok “Image”:

Setelah Anda untuk memasukkan blok gambar, Anda dapat mengunggah atau memilih gambar dengan cara yang mirip dengan editor WordPress TinyMCE yang Anda gunakan saat ini:

Setelah Anda memilih gambar Anda, Anda harusnya melihat gambar sudah terpasang pada area yang Anda inginkan.

Selanjutnya, arahkan kursor ke tempat di mana Anda ingin memasukkan kutipan tarik atau Quote dan gunakan pendekatan yang sama untuk memasukkan blok lain. Anda dapat mencari “Quote” atau masuk pada bagian “Common Blocks”:

Kemudian, Anda akan melihat blok “Quote” baru Anda. Untuk membuat kutipan Anda, semua yang perlu Anda lakukan adalah klik ke blok dan ketik tulisan yang akan jadikan sebagai kutipan atau quote:

Untuk memasukkan video YouTube, Anda dapat menambahkan blok YouTube baru dari tab Embed.

Untuk memasukkan video, yang perlu Anda lakukan adalah memasukkan URL dan klik Embed:

Opsional – membuat kolom yang berbeda

Gutenberg juga menyertakan fitur kolom eksperimental yang memungkinkan Anda membuat beberapa kolom dengan cepat. Yang perlu Anda lakukan adalah menambahkan blok Kolom (Beta) dari bagian Elemen Lsyout. Kemudian, Anda dapat memasukkan blok lain di dalamnya:

Setelah selesai, yang perlu Anda lakukan hanyalah mengeklik tombol Publish:

Sekarang Anda bisa melihat bagaimana konten di postingan Anda ditampilkan pada situs Anda.

Cara mengatur setiap individu blok yang dibuat

Editor WordPress Gutenberg menyertakan banyak blok yang berbeda, Anda bisa menyesuaikan atau mengatur masing-masing blok yang Anda buat tersebut sesuai keinginan Anda.

Disini saya akan mencoba memberikan satu contoh bagaimana Anda dapat mneyesuiakan blog untuk tombol yang Anda buat dengan editor Gutenberg.

Untuk mengatur letak tombol, Anda dapat menggunakan bilah menu yang muncul saat Anda mengarahkan kursor ke blok, ini seperti rata kanan, kiri, tengah dan menebalkan tulisan.

Dan untuk mempercantik tombol dengan berbagai warna dan lainnya, Anda bisa menyesuaikan blok tersebut dengan masuk pada tab Setelan blok di sebelah kanan. Untuk mengakses tab itu, pilih blok yang ingin Anda edit dan jelajahi ke tab Block:

Dan itulah panduan lengkap tentang editor WordPress Gutenberg baru yang bisa saya jelaskan, Anda bisa mencoba banyak fitur lain yang lebih daripada hanya membuat konten biasa, karena gutenberg memiliki banyak sekali fitur yang akan menjadikan konten Anda tampil dengan berbagai fungsionalitas lebih. Saya yakin, jika Anda sudah terbiasa menggunakan editor Gutenberg maka Anda akan merasa nyaman dan menemukan editor yang benar-benar Anda butuhkan daripada editor WordPress yang lama.

Baca : Cara Memasang Embed Video Youtube di WordPress

Semoga artikel ini bermanfaat dan selamat belajar editor Gutenberg sehingga Anda benar-benar siap ketika editor Gutenberg benar-benar dirilis sebagai editor default WordPress menggantikan TinyMCE. 🙂

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Facebook+.

Daftar isi Tutorial WordPress Terlengkap Gratis