chore: Use autoFocus prop and isCleanNewPost selector

WordPress · Sep 7, 2018 · 13b6d43 · 13b6d43
1 parent ce5e741
commit 13b6d43
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 21 deletions.
diff --git a/docs/data/data-core-editor.md b/docs/data/data-core-editor.md
@@ -54,9 +54,6 @@ Whether unsaved values exist.
 Returns true if there are no unsaved values for the current edit session and
 if the currently edited post is new (has never been saved before).
 
-Note: This selector is not currently used by the editor package, but is made
-available as an assumed-useful selector for external integrations.
-
 *Parameters*
 
  * state: Global application state.
@@ -1414,4 +1411,4 @@ Returns an action object used in signalling that the editor settings have been u
 
 *Parameters*
 
- * settings: Updated settings
+ * settings: Updated settings
diff --git a/packages/editor/src/components/post-title/index.js b/packages/editor/src/components/post-title/index.js
@@ -9,7 +9,7 @@ import { get } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component, createRef } from '@wordpress/element';
+import { Component } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { ENTER } from '@wordpress/keycodes';
 import { withSelect, withDispatch } from '@wordpress/data';
@@ -36,7 +36,6 @@ class PostTitle extends Component {
 		this.onUnselect = this.onUnselect.bind( this );
 		this.onKeyDown = this.onKeyDown.bind( this );
 		this.redirectHistory = this.redirectHistory.bind( this );
-		this.textareaRef = createRef();
 
 		this.state = {
 			isSelected: false,
@@ -89,7 +88,15 @@ class PostTitle extends Component {
 	}
 
 	render() {
-		const { title, placeholder, instanceId, isPostTypeViewable, isFocusMode, hasFixedToolbar } = this.props;
+		const {
+			hasFixedToolbar,
+			isCleanNewPost,
+			isFocusMode,
+			isPostTypeViewable,
+			instanceId,
+			placeholder,
+			title,
+		} = this.props;
 		const { isSelected } = this.state;
 		const className = classnames( 'editor-post-title__block', {
 			'is-selected': isSelected,
@@ -126,7 +133,9 @@ class PostTitle extends Component {
 									focus the title on new post so the author can start typing
 									right away, without needing to click anything.
 								*/
-								autofocus={ this.props.isPostEmpty ? 'autofocus' : undefined }
+								/* eslint-disable jsx-a11y/no-autofocus */
+								autoFocus={ isCleanNewPost }
+								/* eslint-enable jsx-a11y/no-autofocus */
 							/>
 						</KeyboardShortcuts>
 						{ isSelected && isPostTypeViewable && <PostPermalink /> }
@@ -138,13 +147,13 @@ class PostTitle extends Component {
 }
 
 const applyWithSelect = withSelect( ( select ) => {
-	const { getEditedPostAttribute, getEditorSettings, isEditedPostSaveable } = select( 'core/editor' );
+	const { getEditedPostAttribute, getEditorSettings, isCleanNewPost } = select( 'core/editor' );
 	const { getPostType } = select( 'core' );
 	const postType = getPostType( getEditedPostAttribute( 'type' ) );
 	const { titlePlaceholder, focusMode, hasFixedToolbar } = getEditorSettings();
 
 	return {
-		isPostEmpty: ! isEditedPostSaveable(),
+		isCleanNewPost: isCleanNewPost(),
 		title: getEditedPostAttribute( 'title' ),
 		isPostTypeViewable: get( postType, [ 'viewable' ], false ),
 		placeholder: titlePlaceholder,

diff --git a/packages/editor/src/store/selectors.js b/packages/editor/src/store/selectors.js
@@ -102,9 +102,6 @@ export function isEditedPostDirty( state ) {
  * Returns true if there are no unsaved values for the current edit session and
  * if the currently edited post is new (has never been saved before).
  *
- * Note: This selector is not currently used by the editor package, but is made
- * available as an assumed-useful selector for external integrations.
- *
  * @param {Object} state Global application state.
  *
  * @return {boolean} Whether new post and unsaved values exist.

diff --git a/test/e2e/specs/new-post.test.js b/test/e2e/specs/new-post.test.js
@@ -46,13 +46,9 @@ describe( 'new editor state', () => {
 		const activeElementTagName = await page.evaluate( () => {
 			return document.activeElement.tagName.toLowerCase();
 		} );
-		const titleAutofocus = await page.$eval( '.editor-post-title__input', ( element ) => {
-			return element.getAttribute( 'autofocus' );
-		} );
 
 		expect( activeElementClasses ).toContain( 'editor-post-title__input' );
 		expect( activeElementTagName ).toEqual( 'textarea' );
-		expect( titleAutofocus ).toEqual( 'autofocus' );
 	} );
 
 	it( 'should not focus the title if the title exists', async () => {
@@ -70,14 +66,10 @@ describe( 'new editor state', () => {
 		const activeElementTagName = await page.evaluate( () => {
 			return document.activeElement.tagName.toLowerCase();
 		} );
-		const titleAutofocus = await page.$eval( '.editor-post-title__input', ( element ) => {
-			return element.getAttribute( 'autofocus' );
-		} );
 
 		expect( activeElementClasses ).not.toContain( 'editor-post-title__input' );
 		// The document `body` should be the `activeElement`, because nothing is
 		// focused by default when a post already has a title.
 		expect( activeElementTagName ).toEqual( 'body' );
-		expect( titleAutofocus ).toEqual( null );
 	} );
 } );