diff --git a/packages/editor/src/components/post-publish-panel/index.js b/packages/editor/src/components/post-publish-panel/index.js index 4d41e872bc7230..e6d324624fab01 100644 --- a/packages/editor/src/components/post-publish-panel/index.js +++ b/packages/editor/src/components/post-publish-panel/index.js @@ -60,12 +60,14 @@ export class PostPublishPanel extends Component { PrePublishExtension, ...additionalProps } = this.props; - const isPublishedOrScheduled = isPublished || ( isScheduled && isBeingScheduled ); const propsForPanel = omit( additionalProps, [ 'hasPublishAction', 'isDirty' ] ); + const isPublishedOrScheduled = isPublished || ( isScheduled && isBeingScheduled ); + const isPrePublish = ! isPublishedOrScheduled && ! isSaving; + const isPostPublish = isPublishedOrScheduled && ! isSaving; return (
- { isPublishedOrScheduled && ! isSaving ? ( + { isPostPublish ? (
{ isScheduled ? __( 'Scheduled' ) : __( 'Published' ) }
@@ -83,13 +85,13 @@ export class PostPublishPanel extends Component { />
- { ! isSaving && ! isPublishedOrScheduled && ( + { isPrePublish && ( { PrePublishExtension && } ) } - { ! isSaving && isPublishedOrScheduled && ( - + { isPostPublish && ( + { PostPublishExtension && } ) } diff --git a/packages/editor/src/components/post-publish-panel/postpublish.js b/packages/editor/src/components/post-publish-panel/postpublish.js index 24b26e1439cad3..0e0cc7f81862b1 100644 --- a/packages/editor/src/components/post-publish-panel/postpublish.js +++ b/packages/editor/src/components/post-publish-panel/postpublish.js @@ -8,7 +8,7 @@ import { get } from 'lodash'; */ import { PanelBody, Button, ClipboardButton, TextControl } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; -import { Component, Fragment } from '@wordpress/element'; +import { Component, Fragment, createRef } from '@wordpress/element'; import { withSelect } from '@wordpress/data'; /** @@ -24,6 +24,13 @@ class PostPublishPanelPostpublish extends Component { }; this.onCopy = this.onCopy.bind( this ); this.onSelectInput = this.onSelectInput.bind( this ); + this.postLink = createRef(); + } + + componentDidMount() { + if ( this.props.focusOnMount ) { + this.postLink.current.focus(); + } } componentWillUnmount() { @@ -59,7 +66,7 @@ class PostPublishPanelPostpublish extends Component { return (
- { post.title || __( '(no title)' ) } { postPublishNonLinkHeader } + { post.title || __( '(no title)' ) } { postPublishNonLinkHeader }

diff --git a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap index 81a53981d74d78..574787b931a8d4 100644 --- a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap +++ b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap @@ -21,7 +21,9 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu

- +
- +
{ @@ -23,7 +24,7 @@ describe( 'PostPublishPanel', () => { } } ); - it( 'publish button should have focus', async () => { + it( 'PrePublish: publish button should have the focus', async () => { await page.type( '.editor-post-title__input', 'E2E Test Post' ); await openPublishPanel(); @@ -33,6 +34,21 @@ describe( 'PostPublishPanel', () => { expect( focusedElementClassList ).toContain( 'editor-post-publish-button' ); } ); + it( 'PostPublish: post link should have the focus', async () => { + const postTitle = 'E2E Test Post'; + await page.type( '.editor-post-title__input', postTitle ); + await publishPost(); + + const focusedElementTag = await page.$eval( ':focus', ( focusedElement ) => { + return focusedElement.tagName.toLowerCase(); + } ); + const focusedElementText = await page.$eval( ':focus', ( focusedElement ) => { + return focusedElement.text; + } ); + expect( focusedElementTag ).toBe( 'a' ); + expect( focusedElementText ).toBe( postTitle ); + } ); + it( 'should retain focus within the panel', async () => { await page.type( '.editor-post-title__input', 'E2E Test Post' ); await openPublishPanel();