Gutenberg Custom Blocks Without Coding

Do you wanna create your own custom blocks but don’t know how to code? Or maybe you are a PHP developer and only know basic HTML, CSS, JS, and learning a react to develop is too much for you then this tutorial is exactly for you. In this tutorial, we are going to learn how we can create our own custom blocks but without using code or only using basic codes.

What is Custom Block?

Gutenberg has changed the way how we use and develop WordPress and there are a lot of new things to learn. Gutenberg entirely builds upon concepts of blocks and to edit your post and pages you’ll have to use a new editor called Block Editor. In the block editor, you’ll gonna need to use a block for almost doing anything. For our ease, WordPress provides a lot of premade blocks and third-party plugins and themes can also provide blocks for our website.

A block consists of four things, block layout backend, toolbar controls, sidebar controls, and block layout frontend.

Block Layout Backend: Block layout backend is what layout we see in the Block Editor when we try to edit the page, mostly block backed and frontend layout stays the same and recommended to keep things same but you can have different layouts in frontend and backend. As highlighted in the above image as 1.

Toolbar Controls: Toolbar controls provide you with the styling options for your block and block elements. As highlighted in the above image with number 2.

Sidebar Controls: Sidebar Controls provides you with the controls for your block in the Block Editor sidebar as highlighted in the image above. You can see the sidebar controls in the above image highlighted by number three.

Block Layout Frontend: Block layout frontend is the layout you see on your published page or post.

But there is a very high chance that the block you want for your website may not exists and for that case, WordPress has provided the option to code our own custom blocks. As its name suggests with a custom block we create our custom block with the looks and functionality we want.

But there is a huge issue with coding custom blocks, as a lot of WordPress developers are from PHP backgrounds, and blocks are coded in mostly JavaScript(React). And learning React to code some basic custom block is too much for most people because you need to almost start from scratch.

Custom Block Without Code

So in this article, we are going to learn how we can create our own custom block with very basic codes without getting in much trouble of creating a plugin registering a block, or creating a complete dev environment. We can create our custom block with some basic HTML, CSS, and PHP if we want our block to have some advanced functionality.

One thing I want to clear is the method we are going to share is not a replacement of coding custom blocks, they don’t provide the same flexibility as creating a custom block via code. However, you would be able to achieve most of the basic functionalities of custom block and that can will surely be very helpful for you. If you wanna learn how you can code your own custom block then we have a complete series on that topic as well you can read them here.

How to Create Custom Block Without Code

Now to create a custom block without code we have two somewhat similar plugins, one is LazyBlocks, and the second is Genesis Custom Block. In terms of functionality, they both offer almost the same features and in this article, we are going to learn how we can use both of them.

Objective

To check the working of both articles we are going to create almost the same block in both plugins. Both plugins will have a background container, an editable heading, an editable paragraph, a button with editable links and text. The name of the button will be changed via sidebar controls.

In the above image, you can see two blocks, the first one is created using Genesis Custom Block and the second one is created using LazyBlocks. The only difference between both is the background gradient which I added intentionally to demonstrate the difference.

Now let’s how actually we can build them.

1. LazyBlocks

So first we will create our custom block using the LazyBlocks plugin. This plugin is available at the WordPress store and has more than ten thousand downloads and has a rating of 5 stars out of 5 stars. This plugin is completely free to use. Now let’s see how we can use this plugin.

To install the plugin just go to your WordPress dashboard, navigate to the plugin store and search for “LazyBlocks”, now install and activate the plugin.

After activating the plugin a new menu will be added in your dashboard left sidebar named “Lazy Blocks” click on that.

You’ll see the list of all the blocks here, you can manage them as you manage your posts or pages.

LazyBlock Block Configuration

Now to add a new block click on add new.

Now to get started first type the name of the block as shown in the image above.

Now next thing is to add block details, which you can do from the right sidebar controls. In the sidebar you’ll get the following controls:

Slug: From the sidebar, you can add a slug for your block(when you type block name it will be filled automatically).
Icon: The second option is to choose an icon for the block. You can choose any image from the given icon list, you can’t upload your own icon.
Category: The third option is to choose a category of the block, you can choose from the given list or add your own new category if you want.
Keywords: The fourth option is to add keywords you can add multiple keywords. Keywords help users search the block in Block Editor.
Description: Fifth field is to add a description for the block.

