@wordpress/edit-site 6.9.0 → 6.11.0

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

@@ -31,6 +31,10 @@
 	margin: 0;
 }
 
+.edit-site-global-styles-sidebar .edit-site-global-styles-sidebar__header-actions {
+	flex: 1;
+}
+
 .edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
 	font-size: $default-font-size * 1.2;
 	font-weight: 500;
@@ -75,6 +79,8 @@
 .show-icon-labels {
 	.edit-site-global-styles-sidebar__header {
 		.components-button.has-icon {
+			width: auto;
+
 			// Hide the button icons when labels are set to display...
 			svg {
 				display: none;

package/src/components/layout/animation.js

@@ -41,7 +41,6 @@ function useMovingAnimation( { triggerAnimationOnChange } ) {
 			previous: ref.current && getAbsolutePosition( ref.current ),
 			prevRect: ref.current && ref.current.getBoundingClientRect(),
 		} ),
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ triggerAnimationOnChange ]
 	);
 

package/src/components/layout/index.js

@@ -6,7 +6,6 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
 import {
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
@@ -20,7 +19,6 @@ import {
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { useState, useRef, useEffect } from '@wordpress/element';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { CommandMenu } from '@wordpress/commands';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import {
@@ -28,90 +26,60 @@ import {
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import ErrorBoundary from '../error-boundary';
-import { store as editSiteStore } from '../../store';
 import { default as SiteHub, SiteHubMobile } from '../site-hub';
 import ResizableFrame from '../resizable-frame';
 import { unlock } from '../../lock-unlock';
-import KeyboardShortcutsRegister from '../keyboard-shortcuts/register';
-import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';
+import SaveKeyboardShortcut from '../save-keyboard-shortcut';
 import { useIsSiteEditorLoading } from './hooks';
 import useMovingAnimation from './animation';
 import SidebarContent from '../sidebar';
 import SaveHub from '../save-hub';
 import SavePanel from '../save-panel';
-import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
 
 const { useCommands } = unlock( coreCommandsPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 const { NavigableRegion } = unlock( editorPrivateApis );
+const { useLocation } = unlock( routerPrivateApis );
 
 const ANIMATION_DURATION = 0.3;
 
 export default function Layout( { route } ) {
-	useSyncCanvasModeWithURL();
+	const { params } = useLocation();
+	const { canvas = 'view' } = params;
 	useCommands();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const toggleRef = useRef();
-	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,
-	} );
+	const navigateRegionsProps = useNavigateRegions();
 	const disableMotion = useReducedMotion();
 	const [ canvasResizer, canvasSize ] = useResizeObserver();
 	const isEditorLoading = useIsSiteEditorLoading();
 	const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
 		useState( false );
-	const { key: routeKey, areas, widths } = route;
+	const { name: routeKey, areas, widths } = route;
 	const animationRef = useMovingAnimation( {
-		triggerAnimationOnChange: canvasMode + '__' + routeKey,
+		triggerAnimationOnChange: routeKey + '-' + canvas,
 	} );
 
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
-	const previousCanvaMode = usePrevious( canvasMode );
+	const previousCanvaMode = usePrevious( canvas );
 	useEffect( () => {
 		if ( previousCanvaMode === 'edit' ) {
 			toggleRef.current?.focus();
 		}
 		// Should not depend on the previous canvas mode value but the next.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ canvasMode ] );
-
-	// Synchronizing the URL with the store value of canvasMode happens in an effect
-	// This condition ensures the component is only rendered after the synchronization happens
-	// which prevents any animations due to potential canvasMode value change.
-	if ( canvasMode === 'init' ) {
-		return null;
-	}
+	}, [ canvas ] );
 
 	return (
 		<>
 			<CommandMenu />
-			<KeyboardShortcutsRegister />
-			<KeyboardShortcutsGlobal />
+			{ canvas === 'view' && <SaveKeyboardShortcut /> }
 			<div
 				{ ...navigateRegionsProps }
 				ref={ navigateRegionsProps.ref }
@@ -119,7 +87,7 @@ export default function Layout( { route } ) {
 					'edit-site-layout',
 					navigateRegionsProps.className,
 					{
-						'is-full-canvas': canvasMode === 'edit',
+						'is-full-canvas': canvas === 'edit',
 					}
 				) }
 			>
@@ -134,7 +102,7 @@ export default function Layout( { route } ) {
 							className="edit-site-layout__sidebar-region"
 						>
 							<AnimatePresence>
-								{ canvasMode === 'view' && (
+								{ canvas === 'view' && (
 									<motion.div
 										initial={ { opacity: 0 } }
 										animate={ { opacity: 1 } }
@@ -172,7 +140,7 @@ export default function Layout( { route } ) {
 
 					{ isMobileViewport && areas.mobile && (
 						<div className="edit-site-layout__mobile">
-							{ canvasMode !== 'edit' && (
+							{ canvas !== 'edit' && (
 								<SidebarContent routeKey={ routeKey }>
 									<SiteHubMobile
 										ref={ toggleRef }
@@ -188,7 +156,7 @@ export default function Layout( { route } ) {
 
 					{ ! isMobileViewport &&
 						areas.content &&
-						canvasMode !== 'edit' && (
+						canvas !== 'edit' && (
 							<div
 								className="edit-site-layout__area"
 								style={ {
@@ -199,7 +167,7 @@ export default function Layout( { route } ) {
 							</div>
 						) }
 
-					{ ! isMobileViewport && areas.edit && (
+					{ ! isMobileViewport && areas.edit && canvas !== 'edit' && (
 						<div
 							className="edit-site-layout__area"
 							style={ {
@@ -227,9 +195,7 @@ export default function Layout( { route } ) {
 									<ErrorBoundary>
 										<ResizableFrame
 											isReady={ ! isEditorLoading }
-											isFullWidth={
-												canvasMode === 'edit'
-											}
+											isFullWidth={ canvas === 'edit' }
 											defaultSize={ {
 												width:
 													canvasSize.width -

package/src/components/layout/router.js

@@ -2,31 +2,19 @@
  * WordPress dependencies
  */
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { __ } from '@wordpress/i18n';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import Editor from '../editor';
-import PostList from '../post-list';
-import PagePatterns from '../page-patterns';
-import PageTemplates from '../page-templates';
-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 SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
-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';
-import { PostEdit } from '../post-edit';
+import { store as editSiteStore } from '../../store';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
@@ -73,129 +61,26 @@ function useRedirectOldPaths() {
 	}, [ history, params ] );
 }
 
-export default function useLayoutAreas() {
+export default function useActiveRoute() {
 	const { params } = useLocation();
-	const { postType, postId, path, layout, isCustom, canvas, quickEdit } =
-		params;
-	const hasEditCanvasMode = canvas === 'edit';
 	useRedirectOldPaths();
-
-	// Page list
-	if ( postType === 'page' ) {
-		const isListLayout = layout === 'list' || ! layout;
-		const showQuickEdit = quickEdit && ! isListLayout;
-		return {
-			key: 'pages',
-			areas: {
-				sidebar: (
-					<SidebarNavigationScreen
-						title={ __( 'Pages' ) }
-						backPath={ {} }
-						content={ <DataViewsSidebarContent /> }
-					/>
-				),
-				content: <PostList postType={ postType } />,
-				preview: ! showQuickEdit &&
-					( isListLayout || hasEditCanvasMode ) && <Editor />,
-				mobile: hasEditCanvasMode ? (
-					<Editor />
-				) : (
-					<PostList postType={ postType } />
-				),
-				edit: showQuickEdit && (
-					<PostEdit postType={ postType } postId={ postId } />
-				),
-			},
-			widths: {
-				content: isListLayout ? 380 : undefined,
-				edit: showQuickEdit ? 380 : undefined,
-			},
-		};
-	}
-
-	// Templates
-	if ( postType === TEMPLATE_POST_TYPE ) {
-		const isListLayout = isCustom !== 'true' && layout === 'list';
-		return {
-			key: 'templates',
-			areas: {
-				sidebar: (
-					<SidebarNavigationScreenTemplatesBrowse backPath={ {} } />
-				),
-				content: <PageTemplates />,
-				preview: ( isListLayout || hasEditCanvasMode ) && <Editor />,
-				mobile: hasEditCanvasMode ? <Editor /> : <PageTemplates />,
-			},
-			widths: {
-				content: isListLayout ? 380 : undefined,
-			},
-		};
-	}
-
-	// Patterns
-	if (
-		[ TEMPLATE_PART_POST_TYPE, PATTERN_TYPES.user ].includes( postType )
-	) {
-		return {
-			key: 'patterns',
-			areas: {
-				sidebar: <SidebarNavigationScreenPatterns backPath={ {} } />,
-				content: <PagePatterns />,
-				mobile: hasEditCanvasMode ? <Editor /> : <PagePatterns />,
-				preview: hasEditCanvasMode && <Editor />,
-			},
-		};
-	}
-
-	// Styles
-	if ( path === '/wp_global_styles' ) {
-		return {
-			key: 'styles',
-			areas: {
-				sidebar: (
-					<SidebarNavigationScreenGlobalStyles backPath={ {} } />
-				),
-				preview: <Editor />,
-				mobile: hasEditCanvasMode && <Editor />,
-			},
-		};
-	}
-
-	// Navigation
-	if ( postType === NAVIGATION_POST_TYPE ) {
-		if ( postId ) {
+	const routes = useSelect( ( select ) => {
+		return unlock( select( editSiteStore ) ).getRoutes();
+	}, [] );
+	return useMemo( () => {
+		const matchedRoute = routes.find( ( route ) => route.match( params ) );
+		if ( ! matchedRoute ) {
 			return {
-				key: 'navigation',
-				areas: {
-					sidebar: (
-						<SidebarNavigationScreenNavigationMenu
-							backPath={ { postType: NAVIGATION_POST_TYPE } }
-						/>
-					),
-					preview: <Editor />,
-					mobile: hasEditCanvasMode && <Editor />,
-				},
+				key: 404,
+				areas: {},
+				widths: {},
 			};
 		}
+
 		return {
-			key: 'navigation',
-			areas: {
-				sidebar: (
-					<SidebarNavigationScreenNavigationMenus backPath={ {} } />
-				),
-				preview: <Editor />,
-				mobile: hasEditCanvasMode && <Editor />,
-			},
+			name: matchedRoute.name,
+			areas: matchedRoute.areas,
+			widths: matchedRoute.widths,
 		};
-	}
-
-	// Fallback shows the home page preview
-	return {
-		key: 'default',
-		areas: {
-			sidebar: <SidebarNavigationScreenMain />,
-			preview: <Editor />,
-			mobile: hasEditCanvasMode && <Editor />,
-		},
-	};
+	}, [ routes, params ] );
 }

package/src/components/layout/style.scss

@@ -210,8 +210,8 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 
 	.edit-site-layout__view-mode-toggle-icon {
 		display: flex;
-		height: $grid-unit-80;
-		width: $grid-unit-80;
+		height: $header-height;
+		width: $header-height;
 		justify-content: center;
 		align-items: center;
 	}

package/src/components/page-patterns/delete-category-menu-item.js

@@ -9,7 +9,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { useDispatch } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 
@@ -51,8 +51,8 @@ export default function DeleteCategoryMenuItem( { category, onClose } ) {
 
 			createSuccessNotice(
 				sprintf(
-					/* translators: The pattern category's name */
-					__( '"%s" deleted.' ),
+					/* translators: %s: The pattern category's name */
+					_x( '"%s" deleted.', 'pattern category' ),
 					category.label
 				),
 				{ type: 'snackbar', id: 'pattern-category-delete' }
@@ -91,7 +91,7 @@ export default function DeleteCategoryMenuItem( { category, onClose } ) {
 				className="edit-site-patterns__delete-modal"
 				title={ sprintf(
 					// translators: %s: The pattern category's name.
-					__( 'Delete "%s"?' ),
+					_x( 'Delete "%s"?', 'pattern category' ),
 					decodeEntities( category.label )
 				) }
 				size="medium"

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

@@ -78,6 +78,7 @@ export default function DataviewsPatterns() {
 	const categoryId = categoryIdFromURL || PATTERN_DEFAULT_CATEGORY;
 	const [ view, setView ] = useState( DEFAULT_VIEW );
 	const previousCategoryId = usePrevious( categoryId );
+	const previousPostType = usePrevious( type );
 	const viewSyncStatus = view.filters?.find(
 		( { field } ) => field === 'sync-status'
 	)?.value;
@@ -121,10 +122,10 @@ export default function DataviewsPatterns() {
 
 	// Reset the page number when the category changes.
 	useEffect( () => {
-		if ( previousCategoryId !== categoryId ) {
+		if ( previousCategoryId !== categoryId || previousPostType !== type ) {
 			setView( ( prevView ) => ( { ...prevView, page: 1 } ) );
 		}
-	}, [ categoryId, previousCategoryId ] );
+	}, [ categoryId, previousCategoryId, previousPostType, type ] );
 	const { data, paginationInfo } = useMemo( () => {
 		// Search is managed server-side as well as filters for patterns.
 		// However, the author filter in template parts is done client-side.

package/src/components/page-patterns/use-pattern-settings.js

@@ -43,7 +43,7 @@ export default function usePatternSettings() {
 		return {
 			...restStoredSettings,
 			__experimentalBlockPatterns: blockPatterns,
-			__unstableIsPreviewMode: true,
+			isPreviewMode: true,
 		};
 	}, [ storedSettings, blockPatterns ] );
 

package/src/components/page-templates/index.js

@@ -74,7 +74,6 @@ const defaultLayouts = {
 		fields: [ 'title', 'description', 'author' ],
 		layout: {
 			primaryField: 'title',
-			mediaField: 'preview',
 		},
 	},
 };

package/src/components/pagination/index.js

@@ -65,7 +65,7 @@ export default function Pagination( {
 			</HStack>
 			<Text variant="muted">
 				{ sprintf(
-					// translators: %1$s: Current page number, %2$s: Total number of pages.
+					// translators: 1: Current page number. 2: Total number of pages.
 					_x( '%1$s of %2$s', 'paging' ),
 					currentPage,
 					numPages

package/src/components/post-edit/index.js

@@ -60,18 +60,40 @@ function PostEditForm( { postType, postId } ) {
 	);
 	const form = {
 		type: 'panel',
-		fields: [ 'title', 'status', 'date', 'author', 'comment_status' ],
+		fields: [
+			'featured_media',
+			'title',
+			'author',
+			'date',
+			'slug',
+			'parent',
+			'comment_status',
+		],
 	};
+
+	const fieldsWithBulkEditSupport = [
+		'title',
+		'status',
+		'date',
+		'author',
+		'comment_status',
+	];
+
 	const onChange = ( edits ) => {
 		for ( const id of ids ) {
 			if (
+				edits.status &&
 				edits.status !== 'future' &&
-				record.status === 'future' &&
+				record?.status === 'future' &&
 				new Date( record.date ) > new Date()
 			) {
 				edits.date = null;
 			}
-			if ( edits.status === 'private' && record.password ) {
+			if (
+				edits.status &&
+				edits.status === 'private' &&
+				record.password
+			) {
 				edits.password = '';
 			}
 			editEntityRecord( 'postType', postType, id, edits );
@@ -95,7 +117,16 @@ function PostEditForm( { postType, postId } ) {
 			<DataForm
 				data={ ids.length === 1 ? record : multiEdits }
 				fields={ fields }
-				form={ form }
+				form={
+					ids.length === 1
+						? form
+						: {
+								...form,
+								fields: form.fields.filter( ( field ) =>
+									fieldsWithBulkEditSupport.includes( field )
+								),
+						  }
+				}
 				onChange={ onChange }
 			/>
 		</VStack>

package/src/components/post-fields/index.js

@@ -8,6 +8,7 @@ import clsx from 'clsx';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
+import { featuredImageField, slugField, parentField } from '@wordpress/fields';
 import {
 	createInterpolateElement,
 	useMemo,
@@ -33,11 +34,9 @@ import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import {
 	LAYOUT_GRID,
 	LAYOUT_TABLE,
-	LAYOUT_LIST,
 	OPERATOR_IS_ANY,
 } from '../../utils/constants';
-import { default as Link, useLink } from '../routes/link';
-import Media from '../media';
+import { default as Link } from '../routes/link';
 
 // See https://github.com/WordPress/gutenberg/issues/55886
 // We do not support custom statutes at the moment.
@@ -81,46 +80,6 @@ const getFormattedDate = ( dateToDisplay ) =>
 		getDate( dateToDisplay )
 	);
 
-function FeaturedImage( { item, viewType } ) {
-	const isDisabled = item.status === 'trash';
-	const { onClick } = useLink( {
-		postId: item.id,
-		postType: item.type,
-		canvas: 'edit',
-	} );
-	const hasMedia = !! item.featured_media;
-	const size =
-		viewType === LAYOUT_GRID
-			? [ 'large', 'full', 'medium', 'thumbnail' ]
-			: [ 'thumbnail', 'medium', 'large', 'full' ];
-	const media = hasMedia ? (
-		<Media
-			className="edit-site-post-list__featured-image"
-			id={ item.featured_media }
-			size={ size }
-		/>
-	) : null;
-	const renderButton = viewType !== LAYOUT_LIST && ! isDisabled;
-	return (
-		<div
-			className={ `edit-site-post-list__featured-image-wrapper is-layout-${ viewType }` }
-		>
-			{ renderButton ? (
-				<button
-					className="edit-site-post-list__featured-image-button"
-					type="button"
-					onClick={ onClick }
-					aria-label={ item.title?.rendered || __( '(no title)' ) }
-				>
-					{ media }
-				</button>
-			) : (
-				media
-			) }
-		</div>
-	);
-}
-
 function PostStatusField( { item } ) {
 	const status = STATUSES.find( ( { value } ) => value === item.status );
 	const label = status?.label || item.status;
@@ -190,15 +149,7 @@ function usePostFields( viewType ) {
 
 	const fields = useMemo(
 		() => [
-			{
-				id: 'featured-image',
-				label: __( 'Featured Image' ),
-				getValue: ( { item } ) => item.featured_media,
-				render: ( { item } ) => (
-					<FeaturedImage item={ item } viewType={ viewType } />
-				),
-				enableSorting: false,
-			},
+			featuredImageField,
 			{
 				label: __( 'Title' ),
 				id: 'title',
@@ -303,7 +254,7 @@ function usePostFields( viewType ) {
 					if ( isDraftOrPrivate ) {
 						return createInterpolateElement(
 							sprintf(
-								/* translators: %s: page creation date */
+								/* translators: %s: page creation or modification date. */
 								__( '<span>Modified: <time>%s</time></span>' ),
 								getFormattedDate( item.date )
 							),
@@ -354,7 +305,7 @@ function usePostFields( viewType ) {
 					if ( isPending ) {
 						return createInterpolateElement(
 							sprintf(
-								/* translators: %s: the newest of created or modified date for the page */
+								/* translators: %s: page creation or modification date. */
 								__( '<span>Modified: <time>%s</time></span>' ),
 								getFormattedDate( dateToDisplay )
 							),
@@ -369,6 +320,8 @@ function usePostFields( viewType ) {
 					return <time>{ getFormattedDate( item.date ) }</time>;
 				},
 			},
+			slugField,
+			parentField,
 			{
 				id: 'comment_status',
 				label: __( 'Discussion' ),

package/src/components/post-fields/style.scss

@@ -0,0 +1,3 @@
+.components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
+	z-index: z-index(".components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown");
+}

package/src/components/post-list/index.js

@@ -412,7 +412,7 @@ export default function PostList( { postType } ) {
 							size="compact"
 							isPressed={ quickEdit }
 							icon={ drawerRight }
-							label={ __( 'Toggle details panel' ) }
+							label={ __( 'Details' ) }
 							onClick={ () => {
 								history.push( {
 									...location.params,

package/src/components/post-list/style.scss

@@ -66,7 +66,7 @@
 
 .edit-site-post-list__title-badge {
 	background: $gray-100;
-	color: $gray-700;
+	color: $gray-800;
 	padding: 0 $grid-unit-05;
 	border-radius: $radius-small;
 	font-size: 12px;