Anatomi Lengkap Editor WordPress Gutenberg

Sepertinya istilah Gutenberg menjadi kontroversi di dunia WordPress akhir-akhir ini. Dipuji sebagai perubahan paling signifikan untuk WordPress 5.0 tahun ini, editor Gutenberg telah menerima tanggapan beragam dari pengembang web dan orang biasa. Semua kekacauan ini membuat sulit untuk melihat Gutenberg apa adanya. Jadi, saya akan mencoba untuk menempatkan beberapa kebingungan untuk beristirahat sekali dan untuk semua.

Dalam artikel ini, saya akan membahas hal-hal berikut:

1. Apa itu Gutenberg?
2. Lebih dari Sekedar Editor
3. Apa Perubahan Gutenberg Di WordPress?
4. Menginstal Gutenberg
5. Menjelajahi Gutenberg Secara Panjang
6. Pro dan kontra
7. Memahami Masalah Kompatibilitas
8. Gutenberg Adalah Masa Depan
9. Berita Terbaru Dan Sumber Daya Lebih Lanjut

1. Apa itu Gutenberg?

Dinamakan setelah Johannes Gutenberg, yang menemukan mesin cetak mekanis, Gutenberg diperkenalkan ke dunia oleh Matt Mullenweg di WordCamp Europe pada tahun 2017. Intinya, Gutenberg adalah editor WordPress baru, dengan lusinan fitur mutakhir. Ini menyederhanakan pembuatan dan pengeditan situs web untuk rata-rata pengguna non-teknis.

Ini telah mendapatkan beberapa penghargaan, dari "pengalaman penerbitan baru WordPress" hingga "masa depan pembuatan situs web". Beberapa skeptis berpikir itu adalah paku di peti mati untuk WordPress. Terlepas dari semua ocehan ini, Gutenberg akan menjadi lebih dari sekadar editor untuk WordPress (yang akan saya bahas selanjutnya).

Ini memungkinkan pembuat situs web untuk membangun situs web menggunakan blok, yang merupakan unit seret dan lepas kecil. Dengan demikian, ini menggantikan proses kustomisasi yang tidak konsisten dan mengganggu saat ini. Ini juga memungkinkan tag HTML seperti section dan figure , menghasilkan HTML padat. Pada saat penulisan, Gutenberg masih merupakan plugin. Namun, komunitas berencana untuk menggabungkannya dengan WordPress 5.0 tahun ini.

2. Lebih Dari Sekedar Editor

Gutenberg lebih dari sekadar editor karena memungkinkan Anda menangani konten situs web dalam potongan atau blok yang dapat disesuaikan. Anda tidak perlu fasih berbahasa HTML atau menulis kode pendek. Anda dapat mengontrol seluruh tata letak situs web (baik ujung belakang maupun ujung depan) dari satu konsol.

Editor baru ini mencoba menggabungkan fitur terbaik dari kedua plugin pembuat halaman seperti Divi dan Visual Composer, serta platform do-it-yourself seperti Medium, Wix dan Squarespace. Jadi, seperti plugin pembuat halaman tersebut, Anda dapat menangani tata letak multi-kolom melalui satu antarmuka.

Apakah ini berarti akhir dari plugin seperti Divi dan Beaver Builder? Itu topik untuk posting lain, tetapi jawaban singkatnya adalah tidak. Gutenberg tidak mungkin mengganti plugin tersebut sepenuhnya. Anda dapat terus menggunakannya bahkan setelah Gutenberg menjadi editor default.

3. Apa Perubahan Gutenberg Di WordPress?

Satu-satunya tujuan editor Gutenberg adalah untuk memberikan alternatif untuk editor teks terbuka saat ini, belum lagi kode pendek yang sulit diingat, dengan antarmuka pengguna (UI) yang gesit dan visual. Jadi, tidak seperti editor WordPress saat ini, Anda tidak perlu:

• mengimpor gambar, multimedia, dan file yang disetujui dari perpustakaan media atau menambahkan kode pendek HTML;
• salin dan tempel tautan untuk penyematan;
• menulis kode pendek untuk aset khusus dari berbagai plugin;
• membuat gambar unggulan untuk ditambahkan di bagian atas posting atau halaman;
• tambahkan kutipan untuk subjudul;
• menambahkan widget untuk konten di sisi halaman.

