Layout: fix flex direction column

[matiasbenedetto]

Fixes: #42938

What?

Fixing stacked (column/vertical) orientation of the row block.

Why?

The row element with stack orientation doesn't work since #42452 was merged.
Currently, the CSS related to the flex-direction is not rendered in the frontend.

How?

This PR fixes the styles engine to render the CSS to the flex-direction in the frontend.

Testing Instructions

• Add a Row element
• Add two paragraphs inside the row element
• Select stack orientation in the row element
• Save the post and verify in the frontend that the elements are not vertically stacked.

Screenshots or screencast

Before:

After:

Fixes: #42938

[ramonjd]

Thanks for catching that one. Must have slipped past us 😄

[ramonjd]

Not sure, but should the align-items prop also come across?

Suggested change

	'declarations' => array( 'flex-direction' => 'column' ),
	'declarations' => array( 'flex-direction' => 'column', 'align-items' => 'flex-start' ),

[andrewserong]

It looks like we already have a duplicate 'align-items' => 'flex-start' in the else condition below, so I think we were duplicating that output previously?

[andrewserong]

Thanks so much for catching this one @matiasbenedetto! It turns out with #42452, I was testing the layout implementation using the Buttons block, which provides its own vertical orientation CSS, so it didn't catch this one in manual testing 🤦

We'll now know to properly test the Stack variation, too!

This LGTM, so I'll merge it in once the e2es pass. Thanks! 🙇

[andrewserong]

I've just given this a rebase to get the e2e tests passing now that #42947 has been merged