@wordpress/edit-site 5.28.2 → 5.29.0

package/src/components/editor-canvas-container/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Children, cloneElement, useState, useMemo } from '@wordpress/element';
+import { Children, cloneElement, useState } from '@wordpress/element';
 import {
 	Button,
 	privateApis as componentsPrivateApis,
@@ -82,10 +82,6 @@ function EditorCanvasContainer( {
 
 	const focusOnMountRef = useFocusOnMount( 'firstElement' );
 	const sectionFocusReturnRef = useFocusReturn();
-	const title = useMemo(
-		() => getEditorCanvasContainerTitle( editorCanvasContainerView ),
-		[ editorCanvasContainerView ]
-	);
 
 	function onCloseContainer() {
 		setIsListViewOpened( showListViewByDefault );
@@ -119,6 +115,7 @@ function EditorCanvasContainer( {
 		return null;
 	}
 
+	const title = getEditorCanvasContainerTitle( editorCanvasContainerView );
 	const shouldShowCloseButton = onClose || closeButtonLabel;
 
 	return (

package/src/components/{test → error-boundary/test}/error-boundary.js

@@ -1,15 +1,17 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
 /**
  * WordPress dependencies
  */
 import * as wpHooks from '@wordpress/hooks';
+
 /**
  * Internal dependencies
  */
-import ErrorBoundary from '../error-boundary';
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
+import ErrorBoundary from '../index';
 
 const theError = new Error( 'Kaboom' );
 

package/src/components/global-styles/block-preview-panel.js

@@ -28,7 +28,7 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
 	}, [ name, blockExample, variation ] );
 
 	const viewportWidth = blockExample?.viewportWidth ?? null;
-	const previewHeight = '150px';
+	const previewHeight = 150;
 
 	if ( ! blockExample ) {
 		return null;
@@ -48,7 +48,7 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
 						{
 							css: `
 								body{
-									min-height:${ previewHeight };
+									min-height:${ previewHeight }px;
 									display:flex;align-items:center;justify-content:center;
 								}
 							`,

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

@@ -48,7 +48,7 @@ function CollectionFontDetails( {
 					/>
 				) ) }
 			</VStack>
-			<Spacer margin={ 8 } />
+			<Spacer margin={ 16 } />
 		</>
 	);
 }

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/global-styles/screen-revisions/style.scss

@@ -49,7 +49,7 @@
 		outline: 3px solid transparent;
 		outline-offset: -2px;
 
-		color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+		color: var(--wp-admin-theme-color);
 		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 
 		.edit-site-global-styles-screen-revisions__revision-button {
@@ -61,7 +61,7 @@
 		}
 
 		&::before {
-			background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+			background: var(--wp-admin-theme-color);
 		}
 
 		.edit-site-global-styles-screen-revisions__changes > li,

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

@@ -173,7 +173,7 @@
 }
 
 .edit-site-global-styles-screen-css-help-link {
-	display: block;
+	display: inline-block;
 	margin-top: $grid-unit-10;
 }
 .edit-site-global-styles-screen-variations {

package/src/components/header-edit-mode/document-tools/index.js

@@ -15,7 +15,6 @@ import {
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../../store';
 import { unlock } from '../../../lock-unlock';
 
 const { DocumentTools: EditorDocumentTools } = unlock( editorPrivateApis );
@@ -26,7 +25,7 @@ export default function DocumentTools( {
 	isDistractionFree,
 } ) {
 	const { isVisualMode } = useSelect( ( select ) => {
-		const { getEditorMode } = select( editSiteStore );
+		const { getEditorMode } = select( editorStore );
 
 		return {
 			isVisualMode: getEditorMode() === 'visual',

package/src/components/header-edit-mode/index.js

@@ -206,7 +206,7 @@ export default function HeaderEditMode() {
 						</div>
 					) }
 					<PostViewLink />
-					<SaveButton />
+					<SaveButton size="compact" />
 					{ ! isDistractionFree && (
 						<PinnedItems.Slot scope="core/edit-site" />
 					) }

package/src/components/header-edit-mode/more-menu/index.js

@@ -16,6 +16,10 @@ import {
 	store as preferencesStore,
 } from '@wordpress/preferences';
 import { store as coreStore } from '@wordpress/core-data';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -32,8 +36,9 @@ import ToolsMoreMenuGroup from '../tools-more-menu-group';
 import SiteExport from './site-export';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
 import CopyContentMenuItem from './copy-content-menu-item';
-import ModeSwitcher from '../mode-switcher';
-import { store as editSiteStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+
+const { ModeSwitcher } = unlock( editorPrivateApis );
 
 export default function MoreMenu( { showIconLabels } ) {
 	const { openModal } = useDispatch( interfaceStore );
@@ -42,7 +47,7 @@ export default function MoreMenu( { showIconLabels } ) {
 		return select( coreStore ).getCurrentTheme().is_block_theme;
 	}, [] );
 
-	const { toggleDistractionFree } = useDispatch( editSiteStore );
+	const { toggleDistractionFree } = useDispatch( editorStore );
 
 	const turnOffDistractionFree = () => {
 		setPreference( 'core', 'distractionFree', false );

package/src/components/keyboard-shortcuts/edit-mode.js

@@ -15,7 +15,6 @@ import { SIDEBAR_BLOCK } from '../sidebar-edit-mode/constants';
 import { STORE_NAME } from '../../store/constants';
 
 function KeyboardShortcutsEditMode() {
-	const { getEditorMode } = useSelect( editSiteStore );
 	const isBlockInspectorOpen = useSelect(
 		( select ) =>
 			select( interfaceStore ).getActiveComplementaryArea(
@@ -23,8 +22,6 @@ function KeyboardShortcutsEditMode() {
 			) === SIDEBAR_BLOCK,
 		[]
 	);
-	const { switchEditorMode, toggleDistractionFree } =
-		useDispatch( editSiteStore );
 	const { enableComplementaryArea, disableComplementaryArea } =
 		useDispatch( interfaceStore );
 	const { replaceBlocks } = useDispatch( blockEditorStore );
@@ -71,10 +68,6 @@ function KeyboardShortcutsEditMode() {
 		}
 	} );
 
-	useShortcut( 'core/edit-site/toggle-mode', () => {
-		switchEditorMode( getEditorMode() === 'visual' ? 'text' : 'visual' );
-	} );
-
 	useShortcut( 'core/edit-site/transform-heading-to-paragraph', ( event ) =>
 		handleTextLevelShortcut( event, 0 )
 	);
@@ -89,10 +82,6 @@ function KeyboardShortcutsEditMode() {
 		);
 	} );
 
-	useShortcut( 'core/edit-site/toggle-distraction-free', () => {
-		toggleDistractionFree();
-	} );
-
 	return null;
 }
 

package/src/components/keyboard-shortcuts/register.js

@@ -75,15 +75,6 @@ function KeyboardShortcutsRegister() {
 				},
 			],
 		} );
-		registerShortcut( {
-			name: 'core/edit-site/toggle-mode',
-			category: 'global',
-			description: __( 'Switch between visual editor and code editor.' ),
-			keyCombination: {
-				modifier: 'secondary',
-				character: 'm',
-			},
-		} );
 
 		registerShortcut( {
 			name: 'core/edit-site/transform-heading-to-paragraph',
@@ -106,16 +97,6 @@ function KeyboardShortcutsRegister() {
 				},
 			} );
 		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/toggle-distraction-free',
-			category: 'global',
-			description: __( 'Toggle distraction free mode.' ),
-			keyCombination: {
-				modifier: 'primaryShift',
-				character: '\\',
-			},
-		} );
 	}, [ registerShortcut ] );
 
 	return null;

package/src/components/layout/index.js

@@ -28,7 +28,6 @@ import {
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	privateApis as blockEditorPrivateApis,
-	useBlockCommands,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
@@ -66,7 +65,6 @@ export default function Layout() {
 	useCommands();
 	useEditModeCommands();
 	useCommonCommands();
-	useBlockCommands();
 
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 
@@ -251,47 +249,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 && (