Block Editor: move selection state from RichText to the store (#14640)

* Block Editor: move selection state from RichText to the store

* Add docs

* Rename

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

@@ -158,6 +158,32 @@ Returns the number of blocks currently present in the post.
 
 Number of blocks in the post.
 
+### getSelectionStart
+
+Returns the current selection start block client ID, attribute key and text
+offset.
+
+*Parameters*
+
+ * state: Block editor state.
+
+*Returns*
+
+Selection start information.
+
+### getSelectionEnd
+
+Returns the current selection end block client ID, attribute key and text
+offset.
+
+*Parameters*
+
+ * state: Block editor state.
+
+*Returns*
+
+Selection end information.
+
 ### getBlockSelectionStart
 
 Returns the current block selection start. This value may be null, and it
@@ -1042,6 +1068,18 @@ Returns an action object used in signalling that the caret has entered formatted
 
 Returns an action object used in signalling that the user caret has exited formatted text.
 
+### selectionChange
+
+Returns an action object used in signalling that the user caret has changed
+position.
+
+*Parameters*
+
+ * clientId: The selected block client ID.
+ * attributeKey: The selected block attribute key.
+ * startOffset: The start offset.
+ * endOffset: The end offset.
+
 ### insertDefaultBlock
 
 Returns an action object used in signalling that a new block of the default

packages/block-editor/src/components/block-controls/test/__snapshots__/index.js.snap

@@ -5,11 +5,9 @@ exports[`BlockControls should render a dynamic toolbar of controls 1`] = `
   value={
     Object {
       "clientId": undefined,
-      "focusedElement": null,
       "isSelected": true,
       "name": undefined,
       "onFocus": undefined,
-      "setFocusedElement": [Function],
     }
   }
 >

packages/block-editor/src/components/block-edit/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import memize from 'memize';
+
 /**
  * WordPress dependencies
  */
@@ -10,40 +15,28 @@ import Edit from './edit';
 import { BlockEditContextProvider } from './context';
 
 class BlockEdit extends Component {
-	constructor( props ) {
-		super( props );
-
-		this.setFocusedElement = this.setFocusedElement.bind( this );
-
-		this.state = {
-			focusedElement: null,
-			setFocusedElement: this.setFocusedElement,
-		};
+	constructor() {
+		super( ...arguments );
+
+		// It is important to return the same object if props haven't changed
+		// to avoid  unnecessary rerenders.
+		// See https://reactjs.org/docs/context.html#caveats.
+		this.propsToContext = memize(
+			this.propsToContext.bind( this ),
+			{ maxSize: 1 }
+		);
 	}
 
-	setFocusedElement( focusedElement ) {
-		this.setState( ( prevState ) => {
-			if ( prevState.focusedElement === focusedElement ) {
-				return null;
-			}
-			return { focusedElement };
-		} );
-	}
-
-	static getDerivedStateFromProps( props ) {
-		const { clientId, name, isSelected, onFocus } = props;
-
-		return {
-			name,
-			isSelected,
-			clientId,
-			onFocus,
-		};
+	propsToContext( name, isSelected, clientId, onFocus ) {
+		return { name, isSelected, clientId, onFocus };
 	}
 
 	render() {
+		const { name, isSelected, clientId, onFocus } = this.props;
+		const value = this.propsToContext( name, isSelected, clientId, onFocus );
+
 		return (
-			<BlockEditContextProvider value={ this.state }>
+			<BlockEditContextProvider value={ value }>
 				<Edit { ...this.props } />
 			</BlockEditContextProvider>
 		);

packages/block-editor/src/components/block-list/block.js

@@ -12,7 +12,6 @@ import {
 	focus,
 	isTextField,
 	placeCaretAtHorizontalEdge,
-	placeCaretAtVerticalEdge,
 } from '@wordpress/dom';
 import { BACKSPACE, DELETE, ENTER } from '@wordpress/keycodes';
 import {
@@ -154,13 +153,7 @@ export class BlockListBlock extends Component {
 			return;
 		}
 
-		target.focus();
-
-		// In reverse case, need to explicitly place caret position.
-		if ( isReverse ) {
-			placeCaretAtHorizontalEdge( target, true );
-			placeCaretAtVerticalEdge( target, true );
-		}
+		placeCaretAtHorizontalEdge( target, isReverse );
 	}
 
 	setAttributes( attributes ) {