@wordpress/edit-post 5.0.27 → 6.0.1-next.f435e9e01b.0

package/src/components/preferences-modal/index.js

@@ -55,21 +55,34 @@ import BlockManager from '../block-manager';
 const MODAL_NAME = 'edit-post/preferences';
 const PREFERENCES_MENU = 'preferences-menu';
 
-function NavigationButton( {
-	as: Tag = Button,
-	path,
-	isBack = false,
-	...props
-} ) {
-	const navigator = useNavigator();
+function NavigationButton( { as: Tag = Button, path, ...props } ) {
+	const { goTo } = useNavigator();
+
+	const dataAttrName = 'data-navigator-focusable-id';
+	const dataAttrValue = path;
+
+	const dataAttrCssSelector = `[${ dataAttrName }="${ dataAttrValue }"]`;
+
+	const tagProps = {
+		...props,
+		[ dataAttrName ]: dataAttrValue,
+	};
+
 	return (
 		<Tag
-			onClick={ () => navigator.push( path, { isBack } ) }
-			{ ...props }
+			onClick={ () =>
+				goTo( path, { focusTargetSelector: dataAttrCssSelector } )
+			}
+			{ ...tagProps }
 		/>
 	);
 }
 
+function NavigationBackButton( { as: Tag = Button, ...props } ) {
+	const { goBack } = useNavigator();
+	return <Tag onClick={ goBack } { ...props } />;
+}
+
 export default function PreferencesModal() {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const { closeModal } = useDispatch( editPostStore );
@@ -376,12 +389,10 @@ export default function PreferencesModal() {
 									size="small"
 									gap="6"
 								>
-									<NavigationButton
-										path="/"
+									<NavigationBackButton
 										icon={
 											isRTL() ? chevronRight : chevronLeft
 										}
-										isBack
 										aria-label={ __(
 											'Navigate to the previous view'
 										) }

package/src/components/preferences-modal/test/__snapshots__/index.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PreferencesModal should match snapshot when the modal is active large viewports 1`] = `
-<Modal
+<ForwardRef(Modal)
   className="edit-post-preferences-modal"
   closeLabel="Close"
   onRequestClose={[Function]}
@@ -30,11 +30,11 @@ exports[`PreferencesModal should match snapshot when the modal is active large v
   >
     <Component />
   </TabPanel>
-</Modal>
+</ForwardRef(Modal)>
 `;
 
 exports[`PreferencesModal should match snapshot when the modal is active small viewports 1`] = `
-<Modal
+<ForwardRef(Modal)
   className="edit-post-preferences-modal"
   closeLabel="Close"
   onRequestClose={[Function]}
@@ -187,7 +187,7 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
           justify="left"
           size="small"
         >
-          <NavigationButton
+          <NavigationBackButton
             aria-label="Navigate to the previous view"
             icon={
               <SVG
@@ -199,8 +199,6 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
                 />
               </SVG>
             }
-            isBack={true}
-            path="/"
           />
           <Text
             size="16"
@@ -256,7 +254,7 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
           justify="left"
           size="small"
         >
-          <NavigationButton
+          <NavigationBackButton
             aria-label="Navigate to the previous view"
             icon={
               <SVG
@@ -268,8 +266,6 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
                 />
               </SVG>
             }
-            isBack={true}
-            path="/"
           />
           <Text
             size="16"
@@ -316,7 +312,7 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
           justify="left"
           size="small"
         >
-          <NavigationButton
+          <NavigationBackButton
             aria-label="Navigate to the previous view"
             icon={
               <SVG
@@ -328,8 +324,6 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
                 />
               </SVG>
             }
-            isBack={true}
-            path="/"
           />
           <Text
             size="16"
@@ -386,5 +380,5 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
       </Card>
     </NavigatorScreen>
   </NavigatorProvider>
-</Modal>
+</ForwardRef(Modal)>
 `;

package/src/components/secondary-sidebar/inserter-sidebar.js

@@ -2,13 +2,15 @@
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { Button } from '@wordpress/components';
+import { Button, VisuallyHidden } from '@wordpress/components';
 import { __experimentalLibrary as Library } from '@wordpress/block-editor';
 import { close } from '@wordpress/icons';
 import {
 	useViewportMatch,
 	__experimentalUseDialog as useDialog,
 } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import { useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -28,22 +30,30 @@ export default function InserterSidebar() {
 	const { setIsInserterOpened } = useDispatch( editPostStore );
 
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const TagName = ! isMobileViewport ? VisuallyHidden : 'div';
 	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
 		onClose: () => setIsInserterOpened( false ),
+		focusOnMount: null,
 	} );
 
+	const libraryRef = useRef();
+	useEffect( () => {
+		libraryRef.current.focusSearch();
+	}, [] );
+
 	return (
 		<div
 			ref={ inserterDialogRef }
 			{ ...inserterDialogProps }
 			className="edit-post-editor__inserter-panel"
 		>
-			<div className="edit-post-editor__inserter-panel-header">
+			<TagName className="edit-post-editor__inserter-panel-header">
 				<Button
 					icon={ close }
+					label={ __( 'Close block inserter' ) }
 					onClick={ () => setIsInserterOpened( false ) }
 				/>
-			</div>
+			</TagName>
 			<div className="edit-post-editor__inserter-panel-content">
 				<Library
 					showMostUsedBlocks={ showMostUsedBlocks }
@@ -54,6 +64,7 @@ export default function InserterSidebar() {
 						insertionPoint.insertionIndex
 					}
 					__experimentalFilterValue={ insertionPoint.filterValue }
+					ref={ libraryRef }
 				/>
 			</div>
 		</div>

package/src/components/secondary-sidebar/list-view-sidebar.js

@@ -32,7 +32,8 @@ export default function ListViewSidebar() {
 	}
 
 	const focusOnMountRef = useFocusOnMount( 'firstElement' );
-	const focusReturnRef = useFocusReturn();
+	const headerFocusReturnRef = useFocusReturn();
+	const contentFocusReturnRef = useFocusReturn();
 	function closeOnEscape( event ) {
 		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
 			event.preventDefault();
@@ -50,17 +51,23 @@ export default function ListViewSidebar() {
 			className="edit-post-editor__list-view-panel"
 			onKeyDown={ closeOnEscape }
 		>
-			<div className="edit-post-editor__list-view-panel-header">
-				<strong id={ labelId }>{ __( 'List view' ) }</strong>
+			<div
+				className="edit-post-editor__list-view-panel-header"
+				ref={ headerFocusReturnRef }
+			>
+				<strong id={ labelId }>{ __( 'List View' ) }</strong>
 				<Button
 					icon={ closeSmall }
-					label={ __( 'Close list view sidebar' ) }
+					label={ __( 'Close List View Sidebar' ) }
 					onClick={ () => setIsListViewOpened( false ) }
 				/>
 			</div>
 			<div
 				className="edit-post-editor__list-view-panel-content"
-				ref={ useMergeRefs( [ focusReturnRef, focusOnMountRef ] ) }
+				ref={ useMergeRefs( [
+					contentFocusReturnRef,
+					focusOnMountRef,
+				] ) }
 			>
 				<ListView
 					onSelect={ selectEditorBlock }

package/src/components/secondary-sidebar/style.scss

@@ -16,10 +16,6 @@
 	padding-right: $grid-unit-10;
 	display: flex;
 	justify-content: flex-end;
-
-	@include break-medium() {
-		display: none;
-	}
 }
 
 .edit-post-editor__inserter-panel-content,

package/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PluginPostPublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-post-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z\\"></path></svg></span>My panel title</button></h2>My panel content</div>"`;
+exports[`PluginPostPublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-post-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z\\"></path></svg></span>My panel title</button></h2>My panel content</div>"`;

package/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap

@@ -1,4 +1,4 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PluginPrePublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-pre-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z\\"></path></svg></span>My panel title</button></h2>My panel content</div>"`;
+exports[`PluginPrePublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-pre-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z\\"></path></svg></span>My panel title</button></h2>My panel content</div>"`;
 q

package/src/components/sidebar/post-author/index.js

@@ -10,7 +10,7 @@ import {
 export function PostAuthor() {
 	return (
 		<PostAuthorCheck>
-			<PanelRow>
+			<PanelRow className="edit-post-post-author">
 				<PostAuthorForm />
 			</PanelRow>
 		</PostAuthorCheck>

package/src/components/sidebar/template/actions.js

@@ -25,7 +25,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editPostStore } from '../../../store';
 import { createBlock, serialize } from '@wordpress/blocks';
 
-function PostTemplateActions() {
+function PostTemplateActions( { isPostsPage } ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const [ isBusy, setIsBusy ] = useState( false );
 	const [ title, setTitle ] = useState( '' );
@@ -128,12 +128,17 @@ function PostTemplateActions() {
 						{ __( 'Edit' ) }
 					</Button>
 				) }
-				<Button variant="link" onClick={ () => setIsModalOpen( true ) }>
-					{
-						/* translators: button to create a new template */
-						_x( 'New', 'action' )
-					}
-				</Button>
+				{ ! isPostsPage && (
+					<Button
+						variant="link"
+						onClick={ () => setIsModalOpen( true ) }
+					>
+						{
+							/* translators: button to create a new template */
+							_x( 'New', 'action' )
+						}
+					</Button>
+				) }
 			</div>
 			{ isModalOpen && (
 				<Modal

package/src/components/sidebar/template/index.js

@@ -8,7 +8,7 @@ import { partial, isEmpty, map, fromPairs } from 'lodash';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
-import { PanelBody, SelectControl } from '@wordpress/components';
+import { Notice, PanelBody, SelectControl } from '@wordpress/components';
 import { store as editorStore } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
@@ -28,6 +28,7 @@ export function TemplatePanel() {
 	const {
 		isEnabled,
 		isOpened,
+		isPostsPage,
 		selectedTemplate,
 		availableTemplates,
 		fetchedTemplates,
@@ -44,33 +45,36 @@ export function TemplatePanel() {
 		const {
 			getEditedPostAttribute,
 			getEditorSettings,
+			getCurrentPostId,
 			getCurrentPostType,
 		} = select( editorStore );
-		const { getPostType, getEntityRecords, canUser } = select( coreStore );
+		const {
+			getPostType,
+			getEntityRecord,
+			getEntityRecords,
+			canUser,
+		} = select( coreStore );
+
+		const currentPostId = getCurrentPostId();
 		const currentPostType = getCurrentPostType();
+		const settings = getEntityRecord( 'root', 'site' );
 		const _isViewable = getPostType( currentPostType )?.viewable ?? false;
 		const _supportsTemplateMode =
 			select( editorStore ).getEditorSettings().supportsTemplateMode &&
 			_isViewable;
 
-		const wpTemplates = getEntityRecords( 'postType', 'wp_template', {
+		const templateRecords = getEntityRecords( 'postType', 'wp_template', {
 			post_type: currentPostType,
 			per_page: -1,
 		} );
 
-		const newAvailableTemplates = fromPairs(
-			( wpTemplates || [] ).map( ( { slug, title } ) => [
-				slug,
-				title.rendered,
-			] )
-		);
-
 		return {
 			isEnabled: isEditorPanelEnabled( PANEL_NAME ),
 			isOpened: isEditorPanelOpened( PANEL_NAME ),
+			isPostsPage: currentPostId === settings?.page_for_posts,
 			selectedTemplate: getEditedPostAttribute( 'template' ),
 			availableTemplates: getEditorSettings().availableTemplates,
-			fetchedTemplates: newAvailableTemplates,
+			fetchedTemplates: templateRecords,
 			template: _supportsTemplateMode && getEditedPostTemplate(),
 			isViewable: _isViewable,
 			supportsTemplateMode: _supportsTemplateMode,
@@ -81,7 +85,12 @@ export function TemplatePanel() {
 	const templates = useMemo( () => {
 		return {
 			...availableTemplates,
-			...fetchedTemplates,
+			...fromPairs(
+				( fetchedTemplates ?? [] ).map( ( { slug, title } ) => [
+					slug,
+					title.rendered,
+				] )
+			),
 		};
 	}, [ availableTemplates, fetchedTemplates ] );
 
@@ -114,25 +123,40 @@ export function TemplatePanel() {
 			opened={ isOpened }
 			onToggle={ onTogglePanel }
 		>
-			<SelectControl
-				hideLabelFromVision
-				label={ __( 'Template:' ) }
-				value={
-					Object.keys( templates ).includes( selectedTemplate )
-						? selectedTemplate
-						: ''
-				}
-				onChange={ ( templateSlug ) => {
-					editPost( {
-						template: templateSlug || '',
-					} );
-				} }
-				options={ map( templates, ( templateName, templateSlug ) => ( {
-					value: templateSlug,
-					label: templateName,
-				} ) ) }
-			/>
-			{ canUserCreate && <PostTemplateActions /> }
+			{ isPostsPage ? (
+				<Notice
+					className="edit-post-template__notice"
+					status="warning"
+					isDismissible={ false }
+				>
+					{ __( 'The posts page template cannot be changed.' ) }
+				</Notice>
+			) : (
+				<SelectControl
+					hideLabelFromVision
+					label={ __( 'Template:' ) }
+					value={
+						Object.keys( templates ).includes( selectedTemplate )
+							? selectedTemplate
+							: ''
+					}
+					onChange={ ( templateSlug ) => {
+						editPost( {
+							template: templateSlug || '',
+						} );
+					} }
+					options={ map(
+						templates,
+						( templateName, templateSlug ) => ( {
+							value: templateSlug,
+							label: templateName,
+						} )
+					) }
+				/>
+			) }
+			{ canUserCreate && (
+				<PostTemplateActions isPostsPage={ isPostsPage } />
+			) }
 		</PanelBody>
 	);
 }

package/src/components/sidebar/template/style.scss

@@ -28,6 +28,14 @@
 	}
 }
 
+.edit-post-template__notice {
+	margin: 0 0 $grid-unit-10 0;
+
+	.components-notice__content {
+		margin: 0;
+	}
+}
+
 .edit-post-template__actions {
 	button:not(:last-child) {
 		margin-right: $grid-unit-10;

package/src/components/visual-editor/index.js

@@ -22,7 +22,6 @@ import {
 	__unstableUseTypingObserver as useTypingObserver,
 	__unstableBlockSettingsMenuFirstItem,
 	__experimentalUseResizeCanvas as useResizeCanvas,
-	__unstableUseCanvasClickRedirect as useCanvasClickRedirect,
 	__unstableEditorStyles as EditorStyles,
 	useSetting,
 	__experimentalLayoutStyle as LayoutStyle,
@@ -43,7 +42,14 @@ import { __ } from '@wordpress/i18n';
 import BlockInspectorButton from './block-inspector-button';
 import { store as editPostStore } from '../../store';
 
-function MaybeIframe( { children, contentRef, shouldIframe, styles, style } ) {
+function MaybeIframe( {
+	children,
+	contentRef,
+	shouldIframe,
+	styles,
+	assets,
+	style,
+} ) {
 	const ref = useMouseMoveTypingReset();
 
 	if ( ! shouldIframe ) {
@@ -65,6 +71,7 @@ function MaybeIframe( { children, contentRef, shouldIframe, styles, style } ) {
 	return (
 		<Iframe
 			head={ <EditorStyles styles={ styles } /> }
+			assets={ assets }
 			ref={ ref }
 			contentRef={ contentRef }
 			style={ { width: '100%', height: '100%', display: 'block' } }
@@ -107,9 +114,12 @@ export default function VisualEditor( { styles } ) {
 		( select ) => select( editPostStore ).hasMetaBoxes(),
 		[]
 	);
-	const themeSupportsLayout = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings().supportsLayout;
+	const { themeSupportsLayout, assets } = useSelect( ( select ) => {
+		const _settings = select( blockEditorStore ).getSettings();
+		return {
+			themeSupportsLayout: _settings.supportsLayout,
+			assets: _settings.__unstableResolvedAssets,
+		};
 	}, [] );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 	const { setIsEditingTemplate } = useDispatch( editPostStore );
@@ -153,7 +163,6 @@ export default function VisualEditor( { styles } ) {
 	const contentRef = useMergeRefs( [
 		ref,
 		useClipboardHandler(),
-		useCanvasClickRedirect(),
 		useTypewriter(),
 		useTypingObserver(),
 		useBlockSelectionClearer(),
@@ -218,6 +227,7 @@ export default function VisualEditor( { styles } ) {
 						}
 						contentRef={ contentRef }
 						styles={ styles }
+						assets={ assets }
 						style={ { paddingBottom } }
 					>
 						{ themeSupportsLayout && ! isTemplateMode && (

package/src/components/visual-editor/style.scss

@@ -66,6 +66,7 @@
 	width: 100%;
 	height: 100%;
 	position: relative;
+	box-sizing: border-box;
 	display: flex;
 
 	// This is necessary for older browsers due to their flex height interpretation.

package/src/components/welcome-guide/style.scss

@@ -1,4 +1,5 @@
-.edit-post-welcome-guide {
+.edit-post-welcome-guide,
+.edit-template-welcome-guide {
 	width: 312px;
 
 	&__image {
@@ -31,3 +32,9 @@
 		vertical-align: text-top;
 	}
 }
+
+.edit-template-welcome-guide {
+	.components-button svg {
+		fill: $white;
+	}
+}

package/src/components/welcome-guide/template.js

@@ -16,7 +16,7 @@ export default function WelcomeGuideTemplate() {
 
 	return (
 		<Guide
-			className="edit-post-welcome-guide"
+			className="edit-template-welcome-guide"
 			contentLabel={ __( 'Welcome to the template editor' ) }
 			finishButtonText={ __( 'Get started' ) }
 			onFinish={ () => toggleFeature( 'welcomeGuideTemplate' ) }

package/src/editor.js

@@ -15,17 +15,15 @@ import {
 	store as editorStore,
 } from '@wordpress/editor';
 import { StrictMode, useMemo } from '@wordpress/element';
-import { KeyboardShortcuts, SlotFillProvider } from '@wordpress/components';
+import { SlotFillProvider } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
  */
-import preventEventDiscovery from './prevent-event-discovery';
 import Layout from './components/layout';
 import EditorInitialization from './components/editor-initialization';
-import EditPostSettings from './components/edit-post-settings';
 import { store as editPostStore } from './store';
 
 function Editor( {
@@ -127,6 +125,9 @@ function Editor( {
 			// This is marked as experimental to give time for the quick inserter to mature.
 			__experimentalSetIsInserterOpened: setIsInserterOpened,
 			keepCaretInsideBlock,
+			// Keep a reference of the `allowedBlockTypes` from the server to handle use cases
+			// where we need to differentiate if a block is disabled by the user or some plugin.
+			defaultAllowedBlockTypes: settings.allowedBlockTypes,
 		};
 
 		// Omit hidden block types if exists and non-empty.
@@ -186,29 +187,24 @@ function Editor( {
 	return (
 		<StrictMode>
 			<ShortcutProvider>
-				<EditPostSettings.Provider value={ settings }>
-					<SlotFillProvider>
-						<EditorProvider
-							settings={ editorSettings }
-							post={ post }
-							initialEdits={ initialEdits }
-							useSubRegistry={ false }
-							__unstableTemplate={
-								isTemplateMode ? template : undefined
-							}
-							{ ...props }
-						>
-							<ErrorBoundary onError={ onError }>
-								<EditorInitialization postId={ postId } />
-								<Layout styles={ styles } />
-								<KeyboardShortcuts
-									shortcuts={ preventEventDiscovery }
-								/>
-							</ErrorBoundary>
-							<PostLockedModal />
-						</EditorProvider>
-					</SlotFillProvider>
-				</EditPostSettings.Provider>
+				<SlotFillProvider>
+					<EditorProvider
+						settings={ editorSettings }
+						post={ post }
+						initialEdits={ initialEdits }
+						useSubRegistry={ false }
+						__unstableTemplate={
+							isTemplateMode ? template : undefined
+						}
+						{ ...props }
+					>
+						<ErrorBoundary onError={ onError }>
+							<EditorInitialization postId={ postId } />
+							<Layout styles={ styles } />
+						</ErrorBoundary>
+						<PostLockedModal />
+					</EditorProvider>
+				</SlotFillProvider>
 			</ShortcutProvider>
 		</StrictMode>
 	);

package/src/index.js

@@ -118,7 +118,7 @@ export function initializeEditor(
 
 	dispatch( blocksStore ).__experimentalReapplyBlockTypeFilters();
 	registerCoreBlocks();
-	if ( process.env.GUTENBERG_PHASE === 2 ) {
+	if ( process.env.IS_GUTENBERG_PLUGIN ) {
 		__experimentalRegisterExperimentalCoreBlocks( {
 			enableFSEBlocks: settings.__unstableEnableFullSiteEditingBlocks,
 		} );