{"id":10763,"date":"2023-09-01T10:40:00","date_gmt":"2023-09-01T10:40:00","guid":{"rendered":"https:\/\/www.bluehost.com\/blog\/?p=10763"},"modified":"2023-08-02T14:25:59","modified_gmt":"2023-08-02T14:25:59","slug":"gutenberg-custom-blocks-for-content-creation","status":"publish","type":"post","link":"https:\/\/www.bluehost.com\/blog\/gutenberg-custom-blocks-for-content-creation\/","title":{"rendered":"Using Gutenberg Custom Blocks for WordPress Content Creation: A User-Friendly Guide"},"content":{"rendered":"\n<p>The <a href=\"https:\/\/wordpress.org\/gutenberg\/\">Gutenberg <\/a><a href=\"https:\/\/wordpress.org\/gutenberg\/\" target=\"_blank\" rel=\"noreferrer noopener\">block editor<\/a>, WordPress\u2019 content editor, has over <a href=\"https:\/\/gutenstats.blog\/\" target=\"_blank\" rel=\"noreferrer noopener\">81 million active installations<\/a>. Because of the market-dominating nature of WordPress and the intuitive nature of this editor\u2019s design, it\u2019s no surprise that this system is so popular.<\/p>\n\n\n\n<p>Gutenberg is an accessible drag-and-drop page builder and content editor. It offers many functionalities, along with varied approaches you can use to create the curated website of your dreams.<\/p>\n\n\n\n<p>This editor is built on <a href=\"https:\/\/wordpress.com\/support\/wordpress-editor\/blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Gutenberg blocks<\/strong><\/a>, diverse units of content that make up a website\u2019s pages and layout.<\/p>\n\n\n\n<p>You can get these blocks from the <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-block-library\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress Block Library<\/a>. This library is extensive, but it doesn\u2019t <em>always<\/em> have the exact block you need for your website.<\/p>\n\n\n\n<p>So, if you\u2019re an entrepreneur who wants advanced website functionality or specialized elements not yet offered by Gutenberg, you might be interested in using Gutenberg custom blocks on your WordPress website.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-gutenberg-wordpress-core-content-editor\">Gutenberg: WordPress\u2019 core content editor<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1999\" height=\"1094\" src=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor.png\" alt=\"WordPress Gutenberg content editor.\" class=\"wp-image-46218\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor.png 1999w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor-300x164.png 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor-1024x560.png 1024w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor-768x420.png 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor-1536x841.png 1536w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor-24x13.png 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor-36x20.png 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor-48x26.png 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Screenshot<\/em><\/figcaption><\/figure>\n\n\n\n<p>The <a href=\"https:\/\/www.bluehost.com\/blog\/how-to-use-the-new-wordpress-gutenberg-block-editor\/\">Gutenberg editor<\/a> is the core of WordPress\u2019 content editing framework. Its block-based structure makes it easy to <a href=\"https:\/\/www.bluehost.com\/blog\/how-to-create-a-website-guide\/\">build a <\/a><a href=\"https:\/\/www.bluehost.com\/blog\/how-to-create-a-website-guide\/\">WordPress<\/a><a href=\"https:\/\/www.bluehost.com\/blog\/how-to-create-a-website-guide\/\"> website<\/a> and all of its pages \u2014 even for total beginners.<\/p>\n\n\n\n<p>With this editor, you can create media-rich content in WordPress by choosing the new blocks you need. Then, you can size them as you wish and add the specific elements you want to appear on each page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What are Gutenberg blocks?<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"689\" height=\"575\" src=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-blocks.png\" alt=\"Gutenberg blocks are the elements that make up a page or post.\" class=\"wp-image-46219\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-blocks.png 689w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-blocks-300x250.png 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-blocks-24x20.png 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-blocks-36x30.png 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-blocks-48x40.png 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Screenshot<\/em><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-pullquote\"><blockquote><p>In Gutenberg, every page or post is made up of a collection of self-contained elements.<\/p><\/blockquote><\/figure>\n\n\n\n<p>You use these elements \u2014 or blocks \u2014 to construct pages, posts and everything else on your WordPress website.<\/p>\n\n\n\n<p>The <a href=\"https:\/\/gutenstats.blog\/\" target=\"_blank\" rel=\"noreferrer noopener\">most popular block<\/a> is the paragraph block, followed by the image and heading blocks. Other examples of block types include titles, text, dividers, widgets and videos.<\/p>\n\n\n\n<p>As we mentioned earlier, you can access WP blocks through the Block Library. You can find this by clicking the <strong>+ <\/strong>on the top-left side of your WordPress toolbar while editing a page or post.<\/p>\n\n\n\n<p>But what if WordPress\u2019 library doesn\u2019t offer the block type you\u2019re looking for? Or any placeholder that you might be able to upgrade to suit your needs?<\/p>\n\n\n\n<p>That\u2019s where custom blocks come in.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a><\/a>What are Gutenberg custom blocks?<\/h3>\n\n\n\n<p>Gutenberg allows anyone to create free assets. So if you have coding and web development experience, you can build <em>custom<\/em> blocks while creating your website.<\/p>\n\n\n\n<figure class=\"wp-block-pullquote\"><blockquote><p>Custom blocks offer even more flexibility and niche-specific functionality than default blocks.<\/p><\/blockquote><\/figure>\n\n\n\n<p>Users build custom blocks to create unique page elements.<\/p>\n\n\n\n<p>Gutenberg custom blocks offer many benefits, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You can design visually appealing, media-rich WordPress elements curated to <em>your<\/em> business\u2019s needs.<\/li>\n\n\n\n<li>They add unique and advanced functionalities to your website.<\/li>\n\n\n\n<li>They enhance the aesthetic look of your pages and help your business stand out from the crowd.<\/li>\n\n\n\n<li>You only need to code blocks once. After that, you can use them across all of your websites and pages.<\/li>\n<\/ul>\n\n\n\n<p>However, custom blocks come with some challenges. For one thing,making them requires in-depth technical knowledge. Also, you\u2019ll need some specific coding expertise and developer tools.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a><\/a>How to get custom Gutenberg blocks for WordPress<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks.png\" alt=\"How to get custom Gutenberg blocks for WordPress.\" class=\"wp-image-46220\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks.png 1920w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks-300x169.png 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks-1024x576.png 1024w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks-768x432.png 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks-1536x864.png 1536w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks-24x14.png 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks-36x20.png 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks-48x27.png 48w\" sizes=\"100vw\" \/><\/figure>\n\n\n\n<p>To get Gutenberg custom blocks, you have to either build them yourself or purchase them.<\/p>\n\n\n\n<p>Creating custom blocks isn\u2019t in everyone\u2019s skill set, but that isn\u2019t a problem. You can buy custom Gutenberg blocks instead of building them yourself. To do so, find a <a href=\"https:\/\/www.bluehost.com\/about\">top-notch developer<\/a> you trust, then work with them to create your ideal blocks.<\/p>\n\n\n\n<p>If you plan to create these blocks yourself, there are some things you should consider before you begin.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a><\/a>What to consider before creating custom blocks<\/h2>\n\n\n\n<p>Creating a Gutenberg custom block takes time and energy. Before you start the process, you should ensure you\u2019ve exhausted all your other options.<\/p>\n\n\n\n<p>You can verify that there aren\u2019t any other suitable approaches by looking carefully through the library of Gutenberg default blocks. Make sure there aren\u2019t any existing blocks that provide the basic functions or style specs you need.<\/p>\n\n\n\n<p>And if you\u2019ve determined that you <em>do<\/em> need a custom block, outline the vital specs for your block<em> before <\/em>you start building. Think about aesthetic elements, default settings and core features. Also, consider toolbar specifications and other key stylistic and functional characteristics.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a><\/a>What you need to build Gutenberg custom blocks<\/h2>\n\n\n\n<p>Once you determine your block\u2019s most essential aspects, there are a few more key requirements you\u2019ll need to fulfill prior to starting the process.<\/p>\n\n\n\n<p>An active WordPress website is essential. And you\u2019ll need at least some experience with <a href=\"https:\/\/www.bluehost.com\/blog\/what-is-javascript\/\">JavaScript<\/a> and JavaScript build tools, such as <a href=\"https:\/\/nodejs.org\/en\" target=\"_blank\" rel=\"noreferrer noopener\">Node.js<\/a>.<\/p>\n\n\n\n<p>You will also need intermediate HTML, CSS and PHP knowledge to create your own custom blocks.<\/p>\n\n\n\n<p>If you aren\u2019t super well-versed in this area, no worries. You can save time and stress by hiring <a href=\"https:\/\/www.bluehost.com\/solutions\/full-service\">web design experts<\/a> to help you build blocks instead.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a><\/a>How to create custom Gutenberg blocks in WordPress<\/h2>\n\n\n\n<p>There are two accessible approaches to building Gutenberg custom blocks. You can either install a user-friendly plugin that simplifies the process or build them from scratch using HTML\/CSS or PHP code.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-gutenberg-blocks-1024x576.png\" alt=\"How to create custom Gutenberg blocks in WordPress\" class=\"wp-image-46221\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-gutenberg-blocks-1024x576.png 1024w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-gutenberg-blocks-300x169.png 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-gutenberg-blocks-768x432.png 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-gutenberg-blocks-24x14.png 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-gutenberg-blocks-36x20.png 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-gutenberg-blocks-48x27.png 48w\" sizes=\"100vw\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Creating custom blocks with a plugin<\/h3>\n\n\n\n<p>There are a number of block-building <a href=\"https:\/\/wordpress.org\/plugins\/genesis-custom-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress plugins<\/a> available that streamline the process of creating Gutenberg custom blocks for your WordPress site. We recommend using <a href=\"https:\/\/wordpress.org\/plugins\/genesis-custom-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\">Genesis Custom Blocks<\/a>.<\/p>\n\n\n\n<p>To create your first block with this plugin:<\/p>\n\n\n\n<p><strong>1. Install Genesis Custom Blocks<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1999\" height=\"988\" src=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks.png\" alt=\"Install the Genesis Custom Blocks WordPress plugin.\" class=\"wp-image-46222\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks.png 1999w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks-300x148.png 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks-1024x506.png 1024w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks-768x380.png 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks-1536x759.png 1536w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks-24x12.png 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks-36x18.png 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks-48x24.png 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Screenshot<\/em><\/figcaption><\/figure>\n\n\n\n<p>First, navigate to <strong>Plugins > Add New <\/strong>in your admin dashboard\u2019s left sidebar and search for Genesis in the <a href=\"https:\/\/wordpress.org\/plugins\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress Plugins Directory<\/a>. Install it and click the <strong>Activate <\/strong>button.<\/p>\n\n\n\n<p><strong>2. Create a new block<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"646\" height=\"312\" src=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-new-block.png\" alt=\"Go to Custom Blocks &gt; Add New in your WordPress dashboard.\" class=\"wp-image-46223\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-new-block.png 646w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-new-block-300x145.png 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-new-block-24x12.png 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-new-block-36x17.png 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-new-block-48x23.png 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Screenshot<\/em><\/figcaption><\/figure>\n\n\n\n<p>Next, navigate to <strong>Custom Blocks &gt; Add New <\/strong>to create a block.<\/p>\n\n\n\n<p><strong>3. Configure block specifics<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"995\" height=\"467\" src=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Block-configuring.jpg\" alt=\"Configuring the block.\" class=\"wp-image-46224\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Block-configuring.jpg 995w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Block-configuring-300x141.jpg 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Block-configuring-768x360.jpg 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Block-configuring-24x11.jpg 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Block-configuring-36x17.jpg 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Block-configuring-48x23.jpg 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Screenshot<\/em><\/figcaption><\/figure>\n\n\n\n<p>Now, you can select a block name, then configure and customize its properties. <a href=\"https:\/\/www.bluehost.com\/blog\/website-seo-basics-how-to-optimize-your-content\/\">To help with search engine optimization<\/a> (SEO), add <a href=\"https:\/\/www.bluehost.com\/blog\/find-best-keywords-get-found\/\">relevant keywords<\/a>.<\/p>\n\n\n\n<p>Then, add fields \u2014 such as numbers, images and checkboxes \u2014 by pushing the <strong>+ <\/strong>button. You\u2019ll need to input more specs, such as <strong>Field Label<\/strong>, <strong>Field Location<\/strong> and <strong>Help Text<\/strong>. You can reorder, edit and delete fields, as well.<\/p>\n\n\n\n<p><strong>4. Build your template.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1076\" height=\"470\" src=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Template-building.jpg\" alt=\"Building a template.\" class=\"wp-image-46225\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Template-building.jpg 1076w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Template-building-300x131.jpg 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Template-building-1024x447.jpg 1024w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Template-building-768x335.jpg 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Template-building-24x10.jpg 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Template-building-36x16.jpg 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Template-building-48x21.jpg 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Screenshot<\/em><\/figcaption><\/figure>\n\n\n\n<p>Next, you can build your template with either HTML and CSS or PHP, depending on your block output.<\/p>\n\n\n\n<p>If your block is configured for HTML and CSS, you can use the plugin\u2019s <strong>Template Editor<\/strong>, found on the top bar. There, you can customize your block via the <strong>Markup (<\/strong>HTML) and <strong>CSS <\/strong>tabs.<\/p>\n\n\n\n<p>And if you want to add PHP, you\u2019ll need to use a plain text editor to create <strong>block<\/strong><strong>.php<\/strong> and <strong>block.css<\/strong> files manually.<\/p>\n\n\n\n<p><strong>5. Save and confirm your block<\/strong><\/p>\n\n\n\n<p>Make sure to save your block by clicking <strong>Publish<\/strong> in the top right.<\/p>\n\n\n\n<p><strong>6. Add your block to your website<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1404\" height=\"592\" src=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page.jpg\" alt=\"Adding the block to a page.\" class=\"wp-image-46226\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page.jpg 1404w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page-300x126.jpg 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page-1024x432.jpg 1024w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page-768x324.jpg 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page-24x10.jpg 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page-36x15.jpg 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page-48x20.jpg 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Screenshot<\/em><\/figcaption><\/figure>\n\n\n\n<p>Finally, you can add the block to your website. Open or create a post or page, then press the <strong>+ <\/strong>on the left sidebar of your dashboard to find and embed your block.<\/p>\n\n\n\n<p>Then, customize the page content to your heart\u2019s desire with other blocks, useful <a href=\"https:\/\/www.bluehost.com\/blog\/what-is-wordpress-shortcode\/\">WordPress<\/a><a href=\"https:\/\/www.bluehost.com\/blog\/what-is-wordpress-shortcode\/\"> <\/a><a href=\"https:\/\/www.bluehost.com\/blog\/what-is-wordpress-shortcode\/\">shortcodes<\/a> and other accessible approaches that <a href=\"https:\/\/www.bluehost.com\/blog\/ux-matters-how-to-create-a-dynamic-user-experience-faqs\/\">optimize user experience<\/a> (UX) and <a href=\"https:\/\/www.bluehost.com\/blog\/10-wordpress-setting-changes-to-optimize-your-sites-performance\/\">website performance<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a><\/a>Creating custom blocks manually<\/h3>\n\n\n\n<p>Alternatively, you can code Gutenberg custom blocks from scratch by following this step-by-step process:<\/p>\n\n\n\n<p><strong>1. Set up your <a href=\"https:\/\/www.bluehost.com\/blog\/how-to-become-a-wordpress-developer\/\">WordPress developer<\/a> environment<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1999\" height=\"1030\" src=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment.png\" alt=\"You\u2019ll need to include Node.js in your WordPress developer environment.\" class=\"wp-image-46227\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment.png 1999w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment-300x155.png 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment-1024x528.png 1024w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment-768x396.png 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment-1536x791.png 1536w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment-24x12.png 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment-36x19.png 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment-48x25.png 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Screenshot<\/em><\/figcaption><\/figure>\n\n\n\n<p>First and foremost, install <a href=\"https:\/\/nodejs.org\/en\/download\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Node.js<\/strong><\/a> and the <a href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Node package manager<\/a> (npm). These are JavaScript build tools that allow you to define basic block functions. You can download <strong>Node.js<\/strong> via the online installer and then ensure the <strong>npm<\/strong> is activated by inputting the command <strong>npm-v <\/strong>in your code editor.<\/p>\n\n\n\n<p>Next, you\u2019ll need to install <a href=\"https:\/\/www.docker.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Docker<\/a>, a requirement for using WordPress\u2019 developer tool. The Docker website offers simple one-click installation.<\/p>\n\n\n\n<p>After that, you\u2019ll <a href=\"https:\/\/developer.wordpress.org\/themes\/getting-started\/setting-up-a-development-environment\/\" target=\"_blank\" rel=\"noreferrer noopener\">set up your developer environment<\/a> and <a href=\"https:\/\/www.bluehost.com\/help\/article\/wordpress-how-to-create-a-staging-site\">activate your staging site<\/a>. You can set up the dev environment through WordPress\u2019 default tool. Install it globally by inputting the command <strong>npm -g install @wordpress\/env<\/strong>.<\/p>\n\n\n\n<p><strong>2. Set up your base (starter) plugin file<\/strong><\/p>\n\n\n\n<p>Before you can actually create your Gutenberg custom block, you have to create a base block plugin for reference. Thankfully, there are a few approaches that help you avoid manually completing this step.<\/p>\n\n\n\n<p>Run the command <strong>\/wp-content\/plugins\/ <\/strong>to navigate to your plugin directory.<\/p>\n\n\n\n<p>Then, one option is to run the command <strong>npx @wordpress\/create-block<\/strong>.This gives you easy access and editing capabilities for your PHP files and JS files.<\/p>\n\n\n\n<p>Make sure you add the name you want to use for your starter block to the command. You can use something simple, like <strong>my-new-block<\/strong>, or be creative.<\/p>\n\n\n\n<p>Your other option is to install the <a href=\"https:\/\/www.npmjs.com\/package\/create-guten-block\" target=\"_blank\" rel=\"noreferrer noopener\">create-guten-block<\/a> tool and run the command <strong>npx create-guten-block<\/strong> with the name of your starter block.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"888\" height=\"818\" src=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-guten-block.jpg\" alt=\"You can use the create-guten-block tool to set up your starter plugin file.\" class=\"wp-image-46228\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-guten-block.jpg 888w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-guten-block-300x276.jpg 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-guten-block-768x707.jpg 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-guten-block-24x22.jpg 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-guten-block-36x33.jpg 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-guten-block-48x44.jpg 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Screenshot<\/em><\/figcaption><\/figure>\n\n\n\n<p>These processes will create a jumping-off point.<\/p>\n\n\n\n<p><strong>3. Configure block.json<\/strong><\/p>\n\n\n\n<p>You should add a <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-metadata\/\" target=\"_blank\" rel=\"noreferrer noopener\">block.json file<\/a> to your new directory, then configure it by inputting metadata and selections for various settings. Examples of settings include block attributes and other adjustable specs, like the application planning interface (<strong>API) version<\/strong>, <strong>title<\/strong> and <strong>category<\/strong>.<\/p>\n\n\n\n<p>Here is an example of what part of the block.json code could look like:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"583\" height=\"655\" src=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Blockjson-file.jpg\" alt=\"You need to configure your block.json file\u2019s settings, including the API version.\" class=\"wp-image-46229\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Blockjson-file.jpg 583w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Blockjson-file-267x300.jpg 267w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Blockjson-file-21x24.jpg 21w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Blockjson-file-32x36.jpg 32w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Blockjson-file-43x48.jpg 43w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Screenshot<\/em><\/figcaption><\/figure>\n\n\n\n<p>The <strong>block.json<\/strong> file allows your basic block plugin to show up in the plugins directory, makes registering your block easier later on and helps with your website\u2019s performance.<\/p>\n\n\n\n<p><strong>4. Configure more specs<\/strong><\/p>\n\n\n\n<p>Next, you\u2019ll determine and enqueue specifics regarding:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Styles.<\/li>\n\n\n\n<li>Dependencies and asset files.<\/li>\n\n\n\n<li>Attributes.<\/li>\n\n\n\n<li>Scripts.<\/li>\n\n\n\n<li>Labels and keywords.<\/li>\n<\/ul>\n\n\n\n<p>You can navigate to the <a href=\"https:\/\/docs.npmjs.com\/cli\/v7\/configuring-npm\/package-json\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>package.json<\/strong> file<\/a> to configure your JavaScript properties, styles and scripts. Through <strong>block.json<\/strong>, you can define attributes with the <strong>setAttributes <\/strong>function. You can also alter block settings with labels and keywords.<\/p>\n\n\n\n<p>You can add other frontend and backend specs and edit various functions. For example, you should create an asset file to add <a href=\"https:\/\/www.sonatype.com\/launchpad\/what-are-software-dependencies\" target=\"_blank\" rel=\"noreferrer noopener\">dependencies<\/a>. You can do this by inputting the command <strong>npm run build <\/strong>for your JavaScript XML (JSX) file or the following PHP code:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"266\" height=\"229\" src=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Php-code.jpg\" alt=\"PHP code to create an asset file for your dependencies.\" class=\"wp-image-46230\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Php-code.jpg 266w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Php-code-24x21.jpg 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Php-code-36x31.jpg 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Php-code-48x41.jpg 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Screenshot<\/em><\/figcaption><\/figure>\n\n\n\n<p><strong>5. Register your block<\/strong><\/p>\n\n\n\n<p>Once you create your block plugin, use the function <strong>register_block_type<\/strong>. This block registration technique automatically pulls the previously determined metadata from the <strong>block.json<\/strong> file.<\/p>\n\n\n\n<p><strong>6. Save and confirm your block works<\/strong><\/p>\n\n\n\n<p>The final step is to save all the files and test your new block.<\/p>\n\n\n\n<p>You can confirm its functionality by adding your new Gutenberg custom block to your website. If you insert it and it shows the \u201cHello World\u201d message, that\u2019s a sign you completed the process correctly.<\/p>\n\n\n\n<p>If you want to use the same block in multiple layouts or websites in the future, try using it in a <a href=\"https:\/\/www.bluehost.com\/blog\/what-are-gutenberg-block-patterns-in-wordpress-and-how-to-use-them\/\">Gutenberg block pattern<\/a>.<\/p>\n\n\n\n<p>Browse the <a href=\"https:\/\/learn.wordpress.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress \u201cLearn\u201d page<\/a> for more specifics and <a href=\"https:\/\/learn.wordpress.org\/tutorials\/\" target=\"_blank\" rel=\"noreferrer noopener\">tutorials<\/a> on how to configure your website.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a><\/a>Final thoughts: How to create Gutenberg custom blocks \u2014 a Bluehost guide<\/h2>\n\n\n\n<p>Making Gutenberg custom blocks for WordPress is a useful solution if you need website elements not offered by any default blocks.<\/p>\n\n\n\n<p>You create your own Gutenberg blocks with a plugin or through manual coding. However, either process requires some technical expertise.<\/p>\n\n\n\n<p>If you don\u2019t want to make custom blocks yourself, try <a href=\"https:\/\/www.bluehost.com\/solutions\/website-design\">Bluehost\u2019s Website Design services<\/a>. Our team of committed experts is here to help you customize and cultivate the perfect website.<\/p>\n\n\n\n<p>If you want to design your website yourself but would like some expert site editing guidance along the way, we also offer <a href=\"https:\/\/www.bluehost.com\/pro-design-live\">Pro Design with live support<\/a>. Our experts can help you choose and customize the perfect themes and plugins and optimize your website.<\/p>\n\n\n\n<p>Then, once your website is ready to go live, <a href=\"https:\/\/www.bluehost.com\/contact\">contact us at Bluehost<\/a> to get high-speed, high-quality and high-performance <a href=\"https:\/\/www.bluehost.com\/wordpress\/wordpress-hosting\">WordPress<\/a><a href=\"https:\/\/www.bluehost.com\/wordpress\/wordpress-hosting\"> hosting services<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Gutenberg block editor, WordPress\u2019 content editor, has over 81 million active installations. Because of the market-dominating nature of WordPress and the intuitive nature of this editor\u2019s design, it\u2019s no surprise that this system is so popular. Gutenberg is an accessible drag-and-drop page builder and content editor. It offers many functionalities, along with varied approaches [&hellip;]<\/p>\n","protected":false},"author":74,"featured_media":46217,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_title":"How To Create Gutenberg Custom Blocks | A Bluehost Guide","_yoast_wpseo_metadesc":"Interested in creating Gutenberg custom blocks for your WordPress website? Discover various approaches to building and getting custom blocks in this guide.","inline_featured_image":false,"footnotes":""},"categories":[3046,21],"tags":[3330],"ppma_author":[599],"class_list":["post-10763","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","category-wordpress","tag-how-to-guides"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.1 (Yoast SEO v27.1.1) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How To Create Gutenberg Custom Blocks | A Bluehost Guide<\/title>\n<meta name=\"description\" content=\"Interested in creating Gutenberg custom blocks for your WordPress website? Discover various approaches to building and getting custom blocks in this guide.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.bluehost.com\/blog\/wp-json\/wp\/v2\/posts\/10763\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using Gutenberg Custom Blocks for WordPress Content Creation: A User-Friendly Guide\" \/>\n<meta property=\"og:description\" content=\"Interested in creating Gutenberg custom blocks for your WordPress website? Discover various approaches to building and getting custom blocks in this guide.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.bluehost.com\/blog\/gutenberg-custom-blocks-for-content-creation\/\" \/>\n<meta property=\"og:site_name\" content=\"Bluehost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/bluehost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-01T10:40:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Minal Agarwal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/minalagarwal\" \/>\n<meta name=\"twitter:site\" content=\"@bluehost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Minal Agarwal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/gutenberg-custom-blocks-for-content-creation\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/gutenberg-custom-blocks-for-content-creation\/\"},\"author\":{\"name\":\"Minal Agarwal\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/#\/schema\/person\/e9ccb012781e05c929d20c7b89f8bbe3\"},\"headline\":\"Using Gutenberg Custom Blocks for WordPress Content Creation: A User-Friendly Guide\",\"datePublished\":\"2023-09-01T10:40:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/gutenberg-custom-blocks-for-content-creation\/\"},\"wordCount\":1914,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/gutenberg-custom-blocks-for-content-creation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png\",\"keywords\":[\"How-To Guides\"],\"articleSection\":[\"Development\",\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.bluehost.com\/blog\/gutenberg-custom-blocks-for-content-creation\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/gutenberg-custom-blocks-for-content-creation\/\",\"url\":\"https:\/\/www.bluehost.com\/blog\/gutenberg-custom-blocks-for-content-creation\/\",\"name\":\"How To Create Gutenberg Custom Blocks | A Bluehost Guide\",\"isPartOf\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/gutenberg-custom-blocks-for-content-creation\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/gutenberg-custom-blocks-for-content-creation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png\",\"datePublished\":\"2023-09-01T10:40:00+00:00\",\"description\":\"Interested in creating Gutenberg custom blocks for your WordPress website? Discover various approaches to building and getting custom blocks in this guide.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/gutenberg-custom-blocks-for-content-creation\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.bluehost.com\/blog\/gutenberg-custom-blocks-for-content-creation\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/gutenberg-custom-blocks-for-content-creation\/#primaryimage\",\"url\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png\",\"contentUrl\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png\",\"width\":1920,\"height\":1080,\"caption\":\"How to Create Gutenberg Custom Blocks | A Bluehost Guide\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/gutenberg-custom-blocks-for-content-creation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.bluehost.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Websites\",\"item\":\"https:\/\/www.bluehost.com\/blog\/category\/websites\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Using Gutenberg Custom Blocks for WordPress Content Creation: A User-Friendly Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/#website\",\"url\":\"https:\/\/www.bluehost.com\/blog\/\",\"name\":\"Bluehost\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.bluehost.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/#organization\",\"name\":\"Bluehost\",\"url\":\"https:\/\/www.bluehost.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/08\/bluehost-logo.svg\",\"contentUrl\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/08\/bluehost-logo.svg\",\"width\":136,\"height\":24,\"caption\":\"Bluehost\"},\"image\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/bluehost\/\",\"https:\/\/x.com\/bluehost\",\"https:\/\/www.linkedin.com\/company\/bluehost-com\/\",\"https:\/\/www.youtube.com\/user\/bluehost\",\"https:\/\/en.wikipedia.org\/wiki\/Bluehost\"],\"description\":\"Bluehost is a leading web hosting provider empowering millions of websites worldwide. \\u2028Discover how Bluehost's expertise, reliability, and innovation can help you achieve your online goals.\",\"telephone\":\"+1-888-401-4678\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/#\/schema\/person\/e9ccb012781e05c929d20c7b89f8bbe3\",\"name\":\"Minal Agarwal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/#\/schema\/person\/image\/c8d40b28171fda3585c635bc9672f478\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/042b2a6396c1ee0366c5c9560120123c4f0235ad09355e28ecc11f17cf341b97?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/042b2a6396c1ee0366c5c9560120123c4f0235ad09355e28ecc11f17cf341b97?s=96&d=mm&r=g\",\"caption\":\"Minal Agarwal\"},\"description\":\"Minal is the Director of Brand Marketing at Bluehost. With over 15 years of business experience in the technology industry, she strives to create solutions and content that fulfill a customer's needs. She is a dog mom and a stickler for calendaring.\",\"sameAs\":[\"https:\/\/x.com\/https:\/\/twitter.com\/minalagarwal\"],\"knowsAbout\":[\"WordPress\"],\"url\":\"https:\/\/www.bluehost.com\/blog\/author\/minal-agarwal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How To Create Gutenberg Custom Blocks | A Bluehost Guide","description":"Interested in creating Gutenberg custom blocks for your WordPress website? Discover various approaches to building and getting custom blocks in this guide.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.bluehost.com\/blog\/wp-json\/wp\/v2\/posts\/10763\/","og_locale":"en_US","og_type":"article","og_title":"Using Gutenberg Custom Blocks for WordPress Content Creation: A User-Friendly Guide","og_description":"Interested in creating Gutenberg custom blocks for your WordPress website? Discover various approaches to building and getting custom blocks in this guide.","og_url":"https:\/\/www.bluehost.com\/blog\/gutenberg-custom-blocks-for-content-creation\/","og_site_name":"Bluehost Blog","article_publisher":"https:\/\/www.facebook.com\/bluehost\/","article_published_time":"2023-09-01T10:40:00+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png","type":"image\/png"}],"author":"Minal Agarwal","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/minalagarwal","twitter_site":"@bluehost","twitter_misc":{"Written by":"Minal Agarwal","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.bluehost.com\/blog\/gutenberg-custom-blocks-for-content-creation\/#article","isPartOf":{"@id":"https:\/\/www.bluehost.com\/blog\/gutenberg-custom-blocks-for-content-creation\/"},"author":{"name":"Minal Agarwal","@id":"https:\/\/www.bluehost.com\/blog\/#\/schema\/person\/e9ccb012781e05c929d20c7b89f8bbe3"},"headline":"Using Gutenberg Custom Blocks for WordPress Content Creation: A User-Friendly Guide","datePublished":"2023-09-01T10:40:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.bluehost.com\/blog\/gutenberg-custom-blocks-for-content-creation\/"},"wordCount":1914,"commentCount":3,"publisher":{"@id":"https:\/\/www.bluehost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.bluehost.com\/blog\/gutenberg-custom-blocks-for-content-creation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png","keywords":["How-To Guides"],"articleSection":["Development","WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.bluehost.com\/blog\/gutenberg-custom-blocks-for-content-creation\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.bluehost.com\/blog\/gutenberg-custom-blocks-for-content-creation\/","url":"https:\/\/www.bluehost.com\/blog\/gutenberg-custom-blocks-for-content-creation\/","name":"How To Create Gutenberg Custom Blocks | A Bluehost Guide","isPartOf":{"@id":"https:\/\/www.bluehost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.bluehost.com\/blog\/gutenberg-custom-blocks-for-content-creation\/#primaryimage"},"image":{"@id":"https:\/\/www.bluehost.com\/blog\/gutenberg-custom-blocks-for-content-creation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png","datePublished":"2023-09-01T10:40:00+00:00","description":"Interested in creating Gutenberg custom blocks for your WordPress website? Discover various approaches to building and getting custom blocks in this guide.","breadcrumb":{"@id":"https:\/\/www.bluehost.com\/blog\/gutenberg-custom-blocks-for-content-creation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.bluehost.com\/blog\/gutenberg-custom-blocks-for-content-creation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.bluehost.com\/blog\/gutenberg-custom-blocks-for-content-creation\/#primaryimage","url":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png","contentUrl":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png","width":1920,"height":1080,"caption":"How to Create Gutenberg Custom Blocks | A Bluehost Guide"},{"@type":"BreadcrumbList","@id":"https:\/\/www.bluehost.com\/blog\/gutenberg-custom-blocks-for-content-creation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.bluehost.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Websites","item":"https:\/\/www.bluehost.com\/blog\/category\/websites\/"},{"@type":"ListItem","position":3,"name":"Using Gutenberg Custom Blocks for WordPress Content Creation: A User-Friendly Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.bluehost.com\/blog\/#website","url":"https:\/\/www.bluehost.com\/blog\/","name":"Bluehost","description":"","publisher":{"@id":"https:\/\/www.bluehost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.bluehost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.bluehost.com\/blog\/#organization","name":"Bluehost","url":"https:\/\/www.bluehost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.bluehost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/08\/bluehost-logo.svg","contentUrl":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/08\/bluehost-logo.svg","width":136,"height":24,"caption":"Bluehost"},"image":{"@id":"https:\/\/www.bluehost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/bluehost\/","https:\/\/x.com\/bluehost","https:\/\/www.linkedin.com\/company\/bluehost-com\/","https:\/\/www.youtube.com\/user\/bluehost","https:\/\/en.wikipedia.org\/wiki\/Bluehost"],"description":"Bluehost is a leading web hosting provider empowering millions of websites worldwide. \u2028Discover how Bluehost's expertise, reliability, and innovation can help you achieve your online goals.","telephone":"+1-888-401-4678"},{"@type":"Person","@id":"https:\/\/www.bluehost.com\/blog\/#\/schema\/person\/e9ccb012781e05c929d20c7b89f8bbe3","name":"Minal Agarwal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.bluehost.com\/blog\/#\/schema\/person\/image\/c8d40b28171fda3585c635bc9672f478","url":"https:\/\/secure.gravatar.com\/avatar\/042b2a6396c1ee0366c5c9560120123c4f0235ad09355e28ecc11f17cf341b97?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/042b2a6396c1ee0366c5c9560120123c4f0235ad09355e28ecc11f17cf341b97?s=96&d=mm&r=g","caption":"Minal Agarwal"},"description":"Minal is the Director of Brand Marketing at Bluehost. With over 15 years of business experience in the technology industry, she strives to create solutions and content that fulfill a customer's needs. She is a dog mom and a stickler for calendaring.","sameAs":["https:\/\/x.com\/https:\/\/twitter.com\/minalagarwal"],"knowsAbout":["WordPress"],"url":"https:\/\/www.bluehost.com\/blog\/author\/minal-agarwal\/"}]}},"authors":[{"term_id":599,"user_id":74,"is_guest":0,"slug":"minal-agarwal","display_name":"Minal Agarwal","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/042b2a6396c1ee0366c5c9560120123c4f0235ad09355e28ecc11f17cf341b97?s=96&d=mm&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":"","9":"","10":"","11":"","12":"","13":"","14":"","15":""}],"_links":{"self":[{"href":"https:\/\/www.bluehost.com\/blog\/wp-json\/wp\/v2\/posts\/10763","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bluehost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bluehost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/wp-json\/wp\/v2\/users\/74"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/wp-json\/wp\/v2\/comments?post=10763"}],"version-history":[{"count":0,"href":"https:\/\/www.bluehost.com\/blog\/wp-json\/wp\/v2\/posts\/10763\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/wp-json\/wp\/v2\/media\/46217"}],"wp:attachment":[{"href":"https:\/\/www.bluehost.com\/blog\/wp-json\/wp\/v2\/media?parent=10763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/wp-json\/wp\/v2\/categories?post=10763"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/wp-json\/wp\/v2\/tags?post=10763"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/wp-json\/wp\/v2\/ppma_author?post=10763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}