WordPress Gutenberg Blocks and How to Use them

WordPress Gutenberg Blocks and How to use them

Johannes Gensfleisch zur Laden zum Gutenberg c. 1400 – February 3, 1468) was a German blacksmith, goldsmith, inventor, printer, and publisher who introduced printing to Europe with the printing press. His introduction of mechanical movable type printing to Europe started the Printing Revolution and is regarded as a milestone of the second millennium, ushering in the modern period of human history.
Wikipedia

Having studied the new WordPress Gutenberg editor in detail I have now decided I love it. I cannot think what all of the fuss was about or why there was so much opposition to it. It brings some great new editing capabilities that people have never had before and it is a winner for me!

Some people might wonder why WordPress has done this? Well I guess that if you just write a few paragraphs and are happy with a standard look then that is great and you probably don’t need blocks. Having said that, if you wanted to add a table or an attractive image link everything is now possible. If you want to get even more adventurous with layout and colours you will very quickly see why blocks are for you. Also it makes it so much easier to add things like Video, Audio and even buttons – all of which were probably a bit of a challenge previously.

Writing with blocks is not actually that difficult. For those who don’t like it you can always insert a classic editor block and work away as normal.

For those who want to embrace the new WordPress editor, here are all of the block options so far and the ones you are most likely to use…

Common Blocks

These are mostly self-explanatory and standard apart from Soliloquy, which is a an image gallery I use in my websites. Soliloquy is a slider gallery, this is an example of a top quality plugin developer creating their own block for the editor.

Some of the blocks have a few settings whilst others are very simple and have no settings. The audio, file and video are upload blocks and don’t have settings. The list is a bullet point list, so no settings apart from the ability change it to a numbered list.

Here are some examples of the Common Blocks that have more settings…

Paragraph Block

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.

Heading Block

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.

Gallery

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.

Image Block

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.

Quote Block

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.

Cover Image

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.

Layout Blocks

There are a couple of really exciting blocks here, which will certainly put a smile on some faces. The media and text block, to give a perfect layout for image and text side by side. Then the columns block to make your text look a bit more interesting.

The page break is self-explanatory – to enable you to split your post into pages. The More link is the standard WordPress break that allows you to create an excerpt for your post with a link to read the full text.

Again, most of the Layout Blocks have a few settings that need a little more detailed explanation …

Button

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.

Columns

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.

Media & Text

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.

Separator

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

Spacer

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.

Widget Blocks

There are some pretty good things here too. It has always been a bit of a struggle to display comments anywhere else or to just randomly add a list of categories for people to click but here it is all done in blocks.

There are bound to be loads more widgets available here in the future. Anything from galleries to product carousels, from Google maps to shopping carts.

Shortcode Widget Block

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.

Archive Widget Block

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.

Category Widget Block

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.

Comments Widget Block

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.

Embedding Blocks

The Embed blocks don’t really have any settings. You are provided with a box in which to paste the URL of the video or post you wish to embed and that is all you need to do. Embeds have been very easy in WordPress for a long time – these are examples of some of the most popular …

Formatting Blocks

Classic Editor

The first I am going to cover here is the classic editor. This creates a block that gives you the original WordPress editing experience. I have been using a mixture whilst writing this post but I have found that the classic editor has come in very handy at times.

You can see you have the usual editing bar at the top and it does not have any other settings.

Code Blocks

There are three blocks here CODE, CUSTOM HTML AND PREFORMATTED. These are really reserved for folks who know how to write and embed HTML.

Code Block

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.

HTML Block

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

Preformatted Block

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.

Next we have the rest of the very useful blocks in this category.

The Pullquote Block

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.

The Table Block

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 Poetry or Verse 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.

So there we have it

So there you go the standard WordPress Gutenberg blocks and how to use them. There are some absolutely fantastic blocks in here, some really welcome additions. It’s going to take a little time to get used to but once you do I am sure you will have a lot of fun with it.

There will be a myriad of plugins offering all kinds of new and exciting blocks in the future, some will be very sophisticated I am sure.

All in all I am loving the new Gutenberg editor – well done WordPress!