From 3fc640bebd1ba7558edd464453f846cf95e7dc20 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 6 Oct 2017 11:30:39 +0100 Subject: [PATCH] Chrome: Always use the publish dropdown --- editor/header/publish-button/index.js | 18 +---- editor/header/publish-button/label.js | 56 ++++++++++++++++ editor/header/publish-with-dropdown/index.js | 67 +++++++------------ .../header/publish-with-dropdown/style.scss | 23 ++----- editor/header/style.scss | 6 +- 5 files changed, 87 insertions(+), 83 deletions(-) create mode 100644 editor/header/publish-button/label.js diff --git a/editor/header/publish-button/index.js b/editor/header/publish-button/index.js index 6f8f3ec723149..12e55e76e4f4f 100644 --- a/editor/header/publish-button/index.js +++ b/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,7 +67,7 @@ export function PublishButton( { disabled={ ! isButtonEnabled } className={ className } > - { buttonText } + ); } @@ -88,7 +75,6 @@ export function PublishButton( { const applyConnect = connect( ( state ) => ( { isSaving: isSavingPost( state ), - isPublished: isCurrentPostPublished( state ), isBeingScheduled: isEditedPostBeingScheduled( state ), visibility: getEditedPostVisibility( state ), isSaveable: isEditedPostSaveable( state ), diff --git a/editor/header/publish-button/label.js b/editor/header/publish-button/label.js new file mode 100644 index 0000000000000..17f3bd861f9c3 --- /dev/null +++ b/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 ); diff --git a/editor/header/publish-with-dropdown/index.js b/editor/header/publish-with-dropdown/index.js index 9d1d6596c037d..6eed9803821ed 100644 --- a/editor/header/publish-with-dropdown/index.js +++ b/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 ( -
- -
- - - - -
-
- ); - } +function PublishWithDropdown( { isSaving, isPublishable, isSaveable } ) { + const isButtonEnabled = ! isSaving && isPublishable && isSaveable; + + return ( + ( + + ) } + renderContent={ ( { onClose } ) => } + /> + ); } export default connect( diff --git a/editor/header/publish-with-dropdown/style.scss b/editor/header/publish-with-dropdown/style.scss index d777d905acb52..68181322b0f87 100644 --- a/editor/header/publish-with-dropdown/style.scss +++ b/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; } diff --git a/editor/header/style.scss b/editor/header/style.scss index 37f4da4e05cc5..7df74fb8ba679 100644 --- a/editor/header/style.scss +++ b/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; }