Repository navigation
Media editor: Compute the open panel instead of setting it in an effect - #85881
Merged
Merged
Conversation
…ffect The effect picked the default panel after each render where the width or the media type changed, using refs to remember what the user had chosen. Those choices are now state, and the open panel and its tab are computed from them during render, so the first commit already shows the right panel.
🤖 PR meta 🤖🎉 PropsIf 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. Props Bot commandsYou can trigger Props Bot actions by commenting on this PR:
Updated as activity occurs, without notifying anyone named here. Add the 📦 Bundle sizeSize Change: -32 B (0%) Total Size: 8.56 MB 📦 View Changed
⚡ PerformanceShow the resultsClient side metrics exclude the server response time. front-end-block-theme
front-end-classic-theme
media-processing
media-upload
post-editor
site-editor
🏁 Flaky testsSome tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information. Undo restores the post selection when another synced entity is loaded (RTC WebSocket) in
|
ramonjd
marked this pull request as ready for review
October 29, 2026 02:57
andrewserong
added
[Feature] Media
andrewserong
approved these changes
Oct 29, 2026
andrewserong
left a comment
andrewserong
left a comment
Contributor
There was a problem hiding this comment.
LGTM! Preserves the expected behaviour:
✅ Opening the cropper on mobile, when you toggle the sidebar open it defaults to Details
✅ On desktop, the sidebar defaults to open, with Crop selected
✅ Resizing the browser window remembers the user's choices as expected
✅ If I've never toggled the sidebar, then dragging from big to small to big will re-open the sidebar
✅ If I've intentionally closed the sidebar, resizing doesn't re-open it unexpectedly
Anyway, you described all this in the PR description. Looking good!
| // dragging the window narrow should still hand the canvas the full width. | ||
| const selectPanel = useCallback( ( panel: string ) => { | ||
| setChosenTab( panel ); | ||
| setChosenPanel( ( open ) => ( open === undefined ? open : panel ) ); |
Contributor
There was a problem hiding this comment.
Almost not worth saying anything about, but it took me a second to realise that open in this case is the state of whether a panel has been chosen/selected by a user. I'm used to seeing open as the name of a function... if you wanted to rename, we could call this chosen instead? Anyway, no need to update, I know what it is now 😄
Member
Author
There was a problem hiding this comment.
Yes! Whatever makes it clearer. Let's do that. I appreciate the review.
`open` read like a function name. The value is the panel the user chose, so call it `chosen`.
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
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?
Follow up to #85880. Removes the effect in the media editor that picks the open settings panel, and computes the panel during render instead.
Why?
The effect ran after each render where the width or the media type changed, and set the panel from there. So a render with the wrong panel was committed first, then corrected: with the attachment already loaded, the editor committed Details and then switched to Crop. See Adjusting some state when a prop changes.
How?
chosenPanel(undefineduntil the user opens or closes the panel, thennullor the open panel's id) andchosenTab(nulluntil the user picks a tab).chosenTab, or Crop for an image on a wide screen, or Details otherwise. The open panel ischosenPanel, or until the user has toggled it, that tab on a wide screen and nothing on a narrow one.Testing Instructions
No UI changes. There should be no regressions in the way the panels work.
2026-10-29.13.53.29.mov
User of AI
Claude hunted down the
useEffectand culled it