Singkatnya, Gutenberg tidak mengubah cara kerja WordPress. Namun, itu mengubah cara pemilik situs web (atau pembuat konten) berinteraksi dengannya. Alih-alih banyak kode pendek dan kotak meta, Anda akan menggunakan blok sederhana.

Apa Itu Blok?

Pertimbangkan blok sebagai unit paling dasar (oleh karena itu, terkecil) dari editor baru. Mereka akan menjadi blok bangunan WordPress 5.0. Dengan kata lain, semuanya—termasuk konten, gambar, kutipan, galeri, gambar sampul, audio, video, judul, penyematan, kode khusus, paragraf, pemisah, dan tombol—akan berubah menjadi blok yang berbeda. Karena Anda dapat menarik dan melepas setiap blok, mengidentifikasi item ini dan menempatkannya di halaman menjadi jauh lebih mudah.

4. Menginstal Gutenberg

Anda dapat mengunduh versi terbaru Gutenberg langsung dari repositori WordPress. Anda juga dapat mencarinya di bawah plugin “Tambah Baru” di dasbor WordPress Anda. Saya akan merekomendasikan menginstalnya di lingkungan pementasan Anda. Namun, Anda memerlukan WordPress versi terbaru (versi 4.8 atau yang lebih baru) untuk menginstal editor Gutenberg.

1. Masuk ke dasbor admin WordPress Anda.
2. Buka menu Plugin di sisi kiri dasbor.
3. Klik "Plugin" untuk membuka menu "Tambah Baru".
4. Ketik "Gutenberg" di kotak pencarian, yang terletak di sudut kiri atas.
5. Anda akan melihat plugin Gutenberg di hasil.
6. Klik tombol "Instal Sekarang".
7. Klik tombol "Aktifkan" untuk memulai plugin.

5. Menjelajahi Gutenberg Secara Panjang

Setelah diinstal dan diaktifkan, Gutenberg akan menampilkan ikon di bilah menu kiri. Saat Anda meluncurkannya untuk pertama kalinya, Anda akan melihat contoh postingan baru, berjudul "Demo Gutenberg." Anda dapat berlatih di pos demo sebelum membuatnya sendiri.

A. Tambah Baru

Buka "Postingan" di bilah menu kiri dasbor WordPress Anda. Pos baru akan diluncurkan di Gutenberg terlebih dahulu. Anda nanti dapat mengeditnya di editor klasik dan Gutenberg.

B. Sunting

Buka menu “Postingan”, dan arahkan mouse ke postingan yang disimpan untuk melihat opsi untuk memilih di antara dua editor. Meskipun opsi editor klasik tersedia untuk saat ini, kemungkinan besar akan dihapus dengan peluncuran WordPress 5.0.

C. Beralih Antar Editor

Anda juga dapat beralih di antara dua editor saat mengedit postingan. Klik pada menu tarik-turun di sudut kanan atas untuk beralih antara mode editor visual dan editor teks (yaitu kode). Atau, Anda juga dapat menggunakan pintasan Ctrl + Shift + Alt + M untuk beralih di antara editor.

Editor teks:

Editor visual:

D. Salin Semua Konten

Fitur ini memungkinkan Anda untuk menyalin semua konten dalam versi HTML hanya dengan satu klik. Anda dapat membuka fitur ini di kedua editor dengan mengklik menu tarik-turun di sudut kanan atas dasbor.

E. Struktur Konten

Fitur ini memungkinkan Anda menghitung jumlah kata di seluruh postingan. Anda juga dapat melihat jumlah heading, paragraf, dan blok hanya dengan sekali klik. Klik ikon informasi (i) di area kiri atas.

F. Ulangi dan Undo

Anda dapat menemukan opsi ini di sebelah ikon informasi (i). Mereka memungkinkan Anda untuk membatalkan atau mengulang perintah terakhir.

G. Pengaturan Halaman dan Dokumen

Ini memungkinkan Anda untuk mengubah berbagai pengaturan halaman dan dokumen. Anda dapat menemukannya di bilah menu kanan. Anda dapat melakukan penyesuaian berikut:

• Buat postingan menjadi publik atau pribadi.
• Ubah tanggal penerbitan.
• Pilih format posting.
• Tambahkan atau edit kategori dan tag.
• Unggah gambar unggulan.
• Tulis kutipan.
• Aktifkan dan nonaktifkan komentar, pingback, dan lacak balik.

