Update displayed permalink when slug is cleared

[earnjam]

Description

Closes #7002.

This does a simple fix of the issue in #7002 where a permalink slug appears to stay the same after it is cleared, when it should be generated based off of what is in the title.

With this fix, if the post has not been published yet and the slug has not been manually customized, then the slug continually updates to reflect what is in the post title. Once it's published or the slug is manually edited, it will be frozen to that value. If cleared, it will go back to auto-rendering based off the post title. This is technically the same save functionality as before, it's just displaying a closer representation to the actual value that will be saved.

I also improved on the existing slug cleaning a bit, without going all the way to a full recreation of sanitize_title() in JS. (I also didn't want to call the utility function sanitizeTitle for that reason. If someone has a better name suggestion, please let me know.)

How has this been tested?

1. Create a new post
2. Give it a title
3. Click save draft
4. Edit the slug
5. Change the title
6. Notice remains the custom slug from step 4
7. Clear the slug and save
8. Notice it auto-generates the slug from the new post title

Screenshots

Additional Notes

Even with this change, we still have some work to do to achieve feature parity between the old and new editor when it comes to editing the permalink. As it stands, it can't be edited until a manual save has occurred, which is confusing. Ideally it would become editable on blur from the title, as it was before. However, in order to do that, we need it to be able treat it like a preview link for autosaves and drafts, since the actual permalink URL won't be available yet.

I think the ideal fix here is to abstract out the preview link functionality from the preview button component and allow it to be reused here, but that might need to just be a future enhancement post 5.0. This will work in the short-term to improve the permalink editor.

Fixes #7002

[earnjam]

Hmm, autosave only saves title, content and excerpt, so the change to generated_slug is causing it to appear dirty and fail the e2e test.

[earnjam]

I'm going to take a different approach on this that doesn't manipulate generated_slug. I'll push something up later today or tomorrow.

[earnjam]

I refactored this to stop editing generated_slug, but functionality is the same. All tests are passing now. It's ready for a review.

[earnjam]

I just opened #12009, which goes a good bit further than this one on improvements.

Let's evaluate both and discuss plans for the future of the title permalink component. That will dictate how we handle reusing some of the logic in the new sidebar permalink panel.

[youknowriad]

Seems like a good candidate for a unit test

[earnjam]

Thanks @youknowriad. Suggestions look good and I can make those changes. I'm curious whether #12009 is realistic or if you'd rather just ship a fix for this and continue to iterate on something like that.

The same clearing slug problem exists in the sidebar panel, so we should probably fix it there at the same time as this because otherwise it will be pretty confusing. Want me to add that to this PR?

[youknowriad]

The same clearing slug problem exists in the sidebar panel, so we should probably fix it there at the same time as this because otherwise it will be pretty confusing. Want me to add that to this PR?

Yes please, that would be ace

I'm curious whether #12009 is realistic or if you'd rather just ship a fix for this and continue to iterate on something like that.

I'm not certain I understand this PR properly yet to give a proper answer and also I don't feel like I'm the right person for it as it couches some existing core PHP logic.

[earnjam]

I think this is ready for a review.

• Added a simple unit test for the new cleanForSlug function.
• Added support for clearing slug on the sidebar.
• Made it auto-generate the slug/permalink based on the cleaned version of the title as you're typing it in (see gif below)
• Also cleans up the customized sidebar slug on blur to mimic what it will actually be set as on save.
• Both title and sidebar now fall back to displaying the post ID as the slug portion of the permalink when there is no slug or title entered (that's what the permalink will use in that case)

[youknowriad]

Works great on my testing. Thanks

[youknowriad]

As a follow-up, it might be a good idea to add an e2e test.