Create Custom Gutenberg Block

create custom gutenberg block

WordPress Gutenberg Custom Block – Overview

How to create custom Gutenberg block is an article that aims to provide a clear WordPress Gutenberg custom block tutorial. By the end of the article, you shall be ready to create your WordPress Gutenberg custom block. Do not be baffled looking at this article with so many code blocks. WordPress custom Gutenberg block is straightforward to implement. You may refer to parts of this article based on your choice of blocks to keep yourself brief.

Prerequisite

Good to know

You should know the basics of CSS or at least possess some basic understanding of the CSS to achieve this. It is also essential that you learn how to add a custom class in WordPress Gutenberg and where to add the custom CSS in WordPress. Do not panic if you are unaware of what is CSS and how it works. We will share all the needed steps through this article to make it easy for you. If you follow the steps as directed, you should be good to go.

Important Note

Kindly note that these styles are using their specific class names for demonstration. The class name may differ in your situation, and you should use the proper class names for the styles to work for you on your WordPress website. You may refer to CSS Basics for CSM Tools article for an understanding of some of the CSS basics to learn about how you can grab the name of the class of any element on the page and apply the custom CSS styling.

WordPress Gutenberg Custom Block Tutorial

Through this article of WordPress Gutenberg custom block tutorial, we demonstrate how to create 12 different types of Gutenberg WordPress custom blocks. Creating Gutenberg custom blocks is Fairly easy. We walk you through the entire WordPress Gutenberg custom block tutorial step by step. Let us start with the first WordPress custom Gutenberg block.

1

Custom Gutenberg Blocks – Warning Message Code

h3.warning-message {
    background-color: #ffb03d;
    color: #c50d00;
    padding: 10px 20px;
    margin-bottom: 0;
}

p.warning-message {
    background-color: #ffdd77;
    color: #810000;
    border: 3px solid #FF9800;
    padding: 2em;
}

Custom Gutenberg Blocks – Warning Message Output

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

Custom Gutenberg Warning Message Block CSS code explanation

We are using heading 3 and paragraph elements to build the WordPress Gutenberg custom block for the warning messages. The first is heading 3, where we have set the background color to Orange shade using background property, text color to dark red with the help of color property, applied 10 pixels padding to top and bottom, and 20 pixels to right and left side using padding property. Finally, we have set the bottom margin to zero using the margin-bottom property to remove the white space from the bottom side and make it look like a part of the single block along with the paragraph element.

The second element in WordPress Gutenberg custom block for warning message is a paragraph. We have set a yellow shade in the background, text color to deep red. A solid 3-pixel background with orange shade is set to surround this block. Finally, we have given 2 em Of padding on all four sides.

What is em in CSS?

“Ems” (em): The “em” is a scalable unit used in web document media. An em is equal to the current font-size; 1em is equal to 12pt. Ems are scalable; for example, 5em would equal 6pt, 2em would equal 24pt.

2

Custom Gutenberg Blocks – Important Note Code

