This post is being written with Gutenberg!
So, I will be the first to admit I have not been the biggest advocate for Gutenberg as noted in this post – and I am still not happy about how the whole thing went down and wish the WordPress team would have listened a bit more to their users!
But, I do have to give credit where it is due – and the more I work with Gutenberg, the more I am starting to like it.
Will we be using Gutenberg going forward for clients that it fits with to ensure they are getting the best experience both on the front end and backend.
We are going to take you through some of the things we are starting to play with that we love and talk about some of the add-ons that are looking pretty cool to! We are just starting to explore it more on a development side as well so we hope to do a future post once we wrap our heads around that side of things!
I have updated many sites to WordPress 5.0 with no major issues so far.
If you are looking for more information about upgrading, this post may help you.
If you HAVE upgraded then you can install the Classic Editor to keep Gutenberg from being enabled on your existing content. The Classic Editor developers have noted they will keep the plugin updated at least through 2022.
Once you have that installed go to SETTINGS > WRITING and select whether you want the Classic Editor or Block Editor activated.
If you choose Classic Editor then check Allow Users To Switch Editors to YES as shown in the image below. Then when you are on the post screen you will see a new box called EDITOR and you can change any post to use Gutenberg easily!
A Bloggers Writing Dream
If you are a blogger – then you should 100% start to get acclimated with Gutenberg. If you are using a page builder of some sort – this can take the place of that extra plugin and is probably a cleaner experience.
I have never been a fan of page builders because of the “bulk” and because many seemed more trouble than they were worth – but Gutenberg I do think is a great option.
Improve Your Advertising
As a blogger – making money is everything! One of the things we love about Gutenberg is the ability to reuse a block to place it anywhere you want within a post. While there are great ad plugins – this is even a better option since you can place ads exactly where you want them within a post giving you some great control and ability to test different locations easily.
There is also a lot of different ways to do this, from pre-made banner ad blocks from plugins or using the HTML block.
REUSABLE HTML BLOCK
In our opinion the reusable block is going to be a game changer. Imagine an add, call to action or other item that you want to use throughout your website but only on certain posts or pages. Now you can do that!
In our example below we added a HTML block to our post, inserted the code from ShareASale for an ad we want to promote on several posts and then saved it as a reusable block so we can then add it to other posts that might be related to that product.
Another great way to use a reusable block is to create segments of related post by category that you can show on specific posts. The options are really endless for this block.
Improve Your Engagement
Improving reader engagement is the key to success on any website! By using a block that can show posts related to the current post a visitor is on you can help guide them to related articles!
By default Gutenberg comes with a Latest Posts blog where you can customize how many posts to show and what category to show them from. This just shows as a list of posts – and can be awesome either at the end of a post or even in between paragraphs in a post.
POST GRID OR LIST
By using a Gutenberg Block plugin like Atomic or Stag you can further improve the latest posts block to include images, some post content and more.
Below is a quick sample of a 3 column post block with images and titles. You can see the titles are too big and obnoxious but you can use the additional CSS class field to customize the sizing just for this block.
STAG & ATOMIC BLOCKS PLUGIN
These plugins are pretty awesome and offer some great creative elements. Below we will go through some of what is included in these plugins that can up your Gutenberg game!
There are a few more things you can explore – we are just profiling the items we particularly love! Both of these plugins have some similar blocks – so either once you download will be good. We found Atomic to be a little less buggy in our tests.
We are fans of accordions for making content cleaner for those pages or posts that have a lot of content. Add as many accordions as you would like – or even just one.
Adds a full image or color background with text and a button on top. We did find this one to be glitchy as we could not get the button to show, but we like where this is heading! We did like that once you add the image – you can choose a background color to give the image a color hue!
In the example below you can see we gave the image a blue overlay.
This one was only available in Stag! Add some important stats in a horizontal block! Edit the background colors, text and counter color to match your brand.
Place a list or grid of posts in your post – or at the end! You can choose specific posts from a category, choose sort order and select what you want to show. This is a great way to really up your related posts game and encourage users to stay on your site longer.
Add a cool pricing table to your page if you sell services or products!
Editor Blocks Plugin
Another great Gutenberg plugin option that has a few more options than the plugins above.
This one will be good for traditional pages as it offers a testimonial block, team members block, full width wrappers and so much more. We will build out with this one at a later date to show what it can do!
Creating Custom Blocks
This is just as awesome as the reusable text blocks! Creating a custom Gutenberg block allows you to have so much control over what you create, but yes, it does require some coding.
We do a lot of affiliate marketing on blogs and since we do not like theme builders or page builders, we have been doing our review posts and things in HTML. And boy, can this get messy.
Below is a short screenshot of an existing review post that has 2 columns and a lists and all the normal review stuff. Every item we add we have to mess with this code.
Now we do not have to anymore because we can create custom blocks! We use ACF Pro to create “fields” then we added some code to have those fields apply to a block called “Product List Item”. When we choose that block we now get a neat block with the following fields:
- Product Image
- Product Title
- Product Description
- URL Text
Then all we have to do is put the content in those fields. Then the front end will display it beautifully when we add our CSS! Below is our custom list of products!