Make WordPress Core

Opened 11 months ago

Last modified 11 months ago

#56153 new defect (bug)

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.

Reported by: smit08's profile smit08 Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.0
Component: Bundled Theme Keywords: has-testing-info has-screenshot has-patch needs-testing
Focuses: Cc:

Description

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.

Attachments (3)

Screenshot 2022-07-05 at 11.08.01 PM.png (2.1 MB) - added by smit08 11 months ago.
This is the editor side view. You can clearly see the issue, the image is not in full width.
Screenshot 2022-07-05 at 11.08.11 PM.png (1.6 MB) - added by smit08 11 months ago.
This is the front side view. Here the image is appearing perfect in full width.
56153.patch (616 bytes) - added by smit08 11 months ago.
Added patch file and solved the feature image full width issue.

Change History (7)

@smit08
11 months ago

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

@smit08
11 months ago

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

#1 @christinavoudouris
11 months ago

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.

Last edited 11 months ago by christinavoudouris (previous) (diff)

#2 @smit08
11 months ago

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.

Last edited 11 months ago by smit08 (previous) (diff)

@smit08
11 months ago

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

#3 @smit08
11 months ago

  • Keywords has-patch added; needs-patch removed

#4 @smit08
11 months ago

  • Keywords needs-testing added
Note: See TracTickets for help on using tickets.