Skip to content

Post Featured Image: Fix alignment when a custom width is set - #84316

Open
Mustafabharmal wants to merge 2 commits into
WordPress:trunkfrom
Mustafabharmal:fix/post-featured-image-alignment-in-post-template
Open

Post Featured Image: Fix alignment when a custom width is set#84316
Mustafabharmal wants to merge 2 commits into
WordPress:trunkfrom
Mustafabharmal:fix/post-featured-image-alignment-in-post-template

Conversation

@Mustafabharmal

@Mustafabharmal Mustafabharmal commented Oct 8, 2026

Copy link
Copy Markdown
Contributor

What?

Fixes #37936

When a custom width is set on the Featured Image block, choosing an alignment from the toolbar has no visible effect: the image stays on the left (or on the right in RTL languages). This is most noticeable inside the Query Loop's Post Template.

Why?

The custom width is applied to the inner <img> (via the dimensions selector), while the alignment class is applied to the <figure> wrapper. The wrapper stays full width (alignleft/alignright are explicitly set to width: 100%), so the wrapper is aligned but the image inside it isn't.

How?

Add text-align rules for .aligncenter, .alignleft and .alignright on the block wrapper, matching what the File and Image blocks already do. Left and right use /*rtl:ignore*/ so they stay on their physical sides in RTL, consistent with core alignment behavior.

This is a CSS-only change. There are no markup, attribute or PHP changes, so no deprecation is needed. Wide and full alignments are unaffected.

Testing Instructions

  1. Use a block theme (e.g. Twenty Twenty-Five) and make sure at least one post has a featured image.
  2. Open the Blog Home or Index template in the Site Editor.
  3. Inside Query Loop > Post Template, select the Featured Image block.
  4. Set Settings > Dimensions > Width to 200px.
  5. Apply Align left, Align center and Align right from the block toolbar.
  6. Confirm the image is aligned as expected in the editor and on the front end.

Screenshots or screencast

Before After
Before.Featured.Image.Fix.mov
After.Featured.Image.Fix.mov

Use of AI Tools

I used Claude Code to look into the cause and draft the change and this description. I reviewed and tested the change myself.

@github-actions github-actions Bot added the [Package] Block library /packages/block-library label Oct 8, 2026
@github-actions

github-actions Bot commented Oct 8, 2026 •
edited
Loading

Copy link
Copy Markdown

🤖 PR meta 🤖

🎉 Props

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @parashshresh.

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

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: parashshresh.

Co-authored-by: Mustafabharmal <mustafabharmal@git.wordpress.org>
Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: devinmaeztri <devinmaeztri@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
Co-authored-by: paaljoachim <paaljoachim@git.wordpress.org>
Co-authored-by: draganescu <andraganescu@git.wordpress.org>
Co-authored-by: masperber <masperber@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: jordesign <jordesign@git.wordpress.org>

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

Updated as activity occurs, without notifying anyone named here. Add the props-bot label to refresh.

@im3dabasia
im3dabasia self-requested a review October 8, 2026 11:45
im3dabasia
im3dabasia reviewed Oct 8, 2026
View reviewed changes

@im3dabasia im3dabasia left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! The root cause checks out, and following the File and Image blocks keeps this consistent. A few things to check:

  • Did you manage to test the empty placeholder, when a post has no featured image and a custom width is set? Does it move with the alignment in the editor?
  • How does a custom width look with an overlay or gradient? Does the overlay cover only the image, or the whole block?
  • With Align left and Align right, does text wrap beside the image, or does the image only move to that side?
  • Could you check this in a right-to-left language, to confirm left and right stay on their physical sides?

@im3dabasia im3dabasia added [Type] Bug An existing feature does not function as intended [Block] Post Featured Image Affects the Post Featured Image Block labels Oct 8, 2026
@Mustafabharmal

Mustafabharmal commented Oct 12, 2026

Copy link
Copy Markdown
Contributor Author

Thanks for the review, @im3dabasia! I checked each point:

  1. Good catch, it didn't move. The placeholder is a block-level element sized by the custom width, so text-align doesn't affect it. I've pushed a small editor-only fix that uses auto margins, so it now follows left, center and right alignment. Front end isn't affected, since a post without a featured image renders nothing there.
image

  1. The overlay covers the whole block, not just the image. This is the same on trunk (with or without alignment), because the overlay is positioned against the full-width wrapper, while the custom width is applied to the image. Fixing it would mean shrinking the wrapper to the image width, which would affect percentage widths and aspect ratios, so I'd prefer to handle it in a separate issue to keep this PR focused.

  2. The image moves to that side, but text doesn't wrap beside it. This is unchanged from trunk: the wrapper is kept at width: 100% for left and right alignment (added in Fix left and right aligmnent in children of Post Template #54997 to stop the placeholder disappearing inside the Post Template), so this PR leaves wrapping as it is.

  3. Left and right use /*rtl:ignore*/, so they stay on their physical sides. Before this change, Align left showed the image on the right in RTL; now left, center and right all match LTR.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@im3dabasia im3dabasia im3dabasia left review comments
@fabiankaegy fabiankaegy Awaiting requested review from fabiankaegy fabiankaegy is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

[Block] Post Featured Image Affects the Post Featured Image Block [Package] Block library /packages/block-library [Type] Bug An existing feature does not function as intended

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Featured Image Block: Center alignment does not work

2 participants

@Mustafabharmal @im3dabasia