@wordpress/edit-site 5.20.0 → 5.21.0

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

@@ -0,0 +1,348 @@
+/**
+ * External dependencies
+ */
+import {
+	getCoreRowModel,
+	getFilteredRowModel,
+	getSortedRowModel,
+	getPaginationRowModel,
+	useReactTable,
+	flexRender,
+} from '@tanstack/react-table';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	chevronDown,
+	chevronUp,
+	unseen,
+	check,
+	arrowUp,
+	arrowDown,
+} from '@wordpress/icons';
+import {
+	Button,
+	Icon,
+	privateApis as componentsPrivateApis,
+	VisuallyHidden,
+} from '@wordpress/components';
+import { useMemo, Children, Fragment } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import FieldActions from './field-actions';
+
+const {
+	DropdownMenuV2,
+	DropdownMenuGroupV2,
+	DropdownMenuItemV2,
+	DropdownMenuSeparatorV2,
+} = unlock( componentsPrivateApis );
+
+const EMPTY_OBJECT = {};
+const sortingItemsInfo = {
+	asc: { icon: arrowUp, label: __( 'Sort ascending' ) },
+	desc: { icon: arrowDown, label: __( 'Sort descending' ) },
+};
+const sortIcons = { asc: chevronUp, desc: chevronDown };
+function HeaderMenu( { dataView, header } ) {
+	if ( header.isPlaceholder ) {
+		return null;
+	}
+	const text = flexRender(
+		header.column.columnDef.header,
+		header.getContext()
+	);
+	const isSortable = !! header.column.getCanSort();
+	const isHidable = !! header.column.getCanHide();
+	if ( ! isSortable && ! isHidable ) {
+		return text;
+	}
+	const sortedDirection = header.column.getIsSorted();
+	return (
+		<DropdownMenuV2
+			align="start"
+			trigger={
+				<Button
+					icon={ sortIcons[ header.column.getIsSorted() ] }
+					iconPosition="right"
+					text={ text }
+					style={ { padding: 0 } }
+				/>
+			}
+		>
+			<WithSeparators>
+				{ isSortable && (
+					<DropdownMenuGroupV2>
+						{ Object.entries( sortingItemsInfo ).map(
+							( [ direction, info ] ) => (
+								<DropdownMenuItemV2
+									key={ direction }
+									prefix={ <Icon icon={ info.icon } /> }
+									suffix={
+										sortedDirection === direction && (
+											<Icon icon={ check } />
+										)
+									}
+									onSelect={ ( event ) => {
+										event.preventDefault();
+										if ( sortedDirection === direction ) {
+											dataView.resetSorting();
+										} else {
+											dataView.setSorting( [
+												{
+													id: header.column.id,
+													desc: direction === 'desc',
+												},
+											] );
+										}
+									} }
+								>
+									{ info.label }
+								</DropdownMenuItemV2>
+							)
+						) }
+					</DropdownMenuGroupV2>
+				) }
+				{ isHidable && (
+					<DropdownMenuItemV2
+						prefix={ <Icon icon={ unseen } /> }
+						onSelect={ ( event ) => {
+							event.preventDefault();
+							header.column.getToggleVisibilityHandler()( event );
+						} }
+					>
+						{ __( 'Hide' ) }
+					</DropdownMenuItemV2>
+				) }
+			</WithSeparators>
+		</DropdownMenuV2>
+	);
+}
+
+function WithSeparators( { children } ) {
+	return Children.toArray( children )
+		.filter( Boolean )
+		.map( ( child, i ) => (
+			<Fragment key={ i }>
+				{ i > 0 && <DropdownMenuSeparatorV2 /> }
+				{ child }
+			</Fragment>
+		) );
+}
+
+function ViewList( {
+	view,
+	onChangeView,
+	fields,
+	actions,
+	data,
+	isLoading = false,
+	paginationInfo,
+} ) {
+	const columns = useMemo( () => {
+		const _columns = fields.map( ( field ) => {
+			const { render, getValue, ...column } = field;
+			column.cell = ( props ) =>
+				render( { item: props.row.original, view } );
+			if ( getValue ) {
+				column.accessorFn = ( item ) => getValue( { item } );
+			}
+			return column;
+		} );
+		if ( actions?.length ) {
+			_columns.push( {
+				header: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,
+				id: 'actions',
+				cell: ( props ) => {
+					return (
+						<FieldActions
+							item={ props.row.original }
+							actions={ actions }
+						/>
+					);
+				},
+				enableHiding: false,
+			} );
+		}
+
+		return _columns;
+	}, [ fields, actions, view ] );
+
+	const columnVisibility = useMemo( () => {
+		if ( ! view.hiddenFields?.length ) {
+			return;
+		}
+		return view.hiddenFields.reduce(
+			( accumulator, fieldId ) => ( {
+				...accumulator,
+				[ fieldId ]: false,
+			} ),
+			{}
+		);
+	}, [ view.hiddenFields ] );
+
+	const dataView = useReactTable( {
+		data,
+		columns,
+		manualSorting: true,
+		manualFiltering: true,
+		manualPagination: true,
+		enableRowSelection: true,
+		state: {
+			sorting: view.sort
+				? [
+						{
+							id: view.sort.field,
+							desc: view.sort.direction === 'desc',
+						},
+				  ]
+				: [],
+			globalFilter: view.search,
+			pagination: {
+				pageIndex: view.page,
+				pageSize: view.perPage,
+			},
+			columnVisibility: columnVisibility ?? EMPTY_OBJECT,
+		},
+		onSortingChange: ( sortingUpdater ) => {
+			onChangeView( ( currentView ) => {
+				const sort =
+					typeof sortingUpdater === 'function'
+						? sortingUpdater(
+								currentView.sort
+									? [
+											{
+												id: currentView.sort.field,
+												desc:
+													currentView.sort
+														.direction === 'desc',
+											},
+									  ]
+									: []
+						  )
+						: sortingUpdater;
+				if ( ! sort.length ) {
+					return {
+						...currentView,
+						sort: {},
+					};
+				}
+				const [ { id, desc } ] = sort;
+				return {
+					...currentView,
+					sort: { field: id, direction: desc ? 'desc' : 'asc' },
+				};
+			} );
+		},
+		onColumnVisibilityChange: ( columnVisibilityUpdater ) => {
+			onChangeView( ( currentView ) => {
+				const hiddenFields = Object.entries(
+					columnVisibilityUpdater()
+				).reduce(
+					( accumulator, [ fieldId, value ] ) => {
+						if ( value ) {
+							return accumulator.filter(
+								( id ) => id !== fieldId
+							);
+						}
+						return [ ...accumulator, fieldId ];
+					},
+					[ ...( currentView.hiddenFields || [] ) ]
+				);
+				return {
+					...currentView,
+					hiddenFields,
+				};
+			} );
+		},
+		onGlobalFilterChange: ( value ) => {
+			onChangeView( { ...view, search: value, page: 0 } );
+		},
+		onPaginationChange: ( paginationUpdater ) => {
+			onChangeView( ( currentView ) => {
+				const { pageIndex, pageSize } = paginationUpdater( {
+					pageIndex: currentView.page,
+					pageSize: currentView.perPage,
+				} );
+				return { ...view, page: pageIndex, perPage: pageSize };
+			} );
+		},
+		getCoreRowModel: getCoreRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		pageCount: paginationInfo.totalPages,
+	} );
+
+	const { rows } = dataView.getRowModel();
+	const hasRows = !! rows?.length;
+	if ( isLoading ) {
+		// TODO:Add spinner or progress bar..
+		return <h3>{ __( 'Loading' ) }</h3>;
+	}
+	return (
+		<div className="dataviews-list-view-wrapper">
+			{ hasRows && (
+				<table className="dataviews-list-view">
+					<thead>
+						{ dataView.getHeaderGroups().map( ( headerGroup ) => (
+							<tr key={ headerGroup.id }>
+								{ headerGroup.headers.map( ( header ) => (
+									<th
+										key={ header.id }
+										colSpan={ header.colSpan }
+										style={ {
+											width:
+												header.column.columnDef.width ||
+												undefined,
+											maxWidth:
+												header.column.columnDef
+													.maxWidth || undefined,
+										} }
+									>
+										<HeaderMenu
+											dataView={ dataView }
+											header={ header }
+										/>
+									</th>
+								) ) }
+							</tr>
+						) ) }
+					</thead>
+					<tbody>
+						{ rows.map( ( row ) => (
+							<tr key={ row.id }>
+								{ row.getVisibleCells().map( ( cell ) => (
+									<td
+										key={ cell.id }
+										style={ {
+											width:
+												cell.column.columnDef.width ||
+												undefined,
+											maxWidth:
+												cell.column.columnDef
+													.maxWidth || undefined,
+										} }
+									>
+										{ flexRender(
+											cell.column.columnDef.cell,
+											cell.getContext()
+										) }
+									</td>
+								) ) }
+							</tr>
+						) ) }
+					</tbody>
+				</table>
+			) }
+			{ ! hasRows && <p>{ __( 'no results' ) }</p> }
+		</div>
+	);
+}
+
+export default ViewList;

