{"id":12268,"date":"2018-02-09T14:22:53","date_gmt":"2018-02-09T19:22:53","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=12268"},"modified":"2020-03-12T14:39:23","modified_gmt":"2020-03-12T18:39:23","slug":"how-to-create-a-reusable-block-in-the-gutenberg-editor","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/wordpress-tutorials\/how-to-create-a-reusable-block-in-the-gutenberg-editor\/","title":{"rendered":"How to Create a Reusable Block in the Gutenberg editor"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<?xml encoding=\"utf-8\" ?><html><body><p>There is a point where you may want to save a block so that you can reuse it in a different location. Fortunately, this can be done very simply by using&nbsp;<strong>reusable blocks <\/strong>in&nbsp;the WordPress editor. Note that as of WordPress 5.0, the Gutenberg editor has been integrated into the Administrator dashboard as the default editor. Follow the directions below to learn how to save a <strong>Reusable block<\/strong>.<\/p>\n<h2 id=\"what-is-a-reusable-block\">What is a reusable block?<\/h2>\n<p>A <strong>reusable block<\/strong> is a modified or formatted block created within the WordPress editor and saved so that you can apply that same block in a different part of your WordPress site. The screenshot below identifies a reusable block.<\/p>\n<p><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12268-saved-block.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-12398 alignleft\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12268-saved-block-300x208.png\" alt=\"\" width=\"300\" height=\"208\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12268-saved-block-300x208.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12268-saved-block-768x533.png 768w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12268-saved-block-250x174.png 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12268-saved-block-550x382.png 550w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12268-saved-block-259x180.png 259w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12268-saved-block-432x300.png 432w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12268-saved-block-720x500.png 720w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/01\/12268-saved-block.png 772w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<h2 id=\"\"><\/h2>\n<h2 id=\"\"><\/h2>\n<p>&nbsp;<\/p>\n<h2 id=\"how-to-create-a-reusable-block\">How to Create a reusable block<\/h2>\n<p>Learn how to create a reusable block in the Gutenberg editor by following the directions below.<\/p>\n<ol>\n<li><a href=\"https:\/\/www.boldgrid.com\/support\/boldgrid-inspirations-plugin-product-guide\/logging-in\/\">Log in to the WordPress Administrator<\/a><\/li>\n<li>Open a page or post to edit or create a new one as needed.<\/li>\n<li><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/selected-block.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-16284 size-medium\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/selected-block-300x110.png\" alt=\"\" width=\"300\" height=\"110\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/selected-block-300x110.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/selected-block-768x283.png 768w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/selected-block-250x92.png 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/selected-block-550x202.png 550w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/selected-block-800x294.png 800w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/selected-block-489x180.png 489w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/selected-block.png 815w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>Add a block and then format or add styles to it as per your preference.\n<div style=\"clear: both;\"><\/div>\n<\/li>\n<li><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/3-dot-menu.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-16287 size-medium\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/3-dot-menu-300x110.png\" alt=\"\" width=\"300\" height=\"110\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/3-dot-menu-300x110.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/3-dot-menu-768x283.png 768w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/3-dot-menu-250x92.png 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/3-dot-menu-550x202.png 550w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/3-dot-menu-800x294.png 800w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/3-dot-menu-489x180.png 489w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/3-dot-menu.png 815w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>&nbsp;Once you&rsquo;re done with the formatting of the block, click on the three vertical dots to the right of the block.\n<div style=\"clear: both;\"><\/div>\n<\/li>\n<li style=\"clear: both;\">&nbsp;<a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/add-to-reuseable-blocks.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-16288 size-medium\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/add-to-reuseable-blocks-300x255.png\" alt=\"\" width=\"300\" height=\"255\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/add-to-reuseable-blocks-300x255.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/add-to-reuseable-blocks-768x652.png 768w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/add-to-reuseable-blocks-250x212.png 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/add-to-reuseable-blocks-550x467.png 550w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/add-to-reuseable-blocks-800x679.png 800w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/add-to-reuseable-blocks-212x180.png 212w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/add-to-reuseable-blocks-354x300.png 354w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/add-to-reuseable-blocks-589x500.png 589w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/add-to-reuseable-blocks.png 819w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>Click on <strong>Add to Reusable Blocks<\/strong>.<\/li>\n<li style=\"clear: both;\"><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/name-the-block.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-16289 size-medium\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/name-the-block-300x263.png\" alt=\"\" width=\"300\" height=\"263\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/name-the-block-300x263.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/name-the-block-768x672.png 768w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/name-the-block-250x219.png 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/name-the-block-550x482.png 550w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/name-the-block-800x700.png 800w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/name-the-block-206x180.png 206w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/name-the-block-343x300.png 343w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/name-the-block-571x500.png 571w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/name-the-block.png 812w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>You will then need to name the block that you are saving. Click on the box where you see the box with the holder text, &ldquo;Untitled Reusable Block&rdquo;.\n<div style=\"clear: both;\"><\/div>\n<\/li>\n<li style=\"clear: both;\"><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/save-reusable-block.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-16290 size-medium\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/save-reusable-block-300x263.png\" alt=\"\" width=\"300\" height=\"263\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/save-reusable-block-300x263.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/save-reusable-block-768x672.png 768w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/save-reusable-block-250x219.png 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/save-reusable-block-550x482.png 550w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/save-reusable-block-800x700.png 800w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/save-reusable-block-206x180.png 206w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/save-reusable-block-343x300.png 343w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/save-reusable-block-571x500.png 571w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/save-reusable-block.png 812w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>Click on <strong>Save<\/strong> to finish.\n<div style=\"clear: both;\"><\/div>\n<\/li>\n<\/ol>\n<div style=\"clear: both;\"><\/div>\n<p>Once the block is saved you can access it from the blocks menu at any time. If you ever need to make changes to the block and then save it as a different block, simply detach the block, make your edits, then convert it a reusable block again and name it differently.&nbsp; That completes our tutorial on saving reusable&nbsp;blocks in the Gutenberg editor. For more information on using Gutenberg, check our article on <a href=\"https:\/\/www.boldgrid.com\/support\/wordpress-tutorials\/how-to-set-the-pending-review-option-in-the-gutenberg-editor\/\">How to set the Pending Review option<\/a>.<\/p>\n<p><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/saved-blocks.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-16291 aligncenter\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/saved-blocks-300x187.png\" alt=\"\" width=\"300\" height=\"187\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/saved-blocks-300x187.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/saved-blocks-768x478.png 768w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/saved-blocks-1024x637.png 1024w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/saved-blocks-250x156.png 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/saved-blocks-550x342.png 550w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/saved-blocks-800x498.png 800w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/saved-blocks-289x180.png 289w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/saved-blocks-482x300.png 482w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/saved-blocks-804x500.png 804w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/02\/saved-blocks.png 1167w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>There is a point where you may want to save a block so that you can reuse it in a different location. Fortunately, this can be done very simply by using&nbsp;reusable blocks in&nbsp;the WordPress editor. Note that as of WordPress 5.0, the Gutenberg editor has been integrated into the Administrator dashboard as the default editor. [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"Create a Reusable Block in the Gutenberg editor","bgseo_description":"Learn how to create a reusable block in the Gutenberg editor using the instructions provided in this tutorial.","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[151],"tags":[691],"class_list":["post-12268","post","type-post","status-publish","format-standard","hentry","category-wordpress-tutorials","tag-gutenberg"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/12268","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=12268"}],"version-history":[{"count":9,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/12268\/revisions"}],"predecessor-version":[{"id":16292,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/12268\/revisions\/16292"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=12268"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=12268"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=12268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}