@wordpress/edit-site 5.18.1-next.5a1d1283.0 → 5.19.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.18.1-next.5a1d1283.0",
+	"version": "5.19.1",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,44 +27,44 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.41.1-next.5a1d1283.0",
-		"@wordpress/api-fetch": "^6.38.1-next.5a1d1283.0",
-		"@wordpress/block-editor": "^12.9.1-next.5a1d1283.0",
-		"@wordpress/block-library": "^8.18.1-next.5a1d1283.0",
-		"@wordpress/blocks": "^12.18.1-next.5a1d1283.0",
-		"@wordpress/commands": "^0.12.1-next.5a1d1283.0",
-		"@wordpress/components": "^26.0.1-next.5a1d1283.0",
-		"@wordpress/compose": "^6.18.1-next.5a1d1283.0",
-		"@wordpress/core-commands": "^0.10.1-next.5a1d1283.0",
-		"@wordpress/core-data": "^6.18.1-next.5a1d1283.0",
-		"@wordpress/data": "^9.11.1-next.5a1d1283.0",
-		"@wordpress/date": "^4.41.1-next.5a1d1283.0",
-		"@wordpress/deprecated": "^3.41.1-next.5a1d1283.0",
-		"@wordpress/dom": "^3.41.1-next.5a1d1283.0",
-		"@wordpress/editor": "^13.18.1-next.5a1d1283.0",
-		"@wordpress/element": "^5.18.1-next.5a1d1283.0",
-		"@wordpress/escape-html": "^2.41.1-next.5a1d1283.0",
-		"@wordpress/hooks": "^3.41.1-next.5a1d1283.0",
-		"@wordpress/html-entities": "^3.41.1-next.5a1d1283.0",
-		"@wordpress/i18n": "^4.41.1-next.5a1d1283.0",
-		"@wordpress/icons": "^9.32.1-next.5a1d1283.0",
-		"@wordpress/interface": "^5.18.1-next.5a1d1283.0",
-		"@wordpress/keyboard-shortcuts": "^4.18.1-next.5a1d1283.0",
-		"@wordpress/keycodes": "^3.41.1-next.5a1d1283.0",
-		"@wordpress/media-utils": "^4.32.1-next.5a1d1283.0",
-		"@wordpress/notices": "^4.9.1-next.5a1d1283.0",
-		"@wordpress/patterns": "^1.2.1-next.5a1d1283.0",
-		"@wordpress/plugins": "^6.9.1-next.5a1d1283.0",
-		"@wordpress/preferences": "^3.18.1-next.5a1d1283.0",
-		"@wordpress/primitives": "^3.39.1-next.5a1d1283.0",
-		"@wordpress/private-apis": "^0.23.1-next.5a1d1283.0",
-		"@wordpress/reusable-blocks": "^4.18.1-next.5a1d1283.0",
-		"@wordpress/router": "^0.10.1-next.5a1d1283.0",
-		"@wordpress/style-engine": "^1.24.1-next.5a1d1283.0",
-		"@wordpress/url": "^3.42.1-next.5a1d1283.0",
-		"@wordpress/viewport": "^5.18.1-next.5a1d1283.0",
-		"@wordpress/widgets": "^3.18.1-next.5a1d1283.0",
-		"@wordpress/wordcount": "^3.41.1-next.5a1d1283.0",
+		"@wordpress/a11y": "^3.42.1",
+		"@wordpress/api-fetch": "^6.39.1",
+		"@wordpress/block-editor": "^12.10.1",
+		"@wordpress/block-library": "^8.19.1",
+		"@wordpress/blocks": "^12.19.1",
+		"@wordpress/commands": "^0.13.1",
+		"@wordpress/components": "^25.8.1",
+		"@wordpress/compose": "^6.19.1",
+		"@wordpress/core-commands": "^0.11.1",
+		"@wordpress/core-data": "^6.19.1",
+		"@wordpress/data": "^9.12.1",
+		"@wordpress/date": "^4.42.1",
+		"@wordpress/deprecated": "^3.42.1",
+		"@wordpress/dom": "^3.42.1",
+		"@wordpress/editor": "^13.19.1",
+		"@wordpress/element": "^5.19.1",
+		"@wordpress/escape-html": "^2.42.1",
+		"@wordpress/hooks": "^3.42.1",
+		"@wordpress/html-entities": "^3.42.1",
+		"@wordpress/i18n": "^4.42.1",
+		"@wordpress/icons": "^9.33.1",
+		"@wordpress/interface": "^5.19.1",
+		"@wordpress/keyboard-shortcuts": "^4.19.1",
+		"@wordpress/keycodes": "^3.42.1",
+		"@wordpress/media-utils": "^4.33.1",
+		"@wordpress/notices": "^4.10.1",
+		"@wordpress/patterns": "^1.3.1",
+		"@wordpress/plugins": "^6.10.1",
+		"@wordpress/preferences": "^3.19.1",
+		"@wordpress/primitives": "^3.40.1",
+		"@wordpress/private-apis": "^0.24.1",
+		"@wordpress/reusable-blocks": "^4.19.1",
+		"@wordpress/router": "^0.11.1",
+		"@wordpress/style-engine": "^1.25.1",
+		"@wordpress/url": "^3.43.1",
+		"@wordpress/viewport": "^5.19.1",
+		"@wordpress/widgets": "^3.19.1",
+		"@wordpress/wordcount": "^3.42.1",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
@@ -84,5 +84,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "fa0b66987dab5a15f38663e06036d09bccffaa4b"
+	"gitHead": "4987d16acb5c41b62704dc4f88225acb97ddd698"
 }

