Panduan Utama Anda Untuk Menggunakan Editor Gutenberg WordPress Mendatang

Diterbitkan: 2018-10-30

Dalam beberapa bulan ke depan, cara Anda membuat konten dengan WordPress akan berubah secara radikal. Editor teks saat ini yang telah Anda gunakan selama bertahun-tahun akan hilang, digantikan oleh Editor Gutenberg WordPress yang baru.

Perubahan besar seperti ini mungkin membunyikan bel alarm di kepala Anda ...

Apakah alur kerja Anda akan terganggu? Apakah plugin dan tema Anda saat ini akan tetap berfungsi? Bagaimana Anda bisa terus membuat konten hebat dengan editor baru ini?

Dalam posting ini, Anda akan mempelajari jawaban atas pertanyaan-pertanyaan itu dan lebih banyak lagi .

Ini adalah panduan Editor Gutenberg WordPress terbaik untuk siapa saja dan semua orang yang membuat konten dengan WordPress.

Anda akan belajar:

  1. Apa itu Editor Gutenberg WordPress, mengapa/kapan datang, dan jawaban untuk beberapa FAQ dasar.
  2. Bagaimana Anda dapat meniru fungsi editor saat ini dan membuat posting blog dasar dengan Gutenberg.
  3. Beberapa tip di bawah radar untuk bekerja lebih produktif dengan Gutenberg ( berdasarkan pengalaman langsung saya menggunakannya di situs langsung ).
  4. Cara memanfaatkan fitur baru di Gutenberg untuk mendapatkan manfaat dari fungsionalitas konten dan tata letak yang belum pernah Anda akses sebelumnya.

Editor baru ini akan datang apa pun yang terjadi, jadi luangkan waktu untuk membiasakan diri dengan Editor Gutenberg WordPress sehingga Anda siap untuk mulai bekerja segera setelah dirilis!

Apa Itu Editor Gutenberg, Ditambah Mengapa Anda Harus Peduli

Editor Gutenberg adalah reimaginasi lengkap dari editor teks WordPress saat ini yang Anda gunakan untuk membuat posting atau halaman dengan WordPress.

Saya mengatakan reimagination daripada mendesain ulang karena itu benar-benar membangun kembali pengalaman pengeditan dari bawah ke atas .

Setelah pengembangan selesai, Gutenberg akan menggantikan editor teks WordPress saat ini dan Anda akan menggunakan Editor Gutenberg untuk membuat konten di masa mendatang ( meskipun Anda akan memiliki opsi jika Anda ingin tetap menggunakan pengalaman saat ini – lebih lanjut tentang itu nanti ).

Jadi apa yang membuat Editor Gutenberg menjadi "reimajinasi lengkap"?

Pertama, mari kita mulai dengan menyegarkan apa yang saya maksud dengan "editor WordPress". Jika Anda tidak yakin dengan apa yang saya bicarakan, inilah tampilan editor TinyMCE WordPress saat ini :

panduan editor gutenberg 1 editor saat ini

Jika Anda telah menggunakan Wordable untuk mempublikasikan posting WordPress langsung dari Google Documents, Anda mungkin tidak menghabiskan banyak waktu di sana! Tapi saya yakin masih ada kemungkinan besar Anda mengenal baik cara kerja editor.

Editor Gutenberg Memperkenalkan Sesuatu yang Disebut "Blok"

Editor teks WordPress saat ini seperti satu dokumen Microsoft Word yang panjang. Gutenberg mengubah dinamika itu dengan sesuatu yang disebut blok .

Daripada bidang pengeditan tunggal, setiap "hal" di Gutenberg adalah "blok" sendiri. Jika Anda pernah menulis postingan dengan Medium – idenya sama .

Sebagai contoh:

  • Setiap paragraf teks adalah bloknya sendiri yang terpisah.
  • Sebuah gambar adalah bloknya sendiri.
  • Video YouTube adalah bloknya sendiri.
  • ... Anda mendapatkan idenya.

Anda kemudian merakit konten Anda menggunakan serangkaian blok. Misalnya, inilah tampilan konten yang sama dari atas di Gutenberg. Ini memiliki empat blok berbeda:

  • Tiga blok paragraf terpisah
  • Satu blok gambar

panduan editor gutenberg 2 editor gutenberg 1

