The goal of this blog post is to dive into the existing Gutenberg content blocks and document some useful examples for all skill levels. Let’s see what’s possible by simply configuring existing blocks to make clean, quick, functional layouts and spicing up your WordPress site with Gutenberg content block recipes. No code required.
Who benefits from Gutenberg Content Block Recipes?
Anyone with a basic understanding of WordPress can build the following examples now. I hope that everyone from non-coders to engineers will appreciate how easy it is to build clean, simple layouts with these exciting features. Seasoned developers may come to realize that they can save time by opting for a solution that’s already baked in, or at least glean some inspiration for making your own custom block that functions in a similar fashion.
I’m using the Twenty Twenty theme for the remainder of this article. If you’re using Gutenberg content blocks on a different theme, the functionality should be the same, but the appearance will probably change. At the time of writing this, I’m using WordPress 5.3.2.
How to Add Gutenberg Content Blocks to Your Page
Content blocks can be found under the plus symbol on your post or page. Blocks are organized by categories.
Currently, the default categories in this order are:
- Most Used
- Common Blocks
- Layout Elements
There’s a large selection of useful blocks, but these recipes below should give you a good starting point for exploring the possibilities.
Here’s a list of the Gutenberg content blocks we’ll be using, and where to find them in the WordPress Editor:
Layout Elements → Button
Common Blocks → Cover
Common Blocks → Gallery
Layout Elements → Group
Common Blocks → Heading
Media & Text:
Layout Elements → Media & Text
Common Blocks → Paragraph
Formatting → Pullquote
Widgets → Latest Posts
Layout Elements → Separator
Hero Block with Headline, Text, and Background Image
Build a classic Hero Block. This technique can be used anywhere emphasis is needed on a page. The Heading Block can be changed to accommodate context H2, H3, etc. Or, just use a paragraph and add some text.
Begin with a Cover Block. Set the background image to your liking. Insert a Heading Block and a Paragraph Block.
Details: Experiment with Background Opacity and Overlay Color Options in the sidebar. If you select the Fixed Background option, you can create an instant Parallax scrolling style for your block. The focal point picker option allows you to drag the image around, or you can manually set the image positioning with horizontal and vertical positioning fields.
Alternate Version 1 — Divider with Image
Need something less indulgent? Refactor this block to be a narrow divider with image.
Leave only the Heading Block and adjust overall height. In the sidebar under dimensions, set a minimum height in pixels.
Details: I’m using 175px as the minimum height in pixels, but you’re the chef!
Alternate Version 2 — Divider with Pullquote
This is a great block for highlighting a quote from someone. Use sparingly.
Add a Pullquote to the Cover Block.
Details: I find the author attribution color by default to be a bit faint. Be careful with legibility contrast here.
Gallery Block with Headline and Background Color
This is a nice way to add some flavor and color with custom adjustments to your photo gallery.
Start with a Group Block. Add a Gallery Block. Add a Heading Block and a Three Dot Separator Block. Use Spacer Blocks at the top and bottom to create desired negative space.
Details: The number of columns can be set in the sidebar options. You can opt to crop images, which I’ve done here. Or, you can let them scale into the available space. Click on each image in your gallery to add a caption. You’ll see an option to add a link to the caption as well.
Media & Text Block
Create a Multi-Column Block with the image on one side and the text on the other. This built-in block works great, and with a few tweaks, something very expressive can emerge.
- Media & Text
Add a Media & Text Block to your page. Adjust text content area to suit.
Details: Remember that you can nest blocks. Try adding a button or even a gallery, if it makes sense! Select the outer containing block and set the background color for more emphasis. You can drag the vertical bar left to right, in order to set the ratio between image and text. I would recommend using the “stack on mobile” setting to allow for a nice layout when the block is viewed on mobile devices.
Alternate Version — Full Width
Utilize the full-width option to make a bolder impact.
Click and select the outermost container. Select the Full Width setting from the toolbar for a more dramatic look.
Recent Posts Block
This is great if you want to alert your readers to other recent posts on your site.
- Recent Posts Block
This one requires only the Recent Posts Block, which looks great right out of the box. There’s a lot of customization possible here; so, read the details below.
Details: The settings for this allow the user to limit the amount of content, show only the excerpt (we’re doing that in this example), or show the full post. You can toggle the date, set filtering order, category, number of items, and columns. In our example, we’ve chosen two columns.
Create a call-to-action using the Cover and Button Blocks.
It’s super-simple to create a nice call-to-action using existing content blocks. Embed a button in the Cover Block.
Details: Experiment with the button settings. Click directly on your button, then adjust settings in the sidebar. Border Settings will allow you to set the Border Radius for a more rounded appearance. You’ll also find the option to open the linked page in a new tab.
Now It’s Your Turn
I hope these have been inspirational for you, or at least have whet your appetite for what can be done with this useful tool. I encourage you to go see what you can make with what’s already available in WordPress.