Add mechanism to avoid forced child selection on blocks with templates.

WordPress · Oct 24, 2018 · a54d5b7 · a54d5b7
1 parent 249cc3b
commit a54d5b7
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 23 deletions.
diff --git a/docs/data/data-core-editor.md b/docs/data/data-core-editor.md
@@ -1514,7 +1514,10 @@ inserted, optionally at a specific index respective a root block list.
  * block: Block object to insert.
  * index: Index at which block should be inserted.
  * rootClientId: Optional root client ID of block list on which
-                              to insert.
+                                   to insert.
+ * updateSelection: If true block selection will be updated.
+                                   If false, block selection will not change.
+                                   Defaults to true.
 
 ### insertBlocks
 
@@ -1526,7 +1529,10 @@ be inserted, optionally at a specific index respective a root block list.
  * blocks: Block objects to insert.
  * index: Index at which block should be inserted.
  * rootClientId: Optional root cliente ID of block list on
-                               which to insert.
+                                   which to insert.
+ * updateSelection: If true block selection will be updated.
+                                   If false, block selection will not change.
+                                   Defaults to true.
 
 ### showInsertionPoint
 

diff --git a/packages/editor/src/components/inner-blocks/README.md b/packages/editor/src/components/inner-blocks/README.md
@@ -92,6 +92,13 @@ const TEMPLATE = [ [ 'core/columns', {}, [
 
 The previous example creates an InnerBlocks area containing two columns one with an image and the other with a paragraph.
 
+### `templateInsertUpdatesSelection`
+* **Type:** `Boolean`
+* **Default:** `true`
+
+If true when child blocks in the template are inserted the selection is updated.
+If false the selection should not be updated when child blocks specified in the template are inserted.
+
 ### `templateLock`
 * **Type:** `String|Boolean`
 

diff --git a/packages/editor/src/components/inner-blocks/index.js b/packages/editor/src/components/inner-blocks/index.js
@@ -143,15 +143,15 @@ InnerBlocks = compose( [
 			insertBlocks,
 			updateBlockListSettings,
 		} = dispatch( 'core/editor' );
-		const { block, clientId } = ownProps;
+		const { block, clientId, templateInsertUpdatesSelection = true } = ownProps;
 
 		return {
 			replaceInnerBlocks( blocks ) {
 				const clientIds = map( block.innerBlocks, 'clientId' );
 				if ( clientIds.length ) {
 					replaceBlocks( clientIds, blocks );
 				} else {
-					insertBlocks( blocks, undefined, clientId );
+					insertBlocks( blocks, undefined, clientId, templateInsertUpdatesSelection );
 				}
 			},
 			updateNestedSettings( settings ) {

diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js
@@ -298,35 +298,42 @@ export function moveBlockToPosition( clientId, fromRootClientId, toRootClientId,
  * Returns an action object used in signalling that a single block should be
  * inserted, optionally at a specific index respective a root block list.
  *
- * @param {Object}  block        Block object to insert.
- * @param {?number} index        Index at which block should be inserted.
- * @param {?string} rootClientId Optional root client ID of block list on which
- *                               to insert.
+ * @param {Object}  block             Block object to insert.
+ * @param {?number} index             Index at which block should be inserted.
+ * @param {?string} rootClientId      Optional root client ID of block list on which
+ *                                    to insert.
+ * @param {?boolean} updateSelection  If true block selection will be updated.
+ *                                    If false, block selection will not change.
+ *                                    Defaults to true.
  *
  * @return {Object} Action object.
  */
-export function insertBlock( block, index, rootClientId ) {
-	return insertBlocks( [ block ], index, rootClientId );
+export function insertBlock( block, index, rootClientId, updateSelection = true ) {
+	return insertBlocks( [ block ], index, rootClientId, updateSelection );
 }
 
 /**
  * Returns an action object used in signalling that an array of blocks should
  * be inserted, optionally at a specific index respective a root block list.
  *
- * @param {Object[]} blocks       Block objects to insert.
- * @param {?number}  index        Index at which block should be inserted.
- * @param {?string}  rootClientId Optional root cliente ID of block list on
- *                                which to insert.
+ * @param {Object[]} blocks           Block objects to insert.
+ * @param {?number}  index            Index at which block should be inserted.
+ * @param {?string}  rootClientId     Optional root cliente ID of block list on
+ *                                    which to insert.
+ * @param {?boolean} updateSelection  If true block selection will be updated.
+ *                                    If false, block selection will not change.
+ *                                    Defaults to true.
  *
  * @return {Object} Action object.
  */
-export function insertBlocks( blocks, index, rootClientId ) {
+export function insertBlocks( blocks, index, rootClientId, updateSelection = true ) {
 	return {
 		type: 'INSERT_BLOCKS',
 		blocks: castArray( blocks ),
 		index,
 		rootClientId,
 		time: Date.now(),
+		updateSelection,
 	};
 }
 

diff --git a/packages/editor/src/store/reducer.js b/packages/editor/src/store/reducer.js
@@ -651,14 +651,18 @@ export function blockSelection( state = {
 				end: action.clientId,
 				initialPosition: action.initialPosition,
 			};
-		case 'INSERT_BLOCKS':
-			return {
-				...state,
-				start: action.blocks[ 0 ].clientId,
-				end: action.blocks[ 0 ].clientId,
-				initialPosition: null,
-				isMultiSelecting: false,
-			};
+		case 'INSERT_BLOCKS': {
+			if ( action.updateSelection ) {
+				return {
+					...state,
+					start: action.blocks[ 0 ].clientId,
+					end: action.blocks[ 0 ].clientId,
+					initialPosition: null,
+					isMultiSelecting: false,
+				};
+			}
+			return state;
+		}
 		case 'REMOVE_BLOCKS':
 			if ( ! action.clientIds || ! action.clientIds.length || action.clientIds.indexOf( state.start ) === -1 ) {
 				return state;

diff --git a/packages/editor/src/store/test/actions.js b/packages/editor/src/store/test/actions.js
@@ -194,6 +194,7 @@ describe( 'actions', () => {
 				index,
 				rootClientId: 'testclientid',
 				time: expect.any( Number ),
+				updateSelection: true,
 			} );
 		} );
 	} );
@@ -210,6 +211,7 @@ describe( 'actions', () => {
 				index,
 				rootClientId: 'testclientid',
 				time: expect.any( Number ),
+				updateSelection: true,
 			} );
 		} );
 	} );

diff --git a/packages/editor/src/store/test/reducer.js b/packages/editor/src/store/test/reducer.js
@@ -1469,6 +1469,7 @@ describe( 'state', () => {
 					clientId: 'ribs',
 					name: 'core/freeform',
 				} ],
+				updateSelection: true,
 			} );
 
 			expect( state3 ).toEqual( {
@@ -1479,6 +1480,24 @@ describe( 'state', () => {
 			} );
 		} );
 
+		it( 'should not select inserted block if updateSelection flag is false', () => {
+			const original = deepFreeze( { start: 'a', end: 'b' } );
+
+			const state3 = blockSelection( original, {
+				type: 'INSERT_BLOCKS',
+				blocks: [ {
+					clientId: 'ribs',
+					name: 'core/freeform',
+				} ],
+				updateSelection: false,
+			} );
+
+			expect( state3 ).toEqual( {
+				start: 'a',
+				end: 'b',
+			} );
+		} );
+
 		it( 'should not update the state if the block moved is already selected', () => {
 			const original = deepFreeze( { start: 'ribs', end: 'ribs' } );
 			const state = blockSelection( original, {