Pentingnya pendekatan berbasis blok ini adalah membuka kemampuan yang lebih canggih untuk konten dan tata letak.

Misalnya, Anda akan dapat memperkenalkan kolom, menyisipkan dan tombol gaya, dan melakukan banyak tindakan lain yang tidak dapat Anda lakukan dengan editor saat ini, atau yang memerlukan HTML/CSS dengan editor saat ini.

Nanti, saya akan membahas blok lebih detail. Tetapi jika Anda ingin membuat kaki Anda basah sekarang, Anda dapat bermain-main dengan demo langsung Editor Gutenberg dengan menuju ke sini – tidak perlu menginstal apa pun.

Inilah Mengapa Tim Inti WordPress Membuat Perubahan Ini

Untuk sebagian besar hidupnya, WordPress telah menggunakan editor dasar yang sama (TinyMCE). Meskipun desainnya mungkin telah berubah di sana-sini, fungsionalitas intinya tidak pernah goyah.

Lalu kenapa sekarang berubah? Jika berhasil selama ~15 tahun terakhir, mengapa tidak bisa terus bekerja selama 15 tahun ke depan?

Ada beberapa alasan.

Pertama, editor saat ini terlalu membatasi untuk pengguna biasa di zaman sekarang ini. Meskipun WordPress memungkinkan untuk membuat apa pun yang dapat Anda bayangkan, WordPress hanya melakukannya jika Anda mengetahui beberapa HTML/CSS .

Kombinasikan itu dengan persaingan dari pembuat situs web visual seperti Squarespace dan Wix ( yang keduanya ~ menggandakan penggunaannya selama setahun terakhir ) , dan Anda dapat memahami mengapa tim inti WordPress merasa bahwa WordPress membutuhkan pengalaman pengeditan yang lebih fleksibel untuk mempertahankan keunggulannya.

Kedua, Gutenberg menyediakan kemampuan untuk menyatukan banyak antarmuka berbeda yang dimiliki pengguna WordPress yang sibuk. Saya tidak ingin terlalu teknis di sini. Tetapi jika Anda menggunakan plugin pihak ketiga, Anda mungkin memiliki berbagai kode pendek, kotak meta, dan area pengaturan yang merupakan bagian dari alur kerja WordPress Anda.

Gutenberg dapat menyatukan semua antarmuka yang berbeda ke dalam sistem blok.

Ketiga, Gutenberg memperkenalkan teknologi modern ke WordPress. Secara khusus, Bereaksi. Ini tidak hanya membantu editor itu sendiri, tetapi juga memungkinkan pengembang pihak ketiga untuk bekerja dengan teknologi modern tersebut.

Akhirnya, pengeditan konten hanyalah awal dari proses ini. Sementara sekarang, Gutenberg hanya akan perubahan bagaimana Anda membuat posting dan halaman, yang tujuan akhirnya adalah untuk memiliki Gutenberg pindah ke desain website penuh visual.

Pro Dan Kontra Pindah ke Editor Gutenberg Baru

Jadi ... apakah Gutenberg akan menjadi hal yang baik untuk Anda?

Sebenarnya ini adalah masalah yang cukup memecah belah di komunitas WordPress, dengan argumen yang penuh semangat di kedua sisi.

Di satu sisi, Anda memiliki orang yang menggembar-gemborkan manfaat Gutenberg:

  • Lebih banyak kemungkinan untuk konten – Gutenberg menambahkan blok pra-bangun untuk tombol, tanda kutip, dll. Ini memberi Anda lebih banyak kontrol atas konten Anda tanpa perlu CSS khusus. Selain itu, plugin pihak ketiga dapat menambahkan blok konten mereka sendiri, yang memberi Anda lebih banyak fleksibilitas.
  • Lebih banyak kemungkinan untuk tata letak – di luar kemungkinan konten baru, Anda juga mendapatkan opsi tata letak baru, seperti kemampuan untuk menyertakan kolom atau pemisah tanpa memerlukan kode khusus apa pun.
  • Pengalaman terpadu – daripada perlu menggunakan kode pendek untuk menyisipkan konten dari plugin pihak ketiga, plugin tersebut akan dapat membuat blok mereka sendiri, yang menciptakan pengalaman pengeditan yang lebih sederhana dan lebih terpadu.
  • Mobile-friendly – Gutenberg bekerja sangat baik di ponsel secara default, yang memungkinkan Anda membuat atau mengedit konten dari perangkat apa pun.

