Inner Blocks: Refactor treatment of block settings

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,
+ } );
  }
  }
 

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;

editor/store/selectors.js

@@ -1376,7 +1376,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;

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( {} );
  } );
  } );

editor/store/test/selectors.js

@@ -3048,7 +3048,7 @@ describe( 'selectors', () => {
  },
  blockListSettings: {
  block1: {
- supportedBlocks: [ 'core/test-block-c' ],
+ allowedBlocks: [ 'core/test-block-c' ],
  },
  },
  settings: {},
@@ -3067,7 +3067,7 @@ describe( 'selectors', () => {
  },
  blockListSettings: {
  block1: {
- supportedBlocks: [ 'core/test-block-b' ],
+ allowedBlocks: [ 'core/test-block-b' ],
  },
  },
  settings: {},
@@ -3086,7 +3086,7 @@ describe( 'selectors', () => {
  },
  blockListSettings: {
  block1: {
- supportedBlocks: [],
+ allowedBlocks: [],
  },
  },
  settings: {},