diff --git a/blocks/library/block/index.js b/blocks/library/block/index.js index 38ba7ee816afc6..2b1fc8c1343f1f 100644 --- a/blocks/library/block/index.js +++ b/blocks/library/block/index.js @@ -30,6 +30,7 @@ class ReusableBlockEdit extends Component { this.state = { isEditing: !! ( reusableBlock && reusableBlock.isTemporary ), title: null, + changedAttributes: null, }; } @@ -45,6 +46,7 @@ class ReusableBlockEdit extends Component { this.setState( { isEditing: true, title: reusableBlock.title, + changedAttributes: {}, } ); } @@ -52,12 +54,16 @@ class ReusableBlockEdit extends Component { this.setState( { isEditing: false, title: null, + changedAttributes: null, } ); } setAttributes( attributes ) { - const { updateAttributes, block } = this.props; - updateAttributes( block.uid, attributes ); + this.setState( ( prevState ) => { + if ( prevState.changedAttributes !== null ) { + return { changedAttributes: { ...prevState.changedAttributes, ...attributes } }; + } + } ); } setTitle( title ) { @@ -65,13 +71,14 @@ class ReusableBlockEdit extends Component { } save() { - const { reusableBlock, onUpdateTitle, onSave } = this.props; + const { reusableBlock, onUpdateTitle, updateAttributes, block, onSave } = this.props; + const { title, changedAttributes } = this.state; - const { title } = this.state; if ( title !== reusableBlock.title ) { onUpdateTitle( title ); } + updateAttributes( block.uid, changedAttributes ); onSave(); this.stopEditing(); @@ -79,7 +86,7 @@ class ReusableBlockEdit extends Component { render() { const { isSelected, reusableBlock, block, isFetching, isSaving } = this.props; - const { isEditing, title } = this.state; + const { isEditing, title, changedAttributes } = this.state; if ( ! reusableBlock && isFetching ) { return ; @@ -95,7 +102,7 @@ class ReusableBlockEdit extends Component { isSelected={ isEditing && isSelected } id={ block.uid } name={ block.name } - attributes={ block.attributes } + attributes={ { ...block.attributes, ...changedAttributes } } setAttributes={ isEditing ? this.setAttributes : noop } /> );