Tetapi di sisi lain, Anda memiliki orang-orang yang menunjukkan beberapa masalah besar dengan proyek yang ambisius ini:

  • Kompatibilitas mundur~32% dari seluruh Internet menggunakan editor WordPress saat ini, yang membuatnya sangat sulit untuk beralih ke pengalaman pengeditan yang benar-benar baru. Pada dasarnya, ada begitu banyak kasus tepi dengan semua konten lama sehingga sulit untuk memastikan transisi yang mulus.
  • Sulit bagi pengembangpengembang tema dan plugin perlu membangun kompatibilitas Gutenberg ke dalam plugin dan tema mereka, dan ekstensi yang lebih lama mungkin tidak selalu berfungsi dengan sempurna. Ada puluhan ribu plugin lama yang mungkin mengalami masalah kompatibilitas.
  • Pendidikan pengguna – sementara pengguna baru mungkin menyukai Gutenberg, pengguna lama perlu mempelajari alur kerja baru, yang sangat sulit bagi pengembang yang telah membuat situs untuk klien non-teknis.

Jadi, apakah Editor Gutenberg WordPress itu baik atau buruk?

Yah, saya agak menyela beberapa pendapat pribadi di sini , tapi saya pikir Gutenberg akan menjadi perubahan positif dalam jangka panjang . Anda akan memiliki kontrol lebih besar atas tampilan dan fungsi konten Anda tanpa memerlukan solusi eksternal atau solusi kode kustom.

Dengan itu, pasti ada kemungkinan untuk tumbuh rasa sakit jangka pendek ketika datang ke kompatibilitas dengan plugin yang ada yang mungkin Anda gunakan. Dan akan sulit untuk memaksa basis pengguna WordPress yang besar untuk mempelajari antarmuka baru.

Kapan Editor Gutenberg Akan Dirilis?

Jawaban singkatnya adalah – kami tidak tahu tanggal pastinya . Gutenberg akan dirilis sebagai bagian dari WordPress 5.0, tetapi belum ada kata resmi tentang tanggal rilis WordPress 5.0 yang tepat.

Kami sekarang memiliki ide kasar, meskipun. Menurut pertemuan awal WordPress 5.0 baru - baru ini , tanggal yang diproyeksikan adalah paling cepat 19 November 2018 , atau paling lambat 22 Januari 2019 .

Inilah jawaban yang lebih panjang:

Saat ini, Editor Gutenberg ada sebagai plugin selama status beta. Jika Anda mau, Anda sebenarnya dapat menginstal plugin dan mulai menggunakannya di situs Anda hari ini ( masih dalam versi beta, jadi saya tidak akan merekomendasikannya ).

Setelah beta dan pengujian selesai, tim WordPress akan menggabungkan Editor Gutenberg ke dalam perangkat lunak inti WordPress di WordPress 5.0 . Kemudian, setelah Anda memperbarui situs WordPress ke WordPress 5.0, Editor Gutenberg akan secara otomatis menggantikan editor TinyMCE saat ini.

Apa yang Akan Terjadi Pada Konten Anda Saat Ini Setelah Editor Gutenberg Dirilis?

Karena Gutenberg menggantikan editor saat ini, Anda mungkin bertanya-tanya apa yang akan terjadi dengan semua konten Anda yang ada.

Jangan khawatir – Gutenberg dibuat agar kompatibel dengan versi sebelumnya .

Seperti yang ada sekarang , Gutenberg menempatkan semua konten lama Anda ke dalam satu blok Klasik . Sebagai contoh, inilah contoh TinyMCE dari atas ketika saya menginstal Gutenberg:

panduan editor gutenberg 3 mundur 1

Jika mau, Anda dapat terus bekerja di dalam satu blok Klasik itu, meskipun pengalamannya agak canggung. Atau, Anda dapat mengeklik ikon tiga titik untuk mengubah konten lama Anda menjadi blok Gutenberg:

panduan editor gutenberg 4 konversi mundur

Setelah Anda mengubah konten lama Anda menjadi blok, itu akan berfungsi seperti pos Editor Gutenberg lainnya.

