diff --git a/packages/block-editor/src/components/block-list/block-html.js b/packages/block-editor/src/components/block-list/block-html.js index 5d9e7bfeb7bf77..c670133de17c41 100644 --- a/packages/block-editor/src/components/block-list/block-html.js +++ b/packages/block-editor/src/components/block-list/block-html.js @@ -6,7 +6,7 @@ import TextareaAutosize from 'react-autosize-textarea'; /** * WordPress dependencies */ -import { useEffect, useState } from '@wordpress/element'; +import { useEffect, useMemo, useState } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; import { getBlockAttributes, @@ -28,6 +28,16 @@ function BlockHTML( { clientId } ) { [ clientId ] ); const { updateBlock } = useDispatch( blockEditorStore ); + + // Derive block content as a primitive string so the effect only fires + // when the serialized content genuinely changes, not when the block + // object reference changes (which happens on every RESET_BLOCKS during + // RTC sync, even for unchanged blocks). + const blockContent = useMemo( + () => ( block ? getBlockContent( block ) : '' ), + [ block ] + ); + const onChange = () => { const blockType = getBlockType( block.name ); @@ -64,8 +74,8 @@ function BlockHTML( { clientId } ) { }; useEffect( () => { - setHtml( getBlockContent( block ) ); - }, [ block ] ); + setHtml( blockContent ); + }, [ blockContent ] ); return (