Move the post title selection state to the store and update PostTitle

docs/designers-developers/developers/data/data-core-editor.md

@@ -932,6 +932,18 @@ _Returns_
 
 -   `boolean`: Is locked.
 
+<a name="isPostTitleSelected" href="#isPostTitleSelected">#</a> **isPostTitleSelected**
+
+Returns true if post title is selected.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+
+_Returns_
+
+-   `boolean`: Whether current post title is selected.
+
 <a name="isPreviewingPost" href="#isPreviewingPost">#</a> **isPreviewingPost**
 
 Returns true if the post is being previewed, or false otherwise.
@@ -1314,6 +1326,18 @@ _Related_
 
 -   toggleBlockMode in core/block-editor store.
 
+<a name="togglePostTitleSelection" href="#togglePostTitleSelection">#</a> **togglePostTitleSelection**
+
+Returns an action object that enables or disables post title selection.
+
+_Parameters_
+
+-   _isSelected_ `[boolean]`: Whether post title is currently selected.
+
+_Returns_
+
+-   `Object`: Action object.
+
 <a name="toggleSelection" href="#toggleSelection">#</a> **toggleSelection**
 
 _Related_

packages/edit-post/src/components/visual-editor/index.native.js

@@ -15,33 +15,6 @@ import { ReadableContentView } from '@wordpress/components';
 import styles from './style.scss';
 
 class VisualEditor extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.onPostTitleSelect = this.onPostTitleSelect.bind( this );
