{"id":32605,"date":"2021-12-13T15:00:41","date_gmt":"2021-12-13T14:00:41","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=32605"},"modified":"2021-12-13T00:13:26","modified_gmt":"2021-12-12T23:13:26","slug":"wordpress-block-patterns","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/wordpress-block-patterns\/","title":{"rendered":"WordPress Block Patterns &#8211; What Are They and How to Use Them"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]WordPress sure has come a long way since its early days. What once was envisioned as software primarily catering to bloggers today powers two fifths of the internet, making it easy for anyone to start and run any kind of website. WordPress grew into its role by adding new features, and it kept it by working on those features to make them better and more convenient to use.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Blocks are a perfect example. Originally introduced with the <a href=\"https:\/\/qodeinteractive.com\/magazine\/introduction-to-wordpress-gutenberg-block-editor\/\">WordPress Gutenberg editor<\/a> in 2018, blocks helped WordPress stay relevant and move further towards becoming a full website builder. The team at WordPress kept improving on the blocks, and in 2020 it released a great new feature called block patterns.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we\u2019ll help you better understand block patterns. We\u2019ll cover topics that include:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-are-wordpress-block-patterns\">What Are WordPress Block Patterns?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#benefits-of-using-block-patterns\">Benefits of Using Block Patterns<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-insert-block-patterns\">How to Insert Block Patterns<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-create-your-patterns\">How to Create Your Patterns<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-are-wordpress-block-patterns\"><\/a>What Are WordPress Block Patterns?<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/WordPress-Block-Patterns.jpg\" class=\"attachment-full size-full\" alt=\"WordPress Block Patterns\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/WordPress-Block-Patterns.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/WordPress-Block-Patterns-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/WordPress-Block-Patterns-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/WordPress-Block-Patterns-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The defining feature of the Gutenberg editor is the block, which works like a container for content. There are all kinds of blocks for all kinds of content, and each comes with content-specific options. <strong>Blocks should provide you with a more visual experience when arranging the elements on a page or a post while removing the need to use shortcode and letting you focus on the content.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Block patterns allow you to add premade groups of blocks to a page or post you\u2019re building.<\/strong> For example, instead of adding a three-column block, choosing the 33\/33\/33 column layout, and then adding a paragraph block inside each column, you can simply choose a block pattern with that layout and add it, instead. <strong>Some patterns are available from the block menu, but you can access many more at WordPress.org\u2019s<\/strong> <a href=\"https:\/\/wordpress.org\/patterns\/\" target=\"_blank\" rel=\"noopener\">Block Pattern Directory<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You\u2019ve already had an option to do a similar thing with reusable blocks \u2013 the kind of blocks you can <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-export-and-import-gutenberg-blocks-in-wordpress\/\">easily import and export<\/a>. With reusable blocks, you are also able to create whole layouts of blocks and save them. You could also edit them later, but you\u2019d have to be careful \u2013 any change you made to a reusable block will apply to any other instance you\u2019ve used that block.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With block patterns, that\u2019s not the case.<strong> Block patterns, even though they might come with content in them, are primarily concerned with the layout. You can change the content without the worry that it will change anything in any other instance you\u2019ve used the same pattern.<\/strong> These patterns are independent of your theme &#8211; they\u2019ll stick around on your pages or posts even if you change the theme.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"benefits-of-using-block-patterns\"><\/a>Benefits of Using Block Patterns<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Benefits-of-Using-Block-Patterns.jpg\" class=\"attachment-full size-full\" alt=\"Benefits of Using Block Patterns\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Benefits-of-Using-Block-Patterns.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Benefits-of-Using-Block-Patterns-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Benefits-of-Using-Block-Patterns-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Benefits-of-Using-Block-Patterns-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Block patterns are a paradigm-shifting addition to WordPress because they make creating layouts to be as simple as browsing the Block Pattern Directory and copying what you like to your website.<\/strong> This feature makes it easier to build pages, posts, and whole websites, and it\u2019s equally beneficial to professional designers and people who want to build their own websites. With time, as the ability to upload patterns to the Directory becomes more widespread, the feature will only get better.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Just like reusable blocks, block patterns are a great time-saving tool.<strong> You can create pages or posts with fairly complex layouts by applying a couple of block patterns, instead of including and arranging every block separately.<\/strong> Granted, you might be limited by the number of block patterns available to you, but that\u2019s likely to change as more developers start using them and including them in themes or plugins.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]While they might not be as easy to create as reusable blocks, block patterns aren\u2019t impossible to create \u2013 you\u2019ll just need to know how to code or use a plugin to help you out.<strong> We\u2019ll talk about it in a while, but let\u2019s say for now that creating your patterns and saving them can be great if you want to create a couple of versions of the same landing page for testing.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]That brings us to the main advantage block patterns have over reusable blocks \u2013 <strong>you can use every instance of the same block pattern independently from one another.<\/strong> Any change you make to the contents or the layout of a block pattern will be confined to that specific application of that block pattern.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-insert-block-patterns\"><\/a>How to Insert Block Patterns<\/h2>\n<p>[\/vc_column_text][vc_column_text]It\u2019s really simple to insert block patterns. Navigate to a post or a page you want to use to try out a block pattern or two. You can also create a new post or page just to check block patterns out, it\u2019s up to you. The only thing you need to have is the Gutenberg editor \u2013 if you\u2019ve <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-disable-gutenberg-in-wordpress\/\">disabled it<\/a>, you\u2019ll have to enable it back. <strong>Keep in mind that, since they\u2019ve been introduced with WordPress 5.5, you\u2019ll need that version of WordPress or newer to use block patterns.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once in the editor, you\u2019ll need the Block Inserter \u2013 the menu that goes to the left of the main editor content area. <strong>The easiest way to bring up the Block Inserter is to press the \u201c+\u201d button in the top left-hand corner of the window.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Toggle-Block-Inserter-Gutenberg.jpg\" class=\"attachment-full size-full\" alt=\"Toggle Block Inserter Gutenberg\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Toggle-Block-Inserter-Gutenberg.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Toggle-Block-Inserter-Gutenberg-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Toggle-Block-Inserter-Gutenberg-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Toggle-Block-Inserter-Gutenberg-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The Block Inserter will contain tabs for blocks, patterns, and reusables if you have any. <strong>Choose patterns, and you\u2019ll see a dropdown menu allowing you to choose between the six available classes of patterns.<\/strong> You might see a preview for each pattern, but don\u2019t be surprised if you only see previews for some patterns, or none \u2013 it looks like this feature is glitchy.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"650\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Choose-Pattern.jpg\" class=\"attachment-full size-full\" alt=\"Choose Pattern\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Choose-Pattern.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Choose-Pattern-300x201.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Choose-Pattern-768x515.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Choose-Pattern-620x416.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Let\u2019s see if we can add a quote using the block pattern. Navigate to Text patterns and choose the \u201cQuote\u201d pattern to add the quote. <strong>You\u2019ll see it in the content area, and you\u2019ll notice that it has a picture, and some copy included.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"533\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Pattern-Quote.jpg\" class=\"attachment-full size-full\" alt=\"Pattern Quote\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Pattern-Quote.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Pattern-Quote-300x165.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Pattern-Quote-768x422.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Pattern-Quote-620x341.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you\u2019re unsure what all the different blocks in the pattern are, you can easily see a full list of them. <strong>Simply click on the \u201cList View\u201d button in the top left, and you\u2019ll see a list of all the blocks you have on the page.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"550\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/List-View.jpg\" class=\"attachment-full size-full\" alt=\"List View\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/List-View.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/List-View-300x170.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/List-View-768x436.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/List-View-620x352.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>You can click on any element in the block pattern to change its contents, just like you would with any other block.<\/strong> By changing the image and copy, you can turn the quote above into something completely different.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Block-Patterns-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Block Patterns Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Block-Patterns-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Block-Patterns-Preview-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Block-Patterns-Preview-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Block-Patterns-Preview-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you find the selection of patterns you get with your theme or just WordPress limiting, you can go to the Block Pattern Directory and find something that\u2019s better suited for your needs. <strong>Find the pattern you like and hover over it \u2013 a \u201ccopy\u201d button will appear.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Block-Patterns-Copy-Button.jpg\" class=\"attachment-full size-full\" alt=\"Block Patterns Copy Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Block-Patterns-Copy-Button.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Block-Patterns-Copy-Button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Block-Patterns-Copy-Button-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Block-Patterns-Copy-Button-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Simply press that button and navigate back to your website and the page or post you were editing and paste the pattern into a block.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"625\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Paste-Pattern.jpg\" class=\"attachment-full size-full\" alt=\"Paste Pattern\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Paste-Pattern.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Paste-Pattern-300x193.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Paste-Pattern-768x495.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Paste-Pattern-620x400.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]From there, you can change the contents of the pattern any way you want. Any change you create with that pattern will stay on that page.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-create-your-patterns\"><\/a>How to Create Your Patterns<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you already have some reusable blocks you want to turn into block patterns, you can use the <a href=\"https:\/\/wordpress.org\/plugins\/reusable-blocks-extended\/\" target=\"_blank\" rel=\"noopener\">Reusable Blocks Extended<\/a> plugin and do it with a click of the button. <strong>To create block patterns from scratch, you have two options \u2013 add them as code, or use a plugin for it.<\/strong> Since using the plugin is a more novice-friendly way of doing it, we\u2019ll show you how to create your patterns using the <a href=\"https:\/\/wordpress.org\/plugins\/blockmeister\/\" target=\"_blank\" rel=\"noopener\">Block Pattern Builder<\/a> plugin. Your first step would be to navigate to <em><strong>Plugins &gt; Add New<\/strong><\/em>, find the plugin, install, and activate it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Block-Pattern-Builder-Plugin.jpg\" class=\"attachment-full size-full\" alt=\"Block Pattern Builder Plugin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Block-Pattern-Builder-Plugin.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Block-Pattern-Builder-Plugin-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Block-Pattern-Builder-Plugin-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Block-Pattern-Builder-Plugin-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Your next step would be to navigate to <em><strong>Block Patterns &gt; Add New<\/strong><\/em>. This will take you to what looks like a regular builder page, and it\u2019s where you\u2019ll be able to create and save a block pattern.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This is how you\u2019d create a block pattern that lets you, for example, insert an image into a text at one place, and then add a quote later. <strong>The first block you\u2019ll want to add is a Columns block. <\/strong>Insert an Image block into the leftmost column, and a Paragraph block into the rightmost one.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Block-Patterns-Columns.jpg\" class=\"attachment-full size-full\" alt=\"Block Patterns Columns\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Block-Patterns-Columns.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Block-Patterns-Columns-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Block-Patterns-Columns-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Block-Patterns-Columns-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>The next step would be to add a quote somewhere underneath.<\/strong> If you plan to have some text following the image, create an additional Paragraph block. Follow it with a Quote block, and finish the pattern with a Paragraph block. You\u2019ll have a view of all the blocks we used thanks to the List View option.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Quote-Block.jpg\" class=\"attachment-full size-full\" alt=\"Quote Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Quote-Block.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Quote-Block-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Quote-Block-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Quote-Block-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>When you\u2019re happy with the block pattern we\u2019ve created, the next step would be to select all of the blocks \u2013 Shift-A or Shift-Click works well \u2013 and open the options menu that looks like three vertical dots.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/All-Blocks.jpg\" class=\"attachment-full size-full\" alt=\"All Blocks\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/All-Blocks.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/All-Blocks-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/All-Blocks-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/All-Blocks-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]From there, select the \u201cAdd to block patterns option,\u201d and follow the instructions about the reloading of the page after the pattern is saved. <strong>And that\u2019s it \u2013 the next time you want to add a block pattern, you\u2019ll find a new category of patterns that\u2019s named after your website.<\/strong> You\u2019ll find the patterns you create there \u2013 although the plugin lets you add custom categories and assign them to patterns you\u2019ve already created.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Let\u2019s Wrap It Up!<\/h2>\n<p>[\/vc_column_text][vc_column_text]Block patterns are a fun, relatively new, way to add pre-designed layouts of blocks to the pages or posts of your WordPress website \u2013 all in the effort of saving time and maybe sparking your imagination. Patterns come with core WordPress, you can find them in some themes, download plugins with them, or find them in the Blocks Directory. If all else fails, you can create your block patterns and apply them on your website as many times as you\u2019d like.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Need a quick intro into WordPress block patterns? We&#8217;ll show you what they are, where to find them, and how you can create your own!<\/p>\n","protected":false},"author":9295,"featured_media":32636,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[181,72,182,4,13],"class_list":["post-32605","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources","tag-blocks","tag-gutenberg","tag-patterns","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/32605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/9295"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=32605"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/32605\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/32636"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=32605"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=32605"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=32605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}