{"id":41438,"date":"2023-08-10T07:00:06","date_gmt":"2023-08-10T14:00:06","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=41438"},"modified":"2025-05-21T19:42:50","modified_gmt":"2025-05-22T02:42:50","slug":"how-to-use-wordpress-blocks","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/how-to-use-wordpress-blocks\/","title":{"rendered":"How To Use WordPress Blocks (+ How To Create Your Own!)"},"content":{"rendered":"\n<p>Would this be a weird place to mention how my wife is holding onto a mint-condition, unopened, limited-edition Lego Star Wars BB-8 kit?<\/p>\n\n\n\n<p>Those things are going for like $500!<\/p>\n\n\n\n<p>Okay. It would be weird. Got it, loud and clear\u2026 But this will all make a bit more sense in a second.<\/p>\n\n\n\n<p>In this post, we\u2019re going to cover everything you need to know about WordPress blocks. If you\u2019re an old-school WP user like myself, then you probably still think of blocks as \u201cnew\u201d <a href=\"https:\/\/www.dreamhost.com\/blog\/what-is-wordpress\/\" target=\"_blank\" rel=\"noopener\">WordPress<\/a> because you began by using the classic editor.<\/p>\n\n\n\n<p>It\u2019s been over five years since WordPress introduced blocks, but they\u2019re still one of the most misunderstood and underutilized CMS features.<\/p>\n\n\n\n<p>WordPress blocks are sort of like Legos \u2014see, I <i>told you<\/i> it would tie back in \u2014 they allow you to build and customize your website in a way that would\u2019ve required hiring a professional website designer and developer just a few short years ago.<\/p>\n\n\n\n<p>And that\u2019s one of the reasons why people love them so much. Once they understand them, that is.<\/p>\n\n\n\n<p>After I explain how they work, there\u2019s no doubt that you\u2019ll love them too.<\/p>\n\n\n\n<h2 id=\"definition\" class=\"wp-block-heading\">What Are WordPress Blocks?<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1052\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks.jpg\" alt=\"Wordpress Blocks\" class=\"wp-image-41445 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks-300x197.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks-1024x673.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks-768x505.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks-1536x1010.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-600x395.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-1200x789.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-730x480.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-1460x960.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-784x515.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-1568x1031.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-877x577.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1052;\" \/><\/figure>\n\n\n\n<p>WordPress blocks are, as the name suggests, like stackable <i>building blocks<\/i> that you can add to pages and posts on your WordPress site.<\/p>\n\n\n\n<p>They were added to WordPress 5.0 along with the inclusion of the Gutenberg editor that most of us are now familiar with. Blocks are now the standard way to customize your WordPress site \u2014 and you can use blocks across your entire site, not just within posts.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Gutenberg<\/h3>\n    <p>Gutenberg is the name for the Block Editor project in WordPress. A lot of WordPress developers and enthusiasts use the terms Gutenberg Editor and Block Editor interchangeably.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/wordpress\/gutenberg\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Read More                    <\/a>\n\n<\/div>\n\n\n\n<p>Think about it sort of like a site or page builder. You can click the \u201c+\u201d button to add a block to a page or post and then select from various block options. The current version of WordPress comes with 90+ options out of the box.<\/p>\n\n\n\n<p>Each block is essentially a widget. They can do various things, like embed content from another site or service, add new functionality like calendars or contact forms to the page, or even add specific content with predefined formatting.<\/p>\n\n\n\n<p>Plus, most blocks have customization options that allow you to adjust how they display or function on your site.<\/p>\n\n\n\n<p>The WordPress block editor is a massive upgrade from the classic editor. In the pre-Gutenberg days, WordPress users could only add text and images to a post before having to dive into custom code.<\/p>\n\n\n\n<p><b>Nerd note:<\/b> If for some reason, you don\u2019t have access to blocks from the WordPress editor, it could be for one of two reasons: One is that your <a href=\"https:\/\/www.dreamhost.com\/wordpress\/\" target=\"_blank\" rel=\"noopener\">WordPress installation<\/a> could be horribly outdated (like years and years old). Secondly, it\u2019s possible that the block editor has been disabled by the Classic Editor plugin. When active on a WordPress site, this plugin reverts you back to the classic editor experience. Check your plugins page from wp-admin to figure out if that\u2019s the case for you.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h2 id=\"blocks\" class=\"wp-block-heading\">What Blocks Does WordPress Already Have?<\/h2>\n\n\n\n<p>By default, the block editor offers a <i>huge <\/i>number of <a href=\"https:\/\/wordpress.com\/support\/wordpress-editor\/blocks\/\" target=\"_blank\" rel=\"noopener\">available blocks<\/a>. You can use these blocks to customize your WordPress theme, allow writers and bloggers to add rich content to their posts, pull in social media content, and so much more.<\/p>\n\n\n\n<p>Let\u2019s look at some of the most popular and helpful default Gutenberg blocks.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Most Common Blocks<\/h3>\n\n\n\n<p>Adding any kind of text or image is done using a block. This means that the most common blocks are generally the different styles and types of text or image elements you might add to a page.<\/p>\n\n\n\n<p>Things like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Text Block \u2014 Each paragraph you write in the block editor resides in its own text block, but text blocks aren\u2019t limited to paragraphs. Write a little or write a lot.<\/li>\n\n\n\n<li>Image Block \u2014 For when you want to show as well as tell, throw an image in the mix for some added flair.<\/li>\n\n\n\n<li>List Block \u2014 Need to write an outline? What about an ordered list? You can do it all with the list block!<\/li>\n\n\n\n<li>Image Gallery Block \u2014 Sharing vacation photos or product shots never looked so good. ?<\/li>\n\n\n\n<li>Table Block \u2014 Create a pricing table or share some spreadsheet data with ease.<\/li>\n\n\n\n<li>Pullquote Block \u2014 Want to call attention to a particular observation? Inspired by a quote that\u2019s relevant to the post you\u2019re writing? Highlight it with the pullquote block!<\/li>\n<\/ul>\n\n\n\n<p>Each of these is an element that you can add to your website with the block editor. Then, you can position and style them within the content section of the page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Embedded Content Blocks<\/h3>\n\n\n\n<p>Blocks make it extremely easy to embed outside content and widgets into your WordPress website without having to add a new plugin or third-party addon.<\/p>\n\n\n\n<p>Some of the most popular embed block types for pulling in outside content:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Calendly Block<\/li>\n\n\n\n<li>Custom HTML Block<\/li>\n\n\n\n<li>Twitter Block<\/li>\n\n\n\n<li>YouTube Block<\/li>\n\n\n\n<li>Testimonials<\/li>\n\n\n\n<li>WooCommerce<\/li>\n\n\n\n<li>Contact Forms<\/li>\n\n\n\n<li>FAQs<\/li>\n<\/ul>\n\n\n\n<p>Using these block types, you can go beyond the basic text editor and create interactive content that features all kinds of functionality and features.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Specialty Blocks<\/h3>\n\n\n\n<p>Here\u2019s where things get really spicy.<\/p>\n\n\n\n<p>Beyond the basics and embedded content, there are also a huge number ofadvanced blocks that you can use for special cases. Like maybe you want to improve your site\u2019s navigation and UX, or to use WordPress as a full-blown site builder.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Navigation<\/h3>\n    <p>On the web, the term \u2018navigation\u2019 represents moving from one website or page to another. Navigation is also a common term in web development and design. There\u2019s an emphasis on making it easy for users to find the pages they need.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/navigation\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Read More                    <\/a>\n\n<\/div>\n\n\n\n<p>Here are a few to check out:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Buttons Block<\/li>\n\n\n\n<li>Columns Block<\/li>\n\n\n\n<li>Group Block<\/li>\n\n\n\n<li>Post Carousel Block<\/li>\n\n\n\n<li>Post Content Block<\/li>\n\n\n\n<li>Query Loop Block<\/li>\n\n\n\n<li>Reusable Block<\/li>\n\n\n\n<li>Shortcode Block<\/li>\n\n\n\n<li>Table of Contents Block<\/li>\n<\/ul>\n\n\n\n<p>With these blocks, you can pull in custom content directly from the WordPress database or fully customize the layout, spacing, and flow of each page or post on your website.<\/p>\n\n\n\n<p>That\u2019s all great and dandy.<\/p>\n\n\n\n<p><i>But what if you need a block that doesn\u2019t come with WordPress by default?&nbsp;<\/i><\/p>\n\n\n\n<p>Luckily, blocks are also customizable. Just like widgets, you can add new blocks and even create your own to fit the needs of your website design and template.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Widget<\/h3>\n    <p>WordPress widgets can add features to your website\u2019s sidebars, footers, or other areas. Some default WordPress widgets are Categories, Tag Cloud, Search, Navigation Menu, Calendar, and Recent Posts.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/wordpress\/widget\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Read More                    <\/a>\n\n<\/div>\n\n\n\n<h2 id=\"create\" class=\"wp-block-heading\">How To Create Custom Blocks With A WordPress Plugin<\/h2>\n\n\n\n<p>By far, the easiest way to create a custom block is to use a plugin.<\/p>\n\n\n\n<p>The <a href=\"https:\/\/wordpress.org\/plugins\/genesis-custom-blocks\/#description\" target=\"_blank\" rel=\"noopener\">Genesis Custom Blocks plugin<\/a> makes building and launching your own custom blocks pretty simple. You will need to have a basic understanding of <a href=\"https:\/\/www.dreamhost.com\/blog\/learn-html\/\" target=\"_blank\" rel=\"noopener\">HTML<\/a> and <a href=\"https:\/\/www.dreamhost.com\/blog\/learn-css\/\" target=\"_blank\" rel=\"noopener\">CSS<\/a> to create and style the block to fit your needs.<\/p>\n\n\n\n<p>With those basic skills, the plugin takes care of all of the difficult setup and configuration to implement a new block.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Install Genesis Block Plugin<\/h3>\n\n\n\n<p>First things first: Pop over to the WordPress plugin directory and install the <a href=\"https:\/\/wordpress.org\/plugins\/genesis-custom-blocks\/#description\" target=\"_blank\" rel=\"noopener\">Genesis Custom Block plugin<\/a>.<\/p>\n\n\n\n<p>(Don\u2019t forget to go to the Plugins tab and activate it.)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Add A New Block<\/h3>\n\n\n\n<p>Once installed and activated, you should see a new option from the WP admin panel in the left-hand navigation.<\/p>\n\n\n\n<p>Click Custom Blocks &gt; Add New.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Customize The Editor Fields<\/h3>\n\n\n\n<p>Now, we\u2019re ready to start building the custom block.<\/p>\n\n\n\n<p>The first step will be to set up the fields and customization options that will appear when you\u2019re using the block on your website.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1171\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen.jpg\" alt=\"Screenshot showing the Genesis Custom Blocks Plugin setup screen\" class=\"wp-image-41446 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-300x220.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1024x749.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-768x562.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1536x1124.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-600x439.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1200x878.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-730x534.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1460x1069.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-784x574.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1568x1148.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-877x642.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1171;\" \/><\/figure>\n\n\n\n<p>You can think of this sort of like a mini version of the block editor itself. You\u2019ll add custom fields and data that will either be pre-filled by the block itself or collected by the editor or user who\u2019s adding the block to a page or post.<\/p>\n\n\n\n<p>For example, if you\u2019re building a custom call-to-action (CTA) block, you might add fields like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Headline text<\/li>\n\n\n\n<li>Subhead text<\/li>\n\n\n\n<li>Button text<\/li>\n\n\n\n<li>CTA button URL<\/li>\n<\/ul>\n\n\n\n<p>Each field will have a label, name, and type. You can even customize the width or add help text to make it easier for additional editors or writers to use.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Customize The Markup And CSS<\/h3>\n\n\n\n<p>Now that we\u2019ve set up the back end of the block, we need to tell WordPress how to actually display the content that\u2019s being added.<\/p>\n\n\n\n<p>Here\u2019s where any prior HTML or CSS knowledge that you may have will come in handy.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1171\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS.jpg\" alt=\"Customize the Markup and CSS\" class=\"wp-image-41447 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS-300x220.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS-1024x749.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS-768x562.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS-1536x1124.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-600x439.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-1200x878.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-730x534.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-1460x1069.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-784x574.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-1568x1148.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-877x642.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1171;\" \/><\/figure>\n\n\n\n<p>In this next step, you will essentially be writing the block of code that will be dynamically generated from the inputs configured for the block editor.<\/p>\n\n\n\n<p>You can write this in vanilla HTML and CSS.<\/p>\n\n\n\n<p>You can also pull in the variables from the block editor using double brackets and the field name (slug) from the editor. (E.g.,\u201d{{button-text}}\u201d)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Add The Block<\/h3>\n\n\n\n<p>Once you\u2019ve set up the block using the Genesis plugin, it should appear in the list of available blocks available in the WordPress Gutenberg editor.<\/p>\n\n\n\n<p>Simply click the \u201c+\u201d and then find the new block by its name.<\/p>\n\n\n\n<p>Once added, you should see the Gutenberg block editor screen with the fields and options you configured.<\/p>\n\n\n\n<p>That\u2019s it!<\/p>\n\n\n\n<p>You can now use your custom block, adding it to pages, posts, sidebars, or wherever you need it.<\/p>\n\n\n\n<h2 id=\"custom\" class=\"wp-block-heading\">How To Create Custom WordPress Blocks Without A Plugin<\/h2>\n\n\n\n<p>If you want to dive in deeper and really learn how to create new blocks from scratch, you\u2019ll need a bit more advanced knowledge.<\/p>\n\n\n\n<p>In this tutorial, we\u2019ll walk through the basic steps for using the <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block\/\" target=\"_blank\" rel=\"noopener\">create-block tool<\/a> that will allow you to spin up fully custom blocks without having to use a plugin.<\/p>\n\n\n\n<p>Fair warning: This is an advanced workflow. It will require you to dig into the command line.<\/p>\n\n\n\n<p>You\u2019ll need to understand PHP, JavaScript, HTML, and CSS.<\/p>\n\n\n\n<p>Don\u2019t say we didn\u2019t warn ya!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step #1: Set Up Node.js, NPM, And Local WordPress Installation<\/h3>\n\n\n\n<p>Before we can use create-block, we\u2019ll need to have the right setup and access.<\/p>\n\n\n\n<p>Here are the prerequisites:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/learn.wordpress.org\/tutorial\/local-wordpress-installations-for-beginners\/\" target=\"_blank\" rel=\"noopener\">A local WordPress install<\/a><\/li>\n\n\n\n<li>Terminal or command line setup<\/li>\n\n\n\n<li><a href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\" rel=\"noopener\">Node.js and npm<\/a><\/li>\n<\/ul>\n\n\n\n<p>You may also want to use <a href=\"https:\/\/github.com\/nvm-sh\/nvm\" target=\"_blank\" rel=\"noopener\">nvm<\/a> (Node version manager) to install or update a compatible version of Node.js<\/p>\n\n\n\n<p>With this setup, we will use NPM\u2019s command \u201cnpx\u201d to execute the create-block package directly from its hosted directory in the cloud.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step #2: Run The create-block Package<\/h3>\n\n\n\n<p>Now, the easy step.<\/p>\n\n\n\n<p>From the terminal, navigate to the \/wp-content\/plugins directory of your website on your local machine.<\/p>\n\n\n\n<p>Then run the create-block package using NPX:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"693\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package.jpg\" alt=\"Run the create-block Package\" class=\"wp-image-41448 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package-300x130.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package-1024x444.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package-768x333.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package-1536x665.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-600x260.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-1200x520.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-730x316.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-1460x632.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-784x340.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-1568x679.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-877x380.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/693;\" \/><\/figure>\n\n\n\n<p><code>npx @wordpress\/create-block {{block-name}}<\/code><\/p>\n\n\n\n<p>This package will run through the process of setting up what\u2019s known as the \u201cblock scaffolding\u201d. It will register all of the relevant elements, spin up the correct file and directory structure, and generate default code for the entire block to be both editable and usable.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step #3: Activate The Plugin<\/h3>\n\n\n\n<p>The new block itself will take the form of a plugin.<\/p>\n\n\n\n<p>Once the create-block package is complete, you\u2019ll need to pop over to WP admin.<\/p>\n\n\n\n<p>Go to the Plugins page and activate the new plugin that it created, which should have the name of the block that you used in your npx command.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step #4: Customize The Block Code<\/h3>\n\n\n\n<p>You\u2019ll customize the content and functionality of the block within the <b>\/src\/<\/b> folder inside the plugin directory.<\/p>\n\n\n\n<p><b>Index.js<\/b> is where you\u2019ll register the block and code the main output:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"871\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code.jpg\" alt=\"Customize the Block Code\" class=\"wp-image-41449 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code-300x163.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code-1024x557.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code-768x418.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code-1536x836.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-600x327.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-1200x653.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-730x397.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-1460x795.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-784x427.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-1568x854.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-877x477.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/871;\" \/><\/figure>\n\n\n\n<p>Notice that the registerBlockType function is set to handle both the block editor inputs (\u201cedit\u201d) and the front-end display (\u201csave\u201d).<\/p>\n\n\n\n<p>This is just scratching the surface of building a functional block.<\/p>\n\n\n\n<p>You\u2019ll likely want to dig into the complete documentation for writing functional blocks using the <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/\" target=\"_blank\" rel=\"noopener\">WordPress Block API<\/a>.<\/p>\n\n\n\n<p>Once you have the basics down, you can pull in additional dependencies, tap into outside data sources, and just about anything else your heart desires.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step #5: Add The Block From The Gutenberg Editor<\/h3>\n\n\n\n<p>With the activated plugin, you can add your block to any page or post from the Gutenberg editor.<\/p>\n\n\n\n<p>Access it by using the \u201c+\u201d button or \u201c\/\u201d command, just like any other block.<\/p>\n\n\n\n<h2 id=\"summary\" class=\"wp-block-heading\">The Sky\u2019s The Limit<\/h2>\n\n\n\n<p>Alright, we went from basics to advanced with this one, but the good news is that now you\u2019re unstoppable.<\/p>\n\n\n\n<p>Between the default block options, the Genesis plugin, and the ability to build your very own from-scratch blocks \u2014 there\u2019s nothing that you can\u2019t do!<\/p>\n\n\n\n<p>And because blocks are so incredibly powerful and flexible, there\u2019s just about nothing you can\u2019t build. Your WordPress site now has nearly infinite functionality, and you can make the site, app, or project of your dreams.<\/p>\n\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      WordPress + DreamHost\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Our automatic updates and strong security defenses take server management off your hands so you can focus on creating a great website.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/wordpress\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Check Out Plans                    <\/a>\n\n  <\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Would this be a weird place to mention how my wife is holding onto a mint-condition, unopened, limited-edition Lego Star Wars BB-8 kit? Those things are going for like $500! Okay. It would be weird. Got it, loud and clear\u2026 But this will all make a bit more sense in a second. In this post, [&hellip;]<\/p>\n","protected":false},"author":1062,"featured_media":41439,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"WordPress blocks are one of the most significant changes to the CMS ever. Learn how they work and how you can customize them for your exact needs.","toc_headlines":"[[\"definition\",\"What Are WordPress Blocks?\"],[\"blocks\",\"What Blocks Does WordPress Already Have?\"],[\"create\",\"How To Create Custom Blocks With A WordPress Plugin\"],[\"custom\",\"How To Create Custom WordPress Blocks Without A Plugin\"],[\"summary\",\"The Sky\u2019s The Limit\"]]","hide_toc":false,"footnotes":""},"categories":[13119,12852,696],"tags":[],"class_list":["post-41438","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-getting-started","category-website-design","category-wordpress"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How To Use WordPress Blocks - DreamHost<\/title>\n<meta name=\"description\" content=\"WordPress blocks are one of the most significant changes to the CMS ever. Learn how they work and how you can customize them for your exact needs.\" \/>\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-dev.dreamhost.com\/blog\/how-to-use-wordpress-blocks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Everything You Need To Know To Start Using WordPress Blocks\" \/>\n<meta property=\"og:description\" content=\"Become a WordPress pro and elevate your web design with Wordpress blocks. Discover how to create stunning websites with ease and streamline your workflow.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/how-to-use-wordpress-blocks\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-10T14:00:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-22T02:42:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Social-Image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jason Cosper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Everything You Need To Know To Start Using WordPress Blocks\" \/>\n<meta name=\"twitter:description\" content=\"Become a WordPress pro and elevate your web design with Wordpress blocks. Discover how to create stunning websites with ease and streamline your workflow.\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jason Cosper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How To Use WordPress Blocks - DreamHost","description":"WordPress blocks are one of the most significant changes to the CMS ever. Learn how they work and how you can customize them for your exact needs.","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-dev.dreamhost.com\/blog\/how-to-use-wordpress-blocks\/","og_locale":"en_US","og_type":"article","og_title":"Everything You Need To Know To Start Using WordPress Blocks","og_description":"Become a WordPress pro and elevate your web design with Wordpress blocks. Discover how to create stunning websites with ease and streamline your workflow.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/how-to-use-wordpress-blocks\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2023-08-10T14:00:06+00:00","article_modified_time":"2025-05-22T02:42:50+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Social-Image.jpg","type":"image\/jpeg"}],"author":"Jason Cosper","twitter_card":"summary_large_image","twitter_title":"Everything You Need To Know To Start Using WordPress Blocks","twitter_description":"Become a WordPress pro and elevate your web design with Wordpress blocks. Discover how to create stunning websites with ease and streamline your workflow.","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jason Cosper","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/how-to-use-wordpress-blocks\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/how-to-use-wordpress-blocks\/"},"author":{"name":"Jason Cosper","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4"},"headline":"How To Use WordPress Blocks (+ How To Create Your Own!)","datePublished":"2023-08-10T14:00:06+00:00","dateModified":"2025-05-22T02:42:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/how-to-use-wordpress-blocks\/"},"wordCount":2048,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/how-to-use-wordpress-blocks\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","articleSection":["Getting Started","Website Design","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/how-to-use-wordpress-blocks\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/how-to-use-wordpress-blocks\/","name":"How To Use WordPress Blocks - DreamHost","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/how-to-use-wordpress-blocks\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/how-to-use-wordpress-blocks\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","datePublished":"2023-08-10T14:00:06+00:00","dateModified":"2025-05-22T02:42:50+00:00","description":"WordPress blocks are one of the most significant changes to the CMS ever. Learn how they work and how you can customize them for your exact needs.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/how-to-use-wordpress-blocks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/how-to-use-wordpress-blocks\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/how-to-use-wordpress-blocks\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","width":1460,"height":1095,"caption":"How To Use WordPress Blocks Hero Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/how-to-use-wordpress-blocks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"How To Use WordPress Blocks (+ How To Create Your Own!)"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4","name":"Jason Cosper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","caption":"Jason Cosper"},"description":"Jason is DreamHost\u2019s WordPress Product Advocate, based out of Bakersfield, CA. He is currently working on making our DreamPress product even better. In his free time, he likes to curl up on the couch and watch scary movies with his wife Sarah and three very small dogs. Follow him on Twitter.","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/jasoncosper\/"}]}},"lang":"en","translations":{"en":41438,"es":41465,"de":52846,"pt":54873,"pl":54880,"ru":54916,"uk":54919,"it":68363,"fr":70312,"nl":70333},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/41438","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1062"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=41438"}],"version-history":[{"count":10,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/41438\/revisions"}],"predecessor-version":[{"id":61451,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/41438\/revisions\/61451"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/41439"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=41438"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=41438"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=41438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}