H. Tetap di Halaman Depan

Fitur ini akan berguna jika Anda menjalankan blog. Saat Anda mengaktifkan ini di pengaturan dokumen, kiriman tersebut akan selalu muncul di halaman depan blog Anda. Dan matikan saja untuk menghapusnya dari halaman depan.

I. Menggunakan Blok

Seperti disebutkan, blok adalah unit dasar editor Gutenberg yang baru. Untuk menggunakan Gutenberg secara efisien, Anda perlu memahami cara menggunakan blok ini. Saya akan membahas blok utama satu per satu. Klik tombol plus (+) di sebelah opsi redo/undo untuk membuka menu blok.

Blok Umum

Blok umum memungkinkan Anda menambahkan elemen yang diperlukan untuk membuat UI yang kaya.

• Gugus kalimat
  Blok paragraf hadir dengan beberapa fitur unggulan, seperti ukuran font khusus, huruf besar, warna latar belakang dan warna teks, dan lain-lain. Anda juga dapat menambahkan lebih banyak kelas CSS di sini.

• Gambar
  Elemen ini hadir dengan fitur baru yang memungkinkan Anda beralih antara galeri dan tata letak gambar. Anda juga mendapatkan lebih banyak kontrol atas gambar karena Anda dapat mengatur dimensi ukuran tertentu, rasio ukuran persentase, dan deskripsi teks alternatif untuk setiap gambar.

• Elemen lainnya termasuk :
  • kutipan,
  • galeri,
  • gambar sampul,
  • judul,
  • daftar,
  • audio,
  • file,
  • subjudul,
  • video.

Memformat

Seperti namanya, blok ini terdiri dari semua alat pemformatan.

• Meja
  Menambahkan tabel menggunakan kode HTML khusus adalah pekerjaan yang membosankan. Namun, dengan blok tabel, tugasnya jauh lebih mudah. Anda dapat menambah dan menghapus baris dan kolom tabel tanpa coding.

• HTML khusus
  Anda dapat menggunakan kode HTML khusus di Gutenberg. Dan bagian yang bagus adalah Anda dapat memasukkan kode Anda dan melihat pratinjau di blok itu sendiri.

• Elemen lainnya termasuk :
  
  • kode,
  • klasik,
  • diformat sebelumnya,
  • tarik kutipan,
  • ayat.

tata letak

Gunakan imajinasi Anda untuk membuat tata letak yang menakjubkan menggunakan blok ini. Setiap elemen di blok ini hadir dengan fitur unggulan.

• Tombol
  Anda dapat menambahkan tombol seperti "Berlangganan sekarang" dan "Beli sekarang" menggunakan blok ini. Ini memiliki opsi yang berbeda, termasuk perataan dan gaya font. Anda juga dapat mengatur warna latar belakang dan bentuk tombol.

• Kolom (beta)
  Membuat kolom di editor berbasis kode memakan waktu dan melelahkan. Blok ini memungkinkan Anda untuk menambahkan kolom teks. Anda dapat menambahkan satu hingga enam kolom dalam satu baris.

• Elemen lainnya termasuk :
  
  • Baca selengkapnya,
  • istirahat halaman,
  • pemisah,
  • pengatur jarak.

Widget

Blok ini memungkinkan Anda untuk menambahkan arsip, kategori, posting terbaru, dan komentar terbaru hanya dengan satu klik di mana saja di halaman. Anda juga dapat menyesuaikan elemen-elemen ini tanpa pengkodean apa pun.

• Postingan Terbaru
  Dengan elemen blok ini, Anda dapat memperlihatkan postingan dalam tampilan kisi atau tampilan daftar, mengaturnya dalam kategori, dan mengurutkannya menurut abjad atau menurut tanggal publikasi. Anda juga dapat memilih untuk menampilkan tanggal publikasi.

Sematkan

Anda dapat dengan mudah mengakses penyematan apa pun menggunakan blok ini. Baik Anda ingin menambahkan tautan YouTube atau Twitter, itu sangat mudah dan cepat. Yang perlu Anda lakukan adalah menempelkan URL di ruang kosong yang diberikan, dan Gutenberg akan menyematkan kode untuk Anda. Berikut adalah contoh menyisipkan tautan YouTube:

Blok yang dapat digunakan kembali

