WordPress Gutenberg Blocks and How to Use them

You can select different font sizes with this, providing your theme allows for it.  You can also add a Drop Cap and change the background and text colours – it will be interesting to see what happens there on some websites. It will give you a warning if you select a mismatch of colour that is tough on the eye!

You also have the usual editor that you get with a paragraph too.  This is the more familiar stuff like Microsoft Word … align left, centre, right etc; bold text; italics; add a link; strikethrough text.

Here you can decide on the header size you want (remember there should only be one H1 header in the page and that is the main title).  You can decide on text alignment and more interestingly you can add an HTML anchor.  So if you had a very long page and wanted to add a link to this particular point in the page  you can add an anchor to a heading.

This is the standard WordPress gallery that has always been available.  There is more on that here »

You can choose the number of columns and choose to crop images to make them fit correctly.  You can set the link but you don’t really need to in galleries.

An important thing to do here is all the Alt Text, this is used by Google (robots) and screen readers for the visually impaired.  It tells them what your image is about and is very important information.

You can also change the image size and add a link to anywhere you want.

There aren’t too many settings here but it is worth noting that you can make quotes look quite pretty when you are using text or passages from other publications.

The cover image block acts more like a heading than it does an image. It allows you to display some short text (usually, a heading) over top of a background image.

I love this because it will allow people to create much more attractive image links with ease.

As you can see you can choose to centre text, make it bold, italic and add a link to your image.

There are a few more settings….

You can make the background fixed so that the text scrolls over it and the image stays in place.  You can have an overlay colour (above in mine it is black) and you can set the overlay opacity.  If you set opacity to 100 the image will not show at all the overlay colour will be solid, above I have it at 50.

You have the button editor here, where you add the button text and the link.

Then you have the formatting options where you can set the background colour, font colour and shape of the button.

You can choose the number of columns you want to have.

Then you can add text/images or pretty much whatever you want.  With text you get the same formatting options as you get with Paragraphs (see above).  This is one that will take a bit of patience and playing around with to get right but I am sure it will be rewarding in the end.

Now this one is definitely going to have a few people yip-yip-yipping!  It has been a long time challenge in WordPress to lay out media and text to sit along side each other nicely and this folks is the answer to your prayers!

You can add your media and text and align the image left or right. 

You can choose whether or not to make it stack on mobile, that is a must as far as I am concerned to give the best mobile responsive layout.  Then you can set a background colour – it’s important to keep text clear and readable.

This is basically a horizontal line or line break as it is also known.  You can choose various settings for your line.

A nice chunk of vertical height for your page- a welcome addition for many who have been fiddling around with extra paragraphs for ages.  You can set the spacer to any height you want in pixels.

Here you simply add in the shortcode that you wish to include in your page.  This could be a gallery code, google maps code, product feed – pretty much anything you would have a shortcode for.

Add a list of archives to your page to make it easy for people to click and visit an archive.  This could help SEO if used carefully.

There are a few settings, you can choose to have your list displayed as a Dropdown list and you can show how many posts are in each month – post counts.

Display a list of the categories in your website.  This can be useful if you want to encourage people to delve further into your blog.

There are a few settings, you can choose to have your list displayed as a Dropdown list.  You can show the hierarchy, i.e. if you have parent and child categories it will display the tree.  You can show how many posts are in each category – post counts.

Display your sitewide latest comments.

Choose whether you display the author avatar (profile image), not all sites do this.  You can display the comment date and even an excerpt from the comment.  Also choose how many comments to display.

Display your latest posts.  This can be effective to display at the end of a post where you want people to be encouraged to read more from your blog.  It is effective and good for SEO.

You can choose the order that the posts are displayed, also you can just choose to display posts from one category – this is very useful if you want to keep your reader focused.  You can also decide on the number of posts you want to display.

The code block is for writing technical pieces of code. It maintains all spaces and tabs so your code is rendered exactly as you type it.

With the custom HTML block, you can add any custom HTML code you’d like, and see a preview right in the editor.

The preformatted block is very similar to the code block. Preformatted blocks keep all spaces & line-breaks intact, and display text exactly as you type it. However, they don’t use the HTML <code> element, and come with a few more styling options.

The pullquote block takes an existing piece of text from the main content of your article, and calls attention to it in a graphical way.

There are some settings with it including the top and bottom border, background colour and text colour.

This one is really quite a revelation.  It has been a challenge to non-developer users for a long time to be able to add a table without writing code.  Now it is here and I am sure a very welcome addition for many.

First of all you decide on the number of columns you want to have and the number of rows – don’t worry you can change it later.

Then you can add your text and you can also add images and cover images to the boxes if you wish.  See the buttons on the bottom right hand corner of the block – many blocks have these.

There are some formatting options as you can see, you can add rows and columns and remove them too.

Tables have an additional settings panel.  You can choose to have stripes or alternate coloured rows.  You can also opt for fixed or flexible width table cells.  Thumbs up all round for this block.

The verse block is for writing poetry and other literary expressions. Unlike traditional paragraph text, it leaves all spaces & line-breaks untouched, displaying them exactly as you enter them.

You can add images and cover images by way of the buttons at the bottom right of the block.

Here’s how the formatted poetry block looks on the front end.