package/src/components/add-new-pattern/index.js

@@ -2,12 +2,16 @@
  * WordPress dependencies
  */
 import { DropdownMenu } from '@wordpress/components';
-import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { useState, useRef } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
 import { plus, symbol, symbolFilled } from '@wordpress/icons';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns';
+import {
+	privateApis as editPatternsPrivateApis,
+	store as patternsStore,
+} from '@wordpress/patterns';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -16,12 +20,19 @@ import CreateTemplatePartModal from '../create-template-part-modal';
 import SidebarButton from '../sidebar-button';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
+import {
+	PATTERN_TYPES,
+	PATTERN_DEFAULT_CATEGORY,
+	TEMPLATE_PART_POST_TYPE,
+} from '../../utils/constants';
+import usePatternCategories from '../sidebar-navigation-screen-patterns/use-pattern-categories';
 
-const { useHistory } = unlock( routerPrivateApis );
+const { useHistory, useLocation } = unlock( routerPrivateApis );
 const { CreatePatternModal } = unlock( editPatternsPrivateApis );
 
 export default function AddNewPattern() {
 	const history = useHistory();
+	const { params } = useLocation();
 	const [ showPatternModal, setShowPatternModal ] = useState( false );
 	const [ showTemplatePartModal, setShowTemplatePartModal ] =
 		useState( false );
@@ -29,14 +40,19 @@ export default function AddNewPattern() {
 		const settings = select( editSiteStore ).getSettings();
 		return !! settings.supportsTemplatePartsMode;
 	}, [] );
+	const { createPatternFromFile } = unlock( useDispatch( patternsStore ) );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+	const patternUploadInputRef = useRef();
+	const { patternCategories } = usePatternCategories();
 
 	function handleCreatePattern( { pattern, categoryId } ) {
 		setShowPatternModal( false );
 
 		history.push( {
 			postId: pattern.id,
-			postType: 'wp_block',
-			categoryType: 'wp_block',
+			postType: PATTERN_TYPES.user,
+			categoryType: PATTERN_TYPES.user,
 			categoryId,
 			canvas: 'edit',
 		} );
@@ -48,7 +64,7 @@ export default function AddNewPattern() {
 		// Navigate to the created template part editor.
 		history.push( {
 			postId: templatePart.id,
-			postType: 'wp_template_part',
+			postType: TEMPLATE_PART_POST_TYPE,
 			canvas: 'edit',
 		} );
 	}
@@ -76,6 +92,14 @@ export default function AddNewPattern() {
 		} );
 	}
 
+	controls.push( {
+		icon: symbol,
+		onClick: () => {
+			patternUploadInputRef.current.click();
+		},
+		title: __( 'Import pattern from JSON' ),
+	} );
+
 	return (
 		<>
 			<DropdownMenu
@@ -101,6 +125,60 @@ export default function AddNewPattern() {
 					onError={ handleError }
 				/>
 			) }
