Jika Anda telah menggunakan WordPress selama beberapa tahun, maka Anda ingat ketika orang-orang di WordPress meluncurkan editor Gutenberg di ^(Gutenberg)WordPress 5.0 pada tahun 2018.

Editor default baru ini merupakan perombakan besar-besaran untuk mengedit posting dan halaman di situs Anda. Ini mengubah kotak teks besar yang biasa digunakan oleh pemilik situs web menjadi platform pengeditan berbasis blok yang sangat berbeda.

Beberapa pemilik situs web sangat membencinya sehingga mereka menghindari peningkatan ke WordPress 5.0 dan tetap menggunakan editor default klasik selama mungkin. Pemilik situs web lain menerima perubahan karena kesederhanaan dan kemudahan penggunaannya.

Jika Anda sedang melakukan transisi dan ingin tahu apa yang diharapkan, tutorial WordPress Gutenberg ini akan memandu Anda melalui fitur-fitur utama yang perlu Anda ketahui dan pahami. Ini harus membuat transisi Anda semudah mungkin.

Apa yang Diharapkan di WordPress Gutenberg

Hal utama yang perlu diketahui tentang editor Gutenberg adalah bahwa itu berbasis blok. Ini berarti apa pun yang perlu Anda tambahkan dikelola melalui blok. Blok di Gutenberg termasuk (tetapi tidak terbatas pada):

• Gugus kalimat
• tajuk
• Gambar
• Daftar
• Mengutip
• Kode
• Diformat sebelumnya
• kutipan tarik
• Meja

Ada juga beberapa blok lanjutan lainnya yang jarang digunakan. Anda mungkin melihat blok tambahan jika Anda menginstal plugin WordPress baru^{(new WordPress plugins)} ke editor.

Menambahkan blok semudah memilih ikon + di sebelah kanan di bawah blok terbaru yang Anda tambahkan.

Memilih salah satu blok dari jendela pop-up menambahkan blok itu sebagai bagian berikutnya di halaman atau posting Anda. 

Sebelum kita masuk ke blok ini, mari kita mulai dari awal dan membuat postingan baru menggunakan Gutenberg di WordPress .

Membuat Postingan dan Menambahkan Blok

Menambahkan posting tetap tidak berubah dari versi terakhir WordPress . Cukup^(Just) pilih Postingan^(Posts) dari bilah navigasi kiri, dan pilih Tambah Baru^{(Add New)} di bawahnya. 

Ini akan membuka jendela editor pos. Ini juga di mana semuanya berbeda. Anda akan melihat editor  default Gutenberg WordPress .

Menambahkan Item Blok^{(Block Items)} di Editor Gutenberg^{(Gutenberg Editor)}

Anda dapat mengetikkan judul untuk posting Anda di bidang judul. Kemudian pilih ikon + di sebelah kanan untuk menambahkan blok pertama.

Blok Paragraf^{(Paragraph Blocks)}

Blok pertama yang paling umum ditambahkan orang setelah judul adalah blok paragraf. Untuk melakukan ini, pilih Paragraf^(Paragraph) dari jendela pop-up. 

Ini akan menyisipkan bidang blok tempat Anda dapat mulai mengetik paragraf pertama posting Anda. Pemformatan untuk blok Paragraf mengikuti ^(Paragraph)font default^{(the default font)} untuk blok paragraf situs Anda. 

Berikut adalah beberapa tip untuk menambahkan blok paragraf di editor Gutenberg .

• Paragraf Anda bisa sepanjang yang Anda inginkan. Teks akan secara otomatis masuk ke baris berikutnya, seperti di editor klasik.
• Jika Anda menekan Enter , editor Gutenberg secara otomatis membuat blok paragraf baru, namun itu hanya terlihat seperti paragraf kedua dengan jeda paragraf.
• Menyoroti teks apa pun dalam paragraf akan menampilkan jendela pemformatan tempat Anda dapat mengubah pemformatan untuk teks itu, atau memodifikasi blok menjadi daftar atau jenis blok lainnya.
• Pilih tiga titik dan pilih Hapus blok^{(Remove block)} untuk menghapus blok paragraf dan menggantinya dengan yang lain.

