{"id":8433,"date":"2023-03-13T23:17:58","date_gmt":"2023-03-13T23:17:58","guid":{"rendered":"https:\/\/mauricemuteti.info\/?p=8433"},"modified":"2023-03-13T23:17:58","modified_gmt":"2023-03-13T23:17:58","slug":"you-wont-believe-how-easy-it-is-to-register-a-custom-block-in-wordpress","status":"publish","type":"post","link":"https:\/\/mauricemuteti.info\/you-wont-believe-how-easy-it-is-to-register-a-custom-block-in-wordpress\/","title":{"rendered":"&#8220;You Won&#8217;t Believe How Easy it is to Register a Custom Block in WordPress!&#8221;"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_49 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"ez-toc-toggle-icon-1\"><label for=\"item-6767acf27a580\" aria-label=\"Table of Content\"><span style=\"display: flex;align-items: center;width: 35px;height: 30px;justify-content: center;direction:ltr;\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/label><input  type=\"checkbox\" id=\"item-6767acf27a580\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/mauricemuteti.info\/you-wont-believe-how-easy-it-is-to-register-a-custom-block-in-wordpress\/#Understanding_WordPress_Registering_Custom_Blocks\" title=\"Understanding WordPress: Registering Custom Blocks\">Understanding WordPress: Registering Custom Blocks<\/a><ul class='ez-toc-list-level-2'><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/mauricemuteti.info\/you-wont-believe-how-easy-it-is-to-register-a-custom-block-in-wordpress\/#What_Are_Custom_Blocks\" title=\"What Are Custom Blocks?\">What Are Custom Blocks?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/mauricemuteti.info\/you-wont-believe-how-easy-it-is-to-register-a-custom-block-in-wordpress\/#Why_Are_Custom_Blocks_Important\" title=\"Why Are Custom Blocks Important?\">Why Are Custom Blocks Important?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/mauricemuteti.info\/you-wont-believe-how-easy-it-is-to-register-a-custom-block-in-wordpress\/#Step-by-step_Guide_on_How_to_Register_Custom_Blocks_in_WordPress\" title=\"Step-by-step Guide on How to Register Custom Blocks in WordPress\">Step-by-step Guide on How to Register Custom Blocks in WordPress<\/a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/mauricemuteti.info\/you-wont-believe-how-easy-it-is-to-register-a-custom-block-in-wordpress\/#Step_1_Create_A_Plugin\" title=\"Step 1: Create A Plugin\">Step 1: Create A Plugin<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/mauricemuteti.info\/you-wont-believe-how-easy-it-is-to-register-a-custom-block-in-wordpress\/#Step_2_Load_The_Block_Editor_Scripts\" title=\"Step 2: Load The Block Editor Scripts\">Step 2: Load The Block Editor Scripts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/mauricemuteti.info\/you-wont-believe-how-easy-it-is-to-register-a-custom-block-in-wordpress\/#Step_3_Register_The_Custom_Block\" title=\"Step 3: Register The Custom Block\">Step 3: Register The Custom Block<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/mauricemuteti.info\/you-wont-believe-how-easy-it-is-to-register-a-custom-block-in-wordpress\/#Step_4_Create_The_Block_Template\" title=\"Step 4: Create The Block Template\">Step 4: Create The Block Template<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/mauricemuteti.info\/you-wont-believe-how-easy-it-is-to-register-a-custom-block-in-wordpress\/#Conclusion\" title=\"Conclusion\">Conclusion<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h1><span class=\"ez-toc-section\" id=\"Understanding_WordPress_Registering_Custom_Blocks\"><\/span>Understanding WordPress: Registering Custom Blocks<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p>If you&#8217;re looking to create a unique website, then WordPress is the perfect platform for you. With its open-source content management system, it offers limitless possibilities when it comes to creating personalized websites. One feature that can particularly enhance a website&#8217;s functionality is adding custom blocks to its pages and posts using WordPress.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"What_Are_Custom_Blocks\"><\/span>What Are Custom Blocks?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Custom blocks are elements of the WordPress block editor. They enable website owners to blend existing WordPress blocks or design their own to create a unique website. Custom blocks can improve a website&#8217;s design and functionality, providing a better user experience to visitors. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Why_Are_Custom_Blocks_Important\"><\/span>Why Are Custom Blocks Important?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Custom blocks are essential because they allow website owners to create unique pages and posts that stand out from the crowd. With custom blocks, website owners can add custom functionalities to their websites, making their pages and posts more engaging, interactive, and user-friendly. This can go a long way in attracting and retaining website visitors and improving website performance.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Step-by-step_Guide_on_How_to_Register_Custom_Blocks_in_WordPress\"><\/span>Step-by-step Guide on How to Register Custom Blocks in WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Step_1_Create_A_Plugin\"><\/span>Step 1: Create A Plugin<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Creating a plugin is necessary because it will hold the code for the custom block. Creating a plugin is not complicated, and it only requires using an IDE like Visual Studio Code or Sublime Text. Here&#8217;s how you can create a plugin:<\/p>\n<ol>\n<li>Create a new directory and name it based on your custom block name (e.g., my-custom-block).<\/li>\n<li>Create a file within the directory named my-custom-block.php.<\/li>\n<li>Edit the my-custom-block.php using an IDE and add the following code:\n<pre><code>&lt;?php\n\/*\nPlugin Name: My Custom Block\n*\/<\/code><\/pre>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Step_2_Load_The_Block_Editor_Scripts\"><\/span>Step 2: Load The Block Editor Scripts<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The next step is to load the block editor scripts, enabling the block editor to recognize the custom block&#8217;s scripts when loading the website. Here&#8217;s how you can load the block editor scripts:<\/p>\n<ol>\n<li>In the my-custom-block.php file, add the following code:\n<pre><code>add_action('enqueue_block_editor_assets', 'load_my_custom_block_assets');\nfunction load_my_custom_block_assets() {\nwp_enqueue_script(\n'my-custom-block',\nplugin_dir_url( __FILE__ ) . 'dist\/block.js',\n[ 'wp-i18n', 'wp-element', 'wp-blocks', 'wp-components', 'wp-editor' ],\nfilemtime( plugin_dir_path( __FILE__ ) . 'dist\/block.js' )\n);\n}<\/code><\/pre>\n<\/li>\n<li>In the same file, add this code to load the block&#8217;s styles:\n<pre><code>add_action('wp_enqueue_scripts', 'load_my_custom_block_styles');\nfunction load_my_custom_block_styles() {\nwp_enqueue_style(\n'my-custom-block-style',\nplugin_dir_url( __FILE__ ) . 'dist\/block.css',\n[],\nplugin_dir_path( __FILE__ )\n);\n}<\/code><\/pre>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Step_3_Register_The_Custom_Block\"><\/span>Step 3: Register The Custom Block<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>This step involves adding information to let WordPress know about the block, such as the name of the block, the category in which it falls, and the block&#8217;s attributes. Here&#8217;s how you can register the custom block:<\/p>\n<ol>\n<li>In the my-custom-block.php file, add the following code:\n<pre><code>add_action('init', 'register_my_custom_blocks');\nfunction register_my_custom_blocks() {\nregister_block_type(\n'my-custom-block\/my-custom-block',\n[\n'attributes' =&gt; [\n'textColor' =&gt; [\n'type' =&gt; 'string',\n'default' =&gt; '#000000',\n],\n'backgroundColor' =&gt; [\n'type' =&gt; 'string',\n'default' =&gt; '#ffffff',\n],\n],\n'editor_script' =&gt; 'my-custom-block',\n'editor_style' =&gt; 'my-custom-block-style',\n'style' =&gt; 'my-custom-block-style',\n'render_callback' =&gt; 'render_my_custom_block',\n]\n);\n}<\/code><\/pre>\n<\/li>\n<\/ol>\n<p>The above code uses the register_block_type() function, which accepts two parameters; the unique name of the block and an array of settings that include attributes, scripts, and styles. The attributes array defines the block&#8217;s attributes used to capture user input, while editor_script and editor_style tell WordPress which scripts and styles to use in the block editor. The style property is used to specify styles that apply to the front-end of the website, while the render_callback function is responsible for rendering the custom block.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_4_Create_The_Block_Template\"><\/span>Step 4: Create The Block Template<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The final step is to create the block template. This is where website owners can design the custom block&#8217;s appearance, functionality, and layout. Here&#8217;s how you can create the block template:<\/p>\n<ol>\n<li>In the my-custom-block directory, create a new directory named &#8220;src&#8221; and create a block.js file within the src directory.<\/li>\n<li>Add the following code to load the block editor components:\n<pre><code>import { RichText, InspectorControls } from '@wordpress\/block-editor';\nimport { PanelBody, PanelRow, TextControl } from '@wordpress\/components';\nimport { addFilter } from '@wordpress\/hooks';\nimport { __ } from '@wordpress\/i18n';\n\nfunction my_custom_block_options( settings, name ) {\nif ( name !== 'core\/group' ) {\nreturn settings;\n}\n\nsettings.attributes = Object.assign( settings.attributes, {\ntextColor: {\ntype: 'string',\ndefault: '#000000'\n},\nbackgroundColor: {\ntype: 'string',\ndefault: '#ffffff'\n},\n} );\n\nreturn settings;\n}\naddFilter( 'blocks.registerBlockType', 'my_custom_block_options', my_custom_block_options );<\/code><\/pre>\n<\/li>\n<li>Create a &#8220;dist&#8221; directory within the &#8220;my-custom-block&#8221; directory and create a block.js and block.css file within the &#8220;dist&#8221; directory.<\/li>\n<li>Add the following code to design the custom block&#8217;s appearance, functionality, and layout:\n<pre><code>const edit = ( props ) =&gt; {\nconst { className, setAttributes, attributes } = props;\nconst { textColor, backgroundColor } = attributes;\n\nconst handleChangeTextColor = ( newTextColor ) =&gt; {\nsetAttributes( { textColor: newTextColor } );\n};\n\nconst handleChangeBackgroundColor = ( newBackgroundColor ) =&gt; {\nsetAttributes( { backgroundColor: newBackgroundColor } );\n};\n\nreturn (\n&lt;div\nclassName={ className }\nstyle={ {\ncolor: textColor,\nbackgroundColor: backgroundColor,\n} }\n&gt;\n&lt;InspectorControls&gt;\n&lt;PanelBody title={ __( 'Color Settings' ) }&gt;\n&lt;PanelRow&gt;\n&lt;TextControl\nlabel={ __( 'Text Color' ) }\nvalue={ textColor }\nonChange={ handleChangeTextColor }\n\/&gt;\n&lt;\/PanelRow&gt;\n&lt;PanelRow&gt;\n&lt;TextControl\nlabel={ __( 'Background Color' ) }\nvalue={ backgroundColor }\nonChange={ handleChangeBackgroundColor }\n\/&gt;\n&lt;\/PanelRow&gt;\n&lt;\/PanelBody&gt;\n&lt;\/InspectorControls&gt;\n&lt;RichText\ntagName=\"p\"\nclassName=\"my-custom-block-text\"\nstyle={ { color: textColor } }\nvalue={ attributes.content }\nonChange={ ( content ) =&gt; setAttributes( { content } ) }\nplaceholder={ __( 'Enter your text here...' ) }\n\/&gt;\n&lt;\/div&gt;\n);\n};\n\nconst save = ( props ) =&gt; {\nconst { className, attributes } = props;\nconst { textColor, backgroundColor, content } = attributes;\n\nreturn (\n&lt;div\nclassName={ className }\nstyle={\n{\ncolor: textColor,\nbackgroundColor: backgroundColor,\n} }\n&gt;\n&lt;RichText.Content\ntagName=\"p\"\nclassName=\"my-custom-block-text\"\nstyle={ { color: textColor } }\nvalue={ content }\n\/&gt;\n&lt;\/div&gt;\n);\n};<\/code><\/pre>\n<\/li>\n<\/ol>\n<p>The above code uses InspectorControls, PanelBody, PanelRow, TextControl, and RichText to customize the custom blocks&#8217; appearance, functionality, and layout in the editor. The save function renders the custom block on the front-end of the website.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In conclusion, registering a custom block in WordPress may seem intimidating at first, but it&#8217;s not as complicated as it sounds. Follow the mentioned steps to register the custom block. Remember to create a plugin, load the block editor scripts, register the custom block, and create the block template. With this knowledge in mind, website owners can design their own custom blocks and improve their website&#8217;s overall functionality and user experience.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Understanding WordPress: Registering Custom Blocks If you&#8217;re looking to create a unique website, then WordPress is the perfect platform for you. With its open-source content&hellip;<\/p>\n","protected":false},"author":1,"featured_media":7209,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3287],"tags":[],"jetpack_featured_media_url":"https:\/\/mauricemuteti.info\/wp-content\/uploads\/2023\/03\/WORDPRESS-ULTIMATE-GUIDE-How-To-step-by-step-Tutorial.png","_links":{"self":[{"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/posts\/8433"}],"collection":[{"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/comments?post=8433"}],"version-history":[{"count":0,"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/posts\/8433\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/media\/7209"}],"wp:attachment":[{"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/media?parent=8433"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/categories?post=8433"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/tags?post=8433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}