-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
Improve PostURL terminology and accessibility #63669
Conversation
Size Change: +209 B (+0.01%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
It is worth noting that after #64053 a long URL / slug is now truncated. I kindly disagree with that change. It defeats the purpose of this UI, which is to show the full URL or slug. |
f8c9f5d
to
38a37dd
Compare
Latest commits rebase on top of latest trunk and remove the truncation introduced in #64053 |
We need to do a holistic design pass on this, rather than one-off PRs that don't solve:
Why not simplify big time, making this just about editing the permalink (the primary action here), and providing additional context to what this is and what it's for, without sending people to an external link: Visual referencesThis PRTrunk |
I can see some of the arguments in both these proposals. Removing the copy button seems reasonable; that seems unnecessary, and I agree that it's counter-intuitive. It might make sense to move it to be associated with the link, rather than the input, since that's what it actually copies. But we really need to change the labeling to say 'Slug', not 'Link' or 'Permalink'. This field only edits the slug, and it is simply incorrect to label it as anything else. Regarding the link to the page: as far as I know, this is the only place where that link is made available in the interface. I think it's a useful reference. I don't think that the 'Learn more' link is very useful there, and would be better omitted. It might be more useful if the target ID actually existed on that page. |
I see there's still some confusion about the actual editable value. This UI is meant to edit the slug. Instead, the permalink is the full URL, which is not fully editable. Only the slug can be edited here.
I seem to recall there was some prior direct user feedback to have a plave where users can see the full URL (permalink). @annezazu may help find some reference. To me:
However, in more than seven years the contributors didn't reach an agreement on the Edit permalink UI placement. That's a way broader design issue that is out of the scope of this PR. This PR only aims to fix obvious issues in the labeling and naming of this UI. For history, some references about the discussion and changes for the Edit Permalink UI: |
I think you're thinking of this! #64659 |
c57f8fd
to
58bf6ac
Compare
Flaky tests detected in 6c16cec. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/11325396167
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As far as I'm concerned, this is a necessary change to fix incorrectly labeled fields. This looks good to me; but I'm not adept at the React portions.
58bf6ac
to
85579bf
Compare
This PR only aims to fix obvious issues in the labeling and naming of the Edit permalink UI. This UI hasroom for futher improvements that would be great to address and they're already tracked in other issues. I'd like to suggest to move further feedback on those specific issues. In the meantime, I think this change is an improvement as it restores a correct terminology that has been in use in WordPress for ages and users are familiar with. Screenshot before and after: |
Note: I pinged the documentation team on WordPress/Documentation-Issue-Tracker#1704 to inform them of this change. |
* Improve PostURL terminology and accessibility. * Restore createInterpolateElement after rebase. * Remove value truncation after PR 64053. * Replace term URL with Permalink. * Reduce post url intro text top margin. Co-authored-by: afercia <afercia@git.wordpress.org> Co-authored-by: joedolson <joedolson@git.wordpress.org> Co-authored-by: richtabor <richtabor@git.wordpress.org> Co-authored-by: annezazu <annezazu@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org>
isDismissible: true, | ||
type: 'snackbar', | ||
} ); | ||
} ); | ||
const postUrlSlugDescriptionId = | ||
'editor-post-url__slug-descriotion-' + useInstanceId( PostURL ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It looks like that there is a typo. It should be: editor-post-url__slug-description-
. @afercia, can you take care of fixing it?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@gigitux Good catch, thanks. Quick PR incoming.
* Improve PostURL terminology and accessibility. * Restore createInterpolateElement after rebase. * Remove value truncation after PR 64053. * Replace term URL with Permalink. * Reduce post url intro text top margin. Co-authored-by: afercia <afercia@git.wordpress.org> Co-authored-by: joedolson <joedolson@git.wordpress.org> Co-authored-by: richtabor <richtabor@git.wordpress.org> Co-authored-by: annezazu <annezazu@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org> Co-authored-by: gigitux <gigitux@git.wordpress.org>
Fixes #61196
What?
This PR proposes to restore the terminology WordPress always used when editing a post 'link':
The current UI allows users to edit the last part of the link and calls it 'link'. That's not what usees are editing. Actually, they are editing the slug.
On top of that, fixes some accessibility and usability issues:
Why?
For better usability and accessibility.
How?
Testing Instructions
aria-describedby
attribute.Testing Instructions for Keyboard
Screenshots or screencast
Before:
After: