Attempt to fix temporary reusable block behavior.

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

@@ -11,7 +11,7 @@ import {
 	BlockList,
 	WritingFlow,
 } from '@wordpress/block-editor';
-import { serialize } from '@wordpress/blocks';
+import { parse, serialize } from '@wordpress/blocks';
 import { Placeholder, Spinner, Disabled } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
@@ -22,18 +22,18 @@ import { __ } from '@wordpress/i18n';
  */
 import ReusableBlockEditPanel from './edit-panel';
 
-export default function ReusableBlockEdit( { attributes, isSelected } ) {
-	const { ref } = attributes;
-
+export default function ReusableBlockEdit( {
+	attributes: { ref },
+	isSelected,
+} ) {
 	const {
 		reusableBlock,
 		isFetching,
 		isSaving,
-		isTemporary,
 		blocks,
+		title,
 		canUpdateBlock,
 		settings,
-		title,
 	} = useSelect(
 		( select ) => {
 			const { canUser } = select( 'core' );
@@ -48,20 +48,30 @@ export default function ReusableBlockEdit( { attributes, isSelected } ) {
 			} = select( 'core/editor' );
 			const _reusableBlock = getReusableBlock( ref );
 
+			let _blocks;
+			if ( _reusableBlock ) {
+				if ( _reusableBlock.isTemporary ) {
+					// The getParsedReusableBlock selector won't work for temporary
+					// reusable blocks.
+					_blocks = parse( _reusableBlock.content );
+				} else {
+					_blocks = getParsedReusableBlock( ref );
+				}
+			} else {
+				_blocks = null;
+			}
+
 			return {
 				reusableBlock: _reusableBlock,
 				isFetching: isFetchingReusableBlock( ref ),
 				isSaving: isSavingReusableBlock( ref ),
-				isTemporary: _reusableBlock?.isTemporary ?? null,
-				blocks: _reusableBlock
-					? getParsedReusableBlock( _reusableBlock.id )
-					: null,
+				blocks: _blocks,
+				title: _reusableBlock?.title ?? null,
 				canUpdateBlock:
 					!! _reusableBlock &&
 					! _reusableBlock.isTemporary &&
 					!! canUser( 'update', 'blocks', ref ),
 				settings: getSettings(),
-				title: _reusableBlock?.title ?? null,
 			};
 		},
 		[ ref ]
@@ -79,13 +89,18 @@ export default function ReusableBlockEdit( { attributes, isSelected } ) {
 
 	// Start in edit mode when working with a newly created reusable block.
 	// Start in preview mode when we're working with an existing reusable block.
-	const [ isEditing, setIsEditing ] = useState( isTemporary ?? false );
+	const [ isEditing, setIsEditing ] = useState(
+		reusableBlock?.isTemporary ?? false
+	);
 
-	// 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 );
+	// Local state used for temporary (newly-created, unsaved) reusable blocks
+	// and reusable blocks being edited. This state is used to make changes to
+	// the block without having to save them.
+	const [ localTitle, setLocalTitle ] = useState(
+		reusableBlock && isEditing ? title : null
+	);
 	const [ localBlocks, setLocalBlocks ] = useState(
-		isEditing ? blocks : null
+		reusableBlock && isEditing ? blocks : null
 	);
 
 	useEffect( () => {
@@ -96,7 +111,7 @@ export default function ReusableBlockEdit( { attributes, isSelected } ) {
 
 	function startEditing() {
 		// Copy saved reusable block data into local state.
-		setLocalBlocks( blocks ?? [] );
+		setLocalBlocks( blocks );
 		setLocalTitle( title );
 
 		setIsEditing( true );
@@ -169,7 +184,9 @@ export default function ReusableBlockEdit( { attributes, isSelected } ) {
 				<ReusableBlockEditPanel
 					isEditing={ isEditing }
 					title={ isEditing ? localTitle : title }
-					isSaving={ isSaving && ! ( isTemporary ?? false ) }
+					isSaving={
+						isSaving && ! ( reusableBlock?.isTemporary ?? false )
+					}
 					isEditDisabled={ ! canUpdateBlock }
 					onEdit={ startEditing }
 					onChangeTitle={ ( updatedTitle ) => {