Would you like to create a WordPress Plugin simple Gutenberg block?
Don't we all love WordPress? The platform has seen massive success since its inception, with developers constantly adding new features. One of the standout features of recent times is the WordPress Block Editor, code name Gutenberg.
Gutenberg offers WordPress users an exciting new way to publish content and customize their website. It's incredibly easy to use, which is great news for beginners and developers alike. If you are using the latest version of WordPress, you are already familiar with the block editor and the concept of blocks.
By default, the WordPress block editor comes with some blocks that allow you to include text, images, quotes, audio, video, embeds, etc. Besides that, there is a tons of Gutenberg add-ons that let you extend the editor without breaking a sweat.
However, you may have a specific need that prompts you to create your own custom blocks. In this article, we will show you in a few paragraphs, how to create custom Gutenberg blocks to meet your specific needs.
Without further ado, let's get started because there's a lot to learn.
But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog
Then back to why we are here.
What are blocks, anyway?
Blocks treat paragraphs, headings, media, and embeds as components that, when strung together, make up the content stored in the WordPress database, replacing the traditional concept of text with media and embeds. built-in shortcodes.
In the past, WordPress users relied on text and shortcodes to add content. Gutenberg uses blocks. The new editor lets you use block units to create rich and flexible layouts that are easy to manage. Currently, you can use the block editor for posts and pages, but there are active plans to take support full site editing in the future.
Working with blocks makes content creation in WordPress quite refreshing. Additionally, many existing plugins support the new editor and come with ready-to-use blocks that make it easy to add content from said plugins. The editor lets you drag and drop blocks onto a page so you can hit the publish button faster.
Just like a page builder integrated directly into WordPress.
If you are familiar with the page builders such as Elementor, you're probably familiar with the concept of drag-and-drop page building. Gutenberg is an attempt to fully integrate drag-and-drop website building into the WordPress core.
So let’s get to the best part of today’s article. Let's learn how to create a simple block. You can do this manually or using plugins such as Genesis Custom Blocks (formerly BlockLab), Lazy Blocks ou ACF. Creating custom blocks is a bit technical, so for the purposes of today's article, we'll be using a plugin.
How to create a custom block (using genesis Custom Blocks)
It's easier to go the plugin route because creating custom Gutenberg blocks from scratch requires a good understanding of HTML, CSS, PHP, and most importantly, javaScript. You will also need to understand React.
For the next section, we'll be using Genesis Custom Blocks. Its free version is available in the official WordPress repository, which means we can install it in the WordPress admin dashboard.
Install Genesis Custom Blocks
Login to your WordPress admin dashboard and navigate to Extensions> Add, as shown below.
Then enter " Genesis Custom Blocks in the keyword search box and click on the button install now
After that, activate the plugin to get you started
Next, let's create a new custom block. For illustration purposes, let's create a custom call to action (CTA) that we'll add to the end of every article we publish. The best part is that you can reuse the blocks to save you from creating the same blocks over and over again.
In your WordPress admin menu, navigate to Custom Blocks > Add New, as we highlight below.
This will take you to the next page where you will find all the options to create a custom block (in our case, a CTA):
Here are a few words to explain what you see in the screenshot above. Starting from the top, you have it.
Main editing area:
- Builder – You will probably spend a lot of time here designing your custom block. the MANUFACTURER lets you add title, fields, slug, keywords, category and preview your custom block. You will learn how to add fields.
- TemplateEditor – After designing your custom block (i.e. adding various fields), you will need to create a block template (read, add some code) in the model editor. We will learn more when we design the CTA.
- Editor Preview – It allows you to preview the custom block in the WordPress block editor.
- Front End Preview – Here you can preview how the custom block will look on your website.
- EditorField – Will show fields in the main edit area of ​​a post or page (you know, just like you see your regular posts in the WordPress editor)
- InspectorField – Displays the field in the right sidebar below the Block Inspector.
Sidebar options
- Slug – It is filled automatically based on the title you give to your custom block. This is important when creating the block model.
- Icon – This option allows you to add an icon to your custom block.
- Category – It allows you to assign a category to your custom block. You can categorize your custom block using one of the built-in categories, or you can create an entirely new category.
- keywords – Add a maximum of three related keywords to your custom block so people can easily find it in the block picker.
- Open block fields in a modal instead of rendering in place – Enable if you want to open fields in a modal. This is useful if you have a custom block with many fields.
- post Types – Check the box(es) to allow your custom block to be displayed on each post type. For example, if you uncheck Posts, the block will not appear on any posts.
Create a custom block
Now that you have a better understanding of the user interface and what each part does, let's get to work.
In the Builder- Builder –, give your custom block an appropriate title. We are going to choose CTA for this one as shown below.
Before adding new fields, let's add an icon, keywords and choose a category for the custom block as shown below.
To that, let's add some fields to our custom block. For our example CTA block, we'll add just three fields in the following order: an image, some text, and a file field that allows people to download an ebook.
Read also: 5 WooCommerce plugins to edit your products in bulk
Adding Block Fields
In the section Editor fields, click on the Plus (+) icon to add the first field as shown below.
Next, let's add an image field. In the sidebar, set the Field type on Image and set the other options. Also, consider the slug as we will be using it when creating the block model.
After that, add the text and file fields in the same way.
Switch to TemplateEditor > Markup.
Here we will design how our custom block will look on your website. The model editor accepts HTML, CSS and field slugs (which you must place between 2 square brackets). If you need to use PHP language, you can create the template using PHP modeling method
Don't worry, it's easy.
In the model editor, sous markup tab, add the following code:
<div class="cta-block">
<div class="cta-image">
<img src ="{{image-field}}">
</div>
<div class="text-upload">
<h2>{{text-field}}</h2>
<a href="{{file-field}}">
<button type="button" class="dwnld">Telecharger</button></a>
</div>
</div>As you write your code, you will notice that the model editor Auto-complete field slugs (e.g. {{image-field}} ) for you.
Then go to the section CSS to add simple styles with the following code:
.cta-block {
text-align:center;
background-color:orange;
width:100%;
height:auto;
border: 2px solid orange;
}
.dwnld {
background-color: black;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
border-radius:2px;
}
You can customize these styles as you like,
Click on Publish :
To see your new custom block in action, go back to your WordPress admin dashboard and create a post as you normally do, click the More (+) to add a new block and choose your new custom block, as we highlight below.
Next, fill in your custom block as desired and post your message:
Now, if we check our new custom CTA block on the front-end, this is what we see.
Our custom CTA is right there! Please don't worry about our design capabilities – of course, in a real-life scenario, you'll spend a bit more time customizing your block. But we hope you learned something here.
Other recommended resources
We also invite you to consult the resources below to take more ownership and control of your website and blog.
- 10 Affiliate WordPress Plugins to Create a Program
- How to Add Multiple Columns in WordPress
- How to Add Multiple Columns in WordPress
- Using different backgrounds WordPress
- Elementor: How to create an animation on hover
Conclusion
Building custom blocks is not an easy task. But with WordPress plugins such as Genesis Custom Blocks and Lazy Blocks, among others, whether you are a beginner or not you will succeed in creating them. From the most basic to complex depending on your needs.
That's it for this article that shows you how to add custom fonts to a WordPress website. We invite you to try. If you have any concerns or suggestions, please let us know within Comments.
However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
Waiting, share this article on your different social networks.
...
