Although there may have been a time I was not thrilled about it – Gutenberg is growing on me! While there is still reasons we will custom code websites, we are starting to implement Gutenberg more often where it makes sense. The real fun for us is in creating custom blocks in Gutenberg which gives our clients even more creative freedom while allowing them to still easily update their website.
Creating custom blocks is one of the best – and easiest ways to manage your page formatting! Custom blocks in Gutenberg can help you create a block that is custom to your unique needs and can be formatted to layout exactly as you wish.
There are several ways to create Custom Gutenberg Blocks, but for this tutorial we are going to try and showcase the easiest way we found so far using 1 plugin called Lazy Blocks. This is NOT an in-depth Lazy Blocks Tutorial – just a tutorial to create the sample resource block and page we noted below.
What Are Custom Gutenberg Blocks?
Custom Gutenberg Blocks allow you to completely rethink how you display your content! While there are a lot of really great add-on plugins for Gutenberg like Kadence or Kioken that have some great features like accordions, tables and more – there are still going to be times you want something more custom.
While in some cases you may be able to make existing blocks work, we have found creating custom fields to just be easier!
Why Do I Need Custom Blocks?
Well – just like most things in life you do not “need” custom blocks, but if you like clean code, less plugins, faster websites and the ability to really create blocks that are unique to you – then custom Gutenberg blocks is the way to go.
There are a lot of Gutenberg plugins out there that have a ton of block options – yet even I found them overwhelming. I knew what I needed for a project – but there was no plugin that did it easily without me building out layers and things.
So I created it – and many more since then.
Custom blocks are great because they are custom for your site – and you do not have to have plugins with a lot of code and resources that you will never use loading down your website or overwhelming you with options.
What Is The Lazy Blocks Plugin?
Lazy Blocks is what is called a “visual constructor” that allows you to easily add fields as needed to create a block that you can use in your page or post. The drag and drop editor makes it very easy to use.
We are not going to cover everything this plugin does for this tutorial – only exactly what you need to create the blocks specific to this tutorial blocks.
Be sure to install the free Lazy Blocks Plugin before you get started on the tutorial below!
What We Are Going To Create Using Custom Blocks?
We will be providing the exact steps and code for the following:
- Horizontal row block
- Vertical column bock
You can see both examples of what we are creating below!
The tutorial code below is setup so you can use EITHER option at any time! You do not need to add 2 separate code lines to get this to work either vertically or horizontally.
Horizontal Row Block
Vertical Row Block
Tutorial For Adding A New Custom Block
1. Adding A New Block
Go to LAZY BLOCKS then click ADD NEW. Make sure your editor is set to block editor or you will not see the fields you need to see. You should see the screenshot shown below if Lazy Blocks is ready to use.
2. Creating Your New Block Fields
Now you are ready to roll – while for this example we know what fields we need, you need to think carefully before you start creating a custom block about the exact fields you will need. I suggest sketching out your vision so you have a clear plan.
For example below is the block we are going to create and I have noted exactly what fields we need. There are 5 total fields needed – 1 is an image field and the others are all text fields.
The Block Fields You Need To Enter
Below are the exact steps needed to create a custom block with the 5 fields shown above.
You ONLY NEED TO ADD what is noted below.
There are a lot of other fields – but you do not need to worry about anything other than what is below for now!
So for the 5 fields, each field will have a Label, Name and Type entry.
1. LOGO FIELD
Click ADD CONTROL – in the right you will see fields that need to be completed as follows:
Label: Resource Logo
Name: Will auto populate based on the text from the label field – make sure it is resource_logo
Type: Image
2. TITLE FIELD
Click ADD CONTROL – in the right you will see fields that need to be completed as follows:
Label: Resource Title
Name: Will auto populate based on the text from the label field- make sure it is resource_title
Type: Text
3. DESCRIPTION FIELD
Click ADD CONTROL – in the right you will see fields that need to be completed as follows:
Label: Resource Description
Name: Will auto populate based on the text from the label field- make sure it is resource_description
Type: Text Area
4. LINK FIELD
Click ADD CONTROL – in the right you will see fields that need to be completed as follows:
Label: Resource Link
Name: Will auto populate based on the text from the label field- make sure it is resource_link
Type: URL
5. BUTTON TEXT FIELD
Click ADD CONTROL – in the right you will see fields that need to be completed as follows:
Label: Resource Link Text
Name: Will auto populate based on the text from the label field- make sure it is resource_link_text
Type: Text
Now your page should look like the below image.
3. Creating A Block Name
When you are done adding fields, click the BLOCK tab to the left of the CONTROL tab you have been working in and do the following:
TITLE: Enter Resource Block
SLUG: Enter resource-block
ICON: Choose any icon, I just chose a post icon for this block.
CATEGORY: Common Blocks
4. Click Publish
In the upper right you can click the publish button to make the block active!
Now your block is created and you can add it to a post or page – but we still have to do one more thing to have it show on the front end.
5. The Frontend HTML Code
This is the part that many people are afraid of – but don’t be! I am going to try and make it simple.
At the bottom of the Controls area where you added your field there is a block called FRONTEND HTML – this is where you are going to put the code to display your block.
Yes – this does require some HTML/CSS knowledge, but you can hire someone to help with this – or keep an eye out for more tutorials that we will provide where you can just copy and paste the code right where we tell you.
So we need to tell the front end of your website HOW to display your new fields. Because we wanted to have this block be flexible enough to be vertical or horizontal we wrote the code to allow us to do that.
Below is the HTML CODE to make the content layout the way we want it. Just copy and paste it into the Lazy Blocks area noted below.
<div class="resource">
<div class="column one">
<img src="{{resource_logo.url}}" alt="{{resource_logo.alt}}" />
</div>
<div class="column two">
<h3>{{resource_title}}</h3>
{{resource_description}}
</div>
<div class="column three">
<button class="linkbutton">
<a href="{{resource_link}}" target="_blank" rel="nofollow">
{{resource_link_text}}</a>
</button>
</div>
</div>Below is a screenshot of where you add the code above.
6. The CSS Code
Below is the CSS code to make the horizontal rows look the way they do in our sample above including the code for the responsive formatting. This code will be added wherever you normally add your CSS.
Please note: while we are confident this could should work – we cannot guarantee it on all websites. Results may vary based on your code and styling!
Copy the CSS code as it is below exactly!
.resource{display:flex;flex-direction: row;border:2px double #c8c8c8;font-size:16px;margin:20px 0;}
.resource .column.two{flex-basis:100%;flex:3;padding:0 20px 30px 20px}
.resource h3{margin-bottom:0}
.resource .column.one,.resource .column.three{flex-basis:100%;flex:1;display: flex;align-items: center;justify-content: center;padding:12px}
.resource .column.three{background:#f8f8f8;}
.resource button.linkbutton{background:#ff9900;padding:12px}
.resource button.linkbutton a{color:#fff}
@media only screen and (max-width: 768px) {
.resource{display:flex;flex-direction: column}
}7. Adding the Block To A Page or Post
Now you can head on over to your page or post and click the add new block icon and search for your block. Insert it into your page, add your content and you are ready to roll!
Click to where you want to add a new resource block and click the ADD BLOCK button as shown below. Then you can search for your block.
Once you add the resource block you can now just enter your information in the fields. When you are done click UPDATE and your block should now be properly formatted and have the right content on the front end of your website.
Making Resource Blocks Display Vertically In a Row
To make your blocks be vertical instead of horizontal is easy! There are just a couple of different things you need to do to make this happen.
1. Go To Your Page And Add A Column Block
2. Change The Column Block To The Number Of Columns You Want
You can set 2, 3 or even 4 columns! We would recommend 2 or 3 at the most or it may get too squished. You may also need to adjust the CSS a bit to ensure the content fits properly.
You do have to hover to the left of the new column area to see the columns change indicator in the right. It can be a little tricky – but just hover to the left and when you see the whole row outlines you should be able to change the columns.
You can see in the image below how it should look when you can change the columns.
3. Add A CSS Class On The Row
In the row image above you can see an ADVANCED dropdown, click that and enter the following text in there.
resource-row
4. Add Additional CSS
There are just 2 additional lines of CSS to add to the CSS you have added above for the horizontal styling. You can place this right in there!
.resource-row .resource{display:block}
.resource-row .column.two{height:275px}Yep – that is it! You now should have a pretty flexible option for building out resource pages.
Questions? Concerns?
While we tested this in a variety of scenarios and had it working perfectly – we know this code may not work on your site. If you need help we are glad to jump in and take a peak to get it working for a small fee.
If you just need a quick eyeball, contact us today and we will see if we can help for small issues you may be having!
Ready to make your nonprofit sing?
We can’t wait to talk about your project. Let’s set up a call.
