Overview

In this tutorial we are going to discover the new WordPress block editor in depth, we are going to cover everything you need to know to start creating content with it, you will learn about all the features that the new editor provides and how to use them effectively to create outstanding page layouts and templates, there’s a lot to learn, so let’s dive in…

What’s a block?

You can think of a block as a separated, stand alone piece of content that has its own features and properties, a block is the basic unit that composes a web page.

Gutenberg blocks
Gutenberg blocks

The Block Context And the Document Context

In the block editor, we find ourselves working with two distinct contexts:
 The block Context and the Document Context.

With the block context, we deal with blocks separately, the block context gives us control over things like block order, block type, block alignment and block properties… etc  
While the document context gives us control over the document as a whole, things like featured image, excerpt, categories and tags.. Etc

The image below shows the visual elements for each context on the editor interface  

The block context and the document context in gutenberg
The block context and the document context

The block context

The editor has different types of blocks that covers all types of content: texts, images, buttons…etc, blocks are classified into multiple categories:

Common blocks

Common blocks

Contains mostly used blocks like text blocks, image blocks, media files…


Formatting blocks

Formatting blocks

Contains Blocks for formatted content like code, table, custom HTML…


Layout elements

Layout elements

Here we find blocks that help in page layout, the columns block is the most important one in this category, which is the one that allows you to distribute your content in responsive columns…


Widgets

Widgets

This category contains blocks to for the available widgets and shortcodes


Embeds

Embeds

Contains blocks to embed content from external websites like youtube, twitter….

Adding a new block

  • The text block is the default block that gets created automatically on writing content by hitting the return key…

Adding a new text block on hitting the return key
Adding a new text block on hitting the return key

  • Another way to add a new block is by clicking on the plus icon on the top, then choosing the type of the block to add….

Adding a new block with the plus icon
Adding a new block with the plus icon

Block configuration options and properties

Each block has configuration options, and properties..

Block configuration options

Appears on the top of the editor on selecting a block, by deafault, they have configurations that are related to the display of the block. for the text block for example, we have, alignment, bold, italicized… etc

For the heading block, we have the heading level and also bold and italicized…

Block properties

Appears on the sidebar, they display all the properties that the block has, for the text block for example we have the background color and text color and also a field to assign a custom CSS class to it.

Block Configuration options and properties
Block Configuration options and properties

Changing the block type

Working with blocks, you may find yourself in a situation where you want to change the block type after you create it, a common scenario is changing the text block to another block type like quote or heading, the way we can do that is by clicking on the change block type icon on the configuration panel on the top, then choosing the block type you want to switch to from the available blocks

Changing the block type
Changing the block type

Block order

You can change the position of a block by simply clicking on the arrow’ buttons to move the block up and down

Changing block order
Changing block order

Layout blocks carry other blocks inside, to move a block to a column for example you just need to Drag it then Drop it inside..  

Layout blocks
Layout blocks

Block Navigation

From the toolbar you can see an outline of all the blocks you used on the document, and easily navigate between them..

Reusable blocks

According to its name, reusable blocks are blocks that you can re-use on multiple posts and pages, any block you add in a post or a page could be saved as a reusable block by simply clicking on the block options icon on the toolbar, then clicking on add to reusable blocks..

Save a block as a reusable block
Save a block as a reusable block

The block now gets classified into the reusable block’s category so you can add it to any other post or page.

The reusable block is a separate entry on the database, that means any edit on the reusable block will take a place on all posts and pages where you added that block.
You can edit the reusable block from any post or page you have added to..

to manage all existing reusable blocks, click on the ( + ) icon on the toolbar, go to reusable blocks, then Manage All reusable blocks

From there you can edit, delete, or import any reusable blocks you have

Managing reusable blocks
Managing reusable blocks

Editing a reusable block just in one location

If you want to edit a reusable block just in one location, you just need to convert it to a regular block, select the block, then click on the option icon on the toolbar, go to: convert to a regular block… the edit now will take place only on that position

Editing a reusable block just in one location
Editing a reusable block just in one location

Templates

You can create custom templates using reusable blocks, a template is a page layout that has many blocks in a particular order, templates are useful when you are using the same layout for many posts or pages so you don’t have to create the same layout again and again…

Creating a template starts by creating a random reusable block, then we edit that block to make the template

Create a custom template using reusable blocks
Create a custom template using reusable blocks

As you can see, editing a block is just like editing a post or page…
Now you can use this template on any post or page just like you use any other reusable block

The Document Context

The Document context is all about the Post meta-data, such as published date, category, tags, author name, or custom taxonomies. The document context is mainly contained within the document panels in the sidebar.

Gutenberg gives us an easy way to work with meta-data by organizing them in panels, each one of them has its own options and settings, let’s take each one separately

Status & Visibility

Contains a set of options:
Visibility
the visibility has 3 options, you can set it to Public for everyone to see the post. Private, for only editors and administrators or Password to protect it with a password.

Publish
here you can set the time to publish the post automatically.

