PANDUAN CARA UPDATE KONTENWEB WORDPRESS DENGAN

GUTENBERG EDITOR(by - www.CenterKlik.com)

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.

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.

kali ini saya akan membantu Anda mempelajari bagaimana Anda dapat menggunakan

editor baru Gutenberg untuk membuat tata letak untuk konten WordPress Anda.

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.

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.

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

Versi terbaru Gutenberg juga memiliki pengeditan drag-and-drop. 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

• 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).

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.

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:

Membangun Layout Pertama Anda Dengan Editor Gutenberg WordPress

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.

–

Referensi:

• https://www.webhostmu.com/cara-menggunakan-wordpress/

• https://www.centerklik.com/cara-menggunakan-editor-gutenberg-wordpress/

• https://www.centerklik.com/list-tutorial-wordpress/

• https://www.wpbeginner.com/beginners-guide/how-to-use-the-new-wordpress-

block-editor/