Cover block align-top doesn't work.

[Ren2049]

Description

Trying to build a transparent hero-header with the cover block as the outer wrapper I've noticed that the align-top/change content position feature doesn't work. A theme designer would expect the cover block to work like the group or stack blocks, but with the additional media and overlay functionality.

Can we have a proper section block with media functionality? I'm currently using the cover block as a "section wrapper".

Step-by-step reproduction instructions

1. In TT3 theme list view, insert a cover block before the row block that wraps the site title and navigation.
2. Place the row block inside the cover block.
3. Give the cover block a height of 30vh.
4. Use the change position to center top feature on the cover block and observe that it screws up the content that was previously wide in the center position.
5. Blocks nested in the cover block and their align-top features have no effect, regardless of how tall the cover block is.

Screenshots, screen recording, code snippet

No response

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

[mrfoxtalbot]

Thank you for reporting this @Ren2049.

I found this issue while investigating a similar report in the support forum.

I recorded a video to illustrate the problem. Could you please confirm that this is what you are seeing on your end too?

Screen.Capture.on.2023-05-31.at.16-46-26.mp4

Thank you!

[Ren2049]

@mrfoxtalbot Yes! Thats the problem!

[ziomoiz]

Hello,
it's interesting that content position feature works different when the content of the Cover block contains a Paragraph block.
I observed that when placing a Paragraph block inside a Cover block, the width of the other blocks contained in the Cover block shrinks to the extent of the text in the Paragraph block.
At @mrfoxtalbot request, I recorded a video to illustrate the described issue:

wordpress_cover.block.issue.mp4

[HTCM]

I can confirm the issue, and have done some digging.

When the 'Change content position' button is used to move an item from the default center/center alignment to any of the other eight positions, the CSS on the inner block (.wp-block-cover__inner-container) changes from a width of 100% to 'width:auto'.

This sort of makes sense, since the 'Change content position' button is moving the inner block to left, right, up and down, or combinations of these (top left, center right, etc.). But it's inconsistent with the default.

Starting with a Pattern (say cover image with branding/nav over the top of it) the pattern contains a Spacer block — something that offends my mildly fastidious views about superfluous code. This forces the branding/nav block to stay at the top.

A fix would be to allow for the width of the inner row (.wp-block-cover__inner-container) to be reset to 100%. Or, alternatively, to flex-grow:1.

Could all of this be accomplished with grid positioning instead? I'd like to be able to, say, put the branding/nav row at the top and place other items (header, blurb, button) in the middle of the cover block.

[cuemarie]

I ran into this in testing today and reported on Automattic/wp-calypso#78502 - the width:auto that as applied to the inner block when a custom content position is set also impacts Row blocks set to "Space between items". My recording just for good measure:

Screen.Capture.on.2023-06-21.at.12-36-32.mp4

.wp-block-cover.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {
    width: 100%;
}

Addresses the width issue as a workaround for now.

[Marc-pi]

another big annoying issue for whoever wants to display a menu on top of the cover block (for instance)
here is another video ping @richtabor
like explained above, the wp-block-cover__inner-container is the culprit : auto vs 100%
using TT3 theme

cover-inner-content-width.webm