diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index a35f49c37b9c17..14b6bf475045e1 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -66,6 +66,15 @@ function getPostContentAttributes( blocks ) { } } +function checkForPostContentAtRootLevel( blocks ) { + for ( let i = 0; i < blocks.length; i++ ) { + if ( blocks[ i ].name === 'core/post-content' ) { + return true; + } + } + return false; +} + export default function VisualEditor( { styles } ) { const { deviceType, @@ -221,6 +230,26 @@ export default function VisualEditor( { styles } ) { postContentAttributes, ] ); + const hasPostContentAtRootLevel = useMemo( () => { + if ( ! editedPostTemplate?.content && ! editedPostTemplate?.blocks ) { + return false; + } + // When in template editing mode, we can access the blocks directly. + if ( editedPostTemplate?.blocks ) { + return checkForPostContentAtRootLevel( editedPostTemplate?.blocks ); + } + // If there are no blocks, we have to parse the content string. + // Best double-check it's a string otherwise the parse function gets unhappy. + const parseableContent = + typeof editedPostTemplate?.content === 'string' + ? editedPostTemplate?.content + : ''; + + return ( + checkForPostContentAtRootLevel( parse( parseableContent ) ) || false + ); + }, [ editedPostTemplate?.content, editedPostTemplate?.blocks ] ); + const { layout = {}, align = '' } = newestPostContentAttributes || {}; const postContentLayoutClasses = useLayoutClasses( @@ -265,6 +294,11 @@ export default function VisualEditor( { styles } ) { ? postContentLayout : fallbackLayout; + const postEditorLayout = + blockListLayout?.type === 'default' && ! hasPostContentAtRootLevel + ? fallbackLayout + : blockListLayout; + const observeTypingRef = useTypingObserver(); const titleRef = useRef(); useEffect( () => { @@ -337,7 +371,7 @@ export default function VisualEditor( { styles } ) { /> { align && (