Gutenberg Page Layouts

Gutenberg has made building page layouts really easy. There are a number of advantages of the block editor. Here I am going to focus more on the types of blocks available to build beautiful page layouts.

The core blocks are in themselves enough to build page layouts without depending on the theme templates. The block plugins however, provide not only additional blocks, but also enhanced versions of some of the core blocks.

Useful blocks for building simple page layouts

Given the number of blocks available, it can be sometimes overwhelming when you are working on your pages.

Here are some blocks that are simple, easy to use and can help us build some nice layouts.

The gallery block from the core blocks provides a number of options to create beautiful galleries. If you are a blogger, or have a photography site, you can use these gallery blocks to display your beautiful pictures with as few words as you like.

Tiled Gallery
Tiled Gallery Block
Slideshow Gallery
Slideshow Gallery Block
Gallery block from Kadence blocks

Cover Block

This is one of my favorite blocks. I remember the days when I struggled to display a banner on the home page for my clients, where the text had to sit on top of the image perfectly centered and responsive. With the cover block, all of this is possible with a few clicks. This block is part of the core blocks and makes it a breeze to add an image with an overlay, text and a call to action button.

The nice thing about the cover block is that, you can use it in any part of your site, not just as a banner on your home page. You can add a call to action button using a cover block as part of a promotional post you write. You can save this and use it in multiple places through out the site.

The core cover block provides only a few options, but is easy and simple to use. The simplicity is what makes it super easy and quick to setup.

Cover block example
Another cover blcok example

Group/Container Block:

The group/container blocks can have multiple blocks inside them. They are all held together by this one background block. You can add a background color/image to the entire set of blocks and also save it as a reusable block.

These blocks make it simple enough to create layouts using columns and buttons, which previously required the use of theme templates.

The group block – which is part of the core blocks, only gives us the option to add a background color or a gradient. The container blocks from other block plugins are similar to the group block and have more options to customize along with the ability to add an image or a video as the background.

Use these blocks to make your site more personal and aligned with your branding.

Container block from Stackable

Media & Text Block

This is one of the easiest blocks to create beautiful layouts. This block makes it easy to add an image/video and some text next to each other, without having to worry about alignment, margins, padding etc. My favorite feature of this block is the ability to flip the placing of the media and the text horizontally.

The text block is actually more than just a text block. You can add any other block inside the text block. You can add a simple heading, a column block or any other block to go with the image/video.

Media & Text Blocks

Page layouts

Most of these layouts do not have any additional CSS. Although we can build custom page layouts using any WP theme, Gutenberg ready themes make it even more easy to build pages with the block editor.

Portfolio Layout

Here is a portfolio layout using only the column and the image blocks. I created a simple template to display my portfolio on this site. I wanted to replicate that page using Gutenberg. It was very simple and easy. With this new layout, it is easy to switch the portfolio pieces and arrange them anyway I want.

Portfolio Layout with Gutenberg - Front end
Portfolio Layout using Gutenberg
Portfolio layout with Gutenberg - back end
Portfolio edit screen

The post edit screen and the front end page look very similar. This makes it very easy to visualize the page layout while you are building the page. 

Similar layouts can be built using the “Feature Grid” block from Stackable or the “Post Grid” block from, the Ultimate Addons block plugin.

About page

The profile page layout in the Atomic blocks plugins is easy to use and can be added with a single click. You can modify the text and images as needed. This provides an easy way to build a profile page or an about page in just a few minutes.

Product Page Layout

This is also from Atomic blocks’ layouts. This layout can be used as is by just changing the text and images, or can be modified to match your branding and site colors.

Simple layouts using the column blocks

The resume page layout was created using columns of different widths. This layout was built using only the core blocks like the heading, paragraph and the list blocks.

Resume Layout using column Blocks

The “Plan Your Trip” part of this page is also built using columns.

Column blocks used to build a section of a page

Post Layouts

Displaying custom post types is more easier than ever with all the different types of post type blocks available from the different block plugins. This is one feature I feel is missing from the core blocks. We can show the latest posts which are the main blog posts of the site., but if we need to display custom post types, we need a different plugin.

Fortunately, there are a number of different post layout blocks available for us to choose from. Here is a custom posts layout using the “Posts Grid” block from Caxton Blocks.

Webpage layout using the Hestia theme

This simple layout was built using the Hestia theme. Core blocks and a few blocks from block plugins were used to build this layout.

251

Webpage layout using the TwentyTwenty theme

This is also a simple and easy layout built with core blocks and blocks from Stackable. Read more about this layout here.

Get tips and tutorials on using the new block editor, WordPress themes and plugins!

WordPress 5.0 & Gutenberg – Is your site ready?

WordPress is used to power many small businesses because it is relatively simple to set up and use. Once you have proper systems in place, WordPress makes it very easy for you to run your business.

If you are a small business owner, I am sure you use your website to let the world know about your products or services, generate leads, keep in touch with your customers and a whole lot more. You entire business depends on your website.

So, it goes without saying that keeping your website up and running the latest versions of WordPress core, themes and plugins is extremely important. But, we may just have to break that rule when the new WordPress 5.0 comes out.

WordPress 5.0 has been scheduled for release on Nov 19th, which is just around the corner. This is one of the most important versions as Gutenberg – the new editor is being integrated into the core. As always new versions of WordPress bring in a bunch of new features. This time though WordPress is getting a major overhaul with the addition of Gutenberg.

