The new WordPress block editor (Gutenberg)

A step by step tutorial for bloggers

With the new WordPress 5.0. update appeared the new WordPress block editor named Gutenberg. From now on, it will be the default WordPress text editor. Although you can still use an old classic editor to write posts, which is now available via a WordPress plugin named ‘Classic Editor’, it’s worth getting to know the block editor better.

The appearance of the new editor is very different from the well-known classic WordPress editor. You will have to learn some things from scratch. In my opinion, it’s worth it because the block editor is very intuitive and gives you many more possibilities.

Gutenberg the new WP block editor
The new WordPress block editor – Gutenberg

The new WordPress editor is built of blocks. What does it mean? To create a blog post you have to put a series of these small blocks together.

It’s very simple because each element is just a block. A separate block is a header, a separate one is a paragraph, an image, and so on. There are blocks available for all kinds of content: you can insert text, list, headings, columns, video and lots more.

Giutemberg WordPress block editor
New WordPress block editor – Gutenberg

Furthermore you can change the order in which blocks are displayed, you can move them to any place on the page.

I think you will like it.

Let’s begin!

Functions of the new block editor – Gutenberg

The editor screen is divided into several parts. Before you start writing a new blog post in the new WordPress block editor, I will discuss the function of individual parts.

More info about what is a blog and how to start a blog.

The new WP block editor settings
The New WordPress block editor

Here is an overview of what I am going to cover:

    1. Option Bar Settings
    2. Publishing Options
    3. Document and Block Options Settings
      3.1. Document Settings
      3.2. Block Settings
    4. Content Area
      # How to add a new block
      4.1. The new Paragraph Block Settings
      # How to add Reusable Block in your blog post
      4.2. Headings Block Settings
      4.3. List Block Settings
      4.4. Quotes, Pullquotes, and Verses Block Settings
      4.5. Image Block Settings
      4.6. Gallery Block Settings
      4.7. Cover Block Settings
      4.8. Media&Text Block Settings
      4.9. Insert Audio / Video / File & other Embeds
      4.10. Columns Block
      4.11. Button Block
      4.12. Table Block
      # Moving multiple blocks at the same time
    5. Is it worth using the new WordPress block editor

1. Option bar settings

A handy set of the most-needed settings.

The new WordPress block editor settongs
Options bar in block editor

By clicking the ‘+’ (‘Add block’) button you add a new block. There are blocks available for all kinds of content: you can insert text, headings, images, lists, and lots more.

Arrows help you navigate. Arrows make navigation easier when creating a post. You can undo your changes or move forward. This makes it easier to work with the document, so the next change in the new editor is a plus.

The ‘i’ icon allows you to see the outline of the document, its general structure composed of headings – a heading breakdown. Here you can also see the number of words, blocks or headers in the entire document. The structure of the document is very important both for the user and for SEO. Thanks to this function, you can easily check all the most important things in your article. This is brilliant.

The new WordPress block editor - document outline
Gutenberg document outline

The last icon in this section is ‘Block Navigation’. It shows the detailed structure of your document. By clicking on any of the elements – a specific paragraph or heading you will automatically go to the indicated block in the body of the post.

Block navigation in the new WordPress block editor - Gutenberg
The new WordPress block editor – block navigation

2. Publishing Options

How to write a blog post in WordPress
The new block editor settings

Here you can publish or save draft of your article. Here you can also click on the Preview button to see what your post looks like before publishing it.

By clicking the cog icon, will hide the settings sidebar.

You will also find here ‘More tools and options’ button (the one with three dots). Here you will find many interesting options that will facilitate the use of the new editor.

I will discuss them briefly, so that you know how you can facilitate your work using all the available options.

By clicking on the ‘Top Toolbar’, access to all block tools and documents will appear in one place, at the top of the page, instead of each block separately.

Block editor settings Top Toolbar
Block editor Top Toolbar

By selecting ‘Spotlight Mode’, we focus on one selected block. The rest of the content is brightened up, which does not disturb the editing of a specific element. In my opinion, it’s a nice solution. It will help to avoid overwhelming by a large number of blocks.

The WordPress block editor functions
Block editor Spotlight mode

