{"id":2405,"date":"2020-08-07T15:23:30","date_gmt":"2020-08-07T19:23:30","guid":{"rendered":"https:\/\/www.bates.edu\/wordpress\/?page_id=2405"},"modified":"2026-02-06T10:25:49","modified_gmt":"2026-02-06T15:25:49","slug":"popular-blocks-2","status":"publish","type":"page","link":"https:\/\/www.bates.edu\/wordpress\/block-editor\/popular-features\/popular-blocks-2\/","title":{"rendered":"Popular Blocks"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"1\">Highlight Boxes<\/h2>\n\n\n\n<p>Highlight\/callout content by putting a box around.<\/p>\n\n\n\n<p><strong>In a new block, type \/highlight and select &#8220;Highlight Box&#8221;<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"832\" height=\"212\" src=\"https:\/\/www.bates.edu\/wordpress\/files\/2020\/03\/highlight-box-fr.gif\" alt=\"\" class=\"wp-image-2294\"\/><\/figure>\n\n\n\n<p><em>Highlight boxes come in multiple colors: yellow, green, pink, and blue. <\/em><\/p>\n\n\n\n<section class=\"wp-block-bates-shortcodes-highlight highlight-box highlight-box-yellow\"><\/section>\n\n\n\n<p><em>To choose the color, make sure to select the box\u2014not the text in the highlight box\u2014and navigate to the  &#8220;Box Color&#8221; options in block settings on the right side of your screen.<\/em><\/p>\n\n\n\n<section class=\"wp-block-bates-shortcodes-highlight highlight-box highlight-box-yellow\">\n<p>Example one<\/p>\n<\/section>\n\n\n\n<section class=\"wp-block-bates-shortcodes-highlight highlight-box  is-style-green\">\n<p>Another example, this one green!<\/p>\n<\/section>\n\n\n\n<section class=\"wp-block-bates-shortcodes-highlight highlight-box  is-style-pink\">\n<p>Another example, this one pink!<\/p>\n<\/section>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"2\">Foldaway<\/h2>\n\n\n\n<p>This block allows you to hide content inside of a container folded away from visibility. Additionally, you are able to use any of the header (H1, H2, H3, H4, H5, H6) elements to style the title of the section.<\/p>\n\n\n\n<p><strong>In a new block, type \/foldaway and select &#8220;Foldaway&#8221;<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"842\" height=\"256\" src=\"https:\/\/www.bates.edu\/wordpress\/files\/2020\/03\/foldaway.gif\" alt=\"\" class=\"wp-image-2331\"\/><\/figure>\n\n\n\n<h5 class=\"js-foldaway-sections foldaway-section-header\" id=\"1034294a-be84-484d-9ac6-5ad2d1a00d22\" role=\"button\" aria-pressed=\"false\" aria-expanded=\"false\" aria-controls=\"1034294a-be84-484d-9ac6-5ad2d1a00d22-content\"><a href=\"#\"><span>+<\/span>Example with default yellow<\/a><\/h5><div class=\"foldaway-section foldaway-inner-yellow\" id=\"1034294a-be84-484d-9ac6-5ad2d1a00d22-content\">\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis nisi vitae leo pellentesque efficitur. Duis lobortis sit amet justo eget aliquet. Sed quis quam commodo, auctor libero eget, fringilla mi. Morbi dignissim massa tempus, venenatis libero sed, molestie nulla. In hac habitasse platea dictumst. Nullam tristique diam at eros blandit condimentum. Proin ultricies id tellus id vulputate. Etiam lacus quam, dapibus ut nisl quis, egestas egestas lacus. Mauris sed velit ex. Vestibulum ultricies mauris a iaculis vestibulum. Duis et tempor felis, id efficitur justo. Maecenas sodales dignissim laoreet.<\/p>\n<\/div>\n\n\n\n<h5 class=\"js-foldaway-sections foldaway-section-header\" id=\"eeca6719-11c2-4f4d-a84d-6491f87e2780\" role=\"button\" aria-pressed=\"false\" aria-expanded=\"false\" aria-controls=\"eeca6719-11c2-4f4d-a84d-6491f87e2780-content\"><a href=\"#\"><span>+<\/span>Example with transparent background<\/a><\/h5><div class=\"foldaway-section\" id=\"eeca6719-11c2-4f4d-a84d-6491f87e2780-content\">\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis nisi vitae leo pellentesque efficitur. Duis lobortis sit amet justo eget aliquet. Sed quis quam commodo, auctor libero eget, fringilla mi. Morbi dignissim massa tempus, venenatis libero sed, molestie nulla. In hac habitasse platea dictumst. Nullam tristique diam at eros blandit condimentum. Proin ultricies id tellus id vulputate. Etiam lacus quam, dapibus ut nisl quis, egestas egestas lacus. Mauris sed velit ex. Vestibulum ultricies mauris a iaculis vestibulum. Duis et tempor felis, id efficitur justo. Maecenas sodales dignissim laoreet.<\/p>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3\">Collapsible Areas<\/h2>\n\n\n\n<p>This block gives you a clickable title bar with a section of content that slides out below. You can also link directly to the opened bar within a page. To find this anchor link, click the bar first and then copy the url from your browser address bar. These collapsible areas area available in a variety of on-brand, accessible colors.<\/p>\n\n\n\n<p><strong>In a new block, type \/btn and select &#8220;Btn&#8221;<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"824\" height=\"292\" src=\"https:\/\/www.bates.edu\/wordpress\/files\/2020\/03\/collapsible-areas.gif\" alt=\"\" class=\"wp-image-2325\"\/><\/figure>\n\n\n\n<div class=\"wp-block-bates-shortcodes-btn btn-wrap\" id=\"6864a6d6-c2dd-4f5a-8096-a4e5b0fd43f9\"><div class=\"btn-action\" role=\"button\" tabindex=\"0\" aria-controls=\"6864a6d6-c2dd-4f5a-8096-a4e5b0fd43f9\" aria-pressed=\"false\" aria-expanded=\"false\"><h3 class=\"btn-title\">The Title Bar<\/h3><div class=\"btn-arrow\"><\/div><\/div><div class=\"btn-content\" id=\"6864a6d6-c2dd-4f5a-8096-a4e5b0fd43f9\">\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porttitor eget tortor vel pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at faucibus eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam nisl sem, cursus non viverra quis, venenatis vitae dui.&nbsp;<\/p>\n<\/div><\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"4\">Call to Action Button<\/h2>\n\n\n\n<p>An inviting clickable button. This has a lot of options, and requires only a link and text.<\/p>\n\n\n\n<p><strong>In a new block, type \/call and select &#8220;Call to Action button&#8221;<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"870\" height=\"174\" src=\"https:\/\/www.bates.edu\/wordpress\/files\/2020\/03\/call-to-action-button.gif\" alt=\"\" class=\"wp-image-2321\"\/><\/figure>\n\n\n\n<p>By selecting the button, you can choose to customize your button by making it larger or full width. You can also choose to add an arrow. These buttons are available in a variety of on-brand, accessible colors.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\">Default Button<\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-garnet-button large-button large-button\"><a class=\"wp-block-button__link wp-element-button\">Large Button<\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-gray-button full-width\"><a class=\"wp-block-button__link wp-element-button\">Full Width Button<\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-100 is-style-default large-button large-button\"><a class=\"wp-block-button__link wp-element-button\">Large and Full Width Button<\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button with-arrow with-arrow\"><a class=\"wp-block-button__link wp-element-button\">Button with arrow<\/a><\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"5\">Show Children Pages<\/h2>\n\n\n\n<p>Prints a list of the children pages of the current page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"842\" height=\"256\" src=\"https:\/\/www.bates.edu\/wordpress\/files\/2020\/03\/list-children.gif\" alt=\"\" class=\"wp-image-2334\"\/><\/figure>\n\n\n\n<p><strong>In a new block, type \/list and select &#8220;List Children&#8221;<\/strong><\/p>\n\n\n\n<p>The List Children block features multiple sorting options.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Highlight Boxes Highlight\/callout content by putting a box around. In a new&hellip;<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":4310,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_hide_ai_chatbot":false,"_ai_chatbot_style":"","associated_faculty":[],"_Page_Specific_Css":"","_bates_restrict_mod":false,"_batesModPostContentOverride_prepend":false,"_batesModPostContentOverride_append":false,"_batesModPostContentOverride_append_before_footer":false,"_dimp_site_id":"","_dimp_override_contact":false,"_table_of_contents_display":true,"_table_of_contents_location":"","_table_of_contents_disableSticky":false,"_is_featured":false,"footnotes":"","_bates_seo_meta_description":"","_bates_seo_block_robots":false,"_bates_seo_sharing_image_id":0,"_bates_seo_sharing_image_twitter_id":0,"_bates_seo_share_title":"","_bates_seo_canonical_overwrite":"","_bates_seo_twitter_template":""},"class_list":["post-2405","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/pages\/2405","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/comments?post=2405"}],"version-history":[{"count":4,"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/pages\/2405\/revisions"}],"predecessor-version":[{"id":4412,"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/pages\/2405\/revisions\/4412"}],"up":[{"embeddable":true,"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/pages\/4310"}],"wp:attachment":[{"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/media?parent=2405"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}