Pattern with Query Loop and Cover block renders wrongly in preview

[radeeven]

Hi! I wanted to report his bug where my pattern is rendering correctly when inserted, but wrongly in its preview (from the block inserter and pattern manager). The Title block added to the cover block is given full width (alignment), but isn't rendered with it in the preview, only when placed. Here is the block markup and screenshots of the rendering.

I tried installing the Gutenberg plugin to see if the problem has been fixed in a future Gutenberg version, and it hasn't.

This is my first bug report, so please comment on what I can improve for future bug reports.

Block markup:

<!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"article","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"taxQuery":null,"parents":[],"format":[]}} -->
<div class="wp-block-query">
<!-- wp:post-template {"layout":{"type":"grid","columnCount":3}} -->
<!-- wp:cover {"useFeaturedImage":true,"dimRatio":0,"isUserOverlayColor":true,"contentPosition":"bottom center","className":"is-style-cover-clickable","style":{"dimensions":{"aspectRatio":"2/3"},"border":{"radius":"1rem"},"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-cover has-custom-content-position is-position-bottom-center is-style-cover-clickable" style="border-radius:1rem;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><div class="wp-block-cover__inner-container">
<!-- wp:post-title {"isLink":true,"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|10","left":"var:preset|spacing|10","right":"var:preset|spacing|10"}}},"backgroundColor":"base-2","fontSize":"medium"} /-->
</div>
</div>
<!-- /wp:cover -->
<!-- /wp:post-template -->

<!-- wp:query-no-results -->
<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when a query returns no results."} -->
<p>Something went wrong</p>
<!-- /wp:paragraph -->
<!-- /wp:query-no-results --></div>
<!-- /wp:query -->

Inserted into a post:

In the block inserter:

In the pattern manager:

[sainathpoojary]

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

• WordPress: 6.8-alpha-59274-src
• PHP: 8.2.27
• Server: nginx/1.27.3
• Database: mysqli (Server: 8.4.3 / Client: mysqlnd 8.2.27)
• Browser: Chrome 132.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Four 1.3
• MU Plugins: None activated
• Plugins: Test Reports 1.2.0

Actual Results

✅ Error condition occurs.

Supplemental Artifacts

Editor:

Preview:

[abcd95]

Hey @radeeven, Welcome to Trac, and thanks for bringing this up.

I observed similar behavior when I followed the steps.

Environment Information

• WordPress: 6.8-alpha-59274-src
• PHP: 8.2.25
• Server: nginx/1.27.2
• Database: mysqli (Server: 8.0.40 / Client: mysqlnd 8.2.25)
• Browser: Chrome 132.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.0

Screenshots

Twenty Twenty-Five -

Twenty Twenty-Four -

Pattern Preview with Twenty Twenty-Five (zoomed in) -

Results

After digging in, I discovered that this behavior is only seen in the Twenty-Twenty-Four theme since it applies a white background to the text.

After looking at the zoomed-in version of the "Pattern Preview" with the TwentyTwenty-Five theme, we can still see a slight right shift which is still inconsistent with that of the editor, but that difference is not noticeable.

[poena]

Hi

This is not a bug, but I understand that the layout settings are confusing.

The pattern in the preview is not affected by the placement of the block.

But when you place the pattern inside a template or in the post content (the post editor) it will most likely be inside a group that has a width or a layout setting enabled, and the pattern will look different because of this. The parent affects the layout of the inner blocks.

The relevant setting is the "Inner blocks use content width" in the Layout options panel.
You will see different results if this option is enabled or not:
-On the block that the pattern is nested inside when placed
-On the query loop in the pattern
-On the cover block in the pattern
And depending on if the theme has "root padding awareness" enabled in the theme.json file.

That is also why different themes will show different results when testing.

If you disable "Inner blocks use content width" on the cover block in the pattern, the title should always be full width because the width settings will be disabled.
You can see that the width options will no longer be available in the block toolbar of the title.

[radeeven]

Thanks for the reproduction report @sainathpoojary.

Yes @abcd95, the background color of the Title block is different in the Twenty-Twenty-Four theme vs. Twenty-Twenty-Five. This looks to be because I applied the Base 2 background color to the title, which isn’t present in the Twenty Twenty Five theme. What is the supposed bug, is that the “align”:”full” is not being applied in the preview, which I believe your screenshots showed, thus reproducing my results.

@poena enabling “Inner blocks use content width” on the query loop block or a wrapping group block does indeed seem to make the title block be full width. As does disabling “Inner blocks use content width” for the cover block. It seems you are correct in that the root padding is being applied within the cover block when in the block inserter and previewing and editing the pattern alone, because here there are no wrapping blocks which the root padding has already been applied to.

The behaviour is still not as expected. I notice that the root padding is being added differently within the cover block versus within a group block. In the group block, a child title block with full width is able to reach the group block edges, and then you can add padding 0 to the title block to fully counter the root padding. Within the cover block, this is not the case.

On ​https://developer.wordpress.org/themes/global-settings-and-styles/settings/use-root-padding-aware-alignments/, it says that “WordPress adds inline CSS to stretch nested wide and full-width blocks beyond their parent block’s width (including the additional padding that’s added to the width)”.

It seems like there is an issue with root padding within the cover block. Inner blocks with full width do not seem to be able to fill the whole of the container, which is expected behaviour (at least for me).

Here is a screenshot and some code to help be able to visualize and replicate the issue.

<!-- wp:query {"queryId":8,"query":{"perPage":3,"pages":0,"offset":0,"postType":"article","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"taxQuery":null,"parents":[],"format":[]},"layout":{"type":"default"}} -->
<div class="wp-block-query"><!-- wp:post-template {"align":"full","layout":{"type":"grid","columnCount":3}} -->
<!-- wp:cover {"useFeaturedImage":true,"dimRatio":0,"isUserOverlayColor":true,"contentPosition":"bottom center","isDark":false,"className":"is-style-cover-clickable","style":{"dimensions":{"aspectRatio":"2/3"},"border":{"radius":"1rem"},"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light has-custom-content-position is-position-bottom-center is-style-cover-clickable" style="border-radius:1rem;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:post-title {"isLink":true,"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|10","left":"var:preset|spacing|10","right":"var:preset|spacing|10"}}},"backgroundColor":"base-2","fontSize":"medium"} /--></div></div>
<!-- /wp:cover -->
<!-- /wp:post-template -->

<!-- wp:query-no-results {"align":"full"} -->
<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when a query returns no results."} -->
<p>Something went wrong</p>
<!-- /wp:paragraph -->
<!-- /wp:query-no-results --></div>
<!-- /wp:query -->

<!-- wp:query {"queryId":8,"query":{"perPage":3,"pages":0,"offset":0,"postType":"article","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"taxQuery":null,"parents":[],"format":[]},"layout":{"type":"default"}} -->
<div class="wp-block-query"><!-- wp:post-template {"align":"full","layout":{"type":"grid","columnCount":3}} -->
<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:post-featured-image {"align":"full","style":{"border":{"radius":{"topLeft":"1rem","topRight":"1rem","bottomLeft":"0px","bottomRight":"0px"}}}} /-->

<!-- wp:post-title {"isLink":true,"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|10","left":"var:preset|spacing|10","right":"var:preset|spacing|10"}},"border":{"radius":{"bottomLeft":"1rem","bottomRight":"1rem"}}},"backgroundColor":"base-2","fontSize":"medium"} /--></div>
<!-- /wp:group -->
<!-- /wp:post-template -->

<!-- wp:query-no-results {"align":"full"} -->
<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when a query returns no results."} -->
<p>Something went wrong</p>
<!-- /wp:paragraph -->
<!-- /wp:query-no-results --></div>
<!-- /wp:query -->

[poena]

Does the cover block do this when it is not nested inside another container?

[radeeven]

Replying to poena:

Does the cover block do this when it is not nested inside another container?

Yes

[poena]

Hi,
I have not forgotten about this, but I have not had time test more.