@wordpress/edit-site 5.35.0 → 6.0.0

package/src/components/block-editor/use-editor-iframe-props.js

@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { ENTER, SPACE } from '@wordpress/keycodes';
+import { useState, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { store as editorStore } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+
+export default function useEditorIframeProps() {
+	const { canvasMode, currentPostIsTrashed } = useSelect( ( select ) => {
+		const { getCanvasMode } = unlock( select( editSiteStore ) );
+
+		return {
+			canvasMode: getCanvasMode(),
+			currentPostIsTrashed:
+				select( editorStore ).getCurrentPostAttribute( 'status' ) ===
+				'trash',
+		};
+	}, [] );
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+	const [ isFocused, setIsFocused ] = useState( false );
+
+	useEffect( () => {
+		if ( canvasMode === 'edit' ) {
+			setIsFocused( false );
+		}
+	}, [ canvasMode ] );
+
+	// In view mode, make the canvas iframe be perceived and behave as a button
+	// to switch to edit mode, with a meaningful label and no title attribute.
+	const viewModeIframeProps = {
+		'aria-label': __( 'Edit' ),
+		'aria-disabled': currentPostIsTrashed,
+		title: null,
+		role: 'button',
+		tabIndex: 0,
+		onFocus: () => setIsFocused( true ),
+		onBlur: () => setIsFocused( false ),
+		onKeyDown: ( event ) => {
+			const { keyCode } = event;
+			if (
+				( keyCode === ENTER || keyCode === SPACE ) &&
+				! currentPostIsTrashed
+			) {
+				event.preventDefault();
+				setCanvasMode( 'edit' );
+			}
+		},
+		onClick: () => {
+			setCanvasMode( 'edit' );
+		},
+		onClickCapture: ( event ) => {
+			if ( currentPostIsTrashed ) {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+		},
+		readonly: true,
+	};
+
+	return {
+		className: clsx( 'edit-site-visual-editor__editor-canvas', {
+			'is-focused': isFocused && canvasMode === 'view',
+		} ),
+		...( canvasMode === 'view' ? viewModeIframeProps : {} ),
+	};
+}

package/src/components/canvas-loader/index.js

@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import {
+	privateApis as componentsPrivateApis,
+	ProgressBar,
+} from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
@@ -12,7 +15,7 @@ import { useSelect } from '@wordpress/data';
 import { unlock } from '../../lock-unlock';
 import { useStylesPreviewColors } from '../global-styles/hooks';
 
-const { ProgressBar, Theme } = unlock( componentsPrivateApis );
+const { Theme } = unlock( componentsPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 export default function CanvasLoader( { id } ) {

package/src/components/dataviews-actions/index.js

@@ -9,6 +9,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
+import { PATTERN_TYPES } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 
 const { useHistory } = unlock( routerPrivateApis );
@@ -21,8 +22,12 @@ export const useEditPostAction = () => {
 			label: __( 'Edit' ),
 			isPrimary: true,
 			icon: edit,
-			isEligible( { status } ) {
-				return status !== 'trash';
+			isEligible( post ) {
+				if ( post.status === 'trash' ) {
+					return false;
+				}
+				// It's eligible for all post types except theme patterns.
+				return post.type !== PATTERN_TYPES.theme;
 			},
 			callback( items ) {
 				const post = items[ 0 ];

package/src/components/editor/index.js

@@ -7,42 +7,24 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import {
-	Notice,
-	__unstableAnimatePresence as AnimatePresence,
-	__unstableMotion as motion,
-} from '@wordpress/components';
-import {
-	useInstanceId,
-	useViewportMatch,
-	useReducedMotion,
-} from '@wordpress/compose';
-import { store as preferencesStore } from '@wordpress/preferences';
-import {
-	BlockBreadcrumb,
-	BlockToolbar,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { Notice } from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
 import {
 	EditorKeyboardShortcutsRegister,
-	EditorKeyboardShortcuts,
-	EditorNotices,
-	EditorSnackbars,
 	privateApis as editorPrivateApis,
 	store as editorStore,
 } from '@wordpress/editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreDataStore } from '@wordpress/core-data';
 import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library';
-import { useState, useCallback } from '@wordpress/element';
+import { useCallback, useMemo } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
-import CodeEditor from '../code-editor';
-import Header from '../header-edit-mode';
 import WelcomeGuide from '../welcome-guide';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from '../global-styles-renderer';
@@ -50,83 +32,52 @@ import useTitle from '../routes/use-title';
 import CanvasLoader from '../canvas-loader';
 import { unlock } from '../../lock-unlock';
 import useEditedEntityRecord from '../use-edited-entity-record';
-import PatternModal from '../pattern-modal';
 import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants';
-import SiteEditorCanvas from '../block-editor/site-editor-canvas';
 import TemplatePartConverter from '../template-part-converter';
 import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings';
 import PluginTemplateSettingPanel from '../plugin-template-setting-panel';
 import GlobalStylesSidebar from '../global-styles-sidebar';
+import { isPreviewingTheme } from '../../utils/is-previewing-theme';
+import {
+	getEditorCanvasContainerTitle,
+	useHasEditorCanvasContainer,
+} from '../editor-canvas-container';
+import SaveButton from '../save-button';
+import SiteEditorMoreMenu from '../more-menu';
+import useEditorIframeProps from '../block-editor/use-editor-iframe-props';
 
 const {
+	EditorInterface,
 	ExperimentalEditorProvider: EditorProvider,
-	InserterSidebar,
-	ListViewSidebar,
-	InterfaceSkeleton,
-	ComplementaryArea,
-	interfaceStore,
-	SavePublishPanels,
 	Sidebar,
 } = unlock( editorPrivateApis );
 const { useHistory } = unlock( routerPrivateApis );
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 
-const interfaceLabels = {
-	/* translators: accessibility text for the editor content landmark region. */
-	body: __( 'Editor content' ),
-	/* translators: accessibility text for the editor settings landmark region. */
-	sidebar: __( 'Editor settings' ),
-	/* translators: accessibility text for the editor publish landmark region. */
-	actions: __( 'Editor publish' ),
-	/* translators: accessibility text for the editor footer landmark region. */
-	footer: __( 'Editor footer' ),
-	/* translators: accessibility text for the editor header landmark region. */
-	header: __( 'Editor top bar' ),
-};
-
-const ANIMATION_DURATION = 0.25;
-
-export default function Editor( { isLoading, onClick } ) {
+export default function Editor( { isLoading } ) {
 	const {
 		record: editedPost,
 		getTitle,
 		isLoaded: hasLoadedPost,
 	} = useEditedEntityRecord();
-
 	const { type: editedPostType } = editedPost;
-
-	const isLargeViewport = useViewportMatch( 'medium' );
-	const disableMotion = useReducedMotion();
-
 	const {
 		context,
 		contextPost,
 		editorMode,
 		canvasMode,
-		blockEditorMode,
-		isRightSidebarOpen,
-		isInserterOpen,
-		isListViewOpen,
-		isDistractionFree,
-		showIconLabels,
-		showBlockBreadcrumbs,
-		postTypeLabel,
 		isEditingPage,
 		supportsGlobalStyles,
+		showIconLabels,
+		editorCanvasView,
+		currentPostIsTrashed,
 	} = useSelect( ( select ) => {
-		const { get } = select( preferencesStore );
 		const { getEditedPostContext, getCanvasMode, isPage } = unlock(
 			select( editSiteStore )
 		);
-		const { __unstableGetEditorMode } = select( blockEditorStore );
-		const { getActiveComplementaryArea } = select( interfaceStore );
+		const { get } = select( preferencesStore );
 		const { getEntityRecord, getCurrentTheme } = select( coreDataStore );
-		const {
-			isInserterOpened,
-			isListViewOpened,
-			getPostTypeLabel,
-			getEditorMode,
-		} = select( editorStore );
+		const { getEditorMode } = select( editorStore );
 		const _context = getEditedPostContext();
 
 		// The currently selected entity to display.
@@ -142,33 +93,24 @@ export default function Editor( { isLoading, onClick } ) {
 				: undefined,
 			editorMode: getEditorMode(),
 			canvasMode: getCanvasMode(),
-			blockEditorMode: __unstableGetEditorMode(),
-			isInserterOpen: isInserterOpened(),
-			isListViewOpen: isListViewOpened(),
-			isRightSidebarOpen: getActiveComplementaryArea( 'core' ),
-			isDistractionFree: get( 'core', 'distractionFree' ),
-			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
-			showIconLabels: get( 'core', 'showIconLabels' ),
-			postTypeLabel: getPostTypeLabel(),
 			isEditingPage: isPage(),
 			supportsGlobalStyles: getCurrentTheme()?.is_block_theme,
+			showIconLabels: get( 'core', 'showIconLabels' ),
+			editorCanvasView: unlock(
+				select( editSiteStore )
+			).getEditorCanvasContainerView(),
+			currentPostIsTrashed:
+				select( editorStore ).getCurrentPostAttribute( 'status' ) ===
+				'trash',
 		};
 	}, [] );
+	const _isPreviewingTheme = isPreviewingTheme();
+	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
+	const iframeProps = useEditorIframeProps();
 
 	const isViewMode = canvasMode === 'view';
 	const isEditMode = canvasMode === 'edit';
 	const showVisualEditor = isViewMode || editorMode === 'visual';
-	const shouldShowBlockBreadcrumbs =
-		! isDistractionFree &&
-		showBlockBreadcrumbs &&
-		isEditMode &&
-		showVisualEditor &&
-		blockEditorMode !== 'zoom-out';
-	const shouldShowInserter = isEditMode && showVisualEditor && isInserterOpen;
-	const shouldShowListView = isEditMode && showVisualEditor && isListViewOpen;
-	const secondarySidebarLabel = isListViewOpen
-		? __( 'List View' )
-		: __( 'Block Library' );
 	const postWithTemplate = !! context?.postId;
 
 	let title;
@@ -191,37 +133,35 @@ export default function Editor( { isLoading, onClick } ) {
 		'edit-site-editor__loading-progress'
 	);
 
-	const { closeGeneralSidebar } = useDispatch( editSiteStore );
-
 	const settings = useSpecificEditorSettings();
+	const styles = useMemo(
+		() => [
+			...settings.styles,
+			{
+				// Forming a "block formatting context" to prevent margin collapsing.
+				// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
 
-	// Local state for save panel.
-	// Note 'truthy' callback implies an open panel.
-	const [ entitiesSavedStatesCallback, setEntitiesSavedStatesCallback ] =
-		useState( false );
-
-	const closeEntitiesSavedStates = useCallback(
-		( arg ) => {
-			if ( typeof entitiesSavedStatesCallback === 'function' ) {
-				entitiesSavedStatesCallback( arg );
-			}
-			setEntitiesSavedStatesCallback( false );
-		},
-		[ entitiesSavedStatesCallback ]
+				css: `body{${
+					canvasMode === 'view'
+						? `min-height: 100vh; ${
+								currentPostIsTrashed ? '' : 'cursor: pointer;'
+						  }`
+						: ''
+				}}}`,
+			},
+		],
+		[ settings.styles, canvasMode, currentPostIsTrashed ]
 	);
-
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const history = useHistory();
 	const onActionPerformed = useCallback(
 		( actionId, items ) => {
 			switch ( actionId ) {
 				case 'move-to-trash':
+				case 'delete-post':
 					{
 						history.push( {
-							path: '/' + items[ 0 ].type,
-							postId: undefined,
-							postType: undefined,
-							canvas: 'view',
+							postType: items[ 0 ].type,
 						} );
 					}
 					break;
@@ -246,7 +186,6 @@ export default function Editor( { isLoading, onClick } ) {
 										label: __( 'Edit' ),
 										onClick: () => {
 											history.push( {
-												path: undefined,
 												postId: newItem.id,
 												postType: newItem.type,
 												canvas: 'edit',
@@ -270,6 +209,10 @@ export default function Editor( { isLoading, onClick } ) {
 
 	return (
 		<>
+			<GlobalStylesRenderer />
+			<EditorKeyboardShortcutsRegister />
+			{ isEditMode && <BlockKeyboardShortcuts /> }
+			{ showVisualEditor && <TemplatePartConverter /> }
 			{ ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null }
 			{ isEditMode && <WelcomeGuide /> }
 			{ hasLoadedPost && ! editedPost && (
@@ -288,117 +231,28 @@ export default function Editor( { isLoading, onClick } ) {
 					settings={ settings }
 					useSubRegistry={ false }
 				>
-					<InterfaceSkeleton
-						isDistractionFree={ isDistractionFree }
-						enableRegionNavigation={ false }
+					<SiteEditorMoreMenu />
+					<EditorInterface
 						className={ clsx(
 							'edit-site-editor__interface-skeleton',
 							{
 								'show-icon-labels': showIconLabels,
-								'is-entity-save-view-open':
-									!! entitiesSavedStatesCallback,
 							}
 						) }
-						header={
-							<AnimatePresence initial={ false }>
-								{ canvasMode === 'edit' && (
-									<motion.div
-										initial={ {
-											marginTop: -60,
-										} }
-										animate={ {
-											marginTop: 0,
-										} }
-										exit={ {
-											marginTop: -60,
-										} }
-										transition={ {
-											type: 'tween',
-											duration:
-												// Disable transition in mobile to emulate a full page transition.
-												disableMotion ||
-												! isLargeViewport
-													? 0
-													: ANIMATION_DURATION,
-											ease: [ 0.6, 0, 0.4, 1 ],
-										} }
-									>
-										<Header
-											setEntitiesSavedStatesCallback={
-												setEntitiesSavedStatesCallback
-											}
-										/>
-									</motion.div>
-								) }
-							</AnimatePresence>
-						}
-						actions={
-							<SavePublishPanels
-								closeEntitiesSavedStates={
-									closeEntitiesSavedStates
-								}
-								isEntitiesSavedStatesOpen={
-									entitiesSavedStatesCallback
-								}
-								setEntitiesSavedStatesCallback={
-									setEntitiesSavedStatesCallback
-								}
-							/>
-						}
-						notices={ <EditorSnackbars /> }
-						content={
-							<>
-								<GlobalStylesRenderer />
-								{ isEditMode && <EditorNotices /> }
-								{ showVisualEditor && (
-									<>
-										<TemplatePartConverter />
-										{ ! isLargeViewport && (
-											<BlockToolbar hideDragHandle />
-										) }
-										<SiteEditorCanvas onClick={ onClick } />
-										<PatternModal />
-									</>
-								) }
-								{ editorMode === 'text' && isEditMode && (
-									<CodeEditor />
-								) }
-								{ isEditMode && (
-									<>
-										<EditorKeyboardShortcutsRegister />
-										<EditorKeyboardShortcuts />
-										<BlockKeyboardShortcuts />
-									</>
-								) }
-							</>
-						}
-						secondarySidebar={
-							isEditMode &&
-							( ( shouldShowInserter && (
-								<InserterSidebar
-									closeGeneralSidebar={ closeGeneralSidebar }
-									isRightSidebarOpen={ isRightSidebarOpen }
-								/>
-							) ) ||
-								( shouldShowListView && <ListViewSidebar /> ) )
-						}
-						sidebar={
-							isEditMode &&
-							! isDistractionFree && (
-								<ComplementaryArea.Slot scope="core" />
-							)
+						styles={ styles }
+						enableRegionNavigation={ false }
+						customSaveButton={
+							_isPreviewingTheme && <SaveButton size="compact" />
 						}
-						footer={
-							shouldShowBlockBreadcrumbs && (
-								<BlockBreadcrumb
-									rootLabelText={ postTypeLabel }
-								/>
-							)
+						forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
+						title={
+							! hasDefaultEditorCanvasView
+								? getEditorCanvasContainerTitle(
+										editorCanvasView
+								  )
+								: undefined
 						}
-						labels={ {
-							...interfaceLabels,
-							secondarySidebar: secondarySidebarLabel,
-						} }
+						iframeProps={ iframeProps }
 					/>
 					<Sidebar
 						onActionPerformed={ onActionPerformed }

package/src/components/editor/style.scss

@@ -18,17 +18,6 @@
 	justify-content: center;
 }
 
-// Adjust the position of the notices when breadcrumbs are present
-.edit-site .has-block-breadcrumbs.is-full-canvas .components-editor-notices__snackbar {
-	bottom: 40px;
+.editor-header {
+	padding-left: $header-height;
 }
-
-// Adjust the position of the notices
-.edit-site .components-editor-notices__snackbar {
-	position: absolute;
-	right: 0;
-	bottom: 16px;
-	padding-left: 16px;
-	padding-right: 16px;
-}
-@include editor-left(".edit-site .components-editor-notices__snackbar")

package/src/components/editor-canvas-container/index.js

@@ -4,7 +4,6 @@
 import { Children, cloneElement, useState } from '@wordpress/element';
 import {
 	Button,
-	privateApis as componentsPrivateApis,
 	__experimentalUseSlotFills as useSlotFills,
 } from '@wordpress/components';
 import { ESCAPE } from '@wordpress/keycodes';
@@ -13,14 +12,18 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { closeSmall } from '@wordpress/icons';
 import { useFocusOnMount, useFocusReturn } from '@wordpress/compose';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
-import ResizableEditor from '../block-editor/resizable-editor';
+
+const { EditorContentSlotFill, ResizableEditor } = unlock( editorPrivateApis );
 
 /**
  * Returns a translated string for the title of the editor canvas container.
@@ -41,15 +44,6 @@ function getEditorCanvasContainerTitle( view ) {
 	}
 }
 
-// Creates a private slot fill.
-const { createPrivateSlotFill } = unlock( componentsPrivateApis );
-const SLOT_FILL_NAME = 'EditSiteEditorCanvasContainerSlot';
-const {
-	privateKey,
-	Slot: EditorCanvasContainerSlot,
-	Fill: EditorCanvasContainerFill,
-} = createPrivateSlotFill( SLOT_FILL_NAME );
-
 function EditorCanvasContainer( {
 	children,
 	closeButtonLabel,
@@ -119,34 +113,35 @@ function EditorCanvasContainer( {
 	const shouldShowCloseButton = onClose || closeButtonLabel;
 
 	return (
-		<EditorCanvasContainerFill>
-			<ResizableEditor enableResizing={ enableResizing }>
-				{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
-				<section
-					className="edit-site-editor-canvas-container"
-					ref={ shouldShowCloseButton ? focusOnMountRef : null }
-					onKeyDown={ closeOnEscape }
-					aria-label={ title }
-				>
-					{ shouldShowCloseButton && (
-						<Button
-							className="edit-site-editor-canvas-container__close-button"
-							icon={ closeSmall }
-							label={ closeButtonLabel || __( 'Close' ) }
-							onClick={ onCloseContainer }
-						/>
-					) }
-					{ childrenWithProps }
-				</section>
-			</ResizableEditor>
-		</EditorCanvasContainerFill>
+		<EditorContentSlotFill.Fill>
+			<div className="edit-site-editor-canvas-container">
+				<ResizableEditor enableResizing={ enableResizing }>
+					{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
+					<section
+						className="edit-site-editor-canvas-container__section"
+						ref={ shouldShowCloseButton ? focusOnMountRef : null }
+						onKeyDown={ closeOnEscape }
+						aria-label={ title }
+					>
+						{ shouldShowCloseButton && (
+							<Button
+								className="edit-site-editor-canvas-container__close-button"
+								icon={ closeSmall }
+								label={ closeButtonLabel || __( 'Close' ) }
+								onClick={ onCloseContainer }
+							/>
+						) }
+						{ childrenWithProps }
+					</section>
+				</ResizableEditor>
+			</div>
+		</EditorContentSlotFill.Fill>
 	);
 }
 function useHasEditorCanvasContainer() {
-	const fills = useSlotFills( privateKey );
+	const fills = useSlotFills( EditorContentSlotFill.privateKey );
 	return !! fills?.length;
 }
 
-EditorCanvasContainer.Slot = EditorCanvasContainerSlot;
 export default EditorCanvasContainer;
 export { useHasEditorCanvasContainer, getEditorCanvasContainerTitle };

package/src/components/editor-canvas-container/style.scss

@@ -1,4 +1,20 @@
 .edit-site-editor-canvas-container {
+	height: 100%;
+	background-color: $gray-300;
+
+	// Controls height of editor and editor canvas container (style book, global styles revisions previews etc.)
+	iframe {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+
+	.edit-site-layout.is-full-canvas & {
+		padding: $grid-unit-30 $grid-unit-30 0;
+	}
+}
+
+.edit-site-editor-canvas-container__section {
 	background: $white; // Fallback color, overridden by JavaScript.
 	border-radius: $radius-block-ui;
 	bottom: 0;