Create new postPublishModal component to house pre-publish checkes an…

…d post-publish information, replaces the current postPublishPanel

packages/edit-post/src/components/layout/index.js

@@ -19,7 +19,7 @@ import {
 	AutosaveMonitor,
 	UnsavedChangesWarning,
 	EditorNotices,
-	PostPublishPanel,
+	PostPublishModal,
 } from '@wordpress/editor';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { PluginArea } from '@wordpress/plugins';
@@ -100,7 +100,7 @@ function Layout( {
 				</div>
 			</div>
 			{ publishSidebarOpened ? (
-				<PostPublishPanel
+				<PostPublishModal
 					{ ...publishLandmarkProps }
 					onClose={ closePublishSidebar }
 					forceIsDirty={ hasActiveMetaboxes }

packages/editor/src/components/index.js

@@ -37,6 +37,7 @@ export { default as PostPreviewButton } from './post-preview-button';
 export { default as PostPublishButton } from './post-publish-button';
 export { default as PostPublishButtonLabel } from './post-publish-button/label';
 export { default as PostPublishPanel } from './post-publish-panel';
+export { default as PostPublishModal } from './post-publish-modal';
 export { default as PostSavedState } from './post-saved-state';
 export { default as PostSchedule } from './post-schedule';
 export { default as PostScheduleCheck } from './post-schedule/check';

packages/editor/src/components/post-publish-modal/index.js

@@ -0,0 +1,166 @@
+/**
+ * External dependencies
+ */
+import { get, omit } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Component } from '@wordpress/element';
+import {
+	Spinner,
+	CheckboxControl,
+	withFocusReturn,
+	withConstrainedTabbing,
+	Modal,
+} from '@wordpress/components';
+import { withSelect, withDispatch } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import PostPublishButton from '../post-publish-button';
+import PostPublishModalPrepublish from './prepublish';
+import PostPublishModalPostpublish from './postpublish';
+
+export class PostPublishModal extends Component {
+	constructor() {
+		super( ...arguments );
+		this.onSubmit = this.onSubmit.bind( this );
+	}
+
+	componentDidUpdate( prevProps ) {
+		// Automatically collapse the publish sidebar when a post
+		// is published and the user makes an edit.
+		if ( prevProps.isPublished && ! this.props.isSaving && this.props.isDirty ) {
+			this.props.onClose();
+		}
+	}
+
+	onSubmit() {
+		const { onClose, hasPublishAction, isPostTypeViewable } = this.props;
+		if ( ! hasPublishAction || ! isPostTypeViewable ) {
+			onClose();
+		}
+	}
+
+	render() {
+		const {
+			forceIsDirty,
+			forceIsSaving,
+			isBeingScheduled,
+			isPublished,
+			isPublishSidebarEnabled,
+			isScheduled,
+			isSaving,
+			onClose,
+			onTogglePublishSidebar,
+			PostPublishExtension,
+			PrePublishExtension,
+			hasPublishAction,
+			...additionalProps
+		} = this.props;
+		const propsForModal = omit( additionalProps, [ 'hasPublishAction', 'isDirty', 'isPostTypeViewable' ] );
+		const isPublishedOrScheduled = isPublished || ( isScheduled && isBeingScheduled );
+		const isPrePublish = ! isPublishedOrScheduled || isSaving;
+		const isPostPublish = isPublishedOrScheduled && ! isSaving;
+
+		let modalTitle;
+		if ( isSaving ) {
+			modalTitle = isScheduled ? __( 'Scheduling' ) : __( 'Publishing' );
+		} else if ( isPrePublish ) {
+			if ( ! hasPublishAction ) {
+				modalTitle = __( 'Are you ready to submit for review?' );
+			} else if ( isBeingScheduled ) {
+				modalTitle = __( 'Are you ready to schedule?' );
+			} else {
+				modalTitle = __( 'Are you ready to publish?' );
+			}
+		} else {
+			modalTitle = isScheduled ? __( 'Scheduled' ) : __( 'Published' );
+		}
+		return (
+			<Modal
+				className="editor-post-publish-modal"
+				title={ modalTitle }
+				closeLabel={ __( 'Close' ) }
+				onRequestClose={ onClose }
+			>
+				<div className="editor-post-publish-modal__content" { ...propsForModal }>
+					{ isPrePublish && (
+						isSaving ?
+							<Spinner /> :
+							<>
+								<PostPublishModalPrepublish>
+									{ PrePublishExtension && <PrePublishExtension /> }
+								</PostPublishModalPrepublish>
+								<CheckboxControl
+									label={ __( 'Always show these pre-publish checks.' ) }
+									checked={ isPublishSidebarEnabled }
+									onChange={ onTogglePublishSidebar }
+								/>
+							</>
+					) }
+
+					{ isPostPublish && (
+						<PostPublishModalPostpublish focusOnMount={ true } >
+							{ PostPublishExtension && <PostPublishExtension /> }
+						</PostPublishModalPostpublish>
+					) }
+
+					{ ! isPostPublish && (
+						<div className="editor-post-publish-modal__header-publish-button">
+							<PostPublishButton focusOnMount={ true } onSubmit={ this.onSubmit } forceIsDirty={ forceIsDirty } forceIsSaving={ forceIsSaving } />
+							<span className="editor-post-publish-modal__spacer"></span>
+						</div>
+					) }
+				</div>
+			</Modal>
+		);
+	}
+}
+
+export default compose( [
+	withSelect( ( select ) => {
+		const { getPostType } = select( 'core' );
+		const {
+			getCurrentPost,
+			getEditedPostAttribute,
+			isCurrentPostPublished,
+			isCurrentPostScheduled,
+			isEditedPostBeingScheduled,
+			isEditedPostDirty,
+			isSavingPost,
+		} = select( 'core/editor' );
+		const { isPublishSidebarEnabled } = select( 'core/editor' );
+		const postType = getPostType( getEditedPostAttribute( 'type' ) );
+
+		return {
+			hasPublishAction: get( getCurrentPost(), [ '_links', 'wp:action-publish' ], false ),
+			isPostTypeViewable: get( postType, [ 'viewable' ], false ),
+			isBeingScheduled: isEditedPostBeingScheduled(),
+			isDirty: isEditedPostDirty(),
+			isPublished: isCurrentPostPublished(),
+			isPublishSidebarEnabled: isPublishSidebarEnabled(),
+			isSaving: isSavingPost(),
+			isScheduled: isCurrentPostScheduled(),
+		};
+	} ),
+	withDispatch( ( dispatch, { isPublishSidebarEnabled } ) => {
+		const { disablePublishSidebar, enablePublishSidebar } = dispatch( 'core/editor' );
+
+		return {
+			onTogglePublishSidebar: ( ) => {
+				if ( isPublishSidebarEnabled ) {
+					disablePublishSidebar();
+				} else {
+					enablePublishSidebar();
+				}
+			},
+		};
+	} ),
+	withFocusReturn,
+	withConstrainedTabbing,
+] )( PostPublishModal );

packages/editor/src/components/post-publish-modal/postpublish.js

@@ -0,0 +1,120 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+
+import { ExternalLink, Button, ClipboardButton } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { Component, createRef } from '@wordpress/element';
+import { withSelect } from '@wordpress/data';
+import { safeDecodeURIComponent } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import PostScheduleLabel from '../post-schedule/label';
+
+class PostPublishModalPostpublish extends Component {
+	constructor() {
+		super( ...arguments );
+		this.state = {
+			showCopyConfirmation: false,
+		};
+		this.onCopy = this.onCopy.bind( this );
+		this.onSelectInput = this.onSelectInput.bind( this );
+		this.postLink = createRef();
+	}
+
+	componentDidMount() {
+		if ( this.props.focusOnMount ) {
+			this.postLink.current.focus();
+		}
+	}
+
+	componentWillUnmount() {
+		clearTimeout( this.dismissCopyConfirmation );
+	}
+
+	onCopy() {
+		this.setState( {
+			showCopyConfirmation: true,
+		} );
+
+		clearTimeout( this.dismissCopyConfirmation );
+		this.dismissCopyConfirmation = setTimeout( () => {
+			this.setState( {
+				showCopyConfirmation: false,
+			} );
+		}, 4000 );
+	}
+
+	onSelectInput( event ) {
+		event.target.select();
+	}
+
+	render() {
+		const { children, isScheduled, post, postType } = this.props;
+		const postLabel = get( postType, [ 'labels', 'singular_name' ] );
+		const viewPostLabel = get( postType, [ 'labels', 'view_item' ] );
+
+		const postPublishNonLinkHeader = isScheduled ?
+			<>{ __( 'is now scheduled. It will go live on' ) } <PostScheduleLabel />.</> :
+			__( 'is now live.' );
+
+		return (
+			<div className="post-publish-modal__postpublish">
+				<div className="editor-post-publish-modal-panel">
+					<a ref={ this.postLink } href={ post.link }>{ post.title || __( '(no title)' ) }</a> { postPublishNonLinkHeader }
+				</div>
+				<div className="editor-post-publish-modal-panel">
+					{
+						sprintf(
+							/* translators: %s: post type singular name */
+							__( 'Link to your %s:' ), postLabel
+						)
+					}
+					<br />
+					<ExternalLink
+						className="post-publish-modal__postpublish-post-address"
+						href={ safeDecodeURIComponent( post.link ) }
+						target="_blank"
+						ref={ ( linkElement ) => this.linkElement = linkElement }
+					>
+						{ safeDecodeURIComponent( post.link ) }
+						&lrm;
+					</ExternalLink>
+				</div>
+				<div className="editor-post-publish-modal-panel">
+					{ ! isScheduled && (
+						<Button isDefault href={ post.link }>
+							{ viewPostLabel }
+						</Button>
+					) }
+
+					<ClipboardButton
+						isDefault text={ post.link }
+						onCopy={ this.onCopy }
+					>
+						{ this.state.showCopyConfirmation ? __( 'Copied!' ) : __( 'Copy Link' ) }
+					</ClipboardButton>
+				</div>
+				{ children }
+			</div>
+		);
+	}
+}
+
+export default withSelect( ( select ) => {
+	const { getEditedPostAttribute, getCurrentPost, isCurrentPostScheduled } = select( 'core/editor' );
+	const { getPostType } = select( 'core' );
+
+	return {
+		post: getCurrentPost(),
+		postType: getPostType( getEditedPostAttribute( 'type' ) ),
+		isScheduled: isCurrentPostScheduled(),
+	};
+} )( PostPublishModalPostpublish );