Blok Gambar^{(Image Blocks)}

Jika Anda memilih blok Gambar , Anda akan melihat kotak ^(Image)Gambar^(Image) tempat Anda dapat memilih tombol Unggah^(Upload) untuk mengunggah gambar ke kiriman Anda dari komputer. Pilih tautan Pustaka Media^{(Media Library)} untuk menggunakan gambar dari pustaka media yang ada, atau Sisipkan dari URL^{(Insert from URL)} untuk menautkan ke gambar dari situs lain.

Ini akan memasukkan gambar ke dalam artikel tempat Anda menambahkan blok Gambar baru. ^(Image)Anda akan melihat bahwa Anda dapat mengetikkan keterangan untuk gambar langsung di bawah gambar itu sendiri.

Anda dapat menggunakan opsi pemformatan yang sama pada teks keterangan seperti pada teks paragraf biasa.

Daftar Blok^{(List Blocks)}

Saat Anda menambahkan blok baru dan memilih List , blok daftar akan disisipkan pada titik tersebut di artikel.

Ini akan menampilkan satu poin, tetapi saat Anda mengetik dan menekan Enter , setiap poin baru akan muncul saat Anda membutuhkannya.

Pemformatan daftar juga mengikuti gaya dan ukuran font seperti yang ditentukan oleh tema Anda^{(your theme)} , jadi jangan heran jika font dalam daftar Anda terlihat berbeda dari blok paragraf Anda.

Anda dapat menyorot teks di blok daftar dan Anda akan melihat opsi pemformatan untuk teks ini jika Anda ingin mengubahnya. Anda tidak dapat mengubah gaya font di sini, tetapi Anda dapat mencetak tebal, miring, menambahkan hyperlink, atau mengubah jenis blok seluruhnya.

Blok lainnya^{(Other Blocks)}

Jika Anda ingin melihat semua blok yang tersedia, pilih + untuk menambahkan blok, lalu pilih Telusuri semua^{(Browse all)} untuk melihat seluruh daftar.

Daftar ini sebenarnya cukup panjang. Apa pun yang Anda ingat tersedia di editor klasik melalui sistem menunya akan disertakan di sini. Ini termasuk blok lain yang umum digunakan seperti:

• Tabel
• File dan media
• Video
• Tag “Lainnya”
• Pemisah dan pemisah halaman
• Widget seperti ikon sosial, tag cloud, kalender^(calendar) , dan widget plugin WordPress
• Sematkan^(Embed) kode untuk situs sosial, situs media seperti YouTube dan Spotify , dan lainnya

Fitur Gutenberg Lainnya

Anda tidak harus tetap menggunakan blok yang telah Anda tambahkan di mana pun Anda menambahkannya. Anda dapat menggulir kembali ke atas di pos Anda dan memilih ikon + di antara salah satu blok yang ada. Ini akan memungkinkan Anda memasukkan blok baru di antara blok yang sudah ada.

Anda juga tidak terjebak dengan penempatan blok Anda. Di editor WordPress^(WordPress) klasik , tidak selalu mudah memindahkan hal-hal seperti gambar ke bagian lain dari posting Anda tanpa terkadang mengacaukan pengkodean latar belakang.

Di Gutenberg , memindahkan elemen seperti gambar semudah memilih blok dan kemudian memilih panah atas atau bawah di bilah menu pop-up untuk memindahkan blok ke atas atau ke bawah di pos.

Setiap kali Anda memilih panah, panah itu akan meluncur yang memblokir satu posisi ke arah mana pun yang Anda pilih.

Menggunakan Editor Glutenberg^{(Glutenberg Editor)} di WordPress

Area pos bukan satu-satunya tempat untuk menambahkan blok baru. Anda akan melihat ada menu ikon yang sangat sederhana di bagian atas editor tempat Anda dapat menggunakan ikon + untuk menambahkan blok juga.

