Add Editable Permalinks #5756

pento · 2018-03-23T06:43:27Z

Description

#5414 has become way too unwieldy to work with, so this PR is a fresh attempt, based on @karmatosed's design.

Screenshots (jpeg or gifs if applicable):

Checklist:

My code is tested.
My code follows the WordPress code style.
My code has proper inline documentation.

afercia · 2018-03-23T08:07:41Z

Related: #5494

Aside: I see a notice
Notice: Undefined property: WP_Post::$filter in /srv/www/wordpress-develop/public_html/src/wp-includes/class-wp-post.php on line 342

pento · 2018-03-23T10:19:04Z

@afercia: Bug squished, thanks. 🙂

karmatosed · 2018-03-23T11:34:36Z

On this branch I am noticing one thing not like the design, which actually was in the thread and that's copying when clicking the link icon. Here is the conversation for reference:#3418 (comment).

We need to of course test this with notices again but overall seems like the design and on track there.

pento · 2018-03-23T11:50:39Z

Oh, I totally missed that in the conversation. Thanks, @karmatosed!

I turned the Dashicon into a ClipboardButton, so now clicking it copies the permalink to your clipboard. Do you think it needs some sort of feedback after clicking, to show that it copied?

karmatosed · 2018-03-23T11:53:46Z

Do you think it needs some sort of feedback after clicking, to show that it copied?

Good catch, yes can the icon grey out maybe for now until a revisit of that page or refresh? We can consider later if we need a text feedback also.

pento · 2018-03-23T12:05:38Z

Done!

afercia · 2018-03-23T13:55:09Z

Sorry I have to reference also to the a11y feedback given in the previous PR see #3418 (comment)

I'd like to remind UI controls should be grouped in a logical order so I'd recommend to not make the left icon a "Copy" button (it would also miss the confirmation message that appears in place of the original button text). I'd rather place two buttons on the right. Other changes will be necessary to address a11y but I'd say to make it functional first and then improve the a11y part.

Also:

ideally, icon-only buttons should be avoided
if there's really (really, really) the need to use an icon-only button, then it needs a tooltip: please don't use a title attribute
the input field must be labeled, it needs at least an aria-label attribute
concerns about placement and tab order still stand, and there's Improve Permalink UI placement and tab order #5494 for them

Visually, I'd leave this to @karmatosed but I'm not fully sure about the copy button discoverability: it doesn't look like a button, not sure why users should understand it's an UI control.

Note: the permalink is empty now.

afercia · 2018-03-23T14:47:09Z

Link that opens in a new tab/window (target="_blank") should inform users about what's going to happen. There's the ExternalLink component for this, however it also adds an icon.

aduth · 2018-03-23T19:07:35Z

editor/components/post-permalink/index.js

