Post publish panel: focus the post link (#11489)

WordPress · Nov 6, 2018 · e6fb93e · e6fb93e
1 parent 8ab9fa6
commit e6fb93e
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 10 deletions.
diff --git 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 (
 			<div className="editor-post-publish-panel" { ...propsForPanel }>
 				<div className="editor-post-publish-panel__header">
-					{ isPublishedOrScheduled && ! isSaving ? (
+					{ isPostPublish ? (
 						<div className="editor-post-publish-panel__header-published">
 							{ isScheduled ? __( 'Scheduled' ) : __( 'Published' ) }
 						</div>
@@ -83,13 +85,13 @@ export class PostPublishPanel extends Component {
 					/>
 				</div>
 				<div className="editor-post-publish-panel__content">
-					{ ! isSaving && ! isPublishedOrScheduled && (
+					{ isPrePublish && (
 						<PostPublishPanelPrepublish>
 							{ PrePublishExtension && <PrePublishExtension /> }
 						</PostPublishPanelPrepublish>
 					) }
-					{ ! isSaving && isPublishedOrScheduled && (
-						<PostPublishPanelPostpublish>
+					{ isPostPublish && (
+						<PostPublishPanelPostpublish focusOnMount={ true } >
 							{ PostPublishExtension && <PostPublishExtension /> }
 						</PostPublishPanelPostpublish>
 					) }

diff --git 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 (
 			<div className="post-publish-panel__postpublish">
 				<PanelBody className="post-publish-panel__postpublish-header">
-					<a href={ post.link }>{ post.title || __( '(no title)' ) }</a> { postPublishNonLinkHeader }
+					<a ref={ this.postLink } href={ post.link }>{ post.title || __( '(no title)' ) }</a> { postPublishNonLinkHeader }
 				</PanelBody>
 				<PanelBody>
 					<p className="post-publish-panel__postpublish-subheader">

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
@@ -21,7 +21,9 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
   <div
     className="editor-post-publish-panel__content"
   >
-    <WithSelect(PostPublishPanelPostpublish) />
+    <WithSelect(PostPublishPanelPostpublish)
+      focusOnMount={true}
+    />
   </div>
   <div
     className="editor-post-publish-panel__footer"
@@ -54,7 +56,9 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
   <div
     className="editor-post-publish-panel__content"
   >
-    <WithSelect(PostPublishPanelPostpublish) />
+    <WithSelect(PostPublishPanelPostpublish)
+      focusOnMount={true}
+    />
   </div>
   <div
     className="editor-post-publish-panel__footer"

diff --git a/test/e2e/specs/publish-panel.test.js b/test/e2e/specs/publish-panel.test.js
@@ -5,6 +5,7 @@ import {
 	newPost,
 	openPublishPanel,
 	pressWithModifier,
+	publishPost,
 } from '../support/utils';
 
 describe( 'PostPublishPanel', () => {
@@ -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();