Update displayed permalink when slug is cleared

packages/edit-post/src/components/sidebar/post-link/index.js

@@ -12,6 +12,7 @@ import { PanelBody, TextControl } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose, ifCondition, withState } from '@wordpress/compose';
 import { addQueryArgs } from '@wordpress/url';
+import { cleanForSlug } from '@wordpress/editor';
 
 /**
  * Module Constants
@@ -27,15 +28,19 @@ function PostLink( {
 	editPermalink,
 	forceEmptyField,
 	setState,
+	postTitle,
+	postSlug,
+	postID,
 } ) {
-	const { prefix, postName, suffix } = permalinkParts;
+	const { prefix, suffix } = permalinkParts;
 	let prefixElement, postNameElement, suffixElement;
+	const currentSlug = postSlug || cleanForSlug( postTitle ) || postID;
 	if ( isEditable ) {
 		prefixElement = prefix && (
 			<span className="edit-post-post-link__link-prefix">{ prefix }</span>
 		);
-		postNameElement = postName && (
-			<span className="edit-post-post-link__link-post-name">{ postName }</span>
+		postNameElement = currentSlug && (
+			<span className="edit-post-post-link__link-post-name">{ currentSlug }</span>
 		);
 		suffixElement = suffix && (
 			<span className="edit-post-post-link__link-suffix">{ suffix }</span>
@@ -51,7 +56,7 @@ function PostLink( {
 			{ isEditable && (
 				<TextControl
 					label={ __( 'URL' ) }
-					value={ forceEmptyField ? '' : postName }
+					value={ forceEmptyField ? '' : currentSlug }
 					onChange={ ( newValue ) => {
 						editPermalink( newValue );
 						// When we delete the field the permalink gets
@@ -72,6 +77,14 @@ function PostLink( {
 							} );
 						}
 					} }
+					onBlur={ ( event ) => {
+						editPermalink( cleanForSlug( event.target.value ) );
+						if ( forceEmptyField ) {
+							setState( {
+								forceEmptyField: false,
+							} );
+						}
+					} }
 				/>
 			) }
 			<p className="edit-post-post-link__preview-label">
@@ -117,7 +130,7 @@ export default compose( [
 			getPostType,
 		} = select( 'core' );
 
-		const { link } = getCurrentPost();
+		const { link, id } = getCurrentPost();
 		const postTypeName = getEditedPostAttribute( 'type' );
 		const postType = getPostType( postTypeName );
 		return {
@@ -128,6 +141,9 @@ export default compose( [
 			isOpened: isEditorPanelOpened( PANEL_NAME ),
 			permalinkParts: getPermalinkParts(),
 			isViewable: get( postType, [ 'viewable' ], false ),
+			postTitle: getEditedPostAttribute( 'title' ),
+			postSlug: getEditedPostAttribute( 'slug' ),
+			postID: id,
 		};
 	} ),
 	ifCondition( ( { isNew, postLink, isViewable } ) => {

packages/editor/src/components/post-permalink/editor.js

@@ -7,19 +7,24 @@ import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 
+/**
+ * Internal dependencies
+ */
+import { cleanForSlug } from '../../utils/url';
+
 class PostPermalinkEditor extends Component {
-	constructor( { permalinkParts } ) {
+	constructor( { permalinkParts, slug } ) {
 		super( ...arguments );
 
 		this.state = {
-			editedPostName: permalinkParts.postName,
+			editedPostName: slug || permalinkParts.postName,
 		};
 
 		this.onSavePermalink = this.onSavePermalink.bind( this );
 	}
 
 	onSavePermalink( event ) {
-		const postName = this.state.editedPostName.replace( /\s+/g, '-' );
+		const postName = cleanForSlug( this.state.editedPostName );
 
 		event.preventDefault();
 

packages/editor/src/components/post-permalink/index.js

@@ -17,7 +17,7 @@ import { safeDecodeURI } from '@wordpress/url';
  * Internal Dependencies
  */
 import PostPermalinkEditor from './editor.js';
-import { getWPAdminURL } from '../../utils/url';
+import { getWPAdminURL, cleanForSlug } from '../../utils/url';
 
 class PostPermalink extends Component {
 	constructor() {
@@ -57,14 +57,19 @@ class PostPermalink extends Component {
 	}
 
 	render() {
-		const { isNew, postLink, isEditable, samplePermalink, isPublished } = this.props;
-		const { isCopied, isEditingPermalink } = this.state;
-		const ariaLabel = isCopied ? __( 'Permalink copied' ) : __( 'Copy the permalink' );
+		const { isNew, postLink, permalinkParts, postSlug, postTitle, postID, isEditable, isPublished } = this.props;
 
 		if ( isNew || ! postLink ) {
 			return null;
 		}
 
+		const { isCopied, isEditingPermalink } = this.state;
+		const ariaLabel = isCopied ? __( 'Permalink copied' ) : __( 'Copy the permalink' );
+
+		const { prefix, suffix } = permalinkParts;
+		const slug = postSlug || cleanForSlug( postTitle ) || postID;
+		const samplePermalink = ( isEditable ) ? prefix + slug + suffix : prefix;
+
 		return (
 			<div className="editor-post-permalink">
 				<ClipboardButton
@@ -92,6 +97,7 @@ class PostPermalink extends Component {
 
 				{ isEditingPermalink &&
 					<PostPermalinkEditor
+						slug={ slug }
 						onSave={ () => this.setState( { isEditingPermalink: false } ) }
 					/>
 				}
@@ -128,18 +134,22 @@ export default compose( [
 			isEditedPostNew,
 			isPermalinkEditable,
 			getCurrentPost,
-			getPermalink,
+			getPermalinkParts,
+			getEditedPostAttribute,
 			isCurrentPostPublished,
 		} = select( 'core/editor' );
 
-		const { link } = getCurrentPost();
+		const { id, link } = getCurrentPost();
 
 		return {
 			isNew: isEditedPostNew(),
 			postLink: link,
+			permalinkParts: getPermalinkParts(),
+			postSlug: getEditedPostAttribute( 'slug' ),
 			isEditable: isPermalinkEditable(),
-			samplePermalink: getPermalink(),
 			isPublished: isCurrentPostPublished(),
+			postTitle: getEditedPostAttribute( 'title' ),
+			postID: id,
 		};
 	} ),
 	withDispatch( ( dispatch ) => {

packages/editor/src/utils/index.js

@@ -4,3 +4,4 @@
 import mediaUpload from './media-upload';
 
 export { mediaUpload };
+export { cleanForSlug } from './url.js';

packages/editor/src/utils/test/url.js

@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import { cleanForSlug } from '../url';
+
+describe( 'cleanForSlug()', () => {
+	it( 'Should return string prepared for use as url slug', () => {
+		expect( cleanForSlug( ' /Déjà_vu. ' ) ).toBe( 'deja-vu' );
+	} );
+} );

packages/editor/src/utils/url.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { deburr, toLower, trim } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -16,3 +21,23 @@ import { addQueryArgs } from '@wordpress/url';
 export function getWPAdminURL( page, query ) {
 	return addQueryArgs( page, query );
 }
+
+/**
+ * Performs some basic cleanup of a string for use as a post slug
+ *
+ * This replicates some of what santize_title() does in WordPress core, but
+ * is only designed to approximate what the slug will be.
+ *
+ * Converts whitespace, periods, forward slashes and underscores to hyphens.
+ * Converts Latin-1 Supplement and Latin Extended-A letters to basic Latin
+ * letters. Removes combining diacritical marks. Converts remaining string
+ * to lowercase. It does not touch octets, HTML entities, or other encoded
+ * characters.
+ *
+ * @param {string} string Title or slug to be processed
+ *
+ * @return {string} Processed string
+ */
+export function cleanForSlug( string ) {
+	return toLower( deburr( trim( string.replace( /[\s\./_]+/g, '-' ), '-' ) ) );
+}