Stack Block: set block to fill vertical height

[davewhitley]

What problem does this address?

It is currently difficult to set a Stack block so that it fills the vertical height of its container. This is a common flexbox feature that should be easier to access in the WordPress editor.

Technically, it's possible by setting the Stack block to 100% minimum height in the style settings, but this is unintuitive, hidden, and assumes knowledge of CSS concepts.

Basically, I think there should be an easier way to set the Stack to align-self: stretch;, without the need to change the min height.

What is your proposed solution?

In Figma, you simply select the "stack" and set the height to "fill container". Set the spacing to "auto" to set the items to justify-content: space-between. If you look at the code, the "stack" is set to align-self: stretch;

I propose we add a control to the settings panel or alongside the other alignment controls so that you can easily set the Stack block to fill vertical height.

You can use this block markup to test:

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":8,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="http://localhost:8890/wp-content/uploads/2025/07/drw158_A_black_and_white_collage_of_plants_on_a_purple_backgrou_1d83faa1-9980-41a4-8ea2-8ef6b83920c6-683x1024.png" alt="" class="wp-image-8"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"dimensions":{"minHeight":"100%"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"left"}} -->
<div class="wp-block-group" style="min-height:100%"><!-- wp:paragraph -->
<p>Top text</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Bottom text</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

[davewhitley]

Related PR #47134

[davewhitley]

When I change the vertical alignment on the Stack block, I expect it to have an effect on its children, but these controls appear to do nothing. (align top, align middle, space between, etc)

[t-hamano]

This is a little confusing, but it's because the Stack block inside the Column block does not match the height of the parent Column block. If you set the minimum height of the Stack block to 100%, it will be positioned correctly.

<!-- wp:columns {"verticalAlignment":null} -->
<div class="wp-block-columns">
  <!-- wp:column -->
  <div class="wp-block-column">
    <!-- wp:image {"sizeSlug":"large"} -->
    <figure class="wp-block-image size-large"><img src="https://placehold.co/300x500/EEE/31343C" alt=""/></figure>
    <!-- /wp:image -->
  </div>
  <!-- /wp:column -->
  <!-- wp:column {"verticalAlignment":"stretch"} -->
  <div class="wp-block-column is-vertically-aligned-stretch">
    <!-- wp:group {"style":{"dimensions":{"minHeight":"100%"}},"layout":{"type":"flex","orientation":"vertical","verticalAlignment":"space-between","flexWrap":"nowrap"}} -->
    <div class="wp-block-group" style="min-height:100%">
      <!-- wp:paragraph {"backgroundColor":"accent-1"} -->
      <p class="has-accent-1-background-color has-background">Paragraph Block</p>
      <!-- /wp:paragraph -->
      <!-- wp:paragraph {"backgroundColor":"accent-1"} -->
      <p class="has-accent-1-background-color has-background">Paragraph Block</p>
      <!-- /wp:paragraph -->
    </div>
    <!-- /wp:group -->
  </div>
  <!-- /wp:column -->
</div>
<!-- /wp:columns -->

[hanneslsm]

This is a little confusing, but it's because the Stack block inside the Column block does not match the height of the parent Column block.

That's basically the argument for a boundary mode: #66576

If you set the minimum height of the Stack block to 100%, it will be positioned correctly.

I wonder if it's an option that when Space Between gets selected, automatically the min-height of the parent block will be set to 100%?

[davewhitley]

This is a little confusing, but it's because the Stack block inside the Column block does not match the height of the parent Column block. If you set the minimum height of the Stack block to 100%, it will be positioned correctly.

Can we do this in a way that is easier to understand? That's the crux of my issue:

Technically, it's possible by setting the Stack block to 100% minimum height in the style settings, but this is unintuitive, hidden, and assumes knowledge of CSS concepts. Basically, I think there should be an easier way to set the Stack to align-self: stretch;, without the need to change the min height.

Idea: somewhere in the justification/alignment controls, there should be a "fill height" icon/button. This would effectively stretch the height of the Stack to 100% of the Column.

[t-hamano]

The fundamental problem is that the Column block is not a flex block, which means it's effectively the same as the Group block.

Because it's not a flex layout in the first place, it's impossible to provide options for positioning its children, such as align-items and justify-content.

A first step might be to make the Column block a flex block like the Stack block, but that might cause backward compatibility issues.

[t-hamano]

One approach might be to add a block variation called "Stack Column" to the Column block.

Code Example

diff --git a/packages/block-library/src/column/block.json b/packages/block-library/src/column/block.json
index 33bd528b35..3ca3ddf143 100644
--- a/packages/block-library/src/column/block.json
+++ b/packages/block-library/src/column/block.json
@@ -71,7 +71,10 @@
                                "fontSize": true
                        }
                },
-               "layout": true,
+               "layout": {
+                       "orientation": "vertical",
+                       "allowOrientation": false
+               },
                "interactivity": {
                        "clientNavigation": true
                }
diff --git a/packages/block-library/src/column/index.js b/packages/block-library/src/column/index.js
index 687b8c180b..80c47cd113 100644
--- a/packages/block-library/src/column/index.js
+++ b/packages/block-library/src/column/index.js
@@ -11,6 +11,7 @@ import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
+import variations from './variations';
 
 const { name } = metadata;
 
@@ -21,6 +22,7 @@ export const settings = {
        edit,
        save,
        deprecated,
+       variations,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/column/variations.js b/packages/block-library/src/column/variations.js
new file mode 100644
index 0000000000..1e8f46ba85
--- /dev/null
+++ b/packages/block-library/src/column/variations.js
@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { column, stack } from '@wordpress/icons';
+
+const variations = [
+       {
+               name: 'column',
+               title: __( 'Column' ),
+               description: __( 'A single column within a columns block.' ),
+               attributes: { layout: { type: 'constrained' } },
+               isDefault: true,
+               scope: [ 'block', 'inserter', 'transform' ],
+               isActive: ( blockAttributes ) =>
+                       ! blockAttributes.layout ||
+                       ! blockAttributes.layout?.type ||
+                       blockAttributes.layout?.type === 'default' ||
+                       blockAttributes.layout?.type === 'constrained',
+               icon: column,
+       },
+       {
+               name: 'column-stack',
+               title: __( 'Stack Column' ),
+               description: __( 'A stack single column within a columns block.' ),
+               attributes: { layout: { type: 'flex', orientation: 'vertical' } },
+               scope: [ 'transform' ],
+               isActive: ( blockAttributes ) =>
+                       blockAttributes.layout?.type === 'flex' &&
+                       blockAttributes.layout?.orientation === 'vertical',
+               icon: stack,
+       },
+];
+
+export default variations;

@tellthemachines @andrewserong To allow for more flexible positioning of blocks within the Column block, the Column block itself may need a flex layout option. What do you think about adding a flex as a variation in addition to a constrained layout to the Column block?

[Drivingralle]

I have the feeling the stack block should always be height 100% to make the vertical alignment options work out of the box for regular users. As @davewhitley describes the options appear to be broken for users.

I like the idea to enhance the column block to remove the need to add an stack into a column to get the intended layout.
It prevents hard to teach steps and excessive nesting.

Guess stack and column need to make it simpler to get the layout.