-
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
Add settings "drawer" to Link Control #47328
Conversation
This is very rough and still a PoC. We need to
Help and assistance much appreciated 🙇 Questions
|
Size Change: +442 B (0%) Total Size: 1.31 MB
ℹ️ View Unchanged
|
Nice, I appreciate you included some basic animation as well: I think that animation could be sped up a little, though. .2s seems good. Should the actual drawer controls be below the settings icon? CC: @jameskoster |
I can give this a go. |
Screen.Capture.on.2023-01-26.at.19-17-13.mp4I updated so that the drawer is below the button as per the design @jameskoster provided. The one issue with this is the tab order. I was speaking away from Github with @richtabor and we felt it should be
To achieve this visual design whilst maintaining that tab order I've had to utilise the CSS I also sorted out the new borders. |
@jasmussen I changed this to 0.2s. It feels little janky I think because some of the inner element's layout causes layout to shift once the containers animation has completed. If you set the |
@joedolson I have updated the tab ordering. It is now:
I think this is what you were suggesting above? If you are able to confirm that would be greatly appreciated. |
Under what situations does the "text" input appear? |
Editing an existing link. |
@jasmussen @jameskoster I've:
Anything else you'd like me to fix up? Screen.Capture.on.2023-02-02.at.14-47-32.mp4cc @scruffian |
Flaky tests detected in c126405. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4103582292
|
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.
LGTM
@scruffian Thanks for the ✅. I found one UX question which is outstanding. What happens if you are not editing the link but you toggle the settings and then change the link text? How do you submit the changes? We cannot rely on ENTER (power user move). Should we hide the settings entirely unless you are editing the link? That way you can always click IMHO it would be best to always require the link to be being "edited" in order to make any changes. Aside: As a followup I'd like to make "open in new tab" require "Apply" as well. Also curious to hear from @WordPress/gutenberg-design. |
Yes. Edit should be the entry to changing the values (and then you see Cancel/Apply. |
I pushed an update which only shows settings controls if we are in "edit" mode. I will need to add a test for this. |
Feels much better now. It's clearer what action to take to edit the link, and to apply those changes.
Agreed. The auto-closing when you toggle the control isn't a great interaction currently. |
f2dd331
to
a88a3a9
Compare
Waiting on e2e test fixes to go ✅ |
@richtabor Are you happy to 👍 on behalf of |
@scruffian You still happy with your 👍 given the changes since you ✅ ? |
Yes, still Looks good to me. |
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.
LGTM
Hi! How would a plugin (say... Yoast SEO) go about filtering the values in the drawer? If allowed that'd remove the need for Yoast SEO and other plugins like it to have its own version of the Link Control, which we'd much prefer. |
Absolutely. I've been thinking about this a lot. Currently the answer is that there isn't a way but... As you may be aware you can already passing in I'm aware of Plugins that need to extend Gutenberg's built in usages of Link Control. It's a tricky problem but I have a couple of ideas which I'm hoping to tackle soon. These would involve
|
@paaljoachim Thanks for this thorough feedback. Much appreciated. I would defer to @jameskoster on much of it as he kindly undertook to provide the designs. For what it's worth here's my take. I can see that hiding I'm in two minds about moving the Text control. The feedback I have received in the past is that the Text control is underused and just adds visual noise. Perhaps we can try "hiding" it for now and then seek feedback from users as to its impact on UX? I'm not convinced either way. |
Hey Dave. |
@getdave yeah we'd need to be able to do more than just add in settings indeed. I think for our use case, you could even restrict what could be changed to |
@jdevalk I'd like to understand the requirements in more detail. I've raised this Issue to track it where the discussion can continue. |
Thanks! I've asked the Yoast team to get involved there. |
Just noting that I'd consider friction against adding 'open in a new tab' to be a positive change, since from an accessibility standpoint, opening links in a new tab is almost always a bad thing. |
What?
Implements a accordion-like panel and toggle for link settings.
All settings + the link text control are now hidden in the panel by default which must be expanded to reveal the settings.
Part of #47310
Why?
As shown in the revised design in #47310 this is important in order to accommodate future settings and also to reduce visual noise and clutter.
How?
Refactor component structure and implement accordion drawer.
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast
Screen.Capture.on.2023-01-26.at.19-17-13.mp4