{"id":81467,"date":"2024-08-18T15:00:00","date_gmt":"2024-08-18T15:00:00","guid":{"rendered":"https:\/\/wpmet.com\/?p=81467"},"modified":"2025-10-02T10:34:32","modified_gmt":"2025-10-02T10:34:32","slug":"wordpress-reusable-blocks-guide","status":"publish","type":"post","link":"https:\/\/wpmet.com\/wordpress-reusable-blocks-guide\/","title":{"rendered":"Complete Guide to WordPress Reusable Blocks and Patterns\u00a0"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">WordPress reusable block is a powerful feature in the Gutenberg block editor. You no longer need to copy and paste previously saved reusable content snippets from your computer file. Instead, you can easily reuse the same content block anywhere on your website without customizing it each time.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Despite its efficiency, many users remain unaware of this time-saving technique, leading them to waste time and effort unnecessarily. This is why we have come up with an in-depth write-up on WordPress reusable block.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You&#8217;ll learn how to create, use, and set up WordPress reusable blocks and other essential tips.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s read on\u2026..<\/p>\n\n\n\n<div class=\"wp-block-group has-border-color has-background is-vertical is-layout-flex wp-container-core-group-is-layout-5d1a3871 wp-block-group-is-layout-flex\" style=\"border-color:#2cacff;border-width:2px;border-radius:8px;background-color:#f9fdff;margin-bottom:50px;padding-bottom:0px;line-height:1.5\">\n<p class=\"wp-block-paragraph\"><strong>Quick Overview<\/strong><br>This WordPress reusble block documentation will highlight the differences between regular blocks and reusable blocks along with:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How to create a reusable block in WordPress<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Create pattern<\/strong>.<\/li>\n\n\n\n<li>Configure <strong>pattern settings<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Set up blocks in posts or pages<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Open a page<\/strong><\/li>\n\n\n\n<li><strong>Click &#8220;+&#8221; icon<\/strong> and<strong> navigate to Patterns<\/strong> tab.<\/li>\n\n\n\n<li><strong>Hit to add selected pattern<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How to convert WordPress reusable blocks to regular block<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>select reusable block<\/strong>.<\/li>\n\n\n\n<li><strong>Click three dots<\/strong>.<\/li>\n\n\n\n<li><strong>Press &#8220;Detach<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How to manage WordPress reusable blocks<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navigate to <strong>Appearance > Editor.<\/strong><\/li>\n\n\n\n<li><strong>Click Patterns <\/strong>tab. <\/li>\n\n\n\n<li><strong>Select pattern<\/strong>.<\/li>\n\n\n\n<li><strong>Edit, duplicate, delete, and export<\/strong> to manage pattern.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How to import\/export reusable blocks<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Update latest <strong>WordPress version<\/strong><\/li>\n\n\n\n<li>Navigate to <strong>Appearance > Editor > Design > Patterns<\/strong><\/li>\n\n\n\n<li>Select <strong>pattern category<\/strong><\/li>\n\n\n\n<li>Click <strong>&#8220;Export as JSON&#8221;<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong> <\/strong><\/p>\n<\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is a Reusable Block (Pattern) in WordPress?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress reusable blocks are like regular content blocks that users can create and save for repeated use across any part of their website within the block editor. The process includes grouping multiple WordPress reuse blocks like patterns and importing them anywhere on your website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A common example of using this feature is placing the <strong>same call-to-action or social media button, form, or promotional banners consistently<\/strong> across the entire website. Therefore, you won\u2019t have to customize the same thing repeatedly.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The best part is changes will automatically apply to all the pages and posts of your website. You don\u2019t need to change every aspect individually. Plus, you can also export and import the reusable template to another website.<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Difference Between Reusable Blocks and Regular Blocks<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here are some of the key differences between WordPress reusable blocks and regular blocks.<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table class=\"has-border-color has-hello-gutenkit-white-gray-border-color has-fixed-layout\" style=\"border-width:1px\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\"><strong>Reusable Blocks<\/strong><\/th><th class=\"has-text-align-center\" data-align=\"center\"><strong>Regular Blocks<\/strong><\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">Create, save, and reuse across various instances of the website.<\/td><td class=\"has-text-align-center\" data-align=\"center\">Create and use for a single post or page only.<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Editing and customization are automatically updated across the website.<\/td><td class=\"has-text-align-center\" data-align=\"center\">Customization only affects the specific instance of the website.<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Can easily manage from a centralized location.<\/td><td class=\"has-text-align-center\" data-align=\"center\">Need to manage individually within a post or page.<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Available with importing and exporting features.<\/td><td class=\"has-text-align-center\" data-align=\"center\">It can easily manage from a centralized location.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>When Do You Need to Use WordPress Reusable Blocks&nbsp;<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">One of the really interesting things about using WordPress reusable blocks is the simplification of site-wide changes. For instance, if you need to <a href=\"https:\/\/wpmet.com\/how-to-create-a-fully-custom-website-footer-with-elementor\/\">update your website&#8217;s footer<\/a> or adjust the discount on a promotional banner, there&#8217;s <strong>no need to manually change it on every post or page<\/strong>.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Simply access the settings of the reusable block, and you can make the update in just a few clicks. This <strong>centralized management also ensures design consistency<\/strong> in the full website. Further, you will find these blocks easily accessible as they are stored in a dedicated section of your block editor. This means this feature is beneficial for team collaboration.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Another thing that we mentioned before, is that reusable blocks can also be shared between different websites. You can <strong>effortlessly export and import a reusable block to different websites<\/strong>. WP reusable blocks are also convertible.<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div\r\n    \tclass=\"align wp-block-abb-alert-box\"    id='abbAlertBox-1'\r\n    data-attributes='{&quot;message&quot;:&quot;\\ud83d\\udc49 &lt;a href=\\&quot;https:\\\/\\\/wpmet.com\\\/what-is-wordpress-playground-wordpress-playground-explained\\\/\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;noreferrer noopener\\&quot;&gt;Complete Guide on WordPress Playground to Learn Web Building&lt;\\\/a&gt;&quot;,&quot;icon&quot;:{&quot;class&quot;:&quot;&quot;},&quot;isDismiss&quot;:false,&quot;align&quot;:&quot;&quot;,&quot;type&quot;:&quot;general&quot;,&quot;width&quot;:&quot;100%&quot;,&quot;alignment&quot;:&quot;center&quot;,&quot;textAlign&quot;:&quot;center&quot;,&quot;title&quot;:&quot;Alert&quot;,&quot;typography&quot;:{&quot;fontSize&quot;:{&quot;desktop&quot;:&quot;25px&quot;,&quot;tablet&quot;:&quot;22px&quot;,&quot;mobile&quot;:&quot;20px&quot;}},&quot;colors&quot;:{&quot;color&quot;:&quot;#333&quot;,&quot;bg&quot;:&quot;#fff&quot;},&quot;padding&quot;:{&quot;vertical&quot;:&quot;15px&quot;,&quot;horizontal&quot;:&quot;15px&quot;},&quot;border&quot;:{&quot;width&quot;:&quot;2px&quot;,&quot;color&quot;:&quot;#333&quot;,&quot;radius&quot;:&quot;8px&quot;},&quot;shadow&quot;:[],&quot;fileAlert&quot;:{&quot;text&quot;:&quot;File Name.txt&quot;,&quot;link&quot;:&quot;#&quot;},&quot;infoUrlAlert&quot;:{&quot;text&quot;:&quot;Button Title&quot;,&quot;link&quot;:&quot;#&quot;},&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true}}'\r\n    data-pipecheck='false'\r\n\r\n><\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to Create Reusable Blocks (Pattern) in WordPress Gutenberg Editor<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Take a new page or post as you regularly do. Then, click the <strong>\u201c+\u201d <\/strong>icon at the top left corner of the page to see all the available blocks.&nbsp; And, drag &amp; drop the block to your block editor dashboard that you want to make as a reusable block.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this tutorial, we\u2019ll be creating a pattern with reusable blocks to show all our social channels. For our design, we\u2019re using the <strong><a href=\"https:\/\/wpmet.com\/plugin\/gutenkit\/blocks\/heading\/\">GutenKit Heading block<\/a><\/strong> and <strong><a href=\"https:\/\/wpmet.com\/doc\/gutenkit-social-icons-block\/\">GutenKit Social Icons block<\/a><\/strong>.<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n <div data-block=\"gutenkit\/dual-button\" data-post-id=\"81467\" id=\"block-4e3c71de-842e-497c-ac25-3c09e17dc7b2\" class=\"wp-block-gutenkit-dual-button gkit-dual-button-middle-text gkit7dc7b2 gutenkit-block\"><div class=\"gkit-dual-btn-container\"><div class=\"gkit-dual-btn-wrapper\"><a class=\"gkit-dual-btn gkit-dual-btn-first\" href=\"https:\/\/wordpress.org\/plugins\/gutenkit-blocks-addon\/\" target=\"_blank\" rel=\"noopener\"><span class=\"gkit-dual-btn-text\">GutenKit Free<\/span><\/a><a class=\"gkit-dual-btn gkit-dual-btn-second\" href=\"https:\/\/wpmet.com\/plugin\/gutenkit\/\" target=\"_blank\" rel=\"noopener\"><span class=\"gkit-dual-btn-text\">GutenKit Pro<\/span><\/a><\/div><\/div><\/div> \n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Note that <\/strong>we are adding both blocks within a container block, so we will make the container block a reusable block. But, you can also make an individual block as a reusable block or pattern following the same process.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1175\" height=\"917\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Screenshot-7-1.png\" alt=\"WordPress Gutenberg reusable blocks\" class=\"wp-image-81469\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Screenshot-7-1.png 1175w, https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Screenshot-7-1-768x599.png 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Screenshot-7-1-15x12.png 15w, https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Screenshot-7-1-360x281.png 360w\" sizes=\"(max-width: 1175px) 100vw, 1175px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now, click the three-dot icon in the popup toolbar to reveal some additional settings and click the \u201c<strong>Create Pattern\u201d <\/strong>option.&nbsp;<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1092\" height=\"911\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Screenshot-8.png\" alt=\"WordPress reusable blocks\" class=\"wp-image-81470\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Screenshot-8.png 1092w, https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Screenshot-8-768x641.png 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Screenshot-8-14x12.png 14w, https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Screenshot-8-360x300.png 360w\" sizes=\"(max-width: 1092px) 100vw, 1092px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Doing so will show a popup asking for the reusable block name and category, and a toggle button to sync this block across multiple locations. All done, just hit the <strong>\u201cAdd\u201d <\/strong>button.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it! You have successfully created a pattern or reusable block on your Gutenberg website. You will find the WordPress block pattern in your assigned category. Next, we\u2019ll learn about using it on posts or pages.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">\ud83d\udca1 Also read the beginner guide on <a href=\"https:\/\/wpmet.com\/use-gutenberg-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">how to use Gutenberg in WordPress<\/a><\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to Set up WordPress Reusable Blocks in Posts and Pages<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">There isn\u2019t any hurdle for setting up WordPress Gutenberg reusable blocks in your WordPress website. Start with accessing an existing page or post or creating a new one. Click the \u201c<strong>+<\/strong>\u201d (Add Block) icon as you have done before. But here you need to select the \u201c<strong>Patterns<\/strong>\u201d tab.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"719\" height=\"649\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Screenshot-1.png\" alt=\"WordPress reusable blocks\" class=\"wp-image-81471\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Screenshot-1.png 719w, https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Screenshot-1-13x12.png 13w, https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Screenshot-1-360x325.png 360w\" sizes=\"(max-width: 719px) 100vw, 719px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Access your reusable blocks&#8217; category and click on it once you see it. The reusable block will be added to your post or page. For example, in the above image, you can see our \u201c<strong>Social Channels<\/strong>\u201d pattern or reusable block under the \u201c<strong>Button<\/strong>\u201d category. That\u2019s it.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can customize it after adding a reusable block or pattern. To do this, click on the &#8220;<strong>Edit Original<\/strong>&#8221; option under the block toolbar. You will see a new screen to edit the WordPress block pattern. However, customizing it will also affect other aspects of the website where you use it.<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to Convert WordPress Reusable Blocks for a Specific Post<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s know another important part of using WordPress reusable blocks which is customizing the patterns or reusable blocks without changing other uses of the block on the website. For this, you have to convert the WordPress reusable block into a regular one.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"930\" height=\"653\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Screenshot-9.png\" alt=\"WordPress reusable blocks\" class=\"wp-image-81473\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Screenshot-9.png 930w, https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Screenshot-9-768x539.png 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Screenshot-9-18x12.png 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Screenshot-9-360x253.png 360w\" sizes=\"(max-width: 930px) 100vw, 930px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Select the reusable block and click the three vertical dots from the right side of the toolbar menu. Look for the \u201c<strong>Detach<\/strong>\u201d option and click it. Doing this will convert the reusable block into a regular block. Then, you will be free to make any changes to that block.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to Manage Reusable Blocks (Patterns) within WordPress Editor<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You may have multiple WordPress reusable content blocks and patterns and you want them to manage from a centralized location. No worries! You have this advantage too. Navigate to the WordPress dashboard, and follow <strong>Appearance > Editor<\/strong>.\u00a0<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You will be moved to a new page, from the left sidebar select the <strong>\u201cPatterns\u201d <\/strong>option under the <strong>\u201cDesign\u201d <\/strong>tab. You will find all the pattern categories, choose your preferred one.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"867\" height=\"853\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Patterns-management.png\" alt=\"WordPress reusable blocks\" class=\"wp-image-81475\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Patterns-management.png 867w, https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Patterns-management-768x756.png 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Patterns-management-12x12.png 12w, https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Patterns-management-360x354.png 360w\" sizes=\"(max-width: 867px) 100vw, 867px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">On the right side, you\u2019ll see the reusable blocks. You can edit, duplicate, delete, and export for use on another WordPress website.&nbsp;<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to Import \/ Export Reusable Blocks (Patterns) in WordPress<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The perks of using WordPress reusable blocks are not only limited to using them throughout the website but also exporting and importing them to other websites. It\u2019s a great time saver for any developers.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"596\" height=\"741\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Group-323.png\" alt=\"WordPress reusable blocks\" class=\"wp-image-81476\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Group-323.png 596w, https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Group-323-10x12.png 10w, https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Group-323-360x448.png 360w\" sizes=\"(max-width: 596px) 100vw, 596px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If you have installed the latest WordPress version, from your admin dashboard, navigate as we\u2019ve shown above: <strong>Appearance &gt; Editor &gt; Design &gt; Patterns<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"879\" height=\"837\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/export-reusable-blocks.png\" alt=\"WordPress reusable blocks\" class=\"wp-image-81478\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/export-reusable-blocks.png 879w, https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/export-reusable-blocks-768x731.png 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/export-reusable-blocks-13x12.png 13w, https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/export-reusable-blocks-360x343.png 360w\" sizes=\"(max-width: 879px) 100vw, 879px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>To export a reusable block or pattern<\/strong>: Select the pattern category and click on the three-dot vertical icon of the pattern you want to export. You will see an option titled \u201c<strong>Export as JSON<\/strong>\u201d, Hit it to save the JSON file on your device.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1474\" height=\"621\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Screenshot-11.png\" alt=\"WordPress reusable blocks\" class=\"wp-image-81479\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Screenshot-11.png 1474w, https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Screenshot-11-768x324.png 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Screenshot-11-18x8.png 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2024\/08\/Screenshot-11-360x152.png 360w\" sizes=\"(max-width: 1474px) 100vw, 1474px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>To import a reusable block or pattern<\/strong>: When you are on the patterns page, click the \u201c<strong>Add New Pattern<\/strong>\u201d option and then hit \u201c<strong>Import pattern from JSON<\/strong>\u201d to upload the JSON file from your computer.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>FAQs<\/strong><\/h2>\n\n\n <div data-block=\"gutenkit\/advanced-accordion\" data-post-id=\"81467\" id=\"block-4d3a6bb6-c3bc-486e-9245-4090da85f365\" class=\"wp-block-gutenkit-advanced-accordion gkit85f365 gutenkit-block\"><div class=\"gkit-accordion accordion-primary\"> <div data-block=\"gutenkit\/advanced-accordion-item\" data-post-id=\"81467\" id=\"block-36e95253-5a59-4347-a44d-bf6c96cea830\" class=\"wp-block-gutenkit-advanced-accordion-item gkit-card gkitcea830 gutenkit-block\"><div class=\"gkit-card-header\"><a class=\"gkit-accordion--toggler gkit-btn-link collapsed\"><span identifier=\"title\" class=\"gkit-accordion-title\"><strong>Where Are Reusable Blocks Stored in WordPress?<\/strong><\/span><div class=\"gkit_accordion_icon_group\"><div class=\"gkit_accordion_normal_icon icon-right\"><svg version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" viewbox=\"0 0 32 32\" class=\"gkit-icon\">\n<title>down-arrow1<\/title>\n<path d=\"M31.582 8.495c-0.578-0.613-1.544-0.635-2.153-0.059l-13.43 12.723-13.428-12.723c-0.61-0.578-1.574-0.553-2.153 0.059-0.579 0.611-0.553 1.576 0.058 2.155l14.477 13.715c0.293 0.277 0.67 0.418 1.047 0.418s0.756-0.14 1.048-0.418l14.477-13.715c0.611-0.579 0.637-1.544 0.058-2.155z\"><\/path>\n<\/svg><\/div><div class=\"gkit_accordion_active_icon icon-right\"><svg version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" viewbox=\"0 0 32 32\" class=\"gkit-icon\">\n<title>up-arrow<\/title>\n<path d=\"M26.915 10.844c0.451 0.451 0.451 1.162 0 1.613-0.436 0.436-1.162 0.436-1.597 0l-8.18-8.18v26.995c0 0.629-0.5 1.129-1.129 1.129s-1.146-0.5-1.146-1.129v-26.996l-8.164 8.18c-0.451 0.436-1.178 0.436-1.613 0-0.451-0.451-0.451-1.162 0-1.613l10.117-10.117c0.436-0.436 1.162-0.436 1.597 0l10.116 10.118z\"><\/path>\n<\/svg><\/div><\/div><\/a><\/div><div class=\"collapse\"><div class=\"gkit-card-body gkit-accordion--content\"><div> <div data-block=\"gutenkit\/advanced-paragraph\" data-post-id=\"81467\" id=\"block-c9720507-5ba9-42b9-bd1c-9e42fdc00f36\" class=\"wp-block-gutenkit-advanced-paragraph gkitc00f36 gutenkit-block\"><div class=\"gkit-adv-paragraph\"><p identifier=\"content\" class=\"gkit-adv-paragraph-text\">Reusable blocks are stored in the WordPress database as a custom post type called &#8220;wp_block.&#8221;<\/p><\/div><\/div> <\/div><\/div><\/div><\/div> \n\n <div data-block=\"gutenkit\/advanced-accordion-item\" data-post-id=\"81467\" id=\"block-cd482d50-d1c6-4639-bd05-519d91b0194f\" class=\"wp-block-gutenkit-advanced-accordion-item gkit-card gkitb0194f gutenkit-block\"><div class=\"gkit-card-header\"><a class=\"gkit-accordion--toggler gkit-btn-link collapsed\"><span identifier=\"title\" class=\"gkit-accordion-title\"><strong>How Do You Add Additional CSS Classes in Reusable Blocks?<\/strong><\/span><div class=\"gkit_accordion_icon_group\"><div class=\"gkit_accordion_normal_icon icon-right\"><svg version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" viewbox=\"0 0 32 32\" class=\"gkit-icon\">\n<title>down-arrow1<\/title>\n<path d=\"M31.582 8.495c-0.578-0.613-1.544-0.635-2.153-0.059l-13.43 12.723-13.428-12.723c-0.61-0.578-1.574-0.553-2.153 0.059-0.579 0.611-0.553 1.576 0.058 2.155l14.477 13.715c0.293 0.277 0.67 0.418 1.047 0.418s0.756-0.14 1.048-0.418l14.477-13.715c0.611-0.579 0.637-1.544 0.058-2.155z\"><\/path>\n<\/svg><\/div><div class=\"gkit_accordion_active_icon icon-right\"><svg version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" viewbox=\"0 0 32 32\" class=\"gkit-icon\">\n<title>up-arrow<\/title>\n<path d=\"M26.915 10.844c0.451 0.451 0.451 1.162 0 1.613-0.436 0.436-1.162 0.436-1.597 0l-8.18-8.18v26.995c0 0.629-0.5 1.129-1.129 1.129s-1.146-0.5-1.146-1.129v-26.996l-8.164 8.18c-0.451 0.436-1.178 0.436-1.613 0-0.451-0.451-0.451-1.162 0-1.613l10.117-10.117c0.436-0.436 1.162-0.436 1.597 0l10.116 10.118z\"><\/path>\n<\/svg><\/div><\/div><\/a><\/div><div class=\"collapse\"><div class=\"gkit-card-body gkit-accordion--content\"><div> <div data-block=\"gutenkit\/advanced-paragraph\" data-post-id=\"81467\" id=\"block-2c86f11f-a9bb-4802-88d4-84a4e1b86f53\" class=\"wp-block-gutenkit-advanced-paragraph gkitb86f53 gutenkit-block\"><div class=\"gkit-adv-paragraph\"><p identifier=\"content\" class=\"gkit-adv-paragraph-text\">You can insert CSS classes in the \u201c<strong>Advanced<\/strong>\u201d tab of the reusable block settings. A field would be titled \u201c<strong>Additional CSS Class(es)<\/strong>\u201d for that.<\/p><\/div><\/div> <\/div><\/div><\/div><\/div> \n\n <div data-block=\"gutenkit\/advanced-accordion-item\" data-post-id=\"81467\" id=\"block-56bde905-5df6-432c-9682-094e98136d37\" class=\"wp-block-gutenkit-advanced-accordion-item gkit-card gkit136d37 gutenkit-block\"><div class=\"gkit-card-header\"><a class=\"gkit-accordion--toggler gkit-btn-link collapsed\"><span identifier=\"title\" class=\"gkit-accordion-title\"><strong>How to Delete Reusable Blocks from WordPress?<\/strong><\/span><div class=\"gkit_accordion_icon_group\"><div class=\"gkit_accordion_normal_icon icon-right\"><svg version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" viewbox=\"0 0 32 32\" class=\"gkit-icon\">\n<title>down-arrow1<\/title>\n<path d=\"M31.582 8.495c-0.578-0.613-1.544-0.635-2.153-0.059l-13.43 12.723-13.428-12.723c-0.61-0.578-1.574-0.553-2.153 0.059-0.579 0.611-0.553 1.576 0.058 2.155l14.477 13.715c0.293 0.277 0.67 0.418 1.047 0.418s0.756-0.14 1.048-0.418l14.477-13.715c0.611-0.579 0.637-1.544 0.058-2.155z\"><\/path>\n<\/svg><\/div><div class=\"gkit_accordion_active_icon icon-right\"><svg version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" viewbox=\"0 0 32 32\" class=\"gkit-icon\">\n<title>up-arrow<\/title>\n<path d=\"M26.915 10.844c0.451 0.451 0.451 1.162 0 1.613-0.436 0.436-1.162 0.436-1.597 0l-8.18-8.18v26.995c0 0.629-0.5 1.129-1.129 1.129s-1.146-0.5-1.146-1.129v-26.996l-8.164 8.18c-0.451 0.436-1.178 0.436-1.613 0-0.451-0.451-0.451-1.162 0-1.613l10.117-10.117c0.436-0.436 1.162-0.436 1.597 0l10.116 10.118z\"><\/path>\n<\/svg><\/div><\/div><\/a><\/div><div class=\"collapse\"><div class=\"gkit-card-body gkit-accordion--content\"><div> <div data-block=\"gutenkit\/advanced-paragraph\" data-post-id=\"81467\" id=\"block-87b9b084-1eeb-4dad-b7bf-7b726bb0f3bc\" class=\"wp-block-gutenkit-advanced-paragraph gkitb0f3bc gutenkit-block\"><div class=\"gkit-adv-paragraph\"><p identifier=\"content\" class=\"gkit-adv-paragraph-text\">To delete reusable blocks from your WordPress site, navigate to <strong>Appearance &gt; Editor &gt; Design &gt; Patterns <\/strong>and click the three-dot vertical icon to reveal the delete option.<br><\/p><\/div><\/div> <\/div><\/div><\/div><\/div> \n\n <div data-block=\"gutenkit\/advanced-accordion-item\" data-post-id=\"81467\" id=\"block-69557063-acd1-4c2c-a3ef-1578798d77fa\" class=\"wp-block-gutenkit-advanced-accordion-item gkit-card gkit8d77fa gutenkit-block\"><div class=\"gkit-card-header\"><a class=\"gkit-accordion--toggler gkit-btn-link collapsed\"><span identifier=\"title\" class=\"gkit-accordion-title\"><strong>Where to Find Reusable Blocks WordPress<\/strong>?<\/span><div class=\"gkit_accordion_icon_group\"><div class=\"gkit_accordion_normal_icon icon-right\"><svg version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" viewbox=\"0 0 32 32\" class=\"gkit-icon\">\n<title>down-arrow1<\/title>\n<path d=\"M31.582 8.495c-0.578-0.613-1.544-0.635-2.153-0.059l-13.43 12.723-13.428-12.723c-0.61-0.578-1.574-0.553-2.153 0.059-0.579 0.611-0.553 1.576 0.058 2.155l14.477 13.715c0.293 0.277 0.67 0.418 1.047 0.418s0.756-0.14 1.048-0.418l14.477-13.715c0.611-0.579 0.637-1.544 0.058-2.155z\"><\/path>\n<\/svg><\/div><div class=\"gkit_accordion_active_icon icon-right\"><svg version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" viewbox=\"0 0 32 32\" class=\"gkit-icon\">\n<title>up-arrow<\/title>\n<path d=\"M26.915 10.844c0.451 0.451 0.451 1.162 0 1.613-0.436 0.436-1.162 0.436-1.597 0l-8.18-8.18v26.995c0 0.629-0.5 1.129-1.129 1.129s-1.146-0.5-1.146-1.129v-26.996l-8.164 8.18c-0.451 0.436-1.178 0.436-1.613 0-0.451-0.451-0.451-1.162 0-1.613l10.117-10.117c0.436-0.436 1.162-0.436 1.597 0l10.116 10.118z\"><\/path>\n<\/svg><\/div><\/div><\/a><\/div><div class=\"collapse\"><div class=\"gkit-card-body gkit-accordion--content\"><div> <div data-block=\"gutenkit\/advanced-paragraph\" data-post-id=\"81467\" id=\"block-a3121569-d20e-4d66-95ec-fa1e1543c3f0\" class=\"wp-block-gutenkit-advanced-paragraph gkit43c3f0 gutenkit-block\"><div class=\"gkit-adv-paragraph\"><p identifier=\"content\" class=\"gkit-adv-paragraph-text\">Reusable blocks can be found in the <strong>Appearance &gt; Editor &gt; Design &gt; Patterns<\/strong>.<\/p><\/div><\/div> <\/div><\/div><\/div><\/div> <\/div><\/div> \n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Wrap Up!<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">All in all, as a WordPress user, you look for what makes your work easier. And, WordPress has continuously developed various useful and time-saving new features such as retrievable blocks<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you know how to use and manage WordPress reusable blocks, you can save a ton of time by avoiding repetitive work. And, we hope this blog has helped you to differentiate between WordPress reusable blocks and regular blocks.<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/wpmet.com\/plugin\/gutenkit\/\"><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"262\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2024\/05\/gutenkit_cta.gif\" alt=\"\" class=\"wp-image-76663\"\/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><br><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress reusable block is a powerful feature in the Gutenberg block editor. You no longer need to copy and paste previously saved reusable content snippets from your computer file. Instead, you can easily reuse the same content block anywhere on your website without customizing it each time. Despite its efficiency, many users remain unaware of [&hellip;]<\/p>\n","protected":false},"author":49,"featured_media":81485,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"enableOnePageScrollInPage":false,"onePageScrollCss":"","onePageScrollSpeed":1000,"onePageScrollAnimation":"easeInOutQuad","onePageScrollShowDotNavigation":true,"onePageScrollNavigation":"scaleUp","onePageScrollNavigationPosition":"right","onePageScrollNavigationHorizontal":[],"onePageScrollNavigationVertical":[],"onePageScrollNavigationSpacing":[],"onePageScrollNavigationColor":"#00ff0d","onePageScrollNavigationColorHover":"#00ff0d","onePageScrollNavigationColorActive":"#00ff0d","onePageScrollNavigationIcon":[],"onePageScrollNavigationWidth":[],"onePageScrollNavigationWidthHover":[],"onePageScrollNavigationWidthActive":[],"onePageScrollNavigationHeight":[],"onePageScrollNavigationHeightHover":[],"onePageScrollNavigationHeightActive":[],"onePageScrollNavigationBorder":[],"onePageScrollNavigationBorderHover":[],"onePageScrollNavigationBorderActive":[],"onePageScrollNavigationBorderRadius":[],"onePageScrollNavigationBorderRadiusHover":[],"onePageScrollNavigationBorderRadiusActive":[],"onePageScrollNavigationTooltipTypography":[],"onePageScrollNavigationTooltipColor":"#ffffff","onePageScrollNavigationTooltipColorHover":"","onePageScrollNavigationTooltipBgColor":"#00ff0d","onePageScrollNavigationTooltipBgColorHover":"","onePageScrollNavigationTooltipPadding":[],"onePageScrollNavigationTooltipPaddingHover":[],"onePageScrollNavigationTooltipBorderRadius":[],"onePageScrollNavigationTooltipBorderRadiusHover":[],"pageSettingsCustomCss":"","footnotes":""},"categories":[169,783],"tags":[36],"class_list":["post-81467","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","category-guide","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/posts\/81467","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/users\/49"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/comments?post=81467"}],"version-history":[{"count":0,"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/posts\/81467\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/media\/81485"}],"wp:attachment":[{"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/media?parent=81467"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/categories?post=81467"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/tags?post=81467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}