Site Logo: Prevent focus loss when updating media from the sidebar #68621
+32
−52
Conversation
This file contains 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
Mamaduka
added
[Type] Bug
Mamaduka
commented
Jan 13, 2025
Comment on lines
+621
to
+628
| renderToggle={ ( props ) => ( | ||
| <Button { ...props } __next40pxDefaultSize> | ||
| { temporaryURL ? ( | ||
| <Spinner /> | ||
| ) : ( | ||
| props.children | ||
| ) } | ||
| </Button> |
There was a problem hiding this comment.
Fixes spacing inconsistency with the button. See #68084.
|
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. |
Mamaduka
commented
Jan 13, 2025
| const { | ||
| alt_text: alt, | ||
| source_url: logoUrl, | ||
| slug: logoSlug, | ||
| media_details: logoMediaDetails, | ||
| } = mediaItemData; | ||
| } = media ?? {}; |
There was a problem hiding this comment.
The media can be null, where the default parameter isn't used and triggers an error when deconstructing. Using fallback here prevents that.
Mamaduka
commented
Jan 13, 2025
| @@ -530,7 +523,7 @@ export default function LogoEdit( { | |||
| name: ! logoUrl ? __( 'Choose logo' ) : __( 'Replace' ), | |||
| onSelect: onSelectLogo, | |||
| onError: onUploadError, | |||
| onRemoveLogo, | |||
| onReset: onRemoveLogo, | |||
There was a problem hiding this comment.
Just mapping callback to support prop.
|
Size Change: -183 B (-0.01%) Total Size: 1.84 MB
ℹ️ View Unchanged
|
This was referenced Jan 13, 2025
Mamaduka
commented
Jan 13, 2025
| mediaItemData={ mediaItemData } | ||
| /> | ||
| } | ||
| popoverProps={ {} } |
There was a problem hiding this comment.
This prop was doing nothing. The popoverProps is undefined by default.
|
Thanks for working on this @Mamaduka I cnn confirm the focus loss no longer occurs. To my understanding this also changes the UI, as in: previously the button opened the media modal dialog directly, and now it opens the dropdown with media modal / upload choices. Is that correct?
|
Yes, there's a small change to UI/UX, making it more consistent with similar patterns in the editor. For example, the background image control, which can be enabled via block supports. The feature can be tested via Group block. Screenshot
|
|
I'm all for consistency, just wanted to illustrate the UI change for history. |
Thanks, @afercia! |
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?
PR fixes a focus loss bug when media is selected or reset via the sidebar's media panel. I've also simplified the media control composition; it now only uses the
MediaReplaceFlowcomponent.Why?
Improves accessibility of the component.
Testing Instructions
Testing Instructions for Keyboard
Same.
Screenshots or screencast
CleanShot.2025-01-13.at.09.03.26.mp4