Oct 262018
 

WordPress Gutenberg Editor post talks about the different options to use and how to manage the new editor and more.

Last Updated: November 2, 2018

Latest News: I added another tutorial to the list.

The following tutorial shows you how to set up and manage Gutenberg Editor. This is going to be the new WordPress editor for the future. There is a lot of differences between the Classic Editor and this editor. My intentions with this tutorial is to help you understand the functionality of Gutenberg. Once you become accustom to the new editor you should be able to do much more work in your posts and pages faster without needing too much CSS, HTML knowledge. The whole idea with this new editor is to work with blocks. Each block manages one part or section of the content in a post or page. For example: You can add one block of text, a block of images, a video block etc. I think you get the idea behind the using of blocks concept.

In this tutorial I will introduce the new editor and the different sections it covers. Then I will add a list of tutorials covering each section of the editor in depth.

WordPress Gutenberg Editor Tutorials:

WordPress Gutenberg Editor

Step 1 ) The following image shows you the new editor in action. You can see different sections that allow you to manage different areas in the editor. This is very similar to some degree to the Classic Editor. You should not have too many problems to become accustom to the new editors structure.

wordpress-gutenberg-editor

Gutenberg Top Left Side Editor Options

Step 2 ) The following image shows you the top left hand side options for the editor. Here you have the option to add the following.

Gutenberg Top Left Side Editor Options

  1. Add Block
  2. Undo
  3. Redo
  4. Content Structure
  5. Block Navigation

wordpress-gutenberg-editor-top-left-options

Gutenberg Top Right Side Editor Options

Step 3 ) The following image shows you the top right hand side options in a post or page. Here you have the option to add and manage the following options.

Gutenberg Top Right Side Editor Options

  • Switch to Draft
  • Preview
  • Update
  • Settings
  • More Settings
  • Document
  • Block
  • Status & Visibility
  • Categories
  • Tags
  • Featured Image
  • Excerpt
  • Discussion

wordpress-gutenberg-editor-top-right-settings

Editing Content Block Options

Step 4 ) The following image shows you a text block displayed in a post. The following image shows you basic layout of the different options you can manage and add when editing a block. I will be adding a more in depth tutorial about all the different options available.

Editing Content Block Options

  • Classic Editor
  • Add Image
  • Add Heading
  • Add Gallery

wordpress-gutenberg-editor-text-block

==============================

That is how simple it is to manage and work with the new Gutenberg Editor. Of course, at first you will need to spend a bit of time getting to know the new editor.

If you have any questions please let me know. I will be updating this tutorial from time to time.

Enjoy.

Manuel Ballesta Ruiz is a web developer, Blogger and WordPress Enthusiast.

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

The following GDPR rules must be read and accepted:
This form collects your name, email and content so that we can keep track of the comments placed on the website. For more info check our privacy policy where you will get more info on where, how and why we store your data.