@wordpress/edit-site 5.20.1 → 5.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.20.1",
+	"version": "5.21.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -28,44 +28,44 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@tanstack/react-table": "^8.10.3",
-		"@wordpress/a11y": "^3.43.0",
-		"@wordpress/api-fetch": "^6.40.0",
-		"@wordpress/block-editor": "^12.11.1",
-		"@wordpress/block-library": "^8.20.1",
-		"@wordpress/blocks": "^12.20.1",
-		"@wordpress/commands": "^0.14.1",
-		"@wordpress/components": "^25.9.1",
-		"@wordpress/compose": "^6.20.0",
-		"@wordpress/core-commands": "^0.12.1",
-		"@wordpress/core-data": "^6.20.1",
-		"@wordpress/data": "^9.13.1",
-		"@wordpress/date": "^4.43.0",
-		"@wordpress/deprecated": "^3.43.0",
-		"@wordpress/dom": "^3.43.0",
-		"@wordpress/editor": "^13.20.1",
-		"@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.1",
-		"@wordpress/keyboard-shortcuts": "^4.20.1",
-		"@wordpress/keycodes": "^3.43.0",
-		"@wordpress/media-utils": "^4.34.0",
-		"@wordpress/notices": "^4.11.1",
-		"@wordpress/patterns": "^1.4.1",
-		"@wordpress/plugins": "^6.11.1",
-		"@wordpress/preferences": "^3.20.1",
-		"@wordpress/primitives": "^3.41.0",
-		"@wordpress/private-apis": "^0.25.0",
-		"@wordpress/reusable-blocks": "^4.20.1",
-		"@wordpress/router": "^0.12.0",
-		"@wordpress/style-engine": "^1.26.0",
-		"@wordpress/url": "^3.44.0",
-		"@wordpress/viewport": "^5.20.1",
-		"@wordpress/widgets": "^3.20.1",
-		"@wordpress/wordcount": "^3.43.0",
+		"@wordpress/a11y": "^3.44.0",
+		"@wordpress/api-fetch": "^6.41.0",
+		"@wordpress/block-editor": "^12.12.0",
+		"@wordpress/block-library": "^8.21.0",
+		"@wordpress/blocks": "^12.21.0",
+		"@wordpress/commands": "^0.15.0",
+		"@wordpress/components": "^25.10.0",
+		"@wordpress/compose": "^6.21.0",
+		"@wordpress/core-commands": "^0.13.0",
+		"@wordpress/core-data": "^6.21.0",
+		"@wordpress/data": "^9.14.0",
+		"@wordpress/date": "^4.44.0",
+		"@wordpress/deprecated": "^3.44.0",
+		"@wordpress/dom": "^3.44.0",
+		"@wordpress/editor": "^13.21.0",
+		"@wordpress/element": "^5.21.0",
+		"@wordpress/escape-html": "^2.44.0",
+		"@wordpress/hooks": "^3.44.0",
+		"@wordpress/html-entities": "^3.44.0",
+		"@wordpress/i18n": "^4.44.0",
+		"@wordpress/icons": "^9.35.0",
+		"@wordpress/interface": "^5.21.0",
+		"@wordpress/keyboard-shortcuts": "^4.21.0",
+		"@wordpress/keycodes": "^3.44.0",
+		"@wordpress/media-utils": "^4.35.0",
+		"@wordpress/notices": "^4.12.0",
+		"@wordpress/patterns": "^1.5.0",
+		"@wordpress/plugins": "^6.12.0",
+		"@wordpress/preferences": "^3.21.0",
+		"@wordpress/primitives": "^3.42.0",
+		"@wordpress/private-apis": "^0.26.0",
+		"@wordpress/reusable-blocks": "^4.21.0",
+		"@wordpress/router": "^0.13.0",
+		"@wordpress/style-engine": "^1.27.0",
+		"@wordpress/url": "^3.45.0",
+		"@wordpress/viewport": "^5.21.0",
+		"@wordpress/widgets": "^3.21.0",
+		"@wordpress/wordcount": "^3.44.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e17f760ed0dc11cce78157d7c2f2086b1b3c09d8"
+	"gitHead": "f83bb1a71e8fa416131b81a9f282a72a1dc6c694"
 }

package/src/components/actions/trash-post.js

