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.
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
The editor has different types of blocks that covers all types of content: texts, images, buttons…etc, blocks are classified into multiple categories:
Contains mostly used blocks like text blocks, image blocks, media files…
Contains Blocks for formatted content like code, table, custom HTML…
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…
This category contains blocks to for the available widgets and shortcodes
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…
- 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….
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 the heading block, we have the heading level and also bold and italicized…
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.
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
You can change the position of a block by simply clicking on the arrow’ buttons to move the block up and down
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..
From the toolbar you can see an outline of all the blocks you used on the document, and easily navigate between them..
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..
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
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
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
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:
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.
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.
Is the way when you need to mark a post as “needs review before publishing” Click on this option to enable it.
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.
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
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.
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…
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
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.
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
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
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
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…
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…
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:
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.
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 other image block type is the gallery, that allows
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
There are many
Gutenberg offers some of the common widgets as Blocks, including : Latest Comments, Archives, Shortcode, categories, and latest posts.
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…
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…
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.
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…