[2.9] permalink should be reassigned to new title after clearing URL

[GlennMartin1]

Describe the bug
Gutenberg is to reassign a new URL after the title has changed and the URL has been cleared. However, it is not displaying the reassigned URL until after a save.

To Reproduce
Steps to reproduce the behavior:

1. Create a new post.
2. Assign a title, for example "Testing our title"
3. After beginning editing, a permalink will be generated "testing-our-title"
4. Now change the title to "Test 500 times"
5. Click "Edit" on the URL, and clear the URL.
6. Click "Ok", and it should reassign the URL to the new title "test-500-times"
7. BUG: instead of assigning the new URL, it reverts to the initial "testing-our-title", instead of "test-500-times"

(caveat: AFTER SAVING, the correct new URL will be reassigned)

Expected behavior
The permalink should be reassigned to the new title after clearing the URL.

[tofumatt]

Is this a regression or has this always been the case? (I feel like other editors for WordPress exhibit similar behaviours but I can't recall.)

[GlennMartin1]

@tofumatt

After testing #6615, I think this was resolved.

So it's either a regression in 2.9, or I overlooked something before.

[tofumatt]

After testing this out a bit at least part of the issue is the new slug for the new title isn't immediately available to the getPermalinkParts() selector in use. I'm still investigating this, but at the very least it seems I have to make other edits for the data that selector uses to be updated 😞

[tofumatt]

It looks like, because the permalink is created by the API, we have to wait until the content is updated. I'm new to the project and don't have a clear idea of where that happens yet but this seems to cause the permalink not to appear immediately editable too. This diff will change an empty slug to the new one when a title changes, but it requires something else is typed and the page is autosaved to update first:

--- a/editor/components/post-permalink/editor.js
+++ b/editor/components/post-permalink/editor.js
@@ -23,13 +23,13 @@ class PostPermalinkEditor extends Component {
        }

        onSavePermalink( event ) {
-               const postName = this.state.editedPostName.replace( /\s+/g, '-' );
+               const postName = this.state.editedPostName.length ?
+                       this.state.editedPostName.replace( /\s+/g, '-' ) :
+                       this.props.permalinkParts.generatedSlug;

                event.preventDefault();

-               this.props.onSave();
-
-               if ( postName === this.props.postName ) {
+               if ( postName === this.props.permalinkParts.postName ) {
                        return;
                }

@@ -40,6 +40,8 @@ class PostPermalinkEditor extends Component {
                this.setState( {
                        editedPostName: postName,
                } );
+
+               this.props.onSave();
        }

        render() {
diff --git a/editor/store/selectors.js b/editor/store/selectors.js
index 4f192a358b35..4fc8ee953717 100644
--- a/editor/store/selectors.js
+++ b/editor/store/selectors.js
@@ -1664,6 +1664,7 @@ export function getPermalinkParts( state ) {
        const [ prefix, suffix ] = permalinkTemplate.split( PERMALINK_POSTNAME_REGEX );

        return {
+               generatedSlug: getEditedPostAttribute( state, 'generated_slug' ),
                prefix,
                postName,
                suffix,

[GlennMartin1]

This persists through 3.1.1.

[dijitul]

I can confirm this issue is still present in version 3.9.0 however when you update or publish the page (in my case I cloned a page so it had the old URL in, changed the page name, deleted the old permalink and clicked OK, the old permalink remained) the new permalink is used.

So the issue is that it doesn't show it straight away when clearing the URL field, but it does work so to speak.

[designsimply]

Tested and confirmed using WordPress 4.9.8 and Gutenberg 4.2.0 that emptying the permalink field and saving it after making a title change isn't picked up until the post is explicitly re0saved. (29s)

1. Create a new post and give it a title.
2. Click the "Save Draft" button (this step is needed, autosave won't work).
3. Change the title.
4. Focus elsewhere then back onto the title to make the permalink UI display again.
5. Click the "Edit" button.
6. Delete the permalink.
7. Click the "Save" button.

Result: I expected the permalink to update to the current title but it reverts to the original title but then does get updated to the new one after the post is explicitly saved

^{Seen at http://alittletestblog.com/wp-admin/post.php?post=15532&action=edit running WordPress 4.9.8 and Gutenberg 4.2.0 using Firefox 63.0 on macOS 10.13.6.}

[earnjam]

So this is because getPermalinkParts() falls back to using generated_slug when slug is empty. generated_slug is basically just the initialized value of slug from the REST API response. The title is sanitized in PHP using sanitize_title() to generate the slug.

In the old editor, this was handled via a call to admin-ajax.php, which unfortunately returned an entire block of HTML to replace in the editor. (See get_sample_permalink()) If it just returned the permalink, then we could have reused it here.

To fix this properly, we either need to make some new endpoint for getting this value, or we need to recreate sanitize_title() in javascript.

I think an interim solution is just to do the same thing to the title that we do to the slug when you edit it now. Basically it's just a partial sanitization to replace spaces with hyphens. See: https://github.com/WordPress/gutenberg/blob/master/packages/editor/src/components/post-permalink/editor.js#L22