Skip to content
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

LinkControl: Render edit view upon link creation #50892

Open
richtabor opened this issue May 23, 2023 · 8 comments · May be fixed by #50998 or #58279
Open

LinkControl: Render edit view upon link creation #50892

richtabor opened this issue May 23, 2023 · 8 comments · May be fixed by #50998 or #58279
Assignees
Labels
[Feature] Link Editing Link components (LinkControl, URLInput) and integrations (RichText link formatting) [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Block editor /packages/block-editor [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.

Comments

@richtabor
Copy link
Member

richtabor commented May 23, 2023

To edit a link, you need to first click on the link, see a preview of the link, then click "Edit link" to get the editing state.

Instead, I propose that when creating a link, the UI goes straight into the link editing view.

The effort in #57726 will allow for the link UI to remain open upon adding a link, while this issue covers directing the user to the edit view, rather than the link preview, upon first creating a link. This way, you will immediately have the full suite of link tools and settings right off, instead of having to click around to augment the link further.

Interacting with an existing link would still render the link preview.

Part of #50891

VIsual

Once #57726 is merged, when you first create a link, you are presented with the preview state of the LinkControl popover—like this:

297784641-46910857-eb70-4ca7-9fad-b74a7bed78b7

Instead, you should have the edit state. This way you may start manipulating the link further if you'd like to:

CleanShot 2024-01-18 at 10 11 06

Note that this should only occur when you first create the link.

@richtabor richtabor added [Package] Components /packages/components [Feature] Link Editing Link components (LinkControl, URLInput) and integrations (RichText link formatting) labels May 23, 2023
@richtabor richtabor mentioned this issue May 23, 2023
13 tasks
@getdave
Copy link
Contributor

getdave commented May 25, 2023

This change seems solid as well. I much prefer that we avoid a click but retain the preview of the link/entity at the top. Losing the image preview doesn't feel like a big deal to me, except from maybe if we use this control for media in which case we'll need to optimise the UI around that special use case.

@richtabor
Copy link
Member Author

Losing the image preview doesn't feel like a big deal to me, except from maybe if we use this control for media in which case we'll need to optimise the UI around that special use case.

Do you mean if you've linked directly to an image file or attachment page?

@getdave
Copy link
Contributor

getdave commented Sep 7, 2023

Worthing noting that this preview step results in a11y problems so that's another good reason to remove it entirely #54063 (comment)

@alexstine
Copy link
Contributor

👍 Up vote.

@alexstine alexstine added the [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). label Sep 7, 2023
@jeryj
Copy link
Contributor

jeryj commented Sep 7, 2023

Definitely in favor of removing the preview or combining it into the edit flow rather than a standalone popover. Full rationale here: #54063 (comment).

@bph bph moved this from In Progress to Punted to 6.5 in WordPress 6.4 Editor Tasks Sep 28, 2023
@bph bph moved this to 🏗️ In Progress in WordPress 6.5 Editor Tasks Nov 23, 2023
@richtabor richtabor changed the title LinkControl: Remove interstitial link preview step LinkControl: Remove interstitial link preview step upon link creation Jan 11, 2024
@richtabor richtabor changed the title LinkControl: Remove interstitial link preview step upon link creation LinkControl: Render link edit view upon link creation Jan 11, 2024
@richtabor richtabor changed the title LinkControl: Render link edit view upon link creation LinkControl: Render edit view upon link creation Jan 11, 2024
@getdave
Copy link
Contributor

getdave commented Jan 24, 2024

I'd like to ad some context about the term "token" that I've used on #57755.

The idea is that sometimes a link will be dynamic - i.e. it will be linking to a Post within WordPress rather than a static URL.

This typically happens when blocks such as Navigation store a reference to the Post being linked to (e.g. Post ID) within the data created by Link UI.

So for example it might store:

{
id: 1,
title: 'Sample Post'
url: '/sample-post/`
}

However if "Sample Post" changes (e.g. the slug is updated to /my-new-post/) the the Link UI still ends up linking to /sample-post/.

With the concept of a "token" we're conveying to the user the difference between linking to a Post vs a Static URL. When linking to a Post you would not be able to modify the URL of the link (we hide the field) because it's dynamic.

When linking to a static URL you can edit the URL as much as you'd like because it won't change (or a least it's not expected).

Further rationale can be understood by exploring #46891.

@getdave
Copy link
Contributor

getdave commented Feb 6, 2024

I don't think this one will land in WP 6.5 and needs punting to WP 6.6. We just need more time to refine the experience that's been introduced with the PRs that have been merged.

This has been a surprisingly complex effort.

@getdave getdave moved this from 🏗️ In Progress to 🦵 Punted to 6.6 in WordPress 6.5 Editor Tasks Feb 6, 2024
@colorful-tones
Copy link
Member

Hi folks,
We are only one week away from the Beta 1 cut-off date for WordPress 6.6. This issue hasn’t seen any movement in a while, so we (the editor triage leads of the 6.6 release) have decided to remove it from the WordPress 6.6 Editor Tasks project board.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Link Editing Link components (LinkControl, URLInput) and integrations (RichText link formatting) [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Block editor /packages/block-editor [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.
Projects
None yet
7 participants