@wordpress/edit-site 5.25.0 → 5.26.0

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

@@ -7,9 +7,9 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import PagePatterns from '../page-patterns';
+import DataviewsPatterns from '../page-patterns/dataviews-patterns';
 import PageTemplateParts from '../page-template-parts';
 import PageTemplates from '../page-templates';
-import DataviewsTemplates from '../page-templates/dataviews-templates';
 import PagePages from '../page-pages';
 import { unlock } from '../../lock-unlock';
 
@@ -21,16 +21,16 @@ export default function PageMain() {
 	} = useLocation();
 
 	if ( path === '/wp_template/all' ) {
-		return window?.__experimentalAdminViews ? (
-			<DataviewsTemplates />
-		) : (
-			<PageTemplates />
-		);
+		return <PageTemplates />;
 	} else if ( path === '/wp_template_part/all' ) {
 		return <PageTemplateParts />;
 	} else if ( path === '/patterns' ) {
-		return <PagePatterns />;
-	} else if ( window?.__experimentalAdminViews && path === '/pages' ) {
+		return window?.__experimentalAdminViews ? (
+			<DataviewsPatterns />
+		) : (
+			<PagePatterns />
+		);
+	} else if ( window?.__experimentalAdminViews && path === '/page' ) {
 		return <PagePages />;
 	}
 

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';
@@ -13,13 +14,17 @@ 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 { 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,
@@ -37,23 +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';
-const { useLocation } = unlock( routerPrivateApis );
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
-const defaultConfigPerViewType = {
-	[ LAYOUT_TABLE ]: {},
-	[ LAYOUT_GRID ]: {
-		mediaField: 'featured-image',
-		primaryField: 'title',
-	},
-	[ LAYOUT_LIST ]: {
-		primaryField: 'title',
-		mediaField: 'featured-image',
-	},
-};
 
 function useView( type ) {
 	const {
@@ -130,9 +125,24 @@ export default function PagePages() {
 	const postType = 'page';
 	const [ view, setView ] = useView( postType );
 	const [ pageId, setPageId ] = useState( null );
+	const history = useHistory();
 
-	const onSelectionChange = ( items ) =>
-		setPageId( items?.length === 1 ? items[ 0 ].id : null );
+	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 = {};
@@ -212,11 +222,14 @@ export default function PagePages() {
 			{
 				header: __( 'Title' ),
 				id: 'title',
-				getValue: ( { item } ) => item.title?.rendered || item.slug,
+				getValue: ( { item } ) => item.title?.rendered,
 				render: ( { item } ) => {
 					return (
 						<VStack spacing={ 1 }>
-							<Heading as="h3" level={ 5 } weight={ 500 }>
+							<View
+								as="span"
+								className="dataviews-view-grid__title-field"
+							>
 								{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes(
 									view.type
 								) ? (
@@ -228,15 +241,14 @@ export default function PagePages() {
 										} }
 									>
 										{ decodeEntities(
-											item.title?.rendered || item.slug
+											item.title?.rendered
 										) || __( '(no title)' ) }
 									</Link>
 								) : (
-									decodeEntities(
-										item.title?.rendered || item.slug
-									) || __( '(no title)' )
+									decodeEntities( item.title?.rendered ) ||
+									__( '(no title)' )
 								) }
-							</Heading>
+							</View>
 						</VStack>
 					);
 				},
@@ -280,7 +292,7 @@ export default function PagePages() {
 				},
 			},
 		],
-		[ authors, view ]
+		[ authors, view.type ]
 	);
 
 	const permanentlyDeletePostAction = usePermanentlyDeletePostAction();
@@ -298,47 +310,106 @@ 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, setView ]
+		[ 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();
+		},
+		[ 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 }
-					deferredRendering={ false }
+					onDetailsChange={ onDetailsChange }
 				/>
 			</Page>
 			{ view.type === LAYOUT_LIST && (
 				<Page>
-					<div className="edit-site-page-pages-preview">
+					<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 ? (
-							<SideEditor
+							<PostPreview
 								postId={ pageId }
 								postType={ postType }
 							/>

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

@@ -1,5 +1,6 @@
 .edit-site-page-pages__featured-image {
 	border-radius: $grid-unit-05;
-	width: $grid-unit-40;
-	height: $grid-unit-40;
+	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' ) }
+			/>
+		);
+	},
+};