Make sample permalink clickable

[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

Before:

After:

Lookes good!

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.

18306.2.diff​: removed underline.

18306.3.diff​ removes remaining calls to makeSlugeditClickable.

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

Punting enhancements from 3.3.

This will be good.

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.

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 :)

18306.5.diff looks good.

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

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"`.

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.

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

and after

Refreshed after [21592]

#21208 was marked as a duplicate.

Replying to lessbloat:

and after

We should probably disable the link while editing the slug, since to the user it looks like in this case you'll be linked to ​http://localtest.com/Dropbox/wpcore/trunk/

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:

+1 for the bold slug.

+1 more for bold slug

Slug made bold in 18306.9.diff.

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).

refresh

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

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.

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.

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.

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.