Karena Editor Gutenberg menggunakan pendekatan blok Klasik tunggal ini untuk konten lama, Anda tidak akan mengalami masalah transisi apa pun. Tetapi ada kemungkinan Anda mengalami masalah dengan plugin pihak ketiga, jadi Anda harus tetap waspada dan memeriksa konten lama Anda.

Akankah Editor Gutenberg Bekerja Dengan Semua Tema WordPress?

Ya! Sekali lagi, karena Gutenberg akan menjadi editor default, tentu saja perlu bekerja dengan tema WordPress apa pun.

Dengan itu, ada beberapa hal yang dapat dilakukan pengembang untuk menambahkan kemampuan khusus untuk Gutenberg, jadi Anda akan segera mulai melihat "kompatibel dengan Gutenberg" di banyak materi pemasaran tema.

Inilah yang membuat tema kompatibel dengan Gutenberg:

  • Penataan blok khusus – tema dapat menambahkan gaya khusus untuk blok inti Gutenberg. Ini memastikan bahwa semua blok Gutenberg cocok dengan desain tema Anda dengan sempurna.
  • Perataan lebar penuh – Gutenberg memungkinkan Anda membuat gambar dengan lebar penuh yang membentang di seluruh layar, tetapi hanya jika pengembang tema secara khusus mengaktifkannya.
  • Penataan gaya editor – pengembang tema juga dapat menambahkan gaya mereka sendiri ke antarmuka pengeditan Gutenberg back-end . Ini menciptakan lebih banyak pendekatan desain visual. Anda dapat melihat contohnya di sini .

Apakah Anda Harus Menggunakan Editor Gutenberg Setelah WordPress 5.0 Dirilis?

Tidak! Meskipun Gutenberg akan menjadi editor default di WordPress 5.0, Anda sebenarnya tidak harus menggunakannya.

Jika Anda ingin terus menggunakan editor WordPress saat ini, ada plugin Editor Klasik resmi yang menyembunyikan semua jejak Gutenberg dan memulihkan pengalaman pengeditan saat ini.

Atau, plugin ini juga memungkinkan Anda menggunakan kedua editor dan beralih di antara keduanya berdasarkan pos demi pos.

Tutorial Gutenberg WordPress – Bagaimana Anda Akan Menggunakan Editor Baru

Oke, sekarang setelah Anda menyelesaikan kursus kilat Gutenberg 101, mari kita langsung menggunakan Editor Gutenberg.

Tujuan dari bagian ini adalah untuk mengenalkan Anda dengan Editor Gutenberg sehingga Anda dapat mulai bekerja setelah dirilis.

Untuk memulai, berikut adalah grafik untuk membantu Anda memahami elemen inti dari antarmuka Editor Gutenberg:

tutorial editor gutenberg dasar 0 2

  1. Ini adalah tubuh editor. Di situlah Anda akan bekerja dengan konten
  2. Tombol-tombol ini memungkinkan Anda menambahkan blok baru . Jika Anda ingin menambahkan gambar, video, atau konten blokir lainnya, Anda akan menggunakannya.
  3. Di sinilah Anda menambahkan judul posting Anda.
  4. Opsi ini memungkinkan Anda menyimpan draf, melihat pratinjau, dan akhirnya memublikasikan postingan Anda.
  5. Bila Anda tidak memiliki blok yang dipilih, bilah sisi ini memungkinkan Anda mengelola opsi keseluruhan untuk posting Anda, seperti kategori dan gambar unggulan Anda. Bila Anda memiliki blok yang dipilih, memberikan Anda pilihan untuk blok tertentu.

Kemudian, ketika Anda pergi untuk menambahkan blok baru, Anda akan melihat jendela popup ini dengan daftar semua blok yang tersedia. Anda dapat:

  1. Gunakan tab akordeon untuk menelusuri semua blok yang tersedia
  2. Cari langsung blok yang Anda inginkan

tutorial editor gutenberg dasar 0 1 1

Cara Membuat Postingan Blog Sederhana Dengan Editor Gutenberg

Di bagian ini, Anda akan mempelajari bagaimana Anda dapat melakukan jenis tindakan yang sama yang sudah dapat Anda lakukan di editor WordPress saat ini .

