@wordpress/edit-site 4.18.0 → 5.0.0

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

@@ -8,7 +8,11 @@ import classnames from 'classnames';
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useCallback, useMemo, useRef, Fragment } from '@wordpress/element';
-import { useEntityBlockEditor, store as coreStore } from '@wordpress/core-data';
+import {
+	useEntityBlockEditor,
+	__experimentalFetchMedia as fetchMedia,
+	store as coreStore,
+} from '@wordpress/core-data';
 import {
 	BlockList,
 	BlockEditorProvider,
@@ -22,12 +26,15 @@ import {
 	store as blockEditorStore,
 	__unstableBlockNameContext,
 } from '@wordpress/block-editor';
-import { useMergeRefs, useViewportMatch } from '@wordpress/compose';
+import {
+	useMergeRefs,
+	useViewportMatch,
+	useResizeObserver,
+} from '@wordpress/compose';
 import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
 import { listView } from '@wordpress/icons';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -39,6 +46,8 @@ import { store as editSiteStore } from '../../store';
 import BlockInspectorButton from './block-inspector-button';
 import BackButton from './back-button';
 import ResizableEditor from './resizable-editor';
+import EditorCanvas from './editor-canvas';
+import StyleBook from '../style-book';
 
 const LAYOUT = {
 	type: 'default',
@@ -46,29 +55,16 @@ const LAYOUT = {
 	alignments: [],
 };
 
-const NAVIGATION_SIDEBAR_NAME = 'edit-site/navigation-menu';
-
 export default function BlockEditor( { setIsInserterOpen } ) {
-	const {
-		storedSettings,
-		templateType,
-		templateId,
-		page,
-		isNavigationSidebarOpen,
-	} = useSelect(
+	const { storedSettings, templateType, canvasMode } = useSelect(
 		( select ) => {
-			const { getSettings, getEditedPostType, getEditedPostId, getPage } =
+			const { getSettings, getEditedPostType, __unstableGetCanvasMode } =
 				select( editSiteStore );
 
 			return {
 				storedSettings: getSettings( setIsInserterOpen ),
 				templateType: getEditedPostType(),
-				templateId: getEditedPostId(),
-				page: getPage(),
-				isNavigationSidebarOpen:
-					select( interfaceStore ).getActiveComplementaryArea(
-						editSiteStore.name
-					) === NAVIGATION_SIDEBAR_NAME,
+				canvasMode: __unstableGetCanvasMode(),
 			};
 		},
 		[ setIsInserterOpen ]
@@ -131,6 +127,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 
 		return {
 			...restStoredSettings,
+			__unstableFetchMedia: fetchMedia,
 			__experimentalBlockPatterns: blockPatterns,
 			__experimentalBlockPatternCategories: blockPatternCategories,
 		};
@@ -141,44 +138,46 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 		templateType
 	);
 	const { setPage } = useDispatch( editSiteStore );
-	const { enableComplementaryArea, disableComplementaryArea } =
-		useDispatch( interfaceStore );
-	const toggleNavigationSidebar = useCallback( () => {
-		const toggleComplementaryArea = isNavigationSidebarOpen
-			? disableComplementaryArea
-			: enableComplementaryArea;
-		toggleComplementaryArea( editSiteStore.name, NAVIGATION_SIDEBAR_NAME );
-	}, [ isNavigationSidebarOpen ] );
+
 	const contentRef = useRef();
 	const mergedRefs = useMergeRefs( [ contentRef, useTypingObserver() ] );
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
+	const [ resizeObserver, sizes ] = useResizeObserver();
 
 	const isTemplatePart = templateType === 'wp_template_part';
 	const hasBlocks = blocks.length !== 0;
+	const enableResizing =
+		isTemplatePart &&
+		canvasMode !== 'view' &&
+		// Disable resizing in mobile viewport.
+		! isMobileViewport;
+	const isViewMode = canvasMode === 'view';
+
+	// eslint-disable-next-line @wordpress/data-no-store-string-literals
+	const { enableComplementaryArea } = useDispatch( 'core/interface' );
 
 	const NavMenuSidebarToggle = () => (
 		<ToolbarGroup>
 			<ToolbarButton
 				className="components-toolbar__control"
-				label={
-					isNavigationSidebarOpen
-						? __( 'Close list view' )
-						: __( 'Open list view' )
+				label={ __( 'Open navigation list view' ) }
+				onClick={ () =>
+					enableComplementaryArea(
+						'core/edit-site',
+						'edit-site/block-inspector'
+					)
 				}
-				onClick={ toggleNavigationSidebar }
 				icon={ listView }
-				isActive={ isNavigationSidebarOpen }
 			/>
 		</ToolbarGroup>
 	);
 
-	// Conditionally include NavMenu sidebar in Plugin only.
-	// Optimise for dead code elimination.
-	// See https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/feature-flags.md#dead-code-elimination.
 	let MaybeNavMenuSidebarToggle = Fragment;
+	const isOffCanvasNavigationEditorEnabled =
+		window?.__experimentalEnableOffCanvasNavigationEditor === true;
 
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
+	if ( isOffCanvasNavigationEditorEnabled ) {
 		MaybeNavMenuSidebarToggle = NavMenuSidebarToggle;
 	}
 
@@ -196,64 +195,80 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 					( fillProps ) => (
 						<NavigateToLink
 							{ ...fillProps }
-							activePage={ page }
 							onActivePageChange={ setPage }
 						/>
 					),
-					[ page ]
+					[]
 				) }
 			</__experimentalLinkControl.ViewerFill>
 			<SidebarInspectorFill>
 				<BlockInspector />
 			</SidebarInspectorFill>
-			<BlockTools
-				className={ classnames( 'edit-site-visual-editor', {
-					'is-focus-mode': isTemplatePart,
-				} ) }
-				__unstableContentRef={ contentRef }
-				onClick={ ( event ) => {
-					// Clear selected block when clicking on the gray background.
-					if ( event.target === event.currentTarget ) {
-						clearSelectedBlock();
-					}
-				} }
-			>
-				<BlockEditorKeyboardShortcuts.Register />
-				<BackButton />
-				<ResizableEditor
-					// Reinitialize the editor and reset the states when the template changes.
-					key={ templateId }
-					enableResizing={
-						isTemplatePart &&
-						// Disable resizing in mobile viewport.
-						! isMobileViewport
-					}
-					settings={ settings }
-					contentRef={ mergedRefs }
-				>
-					<BlockList
-						className="edit-site-block-editor__block-list wp-site-blocks"
-						__experimentalLayout={ LAYOUT }
-						renderAppender={
-							isTemplatePart && hasBlocks ? false : undefined
-						}
-					/>
-				</ResizableEditor>
-				<__unstableBlockSettingsMenuFirstItem>
-					{ ( { onClose } ) => (
-						<BlockInspectorButton onClick={ onClose } />
-					) }
-				</__unstableBlockSettingsMenuFirstItem>
-				<__unstableBlockToolbarLastItem>
-					<__unstableBlockNameContext.Consumer>
-						{ ( blockName ) =>
-							blockName === 'core/navigation' && (
-								<MaybeNavMenuSidebarToggle />
-							)
-						}
-					</__unstableBlockNameContext.Consumer>
-				</__unstableBlockToolbarLastItem>
-			</BlockTools>
+			{ /* Potentially this could be a generic slot (e.g. EditorCanvas.Slot) if there are other uses for it. */ }
+			<StyleBook.Slot>
+				{ ( [ styleBook ] ) =>
+					styleBook ? (
+						<div className="edit-site-visual-editor is-focus-mode">
+							<ResizableEditor enableResizing>
+								{ styleBook }
+							</ResizableEditor>
+						</div>
+					) : (
+						<BlockTools
+							className={ classnames( 'edit-site-visual-editor', {
+								'is-focus-mode': isTemplatePart || !! styleBook,
+								'is-view-mode': isViewMode,
+							} ) }
+							__unstableContentRef={ contentRef }
+							onClick={ ( event ) => {
+								// Clear selected block when clicking on the gray background.
+								if ( event.target === event.currentTarget ) {
+									clearSelectedBlock();
+								}
+							} }
+						>
+							<BlockEditorKeyboardShortcuts.Register />
+							<BackButton />
+							<ResizableEditor
+								enableResizing={ enableResizing }
+								height={ sizes.height }
+							>
+								<EditorCanvas
+									enableResizing={ enableResizing }
+									settings={ settings }
+									contentRef={ mergedRefs }
+									readonly={ canvasMode === 'view' }
+								>
+									{ resizeObserver }
+									<BlockList
+										className="edit-site-block-editor__block-list wp-site-blocks"
+										__experimentalLayout={ LAYOUT }
+										renderAppender={
+											isTemplatePart && hasBlocks
+												? false
+												: undefined
+										}
+									/>
+								</EditorCanvas>
+							</ResizableEditor>
+							<__unstableBlockSettingsMenuFirstItem>
+								{ ( { onClose } ) => (
+									<BlockInspectorButton onClick={ onClose } />
+								) }
+							</__unstableBlockSettingsMenuFirstItem>
+							<__unstableBlockToolbarLastItem>
+								<__unstableBlockNameContext.Consumer>
+									{ ( blockName ) =>
+										blockName === 'core/navigation' && (
+											<MaybeNavMenuSidebarToggle />
+										)
+									}
+								</__unstableBlockNameContext.Consumer>
+							</__unstableBlockToolbarLastItem>
+						</BlockTools>
+					)
+				}
+			</StyleBook.Slot>
 			<ReusableBlocksMenuItems />
 		</BlockEditorProvider>
 	);

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

@@ -1,29 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { useState, useEffect, useRef, useCallback } from '@wordpress/element';
+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 } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../store';
 import ResizeHandle from './resize-handle';
 
-const DEFAULT_STYLES = {
-	width: '100%',
-	height: '100%',
-};
-
 // Removes the inline styles in the drag handles.
 const HANDLE_STYLES_OVERRIDE = {
 	position: undefined,
@@ -37,72 +22,22 @@ const HANDLE_STYLES_OVERRIDE = {
 	left: undefined,
 };
 
-function ResizableEditor( { enableResizing, settings, children, ...props } ) {
-	const { deviceType, isZoomOutMode } = useSelect(
-		( select ) => ( {
-			deviceType:
-				select( editSiteStore ).__experimentalGetPreviewDeviceType(),
-			isZoomOutMode:
-				select( blockEditorStore ).__unstableGetEditorMode() ===
-				'zoom-out',
-		} ),
-		[]
-	);
-	const deviceStyles = useResizeCanvas( deviceType );
-	const [ width, setWidth ] = useState( DEFAULT_STYLES.width );
-	const [ height, setHeight ] = useState( DEFAULT_STYLES.height );
-	const iframeRef = useRef();
-	const mouseMoveTypingResetRef = useMouseMoveTypingReset();
-	const ref = useMergeRefs( [ iframeRef, mouseMoveTypingResetRef ] );
-
-	useEffect(
-		function autoResizeIframeHeight() {
-			if ( ! iframeRef.current || ! enableResizing ) {
-				return;
-			}
-
-			const iframe = iframeRef.current;
-
-			function setFrameHeight() {
-				setHeight( iframe.contentDocument.body.scrollHeight );
-			}
-
-			let resizeObserver;
-
-			function registerObserver() {
-				resizeObserver?.disconnect();
-
-				resizeObserver = new iframe.contentWindow.ResizeObserver(
-					setFrameHeight
-				);
-
-				// Observe the body, since the `html` element seems to always
-				// have a height of `100%`.
-				resizeObserver.observe( iframe.contentDocument.body );
-				setFrameHeight();
-			}
-
-			iframe.addEventListener( 'load', registerObserver );
-
-			return () => {
-				resizeObserver?.disconnect();
-				iframe.removeEventListener( 'load', registerObserver );
-			};
-		},
-		[ enableResizing, iframeRef.current ]
-	);
-
+function ResizableEditor( { enableResizing, height, children } ) {
+	const [ width, setWidth ] = useState( '100%' );
+	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,
-				height,
+				width: enableResizing ? width : '100%',
+				height: enableResizing && height ? height : '100%',
 			} }
 			onResizeStop={ ( event, direction, element ) => {
 				setWidth( element.style.width );
@@ -139,42 +74,7 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 				right: HANDLE_STYLES_OVERRIDE,
 			} }
 		>
-			<Iframe
-				isZoomedOut={ isZoomOutMode }
-				style={ enableResizing ? { height } : 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; }`
-						}</style>
-						{ enableResizing && (
-							<style>
-								{
-									// Force the <html> and <body>'s heights to fit the content.
-									`html, body { height: -moz-fit-content !important; height: fit-content !important; min-height: 0 !important; }`
-								}
-								{
-									// 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 }
-				{ 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%;