Support vertical center alignment on (mj-)column

[janus-reith]

Currently, a warning is shown if the verticalAlignmentattribute for blocks of type "core/column" is set to center.

mj-column does support center alignment, but calls it "middle".

In the renderer just check if verticalAlignment equals "center" and subsitute that with "middle" :

newspack-newsletters/includes/class-newspack-newsletters-renderer.php

Line 439 in ccaebbc

$column_attrs['vertical-align'] = $attrs['verticalAlignment'];

Tested it, works fine.

[adekbadek]

Hi @janus-reith, thanks for the tip!
I've found that in multi-column layout, the tallest column has to be vertical-align="middle" in order to make smaller columns handle the middle alignment, does that check out with your testing?
Example: https://mjml.io/try-it-live/rkuSMp10L

[janus-reith]

@adekbadek Yes I can confirm, although this seems to be the general way vertical-align="middle" is interpreted in HTML.
Made a quick example here: https://codesandbox.io/s/clever-star-2zgog?file=/index.html
This is not an issue for gutenberg columns, as these use flexbox and align-self for each column.

So this could indeed lead to problems.
Simply enabling it could lead to unexpected results, on the other hand always showing a warning like align: middle only works if the tallest column has align-middle could really disrupt the user experience, and currently also alter the element position.

Still, to really get some more sophisticated layouts done I consider the ability to center-align elements vital.

I wonder if actually measuring column heights is something that could be considered, to only show a warning if really necessary? - Preferably without needing to change anything in the core column component, or outside newspack-newsletters in general.

Looking at this:

newspack-newsletters/src/editor/blocks-validation/blocks-filters.js

Line 52 in 43fb115

const withUnsupportedFeaturesNotices = createHigherOrderComponent( BlockListBlock => {

It looks like the warnings work by wrapping each individual block, with access to their respective attributes.
Now if somehow the wrapping columns block and each column in there could share context, it should be simple to get this done.
But I did not check further how addFilter works here and which restrictions this might impose, or if there maybe is a gutenberg-included solution for this already, or if there could be a more simple way by directly accessing innerBlocks of the parent columns block.

[adekbadek]

This is essentially an issue of translating a flexbox layout to a non-flexbox one, which gets pretty complicated.
On one hand there's that, on another we could support an "all columns middle-aligned" layout only – I've submitted a PR: #235

[janus-reith]

Great, seems to be the most simple solution!

[adekbadek]

Thanks again for digging into that, @janus-reith !

[matticbot]

🎉 This issue has been resolved in version 1.3.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