Pada dasarnya, Anda akan belajar bagaimana menyesuaikan alur kerja Anda yang ada dengan Editor Gutenberg. Kemudian, di bagian berikutnya, saya akan menunjukkan kepada Anda cara memanfaatkan fungsionalitas baru Editor Gutenberg.

Menambahkan Atau Memformat Konten Teks Dasar

Konten teks paragraf dasar sederhana – Anda cukup mengklik dan mengetik. Satu-satunya perbedaan langsung adalah bahwa setiap kali Anda menekan Enter untuk membuat baris baru, Gutenberg akan secara otomatis membuat blok baru untuk paragraf Anda berikutnya:

tutorial editor gutenberg dasar 1 1

Saat Anda mengeklik blok, Anda akan melihat bilah alat pemformatan muncul di mana Anda dapat:

  • Ubah perataan
  • Tambahkan huruf tebal dan miring
  • Sisipkan tautan
  • Dll.

Pada dasarnya, ini sangat mirip dengan bilah alat di editor saat ini:

tutorial editor gutenberg dasar 2 1

Nanti, saya akan menunjukkan kepada Anda alternatif yang rapi untuk pendekatan default ini.

Di luar opsi pemformatan di bilah alat, Anda juga mendapatkan beberapa opsi di bilah sisi kanan yang memungkinkan Anda:

  • Kontrol ukuran dan warna teks
  • Tambahkan topi drop

tutorial editor gutenberg dasar 3 1

Cukup sederhana sejauh ini, bukan?

Membuat Judul (H1, H2, dll.)

Anda memiliki beberapa opsi berbeda untuk membuat heading.

Pertama, Anda dapat menggunakan ikon + untuk menyisipkan blok Judul baru:

tutorial editor gutenberg dasar 4 1

Setelah Anda memasukkan blok Judul , Anda dapat mengetik untuk menambahkan teks dan menggunakan bilah sisi atau bilah alat untuk mengontrol judul yang akan digunakan (mis. H2 vs H3):

tutorial editor gutenberg dasar 5 1

Atau, Anda juga dapat:

  • Ubah blok paragraf biasa menjadi blok heading dengan menggunakan tombol Change block type .
  • Gunakan penurunan harga untuk membuat heading Anda (misalnya "## Ini adalah heading 2")

Berikut GIF untuk mengilustrasikan kedua metode tersebut:

tutorial editor gutenberg dasar 6 1

Menyisipkan Gambar, Video, Atau Konten Media Lainnya

Oke, jadi sekarang Anda dapat membuat dan memformat teks dan judul dasar. Itu akan membuat Anda lebih berhasil!

Tapi bagaimana dengan memasukkan konten media?

Untuk menyisipkan konten media apa pun, Anda dapat menggunakan ikon + yang sama untuk menyisipkan blok.

Untuk menyisipkan konten media di bawah konten yang ada, gunakan ikon + di pojok kiri atas.

Atau, Anda juga dapat menyisipkan blok baru di antara konten yang ada dengan mengarahkan kursor ke tempat Anda ingin menyisipkan konten. Kemudian, Anda akan menggunakan tombol Tambahkan blok di sebelah kiri blok baru:

tutorial editor gutenberg dasar 7

Setelah Anda membuka popup Sisipkan Blok , Anda dapat memilih dari:

  • Gambar – masukkan gambar dari perpustakaan media WordPress atau URL eksternal.
  • Video – menyematkan video dari perpustakaan media WordPress atau URL eksternal.
  • Sematkan – blok terpisah untuk membantu Anda menyematkan konten dari YouTube, Vimeo, Spotify, SoundCloud, Instagram, dan banyak sumber lainnya.

Misalnya, seperti inilah tampilan menyisipkan gambar dari perpustakaan media WordPress:

tutorial editor gutenberg dasar 8 1

Dan inilah cara Anda dapat menyematkan video YouTube:

tutorial editor gutenberg dasar 9 1

Memasukkan Shortcode Dari Plugin Lain

Jika Anda seperti kebanyakan pengguna WordPress, Anda mungkin memiliki beberapa plugin yang Anda sertakan dalam konten posting atau halaman Anda menggunakan kode pendek.

Akhirnya , tujuannya adalah agar jenis plugin tersebut membuat blok Gutenberg mereka sendiri yang dapat Anda gunakan secara langsung ( lebih lanjut tentang ini nanti ). Tetapi sampai saat itu , Anda masih dapat memasukkan kode pendek dalam konten Gutenberg Anda dengan menggunakan blok Kode Pendek :