What else you can find in ‘More tools and options’: ‘Fullscreen Mode’ allows you to work in full-screen mode, without distractions. Here you can also copy all of your content by clicking ‘Copy All Content’– I admit that this function was missing from the previous editor.

Additional block editor settings allow you to view the Code editor (which is an HTML of your post with block editor PHP code).

And the last ‘Options’ that help you manage Document and Block Options Settings.

The new WordPress block editor options
Block editor more options

3. Document and Block Options Settings

Options settings in the WordPres block editor - Gutenberg
The new WordPres block editor – document and block options settings

3.1. Document settings

In the Document settings you can set the visibility of your post. What options do you have? You can share it for everyone publicly, you can set your post as private or password-protected, so only those with the password can view this post. You can also schedule the publication of your post later, setting a specific date of its publication.

In this section you can also mark the post as sticky, you can change the post’s formats, add a category, tags, Featured image, Exerpt and set up Discussion. Most of these options were also available in the classic editor.

3.2. Block settings

Clicking any block will bring you to the block settings on the right side of the screen.

The new WP block editor - Gutenberg settings
Block settings in the new WordPres block editor

Depending on the type of block you choose, its settings will change. The nice thing is that they are always at hand, they are intuitive and give much more opportunities for changes than in the previous editor. You can simply change more than previously possible.

4. Content Area

This is the place where you put your title and content.

The new WordPress block editor - content area
Content area in Gutenberg – the new WordPress block editor

As mentioned before, the content is added using blocks. To create a blog post, you must put together a series of these small blocks. Let’s start with how to add a new block in your post.


# How to add a new block?

1. By clicking on the ‘plus’ icon.

The “plus” icons (“Add block”) are several on the page. To add a new block, you can click on the “+” icon in the upper left corner of the page or on the icon that is located on the left side of each block, visible after hovering over the mouse. The plus icon will also appear when you move to the center-top of any block. By clicking on it the new block will be inserted above.

Adding a new block
How to add a new block

2. By hitting enter.

Just start writing and hit enter to go to the next paragraph. After that you can choose several frequently used block options (located in the right corner of the block)

How to add a new block
Adding a new block by clicking enter
Adding a new block in WordPress
Frequently used block options

3. By hiting ‘/’ on the keyboard.

You can get quick access to WordPress blocks by pressing the forward slash ‘/’ on your keyboard. If you press ‘/’ the list of blocks will immediately appear on your screen, but there is one condition you must be in the new line.

WordPress block editor
How to add a block – hitting the forward slash

But you can facilitate your work even more :).
Press ‘/’ and start typing the name of the block you want to insert, WordPress will automatically tell you the matching block names.

Let’s say you want to insert a gallery, so start typing: ‘/ g’ and WordPress will match the name you’re looking for already existing blocks.

How to add a block in WordPress block editor
Adding a block in WordPress

Nothing simpler, right?


So let’s get to see a list of all blocks that you can use in a blog post, I will discuss them in detail below.

Common Blocks:

Formatting:

Layout Elements:

Widgets:

  • Shortcode
  • Archives
  • Categories
  • Latest Comments
  • Latest Posts

Embeds:

Reusable:

4.1. The New Paragraph Block Settings

The New WP block editor - paragraph settings
The New WordPress block editor – Gutenberg content area paragraph settings

By inserting the paragraph block into the content of your post, take a look at the available functions. Some of them are the same as in the classic WordPress editor, while others add a new functionality.

The most interesting options are in the right sidebar. All block setting options will be displayed here. In the case of the paragraph block, you can change the size of the text, its color, background color, or even add a capital letter.
So many possibilities? wow 🙂

WordPress Block editor - block settings
Block settings in sidebar

The icons visible on the left side of each block allow to change the display order of individual blocks. Each block can be moved to any place in the post.

Paragraph settings in WP block editor
WordPress Block editor – content area

By clicking the first button from the left you can change block type. The paragraph block can be changed at any time into a header, quote or list. The next few icons are standart editing tools, such as right/left-aligned text, bold or italic.

Text block in WordPress block editor
Paragraph block in block editor – Gutenberg

