Chrome: Add a publish dropdown v1

editor/header/index.js

@@ -14,7 +14,7 @@ import { IconButton } from '@wordpress/components';
  */
 import './style.scss';
 import SavedState from './saved-state';
-import PublishButton from './publish-button';
+import PublishWithDropdown from './publish-with-dropdown';
 import PreviewButton from './preview-button';
 import ModeSwitcher from './mode-switcher';
 import Inserter from '../inserter';
@@ -87,7 +87,7 @@ function Header( {
 			<div className="editor-header__settings">
 				<SavedState />
 				<PreviewButton />
-				<PublishButton />
+				<PublishWithDropdown />
 				<IconButton
 					icon="admin-generic"
 					onClick={ toggleSidebar }

editor/header/publish-button/index.js

@@ -3,22 +3,21 @@
  */
 import { connect } from 'react-redux';
 import classnames from 'classnames';
-import { flowRight } from 'lodash';
+import { flowRight, noop } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { Button, withAPIData } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
+import PublishButtonLabel from './label';
 import { editPost, savePost } from '../../actions';
 import {
 	isSavingPost,
-	isCurrentPostPublished,
 	isEditedPostBeingScheduled,
 	getEditedPostVisibility,
 	isEditedPostSaveable,
@@ -27,29 +26,18 @@ import {
 
 export function PublishButton( {
 	isSaving,
-	isPublished,
 	onStatusChange,
 	onSave,
 	isBeingScheduled,
 	visibility,
 	isPublishable,
 	isSaveable,
 	user,
+	onSubmit = noop,
 } ) {
 	const isButtonEnabled = user.data && ! isSaving && isPublishable && isSaveable;
 	const isContributor = user.data && ! user.data.capabilities.publish_posts;
 
-	let buttonText;
-	if ( isContributor ) {
-		buttonText = __( 'Submit for Review' );
-	} else if ( isPublished ) {
-		buttonText = __( 'Update' );
-	} else if ( isBeingScheduled ) {
-		buttonText = __( 'Schedule' );
-	} else {
-		buttonText = __( 'Publish' );
-	}
-
 	let publishStatus;
 	if ( isContributor ) {
 		publishStatus = 'pending';
@@ -66,6 +54,7 @@ export function PublishButton( {
 	} );
 
 	const onClick = () => {
+		onSubmit();
 		onStatusChange( publishStatus );
 		onSave();
 	};
@@ -78,15 +67,14 @@ export function PublishButton( {
 			disabled={ ! isButtonEnabled }
 			className={ className }
 		>
-			{ buttonText }
+			<PublishButtonLabel />
 		</Button>
 	);
 }
 
 const applyConnect = connect(
 	( state ) => ( {
 		isSaving: isSavingPost( state ),
-		isPublished: isCurrentPostPublished( state ),
 		isBeingScheduled: isEditedPostBeingScheduled( state ),
 		visibility: getEditedPostVisibility( state ),
 		isSaveable: isEditedPostSaveable( state ),

editor/header/publish-button/label.js

@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+import { flowRight } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { withAPIData } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import {
+	isCurrentPostPublished,
+	isEditedPostBeingScheduled,
+} from '../../selectors';
+
+export function PublishButtonLabel( {
+	isPublished,
+	isBeingScheduled,
+	user,
+} ) {
+	const isContributor = user.data && ! user.data.capabilities.publish_posts;
+
+	if ( isContributor ) {
+		return __( 'Submit for Review' );
+	} else if ( isPublished ) {
+		return __( 'Update' );
+	} else if ( isBeingScheduled ) {
+		return __( 'Schedule' );
+	}
+
+	return __( 'Publish' );
+}
+
+const applyConnect = connect(
+	( state ) => ( {
+		isPublished: isCurrentPostPublished( state ),
+		isBeingScheduled: isEditedPostBeingScheduled( state ),
+	} )
+);
+
+const applyWithAPIData = withAPIData( () => {
+	return {
+		user: '/wp/v2/users/me?context=edit',
+	};
+} );
+
+export default flowRight( [
+	applyConnect,
+	applyWithAPIData,
+] )( PublishButtonLabel );

editor/header/publish-button/style.scss

@@ -1,8 +1,3 @@
-// Needs specificity to override bleed
-.wp-core-ui .button.button-large.editor-publish-button {
-	margin: 0 10px;
-}
-
 .editor-publish-button.is-saving,
 .editor-publish-button.is-saving:disabled {
 	position: relative;

editor/header/publish-dropdown/index.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress Dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal Dependencies
+ */
+import './style.scss';
+import PostVisibility from '../../sidebar/post-visibility';
+import PostSchedule from '../../sidebar/post-schedule';
+import PublishButton from '../publish-button';
+
+function PublishDropdown( { onSubmit } ) {
+	return (
+		<div className="editor-publish-dropdown">
+			<div><strong>{ __( 'All ready to go!' ) }</strong></div>
+			<PostVisibility />
+			<PostSchedule />
+			<div className="editor-publish-dropdown__publish-button-container">
+				<PublishButton onSubmit={ onSubmit } />
+			</div>
+		</div>
+	);
+}
+
+export default PublishDropdown;

editor/header/publish-dropdown/style.scss

@@ -0,0 +1,8 @@
+.editor-publish-dropdown {
+	padding: 15px;
+}
+
+.editor-publish-dropdown__publish-button-container {
+	margin-top: 20px;
+	text-align: right;
+}

editor/header/publish-with-dropdown/index.js

@@ -0,0 +1,53 @@
+/**
+ * External Dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * WordPress Dependencies
+ */
+import { Dropdown, Button, Dashicon } from '@wordpress/components';
+
+/**
+ * Internal Dependencies
+ */
+import './style.scss';
+import PublishDropdown from '../publish-dropdown';
+import PublishButtonLabel from '../publish-button/label';
+import {
+	isSavingPost,
+	isEditedPostSaveable,
+	isEditedPostPublishable,
+} from '../../selectors';
+
+function PublishWithDropdown( { isSaving, isPublishable, isSaveable } ) {
+	const isButtonEnabled = ! isSaving && isPublishable && isSaveable;
+
+	return (
+		<Dropdown
+			position="bottom left"
+			className="editor-publish-with-dropdown"
+			renderToggle={ ( { isOpen, onToggle } ) => (
+				<Button
+					className="editor-publish-with-dropdown__button"
+					isPrimary
+					onClick={ onToggle }
+					aria-expanded={ isOpen }
+					disabled={ ! isButtonEnabled }
+				>
+					<PublishButtonLabel />
+					<Dashicon icon="arrow-down" />
+				</Button>
+			) }
+			renderContent={ ( { onClose } ) => <PublishDropdown onSubmit={ onClose } /> }
+		/>
+	);
+}
+
+export default connect(
+	( state ) => ( {
+		isSaving: isSavingPost( state ),
+		isSaveable: isEditedPostSaveable( state ),
+		isPublishable: isEditedPostPublishable( state ),
+	} ),
+)( PublishWithDropdown );

editor/header/publish-with-dropdown/style.scss

@@ -0,0 +1,8 @@
+.editor-publish-with-dropdown {
+	margin: 0 10px;
+}
+
+.wp-core-ui .editor-publish-with-dropdown__button {
+	display: inline-flex;
+	align-items: center;
+}

editor/header/style.scss

@@ -107,10 +107,6 @@
 	margin-left: $item-spacing;
 }
 
-.editor-header__left .components-button {
-	margin-right: $item-spacing;
-}
-
 .editor-header .components-button {
 	border-radius: 3px;
 
@@ -132,7 +128,7 @@
 	}
 
 	@include break-medium() {
-		&.editor-publish-button {
+		&.editor-publish-button, &.editor-publish-with-dropdown__button {
 			height: 33px;
 			line-height: 32px;
 		}