-		clearTimeout( this.dismissCopyConfirmation );
+	componentWillMount() {
+		if ( this.props.samplePermalinkData ) {
+			this.updateSamplePermalink( this.props.samplePermalinkData[ 0 ], this.props.samplePermalinkData[ 1 ] );


This is a once-documented premature optimization anti-pattern, as it's duplicating the source of truth, not necessarily state of the component:

https://web.archive.org/web/20160531222015/http://facebook.github.io:80/react/tips/props-in-getInitialState-as-anti-pattern.html

It will save many a headache to simply calculate the value as used.

Further, a better optimization we might consider is to create a separate component which manages the editing behaviors, and is only rendered when this.state.editingPermalink is true.

(i.e. why do we calculate this state when I'm merely editing the title's text, or viewing the permalink?)

Good point, changed to just calculating when rendering the form.

aduth · 2018-03-23T19:12:52Z

editor/components/post-permalink/index.js

+	 * @param {string} postName The post slug to use in replacements.
+	 */
+	updateSamplePermalink( template, postName ) {
+		const regex = /%(?:postname|pagename)%/;


If this is constant, seems we could move it to top-of-file (shared scope) and document appropriately for what it's matching.

aduth · 2018-03-23T19:13:57Z

editor/components/post-permalink/index.js

 		this.setState( {
-			showCopyConfirmation: true,
+			samplePermalink: template.replace( regex, postName ),
+			samplePermalinkPrefix: template.split( regex )[ 0 ],


Aside from potential waste in needlessly calling String#split twice generating the same result, this is a good use case for ES6 array destructuring:

const [ samplePermalinkPrefix, samplePermalinkSuffix ] = template.split( regex );

aduth · 2018-03-23T19:14:39Z

editor/components/post-permalink/index.js

+			samplePermalink: template.replace( regex, postName ),
+			samplePermalinkPrefix: template.split( regex )[ 0 ],
+			samplePermalinkSuffix: template.split( regex )[ 1 ],
+			postName: postName,


Minor: This can be shortened to just postName, when property name and variable value match.

See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015

aduth · 2018-03-23T19:17:23Z

editor/components/post-permalink/index.js

+							type="text"
+							className="editor-post-permalink__edit"
+							defaultValue={ postName }
+							onChange={ ( e ) => this.setState( { editedPostName: e.target.value } ) }


What is e ? error ?

I'm being facetious 😄 but I generally tend to discourage abbreviations where ambiguity is possible.

aduth · 2018-03-23T19:38:28Z

editor/components/post-permalink/index.js

+			previewLink: getEditedPostPreviewLink( state ),
+			samplePermalinkData: getEditedPostAttribute( state, 'sample_permalink' ),
+
+			permalinkStructure: window.wpApiSettings.schema.permalink_structure,


A few issues:

As much as possible, we shouldn't access the window global directly, since it proliferates the expected global prerequisites beyond that which we're otherwise establishing through the single entry point for initializing an editor

This value is not being sourced from the editor state, and as such does not belong in connect's mapStateToProps (not mapped from state)

To the previous point, perhaps this should be in editor state, or otherwise provided through context in EditorProvider, where other settings are exposed and later accessed by withContext

To this previous point, technically there is context already available for this provided through withAPIData, but since we're not really using API data here, it doesn't seem necessarily appropriate to create a dependency here on this context.

Turns out I didn't need that at all, everything was in sample_permalink on the post.

aduth · 2018-03-23T19:40:44Z

editor/components/post-permalink/index.js

 		};
+	},
+	{
+		editPost,


This is fine enough since we already have connect here anyways, but new usage is encouraged (and hopefully simplified) to use withDispatch instead:

import { withDispatch } from '@wordpress/data'; import { Component, compose } from '@wordpress/element'; // ... export default compose( [ connect( ( state ) => { return { isNew: isEditedPostNew( state ), previewLink: getEditedPostPreviewLink( state ), samplePermalinkData: getEditedPostAttribute( state, 'sample_permalink' ), permalinkStructure: window.wpApiSettings.schema.permalink_structure, }; } ), withDispatch( ( dispatch ) => { const { editPost } = dispatch( 'core/editor' ); return { editPost }; } ), ] )( PostPermalink );

aduth · 2018-03-23T19:43:27Z

editor/components/post-permalink/style.scss

@@ -34,3 +38,20 @@
 		@include long-content-fade( $size: 20% );
 	}
 }
+
+.editor-post-permalink__edit-form {
+	width: 100%;


This element is technically the child of a flex container and could be sized with flex-basis: 100%; flex-shrink: 1;

aduth · 2018-03-23T19:48:30Z

editor/components/post-permalink/style.scss

+}
+
+.editor-post-permalink__save {
+	float: right;


Maybe some flex instead of float, to avoid the inevitable future headaches:

aduth · 2018-03-23T19:49:42Z

editor/components/post-permalink/index.js

+					permalinkStructure && ! editingPermalink &&
+					<Button
+						className="editor-post-permalink__edit button"
+						onClick={ () => this.setState( { editingPermalink: true } ) }


Because we only set editedPostName when changing input, if one presses "Edit" and then immediately "Ok", the permalink is reset to empty.

aduth · 2018-03-23T19:51:57Z

Mobile isn't looking so great:

aduth · 2018-03-23T19:52:40Z

Link that opens in a new tab/window (target="_blank") should inform users about what's going to happen.

Perhaps we can build this behavior into the base Button component so it's not a consideration for the developer.

pento · 2018-03-25T07:22:40Z

Perhaps we can build this behavior into the base Button component so it's not a consideration for the developer.

Yah, I'm inlined to go this way. It's not an external link, so it seems weird to be using the ExternalLink component.

Also, thanks to the magic of flexbox, mobile is significantly less unusably ugly now.

pento · 2018-03-25T08:23:20Z

Is there a selector like getEditedPostAttribute(), except getEditedPostAttributeAfterLast REQUEST_POST_UPDATE_SUCCESSAfterWhichFallBackToCurrentPostAttribute()?

afercia · 2018-03-26T07:23:50Z

Quickly tested: while it seems to work with new posts:

it doesn't seem to work well with existing posts:

the permalink is false
my permalinks setting is Month and name but the UI is showing me the link "Change permalinks" that should appear only when permalinks are set to "Plain"

From an accessibility perspective, I see part of the feedback is ignored. Navigating content for keyboard users and assistive technologies users is often a linearized experience. Content should be placed in a logical order, taking into account linearization. In this regard, the previous PR was better because it had in order:

the "what" (the permalink), i.e. the labeled editable field
the available actions: the two buttons "copy" and "edit"

(of course, "Copy" shouldn't be a primary button and some details were still unpolished, but the UI in the previous PR was better IMHO)

pento · 2018-03-26T07:42:19Z

the permalink is false

Ooops. 🙃

From an accessibility perspective, I see part of the feedback is ignored.

Not ignored, you mentioned you were going to look at it in #5494, so I assumed the action was going to happen there. I'll see if I can make some changes in this PR, too.

pento · 2018-03-26T09:01:09Z

@afercia: I've just pushed a few tweaks to the keyboard order, can you give some feedback on that?

I used autofocus on the <input>, which I know isn't ideal for accessibility, but it seems like this is an appropriate usage?

afercia · 2018-03-26T10:58:21Z

Thanks @pento. Some a11y considerations:

As long as it works in supported browsers, I think using autofocus is fine in this case, as this mini-UI has the specific task to edit the permalink

The buttons placement is still not ideal, and it's a violation of a specific WCAG guideline: the visual order should always match the DOM order:
Success Criterion 1.3.2 Meaningful Sequence
https://www.w3.org/TR/WCAG21/#meaningful-sequence
https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence.html
https://www.w3.org/TR/WCAG20-TECHS/C27

Tooltips work in an accessible way out of the box when used for the IconButton component with the label prop, as that produces both an aria-label and the tooltip. Since this is a particular button, I guess there's the need to explicitly pass an aria-label with the same string to the button. Currently, the button is not labeled: no text or aria-label. /cc @aduth maybe there's a way to make other buttons behave like the IconButton?

Switching components on the fly produces a focus loss:

when editing, when focus is on the ~~Edit~~ OK button
press Enter
the whole "editor" component is replaced so the previous focused element is removed from the DOM and focus is lost. This is particularly evident in IE11 but happens also in modern browsers: they're just a bit smarter and try to keep focus in place but actually there's no focused element at some point. It would be great to try to avoid this and just update the props of the button, if possible.

I'd remove the dot at the end of the string :)

Note: I've edited the focus loss issue description, I had described a wrong scenario.

aduth · 2018-03-26T18:02:21Z

Tooltips work in an accessible way out of the box when used for the IconButton component with the label prop, as that produces both an aria-label and the tooltip. Since this is a particular button, I guess there's the need to explicitly pass an aria-label with the same string to the button. Currently, the button is not labeled: no text or aria-label. /cc @aduth maybe there's a way to make other buttons behave like the IconButton?

If it's reasonable to apply broadly, I think we should pull this behavior out of IconButton specifically and make it built-in to the tooltip component. In other words, when wrapping an element with Tooltip, we add any necessary attributes to the element to reflect information that the Tooltip provides (aria-label? aria-describedby?)

pento · 2018-03-27T04:04:11Z

Thanks for the extra info, @afercia.

As it's just a shiny new kind of accessibility issue, I've reverted the DOM order of the copy button back to it's original place: @karmatosed previously mentioned that the design in this PR is a starting point, so let's look at how we can order these things in the next iteration.

When the edit form is closed, it now focusses on the permalink, which seems to be the most relevant element to shift the focus to.

From an accessibility perspective, how do you feel about the current state of this PR as a place to iterate from? There are certainly improvements to be made, but it seems like they are better made as part of the design iterations, as they depend on how things are laid out.

@aduth: could you review the code again?

@karmatosed: I think I've caught everything, but can you confirm that the current design of this PR matches what you had in mind?

afercia · 2018-03-27T07:06:36Z

@pento thanks for the changes. The most important thing is to avoid the focus loss and that is addressed now (we can iterate on the better place to move focus to). Not sure @aduth
will like querySelector :D as far as I can tell refs should be used for this purpose.

As per the placement of elements, yep this is a case where design and accessibility have different needs. As you suggested I think we can iterate in #5494 even if that issue was meant to improve the placement and tab order of the whole UI, I think it can focus also on the UI content.

@karmatosed I'd suggest to consider the link icon doesn't really look like a button, I have concerns on its discoverability. Can we consider a standard button, for better clarity for all users?

afercia · 2018-03-27T08:21:38Z

Something to consider:

When the URL is very long, it fades out on the right:

Instead, on the current UI, the "permalink" is truncated in the middle, allowing users to see at least the last part. Not ideal either, but probably better:

Duplicates a similar fix in the classic editor.

…tion of the postname, and reshuffle the relevant code.

…ntised version.

…ed the Change Permalinks button.

…nent is unmounting.

…fault.

…and don't have a slug defined.

pento · 2018-04-15T22:43:13Z

This has been fun, y'all. Let's do polish things in follow up PRs.

pento added [Priority] High Used to indicate top priority items that need quick attention Needs Design Feedback Needs general design feedback. Needs Testing Needs further testing to be confirmed. labels Mar 23, 2018

pento self-assigned this Mar 23, 2018

pento requested a review from a team March 23, 2018 06:43

pento mentioned this pull request Mar 23, 2018

Add editable Permalinks #5414

Closed

aduth reviewed Mar 23, 2018

View reviewed changes

GlennMartin1 mentioned this pull request Mar 26, 2018

Can't edit Permalink #1285

Closed

aduth mentioned this pull request Mar 26, 2018

Components: Refactor Popover to focus content wrapper on open #5595

Closed

pento force-pushed the add/revenge-of-the-editable-permalinks branch from 1b6252e to 6991336 Compare March 27, 2018 03:54

pento added 22 commits April 13, 2018 15:39

Make the permalink display in the correct order in LTR languages.

65cf88e

Duplicates a similar fix in the classic editor.

Rename sample_permalink to permalink_template, remove the duplica…

b0be34a

…tion of the postname, and reshuffle the relevant code.

Fix Travis

19f4f3a

Reset the local copy of the postname, if the server has returned a sa…

aeb3a84

…ntised version.

Actually fix Travis.

14d23ee

💀

38e5444

Allow the postname field to be cleared.

380f40e

Button: remove an unnecessary bind().

98c36f7

Rename editingPermalink to isEditingPermalink.

f63debc

Nudge the copy button a little.

daa4b8f

Refresh the post when the user returns to the page after having click…

1f703b0

…ed the Change Permalinks button.

Add tests for the permalink selectors.

40eff87

Use getPostType() for getting the post type.

0bf43de

Fix some linting errors.

5db2b58

Move the addEventListener to a callback, and remove it when the compo…

6ded524

…nent is unmounting.

Rename UPDATE_POST_FROM_SERVER to REFRESH_POST

fb49a35

Performance improvement of a get() call.

91e26fb

Remove POSTNAME_SANITIZED, handle it in UPDATE_POST

17392bd

Remove the GET method from the post refresh request, as that's the de…

48fbdec

…fault.

Rename the posttype is_viewable flag to viewable.

8766dab

Add a draft_slug to the REST API response for posts that are drafts, …

7e56148

…and don't have a slug defined.

Linting.

6d3960f

pento force-pushed the add/revenge-of-the-editable-permalinks branch from dc15592 to 6d3960f Compare April 13, 2018 05:43

pento added this to the 2.7 milestone Apr 15, 2018

pento merged commit 4c90150 into master Apr 15, 2018

pento deleted the add/revenge-of-the-editable-permalinks branch April 15, 2018 22:46

aduth mentioned this pull request Jun 25, 2018

fix: Show permalink editor in editor #7494

Merged

4 tasks

designsimply mentioned this pull request Jul 17, 2018

Improve Permalink UI placement and tab order #5494

Closed

afercia mentioned this pull request Sep 12, 2024

Improve PostURL terminology and accessibility #63669

Merged

Add Editable Permalinks #5756

Add Editable Permalinks #5756

Conversation

pento commented Mar 23, 2018

Description

Screenshots (jpeg or gifs if applicable):

Checklist:

afercia commented Mar 23, 2018

pento commented Mar 23, 2018

karmatosed commented Mar 23, 2018 • edited Loading

pento commented Mar 23, 2018

karmatosed commented Mar 23, 2018 • edited Loading

pento commented Mar 23, 2018

afercia commented Mar 23, 2018

afercia commented Mar 23, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aduth commented Mar 23, 2018

aduth commented Mar 23, 2018

pento commented Mar 25, 2018

pento commented Mar 25, 2018

afercia commented Mar 26, 2018

pento commented Mar 26, 2018

pento commented Mar 26, 2018

afercia commented Mar 26, 2018 • edited Loading

aduth commented Mar 26, 2018

pento commented Mar 27, 2018

afercia commented Mar 27, 2018

afercia commented Mar 27, 2018

pento commented Apr 15, 2018

karmatosed commented Mar 23, 2018 •

edited

Loading

karmatosed commented Mar 23, 2018 •

edited

Loading

afercia commented Mar 26, 2018 •

edited

Loading