From 38cbfa7fcd58b23762b86e5f888a15fd682f179c Mon Sep 17 00:00:00 2001 From: Pascal Birchler Date: Fri, 6 Sep 2019 17:15:02 +0200 Subject: [PATCH 1/4] Disable selection when resizing --- packages/block-library/src/cover/edit.js | 13 ++++++++++++ packages/block-library/src/image/edit.js | 14 ++++++++++++- .../src/media-text/media-container.js | 20 +++++++++++++++++-- packages/block-library/src/spacer/edit.js | 19 +++++++++++++++--- 4 files changed, 60 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js index 097f8ed3b2fe5..7f651031e84b9 100644 --- a/packages/block-library/src/cover/edit.js +++ b/packages/block-library/src/cover/edit.js @@ -36,6 +36,7 @@ import { } from '@wordpress/block-editor'; import { Component, createRef } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; +import { withDispatch } from '@wordpress/data'; /** * Internal dependencies @@ -105,6 +106,8 @@ class CoverEdit extends Component { noticeUI, overlayColor, setOverlayColor, + onResizeStart, + onResizeStop, } = this.props; const { backgroundType, @@ -348,7 +351,9 @@ class CoverEdit extends Component { bottomLeft: false, topLeft: false, } } + onResizeStart={ onResizeStart } onResizeStop={ ( event, direction, elt, delta ) => { + onResizeStop(); const coverHeight = parseInt( minHeight + delta.height, 10 ); this.setState( { coverMinHeight: coverHeight } ); setAttributes( { @@ -460,6 +465,14 @@ class CoverEdit extends Component { } export default compose( [ + withDispatch( ( dispatch ) => { + const { toggleSelection } = dispatch( 'core/block-editor' ); + + return { + onResizeStart: () => toggleSelection( false ), + onResizeStop: () => toggleSelection( true ), + }; + } ), withColors( { overlayColor: 'background-color' } ), withNotices, withInstanceId, diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index c6646f6644458..1d2b86feefa71 100644 --- a/packages/block-library/src/image/edit.js +++ b/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' ); diff --git a/packages/block-library/src/media-text/media-container.js b/packages/block-library/src/media-text/media-container.js index 74d2062d524d9..fce35487d6a03 100644 --- a/packages/block-library/src/media-text/media-container.js +++ b/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 ); diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index f6a3091eb57e2..a9b0e2626e481 100644 --- a/packages/block-library/src/spacer/edit.js +++ b/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 ); From 4b50376c0cbbd6422facdcc218fe9449f2353c84 Mon Sep 17 00:00:00 2001 From: Pascal Birchler Date: Mon, 9 Sep 2019 16:38:34 +0200 Subject: [PATCH 2/4] Do not return modified initial state --- packages/block-editor/src/store/reducer.js | 30 +++++++++++++++------- 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index 33a40dc81af1a..8e49c1a0ca7a3 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -942,7 +942,13 @@ 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; + 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 +971,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 +985,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 +994,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 +1011,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 +1027,7 @@ export function blockSelection( state = BLOCK_SELECTION_INITIAL_STATE, action ) const blockToSelect = action.blocks[ indexToSelect ]; if ( ! blockToSelect ) { - return BLOCK_SELECTION_INITIAL_STATE; + return state; } if ( @@ -1026,19 +1038,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, From c200b640187d125920763808f1134c65f1f3983f Mon Sep 17 00:00:00 2001 From: Pascal Birchler Date: Mon, 9 Sep 2019 17:13:55 +0200 Subject: [PATCH 3/4] Update reducer tests --- packages/block-editor/src/store/reducer.js | 12 +++++++++++- packages/block-editor/src/store/test/reducer.js | 16 +++++++++------- 2 files changed, 20 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index 8e49c1a0ca7a3..9f40684c6632d 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -942,6 +942,10 @@ const BLOCK_SELECTION_INITIAL_STATE = { export function blockSelection( state = BLOCK_SELECTION_INITIAL_STATE, action ) { switch ( action.type ) { case 'CLEAR_SELECTED_BLOCK': + if ( ! state.start || ! state.start.clientId ) { + return state; + } + return { ...state, start: BLOCK_SELECTION_EMPTY_OBJECT, @@ -1027,7 +1031,13 @@ export function blockSelection( state = BLOCK_SELECTION_INITIAL_STATE, action ) const blockToSelect = action.blocks[ indexToSelect ]; if ( ! blockToSelect ) { - return state; + return { + ...state, + start: BLOCK_SELECTION_EMPTY_OBJECT, + end: BLOCK_SELECTION_EMPTY_OBJECT, + isMultiSelecting: false, + initialPosition: null, + }; } if ( diff --git a/packages/block-editor/src/store/test/reducer.js b/packages/block-editor/src/store/test/reducer.js index 7eb698be77865..6eb56576f71b2 100644 --- a/packages/block-editor/src/store/test/reducer.js +++ b/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', From eb0cb598a13eb55f8f55bb6781123bc406fc279d Mon Sep 17 00:00:00 2001 From: Pascal Birchler Date: Mon, 9 Sep 2019 18:34:53 +0200 Subject: [PATCH 4/4] Properly pass on onResizeStart prop to ResizableCover --- packages/block-library/src/cover/edit.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js index 560ed4edb5af3..57dc7efe0318b 100644 --- a/packages/block-library/src/cover/edit.js +++ b/packages/block-library/src/cover/edit.js @@ -131,6 +131,7 @@ const RESIZABLE_BOX_ENABLE_OPTION = { function ResizableCover( { className, children, + onResizeStart, onResize, onResizeStop, } ) { @@ -146,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 ) => { @@ -213,8 +215,7 @@ class CoverEdit extends Component { noticeUI, overlayColor, setOverlayColor, - onResizeStart, - onResizeStop, + toggleSelection, } = this.props; const { backgroundType, @@ -435,7 +436,7 @@ class CoverEdit extends Component { 'block-library-cover__resize-container', { 'is-selected': isSelected }, ) } - onResizeStart={ onResizeStart } + onResizeStart={ () => toggleSelection( false ) } onResize={ ( newMinHeight ) => { this.setState( { temporaryMinHeight: newMinHeight, @@ -443,7 +444,7 @@ class CoverEdit extends Component { } } onResizeStop={ ( newMinHeight ) => { - onResizeStop(); + toggleSelection( true ); setAttributes( { minHeight: newMinHeight, } ); @@ -561,8 +562,7 @@ export default compose( [ const { toggleSelection } = dispatch( 'core/block-editor' ); return { - onResizeStart: () => toggleSelection( false ), - onResizeStop: () => toggleSelection( true ), + toggleSelection, }; } ), withColors( { overlayColor: 'background-color' } ),