Gutenberg: Some blocks might not play well inside vertical aligned columns

[mrleemon]

Describe the bug
Playing with the Slideshow block in Jetpack, I found a possible bug in the Columns block.

To reproduce
Steps to reproduce the behavior:

1. Install and activate Jetpack
2. Add a columns block (using the 50%-50% layout preset) in a page
3. Add a Slideshow block inside one of the columns and add some images to it
4. Set a explicit vertical alignment in the columns block (top, center or bottom)
5. The Slideshow disappears

Expected behavior
The block works as expected

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Firefox 72 and Chrome 79

Additional context

• I'm using the Gutenberg version that comes with WordPress 5.3.2

Possible fix

If I add width: 100% to the .wp-block-column.is-vertically-aligned-top, .wp-block-column.is-vertically-aligned-center and .wp-block-column.is-vertically-aligned-bottom CSS rules in Gutenberg, the slider block works as expected:

.wp-block-column.is-vertically-aligned-center {
    align-self: center;
    width: 100%; /* new */
}

[jorgefilipecosta]

Hi @mrleemon, thank you for reporting this issue. Hi @getdave, would you be able to have a look into this problem?

[mrleemon]

The Image Slider block from the following plugin https://wordpress.org/plugins/getwid/ suffers the same problem.

[mrleemon]

The Image Slider block from the following plugin https://wordpress.org/plugins/ultimate-blocks/ doesn't overflow the column when vertically aligned but there are some visual glitches if the width: 100% property is not present.

[mrleemon]

The Image Slider block from the plugin https://wordpress.org/plugins/otter-blocks/ is affected by this, too.

[mrleemon]

The Gutenbee plugin https://wordpress.org/plugins/gutenbee/ is also affected by this.

[paaljoachim]

Andrew @aduth
I think this is an issue you might want to know about. (Since you have been working a lot with columns lately.)