From 5a36e93ce6baf663e11bd557dde8d8e2d9a68ede Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 22 Mar 2018 11:26:54 +1100
Subject: [PATCH] Store changedAttributes instead of attributes

Avoid storing all of the referenced block's attributes in state by
storing only the changed attributes, and name this state property
changedAttributes to reflect this and to avoid ambiguity.
---
 blocks/library/block/index.js | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/blocks/library/block/index.js b/blocks/library/block/index.js
index 8a04288b28cfe0..2b1fc8c1343f1f 100644
--- a/blocks/library/block/index.js
+++ b/blocks/library/block/index.js
@@ -30,7 +30,7 @@ class ReusableBlockEdit extends Component {
 		this.state = {
 			isEditing: !! ( reusableBlock && reusableBlock.isTemporary ),
 			title: null,
-			attributes: null,
+			changedAttributes: null,
 		};
 	}
 
@@ -41,12 +41,12 @@ class ReusableBlockEdit extends Component {
 	}
 
 	startEditing() {
-		const { reusableBlock, block } = this.props;
+		const { reusableBlock } = this.props;
 
 		this.setState( {
 			isEditing: true,
 			title: reusableBlock.title,
-			attributes: block.attributes,
+			changedAttributes: {},
 		} );
 	}
 
@@ -54,16 +54,15 @@ class ReusableBlockEdit extends Component {
 		this.setState( {
 			isEditing: false,
 			title: null,
-			attributes: null,
+			changedAttributes: null,
 		} );
 	}
 
 	setAttributes( attributes ) {
 		this.setState( ( prevState ) => {
-			if ( prevState.attributes !== null ) {
-				return { attributes: { ...prevState.attributes, ...attributes } };
+			if ( prevState.changedAttributes !== null ) {
+				return { changedAttributes: { ...prevState.changedAttributes, ...attributes } };
 			}
-			return null;
 		} );
 	}
 
@@ -73,13 +72,13 @@ class ReusableBlockEdit extends Component {
 
 	save() {
 		const { reusableBlock, onUpdateTitle, updateAttributes, block, onSave } = this.props;
-		const { title, attributes } = this.state;
+		const { title, changedAttributes } = this.state;
 
 		if ( title !== reusableBlock.title ) {
 			onUpdateTitle( title );
 		}
 
-		updateAttributes( block.uid, attributes );
+		updateAttributes( block.uid, changedAttributes );
 		onSave();
 
 		this.stopEditing();
@@ -87,7 +86,7 @@ class ReusableBlockEdit extends Component {
 
 	render() {
 		const { isSelected, reusableBlock, block, isFetching, isSaving } = this.props;
-		const { isEditing, title, attributes } = this.state;
+		const { isEditing, title, changedAttributes } = this.state;
 
 		if ( ! reusableBlock && isFetching ) {
 			return <Placeholder><Spinner /></Placeholder>;
@@ -103,7 +102,7 @@ class ReusableBlockEdit extends Component {
 				isSelected={ isEditing && isSelected }
 				id={ block.uid }
 				name={ block.name }
-				attributes={ attributes !== null ? attributes : block.attributes }
+				attributes={ { ...block.attributes, ...changedAttributes } }
 				setAttributes={ isEditing ? this.setAttributes : noop }
 			/>
 		);