{"id":13426347,"date":"2020-09-21T21:57:18","date_gmt":"2020-09-21T21:57:18","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&#038;p=13426347"},"modified":"2026-05-25T06:55:14","modified_gmt":"2026-05-25T06:55:14","slug":"group-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/group-block\/","title":{"rendered":"Group block"},"content":{"rendered":"\n<p class=\"has-text-align-right has-small-font-size wp-block-paragraph\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/blocks\/\">Go back to the list of <strong>Blocks<\/strong><\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The <em>Group block<\/em> allows you to group different blocks together and customize them to your liking, including setting custom background colors, spacing, and more. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"588\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/09\/group_block_layout_with_columns-1024x588.png\" alt=\"Group block with columns, heading, paragraph, image and button blocks.\" class=\"wp-image-13426355\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/09\/group_block_layout_with_columns-1024x588.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2020\/09\/group_block_layout_with_columns-300x172.png 300w, https:\/\/wordpress.org\/documentation\/files\/2020\/09\/group_block_layout_with_columns-768x441.png 768w, https:\/\/wordpress.org\/documentation\/files\/2020\/09\/group_block_layout_with_columns-1536x883.png 1536w, https:\/\/wordpress.org\/documentation\/files\/2020\/09\/group_block_layout_with_columns.png 1918w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Example of a Group block with columns, heading, paragraph, image and button blocks.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Adding a Group block<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To add a <em>Group block<\/em>, click on the <strong>Block Inserter<\/strong> icon.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"677\" height=\"375\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/09\/group_block_block_inserter.png\" alt=\"Adding the group block to a post or page\" class=\"wp-image-13426350\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/09\/group_block_block_inserter.png 677w, https:\/\/wordpress.org\/documentation\/files\/2020\/09\/group_block_block_inserter-300x166.png 300w\" sizes=\"auto, (max-width: 677px) 100vw, 677px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can also type <code>\/group<\/code> and hit enter in a new paragraph block to add one quickly. <strong>Row and Stack are also types of Group blocks<\/strong>, they just have a different layout style by default.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"620\" height=\"472\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-add.png\" alt=\"Inserting a new group block using the slash keyboard command (\/)\" class=\"wp-image-16356356\" style=\"width:442px;height:336px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-add.png 620w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-add-300x228.png 300w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Block variations<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">When the <em>Group block<\/em> is created, you will find different variations to choose from: <em>Group, Row, <\/em>and <em>Stack<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"328\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-settings-variation-1024x328.png\" alt=\"Group variation picker\" class=\"wp-image-16356354\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-settings-variation-1024x328.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-settings-variation-300x96.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-settings-variation-768x246.png 768w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-settings-variation.png 1374w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Converting multiple blocks to a Group block<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You can also create a group by selecting multiple blocks. Multiple blocks can be selected by dragging your mouse. You can also select multiple blocks by holding down the &#8220;shift&#8221; key and using your navigation arrows or clicking on multiple blocks. Once one or more blocks have been selected, you will notice that the group icons will appear. You can click on these icons or use the &#8220;more options&#8221; button to convert them into a single group, as seen in the video below: <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1084\" style=\"aspect-ratio: 1374 \/ 1084;\" width=\"1374\" controls src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-convert-to-group-1.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/adding-a-new-block\/\">Detailed instructions on adding blocks<\/a><\/p>\n\n\n\n<h2 id=\"block-toolbar\" class=\"wp-block-heading\">Block toolbar<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Most blocks have their own block-specific controls that allow you to manipulate the block right in the editor. The <em>Group block<\/em> offers standard block options as well as full-width and wide-width options, if the theme supports these alignment styles.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The <em>Group block<\/em> shows three buttons in addition to the \u201cGroup\u201d block icon.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Moving handles<\/li>\n\n\n\n<li>Change alignment<\/li>\n\n\n\n<li>More options<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Moving handles<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"786\" height=\"282\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-move.png\" alt=\"Moving handles\" class=\"wp-image-16356358\" style=\"width:386px;height:139px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-move.png 786w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-move-300x108.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-move-768x276.png 768w\" sizes=\"auto, (max-width: 786px) 100vw, 786px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The up and down arrow icons can be used to shift a block up and down in your document.<\/p>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\">Detailed instructions on moving a block within the editor can be found <a href=\"https:\/\/wordpress.org\/documentation\/article\/moving-blocks\/\">here<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Change alignment<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"400\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-alignment-1024x400.png\" alt=\"Group block alignment\" class=\"wp-image-16356359\" style=\"width:632px;height:245px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-alignment-1024x400.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-alignment-300x117.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-alignment-768x300.png 768w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-alignment.png 1382w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>None &#8211;<\/strong> Is the default width, the same as the main content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Wide width<\/strong> \u2013 Increase the width of the post beyond the content size.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Full width<\/strong> \u2013 Extend the block to cover the full width of the screen, if supported by your site\u2019s theme.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">More options <\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">These controls give you the option to copy, duplicate, and edit your block as HTML.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/more-options\/\">Read about these and other settings.<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Editing the block<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The nice thing about the <em>Group block<\/em> is that you can add any other blocks inside the group block and create a layout of your own. To add blocks to the <em>Group block<\/em>, click on the inserter icon inside the <em>Group block<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"434\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-add-block-1024x434.png\" alt=\"Adding a new block inside an existing group block\" class=\"wp-image-16356364\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-add-block-1024x434.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-add-block-300x127.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-add-block-768x325.png 768w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-add-block.png 1506w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Adding content<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Inside the Group block, you can add a columns block, cover block or any other available block to create the layout of your choice.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"588\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/09\/group_block_layout_with_columns-1024x588.png\" alt=\"Adding content to the group block\" class=\"wp-image-13426355\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/09\/group_block_layout_with_columns-1024x588.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2020\/09\/group_block_layout_with_columns-300x172.png 300w, https:\/\/wordpress.org\/documentation\/files\/2020\/09\/group_block_layout_with_columns-768x441.png 768w, https:\/\/wordpress.org\/documentation\/files\/2020\/09\/group_block_layout_with_columns-1536x883.png 1536w, https:\/\/wordpress.org\/documentation\/files\/2020\/09\/group_block_layout_with_columns.png 1918w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The group block shown here has columns, heading, paragraph, image and button blocks.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Note that since the <em>Group block<\/em> has the ability to embed other blocks, if you click specifically on one of the blocks, the settings in the sidebar will change according to the block you added to the <em>Group block<\/em>. For example, if you added an image inside the <em>Group block<\/em>, when you click on the image the sidebar will display the options from the Image block settings.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"566\" height=\"612\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-settings-icon.png\" alt=\"Block settings and styles\" class=\"wp-image-16356352\" style=\"aspect-ratio:0.9248407643312102;width:280px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-settings-icon.png 566w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-settings-icon-277x300.png 277w\" sizes=\"auto, (max-width: 566px) 100vw, 566px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, simply click the &#8216;<strong>Settings<\/strong>&#8216; icon next to the Publish\/Update button<em>.<\/em> Within the <em>Group block<\/em> settings, you will see two tabs, one is for <strong>general settings<\/strong> and the other one is for <strong>styles<\/strong>.<\/p>\n\n\n\n<h2 id=\"block-settings\" class=\"wp-block-heading\">Group block settings<\/h2>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"542\" height=\"1014\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-settings-layout.png\" alt=\"Group Block Settings Sidebar\" class=\"wp-image-16356366\" style=\"aspect-ratio:0.534521158129176;width:236px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-settings-layout.png 542w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-settings-layout-160x300.png 160w\" sizes=\"auto, (max-width: 542px) 100vw, 542px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Alignment<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">There are three alignment options for the <em>Group block<\/em>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Default<\/li>\n\n\n\n<li>Row (Horizontal)<\/li>\n\n\n\n<li>Stack (Vertical) <\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group alignwide is-layout-constrained wp-block-group-is-layout-constrained\">\n<figure class=\"wp-block-gallery alignwide has-nested-images columns-default wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"552\" height=\"290\" data-id=\"16356379\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-group.png\" alt=\"Group Block Settings\" class=\"wp-image-16356379\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-group.png 552w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-group-300x158.png 300w\" sizes=\"auto, (max-width: 552px) 100vw, 552px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"560\" height=\"278\" data-id=\"16356381\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-row-1.png\" alt=\"Group Block Settings (row)\" class=\"wp-image-16356381\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-row-1.png 560w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-row-1-300x149.png 300w\" sizes=\"auto, (max-width: 560px) 100vw, 560px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"546\" height=\"288\" data-id=\"16356380\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-stack.png\" alt=\"Group Block Settings (stack)\" class=\"wp-image-16356380\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-stack.png 546w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-stack-300x158.png 300w\" sizes=\"auto, (max-width: 546px) 100vw, 546px\" \/><\/figure>\n<\/figure>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">If you set a block to &#8220;Row&#8221;, you will see a number of new options to justify the items inside the row:<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"376\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-row-justify-1024x376.png\" alt=\"horizontal alignment icons\" class=\"wp-image-16356382\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-row-justify-1024x376.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-row-justify-300x110.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-row-justify-768x282.png 768w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-row-justify-1536x564.png 1536w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-row-justify.png 1960w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Items can be set to justify left, center, right or &#8220;space between items&#8221;. This last option will distribute the items inside the row to use all the available width. Additionally, by changing the &#8220;orientation&#8221; setting, you can have your items change from flowing horizontally to flowing vertically, as illustrated in the video below.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"718\" style=\"aspect-ratio: 2148 \/ 718;\" width=\"2148\" controls src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-row-justify-demo-2-1.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">There is a second alignment option to specify how items should align vertically. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"635\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-row-vertical-alignment-1-1024x635.png\" alt=\"Vertical alignment icons\" class=\"wp-image-16356392\" style=\"width:450px;height:278px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-row-vertical-alignment-1-1024x635.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-row-vertical-alignment-1-300x186.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-row-vertical-alignment-1-768x476.png 768w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-row-vertical-alignment-1.png 1338w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This is useful when the items inside the row have different heights, as seen in the example below:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"902\" style=\"aspect-ratio: 1366 \/ 902;\" width=\"1366\" controls src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-row-vertical-alignment-demo.mp4\"><\/video><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Layout and content width<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This is an advanced option that allows you to add custom content widths to the overall <em>Group block<\/em> for all blocks assigned to the center or wide columns. In many cases, you won&#8217;t need to use this option. When you toggle this option on, it allows the <em>Group block<\/em> to inherit the options set by your theme. When it&#8217;s toggled off, you can customize to your liking. <\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/layout-settings-overview\/\">This article provides details about layout settings.<\/a>&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Position (sticky)<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"556\" height=\"570\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-settings-sticky.png\" alt=\"Position: Sticky\" class=\"wp-image-16356394\" style=\"aspect-ratio:0.9754918418048748;width:301px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-settings-sticky.png 556w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-settings-sticky-293x300.png 293w\" sizes=\"auto, (max-width: 556px) 100vw, 556px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The &#8220;Position&#8221; group setting allows you make a group block stick to the top of the viewport instead of scrolling, as seen in the demo below:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1360\" style=\"aspect-ratio: 1908 \/ 1360;\" width=\"1908\" controls src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/group-block-settings-sticky-demo-1.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Please note that <strong>only &#8220;top level&#8221; Group blocks can be set as sticky<\/strong>. If a Group block is embedded inside any other block, the &#8220;Position&#8221; setting will not be available in the settings.  <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Advanced<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Group block provides the following Advanced settings options: HTML Anchor, Additional CSS Class(es), HTML Element, Styles, and Allowed blocks.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/advanced-settings-overview\/\">Learn more about advanced settings<\/a><\/p>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 id=\"block-settings\" class=\"wp-block-heading\">Group block styles<\/h2>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Color<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">When the group block is selected, you can see the color settings in the sidebar. You can select the text, background, and link colors to your liking. <\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/colors-settings-overview\/\">See this guide for more information about changing colors.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Border<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This option allows you to set a border around the Group block, including the color, the width, radius, and the style of the border. <\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/border-settings-overview\/\">Learn more about border settings.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Dimensions<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The option to control block spacing and padding is enabled for the Group block. You can read more about these settings in the&nbsp;<\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/dimension-controls-overview\/\">Learn more about dimension controls.<\/a><\/p>\n\n\n\n<div class=\"wp-block-group changelog has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"background-color:#e0e0e0\">\n<h2 id=\"changelog\" class=\"wp-block-heading has-extra-large-font-size\">Changelog <\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Updated 2026-05-25 (props @kjoyner @awetz583)\n<ul class=\"wp-block-list\">\n<li>Updated &#8220;Advanced&#8221; section to refer to new overview page<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2023-11-21\n<ul class=\"wp-block-list\">\n<li>Capitalization of headings to sentence case<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2023-04-04\n<ul class=\"wp-block-list\">\n<li>Added link to the list of blocks<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2023-03-29\n<ul class=\"wp-block-list\">\n<li>Updated to reflect the 6.2 changes <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2022-11-25\n<ul class=\"wp-block-list\">\n<li>Removed redundant content <\/li>\n\n\n\n<li>Added alt text to the some images <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated to include Dimension controls for WP 5.9 2022-01-17<\/li>\n\n\n\n<li>Updated with new images for WP 5.6 2020-11-27<\/li>\n\n\n\n<li>Created 2020-09-21<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Go back to the list of Blocks The Group block allows you to group different blocks together and customize them to your liking, including setting custom background colors, spacing, and more. Adding a Group block To add a Group block, click on the Block Inserter icon. You can also type \/group and hit enter in [&hellip;]<\/p>\n","protected":false},"author":5735912,"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false},"category":[80,88],"class_list":["post-13426347","helphub_article","type-helphub_article","status-publish","hentry","category-customization","category-design-blocks"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/13426347","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=13426347"}],"version-history":[{"count":51,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/13426347\/revisions"}],"predecessor-version":[{"id":16368471,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/13426347\/revisions\/16368471"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wporg\/v1\/users\/cguntur"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=13426347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=13426347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}