@wordpress/edit-site 5.19.6 → 5.20.1

package/src/components/dataviews/dataviews.js

@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+import {
+	getCoreRowModel,
+	getFilteredRowModel,
+	getSortedRowModel,
+	getPaginationRowModel,
+	useReactTable,
+} from '@tanstack/react-table';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ListView from './list-view';
+import { Pagination } from './pagination';
+import ViewActions from './view-actions';
+import TextFilter from './text-filter';
+
+export default function DataViews( {
+	data,
+	fields,
+	isLoading,
+	paginationInfo,
+	options,
+} ) {
+	const dataView = useReactTable( {
+		data,
+		columns: fields,
+		...options,
+		getCoreRowModel: getCoreRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+	} );
+	return (
+		<div className="dataviews-wrapper">
+			<VStack spacing={ 4 }>
+				<HStack justify="space-between">
+					<TextFilter onChange={ dataView.setGlobalFilter } />
+					<ViewActions dataView={ dataView } />
+				</HStack>
+				{ /* This component will be selected based on viewConfigs. Now we only have the list view. */ }
+				<ListView dataView={ dataView } isLoading={ isLoading } />
+				<Pagination
+					dataView={ dataView }
+					totalItems={ paginationInfo?.totalItems }
+				/>
+			</VStack>
+		</div>
+	);
+}

package/src/components/dataviews/index.js

@@ -0,0 +1,2 @@
+export { default as DataViews } from './dataviews';
+export { PAGE_SIZE_VALUES } from './view-actions';

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

@@ -0,0 +1,106 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { flexRender } from '@tanstack/react-table';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { chevronDown, chevronUp } from '@wordpress/icons';
+import { Button } from '@wordpress/components';
+import { forwardRef } from '@wordpress/element';
+
+const sortIcons = { asc: chevronUp, desc: chevronDown };
+function Header( { header } ) {
+	if ( header.isPlaceholder ) {
+		return null;
+	}
+	const text = flexRender(
+		header.column.columnDef.header,
+		header.getContext()
+	);
+	if ( ! header.column.getCanSort() ) {
+		return text;
+	}
+	const sortDirection = header.column.getIsSorted();
+	return (
+		<Button
+			onClick={ header.column.getToggleSortingHandler() }
+			icon={ sortIcons[ sortDirection ] }
+			iconPosition="right"
+			text={ text }
+			style={ { padding: 0 } }
+		/>
+	);
+}
+
+function ListView( { dataView, className, isLoading = false }, ref ) {
+	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
+					ref={ ref }
+					className={ classnames( 'dataviews-list-view', className ) }
+				>
+					<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,
+										} }
+									>
+										<Header 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 forwardRef( ListView );

package/src/components/dataviews/pagination.js