tutorial editor gutenberg dasar 10 1

Mengatur Ulang Konten (Anda Memiliki Dua Pilihan)

Oke, cukup mudah sejauh ini… tetapi bagaimana jika Anda ingin mengubah urutan blok Anda?

Untuk melakukan itu, Anda memiliki dua opsi.

Pertama, jika Anda mengarahkan mouse ke kiri blok*, Anda dapat menggunakan seret dan lepas untuk memindahkan blok:

tutorial editor gutenberg dasar 11 1

Kedua, Anda juga dapat menggunakan panah atas atau bawah untuk menggeser blok ke atas atau ke bawah satu posisi:

tutorial editor gutenberg dasar 12

*Untuk mengaktifkan drag and drop, tahan mouse Anda di atas 6 titik di antara panah atas dan bawah.

Bekerja Dengan Informasi Di Balik Layar (Kategori, URL Slug, Dll.)

Ok, jadi di atas harus mencakup cara menambahkan konten blog dasar. Tapi bagaimana dengan semua bagian di belakang layar lainnya dalam mempersiapkan posting untuk publikasi?

Untuk sebagian besar tindakan, Anda dapat menggunakan tab Dokumen di bar samping. Di sinilah Anda akan:

  • Pilih tanggal publikasi/jadwalkan posting terlebih dahulu
  • Pilih penulis
  • Tambahkan kategori dan tag
  • Pilih gambar unggulan Anda
  • Masukkan kutipan Anda

Selain itu, Anda dapat menggunakan tombol di atas bilah sisi tersebut untuk:

  • Pratinjau posting Anda
  • Simpan draf ( Gutenberg secara otomatis menyimpan draf Anda, jadi Anda biasanya tidak perlu melakukannya secara manual )
  • Publikasikan postingan Anda

tutorial editor gutenberg dasar 13

Satu-satunya hal yang rumit adalah mengatur slug URL posting atau halaman Anda. Untuk mengeditnya, klik pada judul. Kemudian, Anda dapat mengedit slug:

tutorial editor gutenberg dasar 14 1

Bagaimana Dengan Plugin Seperti Yoast SEO? Bagaimana Mereka Akan Bekerja?

Ada kemungkinan besar Anda memiliki beberapa plugin backend lain yang perlu Anda konfigurasikan untuk setiap konten.

Ada dua cara Anda berinteraksi dengan plugin ini.

Pertama, banyak pengembang sudah mengerjakan kompatibilitas Gutenberg langsung. Misalnya, Yoast SEO sudah mendukung Gutenberg, dan Anda akan mengonfigurasi pengaturan Yoast SEO Anda langsung dari sidebar Dokumen yang sama:

tutorial editor gutenberg dasar 14 1 1

Untuk plugin lawas yang belum memiliki dukungan Gutenberg, Anda masih dapat menggunakan kotak meta seperti yang Anda lakukan dengan editor TinyMCE:

tutorial editor gutenberg dasar 14 2 1

Enam Tips Untuk Bekerja Lebih Produktif Dengan Gutenberg

Saat pertama kali mulai bekerja dengan Editor Gutenberg, mungkin terasa sedikit lamban. Kiat-kiat ini dapat membantu mempercepat proses dan mempermudah penyisipan dan penyesuaian blok yang Anda butuhkan dengan cepat.

1. Cepat Sisipkan Blok Dengan Mengetik “/” Untuk Menghemat Banyak Waktu

Metode untuk menyisipkan blok yang saya tunjukkan di atas sangat membantu ketika Anda baru memulai dengan Gutenberg karena memungkinkan Anda melihat semua blok yang tersedia.

Tetapi begitu Anda terbiasa dengan blok mana yang Anda butuhkan, Anda dapat memasukkannya lebih cepat dengan menggunakan fitur penyisipan cepat.

Daripada mengklik ikon + , cukup:

  • Tekan enter untuk membuat blok baru
  • Ketik "/"
  • Mulailah mengetik nama blok

Saat Anda mengetik, Gutenberg akan otomatis menyarankan blok yang cocok. Kemudian, tekan saja Enter untuk memasukkan blok yang Anda inginkan.

