alignRight/Left not displaying properly in Column and Cover blocks (maybe others as well)

[ndiego]

Description

Many blocks include align left/center/right options, notably the Site Logo and Image blocks. If you add an Image block to a Group block and apply align right, the following CSS is applied.

.editor-styles-wrapper .wp-container-25 > [data-align="right"] {
    float: right;
    margin-left: 2em;
}

The .wp-container-25 is a unique reference to this specific Group block.

However, when you convert the Group block into a Columns block, this generated CSS is not there. The same is true for Cover blocks. On the frontend, blocks with align right/left appear correctly, but not in the Block Editor. See the screenshots below.

I am happy to investigate this further if someone can point me to where this autogenerated alignment CSS is being created. I have not been able to find it.

Step-by-step reproduction instructions

1. Create a Group block and add an Image block.
2. Align the image right (it should work as expected)
3. Create a Cover or Columns block and add an Image block.
4. Align the image right (it should not work as expected)
5. Save and view the page on the frontend, both images should be aligned right as expected.

Screenshots, screen recording, code snippet

Backend:

Frontend:

Environment info

WordPress 5.8.2, Gutenberg 11.9.1

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

[ndiego]

I have gone ahead and added the Backport tag on this one, but if the team feels like this is a 5.9+ issue, feel free to remove. I just strongly feel these alignment issues need to be get resolved before 5.9. My PR for the Site Logo issues #36627 tackles a few more important issues that impact the frontend, but this left/right alignment issue can make editing alignment in the Block Editor quite disorienting. This may also be related to a larger Layout Block support issue, see #36521.

[youknowriad]

I can reproduce the issue in the editor for the Cover block but not the columns block. Could be solvable by adding just some styles there.

The ideal solution for me would be for the cover block to use "layout" but the problem right now is that the "cover" block has two Dom wrappers and layout applies to the top level container while it should ideally apply to the container of the inner blocks, so we should try doing that. (moving the layout styles to the innerBocks container)

That said, this issue is present on 5.8 for themes with theme.json so I wouldn't say it's necessary a 5.9 issue even if it's an important bug to fix.

[ndiego]

That said, this issue is present on 5.8 for themes with theme.json so I wouldn't say it's necessary a 5.9 issue even if it's an important bug to fix.

@youknowriad that's a good point. This may lead to finding other issues as well and/or quirks with different blocks, like the Column block as well. I have removed the backport tag while I continue exploring this.

[tellthemachines]

I can no longer reproduce this. A few things have changed in the meantime: alignment styles no longer depend on those dynamic classnames but are nested instead under the actual layout classnames such as body .is-layout-constrained > .alignright, and container blocks such as Cover and Column all have layout enabled (Cover only in the plugin for now; expected in core for 6.3).

I'm going to go ahead and close this issue for now, but feel free to reopen if there's any other scenario in which it still occurs!