WordPress Gutenberg Content Editor – How To Use Blocks

New to WordPress? Learn what ‘blocks’ are, how to use blocks in the WordPress Gutenberg content editor and what blocks are available to WordPress users …

WordPress Gutenberg Content Editor – How To Use Blocks

WordPress Gutenberg - The Ultimate Guide For Non-Technical WordPress UsersThis tutorial is part of our WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users series.

***

On December 6, 2018, WordPress announced the release of WordPress version 5.0.

WordPress 5.0 introduced a new content editor called Gutenberg (named after Johannes Gutenberg, who invented the printing press over 500 years ago).

Gutenberg simplifies the content creation and editing process using ‘blocks’.

Add Block

(Gutenberg – The new block-based content editor)

Blocks let you add different types of content (e.g. paragraphs, images, quotes, multimedia, etc.) into your posts and pages and rearrange your post/page layouts using features like:

  • ‘Point and click’ (e.g. move your cursor over an item and click to select it or add an element to your page).
  • ‘Drag and drop’ (e.g. rearrange your page layout).
  • Resizing handles (e.g. for resizing images).
  • Drop-down menus (e.g. select one of several options to configure a setting).
  • Incremental Sliders (e.g. slide right or left to increase or decrease values, adjust widths, etc.)
  • Value fields (e.g. enter a number of items to display for an element).
  • Up and down arrows (e.g. move content sections up and down the page).

(Blocks let you build pages to look the way you want them to!)

The new Gutenberg block-based editor introduces a different way to add, edit and display content on your site than the previous content editor (i.e. the WordPress ‘Classic’ Editor).

WordPress 'Classic' Content Editor - pre WordPress 5.0

(Pre-WordPress 5.0 content editor – WordPress ‘Classic’ Editor)

The Gutenberg editor not only provides greater flexibility and a streamlined editing experience across your site, it is also part of WordPress’ aim to revolutionize the publishing experience by bringing WordPress into line with modern website building trends, methods, and principles allowing websites, applications, page layouts and web content to be easily assembled with no coding skills required.

(Insert block)

In this section, we explain:

  • What ‘blocks’ are.
  • How to use Gutenberg’s content editor blocks
  • What default blocks WordPress makes available to users installing WordPress 5.0.

What Are Blocks?

Build content in WordPress using 'Blocks'

(Build content in WordPress using ‘Blocks’)

Think of ‘blocks’ as being the smallest units you can use to build something or get something done on your site. It could be adding a paragraph of text, a layout or media element, or some type of functionality.

Imagine too, that no matter how different the block’s purpose may be, they can all fit together seamlessly, allowing you to create and add new blocks and combine these (just like ‘Lego’ blocks) to build complex pages with sophisticated layouts and modular functionality.

Now … imagine that these blocks can extend beyond not only helping you to create content, but also add new types of plug’n’play functionality to your site and combine the power of plugins, widgets, and shortcodes into something that you can add anywhere in your site at any time with the click of a button … without requiring any coding skills.

One of the main advantages of having a content editor that uses ‘blocks,’ then, is that it opens up many possibilities for future development, especially as it allows third-party developers to create new block types, which will integrate seamlessly with what you have already built, giving you the power to take your digital presence to a whole new level without having to start from scratch whenever changes are required.

WordPress Gutenberg: A Block-Based Content Editor

(Gutenberg – The new block-based content editor)

The new block-based content editor is a radical departure from the previous content editor (referred to now as the WordPress ‘Classic’ editor).

According to the WordPress  version release notes, the changes are aimed at helping WordPress simplify the process, not the outcome.

Working With Blocks

With the Gutenberg editor, all content is added to posts and pages using ‘blocks’.

'Add Block' tool - Editing Toolbar

(‘Add Block’ tool – Editing Toolbar)

The ‘Add Block’ tool contains a ‘Search’ field and several menu sections:

  • Most Used
  • Common Blocks
  • Formatting
  • Layout Elements
  • Widgets
  • Embeds

Additionally:

  • Inline Elements – This menu displays if you click inside a block before selecting the ‘Add Block’ tool.
  • Reusable BlocksNote: At least one Reusable Block must be created for this section to display in the ‘Add Block’ tool’s menu section.

Important

To learn more about the block types found in each of these sections, see the links provided at the end of this tutorial.

Block Editors

Depending on the type of block added to your post or page, blocks will have their own ‘Block Editor’ with various settings and options you can configure to further customize or format the content or function of the block.

For example, below is a screenshot of the Block Editor of a Paragraph Block …

Block Editor - Paragraph Block

(Block Editor – Paragraph Block)

Block Editor Settings

Every block type has its own settings and options. To learn more about each block type, see the links to different block types at the end of this tutorial.

Block Editor Settings – More Options

