How to Use the WordPress Block Editor (Gutenberg)

Block Editor (Gutenberg) is a content editor that gives you a completely new experience compared with the plain Classic Editor. With its visual interface and "block by block" way of working, the Block Editor helps you create, customize and arrange your post layout flexibly. In this article, MONA Media will walk you through how to use the WordPress Block Editor, to help you streamline your content editing workflow. Don't skip it!

What is the Block Editor (Gutenberg)?

Block Editor means every piece of content is treated as a block, blocks are separated by a line, and you can customize or style each block on its own. Just like writing a document, if your content has several lines, each line is also treated as its own block. You can also customize the font, text color, background color and size of each block separately.

You may also come across the term Gutenberg Editor when learning about the WordPress Block Editor. In fact, Gutenberg is the name of a long-term project by the development team of WordPress which has 4 phases as follows:

• Phase 1 – Editing: Focuses on upgrading the content editing features, and the Block Editor is a product of this phase.
• Phase 2 – Customization: Expands and improves related features for a more seamless website experience, such as Full Site Editing, the Block Editor and the added Site Editor.
• Phase 3 – Collaboration: Builds collaboration features that let multiple people edit a website together.
• Phase 4 – Multilingual: Focuses on multilingual support for websites.

How to use the latest WordPress Block Editor update

In the next part, MONA will go into a detailed Block Editor guide so you know how to use it to create rich, engaging content for your website. First, the WordPress editing area has the editor on the left and a settings sidebar on the right. You can click the "+" icon at the top left of the page to activate the Block Editor.

The editing interface will then show 3 parts:

• Part 1: The Block Editor shows the list of supported blocks.
• Part 2: The content editing area that shows what appears on the website.
• Part 3: The settings column for adjusting the post/page or the selected block.

Here, blocks are further divided into 3 groups:

• Blocks: The list of supported blocks, including WordPress default blocks and blocks from your theme and plugins (if any).
• Patterns: A collection of ready-made designs built from blocks.
• Media: Lets you reuse image/video blocks you have already used, and use images from the Openverse library.

To use a block, you just select a line and click the block in the left panel. You can also insert a block quickly by typing “/” and part of the block name, and the system will show matching blocks for you to pick. If you want to start a new block, just click a block and press Enter to go to a new line.

A guide to using common blocks

Mastering the Gutenberg Editor makes it easy to create the layout you want and format content effectively. Below, let's go through the details of how to customize common blocks in the WordPress Block Editor.

Adding headings to each section of a text

If your text has several sections, each section will have a heading. So you can use the Heading block or Markdown syntax to add headings. Once done, you can also set the heading level from heading 1 to heading 6.

Adding background and text color

As mentioned, WordPress treats each line as a block and lets you customize each block separately. So try clicking any line, then choose Text (text color), Background (background color) or Typography (text size) on the right to edit it as you like.

Adding highlights and coloring text

To highlight content (background or text color) in the WordPress Block Editor, just select the text you want to stand out. The system shows a toolbar, and you click the highlight option to color the text.

Inline Text features

Inline Text features let you work within a block without going to a new line. Specifically, you can customize text with these features:

• Footnote: Footnotes/quotations in text.
• Inline Code: Turns a piece of text in a block into code, similar to <?php $color = ‘purple’; ?> without errors from special characters.
• Inline Image: Lets you insert a picture (usually a small icon-sized image) into a block without going to a new line.
• Keyboard input: Marks a word or a passage in the text as a keyboard key. 
• Language: Lets you mark the language code of a passage, useful when your text mixes several languages and you need to mark the structure HTML for each language. 
• Strikethrough: Adds a strikethrough to text.
• Subscript: Marks a letter or number positioned lower than the text.
• Superscript: Marks a letter or number positioned higher than the text

Creating a list (List)

To insert a list into your text, you can use the List feature or add one quickly by going to a new line and typing the character “-”. To exit list mode, just press Enter twice. You can also create a sub-list by pressing Tab while typing.

Splitting content into columns

Another handy feature of the Block Editor is that it lets users add multiple columns to content quickly. Just add a Column block to your content, choose the number of columns to insert, and add other blocks into each column. The WordPress Block Editor stacks these columns by default on phones, or you can turn this off.

Adding hidden content with the Details block

If you want to create hidden content, you can use the Details block built into the WordPress Block Editor. You can set the hidden content to be collapsed or expanded by default, style the content, and nest other blocks inside.

Inserting text written in the Classic Editor into the Block Editor

Also, if you want to write text in the old Classic Editor, you can insert a Classic block and start editing content.

How to use Block Editor blocks to insert images and videos

The Block Editor lets you add and manage images and videos easily, making your post more lively and engaging. Below is a guide to using the WordPress Block Editor to insert image and video blocks.

Inserting an image or video into a post

To insert an image or video into a WordPress post, just use the Image or Video block. You can also drag and drop a file straight from your computer into the editor. For YouTube videos, just copy the link and the system shows the video automatically through the Embed feature.

Customizing how images are displayed

After inserting an image into your content, you can change how it is displayed with the Block Editor. With a few simple steps, you can adjust the size, add color filters, add effects, round the corners of the image and more in the WordPress Block Editor.

Showing images as a gallery

If you want to show several images, it is better to insert them with the Gallery block so they look nicer. When inserting a Gallery, remember to turn on the option to link each image when clicked, so users can view the original size. For images already in your library, if you want to make a Gallery, choose Media Library instead of uploading files.

Other types of Block Editor blocks

Besides the common blocks MONA Media covered above, you can explore and use some other types of Block Editor blocks to optimize your content and improve the user experience, including:

• Quote: Lets you insert a quotation into a post and mark it as a separate display. This is the Blockquote, used when quoting from outside sources in your text.
• Preformatted: Inserts text and ignores all formatting and special characters.
• Pullquote: Inserts a quote of the Pull quote type, meaning quotes taken from within your own text to catch the reader's attention.
• Table: Inserts a table into the content, where you can customize the number of columns and rows as needed.
• Verse: Lets you create a dedicated block for inserting poetry into content.
• Audio: Similar to inserting images and videos, but used to insert audio files.
• Cover: An image block that lets users write text on top of the image.
• File: Inserts a file from the Media library and makes downloading easy by showing a file download button.
• Media & Text: An image block that splits the content into two columns, one for the image and one next to it for text.
• Button: Lets you insert a button into the text.
• Group: Groups several blocks together into a Group for shared settings.
• Row: Arranges blocks into a horizontal Row.
• Stack: Arranges blocks into a vertical Stack.
• Grid: Arranges blocks into a Grid.
• More: Shows the content of blocks on the home page or category pages.
• Page Break: Splits the text into several sub-pages, so the content below is moved to its own separate page.
• Separator: Lets you draw a straight line in the content to mark the end of a section or an idea.
• Spacer: This block helps you create empty space between blocks.
• Blocks in the Widget group: Lets you insert a widget supported by your theme/plugin straight into the post content.
• Blocks in the Theme group: These are special blocks that your current theme provides for compatibility with the Block Editor or to support Full-site Editing.
• Blocks in the Embed group: Lets you embed content from another website or social network into your post.

So, Block Editor is not just a simple editing tool, it also helps WordPress users design and edit content more visually. We hope that with this guide from MONA Media, you feel more confident using the Block Editor on WordPress and ready to get the most out of this editor.

→ Read more:

• A guide to creating posts in WordPress
• Best SEO plugins for WordPress