Ini dia beraksi:

tutorial editor gutenberg dasar 15 1

Itu jauh lebih cepat, bukan?

2. Pelajari Pintasan Keyboard Untuk Pengeditan Lebih Cepat

Gutenberg hadir dengan pintasan keyboard yang dapat mempercepat cara Anda bekerja.

Anda dapat menampilkan daftar lengkap pintasan ini dengan mengklik CTRL + Alt + H (Windows) atau CMD + Alt + H (Mac):

tutorial editor gutenberg dasar 15 1

Anda harus membaca daftar lengkapnya, tetapi berikut adalah beberapa yang paling membantu:

  • Ctrl + S – simpan draf Anda.
  • Ctrl + Z – batalkan atau Ctrl + Y – ulangi.
  • Ctrl + Alt + Backspace – hapus blok yang dipilih ( sangat berguna ).
  • Ctrl + Shift + D – duplikat blok yang dipilih.
  • Ctrl + Alt + T – menyisipkan blok baru sebelum blok yang dipilih.
  • Ctrl + Alt + Y – menyisipkan blok baru setelah blok yang dipilih.

Anda juga dapat menggunakan sebagian besar pintasan global, seperti Ctrl + B untuk cetak tebal atau Ctrl + V untuk menempel.

3. Seret Gambar Dari Desktop Anda Ke Konten Gutenberg Anda

Jika Anda perlu memasukkan banyak gambar, ini adalah trik rapi lainnya.

Daripada perlu secara manual membuat blok gambar baru untuk setiap gambar, Anda cukup menyeret gambar langsung dari folder di desktop Anda ke tempat yang Anda bisa untuk memasukkannya ke dalam posting Anda.

WordPress kemudian akan secara otomatis mengunggahnya ke perpustakaan media Anda dan memasukkannya ke sana. Hanya ada satu hal yang perlu diperhatikan – pastikan Anda melihat garis biru saat menyeret gambar , jika tidak maka tidak akan berfungsi:

tutorial editor gutenberg dasar 16

4. Tambahkan Bilah Alat Pengeditan Tetap

Satu hal yang sulit bagi sebagian orang dengan Gutenberg adalah bahwa bilah alat pengeditan terus-menerus berkedip masuk dan keluar dari keberadaan saat Anda mengklik di antara blok paragraf yang berbeda.

Jika Anda tidak menyukainya, Anda dapat mengaktifkan opsi Bilah Alat Terpadu untuk mendapatkan bilah alat yang selalu ada di bagian atas antarmuka Gutenberg:

tutorial editor gutenberg dasar 17 1

5. Gunakan Sintaks Penurunan Harga Untuk Judul, Daftar, Dll.

Jika Anda suka menggunakan penurunan harga, Anda dapat menggabungkan beberapa sintaks penurunan harga di Gutenberg.

Sebagai contoh:

  • ## – membuat H2 ( Anda sudah melihat ini – berubah menjadi blok heading ).
  • * – memulai daftar yang tidak berurutan.
  • 1. – memulai daftar yang dipesan.
  • > – membuat kutipan blok ( berubah menjadi blok kutipan ).

Anda tidak dapat menggunakan semua sintaks penurunan harga. Tetapi contoh di atas sudah cukup membantu untuk pemformatan yang lebih cepat:

tutorial editor gutenberg dasar 18 1

6. Edit HTML Secara Langsung Jika Diperlukan

Jika Anda menemukan situasi di mana Anda ingin mengedit HTML secara langsung, Anda dapat mengakses editor kode dengan mengklik tiga titik di sudut kanan atas atau menggunakan pintasan Ctrl + Shift + Alt + M :

tutorial editor gutenberg dasar 18 1 1

Mengambil Keuntungan Dari Fungsi Baru Gutenberg – Kolom, Tombol, Dan Banyak Lagi!

Baiklah, kami telah membahas:

  • Cara menggunakan Gutenberg untuk membuat posting blog dasar.
  • Beberapa tips untuk mempercepat cara Anda bekerja dengan Gutenberg.

Sekarang, mari masuk ke beberapa hal baru yang keren yang dapat Anda lakukan dengan Gutenberg. Ini adalah fitur menarik yang akan membantu menjelaskan mengapa tim WordPress memutuskan untuk bergerak maju dengan Gutenberg.