@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { useMemo } from '@wordpress/element';
+
+export default function useMoveToTrashAction() {
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+	const { deleteEntityRecord } = useDispatch( coreStore );
+
+	return useMemo(
+		() => ( {
+			id: 'move-to-trash',
+			label: __( 'Move to Trash' ),
+			async perform( post ) {
+				try {
+					await deleteEntityRecord(
+						'postType',
+						post.type,
+						post.id,
+						{},
+						{ throwOnError: true }
+					);
+					createSuccessNotice(
+						sprintf(
+							/* translators: The page's title. */
+							__( '"%s" moved to the Trash.' ),
+							decodeEntities( post.title.rendered )
+						),
+						{
+							type: 'snackbar',
+							id: 'edit-site-page-trashed',
+						}
+					);
+				} catch ( error ) {
+					const errorMessage =
+						error.message && error.code !== 'unknown_error'
+							? error.message
+							: __(
+									'An error occurred while moving the page to the trash.'
+							  );
+
+					createErrorNotice( errorMessage, { type: 'snackbar' } );
+				}
+			},
+			isDesctructive: true,
+		} ),
+		[ createSuccessNotice, createErrorNotice, deleteEntityRecord ]
+	);
+}

package/src/components/add-new-template/add-custom-template-modal-content.js

@@ -9,11 +9,9 @@ import {
 	FlexItem,
 	SearchControl,
 	TextHighlight,
+	privateApis as componentsPrivateApis,
 	__experimentalText as Text,
 	__experimentalVStack as VStack,
-	__unstableComposite as Composite,
-	__unstableUseCompositeState as useCompositeState,
-	__unstableCompositeItem as CompositeItem,
 } from '@wordpress/components';
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -21,9 +19,16 @@ import { decodeEntities } from '@wordpress/html-entities';
 /**
  * Internal dependencies
  */
+import { unlock } from '../../lock-unlock';
 import useDebouncedInput from '../../utils/use-debounced-input';
 import { mapToIHasNameAndId } from './utils';
 