If you have been using WordPress, and having been keeping up with the news, you probably heard about Gutenberg and have already tested on your site. Some users love Gutenberg and others just don’t like it. If you haven’t paid attention to it or tried it yet, now is a good time to do so.

Why do we need to be cautious about this update?

Gutenberg has drastically changed the WordPress editor interface and it is coming into core faster than we would like. Everything is different and it will be a while before everyone is on board and gets comfortable with it. 

Gutenberg Editor

As nice as Gutenberg is, it might not work with all the plugins or the theme on your site. I know that many plugins and themes are now  Gutenberg compatible, but there might be some which are not yet compatible with the new editor. 

If you are not sure, it is probably best not to update to the new version just yet. Stay on the 4.9.8 version until you are sure your site works well with the new editor.

One more reason to stay with the old version is that 5.0 is scheduled to be released right before the holiday season and specifically the week of Thanksgiving. If you have online sales, it might be a good idea to wait until after the holiday season to update. You do not need to be stressed about your website when you should be focusing on the holiday sales!

What can we do for a smooth transition?

There are many things that you can do in order to make sure that you site is ready for Gutenberg.

  • The first thing is to test. If you haven’t done so, please test. There is an easy way to install Gutenberg from your dashboard. Please make sure you test it before the WP 5.0 comes out. 
Install Gutenberg from WordPress dashboard
  • Installing Gutenberg on a live site should not be an issue at this point. I am using Gutenberg to write this post. If you have a lot of plugins and are not comfortable installing on a live site, create a staging site to test. 
  • Try to create posts and pages using Gutenberg. 
  • Check your posts, pages, forms, page builder layouts (if you are using any), custom fields, SEO fields etc.
  • If there are multiple people managing the back end, make sure everybody has a chance to test Gutenberg and that they are on board. 
  • If a plugin or theme is not compatible with Gutenberg, contact the theme or plugin developer and ask for help.
  • If you have a web developer maintaining your site, contact them to ask if they have a plan in place for when the new WP version comes out.
  • If you are not comfortable with the new editor or if any of the plugins are not working with Gutenberg, you can install the classic editor plugin.
  • In fact I would recommend installing the classic editor anyway so that if you have issues with the new editor or if it is just overwhelming, you can just use the classic editor which is familiar. This will help you make a smooth transition.
  • If you are on managed hosting, please find out if the auto update is on. If you do not want to update to the new version right away, ask your hosting if they can turn off the auto update feature for WordPress 5.0.
  • When WP 5.0 is released, you can use a staging site to test it out before updating it on your live site.

Things might get disrupted for a while and knowing how to deal with it ahead of time will help. 

A few useful articles about Gutenberg and the new WP version

https://www.liquidweb.com/blog/real-world-guide-using-gutenberg/

https://wptavern.com/wordpress-to-support-classic-editor-for-many-years-to-come-plugin-and-theme-markets-expected-to-drive-gutenberg-adoption

https://www.advancedcustomfields.com/blog/acf-5-8-introducing-acf-blocks-for-gutenberg/

https://wptavern.com/contributing-to-gutenberg-a-new-contributors-experience

Reusable Blocks in Gutenberg

One of the cool features of Gutenberg is reusable blocks. These are custom blocks that can be created while you are writing your post. You can save them and can re-use them later in another blog post or a page. It is very simple to create a reusable block.

Where can I use reusable blocks?

Reusable blocks can be used to create call to action buttons, add images that can be reused, add related posts section on your blog posts/pages etc.

Reusable Call to Action Buttons

One of the best use cases for reusable blocks are call to action buttons. You can create multiple call to action buttons and inserting them in your posts or pages will be a breeze. The best part is that if you want to change the button text or color, you only need to change it in one place. Everywhere else gets updated automatically. 

On my Gutenberg testing site, I created a demo landing page to offer a discount on WordPress themes. If I want to create a blog post about it to drive traffic to the page, I can create a call to action button that is linked to that page. 

Now, converting that to a reusable block makes it easy for me to access that block elsewhere if I want to. If I have a big site with lots of pages, I would naturally want to place this call to action button in multiple pages to drive traffic to the landing page. I can now insert the same call to action button on another page or post with a simple click. 

Inserting a reusable block

Some interesting ways we can use the reusable blocks

Newsletter signup forms or email signup form – Newsletter sign up forms can be displayed anywhere in your post usually with a shortcode. Gutenberg has a shortcode block which can be saved as a reusable block and used on multiple posts or pages.  If you need to change the form shortcode, you just need to change it once and re-save the block. The code gets updated everywhere.  

You can create pricing tables or column layouts (which is still in beta) that can be reused easily elsewhere on your site.

Recently I found a neat little plugin that let’s you display your reusable blocks on your widget –  Reusable Gutenberg Blocks Widget. This lets you select your reusable block from a drop down and add it to your sidebar or footer.  

Have you tried reusable blocks yet? 

All you need to know about Gutenberg

 What is Gutenberg?

Gutenberg is the new WordPress editor project named after Johannes Gutenberg. It is more than an editor replacement. Gutenberg is the new way of managing content on WordPress. There are mixed reactions on whether this is good or bad. My initial response was not a good one. When I first tried Gutenberg, I was not happy. I lost the familiar editor, lost my meta boxes and a bunch of other stuff that I am used to seeing on the post or page editor. I tried the chamber dashboard plugins with Gutenberg and half the stuff did not show up. I was shocked to say the least. What is going to happen to our plugin users when Gutenberg goes live and all these meta boxes disappear? Continue reading “All you need to know about Gutenberg”

Verified by MonsterInsights