Restore the terms 'Permalink' and 'Slug' in the PostURL user interface

[afercia]

Description

Splitting this out from #56381 (comment)

In #60632 some long-established temrinology regartding the 'post permalink' has been changed. I'm not sure there has been a broader discussion to validate whether these changes are any good for users. I'd liek to start a broader discussion about that.

Current state on trunk, where the new UI uses the term 'Link':

While I'd agree that, if I had to explain tp a complete newbie or to non-tech-savvy users what to edit here, I would use the most simple phrasing e.g. 'Edit the post link', I'd also note that, for ages, WordPress has been using its own specific terminology:

Permalink

The term 'permalink' has been for ages one of the most prominent terminology used in WordPress. For years, it appeared right below the post title, in a very prominent place:

Even though it's a somewhat 'technical' term, WordPress users are very familiar with what a 'Permalink' is.

The admin menu uses the same term under Settings > Permalinks at wp-admin/options-permalink.php

Slug

The term 'Slug' or 'URL Slug' has been used in WordPress for ages as well. I can count around 30 occurrences of the term 'slug' used within transtlatable strings.

Sometimes this term is used for objects other than a post, such as plugins, widgets, patterns, font collections, etc. Regardless, it's a widely used term and WordPress users are familiar with it.

Concerns

#60632 changed the terms used in the 'edit permalink' user interface after very little discussion. I'm not sure such changes should be done that lightly. I'm not aprioristically opposed to changes but I definitely think changes that impact long established conventions should be validated by user testing. In absence of user testing that validates the proposed change performs better, we should just avoid to introduce such changes.

In this specific case, personally I don't see a good reason for this change.

Also, I'd like to point out the new terminology 'Link' is technically incorrect. Both in the settings panel and in the popover, 'Link' is now the label for the last part of the URL However, in this UI, users can edit the last part of the URL. they can't edit the 'Link'. In everyday's language, although a little incorrectly, the term 'Link' is used to indicate the full URL.

Overall, my question is: why change these terms? In which way this change makes the user experience any better?

I would say a more wise approach would be to not change long established conventions. Although both terms 'permalink' and 'slug' are a little technical, to me there's no good reason to stop using them. Rather, the Editor UI should a better job to explain new users what they are about.

More screenshots of the admin UI where the Permalink and Slug terms are still in use:

Step-by-step reproduction instructions

• Edit a published post (to make sure it has a saved slug).
• In the Post settings panel, observe the slug is now called 'Link'.
• Click the slug to open the popover.
• Observe the popover title is 'Link'.
• Observe the input field has an aria-label attribute 'Link'.

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]

Previously in WordPress 6.5:

The Post panel settings shows, or at least attempts to show, the full URL. This is actually what WordPress calls the 'permalink', i.e. the full URL:

In the popover, the term 'permalink' is used incorrectly because that's actually the slug:

[afercia]

For some history: at the beginning of this Gutenberg project, the 'Permalink UI' has been discussed at length. To make an informed decision, I would suggest everyone to do some GitHub archeology and read the discussions on the issues and PRs related to the permalink UI.

The root issue with the permalink UI is that the post URL may be very long. In order to show the full URL, the permalink UI should be placed in a spot that provides sufficient width to show long content. The settings panel is, by its own nature, limited in width.

As a consequence, efforts have been made to attempt to display the permalink in a 'smart way', which resulted in truncating the text. However, that is less than ideal.

In 6.5., this (truncated permalink in the settings panel):

Is clearly less usable then the UI in the Classic editor, which does a better job to show long URLs:

Also, the Classic Permalink UI uses some smart handling of long URLs to attempt to display only the relevant parts, as explained in #61158

Basically, until 6.5 the Gutenberg editor hasn't solved yet this problem and users can't see the full permalink in the UI.

The latest changes on trunk make things worse because the UI now shows only the slug.

There is no way to see the full post permalink.

I would say that, even before any accessibility consideration, this is a serious usability and design issue.

I would like to suggest to use some lateral thinking and try to solve the root issue instead of the symptoms.

Rather than trying to 'squeeze' the content in a limited-width UI, I think it's time to consider to move the permalink UI to a different place. A place in the editor UI that provides way more horizontal space. Clearl, not a side panel.

[afercia]

Additionally, also the toggle button that opens the PostURL popover is labeled incorrectly.

