The other day I noticed something weird:
If you create a `Stack` block in the Gutenberg editor (`flex-direction: column`) and change the content alignments, it produces this code:
<!– wp:group {“layout”:{“type”:”flex”,”orientation”:”vertical”,”justifyContent”:”stretch”,”verticalAlignment”:”space-between”}} –>
But the actual CSS rendered has `justify-content: space-between` and `align-items: stretch`, the opposite of what the block code suggests due to flex direction change.
This non-standard naming scheme confused me: why name it `justifyContent` when it doesn’t map to the equivalent CSS. I think something like `horizontalAlignment` describes it better.
Also noticed that the `Columns` block doesn’t support setting `justify-content`, which is weird cause often layouts need this.
Talking about `Columns`, I noticed that the `Row`, `Stack`, `Column(s)`, and `Buttons` blocks are all just flexbox layouts, but with weird code differences:
Like how `align-items` on `Row` and `Buttons` are set with `{“layout”:{“verticalAlignment”:”center”}}` but on `Columns` it’s instead `{“verticalAlignment”:”center”}`.
Perhaps having just one Block type handle all these (`flex, flex-direction, flex-wrap, gap, justify-content, align-items,` and `flex-basis`) would be simpler.
And the `Align: Full` and `Align: Wide` are also weird names: align suggests alignment, full/wide sounds like width-related values. Took me a while to realize that these are just `max-width` elements aligned center.
In the end, I’m no WP expert but I don’t get why the names have to be so confusing and non-standard.
If there’s a good reason for it, let me know in the comments…
[ad_2]