@wordpress/edit-site 5.24.0 → 5.25.0

package/src/components/layout/index.js

@@ -278,26 +278,27 @@ export default function Layout() {
 						ariaLabel={ __( 'Navigation' ) }
 						className="edit-site-layout__sidebar-region"
 					>
-						<motion.div
-							// The sidebar is needed for routing on mobile
-							// (https://github.com/WordPress/gutenberg/pull/51558/files#r1231763003),
-							// so we can't remove the element entirely. Using `inert` will make
-							// it inaccessible to screen readers and keyboard navigation.
-							inert={ showSidebar ? undefined : 'true' }
-							animate={ { opacity: showSidebar ? 1 : 0 } }
-							transition={ {
-								type: 'tween',
-								duration:
-									// Disable transition in mobile to emulate a full page transition.
-									disableMotion || isMobileViewport
-										? 0
-										: ANIMATION_DURATION,
-								ease: 'easeOut',
-							} }
-							className="edit-site-layout__sidebar"
-						>
-							<Sidebar />
-						</motion.div>
+						<AnimatePresence>
+							{ showSidebar && (
+								<motion.div
+									initial={ { opacity: 0 } }
+									animate={ { opacity: 1 } }
+									exit={ { opacity: 0 } }
+									transition={ {
+										type: 'tween',
+										duration:
+											// Disable transition in mobile to emulate a full page transition.
+											disableMotion || isMobileViewport
+												? 0
+												: ANIMATION_DURATION,
+										ease: 'easeOut',
+									} }
+									className="edit-site-layout__sidebar"
+								>
+									<Sidebar />
+								</motion.div>
+							) }
+						</AnimatePresence>
 					</NavigableRegion>
 
 					<SavePanel />

package/src/components/list/style.scss

@@ -186,3 +186,8 @@
 	display: block;
 	color: $gray-700;
 }
+
+.edit-site-list-title__customized-info {
+	font-size: 1.3em;
+	font-weight: 600;
+}

package/src/components/page/header.js