There are some more extra options for block also, which you see after scrolling the sidebar as shown above. These extra options are categories into two categories Supports and Condition.

Supports: First highlighted point is Supports which is the name of the category. Currently, the support category has only six additional controls you can extend that with a plugin called GhostKit.
Multiple: It allows the block to be added multiple times in the same post or page, if you untick it your block can only be added once inside a post or page.
ClassName: Third is the class name if you enable that you’ll see the additional field in the block editor sidebar which lets you add a custom class name for your block.
Anchor: The fourth option is to toggle anchor which adds an additional field in block sidebar controls to add id.
Inserter: The fifth option is an inserter that can let you choose if you want your block to be added to the block inserter.
Align: The sixth option is align, which adds alignment controls for your block that can be accessed from the block top toolbar. You can choose any or all in full, wide, left, right, and center.
Condition: The seventh option is the Condition category, currently it only has one option.
Show in posts: This options lets you choose if you want to restrict your block to be only used on posts, pages, reusable blocks, content blocks, or all(default).

Block Editor Layout

Fill in these fields with the options you want.

Now let’s look at the layout of the editor where we will be creating our block. First, by default, the Content Controls are selected. Inside that, we can add the elements for our block, click on the plus icon to add a new element.

Next to that, we have a tab for Inspector Controls where we will add elements that we want in our sidebar control.

Below that we have the main code area where we actually write our basic code for our block structure and styling. We can type output for the block in multiple methods as highlighted in points 1, 2, and 3.

The first is to use HTML + Handlebars to wrote the output in HTML and Handlebars.
The second is to use PHP to write the output in PHP format.
And the third option is to use theme templates if the theme has any.
It will let you switch tabs to write the output code for the frontend and the Editor.
The fifth point is the actual code area to write the code. One good thing about this area is that it has suggestions based on typing which makes typing experience much better and error-free.
The sixth point is highlighting the switch to choose if you want to use separate output code for the frontend and Editor or a single code structure for both.
The seventh option is to choose when you want to show the block preview in the Block Editor.

Create Block

Now the next thing is to actually create the block and its layout. So by default in the editor, Content Controls will be selected, which is used to add content inside for the block. Click on the plus icon to add elements for your block layout.

After clicking on plus an empty element will be added to your block content controls. The options for this element can be accessed from the sidebar.

Label: You can add a label of what users see in the front end.
Name: You can add a name for your block, which you use to refer to your block while defining structure. It is kind of like a slug.
Type: The third option is to choose the type of element which you have added, there are tons of as you can see above. All of these types have different characteristics and features. You can read about them in their official documentation.
Placeholder: you can add a placeholder for your selected element.
Character Limit: you can add the number of characters allowed for your element.
Default Value: you can add a default value for your element.
Help Text: For adding help text for the element. It will show you tex below the field to guide users.
Placement: is to choose the placement of an element, you can choose the content area or Inspector Control(sidebar or toolbar controls).
Width: it will let you choose the width of your element, you can choose 25%, 50%, 75%, or 100%.
Required: Choose if you want your field to be required or not.
Hide block if not selected: you can choose if you want to hide the block if not selected or not.
Add in meta: if you want the field to use custom meta fields you can choose with this switch. You can learn more about it here.

Fill in the details based on your requirements. Also, add multiple elements if you want like we have done for our block.

We have added three elements to our Content Controls. Heading, Paragraph, and Button URL.

In the Inspector Controls, I have added a Button Text element which will add the text for the button.

For the block structure, I have chosen HTML + Handlebars and added the code in HTML and for styling, we will use <style> </style>tags as we use in HTML.

One thing you may have noticed above is that we have used double braces with names {{heading}}in our HTML, in those braces, we will write the name which we have given to our field to get the value from those fields. We have written the same code for our editor as well.

Code Used

Here is the complete code we have used for our block’s frontend and the editor:

<div class="lazy-container">
  <h2>{{heading}}</h2>
  <p class="lazy-para">{{paragraph}}</p>
  <a class="lazy-button" href="{{my-button}}">{{button-text}}</a>
