@wordpress/edit-site 6.0.1 → 6.1.0

package/src/components/layout/index.js

@@ -21,91 +21,60 @@ import {
 import { __ } from '@wordpress/i18n';
 import { useState, useRef, useEffect } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import {
-	CommandMenu,
-	privateApis as commandsPrivateApis,
-} from '@wordpress/commands';
-import { store as preferencesStore } from '@wordpress/preferences';
-import {
-	privateApis as blockEditorPrivateApis,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
+import { CommandMenu } from '@wordpress/commands';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import {
 	EditorSnackbars,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
+import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
 
 /**
  * Internal dependencies
  */
 import ErrorBoundary from '../error-boundary';
 import { store as editSiteStore } from '../../store';
-import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 import SiteHub from '../site-hub';
 import ResizableFrame from '../resizable-frame';
-import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
 import { unlock } from '../../lock-unlock';
 import SavePanel from '../save-panel';
 import KeyboardShortcutsRegister from '../keyboard-shortcuts/register';
 import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';
-import { useCommonCommands } from '../../hooks/commands/use-common-commands';
-import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands';
 import { useIsSiteEditorLoading } from './hooks';
-import useLayoutAreas from './router';
 import useMovingAnimation from './animation';
 import SidebarContent from '../sidebar';
 import SaveHub from '../save-hub';
+import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
 
 const { useCommands } = unlock( coreCommandsPrivateApis );
-const { useCommandContext } = unlock( commandsPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 const { NavigableRegion } = unlock( editorPrivateApis );
 
 const ANIMATION_DURATION = 0.3;
 
-export default function Layout() {
-	// This ensures the edited entity id and type are initialized properly.
-	useInitEditedEntityFromURL();
+export default function Layout( { route } ) {
 	useSyncCanvasModeWithURL();
 	useCommands();
-	useEditModeCommands();
-	useCommonCommands();
-
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const toggleRef = useRef();
-	const {
-		isDistractionFree,
-		hasFixedToolbar,
-		hasBlockSelected,
-		canvasMode,
-		previousShortcut,
-		nextShortcut,
-	} = useSelect( ( select ) => {
-		const { getAllShortcutKeyCombinations } = select(
-			keyboardShortcutsStore
-		);
-		const { getCanvasMode } = unlock( select( editSiteStore ) );
-		return {
-			canvasMode: getCanvasMode(),
-			previousShortcut: getAllShortcutKeyCombinations(
-				'core/editor/previous-region'
-			),
-			nextShortcut: getAllShortcutKeyCombinations(
-				'core/editor/next-region'
-			),
-			hasFixedToolbar: select( preferencesStore ).get(
-				'core',
-				'fixedToolbar'
-			),
-			isDistractionFree: select( preferencesStore ).get(
-				'core',
-				'distractionFree'
-			),
-			hasBlockSelected:
-				select( blockEditorStore ).getBlockSelectionStart(),
-		};
-	}, [] );
+	const { canvasMode, previousShortcut, nextShortcut } = useSelect(
+		( select ) => {
+			const { getAllShortcutKeyCombinations } = select(
+				keyboardShortcutsStore
+			);
+			const { getCanvasMode } = unlock( select( editSiteStore ) );
+			return {
+				canvasMode: getCanvasMode(),
+				previousShortcut: getAllShortcutKeyCombinations(
+					'core/editor/previous-region'
+				),
+				nextShortcut: getAllShortcutKeyCombinations(
+					'core/editor/next-region'
+				),
+			};
+		},
+		[]
+	);
 	const navigateRegionsProps = useNavigateRegions( {
 		previous: previousShortcut,
 		next: nextShortcut,
@@ -116,22 +85,11 @@ export default function Layout() {
 	const isEditorLoading = useIsSiteEditorLoading();
 	const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
 		useState( false );
-	const { key: routeKey, areas, widths } = useLayoutAreas();
+	const { key: routeKey, areas, widths } = route;
 	const animationRef = useMovingAnimation( {
 		triggerAnimationOnChange: canvasMode + '__' + routeKey,
 	} );
 
-	// Sets the right context for the command palette
-	let commandContext = 'site-editor';
-
-	if ( canvasMode === 'edit' ) {
-		commandContext = 'entity-edit';
-	}
-	if ( hasBlockSelected ) {
-		commandContext = 'block-selection-edit';
-	}
-	useCommandContext( commandContext );
-
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
 	const previousCanvaMode = usePrevious( canvasMode );
@@ -163,11 +121,7 @@ export default function Layout() {
 					'edit-site-layout',
 					navigateRegionsProps.className,
 					{
-						'is-distraction-free':
-							isDistractionFree && canvasMode === 'edit',
 						'is-full-canvas': canvasMode === 'edit',
-						'has-fixed-toolbar': hasFixedToolbar,
-						'is-block-toolbar-visible': hasBlockSelected,
 					}
 				) }
 			>

package/src/components/page/header.js

@@ -22,6 +22,7 @@ export default function Header( { title, subTitle, actions } ) {
 					level={ 3 }
 					weight={ 500 }
 					className="edit-site-page-header__title"
+					truncate
 				>
 					{ title }
 				</Heading>

package/src/components/page/style.scss

@@ -24,6 +24,12 @@
 
 	.edit-site-page-header__page-title {
 		min-height: $grid-unit-50;
+
+		.components-heading {
+			flex-grow: 1;
+			flex-basis: 0;
+			white-space: nowrap;
+		}
 	}
 
 	.edit-site-page-header__sub-title {

package/src/components/page-patterns/header.js

@@ -58,12 +58,18 @@ export default function PatternsHeader( {
 	}
 
 	return (
-		<VStack className="edit-site-patterns__section-header" spacing={ 0 }>
+		<VStack className="edit-site-patterns__section-header" spacing={ 1 }>
 			<HStack
 				justify="space-between"
 				className="edit-site-patterns__title"
 			>
-				<Heading as="h2" level={ 3 } id={ titleId } weight={ 500 }>
+				<Heading
+					as="h2"
+					level={ 3 }
+					id={ titleId }
+					weight={ 500 }
+					truncate
+				>
 					{ title }
 				</Heading>
 				<HStack expanded={ false }>

package/src/components/page-patterns/style.scss

@@ -98,6 +98,12 @@
 
 		.edit-site-patterns__title {
 			min-height: $grid-unit-50;
+
+			.components-heading {
+				flex-grow: 1;
+				flex-basis: 0;
+				white-space: nowrap;
+			}
 		}
 
 		.edit-site-patterns__sub-title {

package/src/components/posts-app/index.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	UnsavedChangesWarning,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import Layout from '../layout';
+import Page from '../page';
+import { unlock } from '../../lock-unlock';
+
+const { RouterProvider } = unlock( routerPrivateApis );
+const { GlobalStylesProvider } = unlock( editorPrivateApis );
+
+const defaultRoute = {
+	key: 'index',
+	areas: {
+		sidebar: 'Empty Sidebar',
+		content: <Page>Welcome to Posts</Page>,
+		preview: undefined,
+		mobile: <Page>Welcome to Posts</Page>,
+	},
+};
+
+export default function PostsApp() {
+	return (
+		<GlobalStylesProvider>
+			<UnsavedChangesWarning />
+			<RouterProvider>
+				<Layout route={ defaultRoute } />
+			</RouterProvider>
+		</GlobalStylesProvider>
+	);
+}

package/src/components/sidebar/style.scss

@@ -3,7 +3,7 @@
 	overflow-y: auto;
 }
 
-@keyframes slide-from-right {
+@keyframes local--slide-from-right {
 	from {
 		transform: translateX(50px);
 		opacity: 0;
@@ -14,7 +14,7 @@
 	}
 }
 
-@keyframes slide-from-left {
+@keyframes local--slide-from-left {
 	from {
 		transform: translateX(-50px);
 		opacity: 0;
@@ -47,11 +47,11 @@
 	}
 
 	&.slide-from-left {
-		animation-name: slide-from-left;
+		animation-name: local--slide-from-left;
 	}
 
 	&.slide-from-right {
-		animation-name: slide-from-right;
+		animation-name: local--slide-from-right;
 	}
 
 }

package/src/components/sidebar-navigation-screen-navigation-menu/delete-confirm-dialog.js

@@ -16,6 +16,7 @@ export default function DeleteConfirmDialog( { onClose, onConfirm } ) {
 			} }
 			onCancel={ onClose }
 			confirmButtonText={ __( 'Delete' ) }
+			size="medium"
 		>
 			{ __( 'Are you sure you want to delete this Navigation Menu?' ) }
 		</ConfirmDialog>

package/src/hooks/commands/use-set-command-context.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { privateApis as commandsPrivateApis } from '@wordpress/commands';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { useCommandContext } = unlock( commandsPrivateApis );
+
+/**
+ * React hook used to set the correct command context based on the current state.
+ */
+export default function useSetCommandContext() {
+	const { hasBlockSelected, canvasMode } = useSelect( ( select ) => {
+		const { getCanvasMode } = unlock( select( editSiteStore ) );
+		const { getBlockSelectionStart } = select( blockEditorStore );
+		return {
+			canvasMode: getCanvasMode(),
+			hasBlockSelected: getBlockSelectionStart(),
+		};
+	}, [] );
+	// Sets the right context for the command palette
+	let commandContext = 'site-editor';
+	if ( canvasMode === 'edit' ) {
+		commandContext = 'entity-edit';
+	}
+	if ( hasBlockSelected ) {
+		commandContext = 'block-selection-edit';
+	}
+	useCommandContext( commandContext );
+}

package/src/hooks/push-changes-to-global-styles/index.js

@@ -287,7 +287,7 @@ function PushChangesToGlobalStylesControl( {
 			// notification.
 			__unstableMarkNextChangeAsNotPersistent();
 			setAttributes( newBlockAttributes );
-			setUserConfig( () => newUserConfig, { undoIgnore: true } );
+			setUserConfig( newUserConfig, { undoIgnore: true } );
 			createSuccessNotice(
 				sprintf(
 					// translators: %s: Title of the block e.g. 'Heading'.
@@ -302,7 +302,7 @@ function PushChangesToGlobalStylesControl( {
 							onClick() {
 								__unstableMarkNextChangeAsNotPersistent();
 								setAttributes( attributes );
-								setUserConfig( () => userConfig, {
+								setUserConfig( userConfig, {
 									undoIgnore: true,
 								} );
 							},