package/src/components/editor/index.js

@@ -44,6 +44,7 @@ import CanvasLoader from '../canvas-loader';
 import { unlock } from '../../lock-unlock';
 import useEditedEntityRecord from '../use-edited-entity-record';
 import { SidebarFixedBottomSlot } from '../sidebar-edit-mode/sidebar-fixed-bottom';
+import PatternModal from '../pattern-modal';
 import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 const { BlockRemovalWarningModal } = unlock( blockEditorPrivateApis );
@@ -220,6 +221,7 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 											<BlockRemovalWarningModal
 												rules={ blockRemovalRules }
 											/>
+											<PatternModal />
 										</>
 									) }
 									{ editorMode === 'text' &&

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

@@ -323,17 +323,23 @@ function FontLibraryProvider( { children } ) {
 		setFontCollections( response );
 	};
 	const getFontCollection = async ( id ) => {
-		const hasData = !! collections.find(
-			( collection ) => collection.id === id
-		)?.data;
-		if ( hasData ) return;
-		const response = await fetchFontCollection( id );
-		const updatedCollections = collections.map( ( collection ) =>
-			collection.id === id
-				? { ...collection, data: { ...response?.data } }
-				: collection
-		);
-		setFontCollections( updatedCollections );
+		try {
+			const hasData = !! collections.find(
+				( collection ) => collection.id === id
+			)?.data;
+			if ( hasData ) return;
+			const response = await fetchFontCollection( id );
+			const updatedCollections = collections.map( ( collection ) =>
+				collection.id === id
+					? { ...collection, data: { ...response?.data } }
+					: collection
+			);
+			setFontCollections( updatedCollections );
+		} catch ( e ) {
+			// eslint-disable-next-line no-console
+			console.error( e );
+			throw e;
+		}
 	};
 
 	useEffect( () => {

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

@@ -72,20 +72,32 @@ function FontCollection( { id } ) {
 	}, [ id, requiresPermission ] );
 
 	useEffect( () => {
-		getFontCollection( id );
-		resetFilters();
+		const fetchFontCollection = async () => {
+			try {
+				await getFontCollection( id );
+				resetFilters();
+			} catch ( e ) {
+				setNotice( {
+					type: 'error',
+					message: e?.message,
+					duration: 0, // Don't auto-hide.
+				} );
+			}
+		};
+		fetchFontCollection();
 	}, [ id, getFontCollection ] );
 
 	useEffect( () => {
 		setSelectedFont( null );
+		setNotice( null );
 	}, [ id ] );
 
 	// Reset notice after 5 seconds
 	useEffect( () => {
-		if ( notice ) {
+		if ( notice && notice?.duration !== 0 ) {
 			const timeout = setTimeout( () => {
 				setNotice( null );
-			}, 5000 );
+			}, notice.duration ?? 5000 );
 			return () => clearTimeout( timeout );
 		}
 	}, [ notice ] );
@@ -167,10 +179,6 @@ function FontCollection( { id } ) {
 				</>
 			) }
 
