@wordpress/edit-site 5.19.3 → 5.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.19.3",
+	"version": "5.20.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,44 +27,45 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.42.3",
-		"@wordpress/api-fetch": "^6.39.3",
-		"@wordpress/block-editor": "^12.10.3",
-		"@wordpress/block-library": "^8.19.3",
-		"@wordpress/blocks": "^12.19.3",
-		"@wordpress/commands": "^0.13.3",
-		"@wordpress/components": "^25.8.3",
-		"@wordpress/compose": "^6.19.3",
-		"@wordpress/core-commands": "^0.11.3",
-		"@wordpress/core-data": "^6.19.3",
-		"@wordpress/data": "^9.12.3",
-		"@wordpress/date": "^4.42.3",
-		"@wordpress/deprecated": "^3.42.3",
-		"@wordpress/dom": "^3.42.3",
-		"@wordpress/editor": "^13.19.3",
-		"@wordpress/element": "^5.19.3",
-		"@wordpress/escape-html": "^2.42.3",
-		"@wordpress/hooks": "^3.42.3",
-		"@wordpress/html-entities": "^3.42.3",
-		"@wordpress/i18n": "^4.42.3",
-		"@wordpress/icons": "^9.33.3",
-		"@wordpress/interface": "^5.19.3",
-		"@wordpress/keyboard-shortcuts": "^4.19.3",
-		"@wordpress/keycodes": "^3.42.3",
-		"@wordpress/media-utils": "^4.33.3",
-		"@wordpress/notices": "^4.10.3",
-		"@wordpress/patterns": "^1.3.3",
-		"@wordpress/plugins": "^6.10.3",
-		"@wordpress/preferences": "^3.19.3",
-		"@wordpress/primitives": "^3.40.3",
-		"@wordpress/private-apis": "^0.24.3",
-		"@wordpress/reusable-blocks": "^4.19.3",
-		"@wordpress/router": "^0.11.3",
-		"@wordpress/style-engine": "^1.25.3",
-		"@wordpress/url": "^3.43.3",
-		"@wordpress/viewport": "^5.19.3",
-		"@wordpress/widgets": "^3.19.3",
-		"@wordpress/wordcount": "^3.42.3",
+		"@tanstack/react-table": "^8.10.3",
+		"@wordpress/a11y": "^3.43.0",
+		"@wordpress/api-fetch": "^6.40.0",
+		"@wordpress/block-editor": "^12.11.0",
+		"@wordpress/block-library": "^8.20.0",
+		"@wordpress/blocks": "^12.20.0",
+		"@wordpress/commands": "^0.14.0",
+		"@wordpress/components": "^25.9.0",
+		"@wordpress/compose": "^6.20.0",
+		"@wordpress/core-commands": "^0.12.0",
+		"@wordpress/core-data": "^6.20.0",
+		"@wordpress/data": "^9.13.0",
+		"@wordpress/date": "^4.43.0",
+		"@wordpress/deprecated": "^3.43.0",
+		"@wordpress/dom": "^3.43.0",
+		"@wordpress/editor": "^13.20.0",
+		"@wordpress/element": "^5.20.0",
+		"@wordpress/escape-html": "^2.43.0",
+		"@wordpress/hooks": "^3.43.0",
+		"@wordpress/html-entities": "^3.43.0",
+		"@wordpress/i18n": "^4.43.0",
+		"@wordpress/icons": "^9.34.0",
+		"@wordpress/interface": "^5.20.0",
+		"@wordpress/keyboard-shortcuts": "^4.20.0",
+		"@wordpress/keycodes": "^3.43.0",
+		"@wordpress/media-utils": "^4.34.0",
+		"@wordpress/notices": "^4.11.0",
+		"@wordpress/patterns": "^1.4.0",
+		"@wordpress/plugins": "^6.11.0",
+		"@wordpress/preferences": "^3.20.0",
+		"@wordpress/primitives": "^3.41.0",
+		"@wordpress/private-apis": "^0.25.0",
+		"@wordpress/reusable-blocks": "^4.20.0",
+		"@wordpress/router": "^0.12.0",
+		"@wordpress/style-engine": "^1.26.0",
+		"@wordpress/url": "^3.44.0",
+		"@wordpress/viewport": "^5.20.0",
+		"@wordpress/widgets": "^3.20.0",
+		"@wordpress/wordcount": "^3.43.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
@@ -84,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6256f93c37705d142f75a99f1fc808540ca7dca8"
+	"gitHead": "9b8e598c5418d38fe72197c24ef1d3dd6c712151"
 }

package/src/components/add-new-pattern/index.js

@@ -4,7 +4,7 @@
 import { DropdownMenu } from '@wordpress/components';
 import { useState, useRef } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { plus, symbol, symbolFilled } from '@wordpress/icons';
