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

WordPress Gutenberg Content Editor – How To Use Blocks

For a white label version of this tutorial visit WPTrainingManual.com.

WordPress Block Editor – How To Use Blocks

WordPress Block Editor – How To Use Blocks

This tutorial is part of our series on How To Use The WordPress Block Editor (Gutenberg).

In this tutorial, you will learn what Blocks are and how to work with blocks when creating or editing content.

Links to detailed tutorials on how to use many default WordPress content editor blocks are provided at the end of this tutorial.

For a complete understanding of how to use the WordPress Block Editor, see these tutorials:

WordPress Gutenberg: A Block-Based Content Editor

As mentioned in our overview of the WordPress Block Editor, WordPress 5.0 introduced a new content editor called Gutenberg (named after Johannes Gutenberg, who invented the printing press over 500 years ago).

The Gutenberg editor (now referred to simply as the Block Editor) aims to simplify the content creation and content editing process in WordPress using ‘blocks’.

The WordPress Block editor includes many default blocks.

WordPress Block Editor – What Are ‘Blocks’?

Think of ‘blocks’ as being the smallest units or modules you can use on your site to build something or get something done.

This could be adding a paragraph of text, a layout or media element, or some other functionality.

Imagine too, that no matter how different each block’s purpose may be, they all fit and work together seamlessly (like ‘Lego’ blocks).

By combining different blocks, you can build complex web pages with sophisticated layouts and modular functionality.

WordPress, however, aims to extend the functionality of blocks beyond just creating content pages on your site.

Imagine turning your entire web presence into a giant Plug’n’Play site where you can combine content blocks with block-based plugins, widgets, themes, third-party apps, and integrations, etc. and add these seamlessly anywhere to your site at any time with just the click of a button and without requiring any coding skills.

One of the main advantages of switching to a block-based content editor is that it opens your website up to many possibilities for simplified future development.

For example, WordPress’s block-based environment allows third-party developers to create new block types that can integrate seamlessly with your existing website, giving you the power to add a whole new level of functionality to your web presence without having to start from scratch or make major changes to what you have already built.

Focusing back on the 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:

WordPress has published a great video introduction to publishing content with the block editor. To watch this video, go here:

Intro to Publishing with the Block Editor

Working With Blocks

As mentioned earlier, with the Gutenberg editor, adding content to posts and pages is all done using ‘blocks’.

Just some of the blocks you can use to create posts and pages on your site.

The Block Editor contains tools that let you select and insert different blocks into your content.

Let’s go through these tools:

Block Inserter Tool

The Block Inserter tool (Add Block) can be accessed from the Editing Toolbar, or inside the Content Area.

The Add Block tool is the button with the [+] sign. It is the second button on the top left side of the Editing Toolbar.

Use the Add Block tool to view and insert blocks into your posts and pages.

You can also access the Add Block tool inside the content area by clicking above or below an existing block.

Add Blocks inside the content area.

The ‘Add Block’ tool is divided into the following tabbed sections:

Additionally, the Blocks menu contains a ‘Search’ field and different menu sections:

To insert a block into the content editor, either search for the block inside the ‘Add Block’ tool and then click on the block or scroll down the list and click on the block. If you’re not sure what a particular block does, hover over it and a description will pop up.

Search and add blocks to your content using the Add Block tool.

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

Block Directory

Just like plugins and themes, you can also add blocks to endlessly extend your site’s functionality.

This is where the Block Directory comes in handy.

After the block editor became the new default WordPress editor, WordPress made the creation of a Block Directory one of its next priority projects.

While the default block editor includes a sizeable number of useful blocks already, the Block Directory allows web and plugin developers to create and add new types of blocks with specific types of functionality to the Block editor. It also allows users to discover, test, and install new blocks for their website without leaving the editor, as the Block Directory is built right into the block editor.

You can install blocks from the built-in Block Directory into your site using the Add Block tool. Just search for a specific functionality you would like to add to your content and a list of blocks matching your search will display inside the menu.

Note: The block directory is only available to users that have the capabilities to install and activate plugins on their site.

To download and install these custom blocks, click on the Add block button.

Add new blocks to your content from the Add Block tool using the built-in Block Directory.

You can also access the Block Directory while working inside the content area by selecting the Block Inserter tool and clicking on the Browse all link.

