-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Made SiteLogoReplaceFlow always available in the Site Logo block toolbar #63499
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. |
Size Change: +709 B (+0.04%) Total Size: 1.76 MB
ℹ️ View Unchanged
|
+ show "Reset" when there is a logo uploaded
4e21760
to
089de65
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
One thing that bothers me a bit is that when I press the reset button only the reset button disappears but the popover remains open.
14651ab4a6b4bea6235c47f07be15619.mp4
I would expect the popover to disappear when reset, just like with the sidebar.
If the ideal behavior is for the popover to disappear when you press the reset button, I'd be happy to help you update the code to achieve that.
Agreed. Sure thing, I'd appreciate it. |
// Focus the toggle button and close the dropdown menu. | ||
if ( ref.current ) { | ||
const [ toggleButton ] = focus.tabbable.find( ref.current ); | ||
toggleButton?.focus(); | ||
toggleButton?.click(); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I added this code to fix the issue pointed out in this comment. This code ensures that when you press the Reset button, the dropdown closes and focus returns to the block toolbar button.
Before
before.mp4
After
after.mp4
@Mamaduka I've used the code here as a guide, but do you know of any other good approaches?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe we should update the MediaReplaceFlow
to support the "function as a child" component pattern. Then, we can pass onClose
as a prop and let the dropdown in MediaReplaceFlow
handle focus for us. The media upload buttons handle focus return using the same method.
I've proof of concept code that I can push on this branch.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for your advice.
Do you mean to change this line to the following?
{ typeof children === 'function'
? children( { onClose } )
: children }
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes. That's correct.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@t-hamano, did I assume correctly that you want to work on the suggested changes?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, I would be happy to work on the suggested changes. May I submit that in a separate PR?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sure. What works best for you 👍
In this PR, I updated the children of the a73f81ad57532ddd7b7a9e6c5c0f98ae.mp4I also added a note about the changes to |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the follow-up, @t-hamano!
Everything works as expected ✅
Makes the SiteLogoReplaceFlow always available in the toolbar, to render "Choose Site Logo" when there is no logo, and "Replace" when there is one. Part of #63327.
The "Choose Site Logo" string should map to the same as what we decide for the Inspector, as I explored in #63498.
Why?
It should be clearer how to add a site logo and using an existing affordance that we apply elsewhere is much more supportive of the user experience.
Testing Instructions
Screenshots or screencast
Added by @t-hamano
The
SiteLogoReplaceFlow
component is a wrapper component forMediaReplaceFlow
, and the Reset button is rendered as a child ofMediaReplaceFlow
. When the Reset button is pressed, it is expected that the popover will be closed and the focus will return to the block toolbar button, but currentlyMediaReplaceFlow
cannot callonClose
from the child.Therefore, in this PR, we will update
MediaReplaceFlow
to support "function as a child". function as a child can receiveonClose
as a prop.