-		this.onPostTitleUnselect = this.onPostTitleUnselect.bind( this );
-
-		this.state = {
-			isPostTitleSelected: false,
-		};
-	}
-
-	static getDerivedStateFromProps( props ) {
-		if ( props.isAnyBlockSelected ) {
-			return { isPostTitleSelected: false };
-		}
-		return null;
-	}
-
-	onPostTitleSelect() {
-		this.setState( { isPostTitleSelected: true } );
-		this.props.clearSelectedBlock();
-	}
-
-	onPostTitleUnselect() {
-		this.setState( { isPostTitleSelected: false } );
-	}
-
 	renderHeader() {
 		const {
 			editTitle,
@@ -55,9 +28,6 @@ class VisualEditor extends Component {
 					innerRef={ setTitleRef }
 					title={ title }
 					onUpdate={ editTitle }
-					onSelect={ this.onPostTitleSelect }
-					onUnselect={ this.onPostTitleUnselect }
-					isSelected={ this.state.isPostTitleSelected }
 					placeholder={ __( 'Add title' ) }
 					borderStyle={
 						this.props.isFullyBordered ?
@@ -93,7 +63,7 @@ class VisualEditor extends Component {
 					isFullyBordered={ isFullyBordered }
 					rootViewHeight={ rootViewHeight }
 					safeAreaBottomInset={ safeAreaBottomInset }
-					isPostTitleSelected={ this.state.isPostTitleSelected }
+					isPostTitleSelected={ this.props.isPostTitleSelected }
 					onBlockTypeSelected={ this.onPostTitleUnselect }
 				/>
 			</BlockEditorProvider>
@@ -106,6 +76,7 @@ export default compose( [
 		const {
 			getEditorBlocks,
 			getEditedPostAttribute,
+			isPostTitleSelected,
 		} = select( 'core/editor' );
 
 		const { getSelectedBlockClientId } = select( 'core/block-editor' );
@@ -114,6 +85,7 @@ export default compose( [
 			blocks: getEditorBlocks(),
 			title: getEditedPostAttribute( 'title' ),
 			isAnyBlockSelected: !! getSelectedBlockClientId(),
+			isPostTitleSelected: isPostTitleSelected(),
 		};
 	} ),
 	withDispatch( ( dispatch ) => {

packages/editor/src/components/post-title/index.js

@@ -32,27 +32,12 @@ class PostTitle extends Component {
 		super( ...arguments );
 
 		this.onChange = this.onChange.bind( this );
-		this.onSelect = this.onSelect.bind( this );
-		this.onUnselect = this.onUnselect.bind( this );
 		this.onKeyDown = this.onKeyDown.bind( this );
 		this.redirectHistory = this.redirectHistory.bind( this );
-
-		this.state = {
-			isSelected: false,
-		};
 	}
 
 	handleFocusOutside() {
-		this.onUnselect();
-	}
-
-	onSelect() {
-		this.setState( { isSelected: true } );
-		this.props.clearSelectedBlock();
-	}
-
-	onUnselect() {
-		this.setState( { isSelected: false } );
+		this.props.onUnselect();
 	}
 
 	onChange( event ) {
@@ -93,11 +78,11 @@ class PostTitle extends Component {
 			isCleanNewPost,
 			isFocusMode,
 			isPostTypeViewable,
+			isSelected,
 			instanceId,
 			placeholder,
 			title,
 		} = this.props;
-		const { isSelected } = this.state;
 
 		// The wp-block className is important for editor styles.
 		const className = classnames( 'wp-block editor-post-title__block', {
@@ -126,9 +111,9 @@ class PostTitle extends Component {
 								value={ title }
 								onChange={ this.onChange }
 								placeholder={ decodedPlaceholder || __( 'Add title' ) }
-								onFocus={ this.onSelect }
+								onFocus={ this.props.onSelect }
 								onKeyDown={ this.onKeyDown }
-								onKeyPress={ this.onUnselect }
+								onKeyPress={ this.props.onUnselect }
 								/*
 									Only autofocus the title when the post is entirely empty.
 									This should only happen for a new post, which means we
@@ -149,14 +134,15 @@ class PostTitle extends Component {
 }
 
 const applyWithSelect = withSelect( ( select ) => {
-	const { getEditedPostAttribute, isCleanNewPost } = select( 'core/editor' );
+	const { getEditedPostAttribute, isCleanNewPost, isPostTitleSelected } = select( 'core/editor' );
 	const { getSettings } = select( 'core/block-editor' );
 	const { getPostType } = select( 'core' );
 	const postType = getPostType( getEditedPostAttribute( 'type' ) );
 	const { titlePlaceholder, focusMode, hasFixedToolbar } = getSettings();
 
 	return {
 		isCleanNewPost: isCleanNewPost(),
+		isSelected: isPostTitleSelected(),
 		title: getEditedPostAttribute( 'title' ),
 		isPostTypeViewable: get( postType, [ 'viewable' ], false ),
 		placeholder: titlePlaceholder,
@@ -174,6 +160,7 @@ const applyWithDispatch = withDispatch( ( dispatch ) => {
 		editPost,
 		undo,
 		redo,
+		togglePostTitleSelection,
 	} = dispatch( 'core/editor' );
 
 	return {
@@ -185,7 +172,13 @@ const applyWithDispatch = withDispatch( ( dispatch ) => {
 		},
 		onUndo: undo,
 		onRedo: redo,
-		clearSelectedBlock,
+		onSelect() {
+			togglePostTitleSelection( true );
+			clearSelectedBlock();
+		},
+		onUnselect() {
+			togglePostTitleSelection( false );
+		},
 	};
 } );
 

packages/editor/src/components/post-title/index.native.js

@@ -10,7 +10,7 @@ import { isEmpty } from 'lodash';
 import { Component } from '@wordpress/element';
 import { RichText } from '@wordpress/rich-text';
 import { decodeEntities } from '@wordpress/html-entities';
-import { withDispatch } from '@wordpress/data';
+import { withDispatch, withSelect } from '@wordpress/data';
 import { withFocusOutside } from '@wordpress/components';
 import { withInstanceId, compose } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
@@ -91,27 +91,43 @@ class PostTitle extends Component {
 	}
 }
 
-const applyWithDispatch = withDispatch( ( dispatch ) => {
-	const {
-		undo,
-		redo,
-	} = dispatch( 'core/editor' );
+export default compose(
+	withSelect( ( dispatch ) => {
+		const {
+			isPostTitleSelected,
+		} = dispatch( 'core/editor' );
 
-	const {
-		insertDefaultBlock,
-	} = dispatch( 'core/block-editor' );
+		return {
+			isSelected: isPostTitleSelected(),
+		};
+	} ),
+	withDispatch( ( dispatch ) => {
+		const {
+			undo,
+			redo,
+			togglePostTitleSelection,
+		} = dispatch( 'core/editor' );
 
-	return {
-		onEnterPress() {
-			insertDefaultBlock( undefined, undefined, 0 );
-		},
-		onUndo: undo,
-		onRedo: redo,
-	};
-} );
+		const {
+			clearSelectedBlock,
+			insertDefaultBlock,
+		} = dispatch( 'core/block-editor' );
 
-export default compose(
-	applyWithDispatch,
+		return {
+			onEnterPress() {
+				insertDefaultBlock( undefined, undefined, 0 );
+			},
+			onUndo: undo,
+			onRedo: redo,
+			onSelect() {
+				togglePostTitleSelection( true );
+				clearSelectedBlock();
+			},
+			onUnselect() {
+				togglePostTitleSelection( false );
+			},
+		};
+	} ),
 	withInstanceId,
 	withFocusOutside
 )( PostTitle );

packages/editor/src/store/actions.js

@@ -737,6 +737,20 @@ export function updatePostLock( lock ) {
 	};
 }
 
+/**
+ * Returns an action object that enables or disables post title selection.
+ *
+ * @param {boolean} [isSelected=true] Whether post title is currently selected.
+
+ * @return {Object} Action object.
+ */
+export function togglePostTitleSelection( isSelected = true ) {
+	return {
+		type: 'TOGGLE_POST_TITLE_SELECTION',
+		isSelected,
+	};
+}
+
 /**
  * Returns an action object used to fetch a single reusable block or all
  * reusable blocks from the REST API into the store.

packages/editor/src/store/reducer.js

@@ -412,6 +412,25 @@ export function postSavingLock( state = {}, action ) {
 	return state;
 }
 
+/**
+ * Reducer returning the post title state.
+ *
+ * @param {PostTitleState} state  Current state.
+ * @param {Object}         action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+export const postTitle = combineReducers( {
+	isSelected( state = false, action ) {
+		switch ( action.type ) {
+			case 'TOGGLE_POST_TITLE_SELECTION':
+				return action.isSelected;
+		}
+
+		return state;
+	},
+} );
+
 export const reusableBlocks = combineReducers( {
 	data( state = {}, action ) {
 		switch ( action.type ) {
@@ -593,6 +612,7 @@ export default optimist( combineReducers( {
 	preferences,
 	saving,
 	postLock,
+	postTitle,
 	reusableBlocks,
 	template,
 	previewLink,

packages/editor/src/store/selectors.js

@@ -1097,6 +1097,17 @@ export function getActivePostLock( state ) {
 	return state.postLock.activePostLock;
 }
 
+/**
+ * Returns true if post title is selected.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether current post title is selected.
+ */
+export function isPostTitleSelected( state ) {
+	return state.postTitle.isSelected;
+}
+
 /**
  * Returns whether or not the user has the unfiltered_html capability.
  *

packages/editor/src/store/test/actions.js

@@ -861,4 +861,14 @@ describe( 'Editor actions', () => {
 			} );
 		} );
 	} );
+
+	describe( 'togglePostTitleSelection', () => {
+		it( 'should return the TOGGLE_POST_TITLE_SELECTION action', () => {
+			const result = actions.togglePostTitleSelection( true );
+			expect( result ).toEqual( {
+				type: 'TOGGLE_POST_TITLE_SELECTION',
+				isSelected: true,
+			} );
+		} );
+	} );
 } );