Blok yang dapat digunakan kembali memberi pengembang kegunaan yang lebih baik. Anda dapat mengubah blok apa pun menjadi blok yang dapat digunakan kembali sehingga Anda dapat menggunakannya di lokasi yang berbeda. Anda dapat mengedit yang sama dan menyimpannya sebagai blok baru yang dapat digunakan kembali lagi.

Anda juga dapat melihat pratinjau blok yang dapat digunakan kembali. Semua blok yang dapat digunakan kembali tersedia di bawah opsi "Blok Bersama". Yang terpenting, Anda dapat mengubahnya kembali menjadi blok biasa kapan saja.

Paling Banyak Digunakan

Di bawah opsi ini, Anda akan melihat blok yang paling sering digunakan, untuk akses cepat. Atau, Anda dapat menggunakan kotak pencarian untuk menemukan blok berdasarkan nama.

J. Sunting Blok

Untuk mengedit blok apa pun, buka menu tarik-turun dengan mengklik di sudut kanan atas blok. Anda akan melihat opsi yang berbeda, termasuk mengedit sebagai HTML, menggandakan, dan menambahkan ke blok yang dapat digunakan kembali.

K. Sisipkan Blok

Dengan menggunakan fitur ini, Anda dapat memasukkan blok baru kapan saja. Saat Anda mengarahkan mouse ke blok, Anda akan melihat ikon plus (+). Klik untuk menyisipkan blok baru.

L. Pelengkapan Otomatis Garis Slash

Fitur Slash Autocomplete tersedia di Gutenberg 1.1.0 dan versi yang lebih baru. Kemungkinan Anda sudah familiar dengan fitur serupa di Slack. Itu ditambahkan untuk mengurangi jumlah penunjuk dan klik yang diperlukan untuk membuat blok baru.

Saat Anda membuka blok baru, cukup tekan / (tombol garis miring) pada keyboard Anda untuk memilih salah satu opsi pelengkapan otomatis. Ini hanya berfungsi di blok paragraf default, tetapi mungkin menjadi bagian dari jenis blok lain di masa mendatang.

M. Pindahkan Blok

Gutenberg memungkinkan Anda untuk memindahkan setiap blok ke atas dan ke bawah. Anda dapat menggunakan panah (di sisi kiri setiap blok) untuk memindahkannya secara vertikal.

6. Pro Dan Kontra Gutenberg

kelebihan

• Tidak diperlukan keahlian teknis untuk membuat tata letak khusus untuk posting blog atau situs web. Ini berfungsi seperti Medium, jadi orang yang mencari gaya seperti itu dan pengalaman pengeditan yang ramah pengguna akan menyukainya.
• Ini memungkinkan Anda untuk membuat desain yang konsisten dan canggih tanpa terlalu bergantung pada TinyMCE.
• Selain itu, balok adalah konsep yang sangat baik. Mereka memungkinkan non-pengembang untuk membuat tata letak yang kompleks secara intuitif. Jika Anda baru mengenal WordPress atau tidak memiliki pengetahuan sama sekali, Anda tetap akan menyukainya.
• Editor Gutenberg sendiri bekerja dengan baik di perangkat seluler (responsif). Tidak seperti pendahulunya, ini memungkinkan Anda melakukan pengeditan cepat saat bepergian. Faktanya, pengembang yang paham seluler dapat melakukan lebih dari sekadar beberapa pengeditan cepat.
• Peningkatan ruang layar terbukti menjadi pengalaman pengguna yang tidak terlalu mengganggu bagi banyak pengembang.
• Pengembang hardcore masih dapat membuat blok khusus yang dapat digunakan kembali menggunakan HTML5. Jadi, sepertinya win-win untuk kedua Geeks dan pengguna non-teknis.

Kontra

• Untuk saat ini, tidak ada dukungan penurunan harga dalam versi beta editor WordPress.
• Itu masih tidak mendukung kolom responsif. Anda perlu melakukan beberapa pengkodean khusus untuk membuat fitur ini responsif. Jadi, menggunakan fitur ini di ponsel bukanlah pilihan saat ini.
• Pilihan tata letak desain tidak memadai saat ini.
• Masalah kompatibilitas bisa menjadi perhatian yang signifikan bagi beberapa pengguna WordPress.
• Anda hanya mendapatkan dukungan sebagian untuk kotak meta, namun, pengembang bekerja keras untuk memperluas dukungan kotak meta.
• Kompatibilitas mundur akan menjadi perhatian utama bagi sebagian besar pengembang. Ini akan menghancurkan plugin dan tema saat ini, terutama yang membutuhkan integrasi dengan TinyMCE.

