diff --git a/src/app/AppContainer.js b/src/app/AppContainer.js index 3b52c49a85..a5ac62d9a5 100644 --- a/src/app/AppContainer.js +++ b/src/app/AppContainer.js @@ -2,7 +2,7 @@ * @format */ import { connect } from 'react-redux'; -import { isEqual } from 'lodash'; +import { cloneDeep } from 'lodash'; import MainApp from './MainApp'; import { parse, serialize } from '@wordpress/blocks'; @@ -11,22 +11,14 @@ import { compose } from '@wordpress/compose'; import RNReactNativeGutenbergBridge from 'react-native-gutenberg-bridge'; const mapStateToProps = ( state, ownProps ) => { - let blocks = ownProps.blocks; - let refresh = false; - - const newBlocks = ownProps.blocks.map( ( block ) => { - block.focused = ownProps.isBlockSelected( block.clientId ); - return block; + const blocks = ownProps.blocksFromState.map( block => { + const newBlock = cloneDeep( block ); + newBlock.focused = ownProps.isBlockSelected( block.clientId ); + return newBlock; } ); - if ( ! isEqual( blocks, newBlocks ) ) { - blocks = newBlocks; - refresh = true; - } - return { - blocks, - refresh, + blocks }; }; @@ -82,11 +74,12 @@ export default compose( [ rootClientId, isBlockSelected, selectedBlockIndex: getBlockIndex( selectedBlockClientId, rootClientId ), - blocks: getBlocks(), + blocksFromState: getBlocks(), }; } ), withDispatch( ( dispatch ) => { const { + clearSelectedBlock, insertBlock, mergeBlocks, moveBlocksDown, @@ -104,7 +97,10 @@ export default compose( [ onMoveUp: moveBlocksUp, onRemove: removeBlock, onResetBlocks: resetBlocks, - onSelect: selectBlock, + onSelect: ( clientId ) => { + clearSelectedBlock(); + selectBlock( clientId ); + }, onAttributesUpdate: updateBlockAttributes, }; } ), diff --git a/src/block-management/block-manager.js b/src/block-management/block-manager.js index 145b175fa3..4e758bceae 100644 --- a/src/block-management/block-manager.js +++ b/src/block-management/block-manager.js @@ -4,6 +4,7 @@ */ import React from 'react'; +import { isEqual } from 'lodash'; import { Platform, Switch, Text, View, FlatList, KeyboardAvoidingView } from 'react-native'; import RecyclerViewList, { DataSource } from 'react-native-recyclerview-list'; import BlockHolder from './block-holder'; @@ -29,7 +30,6 @@ export type BlockListType = { mergeBlocksAction: ( string, string ) => mixed, blocks: Array, aztechtml: string, - refresh: boolean, }; type PropsType = BlockListType; @@ -40,6 +40,7 @@ type StateType = { blockTypePickerVisible: boolean, blocks: Array, selectedBlockType: string, + refresh: boolean, }; export default class BlockManager extends React.Component { @@ -52,6 +53,7 @@ export default class BlockManager extends React.Component inspectBlocks: false, blockTypePickerVisible: false, selectedBlockType: 'core/paragraph', // just any valid type to start from + refresh: false, }; } @@ -121,7 +123,7 @@ export default class BlockManager extends React.Component }; } - if ( state.blocks !== props.blocks ) { + if ( ! isEqual( state.blocks, props.blocks ) ) { const blockFocused = props.blocks.find( block => block.focused ); if ( blockFocused ) { BlockManager.focusDataSourceItem( state.dataSource, blockFocused.clientId ); @@ -129,6 +131,7 @@ export default class BlockManager extends React.Component return { ...state, blocks: props.blocks, + refresh: ! state.refresh, }; } @@ -276,7 +279,7 @@ export default class BlockManager extends React.Component item.clientId } renderItem={ this.renderItem.bind( this ) } /> @@ -337,7 +340,7 @@ export default class BlockManager extends React.Component this.setState( { inspectBlocks } ); } - renderItem( value: { item: BlockType, clientId: string } ) { + renderItem( value: { item: BlockType } ) { const insertHere = ( @@ -349,13 +352,13 @@ export default class BlockManager extends React.Component return ( this.insertBlocksAfter.bind( this )( value.item.clientId, blocks ) }