The 3-dots (‘More options’) icon hides additional options like:  ‘Hide Block Settings’ – will hide the settings sidebar on the right, ‘Duplicate’ – copying block content, ‘Insert Befor/After’– insert a new block befor or after the current block, ‘Edit as HTML’– is used to writing in HTML code and ‘Remove Block’– removes the entire block.

WordPress Block editor paragraph block settings
WordPress Block editor – paragraph block

What else is important here? Block editor allows you to save the configuration of a given block so that you can use it repeatedly. It’s a great solution to make work easier. Use the ‘Add to Reusable Block’ option and save your block’s settings to use it again elsewhere in your post.

How to save block in WordPress Block editor - Gutenberg
Reusable Block in WordPress Block editor

# How to add Reusable Block in your blog post?

First, create your own custom block. Let it be, for example, a highlighted text that will catch the reader’s attention, such as above (dark background and large white letters). Add block by clicking the + icon, select Paragraph and write your text.

The new WP block editor
WordPress block editor – reusable block

Then change the settings of the block on the right. I added a capital letter, changed the background color to dark and text color to white. Now all you have to do is save the settings.

The new WP block editor - reusable block
WordPress Block Editor -highlighted_text

Click the ‘More options’ icon (the 3-dots icon) and select ‘Add Reusable Blocks’ from the list. Enter the name of your block, e.g. Black Highlighted Block and press save. In this way, your custom block has been saved and you can re-use it somewhere else in your post without having to change the settings again.

The New Paragraph Block Settings
The New Paragraph and Text Block Settings

To insert a Reusable Block, click ‘Add Block’ (the ‘+’ icon), select ‘Reusable Block’ and search for the name you gave your custom block.


<

p style=”text-align: center;”>REMEMBER
Each block can be a reusable block.


4.2. Headings Block Settings

To add a header in a block WordPress editor, simply add a header block. Click ‘+’ icon and add headline block by selecting ‘Heading’. You can also use the frequently used block options on the right side of the block by selecting ‘Add Heading’.

Headings in the new WordPress block editor
How to add headline

Another way to add a header is enter your text and then change the paragraph block to the header block. Click the icon on the left named ‘Change block type’ and select ‘Heading’.

Adding a heading in the new WordPress block editor
How to add headline in the block editor

You can also hit ‘/’ on your keyboard and start start typing: ‘/ he’ and WordPress will match the name you’re looking for already existing blocks.

How to add headline in WordPress
Start typing ‘/’ and the name of the block

4.3. List Block Settings

To add an ordered or unordered list in WordPress, you can do exactly the same as adding other blocks. All the ways how to add a block in WordPress can be found above in this article.

Or you can start typing the number 1. on your keyboard and the editor will start the ordered list.

Adding the list block
How to add the list block in WordPress

Using the icons you can always transform an ordered list into an unordered list and vice versa. The choice is yours.

By adding an ordered or unordered list in WordPress using blocks, select the List block.

Adding the list block
How to add the list block in WordPress

4.4. Quotes, Pullquotes, and Verses Block Settings

The quote and pullquote blocks allow you to highlight the quoted text. The Verse block distinguishes text built from lines and is great for haikus.

In this case, keep in mind that the concept of quotes, pullquotes and verses depends on the author of the theme. The author designing the theme determines the appearance of these elements.

This means that what you see in the WordPress panel by inserting quotes, pullquotes and verses can differ from what will appear on the page. This also may mean that some of the options available in the WordPress panel will not work on the site.

I think it’s nothing bad. Not every quotation or pullquote must have a dash on the side or on the top. It’s good that they look different on different pages. Let the author of the theme be creative.

Let’s see how it works on the example of our ‘BOYO’ free WordPress theme.

To add a Quote Block or Pullquote click ‘+’ icon, enter ‘/ q’ in the search field (or ‘/v’ if you looking for Verse) and select Quote or Pullquote (or Verse). Then enter the content and the author.

Quote Block in the new WordPress block editor
How to add Quote Block in WordPress

What you see on the WordPress panel screen looks something like this:

How to add Quote and Pullquote Block in WordPress
Quote and Pullquote Block in WP

And what you see on the site will look like this:

