How to Create Custom WordPress Gutenberg Blocks

Namaste! Our today’s topic is how we can create a custom WordPress Guttenberg Block without any Javascript coding.

When the Gutenberg block editor launched as part of WordPress 5.0, it unlocked a new era of content creation and content management.

No longer would apparently-easy tasks like developing multi-column layouts or including embedded media require a page builder plugin or custom code.

Introduction

Gutenberg breaks the content down into “blocks”, or little sections that can be rearranged with no trouble. By default, WordPress comes with a sufficient selection of blocks. But it additionally lets builders create their custom blocks as nicely.

Custom Gutenberg blocks can be a sport-changer for topic builders. Rather than counting on workarounds or settled web page templates, a custom block is an area of specialized content material anywhere within a web page. Elements that include testimonials, accordion menus, and pricing tables are only a few examples of what can be completed.

As top-notch as custom Gutenberg blocks sound, there was a few initial problems around the barrier to entry. Building blocks natively requires an understanding of React, which can leave out loads of developers.

Thankfully, the WordPress developer community has stepped up with gear that gets across the React/JavaScript requirement. They allow you to create your very own custom blocks visually and put in force them into your current WordPress subject.

A range of gear has hit the market that allows web designers to create custom Gutenberg blocks without JavaScript. Mind you, they nevertheless require at least a few understanding of code (HTML, CSS, and PHP) – or as a minimum how a WordPress topic works. That’s because every alternative requires you to create a PHP record of block code and optionally add some styling to suit your website.

That stated each of the WordPress plugins below leverages custom fields so that it will create content. Custom fields existed properly before Gutenberg got here alongside. In truth, it’s lengthy been common exercise to utilize them as a way to get around the limitations of the antique Classic Editor.

The high-quality element of this form of configuration is that custom fields provide flexibility in the kinds of content you can create. Mix that with the portability of a Gutenberg block and you have an effective new device.

Custom Gutenberg Blocks Tools

A range of gear has hit the marketplace that permits web designers to create custom Gutenberg blocks without JavaScript. Mind you, they nonetheless require at least some information of code (HTML, CSS, and PHP) – or at the least how a WordPress subject matter works. That’s due to the fact every choice requires you to create a PHP report of block code and optionally upload a few styling to shape your website.

That said, each of the WordPress plugins below leverages custom fields if you want to create content material. Custom fields existed properly earlier than Gutenberg came along. In reality, it’s lengthy been not unusual exercise to make use of them as a way to get around the limitations of the old Classic Editor.

The best element about this sort of configuration is that custom fields offer flexibility inside the types of content you can create. Mix that with the portability of a Gutenberg block and you have a strong new tool.

Advanced Custom Fields PRO

Advanced Custom Fields Plugin has been around for years. It commenced out as an on-hand UI for building complex custom area sets and now brags over 1 million active users of its free version.

The commercially-available PRO model of the plugin (pricing starts evolved at $49 in line with 12 months) has been developed to permit custom Gutenberg block advent. In the ACF Blocks feature, we could builders create a fieldset and assign it to a custom block.

More than the opposite plugins in this category, you’ll need to recognize PHP to get the maximum out of ACF Pro. However, present users of the plugin will find the process for block creation very friendly.

Lazy Blocks – Gutenberg Blocks Constructor

Lazy Blocks is an unfastened WordPress plugin that offers a visible way to create custom blocks. Like ACF, the plugin includes some of the custom field sorts (referred to as “controls”) for your block. Text, photograph, document, Classic Editor, color picker, and repeater fields are just some of what’s available. There’s also an API for growing your very own custom controls.

Other reachable features consist of the ability to limit your blocks to specific posts types, import/export via JSON and custom templates.

Block Lab

With Block Lab, custom block creation is a 3-step process. The first is adding a block in the admin – that’s much like including any other page or publish. Next, add in the desired mix of custom fields (text, photo, radio buttons/checkboxes, URLs, and so forth.) and configure grounds like a custom icon. Third, create a block template in your theme and fashion it to your preference. From there, your custom block is prepared for use.

The plugin is nicely-documented and even offers tutorials for creating unique block types.

A Simple Custom Block Using Block Lab

For simplicity’s sake, we’ll take a look at pressure using Block Lab. However, don’t allow that to prevent you from attempting out the alternative options as they’ve masses to provide.

Now, on to our example. We’ll count on you to have a WordPress internet site with the Block Lab plugin established and activated.

In our project, we’ll create a simple notification block that we will use to display essential records to visitors. It gained to be a great deal, simply a colored background, and a few textual contents. But it will with a bit of luck offer a glimpse into what’s viable with a custom Gutenberg block.

• Navigate to Block Lab > Add New to create our new block.
• We’ll start by adding a title (Notification Bar) and three fields:

• Background Color – A Color field that will let us choose the background for our notification bar. We’ll assign it to display in the Inspector area of the block editor, which is in the right sidebar.
• Text Color – Another Color field, this time for our text. This one will also display in the Inspector.
• Message – A Text field that will display our custom message. This field will be housed in the main Editor area of Gutenberg.

Note the field names assigned to each block, as we’ll need those in just a bit.

We should also mention that the plugin allows us to choose a custom icon and categorize our block. This will help us find it when we want to add it to a page.

• With our fields and settings in place, it’s time to click the Publish button to save our block. Doing so will trigger a notification message, telling us where to place our custom block template within our theme:

/wp-content/themes/YOURTHEME/blocks/block-notification-bar.php

• Next, we’ll need to create a block template. So, fire up the code editor of your choice and create a new file called block-notification-bar.php and save it into a new /blocks/ folder within your theme.

Block templates have to be written from scratch. But don’t worry, it’s not too challenging! Block Lab has documented how to do this, with a bunch of examples.

In our case, we have just two block types: Color (background-color; text-color) and Text (message). Using the documentation as our guide, we’ll add this code to our custom block template:

<div style="margin:30px auto; padding:5px 10px; background:<?php block_field( 'background-color' ); // Background Color (Color Field) ?>">

    <span style="color:<?php block_field( 'text-color' ); // Text Color (Color Field) ?>"><?php block_field( 'message' ); // Message (Text Field) ?></span>
    
</div>

Make sure to save the file and upload it to your web server when done.

• Our custom block has now been created! That’s really all there is to it. Now, we can add it to a page.

• On the front end, we have a basic notification bar that’s sure to grab the user’s attention.

Conclusion

Even in this very simple use case, there is an actual value inside the notification bar we’ve created. It may be located on any web page or submitted inside our website and can be customized on every occasion.

If we chose to expand upon what we’ve built, there are lots of alternatives. Adding things like icons, buttons, and the capability to hyperlink to every other web page or put up come to mind. These things are all possible inside Block Lab, as well as the other plugins remarked above. And, the use of CSS can substantially embellish the impression as properly.

Now that you’ve had a flavor of the custom block advent procedure, it’s time to test! Install one of the plugins above and notice how you can decorate your WordPress internet site.

And If you have any queries related to this topic, tell me in the comments

Thank You!