@wordpress/edit-site 5.19.3 → 5.20.0

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/font-library-modal/resolvers.js

@@ -18,7 +18,7 @@ export async function fetchInstallFonts( data ) {
 
 export async function fetchUninstallFonts( fonts ) {
 	const data = {
-		fontFamilies: fonts,
+		font_families: fonts,
 	};
 	const config = {
 		path: '/wp/v2/fonts',

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

@@ -152,6 +152,6 @@ export function makeFormDataFromFontFamilies( fontFamilies ) {
 		}
 		return family;
 	} );
-	formData.append( 'fontFamilies', JSON.stringify( newFontFamilies ) );
+	formData.append( 'font_families', JSON.stringify( newFontFamilies ) );
 	return formData;
 }

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

@@ -55,7 +55,7 @@ describe( 'makeFormDataFromFontFamilies', () => {
 				fontFamily: 'Bebas',
 			},
 		];
-		expect( JSON.parse( formData.get( 'fontFamilies' ) ) ).toEqual(
+		expect( JSON.parse( formData.get( 'font_families' ) ) ).toEqual(
 			expectedFontFamilies
 		);
 	} );

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

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

@@ -9,6 +9,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import PagePatterns from '../page-patterns';
 import PageTemplateParts from '../page-template-parts';
 import PageTemplates from '../page-templates';
+import PagePages from '../page-pages';
 import { unlock } from '../../lock-unlock';
 
 const { useLocation } = unlock( routerPrivateApis );
@@ -24,6 +25,8 @@ export default function PageMain() {
 		return <PageTemplateParts />;
 	} else if ( path === '/patterns' ) {
 		return <PagePatterns />;
+	} else if ( window?.__experimentalAdminViews && path === '/pages' ) {
+		return <PagePages />;
 	}
 
 	return null;

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

