@wordpress/edit-site 5.26.0 → 5.27.1

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

@@ -3,6 +3,8 @@
  */
 import { __ } from '@wordpress/i18n';
 import { __experimentalVStack as VStack } from '@wordpress/components';
+import { store as editorStore } from '@wordpress/editor';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -12,6 +14,12 @@ import FontFamilies from './font-families';
 import ScreenHeader from './header';
 
 function ScreenTypography() {
+	const fontLibraryEnabled = useSelect(
+		( select ) =>
+			select( editorStore ).getEditorSettings().fontLibraryEnabled,
+		[]
+	);
+
 	return (
 		<>
 			<ScreenHeader
@@ -22,9 +30,7 @@ function ScreenTypography() {
 			/>
 			<div className="edit-site-global-styles-screen-typography">
 				<VStack spacing={ 6 }>
-					{ ! window.__experimentalDisableFontLibrary && (
-						<FontFamilies />
-					) }
+					{ fontLibraryEnabled && <FontFamilies /> }
 					<TypographyElements />
 				</VStack>
 			</div>

package/src/components/global-styles/style.scss

@@ -42,6 +42,10 @@
 	border-radius: $radius-block-ui;
 }
 
+.edit-site-global-styles-screen-typography__font-variants-count {
+	color: $gray-700;
+}
+
 .edit-site-global-styles-screen-colors {
 	margin: $grid-unit-20;
 

package/src/components/header-edit-mode/style.scss

@@ -143,16 +143,26 @@ $header-toolbar-min-width: 335px;
 	}
 
 	.block-editor-block-mover {
+		// Modified group borders.
 		border-left: none;
 
 		&::before {
 			content: "";
 			width: $border-width;
-			margin-top: $grid-unit + $grid-unit-05;
-			margin-bottom: $grid-unit + $grid-unit-05;
+			margin-top: $grid-unit-15;
+			margin-bottom: $grid-unit-15;
 			background-color: $gray-300;
 			margin-left: $grid-unit;
 		}
+
+		// Modified block movers horizontal separator.
+		.block-editor-block-mover__move-button-container {
+			&::before {
+				width: calc(100% - #{$grid-unit-30});
+				background: $gray-300;
+				left: calc(50% + 1px);
+			}
+		}
 	}
 }
 
@@ -164,7 +174,7 @@ $header-toolbar-min-width: 335px;
 			border-bottom: 0;
 		}
 
-		// Modified group borders
+		// Modified group borders.
 		.components-toolbar-group,
 		.components-toolbar {
 			border-right: none;
@@ -172,8 +182,8 @@ $header-toolbar-min-width: 335px;
 			&::after {
 				content: "";
 				width: $border-width;
-				margin-top: $grid-unit + $grid-unit-05;
-				margin-bottom: $grid-unit + $grid-unit-05;
+				margin-top: $grid-unit-15;
+				margin-bottom: $grid-unit-15;
 				background-color: $gray-300;
 				margin-left: $grid-unit;
 			}

package/src/components/layout/hooks.js

@@ -46,16 +46,17 @@ export function useIsSiteEditorLoading() {
 	useEffect( () => {
 		if ( inLoadingPause ) {
 			/*
-			 * We're using an arbitrary 1s timeout here to catch brief moments
-			 * without any resolving selectors that would result in displaying
-			 * brief flickers of loading state and loaded state.
+			 * We're using an arbitrary 100ms timeout here to catch brief
+			 * moments without any resolving selectors that would result in
+			 * displaying brief flickers of loading state and loaded state.
 			 *
 			 * It's worth experimenting with different values, since this also
-			 * adds 1s of artificial delay after loading has finished.
+			 * adds 100ms of artificial delay after loading has finished.
 			 */
+			const ARTIFICIAL_DELAY = 100;
 			const timeout = setTimeout( () => {
 				setLoaded( true );
-			}, 1000 );
+			}, ARTIFICIAL_DELAY );
 
 			return () => {
 				clearTimeout( timeout );

package/src/components/layout/index.js

@@ -31,17 +31,14 @@ import {
 	useBlockCommands,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
 
 /**
  * Internal dependencies
  */
 import Sidebar from '../sidebar';
-import Editor from '../editor';
 import ErrorBoundary from '../error-boundary';
 import { store as editSiteStore } from '../../store';
-import getIsListPage from '../../utils/get-is-list-page';
 import Header from '../header-edit-mode';
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 import SiteHub from '../site-hub';
@@ -53,12 +50,11 @@ 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 PageMain from '../page-main';
 import { useIsSiteEditorLoading } from './hooks';
+import useLayoutAreas from './router';
 
 const { useCommands } = unlock( coreCommandsPrivateApis );
 const { useCommandContext } = unlock( commandsPrivateApis );
-const { useLocation } = unlock( routerPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 const ANIMATION_DURATION = 0.5;
@@ -72,10 +68,7 @@ export default function Layout() {
 	useCommonCommands();
 	useBlockCommands();
 
-	const { params } = useLocation();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const isListPage = getIsListPage( params, isMobileViewport );
-	const isEditorPage = ! isListPage;
 
 	const {
 		isDistractionFree,
@@ -109,26 +102,17 @@ export default function Layout() {
 				select( blockEditorStore ).getBlockSelectionStart(),
 		};
 	}, [] );
-	const isEditing = canvasMode === 'edit';
 	const navigateRegionsProps = useNavigateRegions( {
 		previous: previousShortcut,
 		next: nextShortcut,
 	} );
 	const disableMotion = useReducedMotion();
-	const showSidebar =
-		( isMobileViewport && canvasMode === 'view' && ! isListPage ) ||
-		( ! isMobileViewport && ( canvasMode === 'view' || ! isEditorPage ) );
-	const showCanvas =
-		( isMobileViewport && isEditorPage && isEditing ) ||
-		! isMobileViewport ||
-		! isEditorPage;
-	const isFullCanvas =
-		( isMobileViewport && isListPage ) || ( isEditorPage && isEditing );
 	const [ canvasResizer, canvasSize ] = useResizeObserver();
 	const [ fullResizer ] = useResizeObserver();
 	const isEditorLoading = useIsSiteEditorLoading();
 	const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
 		useState( false );
+	const { areas, widths } = useLayoutAreas();
 
 	// This determines which animation variant should apply to the header.
 	// There is also a `isDistractionFreeHovering` state that gets priority
@@ -154,7 +138,7 @@ export default function Layout() {
 	// Sets the right context for the command palette
 	let commandContext = 'site-editor';
 
-	if ( canvasMode === 'edit' && isEditorPage ) {
+	if ( canvasMode === 'edit' ) {
 		commandContext = 'site-editor-edit';
 	}
 	if ( hasBlockSelected ) {
@@ -185,9 +169,9 @@ export default function Layout() {
 					'edit-site-layout',
 					navigateRegionsProps.className,
 					{
-						'is-distraction-free': isDistractionFree && isEditing,
-						'is-full-canvas': isFullCanvas,
-						'is-edit-mode': isEditing,
+						'is-distraction-free':
+							isDistractionFree && canvasMode === 'edit',
+						'is-full-canvas': canvasMode === 'edit',
 						'has-fixed-toolbar': hasFixedToolbar,
 						'is-block-toolbar-visible': hasBlockSelected,
 					}
@@ -228,7 +212,7 @@ export default function Layout() {
 					/>
 
 					<AnimatePresence initial={ false }>
-						{ isEditorPage && isEditing && (
+						{ canvasMode === 'edit' && (
 							<NavigableRegion
 								key="header"
 								className="edit-site-layout__header"
@@ -272,7 +256,7 @@ export default function Layout() {
 						className="edit-site-layout__sidebar-region"
 					>
 						<AnimatePresence>
-							{ showSidebar && (
+							{ canvasMode === 'view' && (
 								<motion.div
 									initial={ { opacity: 0 } }
 									animate={ { opacity: 1 } }
@@ -296,82 +280,82 @@ export default function Layout() {
 
 					<SavePanel />
 
-					{ showCanvas && (
-						<>
-							{ isListPage && <PageMain /> }
-							{ isEditorPage && (
-								<div className="edit-site-layout__canvas-container">
-									{ canvasResizer }
-									{ !! canvasSize.width && (
-										<motion.div
-											whileHover={
-												isEditorPage &&
-												canvasMode === 'view'
-													? {
-															scale: 1.005,
-															transition: {
-																duration:
-																	disableMotion
-																		? 0
-																		: 0.5,
-																ease: 'easeOut',
-															},
-													  }
-													: {}
+					{ areas.content && canvasMode !== 'edit' && (
+						<div
+							className="edit-site-layout__area"
+							style={ {
+								maxWidth: widths?.content,
+							} }
+						>
+							{ areas.content }
+						</div>
+					) }
+
+					{ areas.preview && (
+						<div className="edit-site-layout__canvas-container">
+							{ canvasResizer }
+							{ !! canvasSize.width && (
+								<motion.div
+									whileHover={
+										canvasMode === 'view'
+											? {
+													scale: 1.005,
+													transition: {
+														duration: disableMotion
+															? 0
+															: 0.5,
+														ease: 'easeOut',
+													},
+											  }
+											: {}
+									}
+									initial={ false }
+									layout="position"
+									className={ classnames(
+										'edit-site-layout__canvas',
+										{
+											'is-right-aligned':
+												isResizableFrameOversized,
+										}
+									) }
+									transition={ {
+										type: 'tween',
+										duration: disableMotion
+											? 0
+											: ANIMATION_DURATION,
+										ease: 'easeOut',
+									} }
+								>
+									<ErrorBoundary>
+										<ResizableFrame
+											isReady={ ! isEditorLoading }
+											isFullWidth={
+												canvasMode === 'edit'
 											}
-											initial={ false }
-											layout="position"
-											className={ classnames(
-												'edit-site-layout__canvas',
-												{
-													'is-right-aligned':
-														isResizableFrameOversized,
-												}
-											) }
-											transition={ {
-												type: 'tween',
-												duration: disableMotion
-													? 0
-													: ANIMATION_DURATION,
-												ease: 'easeOut',
+											defaultSize={ {
+												width:
+													canvasSize.width -
+													24 /* $canvas-padding */,
+												height: canvasSize.height,
+											} }
+											isOversized={
+												isResizableFrameOversized
+											}
+											setIsOversized={
+												setIsResizableFrameOversized
+											}
+											innerContentStyle={ {
+												background:
+													gradientValue ??
+													backgroundColor,
 											} }
 										>
-											<ErrorBoundary>
-												<ResizableFrame
-													isReady={
-														! isEditorLoading
-													}
-													isFullWidth={ isEditing }
-													defaultSize={ {
-														width:
-															canvasSize.width -
-															24 /* $canvas-padding */,
-														height: canvasSize.height,
-													} }
-													isOversized={
-														isResizableFrameOversized
-													}
-													setIsOversized={
-														setIsResizableFrameOversized
-													}
-													innerContentStyle={ {
-														background:
-															gradientValue ??
-															backgroundColor,
-													} }
-												>
-													<Editor
-														isLoading={
-															isEditorLoading
-														}
-													/>
-												</ResizableFrame>
-											</ErrorBoundary>
-										</motion.div>
-									) }
-								</div>
+											{ areas.preview }
+										</ResizableFrame>
+									</ErrorBoundary>
+								</motion.div>
 							) }
-						</>
+						</div>
 					) }
 				</div>
 			</div>

package/src/components/layout/router.js

@@ -0,0 +1,121 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { useIsSiteEditorLoading } from './hooks';
+import Editor from '../editor';
+import PagePages from '../page-pages';
+import PagePatterns from '../page-patterns';
+import PageTemplatesTemplateParts from '../page-templates-template-parts';
+
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+} from '../../utils/constants';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+export default function useLayoutAreas() {
+	const isSiteEditorLoading = useIsSiteEditorLoading();
+	const { params } = useLocation();
+	const { postType, postId, path, layout, isCustom } = params ?? {};
+	// Regular page
+	if ( path === '/page' ) {
+		return {
+			areas: {
+				content: undefined,
+				preview: <Editor isLoading={ isSiteEditorLoading } />,
+			},
+			widths: {
+				content: undefined,
+			},
+		};
+	}
+
+	// List layout is still experimental.
+	// Extracted it here out of the conditionals so it doesn't unintentionally becomes stable.
+	const isListLayout =
+		isCustom !== 'true' &&
+		layout === 'list' &&
+		window?.__experimentalAdminViews;
+
+	if ( path === '/pages' ) {
+		return {
+			areas: {
+				content: <PagePages />,
+				preview: isListLayout && (
+					<Editor isLoading={ isSiteEditorLoading } />
+				),
+			},
+			widths: {
+				content: isListLayout ? 380 : undefined,
+			},
+		};
+	}
+
+	// Regular other post types
+	if ( postType && postId ) {
+		return {
+			areas: {
+				preview: <Editor isLoading={ isSiteEditorLoading } />,
+			},
+		};
+	}
+
+	// Templates
+	if ( path === '/wp_template/all' ) {
+		return {
+			areas: {
+				content: (
+					<PageTemplatesTemplateParts
+						postType={ TEMPLATE_POST_TYPE }
+					/>
+				),
+				preview: isListLayout && (
+					<Editor isLoading={ isSiteEditorLoading } />
+				),
+			},
+			widths: {
+				content: isListLayout ? 380 : undefined,
+			},
+		};
+	}
+
+	// Template parts
+	if ( path === '/wp_template_part/all' ) {
+		return {
+			areas: {
+				content: (
+					<PageTemplatesTemplateParts
+						postType={ TEMPLATE_PART_POST_TYPE }
+					/>
+				),
+				preview: isListLayout && (
+					<Editor isLoading={ isSiteEditorLoading } />
+				),
+			},
+			widths: {
+				content: isListLayout ? 380 : undefined,
+			},
+		};
+	}
+
+	// Patterns
+	if ( path === '/patterns' ) {
+		return {
+			areas: {
+				content: <PagePatterns />,
+			},
+		};
+	}
+
+	// Fallback shows the home page preview
+	return {
+		areas: { preview: <Editor isLoading={ isSiteEditorLoading } /> },
+	};
+}

package/src/components/layout/style.scss

@@ -14,11 +14,6 @@
 	height: $header-height;
 	z-index: z-index(".edit-site-layout__hub");
 
-	.edit-site-layout.is-full-canvas.is-edit-mode & {
-		width: $header-height;
-		padding-right: 0;
-	}
-
 	@include break-medium {
 		width: calc(#{$nav-sidebar-width} - #{$grid-unit-30});
 	}
@@ -30,7 +25,7 @@
 		box-shadow: none;
 
 		@include break-medium {
-			width: auto;
+			width: $header-height;
 			padding-right: 0;
 		}
 	}
@@ -156,20 +151,13 @@
 	}
 }
 
-.edit-site-template-pages-list-view,
-.edit-site-page-pages-list-view {
-	max-width: $nav-sidebar-width;
-}
-
 // This shouldn't be necessary (we should have a way to say that a skeletton is relative
 .edit-site-layout__canvas .interface-interface-skeleton,
-.edit-site-page-pages-preview .interface-interface-skeleton,
 .edit-site-template-pages-preview .interface-interface-skeleton {
 	position: relative !important;
 	min-height: 100% !important;
 }
 
-.edit-site-page-pages-preview,
 .edit-site-template-pages-preview {
 	height: 100%;
 }
@@ -187,7 +175,7 @@
 	justify-content: center;
 	border-bottom: 1px solid transparent;
 
-	.edit-site-layout.is-full-canvas.is-edit-mode & {
+	.edit-site-layout.is-full-canvas & {
 		border-bottom-color: $gray-200;
 		transition: border-bottom-color 0.15s 0.4s ease-out;
 	}
@@ -261,8 +249,7 @@
 	}
 }
 
-.is-edit-mode.is-distraction-free {
-
+.edit-site-layout.is-distraction-free {
 	.edit-site-layout__header-container {
 		height: $header-height;
 		position: absolute;
@@ -300,3 +287,13 @@
 	}
 
 }
+
+.edit-site-layout__area {
+	flex-grow: 1;
+	margin: 0;
+	overflow: hidden;
+	@include break-medium() {
+		border-radius: 8px;
+		margin: $canvas-padding $canvas-padding $canvas-padding 0;
+	}
+}

package/src/components/page/style.scss

@@ -1,14 +1,7 @@
 .edit-site-page {
 	color: $gray-800;
 	background: $white;
-	flex-grow: 1;
-	overflow: hidden;
-	margin: 0;
-	margin-top: $header-height;
-	@include break-medium() {
-		border-radius: 8px;
-		margin: $canvas-padding $canvas-padding $canvas-padding 0;
-	}
+	height: 100%;
 }
 
 .edit-site-page-header {