Flexbox and auto margins layout

[danieldudzic]

What problem does this address?

I am trying to add a few patterns to the WooCommerce Blocks Product Query block and realized there's currently no good layout solution for the following layout:

I was trying to achieve the following layout using core blocks:

Since the product image will have a variable height (which will determine the height of the container), achieving the desired Price product element position is currently not possible without custom code.

What is your proposed solution?

It would be useful if:

• There was a straightforward way to tweak flexbox behavior of blocks (on per block level, if the parent is using flexbox)
• The margin block setting would support the auto value

Related issue: #45868

[tellthemachines]

With #45364 it's now possible to set width/height on children of (Row/Stack) flex containers, with a fill option that essentially adds flex-grow: 1 to the block, which behaves the same as margin: auto in this context.

In theory, it should be possible to recreate the layout above by creating a Row block with an Image block and a Stack block (with the product info) inside it, then setting the height (under Dimensions) of the "Product title" block to "fill".

The problem is that the Row block has an align-items: center set on it by default, which makes the Stack block inside it not take up full height, so the flex-grow inside it doesn't work.

I'm inclined to label this as a bug; I know the flex-layout has always had a default align-items set on it but am unsure if there's any good reason for that. The risk of removing it is, of course, that existing layouts may depend on it, so it's not clear what the best solution may be.

[tellthemachines]

Just thinking we might be able to work around this once we add alignment controls to Row as per #35849, as long as we add a stretch option. It's not super intuitive but might be our best option for not breaking back compat 🤔

[tellthemachines]

With #47134 merged, we can now recreate this layout by:

• Adding a Row block with an Image block and a Stack block (with the product info) inside it;
• Setting the vertical alignment on the Row block to stretch ;
• Setting the setting the height (under Dimensions) of the "Product title" block to "fill".

I'm going to go ahead and close this issue for now; feel free to reopen if anything doesn't work as expected!