Quote and Pullquote Block in the Wp block editor
Quote and pullquote in the New WordPress block editor

In the Block Settings on the right, you will find options to change the appearance of these elements, like background color or display styles.


<

p style=”text-align: center;”>Remember
You can save your individual settings for each block by adding it to Reusable Blocks. How to save the block settings you will learn here.


4.5. Image Block Settings

Image Block and Gallery Block are already well known from the classic WordPress editor. They look similar also in the block editor.

Use the Image Block to insert an image. Choose an image from the media library or upload a file from your computer. Easy.

Adding an image to your post
Upload an image in the Block edtitor

Then adjust it using the settings (basic settings at the top of the block, like algin left, right and center or block settings on the right).

How to adjust an image in the Block editor
Where to find image block settings
Adding an image in Block editor
Image Blok settings sidebar

In the right sidebar ( in the Block Settings) you have more settings. Here you can find Image settings like: alternative text, image size, image dimensions and link settings.

All these settings were available in the classic editor but in the block editor they are not hidden, they are on hand, which makes work easier.

Yes, but these are not all settings that are important when adding an image. To optimize the image in WordPres you need to add Caption and Image Title. Where to find them if they are not in the image block settings on the right?

If you want to learn more about image optimization in WordPres read the article: Optimization of images in WordPress. How you should do it and why it is so important

To add a Caption or to change the Title of the image, click the Edit image icon (pencil icon above the image), make changes and then click Select or ‘x’.
You can also go to Media > Library, click on the image you are interested in, fill in the appropriate fields and leave the site by clicking ‘x’.

Where to find the Caption in WP block editor
How to edit an image in WordPress
Caption and image title in WordPress
Image settings in WordPress block editor

If you want to insert a gallery, use the Gallery Block.

Adding a gallery block
How to add gallery in WordPress block editor

Drag images, upload new ones or select files from your library and create a new gallery.

New gallery in the WorPress block editor
Create a new gallery

After creating the gallery, you can edit it:

  • delete the photo by clicking on the ‘x’ icon in the upper right corner of the image,
  • add a new image when you click ‘Add to Gallery’,
  • delete the gallery by clicking ‘Cancel Gallery’,
  • by clicking on the image you can also change Caption, Alt text and Title.

Finally, press ‘Insert gallery’ button to insert it into the post.

The new WordPress block editor - gallery
Adding a new gallery in WordPress

Thanks to Gallery Settings on the right you can add a link or choose how the images are displayed (number of columns).

Gallery Block Settings in WP
Gallery settings in WordPress

4.7. Cover Block Settings

The total novelty are two more blocks, namely Cover and Media & Text block.
The Cover Block gives you the option to add a text on the background of the image. This is a fairly well-known and commonly used option to highlight content. Hence, in my opinion, a big plus for this supplement.

The new WordPress block editor - cover image
Cover image in WordPress

4.8. Media & Text Block Settings

As I have mentioned, the next new feature is Media & Text block. It allows you to add text and photos side by side, with the possibility of freely changing the width of these areas.

It is very easy. Click the mouse on the image and a dot appears in the center of the block. You can move it left or right by enlarging or reducing a specific area.

Media & Text Block in WordPress block editor
Media & Text Block

Media & Text block gives you the option to change the settings of its elements. You can change the background color, add a capital letter, change the font size, etc.

All functions can be found in the block settings on the right.
By clicking on the image you will see media & text settings, and clicking on the text (which is an ordinary paragraph block) – you will see text settings.

Media & Text Settings in WordPress
Media & Text Settings in WordPress

4.9. Insert Audio, Video, File & other Embeds

To insert audio, video etc. simply copy the URL and paste it into the editor. WordPress will automatically convert it to the embed block.

The new WordPress block editor - embeds
Embeds blocks in the new WordPress block editor

To see all available block settings, you have to click the mouse on the block area.

Audio in block editor
To insert Audio just paste the URL in to the new editor

You can also add a block by clicking ‘+’ Add Block > Embeds and choose from the long list what you want to insert and then paste the URL. The new WordPress block editor has a lot of different Embed blocks.

How to insert embeds in the new WordPress block editor