Sisipkan Tombol – Tidak Perlu HTML

Dengan editor lama, satu-satunya cara untuk membuat tombol adalah menambahkan kelas CSS secara manual atau menggunakan plugin pihak ketiga.

Dengan Gutenberg, Anda cukup menambahkan blok Tombol . Untuk mengedit teks tombol, Anda tinggal klik dan ketik. Dan untuk mengubah warna, Anda dapat menggunakan bilah sisi:

tutorial editor gutenberg dasar 19

Buat Tata Letak Multi-Kolom

Dengan editor lama, tidak ada cara untuk membuat tata letak multi-kolom tanpa HTML khusus Anda sendiri atau plugin pihak ketiga.

Dengan Gutenberg, Anda cukup menambahkan blok Kolom . Kemudian, Anda dapat menambahkan blok lain di dalam kolom yang berbeda:

tutorial editor gutenberg dasar 20

Buat Gambar Terbentang Lebar Penuh

Jika tema Anda mendukungnya , Anda akan mendapatkan opsi perataan lebar penuh baru yang memungkinkan Anda meregangkan gambar di seluruh layar, yang membuka beberapa tata letak konten yang menarik:

tutorial editor gutenberg dasar 21 1

Buat Template Blok yang Dapat Digunakan Kembali

Jika Anda sering menggunakan kombinasi blok yang sama, Anda dapat menghemat waktu dengan membuat grup blok yang dapat digunakan kembali.

Pertama, Anda dapat mengklik dan menyeret untuk memilih semua blok yang ingin Anda sertakan. Kemudian, Anda dapat menggunakan tiga titik untuk Menambahkan ke Blok yang Dapat Digunakan Kembali :

tutorial editor gutenberg dasar 22

Anda akan memberinya nama. Kemudian, Anda dapat menyisipkan seluruh template seperti yang Anda lakukan pada blok lainnya:

tutorial editor gutenberg dasar 23 1

Anda Dapat Menambahkan Lebih Banyak Blok Dan Fungsionalitas Dengan Plugin Pihak Ketiga

Di sinilah Gutenberg mulai menjadi lebih keren:

Plugin pihak ketiga dapat menambahkan blok mereka sendiri yang dapat Anda gunakan dalam desain Gutenberg Anda.

Ada dua cara yang dapat menguntungkan Anda:

  • Plugin yang sudah Anda gunakan akan membuat blok Gutenberg sendiri. Misalnya, jika Anda menggunakan plugin kalender acara, Anda dapat menyisipkan acara hanya dengan menggunakan blok acara plugin Anda.
  • Pengembang membuat plugin Gutenberg khusus yang menambahkan banyak blok konten baru generik yang memberi Anda kontrol lebih besar atas desain Anda.

Misalnya, lihat plugin Stackable gratis . Setelah Anda menginstal dan mengaktifkannya, Anda akan mendapatkan satu set blok Stackable baru di Gutenberg:

tutorial editor gutenberg dasar 24 1

Dan kemudian Anda dapat menggunakan blok tersebut untuk melakukan beberapa hal yang cukup keren, seperti memasukkan tabel harga atau testimonial:

tutorial editor gutenberg dasar 25 1

Ini Baru Awal Untuk Editor Gutenberg WordPress

Dan itu saja! Jika Anda berhasil sejauh ini, Anda harus menjadi guru Gutenberg yang siap untuk mulai bekerja segera setelah WordPress 5.0 dirilis.

Meskipun mempelajari alur kerja baru tidak ada dalam daftar "cara menyenangkan untuk menghabiskan akhir pekan" kebanyakan orang, menguasai seluk beluk Gutenberg akan menjadi penting bagi siapa saja yang menggunakan WordPress.

Gutenberg tidak hanya akan memengaruhi cara Anda membuat konten saat ini , itu juga akan memainkan peran utama di WordPress ke depannya.

Semua yang Anda lihat di atas hanyalah fase pertama Gutenberg. Pada fase dua, Gutenberg akan pindah ke templat halaman, dan fase ketiga akan mengubah Gutenberg menjadi alat untuk penyesuaian situs web penuh .

Jadi…berteman baiklah dengan Gutenberg, karena Anda akan melihat banyak hal selama beberapa tahun ke depan!