Open the slug edit form when clicking on the slug

WordPress · Nov 10, 2017 · 6d1721d · 6d1721d
1 parent 5d3e01b
commit 6d1721d
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 4 deletions.
diff --git a/editor/post-permalink/index.js b/editor/post-permalink/index.js
@@ -21,8 +21,12 @@ class PostPermalink extends Component {
 		super( ...arguments );
 		this.state = {
 			showCopyConfirmation: false,
+			editingSlug: false,
 		};
 		this.onCopy = this.onCopy.bind( this );
+		this.onEditPermalink = this.onEditPermalink.bind( this );
+		this.onCancelEditPermalink = this.onCancelEditPermalink.bind( this );
+		this.onSavePermalink = this.onSavePermalink.bind( this );
 	}
 
 	componentWillUnmount() {
@@ -42,8 +46,24 @@ class PostPermalink extends Component {
 		}, 4000 );
 	}
 
+	onEditPermalink( event ) {
+		event.preventDefault();
+		this.setState( { editingSlug: true } );
+	}
+
+	onCancelEditPermalink( event ) {
+		event.preventDefault();
+		this.setState( { editingSlug: false } );
+	}
+
+	onSavePermalink( event ) {
+		event.preventDefault();
+		this.setState( { editingSlug: false } );
+	}
+
 	render() {
 		const { isNew, link, samplePermalink } = this.props;
+		const { showCopyConfirmation, editingSlug } = this.state;
 		if ( isNew || ! link ) {
 			return null;
 		}
@@ -55,15 +75,39 @@ class PostPermalink extends Component {
 			viewLink += '&preview=true';
 		}
 
+		const prefix = permalink.replace( /[^/]+\/?$/, '' ),
+			slug = permalink.replace( /.*\/([^/]+)\/?$/, '$1' );
+
 		return (
 			<div className="editor-post-permalink">
 				<Dashicon icon="admin-links" />
 				<span className="editor-post-permalink__label">{ __( 'Permalink:' ) }</span>
-				<Button className="editor-post-permalink__link" href={ viewLink } target="_blank">
-					{ permalink }
-				</Button>
+				<span className="editor-post-permalink__link">
+					<span className="editor-post-permalink__prefix">
+						{ prefix }
+					</span>
+					{ ! editingSlug &&
+						<span
+							className="editor-post-permalink__slug"
+							onClick={ this.onEditPermalink }
+						>
+							{ slug }
+						</span>
+					}
+					{ editingSlug &&
+						<form className="editor-post-permalink__slug-form" onSubmit={ this.onSavePermalink }>
+							<input
+								type="text"
+								className="editor-post-permalink__slug-input"
+								onBlur={ this.onCancelEditPermalink }
+								value={ slug }
+								required
+							/>
+						</form>
+					}
+				</span>
 				<ClipboardButton className="button" text={ viewLink } onCopy={ this.onCopy }>
-					{ this.state.showCopyConfirmation ? __( 'Copied!' ) : __( 'Copy' ) }
+					{ showCopyConfirmation ? __( 'Copied!' ) : __( 'Copy' ) }
 				</ClipboardButton>
 			</div>
 		);

diff --git a/editor/post-permalink/style.scss b/editor/post-permalink/style.scss
@@ -35,3 +35,13 @@
 		@include long-content-fade( $size: 20% );
 	}
 }
+
+.editor-post-permalink__slug {
+	color: $dark-gray-300;
+	font-weight: bold;
+	cursor: pointer;
+}
+
+.editor-post-permalink__slug-form {
+	display: inline;
+}