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.
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
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.
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:
- Gutenberg is the biggest ever open source software launch
- How to use the new Gutenberg editor in WordPress
- How to use columns and rows in Gutenberg
- Reusable blocks in and templates Gutenberg
- How to add 5 different image blocks in Gutenberg
- Text blocks in Gutenberg
- Gutenberg Videos Arrive at OSTraining
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".