@wordpress/edit-site 5.28.1 → 5.28.3

package/src/components/global-styles/screen-revisions/revisions-buttons.js

@@ -25,19 +25,20 @@ function ChangesSummary( { revision, previousRevision } ) {
 	const changes = getGlobalStylesChanges( revision, previousRevision, {
 		maxResults: 7,
 	} );
-	const changesLength = changes.length;
 
-	if ( ! changesLength ) {
+	if ( ! changes.length ) {
 		return null;
 	}
 
 	return (
-		<span
+		<ul
 			data-testid="global-styles-revision-changes"
 			className="edit-site-global-styles-screen-revisions__changes"
 		>
-			{ changes.join( ', ' ) }.
-		</span>
+			{ changes.map( ( change ) => (
+				<li key={ change }>{ change }</li>
+			) ) }
+		</ul>
 	);
 }
 
@@ -219,6 +220,7 @@ function RevisionsButtons( {
 							) : (
 								<Button
 									disabled={ areStylesEqual }
+									size="compact"
 									variant="primary"
 									className="edit-site-global-styles-screen-revisions__apply-button"
 									onClick={ onApplyRevision }

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

@@ -64,7 +64,7 @@
 			background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 		}
 
-		.edit-site-global-styles-screen-revisions__changes,
+		.edit-site-global-styles-screen-revisions__changes > li,
 		.edit-site-global-styles-screen-revisions__meta,
 		.edit-site-global-styles-screen-revisions__applied-text {
 			color: $gray-900;
@@ -92,7 +92,7 @@
 		width: 100%;
 		height: auto;
 		display: block;
-		padding: $grid-unit-15 $grid-unit-15 $grid-unit-10 $grid-unit-50;
+		padding: $grid-unit-15 $grid-unit-15 $grid-unit-05 $grid-unit-50;
 		z-index: 1;
 		position: relative;
 		outline-offset: -2px;
@@ -103,7 +103,7 @@
 .edit-site-global-styles-screen-revisions__applied-text {
 	align-self: flex-start;
 	// Left margin = left padding of .edit-site-global-styles-screen-revisions__revision-button.
-	margin: 0 $grid-unit-15 $grid-unit-15 $grid-unit-50;
+	margin: $grid-unit-05 $grid-unit-15 $grid-unit-15 $grid-unit-50;
 }
 
 .edit-site-global-styles-screen-revisions__changes,
@@ -125,13 +125,14 @@
 	}
 }
 
-.edit-site-global-styles-screen-revisions__changes,
 .edit-site-global-styles-screen-revisions__meta {
 	display: flex;
 	justify-content: start;
 	width: 100%;
 	align-items: flex-start;
 	text-align: left;
+	margin-bottom: $grid-unit-05;
+
 	img {
 		width: $grid-unit-20;
 		height: $grid-unit-20;
@@ -145,10 +146,14 @@
 }
 
 .edit-site-global-styles-screen-revisions__changes {
-	margin-bottom: $grid-unit-05;
 	text-align: left;
-	color: $gray-900;
 	line-height: $default-line-height;
+	margin-left: $grid-unit-15;
+	list-style: disc;
+
+	li {
+		margin-bottom: $grid-unit-05;
+	}
 }
 
 .edit-site-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination {

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/media/index.js

@@ -8,18 +8,16 @@ function Media( { id, size = [ 'large', 'medium', 'thumbnail' ], ...props } ) {
 	const currentSize = size.find(
 		( s ) => !! media?.media_details?.sizes[ s ]
 	);
-	const mediaDetails = media?.media_details?.sizes[ currentSize ];
-	if ( ! mediaDetails ) {
+
+	const mediaUrl =
+		media?.media_details?.sizes[ currentSize ]?.source_url ||
+		media?.source_url;
+
+	if ( ! mediaUrl ) {
 		return null;
 	}
 
-	return (
-		<img
-			{ ...props }
-			src={ mediaDetails.source_url }
-			alt={ media.alt_text }
-		/>
-	);
+	return <img { ...props } src={ mediaUrl } alt={ media.alt_text } />;
 }
 
 export default Media;

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

@@ -12,6 +12,8 @@ import {
 	__experimentalNavigatorScreen as NavigatorScreen,
 } from '@wordpress/components';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { __ } from '@wordpress/i18n';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -31,7 +33,8 @@ import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen
 import SaveHub from '../save-hub';
 import { unlock } from '../../lock-unlock';
 import SidebarNavigationScreenPages from '../sidebar-navigation-screen-pages';
-import SidebarNavigationScreenPagesDataViews from '../sidebar-navigation-screen-pages-dataviews';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import DataViewsSidebarContent from '../sidebar-dataviews';
 import SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';
 
 const { useLocation } = unlock( routerPrivateApis );
@@ -50,6 +53,7 @@ function SidebarScreenWrapper( { className, ...props } ) {
 
 function SidebarScreens() {
 	useSyncPathWithURL();
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
 
 	return (
 		<>
@@ -69,7 +73,10 @@ function SidebarScreens() {
 				<SidebarNavigationScreenPages />
 			</SidebarScreenWrapper>
 			<SidebarScreenWrapper path="/pages">
-				<SidebarNavigationScreenPagesDataViews />
+				<SidebarNavigationScreen
+					title={ __( 'Pages' ) }
+					content={ <DataViewsSidebarContent /> }
+				/>
 			</SidebarScreenWrapper>
 			<SidebarScreenWrapper path="/page/:postId">
 				<SidebarNavigationScreenPage />
@@ -77,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-dataviews/default-views.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { trash } from '@wordpress/icons';
 
 /**
@@ -49,7 +49,7 @@ const DEFAULT_PAGE_BASE = {
 export const DEFAULT_VIEWS = {
 	page: [
 		{
-			title: _x( 'All', 'pages' ),
+			title: __( 'All pages' ),
 			slug: 'all',
 			view: DEFAULT_PAGE_BASE,
 		},

package/src/components/sidebar-edit-mode/page-panels/style.scss

@@ -18,7 +18,6 @@
 		label {
 			.components-text {
 				display: block;
-				margin-left: $radio-input-size + 6;
 			}
 		}
 	}

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

package/src/hooks/commands/use-edit-mode-commands.js

@@ -77,9 +77,9 @@ function usePageContentFocusCommands() {
 	if ( currentPostType !== 'wp_template' ) {
 		commands.push( {
 			name: 'core/switch-to-template-focus',
-			/* translators: %1$s: template title */
 			label: sprintf(
-				'Edit template: %s',
+				/* translators: %s: template title */
+				__( 'Edit template: %s' ),
 				decodeEntities( template.title )
 			),
 			icon: layout,
@@ -154,14 +154,14 @@ function useManipulateDocumentCommands() {
 	if ( isTemplateRevertable( template ) && ! isEditingPage ) {
 		const label =
 			template.type === TEMPLATE_POST_TYPE
-				? /* translators: %1$s: template title */
-				  sprintf(
-						'Reset template: %s',
+				? sprintf(
+						/* translators: %s: template title */
+						__( 'Reset template: %s' ),
 						decodeEntities( template.title )
 				  )
-				: /* translators: %1$s: template part title */
-				  sprintf(
-						'Reset template part: %s',
+				: sprintf(
+						/* translators: %s: template part title */
+						__( 'Reset template part: %s' ),
 						decodeEntities( template.title )
 				  );
 		commands.push( {
@@ -178,14 +178,14 @@ function useManipulateDocumentCommands() {
 	if ( isTemplateRemovable( template ) && ! isEditingPage ) {
 		const label =
 			template.type === TEMPLATE_POST_TYPE
-				? /* translators: %1$s: template title */
-				  sprintf(
-						'Delete template: %s',
+				? sprintf(
+						/* translators: %s: template title */
+						__( 'Delete template: %s' ),
 						decodeEntities( template.title )
 				  )
-				: /* translators: %1$s: template part title */
-				  sprintf(
-						'Delete template part: %s',
+				: sprintf(
+						/* translators: %s: template part title */
+						__( 'Delete template part: %s' ),
 						decodeEntities( template.title )
 				  );
 		const path =

package/src/store/private-actions.js

@@ -22,6 +22,8 @@ import { TEMPLATE_POST_TYPE } from '../utils/constants';
 export const setCanvasMode =
 	( mode ) =>
 	( { registry, dispatch } ) => {
+		const isMediumOrBigger =
+			window.matchMedia( '(min-width: 782px)' ).matches;
 		registry.dispatch( blockEditorStore ).__unstableSetEditorMode( 'edit' );
 		dispatch( {
 			type: 'SET_CANVAS_MODE',
@@ -29,7 +31,9 @@ export const setCanvasMode =
 		} );
 		// Check if the block list view should be open by default.
 		// If `distractionFree` mode is enabled, the block list view should not be open.
+		// This behavior is disabled for small viewports.
 		if (
+			isMediumOrBigger &&
 			mode === 'edit' &&
 			registry
 				.select( preferencesStore )

package/build/components/global-styles/font-library-modal/fonts-grid.js

@@ -1,57 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _components = require("@wordpress/components");
-var _element = require("@wordpress/element");
-/**
- * WordPress dependencies
- */
-
-function FontsGrid({
-  title,
-  children,
-  pageSize = 32
-}) {
-  const [lastItem, setLastItem] = (0, _element.useState)(null);
-  const [page, setPage] = (0, _element.useState)(1);
-  const itemsLimit = page * pageSize;
-  const items = children.slice(0, itemsLimit);
-  (0, _element.useEffect)(() => {
-    if (lastItem) {
-      const observer = new window.IntersectionObserver(([entry]) => {
-        if (entry.isIntersecting) {
-          setPage(prevPage => prevPage + 1);
-        }
-      });
-      observer.observe(lastItem);
-      return () => observer.disconnect();
-    }
-  }, [lastItem]);
-  return (0, _react.createElement)("div", {
-    className: "font-library-modal__fonts-grid"
-  }, (0, _react.createElement)(_components.__experimentalVStack, {
-    spacing: 0
-  }, title && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_components.__experimentalText, {
-    className: "font-library-modal__subtitle"
-  }, title), (0, _react.createElement)(_components.__experimentalSpacer, {
-    margin: 2
-  })), (0, _react.createElement)("div", {
-    className: "font-library-modal__fonts-grid__main"
-  }, items.map((child, i) => {
-    if (i === itemsLimit - 1) {
-      return (0, _react.createElement)("div", {
-        key: child.key,
-        ref: setLastItem
-      }, child);
-    }
-    return (0, _react.createElement)("div", {
-      key: child.key
-    }, child);
-  }))));
-}
-var _default = exports.default = FontsGrid;
-//# sourceMappingURL=fonts-grid.js.map

package/build/components/global-styles/font-library-modal/fonts-grid.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_components","require","_element","FontsGrid","title","children","pageSize","lastItem","setLastItem","useState","page","setPage","itemsLimit","items","slice","useEffect","observer","window","IntersectionObserver","entry","isIntersecting","prevPage","observe","disconnect","_react","createElement","className","__experimentalVStack","spacing","Fragment","__experimentalText","__experimentalSpacer","margin","map","child","i","key","ref","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/fonts-grid.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalText as Text,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\nimport { useState, useEffect } from '@wordpress/element';\n\nfunction FontsGrid( { title, children, pageSize = 32 } ) {\n\tconst [ lastItem, setLastItem ] = useState( null );\n\tconst [ page, setPage ] = useState( 1 );\n\tconst itemsLimit = page * pageSize;\n\tconst items = children.slice( 0, itemsLimit );\n\n\tuseEffect( () => {\n\t\tif ( lastItem ) {\n\t\t\tconst observer = new window.IntersectionObserver( ( [ entry ] ) => {\n\t\t\t\tif ( entry.isIntersecting ) {\n\t\t\t\t\tsetPage( ( prevPage ) => prevPage + 1 );\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\tobserver.observe( lastItem );\n\n\t\t\treturn () => observer.disconnect();\n\t\t}\n\t}, [ lastItem ] );\n\n\treturn (\n\t\t<div className=\"font-library-modal__fonts-grid\">\n\t\t\t<VStack spacing={ 0 }>\n\t\t\t\t{ title && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Text className=\"font-library-modal__subtitle\">\n\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t\t<div className=\"font-library-modal__fonts-grid__main\">\n\t\t\t\t\t{ items.map( ( child, i ) => {\n\t\t\t\t\t\tif ( i === itemsLimit - 1 ) {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<div key={ child.key } ref={ setLastItem }>\n\t\t\t\t\t\t\t\t\t{ child }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn <div key={ child.key }>{ child }</div>;\n\t\t\t\t\t} ) }\n\t\t\t\t</div>\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\nexport default FontsGrid;\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AARA;AACA;AACA;;AAQA,SAASE,SAASA,CAAE;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,QAAQ,GAAG;AAAG,CAAC,EAAG;EACxD,MAAM,CAAEC,QAAQ,EAAEC,WAAW,CAAE,GAAG,IAAAC,iBAAQ,EAAE,IAAK,CAAC;EAClD,MAAM,CAAEC,IAAI,EAAEC,OAAO,CAAE,GAAG,IAAAF,iBAAQ,EAAE,CAAE,CAAC;EACvC,MAAMG,UAAU,GAAGF,IAAI,GAAGJ,QAAQ;EAClC,MAAMO,KAAK,GAAGR,QAAQ,CAACS,KAAK,CAAE,CAAC,EAAEF,UAAW,CAAC;EAE7C,IAAAG,kBAAS,EAAE,MAAM;IAChB,IAAKR,QAAQ,EAAG;MACf,MAAMS,QAAQ,GAAG,IAAIC,MAAM,CAACC,oBAAoB,CAAE,CAAE,CAAEC,KAAK,CAAE,KAAM;QAClE,IAAKA,KAAK,CAACC,cAAc,EAAG;UAC3BT,OAAO,CAAIU,QAAQ,IAAMA,QAAQ,GAAG,CAAE,CAAC;QACxC;MACD,CAAE,CAAC;MAEHL,QAAQ,CAACM,OAAO,CAAEf,QAAS,CAAC;MAE5B,OAAO,MAAMS,QAAQ,CAACO,UAAU,CAAC,CAAC;IACnC;EACD,CAAC,EAAE,CAAEhB,QAAQ,CAAG,CAAC;EAEjB,OACC,IAAAiB,MAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAgC,GAC9C,IAAAF,MAAA,CAAAC,aAAA,EAACzB,WAAA,CAAA2B,oBAAM;IAACC,OAAO,EAAG;EAAG,GAClBxB,KAAK,IACN,IAAAoB,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAK,QAAA,QACC,IAAAL,MAAA,CAAAC,aAAA,EAACzB,WAAA,CAAA8B,kBAAI;IAACJ,SAAS,EAAC;EAA8B,GAC3CtB,KACG,CAAC,EACP,IAAAoB,MAAA,CAAAC,aAAA,EAACzB,WAAA,CAAA+B,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CACrB,CACF,EACD,IAAAR,MAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAsC,GAClDb,KAAK,CAACoB,GAAG,CAAE,CAAEC,KAAK,EAAEC,CAAC,KAAM;IAC5B,IAAKA,CAAC,KAAKvB,UAAU,GAAG,CAAC,EAAG;MAC3B,OACC,IAAAY,MAAA,CAAAC,aAAA;QAAKW,GAAG,EAAGF,KAAK,CAACE,GAAK;QAACC,GAAG,EAAG7B;MAAa,GACvC0B,KACE,CAAC;IAER;IACA,OAAO,IAAAV,MAAA,CAAAC,aAAA;MAAKW,GAAG,EAAGF,KAAK,CAACE;IAAK,GAAGF,KAAY,CAAC;EAC9C,CAAE,CACE,CACE,CACJ,CAAC;AAER;AAAC,IAAAI,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcrC,SAAS"}