Click on the Add Block tool’s Browse All link inside the content area to access a list of blocks from the Block Directory.

The WordPress team has put together a great video that explains how the Block Directory works. Visit the page below to learn more about using the WordPress Block Directory:

Intro to the Block Directory

Block Patterns

Block Patterns are predefined block layouts (groups of blocks) that you can insert into your posts and pages and then tweak and customize to suit your needs.

Block patterns allow web designers to create complex, beautiful, and stylized layouts using combinations of text and media blocks that you can then instantly add to you enhance the look and feel of your content without having to design or create these yourself.

Block patterns can be found in a wide variety of plugins and themes, with more patterns being constantly added as WordPress evolves.

Like Blocks, you can select and add patterns into your content from the Inserter tool.

Create complex content layouts using Block Patterns.

Just select and click on a Pattern and it will be automatically added to your content.

Click on a Pattern to insert it into your content.

You can then easily tweak and customize the block elements inside the Block Pattern to suit your needs.

Block Patterns can be easily tweaked and edited to suit your needs.

The WordPress team has also put together a video explaining how Block Patterns work. Visit the page below to learn more about using Patterns in the Block Editor:

Intro to Block Patterns

Block Editors

Depending on the type of block you add to your post or page, you will see that each block has its own Block Editor with a menu of options that let you change things like format, add or remove links, replace color, change the alignment of elements, etc.

These appear when you click inside the block.

For example, here is the Block Editor of a Paragraph Block …

Block Editor – Paragraph Block

Each block also has its own set of controls that will display in the Settings section when you select the block.

Some blocks let you adjust various settings and some blocks have few or no settings.

You can show or hide these settings from the Block Editor’s More Options menu. Click the three dots (vertical ellipsis) to reveal additional settings in your Block Editor.

Each block type has its own set of controls with additional options and settings.

For a great overview of how Block settings work in the WordPress Block Editor and how to adjust these, see the video below:

For in-depth tutorials about using different types of blocks, see the links at the end of this tutorial.

Block Editor Settings

As mentioned in the previous section, every block type has its own set of controls with additional settings and options.

All block types, however, follow a similar build structure.

Some of the universal elements you will find in most Block Editors include features that let you:

Moving Blocks

You can easily reorder, rearrange, or reposition blocks in your content using ‘move up’ and ‘move down’ arrows in the Block Editor.

Reorder blocks on your post or page using the up and down arrows.

You can also place blocks wherever you like and rearrange the layout of your content in your post or page using drag and drop.

Rearrange blocks on your page using drag and drop.

Additionally, you can move blocks using the Move To function in the More Options menu (this is explained further below).

Moving blocks is covered in more detail in our tutorial on how to use the Block Editor’s Content Area.

Change Block Type Or Style

Some blocks allow you to easily change or substitute the block type or style.

This feature is useful for converting content from one type into another without having to insert a new block and transfer its content over.

For example, here are the options available for changing a Paragraph Block into another type of block (e.g. a Quote block or Verse block)…

You can easily change some blocks into other types of blocks.

Block Editor Settings – More Options

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

To display the ‘More Options’ menu, click on the three dots (vertical ellipsis) on the Block Editor menu.

WordPress Block Editor – More Options Menu.

Let’s go through each of these settings.

Once you’re familiar with the settings below, you can save time accessing these features using Keyboard Shortcuts.

Show/Hide Block Settings

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

More Options – Show/Hide Block Settings

To hide block settings:

Use this function to show or hide your block settings.

Copy

This function copies all the content inside your selected block to your clipboard (e.g. text, images, etc.) and preserves all of its formatting tags.

This function is useful if you would like to copy and paste the content from a block into a different post or page.

More Options – Copy setting.

Note: if you plan to reuse the same block content often, you can also turn the block into a Reusable block – see further below for more details.

To copy content from a block to your clipboard:

Use this function to copy content from a selected block to your clipboard.

Duplicate

This setting lets you save time recreating an existing block. Use the Duplicate setting to create and add an identical copy (i.e. a clone) of any selected block into your content, then tweak the content on your duplicated block to suit your needs.

More Options – Duplicate setting.

To duplicate a block:

Use this function to duplicate a block.

Insert Before

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

