Query loop block: Wide alignment not working correctly on the editor

[MaggieCabrera]

Description

While using wide alignment on a Query block the width is only applied to the currently selected post while in the editor. The frontend shows the correct alignment for all posts

Step-by-step reproduction instructions

1. Activate emptytheme (you may need to set layout sizes on the theme.json, here's the theme.json file I used)
2. Insert a query block inside a page and set it to show more than one post
3. Apply wide alignment to the query block

Expected behaviour

I expected all posts inside the query block to show as wide aligned within the editor

Actual behaviour

Only the first (selected) post shows as wide, the rest show no alignment. The frontend shows them all as wide.

Screenshots or screen recording (optional)

Editor	Frontent

[annezazu]

This is still happening in WordPress 5.8.1+Gutenberg 10.6 and it came up in the tenth call for testing for the FSE Outreach program:

When I select Full Width on a layout using featured images, only the image in the block that I selected appeared full width. On the front end, however, it showed all images as full width – so it was a bit unexpected based on what appeared in the editor.

bmiFWj.mp4

[priethor]

I'm adding this to the 5.9 must-haves because alignment tools are one of the top features in this release, and one of the most prominent pieces of feedback received during the Go/No Go demo was to ensure editor<->frontend parity as much as possible.

[kjellr]

Adding a few more details from the duplicate issue #35551:

This only happens in the post/page editor — I'm unable to reproduce in the Site Editor. If a Query Loop block uses layout settings, the non-selected posts in the list incorrectly inherit the following rule:

.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > * {
    max-width: [content width];
    margin-left: auto;
    margin-right: auto;
}

This leads to any non-selected post appearing incorrectly.

Screenshots:

[carolinan]

When Inherit default layout is enabled for the query loop, the blocks do not move this way.
Edit: Actually they do if the post template is then also set to wide/full.

[colorful-tones]

I believe this is a bit of a larger issue. It seems to affect Templates (both editor and output: front end), and not necessarily attributed to the Query Loop Block.

I'm currently running Gutenberg plugin 11.8.2, and I have two Group blocks and they're both set to alignWide. Here is my theme.json:

		"layout": {
			"contentSize": "860px",
			"wideSize": "1300px"
		},

If I go to Appearance > Templates > Add New and drop this:

<!-- wp:group {"align":"wide"} -->
<div class="wp-block-group alignwide"><!-- wp:heading -->
<h2 id="heading-one">Heading one</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"wide"} -->
<div class="wp-block-group alignwide"><!-- wp:heading -->
<h2 id="another-heading">another heading</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

And then apply that Template to a Page/Post then the align wide does nothing and there is no max-width output on Group block at all.

However, if I just create a new Page/Post and drop this inside (same as above):

<!-- wp:group {"align":"wide"} -->
<div class="wp-block-group alignwide"><!-- wp:heading -->
<h2 id="heading-one">Heading one</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"wide"} -->
<div class="wp-block-group alignwide"><!-- wp:heading -->
<h2 id="another-heading">another heading</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

Then the max-width is applied to the Group block (as expected).

I'm quite confused as to the expectation and user experience here. 😕
I would hope in both examples that my max-width = "wideSize": "1300px"

Page w/ Template assigned (using above block code)	Page w/ Group blocks alignWide (no Template assigned)