@@ -0,0 +1,118 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+	__experimentalNumberControl as NumberControl,
+} from '@wordpress/components';
+import { createInterpolateElement } from '@wordpress/element';
+import { sprintf, __, _x, _n } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { PageSizeControl } from './view-actions';
+
+// For now this is copied from the patterns list Pagination component, because
+// the datatable pagination starts from index zero(`0`). Eventually all lists will be
+// using this one.
+export function Pagination( {
+	dataView,
+	// If passed, use it, as it's for controlled pagination.
+	totalItems = 0,
+} ) {
+	const currentPage = dataView.getState().pagination.pageIndex + 1;
+	const numPages = dataView.getPageCount();
+	const _totalItems = totalItems || dataView.getCoreRowModel().rows.length;
+	return (
+		<HStack
+			expanded={ false }
+			spacing={ 3 }
+			justify="space-between"
+			className="dataviews-pagination"
+		>
+			<Text variant="muted">
+				{
+					// translators: %s: Total number of entries.
+					sprintf(
+						// translators: %s: Total number of entries.
+						_n( '%s item', '%s items', _totalItems ),
+						_totalItems
+					)
+				}
+			</Text>
+			{ !! _totalItems && (
+				<HStack expanded={ false } spacing={ 1 }>
+					<Button
+						variant="tertiary"
+						onClick={ () => dataView.setPageIndex( 0 ) }
+						disabled={ ! dataView.getCanPreviousPage() }
+						aria-label={ __( 'First page' ) }
+					>
+						«
+					</Button>
+					<Button
+						variant="tertiary"
+						onClick={ () => dataView.previousPage() }
+						disabled={ ! dataView.getCanPreviousPage() }
+						aria-label={ __( 'Previous page' ) }
+					>
+						‹
+					</Button>
+					<HStack
+						justify="flex-start"
+						expanded={ false }
+						spacing={ 1 }
+					>
+						{ createInterpolateElement(
+							sprintf(
+								// translators: %1$s: Current page number, %2$s: Total number of pages.
+								_x( '<CurrenPageControl /> of %2$s', 'paging' ),
+								currentPage,
+								numPages
+							),
+							{
+								CurrenPageControl: (
+									<NumberControl
+										aria-label={ __( 'Current page' ) }
+										min={ 1 }
+										max={ numPages }
+										onChange={ ( value ) => {
+											if ( value > numPages ) return;
+											dataView.setPageIndex( value - 1 );
+										} }
+										step="1"
+										value={ currentPage }
+										isDragEnabled={ false }
+										spinControls="none"
+									/>
+								),
+							}
+						) }
+					</HStack>
+					<Button
+						variant="tertiary"
+						onClick={ () => dataView.nextPage() }
+						disabled={ ! dataView.getCanNextPage() }
+						aria-label={ __( 'Next page' ) }
+					>
+						›
+					</Button>
+					<Button
+						variant="tertiary"
+						onClick={ () =>
+							dataView.setPageIndex( dataView.getPageCount() - 1 )
+						}
+						disabled={ ! dataView.getCanNextPage() }
+						aria-label={ __( 'Last page' ) }
+					>
+						»
+					</Button>
+				</HStack>
+			) }
+			<PageSizeControl dataView={ dataView } />
+		</HStack>
+	);
+}

package/src/components/dataviews/style.scss

@@ -0,0 +1,36 @@
+.dataviews-wrapper {
+	width: 100%;
+	padding: $grid-unit-40;
+}
+
+.dataviews-list-view {
+	width: 100%;
+	text-indent: 0;
+	border-color: inherit;
+	border-collapse: collapse;
+	position: relative;
+	a {
+		text-decoration: none;
+	}
+	th {
+		text-align: left;
+		font-weight: normal;
+		padding: 0 $grid-unit-20 $grid-unit-20;
+		color: $gray-700;
+	}
+	td,
+	th {
+		padding: $grid-unit-15;
+		&:last-child {
+			text-align: right;
+		}
+	}
+	tr {
+		border-bottom: 1px solid $gray-100;
+	}
+}
+
+.dataviews__per-page-control-prefix {
+	color: $gray-700;
+	text-wrap: nowrap;
+}