Imagine you're editing a post with title 'Hello World'.
As such, the permalink of your post is https://myawesomesite.org/hello-world/.

The toggle button that opens the popover will be labeled with aria-label="Change link: hello-world", which is clearly incorrect because 'hello-world' is not a link.

[annezazu]

@afercia just coming to this as I agree it's harder to edit the link of a post in the new experience and have added it to the new tracking issue for writing experience.

[afercia]

Thank you @annezazu 👋🏽

The UI is slightly changed on latest trunk, still the terminology in use could be improved.

I'd also like to note that the 'Learn more' link leads to a documentation page that is oud of date. It still shows the old UI and it should be updated.

Screenshot of the latest UI on trunk:

Screenshot of the documentation page that needs to be updated:

[joedolson]

I really don't see why this issue is still lingering; the label is just wrong as is, and needs to be updated. I feel like it's driven by a desire not to use words that require technical insight to fully understand, such as 'slug'; but that's a disservice to users, as we're instead using a word that is not what they're editing.

It is not difficult to learn what a slug is; the text that currently explains that a user is actually only editing the last part of the link would be perfectly accurate as a description of 'slug', instead.

[afercia]

To my understanding, the only case where this control shows a link is when setting the WordPress home page to use a static page (a 'front page'). However, in this case I'd argue this row should only display the link and not open a popover with a link that can't be edited. Screenshot:

[afercia]

Just noticed: passing the whole link as the help prop of the input field is very arguable and highlights there is no understanding about what a description for an input filed is supposed to be.

An input field description, associated with aria-describedby, is meant to provide a meaningful explanation of what the input field is about, or instructions and hints. It's not a place where to use a value. I'm guessing this has been done only for visual purposes, to place the link below the input field. Semantically, it's just plain wrong.

[afercia]

One more thing to fix: when the compoent shows the non-editable front page link, the aria-label still says it can be 'changed' even if it's not editable: aria-label="Change link: front-page".

[t-hamano]

The "Link" label can be even more confusing depending on the permalink settings.

For example, select "Custom Structure" as the permalink structure and enter /%post_id%/. Then create a post with the title "Hello World".

The button text in the panel will show /hello-world, and in the popover it will show http://localhost:8888/{post_id}/. Even though the button text is a slug and not part of the permalink, because it is labeled "Link" users will believe this text is part of the permalink, and will be further confused because the button text and the true permalink URL in the popover are completely different.

[t-hamano]

I would like to propose the following UI. All permalink structures have the following in common:

