WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 8 weeks ago

#18306 new enhancement

Make sample permalink clickable

Reported by: scribu Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 3.2
Component: Editor Keywords: has-patch needs-testing
Focuses: Cc:

Description (last modified by scribu)

Following the lead from #17282, the "View Post" button next to the sample permalink is also just a link to another screen.

I propose we get rid of it and make the sample permalink itself clickable

Attachments (13)

18306.diff (3.5 KB) - added by scribu 3 years ago.
before.png (10.4 KB) - added by scribu 3 years ago.
after.png (9.3 KB) - added by scribu 3 years ago.
18306.2.diff (3.6 KB) - added by scribu 3 years ago.
18306.3.diff (4.6 KB) - added by scribu 3 years ago.
18306.4.diff (3.5 KB) - added by nacin 2 years ago.
18306.5.diff (4.4 KB) - added by helenyhou 2 years ago.
18306.6.diff (4.4 KB) - added by sabreuse 21 months ago.
18306.7.diff (4.5 KB) - added by lessbloat 21 months ago.
18306.8.diff (4.5 KB) - added by SergeyBiryukov 20 months ago.
Refreshed after [21592]
18306.9.diff (4.5 KB) - added by lessbloat 19 months ago.
18306.9-refresh.diff (4.5 KB) - added by DrewAPicture 19 months ago.
refresh
18306.10.diff (7.1 KB) - added by helenyhou 19 months ago.

Download all attachments as: .zip

Change History (48)

scribu3 years ago

scribu3 years ago

scribu3 years ago

comment:1 scribu3 years ago

  • Description modified (diff)

Before:

http://core.trac.wordpress.org/raw-attachment/ticket/18306/before.png

After:

http://core.trac.wordpress.org/raw-attachment/ticket/18306/after.png

comment:2 ramiy3 years ago

Lookes good!

comment:3 jane3 years ago

  • Keywords dev-feedback added; ux-feedback removed
  • Milestone changed from Awaiting Review to 3.3
  • Version set to 3.2

Fine by me. Can you remove the underline, though? I know we have inconsistencies here and there (to be cleaned up in the CSS purge) but the general standard for admin links is blue with no underline. No reason we can't do this for 3.3, I'd think.

scribu3 years ago

comment:4 scribu3 years ago

  • Keywords commit added; dev-feedback removed

18306.2.diff: removed underline.

scribu3 years ago

comment:5 scribu3 years ago

  • Keywords needs-testing added; commit removed

18306.3.diff removes remaining calls to makeSlugeditClickable.

Would like to get another pair of eyes on the interaction.

comment:6 ryan3 years ago

  • Milestone changed from 3.3 to Future Release

Punting enhancements from 3.3.

comment:7 jane2 years ago

  • Milestone changed from Future Release to 3.4

comment:8 hberberoglu2 years ago

This will be good.

comment:9 husobj2 years ago

  • Cc ben@… added

comment:10 nacin2 years ago

I tested out the interaction, but the one thing it removes is the clickable yellow-highlighted slug. This was really handy, to the point where I always click that and never the Edit link.

We *could* keep both interactions. If you click the slug itself, you get the input shown. If you click the rest of the link, it opens in a new window.

I can apply these two patches to sparklemotion so Jane can take a look. Uploading the variant as 18306.4.diff.

nacin2 years ago

helenyhou2 years ago

comment:11 helenyhou2 years ago

18306.5.diff

A little more CSS:

  • Hover on underline instead of orange - makes it clearer that it's the whole URL that's the link
  • Text cursor when hovering over the editable slug
  • Blue :)

comment:12 ocean902 years ago

18306.5.diff looks good.

comment:13 nacin2 years ago

  • Keywords ui-feedback added
  • Milestone changed from 3.4 to Future Release

Good, but too late for a UI change like this.

comment:14 helenyhou21 months ago

  • Keywords ui-feedback removed
  • Milestone changed from Future Release to 3.5

comment:15 helenyhou21 months ago

  • Keywords needs-refresh added

comment:16 azaozz21 months ago

Instead of making the link work (clickable) and having the last part of it open for editing, i.e. still clickable but acts differently, would it be less confusing to have the word "Permalink:" be the link to view the post, complete with a `title="View Post"`.

sabreuse21 months ago

comment:17 sabreuse21 months ago

attachment:18306.6.diff is a refresh of the previous patch.

That said, I had the same thought as azaozz while I was testing it -- it's strange and a bit confusing to click what looks like a normal link and have it sometimes open and sometimes pop into an editing mode depending on where exactly I clicked. Uploading the patch anyway, in case that's the way we want to go.

