diff --git a/src/components/block-editor-contents/index.js b/src/components/block-editor-contents/index.js index 46ba2e911..767817072 100644 --- a/src/components/block-editor-contents/index.js +++ b/src/components/block-editor-contents/index.js @@ -9,7 +9,7 @@ import isPromise from 'is-promise'; import { Popover } from '@wordpress/components'; import { withDispatch, withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; -import { useEffect } from '@wordpress/element'; +import { useLayoutEffect } from '@wordpress/element'; import { parse, rawHandler } from '@wordpress/blocks'; /** @@ -59,6 +59,7 @@ async function getInitialContent( settings, loader ) { * @param {object[]} props.blocks * @param {OnUpdate} props.updateBlocksWithoutUndo - Callback to update blocks * @param {OnUpdate} props.updateBlocksWithUndo - Callback to update blocks + * @param {*} props.clearHistory - Callback to clear history * @param {boolean} props.isEditing - Are we editing in this editor? * @param {EditorMode} props.editorMode - Visual or code? * @param {object} props.children - Child components @@ -68,17 +69,19 @@ async function getInitialContent( settings, loader ) { * @param {OnLoad} props.onLoad - Load initial blocks */ function BlockEditorContents( props ) { - const { blocks, updateBlocksWithoutUndo, updateBlocksWithUndo, selection, isEditing, editorMode } = props; + const { blocks, updateBlocksWithoutUndo, updateBlocksWithUndo, clearHistory, selection, isEditing, editorMode } = props; const { children, settings, renderMoreMenu, onLoad } = props; // Set initial content, if we have any, but only if there is no existing data in the editor (from elsewhere) - useEffect( () => { + useLayoutEffect( () => { const loadData = async () => { const initialContent = await getInitialContent( settings, onLoad ); if ( initialContent.length > 0 && ( ! blocks || blocks.length === 0 ) ) { updateBlocksWithoutUndo( initialContent ); } + + clearHistory(); }; loadData(); @@ -119,11 +122,12 @@ export default compose( [ }; } ), withDispatch( ( dispatch ) => { - const { updateBlocksWithUndo, updateBlocksWithoutUndo } = dispatch( 'isolated/editor' ); + const { updateBlocksWithUndo, updateBlocksWithoutUndo, clearHistory } = dispatch( 'isolated/editor' ); return { updateBlocksWithUndo, updateBlocksWithoutUndo, + clearHistory, }; } ), ] )( BlockEditorContents ); diff --git a/src/store/blocks/actions.js b/src/store/blocks/actions.js index a6bc34795..3149dcc74 100644 --- a/src/store/blocks/actions.js +++ b/src/store/blocks/actions.js @@ -7,6 +7,9 @@ const actions = { redo() { return ActionCreators.redo(); }, + clearHistory() { + return ActionCreators.clearHistory(); + }, /** * Update blocks without undo history * @param {object[]} blocks diff --git a/src/store/blocks/reducer.js b/src/store/blocks/reducer.js index cb94c80a7..dd0fce4ce 100644 --- a/src/store/blocks/reducer.js +++ b/src/store/blocks/reducer.js @@ -65,4 +65,5 @@ const reducer = ( state = DEFAULT_STATE, action ) => { export default undoable( reducer, { groupBy, + ignoreInitialState: true, } );