Skip to content

Some blocks might not play well inside vertical aligned columns #19962

@mrleemon

Description

@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
alignment-none
alignment-top
alignment-center
alignment-bottom

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 */
}

Metadata

Metadata

Labels

[Block] ColumnsAffects the Columns Block[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions