[wp-trac] [WordPress Trac] #62810: Pattern with Query Loop and Cover block renders wrongly in preview

[WordPress Trac]

#62810: Pattern with Query Loop and Cover block renders wrongly in preview
--------------------------+------------------------------
 Reporter:  radeeven      |       Owner:  (none)
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  Awaiting Review
Component:  Editor        |     Version:  6.7.1
 Severity:  minor         |  Resolution:
 Keywords:                |     Focuses:
--------------------------+------------------------------

Comment (by 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 -->
 }}}

 [[Image(2025-01-21--bug-report-screenshot.png)]]

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/62810#comment:4>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform