Inner Blocks: Refactor treatment of block settings (#7418)

WordPress · Jun 29, 2018 · 124647e · 124647e
1 parent eb95525
commit 124647e
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 51 deletions.
diff --git a/editor/components/inner-blocks/index.js b/editor/components/inner-blocks/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEqual, pick } from 'lodash';
+import { pick, get } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -12,6 +12,7 @@ import { withViewportMatch } from '@wordpress/viewport';
 import { Component, compose } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { synchronizeBlocksWithTemplate } from '@wordpress/blocks';
+import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
  * Internal dependencies
@@ -21,16 +22,12 @@ import BlockList from '../block-list';
 import { withBlockEditContext } from '../block-edit/context';
 
 class InnerBlocks extends Component {
-	componentWillReceiveProps( nextProps ) {
-		this.updateNestedSettings( {
-			supportedBlocks: nextProps.allowedBlocks,
-		} );
+	componentDidUpdate() {
+		this.updateNestedSettings();
 	}
 
 	componentDidMount() {
-		this.updateNestedSettings( {
-			supportedBlocks: this.props.allowedBlocks,
-		} );
+		this.updateNestedSettings();
 		this.insertTemplateBlocks( this.props.template );
 	}
 
@@ -43,9 +40,18 @@ class InnerBlocks extends Component {
 		}
 	}
 
-	updateNestedSettings( newSettings ) {
-		if ( ! isEqual( this.props.blockListSettings, newSettings ) ) {
-			this.props.updateNestedSettings( newSettings );
+	updateNestedSettings() {
+		const {
+			blockListSettings,
+			allowedBlocks: nextAllowedBlocks,
+			updateNestedSettings,
+		} = this.props;
+
+		const allowedBlocks = get( blockListSettings, [ 'allowedBlocks' ] );
+		if ( ! isShallowEqual( allowedBlocks, nextAllowedBlocks ) ) {
+			updateNestedSettings( {
+				allowedBlocks: nextAllowedBlocks,
+			} );
 		}
 	}
 

diff --git a/editor/store/reducer.js b/editor/store/reducer.js
@@ -1042,19 +1042,22 @@ export const blockListSettings = ( state = {}, action ) => {
 		}
 		case 'UPDATE_BLOCK_LIST_SETTINGS': {
 			const { id } = action;
-			if ( id && ! action.settings ) {
-				return omit( state, id );
+			if ( ! action.settings ) {
+				if ( state.hasOwnProperty( id ) ) {
+					return omit( state, id );
+				}
+
+				return state;
 			}
-			const blockSettings = state[ id ];
-			const updateIsRequired = ! isEqual( blockSettings, action.settings );
-			if ( updateIsRequired ) {
-				return {
-					...state,
-					[ id ]: {
-						...action.settings,
-					},
-				};
+
+			if ( isEqual( state[ id ], action.settings ) ) {
+				return state;
 			}
+
+			return {
+				...state,
+				[ id ]: action.settings,
+			};
 		}
 	}
 	return state;

diff --git a/editor/store/selectors.js b/editor/store/selectors.js
@@ -1371,7 +1371,7 @@ export const canInsertBlockType = createSelector(
 		}
 
 		const parentBlockListSettings = getBlockListSettings( state, parentUID );
-		const parentAllowedBlocks = get( parentBlockListSettings, [ 'supportedBlocks' ] );
+		const parentAllowedBlocks = get( parentBlockListSettings, [ 'allowedBlocks' ] );
 		const hasParentAllowedBlock = checkAllowList( parentAllowedBlocks, blockName );
 
 		const blockAllowedParentBlocks = blockType.parent;

diff --git a/editor/store/test/reducer.js b/editor/store/test/reducer.js
@@ -2185,76 +2185,128 @@ describe( 'state', () => {
 	describe( 'blockListSettings', () => {
 		it( 'should add new settings', () => {
 			const original = deepFreeze( {} );
+
 			const state = blockListSettings( original, {
 				type: 'UPDATE_BLOCK_LIST_SETTINGS',
-				id: 'chicken',
+				id: '9db792c6-a25a-495d-adbd-97d56a4c4189',
 				settings: {
-					chicken: 'ribs',
+					allowedBlocks: [ 'core/paragraph' ],
 				},
 			} );
+
 			expect( state ).toEqual( {
-				chicken: {
-					chicken: 'ribs',
+				'9db792c6-a25a-495d-adbd-97d56a4c4189': {
+					allowedBlocks: [ 'core/paragraph' ],
+				},
+			} );
+		} );
+
+		it( 'should return same reference if updated as the same', () => {
+			const original = deepFreeze( {
+				'9db792c6-a25a-495d-adbd-97d56a4c4189': {
+					allowedBlocks: [ 'core/paragraph' ],
+				},
+			} );
+
+			const state = blockListSettings( original, {
+				type: 'UPDATE_BLOCK_LIST_SETTINGS',
+				id: '9db792c6-a25a-495d-adbd-97d56a4c4189',
+				settings: {
+					allowedBlocks: [ 'core/paragraph' ],
 				},
 			} );
+
+			expect( state ).toBe( original );
+		} );
+
+		it( 'should return same reference if updated settings not assigned and id not exists', () => {
+			const original = deepFreeze( {} );
+
+			const state = blockListSettings( original, {
+				type: 'UPDATE_BLOCK_LIST_SETTINGS',
+				id: '9db792c6-a25a-495d-adbd-97d56a4c4189',
+			} );
+
+			expect( state ).toBe( original );
 		} );
 
 		it( 'should update the settings of a block', () => {
 			const original = deepFreeze( {
-				chicken: {
-					chicken: 'ribs',
+				'9db792c6-a25a-495d-adbd-97d56a4c4189': {
+					allowedBlocks: [ 'core/paragraph' ],
 				},
-				otherBlock: {
-					setting1: true,
+				'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1': {
+					allowedBlocks: true,
 				},
 			} );
+
 			const state = blockListSettings( original, {
 				type: 'UPDATE_BLOCK_LIST_SETTINGS',
-				id: 'chicken',
+				id: '9db792c6-a25a-495d-adbd-97d56a4c4189',
 				settings: {
-					ribs: 'not-chicken',
+					allowedBlocks: [ 'core/list' ],
 				},
 			} );
+
 			expect( state ).toEqual( {
-				chicken: {
-					ribs: 'not-chicken',
+				'9db792c6-a25a-495d-adbd-97d56a4c4189': {
+					allowedBlocks: [ 'core/list' ],
 				},
-				otherBlock: {
-					setting1: true,
+				'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1': {
+					allowedBlocks: true,
 				},
 			} );
 		} );
 
+		it( 'should remove existing settings if updated settings not assigned', () => {
+			const original = deepFreeze( {
+				'9db792c6-a25a-495d-adbd-97d56a4c4189': {
+					allowedBlocks: [ 'core/paragraph' ],
+				},
+			} );
+
+			const state = blockListSettings( original, {
+				type: 'UPDATE_BLOCK_LIST_SETTINGS',
+				id: '9db792c6-a25a-495d-adbd-97d56a4c4189',
+			} );
+
+			expect( state ).toEqual( {} );
+		} );
+
 		it( 'should remove the settings of a block when it is replaced', () => {
 			const original = deepFreeze( {
-				chicken: {
-					chicken: 'ribs',
+				'9db792c6-a25a-495d-adbd-97d56a4c4189': {
+					allowedBlocks: [ 'core/paragraph' ],
 				},
-				otherBlock: {
-					setting1: true,
+				'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1': {
+					allowedBlocks: true,
 				},
 			} );
+
 			const state = blockListSettings( original, {
 				type: 'REPLACE_BLOCKS',
-				uids: [ 'otherBlock' ],
+				uids: [ 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1' ],
 			} );
+
 			expect( state ).toEqual( {
-				chicken: {
-					chicken: 'ribs',
+				'9db792c6-a25a-495d-adbd-97d56a4c4189': {
+					allowedBlocks: [ 'core/paragraph' ],
 				},
 			} );
 		} );
 
 		it( 'should remove the settings of a block when it is removed', () => {
 			const original = deepFreeze( {
-				otherBlock: {
-					setting1: true,
+				'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1': {
+					allowedBlocks: true,
 				},
 			} );
+
 			const state = blockListSettings( original, {
-				type: 'REPLACE_BLOCKS',
-				uids: [ 'otherBlock' ],
+				type: 'REMOVE_BLOCKS',
+				uids: [ 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1' ],
 			} );
+
 			expect( state ).toEqual( {} );
 		} );
 	} );

diff --git a/editor/store/test/selectors.js b/editor/store/test/selectors.js
@@ -3000,7 +3000,7 @@ describe( 'selectors', () => {
 				},
 				blockListSettings: {
 					block1: {
-						supportedBlocks: [ 'core/test-block-c' ],
+						allowedBlocks: [ 'core/test-block-c' ],
 					},
 				},
 				settings: {},
@@ -3019,7 +3019,7 @@ describe( 'selectors', () => {
 				},
 				blockListSettings: {
 					block1: {
-						supportedBlocks: [ 'core/test-block-b' ],
+						allowedBlocks: [ 'core/test-block-b' ],
 					},
 				},
 				settings: {},
@@ -3038,7 +3038,7 @@ describe( 'selectors', () => {
 				},
 				blockListSettings: {
 					block1: {
-						supportedBlocks: [],
+						allowedBlocks: [],
 					},
 				},
 				settings: {},