@wordpress/edit-site 5.34.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

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { edit } from '@wordpress/icons';
+import { useMemo } from '@wordpress/element';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { PATTERN_TYPES } from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+export const useEditPostAction = () => {
+	const history = useHistory();
+	return useMemo(
+		() => ( {
+			id: 'edit-post',
+			label: __( 'Edit' ),
+			isPrimary: true,
+			icon: edit,
+			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 ];
+				history.push( {
+					postId: post.id,
+					postType: post.type,
+					canvas: 'edit',
+				} );
+			},
+		} ),
+		[ history ]
+	);
+};

package/src/components/editor/index.js

@@ -1,131 +1,83 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+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,
-	BlockInspector,
-} 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 {
-	SidebarComplementaryAreaFills,
-	SidebarInspectorFill,
-} from '../sidebar-edit-mode';
-import CodeEditor from '../code-editor';
-import Header from '../header-edit-mode';
 import WelcomeGuide from '../welcome-guide';
-import StartTemplateOptions from '../start-template-options';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from '../global-styles-renderer';
 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,
+		isEditingPage,
+		supportsGlobalStyles,
 		showIconLabels,
-		showBlockBreadcrumbs,
-		postTypeLabel,
+		editorCanvasView,
+		currentPostIsTrashed,
 	} = useSelect( ( select ) => {
-		const { get } = select( preferencesStore );
-		const { getEditedPostContext, getCanvasMode } = unlock(
+		const { getEditedPostContext, getCanvasMode, isPage } = unlock(
 			select( editSiteStore )
 		);
-		const { __unstableGetEditorMode } = select( blockEditorStore );
-		const { getActiveComplementaryArea } = select( interfaceStore );
-		const { getEntityRecord } = select( coreDataStore );
-		const {
-			isInserterOpened,
-			isListViewOpened,
-			getPostTypeLabel,
-			getEditorMode,
-		} = select( editorStore );
+		const { get } = select( preferencesStore );
+		const { getEntityRecord, getCurrentTheme } = select( coreDataStore );
+		const { getEditorMode } = select( editorStore );
 		const _context = getEditedPostContext();
 
 		// The currently selected entity to display.
@@ -141,31 +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' ),
+			isEditingPage: isPage(),
+			supportsGlobalStyles: getCurrentTheme()?.is_block_theme,
 			showIconLabels: get( 'core', 'showIconLabels' ),
-			postTypeLabel: getPostTypeLabel(),
+			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;
@@ -188,23 +133,73 @@ 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 );
+				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( {
+							postType: items[ 0 ].type,
+						} );
+					}
+					break;
+				case 'duplicate-post':
+					{
+						const newItem = items[ 0 ];
+						const _title =
+							typeof newItem.title === 'string'
+								? newItem.title
+								: newItem.title?.rendered;
+						createSuccessNotice(
+							sprintf(
+								// translators: %s: Title of the created post e.g: "Post 1".
+								__( '"%s" successfully created.' ),
+								_title
+							),
+							{
+								type: 'snackbar',
+								id: 'duplicate-post-action',
+								actions: [
+									{
+										label: __( 'Edit' ),
+										onClick: () => {
+											history.push( {
+												postId: newItem.id,
+												postType: newItem.type,
+												canvas: 'edit',
+											} );
+										},
+									},
+								],
+							}
+						);
+					}
+					break;
 			}
-			setEntitiesSavedStatesCallback( false );
 		},
-		[ entitiesSavedStatesCallback ]
+		[ history, createSuccessNotice ]
 	);
 
 	const isReady =
@@ -214,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 && (
@@ -232,123 +231,38 @@ export default function Editor( { isLoading, onClick } ) {
 					settings={ settings }
 					useSubRegistry={ false }
 				>
-					<SidebarComplementaryAreaFills />
-					{ isEditMode && <StartTemplateOptions /> }
-					<InterfaceSkeleton
-						isDistractionFree={ isDistractionFree }
-						enableRegionNavigation={ false }
-						className={ classnames(
+					<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 />
-										<SidebarInspectorFill>
-											<BlockInspector />
-										</SidebarInspectorFill>
-										{ ! 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 /> ) )
+						styles={ styles }
+						enableRegionNavigation={ false }
+						customSaveButton={
+							_isPreviewingTheme && <SaveButton size="compact" />
 						}
-						sidebar={
-							isEditMode &&
-							! isDistractionFree && (
-								<ComplementaryArea.Slot scope="core" />
-							)
+						forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
+						title={
+							! hasDefaultEditorCanvasView
+								? getEditorCanvasContainerTitle(
+										editorCanvasView
+								  )
+								: undefined
 						}
-						footer={
-							shouldShowBlockBreadcrumbs && (
-								<BlockBreadcrumb
-									rootLabelText={ postTypeLabel }
-								/>
+						iframeProps={ iframeProps }
+					/>
+					<Sidebar
+						onActionPerformed={ onActionPerformed }
+						extraPanels={
+							! isEditingPage && (
+								<PluginTemplateSettingPanel.Slot />
 							)
 						}
-						labels={ {
-							...interfaceLabels,
-							secondarySidebar: secondarySidebarLabel,
-						} }
 					/>
+					{ supportsGlobalStyles && <GlobalStylesSidebar /> }
 				</EditorProvider>
 			) }
 		</>

package/src/components/editor/style.scss

@@ -6,10 +6,6 @@
 	&.is-loading {
 		opacity: 0;
 	}
-
-	.interface-interface-skeleton__header {
-		border: 0;
-	}
 }
 
 .edit-site-editor__toggle-save-panel {
@@ -22,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;
-}
-
-// Adjust the position of the notices
-.edit-site .components-editor-notices__snackbar {
-	position: absolute;
-	right: 0;
-	bottom: 16px;
-	padding-left: 16px;
-	padding-right: 16px;
+.editor-header {
+	padding-left: $header-height;
 }
-@include editor-left(".edit-site .components-editor-notices__snackbar")