{"id":27592,"date":"2021-07-31T17:00:58","date_gmt":"2021-07-31T15:00:58","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=27592"},"modified":"2021-07-30T11:57:49","modified_gmt":"2021-07-30T09:57:49","slug":"how-to-create-a-custom-block-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-create-a-custom-block-in-wordpress\/","title":{"rendered":"How to Create a Custom Gutenberg Block in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Gutenberg has been the default WordPress editor ever since the 5.0 update. It was created out of the need for a more intuitive and user-friendly editor than its predecessor\u2014the classic editor. And while the process of dragging and dropping blocks of content has made Gutenberg more appealing to users, this editor is not without its shortcomings. One of the main ones lies in the number of blocks that are available to the users by default. While there are WordPress plugins and themes that offer some additional blocks, even with that, it might be a struggle to add a unique feel to your website. This is to say nothing of adding custom functionalities.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Knowing how to create a custom block in WordPress is crucial for all users who decide to customize their website <a href=\"https:\/\/qodeinteractive.com\/magazine\/introduction-to-wordpress-gutenberg-block-editor\/\">using the Gutenberg editor<\/a>. As an added benefit to creating custom-tailored Gutenberg blocks, you could potentially get rid of any plugins that you used to add custom blocks to your website or extend their functionality. In this article, we\u2019ll explain how you can create a custom Gutenberg block in WordPress using a plugin. Since the process involves several steps, we\u2019ll be tackling them one at a time:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#creating-a-custom-gutenberg-block-with-a-plugin\">Creating a custom Gutenberg block with a plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#using-the-plugin-to-specify-block-properties\">Using the plugin to specify block properties<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-the-output-code\">Adding the output code<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#styling-the-custom-block\">Styling the custom block<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"creating-a-custom-gutenberg-block-with-a-plugin\"><\/a>Creating a custom Gutenberg block with a plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]As with many other custom features in WordPress, there are two distinct ways you can handle the introduction of a custom Gutenberg block. One is to create it manually from scratch, using code, or to use a suitable <a href=\"https:\/\/qodeinteractive.com\/magazine\/best-gutenberg-blocks-plugins-wordpress\/\">WordPress Gutenberg plugin<\/a> to do it. Since the former is very coding-intensive and time-consuming, we have opted to show you the latter. And the plugin we\u2019ll be using for this showcase is called Lazy Blocks, and it allows you to create countless custom Gutenberg blocks. Let\u2019s take a look at some of its features briefly before proceeding to the how-tos.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <a href=\"https:\/\/wordpress.org\/plugins\/lazy-blocks\/\" target=\"_blank\" rel=\"noopener\">Custom Blocks Constructor \u2013 Lazy Blocks<\/a> plugin is a free WordPress plugin made for constructing custom Gutenberg blocks. It also has the option to show custom meta fields and build post templates for all post types. The primary purpose of the plugin is, of course, on how to create a custom block in WordPress. It offers a very intuitive UI for registering custom blocks and adding their control fields (e.g. text field, URL, checkbox, and color picker field) using a drag and drop editor. However, this plugin isn\u2019t designed for novice WordPress users, as the block creation process requires users to write some custom code that will display the block content on the frontend.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With that being said, the plugin is very well documented, offering simple code examples for the implementation of each of the control fields. Therefore, we strongly advise reviewing the plugin\u2019s documentation before starting to work with it. Furthermore, the plugin offers supplementary filters and hooks for additional customization purposes. All of this makes it well-suited to intermediate WordPress users who have some previous coding experience as well as advanced WordPress users. Having said that, let\u2019s explore how to create a custom block in WordPress using this plugin.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">installing the plugin<\/a>, <strong>navigate to the Lazy Blocks section<\/strong> within your admin dashboard. If you\u2019ve already created a new Gutenberg block, you will be able to access and edit it from the Blocks subsection.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"476\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Lazy-Blocks-Add-New.jpg\" class=\"attachment-full size-full\" alt=\"Lazy Blocks Add New\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Lazy-Blocks-Add-New.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Lazy-Blocks-Add-New-300x147.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Lazy-Blocks-Add-New-768x377.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Lazy-Blocks-Add-New-620x305.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Otherwise, to create a new custom Gutenberg block, <strong>navigate to Lazy Blocks &gt; Add New.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"using-the-plugin-to-specify-block-properties\"><\/a>Using the plugin to specify block properties<\/h2>\n<p>[\/vc_column_text][vc_column_text]Once you\u2019ve created a new block, you will see the screen shown further below. This screen can be roughly divided into three sections. <strong>The first section is the Controls, which enables you to add the fields that are part of your Gutenberg block (e.g. text fields, checkboxes, color picker fields, etc.) and is divided into two tabs\u2014Content and Inspector. All fields from the Content tab will be displayed in the editor section of the page when you use your custom block. And the fields from the Inspector tab will be displayed in the right-side menu when the custom block is used.<\/strong> You will be able to see this in practice when we get to the custom Gutenberg block we have prepared as an example for this article.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The second section, located on the right side of the page, is used for specifying the options of the Gutenberg block, as well as its control fields.<\/strong> This is done using the two tabs available within the section, named Block and Control.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally,<strong> the third section is the Code section, where you need to add the code for displaying the Gutenberg block as a whole. It also has two tabs\u2014Frontend and Editor. These let you code the output of your custom Gutenberg block both in the frontend of your website, as well as preview it in your page editor.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The plugin offers three possible coding techniques for the output: using HTML code with the handlebar notation, using PHP code (i.e. a mix of HTML and PHP code), or creating a separate template file with the code and uploading it to your server. If you opt for the last technique, you will need to make sure that your template file follows a strict <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-file-structure\/\">WordPress file structure<\/a>. More precisely, the file path has to be \/wp-content\/themes\/theme_name\/blocks\/lazyblock-block_name\/block.php. The<em> theme_name<\/em> and <em>block_name<\/em> parts should be changed to match your theme and custom Gutenberg block names respectively.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As you can see from the screenshot below, the default technique for creating the output is the HTML + Handlebars option.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"612\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Block-Content.jpg\" class=\"attachment-full size-full\" alt=\"Block Content\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Block-Content.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Block-Content-300x189.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Block-Content-768x485.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Block-Content-620x392.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now that we\u2019ve covered the different sections, let\u2019s examine how you can add the control fields and specify their options from those that are available.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]By default, you will be placed within the Content tab of the Controls section. <strong>To add a control field in that tab, simply press the \u201c+\u201d button.<\/strong> This will create a text field by default, but you can use the options on the right to adjust that. More precisely, when you select a control field, you can set its options via the Control tab on the right. Some of the options are available for all control fields (e.g. Label, Name, Type, and Placement), while others could be specific to a certain control field.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"638\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Controls-section.jpg\" class=\"attachment-full size-full\" alt=\"Controls section\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Controls-section.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Controls-section-300x198.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Controls-section-768x506.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Controls-section-620x408.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Therefore, <strong>the first part of creating a custom Gutenberg block using the Lazy Blocks plugin is to register the block. Then add all the necessary control fields for that block and adjust their options, as well as the options of the block itself. The remaining parts of creating a custom Gutenberg block include choosing the coding method for the output and making the appropriate code. Then you\u2019ll need to insert the block into the Gutenberg editor on a given page and create the additional CSS code for stylization purposes.<\/strong> We will further illustrate these steps using an example created for this article.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The block registration process starts after you access the Lazy Blocks &gt; Add New screen. <strong>After selecting the Block tab on the right, you can specify some of the information and properties that your custom block will have, which will register it as a result.<\/strong> For this article, we decided to make the block Title <em>Custom CTA<\/em>, which automatically created a corresponding slug.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Other than the Title and Slug, you can also specify the Category, Keywords, and Icon properties. These are useful when searching for your custom block from the list of the available blocks that can be added to pages and posts. Another helpful property is the Description. It can help you find the exact block you wish to edit from the list of blocks, without having to examine their individual code.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As for the remaining three sections, we decided to tick all the options from the Supports section, but in the sections below it\u2014Align and Condition\u2014we left the properties set to their default values. You can review the plugin\u2019s documentation, especially the page on <a href=\"https:\/\/lazyblocks.com\/documentation\/create-block\/\" target=\"_blank\" rel=\"noopener\">creating blocks<\/a> to learn more about these properties.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Block-Gutenberg.jpg\" class=\"attachment-full size-full\" alt=\"Block Gutenberg\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Block-Gutenberg.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Block-Gutenberg-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Block-Gutenberg-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Block-Gutenberg-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you\u2019ve done that, the following step is to<strong> insert the control fields for your custom block<\/strong>. Using the Content tab, we added the following control fields for our example block, <em>Custom CTA<\/em>: repeater, text, rich text, URL, and text. And from the Inspector tab, we used the Placement option to add a color picker field. Moreover, we deliberately added a label and a name to each of the control fields. They are all shown, with their respective control names being highlighted, on the two screenshots below. Please note, <strong>the control names are the most important properties, as they are used in the coding section.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"670\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Block-Content-Controls.jpg\" class=\"attachment-full size-full\" alt=\"Block Content Controls\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Block-Content-Controls.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Block-Content-Controls-300x207.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Block-Content-Controls-768x531.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Block-Content-Controls-620x429.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"725\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Block-Content-Code.jpg\" class=\"attachment-full size-full\" alt=\"Block Content Code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Block-Content-Code.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Block-Content-Code-300x224.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Block-Content-Code-768x575.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Block-Content-Code-620x464.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]While most of these control fields are straightforward, the repeater control field might be confusing. This field allows you to add additional control fields within it. More precisely, the repeater and the content type within act like a row that can be repeated indefinitely, hence its name.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For our example, we chose to add an image and a text field, named<strong> inner-small-image<\/strong> and<strong> inner-label<\/strong>, respectively, to our row. Furthermore, we kept most of the options for the control fields that we added at their default values. The only exceptions are the 40-character limit we put on the<strong> inner-label<\/strong> text field, and that we made the<strong> right-column-text<\/strong> rich text field multi-lined. With that being said, let\u2019s proceed to the code created for this article.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-the-output-code\"><\/a>Adding the output code<\/h2>\n<p>[\/vc_column_text][vc_column_text]<strong>We opted to use the PHP output method within the Code section, but you can choose whichever of the three available methods you feel most comfortable with.<\/strong> If you choose to use one of the other two coding output methods that the plugin allows, we advise you to go through the plugin\u2019s documentation beforehand.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Moreover, <strong>there are additional options you can set within the same section. You can choose whether you want to have a preview of the custom block when using it or not.<\/strong> We decided not to include this option by setting <em>Show block preview in editor<\/em> to <em>Never<\/em>. However,<strong> if you choose to enable the preview on your end, it is important to know that you can either choose to use the same code as the frontend output or create a separate code for it in the Editor tab. If you want to use the same code all you need to do is tick the <em>Single output code for Frontend and Editor<\/em> checkbox option.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"727\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Adding-the-output-code.jpg\" class=\"attachment-full size-full\" alt=\"Adding the output code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Adding-the-output-code.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Adding-the-output-code-300x225.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Adding-the-output-code-768x576.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Adding-the-output-code-620x465.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Having said that, the code that we created for this article is shown below.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;?php\r\n$wrapper_style = '';\r\nif ( isset( $attributes['border-color'] ) ) {\r\n$wrapper_style .= \"border: 2px solid \" . $attributes['border-color'];\r\n} ?&gt;\r\n&lt;div class=\"custom-block-wrapper\" style=\"&lt;?php echo $wrapper_style; ?&gt;\"&gt;\r\n&lt;div class=\"left-column\"&gt;\r\n&lt;?php foreach ( $attributes['left-column-repeater'] as $inner ) { ?&gt;\r\n&lt;div class=\"left-inner-section\"&gt;\r\n&lt;?php if ( isset( $inner['inner-small-image']['url'] ) ) { ?&gt;\r\n&lt;img src=\"&lt;?php echo esc_url( $inner['inner-small-image']['url'] ); ?&gt;\"\r\nalt=\"&lt;?php echo esc_attr( $inner['inner-small-image']['alt'] ); ?&gt;\"&gt;\r\n&lt;?php }\r\nif ( isset( $inner['inner-label'] ) ) { ?&gt;\r\n&lt;p&gt;&lt;?php echo esc_html( $inner['inner-label'] ); ?&gt;&lt;\/p&gt;\r\n&lt;?php } ?&gt;\r\n&lt;\/div&gt;\r\n&lt;?php } ?&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"right-column\"&gt;\r\n&lt;?php if ( isset( $attributes['right-column-title'] ) ) { ?&gt;\r\n&lt;h3&gt;&lt;?php echo esc_html( $attributes['right-column-title'] ); ?&gt;&lt;\/h3&gt;\r\n&lt;?php }\r\nif ( isset( $attributes['right-column-text'] ) ) { ?&gt;\r\n&lt;p&gt;&lt;?php echo wp_kses_post( $attributes['right-column-text'] ); ?&gt;&lt;\/p&gt;\r\n&lt;?php }\r\nif ( isset( $attributes['cta-link'] ) &amp;&amp; isset( $attributes['cta-link-text'] ) ) { ?&gt;\r\n&lt;a href=\"&lt;?php echo esc_url( $attributes['cta-link'] ); ?&gt;\" target=\"_blank\" class=\"btn\"&gt;&lt;?php echo esc_html( $attributes['cta-link-text'] ); ?&gt;&lt;\/a&gt;\r\n&lt;?php } ?&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Let\u2019s break this code down.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To do that, we\u2019ll look at it in a more simplified form. As you can see below, the HTML structure of our custom Gutenberg block contains two <a href=\"https:\/\/www.w3schools.com\/tags\/tag_div.ASP\" target=\"_blank\" rel=\"noopener\">&lt;div&gt;<\/a> elements. Those elements represent the left and right columns of our block and have appropriate CSS class names to match each column. They are both wrapped with a div element with the class <strong>custom-block-wrapper<\/strong>, which serves to add a border around our Gutenberg block. By using the <a href=\"https:\/\/www.php.net\/manual\/en\/function.isset.php\" target=\"_blank\" rel=\"noopener\">isset()<\/a> function, we first check whether the <strong>border-color<\/strong> control property has been added to the plugin\u2019s <strong>$attributes<\/strong> array, and then store the CSS for adding a border inside a variable called <strong>$wrapper_style<\/strong>. The content of that variable is, then, passed to the wrapping div in the form of inline CSS, which creates a 2px thick border around the block in our chosen color.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;?php\r\n$wrapper_style = '';\r\nif ( isset( $attributes['border-color'] ) ) {\r\n$wrapper_style .= \"border: 2px solid \" . $attributes['border-color'];\r\n} ?&gt;\r\n&lt;div class=\"custom-block-wrapper\" style=\"&lt;?php echo $wrapper_style; ?&gt;\"&gt;\r\n&lt;div class=\"left-column\"&gt;\r\n&lt;!-- Left column code goes here. --&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"right-column\"&gt;\r\n&lt;!-- Right column code goes here. --&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To obtain the border around the custom block, we had to access the <strong>border-color<\/strong> property of the<strong> $attributes<\/strong> array. Similarly, we will access any other control property that we defined, using the <strong>$attributes[&#8216;control_name&#8217;]<\/strong> value while making sure to use the proper control name instead of the <strong>control_name<\/strong> placeholder. With that being said, let\u2019s examine the content from both columns of our custom block.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Using the <a href=\"https:\/\/www.php.net\/manual\/en\/control-structures.foreach.php\" target=\"_blank\" rel=\"noopener\">foreach loop<\/a>, we displayed the content of every row of the<strong> left-column-repeater<\/strong> control element that we previously added. Moreover, the content is placed in a &lt;div&gt; element with the class<strong> left-inner-section<\/strong>, so that it can be easily targeted with CSS later. And each of those inner sections contains a small image, named<strong> inner-small-image<\/strong>, and a label, named <strong>inner-label<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;?php foreach ( $attributes['left-column-repeater'] as $inner ) { ?&gt;\r\n&lt;div class=\"left-inner-section\"&gt;\r\n&lt;?php if ( isset( $inner['inner-small-image']['url'] ) ) { ?&gt;\r\n&lt;img src=\"&lt;?php echo esc_url( $inner['inner-small-image']['url'] ); ?&gt;\"\r\nalt=\"&lt;?php echo esc_attr( $inner['inner-small-image']['alt'] ); ?&gt;\"&gt;\r\n&lt;?php }\r\nif ( isset( $inner['inner-label'] ) ) { ?&gt;\r\n&lt;p&gt;&lt;?php echo esc_html( $inner['inner-label'] ); ?&gt;&lt;\/p&gt;\r\n&lt;?php } ?&gt;\r\n&lt;\/div&gt;\r\n&lt;?php } ?&gt;<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As for the right column, it contains the title, named <strong>right-column-title<\/strong>, which is wrapped with a &lt;h3&gt; tag. It also contains some text we inserted, named <strong>right-column-text<\/strong>, which is wrapped with a paragraph tag.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And, if both the link URL (<strong>cta-link<\/strong>) and link text (<strong>cta-link-text<\/strong>) are added, a link that opens in a separate tab will be displayed at the bottom of the right column.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;?php if ( isset( $attributes['right-column-title'] ) ) { ?&gt;\r\n&lt;h3&gt;&lt;?php echo esc_html( $attributes['right-column-title'] ); ?&gt;&lt;\/h3&gt;\r\n&lt;?php }\r\nif ( isset( $attributes['right-column-text'] ) ) { ?&gt;\r\n&lt;p&gt;&lt;?php echo wp_kses_post( $attributes['right-column-text'] ); ?&gt;&lt;\/p&gt;\r\n&lt;?php }\r\nif ( isset( $attributes['cta-link'] ) &amp;&amp; isset( $attributes['cta-link-text'] ) ) { ?&gt;\r\n&lt;a href=\"&lt;?php echo esc_url( $attributes['cta-link'] ); ?&gt;\" target=\"_blank\" class=\"btn\"&gt;&lt;?php echo esc_html( $attributes['cta-link-text'] ); ?&gt;&lt;\/a&gt;\r\n&lt;?php } ?&gt;<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Additionally, we <a href=\"https:\/\/developer.wordpress.org\/themes\/theme-security\/data-sanitization-escaping\/\" target=\"_blank\" rel=\"noopener\">sanitized the output<\/a> of all control fields, using the following functions: <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/esc_url\/\" target=\"_blank\" rel=\"noopener\">esc_url()<\/a>, <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/esc_attr\/\" target=\"_blank\" rel=\"noopener\">esc_attr()<\/a>, <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/esc_html\/\" target=\"_blank\" rel=\"noopener\">esc_html()<\/a> and <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_kses_post\/\" target=\"_blank\" rel=\"noopener\">wp_kses_post()<\/a>. We\u2019ll conclude the explanation of our code example with this. The code itself, as well as the explanation, should help you cover the majority of the hard work for creating a custom Gutenberg block.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After coding your <strong>custom Gutenberg block, you will need to add it to one of your pages and display its output<\/strong>. To add your custom Gutenberg block to a page, <strong>press the \u201c+\u201d button<\/strong> for adding new blocks and <strong>use the search feature to easily find your custom block<\/strong>. Once you\u2019ve located it, <strong>click on your custom block<\/strong> to add it to the page.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Custom-CTA-Block.jpg\" class=\"attachment-full size-full\" alt=\"Custom CTA Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Custom-CTA-Block.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Custom-CTA-Block-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Custom-CTA-Block-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Custom-CTA-Block-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>To further customize your page content, you can use the Columns block beforehand and place your custom block into a column made that way.<\/strong> This is what we\u2019ve done by creating two columns with the Columns block and placing our custom block in the first one.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After that, <strong>you will need to set the options within the custom block you just added<\/strong>. The ones we chose to set are shown on the two screenshots below. Please note, we added the border color option within the Block tab on the right while the block was selected, i.e. in the Inspector, as we suggested at the start.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Also, we added three rows to the repeater field, each with a small image and label. We used the same small image, with the dimensions 60&#215;60 pixels, in all three rows. You can use as many rows as you see fit and add different images, but if you plan on using our example Gutenberg block code, you should pick images with similar, smaller, dimensions for optimal display.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"661\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Custom-CTA-Options.jpg\" class=\"attachment-full size-full\" alt=\"Custom CTA Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Custom-CTA-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Custom-CTA-Options-300x205.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Custom-CTA-Options-768x524.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Custom-CTA-Options-620x423.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"738\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Custom-CTA-Settigs.jpg\" class=\"attachment-full size-full\" alt=\"Custom CTA Settigs\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Custom-CTA-Settigs.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Custom-CTA-Settigs-300x228.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Custom-CTA-Settigs-768x585.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Custom-CTA-Settigs-620x472.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>After adding the options, you should update the page and review the output of the custom Gutenberg block.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"styling-the-custom-block\"><\/a>Styling the custom block<\/h2>\n<p>[\/vc_column_text][vc_column_text]In most cases, that output will likely require additional CSS code to style it. Since such code is created on a case-by-case basis, we can\u2019t suggest any that will apply to all websites. So, <strong>you will need to create CSS code tailored to your current website design.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To help you along, we\u2019ve included the CSS code created for this article below. It serves to show how a version of the CSS for styling custom Gutenberg blocks could look. Please be aware that this code isn\u2019t meant to be simply copied and pasted. Instead, you should use it as inspiration for similar code that would apply to your website.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.custom-block-wrapper {\r\ndisplay: -webkit-box;\r\ndisplay: -ms-flexbox;\r\ndisplay: flex;\r\n-webkit-box-orient: horizontal;\r\n-webkit-box-direction: normal;\r\n-ms-flex-direction: row;\r\nflex-direction: row;\r\n-ms-flex-wrap: wrap;\r\nflex-wrap: wrap;\r\nwidth: 100%;\r\npadding: 20px 30px 20px 10px;\r\ntext-align: center;\r\n}\r\n.left-column {\r\nmargin: auto;\r\n}\r\n.left-inner-section{\r\ndisplay: -webkit-box;\r\ndisplay: -ms-flexbox;\r\ndisplay: flex;\r\npadding: 10px 20px;\r\n-webkit-box-align: center;\r\n-ms-flex-align: center;\r\nalign-items: center;\r\n}\r\n.left-inner-section img{\r\nmargin-right: 30px;\r\n}\r\n@media all and (min-width: 1025px){\r\n.left-column, .right-column {\r\n-ms-flex-preferred-size: 50%;\r\nflex-basis: 50%;\r\n}\r\n}\r\n.right-column h3 {\r\nmargin-top: 0;\r\n}\r\n.right-column .btn {\r\nbackground-color: #7BB9FF;\r\ntext-transform: uppercase;\r\ndisplay: inline-block;\r\nline-height: 2em;\r\nletter-spacing: .125em;\r\nborder-radius: 3em;\r\nfont-weight: 600;\r\npadding: 6px 20px;\r\nmargin-top: 10px;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Besides creating the CSS code, knowing where to place it is equally important.<strong> The recommended place for most WordPress users is the Appearance &gt; Customize &gt; Additional CSS section.<\/strong> But, our more advanced readers can place the code in a separate file, upload it to the server and enqueue it using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_style\/\" target=\"_blank\" rel=\"noopener\">wp_enqueue_style()<\/a> function. For more information on how to do that, we suggest taking a look at our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-enqueue-scripts-wordpress\/\">enqueueing scripts and stylesheets<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After adding the CSS using either of the two ways mentioned above, the output of your custom Gutenberg block should be harmonized with your site\u2019s design. Below, you can see the result we got after adding the CSS code we shared with you.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"598\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Final-Result.jpg\" class=\"attachment-full size-full\" alt=\"Final Result\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Final-Result.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Final-Result-300x185.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Final-Result-768x474.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Final-Result-620x383.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]With the Gutenberg editor, you can add content to your pages and posts by inserting different blocks to different parts of your website. Even though they offer a wide variety of features, there is only so much that can be done using the default Gutenberg blocks. At some point, every WordPress user that utilizes Gutenberg to customize their website will need to add a new or extend an existing functionality. This is where knowing how to create a custom block in Gutenberg for your WordPress site comes in.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Custom blocks can be created with code or using a plugin. In this article, we focused on showing you the process of creating a custom Gutenberg block using the Lazy Blocks plugin. The process itself consists of steps that are done in the plugin\u2019s UI as well as some coding steps. Be sure to carefully follow our guide and don\u2019t forget to review the plugin\u2019s documentation for additional information. Armed with this knowledge, we are sure you will be able to create your custom Gutenberg block in no time.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Take your website customization work with Gutenberg to the next level by learning how to create a custom block in WordPress. Check out our guide!<\/p>\n","protected":false},"author":11229,"featured_media":27627,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[72,4,13],"class_list":["post-27592","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-gutenberg","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/27592","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=27592"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/27592\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/27627"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=27592"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=27592"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=27592"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}