comment:18 scribu21 months ago

  • Keywords needs-refresh removed

lessbloat21 months ago

comment:19 follow-up: lessbloat21 months ago

18306.7.diff makes a few small tweaks to sabreuse's 18306.6.diff

I stripped out the yellow edit link at the end - making the entire URL link to the post (including the /media-test2/ part). To edit the permalink, you'd simply click the "Edit" button.

Before clicking the edit button

http://f.cl.ly/items/2Z2v2W3G23040f0S2R3H/slug-link.7.jpg

and after

http://f.cl.ly/items/1x0b3L1m2h0d3W11223p/slug-after-clicking-edit-link.jpg

Last edited 21 months ago by lessbloat (previous) (diff)

SergeyBiryukov20 months ago

Refreshed after [21592]

comment:20 nacin20 months ago

#21208 was marked as a duplicate.

comment:21 in reply to: ↑ 19 ericlewis20 months ago

[deleted comment]

Last edited 20 months ago by ericlewis (previous) (diff)

comment:22 helenyhou19 months ago

I rather miss the yellow highlight because it indicated which part of the permalink you are really able to edit. Clicking that part to edit was nice, but once the rest of the permalink is a link, the interaction is indeed kind of weird. Would like to see if we can still indicate which portion is the editable portion, though.

As an example, a mockup from lessbloat with the slug portion bolded:

http://f.cl.ly/items/1Y1i3a362G3W042E3P1C/bold-w-link.jpg

comment:23 scribu19 months ago

+1 for the bold slug.

comment:24 husobj19 months ago

+1 more for bold slug

lessbloat19 months ago

comment:25 lessbloat19 months ago

Slug made bold in 18306.9.diff.

comment:26 helenyhou19 months ago

Testing the patch - I rather like the bold! In FF, clicking the input will only put the cursor at the beginning and not anywhere else. There's also a flash of outline in both FF and Chrome (OSX here).

comment:27 nacin19 months ago

  • Keywords needs-refresh added

DrewAPicture19 months ago

refresh

comment:28 DrewAPicture19 months ago

  • Keywords needs-refresh removed

comment:29 helenyhou19 months ago

Issues from comment 26 remain. Text in the input should also probably not be bold.

comment:30 helenyhou19 months ago

18306.10.diff removes the link when editing the slug. Turns out inputs inside links are a bad idea, and probably not valid anyway. I'm still personally liking the bold.

helenyhou19 months ago

comment:31 follow-up: nacin19 months ago

  • Keywords punt added

I went through this today. I think there are a few UX issues:

On drafts, it is not clickable. Normally, with drafts, a button doesn't exist. But I think hiding a button is different from text being linked versus not. Lower severity.

When you change the link, the hyperlink is updated to the new link. When you click it, you'll end up with a 404 (unless you get lucky and the permalink guessing canonical code kicks in). We could not update the hyperlink to the new link, but then you'd have a link showing one thing, and leading to another place. This is more blocking, and helenyhou and I agreed in IRC it should mean punt.

I'm just not convinced this results in a better experience.

comment:32 scribu19 months ago

  • Keywords punt removed
  • Milestone changed from 3.5 to Future Release

comment:33 in reply to: ↑ 31 ; follow-up: helenyhou18 months ago

  • Component changed from UI to Editor

Replying to nacin:

When you change the link, the hyperlink is updated to the new link. When you click it, you'll end up with a 404 (unless you get lucky and the permalink guessing canonical code kicks in). We could not update the hyperlink to the new link, but then you'd have a link showing one thing, and leading to another place.

I think this might actually mean this is a wontfix, as I have yet to imagine what the working alternative might be.

comment:34 in reply to: ↑ 33 nacin18 months ago

Replying to helenyhou:

Replying to nacin:

When you change the link, the hyperlink is updated to the new link. When you click it, you'll end up with a 404 (unless you get lucky and the permalink guessing canonical code kicks in). We could not update the hyperlink to the new link, but then you'd have a link showing one thing, and leading to another place.

I think this might actually mean this is a wontfix, as I have yet to imagine what the working alternative might be.

The same thing happens to the current "View Post" button. This, however, is less obvious when the URL is not shown.

To fix this, we should probably link to the non-pretty permalink when we need to update the target of "View Post" to ensure canonical sends us to the right place. The same thing could happen for the link in the toolbar, automatically.

comment:35 ircbot8 weeks ago

This ticket was mentioned in IRC in #wordpress-dev by helen. View the logs.

Note: See TracTickets for help on using tickets.