@wordpress/edit-site 5.23.0 → 5.24.0

package/src/components/dataviews/view-list.js

@@ -14,6 +14,7 @@ import {
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useAsyncList } from '@wordpress/compose';
 import {
 	chevronDown,
 	chevronUp,
@@ -36,14 +37,15 @@ import { useMemo, Children, Fragment } from '@wordpress/element';
  */
 import { unlock } from '../../lock-unlock';
 import ItemActions from './item-actions';
+import { ENUMERATION_TYPE, OPERATOR_IN } from './constants';
 
 const {
-	DropdownMenuV2,
-	DropdownMenuGroupV2,
-	DropdownMenuItemV2,
-	DropdownMenuSeparatorV2,
-	DropdownSubMenuV2,
-	DropdownSubMenuTriggerV2,
+	DropdownMenuV2: DropdownMenu,
+	DropdownMenuGroupV2: DropdownMenuGroup,
+	DropdownMenuItemV2: DropdownMenuItem,
+	DropdownMenuSeparatorV2: DropdownMenuSeparator,
+	DropdownSubMenuV2: DropdownSubMenu,
+	DropdownSubMenuTriggerV2: DropdownSubMenuTrigger,
 } = unlock( componentsPrivateApis );
 
 const EMPTY_OBJECT = {};
@@ -52,6 +54,7 @@ const sortingItemsInfo = {
 	desc: { icon: arrowDown, label: __( 'Sort descending' ) },
 };
 const sortIcons = { asc: chevronUp, desc: chevronDown };
+
 function HeaderMenu( { dataView, header } ) {
 	if ( header.isPlaceholder ) {
 		return null;
@@ -68,27 +71,16 @@ function HeaderMenu( { dataView, header } ) {
 	const sortedDirection = header.column.getIsSorted();
 
 	let filter;
-	if (
-		header.column.columnDef.filters?.length > 0 &&
-		header.column.columnDef.filters.some(
-			( f ) => 'string' === typeof f && f === 'in'
-		)
-	) {
+	if ( header.column.columnDef.type === ENUMERATION_TYPE ) {
 		filter = {
 			field: header.column.columnDef.id,
-			elements: [
-				{
-					value: '',
-					label: __( 'All' ),
-				},
-				...( header.column.columnDef.elements || [] ),
-			],
+			elements: header.column.columnDef.elements || [],
 		};
 	}
 	const isFilterable = !! filter;
 
 	return (
-		<DropdownMenuV2
+		<DropdownMenu
 			align="start"
 			trigger={
 				<Button
@@ -101,10 +93,10 @@ function HeaderMenu( { dataView, header } ) {
 		>
 			<WithSeparators>
 				{ isSortable && (
-					<DropdownMenuGroupV2>
+					<DropdownMenuGroup>
 						{ Object.entries( sortingItemsInfo ).map(
 							( [ direction, info ] ) => (
-								<DropdownMenuItemV2
+								<DropdownMenuItem
 									key={ direction }
 									prefix={ <Icon icon={ info.icon } /> }
 									suffix={
@@ -127,13 +119,13 @@ function HeaderMenu( { dataView, header } ) {
 									} }
 								>
 									{ info.label }
-								</DropdownMenuItemV2>
+								</DropdownMenuItem>
 							)
 						) }
-					</DropdownMenuGroupV2>
+					</DropdownMenuGroup>
 				) }
 				{ isHidable && (
-					<DropdownMenuItemV2
+					<DropdownMenuItem
 						prefix={ <Icon icon={ unseen } /> }
 						onSelect={ ( event ) => {
 							event.preventDefault();
@@ -141,21 +133,21 @@ function HeaderMenu( { dataView, header } ) {
 						} }
 					>
 						{ __( 'Hide' ) }
-					</DropdownMenuItemV2>
+					</DropdownMenuItem>
 				) }
 				{ isFilterable && (
-					<DropdownMenuGroupV2>
-						<DropdownSubMenuV2
+					<DropdownMenuGroup>
+						<DropdownSubMenu
 							key={ filter.field }
 							trigger={
-								<DropdownSubMenuTriggerV2
+								<DropdownSubMenuTrigger
 									prefix={ <Icon icon={ funnel } /> }
 									suffix={
 										<Icon icon={ chevronRightSmall } />
 									}
 								>
 									{ __( 'Filter by' ) }
-								</DropdownSubMenuTriggerV2>
+								</DropdownSubMenuTrigger>
 							}
 						>
 							{ filter.elements.map( ( element ) => {
@@ -169,11 +161,6 @@ function HeaderMenu( { dataView, header } ) {
 										)[ 0 ] === filter.field
 								);
 
-								// Set the empty item as active if the filter is not set.
-								if ( ! columnFilter && element.value === '' ) {
-									isActive = true;
-								}
-
 								if ( columnFilter ) {
 									const value =
 										Object.values( columnFilter )[ 0 ];
@@ -183,7 +170,7 @@ function HeaderMenu( { dataView, header } ) {
 								}
 
 								return (
-									<DropdownMenuItemV2
+									<DropdownMenuItem
 										key={ element.value }
 										suffix={
 											isActive && <Icon icon={ check } />
@@ -202,35 +189,32 @@ function HeaderMenu( { dataView, header } ) {
 														return (
 															field !==
 																filter.field ||
-															operator !== 'in'
+															operator !==
+																OPERATOR_IN
 														);
 													}
 												);
 
-											if ( element.value === '' ) {
-												dataView.setColumnFilters(
-													otherFilters
-												);
-											} else {
-												dataView.setColumnFilters( [
-													...otherFilters,
-													{
-														[ filter.field +
-														':in' ]: element.value,
-													},
-												] );
-											}
+											dataView.setColumnFilters( [
+												...otherFilters,
+												{
+													[ filter.field + ':in' ]:
+														isActive
+															? undefined
+															: element.value,
+												},
+											] );
 										} }
 									>
 										{ element.label }
-									</DropdownMenuItemV2>
+									</DropdownMenuItem>
 								);
 							} ) }
-						</DropdownSubMenuV2>
-					</DropdownMenuGroupV2>
+						</DropdownSubMenu>
+					</DropdownMenuGroup>
 				) }
 			</WithSeparators>
-		</DropdownMenuV2>
+		</DropdownMenu>
 	);
 }
 
@@ -239,7 +223,7 @@ function WithSeparators( { children } ) {
 		.filter( Boolean )
 		.map( ( child, i ) => (
 			<Fragment key={ i }>
-				{ i > 0 && <DropdownMenuSeparatorV2 /> }
+				{ i > 0 && <DropdownMenuSeparator /> }
 				{ child }
 			</Fragment>
 		) );
@@ -251,6 +235,7 @@ function ViewList( {
 	fields,
 	actions,
 	data,
+	getItemId,
 	isLoading = false,
 	paginationInfo,
 } ) {
@@ -348,8 +333,9 @@ function ViewList( {
 			return { field, operator, value };
 		} );
 
+	const shownData = useAsyncList( data );
 	const dataView = useReactTable( {
-		data,
+		data: shownData,
 		columns,
 		manualSorting: true,
 		manualFiltering: true,
@@ -372,6 +358,7 @@ function ViewList( {
 			},
 			columnVisibility: columnVisibility ?? EMPTY_OBJECT,
 		},
+		getRowId: getItemId,
 		onSortingChange: ( sortingUpdater ) => {
 			onChangeView( ( currentView ) => {
 				const sort =
@@ -470,6 +457,9 @@ function ViewList( {
 											width:
 												header.column.columnDef.width ||
 												undefined,
+											minWidth:
+												header.column.columnDef
+													.minWidth || undefined,
 											maxWidth:
 												header.column.columnDef
 													.maxWidth || undefined,
@@ -490,11 +480,14 @@ function ViewList( {
 							<tr key={ row.id }>
 								{ row.getVisibleCells().map( ( cell ) => (
 									<td
-										key={ cell.id }
+										key={ cell.column.id }
 										style={ {
 											width:
 												cell.column.columnDef.width ||
 												undefined,
+											minWidth:
+												cell.column.columnDef
+													.minWidth || undefined,
 											maxWidth:
 												cell.column.columnDef
 													.maxWidth || undefined,

package/src/components/editor/index.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { Notice } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -25,10 +25,11 @@ import {
 	EditorNotices,
 	EditorSnackbars,
 	privateApis as editorPrivateApis,
+	store as editorStore,
 } from '@wordpress/editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreDataStore } from '@wordpress/core-data';
-import { useMemo } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -97,14 +98,13 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 		contextPost,
 		editorMode,
 		canvasMode,
+		renderingMode,
 		blockEditorMode,
 		isRightSidebarOpen,
 		isInserterOpen,
 		isListViewOpen,
 		showIconLabels,
 		showBlockBreadcrumbs,
-		hasPageContentFocus,
-		pageContentFocusType,
 	} = useSelect( ( select ) => {
 		const {
 			getEditedPostContext,
@@ -112,12 +112,11 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 			getCanvasMode,
 			isInserterOpened,
 			isListViewOpened,
-			hasPageContentFocus: _hasPageContentFocus,
-			getPageContentFocusType,
 		} = unlock( select( editSiteStore ) );
 		const { __unstableGetEditorMode } = select( blockEditorStore );
 		const { getActiveComplementaryArea } = select( interfaceStore );
 		const { getEntityRecord } = select( coreDataStore );
+		const { getRenderingMode } = select( editorStore );
 		const _context = getEditedPostContext();
 
 		// The currently selected entity to display.
@@ -133,6 +132,7 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 				: undefined,
 			editorMode: getEditorMode(),
 			canvasMode: getCanvasMode(),
+			renderingMode: getRenderingMode(),
 			blockEditorMode: __unstableGetEditorMode(),
 			isInserterOpen: isInserterOpened(),
 			isListViewOpen: isListViewOpened(),
@@ -147,10 +147,9 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 				'core/edit-site',
 				'showBlockBreadcrumbs'
 			),
-			hasPageContentFocus: _hasPageContentFocus(),
-			pageContentFocusType: getPageContentFocusType(),
 		};
 	}, [] );
+	const { setRenderingMode } = useDispatch( editorStore );
 
 	const isViewMode = canvasMode === 'view';
 	const isEditMode = canvasMode === 'edit';
@@ -165,7 +164,7 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 	const secondarySidebarLabel = isListViewOpen
 		? __( 'List View' )
 		: __( 'Block Library' );
-	const postWithTemplate = context?.postId;
+	const postWithTemplate = !! context?.postId;
 
 	let title;
 	if ( hasLoadedPost ) {
@@ -192,31 +191,16 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 		! isLoading &&
 		( ( postWithTemplate && !! contextPost && !! editedPost ) ||
 			( ! postWithTemplate && !! editedPost ) );
-	const mode = useMemo( () => {
-		if ( isViewMode ) {
-			return postWithTemplate ? 'template-locked' : 'all';
-		}
-
-		if ( isEditMode && pageContentFocusType === 'hideTemplate' ) {
-			return 'post-only';
-		}
 
-		if ( postWithTemplate && hasPageContentFocus ) {
-			return 'template-locked';
+	// This is the only reliable way I've found to reinitialize the rendering mode
+	// when the canvas mode or the edited entity changes.
+	useEffect( () => {
+		if ( canvasMode === 'edit' && postWithTemplate ) {
+			setRenderingMode( 'template-locked' );
+		} else {
+			setRenderingMode( 'all' );
 		}
-
-		if ( postWithTemplate && ! hasPageContentFocus ) {
-			return 'template-only';
-		}
-
-		return 'all';
-	}, [
-		isViewMode,
-		isEditMode,
-		postWithTemplate,
-		pageContentFocusType,
-		hasPageContentFocus,
-	] );
+	}, [ canvasMode, postWithTemplate, setRenderingMode ] );
 
 	return (
 		<>
@@ -237,7 +221,6 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 					}
 					settings={ settings }
 					useSubRegistry={ false }
-					mode={ mode }
 				>
 					<SidebarComplementaryAreaFills />
 					{ isEditMode && <StartTemplateOptions /> }
@@ -298,7 +281,8 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 							shouldShowBlockBreadcrumbs && (
 								<BlockBreadcrumb
 									rootLabelText={
-										hasPageContentFocus
+										postWithTemplate &&
+										renderingMode !== 'template-only'
 											? __( 'Page' )
 											: __( 'Template' )
 									}

package/src/components/global-styles/font-library-modal/utils/get-intersecting-font-faces.js

@@ -47,7 +47,7 @@ export default function getIntersectingFontFaces( incoming, existing ) {
 						} );
 					}
 				);
-				matches.push( { ...existingFont, fontFace: matchingFaces } );
+				matches.push( { ...incomingFont, fontFace: matchingFaces } );
 			} else {
 				matches.push( incomingFont );
 			}

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

@@ -1,8 +1,12 @@
+/**
+ * External dependencies
+ */
+import { paramCase as kebabCase } from 'change-case';
+
 /**
  * Internal dependencies
  */
 import { FONT_WEIGHTS, FONT_STYLES } from './constants';
-import { formatFontFamily } from './preview-styles';
 
 export function setUIValuesNeeded( font, extraValues = {} ) {
 	if ( ! font.name && ( font.fontFamily || font.slug ) ) {
@@ -85,14 +89,10 @@ export async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) {
 	}
 
 	// eslint-disable-next-line no-undef
-	const newFont = new FontFace(
-		formatFontFamily( fontFace.fontFamily ),
-		dataSource,
-		{
-			style: fontFace.fontStyle,
-			weight: fontFace.fontWeight,
-		}
-	);
+	const newFont = new FontFace( fontFace.fontFamily, dataSource, {
+		style: fontFace.fontStyle,
+		weight: fontFace.fontWeight,
+	} );
 
 	const loadedFace = await newFont.load();
 
@@ -129,9 +129,20 @@ export function getDisplaySrcFromFontFace( input, urlPrefix ) {
 	return src;
 }
 
+// This function replicates one behavior of _wp_to_kebab_case().
+// Additional context: https://github.com/WordPress/gutenberg/issues/53695
+export function wpKebabCase( str ) {
+	// If a string contains a digit followed by a number, insert a dash between them.
+	return kebabCase( str ).replace(
+		/([a-zA-Z])(\d)|(\d)([a-zA-Z])/g,
+		'$1$3-$2$4'
+	);
+}
+
 export function makeFormDataFromFontFamilies( fontFamilies ) {
 	const formData = new FormData();
 	const newFontFamilies = fontFamilies.map( ( family, familyIndex ) => {
+		family.slug = wpKebabCase( family.slug );
 		if ( family?.fontFace ) {
 			family.fontFace = family.fontFace.map( ( face, faceIndex ) => {
 				if ( face.file ) {

package/src/components/global-styles/font-library-modal/utils/test/getIntersectingFontFaces.spec.js

@@ -5,7 +5,7 @@ import getIntersectingFontFaces from '../get-intersecting-font-faces';
 
 describe( 'getIntersectingFontFaces', () => {
 	it( 'returns matching font faces for matching font family', () => {
-		const intendedFontsFamilies = [
+		const incomingFontFamilies = [
 			{
 				slug: 'lobster',
 				fontFace: [
@@ -30,15 +30,15 @@ describe( 'getIntersectingFontFaces', () => {
 		];
 
 		const result = getIntersectingFontFaces(
-			intendedFontsFamilies,
+			incomingFontFamilies,
 			existingFontFamilies
 		);
 
-		expect( result ).toEqual( intendedFontsFamilies );
+		expect( result ).toEqual( incomingFontFamilies );
 	} );
 
 	it( 'returns empty array when there is no match', () => {
-		const intendedFontsFamilies = [
+		const incomingFontFamilies = [
 			{
 				slug: 'lobster',
 				fontFace: [
@@ -63,7 +63,7 @@ describe( 'getIntersectingFontFaces', () => {
 		];
 
 		const result = getIntersectingFontFaces(
-			intendedFontsFamilies,
+			incomingFontFamilies,
 			existingFontFamilies
 		);
 
@@ -71,7 +71,7 @@ describe( 'getIntersectingFontFaces', () => {
 	} );
 
 	it( 'returns matching font faces', () => {
-		const intendedFontsFamilies = [
+		const incomingFontFamilies = [
 			{
 				slug: 'lobster',
 				fontFace: [
@@ -129,7 +129,7 @@ describe( 'getIntersectingFontFaces', () => {
 		];
 
 		const result = getIntersectingFontFaces(
-			intendedFontsFamilies,
+			incomingFontFamilies,
 			existingFontFamilies
 		);
 
@@ -137,7 +137,7 @@ describe( 'getIntersectingFontFaces', () => {
 	} );
 
 	it( 'returns empty array when the first list is empty', () => {
-		const intendedFontsFamilies = [];
+		const incomingFontFamilies = [];
 
 		const existingFontFamilies = [
 			{
@@ -152,7 +152,7 @@ describe( 'getIntersectingFontFaces', () => {
 		];
 
 		const result = getIntersectingFontFaces(
-			intendedFontsFamilies,
+			incomingFontFamilies,
 			existingFontFamilies
 		);
 
@@ -160,7 +160,7 @@ describe( 'getIntersectingFontFaces', () => {
 	} );
 
 	it( 'returns empty array when the second list is empty', () => {
-		const intendedFontsFamilies = [
+		const incomingFontFamilies = [
 			{
 				slug: 'lobster',
 				fontFace: [
@@ -175,7 +175,7 @@ describe( 'getIntersectingFontFaces', () => {
 		const existingFontFamilies = [];
 
 		const result = getIntersectingFontFaces(
-			intendedFontsFamilies,
+			incomingFontFamilies,
 			existingFontFamilies
 		);
 
@@ -183,7 +183,7 @@ describe( 'getIntersectingFontFaces', () => {
 	} );
 
 	it( 'returns intersecting font family when there are no fonfaces', () => {
-		const intendedFontsFamilies = [
+		const incomingFontFamilies = [
 			{
 				slug: 'piazzolla',
 				fontFace: [ { fontStyle: 'normal', fontWeight: '400' } ],
@@ -200,7 +200,7 @@ describe( 'getIntersectingFontFaces', () => {
 		];
 
 		const result = getIntersectingFontFaces(
-			intendedFontsFamilies,
+			incomingFontFamilies,
 			existingFontFamilies
 		);
 
@@ -208,7 +208,7 @@ describe( 'getIntersectingFontFaces', () => {
 	} );
 
 	it( 'returns intersecting if there is an intended font face and is not present in the returning it should not be returned', () => {
-		const intendedFontsFamilies = [
+		const incomingFontFamilies = [
 			{
 				slug: 'piazzolla',
 				fontFace: [ { fontStyle: 'normal', fontWeight: '400' } ],
@@ -226,7 +226,7 @@ describe( 'getIntersectingFontFaces', () => {
 		];
 
 		const result = getIntersectingFontFaces(
-			intendedFontsFamilies,
+			incomingFontFamilies,
 			existingFontFamilies
 		);
 		const expected = [
@@ -237,4 +237,35 @@ describe( 'getIntersectingFontFaces', () => {
 		];
 		expect( result ).toEqual( expected );
 	} );
+
+	it( 'updates font family definition using the incoming data', () => {
+		const incomingFontFamilies = [
+			{
+				slug: 'gothic-a1',
+				fontFace: [ { fontStyle: 'normal', fontWeight: '400' } ],
+				fontFamily: "'Gothic A1', serif",
+			},
+		];
+
+		const existingFontFamilies = [
+			{
+				slug: 'gothic-a1',
+				fontFace: [ { fontStyle: 'normal', fontWeight: '400' } ],
+				fontFamily: 'Gothic A1, serif',
+			},
+		];
+
+		const result = getIntersectingFontFaces(
+			incomingFontFamilies,
+			existingFontFamilies
+		);
+		const expected = [
+			{
+				slug: 'gothic-a1',
+				fontFace: [ { fontStyle: 'normal', fontWeight: '400' } ],
+				fontFamily: "'Gothic A1', serif",
+			},
+		];
+		expect( result ).toEqual( expected );
+	} );
 } );

package/src/components/global-styles/font-library-modal/utils/test/wpKebabCase.spec.js

@@ -0,0 +1,28 @@
+/**
+ * Internal dependencies
+ */
+import { wpKebabCase } from '../index';
+
+describe( 'wpKebabCase', () => {
+	it( 'should insert a dash between a letter and a digit', () => {
+		const input = 'abc1def';
+		const expectedOutput = 'abc-1def';
+		expect( wpKebabCase( input ) ).toEqual( expectedOutput );
+
+		const input2 = 'abc1def2ghi';
+		const expectedOutput2 = 'abc-1def-2ghi';
+		expect( wpKebabCase( input2 ) ).toEqual( expectedOutput2 );
+	} );
+
+	it( 'should not insert a dash between two letters', () => {
+		const input = 'abcdef';
+		const expectedOutput = 'abcdef';
+		expect( wpKebabCase( input ) ).toEqual( expectedOutput );
+	} );
+
+	it( 'should not insert a dash between a digit and a hyphen', () => {
+		const input = 'abc1-def';
+		const expectedOutput = 'abc-1-def';
+		expect( wpKebabCase( input ) ).toEqual( expectedOutput );
+	} );
+} );

package/src/components/global-styles/header.js

@@ -12,7 +12,7 @@ import {
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
 
-function ScreenHeader( { title, description } ) {
+function ScreenHeader( { title, description, onBack } ) {
 	return (
 		<VStack spacing={ 0 }>
 			<View>
@@ -27,6 +27,7 @@ function ScreenHeader( { title, description } ) {
 							icon={ isRTL() ? chevronRight : chevronLeft }
 							isSmall
 							aria-label={ __( 'Navigate to the previous view' ) }
+							onClick={ onBack }
 						/>
 						<Spacer>
 							<Heading