Chrome: Replace the publish dropdown by a sidebar panel

editor/assets/stylesheets/_z-index.scss

@@ -34,6 +34,7 @@ $z-layers: (
 	// Show sidebar above wp-admin navigation bar for mobile viewports:
 	// #wpadminbar { z-index: 99999 }
 	'.editor-sidebar': 100000,
+	'.editor-layout .editor-post-publish-panel': 100001,
 
 	// Show notices below expanded wp-admin submenus:
 	// #adminmenuwrap { z-index: 9990 }

editor/components/block-settings-menu/block-inspector-button.js

@@ -13,34 +13,32 @@ import { IconButton, withSpokenMessages } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import { isEditorSidebarOpened, getActivePanel } from '../../store/selectors';
+import { getActivePanel, isSidebarOpened } from '../../store/selectors';
 import { toggleSidebar, setActivePanel } from '../../store/actions';
 
 export function BlockInspectorButton( {
-	isSidebarOpened,
+	isDefaultSidebarOpened,
 	panel,
-	onToggleSidebar,
+	onOpenSidebar,
 	onShowInspector,
 	onClick = noop,
 	small = false,
 	speak,
 } ) {
 	const toggleInspector = () => {
 		onShowInspector();
-		if ( ! isSidebarOpened || ( isSidebarOpened && panel === 'block' ) ) {
-			onToggleSidebar();
-		}
+		onOpenSidebar( undefined, true );
 	};
 
 	const speakMessage = () => {
-		if ( ! isSidebarOpened || ( isSidebarOpened && panel !== 'block' ) ) {
+		if ( ! isDefaultSidebarOpened || ( isDefaultSidebarOpened && panel !== 'block' ) ) {
 			speak( __( 'Additional settings are now available in the Editor advanced settings sidebar' ) );
 		} else {
 			speak( __( 'Advanced settings closed' ) );
 		}
 	};
 
-	const label = ( isSidebarOpened && panel === 'block' ) ? __( 'Hide Advanced Settings' ) : __( 'Show Advanced Settings' );
+	const label = ( isDefaultSidebarOpened && panel === 'block' ) ? __( 'Hide Advanced Settings' ) : __( 'Show Advanced Settings' );
 
 	return (
 		<IconButton
@@ -56,15 +54,15 @@ export function BlockInspectorButton( {
 
 export default connect(
 	( state ) => ( {
-		isSidebarOpened: isEditorSidebarOpened( state ),
+		isDefaultSidebarOpened: isSidebarOpened( state ),
 		panel: getActivePanel( state ),
 	} ),
 	( dispatch ) => ( {
 		onShowInspector() {
 			dispatch( setActivePanel( 'block' ) );
 		},
-		onToggleSidebar() {
-			dispatch( toggleSidebar() );
+		onOpenSidebar() {
+			dispatch( toggleSidebar( undefined, true ) );
 		},
 	} )
 )( withSpokenMessages( BlockInspectorButton ) );

editor/components/index.js

@@ -24,7 +24,8 @@ export { default as PostPingbacks } from './post-pingbacks';
 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 PostPublishWithDropdown } from './post-publish-with-dropdown';
+export { default as PostPublishPanel } from './post-publish-panel';
+export { default as PostPublishPanelToggle } from './post-publish-panel/toggle';
 export { default as PostSavedState } from './post-saved-state';
 export { default as PostSchedule } from './post-schedule';
 export { default as PostScheduleLabel } from './post-schedule/label';

editor/components/post-publish-panel/index.js

@@ -0,0 +1,94 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { compose } from '@wordpress/element';
+import { withAPIData, PanelBody, IconButton } from '@wordpress/components';
+
+/**
+ * Internal Dependencies
+ */
+import './style.scss';
+import PostVisibility from '../post-visibility';
+import PostVisibilityLabel from '../post-visibility/label';
+import PostSchedule from '../post-schedule';
+import PostScheduleLabel from '../post-schedule/label';
+import PostPublishButton from '../post-publish-button';
+import PostSwitchToDraftButton from '../post-switch-to-draft-button';
+import { getCurrentPostType } from '../../store/selectors';
+
+function PostPublishPanel( { onClose, user } ) {
+	const canPublish = user.data && user.data.capabilities.publish_posts;
+
+	return (
+		<div className="editor-post-publish-panel">
+			<div className="editor-post-publish-panel__header">
+				<div className="editor-post-publish-panel__header-publish-button">
+					<PostPublishButton onSubmit={ onClose } />
+				</div>
+				<IconButton
+					onClick={ onClose }
+					icon="no-alt"
+					label={ __( 'Close Publish Panel' ) }
+				/>
+			</div>
+
+			<div className="editor-post-publish-panel__content">
+				<div><strong>{ __( 'All ready to go?' ) }</strong></div>
+				<p>{ __( 'Here, you can do a last-minute check up of your settings below, before you publish.' ) }</p>
+				{ ! canPublish &&
+					<div>
+						<span>{ __( 'Visibility' ) }</span>
+						<span><PostVisibilityLabel /></span>
+					</div>
+				}
+				{ canPublish &&
+					<PanelBody initialOpen={ false } title={ [
+						__( 'Visibility: ' ),
+						<span className="editor-post-publish-panel__link" key="label"><PostVisibilityLabel /></span>,
+					] }>
+						<PostVisibility />
+					</PanelBody>
+				}
+				{ canPublish &&
+					<PanelBody initialOpen={ false } title={ [
+						__( 'Publish: ' ),
+						<span className="editor-post-publish-panel__link" key="label"><PostScheduleLabel /></span>,
+					] }>
+						<PostSchedule />
+					</PanelBody>
+				}
+			</div>
+
+			<div className="editor-post-publish-panel__footer">
+				<PostSwitchToDraftButton />
+			</div>
+		</div>
+	);
+}
+
+const applyConnect = connect(
+	( state ) => {
+		return {
+			postType: getCurrentPostType( state ),
+		};
+	},
+);
+
+const applyWithAPIData = withAPIData( ( props ) => {
+	const { postType } = props;
+
+	return {
+		user: `/wp/v2/users/me?post_type=${ postType }&context=edit`,
+	};
+} );
+
+export default compose( [
+	applyConnect,
+	applyWithAPIData,
+] )( PostPublishPanel );

editor/components/post-publish-panel/style.scss

@@ -0,0 +1,61 @@
+.editor-post-publish-panel {
+	background: $white;
+	color: $dark-gray-500;
+}
+
+.editor-post-publish-panel__content {
+	padding: 16px;
+
+	.components-panel__body {
+		margin-left: -16px;
+		margin-right: -16px;
+		margin-bottom: -16px;
+		margin-top: 10px;
+		border: none;
+
+		.components-panel__body-toggle {
+			font-weight: normal;
+		}
+	}
+
+	.editor-post-visibility__dialog-legend {
+		display: none;
+	}
+}
+
+.editor-post-publish-panel__header {
+	padding-left: 16px;
+	height: $header-height;
+	border-bottom: 1px solid $light-gray-500;
+	display: flex;
+	align-items: center;
+	align-content: space-between;
+}
+
+.editor-post-publish-panel__header-publish-button {
+	flex-grow: 1;
+	text-align: right;
+}
+
+.editor-post-publish-panel__footer {
+	padding: 16px;
+}
+
+.wp-core-ui .editor-post-publish-panel__toggle.button-primary {
+	margin: 0 10px;
+	display: inline-flex;
+	align-items: center;
+
+	&.is-busy .dashicon {
+		display: none;
+	}
+
+	.dashicon {
+		margin-right: -4px;
+	}
+}
+
+.editor-post-publish-panel__link {
+	color: $blue-medium-700;
+	text-decoration: underline;
+}

editor/components/post-publish-panel/toggle.js

@@ -0,0 +1,49 @@
+/**
+ * External Dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * WordPress Dependencies
+ */
+import { Button, Dashicon } from '@wordpress/components';
+
+/**
+ * Internal Dependencies
+ */
+import PostPublishButtonLabel from '../post-publish-button/label';
+import {
+	isSavingPost,
+	isEditedPostSaveable,
+	isEditedPostPublishable,
+	isCurrentPostPublished,
+} from '../../store/selectors';
+
+function PostPublishPanelToggle( { isSaving, isPublishable, isSaveable, isPublished, onToggle, isOpen } ) {
+	const isButtonEnabled = (
+		! isSaving && isPublishable && isSaveable
+	) || isPublished;
+
+	return (
+		<Button
+			className="editor-post-publish-panel__toggle"
+			isPrimary
+			onClick={ onToggle }
+			aria-expanded={ isOpen }
+			disabled={ ! isButtonEnabled }
+			isBusy={ isSaving && isPublished }
+		>
+			<PostPublishButtonLabel />
+			<Dashicon icon="arrow-down" />
+		</Button>
+	);
+}
+
+export default connect(
+	( state ) => ( {
+		isSaving: isSavingPost( state ),
+		isSaveable: isEditedPostSaveable( state ),
+		isPublishable: isEditedPostPublishable( state ),
+		isPublished: isCurrentPostPublished( state ),
+	} ),
+)( PostPublishPanelToggle );