@wordpress/edit-site 5.24.1 → 5.25.1-next.79a6196f.0

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

@@ -2,8 +2,9 @@
  * WordPress dependencies
  */
 import {
-	__experimentalHeading as Heading,
+	__experimentalView as View,
 	__experimentalVStack as VStack,
+	Button,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
@@ -12,14 +13,27 @@ import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
 import { dateI18n, getDate, getSettings } from '@wordpress/date';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { DataViews } from '@wordpress/dataviews';
+import { ENTER, SPACE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
 import Page from '../page';
 import Link from '../routes/link';
-import { DataViews, viewTypeSupportsMap } from '../dataviews';
-import { default as DEFAULT_VIEWS } from '../sidebar-dataviews/default-views';
+import {
+	DEFAULT_VIEWS,
+	DEFAULT_CONFIG_PER_VIEW_TYPE,
+} from '../sidebar-dataviews/default-views';
+import {
+	ENUMERATION_TYPE,
+	LAYOUT_GRID,
+	LAYOUT_TABLE,
+	LAYOUT_LIST,
+	OPERATOR_IN,
+	OPERATOR_NOT_IN,
+} from '../../utils/constants';
+
 import {
 	trashPostAction,
 	usePermanentlyDeletePostAction,
@@ -28,20 +42,13 @@ import {
 	viewPostAction,
 	useEditPostAction,
 } from '../actions';
-import SideEditor from './side-editor';
+import PostPreview from '../post-preview';
+import AddNewPageModal from '../add-new-page';
 import Media from '../media';
 import { unlock } from '../../lock-unlock';
-import { ENUMERATION_TYPE, OPERATOR_IN } from '../dataviews/constants';
-const { useLocation } = unlock( routerPrivateApis );
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
-const defaultConfigPerViewType = {
-	list: {},
-	grid: {
-		mediaField: 'featured-image',
-		primaryField: 'title',
-	},
-};
 
 function useView( type ) {
 	const {
@@ -117,7 +124,25 @@ const DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All but 'tra
 export default function PagePages() {
 	const postType = 'page';
 	const [ view, setView ] = useView( postType );
-	const [ selection, setSelection ] = useState( [] );
+	const [ pageId, setPageId ] = useState( null );
+	const history = useHistory();
+
+	const onSelectionChange = useCallback(
+		( items ) => setPageId( items?.length === 1 ? items[ 0 ].id : null ),
+		[ setPageId ]
+	);
+
+	const onDetailsChange = useCallback(
+		( items ) => {
+			if ( !! postType && items?.length === 1 ) {
+				history.push( {
+					postId: items[ 0 ].id,
+					postType,
+				} );
+			}
+		},
+		[ history, postType ]
+	);
 
 	const queryArgs = useMemo( () => {
 		const filters = {};
@@ -133,6 +158,11 @@ export default function PagePages() {
 				filter.operator === OPERATOR_IN
 			) {
 				filters.author = filter.value;
+			} else if (
+				filter.field === 'author' &&
+				filter.operator === OPERATOR_NOT_IN
+			) {
+				filters.author_exclude = filter.value;
 			}
 		} );
 		// We want to provide a different default item for the status filter
@@ -175,15 +205,15 @@ export default function PagePages() {
 				id: 'featured-image',
 				header: __( 'Featured Image' ),
 				getValue: ( { item } ) => item.featured_media,
-				render: ( { item, view: currentView } ) =>
+				render: ( { item } ) =>
 					!! item.featured_media ? (
 						<Media
 							className="edit-site-page-pages__featured-image"
 							id={ item.featured_media }
 							size={
-								currentView.type === 'list'
-									? [ 'thumbnail', 'medium', 'large', 'full' ]
-									: [ 'large', 'full', 'medium', 'thumbnail' ]
+								view.type === LAYOUT_GRID
+									? [ 'large', 'full', 'medium', 'thumbnail' ]
+									: [ 'thumbnail', 'medium', 'large', 'full' ]
 							}
 						/>
 					) : null,
@@ -192,31 +222,33 @@ export default function PagePages() {
 			{
 				header: __( 'Title' ),
 				id: 'title',
-				getValue: ( { item } ) => item.title?.rendered || item.slug,
-				render: ( { item, view: { type } } ) => {
+				getValue: ( { item } ) => item.title?.rendered,
+				render: ( { item } ) => {
 					return (
 						<VStack spacing={ 1 }>
-							<Heading as="h3" level={ 5 }>
-								<Link
-									params={ {
-										postId: item.id,
-										postType: item.type,
-										canvas: 'edit',
-									} }
-									onClick={ ( event ) => {
-										if (
-											viewTypeSupportsMap[ type ].preview
-										) {
-											event.preventDefault();
-											setSelection( [ item.id ] );
-										}
-									} }
-								>
-									{ decodeEntities(
-										item.title?.rendered || item.slug
-									) || __( '(no title)' ) }
-								</Link>
-							</Heading>
+							<View
+								as="span"
+								className="dataviews-view-grid__title-field"
+							>
+								{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes(
+									view.type
+								) ? (
+									<Link
+										params={ {
+											postId: item.id,
+											postType: item.type,
+											canvas: 'edit',
+										} }
+									>
+										{ decodeEntities(
+											item.title?.rendered
+										) || __( '(no title)' ) }
+									</Link>
+								) : (
+									decodeEntities( item.title?.rendered ) ||
+									__( '(no title)' )
+								) }
+							</View>
 						</VStack>
 					);
 				},
@@ -243,6 +275,9 @@ export default function PagePages() {
 				type: ENUMERATION_TYPE,
 				elements: STATUSES,
 				enableSorting: false,
+				filterBy: {
+					operators: [ OPERATOR_IN ],
+				},
 			},
 			{
 				header: __( 'Date' ),
@@ -257,7 +292,7 @@ export default function PagePages() {
 				},
 			},
 		],
-		[ authors ]
+		[ authors, view.type ]
 	);
 
 	const permanentlyDeletePostAction = usePermanentlyDeletePostAction();
@@ -275,50 +310,110 @@ export default function PagePages() {
 		[ permanentlyDeletePostAction, restorePostAction, editPostAction ]
 	);
 	const onChangeView = useCallback(
-		( viewUpdater ) => {
-			let updatedView =
-				typeof viewUpdater === 'function'
-					? viewUpdater( view )
-					: viewUpdater;
-			if ( updatedView.type !== view.type ) {
-				updatedView = {
-					...updatedView,
+		( newView ) => {
+			if ( newView.type !== view.type ) {
+				newView = {
+					...newView,
 					layout: {
-						...defaultConfigPerViewType[ updatedView.type ],
+						...DEFAULT_CONFIG_PER_VIEW_TYPE[ newView.type ],
 					},
 				};
 			}
 
-			setView( updatedView );
+			setView( newView );
+		},
+		[ view.type, setView ]
+	);
+
+	const [ showAddPageModal, setShowAddPageModal ] = useState( false );
+	const openModal = useCallback( () => {
+		if ( ! showAddPageModal ) {
+			setShowAddPageModal( true );
+		}
+	}, [ showAddPageModal ] );
+	const closeModal = useCallback( () => {
+		if ( showAddPageModal ) {
+			setShowAddPageModal( false );
+		}
+	}, [ showAddPageModal ] );
+	const handleNewPage = useCallback(
+		( { type, id } ) => {
+			history.push( {
+				postId: id,
+				postType: type,
+				canvas: 'edit',
+			} );
+			closeModal();
 		},
-		[ view, setView ]
+		[ history ]
 	);
 
 	// TODO: we need to handle properly `data={ data || EMPTY_ARRAY }` for when `isLoading`.
 	return (
 		<>
-			<Page title={ __( 'Pages' ) }>
+			<Page
+				className={
+					view.type === LAYOUT_LIST
+						? 'edit-site-page-pages-list-view'
+						: null
+				}
+				title={ __( 'Pages' ) }
+				actions={
+					<>
+						<Button variant="primary" onClick={ openModal }>
+							{ __( 'Add new page' ) }
+						</Button>
+						{ showAddPageModal && (
+							<AddNewPageModal
+								onSave={ handleNewPage }
+								onClose={ closeModal }
+							/>
+						) }
+					</>
+				}
+			>
 				<DataViews
 					paginationInfo={ paginationInfo }
 					fields={ fields }
 					actions={ actions }
 					data={ pages || EMPTY_ARRAY }
-					getItemId={ ( item ) => item.id }
 					isLoading={ isLoadingPages || isLoadingAuthors }
 					view={ view }
 					onChangeView={ onChangeView }
+					onSelectionChange={ onSelectionChange }
+					onDetailsChange={ onDetailsChange }
 				/>
 			</Page>
-			{ viewTypeSupportsMap[ view.type ].preview && (
+			{ view.type === LAYOUT_LIST && (
 				<Page>
-					<div className="edit-site-page-pages-preview">
-						{ selection.length === 1 && (
-							<SideEditor
-								postId={ selection[ 0 ] }
+					<div
+						className="edit-site-page-pages-preview"
+						tabIndex={ 0 }
+						role="button"
+						onKeyDown={ ( event ) => {
+							const { keyCode } = event;
+							if ( keyCode === ENTER || keyCode === SPACE ) {
+								history.push( {
+									postId: pageId,
+									postType,
+									canvas: 'edit',
+								} );
+							}
+						} }
+						onClick={ () =>
+							history.push( {
+								postId: pageId,
+								postType,
+								canvas: 'edit',
+							} )
+						}
+					>
+						{ pageId !== null ? (
+							<PostPreview
+								postId={ pageId }
 								postType={ postType }
 							/>
-						) }
-						{ selection.length !== 1 && (
+						) : (
 							<div
 								style={ {
 									display: 'flex',

package/src/components/page-pages/style.scss

@@ -1,3 +1,6 @@
 .edit-site-page-pages__featured-image {
-	border-radius: $radius-block-ui;
+	border-radius: $grid-unit-05;
+	width: $grid-unit-50;
+	height: $grid-unit-50;
+	display: block;
 }

package/src/components/page-patterns/dataviews-pattern-actions.js

@@ -0,0 +1,329 @@
+/**
+ * External dependencies
+ */
+import { paramCase as kebabCase } from 'change-case';
+
+/**
+ * WordPress dependencies
+ */
+import { getQueryArgs } from '@wordpress/url';
+import { downloadBlob } from '@wordpress/blob';
+import { __, _x, sprintf } from '@wordpress/i18n';
+import {
+	Button,
+	TextControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalText as Text,
+} from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { decodeEntities } from '@wordpress/html-entities';
+import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+import {
+	PATTERN_TYPES,
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_DEFAULT_CATEGORY,
+} from '../../utils/constants';
+import { CreateTemplatePartModalContents } from '../create-template-part-modal';
+
+const { useHistory } = unlock( routerPrivateApis );
+const { CreatePatternModalContents, useDuplicatePatternProps } =
+	unlock( patternsPrivateApis );
+
+export const exportJSONaction = {
+	id: 'export-pattern',
+	label: __( 'Export as JSON' ),
+	isEligible: ( item ) => item.type === PATTERN_TYPES.user,
+	callback: ( item ) => {
+		const json = {
+			__file: item.type,
+			title: item.title || item.name,
+			content: item.patternPost.content.raw,
+			syncStatus: item.patternPost.wp_pattern_sync_status,
+		};
+		return downloadBlob(
+			`${ kebabCase( item.title || item.name ) }.json`,
+			JSON.stringify( json, null, 2 ),
+			'application/json'
+		);
+	},
+};
+
+export const renameAction = {
+	id: 'rename-pattern',
+	label: __( 'Rename' ),
+	isEligible: ( item ) => {
+		const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
+		const isUserPattern = item.type === PATTERN_TYPES.user;
+		const isCustomPattern =
+			isUserPattern || ( isTemplatePart && item.isCustom );
+		const hasThemeFile = isTemplatePart && item.templatePart.has_theme_file;
+		return isCustomPattern && ! hasThemeFile;
+	},
+	RenderModal: ( { item, closeModal } ) => {
+		const [ title, setTitle ] = useState( () => item.title );
+		const { editEntityRecord, saveEditedEntityRecord } =
+			useDispatch( coreStore );
+		const { createSuccessNotice, createErrorNotice } =
+			useDispatch( noticesStore );
+		async function onRename( event ) {
+			event.preventDefault();
+			try {
+				await editEntityRecord( 'postType', item.type, item.id, {
+					title,
+				} );
+				// Update state before saving rerenders the list.
+				setTitle( '' );
+				closeModal();
+				// Persist edited entity.
+				await saveEditedEntityRecord( 'postType', item.type, item.id, {
+					throwOnError: true,
+				} );
+				createSuccessNotice(
+					item.type === TEMPLATE_PART_POST_TYPE
+						? __( 'Template part renamed.' )
+						: __( 'Pattern renamed.' ),
+					{ type: 'snackbar' }
+				);
+			} catch ( error ) {
+				const fallbackErrorMessage =
+					item.type === TEMPLATE_PART_POST_TYPE
+						? __(
+								'An error occurred while renaming the template part.'
+						  )
+						: __( 'An error occurred while renaming the pattern.' );
+				const errorMessage =
+					error.message && error.code !== 'unknown_error'
+						? error.message
+						: fallbackErrorMessage;
+				createErrorNotice( errorMessage, { type: 'snackbar' } );
+			}
+		}
+		return (
+			<form onSubmit={ onRename }>
+				<VStack spacing="5">
+					<TextControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label={ __( 'Name' ) }
+						value={ title }
+						onChange={ setTitle }
+						required
+					/>
+					<HStack justify="right">
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ () => {
+								closeModal();
+							} }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							type="submit"
+						>
+							{ __( 'Save' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		);
+	},
+};
+
+const canDeleteOrReset = ( item ) => {
+	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
+	const isUserPattern = item.type === PATTERN_TYPES.user;
+	return isUserPattern || ( isTemplatePart && item.isCustom );
+};
+
+export const deleteAction = {
+	id: 'delete-pattern',
+	label: __( 'Delete' ),
+	isEligible: ( item ) => {
+		const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
+		const hasThemeFile = isTemplatePart && item.templatePart.has_theme_file;
+		return canDeleteOrReset( item ) && ! hasThemeFile;
+	},
+	hideModalHeader: true,
+	RenderModal: ( { item, closeModal } ) => {
+		const { __experimentalDeleteReusableBlock } =
+			useDispatch( reusableBlocksStore );
+		const { createErrorNotice, createSuccessNotice } =
+			useDispatch( noticesStore );
+		const { removeTemplate } = useDispatch( editSiteStore );
+
+		const deletePattern = async () => {
+			try {
+				await __experimentalDeleteReusableBlock( item.id );
+				createSuccessNotice(
+					sprintf(
+						// translators: %s: The pattern's title e.g. 'Call to action'.
+						__( '"%s" deleted.' ),
+						item.title
+					),
+					{ type: 'snackbar', id: 'edit-site-patterns-success' }
+				);
+			} catch ( error ) {
+				const errorMessage =
+					error.message && error.code !== 'unknown_error'
+						? error.message
+						: __( 'An error occurred while deleting the pattern.' );
+				createErrorNotice( errorMessage, {
+					type: 'snackbar',
+					id: 'edit-site-patterns-error',
+				} );
+			}
+		};
+		const deleteItem = () =>
+			item.type === TEMPLATE_PART_POST_TYPE
+				? removeTemplate( item )
+				: deletePattern();
+		return (
+			<VStack spacing="5">
+				<Text>
+					{ sprintf(
+						// translators: %s: The pattern or template part's title e.g. 'Call to action'.
+						__( 'Are you sure you want to delete "%s"?' ),
+						decodeEntities( item.title || item.name )
+					) }
+				</Text>
+				<HStack justify="right">
+					<Button variant="tertiary" onClick={ closeModal }>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button variant="primary" onClick={ deleteItem }>
+						{ __( 'Delete' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		);
+	},
+};
+
+export const resetAction = {
+	id: 'reset-action',
+	label: __( 'Clear customizations' ),
+	isEligible: ( item ) => {
+		const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
+		const hasThemeFile = isTemplatePart && item.templatePart.has_theme_file;
+		return canDeleteOrReset( item ) && hasThemeFile;
+	},
+	hideModalHeader: true,
+	RenderModal: ( { item, closeModal } ) => {
+		const { removeTemplate } = useDispatch( editSiteStore );
+		return (
+			<VStack spacing="5">
+				<Text>
+					{ __(
+						'Are you sure you want to clear these customizations?'
+					) }
+				</Text>
+				<HStack justify="right">
+					<Button variant="tertiary" onClick={ closeModal }>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						variant="primary"
+						onClick={ () => removeTemplate( item ) }
+					>
+						{ __( 'Clear' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		);
+	},
+};
+
+export const duplicatePatternAction = {
+	id: 'duplicate-pattern',
+	label: _x( 'Duplicate', 'action label' ),
+	isEligible: ( item ) => item.type !== TEMPLATE_PART_POST_TYPE,
+	modalHeader: _x( 'Duplicate pattern', 'action label' ),
+	RenderModal: ( { item, closeModal } ) => {
+		const { categoryId = PATTERN_DEFAULT_CATEGORY } = getQueryArgs(
+			window.location.href
+		);
+		const isThemePattern = item.type === PATTERN_TYPES.theme;
+		const history = useHistory();
+		function onPatternSuccess( { pattern } ) {
+			history.push( {
+				categoryType: PATTERN_TYPES.theme,
+				categoryId,
+				postType: PATTERN_TYPES.user,
+				postId: pattern.id,
+			} );
+			closeModal();
+		}
+		const duplicatedProps = useDuplicatePatternProps( {
+			pattern: isThemePattern ? item : item.patternPost,
+			onSuccess: onPatternSuccess,
+		} );
+		return (
+			<CreatePatternModalContents
+				onClose={ closeModal }
+				confirmLabel={ _x( 'Duplicate', 'action label' ) }
+				{ ...duplicatedProps }
+			/>
+		);
+	},
+};
+
+export const duplicateTemplatePartAction = {
+	id: 'duplicate-template-part',
+	label: _x( 'Duplicate', 'action label' ),
+	isEligible: ( item ) => item.type === TEMPLATE_PART_POST_TYPE,
+	modalHeader: _x( 'Duplicate template part', 'action label' ),
+	RenderModal: ( { item, closeModal } ) => {
+		const { createSuccessNotice } = useDispatch( noticesStore );
+		const { categoryId = PATTERN_DEFAULT_CATEGORY } = getQueryArgs(
+			window.location.href
+		);
+		const history = useHistory();
+		async function onTemplatePartSuccess( templatePart ) {
+			createSuccessNotice(
+				sprintf(
+					// translators: %s: The new template part's title e.g. 'Call to action (copy)'.
+					__( '"%s" duplicated.' ),
+					item.title
+				),
+				{ type: 'snackbar', id: 'edit-site-patterns-success' }
+			);
+			history.push( {
+				postType: TEMPLATE_PART_POST_TYPE,
+				postId: templatePart?.id,
+				categoryType: TEMPLATE_PART_POST_TYPE,
+				categoryId,
+			} );
+			closeModal();
+		}
+		return (
+			<CreateTemplatePartModalContents
+				blocks={ item.blocks }
+				defaultArea={ item.templatePart.area }
+				defaultTitle={ sprintf(
+					/* translators: %s: Existing template part title */
+					__( '%s (Copy)' ),
+					item.title
+				) }
+				onCreate={ onTemplatePartSuccess }
+				onError={ closeModal }
+				confirmLabel={ _x( 'Duplicate', 'action label' ) }
+			/>
+		);
+	},
+};