7. Memahami Masalah Kompatibilitas

Terlepas dari kesederhanaan dan kelincahannya, Gutenberg mungkin bukan favorit semua orang. Sebagian besar pengembang WordPress mungkin merasa sulit untuk bekerja dengannya, terutama di awal. Mereka perlu melatih kembali refleks mereka untuk terbiasa dengan UX baru.

• Karena masalah kompatibilitas mundur, Anda perlu memperbarui banyak plugin dan tema untuk memastikan mereka sepenuhnya kompatibel dengan editor baru.
• Untuk saat ini, blok lebih fokus pada konten. Akibatnya, Gutenberg kurang presisi dan kontrol atas tata letak situs web khusus.
• Kode pendek diganti dengan blok kode pendek. Namun, Anda masih dapat menambahkan kode pendek dari blok widget.
• Kotak meta akan tersedia dengan nama baru dan UI baru. Kotak meta yang bertentangan cenderung mengarah ke editor klasik, bukan Gutenberg, dengan peringatan. Meskipun sistem ini mungkin terbukti membantu, beberapa kotak meta tidak akan didukung di Gutenberg.
• Jenis posting khusus didukung dan tetap kompatibel dengan versi sebelumnya di Gutenberg.
• Anda tidak akan dapat mematikan Gutenberg setelah terintegrasi di inti WordPress. Namun, Anda dapat menonaktifkannya menggunakan plugin resmi kapan saja.

8. Gutenberg Adalah Masa Depan

Berlawanan dengan pendapat umum, Gutenberg bukanlah pengganti editor teks saat ini. Ini adalah cara baru untuk membangun situs web. Saya suka menganggapnya sebagai Facebook untuk WordPress.

Anda tidak perlu menjadi ahli komputer untuk mempublikasikan sesuatu di Facebook atau platform media sosial lainnya. Gutenberg hanyalah cara untuk menghadirkan kesederhanaan dan fleksibilitas ini ke WordPress, sehingga orang tidak perlu membuat kode untuk membuat dan menerbitkan situs web. Itulah mengapa saya pikir ini akan menjadi masa depan, tidak hanya untuk WordPress, tetapi juga untuk web secara umum.

Memang, perjalanan Gutenberg masih panjang. Orang-orang (termasuk saya) memiliki masalah dengan implementasinya, tetapi kami akan segera memiliki tema, plugin, dan alat siap Gutenberg yang muncul di mana-mana. Namun demikian, Anda harus mulai dari suatu tempat. Jadi, Anda mungkin juga menjadi bagian dari perubahan ini sejak awal.

9. Berita Terbaru Dan Sumber Daya Lebih Lanjut

Jika Anda tertarik untuk naik kereta Gutenberg dari awal, berikut beberapa tautan untuk menemukan buzz terbaru. Perlu diingat bahwa tidak satu pun dari situs web ini yang secara resmi didukung oleh WordPress.

• Berita Gutenberg
• Hub Gutenberg
• Waktu Gutenberg

Untuk pembaruan dan berita resmi, Anda dapat mencoba yang berikut:

• "Gutenberg, Atau Kapal Thesus," Matias Ventura Bausero
• “Ikhtisar Teknis Editor,” Matias Ventura Bausero, WordPress.org
• “Prinsip Desain,” WordPress.org
• “wp-post-tata bahasa,” Dennis Snell
• “#gutenberg (Ringkasan Obrolan Dev: 27 Juni),” Jeffrey Paul
• “Pengantar Gutenberg,” WordPress.org

Membungkus

Suka atau tidak, Gutenberg akan hadir di WordPress 5.0. Cobalah untuk menjadi bagian dari diskusi yang sedang berlangsung tentang hal itu di web. Ini pasti akan membantu. Bahkan, saat Anda melakukannya, cobalah untuk mempercepat proses pengembangan dengan keterampilan Anda. Sementara itu, beri tahu saya jika posting ini menjelaskan topik tersebut. Berikan pertanyaan dan saran Anda di bagian komentar. Saya ingin melanjutkan percakapan.