p.important {
	background: #03A9F4;
	color: white;
	padding: 20px;
	box-shadow: 0 5px 6px 0 #c5c5c5;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}

h4.important {
	background: #004260;
	color: white;
	padding: 15px;
	margin: 0;
}

Custom Gutenberg Blocks – Important Note Output

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

Gutenberg Custom Blocks – CSS Code explanation

We are using heading 4 and paragraph elements to build the Custom Gutenberg Blocks Important Note where CSS styling is applied. For the paragraph element of the WordPress custom Gutenberg block, the blue background is used. The color of the text is set to white. The padding of 20 pixels is applied on all four sides. Light color Shadow is applied to drop shadow behind this block. 10-pixel radius has been set toward the right and left sides of the bottom of this block.

The second element of WordPress custom blocks is heading 4. The background is set to dark blue shade. Text is set to white and padding of 15 pixels is applied on all four sides. Margin is set to 0 to remove any white spacing around this block to make it look like a stitched heading block with a paragraph block.

3

Custom Gutenberg Blocks – Round corners Code

h4.round-corners {
    background: #2c822c;
    color: white;
    padding: 15px 10px;
    border-radius: 20px 20px 0px 0px;
    margin-bottom: 0;
}

p.round-corners {
    background: #51d151;
    color: white;
    padding: 25px;
    border-radius: 0px 0px 20px 20px;
}

Custom Gutenberg Blocks – Round corners Output

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

CSS Code Explanation – Round Corners Gutenrbern Block

We are using heading 4 and paragraph elements to build the Custom Gutenberg block with rounded corners that give you a design output to showcase a Gutenberg block with rounded corners. In the code above, we have two elements for styling.

The first element in the code above is heading 4. We start by giving a deep green background to this element. We have set the color white. We have provided the padding of 15 pixels on top and bottom and 10 pixels on the right and left of this block. With the help of border-radius property, we have set the radius of 20 pixels on the top left and top right and 0 pixels to bottom right and bottom left. Finally, we ended with the last styling statement by setting the bottom margin to zero. The zero margins in the bottom ensure the block gets attached to be paragraph element without any spacing, making it look like a part of a single block.

Now we begin styling the paragraph element, starting with the first statement we set the background to Green. Now we set the color to white and apply the padding of 25 pixels in all four sides. To complete the rounded shape of all four corners, we set the top right and left border-radius to zero and bottom right and left radius to 20 pixels with the help of border-radius property.

If this block style pleases you, make a copy of the code above and use the class names in your Gutenberg blocks to apply this styling. Click here to learn how to add custom classes to Gutenberg blocks.

4

Custom Gutenberg Blocks – Shadow Block Code

p.shadow-block {
    background: #ff5f54;
    padding: 25px;
    box-shadow: 0 6px 27px #b8b8b8;
    border-radius: 5px;
    color: #fff;
    margin: 30px 10px;
}

Custom Gutenberg Blocks – Shadow Block Output

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

Custom Shadow Block CSS Code Explanation

Let us discuss the code block of creating Gutenberg shadow block. In this code block, we have just one paragraph element to style the block. We begin by setting the background color to a peach color shade. Now we apply 25 pixels of padding in all four sides. With the help of box Shadow property, we drop a light grey color shadow behind this block. To make it look appealing, we set the border-radius to 5 pixels using the border-radius property. Now we set the color of the text to white. Finally, we use the margin property to set the top and bottom margin to 30 pixels right and left margin to 10 pixels. The margins on top and bottom will create enough spacing to make the shadow effect visible.

5

Custom Gutenberg Blocks – Leaf Shape Block Code

p.leaf-shape {
    background: #aee470;
    color: #3b3b3b;
    padding: 60px;
    border-radius: 200px 0px;
    border-width: 10px;
    border-style: solid;
    border-top-color: #4CAF50;
    border-left-color: #4CAF50;
    border-bottom-color: #1c6e1f;
    border-right-color: #1c6e1f;
}

Custom Gutenberg Blocks – Leaf Shape Block Output

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

Gutenberg Leaf Shape Block CSS Code Explanation

Creating a custom Gutenberg leaf shape block is going to be fun. In this block, we have one paragraph element to style the Gutenberg leaf block. We focus on the paragraph element to style and showcase it as a WordPress leaf block.

We begin by setting the background to green shade. Now you set the text color to a deep grey shade followed with the padding of 60 pixels on all four sides.

It is vital to set the border-radius very carefully to create the block in a leaf style. To make an element block look like a leaf, we have to round the two corners and leave the other two corners sharp. To achieve this layout, we set the top left corner and bottom right corner to 200 pixels. Now we set the top right and bottom left corner 20 pixels to make it look sharp. The above approach helps us achieve the leaf-like Block in WordPress Gutenberg.

With the help of border-width property, we set the border to 10 pixels followed with the border-style property where we set the value to display a solid border.

Now using the border-top-color, border-left color, border-bottom-color, and border-right-color, we set the colors of the borders. We ensure to give the same color to border-bottom-color and border-right-color property, and the same color stroke to border-top-color and border-left-color Complete creating the Gutenberg leaf block.

6

Custom Gutenberg Blocks – Simple Border Block Code

p.simple-block {
    border-width: 5px;
    background: #f2f2f2ab;
    padding: 38px;
    border-style: double;
    border-color: #434343;
}

Custom Gutenberg Blocks – Simple Border Block Output

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

Gutenberg Simple Border Block CSS Code explanation

A simple border block in Gutenberg provides you an output of a simple-looking block with a gentle stroke of the border around it. We focus on a single paragraph element to style this block.

We begin by setting the border width to 5 pixels. Now we set the background color to light grey shade followed by 38 pixels of padding on all four sides. Now we set the style of the border to double using the border-style property. The double value in border-style property delivers a double line border around an element. Finally, end the styling with the last styling statement, by setting the border-color to deep grey shade.

7

Custom Gutenberg Blocks – Top Border Only Block Code

p.top-boder-block {
    background: #f3f3f3;
    padding: 30px;
    border-top: 10px solid #2196F3;
}

Custom Gutenberg Blocks – Top Border Only Block Output

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

Custom Gutenberg Block with Top Border Only code explanation

Creating custom Gutenberg Block with a border on top is a straightforward process. We are using a single paragraph block to style this block. The blocks with border on one side only, usually helps you to draw the attention of your users to the critical content on your website.

We begin by setting the background color to light Grey, followed with a padding of 30 pixels on 4 sides. Finally, we end the styling by applying 10 pixels solid border with blue shade on top using the border-top property.

8

Custom Gutenberg Blocks – Right Border Only Block Code

p.right-boder-block {
    background: #f3f3f3;
    padding: 30px;
    border-right: 10px solid #FF5722;
}

Custom Gutenberg Blocks – Right Border Only Block Output

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

Custom Gutenberg Block with Right Border Only CSS code explanation

Creating custom Gutenberg Block with a border on the right is very simple. We are using a single paragraph block to style this block. The blocks with border on the right side can be used on sites with RTL (Right-to-Left) language (example, Arabic, Hebrew, etc.), to draw the attention of users to critical content of the website.

We begin by setting the background color to light Grey, followed with a padding of 30 pixels on 4 sides. Finally, we end the styling by applying 10 pixels solid border with peach color shade on the right using the border-right property.

9

Custom Gutenberg Blocks – Bottom Border Only Block Code

p.bottom-boder-block {
    background: #f3f3f3;
    padding: 30px;
    border-bottom: 10px solid #607D8B;
}

Custom Gutenberg Blocks – Bottom Border Only Block Output

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

Custom Gutenberg Block with Bottom Border CSS Code Explanation

Creating custom Gutenberg Block with a border on the bottom helps you in showcasing a Block with a border on the bottom. We are using a single paragraph block to style this block.

We begin by setting the background color to light Grey, followed with a padding of 30 pixels on all 4 sides. Finally, we end the styling by applying 10 pixels solid border with steel gray color shade on the bottom using the border-bottom property.

10

Custom Gutenberg Blocks – Left Border Only Block Code

p.left-border-block {
    background: #f3f3f3;
    padding: 30px;
    border-left: 10px solid #009688;
}

Custom Gutenberg Blocks – Left Border Only Block Output

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

Custom Gutenberg Block with Left Border CSS Code Explanation

Creating custom Gutenberg Block with a border on the left helps you showcase essential messages such as notices or other vital messages on your website in a decent manner. We are using a single paragraph block to style this block.

We begin by setting the background color to light Grey, followed with a padding of 30 pixels on all 4 sides. Finally, we end the styling by applying 10 pixels solid border with a Rama color shade on the left using the border-left property.

11

Custom Gutenberg Blocks – Round Block Code

p.round-block {
    margin: 25px 0;
    padding: 265px;
    background-color: #02adea;
    border-radius: 50%;
    color: white;
    font-size: 2em;
}

Custom Gutenberg Blocks – Round Block Output

“One Day or Day One … You Decide”

Please Note: We are using the following code for device specific formatting only for this block to ensure it remains round when viewed in smaller devices such as tablets, mobiles etc.

@media (max-width: 768px){
p.round-block {
    margin: 10%;
    padding: 93px;
    background-color: #02adea;
    border-radius: 50%;
    color: #fff;
    font-size: 1em;
}
}

Custom Gutenberg Round Block CSS Code Explanation

Creating a round block in Gutenberg helps you to showcase taglines, quote messages, or a brand slogan in a round Gutenberg block.

We style the single paragraph element to create a round Gutenberg block. Kindly note that the values that we are using may slightly differ in your situation. Your website and layout or template may differ from what we are using in this demonstration. With that said, you may have to modify the values of margins, padding, and font-size slightly to create a circular Gutenberg block.

We begin the styling of the round Gutenberg block by setting the margin of top and bottom to 25 pixels and right and left to zero. Based on the size of the font used in this demonstration, which is 2 em, we set the padding to 265 pixels on all four sides. Now we set the background color to a blue shade. It is essential to set the border-radius to 50% for all four sides to achieve a perfect circle. Adjust the numbers of margin and padding to ensure you get a perfect circular Gutenberg block. We now set the color of the text to white and finally end the styling with the last statement by setting the font-size property to 2 em.

The values of the element changes based on the device size when we use the code inside the media queries. Click here to learn about media queries. We will anyhow cover this topic in our later articles.

12

Custom Gutenberg Blocks – Gradient Block Code

p.gradient-block {
	margin-bottom: 1.5em;
    text-align: justify;
    background: radial-gradient(circle at top left,#ff0071 0%,#9000ab 100%);
    border-radius: 8px;
    padding: 32px;
    margin-top: 24px;
    color: #fff;
}

Custom Gutenberg Blocks – Gradient Block Output

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

Custom Gutenberg Gradient Block CSS Code Explanation

Create a custom Gutenberg Block with Radiant colors, or do we say create custom Gutenberg Block with gradient colors. Either way, we are going to learn how to create a custom Gutenberg Block with gradient colors using CSS in this section of this article. We are using a single paragraph block to style this block. One of the primary CSS functions that help us to create a gradient Gutenberg block used in this demonstration is the radial-gradient function.

What is the radial-gradient function in CSS?

The CSS radial-gradient function generates an image containing a progressive transition between two or more colors that radiate from an origin. The shape may be an ellipse or a circle. Click here to learn more about radial-gradient function.

We begin the styling of this block by setting the bottom margin to 1.5 em. We now set the text alignment to justify. Now in the background property, we use a radial-gradient function with the circle on the top left shape with two-color strokes. Now set the border-radius to 8 pixels on all four sides. Now we apply 32 pixels padding on all four sides. Set the margin on the top to 24 pixels using the margin-top property. Finally and the styling by setting the text color to White using the color property.

Gutenberg Create Custom Block – Conclusion

WordPress custom Gutenberg block
WordPress custom Gutenberg block

The code blocks provided above are to simplify the demonstration. It may slightly differ in your situation. You are free to make any necessary modifications to the code blocks to suit your project requirements.

We hope you find this article useful. In case you are stuck and or need help, feel free to drop a comment below or submit your question. Do share it further and add your feedback about the article in the comments section.

About Syed Hussaini

I am a business consultant with 15+ Years of extensive expertise in IT Services Management (ITSM), Team Management, Training, Knowledge Management, and Customer and Technical Support. My involvement in a corporate environment and freelance projects has taught me how to be more productive, proactive, and independent.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.