@wordpress/edit-site 6.10.0 → 6.11.0

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/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;

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

@@ -12,7 +12,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  */
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 import Layout from '../layout';
-import useLayoutAreas from './router';
+import useActiveRoute from './router';
 import { unlock } from '../../lock-unlock';
 
 const { RouterProvider } = unlock( routerPrivateApis );
@@ -21,7 +21,7 @@ const { GlobalStylesProvider } = unlock( editorPrivateApis );
 function PostsLayout() {
 	// This ensures the edited entity id and type are initialized properly.
 	useInitEditedEntityFromURL();
-	const route = useLayoutAreas();
+	const route = useActiveRoute();
 	return <Layout route={ route } />;
 }
 

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

@@ -17,7 +17,7 @@ import PostList from '../post-list';
 
 const { useLocation } = unlock( routerPrivateApis );
 
-export default function useLayoutAreas() {
+export default function useActiveRoute() {
 	const { params = {} } = useLocation();
 	const { postType, layout, canvas } = params;
 	const labels = useSelect(
@@ -31,7 +31,7 @@ export default function useLayoutAreas() {
 	if ( [ 'post' ].includes( postType ) ) {
 		const isListLayout = layout === 'list' || ! layout;
 		return {
-			key: 'posts-list',
+			name: 'posts-list',
 			areas: {
 				sidebar: (
 					<SidebarNavigationScreen
@@ -59,7 +59,7 @@ export default function useLayoutAreas() {
 
 	// Fallback shows the home page preview
 	return {
-		key: 'default',
+		name: 'default',
 		areas: {
 			sidebar: <SidebarNavigationScreenMain />,
 			preview: <Editor isPostsList />,

package/src/components/resizable-frame/index.js

@@ -13,14 +13,15 @@ import {
 	__unstableMotion as motion,
 } from '@wordpress/components';
 import { useInstanceId, useReducedMotion } from '@wordpress/compose';
-import { useDispatch, useSelect } from '@wordpress/data';
 import { __, isRTL } from '@wordpress/i18n';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
+
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 // Removes the inline styles in the drag handles.
 const HANDLE_STYLES_OVERRIDE = {
@@ -86,6 +87,9 @@ function ResizableFrame( {
 	defaultSize,
 	innerContentStyle,
 } ) {
+	const history = useHistory();
+	const { params } = useLocation();
+	const { canvas = 'view' } = params;
 	const disableMotion = useReducedMotion();
 	const [ frameSize, setFrameSize ] = useState( INITIAL_FRAME_SIZE );
 	// The width of the resizable frame when a new resize gesture starts.
@@ -93,11 +97,7 @@ function ResizableFrame( {
 	const [ isResizing, setIsResizing ] = useState( false );
 	const [ shouldShowHandle, setShouldShowHandle ] = useState( false );
 	const [ resizeRatio, setResizeRatio ] = useState( 1 );
-	const canvasMode = useSelect(
-		( select ) => unlock( select( editSiteStore ) ).getCanvasMode(),
-		[]
-	);
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+
 	const FRAME_TRANSITION = { type: 'tween', duration: isResizing ? 0 : 0.5 };
 	const frameRef = useRef( null );
 	const resizableHandleHelpId = useInstanceId(
@@ -158,7 +158,16 @@ function ResizableFrame( {
 			setFrameSize( INITIAL_FRAME_SIZE );
 		} else {
 			// Trigger full screen if the frame is resized far enough to the left.
-			setCanvasMode( 'edit' );
+			history.push(
+				{
+					...params,
+					canvas: 'edit',
+				},
+				undefined,
+				{
+					transition: 'canvas-mode-edit-transition',
+				}
+			);
 		}
 	};
 
@@ -237,7 +246,7 @@ function ResizableFrame( {
 				}
 			} }
 			whileHover={
-				canvasMode === 'view'
+				canvas === 'view'
 					? {
 							scale: 1.005,
 							transition: {
@@ -275,7 +284,7 @@ function ResizableFrame( {
 			onMouseOver={ () => setShouldShowHandle( true ) }
 			onMouseOut={ () => setShouldShowHandle( false ) }
 			handleComponent={ {
-				[ isRTL() ? 'right' : 'left' ]: canvasMode === 'view' && (
+				[ isRTL() ? 'right' : 'left' ]: canvas === 'view' && (
 					<>
 						<Tooltip text={ __( 'Drag to resize' ) }>
 							{ /* Disable reason: role="separator" does in fact support aria-valuenow */ }

package/src/components/revisions/index.js

@@ -53,7 +53,10 @@ function Revisions( { userConfig, blocks } ) {
 		[]
 	);
 	const settings = useMemo(
-		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
+		() => ( {
+			...originalSettings,
+			isPreviewMode: true,
+		} ),
 		[ originalSettings ]
 	);
 

package/src/components/save-keyboard-shortcut/index.js

@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import {
+	useShortcut,
+	store as keyboardShortcutsStore,
+} from '@wordpress/keyboard-shortcuts';
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+const shortcutName = 'core/edit-site/save';
+
+/**
+ * Register the save keyboard shortcut in view mode.
+ *
+ * @return {null} Returns null.
+ */
+export default function SaveKeyboardShortcut() {
+	const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
+		useSelect( coreStore );
+	const { hasNonPostEntityChanges, isPostSavingLocked } =
+		useSelect( editorStore );
+	const { savePost } = useDispatch( editorStore );
+	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
+	const { registerShortcut, unregisterShortcut } = useDispatch(
+		keyboardShortcutsStore
+	);
+	useEffect( () => {
+		registerShortcut( {
+			name: shortcutName,
+			category: 'global',
+			description: __( 'Save your changes.' ),
+			keyCombination: {
+				modifier: 'primary',
+				character: 's',
+			},
+		} );
+		return () => {
+			unregisterShortcut( shortcutName );
+		};
+	}, [ registerShortcut, unregisterShortcut ] );
+
+	useShortcut( 'core/edit-site/save', ( event ) => {
+		event.preventDefault();
+		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+		const hasDirtyEntities = !! dirtyEntityRecords.length;
+		const isSaving = dirtyEntityRecords.some( ( record ) =>
+			isSavingEntityRecord( record.kind, record.name, record.key )
+		);
+		if ( ! hasDirtyEntities || isSaving ) {
+			return;
+		}
+		if ( hasNonPostEntityChanges() ) {
+			setIsSaveViewOpened( true );
+		} else if ( ! isPostSavingLocked() ) {
+			savePost();
+		}
+	} );
+
+	return null;
+}