Cover block with custom content position limits width of inner container

[cuemarie]

Core issue: WordPress/gutenberg#50610

Quick summary

If you set up a Cover block with a Row Block set to Space Between Items within it, the row block's space is removed if you set the Cover block to a custom content position, such as Top Center or Bottom Center.

Steps to reproduce

1. On a Simple or AT test site, create a post and add a Cover block
2. Inside, place a Row block with at least 2 items in it
3. Set the Row block to "Space Between Items" justification
4. Lastly, change the Cover Block > Content position to "Top Center" in the floating toolbar

Setup should look like this:

Cover Block
     > Row (Space items apart)
               > Block 1 (Such as a Site Logo block)
               > Block 2 (Such as a Navigation block)

What you expected to happen

The space between items to remain intact no matter the content placement.

What actually happened

When the Cover Block > Content Position is changed, the blocks within the row block return to right next to each other.

itPxLm.mp4

Atomic

Simple

---

I compared the 2 cover blocks in the browser inspector, and it appears this is the problem:

.wp-block-cover-image.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container, .wp-block-cover.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {
  margin: 0;
  width: auto;
}

When the cover block has a custom content position, the width: auto limits the width of the row block within the cover block.

QaiDXV.mp4

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

Simple, Atomic, Self-hosted

Logs or notes

Workaround

This CSS helps resolve this on my Simple site:

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

[cuemarie]

📌 ACTIONS

• Assigned to Other
• Core issue already exists: Cover block align-top doesn't work. WordPress/gutenberg#50610

[happychait]

User report: 6452272-zen

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 6452272-zen
• 6455492-zen
• 6526001-zen
• 6618125-zen

[cuemarie]

Provided user with CSS to fix content with here: 6455492-zd-woothemes

[jp-imagines]

Another report (given CSS workaround) here: 6526001-zd-woothemes

[eduardozulian]

Another report in 6618125-zen

The CSS workaround helped but just a note to make sure that Inner blocks use content width is off for the Cover block.

[cuemarie]

Looks like this should be fixed with Gutenberg 16.7: WordPress/gutenberg#54050