</div>
<style>
  .lazy-container {
    background: rgb(155,221,235);
    background: radial-gradient(circle, rgba(155,221,235,1) 0%, rgba(0,207,249,1) 100%);
    padding: 30px;
    border-radius: 20px;
    text-align:center;
}
.lazy-para {
    margin: 20px;
}
.lazy-button {
    text-decoration: none;
    background: #000;
    border: 0px;
    border-radius: 5px;
    padding: 12px 35px;
    color: #ffffff !important;
    font-family: sans-serif;
}
.lazy-button:hover {
    text-decoration: none;
    background: rgb(255, 255, 255);
    color: #000 !important;
}
</style>

One thing I recommend while defining class for the blocks, always use some pre-text before the class to make it unique else it will conflict with other classes. For example, if you simply use buttonas a class name instead of your styling your theme styling will be applied to that element, that’s why I have also used lazy-buttonto make it distinct from others.

Publish the Block

We have also filled in the details based on our requirements in the sidebar and with that our block creation is complete just click on save to save and then click on publish to publish the block. After publishing the block it will be available as the normal block on the block editor and based on our block preference we can use this block as any WordPress block.

2. Genesis Custom Block

Genesis Custom Block(formerly Block Lab) is another great plugin for creating a custom block without code. This plugin is completely free to use. This plugin has over 7,000 active installations and has a rating of 4.5 stars in 5 stars. In terms of functionalities, this plugin is almost the same as LazyBlocks. So let’s see how we can use this plugin to create a similar block.

Installation of this plugin is also the same as any other just go to the plugin store and search for “Genesis Custom Block”, click on install and activate it.

After activating the Genesis Block a new menu will be added in the dashboard left sidebar click on it to see the list of blocks, for now, you only have a demo block. Click on “Add New” to add a new custom block.

Configure The Custom Block

After clicking the “Add New”, Block Builder will be opened by default.

Now to get started first add the title for the block, the title will be what users will see in the Block Editor so it is a good idea to name the block on its functionality like a custom block button can be named as a button block.

Now the block configuration options are given in the right sidebar for the custom block.

Slug: Slug is the name of the block for referencing in the code(will be added automatically when you type the name).
Icon: You can choose an icon for your block from the list of given icons provided by the WordPress dashicon.
Category: You can choose a category for your block from the default list of predefined categories, also if you want you can add your custom category for the block.
Keywords: You can use keywords for your block so users can search for your block in the Block Editor. You can add up to three keywords for one block.
Checkbox: If you want to display your block’s editor fields in a modal (inside the post or page editor), you can checkmark to enable this option.
Post Types: You can choose where you want your block to be available posts or pages or both.

Add Block Fields

Now let’s add fields inside our block, Block Fields let us define the options that will be available for users when they add a block into their post or page. Basically, fields let users add data and styling for the block and every time user uses a block they can add different data and styling for the block using these fields.

Field can be added in two locations one is on the Editor and the other is in Inspector.

Field Switch: You can choose the field type where you want to add components.
- Editor Field: it will show the components fields in the main editor area of the post or page.
- Inspector Field: it will show the components fields in the right sidebar of the post or page.
Add Element: The plus button will let you add new components for the block.

Now we can use the right sidebar to configure the added components fields.

Field Label: it is used for naming your block field, this name will be shown user in the frontend as a field label.
Field Name(slug): it will be used for referencing your block when we want to access field value while structuring the block. It will also be auto-filled when you add a label but you can customize it if you want.
Field Type: you can choose here what type of field you want your field to be. You can choose anyone from the list shown above. Based on the selected field more options for the field will be visible in the sidebar.
Field Location: it will let you select the location of your field, you can either choose Editor or Inspector and based on your choice the field will be shown in the editor.
Fields Width: it will let you choose the size for your field, you can choose 25%, 50%, 75%, and 100%.
Help Text: Help text will add a small text below your field which will be visible in the editor to provide instruction to the users.
Placeholder Text: As the name suggests you can use this field to add a placeholder for your block field.
Delete or Duplicate: Delete button will delete the field and the Duplicate button will add a duplicate field below the field with the same configuration.

Fields for Our Block

Now let’s add multiple fields for our custom block.

I have added three fields for the editor area for our custom block, the first is heading, the second is the description paragraph and the third is the button URL.

I have also added another file for the Inspector area, that text field is used for adding a title for our block button.

Block template using Template Editor

Now after creating a block and configuring the block and its field we are ready to move to the next step to use the built-in Template Editor to create the required custom block template so the blocks can properly render on the website in block editor and on published post or page.

