Menyelam Menjadi Editor WordPress Gutenberg Baru (Pro dan Kontra)

Cara Menggunakan Yoast SEO di WordPress: Tutorial Lengkap

Editor visual WordPress saat ini tidak memiliki banyak perubahan selama bertahun-tahun dan sebagian besar tetap sama. Meskipun ini bukan hal yang buruk, banyak yang berpikir ini saatnya untuk perubahan. Platform lain seperti Medium atau Ghost memberikan pengalaman yang sangat unik dan menyegarkan bagi penulis, jadi mengapa tidak bisa WordPress? Yah, banyak kontributor dan sukarelawan telah mengerjakan editor WordPress Gutenberg baru di belakang layar selama 6+ bulan terakhir. Tujuan mereka? Untuk membuat menambahkan konten yang kaya ke WordPress sederhana dan menyenangkan . Hari ini kita akan membahas editor baru dan mendiskusikan beberapa pro dan kontra.

Apa itu Gutenberg?

Gutenberg adalah editor baru untuk WordPress. Itu dinamai Johannes Gutenberg , yang menemukan mesin cetak dengan jenis bergerak lebih dari 500 tahun yang lalu. Editor visual saat ini membutuhkan banyak dari kita untuk menggunakan kode pendek dan HTML untuk membuat semuanya berfungsi. Tujuan mereka adalah untuk membuat ini lebih mudah, terutama bagi mereka yang baru memulai dengan WordPress. Mereka merangkul ” blok kecil ” dan berharap untuk menambahkan opsi tata letak yang lebih maju. Anda dapat melihat contoh resmi .

Agar adil bagi pengembang dan tim yang mengerjakan ini, penting untuk dicatat bahwa ini saat ini dalam tahap beta dan pengujian, belum siap untuk berjalan di lokasi produksi . Tapi kami ingin menyelam dan melihat sendiri apa semua hype tentang. Kami akan memastikan agar pos ini diperbarui karena perbaikan dan perubahan didorong keluar. Tampaknya sebelum ini akan secara resmi digabungkan ke dalam inti WordPress yang Matt Mullenweg (sang pendiri) berharap untuk mendapatkan 100.000 pemasangan aktif. Yang masuk akal, karena ini akan menyelesaikan banyak bug, masalah, dan memungkinkan mereka untuk memproses ide-ide baru dan permintaan fitur.Bosan dengan hosting WordPress & dukungan di bawah standar? Kami melakukan hal-hal yang berbeda di Kinsta.LIHATLAH PAKET HOSTING KAMI

Bridget Willard@YouTooCanBeGuru

“I think we can do 4.9 before we merge #Gutenberg — ideally over 100,000 active installs first.” @photomatt #WCEU98:22 PM – Jun 17, 2017Twitter Ads info and privacySee Bridget Willard’s other Tweets

Karena Gutenberg masih dalam tahap pengujian, tim yang mengerjakannya mendorong orang untuk mencobanya dan meninggalkan komentar dan umpan balik di forum dukungan WordPress  atau membuka masalah di GitHub . Atau Anda dapat bergabung dengan diskusi yang berlangsung di # core-editor pada  WordPress Slack inti . Gutenberg akan dikirim dengan WordPress 5.0 .

Cara Memasang Gutenberg

Saat menulis ini, plugin Gutenberg saat ini memiliki lebih dari 20.000 instalasi aktif dengan lebih dari 290.000 total unduhan dan 2,5 dari peringkat bintang-5. Ini juga membutuhkan  WordPress versi 4.8  untuk menggunakannya.

Plugin Gutenberg WordPress

Plugin Gutenberg WordPress

Anda dapat mengunduh versi terbaru Gutenberg dari repositori WordPress  atau dengan mencarinya di dasbor WordPress Anda di bawah plugin “Tambah Baru”. Sekali lagi, kami sarankan untuk menginstal ini di situs uji atau memanfaatkan lingkungan pementasan host Anda  .

pasang plugin wordpress gutenberg

Instal plugin Gutenberg WordPress

Menjelajahi Gutenberg

