Make WordPress Core

Opened 2 years ago

Last modified 3 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: Future Release Priority: normal
Severity: normal Version: 6.0
Component: Bundled Theme Keywords: has-testing-info has-screenshot has-patch changes-requested
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 2 years 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 2 years ago.
This is the front side view. Here the image is appearing perfect in full width.
56153.patch (616 bytes) - added by smit08 2 years ago.
Added patch file and solved the feature image full width issue.

Change History (9)

@smit08
2 years ago

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

@smit08
2 years ago

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

#1 @anonymized_20055759
2 years 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 2 years ago by anonymized_20055759 (previous) (diff)

#2 @smit08
2 years 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 2 years ago by smit08 (previous) (diff)

@smit08
2 years ago

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

#3 @smit08
2 years ago

  • Keywords has-patch added; needs-patch removed

#4 @smit08
2 years ago

  • Keywords needs-testing added

#5 @karmatosed
3 months ago

  • Milestone changed from Awaiting Review to Future Release

#6 @poena
3 months ago

  • Keywords changes-requested added; needs-testing removed

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.

Note: See TracTickets for help on using tickets.