How to use WordPress block editor

In this post I teach you how to use the WordPress block editor, which has been included in WordPress updates since 2018 and it 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?

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. Once you’r used to it, it’s intuitive. 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.

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 makes 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 I do is I open the public facing part of the website in a new browser tab. I then have the admin area (back end) visible in one tab, and the public area (front end) visible in the other. That way I 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, top left of the screen.
  • From the drop-down menu, RIGHT CLICK on ‘Visit Site’.
  • Click “Open link in new tab”. I have underlined this in red below.

NB. There may be a variation of words depending on the browser you are using.

Two browser tabs are now open, meaning that you can switch between the two.

Continue to edit 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.

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 found within Document settings on the right-hand side, see 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.

Find the Permalink within the WordPress block editor

Add a WordPress block

Hit the Plus + icon, top left to get started.

Explore the block library – there are so many options available here.

Add a block to WordPress

There are two more ways to add a block to a WordPress page.

If you are in a creative flow, add a block by hitting return.

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.

Add a block to a WordPress page

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 make work flow faster, paragraph blocks can be transformed into 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:

Change block type or style

Transform WordPress paragraph block

Use ‘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 changed into tables, but could be changed to headings.

Let’s change a paragraph into a header, for example.

The arrow, on the image below, points to the icon that represents a PARAGRAPH. This is how you know the block is a paragraph.

Click the icon to transform the paragraph.

Transform a WordPress block from a paragraph to a heading

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.

Select H3 or a H4 by hitting the H2 button choosing from the menu.

Changing a WordPress H2 tag to a H3 or a H4 tag

Use headings as a hierarchy within pages and posts. Use H2 to divide the page into easy to read sections. Use H3 to sub divide 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, 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’ 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 in my opinion.

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.

Really nice if have a strapline you’d like to stand out.

There is also the ability 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

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, so sub-lists can be created 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 at the moment. 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.

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, so that makes styling the verse block easy.

Roses are 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’.

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 on the button, then click just outside the button, in the white space to see what I 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.

Make sense?

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 gives the ability to 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 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 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 that the group can be moved around, duplicated or reused as a whole.

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.

The style of a block can be saved and used again. This limits the need to recreate each item throughout the site. Hurrah!

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‘.

Reuseable block in WordPress

The saved reusable block is found in the block library. So you just find and add it like any other block. Handy.

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 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.

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.

I hope this helps you to start editing WordPress using the WordPress block editor. There is a lot more to cover, so please see my other posts on:

Plenty to get on with! Let me know how you get on.

Share and Enjoy !

Leave a Comment

Your email address will not be published. Required fields are marked *