Setelah menginstal Gutenberg, Anda akan melihat tautan di bawah Posting Anda yang memungkinkan Anda untuk membuka editor Gutenberg. Mereka tidak mengganti editor WordPress default, yang merupakan hal yang baik menurut kami, karena selama fase pengujian ini memungkinkan Anda untuk bolak-balik. Pada versi terbaru di repositori, sekarang mendukung jenis halaman kustom dan halaman juga.

Tautan Gutenberg di pos

Tautan Gutenberg di pos

Penting: Setelah WordPress 5.0 dirilis, Gutenberg akan menjadi editor default ( # 41316 ), tetapi Anda masih memiliki opsi untuk menginstal editor klasik jika Anda mengalami masalah kompatibilitas (seperti terlihat pada info baru yang datang di bawah).

WordPress 5.0 Gutenberg callout

WordPress 5.0 Gutenberg callout

Gutenberg menambahkan menu baru di dashboard WordPress Anda yang berisi demo (seperti yang terlihat di bawah) dan kemampuan untuk membuat posting baru. Sekali lagi, menu ini mungkin hanya untuk tujuan pengujian. Seperti yang Anda lihat, editor visual terlihat sangat berbeda dari yang biasa Anda gunakan. Ini memiliki rasa yang sangat mirip dengan Medium, yang menurut kami hebat.

demo editor gutenberg

Demo editor Gutenberg

Jika Anda melihat baik editor Gutenberg dan editor visual saat ini secara berdampingan (klik untuk memperbesar), Anda dapat melihat seberapa banyak ruang menulis yang dimiliki Gutenberg, terutama pada layar yang lebih kecil. Bagi orang yang menulis di laptop, Gutenberg akan menjadi perubahan kecepatan yang menyenangkan! Ini benar-benar fokus pada “menulis dulu” dan berusaha memberikan lingkungan yang kurang mengganggu.

Membandingkan Gutenberg vs editor saat ini

Membandingkan Gutenberg vs editor saat ini

Di editor WordPress Gutenberg, Anda dapat mengklik “Pengaturan Posting” untuk menghapus bilah sisi kanan. Dan sementara ini memberi Anda akses ke lebih banyak layar Anda, itu agak setengah di antara mode penulisan bebas gangguan yang saat ini tersedia. Kami mencoba menggunakan Shift + Alt + W untuk meluncurkannya di editor Gutenberg tetapi sepertinya belum berfungsi. Bisa jadi mereka belum menambahkan ini. Tapi kami cukup yakin mereka akan melakukannya, karena mungkin ada beberapa orang yang menggunakan ini.

sembunyikan pengaturan pos gutenberg

Sembunyikan pengaturan pos (setengah jalan ke sana ke mode penulisan bebas gangguan)

Untuk beralih antara mode editor visual dan editor teks (kode), sekarang ada dropdown di kiri atas. Anda akan melihat bahwa sekarang ada komentar HTML di awal dan akhir setiap blok. Misalnya, berikut ini akan memungkinkan Anda untuk membuat blok teks.

<!-- wp:core/text --> <!-- /wp:core/text -->
Ini memungkinkan Anda untuk membuat blok langsung dari mode editor teks. Namun, itu juga menambahkan lebih banyak kekacauan daripada yang mungkin Anda terbiasa jika Anda mengedit dalam mode ini.

editor teks gutenberg

Editor teks Gutenberg

Saat Anda menyorot blok, ada opsi untuk dengan mudah memindahkannya ke atas atau ke bawah dengan panah, menghapusnya, atau masuk ke pengaturan blok. Ini sangat mirip dengan kontrol yang tersedia untuk Anda di Medium.

Bekerja dengan blok Gutenberg

Bekerja dengan blok Gutenberg

Kami juga terkejut dengan seberapa baik kerjanya di ponsel. Jika Anda perlu membuat penyisipan gambar cepat atau menambahkan paragraf sebelum menerbitkan posting saat bepergian, sepertinya Gutenberg akan membuatnya sangat mudah.

Editor seluler Gutenberg

Editor seluler Gutenberg

Salah satu hal pertama yang mungkin akan Anda perhatikan adalah bilah alat TinyMCE yang sudah biasa Anda lihat selama bertahun-tahun sudah tidak ada lagi. Sekarang diganti dengan menu drop-down jika Anda mengklik tombol “Sisipkan”. Ya, itu karena tampaknya Gutenberg berusaha untuk menghilangkan ketergantungannya pada integrasi TinyMCE . Atau apakah mereka?

TinyMCE tidak ada lagi

TinyMCE tidak ada lagi

Inilah yang dikatakan Matt Mullenweg tentang hal itu.

“Apa yang kami coba lakukan adalah menggesernya sehingga Anda hanya perlu belajar tentang blok satu kali dan sekali Anda belajar tentang blok gambar, yang bisa di pos, di bilah sisi, di halaman, di jenis pos khusus , dan itu akan bekerja dengan cara yang persis sama. Apa pun yang terintegrasi dengannya, katakanlah sebuah plugin yang membawa Foto Google Anda atau Dropbox Anda, yang sekarang akan bekerja di mana-mana juga. “- Matt Mullenweg (src: WP Tavern )

Namun, Andrew Roberts , pemimpin proyek di tim TinyMCE juga menjangkau kami dan menjelaskan beberapa hal sehubungan dengan apa yang terjadi dengan TinyMCE dan Gutenberg.

Saya sudah di tim Gutenberg sejak awal. Ini merupakan upaya bersama. Mungkin perlu dicatat bahwa mesin pengeditan inti TinyMCE adalah kekuatan komponen “dapat diedit” yang pada gilirannya kekuatan sebagian besar blok. Blok Tabel misalnya. Itu kemungkinan akan berlanjut di masa mendatang.

Juga, blok Teks Klasik pada dasarnya adalah editor TinyMCE. Seberapa menonjolnya itu mungkin tergantung pada umpan balik dari komunitas. Sebenarnya ada Permintaan Tarik ( # 1394 ) yang sedang dikerjakan yang pada dasarnya membuat Gutenberg menjadi pembungkus untuk editor ‘lama’ sehingga plugin dan tombol TinyMCE yang ada akan berfungsi. Masih harus dilihat jika itu dimasukkan.

Terlepas dari itu, ada kemungkinan bahwa tim WP dan TinyMCE Core akan bekerja bersama untuk memastikan bahwa pengalaman pengguna gaya pemrosesan kata yang lebih hidup di WordPress. Bahkan jika itu akhirnya menjadi plugin.

Pada catatan terkait, salah satu alasan kami telah mengerjakan proyek Gutenberg dengan tim Gutenberg yang luar biasa adalah untuk membawa konsep-konsep ini ke komunitas TinyMCE yang lebih luas selama 12 bulan ke depan. Itu akan memungkinkan Anda untuk membawa konsep pengeditan berbasis blok ke dalam aplikasi kustom Anda sendiri. – Andrew Roberts

Di bawah ini adalah beberapa tambahan blok baru yang menurut kami cukup keren.

Blok Tabel dan Blok Kolom Teks

Tabel sederhana sekarang jauh lebih mudah, karena Anda dapat memasukkannya sebagai blok di dalam editor. Sebelumnya Anda harus menggunakan plugin pihak ke-3 atau kode HTML. Saat ini, Anda hanya dapat menambahkan tabel 2 × 2 dengan opsi penyisipan dan Anda tidak dapat menata gaya tanpa masuk ke tampilan teks. Meskipun, pada akhirnya kami menganggap Anda akan dapat melakukan semua hal ini dari editor visual.

Meja Gutenberg

Meja Gutenberg

Mereka juga menambahkan kemampuan untuk menambahkan blok kolom teks responsif, yang hebat! Saat ini, Anda dapat memilih antara tata letak kolom 2, 3, dan 4. Kolom responsif di WordPress selalu menyusahkan di masa lalu dan biasanya memerlukan plugin pihak ketiga untuk bisa berfungsi dengan baik.

Kolom Gutenberg

Kolom Gutenberg

Blok HTML langsung

Mereka juga memiliki apa yang kita sebut blok HTML langsung. Anda dapat memasukkan kode Anda dan kemudian melihat pratinjau dari kanan di dalam blokir. Ini sebenarnya ide yang sangat keren dan mungkin sebenarnya mencegah beberapa dari kita harus bolak-balik antara editor visual dan mode editor teks.

editor html blok gutenberg

Blok HTML di editor Gutenberg

Seret dan Jatuhkan Gambar

Pada Gutenberg 0.5.0, Anda sekarang dapat menyeret dan menjatuhkan gambar langsung ke blok gambar, sama seperti Anda terbiasa dengan editor visual. Namun, ada efek fade ketika melakukan ini yang cukup aneh. Kita bisa dengan mudah melihat ini menjadi masalah.

Seret dan lepas gambar

Seret dan lepas gambar

Sekarang Anda juga dapat menambahkan kelas CSS tambahan ke blok tertentu.

Tambahkan kelas CSS

Tambahkan kelas CSS

Blok Terbaru

Dengan semua blok dibangun ke editor Gutenberg, dan mungkin banyak lagi yang akan datang, mereka menambahkan “Blok terbaru” untuk mencoba dan membantu mempercepat proses penyisipan.

Blok terbaru

Blok terbaru

Opsi Teks Penutup

Pada Gutenberg 0.9.0 , mereka juga memperkenalkan beberapa gaya visual dan opsi baru untuk teks sampul. Anda dapat dengan mudah mengubah ukuran font, mengubahnya menjadi Drop Cap, dan mengubah warna dengan komponen palet warna kustom baru.

Teks penutup Gutenberg

Teks penutup Gutenberg

Slash Autocomplete

Fitur keren yang ditambahkan di Gutenberg 1.1.0 adalah kemampuan untuk menggunakan pelengkapan otomatis untuk menyisipkan blok. Bagi kita yang menggunakan Slack setiap hari, ini adalah cara yang sangat umum untuk memformat konten dengan cepat seperti yang Anda inginkan. Memiliki opsi untuk meminimalkan klik dan menggunakan lebih banyak keyboard selalu merupakan hal yang baik!

Gutenberg melengkapi otomatis

Gutenberg autocomplete (Img src: WordPress.org)

Daftar Isi dan Dukungan Anchor

Mereka juga menambahkan Daftar Isi di sidebar. Itu adalah tautan yang dapat diklik sehingga Anda dapat dengan mudah melompat ke bagian dalam artikel Anda. Ini bisa berguna ketika menulis konten bentuk panjang .

Daftar isi Gutenberg

Daftar isi Gutenberg

Fitur lain yang sekarang dapat Anda gunakan pada blok adalah jangkar. Ini sebenarnya sangat menarik dan sesuatu yang telah dibutuhkan dalam inti untuk waktu yang lama. Menambahkan jangkar memungkinkan Anda untuk menautkan langsung ke bagian atau tajuk tertentu dalam artikel. Ini bagus untuk berbagi, serta membuat lompatan ke menu di SERP.Kami meningkatkan traffic 1,187% dengan WordPress.
Kami akan menunjukkan caranya.Bergabunglah dengan lebih dari 20.000 lainnya yang mendapatkan buletin mingguan kami dengan kiat-kiat WordPress orang dalam!BERLANGGANAN SEKARANGBerlangganan newsletter KinstaLANGGANANSaya setuju dengan Syarat dan Ketentuan dan Kebijakan Privasi

Dukungan jangkar Gutenberg

Dukungan jangkar Gutenberg

Jumlah Kata dan Blokir

Sebagian besar dari kita terbiasa melihat jumlah kata total di bagian bawah editor WYSIWYG. Nah, di Gutenberg 1.2.1  mereka telah menambahkan ini sebagai sembulan informasi kecil yang dapat Anda lihat dengan cepat. Anda dapat melihat jumlah kata total, jumlah blok, dan jumlah judul.

Kata Gutenberg dan jumlah blok

Kata Gutenberg dan jumlah blok

Tarik Blok Harga dan Opsi Alignment Baru

Selain hanya memiliki blokquote standar yang telah kami gunakan selama bertahun-tahun, mereka juga memiliki kutipan tarikan baru. Dan ya, kutipan tarik berbeda . Menyenangkan juga melihat beberapa variasi pada posisi balok. Selama bertahun-tahun, editor visual standar telah memberi Anda kemampuan untuk menyelaraskan ke kiri, meluruskan pusat, menyelaraskan kanan, dan tidak menetapkan perataan. Dengan editor WordPress Gutenberg, Anda juga dapat menyelaraskan lebar (seperti terlihat di bawah), dan menyelaraskan lebar penuh .

Gutenberg pullquotes

Kutipan tarik Gutenberg selaras lebar

Tombol

Ada juga metode bawaan untuk menambahkan tombol sederhana. Meskipun belum ada banyak opsi di sini, itu bagus untuk dilihat, karena banyak blogger dan penerbit membutuhkan cara yang lebih mudah untuk menambahkan ajakan bertindak ke posting blog mereka. Saat ini Anda harus menggunakan HTML atau mengandalkan plugin tombol / shortcode pihak ketiga.

Tombol Gutenberg

Tombol Gutenberg

Opsi Sematan

Jika Anda ingin opsi sematan yang lebih mudah diakses, ya, Anda pasti mendapatkan keinginan Anda! Gutenberg membuat konten media yang disematkan menjadi sangat mudah, apakah itu YouTube, SoundCloud, Hulu, Flickr, Imgur, Twitter, Slideshare, Reddit, dan banyak lagi. Meskipun Anda bisa menyematkan semua ini sebelumnya, banyak yang tidak menyadarinya karena tidak disebutkan dalam editor visual. Dikombinasikan dengan pengalaman blok baru dan opsi penyelarasan, kami tidak yakin apa yang benar-benar bisa dilakukan dengan lebih baik. Meskipun, mereka mungkin harus mengatur kembali hal-hal yang akan terjadi karena ini dapat dengan mudah berantakan.

Gutenberg menyematkan opsi

Gutenberg menyematkan opsi

Pro dari Editor WordPress Gutenberg

Berikut adalah beberapa pro yang kita lihat dengan Editor Gutenberg saat ini.

  • Membuang * sedikit * kepercayaan pada TinyMCE adalah hal yang baik menurut kami. Kami akan senang melihat integrasi yang lebih erat antara inti, pengembang tema, plugin, dan editor.

Alex Denning@AlexDenning

‘Right now WordPress makes you learn a lot of concepts… [Gutenberg lets you] learn it once and use it everywhere.’ @photomatt #WCEU148:17 PM – Jun 17, 2017Twitter Ads info and privacySee Alex Denning’s other Tweets

  • Untuk penerbit yang lebih menyukai pengalaman pengeditan gaya Menengah yang lebih baru, mereka kemungkinan besar akan menyukai editor WordPress Gutenberg.
  • Gutenberg memberikan pengalaman yang kurang mengganggu dengan lebih banyak ruang layar.
  • Blok itu menyenangkan untuk digunakan dan opsi penyelarasan baru merupakan langkah maju untuk layar resolusi yang lebih besar dan situs templated dan responsif lebar penuh.
  • Sudah berfungsi dengan baik di ponsel , dan ke depan kita benar-benar dapat melihat orang memanfaatkan ini lebih banyak. Perlu melakukan edit cepat di ponsel Anda saat bepergian? Tidak masalah.
  • Kemampuan pengembang tema dan pengaya untuk membuat blok khusus mereka sendiri.
  • Lebih mudah digunakan untuk pemula.

Hal lain yang menarik perhatian kami adalah di Gutenberg 0.4.0 yang mereka sebutkan di log pengembangan mereka menambahkan API untuk menangani konten yang disisipkan. (Tujuannya adalah memiliki penanganan khusus untuk mengonversi Word, Markdown, Google Documents ke blok WordPress asli.) Ini akan luar biasa. Saat ini penyalinan dari Google Documents ke WordPress benar-benar rusak.

Kontra Editor Gutenberg WordPress

Dan berikut adalah beberapa kontra yang kita lihat di editor Gutenberg saat ini. Ingat, ini masih dalam tahap pengujian, jadi banyak dari hal-hal ini mungkin akan diperbaiki atau ditambahkan.

  • Saat ini tidak ada dukungan penurunan harga.
  • Meskipun kami juga membuat daftar itu lebih mudah digunakan untuk pemula, kami juga dapat melihat ini sebagai lebih sulit bagi beberapa orang untuk belajar.
  • Pada Oktober 2017, Gutenberg sekarang  mendukung kotak meta . Namun, ini hanya dukungan awal dan itu akan membutuhkan pengembang melompat ke atas. Namun, ini merupakan langkah ke arah yang benar. Anda setidaknya dapat mengubah pengaturan SEO Yoast Anda sekarang. 😄Kotak meta Gutenberg
  • Dengan begitu banyak tema dan plugin di sana, kompatibilitas ke belakang akan menjadi masalah besar ke depan. Bahkan, mungkin akan ada ribuan pengembang yang sekarang harus melakukan banyak pekerjaan, seperti yang memiliki integrasi dengan TinyMCE. Dari semua pembaruan WordPress, ini mungkin akan menjadi salah satu yang menyebabkan sebagian besar pekerjaan untuk pengembang . Meskipun mungkin ada pembungkus datang yang akan memungkinkan kompatibilitas mundur TinyMCE. Lihat permintaan tarik # 1394 .
  • Beberapa khawatir tentang aksesibilitas Gutenberg . Joost de Valk, pengembang Yoast SEO mengangkat masalah ini. Pastikan juga memeriksa pos ini tentang menggunakan Gutenberg dengan pembaca layar .

Pengembang sudah mulai menyuarakan keprihatinan mereka dengan Gutenberg . Ahmad Awais juga telah merilis boilerplate Gutenberg untuk membantu pengembang WordPress theme dan plugin memulai pengembangan mereka dengan Gutenberg. Layak dicoba.

Dan banyak dari Anda mungkin bertanya-tanya, apakah Gutenberg akan opsional atau tidak?  Jawabannya adalah tidak. Ketika mereka mengeluarkan Gutenberg secara resmi menjadi inti WordPress, Anda tidak akan dapat mematikannya . Karena ini akan menjadi editor resmi untuk WordPress. Namun, ada plugin gratis bernama Classic Editor yang dapat Anda gunakan untuk mengembalikan editor posting lama. Tetapi gunakan ini sebagai alat untuk mencapai tujuan.

Kami juga merekomendasikan untuk memeriksa posting hebat ini tentang penghilang mitos Gutenberg yang mungkin menjawab pertanyaan tambahan yang mungkin Anda miliki.

Coba Demo Gutenberg

Ingin bermain dengan Gutenberg tanpa memasangnya? Lihatlah Frontenberg , demo front-end terbatas dari editor WordPress Gutenberg.

Untuk bacaan lebih lanjut kami sarankan Anda untuk melihat panduan WordPress 5.0 kami:  Apa yang Baru di WordPress 5.0 (Cara Mempersiapkan Diri untuk Gutenberg).

Pengantar Tema Dua Puluh Dua Puluh.

Juga, jika Anda belum siap, Anda dapat menonaktifkan editor baru. Ini panduan kami:  Cara Menonaktifkan Editor WordPress Gutenberg .

Ringkasan

Secara keseluruhan kami cukup terkesan dengan editor WordPress Gutenberg yang baru, itu pasti sesuatu yang kami sangat bersemangat untuk masa depan. Kami mendorong semua orang untuk mengambil salinannya dari repositori WordPress dan memasangnya di situs pengembang atau pementasan. Ini adalah kesempatan kita semua untuk membantu membangun editor yang kita semua inginkan. Kita dapat memiliki pengalaman yang sama dengan yang dilakukan oleh orang-orang Medium tetapi dalam CMS favorit kami! Tim di sini di Kinsta pasti akan meluangkan waktu untuk membantu memberikan umpan balik.

Sudahkah Anda mencoba Gutenberg? Jika demikian, kami akan senang mendengar pendapat Anda, baik dan buruk.

Dukung kami berkembang dengan Subscribe