@wordpress/edit-site 5.19.0 → 5.19.2

package/src/components/global-styles/font-library-modal/utils/test/{getPreviewStyle.spec.js → preview-styles.spec.js}

@@ -1,12 +1,12 @@
 /**
  * Internal dependencies
  */
-import { getPreviewStyle } from '../index';
+import { getFamilyPreviewStyle, formatFontFamily } from '../preview-styles';
 
-describe( 'getPreviewStyle', () => {
+describe( 'getFamilyPreviewStyle', () => {
 	it( 'should return default fontStyle and fontWeight if fontFace is not provided', () => {
 		const family = { fontFamily: 'Rosario' };
-		const result = getPreviewStyle( family );
+		const result = getFamilyPreviewStyle( family );
 		const expected = {
 			fontFamily: 'Rosario',
 			fontWeight: '400',
@@ -23,7 +23,7 @@ describe( 'getPreviewStyle', () => {
 				{ fontStyle: 'normal', fontWeight: '600' },
 			],
 		};
-		const result = getPreviewStyle( family );
+		const result = getFamilyPreviewStyle( family );
 		const expected = {
 			fontFamily: 'Rosario',
 			fontStyle: 'normal',
@@ -40,7 +40,7 @@ describe( 'getPreviewStyle', () => {
 				{ fontStyle: 'italic', fontWeight: '600' },
 			],
 		};
-		const result = getPreviewStyle( family );
+		const result = getFamilyPreviewStyle( family );
 		const expected = {
 			fontFamily: 'Rosario',
 			fontStyle: 'italic',
@@ -57,7 +57,7 @@ describe( 'getPreviewStyle', () => {
 				{ fontStyle: 'normal', fontWeight: '700' },
 			],
 		};
-		const result = getPreviewStyle( family );
+		const result = getFamilyPreviewStyle( family );
 		const expected = {
 			fontFamily: 'Rosario',
 			fontStyle: 'normal',
@@ -74,7 +74,7 @@ describe( 'getPreviewStyle', () => {
 				{ fontStyle: 'normal', fontWeight: '400' },
 			],
 		};
-		const result = getPreviewStyle( family );
+		const result = getFamilyPreviewStyle( family );
 		const expected = {
 			fontFamily: 'Rosario',
 			fontStyle: 'normal',
@@ -92,7 +92,7 @@ describe( 'getPreviewStyle', () => {
 				{ fontStyle: 'normal', fontWeight: '600' },
 			],
 		};
-		const result = getPreviewStyle( family );
+		const result = getFamilyPreviewStyle( family );
 		const expected = {
 			fontFamily: 'Rosario',
 			fontStyle: 'normal',
@@ -110,7 +110,7 @@ describe( 'getPreviewStyle', () => {
 				{ fontStyle: 'italic', fontWeight: '200 900' },
 			],
 		};
-		const result = getPreviewStyle( family );
+		const result = getFamilyPreviewStyle( family );
 		const expected = {
 			fontFamily: 'Rosario',
 			fontStyle: 'normal',
@@ -119,3 +119,43 @@ describe( 'getPreviewStyle', () => {
 		expect( result ).toEqual( expected );
 	} );
 } );
+
+describe( 'formatFontFamily', () => {
+	it( 'should transform "Baloo 2, system-ui" correctly', () => {
+		expect( formatFontFamily( 'Baloo 2, system-ui' ) ).toBe(
+			"'Baloo 2', system-ui"
+		);
+	} );
+
+	it( 'should ignore extra spaces', () => {
+		expect( formatFontFamily( '  Baloo 2   , system-ui' ) ).toBe(
+			"'Baloo 2', system-ui"
+		);
+	} );
+
+	it( 'should keep quoted strings unchanged', () => {
+		expect(
+			formatFontFamily(
+				"Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif"
+			)
+		).toBe(
+			"Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif"
+		);
+	} );
+
+	it( 'should wrap single font name with spaces in quotes', () => {
+		expect( formatFontFamily( 'Baloo 2' ) ).toBe( "'Baloo 2'" );
+	} );
+
+	it( 'should wrap multiple font names with spaces in quotes', () => {
+		expect( formatFontFamily( 'Baloo Bhai 2, Baloo 2' ) ).toBe(
+			"'Baloo Bhai 2', 'Baloo 2'"
+		);
+	} );
+
+	it( 'should wrap only those font names with spaces which are not already quoted', () => {
+		expect( formatFontFamily( 'Baloo Bhai 2, Arial' ) ).toBe(
+			"'Baloo Bhai 2', Arial"
+		);
+	} );
+} );

package/src/components/global-styles/font-library-modal/utils/test/sort-font-faces.js

@@ -0,0 +1,74 @@
+/**
+ * Internal dependencies
+ */
+import { sortFontFaces } from '../sort-font-faces';
+
+describe( 'sortFontFaces', () => {
+	it( 'should prioritize "normal" fontStyle and then sort by numeric fontWeight values', () => {
+		const input = [
+			{ fontStyle: 'normal', fontWeight: '500' },
+			{ fontStyle: 'normal', fontWeight: '400' },
+		];
+		const expected = [
+			{ fontStyle: 'normal', fontWeight: '400' },
+			{ fontStyle: 'normal', fontWeight: '500' },
+		];
+		expect( sortFontFaces( input ) ).toEqual( expected );
+	} );
+
+	it( 'should correctly sort named fontWeight values within the same fontStyle', () => {
+		const input = [
+			{ fontStyle: 'italic', fontWeight: 'bold' },
+			{ fontStyle: 'italic', fontWeight: 'normal' },
+		];
+		const expected = [
+			{ fontStyle: 'italic', fontWeight: 'normal' },
+			{ fontStyle: 'italic', fontWeight: 'bold' },
+		];
+		expect( sortFontFaces( input ) ).toEqual( expected );
+	} );
+
+	it( 'should prioritize fontStyle "normal" over other styles', () => {
+		const input = [
+			{ fontStyle: 'italic', fontWeight: '400' },
+			{ fontStyle: 'normal', fontWeight: '500' },
+		];
+		const expected = [
+			{ fontStyle: 'normal', fontWeight: '500' },
+			{ fontStyle: 'italic', fontWeight: '400' },
+		];
+		expect( sortFontFaces( input ) ).toEqual( expected );
+	} );
+
+	it( 'should sort other fontStyles alphabetically after "normal"', () => {
+		const input = [
+			{ fontStyle: 'oblique', fontWeight: '500' },
+			{ fontStyle: 'italic', fontWeight: '500' },
+		];
+		const expected = [
+			{ fontStyle: 'italic', fontWeight: '500' },
+			{ fontStyle: 'oblique', fontWeight: '500' },
+		];
+		expect( sortFontFaces( input ) ).toEqual( expected );
+	} );
+
+	it( 'should correctly handle multiple test cases', () => {
+		const input = [
+			{ fontStyle: 'oblique', fontWeight: '300' },
+			{ fontStyle: 'normal', fontWeight: '400' },
+			{ fontStyle: 'italic', fontWeight: '500' },
+			{ fontStyle: 'italic', fontWeight: 'bold' },
+			{ fontStyle: 'italic', fontWeight: '600 900' },
+			{ fontStyle: 'normal', fontWeight: '500' },
+		];
+		const expected = [
+			{ fontStyle: 'normal', fontWeight: '400' },
+			{ fontStyle: 'normal', fontWeight: '500' },
+			{ fontStyle: 'italic', fontWeight: '500' },
+			{ fontStyle: 'italic', fontWeight: '600 900' },
+			{ fontStyle: 'italic', fontWeight: 'bold' },
+			{ fontStyle: 'oblique', fontWeight: '300' },
+		];
+		expect( sortFontFaces( input ) ).toEqual( expected );
+	} );
+} );

package/src/components/global-styles/screen-typography.js

@@ -22,7 +22,10 @@ function ScreenTypography() {
 			/>
 			<div className="edit-site-global-styles-screen-typography">
 				<VStack spacing={ 6 }>
-					{ window.__experimentalFontLibrary && <FontFamilies /> }
+					{ FontFamilies &&
+						! window.__experimentalDisableFontLibrary && (
+							<FontFamilies />
+						) }
 					<TypographyElements />
 				</VStack>
 			</div>

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

@@ -32,12 +32,19 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import useEditedEntityRecord from '../../use-edited-entity-record';
 import { store as editSiteStore } from '../../../store';
+import {
+	TEMPLATE_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_TYPES,
+	PATTERN_SYNC_TYPES,
+} from '../../../utils/constants';
 
 const typeLabels = {
-	wp_block: __( 'Editing pattern:' ),
-	wp_navigation: __( 'Editing navigation menu:' ),
-	wp_template: __( 'Editing template:' ),
-	wp_template_part: __( 'Editing template part:' ),
+	[ PATTERN_TYPES.user ]: __( 'Editing pattern:' ),
+	[ NAVIGATION_POST_TYPE ]: __( 'Editing navigation menu:' ),
+	[ TEMPLATE_POST_TYPE ]: __( 'Editing template:' ),
+	[ TEMPLATE_PART_POST_TYPE ]: __( 'Editing template part:' ),
 };
 
 export default function DocumentActions() {
@@ -129,9 +136,9 @@ function TemplateDocumentActions( { className, onBack } ) {
 	}
 
 	let typeIcon = icon;
-	if ( record.type === 'wp_navigation' ) {
+	if ( record.type === NAVIGATION_POST_TYPE ) {
 		typeIcon = navigationIcon;
-	} else if ( record.type === 'wp_block' ) {
+	} else if ( record.type === PATTERN_TYPES.user ) {
 		typeIcon = symbol;
 	}
 
@@ -139,13 +146,15 @@ function TemplateDocumentActions( { className, onBack } ) {
 		<BaseDocumentActions
 			className={ classnames( className, {
 				'is-synced-entity':
-					record.wp_pattern_sync_status !== 'unsynced',
+					record.wp_pattern_sync_status !==
+					PATTERN_SYNC_TYPES.unsynced,
 			} ) }
 			icon={ typeIcon }
 			onBack={ onBack }
 		>
 			<VisuallyHidden as="span">
-				{ typeLabels[ record.type ] ?? typeLabels.wp_template }
+				{ typeLabels[ record.type ] ??
+					typeLabels[ TEMPLATE_POST_TYPE ] }
 			</VisuallyHidden>
 			{ getTitle() }
 		</BaseDocumentActions>

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

@@ -53,7 +53,7 @@ const preventDefault = ( event ) => {
 	event.preventDefault();
 };
 
-export default function HeaderEditMode() {
+export default function HeaderEditMode( { setListViewToggleElement } ) {
 	const inserterButton = useRef();
 	const {
 		deviceType,
@@ -259,6 +259,7 @@ export default function HeaderEditMode() {
 										/* translators: button label text should, if possible, be under 16 characters. */
 										label={ __( 'List View' ) }
 										onClick={ toggleListView }
+										ref={ setListViewToggleElement }
 										shortcut={ listViewShortcut }
 										showTooltip={ ! showIconLabels }
 										variant={

package/src/components/layout/index.js

@@ -127,6 +127,8 @@ export default function Layout() {
 	const isEditorLoading = useIsSiteEditorLoading();
 	const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
 		useState( false );
+	const [ listViewToggleElement, setListViewToggleElement ] =
+		useState( null );
 
 	// This determines which animation variant should apply to the header.
 	// There is also a `isDistractionFreeHovering` state that gets priority
@@ -256,7 +258,11 @@ export default function Layout() {
 									ease: 'easeOut',
 								} }
 							>
-								<Header />
+								<Header
+									setListViewToggleElement={
+										setListViewToggleElement
+									}
+								/>
 							</NavigableRegion>
 						) }
 					</AnimatePresence>
@@ -369,6 +375,9 @@ export default function Layout() {
 													} }
 												>
 													<Editor
+														listViewToggleElement={
+															listViewToggleElement
+														}
 														isLoading={
 															isEditorLoading
 														}

package/src/components/list/added-by.js

@@ -19,10 +19,22 @@ import {
 } from '@wordpress/icons';
 import { _x } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_ORIGINS,
+} from '../../utils/constants';
+
 /** @typedef {'wp_template'|'wp_template_part'} TemplateType */
 
 /** @type {TemplateType} */
-const TEMPLATE_POST_TYPE_NAMES = [ 'wp_template', 'wp_template_part' ];
+const TEMPLATE_POST_TYPE_NAMES = [
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+];
 
 /**
  * @typedef {'theme'|'plugin'|'site'|'user'} AddedByType
@@ -64,11 +76,12 @@ export function useAddedBy( postType, postId ) {
 				// or 'custom' source.
 				if (
 					template.has_theme_file &&
-					( template.origin === 'theme' ||
+					( template.origin === TEMPLATE_ORIGINS.theme ||
 						( ! template.origin &&
-							[ 'theme', 'custom' ].includes(
-								template.source
-							) ) )
+							[
+								TEMPLATE_ORIGINS.theme,
+								TEMPLATE_ORIGINS.custom,
+							].includes( template.source ) ) )
 				) {
 					return {
 						type: 'theme',
@@ -76,18 +89,23 @@ export function useAddedBy( postType, postId ) {
 						text:
 							getTheme( template.theme )?.name?.rendered ||
 							template.theme,
-						isCustomized: template.source === 'custom',
+						isCustomized:
+							template.source === TEMPLATE_ORIGINS.custom,
 					};
 				}
 
 				// Added by plugin.
-				if ( template.has_theme_file && template.origin === 'plugin' ) {
+				if (
+					template.has_theme_file &&
+					template.origin === TEMPLATE_ORIGINS.plugin
+				) {
 					return {
-						type: 'plugin',
+						type: TEMPLATE_ORIGINS.plugin,
 						icon: pluginIcon,
 						text:
 							getPlugin( template.theme )?.name || template.theme,
-						isCustomized: template.source === 'custom',
+						isCustomized:
+							template.source === TEMPLATE_ORIGINS.custom,
 					};
 				}
 
@@ -97,7 +115,7 @@ export function useAddedBy( postType, postId ) {
 				// site logo and title.
 				if (
 					! template.has_theme_file &&
-					template.source === 'custom' &&
+					template.source === TEMPLATE_ORIGINS.custom &&
 					! template.author
 				) {
 					const siteData = getEntityRecord(
@@ -176,7 +194,7 @@ export default function AddedBy( { postType, postId } ) {
 				{ text }
 				{ isCustomized && (
 					<span className="edit-site-list-added-by__customized-info">
-						{ postType === 'wp_template'
+						{ postType === TEMPLATE_POST_TYPE
 							? _x( 'Customized', 'template' )
 							: _x( 'Customized', 'template part' ) }
 					</span>

package/src/components/list/index.js

@@ -17,6 +17,10 @@ import Header from './header';
 import Table from './table';
 import useTitle from '../routes/use-title';
 import { unlock } from '../../lock-unlock';
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+} from '../../utils/constants';
 
 const { useLocation } = unlock( routerPrivateApis );
 
@@ -25,7 +29,9 @@ export default function List() {
 		params: { path },
 	} = useLocation();
 	const templateType =
-		path === '/wp_template/all' ? 'wp_template' : 'wp_template_part';
+		path === '/wp_template/all'
+			? TEMPLATE_POST_TYPE
+			: TEMPLATE_PART_POST_TYPE;
 
 	useRegisterShortcuts();
 

package/src/components/page-content-focus-manager/disable-non-page-content-blocks.js

@@ -9,12 +9,7 @@ import { useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-
-const PAGE_CONTENT_BLOCK_TYPES = [
-	'core/post-title',
-	'core/post-featured-image',
-	'core/post-content',
-];
+import { PAGE_CONTENT_BLOCK_TYPES } from '../../utils/constants';
 
 /**
  * Component that when rendered, makes it so that the site editor allows only
@@ -48,8 +43,7 @@ const withDisableNonPageContentBlocks = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const isDescendentOfQueryLoop = props.context.queryId !== undefined;
 		const isPageContent =
-			PAGE_CONTENT_BLOCK_TYPES.includes( props.name ) &&
-			! isDescendentOfQueryLoop;
+			PAGE_CONTENT_BLOCK_TYPES[ props.name ] && ! isDescendentOfQueryLoop;
 		const mode = isPageContent ? 'contentOnly' : undefined;
 		useBlockEditingMode( mode );
 		return <BlockEdit { ...props } />;

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

@@ -70,7 +70,7 @@ export default function DuplicateMenuItem( {
 
 			const result = await saveEntityRecord(
 				'postType',
-				'wp_template_part',
+				TEMPLATE_PART_POST_TYPE,
 				{ slug, title, content, area },
 				{ throwOnError: true }
 			);
@@ -156,13 +156,13 @@ export default function DuplicateMenuItem( {
 			const title = sprintf(
 				/* translators: %s: Existing pattern title */
 				__( '%s (Copy)' ),
-				item.title
+				item.title || item.name
 			);
-			const categories = await getCategories( item.categories );
+			const categories = await getCategories( item.categories || [] );
 
 			const result = await saveEntityRecord(
 				'postType',
-				'wp_block',
+				PATTERN_TYPES.user,
 				{
 					content: isThemePattern
 						? item.content
@@ -179,7 +179,7 @@ export default function DuplicateMenuItem( {
 				sprintf(
 					// translators: %s: The new pattern's title e.g. 'Call to action (copy)'.
 					__( '"%s" duplicated.' ),
-					item.title
+					item.title || item.name
 				),
 				{
 					type: 'snackbar',

package/src/components/page-patterns/grid-item.js

@@ -75,7 +75,7 @@ function GridItem( { categoryId, item, ...props } ) {
 		postType: item.type,
 		postId: isUserPattern ? item.id : item.name,
 		categoryId,
-		categoryType: item.type,
+		categoryType: isTemplatePart ? item.type : PATTERN_TYPES.theme,
 	} );
 
 	const isEmpty = ! item.blocks?.length;
@@ -113,14 +113,14 @@ function GridItem( { categoryId, item, ...props } ) {
 	const exportAsJSON = () => {
 		const json = {
 			__file: item.type,
-			title: item.title,
+			title: item.title || item.name,
 			content: item.patternBlock.content.raw,
 			syncStatus: item.patternBlock.wp_pattern_sync_status,
 		};
 
 		return downloadjs(
 			JSON.stringify( json, null, 2 ),
-			`${ kebabCase( item.title ) }.json`,
+			`${ kebabCase( item.title || item.name ) }.json`,
 			'application/json'
 		);
 	};
@@ -160,7 +160,7 @@ function GridItem( { categoryId, item, ...props } ) {
 		: sprintf(
 				// translators: %s: The pattern or template part's title e.g. 'Call to action'.
 				__( 'Are you sure you want to delete "%s"?' ),
-				item.title
+				item.title || item.name
 		  );
 
 	const additionalStyles = ! backgroundColor
@@ -246,7 +246,7 @@ function GridItem( { categoryId, item, ...props } ) {
 									// See https://github.com/WordPress/gutenberg/pull/51898#discussion_r1243399243.
 									tabIndex="-1"
 								>
-									{ item.title }
+									{ item.title || item.name }
 								</Button>
 							</Heading>
 						) }

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

@@ -18,7 +18,7 @@ const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 
 export default function PagePatterns() {
 	const { categoryType, categoryId } = getQueryArgs( window.location.href );
-	const type = categoryType || PATTERN_TYPES.user;
+	const type = categoryType || PATTERN_TYPES.theme;
 	const category = categoryId || PATTERN_DEFAULT_CATEGORY;
 	const settings = usePatternSettings();
 

package/src/components/page-patterns/search-items.js

@@ -7,7 +7,11 @@ import { noCase } from 'change-case';
 /**
  * Internal dependencies
  */
-import { PATTERN_DEFAULT_CATEGORY } from '../../utils/constants';
+import {
+	PATTERN_DEFAULT_CATEGORY,
+	PATTERN_USER_CATEGORY,
+	PATTERN_TYPES,
+} from '../../utils/constants';
 
 // Default search helpers.
 const defaultGetName = ( item ) => item.name || '';
@@ -141,6 +145,8 @@ function getItemSearchRank( item, searchTerm, config ) {
 
 	let rank =
 		categoryId === PATTERN_DEFAULT_CATEGORY ||
+		( categoryId === PATTERN_USER_CATEGORY &&
+			item.type === PATTERN_TYPES.user ) ||
 		hasCategory( item, categoryId )
 			? 1
 			: 0;