Template Editor: This is where we’ll write our code to create a required template for our block so it can be rendered.
Markup: Enter the HTML you want to show for your block, you can use the field name inside double braces to get the value of the filled. For example for our heading field markup will be {{heading}}.
Code Area: Code area is where you’ll write your actual code.
For my block, I have created a <div> as a main container and inside that, I have added a <h2>, <p>, and <a>. The complete HTML code is given below:
```
<div class="my-container">
    <h2 class="my-heading">{{heading}}</h2>
    <p class="my-para">{{description}}</p>
    <a class="my-button" href="{{button}}">{{button-text}}</a>
</div>
```

After writing the template in HTML next step is to style our template using CSS. The classes we have used inside our HTML markup we can use to target our CSS.

CSS: this is where we will write our CSS styling code for our custom block, without styling the blocks will look like plain old HTML.

Code Area: This is the actual code area where we will write our code, one great thing about this code area is it gives you automatic suggestions based on what you type and that can be super helpful.
For my custom block the complete CSS is given down below:

.container {
    background: rgb(155,221,235);
    background: radial-gradient(circle, rgba(155,221,235,1) 0%, rgba(255,107,249,1) 100%);
    padding: 30px;
    border-radius: 20px;
    text-align: center;
}
.para {
    margin: 20px;
}
.my-button {
    text-decoration: none;
    background: #000;
    border: 0px;
    border-radius: 5px;
    padding: 12px 35px;
    color: #ffffff !important;
    font-family: sans-serif;
}
.my-button:hover {
    text-decoration: none;
    background: rgb(255, 255, 255);
    color: #000 !important;
}

Editor Preview

Next is to check and confirm the editor preview for our block, the editor preview will show us what our block will look like when we add them in our post or page while editing them using Block Editor.

Editor Preview: this will toggle to view to show use the preview of our block in the block editor.
Preview Area: this is the area where we will see the actual editor preview of our block.

Front-end Preview

After the editor preview, the next step is to check the preview of our custom block for the Front-end area means how our block will look on the published post or page of our website.

Front-end Preview: this will toggle the Front-end preview area for our newly created block and we can check and confirm the styling of our block in this area.
Preview area: This is where we actually see our block front-end preview. However, I have found an issue with this preview, it didn’t show us exactly the same preview that we will see on the website because it didn’t consider theme styling properties for example the heading is too small here but when you use the block on editor heading font will be much bigger.

Publish The Block

Now the last and only step is left to publish the block, just click on that blue publish button to publish the block and now the block will be accessible in your block editor and you can use your newly created custom block as per your need.

LazyBlocks vs Genesis Custom Blocks

Now after learning about two plugins you are probably wondering which one you should choose, so let’s find out which one you should choose. In terms of functionality, both plugins work the same way but lazy blocks have some advantages over the Genesis Custom Blocks.

LazyBlocks has more element or field types, in lazy blocks, you will get 21 field types but in Genesis Custom Blocks you’ll only get 14.
In lazy block, you write your code in both HTML + Handlebars and PHP and even use the theme template if you want. In Genesis Custom Blocks you can only write in HTML and to take advantage of PHP you have to manually create the template and add it to your theme file which is not very efficient.
LazyBlocks also has support for block supports property which lets you add some common block controls like alignment. But in Genesis Custom Blocks you have no such controls for the block.
LazyBlocks also lets you export and import your custom blocks so using them on multiple sites is very easy but in Genesis Custom Blocks it is completely missing.
Till now I have only found one advantage in Genesis Custom Block is the dedicated CSS area and for the rest of the things, LazyBlocks is superior.

One thing I wanna clear about the above comparison is that Genesis Custom Block is rarely new and constantly upgrading and soon it will offer even more functionality so you should try both if you can to check which one you truly liked. Since both are free there is no issue in using them both.

Conclusion

Now you know how you can create your own custom blocks without using complex codes and creating a dedicated environment for developing and testing custom blocks. Steps are fairly is and output depends on your creativity and requirements. We have shared two plugins that can help you achieve that functionality and also compared them to find out which one is better.

I have researched and found that for now only the above two plugins are best suited for creating custom blocks without code. If you know about any more such plugins do share them in the comments below we will love to check them out.

As always if you face any issues while following this tutorial or have any doubts, questions, or suggestions do share them in the comments below, we will try to respond as soon as possible.