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

The WordPress Gutenberg Content Editor

The WordPress Gutenberg Content Editor

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, the inventor of the printing press).

(WordPress 5.0 introduces the new Gutenberg content editor)

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

(Gutenberg – The new block-based content editor)

Blocks lets you insert different types of content (e.g. paragraphs, images, quotes, multimedia, etc.) into your posts and pages using features like  ‘point and click’ and to easily configure or rearrange layouts using features like ‘drag and drop’.

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

The new block-based editor introduces a different way to add, edit and display content on your site than the previous 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)

To learn more about using ‘blocks’, see this tutorial:

Gutenberg doesn’t change how WordPress works. Your site visitors also won’t notice anything different. What Gutenberg does, is change the way you interact with WordPress when creating or editing content.

How To Use The WordPress Gutenberg Content Editor

Installing WordPress after version 5.0 will automatically come with WordPress Gutenberg content editor installed and activated by default …

(WordPress Gutenberg – Content editor screen)

Let’s go through the main sections of the Gutenberg content editor.

WordPress Gutenberg – Content Editor Layout

Below is a screenshot of the WordPress Gutenberg content editor interface …

(WordPress Gutenberg – Content editor interface)

The content editor is divided into three main sections:

  1. Editing Toolbar
  2. Content Area
  3. Settings Section

Each section contains different features that allow you to perform different functions.

(WordPress Gutenberg – Content editor interface sections)

Click on the links below for in-depth tutorials about using different sections of the WordPress Gutenberg content editor interface:

WordPress Content Editor Interface – Editing Toolbar

Learn how to use the editing toolbar section of the WordPress Gutenberg content editor ...
Read More

WordPress Content Editor Interface – Content Area

Learn how to use the content area of the WordPress Gutenberg content editor ...
Read More

WordPress Content Editor Interface – Settings Section

Learn how to use the Settings section of the WordPress Gutenberg content editor ...
Read More

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


"I love the way your email series "Infinite Web Content Creation Training Series" is documented and presented. It is very absorbing and captivating. The links and tutorials are interesting and educational. This has motivated me to rewrite my content following the concepts I am learning from the email series." - Mani Raju, www.fortuneinewaste.com