+
+			<input
+				type="file"
+				accept=".json"
+				hidden
+				ref={ patternUploadInputRef }
+				onChange={ async ( event ) => {
+					const file = event.target.files?.[ 0 ];
+					if ( ! file ) return;
+					try {
+						const currentCategoryId =
+							params.categoryType !== TEMPLATE_PART_POST_TYPE &&
+							patternCategories.find(
+								( category ) =>
+									category.name === params.categoryId
+							)?.id;
+						const pattern = await createPatternFromFile(
+							file,
+							currentCategoryId
+								? [ currentCategoryId ]
+								: undefined
+						);
+
+						// Navigate to the All patterns category for the newly created pattern
+						// if we're not on that page already.
+						if ( ! currentCategoryId ) {
+							history.push( {
+								path: `/patterns`,
+								categoryType: PATTERN_TYPES.theme,
+								categoryId: PATTERN_DEFAULT_CATEGORY,
+							} );
+						}
+
+						createSuccessNotice(
+							sprintf(
+								// translators: %s: The imported pattern's title.
+								__( 'Imported "%s" from JSON.' ),
+								pattern.title.raw
+							),
+							{
+								type: 'snackbar',
+								id: 'import-pattern-success',
+							}
+						);
+					} catch ( err ) {
+						createErrorNotice( err.message, {
+							type: 'snackbar',
+							id: 'import-pattern-error',
+						} );
+					} finally {
+						event.target.value = '';
+					}
+				} }
+			/>
 		</>
 	);
 }

package/src/components/add-new-template/index.js