@@ -0,0 +1,190 @@
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+import {
+	VisuallyHidden,
+	__experimentalHeading as Heading,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useEntityRecords } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { useState, useEffect, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Page from '../page';
+import Link from '../routes/link';
+import PageActions from '../page-actions';
+import { DataViews, PAGE_SIZE_VALUES } from '../dataviews';
+
+const EMPTY_ARRAY = [];
+
+export default function PagePages() {
+	const [ reset, setResetQuery ] = useState( ( v ) => ! v );
+	const [ globalFilter, setGlobalFilter ] = useState( '' );
+	const [ paginationInfo, setPaginationInfo ] = useState();
+	const [ { pageIndex, pageSize }, setPagination ] = useState( {
+		pageIndex: 0,
+		pageSize: PAGE_SIZE_VALUES[ 0 ],
+	} );
+	// Request post statuses to get the proper labels.
+	const [ postStatuses, setPostStatuses ] = useState( EMPTY_ARRAY );
+	useEffect( () => {
+		apiFetch( {
+			path: '/wp/v2/statuses',
+		} ).then( setPostStatuses );
+	}, [] );
+
+	// TODO: probably memo other objects passed as state(ex:https://tanstack.com/table/v8/docs/examples/react/pagination-controlled).
+	const pagination = useMemo(
+		() => ( { pageIndex, pageSize } ),
+		[ pageIndex, pageSize ]
+	);
+	const [ sorting, setSorting ] = useState( [
+		{ order: 'desc', orderby: 'date' },
+	] );
+	const queryArgs = useMemo(
+		() => ( {
+			per_page: pageSize,
+			page: pageIndex + 1, // tanstack starts from zero.
+			_embed: 'author',
+			order: sorting[ 0 ]?.desc ? 'desc' : 'asc',
+			orderby: sorting[ 0 ]?.id,
+			search: globalFilter,
+			status: [ 'publish', 'draft' ],
+		} ),
+		[
+			globalFilter,
+			sorting[ 0 ]?.id,
+			sorting[ 0 ]?.desc,
+			pageSize,
+			pageIndex,
+			reset,
+		]
+	);
+	const { records, isResolving: isLoading } = useEntityRecords(
+		'postType',
+		'page',
+		queryArgs
+	);
+	useEffect( () => {
+		// Make extra request to handle controlled pagination.
+		apiFetch( {
+			path: addQueryArgs( '/wp/v2/pages', {
+				...queryArgs,
+				_fields: 'id',
+			} ),
+			method: 'HEAD',
+			parse: false,
+		} ).then( ( res ) => {
+			const totalPages = parseInt( res.headers.get( 'X-WP-TotalPages' ) );
+			const totalItems = parseInt( res.headers.get( 'X-WP-Total' ) );
+			setPaginationInfo( {
+				totalPages,
+				totalItems,
+			} );
+		} );
+		// Status should not make extra request if already did..
+	}, [ globalFilter, pageSize, reset ] );
+
+	const fields = useMemo(
+		() => [
+			{
+				header: __( 'Title' ),
+				id: 'title',
+				accessorFn: ( page ) => page.title?.rendered || page.slug,
+				cell: ( props ) => {
+					const page = props.row.original;
+					return (
+						<VStack spacing={ 1 }>
+							<Heading as="h3" level={ 5 }>
+								<Link
+									params={ {
+										postId: page.id,
+										postType: page.type,
+										canvas: 'edit',
+									} }
+								>
+									{ decodeEntities( props.getValue() ) }
+								</Link>
+							</Heading>
+						</VStack>
+					);
+				},
+				maxWidth: 400,
+				sortingFn: 'alphanumeric',
+				enableHiding: false,
+			},
+			{
+				header: __( 'Author' ),
+				id: 'author',
+				accessorFn: ( page ) => page._embedded?.author[ 0 ]?.name,
+				cell: ( props ) => {
+					const author = props.row.original._embedded?.author[ 0 ];
+					return (
+						<a href={ `user-edit.php?user_id=${ author.id }` }>
+							{ author.name }
+						</a>
+					);
+				},
+			},
+			{
+				header: 'Status',
+				id: 'status',
+				cell: ( props ) =>
+					postStatuses[ props.row.original.status ]?.name,
+			},
+			{
+				header: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,
+				id: 'actions',
+				cell: ( props ) => {
+					const page = props.row.original;
+					return (
+						<PageActions
+							postId={ page.id }
+							onRemove={ () => setResetQuery() }
+						/>
+					);
+				},
+				enableHiding: false,
+			},
+		],
+		[ postStatuses ]
+	);
+
+	// TODO: we need to handle properly `data={ data || EMPTY_ARRAY }` for when `isLoading`.
+	return (
+		<Page title={ __( 'Pages' ) }>
+			<DataViews
+				paginationInfo={ paginationInfo }
+				data={ records || EMPTY_ARRAY }
+				isLoading={ isLoading }
+				fields={ fields }
+				options={ {
+					manualSorting: true,
+					manualFiltering: true,
+					manualPagination: true,
+					enableRowSelection: true,
+					state: {
+						sorting,
+						globalFilter,
+						pagination,
+					},
+					pageCount: paginationInfo?.totalPages,
+					onSortingChange: setSorting,
+					onGlobalFilterChange: ( value ) => {
+						setGlobalFilter( value );
+						setPagination( { pageIndex: 0, pageSize } );
+					},
+					// TODO: check these callbacks and maybe reset the query when needed...
+					onPaginationChange: setPagination,
+					meta: { resetQuery: setResetQuery },
+				} }
+			/>
+		</Page>
+	);
+}

package/src/components/plugin-template-setting-panel/index.js

@@ -28,6 +28,6 @@ PluginTemplateSettingPanel.Slot = Slot;
  *	);
  * ```
  *
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
  */
 export default PluginTemplateSettingPanel;

package/src/components/sidebar/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { memo, useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import {
 	__experimentalNavigatorProvider as NavigatorProvider,
 	__experimentalNavigatorScreen as NavigatorScreen,
@@ -27,6 +28,7 @@ import SaveHub from '../save-hub';
 import { unlock } from '../../lock-unlock';
 import SidebarNavigationScreenPages from '../sidebar-navigation-screen-pages';
 import SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
 
 const { useLocation } = unlock( routerPrivateApis );
 
@@ -53,6 +55,15 @@ function SidebarScreens() {
 			<NavigatorScreen path="/page/:postId">
 				<SidebarNavigationScreenPage />
 			</NavigatorScreen>
+			{ window?.__experimentalAdminViews && (
+				<NavigatorScreen path="/pages">
+					<SidebarNavigationScreen
+						title={ __( 'All Pages' ) }
+						description={ __( 'Manage your pages.' ) }
+						backPath="/page"
+					/>
+				</NavigatorScreen>
+			) }
 			<NavigatorScreen path="/:postType(wp_template)">
 				<SidebarNavigationScreenTemplates />
 			</NavigatorScreen>