| WordPress

Did You See These 5 Really Cool Gutenberg Features?

Text and image blocks may be the most frequently used blocks in Gutenberg, but there are many others that come standard with WordPress new editor.

Previously you would have had to install a plugin or use HTML to get the same results. Let me show you some of the really cool and useful new features in Gutenberg.


Feature #1. Button blocks

The Button block makes it easy to add a button to any page. If you want to suggest to visitors that they might want to sign up for your newsletter, just click on the + icon and select ‘button’ from the layout section of the menu.

Here you can add text to the button itself and add an URL for the button to go to when clicked. This can be an external web address or another page on your site.

Did You See These 5 Really Cool Gutenberg Features?

The block toolbar allows you on align the button, and use bold, italics and strikethrough. On the far left of the toolbar you can choose between various types of buttons: rounded, outline and square.

On the right-hand column, you can choose text and background colours and add a CSS class if required.


Feature #2. More and Page Break blocks

The More and Page Break blocks lets you control how much text will appear at any one time.

Click on the + icon and insert More. The content before this block will be shown in the excerpt on your archives page. On the right-hand side you can choose to hide the excerpt from appearing on the page itself, giving you the chance to write a different introduction for the archive page.

The Page break lets you split a long page over two or more pages, creating pagination links at the bottom of each page. Personally I would like to see arrows here instead of page numbers, but these can be created using CSS.


Feature #3. Embed blocks

Embed blocks let you easily embed content from a wide variety of external services. This list is likely to continue to grow by already it has all the usual favourites and many more, including Twitter, Facebook, YouTube, Soundclick, Vimeo, Issuu and Instagram.

You can create one of these blocks the normal way, but clicking on the + icon and selecting the correct block.

But Gutenberg provides a handy shortcut. If you are in a text block, just paste the url you want embedded and Gutenberg will embed it automatically if it is one of the services listed. For example, by just pasting

https://twitter.com/OSTraining/status/1074812244528107520
the editor will do the rest.


Feature #4. Widgets as blocks

Previously if you wanted to add any widget into the body of a page or post, you would need a plugin, but now you can add these as a block.

If you go to the Widget tab on the blocks menu you will see the widgets that are available to you. These may change depending on what additions you have made to your site.

Add the latest posts block and you instantly have a list of latest articles published on your site.

You can adjust the settings for these widgets from the right-hand sidebar. With Latest posts, you can decide the order of the posts, and whether they should just be from one category.


Feature #5. The Formatting blocks

The Formatting tab provides access to several useful blocks that will give you greater control of how your content looks.

Classic takes you back to the pre-Gutenberg editor, while Pullquote, verse and preformatted let you give snippets of your text additional emphasis.

Code lets you add code snippets, while Custom HTML lets your add HTML and preview it in place.

The Table block is great for charts and data and from the right-hand column you can make alternate rows striped with just one click.


Conclusion

The formatting and layout blocks give you great control over how your site will look, without having to resort to custom coding.

More Gutenberg goodness:


The video introduction to Gutenberg

WordPress 5 is here with a brand new editor called Gutenberg that changes the way posts and pages are created and edited. This video is your complete guide to Gutenberg! Thanks to our friends at Glowhost for making this video possible: Save 60% on your first invoice when you host your WordPress site with GlowHost. Click here and use the coupon "WPGUTENBURG".


About the author

Born in Zambia but living now in Cape Town, South Africa, Libby Young started out as a journalist. She taught herself HTML when the company where she was an sub-editor made the transition from CD-Rom to the web 20 years ago. Since then she has developed content-rich websites using a variety of open source content management systems.