The WordPress block editor is here to stay. I explain how to use it, in this post.
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?
Already converted? Skip this section.
If you’ve been using a third party WordPress text editor there may be complications. I do not cover those in this post, so please find out more about conversion and tread carefully.
To those of you that have been using the classic editor and had a fairly simple page layout – I can recommend WordPress blocks. It’s intuitive once you’ve got used to it. I take no responsibility though!
Back up the website before converting a page to blocks.
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 I convert to blocks?
Converting the page commits each heading, paragraph, snippet of code and image into its own individual block.
If you are only just converting, there is quite a difference from the classic editor, but you’ll soon get used to it.
With the click of the mouse, blocks can be added for paragraphs, titles, columns, tables, images and lists.
As well as widgets such as latest posts, calendars, post archives, categories, social icons and RSS feeds.
WordPress blocks makes it easy to add almost anything a website owner could wish for. It is really convenient.
Page order can easily be changed too because one block represents one item. We’ll cover that later.
WordPress page title and permalink
Let’s first look at the title and permalink inside the first block at the very top of the page. This is the only block that is immovable.
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 hidden within the title block, as shown below.
Edit a permalink by clicking the EDIT button to the right.
Be careful when editing permalinks – there is a warning at the bottom of this post.
Add a WordPress block
To get started hit the Plus + icon, top left.
Explore the block library – there are so many options available here.
There’s a second way to add a block to a WordPress page.
If you are in a creative flow, add a block just by hovering over a previous block. In the image below I hover my mouse over a paragraph block – a Plus + icon appears.
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.
When a paragraph is finished, hit return to create a new paragraph block and continue typing.
Paragraph blocks can easily be transformed into other text blocks to make work flow faster.
Once you’ve hit return to create the new paragraph block try typing a / (forward slash). This is a shortcut to a list of possible block types.
Alternatively, transform a block using the toolbar. The toolbar appears top left of a block once it is selected.
In the toolbar for a paragraph are options to change ‘block type or style’ or format text:
Transform WordPress paragraph block
Using the ‘change block type or style’ button, the paragraph block can be transformed, but is limited to blocks of a similar elk – i.e. a paragraph cannot be changed into a table, but could be changed to a heading.
Let’s change a paragraph into a header, for example.
The arrow, on the image below, points to an icon representing a PARAGRAPH. This is how you’d know the block is a paragraph.
Click the icon to transform the paragraph.
A paragraph block can be transformed into a number of text block styles. For now hit HEADING.
Once you hit HEADING the paragraph icon changes into a H and you can see H2 next to it.
H1 can’t be chosen – a H1 should only ever be used for the title of the page.
The block is now a heading block.
A headings can be changed to a H3 or a H4 simply by hitting the H2 and selecting from the menu.
Use headings as a hierarchy within pages and posts. H2 is used to divide the page into easy to read sections, H3 will sub divide and so on.
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, top left of the block. This is where you’ll find options to make text bold, italic or add a text 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 command instead of control.
Visit WordPress keyboard shortcuts for a useful list.
Notice a down arrow on the tool bar; 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’ can be added via 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 in my opinion.
When the paragraph block is selected, you’ll be able to see options for the block over on the right hand side of the WordPress screen.
Text size can be changed, without making the block a heading.
Really nice if you’d like a strapline to stand out.
You area able to change the colour of whole paragraphs. I would 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 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) – uses bullet points which can be styled.
Lists can be formatted in the same way that a paragraph can be. There is also an option to indent a list, so that you can create sub-lists, within lists.
We’ve not seen the blocks ‘preformatted’ or ‘verse’ in WordPress, before so I 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 to, preserving line breaks and indents.
I’m not totally clear what this is used for yet. Someone enlighten me.
In an empty paragraph block, type /preformatted then hit enter to create a preformatted block.
Or use the toolbar as covered above.
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, so that makes styling the verse block very easy.
red, 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. In my opinion WordPress has made the right decision – keep things clean is the better option.
To add a button use the ‘Add block’ icon, and select ‘Button’.
One the button has been placed, start to type the button text straight away.
Now, there are two parts to a ‘button block’, which can get confusing.
Image that, once the button has been placed, that it’s within an extra block. Click on the button, then click just outside the button, in the white space to see what I mean.
The block containing the button can be moved and the button aligned within it.
Click ON the button and that can be styled – colour, text, border. This is also where you’d link the button.
In the WordPress edit screen, options are available over on the right hand side once the button is selected.
Styling to the text can be added, just like a paragraph. Be careful linking the text.
I’ve discovered that you can link the TEXT on the button (via the button toolbar, just like a paragraph) or you can link the whole button. Slightly confusing.
Linking the whole button is the best option here. To do that select the button by clicking on it, see the Block options on the right hand side? Scroll all the way down to the bottom and pop your link into the Link rel field.
I advise against activating the ‘open new tab’ option, as search engines prefer that the user makes the decision to open new tabs.
In the example button above, I have added a Font Awesome icon. I did that by copying the HTML code from Font Awesome:
<i class="fas fa-arrow-right"></i>
I then selected the button, hit the 3 vertical dots at the end of the toolbar and chose ‘Edit as HTML’. I pasted the HTML code before the closing </a> tag.
Font Awesome must be installed on your theme for this icon to be available.
Groups of blocks
A group block allows the editor to add more than one block inside it, so that the group can be moved around, duplicated or reused as a whole.
Very useful for layouts. Or to keep headings and paragraphs together so the page doesn’t become jumbled.
However, I have found GROUPS to be slightly frustrating, as they just seem to disappear! I believe this is a bug in WordPress.
I’ve tried Chrome, Firefox and Edge.
I 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.
I was then able to drag other blocks into it, and change the background colour once complete. Not ideal.
Duplicate a WordPress block
I love that it is so easy to duplicated a WordPress block now. 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.
Any block that you’ve created on a page can be saved so that the styles can be used again. This limits the need to recreate each item throughout the site. Hurray!
Click on any block to show the toolbar, then click the 3 vertical dots at the end. Here you will find a menu item labelled ‘Add to Reusable Blocks’.
Once saved, the reusable block is found in the block library. So you just find and add it like any other block. Very useful.
Reuseable 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 very top of the screen, you’ll see the PREVIEW and UPDATE buttons and a cog.
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 on the names to edit them.
Editing a reusable block will NOT change the styling of blocks already on the site.