• Change the label from "Link" to "Permalink"
• Toggle button text displays the permalink in a single line, hiding overflow text
• Change the title of the popover from "Link" to "Permalink"
• Give the input field in the popover a visible label: "Slug"
• Remove the custom grey color of the permalink in the popover
• Move the copy button from the input field to next to the permalink (Related to #63700)
• Move the help text about the slug below the input field
• Permalinks are always editable, just like in the classic theme.

Custom Structure: Post name

trunk

Proposed UI

Custom Structure: Custom (/%post_id%/)

trunk

Proposed UI

Note that there is no "Customize the last part of the URL." text because when the custom structure is a post id, the slug is not part of the URL.

[afercia]

@t-hamano good point. And it's not limited to the {post_id} example. There are other bits of the permalink that may be non-editable. For example, a custom structure like:

/%category%/%post_id%/%author%/

In this case, the Classic editor only shows the Permalink with no UI to edit (because there's nothing that can be edited):

Instead, when the permalink contains an editable part, the editing UI does show up:

I'd think you're right and the UI logic should be reversed: the Permalink should be the value that is always shown, whether it is editable or not. The slug may be part of the Permalink and should be shown only when it is editable.

The only problematic point I see is that the Inspector panel isn't the right place to show the full permalink because it may be very long. As a user, I want to see the full permalink to check it's a good one that make sense for my post. Which brings us back to old discussions for example in #577 and in #5494. Still, I'm not convinced the Edit permalink UI should live in a narrow panel.

[t-hamano]

@afercia Thanks for the feedback.

In this case, the Classic editor only shows the Permalink with no UI to edit (because there's nothing that can be edited):

This is a bit confusing, but the slug is editable in the classic editor even if it's not part of the permalink.

If you open the Screen Options and check "Slug", an input field will appear below the content editor:

So in my opinion, the slug should always be editable in the block editor, whether it's part of the permalink or not.

But maybe this should be discussed in a separate issue.

[t-hamano]

This issue may be related to #56381.

[afercia]

So in my opinion, the slug should always be editable in the block editor, whether it's part of the permalink or not.

Yes, this is something to consider.

Overall, I think the current UI doesn't provide users with the best experience. Weirdest case is when the permalink structure does not contain the /%postname%/. In that case:

• The panel shows a value e.g. my-post-title labeled 'Link'. However, it's not a link and can't be edited.
• Clicking my-post-title opens the popover that shows the non-editable permalink, and it doesn't contain my-post-title of course.

[richtabor]

Change the label from "Link" to "Permalink"

Is it necessary to call it two different things: permalinks and slugs? I don't thing the panel should be different from the input (visual label or not).

[richtabor]

Seems Slug is a better fit than Permalink.

[t-hamano]

Is it necessary to call it two different things: permalinks and slugs?

The terms "Permalink" and "Slug" need to be used clearly.

An example of the definition of the terms is quoted from this webpage:

• Slug: Slugs are the last part of a path and represent a unique piece of content – they help identify the content so that visitors can more easily remember and find it.
• Permalink: Permalinks (or permanent links) are the URLs for posts, pages and other pieces of content on your website, including their paths and slugs. Permalinks never change, meaning you can always link back to them no matter how many times you edit your page or post.

[richtabor]

Right, so in this case the label should be Slug, right? It’s confusing calling the setting in the Inspector Permalink, but you edit the Slug.

[joedolson]

It makes sense to me; what you're being shown (the URL), is the post permalink; but the portion of it you can edit is the slug. So the popover can reasonably have a heading for 'Permalink', since it's showing you what the permalink is for the post, but the input field should be slug.

[t-hamano]

in this case the label should be Slug, right? It’s confusing calling the setting in the Inspector Permalink, but you edit the Slug.

This may be admittedly confusing, but I think the label (not the popover title) should be "Permalink". Because if the permalink doesn't contain a slug, the slug doesn't mean much:

If we change the label to "Slug", the UI would look like this:

Additionally, I find it odd that the permalink is displayed in a popover that opens when I click a button labeled "Slug".

I'm still leaning towards the UI change suggested in this comment.

[joedolson]

I'm comfortable with the UI change suggested there, @t-hamano.

[richtabor]

I'm not confident just yet. What's the formal proposal to change it to?

[t-hamano]

I've moved forward with what was suggested in this comment and pushed it to the enhance-post-url-ui branch.

The changes are as follows:

• Change the label from "Link" to "Permalink"
• Toggle button text displays the permalink in a single line, hiding overflow text
• Change the title of the popover from "Link" to "Permalink"
• Give the input field in the popover a visible label: "Slug"
• Remove the slash prefix from the input field
• Remove the custom grey color of the permalink in the popover
• Move the copy button from the input field to next to the permalink (Related to #63700)
• Move the help text about the slug below the input field

These changes take into account the proposed designs below, but could be improved upon:

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

Permalink structure: Post name

Permalink structure: Day and name

Permalink structure: Plain

[richtabor]

It does seem a disadvantage to have http://localhost:888... rather than /hello-world visible in the Inspector though.

[joedolson]

I think there are some other comments elsewhere about what to show in link editing, and those might be worth reviewing. I think we tended to come down on needing to see the unique portions of a URL more than the non-unique portions; e.g., showing the slug in the Inspector would make sense to me, as well.

The permalink label is informing us that this will edit the permalink; since we can't possibly see the entire URL in that space, it makes more sense to me to see the slug.

This change might have been driven by Andrea's comments in #61196 (comment); but I think the intention there is to change the aria-label, not the visible label. E.g. instead of "Change link: /hello-world", "Change slug: /hello-world". There are still outstanding issues about using the value as the button text; but there is a separate issue for that.

[t-hamano]

So, should we keep the labels and button text as they are and focus on improving the popover in this issue?

In other words, the UI will look like this:

I think we can discuss the labels and button text in #63992.

[joedolson]

I assuming you're referring to the text 'Link' in the post summary controls as the Label in this context; I still think that should change to Permalink. That'll provide textual consistency between the panel and the popover.