@wordpress/edit-site 5.28.2 → 5.28.3

package/src/components/global-styles/font-library-modal/font-collection.js

@@ -1,11 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { useContext, useEffect, useState, useMemo } from '@wordpress/element';
+import {
+	useContext,
+	useEffect,
+	useState,
+	useMemo,
+	createInterpolateElement,
+} from '@wordpress/element';
 import {
 	__experimentalSpacer as Spacer,
 	__experimentalInputControl as InputControl,
 	__experimentalText as Text,
+	__experimentalHStack as HStack,
 	SelectControl,
 	Spinner,
 	Icon,
@@ -14,7 +21,7 @@ import {
 	Button,
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
-import { __, _x } from '@wordpress/i18n';
+import { sprintf, __, _x } from '@wordpress/i18n';
 import { search, closeSmall } from '@wordpress/icons';
 
 /**
@@ -22,7 +29,6 @@ import { search, closeSmall } from '@wordpress/icons';
  */
 import TabPanelLayout from './tab-panel-layout';
 import { FontLibraryContext } from './context';
-import FontsGrid from './fonts-grid';
 import FontCard from './font-card';
 import filterFonts from './utils/filter-fonts';
 import CollectionFontDetails from './collection-font-details';
@@ -48,6 +54,7 @@ function FontCollection( { slug } ) {
 
 	const [ selectedFont, setSelectedFont ] = useState( null );
 	const [ fontsToInstall, setFontsToInstall ] = useState( [] );
+	const [ page, setPage ] = useState( 1 );
 	const [ filters, setFilters ] = useState( {} );
 	const [ renderConfirmDialog, setRenderConfirmDialog ] = useState(
 		requiresPermission && ! getGoogleFontsPermissionFromStorage()
@@ -109,22 +116,34 @@ function FontCollection( { slug } ) {
 		[ collectionFonts, filters ]
 	);
 
+	// NOTE: The height of the font library modal unavailable to use for rendering font family items is roughly 417px
+	// The height of each font family item is 61px.
+	const pageSize = Math.floor( ( window.innerHeight - 417 ) / 61 );
+	const totalPages = Math.ceil( fonts.length / pageSize );
+	const itemsStart = ( page - 1 ) * pageSize;
+	const itemsLimit = page * pageSize;
+	const items = fonts.slice( itemsStart, itemsLimit );
+
 	const handleCategoryFilter = ( category ) => {
 		setFilters( { ...filters, category } );
+		setPage( 1 );
 	};
 
 	const handleUpdateSearchInput = ( value ) => {
 		setFilters( { ...filters, search: value } );
+		setPage( 1 );
 	};
 
 	const debouncedUpdateSearchInput = debounce( handleUpdateSearchInput, 300 );
 
 	const resetFilters = () => {
 		setFilters( {} );
+		setPage( 1 );
 	};
 
 	const resetSearch = () => {
 		setFilters( { ...filters, search: '' } );
+		setPage( 1 );
 	};
 
 	const handleUnselectFont = () => {
@@ -186,6 +205,24 @@ function FontCollection( { slug } ) {
 		resetFontsToInstall();
 	};
 
+	let footerComponent = null;
+	if ( selectedFont ) {
+		footerComponent = (
+			<InstallFooter
+				handleInstall={ handleInstall }
+				isDisabled={ fontsToInstall.length === 0 }
+			/>
+		);
+	} else if ( ! renderConfirmDialog && totalPages > 1 ) {
+		footerComponent = (
+			<PaginationFooter
+				page={ page }
+				totalPages={ totalPages }
+				setPage={ setPage }
+			/>
+		);
+	}
+
 	return (
 		<TabPanelLayout
 			title={
@@ -198,12 +235,7 @@ function FontCollection( { slug } ) {
 			}
 			notice={ notice }
 			handleBack={ !! selectedFont && handleUnselectFont }
-			footer={
-				<Footer
-					handleInstall={ handleInstall }
-					isDisabled={ fontsToInstall.length === 0 }
-				/>
-			}
+			footer={ footerComponent }
 		>
 			{ renderConfirmDialog && (
 				<>
@@ -275,8 +307,8 @@ function FontCollection( { slug } ) {
 			) }
 
 			{ ! renderConfirmDialog && ! selectedFont && (
-				<FontsGrid>
-					{ fonts.map( ( font ) => (
+				<div className="font-library-modal__fonts-grid__main">
+					{ items.map( ( font ) => (
 						<FontCard
 							key={ font.font_family_settings.slug }
 							font={ font.font_family_settings }
@@ -285,13 +317,86 @@ function FontCollection( { slug } ) {
 							} }
 						/>
 					) ) }
-				</FontsGrid>
+				</div>
 			) }
 		</TabPanelLayout>
 	);
 }
 
-function Footer( { handleInstall, isDisabled } ) {
+function PaginationFooter( { page, totalPages, setPage } ) {
+	return (
+		<Flex justify="center">
+			<Button
+				label={ __( 'First page' ) }
+				size="compact"
+				onClick={ () => setPage( 1 ) }
+				disabled={ page === 1 }
+				__experimentalIsFocusable
+			>
+				<span>«</span>
+			</Button>
+			<Button
+				label={ __( 'Previous page' ) }
+				size="compact"
+				onClick={ () => setPage( page - 1 ) }
+				disabled={ page === 1 }
+				__experimentalIsFocusable
+			>
+				<span>‹</span>
+			</Button>
+			<HStack justify="flex-start" expanded={ false } spacing={ 2 }>
+				{ createInterpolateElement(
+					sprintf(
+						// translators: %s: Total number of pages.
+						_x( 'Page <CurrenPageControl /> of %s', 'paging' ),
+						totalPages
+					),
+					{
+						CurrenPageControl: (
+							<SelectControl
+								aria-label={ __( 'Current page' ) }
+								value={ page }
+								options={ [ ...Array( totalPages ) ].map(
+									( e, i ) => {
+										return {
+											label: i + 1,
+											value: i + 1,
+										};
+									}
+								) }
+								onChange={ ( newPage ) =>
+									setPage( parseInt( newPage ) )
+								}
+								size={ 'compact' }
+								__nextHasNoMarginBottom
+							/>
+						),
+					}
+				) }
+			</HStack>
+			<Button
+				label={ __( 'Next page' ) }
+				size="compact"
+				onClick={ () => setPage( page + 1 ) }
+				disabled={ page === totalPages }
+				__experimentalIsFocusable
+			>
+				<span>›</span>
+			</Button>
+			<Button
+				label={ __( 'Last page' ) }
+				size="compact"
+				onClick={ () => setPage( totalPages ) }
+				disabled={ page === totalPages }
+				__experimentalIsFocusable
+			>
+				<span>»</span>
+			</Button>
+		</Flex>
+	);
+}
+
+function InstallFooter( { handleInstall, isDisabled } ) {
 	const { isInstalling } = useContext( FontLibraryContext );
 
 	return (

package/src/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js

@@ -24,7 +24,7 @@ function GoogleFontsConfirmDialog() {
 		<div className="font-library__google-fonts-confirm">
 			<Card>
 				<CardBody>
-					<Text as="h3">Connect to Google Fonts</Text>
+					<Text as="h3">{ __( 'Connect to Google Fonts' ) }</Text>
 					<Spacer margin={ 6 } />
 					<Text as="p">
 						{ __(

package/src/components/global-styles/font-library-modal/installed-fonts.js

@@ -7,6 +7,7 @@ import {
 	privateApis as componentsPrivateApis,
 	__experimentalHStack as HStack,
 	__experimentalSpacer as Spacer,
+	__experimentalText as Text,
 	Button,
 	Spinner,
 	FlexItem,
@@ -17,7 +18,6 @@ import {
  */
 import TabPanelLayout from './tab-panel-layout';
 import { FontLibraryContext } from './context';
-import FontsGrid from './fonts-grid';
 import LibraryFontDetails from './library-font-details';
 import LibraryFontCard from './library-font-card';
 import ConfirmDeleteDialog from './confirm-delete-dialog';
@@ -123,36 +123,38 @@ function InstalledFonts() {
 					) }
 					{ baseCustomFonts.length > 0 && (
 						<>
-							<FontsGrid>
-								{ baseCustomFonts.map( ( font ) => (
-									<LibraryFontCard
-										font={ font }
-										key={ font.slug }
-										onClick={ () => {
-											handleSelectFont( font );
-										} }
-									/>
-								) ) }
-							</FontsGrid>
+							{ baseCustomFonts.map( ( font ) => (
+								<LibraryFontCard
+									font={ font }
+									key={ font.slug }
+									onClick={ () => {
+										handleSelectFont( font );
+									} }
+								/>
+							) ) }
 							<Spacer margin={ 8 } />
 						</>
 					) }
 
 					{ baseThemeFonts.length > 0 && (
 						<>
-							<FontsGrid title={ __( 'Theme Fonts' ) }>
-								{ baseThemeFonts.map( ( font ) => (
-									<LibraryFontCard
-										font={ font }
-										key={ font.slug }
-										onClick={ () => {
-											handleSelectFont( font );
-										} }
-									/>
-								) ) }
-							</FontsGrid>
+							<Text className="font-library-modal__subtitle">
+								{ __( 'Theme Fonts' ) }
+							</Text>
+
+							<Spacer margin={ 2 } />
+							{ baseThemeFonts.map( ( font ) => (
+								<LibraryFontCard
+									font={ font }
+									key={ font.slug }
+									onClick={ () => {
+										handleSelectFont( font );
+									} }
+								/>
+							) ) }
 						</>
 					) }
+					<Spacer margin={ 16 } />
 				</>
 			) }
 

package/src/components/global-styles/font-library-modal/style.scss

@@ -36,11 +36,8 @@
 	}
 }
 
-.font-library-modal__fonts-grid {
-	.font-library-modal__fonts-grid__main {
-		display: flex;
-		flex-direction: column;
-	}
+.font-library-modal__tabpanel-layout .components-base-control__field {
+	margin-bottom: 0;
 }
 
 .font-library-modal__font-card {

package/src/components/layout/index.js

@@ -251,47 +251,64 @@ export default function Layout() {
 						The NavigableRegion must always be rendered and not use
 						`inert` otherwise `useNavigateRegions` will fail.
 					*/ }
-					<NavigableRegion
-						ariaLabel={ __( 'Navigation' ) }
-						className="edit-site-layout__sidebar-region"
-					>
-						<AnimatePresence>
-							{ canvasMode === 'view' && (
-								<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>
+					{ ( ! isMobileViewport ||
+						( isMobileViewport && ! areas.mobile ) ) && (
+						<NavigableRegion
+							ariaLabel={ __( 'Navigation' ) }
+							className="edit-site-layout__sidebar-region"
+						>
+							<AnimatePresence>
+								{ canvasMode === 'view' && (
+									<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 />
 
-					{ areas.content && canvasMode !== 'edit' && (
+					{ isMobileViewport && areas.mobile && (
 						<div
-							className="edit-site-layout__area"
+							className="edit-site-layout__mobile"
 							style={ {
 								maxWidth: widths?.content,
 							} }
 						>
-							{ areas.content }
+							{ areas.mobile }
 						</div>
 					) }
 
-					{ areas.preview && (
+					{ ! isMobileViewport &&
+						areas.content &&
+						canvasMode !== 'edit' && (
+							<div
+								className="edit-site-layout__area"
+								style={ {
+									maxWidth: widths?.content,
+								} }
+							>
+								{ areas.content }
+							</div>
+						) }
+
+					{ ! isMobileViewport && areas.preview && (
 						<div className="edit-site-layout__canvas-container">
 							{ canvasResizer }
 							{ !! canvasSize.width && (

package/src/components/layout/router.js

@@ -23,13 +23,21 @@ const { useLocation } = unlock( routerPrivateApis );
 export default function useLayoutAreas() {
 	const isSiteEditorLoading = useIsSiteEditorLoading();
 	const { params } = useLocation();
-	const { postType, postId, path, layout, isCustom } = params ?? {};
+	const { postType, postId, path, layout, isCustom, canvas } = params ?? {};
+
+	// Note: Since "sidebar" is not yet supported here,
+	// returning undefined from "mobile" means show the sidebar.
+
 	// Regular page
 	if ( path === '/page' ) {
 		return {
 			areas: {
 				content: undefined,
 				preview: <Editor isLoading={ isSiteEditorLoading } />,
+				mobile:
+					canvas === 'edit' ? (
+						<Editor isLoading={ isSiteEditorLoading } />
+					) : undefined,
 			},
 			widths: {
 				content: undefined,
@@ -63,6 +71,10 @@ export default function useLayoutAreas() {
 		return {
 			areas: {
 				preview: <Editor isLoading={ isSiteEditorLoading } />,
+				mobile:
+					canvas === 'edit' ? (
+						<Editor isLoading={ isSiteEditorLoading } />
+					) : undefined,
 			},
 		};
 	}
@@ -79,6 +91,11 @@ export default function useLayoutAreas() {
 				preview: isListLayout && (
 					<Editor isLoading={ isSiteEditorLoading } />
 				),
+				mobile: (
+					<PageTemplatesTemplateParts
+						postType={ TEMPLATE_POST_TYPE }
+					/>
+				),
 			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
@@ -98,6 +115,11 @@ export default function useLayoutAreas() {
 				preview: isListLayout && (
 					<Editor isLoading={ isSiteEditorLoading } />
 				),
+				mobile: (
+					<PageTemplatesTemplateParts
+						postType={ TEMPLATE_PART_POST_TYPE }
+					/>
+				),
 			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
@@ -110,12 +132,19 @@ export default function useLayoutAreas() {
 		return {
 			areas: {
 				content: <PagePatterns />,
+				mobile: <PagePatterns />,
 			},
 		};
 	}
 
 	// Fallback shows the home page preview
 	return {
-		areas: { preview: <Editor isLoading={ isSiteEditorLoading } /> },
+		areas: {
+			preview: <Editor isLoading={ isSiteEditorLoading } />,
+			mobile:
+				canvas === 'edit' ? (
+					<Editor isLoading={ isSiteEditorLoading } />
+				) : undefined,
+		},
 	};
 }

package/src/components/layout/style.scss

@@ -83,6 +83,12 @@
 	flex-direction: column;
 }
 
+.edit-site-layout__mobile {
+	position: relative;
+	width: 100%;
+	z-index: z-index(".edit-site-layout__canvas-container");
+}
+
 .edit-site-layout__canvas-container {
 	position: relative;
 	flex-grow: 1;
@@ -147,6 +153,7 @@
 }
 
 // This shouldn't be necessary (we should have a way to say that a skeletton is relative
+.edit-site-layout__mobile .interface-interface-skeleton,
 .edit-site-layout__canvas .interface-interface-skeleton,
 .edit-site-template-pages-preview .interface-interface-skeleton {
 	position: relative !important;

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

@@ -225,6 +225,12 @@
  * TODO: when this becomes stable, consolidate styles with the above.
  */
 .edit-site-page-patterns-dataviews {
+	margin-top: 60px;
+
+	@include break-medium {
+		margin-top: 0;
+	}
+
 	.page-patterns-preview-field {
 		display: flex;
 		flex-direction: column;
@@ -283,6 +289,10 @@
 		text-overflow: ellipsis;
 		color: inherit;
 	}
+
+	.dataviews-pagination {
+		z-index: z-index(".edit-site-patterns__dataviews-list-pagination");
+	}
 }
 
 .dataviews-action-modal__duplicate-pattern {

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

@@ -111,6 +111,7 @@ const selectTemplatePartsAsPatterns = createSelector(
 const selectThemePatterns = createSelector(
 	( select ) => {
 		const { getSettings } = unlock( select( editSiteStore ) );
+		const { getIsResolving } = select( coreStore );
 		const settings = getSettings();
 		const blockPatterns =
 			settings.__experimentalAdditionalBlockPatterns ??
@@ -136,19 +137,23 @@ const selectThemePatterns = createSelector(
 					__unstableSkipMigrationLogs: true,
 				} ),
 			} ) );
-
-		return { patterns, isResolving: false };
+		return { patterns, isResolving: getIsResolving( 'getBlockPatterns' ) };
 	},
 	( select ) => [
 		select( coreStore ).getBlockPatterns(),
+		select( coreStore ).getIsResolving( 'getBlockPatterns' ),
 		unlock( select( editSiteStore ) ).getSettings(),
 	]
 );
 
 const selectPatterns = createSelector(
 	( select, categoryId, syncStatus, search = '' ) => {
-		const { patterns: themePatterns } = selectThemePatterns( select );
-		const { patterns: userPatterns } = selectUserPatterns( select );
+		const {
+			patterns: themePatterns,
+			isResolving: isResolvingThemePatterns,
+		} = selectThemePatterns( select );
+		const { patterns: userPatterns, isResolving: isResolvingUserPatterns } =
+			selectUserPatterns( select );
 
 		let patterns = [
 			...( themePatterns || [] ),
@@ -176,7 +181,10 @@ const selectPatterns = createSelector(
 				hasCategory: ( item ) => ! item.hasOwnProperty( 'categories' ),
 			} );
 		}
-		return { patterns, isResolving: false };
+		return {
+			patterns,
+			isResolving: isResolvingThemePatterns || isResolvingUserPatterns,
+		};
 	},
 	( select ) => [
 		selectThemePatterns( select ),

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

@@ -429,6 +429,7 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 
 	return (
 		<Page
+			className="edit-site-page-template-template-parts-dataviews"
 			title={
 				postType === TEMPLATE_POST_TYPE
 					? __( 'Templates' )

package/src/components/page-templates-template-parts/style.scss

@@ -58,3 +58,9 @@
 .page-templates-description {
 	white-space: normal;
 }
+
+.edit-site-page-template-template-parts-dataviews {
+	.dataviews-pagination {
+		z-index: z-index(".edit-site-templates__dataviews-list-pagination");
+	}
+}

package/src/components/sidebar/index.js

@@ -13,6 +13,7 @@ import {
 } from '@wordpress/components';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { __ } from '@wordpress/i18n';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -52,6 +53,7 @@ function SidebarScreenWrapper( { className, ...props } ) {
 
 function SidebarScreens() {
 	useSyncPathWithURL();
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
 
 	return (
 		<>
@@ -82,9 +84,11 @@ function SidebarScreens() {
 			<SidebarScreenWrapper path="/:postType(wp_template)">
 				<SidebarNavigationScreenTemplates />
 			</SidebarScreenWrapper>
-			<SidebarScreenWrapper path="/patterns">
-				<SidebarNavigationScreenPatterns />
-			</SidebarScreenWrapper>
+			{ ! isMobileViewport && (
+				<SidebarScreenWrapper path="/patterns">
+					<SidebarNavigationScreenPatterns />
+				</SidebarScreenWrapper>
+			) }
 			<SidebarScreenWrapper path="/:postType(wp_template|wp_template_part)/all">
 				<SidebarNavigationScreenTemplatesBrowse />
 			</SidebarScreenWrapper>

package/src/components/sidebar-navigation-screen-pages/index.js

@@ -14,6 +14,7 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { layout, page, home, verse, plus } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -42,6 +43,7 @@ const PageItem = ( { postType = 'page', postId, ...props } ) => {
 };
 
 export default function SidebarNavigationScreenPages() {
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const { records: pages, isResolving: isLoadingPages } = useEntityRecords(
 		'postType',
 		'page',
@@ -220,12 +222,14 @@ export default function SidebarNavigationScreenPages() {
 								</Truncate>
 							</PageItem>
 						) ) }
-						<SidebarNavigationItem
-							className="edit-site-sidebar-navigation-screen-pages__see-all"
-							{ ...pagesLink }
-						>
-							{ __( 'Manage all pages' ) }
-						</SidebarNavigationItem>
+						{ ! isMobileViewport && (
+							<SidebarNavigationItem
+								className="edit-site-sidebar-navigation-screen-pages__see-all"
+								{ ...pagesLink }
+							>
+								{ __( 'Manage all pages' ) }
+							</SidebarNavigationItem>
+						) }
 					</VStack>
 				}
 			/>