The Copy button of the PostURL shouldn't be placed in the slug input

[afercia]

Description

Noticed while working on #61196 / #63669

In the PostURL popover, there is a Copy button that is visually placed within the slug input field. As such, it is visually associated with the slug value. Screenshot:

As a user, I would expect the Copy button to copy the value that is inside the input field, because that's what the UI is showing me.

Instead, the Copy button actually copies the full permalink that is shown below the input field.

Following the example in the screenshot above:

• The input field shows /my-post-title.
• The copy button is labeled Copy and is visually associated with the input field.
• Clicking the button copies the full permalink http://localhost:8889/my-post-title/ instead.

I'm not sure this is a good UI as it is potentially confusing for users. Also, it is inconsistent with other UIs where the Copy button actually copies the value shown in the input field.

Step-by-step reproduction instructions

See above.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

[afercia]

In #57168 (comment) @SaxonF pointed out a few interesting considerations including:

A fairly standard pattern is more closely mapping copy icon to the actual value being copied, either within the input for example or just outside.

In this cas, 'the actual value being copied' isn't the one of the input. It's the full permalink shown below the input.

I'd appreciate some design feedback @WordPress/gutenberg-design

[richtabor]

In this cas, 'the actual value being copied' isn't the one of the input. It's the full permalink shown below the input.

Yes, it's not ideal having the copy button copy the whole link, but next to the slug. This should be cleaned up. Maybe the copy icon to the right of the full URL. And a snack bar notification confirming the copy.

[t-hamano]

There have been some suggestions for changes to the location of the copy button.

• Restore the terms 'Permalink' and 'Slug' in the PostURL user interface #61196 (comment)
• Fix: The Copy button of the PostURL shouldn't be placed in the slug input #63706 (comment)
• Update URL popover #56381 (comment)
• Update URL popover #56381 (comment)