-			{ ! renderConfirmDialog && ! selectedCollection.data && (
-				<Spinner />
-			) }
-
 			{ notice && (
 				<>
 					<FlexItem>
@@ -227,9 +235,9 @@ function FontCollection( { id } ) {
 			) }
 
 			<Spacer margin={ 4 } />
-
 			{ ! renderConfirmDialog &&
-				! selectedCollection?.data?.fontFamilies && <Spinner /> }
+				! selectedCollection?.data?.fontFamilies &&
+				! notice && <Spinner /> }
 
 			{ ! renderConfirmDialog &&
 				!! selectedCollection?.data?.fontFamilies?.length &&

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

@@ -132,8 +132,7 @@ function ScreenBlock( { name, variation } ) {
 			: undefined;
 
 		return {
-			canEditCSS:
-				!! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,
+			canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
 		};
 	}, [] );
 	const currentBlockStyle = variation

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

@@ -47,8 +47,7 @@ function ScreenRoot() {
 			hasVariations:
 				!! __experimentalGetCurrentThemeGlobalStylesVariations()
 					?.length,
-			canEditCSS:
-				!! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,
+			canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
 		};
 	}, [] );
 

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

@@ -85,23 +85,35 @@
 
 .edit-site-global-styles-variations_item {
 	box-sizing: border-box;
+	// To round the outline in Windows 10 high contrast mode.
+	border-radius: $radius-block-ui;
 
 	.edit-site-global-styles-variations_item-preview {
 		padding: $border-width * 2;
 		border-radius: $radius-block-ui;
-		border: $gray-200 $border-width solid;
+		box-shadow: 0 0 0 $border-width $gray-200;
+		// Shown in Windows 10 high contrast mode.
+		outline: 1px solid transparent;
 	}
 
 	&.is-active .edit-site-global-styles-variations_item-preview {
-		border: $gray-900 $border-width solid;
+		box-shadow: 0 0 0 $border-width $gray-900;
+		// Shown in Windows 10 high contrast mode.
+		outline-width: 3px;
 	}
 
 	&:hover .edit-site-global-styles-variations_item-preview {
-		border: var(--wp-admin-theme-color) $border-width solid;
+		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
 	}
 
 	&:focus .edit-site-global-styles-variations_item-preview {
-		border: var(--wp-admin-theme-color) var(--wp-admin-border-width-focus) solid;
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	}
+
+	&:focus-visible {
+		// Shown in Windows 10 high contrast mode.
+		outline: 3px solid transparent;
+		outline-offset: 0;
 	}
 }
 

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

