Beginners Guide to the Block Editor

February 19,

A quick guide to the Block Editor

The Block Editor is a new way to create and update Blogs, Pages, and whatever else you have set up on your website (EG, Portfolio, Team Members, etc.). It's a recent addition to the WordPress core, and gives users a much more visual way of building and editing your content.

What is a Block?

At its basic level, a Block is an element that performs a specific task, that can be stacked. All elements that make up pages are now separated out as Blocks, and each block comes with it's own suite of settings and options to make the most out of them.

For example, Headings, Images, Text paragraphs, Galleries, Videos, and more sophisticated Block Types, such as Image Covers, Groups and Columns.

Build it like Lego!

The new Block Editor, is easiest to understand if you compare it to building a house out of Legos. You have pieces that makes up windows, doors and the bricks. At any point you can swap the location of the windows and doors, and the model will still work. With the Block editor, it's VERY easy to simply drag and drop your Blocks around the page.

A quick tour of the Block Editor controls

  • A add new blocks.
  • B undo/redo buttons
  • C show a list view of all your blocks
  • D gives you access to post settings. EG, categories, featured images.
  • E when you have an individual block selected, this gives you access to settings that are specific to that block
  • (F) – access a live preview of your post or save / publish your post
  • (G) – once you add some blocks, this is where you’ll actually work with your post’s content

Adding a Block

To add a new block, all you need to do is click the +Add Block icon and select the type of content you want to add:

Move a Block

To Move a Block is very straight forward, using the Up and Down buttons.There are two options:

  1. You can use the up and down buttons to move the block where you need.
  2. You can simply drag and drop element around the page using the 'handle'

Remove a Block

It's super easy to remove a Block! A little buried compared to Adding Blocks. It's still only a two step process, simply hit the three dot Context Menu, then select 'Remove Block' (the Block will be whatever the name of the Block you're removing is - EG, 'Remove Image').

Adding and Replacing an Image

Add an Image Block, and select from the Media Library the image you want!

If you want to change the image, simply hit the Replace' button to select a new one.

It's possible to upload Images directly to a post by dragging and dropping your image onto the window.

I'm a UI / UX Designer living in Sheffield. I have a real passion for everything digital, movies and motorbikes.

We're Going Green

We're Acting to Offset Our Carbon Footprint

50x trees planted for every website we create / host
We offset the carbon generated from day to day operations
100% renewable energy usage at Google servers
2x carbon offset from Stablepoint
view us on ecologi