Widths of Row/Stack inside of a Stack in Gutenberg Editor

[posimyththemes]

It would be very helpful for us if there is an option in the Gutenberg Editor to set custom Width of Row/Stack inside of a Stack. Currently we can set width of blocks inside of a Row, but we can only set Height of Blocks inside of a Stack. It will be really good to have an option to set Width of the Blocks inside of a Stack also. Infact it will be a good option to have to all blocks to set it’s dimensions irrelevant of where they are being used.

I have attached two screenshots showing that we can only set height of blocks inside of Stacks.

[priethor]

Hi @posimyththemes, thanks for reporting!

Would you mind sharing an example use case for setting the height in rows and width in stacks' inner blocks? The rationale behind the current implementation is to allow setting how much space each of the inner blocks on the axis where the blocks are aligned, so I'm struggling to see how the height of different blocks within a row would play together.

Once I have a bit more context, I'm happy to move the conversation "upstream" to the Gutenberg repository, where further discussion and development will take place. 🙂

[sagarpatel124]

Hi @priethor

There are certain cases where having an option to set height in rows and width in stacks’ inner blocks would be really helpful.
Like the 2 wireframes & 2 corresponding cases I have attached below.

• For the Width-in-Stack-inner-blocks-layout & example
  • It would make it a lot easier to build that layout by assigning needed width to the children of the Row
• The similar can be observed for Height-in-Row-inner-blocks-layout & example

There are more layouts like these which can certainly use an option to set height in rows and width in stacks’ inner blocks.

Width-in-Stack-inner-blocks-layout & Example: ​https://www.figma.com/design/KTDCy4t2SkamT7bmugs7kQ/Gutenberg-Rows-%26-Columns-Dimensions?node-id=1-393&t=WpsHgLiBzJN6ZABG-11

Height-in-Row-inner-blocks-layout & Example: ​https://www.figma.com/design/KTDCy4t2SkamT7bmugs7kQ/Gutenberg-Rows-%26-Columns-Dimensions?node-id=1-727&t=WpsHgLiBzJN6ZABG-11

[priethor]

Thanks for the mockups, @sagarpatel124; this is very helpful!

While I am not against adding those new settings, I think there are more "natural" ways to achieve these layouts, such as:

• Within a row, adding a spacer block to the left, a group block, and another spacer block on the right.
• Using the grid layout block.

The grid block, in particular, is still in its early phases, but it seems like the best way to achieve this kind of layout moving forward. Have you considered or tried that approach instead? Feedback about the grid block would be very much appreciated, too!