{"id":5371,"date":"2023-01-29T09:50:00","date_gmt":"2023-01-29T17:50:00","guid":{"rendered":"https:\/\/test-inside.ewu.edu\/mchildress\/?p=5371"},"modified":"2025-01-02T09:16:34","modified_gmt":"2025-01-02T17:16:34","slug":"how-to-use-the-group-block","status":"publish","type":"post","link":"https:\/\/test-inside.ewu.edu\/mchildress\/how-to-use-the-group-block\/","title":{"rendered":"How to Use the Group Block"},"content":{"rendered":"\n<p>The <em><strong>Group<\/strong><\/em> Block in the Gutenberg editor is used to group multiple blocks into a single container, allowing content managers to treat multiple blocks as a single entity. So learning to use the group block will pay dividends in creating more complex layouts and designs and organizing content into sections or group-related elements. This post will look at common scenarios for using the group block as effectively as possible.<\/p>\n\n\n<style>.kb-table-of-content-nav.kb-table-of-content-id5371_975c40-3e .kb-table-of-content-wrap{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);}.kb-table-of-content-nav.kb-table-of-content-id5371_975c40-3e .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id5371_975c40-3e .kb-table-of-contents-title{font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id5371_975c40-3e .kb-table-of-content-wrap .kb-table-of-content-list{font-weight:regular;font-style:normal;margin-top:var(--global-kb-spacing-sm, 1.5rem);margin-right:0px;margin-bottom:0px;margin-left:0px;}<\/style>\n\n\n<h2 class=\"wp-block-heading\">What is the Group Block?<\/h2>\n\n\n\n<p>While the <em><strong>Group<\/strong><\/em> block is technically a block, it requires a different process than what is used with the other blocks. It can be resized, re-positioned, and styled as needed, and its contents can be edited or rearranged as desired.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Scenario: Creating a Sidebar Group<\/h2>\n\n\n\n<p>Website real estate, or lack thereof, is real. We want to be able to fine-tune the spacing between the headings and the content they describe or separate. While you want to give your headers space, the default block settings often offer too much space and make the sidebar look more than a little wonky.  <\/p>\n\n\n\n<p>When I first built the sidebar on this blog, I placed a Headline block followed by the Latest Posts block outside a group or container. While I could make it look passable, it did not look cohesive and well-balanced. Using the <strong><em>Group<\/em><\/strong> block has solved this issue. As an example, we&#8217;ll look at this blog&#8217;s right sidebar. Below I walk you through the creation of a group, the addition of a <strong><em>Headline<\/em><\/strong> and <strong><em>Latest Posts<\/em><\/strong> widget, and the steps I followed to create it.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>From the dashboard, navigate to <strong><em>Appearance<\/em><\/strong> &gt; <strong><em>Widgets<\/em><\/strong>.<\/li>\n\n\n\n<li>On the widgets page, expand the <em><strong>Right Sidebar<\/strong><\/em> widget.<\/li>\n\n\n\n<li>Click Add a Block + and select the <strong><em>Group<\/em><\/strong> block from the block options.<\/li>\n\n\n\n<li>Once the Group block is added, click the + again to add the Headline widget.<\/li>\n\n\n\n<li>Give the Headline widget a title.<\/li>\n\n\n\n<li>Select the Group icon and click the small + on the lower right of the Group block area.<\/li>\n\n\n\n<li>Select the Latest Posts block.<\/li>\n\n\n\n<li>Configure it with the date and preferred featured image.<\/li>\n\n\n\n<li>Preview a page that will use the <em><strong>Right Sidebar<\/strong><\/em> widget.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to Use the Group Block on a Sidebar\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/3Fw_cwXLBE0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\"><strong>Video Length: 1 Minute 22 Seconds<\/strong><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Scenario: Creating a 2-Column Content Group<\/h2>\n\n\n\n<p>In our second scenario, we&#8217;ll look at creating a responsive two-column content layout. More often than not, I opt for this approach for smaller tables over using the native <em>Table<\/em> block for three reasons; First, you can create a responsive group that will resize to almost any technology.  Second, you have many more options to fine-tune the layout and design to meet specific requirements.  Third, the native Table block is not necessarily easy to work with.  For larger tables with sorting and export options, TablePress is the better option.<\/p>\n\n\n\n<p>Below is our example.  To install this on your website, follow the instructions below:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/test-inside.ewu.edu\/mchildress\/wp-content\/uploads\/sites\/264\/2023\/02\/2-column-content-group.json\">Download the JSON<\/a> file and save it to your local system.<\/li>\n\n\n\n<li>Open your WordPress dashboard.<\/li>\n\n\n\n<li>Create a new page.<\/li>\n\n\n\n<li>From the newly created page, click the three ellipses in the top right corner of the browser and select the option Manage Reusable blocks.<\/li>\n\n\n\n<li>On the Reusable blocks page, click the blue Import from JSON button.<\/li>\n\n\n\n<li>Navigate to the JSON file you downloaded in step 1 and import it into your website.<\/li>\n\n\n\n<li>Once in your Reusable blocks, you can add the block from the block inserter &gt; Reusable Blocks<\/li>\n\n\n\n<li>Once placed on a page, convert the reusable block to a standard block so your edits will only be applied to the block instance on the page.<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-group has-base-2-background-color has-background is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"gb-headline gb-headline-1e1c1989 gb-headline-text\">Main Heading<\/h3>\n\n\n<div class=\"gb-container gb-container-289a0f37\"><div class=\"gb-inside-container\">\n<div class=\"gb-grid-wrapper gb-grid-wrapper-4f1c339b\">\n<div class=\"gb-grid-column gb-grid-column-b82466fe\"><div class=\"gb-container gb-container-b82466fe\"><div class=\"gb-inside-container\">\n<div class=\"gb-container gb-container-1231ac0a\"><div class=\"gb-inside-container\">\n\n<h4 class=\"gb-headline gb-headline-7c85cb38 gb-headline-text\">Subheading One<\/h4>\n\n<\/div><\/div>\n\n<div class=\"gb-container gb-container-89593ba5\"><div class=\"gb-inside-container\">\n\n<p><strong>Title One<\/strong><br>Aliquam scelerisque, nisl vel efficitur blandit, tellus massa pretium quam, ut tristique mauris<\/p>\n\n\n\n<p>For example, if the College of Health Aliquam scelerisque, nisl vel efficitur blandit, tellus massa pretium quam, ut tristique mauris.Aliquam scelerisque, nisl vel efficitur blandit, tellus massa pretium quam, ut tristique mauris<\/p>\n\n<\/div><\/div>\n<\/div><\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-507a854f\"><div class=\"gb-container gb-container-507a854f\"><div class=\"gb-inside-container\">\n<div class=\"gb-container gb-container-229a767d\"><div class=\"gb-inside-container\">\n\n<h4 class=\"gb-headline gb-headline-96a50d82 gb-headline-text\">Subheading Two<\/h4>\n\n<\/div><\/div>\n\n<div class=\"gb-container gb-container-ae453dc0\"><div class=\"gb-inside-container\">\n\n<p><strong>Title Two<\/strong><br>Aliquam scelerisque, nisl vel efficitur blandit, tellus massa pretium quam, ut tristique mauris<\/p>\n\n\n\n<p>Aliquam scelerisque, nisl vel efficitur blandit, tellus massa pretium quam, ut tristique mauris.  Aliquam scelerisque, nisl vel efficitur blandit, tellus massa pretium quam, ut  tellus massa pretium tristique mauris.  <\/p>\n\n<\/div><\/div>\n<\/div><\/div><\/div>\n<\/div>\n<\/div><\/div><\/div>\n\n\n\n<h2 class=\"gb-headline gb-headline-ec058297 gb-headline-text\">Additional Resources<\/h2>\n\n\n\n<p><strong>Official Group Block Documentation<\/strong><br><a href=\"https:\/\/wordpress.org\/documentation\/article\/group-block\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">https:\/\/wordpress.org\/documentation\/article\/group-block\/ <\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Group Block in the Gutenberg editor is used to group multiple blocks into a single container, allowing content managers to treat multiple blocks as a single entity. So learning to use the group block will pay dividends in creating more complex layouts and designs and organizing content into sections or group-related elements. This post &#8230; <a title=\"How to Use the Group Block\" class=\"read-more\" href=\"https:\/\/test-inside.ewu.edu\/mchildress\/how-to-use-the-group-block\/\" aria-label=\"Read more about How to Use the Group Block\"> <\/a><\/p>\n","protected":false},"author":6,"featured_media":5595,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"wpo365_audiences":[],"wpo365_private":false,"footnotes":""},"categories":[10],"tags":[19],"class_list":["post-5371","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-group-block"],"acf":[],"_links":{"self":[{"href":"https:\/\/test-inside.ewu.edu\/mchildress\/wp-json\/wp\/v2\/posts\/5371"}],"collection":[{"href":"https:\/\/test-inside.ewu.edu\/mchildress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/test-inside.ewu.edu\/mchildress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/test-inside.ewu.edu\/mchildress\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/test-inside.ewu.edu\/mchildress\/wp-json\/wp\/v2\/comments?post=5371"}],"version-history":[{"count":25,"href":"https:\/\/test-inside.ewu.edu\/mchildress\/wp-json\/wp\/v2\/posts\/5371\/revisions"}],"predecessor-version":[{"id":35482,"href":"https:\/\/test-inside.ewu.edu\/mchildress\/wp-json\/wp\/v2\/posts\/5371\/revisions\/35482"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/test-inside.ewu.edu\/mchildress\/wp-json\/wp\/v2\/media\/5595"}],"wp:attachment":[{"href":"https:\/\/test-inside.ewu.edu\/mchildress\/wp-json\/wp\/v2\/media?parent=5371"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/test-inside.ewu.edu\/mchildress\/wp-json\/wp\/v2\/categories?post=5371"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/test-inside.ewu.edu\/mchildress\/wp-json\/wp\/v2\/tags?post=5371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}