@wordpress/edit-site 5.21.0 → 5.22.0

package/src/components/dataviews/filters.js

@@ -6,45 +6,63 @@ 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 = {};
+	const filterIndex = {};
 	fields.forEach( ( field ) => {
 		if ( ! field.filters ) {
 			return;
 		}
 
-		field.filters.forEach( ( f ) => {
-			filters[ f.id ] = { type: f.type };
+		field.filters.forEach( ( filter ) => {
+			let id = field.id;
+			if ( 'string' === typeof filter ) {
+				filterIndex[ id ] = {
+					id,
+					name: field.header,
+					type: filter,
+				};
+			}
+
+			if ( 'object' === typeof filter ) {
+				id = filter.id || field.id;
+				filterIndex[ id ] = {
+					id,
+					name: filter.name || field.header,
+					type: filter.type,
+				};
+			}
+
+			if ( 'enumeration' === filterIndex[ id ]?.type ) {
+				const elements = [
+					{
+						value: filter.resetValue || '',
+						label: filter.resetLabel || __( 'All' ),
+					},
+					...( field.elements || [] ),
+				];
+				filterIndex[ id ] = {
+					...filterIndex[ id ],
+					elements,
+				};
+			}
 		} );
 	} );
 
 	return (
 		view.visibleFilters?.map( ( filterName ) => {
-			const filter = filters[ filterName ];
+			const filter = filterIndex[ 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 }
+						filter={ filter }
 						view={ view }
 						onChangeView={ onChangeView }
 					/>

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

@@ -14,21 +14,19 @@ import { unlock } from '../../lock-unlock';
 
 const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
 
-export default ( { id, fields, view, onChangeView } ) => {
-	const field = fields.find( ( f ) => f.id === id );
-
+export default ( { filter, view, onChangeView } ) => {
 	return (
 		<SelectControl
-			value={ view.filters[ id ] }
+			value={ view.filters[ filter.id ] }
 			prefix={
 				<InputControlPrefixWrapper
 					as="span"
 					className="dataviews__select-control-prefix"
 				>
-					{ field.header + ':' }
+					{ filter.name + ':' }
 				</InputControlPrefixWrapper>
 			}
-			options={ field?.elements || [] }
+			options={ filter.elements }
 			onChange={ ( value ) => {
 				if ( value === '' ) {
 					value = undefined;
@@ -38,7 +36,7 @@ export default ( { id, fields, view, onChangeView } ) => {
 					...currentView,
 					filters: cleanEmptyObject( {
 						...currentView.filters,
-						[ id ]: value,
+						[ filter.id ]: value,
 					} ),
 				} ) );
 			} }

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

@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+	Button,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
+import { moreVertical } from '@wordpress/icons';
+
+export default function ItemActions( { item, actions } ) {
+	const { primaryActions, secondaryActions } = useMemo( () => {
+		return actions.reduce(
+			( accumulator, action ) => {
+				// If an action is eligible for all items, doesn't need
+				// to provide the `isEligible` function.
+				if ( action.isEligible && ! action.isEligible( item ) ) {
+					return accumulator;
+				}
+				if ( action.isPrimary && !! action.icon ) {
+					accumulator.primaryActions.push( action );
+				} else {
+					accumulator.secondaryActions.push( action );
+				}
+				return accumulator;
+			},
+			{ primaryActions: [], secondaryActions: [] }
+		);
+	}, [ actions, item ] );
+	if ( ! primaryActions.length && ! secondaryActions.length ) {
+		return null;
+	}
+	return (
+		<HStack justify="flex-end">
+			{ !! primaryActions.length &&
+				primaryActions.map( ( action ) => (
+					<Button
+						label={ action.label }
+						key={ action.id }
+						icon={ action.icon }
+						onClick={ () => action.perform( item ) }
+						isDestructive={ action.isDestructive }
+						size="compact"
+					/>
+				) ) }
+			{ !! secondaryActions.length && (
+				<DropdownMenu icon={ moreVertical } label={ __( 'Actions' ) }>
+					{ () => (
+						<MenuGroup>
+							{ secondaryActions.map( ( action ) => (
+								<MenuItem
+									key={ action.id }
+									onClick={ () => action.perform( item ) }
+									isDestructive={ action.isDestructive }
+								>
+									{ action.label }
+								</MenuItem>
+							) ) }
+						</MenuGroup>
+					) }
+				</DropdownMenu>
+			) }
+		</HStack>
+	);
+}

package/src/components/dataviews/pagination.js

@@ -6,45 +6,11 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalText as Text,
 	__experimentalNumberControl as NumberControl,
-	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
-	SelectControl,
 } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { sprintf, __, _x, _n } from '@wordpress/i18n';
+import { chevronRight, chevronLeft, previous, next } from '@wordpress/icons';
 
-const PAGE_SIZE_VALUES = [ 5, 20, 50 ];
-function PageSizeControl( { view, onChangeView } ) {
-	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__select-control-prefix"
-				>
-					{ label }
-				</InputControlPrefixWrapper>
-			}
-			value={ view.perPage }
-			options={ PAGE_SIZE_VALUES.map( ( pageSize ) => ( {
-				value: pageSize,
-				label: pageSize,
-			} ) ) }
-			onChange={ ( value ) =>
-				onChangeView( { ...view, perPage: value, page: 1 } )
-			}
-		/>
-	);
-}
-
-// 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.
 function Pagination( {
 	view,
 	onChangeView,
@@ -71,29 +37,37 @@ function Pagination( {
 				}
 			</Text>
 			{ !! totalItems && (
-				<HStack expanded={ false } spacing={ 1 }>
-					<Button
-						variant="tertiary"
-						onClick={ () => onChangeView( { ...view, page: 1 } ) }
-						disabled={ view.page === 1 }
-						aria-label={ __( 'First page' ) }
-					>
-						«
-					</Button>
-					<Button
-						variant="tertiary"
-						onClick={ () =>
-							onChangeView( { ...view, page: view.page - 1 } )
-						}
-						disabled={ view.page === 1 }
-						aria-label={ __( 'Previous page' ) }
-					>
-						‹
-					</Button>
+				<HStack expanded={ false } spacing={ 3 }>
 					<HStack
 						justify="flex-start"
 						expanded={ false }
 						spacing={ 1 }
+					>
+						<Button
+							onClick={ () =>
+								onChangeView( { ...view, page: 1 } )
+							}
+							disabled={ view.page === 1 }
+							label={ __( 'First page' ) }
+							icon={ previous }
+							showTooltip
+							size="compact"
+						/>
+						<Button
+							onClick={ () =>
+								onChangeView( { ...view, page: view.page - 1 } )
+							}
+							disabled={ view.page === 1 }
+							label={ __( 'Previous page' ) }
+							icon={ chevronLeft }
+							showTooltip
+							size="compact"
+						/>
+					</HStack>
+					<HStack
+						justify="flex-start"
+						expanded={ false }
+						spacing={ 2 }
 					>
 						{ createInterpolateElement(
 							sprintf(
@@ -130,29 +104,34 @@ function Pagination( {
 							}
 						) }
 					</HStack>
-					<Button
-						variant="tertiary"
-						onClick={ () =>
-							onChangeView( { ...view, page: view.page + 1 } )
-						}
-						disabled={ view.page >= totalPages }
-						aria-label={ __( 'Next page' ) }
-					>
-						›
-					</Button>
-					<Button
-						variant="tertiary"
-						onClick={ () =>
-							onChangeView( { ...view, page: totalPages } )
-						}
-						disabled={ view.page >= totalPages }
-						aria-label={ __( 'Last page' ) }
+					<HStack
+						justify="flex-start"
+						expanded={ false }
+						spacing={ 1 }
 					>
-						»
-					</Button>
+						<Button
+							onClick={ () =>
+								onChangeView( { ...view, page: view.page + 1 } )
+							}
+							disabled={ view.page >= totalPages }
+							label={ __( 'Next page' ) }
+							icon={ chevronRight }
+							showTooltip
+							size="compact"
+						/>
+						<Button
+							onClick={ () =>
+								onChangeView( { ...view, page: totalPages } )
+							}
+							disabled={ view.page >= totalPages }
+							label={ __( 'Last page' ) }
+							icon={ next }
+							showTooltip
+							size="compact"
+						/>
+					</HStack>
 				</HStack>
 			) }
-			<PageSizeControl view={ view } onChangeView={ onChangeView } />
 		</HStack>
 	);
 }

package/src/components/dataviews/{text-filter.js → search.js}

@@ -10,10 +10,13 @@ import { SearchControl } from '@wordpress/components';
  */
 import useDebouncedInput from '../../utils/use-debounced-input';
 
-export default function TextFilter( { id, view, onChangeView } ) {
+export default function Search( { label, view, onChangeView } ) {
 	const [ search, setSearch, debouncedSearch ] = useDebouncedInput(
-		view.filters[ id ]
+		view.search
 	);
+	useEffect( () => {
+		setSearch( view.search );
+	}, [ view ] );
 	const onChangeViewRef = useRef( onChangeView );
 	useEffect( () => {
 		onChangeViewRef.current = onChangeView;
@@ -22,13 +25,10 @@ export default function TextFilter( { id, view, onChangeView } ) {
 		onChangeViewRef.current( ( currentView ) => ( {
 			...currentView,
 			page: 1,
-			filters: {
-				...currentView.filters,
-				[ id ]: debouncedSearch,
-			},
+			search: debouncedSearch,
 		} ) );
 	}, [ debouncedSearch ] );
-	const searchLabel = __( 'Filter list' );
+	const searchLabel = label || __( 'Filter list' );
 	return (
 		<SearchControl
 			onChange={ setSearch }

package/src/components/dataviews/style.scss

@@ -1,6 +1,16 @@
 .dataviews-wrapper {
 	width: 100%;
+	height: 100%;
+	overflow: auto;
 	padding: $grid-unit-40;
+
+	> div {
+		min-height: 100%;
+	}
+}
+
+.dataviews-pagination {
+	margin-top: auto;
 }
 
 .dataviews-list-view {
@@ -30,11 +40,6 @@
 	}
 }
 
-.dataviews__select-control-prefix {
-	color: $gray-700;
-	text-wrap: nowrap;
-}
-
 .dataviews-view-grid__media {
 	width: 100%;
 	min-height: 200px;

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

@@ -12,7 +12,7 @@ import {
 /**
  * Internal dependencies
  */
-import FieldActions from './field-actions';
+import ItemActions from './item-actions';
 
 export function ViewGrid( { data, fields, view, actions } ) {
 	const mediaField = fields.find(
@@ -50,7 +50,12 @@ export function ViewGrid( { data, fields, view, actions } ) {
 									) ) }
 								</VStack>
 							</FlexBlock>
-							<FieldActions item={ item } actions={ actions } />
+							<FlexBlock>
+								<ItemActions
+									item={ item }
+									actions={ actions }
+								/>
+							</FlexBlock>
 						</HStack>
 					</VStack>
 				);

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

@@ -34,7 +34,7 @@ import { useMemo, Children, Fragment } from '@wordpress/element';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import FieldActions from './field-actions';
+import ItemActions from './item-actions';
 
 const {
 	DropdownMenuV2,
@@ -160,7 +160,7 @@ function ViewList( {
 				id: 'actions',
 				cell: ( props ) => {
 					return (
-						<FieldActions
+						<ItemActions
 							item={ props.row.original }
 							actions={ actions }
 						/>

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

@@ -244,7 +244,7 @@ function FontCollection( { id } ) {
 				! fonts.length && (
 					<Text>
 						{ __(
-							'No fonts found. Try with a different seach term'
+							'No fonts found. Try with a different search term'
 						) }
 					</Text>
 				) }

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

@@ -283,13 +283,7 @@ function ScreenBlock( { name, variation } ) {
 					inheritedValue={ inheritedStyleWithLayout }
 					value={ styleWithLayout }
 					onChange={ setStyle }
-					settings={ {
-						...settings,
-						color: {
-							...settings.color,
-							customDuotone: false, //TO FIX: Custom duotone only works on the block level right now
-						},
-					} }
+					settings={ settings }
 					includeLayoutControls
 				/>
 			) }

package/src/components/page-pages/default-views.js

@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { trash } from '@wordpress/icons';
+
+// DEFAULT_STATUSES is intentionally sorted. Items do not have spaces in between them.
+// The reason for that is to match the default statuses coming from the endpoint
+// (entity request and useEffect to update the view).
+export const DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All statuses but 'trash'.
+
+const DEFAULT_PAGE_BASE = {
+	type: 'list',
+	search: '',
+	filters: {
+		status: DEFAULT_STATUSES,
+	},
+	page: 1,
+	perPage: 5,
+	sort: {
+		field: 'date',
+		direction: 'desc',
+	},
+	visibleFilters: [ 'author', 'status' ],
+	// All fields are visible by default, so it's
+	// better to keep track of the hidden ones.
+	hiddenFields: [ 'date', 'featured-image' ],
+	layout: {},
+};
+
+const DEFAULT_VIEWS = [
+	{
+		title: __( 'All' ),
+		slug: 'all',
+		view: DEFAULT_PAGE_BASE,
+	},
+	{
+		title: __( 'Drafts' ),
+		slug: 'drafts',
+		view: {
+			...DEFAULT_PAGE_BASE,
+			filters: {
+				status: 'draft',
+			},
+		},
+	},
+	{
+		title: __( 'Trash' ),
+		slug: 'trash',
+		icon: trash,
+		view: {
+			...DEFAULT_PAGE_BASE,
+			filters: {
+				status: 'trash',
+			},
+		},
+	},
+];
+
+export default DEFAULT_VIEWS;