Fix: resolve text alignment for blocks in twenty twenty theme

[kushagra-goyal-14]

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

[github-actions]

Hi @kushagra-goyal-14! 👋

Thank you for your contribution to WordPress! 💖

It looks like this is your first pull request to wordpress-develop. Here are a few things to be aware of that may help you out!

No one monitors this repository for new pull requests. Pull requests must be attached to a Trac ticket to be considered for inclusion in WordPress Core. To attach a pull request to a Trac ticket, please include the ticket's full URL in your pull request description.

Pull requests are never merged on GitHub. The WordPress codebase continues to be managed through the SVN repository that this GitHub repository mirrors. Please feel free to open pull requests to work on any contribution you are making.

More information about how GitHub pull requests can be used to contribute to WordPress can be found in the Core Handbook.

Please include automated tests. Including tests in your pull request is one way to help your patch be considered faster. To learn about WordPress' test suites, visit the Automated Testing page in the handbook.

If you have not had a chance, please review the Contribute with Code page in the WordPress Core Handbook.

The Developer Hub also documents the various coding standards that are followed:

• PHP Coding Standards
• CSS Coding Standards
• HTML Coding Standards
• JavaScript Coding Standards
• Accessibility Coding Standards
• Inline Documentation Standards

Thank you,
The WordPress Project

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• The Plugin and Theme Directories cannot be accessed within Playground.
• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @kushagra-goyal-14.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.