In this post, we teach you how to use the WordPress block editor, which has been included in WordPress updates since 2018 and is here to stay. You’ll also hear it called the Gutenberg editor.
Since the release of WordPress 5.0, there’s an option within the WordPress text editor to ‘CONVERT TO BLOCKS’, found by clicking the three vertical dots, as below.
Should You Convert to Blocks?
If you’ve been using a third-party WordPress text editor, there may be complications. We do not cover those in this post. Please find out more from a professional about converting and tread carefully.
For anyone else – we take no responsibility – always back up a website/blog before converting a page to blocks.
Already converted? Skip this section.
To those of you who have been using the classic editor and have a simple page layout – we recommend WordPress blocks.
Once you’re used to the WordPress block editor, it’s intuitive.
Hitting CONVERT TO BLOCKS will not convert the whole website/blog to blocks. Just the page or post that you’re working on.
What Happens When Converting to Blocks?
Converting the page commits each heading, paragraph, snippet of code, and image into its own block.
You’ll soon get used to it if you are only just converting.
Blocks enable you to easily add paragraphs, columns, tables, images, widgets, latest posts and categories.
As well as widgets such as latest posts, calendars, post archives, categories, social icons and RSS feeds.
WordPress blocks make it easy to add almost anything a website owner could wish for. It is really convenient.
One block represents one item, so it is also much easier to change the page order. We’ll cover that later.
View the WordPress Website in a New Tab
When editing, the first thing we do is open the public-facing part of the website in a new browser tab. We then have the admin area (back end) visible in one tab, and the public area (front end) visible in the other. That way we can switch between the two.
The easiest way to open the front end of your WordPress website in a new tab is;
- In the admin area, hover over the house icon at the top left of the screen.
- From the drop-down menu, RIGHT-CLICK on ‘Visit Site’.
- Click “Open link in new tab”.
NB. There may be variations in wording depending on the browser you are using.
Two browser tabs are now open, so you can switch between them.
Continue editing the WordPress page in one tab using the admin area.
In the other, you will view the front end of your website. This is how to check each change you make.
As you make edits and save them, you can tab over to the front end of the site. Hit the F5 key to refresh the page – this prompts the browser to show the updated version.
WordPress h1 Heading and Permalink
Let’s first look at the title and permalink.
The h1 heading is the first block at the top of the page. This is the only block that is immovable, and that is for good reason.
All pages and posts should have an h1 heading at the very beginning so that search engines and humans understand what is contained on the page. It’s an SEO factor.
Use your mouse to click inside the title block. To change a title, highlight the title text and start to type. Simple.
The permalink field is located in Document settings on the right-hand side; see the image below. WordPress’ label for the page name is ‘URL Slug’.
Be careful when editing permalinks – I’ve included a warning at the bottom of this post.
Add a WordPress Block
Hit the Plus (+) icon in the top left to get started.
Explore the block library – there are so many options available here.
There are two more ways to add a block to a WordPress page.
If you are in a creative flow, press return to add a block.
The third way is done by hovering over a block – a Plus + icon appears.
At the time of writing, this is fiddly – hover over the exact centre bottom of the block for the icon to appear.
Hit the icon and choose a block style. The new block will show up below the plus icon.
WordPress Paragraphs Using Blocks
Paragraph blocks will often be the most common elements of a WordPress page or post. Add a paragraph block and just start typing.
Hit return to create a new paragraph block and continue typing.
To speed up the workflow, paragraph blocks can be converted to other styles.
With the cursor in a new paragraph block, type a / (forward slash). This shortcuts to a list of possible block types.
Alternatively, transform a block using the toolbar. On a selected block, the toolbar appears, top left.
In the toolbar for a paragraph are options to change ‘block type or style’ or format text:
Transform WordPress Paragraph Block
Use the ‘change block type or style’ button to transform the paragraph block. Transformation is limited to blocks of a similar ilk. I.e., paragraphs can’t be converted to tables, but they can be converted to headings.
Let’s change a paragraph into a header, for example.
The arrow in the image below points to the icon representing a PARAGRAPH. This is how you know the block is a paragraph.
Click the icon to transform the paragraph.
Hit HEADING.
The paragraph icon changes into an H, and you can see H2 next to it.
H1 can’t be chosen – an H1 should only ever be used for the title of the page.
The block is now a heading block.
Select H3 or an H4 by hitting the H2 button and choosing from the menu.
Use headings as a hierarchy within pages and posts. Use H2 to divide the page into easy-to-read sections. Use H3 to subdivide those.
Format Paragraphs and Headings
Formatting text just means to add a specific style to it.
On a heading or a paragraph block, highlight the text you’d like to format.
The toolbar magically appears at the top left of the block. This is where you’ll find options to make text bold or italic, or to add a hyperlink.
It is still possible to use keyboard shortcuts – highlight text and use:
- Control-b for bold
- Control-i for italics.
- Control-u will underline text.
Mac users – use the Command key instead of the Control key.
Visit WordPress keyboard shortcuts for a useful list.
Notice the down arrow on the toolbar; it opens a drop-down menu for ‘more rich-text controls’. Two other styles are found here – strike through and text colour.
Be careful with text colour – the theme will govern the look of the website. Fewer colours in a corporate scheme make a website look professional. Use text colour sparingly.
‘Inline code’ and an ‘inline image’ are also found within this menu.
Any ‘inline’ will be positioned within the line of text you are typing. Useful for code snippets and possibly icons, but bigger images would look odd.
Paragraph Settings
Select a paragraph block to view options on the right-hand side of the WordPress screen.
Change the size of your text here.
Useful for a strapline you’d like to highlight.
There is also the ability to change the colour of whole paragraphs. We warn against getting too crazy with these options.
More Transformation Options for Paragraphs
Other transformation options for the paragraph block are:
- a list,
- a pre-formatted block,
- a quote,
- a verse
- or a group.
Lists
Lists are WordPress’ label for bullet points – really useful to help items to stand out on a web page. There are two types of list available:
- Ordered list (OL) – optionally ordered by Roman numerals, decimals or letters.
- Unordered list (UL) – styled bullet points.
Just like paragraphs, lists can be formatted. There is also an option to indent a list, allowing sub-lists to be created within it.
We’ve not seen the blocks ‘preformatted’ or ‘verse’ in WordPress before, so we will explain a little about those block types.
Preformatted Block in WordPress
The preformatted block allows WordPress users to type text exactly as they’d like, preserving line breaks and indentation.
I’m not totally clear what this is used for at the moment. Someone enlighten me.
In an empty paragraph block, type /preformatted, then press Enter to create a preformatted block.
Or use the toolbar as covered above.
Verse
WordPress say that the verse block is ideal for adding poetry to your site, so aptly named.
More advanced users can add CSS to verse blocks, making styling the verse block easy.
Roses arered, Violets are blue.
Buttons in WordPress Block Editor
The WordPress block editor allows the editor to create bespoke buttons.
They are simple buttons with limited styles; nothing particularly ingenious about them. WordPress has made the right decision – keeping things clean is the better option.
To add a button, use the ‘Add block’ icon, and select ‘Button’.
Start to type the button text straight away.
Now, there are two parts to a ‘button block’, which can get confusing.
A button is contained within an external block. Click the button, then click just outside it in the white space to see what we mean.
Move or drag the button using the containing block. The button can be aligned within it.
Click ON the button, and that can be styled – colour, text, border. This is also where you’d link the button.
Select the button – more styling options are available over on the right-hand side of WordPress.
Styling can be added to the button text, just like a paragraph. Be careful linking the text.
I’ve discovered that WordPress lets you link the TEXT of the button (via the button toolbar, just like a paragraph) or link the whole button via the options on the right. Slightly confusing.
The best option here is to link the whole button.
To do that, select the button by clicking on it; see the Block options on the right-hand side? Scroll to the bottom and paste your link into the Link rel field.
We advise against activating the ‘open new tab’ option, as search engines prefer that users decide to open new tabs.
In the example button above, we have added a Font Awesome icon by copying the HTML code from Font Awesome:
<i class="fas fa-arrow-right"></i>To include it on your button, select the button, hit the 3 vertical dots at the end of the toolbar and choose ‘Edit as HTML’. Paste the HTML code before the closing </a> tag.
This icon is available only if Font Awesome is installed.
Groups of Blocks
A group block allows the editor to add more than one block inside it, so the group can be moved, duplicated, or reused as a whole.
Useful for layouts. Or to keep headings and paragraphs together so the page doesn’t become jumbled.
However, we have found GROUPS to be slightly frustrating, as they just seem to disappear! We believe this is a bug in WordPress.
I’ve tried Chrome, Firefox and Edge.
We do have a little trick to stop a GROUP from just disappearing once it’s been added – add a garish background colour to it as soon as it lands on the page.
We were then able to drag other blocks into it, and change the background colour once complete. Not ideal.
Duplicate a WordPress Block
We love that it’s now so easy to duplicate a WordPress block. Simply click inside the block to select it, then hit the three vertical dots on the toolbar. Hit duplicate.
Alternatively, when you are in a block, use the shortcut CONTROL-SHIFT-D (COMMAND-SHIFT-D on a Mac).
Reuse a WordPress Block
Another great feature about WordPress blocks is the REUSABLE BLOCK option.
The style you’ve created for a block can be saved and used again. This reduces the need to recreate each item throughout the site.
Click on any block to show the toolbar, then click the 3 vertical dots to the right. Here you will find a menu item labelled ‘Add to Reusable Blocks‘.
The saved reusable block is found within the block library under the ‘Reusable’ tab. Just find and add it like any other block. Handy.
Reusable blocks can be managed, so you haven’t got too many surplus ones in the collection.
Be sure to save your work. Then, on any post or page, look at the top of the screen; you’ll see the PREVIEW and UPDATE buttons and a cog icon.
At the end of that bar, you’ll find 3 vertical dots; click them to see a list. At the bottom is the option to ‘Manage all reusable blocks’.
Manage the reusable blocks in a similar way to posts: click the names to edit them.
Editing a reusable block will NOT change the styling of blocks already on the site.
How to Drag a WordPress block
Since the update to WordPress 5.5, the drag option is not obvious.
You need to select the block, then click and hold on the up-down arrows.
When you drag the block, areas will be highlighted in blue indicating where the block will be dropped once the mouse is released.
Kaydee Web hopes our guide helps you to start editing WordPress using the WordPress block editor. There is a lot more to cover, so please see our other posts on:
- How to Add Images to WordPress
- Linking an Image in WordPress
- Headings and Paragraphs in WordPress
- Hyperlink in WordPress
- Formatting in WordPress
- How to Add a PDF to WordPress (and Link to it)
Plenty to get on with! If you struggle, speak to one of our WordPress experts at Kaydee Web.