Ikon lain dalam menu ini memberi Anda akses cepat ke fitur Gutenberg lainnya .

• Ikon Edit^(Edit) pena memungkinkan Anda beralih ke mode pilih untuk memilih blok dengan lebih mudah. Klik dua kali^{(Double-click)} blok untuk kembali ke mode Edit .
• Ikon Undo^(Undo) atau Redo (panah melengkung kiri dan kanan) akan membatalkan atau mengulang pengeditan terakhir Anda.
• Ikon i (Rincian) menunjukkan jumlah karakter, kata, judul, paragraf, dan blok di postingan Anda.
• Ikon Garis Besar^(Outline) memungkinkan Anda menavigasi dengan cepat ke blok di pos Anda berdasarkan urutannya dalam kerangka pos Anda.

Bagi banyak orang, editor Gutenberg di ^(Gutenberg)WordPress membutuhkan waktu untuk membiasakan diri. Tetapi setelah mengalami betapa mudahnya membuat, mengedit, dan memanipulasi blok elemen dalam posting Anda, Anda akan menemukan bahwa proses membuat posting dan halaman Anda lebih cepat dan lebih produktif.

WordPress Gutenberg Tutorial: How to Use the New Editor

If yоu’ve been usіng WordPress for quite a few уears, then you remember when the folks at WordPress rоlled out the Gutenberg editor in WordPress 5.0 back in 2018.

This new default editor was a major overhaul for editing both posts and pages on your site. It transformed the large text box that website owners were accustomed to into a very different block-based editing platform.

Some website owners hated it so much that they avoided upgrading to WordPress 5.0 and stayed with the classic default editor as long as possible. Other website owners embraced the change for its simplicity and ease-of-use.

If you’re making the transition and are curious what to expect, this WordPress Gutenberg tutorial will walk you through the main features you need to know and understand. This should make your transition as easy as possible.

What to Expect in WordPress Gutenberg

The main thing to know about the Gutenberg editor is that it’s block based. This means anything you need to add is managed via blocks. Blocks in Gutenberg include (but are not limited to):

• Paragraph
• Header
• Image
• List
• Quote
• Code
• Preformatted
• Pullquote
• Table

There are also a few other advanced blocks that are rarely used. You may see additional blocks if you install new WordPress plugins to the editor.

Adding blocks is as simple as selecting the + icon to the right under the most recent block you’ve added.

Selecting any of the blocks from the pop-up window adds that block as the next section in your page or post. 

Before we get to these blocks, let’s start from the beginning and create a new post using Gutenberg in WordPress.

Creating Posts and Adding Blocks

Adding a post remains unchanged from the last version of WordPress. Just select Posts from the left navigation bar, and select Add New underneath it. 

This will open the post editor window. This is also where everything is different. You’ll see the default Gutenberg WordPress editor. 

Adding Block Items in the Gutenberg Editor

You can type the title for your post in the title field. Then select the + icon on the right to add the first block.

Paragraph Blocks

The most common first block people add after the title is a paragraph block. To do this, select Paragraph from the pop-up window. 

This will insert a block field where you can start typing the first paragraph of your post. Formatting for the Paragraph block follows the default font for your site’s paragraph blocks. 

Here are some tips for adding paragraph blocks in the Gutenberg editor.

• Your paragraph can be as long as you like. The text will automatically wrap into the next line, just like in the classic editor.
• If you press Enter, the Gutenberg editor automatically creates a new paragraph block, however it just looks like a second paragraph with a paragraph break.
• Highlighting any text in the paragraph will show a formatting window where you can alter the formatting for that text, or modify the block into a list or some other block type.
• Select the three dots and select Remove block to delete a paragraph block and replace it with something else.

Image Blocks

If you select the Image block, you’ll see an Image box where you can select an Upload button to upload an image into your post from your computer. Select the Media Library link to use an image from your existing media library, or Insert from URL to link to an image from another site.

