{"id":45,"date":"2020-04-21T14:23:03","date_gmt":"2020-04-21T18:23:03","guid":{"rendered":"https:\/\/wpdocs.bu.edu\/bu-blocks\/?page_id=45"},"modified":"2020-04-21T14:31:45","modified_gmt":"2020-04-21T18:31:45","slug":"drawer-block","status":"publish","type":"page","link":"https:\/\/wpdocs.bu.edu\/bu-blocks\/blocks\/drawer-block\/","title":{"rendered":"Drawer Block"},"content":{"rendered":"\n<p>The Drawer Block allows you to add content to an article that can be toggled open and close.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"http:\/\/wpdocs.bu.edu\/bu-prepress\/files\/2020\/02\/drawer-example-closed.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" width=\"1024\" height=\"356\" src=\"\/bu-blocks\/files\/2020\/04\/drawer-example-closed-1024x356.png\" alt=\"\" class=\"wp-image-47\" srcset=\"https:\/\/wpdocs.bu.edu\/bu-blocks\/files\/2020\/04\/drawer-example-closed-1024x356.png 1024w, https:\/\/wpdocs.bu.edu\/bu-blocks\/files\/2020\/04\/drawer-example-closed-636x221.png 636w, https:\/\/wpdocs.bu.edu\/bu-blocks\/files\/2020\/04\/drawer-example-closed-768x267.png 768w, https:\/\/wpdocs.bu.edu\/bu-blocks\/files\/2020\/04\/drawer-example-closed.png 1628w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Drawer block closed<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"http:\/\/wpdocs.bu.edu\/bu-prepress\/files\/2020\/02\/drawer-example-open.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" width=\"1024\" height=\"570\" src=\"\/bu-blocks\/files\/2020\/04\/drawer-example-open-1024x570.png\" alt=\"\" class=\"wp-image-48\" srcset=\"https:\/\/wpdocs.bu.edu\/bu-blocks\/files\/2020\/04\/drawer-example-open-1024x570.png 1024w, https:\/\/wpdocs.bu.edu\/bu-blocks\/files\/2020\/04\/drawer-example-open-636x354.png 636w, https:\/\/wpdocs.bu.edu\/bu-blocks\/files\/2020\/04\/drawer-example-open-768x427.png 768w, https:\/\/wpdocs.bu.edu\/bu-blocks\/files\/2020\/04\/drawer-example-open.png 1628w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Drawer block open<\/figcaption><\/figure>\n\n\n\n<h4>Why would I use this block?<\/h4>\n\n\n\n<p>If your article has a sidebar of related content, use the Drawer block as a way to include the content in your article.<\/p>\n\n\n\n<h4>Examples:<\/h4>\n\n\n\n<ul><li><a href=\"http:\/\/www.bu.edu\/articles\/2020\/kara-nielsen-food-trend-spotter\/\">http:\/\/www.bu.edu\/articles\/2020\/kara-nielsen-food-trend-spotter\/<\/a><\/li><li><a href=\"http:\/\/www.bu.edu\/articles\/2020\/latest-bu-news-on-coronavirus\/\">http:\/\/www.bu.edu\/articles\/2020\/latest-bu-news-on-coronavirus\/<\/a><\/li><li><a href=\"http:\/\/www.bu.edu\/articles\/2019\/erin-edwards-killed-in-family-tragedy\/\">http:\/\/www.bu.edu\/articles\/2019\/erin-edwards-killed-in-family-tragedy\/<\/a><\/li><\/ul>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>Using the Drawer block<br><\/h3>\n\n\n\n<h4>Watch this quick video tutorial:<\/h4>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wpdocs.bu.edu\/bu-prepress\/files\/2020\/02\/drawer.mov\"><\/video><\/figure>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4>Or follow these instructions:<br><\/h4>\n\n\n\n<p>Add the Drawer block to your article.<\/p>\n\n\n\n<p>Enter your content. The upper area is the teaser, which will display before the Drawer is open. It can include an image, title and text. The bottom area is the expanded content, which will display after the Drawer is open. It can include paragraphs, headings, and images.<\/p>\n\n\n\n<p>Once you\u2019ve added your content, you can align the block to the right or left.<\/p>\n\n\n\n<p>You can also choose to adjust the width. Options include: Default, Narrow, Small, Medium and Large.<\/p>\n\n\n\n<p>You can also choose the give the expanded content area a Dark Background to help distinguish it from the article.<a href=\"http:\/\/wpdocs.bu.edu\/bu-prepress\/wp-admin\/post.php?post=317&amp;action=edit\">E<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Drawer Block allows you to add content to an article that can be toggled open and close. Why would I use this block? If your article has a sidebar of related content, use the Drawer block as a way to include the content in your article. Examples: http:\/\/www.bu.edu\/articles\/2020\/kara-nielsen-food-trend-spotter\/http:\/\/www.bu.edu\/articles\/2020\/latest-bu-news-on-coronavirus\/http:\/\/www.bu.edu\/articles\/2019\/erin-edwards-killed-in-family-tragedy\/ Using the Drawer block Watch this [&hellip;]<\/p>\n","protected":false},"author":13922,"featured_media":0,"parent":26,"menu_order":6,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/wpdocs.bu.edu\/bu-blocks\/wp-json\/wp\/v2\/pages\/45"}],"collection":[{"href":"https:\/\/wpdocs.bu.edu\/bu-blocks\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wpdocs.bu.edu\/bu-blocks\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wpdocs.bu.edu\/bu-blocks\/wp-json\/wp\/v2\/users\/13922"}],"replies":[{"embeddable":true,"href":"https:\/\/wpdocs.bu.edu\/bu-blocks\/wp-json\/wp\/v2\/comments?post=45"}],"version-history":[{"count":5,"href":"https:\/\/wpdocs.bu.edu\/bu-blocks\/wp-json\/wp\/v2\/pages\/45\/revisions"}],"predecessor-version":[{"id":55,"href":"https:\/\/wpdocs.bu.edu\/bu-blocks\/wp-json\/wp\/v2\/pages\/45\/revisions\/55"}],"up":[{"embeddable":true,"href":"https:\/\/wpdocs.bu.edu\/bu-blocks\/wp-json\/wp\/v2\/pages\/26"}],"wp:attachment":[{"href":"https:\/\/wpdocs.bu.edu\/bu-blocks\/wp-json\/wp\/v2\/media?parent=45"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}