+const {
+	CompositeV2: Composite,
+	CompositeItemV2: CompositeItem,
+	useCompositeStoreV2: useCompositeStore,
+} = unlock( componentsPrivateApis );
+
 const EMPTY_ARRAY = [];
 
 function SuggestionListItem( {
@@ -31,22 +36,23 @@ function SuggestionListItem( {
 	search,
 	onSelect,
 	entityForSuggestions,
-	composite,
 } ) {
 	const baseCssClass =
 		'edit-site-custom-template-modal__suggestions_list__list-item';
 	return (
 		<CompositeItem
-			role="option"
-			as={ Button }
-			{ ...composite }
-			className={ baseCssClass }
-			onClick={ () =>
-				onSelect(
-					entityForSuggestions.config.getSpecificTemplate(
-						suggestion
-					)
-				)
+			render={
+				<Button
+					role="option"
+					className={ baseCssClass }
+					onClick={ () =>
+						onSelect(
+							entityForSuggestions.config.getSpecificTemplate(
+								suggestion
+							)
+						)
+					}
+				/>
 			}
 		>
 			<Text
@@ -112,7 +118,7 @@ function useSearchSuggestions( entityForSuggestions, search ) {
 }
 
 function SuggestionList( { entityForSuggestions, onSelect } ) {
-	const composite = useCompositeState( { orientation: 'vertical' } );
+	const composite = useCompositeStore( { orientation: 'vertical' } );
 	const [ search, setSearch, debouncedSearch ] = useDebouncedInput();
 	const suggestions = useSearchSuggestions(
 		entityForSuggestions,
@@ -136,7 +142,7 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
 			) }
 			{ !! suggestions?.length && (
 				<Composite
-					{ ...composite }
+					store={ composite }
 					role="listbox"
 					className="edit-site-custom-template-modal__suggestions_list"
 					aria-label={ __( 'Suggestions list' ) }
@@ -148,7 +154,6 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
 							search={ debouncedSearch }
 							onSelect={ onSelect }
 							entityForSuggestions={ entityForSuggestions }
-							composite={ composite }
 						/>
 					) ) }
 				</Composite>

package/src/components/block-editor/resize-handle.js

@@ -35,6 +35,7 @@ export default function ResizeHandle( {
 				aria-label={ __( 'Drag to resize' ) }
 				aria-describedby={ `resizable-editor__resize-help-${ direction }` }
 				onKeyDown={ handleKeyDown }
+				type="button"
 			/>
 			<VisuallyHidden
 				id={ `resizable-editor__resize-help-${ direction }` }

package/src/components/create-template-part-modal/index.js

@@ -39,17 +39,21 @@ import {
 } from '../../utils/template-part-create';
 
 export default function CreateTemplatePartModal( {
-	closeModal,
+	defaultArea = TEMPLATE_PART_AREA_DEFAULT_CATEGORY,
 	blocks = [],
+	confirmLabel = __( 'Create' ),
+	closeModal,
+	modalTitle = __( 'Create template part' ),
 	onCreate,
 	onError,
+	defaultTitle = '',
 } ) {
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const existingTemplateParts = useExistingTemplateParts();
 
-	const [ title, setTitle ] = useState( '' );
-	const [ area, setArea ] = useState( TEMPLATE_PART_AREA_DEFAULT_CATEGORY );
+	const [ title, setTitle ] = useState( defaultTitle );
+	const [ area, setArea ] = useState( defaultArea );
 	const [ isSubmitting, setIsSubmitting ] = useState( false );
 	const instanceId = useInstanceId( CreateTemplatePartModal );
 
@@ -104,7 +108,7 @@ export default function CreateTemplatePartModal( {
 
 	return (
 		<Modal
-			title={ __( 'Create template part' ) }
+			title={ modalTitle }
 			onRequestClose={ closeModal }
 			overlayClassName="edit-site-create-template-part-modal"
 		>
@@ -181,7 +185,7 @@ export default function CreateTemplatePartModal( {
 							aria-disabled={ ! title || isSubmitting }
 							isBusy={ isSubmitting }
 						>
-							{ __( 'Create' ) }
+							{ confirmLabel }
 						</Button>
 					</HStack>
 				</VStack>

package/src/components/dataviews/README.md

@@ -0,0 +1,107 @@
+# DataView
+
+This file aims to document the main APIs related to the DataView component.
+
+## View
+
+The view is responsible for configuring how the dataset is visible to the user. For example:
+
+```js
+{
+	type: 'list',
+	page: 1,
+	perPage: 5,
+	sort: {
+		field: 'date',
+		direction: 'desc',
+	},
+	filters: {
+		search: '',
+		author: 2,
+		status: 'publish, draft'
+	},
+	visibleFilters: [ 'search', 'author', 'status' ],
+	hiddenFields: [ 'date', 'featured-image' ],
+	layout: {},
+}
+```
+
+- `type`: one of `list` or `grid`.
+- `page`: the current page.
+- `perPage`: number of records per page.
+- `sort.field`: field used for sorting.
+- `sort.direction`: one of `asc` or `desc`.
+- `filters`: the filters applied to the dataset.
+- `visibleFilters`: the `id` of the filters that are visible in the UI.
+- `hiddenFields`: the `id` of the fields that are hidden in the UI.
+- `layout`: ...
+
+The view configuration is used to retrieve the corresponding entity that holds the dataset:
+
+```js
+const {
+	records: pages,
+	isLoading: isLoadingPages,
+	totalItems,
+	totalPages
+} = useEntityRecords( 'postType', 'page', {
+	per_page: view.perPage,
+	page: view.page,
+	order: view.sort?.direction,
+	orderby: view.sort?.field
+	...view.filters
+} );
+```
+
+## Fields
+
+The fields describe the dataset. For example:
+
+```js
+[
+	{
+		id: 'author',
+		header: __( 'Author' ),
+		getValue: ( { item } ) => item.author,
+		render: ( {item} ) => {
+			return (
+				<a href="...">{ item.author }</a>
+			);
+		},
+		elements: [
+			{ value: 1, label: 'admin' }
+			{ value: 2, label: 'user' }
+		]
+		filters: [
+			{ id: 'author', type: 'enumeration' },
+			{ id: 'author_search', type: 'search' }
+		],
+	},
+]
+```
+
+- `id`: identifier for the field. Unique.
+- `header`: the field name for the UI.
+- `getValue`: function that returns the value of the field.
+- `render`: function that renders the field.
+- `elements`: a set of valid values for the field.
+- `filters`: what filters are available. A filter is an object with `id` and `type` as properties:
+	- `id`: unique identifier for the filter. Matches the entity query param.
+	- `type`: the type of filter. One of `search` or `enumeration`.
+
+
+## DataViews
+
+The UI component responsible for rendering the dataset.
+
+```js
+<DataViews
+	data={ pages }
+	isLoading= { isLoadingPages }
+	fields={ fields }
+	view={ view }
+	onChangeView={ onChangeView }
+	actions={ [ trashPostAction ] }
+	paginationInfo={ { totalItems, totalPages } }
+/>
+```

package/src/components/dataviews/dataviews.js

@@ -1,14 +1,3 @@
-/**
- * External dependencies
- */
-import {
-	getCoreRowModel,
-	getFilteredRowModel,
-	getSortedRowModel,
-	getPaginationRowModel,
-	useReactTable,
-} from '@tanstack/react-table';
-
 /**
  * WordPress dependencies
  */
@@ -16,43 +5,65 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import ListView from './list-view';
-import { Pagination } from './pagination';
+import ViewList from './view-list';
+import Pagination from './pagination';
 import ViewActions from './view-actions';
-import TextFilter from './text-filter';
+import Filters from './filters';
+import { ViewGrid } from './view-grid';
 
 export default function DataViews( {
-	data,
+	view,
+	onChangeView,
 	fields,
-	isLoading,
+	actions,
+	data,
+	isLoading = false,
 	paginationInfo,
-	options,
 } ) {
-	const dataView = useReactTable( {
-		data,
-		columns: fields,
-		...options,
-		getCoreRowModel: getCoreRowModel(),
-		getFilteredRowModel: getFilteredRowModel(),
-		getSortedRowModel: getSortedRowModel(),
-		getPaginationRowModel: getPaginationRowModel(),
-	} );
+	const ViewComponent = view.type === 'list' ? ViewList : ViewGrid;
+	const _fields = useMemo( () => {
+		return fields.map( ( field ) => ( {
+			...field,
+			render: field.render || field.getValue,
+		} ) );
+	}, [ fields ] );
 	return (
 		<div className="dataviews-wrapper">
 			<VStack spacing={ 4 }>
-				<HStack justify="space-between">
-					<TextFilter onChange={ dataView.setGlobalFilter } />
-					<ViewActions dataView={ dataView } />
+				<HStack>
+					<HStack justify="start">
+						<Filters
+							fields={ fields }
+							view={ view }
+							onChangeView={ onChangeView }
+						/>
+					</HStack>
+					<HStack justify="end">
+						<ViewActions
+							fields={ fields }
+							view={ view }
+							onChangeView={ onChangeView }
+						/>
+					</HStack>
 				</HStack>
-				{ /* This component will be selected based on viewConfigs. Now we only have the list view. */ }
-				<ListView dataView={ dataView } isLoading={ isLoading } />
+				<ViewComponent
+					fields={ _fields }
+					view={ view }
+					onChangeView={ onChangeView }
+					paginationInfo={ paginationInfo }
+					actions={ actions }
+					data={ data }
+					isLoading={ isLoading }
+				/>
 				<Pagination
-					dataView={ dataView }
-					totalItems={ paginationInfo?.totalItems }
+					view={ view }
+					onChangeView={ onChangeView }
+					paginationInfo={ paginationInfo }
 				/>
 			</VStack>
 		</div>

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

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { moreVertical } from '@wordpress/icons';
+
+function FieldActions( { item, actions } ) {
+	return (
+		<DropdownMenu icon={ moreVertical } label={ __( 'Actions' ) }>
+			{ () => (
+				<MenuGroup>
+					{ actions.map( ( action ) => (
+						<MenuItem
+							key={ action.id }
+							onClick={ () => action.perform( item ) }
+							isDestructive={ action.isDesctructive }
+						>
+							{ action.label }
+						</MenuItem>
+					) ) }
+				</MenuGroup>
+			) }
+		</DropdownMenu>
+	);
+}
+
+export default FieldActions;

package/src/components/dataviews/filters.js

@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import TextFilter from './text-filter';
+import InFilter from './in-filter';
+
+export default function Filters( { fields, view, onChangeView } ) {
+	const filters = {};
+	fields.forEach( ( field ) => {
+		if ( ! field.filters ) {
+			return;
+		}
+
+		field.filters.forEach( ( f ) => {
+			filters[ f.id ] = { type: f.type };
+		} );
+	} );
+
+	return (
+		view.visibleFilters?.map( ( filterName ) => {
+			const filter = filters[ filterName ];
+
+			if ( ! filter ) {
+				return null;
+			}
+
+			if ( filter.type === 'search' ) {
+				return (
+					<TextFilter
+						key={ filterName }
+						id={ filterName }
+						view={ view }
+						onChangeView={ onChangeView }
+					/>
+				);
+			}
+			if ( filter.type === 'enumeration' ) {
+				return (
+					<InFilter
+						key={ filterName }
+						id={ filterName }
+						fields={ fields }
+						view={ view }
+						onChangeView={ onChangeView }
+					/>
+				);
+			}
+
+			return null;
+		} ) || __( 'No filters available' )
+	);
+}

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

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+	SelectControl,
+} from '@wordpress/components';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
+
+export default ( { id, fields, view, onChangeView } ) => {
+	const field = fields.find( ( f ) => f.id === id );
+
+	return (
+		<SelectControl
+			value={ view.filters[ id ] }
+			prefix={
+				<InputControlPrefixWrapper
+					as="span"
+					className="dataviews__select-control-prefix"
+				>
+					{ field.header + ':' }
+				</InputControlPrefixWrapper>
+			}
+			options={ field?.elements || [] }
+			onChange={ ( value ) => {
+				if ( value === '' ) {
+					value = undefined;
+				}
+
+				onChangeView( ( currentView ) => ( {
+					...currentView,
+					filters: cleanEmptyObject( {
+						...currentView.filters,
+						[ id ]: value,
+					} ),
+				} ) );
+			} }
+		/>
+	);
+};

package/src/components/dataviews/index.js

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