@@ -8,9 +8,10 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import NewTemplate from './new-template';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 export default function AddNewTemplate( {
-	templateType = 'wp_template',
+	templateType = TEMPLATE_POST_TYPE,
 	...props
 } ) {
 	const postType = useSelect(
@@ -22,7 +23,7 @@ export default function AddNewTemplate( {
 		return null;
 	}
 
-	if ( templateType === 'wp_template' ) {
+	if ( templateType === TEMPLATE_POST_TYPE ) {
 		return <NewTemplate { ...props } postType={ postType } />;
 	}
 

package/src/components/add-new-template/new-template.js

@@ -42,6 +42,11 @@ import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+
 /**
  * Internal dependencies
  */
@@ -190,7 +195,7 @@ export default function NewTemplate( {
 			const { title, description, slug } = template;
 			const newTemplate = await saveEntityRecord(
 				'postType',
-				'wp_template',
+				TEMPLATE_POST_TYPE,
 				{
 					description,
 					// Slugs need to be strings, so this is for template `404`

package/src/components/add-new-template/utils.js

@@ -9,6 +9,11 @@ import { useMemo, useCallback } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { blockMeta, post, archive } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+
 /**
  * @typedef IHasNameAndId
  * @property {string|number} id   The entity's id.
@@ -48,9 +53,13 @@ export const mapToIHasNameAndId = ( entities, path ) => {
 export const useExistingTemplates = () => {
 	return useSelect(
 		( select ) =>
-			select( coreStore ).getEntityRecords( 'postType', 'wp_template', {
-				per_page: -1,
-			} ),
+			select( coreStore ).getEntityRecords(
+				'postType',
+				TEMPLATE_POST_TYPE,
+				{
+					per_page: -1,
+				}
+			),
 		[]
 	);
 };

package/src/components/app/index.js

@@ -3,7 +3,6 @@
  */
 import { SlotFillProvider } from '@wordpress/components';
 import { UnsavedChangesWarning } from '@wordpress/editor';
-import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
 import { store as noticesStore } from '@wordpress/notices';
 import { useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
@@ -35,16 +34,14 @@ export default function App() {
 	}
 
 	return (
-		<ShortcutProvider style={ { height: '100%' } }>
-			<SlotFillProvider>
-				<GlobalStylesProvider>
-					<UnsavedChangesWarning />
-					<RouterProvider>
-						<Layout />
-						<PluginArea onError={ onPluginAreaError } />
-					</RouterProvider>
-				</GlobalStylesProvider>
-			</SlotFillProvider>
-		</ShortcutProvider>
+		<SlotFillProvider>
+			<GlobalStylesProvider>
+				<UnsavedChangesWarning />
+				<RouterProvider>
+					<Layout />
+					<PluginArea onError={ onPluginAreaError } />
+				</RouterProvider>
+			</GlobalStylesProvider>
+		</SlotFillProvider>
 	);
 }

package/src/components/block-editor/back-button.js

@@ -9,6 +9,10 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
+import {
+	TEMPLATE_PART_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+} from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
@@ -16,8 +20,8 @@ const { useLocation, useHistory } = unlock( routerPrivateApis );
 function BackButton() {
 	const location = useLocation();
 	const history = useHistory();
-	const isTemplatePart = location.params.postType === 'wp_template_part';
-	const isNavigationMenu = location.params.postType === 'wp_navigation';
+	const isTemplatePart = location.params.postType === TEMPLATE_PART_POST_TYPE;
+	const isNavigationMenu = location.params.postType === NAVIGATION_POST_TYPE;
 	const previousTemplateId = location.state?.fromTemplateId;
 
 	const isFocusMode = isTemplatePart || isNavigationMenu;

package/src/components/block-editor/block-editor-provider/default-block-editor-provider.js

@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityBlockEditor } from '@wordpress/core-data';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+import useSiteEditorSettings from '../use-site-editor-settings';
+import usePageContentBlocks from './use-page-content-blocks';
+
+const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
+
+const noop = () => {};
+
+/**
+ * The default block editor provider for the site editor. Typically used when
+ * the post type is `'wp_template_part'` or `'wp_template'` and allows editing
+ * of the template and its nested entities.
+ *
+ * If the page content focus type is `'hideTemplate'`, the provider will provide
+ * a set of page content blocks wrapped in a container that, together,
+ * mimic the look and feel of the post editor and
+ * allow editing of the page content only.
+ *
+ * @param {Object}    props
+ * @param {WPElement} props.children
+ */
+export default function DefaultBlockEditorProvider( { children } ) {
+	const settings = useSiteEditorSettings();
+
+	const { templateType, isTemplateHidden } = useSelect( ( select ) => {
+		const { getEditedPostType } = select( editSiteStore );
+		const { getPageContentFocusType, getCanvasMode } = unlock(
+			select( editSiteStore )
+		);
+		return {
+			templateType: getEditedPostType(),
+			isTemplateHidden:
+				getCanvasMode() === 'edit' &&
+				getPageContentFocusType() === 'hideTemplate',
+			canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
+		};
+	}, [] );
+
+	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
+		'postType',
+		templateType
+	);
+	const pageContentBlock = usePageContentBlocks( blocks, isTemplateHidden );
+	return (
+		<ExperimentalBlockEditorProvider
+			settings={ settings }
+			value={
+				isTemplateHidden && pageContentBlock.length
+					? pageContentBlock
+					: blocks
+			}
+			onInput={ isTemplateHidden ? noop : onInput }
+			onChange={ isTemplateHidden ? noop : onChange }
+			useSubRegistry={ false }
+		>
+			{ children }
+		</ExperimentalBlockEditorProvider>
+	);
+}

package/src/components/block-editor/block-editor-provider/index.js

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+import DefaultBlockEditorProvider from './default-block-editor-provider';
+import NavigationBlockEditorProvider from './navigation-block-editor-provider';
+import { NAVIGATION_POST_TYPE } from '../../../utils/constants';
+
+export default function BlockEditorProvider( { children } ) {
+	const entityType = useSelect(
+		( select ) => select( editSiteStore ).getEditedPostType(),
+		[]
+	);
+	if ( entityType === NAVIGATION_POST_TYPE ) {
+		return (
+			<NavigationBlockEditorProvider>
+				{ children }
+			</NavigationBlockEditorProvider>
+		);
+	}
+	return (
+		<DefaultBlockEditorProvider>{ children }</DefaultBlockEditorProvider>
+	);
+}

package/src/components/block-editor/{providers → block-editor-provider}/navigation-block-editor-provider.js

@@ -16,6 +16,7 @@ import { createBlock } from '@wordpress/blocks';
 import { unlock } from '../../../lock-unlock';
 import useSiteEditorSettings from '../use-site-editor-settings';
 import { store as editSiteStore } from '../../../store';
+import { NAVIGATION_POST_TYPE } from '../../../utils/constants';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 
@@ -37,7 +38,7 @@ const noop = () => {};
 export default function NavigationBlockEditorProvider( { children } ) {
 	const defaultSettings = useSiteEditorSettings();
 
-	const navigationMenuId = useEntityId( 'postType', 'wp_navigation' );
+	const navigationMenuId = useEntityId( 'postType', NAVIGATION_POST_TYPE );
 
 	const blocks = useMemo( () => {
 		return [

package/src/components/block-editor/block-editor-provider/test/use-page-content-blocks.js

@@ -0,0 +1,87 @@
+/**
+ * External dependencies
+ */
+import { renderHook } from '@testing-library/react';
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import usePageContentBlocks from '../use-page-content-blocks';
+
+jest.mock( '@wordpress/blocks', () => {
+	return {
+		__esModule: true,
+		...jest.requireActual( '@wordpress/blocks' ),
+		createBlock( name, attributes = {}, innerBlocks = [] ) {
+			return {
+				name,
+				attributes,
+				innerBlocks,
+			};
+		},
+	};
+} );
+
+describe( 'usePageContentBlocks', () => {
+	const blocksList = [
+		createBlock( 'core/group', {}, [
+			createBlock( 'core/post-title' ),
+			createBlock( 'core/post-featured-image' ),
+			createBlock( 'core/query', {}, [
+				createBlock( 'core/post-title' ),
+				createBlock( 'core/post-featured-image' ),
+				createBlock( 'core/post-content' ),
+			] ),
+			createBlock( 'core/post-content' ),
+		] ),
+		createBlock( 'core/query' ),
+		createBlock( 'core/paragraph' ),
+		createBlock( 'core/post-content' ),
+	];
+	it( 'should return empty array if `isPageContentFocused` is `false`', () => {
+		const { result } = renderHook( () =>
+			usePageContentBlocks( blocksList, false )
+		);
+		expect( result.current ).toEqual( [] );
+	} );
+	it( 'should return empty array if `blocks` is undefined', () => {
+		const { result } = renderHook( () =>
+			usePageContentBlocks( undefined, true )
+		);
+		expect( result.current ).toEqual( [] );
+	} );
+	it( 'should return empty array if `blocks` is an empty array', () => {
+		const { result } = renderHook( () => usePageContentBlocks( [], true ) );
+		expect( result.current ).toEqual( [] );
+	} );
+	it( 'should return new block list', () => {
+		const { result } = renderHook( () =>
+			usePageContentBlocks( blocksList, true )
+		);
+		expect( result.current ).toEqual( [
+			{
+				name: 'core/group',
+				attributes: {
+					layout: { type: 'constrained' },
+					style: {
+						spacing: {
+							margin: {
+								top: '4em', // Mimics the post editor.
+							},
+						},
+					},
+				},
+				innerBlocks: [
+					createBlock( 'core/post-title' ),
+					createBlock( 'core/post-featured-image' ),
+					createBlock( 'core/post-content' ),
+					createBlock( 'core/post-content' ),
+				],
+			},
+		] );
+	} );
+} );

package/src/components/block-editor/block-editor-provider/use-page-content-blocks.js

@@ -0,0 +1,77 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { PAGE_CONTENT_BLOCK_TYPES } from '../../../utils/constants';
+
+/**
+ * Helper method to iterate through all blocks, recursing into allowed inner blocks.
+ * Returns a flattened object of transformed blocks.
+ *
+ * @param {Array}    blocks    Blocks to flatten.
+ * @param {Function} transform Transforming function to be applied to each block. If transform returns `undefined`, the block is skipped.
+ *
+ * @return {Array} Flattened object.
+ */
+function flattenBlocks( blocks, transform ) {
+	const result = [];
+	for ( let i = 0; i < blocks.length; i++ ) {
+		// Since the Query Block could contain PAGE_CONTENT_BLOCK_TYPES block types,
+		// we skip it because we only want to render stand-alone page content blocks in the block list.
+		if ( [ 'core/query' ].includes( blocks[ i ].name ) ) {
+			continue;
+		}
+		const transformedBlock = transform( blocks[ i ] );
+		if ( transformedBlock ) {
+			result.push( transformedBlock );
+		}
+		result.push( ...flattenBlocks( blocks[ i ].innerBlocks, transform ) );
+	}
+
+	return result;
+}
+
+/**
+ * Returns a memoized array of blocks that contain only page content blocks,
+ * surrounded by a group block to mimic the post editor.
+ *
+ * @param {Array}   blocks               Block list.
+ * @param {boolean} isPageContentFocused Whether the page content has focus. If `true` return page content blocks. Default `false`.
+ *
+ * @return {Array} Page content blocks.
+ */
+export default function usePageContentBlocks(
+	blocks,
+	isPageContentFocused = false
+) {
+	return useMemo( () => {
+		if ( ! isPageContentFocused || ! blocks || ! blocks.length ) {
+			return [];
+		}
+		return [
+			createBlock(
+				'core/group',
+				{
+					layout: { type: 'constrained' },
+					style: {
+						spacing: {
+							margin: {
+								top: '4em', // Mimics the post editor.
+							},
+						},
+					},
+				},
+				flattenBlocks( blocks, ( block ) => {
+					if ( PAGE_CONTENT_BLOCK_TYPES[ block.name ] ) {
+						return createBlock( block.name );
+					}
+				} )
+			),
+		];
+	}, [ blocks, isPageContentFocused ] );
+}