WordPress For Non-Techies: Free WordPress Tutorials – WPCompendium.org

WordPress Gutenberg Content Editor – How To Use Blocks

WordPress Gutenberg Content Editor – How To Use Blocks

This 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’.

(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:

(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).

(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 Are 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)

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

Additionally:

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 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:

(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:

(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:

(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:

(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:

(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:

(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:

(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:

(Remove Block)

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

(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)

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

(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)

You can reorder, rearrange, or reposition blocks using ‘move up’ or ‘move 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’)

(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 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

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 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)

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)

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)

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)

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)

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)

How To Use Reusable Blocks

Reusable Blocks:

(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)

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)

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)

Block Groups

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

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:

Paragraph Block

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

Image Block

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

Heading Block

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

List Block

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

Gallery Block

The Gallery Block lets you display multiple images in a rich gallery ...
Read More

Quote Block

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

Audio Block

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

Cover Block

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

File Block

The File Block lets you add a link to a downloadable file ...
Read More

Video Block

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

Code Block

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

Classic Block

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

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

Preformatted Block

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

Pullquote Block

The Pullquote Block lets you emphasize text quotes with colors and styles ...
Read More

Table Block

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

Verse Block

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

Columns Block

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

More Block

The More Block lets you set an excerpt or teaser for your content with a link that users can click ...
Read More

Media & Text Block

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

Button Block

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

Page Break Block

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

Separator Block

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

Spacer Block

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

Categories Block

The Categories Block displays a list of all your categories ...
Read More

Latest Comments Block

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

Shortcode Block

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

Archives Block

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

Latest Posts Block

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

Embed Block

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

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:

***

"I have used the tutorials to teach all of my clients and it has probably never been so easy for everyone to learn WordPress ... Now I don't need to buy all these very expensive video courses that often don't deliver what they promise." - Stefan Wendt, Internet Marketing Success Group