If you want to insert audio or video that is not already on the network (the file has no URL) go to ‘+’ Add block > Common Blocks > select Audio, Video or File and upload your file.

Common Block in WordPress
Common Blocks – How to insert Audio / Video or File block
How to insert Audio / Video or File in WP
Upload the media file in WordPress

4.10. Columns Block

Columns are another cool thing. Finally, you can easily insert text and any other available block in columns. In my opinion, this is a great solution. To add columns, enter ‘+’ Add block > Layout Elements > Columns. Now you can place other blocks in the new area, with the difference that they will be arranged in columns (the blocks in the block will be created).

Columns Block in WordPress
Columns in The new WP block editor

Individual blocks can be moved and edited just as you always have.

4.11. Button Block

Finally, you can insert a button in the body of your post, without the need to use any page builders and overloading the page.
In the new WordPress block editor, you can easily place the button anywhere on the page. And what’s more, you can stylize it the way you want.

Not only that, if the choice of colors will be bad for the visually impaired WordPress will inform you about this, recommending a change of color or its dimming. Fantastic!!

You can find the Button Block in the Layout Elements section.

How to add button in the Block editor
Button Block in WordPress

4.12. Table Block

The ability to insert tables is already standard in WordPress, both in the old – classic editor and in the new block editor.
The appearance of the tables depends on the template’s author. He designs their appearance.

Therefore, it is worth remembering that in the case of free themes available at wordpress.org, contact with the author is welcome. If you have any questions, suggestions for changes or suggestions for additions, please let the author know. Maybe it will introduce the changes you are asking for and will improve the product.

To add a table, in the new line write a forward slash ‘/’ and start write the name of the block or just enter ‘+’ Add Block > Formatting> Table

WordPress block editor - adding a block
How to add a block
Block editor in WordPress adding a table
How to add a table in the block editor

Then select the number of columns and rows (do not worry, you can always add or remove it later), click ‘Create’ button, fill in the fields and it’s ready. Easy…:). WordPress gives various table setting options on the page. These functions must also be adapted by the theme’s author to work properly.

How to add a table in WP block editor
Table settings in WordPress

In Block Options Settings on the right the only option of ‘Fixed width table cells’ is visible. It limits the width of all table cells. Selecting this option allows table cells to have an equal width.

To delete or add a row or column, click on the icon and select one of the options.

How to add tabe in WP
How to add or delete row or column in block editor

# Moving multiple blocks at the same time

You can move individual blocks or even many blocks at the same time using the arrows on the left side of the block.
To move a group of blocks you must select them with the mouse. First click on the block (first or last in the group), then click again and hold the left mouse button and move it along the blocks you want to select. Use the arrows on the left to move the group.

https://blogonyourown.com/wp-content/uploads/2018/12/block_editor_multiple_blocks.jpg
How to move multiple blocks in WordPress

Is it worth using the new WordPress block editor – Gutenberg?

My answer is: yes, yes, yes.

If you are just starting your adventure with WordPress, it’s great because you’ve come to the moment when the WordPress editor is finally user-friendly. Clean, transparent simply wow.

If you’re already blogging and using a simple template, not stuffed with additional functions, also a new block editor should not cause you trouble on the site. Using it, you’ll get even a few extra things that your theme may not have supported earlier.

However, there is one big ‘but’ that explains so many bad comments. If your site is stuffed, loaded with extras, shortcodes, drag and drop builders. If the theme you use in any way changes the current, classic WordPress editor (adds new elements, custom fields, meta boxes etc.) then the new block editor may not work properly, even more it may cause problems on the page.

In this case, be sure to install the Classic Editor plugin that will restore the previous (“classic”) WordPress editor and the “Edit Post” screen, and hide all the functions available in the new block editor (“Gutenberg”).

Before you update the page to the latest version of WordPress, ask the author of the theme (this also applies to plugins) if his product is compatible with the new WordPress block editor.

Maybe someday the author of your theme will modify it so that you can use the new block editor and appreciate its advantages. Maybe you will change the theme one day to feel the taste of what “Gutenberg” offers.

Leave a Reply

Your email address will not be published. Required fields are marked *