Only use local state while editing.

packages/block-library/src/block/edit.js

@@ -76,34 +76,43 @@ export default function ReusableBlockEdit( { attributes, isSelected } ) {
 	// Start in preview mode when we're working with an existing reusable block.
 	const [ isEditing, setIsEditing ] = useState( isTemporary ?? false );
 
-	// Local state so changes can be made to the reusable block without having to save them.
-	const [ localTitle, setLocalTitle ] = useState( title );
-	const [ localBlocks, setLocalBlocks ] = useState( blocks ?? [] );
+	// Local state used while editing so changes can be made to the reusable
+	// block without having to save them.
+	const [ localTitle, setLocalTitle ] = useState( isEditing ? title : null );
+	const [ localBlocks, setLocalBlocks ] = useState(
+		isEditing ? blocks : null
+	);
 
 	useEffect( () => {
 		if ( ! reusableBlock ) {
 			fetchReusableBlock();
 		}
 	}, [] );
 
-	// If the reusable block was changed by saving another instance of the same
-	// reusable block in the editor, and if this instance is not currently being
-	// edited, update the local state of this instance to match.
-	useEffect( () => {
-		if ( ! isEditing && ! isSaving ) {
-			setLocalTitle( title );
-		}
-	}, [ title, isEditing, isSaving ] );
+	function startEditing() {
+		// Copy saved reusable block data into local state.
+		setLocalBlocks( blocks ?? [] );
+		setLocalTitle( title );
 
-	useEffect( () => {
-		if ( ! isEditing && ! isSaving ) {
-			setLocalBlocks( blocks );
-		}
-	}, [ blocks, isEditing, isSaving ] );
+		setIsEditing( true );
+	}
+
+	function cancelEditing() {
+		// Clear local state.
+		setLocalBlocks( null );
+		setLocalTitle( null );
+
+		setIsEditing( false );
+	}
 
-	function save() {
+	function saveAndStopEditing() {
 		onChange( { title: localTitle, content: serialize( localBlocks ) } );
 		onSave();
+
+		// Clear local state.
+		setLocalBlocks( null );
+		setLocalTitle( null );
+
 		setIsEditing( false );
 	}
 
@@ -122,12 +131,22 @@ export default function ReusableBlockEdit( { attributes, isSelected } ) {
 		);
 	}
 
+	function handleModifyBlocks( modifedBlocks ) {
+		// We shouldn't change local state when the blocks are loading
+		// from the saved reusable block.
+		if ( isEditing ) {
+			setLocalBlocks( modifedBlocks );
+		}
+	}
+
 	let content = (
 		<BlockEditorProvider
 			settings={ settings }
-			value={ localBlocks }
-			onChange={ setLocalBlocks }
-			onInput={ setLocalBlocks }
+			// If editing, use local state; otherwise, load the blocks from the
+			// saved reusable block.
+			value={ isEditing ? localBlocks : blocks }
+			onChange={ handleModifyBlocks }
+			onInput={ handleModifyBlocks }
 		>
 			<WritingFlow>
 				<BlockList />
@@ -144,17 +163,17 @@ export default function ReusableBlockEdit( { attributes, isSelected } ) {
 			{ ( isSelected || isEditing ) && (
 				<ReusableBlockEditPanel
 					isEditing={ isEditing }
-					title={ localTitle ?? title }
+					title={ isEditing ? localTitle : title }
 					isSaving={ isSaving && ! ( isTemporary ?? false ) }
 					isEditDisabled={ ! canUpdateBlock }
-					onEdit={ () => {
-						setIsEditing( true );
-					} }
-					onChangeTitle={ setLocalTitle }
-					onSave={ save }
-					onCancel={ () => {
-						setIsEditing( false );
+					onEdit={ startEditing }
+					onChangeTitle={ ( updatedTitle ) => {
+						if ( isEditing ) {
+							setLocalTitle( updatedTitle );
+						}
 					} }
+					onSave={ saveAndStopEditing }
+					onCancel={ cancelEditing }
 				/>
 			) }
 			{ content }