package/src/components/dataviews/text-filter.js

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
+import { SearchControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import useDebouncedInput from '../../utils/use-debounced-input';
+
+export default function TextFilter( {
+	className,
+	searchLabel = __( 'Filter list' ),
+	onChange,
+} ) {
+	const [ search, setSearch, debouncedSearch ] = useDebouncedInput();
+	useEffect( () => {
+		onChange( debouncedSearch );
+	}, [ debouncedSearch, onChange ] );
+	return (
+		<SearchControl
+			className={ classnames( 'dataviews__text-filter', className ) }
+			onChange={ setSearch }
+			value={ search }
+			label={ searchLabel }
+			placeholder={ searchLabel }
+			size="compact"
+		/>
+	);
+}

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

@@ -0,0 +1,246 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Icon,
+	SelectControl,
+	privateApis as componentsPrivateApis,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+} from '@wordpress/components';
+import {
+	chevronRightSmall,
+	check,
+	blockTable,
+	chevronDown,
+	arrowUp,
+	arrowDown,
+} from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const {
+	DropdownMenuV2,
+	DropdownMenuGroupV2,
+	DropdownMenuItemV2,
+	DropdownSubMenuV2,
+	DropdownSubMenuTriggerV2,
+} = unlock( componentsPrivateApis );
+
+export const PAGE_SIZE_VALUES = [ 5, 20, 50 ];
+
+export function PageSizeControl( { dataView } ) {
+	const label = __( 'Rows per page:' );
+	return (
+		<SelectControl
+			__nextHasNoMarginBottom
+			label={ label }
+			hideLabelFromVision
+			// TODO: This should probably use a label based on the wanted design
+			// and we could remove InputControlPrefixWrapper usage.
+			prefix={
+				<InputControlPrefixWrapper
+					as="span"
+					className="dataviews__per-page-control-prefix"
+				>
+					{ label }
+				</InputControlPrefixWrapper>
+			}
+			value={ dataView.getState().pagination.pageSize }
+			options={ PAGE_SIZE_VALUES.map( ( pageSize ) => ( {
+				value: pageSize,
+				label: pageSize,
+			} ) ) }
+			onChange={ ( value ) => dataView.setPageSize( +value ) }
+		/>
+	);
+}
+
+function PageSizeMenu( { dataView } ) {
+	const currenPageSize = dataView.getState().pagination.pageSize;
+	return (
+		<DropdownSubMenuV2
+			trigger={
+				<DropdownSubMenuTriggerV2
+					suffix={
+						<>
+							{ currenPageSize }
+							<Icon icon={ chevronRightSmall } />
+						</>
+					}
+				>
+					{ /* TODO: probably label per view type. */ }
+					{ __( 'Rows per page' ) }
+				</DropdownSubMenuTriggerV2>
+			}
+		>
+			{ PAGE_SIZE_VALUES.map( ( size ) => {
+				return (
+					<DropdownMenuItemV2
+						key={ size }
+						prefix={
+							currenPageSize === size && <Icon icon={ check } />
+						}
+						onSelect={ ( event ) => {
+							// We need to handle this on DropDown component probably..
+							event.preventDefault();
+							dataView.setPageSize( size );
+						} }
+						// TODO: check about role and a11y.
+						role="menuitemcheckbox"
+					>
+						{ size }
+					</DropdownMenuItemV2>
+				);
+			} ) }
+		</DropdownSubMenuV2>
+	);
+}
+
+function FieldsVisibilityMenu( { dataView } ) {
+	const hideableFields = dataView
+		.getAllColumns()
+		.filter( ( columnn ) => columnn.getCanHide() );
+	if ( ! hideableFields?.length ) {
+		return null;
+	}
+	return (
+		<DropdownSubMenuV2
+			trigger={
+				<DropdownSubMenuTriggerV2
+					suffix={ <Icon icon={ chevronRightSmall } /> }
+				>
+					{ __( 'Fields' ) }
+				</DropdownSubMenuTriggerV2>
+			}
+		>
+			{ hideableFields?.map( ( field ) => {
+				return (
+					<DropdownMenuItemV2
+						key={ field.id }
+						prefix={
+							field.getIsVisible() && <Icon icon={ check } />
+						}
+						onSelect={ ( event ) => {
+							event.preventDefault();
+							field.getToggleVisibilityHandler()( event );
+						} }
+						role="menuitemcheckbox"
+					>
+						{ field.columnDef.header }
+					</DropdownMenuItemV2>
+				);
+			} ) }
+		</DropdownSubMenuV2>
+	);
+}
+
+// This object is used to construct the sorting options per sortable field.
+const sortingItemsInfo = {
+	asc: { icon: arrowUp, label: __( 'Sort ascending' ) },
+	desc: { icon: arrowDown, label: __( 'Sort descending' ) },
+};
+function SortMenu( { dataView } ) {
+	const sortableFields = dataView
+		.getAllColumns()
+		.filter( ( columnn ) => columnn.getCanSort() );
+	if ( ! sortableFields?.length ) {
+		return null;
+	}
+	const currentSortedField = sortableFields.find( ( field ) =>
+		field.getIsSorted()
+	);
+	return (
+		<DropdownSubMenuV2
+			trigger={
+				<DropdownSubMenuTriggerV2
+					suffix={
+						<>
+							{ currentSortedField?.columnDef.header }
+							<Icon icon={ chevronRightSmall } />
+						</>
+					}
+				>
+					{ __( 'Sort by' ) }
+				</DropdownSubMenuTriggerV2>
+			}
+		>
+			{ sortableFields?.map( ( field ) => {
+				const sortedDirection = field.getIsSorted();
+				return (
+					<DropdownSubMenuV2
+						key={ field.id }
+						trigger={
+							<DropdownSubMenuTriggerV2
+								suffix={ <Icon icon={ chevronRightSmall } /> }
+							>
+								{ field.columnDef.header }
+							</DropdownSubMenuTriggerV2>
+						}
+						side="left"
+					>
+						{ Object.entries( sortingItemsInfo ).map(
+							( [ direction, info ] ) => {
+								return (
+									<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: field.id,
+														desc:
+															direction ===
+															'desc',
+													},
+												] );
+											}
+										} }
+									>
+										{ info.label }
+									</DropdownMenuItemV2>
+								);
+							}
+						) }
+					</DropdownSubMenuV2>
+				);
+			} ) }
+		</DropdownSubMenuV2>
+	);
+}
+
+export default function ViewActions( { dataView, className } ) {
+	return (
+		<DropdownMenuV2
+			label={ __( 'Actions' ) }
+			className={ className }
+			trigger={
+				<Button variant="tertiary" icon={ blockTable }>
+					{ __( 'View' ) }
+					<Icon icon={ chevronDown } />
+				</Button>
+			}
+		>
+			<DropdownMenuGroupV2>
+				<SortMenu dataView={ dataView } />
+				<FieldsVisibilityMenu dataView={ dataView } />
+				<PageSizeMenu dataView={ dataView } />
+			</DropdownMenuGroupV2>
+		</DropdownMenuV2>
+	);
+}

