Format Library: Add Replace button to inline image#70414
Format Library: Add Replace button to inline image#70414Sukhendu2002 wants to merge 3 commits intoWordPress:trunkfrom
Conversation
|
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. |
t-hamano
left a comment
There was a problem hiding this comment.
Thanks for the PR! I think this PR is a great enhancement.
One improvement would be to provide a value prop to the MediaUpload component, which can indicate which image is currently selected when the media dialog is opened.
Diff example
diff --git a/packages/format-library/src/image/index.js b/packages/format-library/src/image/index.js
index 24fa29c291..9c14c0daf5 100644
--- a/packages/format-library/src/image/index.js
+++ b/packages/format-library/src/image/index.js
@@ -43,7 +43,7 @@ export const image = {
};
function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
- const { style, alt } = activeObjectAttributes;
+ const { style, alt, className } = activeObjectAttributes;
const width = style?.replace( /\D/g, '' );
const [ editedValues, setEditedValues ] = useState( {
@@ -51,6 +51,8 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
alt: alt || '',
} );
+ const imageId = className?.replace( /wp-image-(\d+)/, '$1' );
+
useEffect( () => {
setEditedValues( {
width: style?.replace( /\D/g, '' ),
@@ -168,6 +170,7 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
<MediaUpload
allowedTypes={ ALLOWED_MEDIA_TYPES }
onSelect={ handleImageReplace }
+ value={ imageId }
render={ ( { open } ) => (
<Button
variant="secondary"| useEffect( () => { | ||
| setEditedValues( { | ||
| width: style?.replace( /\D/g, '' ), | ||
| alt: alt || '', | ||
| } ); | ||
| }, [ style, alt ] ); |
There was a problem hiding this comment.
What is the purpose of this useEffect hook?
There was a problem hiding this comment.
This ensures that after replacing an image, the form fields properly reset to match the new image's properties.
There was a problem hiding this comment.
In that case, I think we should update it within handleImageReplace rather than using a hook.
This isn't entirely accurate. You can replace the image, but it may be less intuitive. I've even shared a screencast in the issue - #25909 (comment). |
|
I didn't know that we could replace the image by clicking the menu item in the More options. Perhaps we should discuss the new UX a bit more. |
100%. I think that if we can make the current option more intuitive and obvious, that could also resolve the issue. P.S. I think the proposed "Replace" button also breaks the current Modal/Popover design pattern; typically, they render a "Cancel" button alongside the "Submit/Apply" button. Example
|
|
@Sukhendu2002, see the recent updates in the issue - #25909 (comment). Let us know if you would like to continue working on this enhancement. |
What?
Closes: #25909
This PR adds a "Replace" button to the inline image format popover in the Gutenberg editor. Currently, once an inline image is inserted, there's no easy way to replace it with another image without removing it completely and inserting a new one. This enhancement improves the user experience by making image replacement more discoverable and intuitive, similar to how image blocks work.
Testing Instructions
Screenshots or screencast
Screen.Recording.2025-06-13.at.5.01.50.PM.mov