diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js index d1a37b0f2dbb2..71940c0dc387c 100644 --- a/packages/block-library/src/block/edit.js +++ b/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 } ) { {