Add permalinks to the document sidebar (#11874)

## Description
Closes: #11858
This PR adds a permalink panel to the document sidebar, trying to follow the design specified in #11858.

This PR is the first iteration so that we can iterate on the design in parallel.
One missing nice feature is the ability to auto refresh the permalink settings (prefix/suffix) if the settings are changed in another tab, I'm not sure if this feature is a blocker and I wanted to think a little bit better about this part.


## How has this been tested?
Verify that if the post is new, the panel does not appear. Some behavior we have on the existing permalink edit UI (close to title).
Verify that if the post does not contains editable permalinks (e.g.: Plain permalink setting) the input is not available and only the post link is shown.
Verify that if the permalink is editable it is possible to edit the permalink without problems and after saving the post the permalink is correctly changed/saved.

## Screenshots <!-- if applicable -->

<img width="281" alt="screenshot 2018-11-14 at 17 57 30" src="https://user-images.githubusercontent.com/11271197/48504970-ea847b00-e83d-11e8-8c19-484c7007b67c.png">
<img width="277" alt="screenshot 2018-11-14 at 18 19 20" src="https://user-images.githubusercontent.com/11271197/48504971-ea847b00-e83d-11e8-87f5-37d62da62203.png">
<img width="285" alt="screenshot 2018-11-14 at 18 45 37" src="https://user-images.githubusercontent.com/11271197/48504972-eb1d1180-e83d-11e8-82fa-087666d8b6c6.png">

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

@@ -0,0 +1,149 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { PanelBody, TextControl } from '@wordpress/components';
+import { withSelect, withDispatch } from '@wordpress/data';
+import { compose, ifCondition, withState } from '@wordpress/compose';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Module Constants
+ */
+const PANEL_NAME = 'post-link';
+
+function PostLink( {
+	isOpened,
+	onTogglePanel,
+	isEditable,
+	postLink,
+	permalinkParts,
+	editPermalink,
+	forceEmptyField,
+	setState,
+} ) {
+	const { prefix, postName, suffix } = permalinkParts;
+	let prefixElement, postNameElement, suffixElement;
+	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>
+		);
+		suffixElement = suffix && (
+			<span className="edit-post-post-link__link-suffix">{ suffix }</span>
+		);
+	}
+
+	return (
+		<PanelBody
+			title={ __( 'Permalink' ) }
+			opened={ isOpened }
+			onToggle={ onTogglePanel }
+		>
+			{ isEditable && (
+				<TextControl
+					label={ __( 'URL' ) }
+					value={ forceEmptyField ? '' : postName }
+					onChange={ ( newValue ) => {
+						editPermalink( newValue );
+						// When we delete the field the permalink gets
+						// reverted to the original value.
+						// The forceEmptyField logic allows the user to have
+						// the field temporarily empty while typing.
+						if ( ! newValue ) {
+							if ( ! forceEmptyField ) {
+								setState( {
+									forceEmptyField: true,
+								} );
+							}
+							return;
+						}
+						if ( forceEmptyField ) {
+							setState( {
+								forceEmptyField: false,
+							} );
+						}
+					} }
+				/>
+			) }
+			<p className="edit-post-post-link__preview-label">
+				{ __( 'Preview' ) }
+			</p>
+			<a
+				className="edit-post-post-link__link"
+				href={ postLink }
+				target="_blank"
+			>
+				{ isEditable ?
+					( <Fragment>
+						{ prefixElement }{ postNameElement }{ suffixElement }
+					</Fragment> ) :
+					postLink
+				}
+			</a>
+			<a
+				className="edit-post-post-link__permalink-settings"
+				href={ addQueryArgs( 'options-permalink.php' ) }
+				target="_blank"
+			>
+				{ __( 'Permalink Settings' ) }
+			</a>
+		</PanelBody>
+	);
+}
+
+export default compose( [
+	withSelect( ( select ) => {
+		const {
+			isEditedPostNew,
+			isPermalinkEditable,
+			getCurrentPost,
+			isCurrentPostPublished,
+			getPermalinkParts,
+			getEditedPostAttribute,
+		} = select( 'core/editor' );
+		const {
+			isEditorPanelOpened,
+		} = select( 'core/edit-post' );
+		const {
+			getPostType,
+		} = select( 'core' );
+
+		const { link } = getCurrentPost();
+		const postTypeName = getEditedPostAttribute( 'type' );
+		const postType = getPostType( postTypeName );
+		return {
+			isNew: isEditedPostNew(),
+			postLink: link,
+			isEditable: isPermalinkEditable(),
+			isPublished: isCurrentPostPublished(),
+			isOpened: isEditorPanelOpened( PANEL_NAME ),
+			permalinkParts: getPermalinkParts(),
+			isViewable: get( postType, [ 'viewable' ], false ),
+		};
+	} ),
+	ifCondition( ( { isNew, postLink, isViewable } ) => {
+		return ! isNew && postLink && isViewable;
+	} ),
+	withDispatch( ( dispatch ) => {
+		const { toggleEditorPanelOpened } = dispatch( 'core/edit-post' );
+		const { editPost } = dispatch( 'core/editor' );
+		return {
+			onTogglePanel: () => toggleEditorPanelOpened( PANEL_NAME ),
+			editPermalink: ( newSlug ) => {
+				editPost( { slug: newSlug } );
+			},
+		};
+	} ),
+	withState( {
+		forceEmptyField: false,
+	} ),
+] )( PostLink );

packages/edit-post/src/components/sidebar/post-link/style.scss

@@ -0,0 +1,21 @@
+.edit-post-post-link__link {
+	font-weight: 600;
+}
+
+.edit-post-post-link__link-post-name {
+	font-weight: 800;
+}
+
+.edit-post-post-link__preview-label {
+	margin: 0;
+}
+
+.edit-post-post-link__link {
+	word-wrap: break-word;
+}
+
+.edit-post-post-link__permalink-settings {
+	margin-top: 1em;
+	font-weight: 500;
+	display: block;
+}

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

@@ -17,6 +17,7 @@ import LastRevision from '../last-revision';
 import PostTaxonomies from '../post-taxonomies';
 import FeaturedImage from '../featured-image';
 import PostExcerpt from '../post-excerpt';
+import PostLink from '../post-link';
 import DiscussionPanel from '../discussion-panel';
 import PageAttributes from '../page-attributes';
 import MetaBoxes from '../../meta-boxes';
@@ -32,6 +33,7 @@ const SettingsSidebar = ( { sidebarName } ) => (
 				<Fragment>
 					<PostStatus />
 					<LastRevision />
+					<PostLink />
 					<PostTaxonomies />
 					<FeaturedImage />
 					<PostExcerpt />

packages/edit-post/src/style.scss

@@ -10,6 +10,7 @@
 @import "./components/sidebar/style.scss";
 @import "./components/sidebar/last-revision/style.scss";
 @import "./components/sidebar/post-author/style.scss";
+@import "./components/sidebar/post-link/style.scss";
 @import "./components/sidebar/post-schedule/style.scss";
 @import "./components/sidebar/post-status/style.scss";
 @import "./components/sidebar/post-visibility/style.scss";