Stick on the Front Page
check this to fix the post on the front-page.

Pending review
Is the way when you need to mark a post as “needs review before publishing” Click on this option to enable it.

Author
This option allows you to change the author of the post. to change the author, click on the select menu to choose from the available authors.

Categories

Categories is the way that WordPress uses to organize posts, which makes access to them easier, each post should belong to at least one category, when you don’t specify a category the post will be added to the default category, named: uncategorized
to add a category, click on the categories panel, a list of the available categories will be shown , then, select the categories you want, If you want to add a new category click  Add New Category, This opens a new little panel , type a name, then hit return, you can also select a parent category if you want to create a parent/child relationship.

Tags

Tags are a way to group related posts together, you can think of them as keywords for posts.
To add tags to your post go to the tags panel, then, type the tag name and hit return, you can add as many tags as you want.

Adding tags
Adding tags

Featured image

also known as the post thumbnail, is an image that appears with posts on the home page or when you share it in social media, to add a featured image, go to the document panel, scroll down to Featured image and click on set a featured image

Adding a featured image
Adding a featured image

Excerpt

an excerpt is the summary of a post that appears on the home page, you can set a custom excerpt from the document panel easily

adding an excerpt
adding an excerpt

Common Blocks in details

Gutenberg offers lots types of blocks, in this part of the tutorial we will take common blocks to see how they work in detail, we will take the important blocks you’ll use frequently.

Text Blocks

In almost all posts, we need the text blocks which have several types such as paragraph, heading, quote, list, and others.
let’s get started with default block: The paragraph, when you select the paragraph block, you will see the toolbar that contains the configuration options of the block, in this case, you will find options like text alignments: left, center and right, and also bold, italicized,… etc

text block configuration panel
text block configuration panel

In the sidebar, you have the properties, you can change the font-size: small, normal, medium, large or set your own custom size in pixels. Set visualizes the first letter in the first word as a larger letter by clicking on the check button Drop Cap.
also, you can change the colors of the paragraph, both text color and background color 

text block properties

Another useful block is the heading block, the default heading is H2, you can change the heading level from the block’s toolbar,  and you also have options like alignment, bold, link… etc

heading block
heading block

Next up, we have the quote block, you can change your paragraph that you’ve created to quote block by using Change-block-type icon on the block toolbar…

quote block
quote block

if your post needs either ordered or unordered lists, there is also a block for that, you can specify the type of list you want from the toolbar…

list block
list block

Images blocks

The image block allows you to insert a single image to your post or page, after adding the image block, you can either upload your image from your computer, choose an image from the media library or just insert the image from a URL, on the toolbar you have options like alignment to the left, right or center, link, and in the properties you have the image size and the alt text…etc
These animated images show the different ways to add an image:

Adding an image block
Adding an image block

Adding an image block
Adding an image block

Adding an image block
Adding an image block

You can add a caption under the image with different configuration options like Bold, Italics, Strikethrough, and Link.
Another important property is image size, in this option, you can adjust the image size you can choose between wide width and fullwidth.

image block properties

There are other predefined image blocks, like image cover, the cover image block allows you to display texts over images. the properties of the cover block give you many options, you can set the cover image as a fixed background, add an overlay color, and also control the background opacity.

The cover image block
The cover image block

The other image block type is the gallery, that allows you to add a gallery to your post or page…

The Gallery block
The Gallery block

Layout blocks

Layout blocks allow you to create custom page layouts..
The Columns Block allows you to create multi-column layouts within your content area.
By default, the block contains two columns. on the sidebar, you can increase the number of columns, also you have you have two configuration options in the toolbar, Full-width and Wide-width.

Columns block
Columns block

There are many other layout‘ elements like: Button, Media and text, separator .. try them out

Widgets

Gutenberg offers some of the common widgets as Blocks, including : Latest Comments, Archives, Shortcode, categories, and latest posts.

Widget blocks
Widget blocks

Let’s try the Latest Posts block widget and discover its options and properties, on the sidebar, you have the order option, the category you want to get posts from, you have also the number of posts to show…

Latest posts blocks
Latest posts blocks

Embeds

The Embeds blocks allow us easily to add a third-party source (video, audio, images, tweets, etc) into our content, from the Embeds panel you can choose from the List of Embed Blocks available to add…

Embeds blocks
Embeds blocks

Enhancing Productivity

The editor is primarily designed to be used with touch and mouse, but it is also accessible using a keyboard.

As many reports has indicated, using the keyboard alone would be challenging, but using it alongside with the mouse will increase your productivity significantly..

The editor has many keyboard shortcuts that you can use, to see all the available shortcuts, click on the ellipsis icon on the right and then go to the option: Keyboard Shortcuts.

Block Editor Keyboard shortcuts
Block Editor Keyboard shortcuts

Keyboard shortcuts cheatsheet

We have prepared a printable one page cheatsheet for all the available shortcuts that the editor provides…

If you have any questions or just you want to give your feedback on this tutorial.  comment below…