Add settings "drawer" to Link Control #47328
Conversation
getdave
added
Needs Design Feedback
|
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 considered it, but felt it a little strange to have interactive UI beneath the confirmation/dismissal actions:
It might not be so bad in practise though, perhaps worth a try? |
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
|
|
@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. |
getdave
force-pushed
the
add/settings-drawer-to-link-control
branch
from
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 ✅ ? |
getdave
added
[Type] Enhancement
|
Yes, still Looks good to me. |
Before:Selecting words to become links: Adding the URL: Editing a link: After:Selecting words to become links: Adding the URL: Editing a link: Before clicking toggle link settings. After clicking toggle link settings. What I like with the After new approach is that the word is selected as it becomes obvious which words are selected as the link. I also like the obvious Cancel and Apply link/buttons. I do find it interesting that a new link toggle setting icon has been added. The only thing I miss from the new approach is having the Toggle link settings open by default showing the Open in new tab toggle. Hmm I am not sure that link Text should be added into the Toggle link settings. All in all the link settings could add various less used link options, and not so much the more used ones. Even though the Open in new tab toggle is a part of it. There are probably other less used link settings people ask for that would be added into the link settings. A close to home real life case. Another case. |
|
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