Chrome: Always use the publish dropdown

editor/header/publish-button/index.js

@@ -8,17 +8,16 @@ 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,7 +26,6 @@ import {
 
 export function PublishButton( {
 	isSaving,
-	isPublished,
 	onStatusChange,
 	onSave,
 	isBeingScheduled,
@@ -40,17 +38,6 @@ export function PublishButton( {
 	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';
@@ -80,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-with-dropdown/index.js

@@ -6,61 +6,42 @@ import { connect } from 'react-redux';
 /**
  * WordPress Dependencies
  */
-import { Component } from '@wordpress/element';
-import { Popover, IconButton } from '@wordpress/components';
+import { Dropdown, Button, Dashicon } from '@wordpress/components';
 
 /**
  * Internal Dependencies
  */
 import './style.scss';
 import PublishDropdown from '../publish-dropdown';
-import PublishButton from '../publish-button';
+import PublishButtonLabel from '../publish-button/label';
 import {
 	isSavingPost,
 	isEditedPostSaveable,
 	isEditedPostPublishable,
 } from '../../selectors';
 
-class PublishWithDropdown extends Component {
-	constructor() {
-		super( ...arguments );
-		this.toggleDropdown = this.toggleDropdown.bind( this );
-		this.closeDropdown = this.closeDropdown.bind( this );
-		this.state = {
-			opened: false,
-		};
-	}
-
-	toggleDropdown( event ) {
-		event.stopPropagation();
-		this.setState( ( state ) => ( { opened: ! state.opened } ) );
-	}
-
-	closeDropdown() {
-		this.setState( { opened: false } );
-	}
-
-	render() {
-		const { opened } = this.state;
-		const { isSaving, isPublishable, isSaveable } = this.props;
-		const isButtonEnabled = ! isSaving && isPublishable && isSaveable;
-
-		return (
-			<div className="editor-publish-with-dropdown">
-				<PublishButton />
-				<div className="editor-publish-with-dropdown__arrow-container">
-					<IconButton
-						icon="arrow-down"
-						onClick={ this.toggleDropdown }
-						disabled={ ! isButtonEnabled }
-					/>
-					<Popover isOpen={ opened }>
-						<PublishDropdown onSubmit={ this.closeDropdown } />
-					</Popover>
-				</div>
-			</div>
-		);
-	}
+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(

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

@@ -1,23 +1,8 @@
-.wp-core-ui .editor-publish-with-dropdown {
-	position: relative;
+.editor-publish-with-dropdown {
 	margin: 0 10px;
-
-	.editor-publish-button.button.button-large {
-		padding-right: 40px;
-	}
 }
 
-.editor-publish-with-dropdown__arrow-container {
-	position: absolute;
-	right: 0;
-	top: 0;
-
-	.components-icon-button {
-		padding: 7px;
-		color: $white;
-
-		.components-icon-button:not(:disabled):hover {
-			color: $white;
-		}
-	}
+.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;
 		}