{"id":2515,"date":"2022-02-27T15:47:54","date_gmt":"2022-02-27T15:47:54","guid":{"rendered":"https:\/\/marcosrego.com\/account\/?p=2515"},"modified":"2022-12-24T15:42:47","modified_gmt":"2022-12-24T15:42:47","slug":"create-block-patterns","status":"publish","type":"post","link":"https:\/\/marcosrego.com\/account\/blog\/create-block-patterns\/","title":{"rendered":"How to create block patterns in WordPress"},"content":{"rendered":"\n<p>WordPress does not yet give an interface to create block patterns. On this post, I&#8217;ll guide you on how you can create them in a friendly way.<\/p>\n\n\n\n<!--more-- class=\" \">\n<!--noteaser-->\n\n\n\n<aside class=\"       wp-block-group sidebar has-main-text-color-color has-aside-background-color-background-color has-text-color has-background is-layout-flow\"><div class=\"wp-block-group__inner-container\">\n<section class=\"    wp-block-group has-main-text-color-color has-main-background-color-background-color has-text-color has-background is-layout-flow\"><div class=\"wp-block-group__inner-container\">\n<h3 class=\"   has-main-text-color-color has-text-color wp-block-heading\"><strong>Did you know?<\/strong><\/h3>\n\n\n\n<figure class=\"    wp-block-image size-large\"><a href=\"https:\/\/marcosrego.com\/account\/development\/mrdev-framework\/\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"538\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdevframework-marcosrego-opengraph-1024x538.png\" alt=\"Mr.Dev.&#039;s Framework Opengraph Image\" class=\"wp-image-1026\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdevframework-marcosrego-opengraph-1024x538.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdevframework-marcosrego-opengraph-300x158.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdevframework-marcosrego-opengraph-768x403.png 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdevframework-marcosrego-opengraph.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><\/a><\/figure>\n\n\n\n<p class=\"  has-main-text-color-color has-text-color\">When <strong>Mr.Dev.<\/strong> sells his <strong>framework<\/strong>, <strong>one unique payment<\/strong> gives you <strong>updates forever<\/strong> and for <strong>unlimited websites<\/strong>!<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex\">\n<div class=\"   wp-block-button\"><a class=\"wp-block-button__link has-invert-color-color has-link-color-background-color has-text-color has-background\" href=\"https:\/\/marcosrego.com\/account\/development\/mrdev-framework\/\"><strong>Know more<\/strong><\/a><\/div>\n<\/div>\n<\/div><\/section>\n<\/div><\/aside>\n\n\n\n<p>At the moment of writing, WordPress does not yet give an interface for editors to create block patterns. But that doesn&#8217;t mean it&#8217;s difficult to create them without an interface. On this post, I&#8217;ll guide you on how you can create patterns, and I&#8217;ll try to make it as friendly as possible.<\/p>\n\n\n\n<div id=\"toc_container\" class=\"no_bullets\"><ul class=\"toc_list\"><li><a href=\"#create_a_block_pattern_with_mrdev8217s_framework\"><span class=\"toc_number toc_depth_1\">1<\/span> Create a block pattern with Mr.Dev.&#8217;s Framework<\/a><\/li><li><a href=\"#preparing_a_file_for_a_wordpress_code_snippet\"><span class=\"toc_number toc_depth_1\">2<\/span> Preparing a file for a WordPress code snippet<\/a><ul><li><a href=\"#prepare_it_using_mrdev8217s_framework\"><span class=\"toc_number toc_depth_2\">2.1<\/span> Prepare it using Mr.Dev.&#8217;s Framework<\/a><\/li><li><a href=\"#prepare_it_using_a_custom_php_file\"><span class=\"toc_number toc_depth_2\">2.2<\/span> Prepare it using a custom PHP file<\/a><\/li><\/ul><\/li><li><a href=\"#block_patterns_code_snippet\"><span class=\"toc_number toc_depth_1\">3<\/span> Block patterns code snippet<\/a><ul><li><a href=\"#understanding_the_code_optional\"><span class=\"toc_number toc_depth_2\">3.1<\/span> Understanding the code (optional)<\/a><\/li><\/ul><\/li><li><a href=\"#create_the_block_pattern_with_the_editor\"><span class=\"toc_number toc_depth_1\">4<\/span> Create the block pattern with the editor<\/a><\/li><li><a href=\"#add_more_block_patterns\"><span class=\"toc_number toc_depth_1\">5<\/span> Add more block patterns<\/a><\/li><li><a href=\"#extra_remove_core_block_patterns_from_wordpress\"><span class=\"toc_number toc_depth_1\">6<\/span> Extra: Remove core block patterns from WordPress<\/a><\/li><li><a href=\"#will_block_patterns_be_on_the_interface\"><span class=\"toc_number toc_depth_1\">7<\/span> Will block patterns be on the interface?<\/a><\/li><li><a href=\"#comments\"><span class=\"toc_number toc_depth_1\">8<\/span> Comments<\/a><\/li><\/ul><\/div>\n<h2 class=\"wp-block-heading\"><span id=\"create_a_block_pattern_with_mrdev8217s_framework\"><strong>Create a block pattern with Mr.Dev.&#8217;s Framework<\/strong><\/span><\/h2>\n\n\n\n<p>Currently, there&#8217;s no graphic user interface to create block patterns. <a href=\"https:\/\/marcosrego.com\/account\/development\/mrdev-framework\/\" data-type=\"post\" data-id=\"403\">Mr.Dev.&#8217;s Framework<\/a> only adds options that WordPress does not have by default, and I&#8217;m expecting WordPress to create that default interface very soon. For that reason, I&#8217;ll not add a specific interface for this functionality<em> (this might change if WordPress takes too much time to do it)<\/em>.<\/p>\n\n\n\n<p>But if you can&#8217;t wait for that to happen, Mr.Dev.&#8217;s Framework can still help you on the process&#8230;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"preparing_a_file_for_a_wordpress_code_snippet\"><strong>Preparing a file for a <strong>WordPress<\/strong><\/strong> <strong>code snippet<\/strong><\/span><\/h2>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"prepare_it_using_mrdev8217s_framework\"><strong>Prepare it using Mr.Dev.&#8217;s Framework<\/strong><\/span><\/h3>\n\n\n\n<ul>\n<li>If you have Mr.Dev.&#8217;s Framework, check if the option to control files is enabled: If you see the tab <em>Files \/ Media<\/em> that means it is, if not then you can enable it on the <em>Configuration<\/em> tab on the <em>Files &amp; Media Manager<\/em> section.<\/li>\n\n\n\n<li>Go to the <em>Files \/ Media<\/em> tab , there you can find the section <em>Server-side scripts<\/em>. Click on the pencil icon to open the file.<br>This is the file where you&#8217;ll add a <a href=\"#block_patterns_code_snippet\">short code snippet<\/a>.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-6\">\n<div class=\"  wp-block-column is-layout-flow\" style=\"flex-basis:57%\">\n<figure class=\"    wp-block-image size-full\"><a href=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2022\/02\/mrdev-framework-enable-files-control.jpg\"><img decoding=\"async\" loading=\"lazy\" width=\"906\" height=\"313\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2022\/02\/mrdev-framework-enable-files-control.jpg\" alt=\"Mr.Dev.&#039;s Framework - Enable Files Control\" class=\"wp-image-2539\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2022\/02\/mrdev-framework-enable-files-control.jpg 906w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2022\/02\/mrdev-framework-enable-files-control-300x104.jpg 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2022\/02\/mrdev-framework-enable-files-control-768x265.jpg 768w\" sizes=\"(max-width: 906px) 100vw, 906px\" title=\"-\"><\/a><figcaption class=\"wp-element-caption\">Mr.Dev.&#8217;s Framework &#8211; Enable Files Control<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<figure class=\"    wp-block-image size-full\"><a href=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2022\/02\/mrdev-framework-files-control-php.jpg\"><img decoding=\"async\" loading=\"lazy\" width=\"533\" height=\"248\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2022\/02\/mrdev-framework-files-control-php.jpg\" alt=\"Mr.Dev.&#039;s Framework - Adding\/editing PHP servser-sides cripts\" class=\"wp-image-2541\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2022\/02\/mrdev-framework-files-control-php.jpg 533w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2022\/02\/mrdev-framework-files-control-php-300x140.jpg 300w\" sizes=\"(max-width: 533px) 100vw, 533px\" title=\"-\"><\/a><figcaption class=\"wp-element-caption\">Mr.Dev.&#8217;s Framework &#8211; Adding\/editing PHP servser-sides cripts<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"prepare_it_using_a_custom_php_file\"><strong>Prepare it using a custom PHP file<\/strong><\/span><\/h3>\n\n\n\n<p>If you don&#8217;t have Mr.Dev.&#8217;s Framework and already have a way to add PHP code snippets to your website, you can skip directly to add the <a href=\"#block_patterns_code_snippet\">code snippet<\/a>.<\/p>\n\n\n\n<p>Otherwise, you can <a href=\"https:\/\/marcosrego.com\/account\/development\/mrdev-framework\/\" data-type=\"post\" data-id=\"403\">get the framework<\/a> or <a href=\"#block_patterns_code_snippet\">add the code<\/a> into the <em>functions.php<\/em> file of your theme.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"block_patterns_code_snippet\"><strong>Block patterns code snippet<\/strong><\/span><\/h2>\n\n\n\n<ul>\n<li>Copy the code snippet below and paste it into the file you previously created\/selected. Do not save yet because we still need to create the actual pattern.<\/li>\n<\/ul>\n\n\n\n<pre class=\"mr-fontsize2  wp-block-code mr-fontsize2\"><code>\/\/START BLOCK PATTERNS\nfunction custom_site_init() {\n\tregister_block_pattern_category(\n\t\t'custom-site',\n\t\tarray( 'label' =&gt; get_bloginfo() )\n\t);\n\t\n\tregister_block_pattern(\n\t\t'custom-site\/project-list',\n\t\tarray(\n\t\t\t'title'       =&gt; __( 'Pattern 1', 'custom-site' ),\n\t\t\t'description' =&gt; _x( '', 'Block pattern description', 'custom-site' ),\n\t\t\t'keywords' =&gt; &#91;'pattern'],\n\t\t\t'categories' =&gt; &#91;'custom-site'],\n\t\t\t'content'     =&gt; 'PATTERN CONTENT',\n\t\t)\n\t); \n}\nadd_action( 'init', 'custom_site_init' );\n\/\/END BLOCK PATTERNS<\/code><\/pre>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"understanding_the_code_optional\"><strong>Understanding the code<\/strong> (optional)<\/span><\/h3>\n\n\n\n<p>The code above can be reused on as many websites as you want.<\/p>\n\n\n\n<p>It will automatically create a pattern&#8217;s category with the same name as the website using <em>get_bloginfo()<\/em> <em>(behind the scenes the slug will be &#8220;custom-site&#8221;, and although you can change that, it is more scalable this way)<\/em>.<\/p>\n\n\n\n<p>The pattern name will be &#8220;Pattern 1&#8221;, this part you can change to whatever you want, depending on the project or the actual pattern.<\/p>\n\n\n\n<p>You can also add a pattern description and add\/replace keywords <em>(The keywords are utilized when a user is using the search input to find blocks)<\/em>.<\/p>\n\n\n\n<figure class=\"  wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-7 is-layout-flex\">\n<figure class=\"     wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1717\" height=\"756\" data-id=\"2540\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2022\/02\/create-block-patterns-01.jpg\" alt=\"Code snippet to create block patterns\" class=\"wp-image-2540\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2022\/02\/create-block-patterns-01.jpg 1717w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2022\/02\/create-block-patterns-01-300x132.jpg 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2022\/02\/create-block-patterns-01-1024x451.jpg 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2022\/02\/create-block-patterns-01-768x338.jpg 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2022\/02\/create-block-patterns-01-1536x676.jpg 1536w\" sizes=\"(max-width: 1717px) 100vw, 1717px\" title=\"-\"><figcaption class=\"wp-element-caption\">Code snippet to create block patterns<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"create_the_block_pattern_with_the_editor\"><strong>Create the block pattern with the editor<\/strong><\/span><\/h2>\n\n\n\n<p>Now that we have prepared the code snippet, we can use the block editor to create the content for the pattern.<\/p>\n\n\n\n<ul>\n<li>On a different tab, go to <em>Pages &gt; Add New<\/em>.<\/li>\n\n\n\n<li>Create the content for the patterns, using any type of blocks you want.<\/li>\n\n\n\n<li>In the top right corner, click on the 3 dots.<\/li>\n\n\n\n<li>Click on &#8220;Copy all content&#8221;.<\/li>\n\n\n\n<li>Go back to the PHP file you previously created\/selected.<\/li>\n\n\n\n<li>Replace <em>PATTERN CONTENT<\/em> with the content you just copied.<\/li>\n\n\n\n<li>Save the file.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-12\">\n<div class=\"  wp-block-column is-layout-flow\" style=\"flex-basis:50%\">\n<figure class=\"  wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-9 is-layout-flex\">\n<figure class=\"    wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"337\" height=\"677\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2022\/02\/block-editor-copy-all-content.png\" alt=\"Block editor - Copy all content - Option location\" class=\"wp-image-2546\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2022\/02\/block-editor-copy-all-content.png 337w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2022\/02\/block-editor-copy-all-content-149x300.png 149w\" sizes=\"(max-width: 337px) 100vw, 337px\" title=\"-\"><figcaption class=\"wp-element-caption\">Block editor &#8211; Copy all content &#8211; Option location<\/figcaption><\/figure>\n<\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"add_more_block_patterns\"><strong>Add more block patterns<\/strong><\/span><\/h2>\n\n\n\n<p>To create multiple block patterns, duplicate the function <em>register_block_pattern<\/em> from the code snippet above and repeat the same steps.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"extra_remove_core_block_patterns_from_wordpress\"><strong>Extra: Remove core block patterns from WordPress<\/strong><\/span><\/h2>\n\n\n\n<p>Now that you added your own custom patterns, chances are you don&#8217;t want to show the default\/core block patterns. <\/p>\n\n\n\n<p>To do that, if you have Mr.Dev.&#8217;s Framework, you can simply enable <em>Styles Control<\/em> on the <em>Configuration tab<\/em>. Otherwise, you can add the following code on the previous code snippet, inside the main <em>custom_site_init<\/em> function:<\/p>\n\n\n\n<pre class=\"mr-fontsize2  wp-block-code mr-fontsize2\"><code>remove_theme_support( 'core-block-patterns' );<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"will_block_patterns_be_on_the_interface\"><strong>Will block patterns be on the interface?<\/strong><\/span><\/h2>\n\n\n\n<p>Hopefully WordPress will soon add a good way to do this via the full site editor. There are some interesting discussions on which will be the best way, you can follow them:<\/p>\n\n\n\n<ul>\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/31298\" target=\"_blank\" rel=\"noreferrer noopener\">Patterns: Create a pattern similarly to how we create a Reusable block. \u00b7 Issue #31298 \u00b7 WordPress\/Gutenberg (github.com)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/35305\" target=\"_blank\" rel=\"noopener\">Selecting multiple blocks &#8211; Save as Pattern or Reusable block. \u00b7 Issue #35305 \u00b7 WordPress\/gutenberg (github.com)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/38529\" target=\"_blank\" rel=\"noopener\">Building with Patterns \u00b7 Issue #38529 \u00b7 WordPress\/gutenberg (github.com)<\/a><\/li>\n<\/ul>\n\n\n\n<p>And that&#8217;s it! I hope the steps were clear and easy to follow. If not, feel free to comment below or <a href=\"https:\/\/marcosrego.com\/account\/client-area\/contact\/\" data-type=\"post\" data-id=\"678\">contact me<\/a> if you prefer to talk about it privately.<\/p>\n\n\n\n<h2><span id=\"comments\"><b>Comments<\/b><\/span><\/h2>\n<div id=\"disqus_thread\"><\/div>\n<script>\nif(mrGetCookie('cookielawinfo-checkbox-functional') == 'yes') {\n    var disqus_config = function () {\n        this.page.url = (location.protocol+'\/\/'+location.host+location.pathname).replace(\"\/account\/\", \"\/\");\n        this.page.identifier = document.querySelector(\"article\").id.replace(\"post-\", \"\");\n    };\n    \n    (function() {\n    var d = document, s = d.createElement('script');\n    s.src = 'https:\/\/marcosrego-web.disqus.com\/embed.js';\n    s.setAttribute('data-timestamp', +new Date());\n    (d.head || d.body).appendChild(s);\n    })();\n} else {\n    document.querySelector('#disqus_thread').innerHTML = 'You cannot view or add comments because you did not consent to the use of functional cookies: <a class=\"  cli_manage_current_consent\" style=\"cursor:pointer;\">Manage your consent.<\/a>';\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>WordPress does not yet give an interface to create block patterns. On this post, I&#8217;ll guide you on how you can create them in a friendly way.<\/p>\n","protected":false},"author":1,"featured_media":2550,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[19],"tags":[75,70,71,69,65,23],"_links":{"self":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts\/2515"}],"collection":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/comments?post=2515"}],"version-history":[{"count":39,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts\/2515\/revisions"}],"predecessor-version":[{"id":2835,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts\/2515\/revisions\/2835"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/media\/2550"}],"wp:attachment":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/media?parent=2515"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/categories?post=2515"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/tags?post=2515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}