@@ -65,8 +65,7 @@ function GlobalStylesActionMenu() {
 			: undefined;
 
 		return {
-			canEditCSS:
-				!! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,
+			canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
 		};
 	}, [] );
 	const { goTo } = useNavigator();

package/src/components/layout/index.js

@@ -29,6 +29,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	privateApis as blockEditorPrivateApis,
 	useBlockCommands,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
@@ -80,6 +81,7 @@ export default function Layout() {
 	const {
 		isDistractionFree,
 		hasFixedToolbar,
+		hasBlockSelected,
 		canvasMode,
 		previousShortcut,
 		nextShortcut,
@@ -104,6 +106,8 @@ export default function Layout() {
 				'core/edit-site',
 				'distractionFree'
 			),
+			hasBlockSelected:
+				select( blockEditorStore ).getBlockSelectionStart(),
 		};
 	}, [] );
 	const isEditing = canvasMode === 'edit';
@@ -152,10 +156,14 @@ export default function Layout() {
 	}
 
 	// Sets the right context for the command palette
-	const commandContext =
-		canvasMode === 'edit' && isEditorPage
-			? 'site-editor-edit'
-			: 'site-editor';
+	let commandContext = 'site-editor';
+
+	if ( canvasMode === 'edit' && isEditorPage ) {
+		commandContext = 'site-editor-edit';
+	}
+	if ( hasBlockSelected ) {
+		commandContext = 'block-selection-edit';
+	}
 	useCommandContext( commandContext );
 
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );

package/src/components/media/index.js

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityRecord } from '@wordpress/core-data';
+
+function Media( { id, size = [ 'large', 'medium', 'thumbnail' ], ...props } ) {
+	const { record: media } = useEntityRecord( 'root', 'media', id );
+	const currentSize = size.find(
+		( s ) => !! media?.media_details?.sizes[ s ]
+	);
+	const mediaDetails = media?.media_details?.sizes[ currentSize ];
+	if ( ! mediaDetails ) {
+		return null;
+	}
+
+	return (
+		<img
+			{ ...props }
+			src={ mediaDetails.source_url }
+			alt={ media.alt_text }
+		/>
+	);
+}
+
+export default Media;

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

@@ -10,17 +10,11 @@ import { moreVertical } from '@wordpress/icons';
  */
 import TrashPageMenuItem from './trash-page-menu-item';
 
-export default function PageActions( {
-	postId,
-	className,
-	toggleProps,
-	onRemove,
-} ) {
+export default function PageActions( { postId, toggleProps, onRemove } ) {
 	return (
 		<DropdownMenu
 			icon={ moreVertical }
 			label={ __( 'Actions' ) }
-			className={ className }
 			toggleProps={ toggleProps }
 		>
 			{ () => (