Gutenberg is the new way of editing WordPress sites. It got added to the core of WordPress in December 2018, although you can switch it off if you prefer to wait a bit longer before trying it.

It can be daunting at first – but we think it’s worth persevering. Developing themes and plugins in WordPress will now require new, and arguably more complex, skills than before. For this reason, a lot of techie developers have been nervous about it. However, for the average site user, it is an excellent development, in our view. It gives you the chance to edit and present your content in a clearer way. We also think it’s fun!

Blocks

Instead of editing a page as though it was a long document you now edit it using the blocks (also called ‘Gutenberg blocks’). The blocks are chunks of content within a page and are formatted for various types of content – text, headings, and images, embedded video, and much more. You just need to choose the right type of block for your content. There is even a block for verse if you’re feeling poetic! The exact way (colour, font, size of text etc) that your blocks will display is set by your theme.

There is a whole array of blocks that come as a standard part of WordPress and these are being added to as designers and developers release new blocks in plugins (both free and premium ones) to give you even more scope and flexibility as you add content to your site.

We’ve put together some useful links for you, organised into sections. You should find what you are after here, but if not check out one of our classes or pop us a question on Twitter (links at the bottom of this blog post) and we’ll do our best to help.

General overview and introductions to Gutenberg

WordPress.org has a thorough intro to the new way of editing your WordPress site.

WPBeginner has an extensive and clear set of introductory tutorials about Gutenberg. We especially like the WPBeginner tutorials as they usually offer the choice of a video version or a text version so you can choose the one you find is best for you.

Gutenberghub has a lot of information about the different blocks and how to edit them.

Go Gutenberg also has a good set of introductions to the various new blocks that come with WordPress.

Keep up with news about Gutenberg

Gutenberg Times is a newsletter and site with regular updates about all things new in Gutenberg – edited by the excellent Birgit Pauli-Haack.

Extending Gutenberg

Some theme designers are now changing their approach to themes and plugins so they benefit from the new functionality that Gutenberg allows. Some are releasing new themes that take into account the new options within Gutenberg. Others are releasing single blocks or groups of blocks that you can add via a plugin to add extra blocks to the standard ones. Once you have such a plugin installed your ‘extra blocks’ will appear as options when you start a new block in a page or post.

Here are a couple of the main ones:

• Coblocks
• Atomic Blocks and Theme
• Jetpack, one of the most-used plugins for WordPress sites, will also add some extra blocks to your block options if you have it installed – a FAQ block and some other data related blocks.
• a useful round of up single-purpose plugins to give you extra blocks in Gutenberg – these are plugins that give you one extra block (eg a gallery block) that is intended to be very versatile and there are 94 mentioned in this useful article from Gutenberg Times. Quite a few are premium/paid-for plugins.

Zuzana‘s quick tips for social media platforms and Gutenberg

You can embed your Twitter, YouTube, Facebook, Spotify accounts (and many other social media accounts) via the Embeds blocks. Here are some notes about the quirks of the various platforms when using/embedding them in Gutenberg on your WordPress site.

• Twitter supports live feed.
• Instagram only allows you to embed individual posts, not the feed of a person.
• Spotify allows you to embed a whole playlist or a song, but you’ll only get a preview of it (30 seconds). If you want to listen to it all, you need to login to Spotify and listen to it from there. I believe the same will be for SoundCloud as well. Also, the share buttons from Spotify that give you the URL to add to the Spotify block are only available from within the app, not from the browser version – just something to remember, took me a while to realise that!
• Linkedin does not support embeds in other sites. There used to be a few WordPress plugins allowing you to embed LinkedIn content, but none of them has been supported for a while – and this is because LinkedIn removed the support for this feature. Even building a new Gutenberg block won’t help to get around this issue, without LinkedIn API.
• Customising social media buttons – this depends on how the user adds the social media buttons. Plugins like “Ultimate Social Icons” has an option to choose from the designs. Beyond that, you can customise the individual icons with CSS in the customizer (if you know how!).
• As for the right way to embed YouTube videos: When it comes to Gutenberg, there is a YouTube embed block, so I believe that will be the right way. However, if you chose to embed YouTube video with the iframe option that is available on YouTube, you have control over when to start playing the video, whether you wanted to display the controls or not, so in some cases, this will be the better way. To add the iframe, you have to select the custom HTML block rather than the YouTube embed block.

About Elisabeth and Zuzana

Elisabeth Klaar and Zuzana Kunckova both offering various aspects of website design and teaching. You can follow them on social media or visit their websites or more information.

• Elisabeth Klaar can be found at Oak Tree Studio and on twitter @lammas_leaves
• Zuzana Kunckova can be found at Zuzana-K and on twitter @Zk433