@wordpress/edit-site 5.35.0 → 6.0.0

package/src/components/global-styles/variations/variations-typography.js

@@ -19,7 +19,8 @@ import Subtitle from '../subtitle';
 export default function TypographyVariations( { title, gap = 2 } ) {
 	const typographyVariations = useTypographyVariations();
 
-	if ( ! typographyVariations?.length ) {
+	// Return null if there is only one variation (the default).
+	if ( typographyVariations?.length <= 1 ) {
 		return null;
 	}
 

package/src/components/global-styles-renderer/index.js

@@ -10,11 +10,17 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  */
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 const { useGlobalStylesOutput } = unlock( blockEditorPrivateApis );
 
 function useGlobalStylesRenderer() {
-	const [ styles, settings ] = useGlobalStylesOutput();
+	const postType = useSelect( ( select ) => {
+		return select( editSiteStore ).getEditedPostType();
+	} );
+	const [ styles, settings ] = useGlobalStylesOutput(
+		postType !== TEMPLATE_POST_TYPE
+	);
 	const { getSettings } = useSelect( editSiteStore );
 	const { updateSettings } = useDispatch( editSiteStore );
 

package/src/components/layout/index.js

@@ -30,7 +30,10 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import {
+	EditorSnackbars,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -147,7 +150,7 @@ export default function Layout() {
 	let commandContext = 'site-editor';
 
 	if ( canvasMode === 'edit' ) {
-		commandContext = 'site-editor-edit';
+		commandContext = 'entity-edit';
 	}
 	if ( hasBlockSelected ) {
 		commandContext = 'block-selection-edit';
@@ -262,6 +265,8 @@ export default function Layout() {
 						</NavigableRegion>
 					) }
 
+					<EditorSnackbars />
+
 					{ isMobileViewport && areas.mobile && (
 						<div className="edit-site-layout__mobile">
 							{ areas.mobile }

package/src/components/layout/router.js

@@ -17,58 +17,84 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
 import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
-import SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
-import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template';
-import SidebarNavigationScreenPattern from '../sidebar-navigation-screen-pattern';
 import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
 import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';
 import DataViewsSidebarContent from '../sidebar-dataviews';
+import {
+	NAVIGATION_POST_TYPE,
+	PATTERN_TYPES,
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_POST_TYPE,
+} from '../../utils/constants';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
-export default function useLayoutAreas() {
-	const isSiteEditorLoading = useIsSiteEditorLoading();
+function useRedirectOldPaths() {
 	const history = useHistory();
 	const { params } = useLocation();
-	const { postType, postId, path, layout, isCustom, canvas } = params;
-
 	useEffect( () => {
-		// `/wp_template_part/all` path is no longer used and redirects to
-		// Patterns page for backward compatibility.
+		const { postType, path, categoryType, ...rest } = params;
+
 		if ( path === '/wp_template_part/all' ) {
-			history.replace( { path: '/patterns' } );
+			history.replace( { postType: TEMPLATE_PART_POST_TYPE } );
 		}
-	}, [ history, path ] );
 
-	// Note: Since "sidebar" is not yet supported here,
-	// returning undefined from "mobile" means show the sidebar.
+		if ( path === '/page' ) {
+			history.replace( {
+				postType: 'page',
+				...rest,
+			} );
+		}
+
+		if ( path === '/wp_template' ) {
+			history.replace( {
+				postType: TEMPLATE_POST_TYPE,
+				...rest,
+			} );
+		}
+
+		if ( path === '/patterns' ) {
+			history.replace( {
+				postType:
+					categoryType === TEMPLATE_PART_POST_TYPE
+						? TEMPLATE_PART_POST_TYPE
+						: PATTERN_TYPES.user,
+				...rest,
+			} );
+		}
+
+		if ( path === '/navigation' ) {
+			history.replace( {
+				postType: NAVIGATION_POST_TYPE,
+				...rest,
+			} );
+		}
+	}, [ history, params ] );
+}
+
+export default function useLayoutAreas() {
+	const isSiteEditorLoading = useIsSiteEditorLoading();
+	const { params } = useLocation();
+	const { postType, postId, path, layout, isCustom, canvas } = params;
+	useRedirectOldPaths();
 
 	// Page list
-	if ( path === '/page' ) {
+	if ( postType === 'page' ) {
 		const isListLayout = layout === 'list' || ! layout;
 		return {
-			key: 'pages-list',
+			key: 'pages',
 			areas: {
 				sidebar: (
 					<SidebarNavigationScreen
-						title={ __( 'Manage pages' ) }
+						title={ __( 'Pages' ) }
 						backPath={ {} }
 						content={ <DataViewsSidebarContent /> }
 					/>
 				),
 				content: <PagePages />,
-				preview: isListLayout && (
-					<Editor
-						isLoading={ isSiteEditorLoading }
-						onClick={ () =>
-							history.push( {
-								postType: 'page',
-								postId,
-								canvas: 'edit',
-							} )
-						}
-					/>
+				preview: ( isListLayout || canvas === 'edit' ) && (
+					<Editor isLoading={ isSiteEditorLoading } />
 				),
 				mobile:
 					canvas === 'edit' ? (
@@ -83,61 +109,17 @@ export default function useLayoutAreas() {
 		};
 	}
 
-	// Regular other post types
-	if ( postType && postId ) {
-		let sidebar;
-		if ( postType === 'wp_template_part' || postType === 'wp_block' ) {
-			sidebar = (
-				<SidebarNavigationScreenPattern
-					backPath={ {
-						path: '/patterns',
-						categoryId: params.categoryId,
-						categoryType: params.categoryType,
-					} }
-				/>
-			);
-		} else if ( postType === 'wp_template' ) {
-			sidebar = (
-				<SidebarNavigationScreenTemplate
-					backPath={ { path: '/wp_template' } }
-				/>
-			);
-		} else if ( postType === 'page' ) {
-			sidebar = (
-				<SidebarNavigationScreenPage
-					backPath={ { path: '/page', postId } }
-				/>
-			);
-		} else {
-			sidebar = (
-				<SidebarNavigationScreenNavigationMenu
-					backPath={ { path: '/navigation' } }
-				/>
-			);
-		}
-		return {
-			key: 'page',
-			areas: {
-				sidebar,
-				preview: <Editor isLoading={ isSiteEditorLoading } />,
-				mobile: canvas === 'edit' && (
-					<Editor isLoading={ isSiteEditorLoading } />
-				),
-			},
-		};
-	}
-
 	// Templates
-	if ( path === '/wp_template' ) {
+	if ( postType === TEMPLATE_POST_TYPE ) {
 		const isListLayout = isCustom !== 'true' && layout === 'list';
 		return {
-			key: 'templates-list',
+			key: 'templates',
 			areas: {
 				sidebar: (
 					<SidebarNavigationScreenTemplatesBrowse backPath={ {} } />
 				),
 				content: <PageTemplates />,
-				preview: isListLayout && (
+				preview: ( isListLayout || canvas === 'edit' ) && (
 					<Editor isLoading={ isSiteEditorLoading } />
 				),
 				mobile: <PageTemplates />,
@@ -149,15 +131,18 @@ export default function useLayoutAreas() {
 	}
 
 	// Patterns
-	// `/wp_template_part/all` path is no longer used and redirects to
-	// Patterns page for backward compatibility.
-	if ( path === '/patterns' || path === '/wp_template_part/all' ) {
+	if (
+		[ TEMPLATE_PART_POST_TYPE, PATTERN_TYPES.user ].includes( postType )
+	) {
 		return {
 			key: 'patterns',
 			areas: {
 				sidebar: <SidebarNavigationScreenPatterns backPath={ {} } />,
 				content: <PagePatterns />,
 				mobile: <PagePatterns />,
+				preview: canvas === 'edit' && (
+					<Editor isLoading={ isSiteEditorLoading } />
+				),
 			},
 		};
 	}
@@ -179,14 +164,14 @@ export default function useLayoutAreas() {
 	}
 
 	// Navigation
-	if ( path === '/navigation' ) {
+	if ( postType === NAVIGATION_POST_TYPE ) {
 		if ( postId ) {
 			return {
 				key: 'navigation',
 				areas: {
 					sidebar: (
 						<SidebarNavigationScreenNavigationMenu
-							backPath={ { path: '/navigation' } }
+							backPath={ { postType: NAVIGATION_POST_TYPE } }
 						/>
 					),
 					preview: <Editor isLoading={ isSiteEditorLoading } />,

package/src/components/layout/style.scss

@@ -118,7 +118,7 @@
 		justify-content: flex-end;
 	}
 
-	& > div {
+	.edit-site-resizable-frame__inner {
 		color: $gray-900;
 	}
 
@@ -128,6 +128,7 @@
 		width: calc(100% - #{$canvas-padding});
 
 		.edit-site-resizable-frame__inner-content {
+			box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
 			transition: border-radius 0.4s;
 			// This ensure the radius work properly.
 			overflow: hidden;
@@ -142,10 +143,6 @@
 		top: 0;
 		bottom: 0;
 		width: 100%;
-
-		& > div {
-			border-radius: 0;
-		}
 	}
 }
 
@@ -165,15 +162,13 @@
 	position: relative;
 	color: $white;
 	border-radius: 0;
-	height: $header-height +  $border-width;
+	height: $header-height;
 	width: $header-height;
-	margin-bottom: -  $border-width;
 	overflow: hidden;
 	padding: 0;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	border-bottom: 1px solid transparent;
 
 	&:hover,
 	&:active {
@@ -280,3 +275,11 @@
 		margin: $canvas-padding $canvas-padding $canvas-padding 0;
 	}
 }
+
+.edit-site .components-editor-notices__snackbar {
+	position: fixed;
+	right: 0;
+	bottom: 16px;
+	padding-left: 16px;
+	padding-right: 16px;
+}

package/src/components/{header-edit-mode/more-menu → more-menu}/index.js

@@ -10,7 +10,7 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
  */
 import SiteExport from './site-export';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
-import { unlock } from '../../../lock-unlock';
+import { unlock } from '../../lock-unlock';
 
 const { ToolsMoreMenuGroup, PreferencesModal } = unlock( editorPrivateApis );
 

package/src/components/page/header.js

@@ -5,7 +5,7 @@ import {
 	__experimentalHeading as Heading,
 	__experimentalText as Text,
 	__experimentalHStack as HStack,
-	FlexBlock,
+	__experimentalVStack as VStack,
 	FlexItem,
 } from '@wordpress/components';
 
@@ -15,8 +15,8 @@ import {
 
 export default function Header( { title, subTitle, actions } ) {
 	return (
-		<HStack as="header" alignment="left" className="edit-site-page-header">
-			<FlexBlock className="edit-site-page-header__page-title">
+		<VStack className="edit-site-page-header" as="header" spacing={ 0 }>
+			<HStack className="edit-site-page-header__page-title">
 				<Heading
 					as="h2"
 					level={ 3 }
@@ -25,15 +25,19 @@ export default function Header( { title, subTitle, actions } ) {
 				>
 					{ title }
 				</Heading>
-				{ subTitle && (
-					<Text as="p" className="edit-site-page-header__sub-title">
-						{ subTitle }
-					</Text>
-				) }
-			</FlexBlock>
-			<FlexItem className="edit-site-page-header__actions">
-				{ actions }
-			</FlexItem>
-		</HStack>
+				<FlexItem className="edit-site-page-header__actions">
+					{ actions }
+				</FlexItem>
+			</HStack>
+			{ subTitle && (
+				<Text
+					variant="muted"
+					as="p"
+					className="edit-site-page-header__sub-title"
+				>
+					{ subTitle }
+				</Text>
+			) }
+		</VStack>
 	);
 }

package/src/components/page/index.js

@@ -6,10 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import {
-	EditorSnackbars,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -41,7 +38,6 @@ export default function Page( {
 				) }
 				{ children }
 			</div>
-			<EditorSnackbars />
 		</NavigableRegion>
 	);
 }

package/src/components/page/style.scss

@@ -2,25 +2,39 @@
 	color: $gray-800;
 	background: $white;
 	height: 100%;
+	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
+	container: edit-site-page / inline-size;
+	transition: width ease-out 0.2s;
+	@include reduce-motion("transition");
 }
 
 .edit-site-page-header {
-	padding: $grid-unit-20 $grid-unit-40;
-	min-height: $grid-unit * 9;
+	padding: $grid-unit-20 $grid-unit-60;
 	border-bottom: 1px solid $gray-100;
 	background: $white;
 	position: sticky;
 	top: 0;
 	z-index: z-index(".edit-site-page-header");
-	.components-text {
-		color: $gray-800;
-	}
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
+
 	.components-heading {
 		color: $gray-900;
 	}
+
+	.edit-site-page-header__page-title {
+		min-height: $grid-unit-50;
+	}
+
 	.edit-site-page-header__sub-title {
-		margin-top: $grid-unit-10;
-		color: $gray-700;
+		margin-bottom: $grid-unit-10;
+	}
+}
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 430px) {
+	.edit-site-page-header {
+		padding: $grid-unit-20 $grid-unit-30;
 	}
 }