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.

[christinavoudouris]

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.