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.

[SirLouen]

Bug Reproduction and Test Report

Description

🟠 This report is a follow up of this test by @poena, confirming that the bug can be reproduced with added issues that should be solved, and the indicated patch is not working as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/56153/56153.1.patch

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 136.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty 2.9
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Bug Reproduction

Part 1

1. Following the testing instructions provided:

• Setting full width in template (in post meta)
• Setting full width post template
• Setting full width Featured Image

2. ❌ I can't reproduce the bug reported in the OP (issue with the width of the image)
3. 🐞 I can also reproduce all the same elements (title, date, excerpt), are centered in editor and left aligned (as expected) in frontend

Part 2

1. Only setting full width to template in post meta and to post template in block editor
2. 🐞 I reproduce the bug mentioned in the OP (image not full in editor, but full in front end)

Expected Results

• Part 1: All, image, title, date, and excerpt are the same both in editor and frontend
• Part 2: Image full width both in the editor and the front end

Actual Results

1. ❌ None of the issues are being resolved with this patch.

Additional Notes

I'm re-adding the needs-patch and good-first-bug to bring more attention to this report, given how old it is, and it has not been solved yet.

[kush123]

When a title block is added, initially when no alignment is selected it is centred on the editor but left aligned on the frontend of the page

[kush123]

this is the front end view, here the title is aligned on the left thus not matching the editor view

[kush123]

While working on this ticket, I noticed that the Title block’s alignment mismatch isn’t limited to the Query Loop. By default, in the Twenty Twenty theme:

In the editor: When you insert a Title block (with no alignment explicitly chosen), it appears centered.

On the frontend: That same Title block is rendered left-aligned.

In other words, the alignment discrepancy affects Title blocks throughout the theme, not just within a full-width Query Loop template.

Images attached above

[SirLouen]

Replying to kush123:

While working on this ticket, I noticed that the Title block’s alignment mismatch isn’t limited to the Query Loop. By default, in the Twenty Twenty theme:

In the editor: When you insert a Title block (with no alignment explicitly chosen), it appears centered.

On the frontend: That same Title block is rendered left-aligned.

In other words, the alignment discrepancy affects Title blocks throughout the theme, not just within a full-width Query Loop template.

If you plan to release a patch for this, include this in the Patch Testing Instructions so they can be testing along with the already provided ones.

# Query loop block with full width and having a template of image, title, and date has a full-width issue on the editor side in the Twenty Twenty theme.

## Overview

This pull request addresses alignment inconsistencies between the block editor and frontend view in the Twenty Twenty theme, ensuring blocks render identically in both environments.

## Trac Ticket: 56153

## Issues Fixed

### 1. Query Loop Featured Image Full-Width Mismatch

• Problem: When a Query Loop block is set to full width with a Featured Image template, the image doesn't stretch edge-to-edge in the editor, despite doing so on the frontend
• Solution: Added CSS rules to ensure Featured Images span the full editor canvas width

### 2. Post Content Alignment in Query Loop Templates

• Problem: Within full-width Query Loop templates, Post Title, Post Date, and Post Excerpt appear centered in the editor but render left-aligned on the frontend
• Solution: Updated alignment handling to honor full-width settings consistently across both views

### 3. Default Title Block Alignment Inconsistency

• Problem: Standalone Title blocks (without explicit alignment) display centered in the editor but left-aligned on the frontend
• Solution: Modified CSS to ensure default Title blocks are left-aligned in both editor and frontend

## Changes Made

• Improved alignment consistency for Post Title, Post Date, and Post Excerpt blocks
• Fixed default Title block positioning to match between editor and frontend views

## Testing Instructions

### Test Case 1: Full-Width Featured Image in Query Loop

1. Create a new post/page in the block editor and set template to full-width (post meta)
2. Add a Query Loop block with a template containing:
   • Post Featured Image
   • Post Title
   • Post Date
   • Post Excerpt
3. Set Query Loop alignment to Full Width
4. Set Post Template alignment to Full Width
5. Set Post Featured Image alignment to Full Width

Expected Results:

• Editor: Featured image stretches edge-to-edge with no visible margins, and the post title, date, and excerpt are left aligned.
• Frontend: Featured image spans edge-to-edge and post title, date, and excerpt are left aligned, matching the editor exactly.

### Test Case 2: Template-Level Full-Width Settings

1. Create a new post/page
2. Add a Query Loop block with the Post Featured Image template and set post meta template to full-width
3. Set Query Loop alignment to Full Width
4. Leave Post Featured Image at default alignment (no explicit setting)

Expected Results:

• Editor: Featured image automatically stretches full width due to parent template settings
• Frontend: Featured image renders edge-to-edge, identical to editor view

### Test Case 3: Default Title Block Alignment

1. Create a new post/page
2. Insert a Title block with no alignment selection (leave as default)
3. Observe positioning in the editor
4. Publish/preview and check the frontend

Expected Results:

• Editor: Title block appears left-aligned (not centered)
• Frontend: Title block is left-aligned
• Both views show identical positioning

[SirLouen]

Combined Bug Reproduction and Test Report

Description

✅ This report validates that the indicated patch works as expected.

Important Note: Code has not been reviewed, this is only a functional test.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/8906.diff

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 137.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty 2.9
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Test Results

• Following the testing instructions provided in this PR

1. ✅ Test 1: Image goes full width in the front-end
2. ✅ Test 2: Image goes not go full width after the patch in the front-end
3. ✅ Test 3: Text remains aligned to the center in the front-end

Supplemental Artifacts

Results: ​https://i.imgur.com/ycaEMTu.png