A common element of block editors is the ‘More Options’ section, which includes the following standard settings:

  • Hide Block Settings
  • Duplicate
  • Insert Before
  • Insert After
  • Edit as HTML
  • Add to Reusable Blocks
  • Remove Block

Block Editor - More Options

(Block Editor – More Options)

Hide Block Settings

Hiding block settings lets you work on your content free of distractions (i.e. (‘Distraction-Free’ Mode).

To hide block settings:

  • Click anywhere inside the block to view the Block Editor.
  • Select the ‘More Options’ menu
  • Click ‘Hide Block Settings’ to hide the ‘Settings’ sidebar from view.
  • Click ‘Show Block Settings’ to display the ‘Settings’ sidebar on your content editor again.

Hide Block Settings

(Hide Block Settings)

Duplicate

This setting lets you create and add an identical copy (i.e. a clone) of any selected block into your content.

To duplicate a block:

  • Click anywhere inside the block to view the Block Editor.
  • Select the ‘More Options’ menu.
  • Click ‘Duplicate’.
  • Edit and/or reposition the duplicated block if required.
  • Save your post or page to update your content.

Duplicate

(Duplicate)

Insert Before

This setting lets you insert a new block into your content above the block you are currently working on.

To insert a block above your selected block:

  • Select the block where a new block will be inserted before it.
  • Click anywhere inside the block to view the Block Editor.
  • Select the ‘More Options’ menu.
  • Click ‘Insert Before’.
  • A new block ‘placeholder’ will be inserted above your selected block.
  • Use the ‘Add Block’ tool to select the type of block you want added into the new block placeholder.
  • Save your post or page to update your content.

Insert Before

(Insert Before)

Insert After

This setting lets you insert a new block into your content below the block you are currently working on.

To insert a block below your selected block:

  • Select the block where a new block will be inserted after it.
  • Click anywhere inside the block to view the Block Editor.
  • Select the ‘More Options’ menu.
  • Click ‘Insert After’.
  • A new block ‘placeholder’ will be inserted below your selected block.
  • Use the ‘Add Block’ tool to select the type of block you want added into the new block placeholder.
  • Save your post or page to update your content.

Insert After

(Insert After)

Edit as HTML

Normally, you view, edit, and format your content using a visual editor. This setting lets you view and edit the block’s HTML code.

To view and edit the block’s HTML code:

  • Click anywhere inside the block to view the Block Editor.
  • Select the ‘More Options’ menu.
  • Click ‘Edit as HTML’.
  • The block content will switch to the HTML editor.
  • To return to the visual editor, select the ‘More Options’ menu again and click on ‘Edit visually’.
  • Save your post or page to update your content.

Edit As HTML

(Edit As HTML)

Add to Reusable Blocks

This setting lets you store a customized block that can be reused anywhere you like on your site.

To save your reusable block:

  • Click anywhere inside the block to view the Block Editor.
  • Select the ‘More Options’ menu.
  • Click ‘Add to Reusable Blocks’.
  • Your block will be stored in the WordPress ‘Blocks’ library.

Add to Reusable Blocks

(Add to Reusable Blocks)

For more details on creating, editing, using, and managing Reusable Blocks, see the tutorial below:

Remove Block

This setting lets you remove a block from a post or page and delete content that you no longer need.

To remove a block from your post or page:

  • Select the block you want to remove.
  • Click anywhere inside the block to view the Block Editor.
  • Select the ‘More Options’ menu.
  • Click ‘Remove Block’.
  • Your block will be deleted from your post or page.
  • Save your post or page to update your content.

Remove Block

(Remove Block)

To hide the ‘More Options’ menu, click on the menu icon …

Hide options

(Hide options)

How To Add New Blocks To Content

Blocks can be added anywhere on the page with the click of a button, inserted before or after other blocks using dropdown menus, converted into different block types, and easily reordered using ‘drag and drop’, or ‘up and down’ buttons.

You can add blocks to content in several different ways.

For example, you can add blocks:

  1. From the ‘Add Block’ tool in the Editing Toolbar
  2. From the ‘Add Block’ tool in the Content Area
  3. From inside an existing block.
  4. From your ‘Reusable Blocks’ library.

Add Block Tool – Editing Toolbar

Click on the ‘Add Block’ (+) tool to bring up a list of all the available blocks that you can use …

'Add Block' tool - Editing Toolbar

(‘Add Block’ tool – Editing Toolbar)

Select (or search and select) a block from one of the ‘Add Block’ menu sections …

Select a block from the 'Add Block' menu

(Select a block from the ‘Add Block’ menu)

The block you have selected will be inserted below your existing content …

Block added below existing content

(Block added below existing content)

You can reorder, rearrange, or reposition blocks using ‘move up’ or ‘move down’ arrows …

Reorder blocks using 'up' and 'down' arrows

(Reorder blocks using ‘move up’ and ‘move down’ arrows)

You can also place the block wherever you like by dragging and dropping blocks to rearrange your content layout …

Rearrange blocks using 'drag and drop'

(Rearrange blocks using ‘drag and drop’)

Rearranging blocks

(Rearranging blocks)

Add Block Tool – Content Area

You can also add new blocks to your content by hovering your mouse in the area below your existing content and clicking on the ‘Add Block’ icon …

'Add Block' Tool - Content Area

(‘Add Block’ Tool – Content Area)

Add Block From Within An Existing Block

You can add blocks from within existing blocks in one of the following ways:

  • Add a block from the ‘Add Block’ tool in the block editor
  • Add a block from the ‘More Options’ menu
Add A Block From The ‘Add Block’ Tool In The Block Editor

To add a new block to your content using this method:

  1. Hover your cursor over an existing block
  2. Click on the ‘Add Block’ tool icon (+)
  3. Select an available block from one of the tool’s menu sections …

Add blocks from within other blocks

(Add blocks from within other blocks)

Add A Block From The ‘More Options’ Menu

To add a new block to your content using this method:

  1. Click inside an existing block
  2. Click on the ‘More Options’ menu
  3. Select where to add the block (e.g. insert before or after existing block)
  4. After a new block placeholder has been inserted into the content, you can then select a new block from one of the various ‘Add Block’ locations available (see below) …

Add A Block From The 'More Options' Menu

(Add A Block From The ‘More Options’ Menu)

How To Change Block Types

Depending on which type of block you are using, you can convert blocks into other block types as follows:

  1. Click inside the block
  2. Select the ‘Change block type’ tool
  3.  Select one of the available blocks in the ‘Transform To:’ menu
  4. Your block will be automatically changed to the new block type selected

Change Block Types

(Change Block Types)

Important

See further below for information about individual block types and what types of blocks these can be changed into.

How To Duplicate Blocks

To duplicate a block:

  1. Click inside the block you want to duplicate
  2. Click on the ‘More Options’ menu
  3. Select ‘Duplicate’ to duplicate the selected block …

Duplicate Block

(Duplicate Block)

How To Delete Blocks

To delete a block:

  1. Click inside the block you want to delete
  2. Click on the ‘More Options’ menu
  3. Select ‘Remove Block’ to delete the selected block …

Delete Block

(Delete Block)

Important

If you have empty blocks, you can ignore these (they won’t show up on your published posts or pages) or delete them …

Empty blocks

(Empty blocks)

To remove an empty block:

  1. Click inside the empty block you want to delete
  2. If you’re deleting a ‘Paragraph’ block and can’t see the ‘More Options’ menu to access the ‘Remove Block’ option, type a few characters into the box. This will make the ‘More Options’ menu visible.
  3. Click on the ‘More Options’ menu
  4. Select ‘Remove Block’ to delete the selected block …

Delete empty blocks

(Delete empty blocks)

How To Use Reusable Blocks

Reusable Blocks

Reusable Blocks:

  • Let you store and reuse content blocks across your site.
  • Can be shared with other contributors to reuse across your site.
  • Automatically update everywhere on your site when you make changes to the block.
  • Can be converted into regular blocks to prevent global changes from being applied throughout your site.

Reusable Block

(Reusable Block)

To learn how to create, edit, use, and manage Reusable Blocks, see the tutorial below:

WordPress Gutenberg Blocks

The WordPress Gutenberg editor includes many useful default blocks …

WordPress Gutenberg Content Editor - Blocks

(WordPress Gutenberg Content Editor – Blocks)

More block-enabled plugins are being developed by the WordPress community to help you extend and expand the functionality of the Gutenberg content editor …

Block-Enabled WordPress Plugins

(Block-Enabled WordPress Plugins)

Search the WordPress plugins library from your dashboard for new block-enabled plugins that will help you enhance and extend your content.

Use block-enabled plugins

(Use block-enabled plugins)

Block Groups

The ‘Add Block’ tool contains a ‘Search’ field and is divided into the following sections:

  • Most Used
  • Common Blocks
  • Formatting
  • Layout Elements
  • Widgets
  • Embeds
  • Reusable (only displays when a reusable block is created)

All Blocks

The section below contains a list of all default blocks. Click on an item to learn about its function, properties, and how to use it:

WordPress Gutenberg - Paragraph Block

Paragraph Block

The Paragraph Block lets you add a single paragraph of content to your post or page and is the most ...
Read More
WordPress Gutenberg - Image Block

Image Block

The Image Block lets you insert an image into your WordPress site ...
Read More
WordPress Gutenberg - Heading Block

Heading Block

The Heading Block lets you introduce new sections and organize content to help visitors (and search engines) understand your content ...
Read More
WordPress Gutenberg - List Block

List Block

The List Block lets you create and add a bulleted or numbered list ...
Read More
WordPress Gutenberg - Gallery Block

Gallery Block

The Gallery Block lets you display multiple images in a rich gallery ...
Read More
WordPress Gutenberg - Quote Block

Quote Block

The Quote Block lets you add visual emphasis to your content with quoted text ...
Read More
WordPress Gutenberg - Audio Block

Audio Block

The Audio Block lets you add audio files to WordPress via a simple audio player ...
Read More
WordPress Gutenberg - Cover Block

Cover Block

The Cover Block lets you add an image or video cover with a text overlay to WordPress ...
Read More
WordPress Gutenberg - File Block

File Block

The File Block lets you add a link to a downloadable file ...
Read More
WordPress Gutenberg - Video Block

Video Block

The Video Block lets you upload and embed a video on your site from your media library or external URL ...
Read More
WordPress Gutenberg - Code Block

Code Block

Use the Code Block to display code and code snippets on your site that respect your spacing and tabs ...
Read More
WordPress Gutenberg - Classic Block

Classic Block

The Classic Block lets you add content to your posts and pages using the WordPress Classic Editor ...
Read More
WordPress Gutenberg - Custom HTML Block

Custom HTML Block

The Custom HTML Block lets you add custom HTML code to your WordPress site and preview it as you edit ...
Read More
WordPress Gutenberg - Preformatted Block

Preformatted Block

The Preformatted Block lets you add text with spacing, tabs, and styling ...
Read More
WordPress Gutenberg - Pullquote Block

Pullquote Block

The Pullquote Block lets you emphasize text quotes with colors and styles ...
Read More
WordPress Gutenberg - Table Block

Table Block

The Table Block lets you add a table to WordPress with columns and rows to display data in tabular form ...
Read More
WordPress Gutenberg - Verse Block

Verse Block

The Verse Block lets you add poems, verses, song lyrics, etc. to your content with special spacing formats ...
Read More
WordPress Gutenberg - Columns Block

Columns Block

Use the Columns Block to add columns to WordPress and insert text-based content into your columns ...
Read More
WordPress Gutenberg - More Block

More Block

The More Block lets you set an excerpt or teaser for your content with a link that users can click ...
Read More
WordPress Gutenberg - Media & Text Block

Media & Text Block

The Media & Text Block lets you set media and text side-by-side for a richer content layout ...
Read More
WordPress Gutenberg - Button Block

Button Block

The Button Block lets you add a custom button to prompt users and visitors to take a desired action ...
Read More
WordPress Gutenberg - Page Break Block

Page Break Block

The Page Break Block lets you split your content into smaller sections with multiple pages ...
Read More
WordPress Gutenberg - Separator Block

Separator Block

The Separator Block lets you break your content sections with a horizontal separator ...
Read More
WordPress Gutenberg - Spacer Block

Spacer Block

The Spacer Block lets you add white space between blocks and customize its height ...
Read More
WordPress Gutenberg - Categories Block

Categories Block

The Categories Block displays a list of all your categories ...
Read More
WordPress Gutenberg - Latest Comments Block

Latest Comments Block

The Latest Comments Block displays a list of your site's most recent comments ...
Read More
WordPress Gutenberg - Shortcode Block

Shortcode Block

The Shortcode Block lets you insert custom elements into WordPress using shortcodes ...
Read More
WordPress Gutenberg - Archives Block

Archives Block

The Archives Block lets you insert an Archives widget into your content to display a monthly archive of your posts ...
Read More
WordPress Gutenberg - Latest Posts Block

Latest Posts Block

The Latest Posts Block displays a list of your site's most recent posts ...
Read More
WordPress Gutenberg - Embed Block

Embed Block

The Embed Block lets you embed videos, images, tweets, audio, and other content from external sources ...
Read More
Reusable Blocks

Reusable Blocks

Learn how to create and use Reusable Blocks for the WordPress Gutenberg content editor ...
Read More

Blocks By Category

The section below lists WordPress Gutenberg blocks by category.

Common Blocks

Formatting Blocks

Layout Element Blocks

Widget Blocks

Embed Blocks

Blocks By Functionality

The section below lists WordPress Gutenberg blocks by functionality.

Text Blocks

Media Blocks

Quote Blocks

Code Blocks

Layout Blocks

***

For more tutorials on using the Gutenberg content editor, go here:

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"Learning WordPress has been a huge stumbling block for me. I've been looking for something that covers absolutely everything but doesn't cost an arm and a leg. Thank you so much ... you have just provided me with what I have been looking for! Truly appreciated!" - Tanya

Originally published as WordPress Gutenberg Content Editor – How To Use Blocks.