{"id":16241365,"date":"2022-11-28T17:28:53","date_gmt":"2022-11-28T17:28:53","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&#038;p=16241365"},"modified":"2026-05-25T07:01:39","modified_gmt":"2026-05-25T07:01:39","slug":"stack-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/stack-block\/","title":{"rendered":"Stack 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\"><em>Stack<\/em> block is one of the container blocks that can be used to nest other blocks vertically.&nbsp;As a container block, it&#8217;s possible to transform a <em>Stack <\/em>block into a <em>Group<\/em> or <em>Row <\/em>block without changing the content of the block.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"900\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/05\/stack.png\" alt=\"Stack block on the editor\" class=\"wp-image-16357046\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/05\/stack.png 1600w, https:\/\/wordpress.org\/documentation\/files\/2023\/05\/stack-300x169.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/05\/stack-1024x576.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/05\/stack-768x432.png 768w, https:\/\/wordpress.org\/documentation\/files\/2023\/05\/stack-1536x864.png 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Click the block inserter <strong>(+)<\/strong> icon to open the block inserter pop-up window and search for the <em>Stack <\/em>block.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1426\" height=\"682\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/05\/stack-block.gif\" alt=\"Adding and using a stack block\" class=\"wp-image-16357044\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can also use the keyboard shortcut <kbd>\/stack-block<\/kbd> to quickly insert a <em>Stack <\/em>block.<\/p>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\">Detailed instructions on adding blocks can be found <a href=\"https:\/\/wordpress.org\/documentation\/article\/adding-a-new-block\/\">here<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Block Toolbar<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To view the block toolbar, click on the block, and the toolbar will be displayed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Every block comes with unique toolbar icons. These block-specific controls allow you to manipulate the block right in the editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Stack block shows the following buttons in the block toolbar:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"118\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/05\/image-41.png\" alt=\"Stack block toolbar\" class=\"wp-image-16357048\" style=\"width:435px;height:89px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/05\/image-41.png 580w, https:\/\/wordpress.org\/documentation\/files\/2023\/05\/image-41-300x61.png 300w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Transform to<\/li>\n\n\n\n<li>Moving handles<\/li>\n\n\n\n<li>Change items justification<\/li>\n\n\n\n<li>Change vertical alignment<\/li>\n\n\n\n<li>Align<\/li>\n\n\n\n<li>Options<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Transform to<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1042\" height=\"564\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/05\/image-43.png\" alt=\"Stack block transform options\" class=\"wp-image-16357050\" style=\"width:521px;height:282px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/05\/image-43.png 1042w, https:\/\/wordpress.org\/documentation\/files\/2023\/05\/image-43-300x162.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/05\/image-43-1024x554.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/05\/image-43-768x416.png 768w\" sizes=\"auto, (max-width: 1042px) 100vw, 1042px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Click on the \u201cTransform\u201d button to convert the <em>Stack<\/em> block into \u201cQuote\u201d, \u201cColumns\u201d, or \u201cCover\u201d blocks. It\u2019s also possible to unwrap the <em>Stack<\/em> block.&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Moving handles<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The dotted icons can be used to drag and drop a block to the place of your choosing. The up and down arrow icons can be used to shift a block up and down in your document.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"596\" height=\"112\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/05\/image-42.png\" alt=\"Block moving handles\" class=\"wp-image-16357049\" style=\"width:447px;height:84px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/05\/image-42.png 596w, https:\/\/wordpress.org\/documentation\/files\/2023\/05\/image-42-300x56.png 300w\" sizes=\"auto, (max-width: 596px) 100vw, 596px\" \/><\/figure>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/moving-blocks\/\">Get more information about moving a block within the editor.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Change items justification&nbsp;<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1040\" height=\"462\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/05\/image-44.png\" alt=\"Justification settings for stack block\" class=\"wp-image-16357052\" style=\"width:520px;height:231px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/05\/image-44.png 1040w, https:\/\/wordpress.org\/documentation\/files\/2023\/05\/image-44-300x133.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/05\/image-44-1024x455.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/05\/image-44-768x341.png 768w\" sizes=\"auto, (max-width: 1040px) 100vw, 1040px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Click the \u201cChange items justification\u201d button in the Block toolbar to display the justification drop-down. You can justify the block text to the left, make it center-justified, align it to the right, or stretch it.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Change vertical alignment<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1018\" height=\"466\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/05\/image-45.png\" alt=\"Vertical alignment settings for stack block\" class=\"wp-image-16357053\" style=\"width:509px;height:233px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/05\/image-45.png 1018w, https:\/\/wordpress.org\/documentation\/files\/2023\/05\/image-45-300x137.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/05\/image-45-768x352.png 768w\" sizes=\"auto, (max-width: 1018px) 100vw, 1018px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Align top \u2013 <\/strong>Make the block vertically aligned top<strong>.<\/strong><\/li>\n\n\n\n<li><strong>Align middle \u2013 <\/strong>Make the block vertically aligned middle<strong>.<\/strong><\/li>\n\n\n\n<li><strong>Align bottom \u2013 <\/strong>Make the block vertically aligned bottom<strong>.<\/strong><\/li>\n\n\n\n<li><strong>Space between <\/strong>\u2013<strong> <\/strong>Leave a space between blocks. Remember that this option is only available for the parent <em>Stack <\/em>block.&nbsp;<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Align<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1022\" height=\"414\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/05\/width-sttings.png\" alt=\"Alignment settings for stack block\" class=\"wp-image-16357068\" style=\"width:511px;height:207px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/05\/width-sttings.png 1022w, https:\/\/wordpress.org\/documentation\/files\/2023\/05\/width-sttings-300x122.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/05\/width-sttings-768x311.png 768w\" sizes=\"auto, (max-width: 1022px) 100vw, 1022px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Use the change alignment tool to change the width of the <em>Stack <\/em>block. The following is a list of the block width options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>None<\/li>\n\n\n\n<li>Wide width<\/li>\n\n\n\n<li>Full width<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Options<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Options button on a block toolbar gives you more features to customize the block.&nbsp;<\/p>\n\n\n\n<p class=\"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\">Block settings<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The block settings panel contains customization options specific to the block. To open it, select the block and click the cog icon next to the Publish button.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"646\" height=\"102\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/05\/block-settings-icon.png\" alt=\"Block settings icon on the editor\" class=\"wp-image-16357054\" style=\"width:485px;height:77px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/05\/block-settings-icon.png 646w, https:\/\/wordpress.org\/documentation\/files\/2023\/05\/block-settings-icon-300x47.png 300w\" sizes=\"auto, (max-width: 646px) 100vw, 646px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Here are the options for the <strong>Stack<\/strong> block:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Settings<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Click <strong>Group<\/strong> or <strong>Row<\/strong> button in the Block Settings to transform the <em>Stack <\/em>block to <em>Group <\/em>or <em>Row <\/em>blocks.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><a href=\"https:\/\/wordpress.org\/documentation\/files\/2023\/05\/stack-settings.png\"><img loading=\"lazy\" decoding=\"async\" width=\"506\" height=\"234\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/05\/stack-settings.png\" alt=\"Stack block settings to transform to row or group\" class=\"wp-image-16357062\" style=\"width:380px;height:176px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/05\/stack-settings.png 506w, https:\/\/wordpress.org\/documentation\/files\/2023\/05\/stack-settings-300x139.png 300w\" sizes=\"auto, (max-width: 506px) 100vw, 506px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Layout<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <em>Stack <\/em>block<em> <\/em>provides Layout settings options to change the justification or orientation of the text and to wrap to multiple lines.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"333\" height=\"147\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/05\/layout.png\" alt=\"Layout settings on the stack block settings panel\" class=\"wp-image-16357057\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/05\/layout.png 333w, https:\/\/wordpress.org\/documentation\/files\/2023\/05\/layout-300x132.png 300w\" sizes=\"auto, (max-width: 333px) 100vw, 333px\" \/><\/figure>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\">For details, refer to this support article: <a href=\"https:\/\/wordpress.org\/documentation\/article\/layout-settings-overview\/\">Layout settings overview<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Position<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The position setting is only available when the <em>Stack<\/em> block is located at the root-level. The drop-down menu has two options: <strong>Default<\/strong> and <strong>Sticky<\/strong>. If the Sticky option is selected, the <em>Stack<\/em> block will remain at the top of the window when you scroll down the page.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"337\" height=\"304\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/05\/position.png\" alt=\"The position settings for stack block\" class=\"wp-image-16357058\" style=\"width:311px;height:280px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/05\/position.png 337w, https:\/\/wordpress.org\/documentation\/files\/2023\/05\/position-300x271.png 300w\" sizes=\"auto, (max-width: 337px) 100vw, 337px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Color<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <em>Stack <\/em>block<em> <\/em>provides Color settings options to change the text, background, and link colors.<\/p>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\">For details, refer to this support article: <a href=\"https:\/\/wordpress.org\/documentation\/article\/colors-settings-overview\/\">Color settings overview<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Typography<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <em>Stack <\/em>block<em> <\/em>provides typography settings to change the font family, appearance, line height, letter spacing, decoration, letter case, and font size.<\/p>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\">For details, refer to this support article: <a href=\"https:\/\/wordpress.org\/documentation\/article\/typography-settings-overview\/\">Typography settings overview<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Dimensions<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <em>Stack <\/em>block provides dimension settings options to add padding, margin, and block spacing.<\/p>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\">For details, refer to this support article: <a href=\"https:\/\/wordpress.org\/documentation\/article\/dimension-controls-overview\/\">Dimension settings overview<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Border<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <em>Stack <\/em>block provides border settings options to add border color, width, and radius.<\/p>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\">For details refer to this support article: <a href=\"https:\/\/wordpress.org\/documentation\/article\/border-settings-overview\/\">Border settings overview<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Advanced<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Stack 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-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 id=\"changelog\" class=\"wp-block-group changelog has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"background-color:#dce5ec\">\n<h2 class=\"wp-block-heading has-medium-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-05-23\n<ul class=\"wp-block-list\">\n<li>Updated screenshots and content for 6.2<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Created 2022-11-28<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Go back to the list of Blocks Stack block is one of the container blocks that can be used to nest other blocks vertically.&nbsp;As a container block, it&#8217;s possible to transform a Stack block into a Group or Row block without changing the content of the block. Click the block inserter (+) icon to open [&hellip;]<\/p>\n","protected":false},"author":14322318,"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-16241365","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\/16241365","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"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/users\/14322318"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=16241365"}],"version-history":[{"count":9,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16241365\/revisions"}],"predecessor-version":[{"id":16368476,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16241365\/revisions\/16368476"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=16241365"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=16241365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}