package/src/components/global-styles/font-families.js

@@ -64,12 +64,8 @@ function FontFamilies() {
 	);
 }
 
-const FontFamiliesComponent = ( { ...props } ) => (
+export default ( { ...props } ) => (
 	<FontLibraryProvider>
 		<FontFamilies { ...props } />
 	</FontLibraryProvider>
 );
-
-export default process.env.IS_GUTENBERG_PLUGIN
-	? FontFamiliesComponent
-	: undefined;

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

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

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

@@ -60,7 +60,7 @@ import { withPluginContext } from '@wordpress/plugins';
  * );
  * ```
  *
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
  */
 export default compose(
 	withPluginContext( ( context, ownProps ) => {

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

@@ -48,7 +48,7 @@ import { ComplementaryAreaMoreMenuItem } from '@wordpress/interface';
  * );
  * ```
  *
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
  */
 
 export default function PluginSidebarMoreMenuItem( props ) {

package/src/components/page-content-focus-manager/index.js

@@ -1,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -10,12 +10,37 @@ import { store as editSiteStore } from '../../store';
 import DisableNonPageContentBlocks from './disable-non-page-content-blocks';
 import EditTemplateNotification from './edit-template-notification';
 import BackToPageNotification from './back-to-page-notification';
+import { unlock } from '../../lock-unlock';
 
 export default function PageContentFocusManager( { contentRef } ) {
-	const hasPageContentFocus = useSelect(
-		( select ) => select( editSiteStore ).hasPageContentFocus(),
+	const { hasPageContentFocus, pageContentFocusType, canvasMode } = useSelect(
+		( select ) => {
+			const { getPageContentFocusType, getCanvasMode } = unlock(
+				select( editSiteStore )
+			);
+			const _canvasMode = getCanvasMode();
+			return {
+				canvasMode: _canvasMode,
+				pageContentFocusType: getPageContentFocusType(),
+				hasPageContentFocus:
+					select( editSiteStore ).hasPageContentFocus(),
+			};
+		},
 		[]
 	);
+	const { setPageContentFocusType } = unlock( useDispatch( editSiteStore ) );
+
+	/*
+	 * Ensure that the page content focus type is set to `disableTemplate` when
+	 * the canvas mode is not `edit`. This makes the experience consistent with
+	 * refreshing the page, which resets the page content focus type.
+	 */
+	useEffect( () => {
+		if ( canvasMode !== 'edit' && !! pageContentFocusType ) {
+			setPageContentFocusType( null );
+		}
+	}, [ canvasMode, pageContentFocusType ] );
+
 	return (
 		<>
 			{ hasPageContentFocus && <DisableNonPageContentBlocks /> }