This will insert the image into the article where you added the new Image block. You’ll notice that you can type the caption for the image directly under the image itself.

You can use the same formatting options on the caption text as you can on the regular paragraph text.

List Blocks

When you add a new block and select List, it’ll insert the list block at that point in the article.

It’ll show one bullet, but as you type and press Enter, each new bullet will appear as you need them.

List formatting also follows the font style and size as defined by your theme, so don’t be surprised if the font in your list looks different than your paragraph blocks.

You can highlight text in the list block and you’ll see formatting options for this text if you want to change it. You can’t change the font style here, but you can bold, italics, add a hyperlink, or change the block type entirely.

Other Blocks

If you want to see all the blocks that are available, select + to add a block, then select Browse all to see the entire list.

This list is actually quite long. Anything you remember being available in the classic editor via its menu system will be included here. These include other commonly used blocks like:

• Tables
• Files and media
• Videos
• The “More” tag
• Page breaks and separators
• Widgets like social icons, tag clouds, calendar, and WordPress plugin widgets
• Embed code for social sites, media sites like YouTube and Spotify, and more

Other Gutenberg Features

You don’t have to stick with the blocks you’ve added wherever you added them. You can scroll back up in your post and select the + icon between any of the existing blocks. This will let you insert new blocks between existing ones.

You also aren’t stuck with the placement of your blocks either. In the classic WordPress editor, it wasn’t always easy moving things like images to other sections of your post without sometimes messing up the background coding.

In Gutenberg, moving elements like images is as simple as selecting the block and then selecting the up or down arrows in the pop-up menu bar to move the block up or down in the post.

Each time you select the arrow it’ll slide that block one position in whatever direction you’ve selected.

Using the Glutenberg Editor in WordPress

The post area isn’t the only place to add new blocks. You’ll notice there’s a very simple icon menu at the top of the editor where you can use the + icon to add blocks as well.

The other icons in this menu give you quick access to other Gutenberg features.

• The pen Edit icon lets you switch to select mode to more easily select blocks. Double-click a block to go back to Edit mode.
• Undo or Redo icons (left and right curved arrows) will undo or redo your last edit.
• The i (Details) icon shows you the number of characters, words, headings, paragraphs, and blocks in your post.
• The Outline icon lets you quickly navigate to blocks in your post based on their order in your post outline.

For many people, the Gutenberg editor in WordPress does take some getting used to. But after experiencing how easy it is to create, edit, and manipulate blocks of elements in your posts, you’ll find that your process of creating posts and pages is faster and more productive.

Related posts

• 9 Harus Memiliki Plugin Untuk Instalasi WordPress Baru

• Cara Transisi Dari Editor WordPress Klasik Ke Gutenberg

• Cara menyembunyikan Quick Links pada halaman New tab di Edge menggunakan Registry Editor

• Bagaimana memindahkan WordPress site dari satu host ke yang lain

• Cara Memasang & Setup WordPress pada Microsoft Azure

• Membuat Child Theme di WordPress

• Format Penulisan Blog Terbaik untuk Menyampaikan Poin Anda

• 10 Plugin WordPress Penting Untuk Situs Web Bisnis Kecil

• Cara Membuat Blog Wix yang Sebagus WordPress

• menunjukkan WordPress HTTP Error ketika gambar upload

• Cara Memasang Situs Uji WordPress di Komputer Anda

• Must Have WordPress Yoast SEO Settings 2021

• 8 Tema Premium WordPress Gratis untuk Menginstal

• Cara Membuat Kupon Popup Anda Sendiri di WordPress

• Cara Mengatur Situs Web Seperti Twitter Anda Sendiri Menggunakan Tema P2 WordPress

• Cara Melacak Broken Links dengan Google Webmaster Tool

• Apa Itu AMP untuk WordPress dan Cara Memasangnya

• Cara Melakukan Tes Split yang Efektif Di WordPress

• Cara Mempercepat Situs WordPress dalam 11 Langkah

• Cara Menghapus semua Jejak dari Plugin WordPress