Featured image block: add focal point controls#73113
Open
Conversation
Adds focal point picker control to the Featured Image block, allowing users to adjust the image position. Implementation follows the same pattern as the Cover block, including live preview while dragging the focal point. Fixes #20321 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
annezazu
added
the
[Block] Post Featured Image
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: +165 B (+0.01%) Total Size: 2.47 MB
ℹ️ View Unchanged
|
Member
|
Focal point is an image specific setting. The issue here would be to save the focal point as an attribute of the featured image itself and use it when rendering. If we save focal point coordinates in the block, then all images are going to use the same value, which defeats the purpose. |
tyxla
reviewed
Nov 9, 2025
Comment on lines
+243
to
+244
| // eslint-disable-next-line react-compiler/react-compiler | ||
| imageElement.current.style.objectPosition = mediaPosition( value ); |
Member
There was a problem hiding this comment.
We won't need the ESLint ignore if we use setProperty():
Suggested change
| // eslint-disable-next-line react-compiler/react-compiler | |
| imageElement.current.style.objectPosition = mediaPosition( value ); | |
| imageElement.current.style.setProperty( | |
| 'objectPosition', | |
| mediaPosition( value ) | |
| ); |
Member
|
I would agree that this here is not the right approach. Adding the focal point to the featured image block would apply the same focal point to all featured images. Instead what I have done on almost all my client projects is add a custom piece of post meta to store the featured image coordinates which then get applied in the featured image rendering. |
Contributor
I agree with this.
One possible solution could be to extend the featured image |
|
I mentioned this in the Issue thread, but having a primary focal point selector directly in the media library would be the ideal solution. This would allow for a global focal point to be set for each image (and it could always be overridden in discrete usage like a Cover block). We use We're currently using this plugin to achieve that: https://github.com/hirasso/focal-point-picker. Having this baked into WP Core would be amazing. |
|
I've also taken the post meta approach in my plugin which I've found to work quite well. In considering whether to store the focal point on the post (i.e. on which a featured image is set) or the media item (i.e. the image set as the featured image), I went with the post because I can imagine situations where people use the same image for multiple posts and might want different focal points. In that sense, it's more like alt text than the attachment post's title. Doing this allows one to automatically apply the focal point in all block and PHP template contexts. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
7 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Adds focal point picker to the Featured Image block. This partially addresses #20321 by adding it to this block. This impacts both the Site Editor controls where you get a grey box that you can drag around for the focal point and in the Post Editor if you add a featured image block and it's able to pull the featured image in.
Why?
Users want the ability to control which part of the featured image is visible when using object-fit (cover/contain), similar to the Cover block. You can currently set the Cover image to a featured image and set focal controls as well so this helps close the loop.
How?
focalPointattribute to block.jsonobject-positionTesting Instructions in the block editor
Testing Instructions in the site editor
Screenshots or screencast
focal.control.post.featured.miage.mov