{"id":9777,"date":"2021-02-24T19:17:20","date_gmt":"2021-02-24T19:17:20","guid":{"rendered":"https:\/\/wordpress.org\/news\/?p=9777"},"modified":"2021-06-04T12:01:56","modified_gmt":"2021-06-04T12:01:56","slug":"gutenberg-tutorial-reusable-blocks","status":"publish","type":"post","link":"https:\/\/wordpress.org\/news\/2021\/02\/gutenberg-tutorial-reusable-blocks\/","title":{"rendered":"Did You Know About Reusable Blocks?"},"content":{"rendered":"\n<p><strong><em>Created by Joen Asmussen, <a href='https:\/\/profiles.wordpress.org\/joen\/' class='mention'><span class='mentions-prefix'>@<\/span>joen<\/a><\/em><\/strong><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/wordpress.org\/news\/files\/2021\/02\/Reusable-Blocks-featured.png?resize=585%2C329&#038;ssl=1\" alt=\"\" class=\"wp-image-9803\" width=\"585\" height=\"329\" srcset=\"https:\/\/i0.wp.com\/wordpress.org\/news\/files\/2021\/02\/Reusable-Blocks-featured.png?resize=1024%2C577&amp;ssl=1 1024w, https:\/\/i0.wp.com\/wordpress.org\/news\/files\/2021\/02\/Reusable-Blocks-featured.png?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/wordpress.org\/news\/files\/2021\/02\/Reusable-Blocks-featured.png?resize=768%2C433&amp;ssl=1 768w, https:\/\/i0.wp.com\/wordpress.org\/news\/files\/2021\/02\/Reusable-Blocks-featured.png?w=1440&amp;ssl=1 1440w\" sizes=\"auto, (max-width: 585px) 100vw, 585px\" \/><\/figure><\/div>\n\n\n\n<p>The WordPress block editor (a.k.a. Gutenberg) comes with a feature called &#8220;reusable blocks.\u201d They are blocks, saved for later, edited in one place.<\/p>\n\n\n\n<p>Have you ever wanted to:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Re-use the same snippet of text across posts and pages?<\/li><li>Save complex layouts to spare you having to copy\/paste from one post to another?<\/li><\/ul>\n\n\n\n<p>Reusable blocks can do these things.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Like templates, you mean?<\/h2>\n\n\n\n<p>Not quite. Think of reusable blocks as snippets of globally synchronized content that are personal to you. You can edit all your reusable blocks in one place, and any post or page you inserted that block into, get the updated version as well.&nbsp;<\/p>\n\n\n\n<p>Where you might use templates to structure your website, you can use reusable blocks to structure your content. For example:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>A testimonial on your homepage and your product page.<\/li><li>A &#8220;this post is part of a series&#8221; box that you insert part-way through your article.<\/li><li>A &#8220;Follow me on social media&#8221; section you can weave into the prose of your popular article.<\/li><li>Complex but static blocks, such as a &#8220;Subscribe to my newsletter&#8221; box, a contact form, a survey, quiz, or polls.<\/li><\/ul>\n\n\n\n<p>Key properties are that reusable blocks are unbeatable when you want to reuse a snippet of content, edit it in one place, and have the changes propagate to every instance.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Show me how<\/h2>\n\n\n\n<p>To create a reusable block, open the block editor and create the content you want to reuse:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/news\/files\/2021\/02\/1_create_content.mov\"><\/video><\/figure>\n\n\n\n<p>Now select the content you want to turn into a reusable block, then click the three-dot &#8220;More&#8221; menu and choose &#8220;Add to Reusable blocks.\u201d<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/news\/files\/2021\/02\/2_convert_to_reusable.mov\"><\/video><\/figure>\n\n\n\n<p>Voil\u00e0, you\u2019ve now created a reusable block. From now on, you can find this block, and any other you create, in the &#8220;Reusable blocks&#8221; tab in the block library:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/news\/files\/2021\/02\/3_reusable_blocks_tab.mov\"><\/video><\/figure>\n\n\n\n<p>This is also where you can insert the newly created block on any of your posts or pages.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Where do I edit my existing reusable blocks?<\/h2>\n\n\n\n<p>To edit a reusable block, select it and make your edits. When you make an edit, the Publish button will have a little dot indicator:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/news\/files\/2021\/02\/4_saving_global_changes.mov\"><\/video><\/figure>\n\n\n\n<p>This dot indicates you\u2019ve made a global change that potentially affects posts beyond just the one you\u2019re editing, the same as when you\u2019re editing templates. This lets you confirm the change was intentional.<\/p>\n\n\n\n<p><strong>Another way to edit your reusable blocks<\/strong> is to click the global three-dot &#8220;More&#8221; menu and selecting &#8220;Manage all reusable blocks&#8221;:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/news\/files\/2021\/02\/5_manage_all_reusable_blocks.mov\"><\/video><\/figure>\n\n\n\n<p>This takes you to a section letting you edit, rename, export, or delete every reusable block you created.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What else can I do?<\/h2>\n\n\n\n<p>Here are a couple of tips and tricks you can leverage to get the most out of reusable blocks.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Give them a good name<\/h3>\n\n\n\n<p>When you name a reusable block, you are essentially choosing your search terms, as the name is what you search for in the block library (or when you use the &#8220;slash command,\u201d typing \/ in an empty paragraph):<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/news\/files\/2021\/02\/6_tip_name_them.mov\"><\/video><\/figure>\n\n\n\n<p>Avoid names such as &#8220;Gallery&#8221; or &#8220;Image,\u201d as that\u2019ll be annoying when you just want to insert one of those. You can avoid that with a unique name, such as &#8220;My author biography.\u201d<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Insert in the best place of your content flow<\/h3>\n\n\n\n<p>One obvious benefit of reusable blocks is that they are just blocks, just like everything else in the block editor. That means you can insert it anywhere in your content. You might want your rich author biography to sit at the top or bottom of the post, but <em>This post is part of a series<\/em> box that might sit well two or three paragraphs not to disrupt the reading flow.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/news\/files\/2021\/02\/7_tip_place_in_flow.mov\"><\/video><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">A design shortcut<\/h3>\n\n\n\n<p>Maybe you created a complex layout you&#8217;re happy with, a call to action with the right image and buttons, and it took a while to get it just right. Go on and save it as a reusable block: even if you mean to insert it only to convert it to a regular block, it might still save you a minute.&nbsp;<\/p>\n\n\n\n<p>To convert a reusable block to regular (blocks, select it and click the &#8220;Convert to regular blocks&#8221;:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/news\/files\/2021\/02\/10_complex_layouts-2.mov\"><\/video><\/figure>\n\n\n\n<p><em>Design by <\/em><a href=\"https:\/\/beatrizfialho.com\/\"><em>Beatriz Fialho<\/em><\/a><em>.<\/em><\/p>\n\n\n\n<p><strong>Tip:<\/strong> You can also find some nice patterns on <a href=\"https:\/\/gutenberghub.com\/\">Gutenberg Hub<\/a> or <a href=\"https:\/\/shareablock.com\/\">ShareABlock<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Take it with you<\/h3>\n\n\n\n<p>Need to move to another site? You can both export and import reusable blocks. Go to the <em>Manage all reusable blocks<\/em> section from the global three-dot &#8220;More&#8221; menu, hover over the block you want to export, and click &#8220;Export as JSON&#8221;:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/news\/files\/2021\/02\/8_tip_import_export-1.mov\"><\/video><\/figure>\n\n\n\n<p>The downloaded file can be imported on any WordPress 5.0 or newer website.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Try it<\/h2>\n\n\n\n<p>Create a draft post and play around with Reusable Blocks to see how you might start using them. You can always delete them when you\u2019re done playing.<\/p>\n\n\n\n<p>You can test importing and using a small reusable block I created as an example. It&#8217;s a &#8220;Further reading&#8221; block that shows the four latest posts from the category &#8220;Featured&#8221;:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/33_L1WQrTxNiidm8IKcSfn7_nYjcpq5zpSzycmKliDnGzFI_hLu7yLPV1vnqWgCS7H6JtFAGEXz-AVkNBLtQQEM80VA6KUfcmj1JAoVZ5ZNMavVzlGzBPEiqiD3-eUzZSvOTYm_E\" alt=\"\" \/><\/figure>\n\n\n\n<p>It might work well as a highlight in an article, giving the reader something new to read or awareness of your other content.<\/p>\n\n\n\n<p><em><strong>The videos in this post show the reusable blocks flow in the upcoming WordPress 5.7.<\/strong><\/em><\/p>\n\n\n\n<p><a href=\"https:\/\/gist.github.com\/jasmussen\/53cb51dcd9a2bb561893aa7c5e126cdf\"><strong>Download the block from this gist<\/strong><\/a>, import it to your WordPress site, then customize to make it yours.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn about reusable blocks in this Gutenberg tutorial.<\/p>\n","protected":false},"author":17810800,"featured_media":9812,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"episode_type":"","audio_file":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","date_recorded":"","explicit":"","block":"","filesize_raw":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[5],"tags":[199,115],"class_list":["post-9777","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","tag-gutenberg","tag-tutorials","mentions-joen"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/wordpress.org\/news\/files\/2021\/02\/Reusable-Blocks-featured-2.png?fit=1440%2C1441&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pZhYe-2xH","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/news\/wp-json\/wp\/v2\/posts\/9777","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/news\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.org\/news\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/news\/wp-json\/wp\/v2\/users\/17810800"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/news\/wp-json\/wp\/v2\/comments?post=9777"}],"version-history":[{"count":15,"href":"https:\/\/wordpress.org\/news\/wp-json\/wp\/v2\/posts\/9777\/revisions"}],"predecessor-version":[{"id":10931,"href":"https:\/\/wordpress.org\/news\/wp-json\/wp\/v2\/posts\/9777\/revisions\/10931"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.org\/news\/wp-json\/wp\/v2\/media\/9812"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/news\/wp-json\/wp\/v2\/media?parent=9777"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/news\/wp-json\/wp\/v2\/categories?post=9777"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.org\/news\/wp-json\/wp\/v2\/tags?post=9777"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}