From 3044063c7b5eaa9b582753005f5ef9ead4cebace Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 7 Nov 2018 17:18:09 +0100 Subject: [PATCH 01/27] Toggle disabled if post is published --- .../editor/src/components/post-publish-panel/test/toggle.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/post-publish-panel/test/toggle.js b/packages/editor/src/components/post-publish-panel/test/toggle.js index 81126aa76a14d7..30608f398dfc29 100644 --- a/packages/editor/src/components/post-publish-panel/test/toggle.js +++ b/packages/editor/src/components/post-publish-panel/test/toggle.js @@ -66,7 +66,7 @@ describe( 'PostPublishPanelToggle', () => { /> ); - expect( wrapper.prop( 'disabled' ) ).toBe( true ); + expect( wrapper.prop( 'disabled' ) ).toBe( false ); } ); it( 'should be enabled if post is saveable but not publishable and forceIsDirty is true', () => { From 6cca77329ae2934570d11df277c06751421afb91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 8 Nov 2018 11:11:23 +0100 Subject: [PATCH 02/27] Toggle should be disabled if post is published --- .../editor/src/components/post-publish-panel/test/toggle.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/post-publish-panel/test/toggle.js b/packages/editor/src/components/post-publish-panel/test/toggle.js index 30608f398dfc29..81126aa76a14d7 100644 --- a/packages/editor/src/components/post-publish-panel/test/toggle.js +++ b/packages/editor/src/components/post-publish-panel/test/toggle.js @@ -66,7 +66,7 @@ describe( 'PostPublishPanelToggle', () => { /> ); - expect( wrapper.prop( 'disabled' ) ).toBe( false ); + expect( wrapper.prop( 'disabled' ) ).toBe( true ); } ); it( 'should be enabled if post is saveable but not publishable and forceIsDirty is true', () => { From 4bfb6974587a566cfc7b89621bb9c94f289f758d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 6 Nov 2018 14:25:58 +0100 Subject: [PATCH 03/27] Return focus to Publish... button - Do not unmount Header settings components. - Hide the "Save draft" button because it's not hidden by the PostPublishPanel slide-in sidebar. --- .../edit-post/src/components/header/index.js | 50 +++++++++---------- .../components/post-publish-panel/index.js | 2 + 2 files changed, 26 insertions(+), 26 deletions(-) diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 554ae583210c07..73d7e1e4ab71e5 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -39,34 +39,32 @@ function Header( { tabIndex="-1" > - { ! isPublishSidebarOpened && ( -
- + { ! isPublishSidebarOpened && ( ) } + + +
+ - - -
- - - { __( 'You’ll find more settings for your page and blocks in the sidebar. Click “Settings” to open it.' ) } - -
- - + + { __( 'You’ll find more settings for your page and blocks in the sidebar. Click “Settings” to open it.' ) } +
- ) } + + +
); } diff --git a/packages/editor/src/components/post-publish-panel/index.js b/packages/editor/src/components/post-publish-panel/index.js index e6d324624fab01..0b38b0dd78400d 100644 --- a/packages/editor/src/components/post-publish-panel/index.js +++ b/packages/editor/src/components/post-publish-panel/index.js @@ -12,6 +12,7 @@ import { IconButton, Spinner, CheckboxControl, + withFocusReturn, withConstrainedTabbing, } from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; @@ -142,5 +143,6 @@ export default compose( [ }, }; } ), + withFocusReturn, withConstrainedTabbing, ] )( PostPublishPanel ); From 0fac6ef328fd9d662700f46783ae2269eabe7f84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 7 Nov 2018 10:53:20 +0100 Subject: [PATCH 04/27] Sort dependencies --- .../src/components/header/post-publish-button-or-toggle.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-post/src/components/header/post-publish-button-or-toggle.js b/packages/edit-post/src/components/header/post-publish-button-or-toggle.js index efa0621f72a993..6786e49b09da26 100644 --- a/packages/edit-post/src/components/header/post-publish-button-or-toggle.js +++ b/packages/edit-post/src/components/header/post-publish-button-or-toggle.js @@ -6,9 +6,9 @@ import { get } from 'lodash'; /** * WordPress dependencies. */ -import { PostPublishPanelToggle, PostPublishButton } from '@wordpress/editor'; import { compose } from '@wordpress/compose'; import { withDispatch, withSelect } from '@wordpress/data'; +import { PostPublishPanelToggle, PostPublishButton } from '@wordpress/editor'; import { withViewportMatch } from '@wordpress/viewport'; export function PostPublishButtonOrToggle( { From 3155c59a60ec95fb99095de864a1abc135cf17c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 7 Nov 2018 12:56:16 +0100 Subject: [PATCH 05/27] Extract props --- .../src/components/post-publish-button/index.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/editor/src/components/post-publish-button/index.js b/packages/editor/src/components/post-publish-button/index.js index 69233c86931d86..76e421f4604599 100644 --- a/packages/editor/src/components/post-publish-button/index.js +++ b/packages/editor/src/components/post-publish-button/index.js @@ -66,15 +66,18 @@ export class PostPublishButton extends Component { onSave(); }; + const buttonProps = { + className: 'editor-post-publish-button', + disabled: isButtonDisabled, + isBusy: isSaving && isPublished, + isLarge: true, + isPrimary: true, + onClick, + }; return ( From 9228b681b5fbabd1f75a7329e874b95dd061d84c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 8 Nov 2018 12:43:53 +0100 Subject: [PATCH 06/27] Add toggleProps to button --- .../header/post-publish-button-or-toggle.js | 7 +++- .../components/post-publish-button/index.js | 41 ++++++++++++++----- 2 files changed, 36 insertions(+), 12 deletions(-) diff --git a/packages/edit-post/src/components/header/post-publish-button-or-toggle.js b/packages/edit-post/src/components/header/post-publish-button-or-toggle.js index 6786e49b09da26..fe5c0b3bb63140 100644 --- a/packages/edit-post/src/components/header/post-publish-button-or-toggle.js +++ b/packages/edit-post/src/components/header/post-publish-button-or-toggle.js @@ -28,14 +28,17 @@ export function PostPublishButtonOrToggle( { ); const toggle = ( ); diff --git a/packages/editor/src/components/post-publish-button/index.js b/packages/editor/src/components/post-publish-button/index.js index 76e421f4604599..e047ba585488ea 100644 --- a/packages/editor/src/components/post-publish-button/index.js +++ b/packages/editor/src/components/post-publish-button/index.js @@ -28,19 +28,22 @@ export class PostPublishButton extends Component { render() { const { - isSaving, - onStatusChange, - onSave, + forceIsDirty, + forceIsSaving, + hasPublishAction, isBeingScheduled, - visibility, - isPublishable, - isSaveable, + isOpen, isPostSavingLocked, + isPublishable, isPublished, - hasPublishAction, + isSaveable, + isSaving, + isToggle, + onSave, + onStatusChange, onSubmit = noop, - forceIsDirty, - forceIsSaving, + onToggle, + visibility, } = this.props; const isButtonDisabled = isSaving || @@ -49,6 +52,13 @@ export class PostPublishButton extends Component { isPostSavingLocked || ( ! isPublishable && ! forceIsDirty ); + const isToggleDisabled = + isPublished || + isSaving || + forceIsSaving || + ! isSaveable || + ( ! isPublishable && ! forceIsDirty ); + let publishStatus; if ( ! hasPublishAction ) { publishStatus = 'pending'; @@ -74,10 +84,21 @@ export class PostPublishButton extends Component { isPrimary: true, onClick, }; + + const toggleProps = { + 'aria-expanded': isOpen, + className: 'editor-post-publish-panel__toggle', + disabled: isToggleDisabled, + isBusy: isSaving && isPublished, + isPrimary: true, + onClick: onToggle, + }; + + const componentProps = isToggle ? toggleProps : buttonProps; return ( From 557eca06ab36316740145382f152833984e3fb8d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 8 Nov 2018 13:43:11 +0100 Subject: [PATCH 07/27] Inline text for toggle within the button component --- .../editor/src/components/post-publish-button/index.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/post-publish-button/index.js b/packages/editor/src/components/post-publish-button/index.js index e047ba585488ea..7f4b8fc7c7f727 100644 --- a/packages/editor/src/components/post-publish-button/index.js +++ b/packages/editor/src/components/post-publish-button/index.js @@ -10,6 +10,7 @@ import { Button } from '@wordpress/components'; import { Component, createRef } from '@wordpress/element'; import { withSelect, withDispatch } from '@wordpress/data'; import { compose } from '@wordpress/compose'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -94,13 +95,17 @@ export class PostPublishButton extends Component { onClick: onToggle, }; + const toggleChildren = isBeingScheduled ? __( 'Schedule…' ) : __( 'Publish…' ); + const buttonChildren = ; + const componentProps = isToggle ? toggleProps : buttonProps; + const componentChildren = isToggle ? toggleChildren : buttonChildren; return ( ); } From 4bbcac430ae759f18087815527802a6f8c2abdcb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 8 Nov 2018 13:53:03 +0100 Subject: [PATCH 08/27] Always render the button component --- .../header/post-publish-button-or-toggle.js | 55 +++++++++---------- 1 file changed, 25 insertions(+), 30 deletions(-) diff --git a/packages/edit-post/src/components/header/post-publish-button-or-toggle.js b/packages/edit-post/src/components/header/post-publish-button-or-toggle.js index fe5c0b3bb63140..5cf47901d1de62 100644 --- a/packages/edit-post/src/components/header/post-publish-button-or-toggle.js +++ b/packages/edit-post/src/components/header/post-publish-button-or-toggle.js @@ -8,7 +8,7 @@ import { get } from 'lodash'; */ import { compose } from '@wordpress/compose'; import { withDispatch, withSelect } from '@wordpress/data'; -import { PostPublishPanelToggle, PostPublishButton } from '@wordpress/editor'; +import { PostPublishButton } from '@wordpress/editor'; import { withViewportMatch } from '@wordpress/viewport'; export function PostPublishButtonOrToggle( { @@ -24,24 +24,9 @@ export function PostPublishButtonOrToggle( { isScheduled, togglePublishSidebar, } ) { - const button = ( - - ); - const toggle = ( - - ); - + const IS_TOGGLE = 'toggle'; + const IS_BUTTON = 'button'; + let component; /** * We want to show a BUTTON when the post status is at the _final stage_ * for a particular role (see https://codex.wordpress.org/Post_Status): @@ -56,25 +41,35 @@ export function PostPublishButtonOrToggle( { * so given the lack of UI real state we decided to take into account the viewport * in that particular case. */ - if ( - isPublished || - ( isScheduled && isBeingScheduled ) || - ( isPending && ! hasPublishAction && ! isLessThanMediumViewport ) - ) { - return button; - } - /** * Then, we take other things into account: * * - Show TOGGLE if it is small viewport. * - Otherwise, use publish sidebar status to decide - TOGGLE if enabled, BUTTON if not. */ - if ( isLessThanMediumViewport ) { - return toggle; + if ( + isPublished || + ( isScheduled && isBeingScheduled ) || + ( isPending && ! hasPublishAction && ! isLessThanMediumViewport ) + ) { + component = IS_BUTTON; + } else if ( isLessThanMediumViewport ) { + component = IS_TOGGLE; + } else if ( isPublishSidebarEnabled ) { + component = IS_TOGGLE; + } else { + component = IS_BUTTON; } - return isPublishSidebarEnabled ? toggle : button; + return ( + + ); } export default compose( From 22a421fc7eb9a9a9620fb4494010d92d85aae2fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 8 Nov 2018 14:13:40 +0100 Subject: [PATCH 09/27] Use aria-disabled instead of disabled to avoid focus loss --- .../components/post-publish-button/index.js | 4 +-- .../post-publish-button/test/index.js | 30 +++++++++---------- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/editor/src/components/post-publish-button/index.js b/packages/editor/src/components/post-publish-button/index.js index 7f4b8fc7c7f727..8f64e2e54e7f2f 100644 --- a/packages/editor/src/components/post-publish-button/index.js +++ b/packages/editor/src/components/post-publish-button/index.js @@ -78,8 +78,8 @@ export class PostPublishButton extends Component { }; const buttonProps = { + 'aria-disabled': isButtonDisabled, className: 'editor-post-publish-button', - disabled: isButtonDisabled, isBusy: isSaving && isPublished, isLarge: true, isPrimary: true, @@ -87,9 +87,9 @@ export class PostPublishButton extends Component { }; const toggleProps = { + 'aria-disabled': isToggleDisabled, 'aria-expanded': isOpen, className: 'editor-post-publish-panel__toggle', - disabled: isToggleDisabled, isBusy: isSaving && isPublished, isPrimary: true, onClick: onToggle, diff --git a/packages/editor/src/components/post-publish-button/test/index.js b/packages/editor/src/components/post-publish-button/test/index.js index b48d60f8366713..8fbef6007144a0 100644 --- a/packages/editor/src/components/post-publish-button/test/index.js +++ b/packages/editor/src/components/post-publish-button/test/index.js @@ -11,8 +11,8 @@ import { PostPublishButton } from '../'; jest.mock( '../../../../../components/src/button' ); describe( 'PostPublishButton', () => { - describe( 'disabled', () => { - it( 'should be disabled if post is currently saving', () => { + describe( 'aria-disabled', () => { + it( 'should be true if post is currently saving', () => { const wrapper = shallow( { /> ); - expect( wrapper.prop( 'disabled' ) ).toBe( true ); + expect( wrapper.prop( 'aria-disabled' ) ).toBe( true ); } ); - it( 'should be disabled if forceIsSaving is true', () => { + it( 'should be true if forceIsSaving is true', () => { const wrapper = shallow( { /> ); - expect( wrapper.prop( 'disabled' ) ).toBe( true ); + expect( wrapper.prop( 'aria-disabled' ) ).toBe( true ); } ); - it( 'should be disabled if post is not publishable and not forceIsDirty', () => { + it( 'should be true if post is not publishable and not forceIsDirty', () => { const wrapper = shallow( { /> ); - expect( wrapper.prop( 'disabled' ) ).toBe( true ); + expect( wrapper.prop( 'aria-disabled' ) ).toBe( true ); } ); - it( 'should be disabled if post is not saveable', () => { + it( 'should be true if post is not saveable', () => { const wrapper = shallow( { /> ); - expect( wrapper.prop( 'disabled' ) ).toBe( true ); + expect( wrapper.prop( 'aria-disabled' ) ).toBe( true ); } ); - it( 'should be disabled if post saving is locked', () => { + it( 'should be true if post saving is locked', () => { const wrapper = shallow( { /> ); - expect( wrapper.prop( 'disabled' ) ).toBe( true ); + expect( wrapper.prop( 'aria-disabled' ) ).toBe( true ); } ); - it( 'should be enabled if post is saveable but not publishable and forceIsDirty is true', () => { + it( 'should be false if post is saveable but not publishable and forceIsDirty is true', () => { const wrapper = shallow( { /> ); - expect( wrapper.prop( 'disabled' ) ).toBe( false ); + expect( wrapper.prop( 'aria-disabled' ) ).toBe( false ); } ); - it( 'should be enabled if post is publishave and saveable', () => { + it( 'should be false if post is publishave and saveable', () => { const wrapper = shallow( { /> ); - expect( wrapper.prop( 'disabled' ) ).toBe( false ); + expect( wrapper.prop( 'aria-disabled' ) ).toBe( false ); } ); } ); From 35de33751d432f2ac6d39151fab3f990c01712e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 8 Nov 2018 14:30:58 +0100 Subject: [PATCH 10/27] Improve comments --- .../header/post-publish-button-or-toggle.js | 26 ++++++++++--------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/packages/edit-post/src/components/header/post-publish-button-or-toggle.js b/packages/edit-post/src/components/header/post-publish-button-or-toggle.js index 5cf47901d1de62..aedf6542daccd4 100644 --- a/packages/edit-post/src/components/header/post-publish-button-or-toggle.js +++ b/packages/edit-post/src/components/header/post-publish-button-or-toggle.js @@ -27,25 +27,27 @@ export function PostPublishButtonOrToggle( { const IS_TOGGLE = 'toggle'; const IS_BUTTON = 'button'; let component; + /** - * We want to show a BUTTON when the post status is at the _final stage_ + * Conditions to show a BUTTON (publish directly) or a TOGGLE (open publish sidebar): + * + * 1) We want to show a BUTTON when the post status is at the _final stage_ * for a particular role (see https://codex.wordpress.org/Post_Status): * * - is published * - is scheduled to be published - * - is pending and can't be published (but only for viewports >= medium) + * - is pending and can't be published (but only for viewports >= medium). + * Originally, we considered showing a button for pending posts that couldn't be published + * (for ex, for a contributor role). Some languages can have really long translations + * for "Submit for review", so given the lack of UI real state available + * we decided to take into account the viewport in that particular case. * - * Originally we considered showing a button for pending posts - * that couldn't be published (for ex, for a contributor role). - * Some languages can have really long translations for "Submit for review", - * so given the lack of UI real state we decided to take into account the viewport - * in that particular case. - */ - /** - * Then, we take other things into account: + * 2) Then, in small viewports, we'll show a TOGGLE. + * + * 3) Finally, we'll use the publish sidebar status to decide: * - * - Show TOGGLE if it is small viewport. - * - Otherwise, use publish sidebar status to decide - TOGGLE if enabled, BUTTON if not. + * - if it is enabled, we show a TOGGLE + * - if it is disabled, we show a BUTTON */ if ( isPublished || From c2b1a9f0418d0f0c173fa70b2aa8d7864ab8027f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 8 Nov 2018 14:51:34 +0100 Subject: [PATCH 11/27] Update snapshots --- .../header/test/__snapshots__/index.js.snap | 36 +++++++++++++++---- 1 file changed, 30 insertions(+), 6 deletions(-) diff --git a/packages/edit-post/src/components/header/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/header/test/__snapshots__/index.js.snap index 59d931e6ef3895..95ed8d68d7ded8 100644 --- a/packages/edit-post/src/components/header/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/header/test/__snapshots__/index.js.snap @@ -1,13 +1,37 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`PostPublishButtonOrToggle should render a button when post is not (1), (2), (3), the viewport is >= medium, and the publish sidebar is disabled 1`] = ``; +exports[`PostPublishButtonOrToggle should render a button when post is not (1), (2), (3), the viewport is >= medium, and the publish sidebar is disabled 1`] = ` + +`; -exports[`PostPublishButtonOrToggle should render a button when the post is pending and cannot be published but the viewport is >= medium (3) 1`] = ``; +exports[`PostPublishButtonOrToggle should render a button when the post is pending and cannot be published but the viewport is >= medium (3) 1`] = ` + +`; -exports[`PostPublishButtonOrToggle should render a button when the post is published (1) 1`] = ``; +exports[`PostPublishButtonOrToggle should render a button when the post is published (1) 1`] = ` + +`; -exports[`PostPublishButtonOrToggle should render a button when the post is scheduled (2) 1`] = ``; +exports[`PostPublishButtonOrToggle should render a button when the post is scheduled (2) 1`] = ` + +`; -exports[`PostPublishButtonOrToggle should render a toggle when post is not (1), (2), (3), the viewport is >= medium, and the publish sidebar is enabled 1`] = ``; +exports[`PostPublishButtonOrToggle should render a toggle when post is not (1), (2), (3), the viewport is >= medium, and the publish sidebar is enabled 1`] = ` + +`; -exports[`PostPublishButtonOrToggle should render a toggle when post is not published or scheduled and the viewport is < medium 1`] = ``; +exports[`PostPublishButtonOrToggle should render a toggle when post is not published or scheduled and the viewport is < medium 1`] = ` + +`; From b12e4c380b87afb8b37be79c30c9153bec9fa7d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Fri, 9 Nov 2018 11:10:33 +0100 Subject: [PATCH 12/27] Add deprecation notice in editor CHANGELOG --- packages/editor/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md index 9379ec67de9966..bd2900c13df717 100644 --- a/packages/editor/CHANGELOG.md +++ b/packages/editor/CHANGELOG.md @@ -1,5 +1,9 @@ ## 6.2.1 (Unreleased) +### Deprecations + +- `wp.editor.PostPublishPanelToggle` has been deprecated in favor of `wp.editor.PostPublishButton`. + ### Polish - Reactive block styles. From 9ba9dd4aadaf46ba02b9406e00fc4a78f6fdf2ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Fri, 9 Nov 2018 11:11:05 +0100 Subject: [PATCH 13/27] Add deprecation notice in plugin --- docs/reference/deprecated.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/reference/deprecated.md b/docs/reference/deprecated.md index e1a54e3498c1d6..85edd9fa01d64e 100644 --- a/docs/reference/deprecated.md +++ b/docs/reference/deprecated.md @@ -1,5 +1,9 @@ Gutenberg's deprecation policy is intended to support backwards-compatibility for releases, when possible. The current deprecations are listed below and are grouped by _the version at which they will be removed completely_. If your plugin depends on these behaviors, you must update to the recommended alternative before the noted version. +## 5.1 + +- `wp.editor.PostPublishPanelToggle` has been deprecated in favor of `wp.editor.PostPublishButton`. + ## 4.5.0 - `Dropdown.refresh()` has been deprecated as the contained `Popover` is now automatically refreshed. From 6956da26326ff4b33b8998b8bfb671a7dc94df41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Fri, 9 Nov 2018 11:14:10 +0100 Subject: [PATCH 14/27] Add deprecation in component --- .../editor/src/components/post-publish-panel/toggle.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/editor/src/components/post-publish-panel/toggle.js b/packages/editor/src/components/post-publish-panel/toggle.js index a617354392031a..dc5776837f728f 100644 --- a/packages/editor/src/components/post-publish-panel/toggle.js +++ b/packages/editor/src/components/post-publish-panel/toggle.js @@ -3,6 +3,7 @@ */ import { Button } from '@wordpress/components'; import { compose } from '@wordpress/compose'; +import deprecated from '@wordpress/deprecated'; import { __ } from '@wordpress/i18n'; import { withSelect } from '@wordpress/data'; import { DotTip } from '@wordpress/nux'; @@ -25,6 +26,12 @@ export function PostPublishPanelToggle( { ! isSaveable || ( ! isPublishable && ! forceIsDirty ); + deprecated( 'PostPublishPanelToggle', { + version: '5.1', + alternative: 'PostPublishButton', + plugin: 'Gutenberg', + } ); + return ( ); } From 72b8e992d909d4d5c0d3ec3e209c96307fce3794 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Fri, 9 Nov 2018 11:30:20 +0100 Subject: [PATCH 16/27] Fix deprecation warning in tests --- .../editor/src/components/post-publish-panel/test/toggle.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/editor/src/components/post-publish-panel/test/toggle.js b/packages/editor/src/components/post-publish-panel/test/toggle.js index 81126aa76a14d7..72514b3747d6a0 100644 --- a/packages/editor/src/components/post-publish-panel/test/toggle.js +++ b/packages/editor/src/components/post-publish-panel/test/toggle.js @@ -20,6 +20,9 @@ describe( 'PostPublishPanelToggle', () => { ); expect( wrapper.prop( 'disabled' ) ).toBe( true ); + expect( console ).toHaveWarnedWith( + 'PostPublishPanelToggle is deprecated and will be removed from Gutenberg in 5.1. Please use PostPublishButton instead.' + ); } ); it( 'should be disabled if post is currently force saving', () => { From 0e2cae7307f020d7622556fd34ef42e7ff1ae5f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Fri, 9 Nov 2018 12:28:34 +0100 Subject: [PATCH 17/27] Update PostPublishButton e2e tests to use aria-disabled instead of disabled att --- test/e2e/specs/publish-button.test.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/test/e2e/specs/publish-button.test.js b/test/e2e/specs/publish-button.test.js index 92acf24a537401..0db024ce7ac81f 100644 --- a/test/e2e/specs/publish-button.test.js +++ b/test/e2e/specs/publish-button.test.js @@ -22,22 +22,23 @@ describe( 'PostPublishButton', () => { } ); it( 'should be disabled when post is not saveable', async () => { - const publishButton = await page.$( '.editor-post-publish-button:disabled' ); - + const publishButton = await page.$( '.editor-post-publish-button[aria-disabled="true"]' ); expect( publishButton ).not.toBeNull(); } ); it( 'should be disabled when post is being saved', async () => { await page.type( '.editor-post-title__input', 'E2E Test Post' ); // Make it saveable - expect( await page.$( '.editor-post-publish-button:disabled' ) ).toBeNull(); + expect( await page.$( '.editor-post-publish-button[aria-disabled="true"]' ) ).toBeNull(); + await page.click( '.editor-post-save-draft' ); - expect( await page.$( '.editor-post-publish-button:disabled' ) ).not.toBeNull(); + expect( await page.$( '.editor-post-publish-button[aria-disabled="true"]' ) ).not.toBeNull(); } ); it( 'should be disabled when metabox is being saved', async () => { await page.type( '.editor-post-title__input', 'E2E Test Post' ); // Make it saveable - expect( await page.$( '.editor-post-publish-button:disabled' ) ).toBeNull(); + expect( await page.$( '.editor-post-publish-button[aria-disabled="true"]' ) ).toBeNull(); + await page.evaluate( () => window.wp.data.dispatch( 'core/edit-post' ).requestMetaBoxUpdates() ); - expect( await page.$( '.editor-post-publish-button:disabled' ) ).not.toBeNull(); + expect( await page.$( '.editor-post-publish-button[aria-disabled="true"]' ) ).not.toBeNull(); } ); } ); From 2ffa78ae0ac3ab47908374b43a197a8586d1c7ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Fri, 9 Nov 2018 12:52:05 +0100 Subject: [PATCH 18/27] Update e2e test This was relying on the preview button not being mounted while the publish panel was opened. A better logic is to check whether the actual publish panel is shown. --- test/e2e/specs/preview.test.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test/e2e/specs/preview.test.js b/test/e2e/specs/preview.test.js index 29f2f4c86998a3..f18eaa251e10f5 100644 --- a/test/e2e/specs/preview.test.js +++ b/test/e2e/specs/preview.test.js @@ -94,12 +94,12 @@ describe( 'Preview', () => { previewTitle = await previewPage.$eval( '.entry-title', ( node ) => node.textContent ); expect( previewTitle ).toBe( 'Hello World!' ); - // Preview for published post (no unsaved changes) directs to canonical - // URL for post. + // Preview for published post (no unsaved changes) directs to canonical URL for post. await editorPage.bringToFront(); await publishPost(); + // Wait until the publish panel is closed await Promise.all( [ - editorPage.waitForFunction( () => ! document.querySelector( '.editor-post-preview' ) ), + editorPage.waitForFunction( () => ! document.querySelector( '.editor-post-publish-panel' ) ), editorPage.click( '.editor-post-publish-panel__header button' ), ] ); expectedPreviewURL = await editorPage.$eval( '.components-notice.is-success a', ( node ) => node.href ); From 57254cdecbbb579979ca0c72bac59bb35f1ca02b Mon Sep 17 00:00:00 2001 From: Matthew Riley MacPherson Date: Fri, 9 Nov 2018 12:04:32 +0000 Subject: [PATCH 19/27] Tweak comment --- .../src/components/header/post-publish-button-or-toggle.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/edit-post/src/components/header/post-publish-button-or-toggle.js b/packages/edit-post/src/components/header/post-publish-button-or-toggle.js index aedf6542daccd4..a817d51ce03b1c 100644 --- a/packages/edit-post/src/components/header/post-publish-button-or-toggle.js +++ b/packages/edit-post/src/components/header/post-publish-button-or-toggle.js @@ -38,9 +38,9 @@ export function PostPublishButtonOrToggle( { * - is scheduled to be published * - is pending and can't be published (but only for viewports >= medium). * Originally, we considered showing a button for pending posts that couldn't be published - * (for ex, for a contributor role). Some languages can have really long translations - * for "Submit for review", so given the lack of UI real state available - * we decided to take into account the viewport in that particular case. + * (for example, for an author with the contributor role). Some languages can have + * long translations for "Submit for review", so given the lack of UI real estate available + * we decided to take into account the viewport in that case. * * 2) Then, in small viewports, we'll show a TOGGLE. * From 48439c06912199bb93d8dd80b4a1ea110ca7d4f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Fri, 9 Nov 2018 13:09:21 +0100 Subject: [PATCH 20/27] Update version --- docs/reference/deprecated.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/reference/deprecated.md b/docs/reference/deprecated.md index 85edd9fa01d64e..374207ab8b4192 100644 --- a/docs/reference/deprecated.md +++ b/docs/reference/deprecated.md @@ -1,6 +1,6 @@ Gutenberg's deprecation policy is intended to support backwards-compatibility for releases, when possible. The current deprecations are listed below and are grouped by _the version at which they will be removed completely_. If your plugin depends on these behaviors, you must update to the recommended alternative before the noted version. -## 5.1 +## 4.6 - `wp.editor.PostPublishPanelToggle` has been deprecated in favor of `wp.editor.PostPublishButton`. From 9341979b89b92424e46c11df17dfa3cce18ae5e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Fri, 9 Nov 2018 13:09:57 +0100 Subject: [PATCH 21/27] Update packages/editor/src/components/post-publish-panel/toggle.js --- packages/editor/src/components/post-publish-panel/toggle.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/post-publish-panel/toggle.js b/packages/editor/src/components/post-publish-panel/toggle.js index dc5776837f728f..524f999eba8777 100644 --- a/packages/editor/src/components/post-publish-panel/toggle.js +++ b/packages/editor/src/components/post-publish-panel/toggle.js @@ -27,7 +27,7 @@ export function PostPublishPanelToggle( { ( ! isPublishable && ! forceIsDirty ); deprecated( 'PostPublishPanelToggle', { - version: '5.1', + version: '4.6', alternative: 'PostPublishButton', plugin: 'Gutenberg', } ); From 0ef0206ba3ae5cce9f009c15926c5745b4218dbb Mon Sep 17 00:00:00 2001 From: Matthew Riley MacPherson Date: Fri, 9 Nov 2018 13:10:59 +0100 Subject: [PATCH 22/27] Place component in a separate line Co-Authored-By: nosolosw --- packages/edit-post/src/components/header/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 73d7e1e4ab71e5..92885804832f7b 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -40,7 +40,8 @@ function Header( { >
- { ! isPublishSidebarOpened && ( ) } From 94b251f2bafca7804f8c7e2bebc1c37b7f0cf56b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Fri, 9 Nov 2018 13:12:37 +0100 Subject: [PATCH 23/27] Update version number --- .../editor/src/components/post-publish-panel/test/toggle.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/post-publish-panel/test/toggle.js b/packages/editor/src/components/post-publish-panel/test/toggle.js index 72514b3747d6a0..682dc3dab61f96 100644 --- a/packages/editor/src/components/post-publish-panel/test/toggle.js +++ b/packages/editor/src/components/post-publish-panel/test/toggle.js @@ -21,7 +21,7 @@ describe( 'PostPublishPanelToggle', () => { expect( wrapper.prop( 'disabled' ) ).toBe( true ); expect( console ).toHaveWarnedWith( - 'PostPublishPanelToggle is deprecated and will be removed from Gutenberg in 5.1. Please use PostPublishButton instead.' + 'PostPublishPanelToggle is deprecated and will be removed from Gutenberg in 4.6. Please use PostPublishButton instead.' ); } ); From 8f50b199dc68f1e6e16f4ef6cb806943da13893c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Fri, 9 Nov 2018 13:25:29 +0100 Subject: [PATCH 24/27] Add comment --- packages/edit-post/src/components/header/index.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 92885804832f7b..c63a7058eeb7cc 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -41,10 +41,16 @@ function Header( {
{ ! isPublishSidebarOpened && ( + // This button isn't completely hidden by the publish sidebar. + // We can't hide the whole toolbar when the publish sidebar is open because + // we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node. + // We track that DOM node to return focus to the PostPublishButtonOrToggle + // when the publish sidebar has been closed. ) } + forceIsDirty={ hasActiveMetaboxes } + forceIsSaving={ isSaving } + /> + ) } Date: Fri, 9 Nov 2018 13:29:00 +0100 Subject: [PATCH 25/27] Update comment --- .../src/components/header/post-publish-button-or-toggle.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/edit-post/src/components/header/post-publish-button-or-toggle.js b/packages/edit-post/src/components/header/post-publish-button-or-toggle.js index a817d51ce03b1c..487c5b7d5edfda 100644 --- a/packages/edit-post/src/components/header/post-publish-button-or-toggle.js +++ b/packages/edit-post/src/components/header/post-publish-button-or-toggle.js @@ -40,7 +40,8 @@ export function PostPublishButtonOrToggle( { * Originally, we considered showing a button for pending posts that couldn't be published * (for example, for an author with the contributor role). Some languages can have * long translations for "Submit for review", so given the lack of UI real estate available - * we decided to take into account the viewport in that case. + * we decided to take into account the viewport in that case. See + * https://github.com/WordPress/gutenberg/issues/10475 * * 2) Then, in small viewports, we'll show a TOGGLE. * From 99433b428e20f16f6d40fcfb9dd27a850f9158de Mon Sep 17 00:00:00 2001 From: Matthew Riley MacPherson Date: Fri, 9 Nov 2018 15:55:55 +0000 Subject: [PATCH 26/27] Tweak comment --- .../src/components/header/post-publish-button-or-toggle.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-post/src/components/header/post-publish-button-or-toggle.js b/packages/edit-post/src/components/header/post-publish-button-or-toggle.js index 487c5b7d5edfda..edf6699fc9eaff 100644 --- a/packages/edit-post/src/components/header/post-publish-button-or-toggle.js +++ b/packages/edit-post/src/components/header/post-publish-button-or-toggle.js @@ -40,8 +40,8 @@ export function PostPublishButtonOrToggle( { * Originally, we considered showing a button for pending posts that couldn't be published * (for example, for an author with the contributor role). Some languages can have * long translations for "Submit for review", so given the lack of UI real estate available - * we decided to take into account the viewport in that case. See - * https://github.com/WordPress/gutenberg/issues/10475 + * we decided to take into account the viewport in that case. + * See: https://github.com/WordPress/gutenberg/issues/10475 * * 2) Then, in small viewports, we'll show a TOGGLE. * From 8b0d6bb76a3e56f6da3c9b1e5b241f5c78e02e89 Mon Sep 17 00:00:00 2001 From: "Matthew Riley MacPherson (tofumatt)" Date: Fri, 9 Nov 2018 17:25:33 +0000 Subject: [PATCH 27/27] chore: Move deps to 4.5 --- docs/reference/deprecated.md | 5 +---- .../editor/src/components/post-publish-panel/test/toggle.js | 2 +- packages/editor/src/components/post-publish-panel/toggle.js | 2 +- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/docs/reference/deprecated.md b/docs/reference/deprecated.md index 374207ab8b4192..13efe9f8940bdf 100644 --- a/docs/reference/deprecated.md +++ b/docs/reference/deprecated.md @@ -1,11 +1,8 @@ Gutenberg's deprecation policy is intended to support backwards-compatibility for releases, when possible. The current deprecations are listed below and are grouped by _the version at which they will be removed completely_. If your plugin depends on these behaviors, you must update to the recommended alternative before the noted version. -## 4.6 - -- `wp.editor.PostPublishPanelToggle` has been deprecated in favor of `wp.editor.PostPublishButton`. - ## 4.5.0 - `Dropdown.refresh()` has been deprecated as the contained `Popover` is now automatically refreshed. +- `wp.editor.PostPublishPanelToggle` has been deprecated in favor of `wp.editor.PostPublishButton`. ## 4.4.0 diff --git a/packages/editor/src/components/post-publish-panel/test/toggle.js b/packages/editor/src/components/post-publish-panel/test/toggle.js index 682dc3dab61f96..1f1a4971dbd35b 100644 --- a/packages/editor/src/components/post-publish-panel/test/toggle.js +++ b/packages/editor/src/components/post-publish-panel/test/toggle.js @@ -21,7 +21,7 @@ describe( 'PostPublishPanelToggle', () => { expect( wrapper.prop( 'disabled' ) ).toBe( true ); expect( console ).toHaveWarnedWith( - 'PostPublishPanelToggle is deprecated and will be removed from Gutenberg in 4.6. Please use PostPublishButton instead.' + 'PostPublishPanelToggle is deprecated and will be removed from Gutenberg in 4.5. Please use PostPublishButton instead.' ); } ); diff --git a/packages/editor/src/components/post-publish-panel/toggle.js b/packages/editor/src/components/post-publish-panel/toggle.js index 524f999eba8777..0cf8b56019cb47 100644 --- a/packages/editor/src/components/post-publish-panel/toggle.js +++ b/packages/editor/src/components/post-publish-panel/toggle.js @@ -27,7 +27,7 @@ export function PostPublishPanelToggle( { ( ! isPublishable && ! forceIsDirty ); deprecated( 'PostPublishPanelToggle', { - version: '4.6', + version: '4.5', alternative: 'PostPublishButton', plugin: 'Gutenberg', } );