+import { plus, symbol, symbolFilled, upload } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import {
@@ -90,7 +90,7 @@ export default function AddNewPattern() {
 	}
 
 	controls.push( {
-		icon: symbol,
+		icon: upload,
 		onClick: () => {
 			patternUploadInputRef.current.click();
 		},

package/src/components/block-editor/block-editor-provider/default-block-editor-provider.js

@@ -27,8 +27,8 @@ const noop = () => {};
  * mimic the look and feel of the post editor and
  * allow editing of the page content only.
  *
- * @param {Object}    props
- * @param {WPElement} props.children
+ * @param {Object}  props
+ * @param {Element} props.children
  */
 export default function DefaultBlockEditorProvider( { children } ) {
 	const settings = useSiteEditorSettings();
@@ -51,13 +51,18 @@ export default function DefaultBlockEditorProvider( { children } ) {
 		'postType',
 		templateType
 	);
-	const pageContentBlock = usePageContentBlocks( blocks, isTemplateHidden );
+	const pageContentBlocks = usePageContentBlocks( {
+		blocks,
+		isPageContentFocused: isTemplateHidden,
+		wrapPageContent: true,
+	} );
+
 	return (
 		<ExperimentalBlockEditorProvider
 			settings={ settings }
 			value={
-				isTemplateHidden && pageContentBlock.length
-					? pageContentBlock
+				isTemplateHidden && pageContentBlocks.length
+					? pageContentBlocks
 					: blocks
 			}
 			onInput={ isTemplateHidden ? noop : onInput }

package/src/components/block-editor/block-editor-provider/test/use-page-content-blocks.js

@@ -44,23 +44,52 @@ describe( 'usePageContentBlocks', () => {
 	];
 	it( 'should return empty array if `isPageContentFocused` is `false`', () => {
 		const { result } = renderHook( () =>
-			usePageContentBlocks( blocksList, false )
+			usePageContentBlocks( {
+				blocks: blocksList,
+				isPageContentFocused: false,
+			} )
 		);
 		expect( result.current ).toEqual( [] );
 	} );
 	it( 'should return empty array if `blocks` is undefined', () => {
 		const { result } = renderHook( () =>
-			usePageContentBlocks( undefined, true )
+			usePageContentBlocks( {
+				blocks: undefined,
+				isPageContentFocused: true,
+			} )
 		);
 		expect( result.current ).toEqual( [] );
 	} );
 	it( 'should return empty array if `blocks` is an empty array', () => {
-		const { result } = renderHook( () => usePageContentBlocks( [], true ) );
+		const { result } = renderHook( () =>
+			usePageContentBlocks( {
+				blocks: [],
+				isPageContentFocused: true,
+			} )
+		);
 		expect( result.current ).toEqual( [] );
 	} );
 	it( 'should return new block list', () => {
 		const { result } = renderHook( () =>
-			usePageContentBlocks( blocksList, true )
+			usePageContentBlocks( {
+				blocks: blocksList,
+				isPageContentFocused: true,
+			} )
+		);
+		expect( result.current ).toEqual( [
+			createBlock( 'core/post-title' ),
+			createBlock( 'core/post-featured-image' ),
+			createBlock( 'core/post-content' ),
+			createBlock( 'core/post-content' ),
+		] );
+	} );
+	it( 'should return new block list wrapped in a Group block', () => {
+		const { result } = renderHook( () =>
+			usePageContentBlocks( {
+				blocks: blocksList,
+				isPageContentFocused: true,
+				wrapPageContent: true,
+			} )
 		);
 		expect( result.current ).toEqual( [
 			{

package/src/components/block-editor/block-editor-provider/use-page-content-blocks.js

@@ -38,21 +38,38 @@ function flattenBlocks( blocks, transform ) {
 
 /**
  * Returns a memoized array of blocks that contain only page content blocks,
- * surrounded by a group block to mimic the post editor.
- *
- * @param {Array}   blocks               Block list.
- * @param {boolean} isPageContentFocused Whether the page content has focus. If `true` return page content blocks. Default `false`.
+ * surrounded by an optional group block to mimic the post editor.
  *
+ * @param {Object}  props                      The argument for the function.
+ * @param {Array}   props.blocks               Block list.
+ * @param {boolean} props.isPageContentFocused Whether the page content has focus (and the surrounding template is inert). If `true` return page content blocks. Default `false`.
+ * @param {boolean} props.wrapPageContent      Whether to wrap the page content blocks in a group block to mimic the post editor. Default `false`.
  * @return {Array} Page content blocks.
  */
-export default function usePageContentBlocks(
-	blocks,
-	isPageContentFocused = false
-) {
+export default function usePageContentBlocks( {
+	blocks = [],
+	isPageContentFocused = false,
+	wrapPageContent = false,
+} ) {
 	return useMemo( () => {
-		if ( ! isPageContentFocused || ! blocks || ! blocks.length ) {
+		if ( ! isPageContentFocused || ! blocks?.length ) {
+			return [];
+		}
+
+		const innerBlocks = flattenBlocks( blocks, ( block ) =>
+			PAGE_CONTENT_BLOCK_TYPES[ block.name ]
+				? createBlock( block.name )
+				: undefined
+		);
+
+		if ( ! innerBlocks.length ) {
 			return [];
 		}
+
+		if ( ! wrapPageContent ) {
+			return innerBlocks;
+		}
+
 		return [
 			createBlock(
 				'core/group',
@@ -66,11 +83,7 @@ export default function usePageContentBlocks(
 						},
 					},
 				},
-				flattenBlocks( blocks, ( block ) => {
-					if ( PAGE_CONTENT_BLOCK_TYPES[ block.name ] ) {
-						return createBlock( block.name );
-					}
-				} )
+				innerBlocks
 			),
 		];
 	}, [ blocks, isPageContentFocused ] );

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"
+		/>
+	);
+}