@wordpress/edit-site 4.19.0 → 5.0.0

package/src/components/block-editor/resizable-editor.js

@@ -3,20 +3,10 @@
  */
 import { useState, useRef, useCallback } from '@wordpress/element';
 import { ResizableBox } from '@wordpress/components';
-import {
-	__experimentalUseResizeCanvas as useResizeCanvas,
-	__unstableEditorStyles as EditorStyles,
-	__unstableIframe as Iframe,
-	__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-import { useMergeRefs, useResizeObserver } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../store';
 import ResizeHandle from './resize-handle';
 
 // Removes the inline styles in the drag handles.
@@ -32,34 +22,22 @@ const HANDLE_STYLES_OVERRIDE = {
 	left: undefined,
 };
 
-function ResizableEditor( { enableResizing, settings, children, ...props } ) {
-	const [ resizeObserver, sizes ] = useResizeObserver();
-	const { deviceType, isZoomOutMode } = useSelect(
-		( select ) => ( {
-			deviceType:
-				select( editSiteStore ).__experimentalGetPreviewDeviceType(),
-			isZoomOutMode:
-				select( blockEditorStore ).__unstableGetEditorMode() ===
-				'zoom-out',
-		} ),
-		[]
-	);
-	const deviceStyles = useResizeCanvas( deviceType );
+function ResizableEditor( { enableResizing, height, children } ) {
 	const [ width, setWidth ] = useState( '100%' );
-	const iframeRef = useRef();
-	const mouseMoveTypingResetRef = useMouseMoveTypingReset();
-	const ref = useMergeRefs( [ iframeRef, mouseMoveTypingResetRef ] );
-
+	const resizableRef = useRef();
 	const resizeWidthBy = useCallback( ( deltaPixels ) => {
-		if ( iframeRef.current ) {
-			setWidth( iframeRef.current.offsetWidth + deltaPixels );
+		if ( resizableRef.current ) {
+			setWidth( resizableRef.current.offsetWidth + deltaPixels );
 		}
 	}, [] );
 	return (
 		<ResizableBox
+			ref={ ( api ) => {
+				resizableRef.current = api?.resizable;
+			} }
 			size={ {
 				width: enableResizing ? width : '100%',
-				height: enableResizing && sizes.height ? sizes.height : '100%',
+				height: enableResizing && height ? height : '100%',
 			} }
 			onResizeStop={ ( event, direction, element ) => {
 				setWidth( element.style.width );
@@ -96,40 +74,7 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 				right: HANDLE_STYLES_OVERRIDE,
 			} }
 		>
-			<Iframe
-				isZoomedOut={ isZoomOutMode }
-				style={ enableResizing ? {} : deviceStyles }
-				head={
-					<>
-						<EditorStyles styles={ settings.styles } />
-						<style>{
-							// Forming a "block formatting context" to prevent margin collapsing.
-							// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-							`.is-root-container { display: flow-root; }
-							body { position: relative; }`
-						}</style>
-						{ enableResizing && (
-							<style>
-								{
-									// Some themes will have `min-height: 100vh` for the root container,
-									// which isn't a requirement in auto resize mode.
-									`.is-root-container { min-height: 0 !important; }`
-								}
-							</style>
-						) }
-					</>
-				}
-				assets={ settings.__unstableResolvedAssets }
-				ref={ ref }
-				name="editor-canvas"
-				className="edit-site-visual-editor__editor-canvas"
-				{ ...props }
-			>
-				{ /* Filters need to be rendered before children to avoid Safari rendering issues. */ }
-				{ settings.svgFilters }
-				{ resizeObserver }
-				{ children }
-			</Iframe>
+			{ children }
 		</ResizableBox>
 	);
 }

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

@@ -14,12 +14,23 @@
 
 .edit-site-visual-editor {
 	position: relative;
+	height: 100%;
+	display: block;
+	overflow: hidden;
 	background-color: $gray-800;
 	// Centralize the editor horizontally (flex-direction is column).
 	align-items: center;
 
+	iframe {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+
 	&.is-focus-mode {
-		padding: $grid-unit-60;
+		.edit-site-layout.is-full-canvas & {
+			padding: $grid-unit-60;
+		}
 
 		.edit-site-visual-editor__editor-canvas {
 			border-radius: $radius-block-ui;
@@ -38,6 +49,19 @@
 		// Removing this will cancel the bottom margins in the iframe.
 		overflow: auto;
 	}
+
+	/*
+		Temporary to hide the contextual toolbar in view mode.
+		See: https://github.com/WordPress/gutenberg/pull/46298
+		This rule can possibly be removed once the
+		contextual toolbar has been redesigned.
+		See: https://github.com/WordPress/gutenberg/issues/40450
+	*/
+	&.is-view-mode {
+		.block-editor-block-contextual-toolbar {
+			display: none;
+		}
+	}
 }
 
 .edit-site-visual-editor__back-button {

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

@@ -1,8 +1,8 @@
 .edit-site-code-editor {
 	position: relative;
 	width: 100%;
+	min-height: 100%;
 	background-color: $white;
-	flex-grow: 1;
 
 	&__body {
 		width: 100%;

package/src/components/editor/index.js

@@ -1,10 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { useEffect, useMemo } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { Popover, Button, Notice } from '@wordpress/components';
+import { Button, Notice } from '@wordpress/components';
 import { EntityProvider, store as coreStore } from '@wordpress/core-data';
+import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	BlockContextProvider,
 	BlockBreadcrumb,
@@ -21,34 +22,24 @@ import {
 	EntitiesSavedStates,
 } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
-import {
-	ShortcutProvider,
-	store as keyboardShortcutsStore,
-} from '@wordpress/keyboard-shortcuts';
-import { store as preferencesStore } from '@wordpress/preferences';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
  */
-import Header from '../header-edit-mode';
 import { SidebarComplementaryAreaFills } from '../sidebar-edit-mode';
-import NavigationSidebar from '../navigation-sidebar';
 import BlockEditor from '../block-editor';
 import CodeEditor from '../code-editor';
 import KeyboardShortcuts from '../keyboard-shortcuts';
-import URLQueryController from '../url-query-controller';
 import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
 import ListViewSidebar from '../secondary-sidebar/list-view-sidebar';
-import ErrorBoundary from '../error-boundary';
 import WelcomeGuide from '../welcome-guide';
 import { store as editSiteStore } from '../../store';
-import { GlobalStylesRenderer } from './global-styles-renderer';
+import { GlobalStylesRenderer } from '../global-styles-renderer';
 import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
 import useTitle from '../routes/use-title';
 
 const interfaceLabels = {
-	/* translators: accessibility text for the editor top bar landmark region. */
-	header: __( 'Editor top bar' ),
 	/* translators: accessibility text for the editor content landmark region. */
 	body: __( 'Editor content' ),
 	/* translators: accessibility text for the editor settings landmark region. */
@@ -57,286 +48,229 @@ const interfaceLabels = {
 	actions: __( 'Editor publish' ),
 	/* translators: accessibility text for the editor footer landmark region. */
 	footer: __( 'Editor footer' ),
-	/* translators: accessibility text for the navigation sidebar landmark region. */
-	drawer: __( 'Navigation Sidebar' ),
 };
 
-function Editor( { onError } ) {
+export default function Editor() {
 	const {
+		editedPostId,
+		editedPostType,
+		editedPost,
+		context,
+		hasLoadedPost,
+		editorMode,
+		canvasMode,
+		blockEditorMode,
+		isRightSidebarOpen,
 		isInserterOpen,
 		isListViewOpen,
 		isSaveViewOpen,
-		sidebarIsOpened,
-		settings,
-		entityId,
-		templateType,
-		page,
-		template,
-		templateResolved,
-		isNavigationOpen,
 		previousShortcut,
 		nextShortcut,
-		editorMode,
 		showIconLabels,
-		blockEditorMode,
 	} = useSelect( ( select ) => {
 		const {
-			isInserterOpened,
-			isListViewOpened,
-			isSaveViewOpened,
-			getSettings,
 			getEditedPostType,
 			getEditedPostId,
-			getPage,
-			isNavigationOpened,
+			getEditedPostContext,
 			getEditorMode,
+			__unstableGetCanvasMode,
+			isInserterOpened,
+			isListViewOpened,
+			isSaveViewOpened,
 		} = select( editSiteStore );
 		const { hasFinishedResolution, getEntityRecord } = select( coreStore );
 		const { __unstableGetEditorMode } = select( blockEditorStore );
+		const { getAllShortcutKeyCombinations } = select(
+			keyboardShortcutsStore
+		);
+		const { getActiveComplementaryArea } = select( interfaceStore );
 		const postType = getEditedPostType();
 		const postId = getEditedPostId();
 
-		// The currently selected entity to display. Typically template or template part.
+		// The currently selected entity to display.
+		// Typically template or template part in the site editor.
 		return {
-			isInserterOpen: isInserterOpened(),
-			isListViewOpen: isListViewOpened(),
-			isSaveViewOpen: isSaveViewOpened(),
-			sidebarIsOpened: !! select(
-				interfaceStore
-			).getActiveComplementaryArea( editSiteStore.name ),
-			settings: getSettings(),
-			templateType: postType,
-			page: getPage(),
-			template: postId
+			editedPostId: postId,
+			editedPostType: postType,
+			editedPost: postId
 				? getEntityRecord( 'postType', postType, postId )
 				: null,
-			templateResolved: postId
+			context: getEditedPostContext(),
+			hasLoadedPost: postId
 				? hasFinishedResolution( 'getEntityRecord', [
 						'postType',
 						postType,
 						postId,
 				  ] )
 				: false,
-			entityId: postId,
-			isNavigationOpen: isNavigationOpened(),
-			previousShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/edit-site/previous-region' ),
-			nextShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
 			editorMode: getEditorMode(),
+			canvasMode: __unstableGetCanvasMode(),
+			blockEditorMode: __unstableGetEditorMode(),
+			isInserterOpen: isInserterOpened(),
+			isListViewOpen: isListViewOpened(),
+			isSaveViewOpen: isSaveViewOpened(),
+			isRightSidebarOpen: getActiveComplementaryArea(
+				editSiteStore.name
+			),
+			previousShortcut: getAllShortcutKeyCombinations(
+				'core/edit-site/previous-region'
+			),
+			nextShortcut: getAllShortcutKeyCombinations(
+				'core/edit-site/next-region'
+			),
 			showIconLabels: select( preferencesStore ).get(
 				'core/edit-site',
 				'showIconLabels'
 			),
-			blockEditorMode: __unstableGetEditorMode(),
 		};
 	}, [] );
-	const { setPage, setIsInserterOpened, setIsSaveViewOpened } =
+	const { setIsSaveViewOpened, setEditedPostContext } =
 		useDispatch( editSiteStore );
-	const { enableComplementaryArea } = useDispatch( interfaceStore );
 
+	const isViewMode = canvasMode === 'view';
+	const isEditMode = canvasMode === 'edit';
+	const showVisualEditor = isViewMode || editorMode === 'visual';
+	const showBlockBreakcrumb =
+		isEditMode && showVisualEditor && blockEditorMode !== 'zoom-out';
+	const shouldShowInserter = isEditMode && showVisualEditor && isInserterOpen;
+	const shouldShowListView = isEditMode && showVisualEditor && isListViewOpen;
+	const secondarySidebarLabel = isListViewOpen
+		? __( 'List View' )
+		: __( 'Block Library' );
 	const blockContext = useMemo(
 		() => ( {
-			...page?.context,
+			...context,
 			queryContext: [
-				page?.context.queryContext || { page: 1 },
+				context?.queryContext || { page: 1 },
 				( newQueryContext ) =>
-					setPage( {
-						...page,
-						context: {
-							...page?.context,
-							queryContext: {
-								...page?.context.queryContext,
-								...newQueryContext,
-							},
+					setEditedPostContext( {
+						...context,
+						queryContext: {
+							...context?.queryContext,
+							...newQueryContext,
 						},
 					} ),
 			],
 		} ),
-		[ page?.context ]
+		[ context ]
 	);
-
-	useEffect( () => {
-		if ( isNavigationOpen ) {
-			document.body.classList.add( 'is-navigation-sidebar-open' );
-		} else {
-			document.body.classList.remove( 'is-navigation-sidebar-open' );
-		}
-	}, [ isNavigationOpen ] );
-
-	useEffect(
-		function openGlobalStylesOnLoad() {
-			const searchParams = new URLSearchParams( window.location.search );
-			if ( searchParams.get( 'styles' ) === 'open' ) {
-				enableComplementaryArea(
-					'core/edit-site',
-					'edit-site/global-styles'
-				);
-			}
-		},
-		[ enableComplementaryArea ]
-	);
-
-	// Don't render the Editor until the settings are set and loaded.
-	const isReady =
-		settings?.siteUrl &&
-		templateType !== undefined &&
-		entityId !== undefined;
-
-	const secondarySidebarLabel = isListViewOpen
-		? __( 'List View' )
-		: __( 'Block Library' );
-
-	const secondarySidebar = () => {
-		if ( editorMode === 'visual' && isInserterOpen ) {
-			return <InserterSidebar />;
-		}
-		if ( editorMode === 'visual' && isListViewOpen ) {
-			return <ListViewSidebar />;
-		}
-		return null;
-	};
+	const isReady = editedPostType !== undefined && editedPostId !== undefined;
 
 	// Only announce the title once the editor is ready to prevent "Replace"
 	// action in <URlQueryController> from double-announcing.
 	useTitle( isReady && __( 'Editor (beta)' ) );
 
+	if ( ! isReady ) {
+		return null;
+	}
+
 	return (
 		<>
-			<URLQueryController />
-			{ isReady && (
-				<ShortcutProvider>
-					<EntityProvider kind="root" type="site">
-						<EntityProvider
-							kind="postType"
-							type={ templateType }
-							id={ entityId }
-						>
-							<GlobalStylesProvider>
-								<BlockContextProvider value={ blockContext }>
-									<GlobalStylesRenderer />
-									<ErrorBoundary onError={ onError }>
-										<KeyboardShortcuts.Register />
-										<SidebarComplementaryAreaFills />
-										<InterfaceSkeleton
-											labels={ {
-												...interfaceLabels,
-												secondarySidebar:
-													secondarySidebarLabel,
-											} }
-											className={
-												showIconLabels &&
-												'show-icon-labels'
-											}
-											secondarySidebar={ secondarySidebar() }
-											sidebar={
-												sidebarIsOpened && (
-													<ComplementaryArea.Slot scope="core/edit-site" />
-												)
-											}
-											drawer={
-												<NavigationSidebar.Slot />
-											}
-											header={
-												<Header
-													showIconLabels={
-														showIconLabels
+			{ isEditMode && <WelcomeGuide /> }
+			<KeyboardShortcuts.Register />
+			<EntityProvider kind="root" type="site">
+				<EntityProvider
+					kind="postType"
+					type={ editedPostType }
+					id={ editedPostId }
+				>
+					<GlobalStylesProvider>
+						<BlockContextProvider value={ blockContext }>
+							<SidebarComplementaryAreaFills />
+							<InterfaceSkeleton
+								className={
+									showIconLabels && 'show-icon-labels'
+								}
+								notices={ isEditMode && <EditorSnackbars /> }
+								content={
+									<>
+										<GlobalStylesRenderer />
+										<EditorNotices />
+										{ showVisualEditor && editedPost && (
+											<BlockEditor />
+										) }
+										{ editorMode === 'text' &&
+											editedPost && <CodeEditor /> }
+										{ hasLoadedPost && ! editedPost && (
+											<Notice
+												status="warning"
+												isDismissible={ false }
+											>
+												{ __(
+													"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
+												) }
+											</Notice>
+										) }
+										{ isEditMode && <KeyboardShortcuts /> }
+									</>
+								}
+								secondarySidebar={
+									isEditMode &&
+									( ( shouldShowInserter && (
+										<InserterSidebar />
+									) ) ||
+										( shouldShowListView && (
+											<ListViewSidebar />
+										) ) )
+								}
+								sidebar={
+									isEditMode &&
+									isRightSidebarOpen && (
+										<ComplementaryArea.Slot scope="core/edit-site" />
+									)
+								}
+								actions={
+									isEditMode && (
+										<>
+											{ isSaveViewOpen ? (
+												<EntitiesSavedStates
+													close={ () =>
+														setIsSaveViewOpened(
+															false
+														)
 													}
 												/>
-											}
-											notices={ <EditorSnackbars /> }
-											content={
-												<>
-													<EditorNotices />
-													{ editorMode === 'visual' &&
-														template && (
-															<BlockEditor
-																setIsInserterOpen={
-																	setIsInserterOpened
-																}
-															/>
-														) }
-													{ editorMode === 'text' &&
-														template && (
-															<CodeEditor />
-														) }
-													{ templateResolved &&
-														! template &&
-														settings?.siteUrl &&
-														entityId && (
-															<Notice
-																status="warning"
-																isDismissible={
-																	false
-																}
-															>
-																{ __(
-																	"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
-																) }
-															</Notice>
-														) }
-													<KeyboardShortcuts />
-												</>
-											}
-											actions={
-												<>
-													{ isSaveViewOpen ? (
-														<EntitiesSavedStates
-															close={ () =>
-																setIsSaveViewOpened(
-																	false
-																)
-															}
-														/>
-													) : (
-														<div className="edit-site-editor__toggle-save-panel">
-															<Button
-																variant="secondary"
-																className="edit-site-editor__toggle-save-panel-button"
-																onClick={ () =>
-																	setIsSaveViewOpened(
-																		true
-																	)
-																}
-																aria-expanded={
-																	false
-																}
-															>
-																{ __(
-																	'Open save panel'
-																) }
-															</Button>
-														</div>
-													) }
-												</>
-											}
-											footer={
-												blockEditorMode !==
-												'zoom-out' ? (
-													<BlockBreadcrumb
-														rootLabelText={ __(
-															'Template'
+											) : (
+												<div className="edit-site-editor__toggle-save-panel">
+													<Button
+														variant="secondary"
+														className="edit-site-editor__toggle-save-panel-button"
+														onClick={ () =>
+															setIsSaveViewOpened(
+																true
+															)
+														}
+														aria-expanded={ false }
+													>
+														{ __(
+															'Open save panel'
 														) }
-													/>
-												) : undefined
-											}
-											shortcuts={ {
-												previous: previousShortcut,
-												next: nextShortcut,
-											} }
+													</Button>
+												</div>
+											) }
+										</>
+									)
+								}
+								footer={
+									showBlockBreakcrumb && (
+										<BlockBreadcrumb
+											rootLabelText={ __( 'Template' ) }
 										/>
-										<WelcomeGuide />
-										<Popover.Slot />
-									</ErrorBoundary>
-								</BlockContextProvider>
-							</GlobalStylesProvider>
-						</EntityProvider>
-					</EntityProvider>
-				</ShortcutProvider>
-			) }
+									)
+								}
+								shortcuts={ {
+									previous: previousShortcut,
+									next: nextShortcut,
+								} }
+								labels={ {
+									...interfaceLabels,
+									secondarySidebar: secondarySidebarLabel,
+								} }
+							/>
+						</BlockContextProvider>
+					</GlobalStylesProvider>
+				</EntityProvider>
+			</EntityProvider>
 		</>
 	);
 }
-export default Editor;

package/src/components/editor/style.scss

@@ -1,11 +1,3 @@
-html #wpadminbar {
-	display: none;
-}
-
-html.wp-toolbar {
-	padding-top: 0;
-}
-
 .edit-site-editor__toggle-save-panel {
 	box-sizing: border-box;
 	width: $sidebar-width;
@@ -22,20 +14,6 @@ html.wp-toolbar {
 	}
 }
 
-.edit-site-visual-editor {
-	position: relative;
-	height: 100%;
-	display: block;
-	overflow: hidden;
-
-	iframe {
-		display: block;
-		width: 100%;
-		height: 100%;
-		background-color: $white;
-	}
-}
-
 // Adjust the position of the notices
 .edit-site .components-editor-notices__snackbar {
 	position: fixed;