Link UI: Design Iteration #28755
Link UI: Design Iteration #28755
Conversation
shaunandrews
requested review from
ajitbohra,
cameronvoell,
ellatrix and
guarani
as code owners
shaunandrews
added
[Block] Navigation
|
Size Change: -1.37 kB (0%) Total Size: 1.39 MB
ℹ️ View Unchanged
|
|
The new design looks nice. Whats the reason for removing the "open in a new tab" options? Have you made any user research or just for visual reasons? |
It felt weird being there all the time. I definitely want to bring it back, just haven't gotten to it yet. |
|
This is a wild cleanup, nice! And the use of the block-UI chrome for the link dialog feels perfect here, it makes me think we should use the same material for this one:
A few notes from testing. In this testing, the word "wondered" is highlighted. Before:
After:
Notes:
Like Soean I think we should keep the ability to open externally, because we have no other good place to put that control. But your reduced design, I think, can have the cake and eat it too, like so: when you first open the dialog and there's just an input field, it's just that, an input field:
Then after you start typing, the option would pop out at the bottom, here:
I think it would fit right into the flow. Finally, your PRs of late have been amazing 👌 — one small tip, several smaller cleanup PRs might be less overwhelming to tackle from a code standpoint, so we can get the goodness faster! Nice work Shaun. |
|
The issue was discussed during a Design Triage. Link to Slack: https://wordpress.slack.com/archives/C02S78ZAL/p1612888787368200 |
shaunandrews
force-pushed
the
update/link-ui-design
branch
from
532df9d
to
700feca
Compare
|
I've pushed a bunch of changes to this PR and updated the description/GIFs above. The big changes are bringing back the "Open in new tab" option and adjustments to creating a new draft post/page within the Navigation Link block.
I've reverted the change and the dialog is now centered again.
Its still there. Are you unable to do so? Just type anything in the url input and hit enter or click the submit button. |
shaunandrews
added
the
Mobile App - i.e. Android or iOS
Did you test it trying to link the last word of the line of text? Where is the dialog placed then? Do you have to select text first, to create a link? |
Yes. It's centered below the word.
No. If no text is selected the URL will be inserted as linked text where the caret currently resides. |
|
Nice clean up. Something is off about this step: The URL feels almost superfluous in that you can't click on it to edit or to view the link. I think you should be able to do one or the other. I want to just skip right past this whole screen and land right in the edit view, with the addition of a |
That makes no sense to me. "Edit" means edit the URL, not the page it points to. |
I had the URL linked (instead of the Visit button) and I had it as a button (instead of the Edit button), but decided that it was more clear to have explicit Edit and Visit buttons. The URL is purely informational, and I guess could be useful to copy the text if you needed.
Do you mean the protocol? As far as I can tell, |
|
Couple of minor comments: Should the whole link change color on hover here?
This icon has always felt a little ambiguous to me. Now that we have the "Edit" and "Visit" buttons in the other state, could this also be a "Done" button or similar? Speaking of the "Edit" and "Visit" buttons, I noticed that the order of these buttons is inconsistent with other situations in which primary / regular buttons appear adjacently (Top bar, modals). Is there value in being consistent there? 🤔 Small z-index issue occuring here:
I think I saw this mentioned elsewhere, but in the old design the selected text remains subtly highlighted when adding a link:
This doesn't seem to have carried over to the new design. Excellent work here, I'm excited for this update :D |
This is currently broken (in I'll look at the other issues and see what I can do. |
|
I've pushed some updates to this PR. Here's how it looks now:
-- The z-index issue @jameskoster mentions exists in |
|
Comparing versions. WP 5.6.1 version. (GB not activated) PR version. The version in this PR is a lot tighter and takes less space. WP 5.6.1 version. (GB not activated) PR version. From the PR version I am wondering if we should add back in the open in new tab icon seen in the WP 5.6.1 version next to the link. Bottom line is that the newest iteration feels really well done. |
I just do what the computers tell me to do...
…gets focus first.
shaunandrews
force-pushed
the
update/link-ui-design
branch
from
d6d9908
to
224a8e9
Compare
|
Closing as the UI has evolved significantly since this. |
The current Link UI (
link-control) looks a little out of place with the latest block UI (See #26351). Here's how the current Link UI looks and works:This PR reduces much of the footprint of the interface, and aims to streamline the flow. Here's how this PR looks now:
Here's some of the changes I've made:
isAlternateproperty which gives the UI dark borders and removes the drop-shadow.