@@ -19,7 +19,8 @@ export default function Header( { title, subTitle, actions } ) {
 			<FlexBlock className="edit-site-page-header__page-title">
 				<Heading
 					as="h2"
-					level={ 4 }
+					level={ 3 }
+					weight={ 500 }
 					className="edit-site-page-header__title"
 				>
 					{ title }

package/src/components/page/style.scss

@@ -12,8 +12,8 @@
 }
 
 .edit-site-page-header {
-	padding: 0 $grid-unit-40;
-	min-height: $header-height;
+	padding: $grid-unit-20 $grid-unit-40;
+	min-height: $grid-unit * 9;
 	border-bottom: 1px solid $gray-100;
 	background: $white;
 	position: sticky;

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

@@ -12,14 +12,23 @@ import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
 import { dateI18n, getDate, getSettings } from '@wordpress/date';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { DataViews } from '@wordpress/dataviews';
 
 /**
  * Internal dependencies
  */
 import Page from '../page';
 import Link from '../routes/link';
-import { DataViews, viewTypeSupportsMap } from '../dataviews';
 import { default as DEFAULT_VIEWS } from '../sidebar-dataviews/default-views';
+import {
+	ENUMERATION_TYPE,
+	LAYOUT_GRID,
+	LAYOUT_TABLE,
+	LAYOUT_LIST,
+	OPERATOR_IN,
+	OPERATOR_NOT_IN,
+} from '../../utils/constants';
+
 import {
 	trashPostAction,
 	usePermanentlyDeletePostAction,
@@ -31,16 +40,19 @@ import {
 import SideEditor from './side-editor';
 import Media from '../media';
 import { unlock } from '../../lock-unlock';
-import { ENUMERATION_TYPE, OPERATOR_IN } from '../dataviews/constants';
 const { useLocation } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
 const defaultConfigPerViewType = {
-	list: {},
-	grid: {
+	[ LAYOUT_TABLE ]: {},
+	[ LAYOUT_GRID ]: {
 		mediaField: 'featured-image',
 		primaryField: 'title',
 	},
+	[ LAYOUT_LIST ]: {
+		primaryField: 'title',
+		mediaField: 'featured-image',
+	},
 };
 
 function useView( type ) {
@@ -117,7 +129,10 @@ const DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All but 'tra
 export default function PagePages() {
 	const postType = 'page';
 	const [ view, setView ] = useView( postType );
-	const [ selection, setSelection ] = useState( [] );
+	const [ pageId, setPageId ] = useState( null );
+
+	const onSelectionChange = ( items ) =>
+		setPageId( items?.length === 1 ? items[ 0 ].id : null );
 
 	const queryArgs = useMemo( () => {
 		const filters = {};
@@ -133,6 +148,11 @@ export default function PagePages() {
 				filter.operator === OPERATOR_IN
 			) {
 				filters.author = filter.value;
+			} else if (
+				filter.field === 'author' &&
+				filter.operator === OPERATOR_NOT_IN
+			) {
+				filters.author_exclude = filter.value;
 			}
 		} );
 		// We want to provide a different default item for the status filter
@@ -175,15 +195,15 @@ export default function PagePages() {
 				id: 'featured-image',
 				header: __( 'Featured Image' ),
 				getValue: ( { item } ) => item.featured_media,
-				render: ( { item, view: currentView } ) =>
+				render: ( { item } ) =>
 					!! item.featured_media ? (
 						<Media
 							className="edit-site-page-pages__featured-image"
 							id={ item.featured_media }
 							size={
-								currentView.type === 'list'
-									? [ 'thumbnail', 'medium', 'large', 'full' ]
-									: [ 'large', 'full', 'medium', 'thumbnail' ]
+								view.type === LAYOUT_GRID
+									? [ 'large', 'full', 'medium', 'thumbnail' ]
+									: [ 'thumbnail', 'medium', 'large', 'full' ]
 							}
 						/>
 					) : null,
@@ -193,29 +213,29 @@ export default function PagePages() {
 				header: __( 'Title' ),
 				id: 'title',
 				getValue: ( { item } ) => item.title?.rendered || item.slug,
-				render: ( { item, view: { type } } ) => {
+				render: ( { item } ) => {
 					return (
 						<VStack spacing={ 1 }>
-							<Heading as="h3" level={ 5 }>
-								<Link
-									params={ {
-										postId: item.id,
-										postType: item.type,
-										canvas: 'edit',
-									} }
-									onClick={ ( event ) => {
-										if (
-											viewTypeSupportsMap[ type ].preview
-										) {
-											event.preventDefault();
-											setSelection( [ item.id ] );
-										}
-									} }
-								>
-									{ decodeEntities(
+							<Heading as="h3" level={ 5 } weight={ 500 }>
+								{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes(
+									view.type
+								) ? (
+									<Link
+										params={ {
+											postId: item.id,
+											postType: item.type,
+											canvas: 'edit',
+										} }
+									>
+										{ decodeEntities(
+											item.title?.rendered || item.slug
+										) || __( '(no title)' ) }
+									</Link>
+								) : (
+									decodeEntities(
 										item.title?.rendered || item.slug
-									) || __( '(no title)' ) }
-								</Link>
+									) || __( '(no title)' )
+								) }
 							</Heading>
 						</VStack>
 					);
@@ -243,6 +263,9 @@ export default function PagePages() {
 				type: ENUMERATION_TYPE,
 				elements: STATUSES,
 				enableSorting: false,
+				filterBy: {
+					operators: [ OPERATOR_IN ],
+				},
 			},
 			{
 				header: __( 'Date' ),
@@ -257,7 +280,7 @@ export default function PagePages() {
 				},
 			},
 		],
-		[ authors ]
+		[ authors, view ]
 	);
 
 	const permanentlyDeletePostAction = usePermanentlyDeletePostAction();
@@ -307,18 +330,19 @@ export default function PagePages() {
 					isLoading={ isLoadingPages || isLoadingAuthors }
 					view={ view }
 					onChangeView={ onChangeView }
+					onSelectionChange={ onSelectionChange }
+					deferredRendering={ false }
 				/>
 			</Page>
-			{ viewTypeSupportsMap[ view.type ].preview && (
+			{ view.type === LAYOUT_LIST && (
 				<Page>
 					<div className="edit-site-page-pages-preview">
-						{ selection.length === 1 && (
+						{ pageId !== null ? (
 							<SideEditor
-								postId={ selection[ 0 ] }
+								postId={ pageId }
 								postType={ postType }
 							/>
-						) }
-						{ selection.length !== 1 && (
+						) : (
 							<div
 								style={ {
 									display: 'flex',

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

@@ -1,3 +1,5 @@
 .edit-site-page-pages__featured-image {
-	border-radius: $radius-block-ui;
+	border-radius: $grid-unit-05;
+	width: $grid-unit-40;
+	height: $grid-unit-40;
 }

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

@@ -15,7 +15,11 @@ import {
 import { __, _x, isRTL } from '@wordpress/i18n';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { useAsyncList, useViewportMatch } from '@wordpress/compose';
+import {
+	useAsyncList,
+	useViewportMatch,
+	useDebouncedInput,
+} from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -25,7 +29,6 @@ import Grid from './grid';
 import NoPatterns from './no-patterns';
 import usePatterns from './use-patterns';
 import SidebarButton from '../sidebar-button';
-import useDebouncedInput from '../../utils/use-debounced-input';
 import { unlock } from '../../lock-unlock';
 import { PATTERN_SYNC_TYPES, PATTERN_TYPES } from '../../utils/constants';
 import Pagination from './pagination';

package/src/components/page-patterns/rename-menu-item.js

@@ -96,6 +96,7 @@ export default function RenameMenuItem( { item, onClose } ) {
 						<VStack spacing="5">
 							<TextControl
 								__nextHasNoMarginBottom
+								__next40pxDefaultSize
 								label={ __( 'Name' ) }
 								value={ title }
 								onChange={ setTitle }
@@ -104,6 +105,7 @@ export default function RenameMenuItem( { item, onClose } ) {
 
 							<HStack justify="right">
 								<Button
+									__next40pxDefaultSize
 									variant="tertiary"
 									onClick={ () => {
 										setIsModalOpen( false );
@@ -113,7 +115,11 @@ export default function RenameMenuItem( { item, onClose } ) {
 									{ __( 'Cancel' ) }
 								</Button>
 
-								<Button variant="primary" type="submit">
+								<Button
+									__next40pxDefaultSize
+									variant="primary"
+									type="submit"
+								>
 									{ __( 'Save' ) }
 								</Button>
 							</HStack>

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

@@ -8,7 +8,7 @@ import removeAccents from 'remove-accents';
  */
 import {
 	Icon,
-	__experimentalHeading as Heading,
+	__experimentalView as View,
 	__experimentalText as Text,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
@@ -23,6 +23,7 @@ import {
 	BlockPreview,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
+import { DataViews } from '@wordpress/dataviews';
 
 /**
  * Internal dependencies
@@ -30,9 +31,14 @@ import {
 import Page from '../page';
 import Link from '../routes/link';
 import { useAddedBy, AvatarImage } from '../list/added-by';
-import { TEMPLATE_POST_TYPE } from '../../utils/constants';
-import { DataViews } from '../dataviews';
-import { ENUMERATION_TYPE, OPERATOR_IN } from '../dataviews/constants';
+import {
+	TEMPLATE_POST_TYPE,
+	ENUMERATION_TYPE,
+	OPERATOR_IN,
+	OPERATOR_NOT_IN,
+	LAYOUT_GRID,
+	LAYOUT_TABLE,
+} from '../../utils/constants';
 import {
 	useResetTemplateAction,
 	deleteTemplateAction,
@@ -48,15 +54,15 @@ const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
 const EMPTY_ARRAY = [];
 
 const defaultConfigPerViewType = {
-	list: {},
-	grid: {
+	[ LAYOUT_TABLE ]: {},
+	[ LAYOUT_GRID ]: {
 		mediaField: 'preview',
 		primaryField: 'title',
 	},
 };
 
 const DEFAULT_VIEW = {
-	type: 'list',
+	type: LAYOUT_TABLE,
 	search: '',
 	page: 1,
 	perPage: 20,
@@ -77,7 +83,7 @@ function TemplateTitle( { item } ) {
 	const { isCustomized } = useAddedBy( item.type, item.id );
 	return (
 		<VStack spacing={ 1 }>
-			<Heading as="h3" level={ 5 }>
+			<View as="span" className="edit-site-list-title__customized-info">
 				<Link
 					params={ {
 						postId: item.id,
@@ -88,7 +94,7 @@ function TemplateTitle( { item } ) {
 					{ decodeEntities( item.title?.rendered || item.slug ) ||
 						__( '(no title)' ) }
 				</Link>
-			</Heading>
+			</View>
 			{ isCustomized && (
 				<span className="edit-site-list-added-by__customized-info">
 					{ item.type === TEMPLATE_POST_TYPE
@@ -170,11 +176,11 @@ export default function DataviewsTemplates() {
 			{
 				header: __( 'Preview' ),
 				id: 'preview',
-				render: ( { item, view: { type: viewType } } ) => {
+				render: ( { item } ) => {
 					return (
 						<TemplatePreview
 							content={ item.content.raw }
-							viewType={ viewType }
+							viewType={ view.type }
 						/>
 					);
 				},
@@ -223,7 +229,7 @@ export default function DataviewsTemplates() {
 				elements: authors,
 			},
 		],
-		[ authors ]
+		[ authors, view ]
 	);
 
 	const { shownTemplates, paginationInfo } = useMemo( () => {
@@ -261,6 +267,14 @@ export default function DataviewsTemplates() {
 					filteredTemplates = filteredTemplates.filter( ( item ) => {
 						return item.author_text === filter.value;
 					} );
+				} else if (
+					filter.field === 'author' &&
+					filter.operator === OPERATOR_NOT_IN &&
+					!! filter.value
+				) {
+					filteredTemplates = filteredTemplates.filter( ( item ) => {
+						return item.author_text !== filter.value;
+					} );
 				}
 			} );
 		}
@@ -338,7 +352,8 @@ export default function DataviewsTemplates() {
 				isLoading={ isLoadingData }
 				view={ view }
 				onChangeView={ onChangeView }
-				supportedLayouts={ [ 'list', 'grid' ] }
+				supportedLayouts={ [ LAYOUT_TABLE, LAYOUT_GRID ] }
+				deferredRendering={ ! view.hiddenFields?.includes( 'preview' ) }
 			/>
 		</Page>
 	);

package/src/components/preferences-modal/index.js

@@ -41,37 +41,16 @@ export default function EditSitePreferencesModal() {
 		} );
 	};
 
+	const turnOffDistractionFree = () => {
+		setPreference( 'core/edit-site', 'distractionFree', false );
+	};
+
 	const sections = useMemo( () => [
 		{
 			name: 'general',
 			tabLabel: __( 'General' ),
 			content: (
-				<PreferencesModalSection
-					title={ __( 'Appearance' ) }
-					description={ __(
-						'Customize options related to the block editor interface and editing flow.'
-					) }
-				>
-					<EnableFeature
-						featureName="distractionFree"
-						onToggle={ toggleDistractionFree }
-						help={ __(
-							'Reduce visual distractions by hiding the toolbar and other elements to focus on writing.'
-						) }
-						label={ __( 'Distraction free' ) }
-					/>
-					<EnableFeature
-						featureName="focusMode"
-						help={ __(
-							'Highlights the current block and fades other content.'
-						) }
-						label={ __( 'Spotlight mode' ) }
-					/>
-					<EnableFeature
-						featureName="showIconLabels"
-						label={ __( 'Show button text labels' ) }
-						help={ __( 'Show text instead of icons on buttons.' ) }
-					/>
+				<PreferencesModalSection title={ __( 'Interface' ) }>
 					<EnableFeature
 						featureName="showListViewByDefault"
 						help={ __(
@@ -90,25 +69,72 @@ export default function EditSitePreferencesModal() {
 			),
 		},
 		{
-			name: 'blocks',
-			tabLabel: __( 'Blocks' ),
+			name: 'appearance',
+			tabLabel: __( 'Appearance' ),
 			content: (
 				<PreferencesModalSection
-					title={ __( 'Block interactions' ) }
+					title={ __( 'Appearance' ) }
 					description={ __(
-						'Customize how you interact with blocks in the block library and editing canvas.'
+						'Customize the editor interface to suit your needs.'
 					) }
 				>
 					<EnableFeature
-						featureName="keepCaretInsideBlock"
+						featureName="fixedToolbar"
+						onToggle={ turnOffDistractionFree }
+						help={ __(
+							'Access all block and document tools in a single place.'
+						) }
+						label={ __( 'Top toolbar' ) }
+					/>
+					<EnableFeature
+						featureName="distractionFree"
+						onToggle={ toggleDistractionFree }
+						help={ __(
+							'Reduce visual distractions by hiding the toolbar and other elements to focus on writing.'
+						) }
+						label={ __( 'Distraction free' ) }
+					/>
+					<EnableFeature
+						featureName="focusMode"
 						help={ __(
-							'Aids screen readers by stopping text caret from leaving blocks.'
+							'Highlights the current block and fades other content.'
 						) }
-						label={ __( 'Contain text cursor inside block' ) }
+						label={ __( 'Spotlight mode' ) }
 					/>
 				</PreferencesModalSection>
 			),
 		},
+		{
+			name: 'accessibility',
+			tabLabel: __( 'Accessibility' ),
+			content: (
+				<>
+					<PreferencesModalSection
+						title={ __( 'Navigation' ) }
+						description={ __(
+							'Optimize the editing experience for enhanced control.'
+						) }
+					>
+						<EnableFeature
+							featureName="keepCaretInsideBlock"
+							help={ __(
+								'Keeps the text cursor within the block boundaries, aiding users with screen readers by preventing unintentional cursor movement outside the block.'
+							) }
+							label={ __( 'Contain text cursor inside block' ) }
+						/>
+					</PreferencesModalSection>
+					<PreferencesModalSection title={ __( 'Interface' ) }>
+						<EnableFeature
+							featureName="showIconLabels"
+							label={ __( 'Show button text labels' ) }
+							help={ __(
+								'Show text instead of icons on buttons across the interface.'
+							) }
+						/>
+					</PreferencesModalSection>
+				</>
+			),
+		},
 	] );
 	if ( ! isModalActive ) {
 		return null;

package/src/components/routes/use-title.js

@@ -38,8 +38,8 @@ export default function useTitle( title ) {
 		if ( title && siteTitle ) {
 			// @see https://github.com/WordPress/wordpress-develop/blob/94849898192d271d533e09756007e176feb80697/src/wp-admin/admin-header.php#L67-L68
 			const formattedTitle = sprintf(
-				/* translators: Admin screen title. 1: Admin screen name, 2: Network or site name. */
-				__( '%1$s ‹ %2$s — WordPress' ),
+				/* translators: Admin document title. 1: Admin screen name, 2: Network or site name. */
+				__( '%1$s ‹ %2$s ‹ Editor — WordPress' ),
 				decodeEntities( title ),
 				decodeEntities( siteTitle )
 			);
@@ -47,14 +47,7 @@ export default function useTitle( title ) {
 			document.title = formattedTitle;
 
 			// Announce title on route change for screen readers.
-			speak(
-				sprintf(
-					/* translators: The page title that is currently displaying. */
-					__( 'Now displaying: %s' ),
-					document.title
-				),
-				'assertive'
-			);
+			speak( title, 'assertive' );
 		}
 	}, [ title, siteTitle, location ] );
 }

package/src/components/save-button/index.js

@@ -103,6 +103,7 @@ export default function SaveButton( {
 			showTooltip={ showTooltip }
 			icon={ icon }
 			__next40pxDefaultSize={ __next40pxDefaultSize }
+			size="compact"
 		>
 			{ label }
 		</Button>