In WordPress, Blocks now define how you build a page. With the WordPress Block Editor or Gutenberg, you can easily use blocks to create all aspects of a post.
Table of Contents
WordPress Block Editor
The Gutenberg Editor is now officially referred to as the WordPress Block Editor. It is now part of WordPress. At a fundamental level, it simplifies the user experience in creating a WordPress site and building pages. On the surface, it removes a lot of the complexity of page design. It reduces the learning curve for someone just starting with WordPress.
Underneath, they have incorporated enhanced functionality, simplifying a substantial amount of what a user would have had to do. It now eliminates the previous need for a lot of CSS and add-ons.
In the previous years, there has been a heated debate around Gutenberg with many negative responses. It revolved around limitations in the early releases of the Gutenberg editor, first released with WordPress 5.0, in December 2018. It was also the beginning of a challenge to the status quo.
They released the WordPress Block Editor with WordPress 5.9 in January 2022.
It enables extensive customisation capability with the following features:
- Full Site editing
- Block Patterns
- Block Directory
- Block-based themes
The release of WordPress 5.9 brought the advent of Full Site Editing. These new WordPress features enable using blocks for all parts of a website beyond just a post page.
The existing Page Builders
The editor has grown in power with each release and is a full-fledge challenger to the existing page builders. Which brings into question their long-term relevance. The market-leading page builders are:
- Elementor (4 million installations),
- Divi (600,000)
- WP Bakery (388,000)
- Beaver Builder free version (400,000)
- Visual Composer (70,000)
The Changing Nature of Themes
Several newer themes now focus on blocks, Kadence and Blocksy being good examples. These themes are light and faster loading than their bulkier traditional competitors.
There are now new Block Themes, entirely built with blocks. Every aspect of the theme is a block. The new Twenty Twenty-Two theme is the first WordPress block theme. There is now a selection of others.
Some will tell you it is quicker to build a site with Elementor than WordPress Block Editor. But for most people, the critical factor is not the time it takes to build a site, this is a one-off, but the time it takes the page to load.
Better Speeds with WordPress Block Editor
Page Loading speed and Mobile friendliness are significant factors in On-Page SEO.
Sites with more recent lightweight themes that use the WordPress Block Editor are killing it in Page loading speed tests of traditional popular Themes and page builders like Elementor. These Page Builders remain very popular with their users, Elementor having a very dominant market share.
However, the ground is now changing significantly with the importance of speed and the availability of WordPress Block Editor.
Two sites, theadminbar.com and wptavern.com, report that their detailed test shows that the WordPress Block Editor is winning their Page Loading Speed Test against an equivalent site made with page builder Elementor. The results are even more striking on mobile.
The WordPress Block Editor produces faster speeds because of the underlying light HTML code. It also does not need additional PHP server processes. A website built with the WordPress Block Editor will be faster than any built with most page builders.
Why you should Change to WordPress Block Editor
From a strategic point of view, there is now the Old Way
- using older style themes
- using traditional Page Builders
- using lots of plugins
- adding lots of CSS
and the New Way
- Using or Updating to a new Theme that uses blocks
- using WordPress Block Editor
- using only necessary plugins with restraint
- little if any CSS.
The best way to position yourself in the direction in which everything with WordPress is moving is to stop using Traditional Page Builders and use WordPress Block Editor.
Here are the five critical things to follow:
- Chose a new lightweight Theme that uses blocks.
- Avoid using a Theme that needs a particular page builder or has its own version.
- Use the WordPress Block Editor to build your site.
- Minimise the number of plugins and make a strategic decision about which ones to use.
- Limit adding CSS to your pages
Blocks
So what are blocks? WordPress.org tells us:
Blocks are the components for adding content to the WordPress block editor.
Some of the common types of blocks are:
- Paragraph
- Image
- Heading
- Gallery
- List
- Quote
- Audio
- File
- Video
You can access them by clicking the + symbol on any line.
Getting started with Blocks
Create a new post
Go to the Posts section in WordPress and select Add New at the top (or by the +New button on the Top Admin Bar).
You will have a new blank Post.
Add a Paragraph Block
On the line where it says Type / to choose a block, you have two choices:
- If you start to type on the line, it will default to a text Paragraph Block or
- If you click the + in the black box at the far right of the line. You can select which Block type you want.
Type the first sentence here and hit enter to create another line.
I have put “I have a Black Dog”.
Add a Heading Block
There is a default Heading Block on the page where it says Add Title.
Type a Title for the post here.
I have put “My Dog”.
The Heading Block is the title of the post. In WordPress, this is an H1 – Level 1 Heading.
Add an Image Block
Select the + sign at the far right of the new line. In the pop-up box, select the Image Block.
You now have an Image Block on your page.
Find a suitable picture that matches your sentence topic and save it on your drive. Use an image that is not subject to copyright. Select Upload to load your image into WordPress and display it on your page.
I have found a picture of a black dog.
This page now has three blocks on in it:
- a Heading Block
- A text Paragraph Block and
- An Image Block
The Block Toolbar
Whenever you select a Block with the cursor, the Block Toolbar appears.
The Block Toolbar enables us to change the options of the Block selected. These options are:
- Transform: allows you to change the selected Block. The symbol will reflect the current Block.
- Drag allows you to click and hold the 6 Dots Icon to drag the Block to another place on the page.
- Move Up/Down Select the Up or Down Arrow to move the Block by one position with each click.
- Alignment Adjust the alignment to the left, right, or center or select wide and full width.
- Block-Specific Toolbar Options This section changes with the type of Block. Here, it’s the Paragraph Block: The commands are:
- Bold
- Italic
- Link
- Displays More Block Tools
- More Options are available when you select the 3 Vertical Dots
Add a List Block
Let’s write some more content. Create a new line by hitting the enter key or clicking on the + sign.
Write some more words and add a list that applies to your topic. Select the words you want to make a list out of, and hit enter to put them on a new line.
Highlight the items you want to make a list out of and select the first Paragraph Symbol in the Block Toolbar floating over the Paragraph Bock you made. Click on the dropdown and select List to convert your Text Paragraph Block into a List Block.
We now have four blocks on our page.
Moving a Block
We can move each Block up or down on the page by selecting it and choosing the Up or Down Arrow in the box hovering over the Block.
First, select the Image Block, and move it down past other blocks. Now return it to its original position.
These quick topics have covered some basic commands for adding content to a page. Let’s look at what the WordPress Block Editor lets us do with it.
Introduction to the WordPress Block Editor
Let’s look at some of the features of the WordPress Block Editor.
In the WordPress Block Editor, there are three sections:
- The Top Toolbar
- The Sidebar with the Page and Block Settings and
- The Content Area
The Top Toolbar
At the top of the page is the Top Toolbar, where we have some command symbols:
- The + in the Blue Square is the toggle Block Inserter. It creates a Block where the cursor is.
- The Pen Symbol is the Tools command. It allows you to either Edit or Select. With this function, you can select, navigate, and edit blocks.
- The Backward and Forward Facing Arrows are the Undo and Redo commands.
- The i in a Circle symbol is the Details command. It gives you Statistics about your page, including word count and heading structure.
- The 3 Slashes are the List View. It is a list of all the Blocks now on the page.
The Block Editor Settings
On the right-hand side is a Cog symbol. It is the Block Editor Settings command. Select it, and all the Post and Block Settings appear on the right.
If we select the Image Block, the Settings for this image will appear on the right.
Save Draft or Publish a Post
In the Top Toolbar are the options to Save a Draft and Publish a Post.
While you are still setting up and writing your Post and Content, you can save it as a Draft and Preview the results. When you finish, you can Publish the Post. It will prompt you to View Post at the bottom of the page when it is updated.
Frequently Asked Questions
Why is it called Gutenberg?
Johannes Gutenberg (1400-1468) is famous for designing and building the first printing press to incorporate movable type and mechanised inking. He lived in Mainz, Germany, in the Rhineland, south of Frankfurt.
Gutenberg’s invention is a history-changing event, as it made books accessible to the masses. It spread learning to the greater populace and fueled the Renaissance, Reformation, and Age of Enlightenment. Gutenberg’s printing press changed everything.
He used his invention to produce the Gutenberg Bible, the first major book printed in Europe with movable type.
WordPress named their project to create a new editor, Gutenberg.