More Options – Insert Before setting.

To insert a block above your selected block:

Use this function to insert a block before a selected block.

Insert After

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

More Options – Insert After setting.

To insert a block below your selected block:

Use this function to insert a block after a selected block.
Move To

This function lets you reposition a block on your post or page using your keyboard instead of clicking on the Block Editor’s Move Up and Down arrows or using the drag and drop handle.

More Options – Move To setting.

To move a block:

Use this function to move your selected block to a different location in your content.
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 underlying HTML code.

More Options – Edit as HTML setting.

To view and edit a block’s HTML code:

Use this function to view and edit the HTML code of your block.
Add to Reusable Blocks

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

More Options – Add to Reusable blocks setting.

To save a block as a reusable block:

Use this function to add a selected block to your site’s Reusable block library.

Note: Reusable blocks are global. This means that any edits you make to a reusable block will be applied to every instance of that repeatable block used on your site.

To learn more about creating, editing, using, and managing reusable blocks, see this tutorial: Reusable Blocks

Group

This setting lets you group different blocks together.

More Options – Group setting

To group blocks together:

Use this function to group blocks together.

Note: You cannot move other blocks on your post or page (eg using the ‘Move to’ function) between grouped blocks.

Remove Block

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

More Options – Remove block setting.

To remove a block from your post or page:

This function lets you remove a block.

To hide the ‘More Options’ menu, click on the three dots (vertical ellipsis) on the Block Editor menu.

Click on the three dots (vertical ellipsis) to hide the More Options menu.

How To Add 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.

To learn how to add blocks to your posts and pages, see this tutorial: The WordPress Block Editor Content Area

Creating content for posts and pages using the WordPress Block Editor works the same way regardless of what type of site you have (e.g. a blog, company website, eCommerce site, etc.).

Because blocks are designed to allow your website to integrate with all kinds of new and external applications, how your content will look after publishing your posts or pages depends on various factors like:

WordPress Gutenberg Blocks

The WordPress block editor includes many useful default blocks.

Some default WordPress blocks.

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

WordPress Plugin directory – Block-Enabled Plugins. (Source: https://wordpress.org/plugins)

If you click on ‘See all’ in the Block-Enabled Plugins section, you can browse many plugins that offer blocks for the block-based editor to help enhance and extend your content.

Browse Block-enabled plugins in the WordPress plugin directory.

Additionally, you can search the WordPress plugins library from your dashboard for new block-enabled plugins (Plugins > Add Plugins).

Search for block-enabled plugins in the Add Plugins screen.

WordPress Block Editor – Blocks

Clicking on the ‘Add Block’ tool in the WordPress Block Editing Toolbar brings up a list of Blocks.

Choose blocks from this list.

This tool contains a ‘Search’ field and tabbed sections for Blocks, Patterns, and your Reusable Blocks library (you need to create at least one reusable block for this tab to display).

The Block List is divided into the following sections:

See Your Most Used Blocks

If you use the same blocks often, you can display your most commonly used blocks at the top of your block list.

Most Used Blocks category.

To enable the most used blocks category, do the following:

Click the icon with the three dots (vertical ellipsis) in the top right-hand corner of the editor screen to access the ‘More tools & options’ section.

Click on More tools & options…

Click on Preferences.

Select Preferences…

In the Preferences > General section, check the box next to Show most used blocks.

Check the box.

The ‘Most Used’ blocks category will now display at the top of your list of Blocks.

The Most Used blocks category now displays in the list of Blocks.

Default WordPress Editor Blocks – Tutorials

For detailed tutorials on using the WordPress Block Editor’s default blocks, click on the links below:

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

***

Congratulations! Now you know how to use WordPress Blocks when creating and editing content using the WordPress Block Editor.

Additional WordPress Block Editor Tutorials

To learn more about using the WordPress Block Editor, see these tutorials:

Learn how to use WordPress Editor Blocks

***

***

"Your training is the best in the world! It is simple, yet detailed, direct, understandable, memorable, and complete." Andrea Adams, FinancialJourney.org

We are not affiliated, associated, sponsored, or endorsed by WordPress or its parent company Automattic. This site contains affiliate links to products. We may receive a commission for purchases made through these links.

For a white label version of this tutorial visit WPTrainingManual.com.