Disable selection when resizing

packages/block-editor/src/store/reducer.js

@@ -942,7 +942,17 @@ const BLOCK_SELECTION_INITIAL_STATE = {
 export function blockSelection( state = BLOCK_SELECTION_INITIAL_STATE, action ) {
 	switch ( action.type ) {
 		case 'CLEAR_SELECTED_BLOCK':
-			return BLOCK_SELECTION_INITIAL_STATE;
+			if ( ! state.start || ! state.start.clientId ) {
+				return state;
+			}
+
+			return {
+				...state,
+				start: BLOCK_SELECTION_EMPTY_OBJECT,
+				end: BLOCK_SELECTION_EMPTY_OBJECT,
+				isMultiSelecting: false,
+				initialPosition: null,
+			};
 		case 'START_MULTI_SELECT':
 			if ( state.isMultiSelecting ) {
 				return state;
@@ -965,7 +975,7 @@ export function blockSelection( state = BLOCK_SELECTION_INITIAL_STATE, action )
 			};
 		case 'MULTI_SELECT':
 			return {
-				...BLOCK_SELECTION_INITIAL_STATE,
+				...state,
 				isMultiSelecting: state.isMultiSelecting,
 				start: { clientId: action.start },
 				end: { clientId: action.end },
@@ -979,7 +989,7 @@ export function blockSelection( state = BLOCK_SELECTION_INITIAL_STATE, action )
 			}
 
 			return {
-				...BLOCK_SELECTION_INITIAL_STATE,
+				...state,
 				initialPosition: action.initialPosition,
 				start: { clientId: action.clientId },
 				end: { clientId: action.clientId },
@@ -988,7 +998,7 @@ export function blockSelection( state = BLOCK_SELECTION_INITIAL_STATE, action )
 		case 'INSERT_BLOCKS': {
 			if ( action.updateSelection ) {
 				return {
-					...BLOCK_SELECTION_INITIAL_STATE,
+					...state,
 					start: { clientId: action.blocks[ 0 ].clientId },
 					end: { clientId: action.blocks[ 0 ].clientId },
 				};
@@ -1005,7 +1015,13 @@ export function blockSelection( state = BLOCK_SELECTION_INITIAL_STATE, action )
 				return state;
 			}
 
-			return BLOCK_SELECTION_INITIAL_STATE;
+			return {
+				...state,
+				start: BLOCK_SELECTION_EMPTY_OBJECT,
+				end: BLOCK_SELECTION_EMPTY_OBJECT,
+				isMultiSelecting: false,
+				initialPosition: null,
+			};
 		case 'REPLACE_BLOCKS': {
 			if ( action.clientIds.indexOf( state.start.clientId ) === -1 ) {
 				return state;
@@ -1015,7 +1031,13 @@ export function blockSelection( state = BLOCK_SELECTION_INITIAL_STATE, action )
 			const blockToSelect = action.blocks[ indexToSelect ];
 
 			if ( ! blockToSelect ) {
-				return BLOCK_SELECTION_INITIAL_STATE;
+				return {
+					...state,
+					start: BLOCK_SELECTION_EMPTY_OBJECT,
+					end: BLOCK_SELECTION_EMPTY_OBJECT,
+					isMultiSelecting: false,
+					initialPosition: null,
+				};
 			}
 
 			if (
@@ -1026,19 +1048,19 @@ export function blockSelection( state = BLOCK_SELECTION_INITIAL_STATE, action )
 			}
 
 			return {
-				...BLOCK_SELECTION_INITIAL_STATE,
+				...state,
 				start: { clientId: blockToSelect.clientId },
 				end: { clientId: blockToSelect.clientId },
 			};
 		}
 		case 'TOGGLE_SELECTION':
 			return {
-				...BLOCK_SELECTION_INITIAL_STATE,
+				...state,
 				isEnabled: action.isSelectionEnabled,
 			};
 		case 'SELECTION_CHANGE':
 			return {
-				...BLOCK_SELECTION_INITIAL_STATE,
+				...state,
 				start: {
 					clientId: action.clientId,
 					attributeKey: action.attributeKey,

packages/block-editor/src/store/test/reducer.js

@@ -1804,7 +1804,7 @@ describe( 'state', () => {
 		} );
 
 		it( 'should set multi selection', () => {
-			const original = deepFreeze( { isMultiSelecting: false } );
+			const original = deepFreeze( { isMultiSelecting: false, initialPosition: null, isEnabled: true } );
 			const state = blockSelection( original, {
 				type: 'MULTI_SELECT',
 				start: 'ribs',
@@ -1821,7 +1821,7 @@ describe( 'state', () => {
 		} );
 
 		it( 'should set continuous multi selection', () => {
-			const original = deepFreeze( { isMultiSelecting: true } );
+			const original = deepFreeze( { isMultiSelecting: true, initialPosition: null, isEnabled: true } );
 			const state = blockSelection( original, {
 				type: 'MULTI_SELECT',
 				start: 'ribs',
@@ -1909,7 +1909,7 @@ describe( 'state', () => {
 		} );
 
 		it( 'should unset multi selection', () => {
-			const original = deepFreeze( { start: { clientId: 'ribs' }, end: { clientId: 'chicken' } } );
+			const original = deepFreeze( { start: { clientId: 'ribs' }, end: { clientId: 'chicken' }, isEnabled: true } );
 
 			const state1 = blockSelection( original, {
 				type: 'CLEAR_SELECTED_BLOCK',
@@ -1935,7 +1935,7 @@ describe( 'state', () => {
 		} );
 
 		it( 'should select inserted block', () => {
-			const original = deepFreeze( { start: 'ribs', end: 'chicken' } );
+			const original = deepFreeze( { start: 'ribs', end: 'chicken', initialPosition: null, isEnabled: true, isMultiSelecting: false } );
 
 			const state3 = blockSelection( original, {
 				type: 'INSERT_BLOCKS',
@@ -1984,7 +1984,7 @@ describe( 'state', () => {
 		} );
 
 		it( 'should replace the selected block', () => {
-			const original = deepFreeze( { start: { clientId: 'chicken' }, end: { clientId: 'chicken' } } );
+			const original = deepFreeze( { start: { clientId: 'chicken' }, end: { clientId: 'chicken' }, initialPosition: null, isEnabled: true, isMultiSelecting: false } );
 			const state = blockSelection( original, {
 				type: 'REPLACE_BLOCKS',
 				clientIds: [ 'chicken' ],
@@ -2023,7 +2023,7 @@ describe( 'state', () => {
 		} );
 
 		it( 'should replace the selected block if we keep it not at the end when replacing blocks', () => {
-			const original = deepFreeze( { start: { clientId: 'chicken' }, end: { clientId: 'chicken' } } );
+			const original = deepFreeze( { start: { clientId: 'chicken' }, end: { clientId: 'chicken' }, initialPosition: null, isEnabled: true, isMultiSelecting: false } );
 			const state = blockSelection( original, {
 				type: 'REPLACE_BLOCKS',
 				clientIds: [ 'chicken' ],
@@ -2048,7 +2048,7 @@ describe( 'state', () => {
 		} );
 
 		it( 'should reset if replacing with empty set', () => {
-			const original = deepFreeze( { start: { clientId: 'chicken' }, end: { clientId: 'chicken' } } );
+			const original = deepFreeze( { start: { clientId: 'chicken' }, end: { clientId: 'chicken' }, isEnabled: true } );
 			const state = blockSelection( original, {
 				type: 'REPLACE_BLOCKS',
 				clientIds: [ 'chicken' ],
@@ -2084,6 +2084,7 @@ describe( 'state', () => {
 				end: { clientId: 'chicken' },
 				initialPosition: null,
 				isMultiSelecting: false,
+				isEnabled: true,
 			} );
 			const state = blockSelection( original, {
 				type: 'REMOVE_BLOCKS',
@@ -2120,6 +2121,7 @@ describe( 'state', () => {
 				end: { clientId: 'chicken' },
 				initialPosition: null,
 				isMultiSelecting: false,
+				isEnabled: true,
 			} );
 			const newBlock = {
 				name: 'core/test-block',

packages/block-library/src/cover/edit.js

@@ -41,6 +41,7 @@ import {
 	ColorPalette,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
+import { withDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -130,6 +131,7 @@ const RESIZABLE_BOX_ENABLE_OPTION = {
 function ResizableCover( {
 	className,
 	children,
+	onResizeStart,
 	onResize,
 	onResizeStop,
 } ) {
@@ -145,9 +147,10 @@ function ResizableCover( {
 	);
 	const onResizeStartEvent = useCallback(
 		( event, direction, elt ) => {
+			onResizeStart( elt.clientHeight );
 			onResize( elt.clientHeight );
 		},
-		[ onResize ]
+		[ onResizeStart, onResize ]
 	);
 	const onResizeStopEvent = useCallback(
 		( event, direction, elt ) => {
@@ -212,6 +215,7 @@ class CoverEdit extends Component {
 			noticeUI,
 			overlayColor,
 			setOverlayColor,
+			toggleSelection,
 		} = this.props;
 		const {
 			backgroundType,
@@ -432,13 +436,15 @@ class CoverEdit extends Component {
 						'block-library-cover__resize-container',
 						{ 'is-selected': isSelected },
 					) }
+					onResizeStart={ () => toggleSelection( false ) }
 					onResize={ ( newMinHeight ) => {
 						this.setState( {
 							temporaryMinHeight: newMinHeight,
 						} );
 					} }
 					onResizeStop={
 						( newMinHeight ) => {
+							toggleSelection( true );
 							setAttributes( {
 								minHeight: newMinHeight,
 							} );
@@ -552,6 +558,13 @@ class CoverEdit extends Component {
 }
 
 export default compose( [
+	withDispatch( ( dispatch ) => {
+		const { toggleSelection } = dispatch( 'core/block-editor' );
+
+		return {
+			toggleSelection,
+		};
+	} ),
 	withColors( { overlayColor: 'background-color' } ),
 	withNotices,
 	withInstanceId,

packages/block-library/src/image/edit.js

@@ -45,7 +45,7 @@ import {
 	BACKSPACE,
 	ENTER,
 } from '@wordpress/keycodes';
-import { withSelect } from '@wordpress/data';
+import { withSelect, withDispatch } from '@wordpress/data';
 import {
 	BlockAlignmentToolbar,
 	BlockControls,
@@ -576,6 +576,8 @@ export class ImageEdit extends Component {
 			maxWidth,
 			noticeUI,
 			isRTL,
+			onResizeStart,
+			onResizeStop,
 		} = this.props;
 		const {
 			url,
@@ -891,7 +893,9 @@ export class ImageEdit extends Component {
 											bottom: true,
 											left: showLeftHandle,
 										} }
+										onResizeStart={ onResizeStart }
 										onResizeStop={ ( event, direction, elt, delta ) => {
+											onResizeStop();
 											setAttributes( {
 												width: parseInt( currentWidth + delta.width, 10 ),
 												height: parseInt( currentHeight + delta.height, 10 ),
@@ -924,6 +928,14 @@ export class ImageEdit extends Component {
 }
 
 export default compose( [
+	withDispatch( ( dispatch ) => {
+		const { toggleSelection } = dispatch( 'core/block-editor' );
+
+		return {
+			onResizeStart: () => toggleSelection( false ),
+			onResizeStop: () => toggleSelection( true ),
+		};
+	} ),
 	withSelect( ( select, props ) => {
 		const { getMedia } = select( 'core' );
 		const { getSettings } = select( 'core/block-editor' );

packages/block-library/src/media-text/media-container.js

@@ -10,6 +10,8 @@ import {
 } from '@wordpress/block-editor';
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { compose } from '@wordpress/compose';
+import { withDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -109,12 +111,16 @@ class MediaContainer extends Component {
 	}
 
 	render() {
-		const { mediaPosition, mediaUrl, mediaType, mediaWidth, commitWidthChange, onWidthChange } = this.props;
+		const { mediaPosition, mediaUrl, mediaType, mediaWidth, commitWidthChange, onWidthChange, toggleSelection } = this.props;
 		if ( mediaType && mediaUrl ) {
+			const onResizeStart = () => {
+				toggleSelection( false );
+			};
 			const onResize = ( event, direction, elt ) => {
 				onWidthChange( parseInt( elt.style.width ) );
 			};
 			const onResizeStop = ( event, direction, elt ) => {
+				toggleSelection( true );
 				commitWidthChange( parseInt( elt.style.width ) );
 			};
 			const enablePositions = {
@@ -138,6 +144,7 @@ class MediaContainer extends Component {
 					minWidth="10%"
 					maxWidth="100%"
 					enable={ enablePositions }
+					onResizeStart={ onResizeStart }
 					onResize={ onResize }
 					onResizeStop={ onResizeStop }
 					axis="x"
@@ -150,4 +157,13 @@ class MediaContainer extends Component {
 	}
 }
 
-export default withNotices( MediaContainer );
+export default compose( [
+	withDispatch( ( dispatch ) => {
+		const { toggleSelection } = dispatch( 'core/block-editor' );
+
+		return {
+			toggleSelection,
+		};
+	} ),
+	withNotices,
+] )( MediaContainer );

packages/block-library/src/spacer/edit.js

@@ -10,9 +10,10 @@ import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { InspectorControls } from '@wordpress/block-editor';
 import { BaseControl, PanelBody, ResizableBox } from '@wordpress/components';
-import { withInstanceId } from '@wordpress/compose';
+import { compose, withInstanceId } from '@wordpress/compose';
+import { withDispatch } from '@wordpress/data';
 
-const SpacerEdit = ( { attributes, isSelected, setAttributes, instanceId } ) => {
+const SpacerEdit = ( { attributes, isSelected, setAttributes, instanceId, onResizeStart, onResizeStop } ) => {
 	const { height } = attributes;
 	const id = `block-spacer-height-input-${ instanceId }`;
 	const [ inputHeightValue, setInputHeightValue ] = useState( height );
@@ -38,7 +39,9 @@ const SpacerEdit = ( { attributes, isSelected, setAttributes, instanceId } ) =>
 					bottomLeft: false,
 					topLeft: false,
 				} }
+				onResizeStart={ onResizeStart }
 				onResizeStop={ ( event, direction, elt, delta ) => {
+					onResizeStop();
 					const spacerHeight = parseInt( height + delta.height, 10 );
 					setAttributes( {
 						height: spacerHeight,
@@ -78,4 +81,14 @@ const SpacerEdit = ( { attributes, isSelected, setAttributes, instanceId } ) =>
 	);
 };
 
-export default withInstanceId( SpacerEdit );
+export default compose( [
+	withDispatch( ( dispatch ) => {
+		const { toggleSelection } = dispatch( 'core/block-editor' );
+
+		return {
+			onResizeStart: () => toggleSelection( false ),
+			onResizeStop: () => toggleSelection( true ),
+		};
+	} ),
+	withInstanceId,
+] )( SpacerEdit );