Vertical alignment of flex containers incorrect on front end

[justintadlock]

Description

When adding a Row block or a Buttons block, the vertical alignment of the nested blocks is correctly applied in the editor. However, on the front end, the blocks are always aligned in the center. Issue reported here: https://wordpress.org/support/topic/6-0-rc4-layout-for-row-block-is-always-align-items-center/

In the editor, the container is given align-items: flex-start;. On the front end, the container is give align-items: center;.

Issue #35849 seems to be a related ticket, but it is suggesting that we add vertical alignment controls. However, these controls are already present.

Step-by-step reproduction instructions

1. Add a Row block
2. Add two or more nested blocks
3. Select "align top" from the toolbar
4. Save and check the front-end view

Screenshots, screen recording, code snippet

Editor view:

Front-end view:

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[justintadlock]

Actually, this seems to work in Gutenberg 13.2.2. It doesn't in WordPress 6.0. Closing for now.

[britweb-tim]

This seems to be an issue when upgrading sites using gutenberg to WP 6.0. The "core/columns" block now falls back to verticalAlign center if it's not explicitly set, but the editor shows them as "top" aligned. Cannot override this fallback on a theme.

[justintadlock]

I believe I have tracked down the vertical alignment issue with flex layouts. It looks like the PHP change from /lib/block-suports/layout.php was not ported over to WordPress into /wp-includes/block-supports/layout.php.

Here's the original PR: #40013

Current code in Gutenberg trunk: https://github.com/WordPress/gutenberg/blob/trunk/lib/block-supports/layout.php#L117-L131

Current code in WordPress 6.0 branch: https://github.com/WordPress/WordPress/blob/6.0-branch/wp-includes/block-supports/layout.php#L117-L126

@adamziel - Pinging you here as requested to find the best way forward.

[ndiego]

I just added this to the 6.0.1 Project Board.

[Stephan66]

This issue has NOT been resolved with WordPress 6.0.1, the frontend still behaves as Justin described.

[devboldium]

This issue has NOT been resolved with WordPress 6.0.1, the frontend still behaves as Justin described.
Can confirm this is still happening in 6.0.1.

[adamziel]

cc @ockham who'll lead the next Core Editor merge.

[ockham]

cc @ockham who'll lead the next Core Editor merge.

Thanks! Added to the (newly created) WP 6.1 Editor Tasks board 👍

[shanemac10]

Just updated to Version 6.0.2 and this is still happening. Please address this.

Can we just have alignment based classnames dynamically added to the block so us devs can add style overrides? This dynamic wp-container-<number> classname and dedicated style tag generation thing that's going on is not helpful for building on top of Wordpress.

[llslim]

Can confirm this is not fix in 6.0.2 temporary workaround until fix ..

// remove layout support styles until vertical align gets updated in wp 6.1
// SPECIFIC_BLOCK_NAME == core/group

function ussaac_remove_group_layout_support_flag($block_content,$block) {
if (('SPECIFIC_BLOCK_NAME' === $block['blockName']) && is_page('YOUR PAGE')) {
remove_filter( 'render_block', 'wp_render_layout_support_flag', 10, 2 );
remove_filter( 'render_block', 'gutenberg_render_layout_support_flag', 10, 2 );
}
return $block_content;
}

add_filter('render_block','ussaac_remove_group_layout_support_flag', 9, 2);

[tellthemachines]

The updated layout code has now been backported to Core and testing shows it working correctly in trunk:

I'm going to go ahead and close this issue for now.