Query loop block with full width and having template of image, title and date has full width issue in editor side in twenty twenty theme.

[smit08]

While using query loop block in twenty-twenty theme having full width selected. The image in the template of the query loop block is not displaying in full width on the editor side. but in front, the image is displaying properly. The front and editor sides should be the same.

Steps to reproduce:

1. Add query loop block.
2. Select the template in the query loop block having an image.
3. Set the query loop block as full width.
4. Now you can clearly see the issue. the image will not display in full width on the editor side. But if you check on the front side the image will appear in full width.

Attaching image for better understanding.

[smit08]

This is the editor side view. You can clearly see the issue, the image is not in full width.

[smit08]

This is the front side view. Here the image is appearing perfect in full width.

[anonymized_20055759]

From what I'm seeing in your screenshots and trying to reproduce this, the alignment is different for the text as well as the image. Note how the test2 heading moves all the way left in the screenshot with the full-width image.

I'm not sure if this is really a bug considering the constraints of the editor. The theme is set to full width within the editor when you're creating a page, but that option is unique to the 2020 theme.

I'm a new contributor, but someone else may have more insight.

[smit08]

hi, @christinavoudouris we can consider this as a bug because Gutenberg always provides the same view in both editor and front side. If there is no same view in front and editor then the user will get confused and the user has to check always in front after doing some editing in the editor. So the best solution is to make it the same in both the views editor and front.

Today I will add a patch on this. I am working on this issue rightnow.

[smit08]

Added patch file and solved the feature image full width issue.

[poena]

Hi
I am able to reproduce parts of this issue.
I am using Chrome on Windows 11, WordPress 6.5.2 and Twenty Twenty version 2.6.

First I made sure I have posts with featured images.
Then I created a new post and added a query loop, and added the post featured image block inside the post template, in addition to the default blocks.

• I set the query loop to full width
• I set the post template to full width
• I set the post featured image to full width.

Result:

• The post featured image is full width in both the editor and front.
• The post title is centered in the editor and left aligned on the front: even if I set the title to full width.
• The post date is left aligned but centered on the page, limited by the default content width. But completely left aligned, all the way to the edge of the browser, on the front.
• The post excerpt is left aligned but centered on the page, limited by the default content width. But completely left aligned, all the way to the edge of the browser, on the front.

---

So the CSS changes proposed in patch https://core.trac.wordpress.org/attachment/ticket/56153/56153.patch do not seem to be needed to make the post featured image full width in the editor, at least not on 6.5.2.
Setting max-width: 100%; on the post template block does not solve the other issues.
I did not test on older versions of WordPress.

[karmatosed]

@smit08 are you able to iterate on the changes requested by @poena? It would be great to see if we can get this ticket progressed.

[smit08]

Thanks @poena and @karmatosed for taking interest in this ticket. I made the changes in the patch which is requested by @poena. Now there is max-width: 100%; only for the post template block div. I also tested the patch in newer version of the WordPress like 6.5.5 and 6.6.1. After applying the new patch image is in full width. Please test it at your convenience.

[karmatosed]

Thank you @smit08 for updating the patch. I am going to test these.