In this article, I’ll show you how I used Wicked Block Builder Pro to create the owl-link block as part of the #OwlLinkChallenge.
LearnDash is taking cutting-edge e-learning methodology and infusing it into WordPress. Trusted to power the learning programs for major universities, small to mid-size companies, startups, entrepreneurs, and bloggers worldwide.
Getting Started
First off, I’m using Wicked Block Builder Pro. Wicked Block Builder Pro is a WordPress plugin that makes it super easy to create your own custom WordPress blocks. If you’re interested, you can use the discount code OWLS to get 10% off Wicked Block Builder Pro.
Creating the Block
The first step is to create the block. This part is easy and I did that by going to Wicked Block Builder > Add New.
Configure Settings
You can learn more about the various settings in the Wicked Block Builder documentation. For this block, the only setting I had to enter was the block name (‘Owl Link’ in this case).
Set Up Attributes
Next, I added some attributes to the block. Attributes can be added by clicking or dragging an attribute type. I added a number attribute to hold the ID of our block’s image and called it ‘imageId’. I also added two more string attributes: one named ‘content’ and another named ‘link’.
Build the Block Editor View
I wanted the final output of my block to look something like this:
<div class="owl-link">
<img class="owl-link__image" src="example.jpg" alt="An image">
<div class="owl-link__content">
<p>
<!-- Summary here... -->
</p>
<p class="owl-link__link">
<!-- Link here... -->
</p>
</div>
</div>In Wicked Block Builder, you control your block’s HTML structure by dragging HTML elements and components. So, to start, I added a div element to the block structure. Clicking on an element lets you adjust its settings and add things like classes, inline styles, and HTML attributes. I wanted the containing div to have a class of ‘owl-link’ so I clicked the ‘Add Class’ button in the Classes panel and entered the class name.
Next, I added an Image component. Image components let you select an image when your block is displayed in the WordPress editor. When the block is rendered, the Image component outputs an <img> tag. I mapped the Image component to the imageId attribute so that the selected image would be stored in that attribute.
I added a nested div, this time adding the class owl-link__content.
Finally, I added two RichText components to the owl-link__content div: one mapped to the ‘content’ attribute and another mapped to the ‘link’ attribute. RichText components let you type content directly into your block inside of the WordPress page editor.
Build the Block Front-end View
One of the nice things about Wicked Block Builder is that you want your block to use the same output on the front-end as the back-end, you can skip the step of creating a separate front-end view and Wicked Block Builder will generate it for you automatically. So I skipped the step of creating the front-end view.
Style the Block
Lastly, I added the following CSS to the Styles tab in the block builder:
/**
* Front-end styles
*/
.owl-link {
display: flex;
gap: 20px;
}
.owl-link .owl-link__image {
border-radius: 20px;
height: auto;
max-width: 25%;
}
.owl-link .owl-link__content {
border: 1px solid rgba(0,0,0,0.3);
border-radius: 20px;
padding: 20px;
margin: 0px;
width: 100%;
background: rgba(0,0,0,0.1);
}
.owl-link .owl-link__content p:first-of-type {
margin-bottom: 20px;
margin-top: 0px;
}
.owl-link .owl-link__content p:last-of-type {
margin-bottom: 0px;
}
.owl-link.is-style-owl-link__no-border .owl-link__content {
border: none;
padding: 0px;
}
.owl-link .owl-link__link {
text-transform: uppercase;
font-weight: bold;
}
/**
* Editor tweaks
*/
.owl-link .wbb-image {
max-width: 25%;
}
.owl-link .wbb-image .owl-link__image {
max-width: 100%;
}
Test the Block
At this point, all we should have to do is hit Save and we should be able to insert our block into a page. I opened up my sample page and inserted the block. Presto, a block!
LearnDash is taking cutting-edge e-learning methodology and infusing it into WordPress. Trusted to power the learning programs for major universities, small to mid-size companies, startups, entrepreneurs, and bloggers worldwide.
Adding a Border Variation
In Matt’s original article about creating the owl-link block, he showed how style variations could be used to create two different variations of the block: one with a border around the content, and another without the border.
Wicked Block Builder has a conditional logic feature that makes it easy to conditionally output CSS classes, inline styles, HTML attributes, or even entire portions of your block. In this case, I wanted a way to select between a ‘Border’ and ‘No border’ style.
Adding a New Attribute
The first thing I had to do was add a new attribute to the block to store the selected style variation. I called the attribute ‘border’.
Adding a Sidebar Panel
I think the block sidebar is great for block settings that don’t change frequently. Wicked Block Builder makes it easy to add items to your block’s sidebar. I went ahead and added a panel component and gave it a label of ‘Settings’. Next, I added a Radios component to the panel, mapped it to the ‘border’ attribute, and added choices for ‘Border’ and ‘No border’ (I used ‘no_border’ for the ‘No border’ choice value).
Conditionally Outputting the CSS Class
Finally, I needed a way to add a CSS class to the block when the no border style was selected. To do this, I added another class called ‘is-style-owl-link__no-border’ to the block containing div; however, this time I added a condition to the class to control when it was output. I added a condition for when the border attribute value equals ‘no_border’ which means that the class would only be output when that option is selected.
Conclusion
There are a lot of different ways to create blocks: patterns, React, this plugin, and more. The implementation of my owl-link block was a little different from the original but the end result was the same and I think that’s what’s important. It was a fun challenge and thanks to Matt Watson and WP Owls for publishing a great article on how to create a custom block. If there’s one thing I think we can all agree on, it’s that more documentation and tutorials on how to create blocks is never a bad thing.
