@wordpress/edit-site 5.27.1 → 5.28.0

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -62,6 +67,9 @@ function useView( postType ) {
 			return {
 				...defaultView,
 				type: layout,
+				layout: {
+					...( DEFAULT_CONFIG_PER_VIEW_TYPE[ layout ] || {} ),
+				},
 			};
 		}
 		return defaultView;
@@ -161,32 +169,32 @@ function FeaturedImage( { item, viewType } ) {
 		canvas: 'edit',
 	} );
 	const hasMedia = !! item.featured_media;
+	const size =
+		viewType === LAYOUT_GRID
+			? [ 'large', 'full', 'medium', 'thumbnail' ]
+			: [ 'thumbnail', 'medium', 'large', 'full' ];
+	const media = hasMedia ? (
+		<Media
+			className="edit-site-page-pages__featured-image"
+			id={ item.featured_media }
+			size={ size }
+		/>
+	) : null;
+	if ( viewType === LAYOUT_LIST ) {
+		return media;
+	}
 	return (
-		<span
-			className={ {
+		<button
+			className={ classNames( 'page-pages-preview-field__button', {
 				'edit-site-page-pages__media-wrapper':
 					viewType === LAYOUT_TABLE,
-			} }
+			} ) }
+			type="button"
+			onClick={ onClick }
+			aria-label={ item.title?.rendered || __( '(no title)' ) }
 		>
-			<button
-				className="page-pages-preview-field__button"
-				type="button"
-				onClick={ onClick }
-				aria-label={ item.title?.rendered || __( '(no title)' ) }
-			>
-				{ hasMedia && (
-					<Media
-						className="edit-site-page-pages__featured-image"
-						id={ item.featured_media }
-						size={
-							viewType === LAYOUT_GRID
-								? [ 'large', 'full', 'medium', 'thumbnail' ]
-								: [ 'thumbnail', 'medium', 'large', 'full' ]
-						}
-					/>
-				) }
-			</button>
-		</span>
+			{ media }
+		</button>
 	);
 }
 
@@ -274,6 +282,7 @@ export default function PagePages() {
 					<FeaturedImage item={ item } viewType={ view.type } />
 				),
 				enableSorting: false,
+				width: '1%',
 			},
 			{
 				header: __( 'Title' ),
@@ -298,7 +307,7 @@ export default function PagePages() {
 							__( '(no title)' )
 					);
 				},
-				maxWidth: 400,
+				maxWidth: 300,
 				enableHiding: false,
 			},
 			{

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

@@ -1,30 +1,3 @@
-.edit-site-page-pages__media-wrapper {
-	width: $grid-unit-50;
-	height: $grid-unit-50;
-	display: block;
-	border-radius: $grid-unit-05;
-	position: relative;
-	background-color: $gray-100;
-	overflow: hidden;
-
-	.edit-site-page-pages__featured-image {
-		height: 100%;
-		object-fit: cover;
-		width: 100%;
-	}
-
-	&::after {
-		border-radius: 4px;
-		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-		content: "";
-		height: 100%;
-		left: 0;
-		position: absolute;
-		top: 0;
-		width: 100%;
-	}
-}
-
 .page-pages-preview-field__button {
 	box-shadow: none;
 	border: none;
@@ -42,4 +15,32 @@
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;
 	}
+
+	&.edit-site-page-pages__media-wrapper {
+		width: $grid-unit-40;
+		height: $grid-unit-40;
+		display: block;
+		border-radius: $grid-unit-05;
+		position: relative;
+		background-color: $gray-100;
+		overflow: hidden;
+		flex-grow: 0 !important;
+
+		.edit-site-page-pages__featured-image {
+			height: 100%;
+			object-fit: cover;
+			width: 100%;
+		}
+
+		&::after {
+			border-radius: 4px;
+			box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+			content: "";
+			height: 100%;
+			left: 0;
+			position: absolute;
+			top: 0;
+			width: 100%;
+		}
+	}
 }

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

@@ -161,49 +161,125 @@ export const deleteAction = {
 		return canDeleteOrReset( item ) && ! hasThemeFile;
 	},
 	hideModalHeader: true,
-	RenderModal: ( { items, closeModal } ) => {
-		const [ item ] = items;
+	supportsBulk: true,
+	RenderModal: ( { items, closeModal, onPerform } ) => {
 		const { __experimentalDeleteReusableBlock } =
 			useDispatch( reusableBlocksStore );
 		const { createErrorNotice, createSuccessNotice } =
 			useDispatch( noticesStore );
-		const { removeTemplate } = useDispatch( editSiteStore );
+		const { removeTemplates } = unlock( useDispatch( editSiteStore ) );
 
 		const deletePattern = async () => {
-			try {
-				await __experimentalDeleteReusableBlock( item.id );
-				createSuccessNotice(
-					sprintf(
-						// translators: %s: The pattern's title e.g. 'Call to action'.
+			const promiseResult = await Promise.allSettled(
+				items.map( ( item ) => {
+					return __experimentalDeleteReusableBlock( item.id );
+				} )
+			);
+			// If all the promises were fulfilled with success.
+			if (
+				promiseResult.every( ( { status } ) => status === 'fulfilled' )
+			) {
+				let successMessage;
+				if ( promiseResult.length === 1 ) {
+					successMessage = sprintf(
+						/* translators: The posts's title. */
 						__( '"%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, {
+						items[ 0 ].title
+					);
+				} else {
+					successMessage = __( 'The patterns were deleted.' );
+				}
+				createSuccessNotice( successMessage, {
 					type: 'snackbar',
-					id: 'edit-site-patterns-error',
+					id: 'edit-site-page-trashed',
 				} );
+			} else {
+				// If there was at lease one failure.
+				let errorMessage;
+				// If we were trying to delete a single pattern.
+				if ( promiseResult.length === 1 ) {
+					if ( promiseResult[ 0 ].reason?.message ) {
+						errorMessage = promiseResult[ 0 ].reason.message;
+					} else {
+						errorMessage = __(
+							'An error occurred while deleting the pattern.'
+						);
+					}
+					// If we were trying to delete multiple patterns.
+				} else {
+					const errorMessages = new Set();
+					const failedPromises = promiseResult.filter(
+						( { status } ) => status === 'rejected'
+					);
+					for ( const failedPromise of failedPromises ) {
+						if ( failedPromise.reason?.message ) {
+							errorMessages.add( failedPromise.reason.message );
+						}
+					}
+					if ( errorMessages.size === 0 ) {
+						errorMessage = __(
+							'An error occurred while deleting the patterns.'
+						);
+					} else if ( errorMessages.size === 1 ) {
+						errorMessage = sprintf(
+							/* translators: %s: an error message */
+							__(
+								'An error occurred while deleting the patterns: %s'
+							),
+							[ ...errorMessages ][ 0 ]
+						);
+					} else {
+						errorMessage = sprintf(
+							/* translators: %s: a list of comma separated error messages */
+							__(
+								'Some errors occurred while deleting the patterns: %s'
+							),
+							[ ...errorMessages ].join( ',' )
+						);
+					}
+					createErrorNotice( errorMessage, {
+						type: 'snackbar',
+					} );
+				}
 			}
 		};
-		const deleteItem = () =>
-			item.type === TEMPLATE_PART_POST_TYPE
-				? removeTemplate( item )
-				: deletePattern();
+		const deleteItem = () => {
+			if ( items[ 0 ].type === TEMPLATE_PART_POST_TYPE ) {
+				removeTemplates( items );
+			} else {
+				deletePattern();
+			}
+			if ( onPerform ) {
+				onPerform();
+			}
+			closeModal();
+		};
+		let questionMessage;
+		if ( items.length === 1 ) {
+			questionMessage = sprintf(
+				// translators: %s: The page's title.
+				__( 'Are you sure you want to delete "%s"?' ),
+				decodeEntities( items[ 0 ].title || items[ 0 ].name )
+			);
+		} else if (
+			items.length > 1 &&
+			items[ 0 ].type === TEMPLATE_PART_POST_TYPE
+		) {
+			questionMessage = sprintf(
+				// translators: %d: The number of template parts (2 or more).
+				__( 'Are you sure you want to delete %d template parts?' ),
+				items.length
+			);
+		} else {
+			questionMessage = sprintf(
+				// translators: %d: The number of patterns (2 or more).
+				__( 'Are you sure you want to delete %d patterns?' ),
+				items.length
+			);
+		}
 		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>
+				<Text>{ questionMessage }</Text>
 				<HStack justify="right">
 					<Button variant="tertiary" onClick={ closeModal }>
 						{ __( 'Cancel' ) }

package/src/components/page-patterns/grid-item.js

@@ -171,8 +171,6 @@ function GridItem( { categoryId, item, ...props } ) {
 		<li className={ patternClassNames }>
 			<button
 				className={ previewClassNames }
-				// Even though still incomplete, passing ids helps performance.
-				// @see https://reakit.io/docs/composite/#performance.
 				id={ `edit-site-patterns-${ item.name }` }
 				type="button"
 				{ ...props }

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

@@ -324,6 +324,7 @@ export default function DataviewsPatterns() {
 				elements: SYNC_FILTERS,
 				filterBy: {
 					operators: [ OPERATOR_IN ],
+					isPrimary: true,
 				},
 				enableSorting: false,
 			} );

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

@@ -31,17 +31,12 @@
 		flex-grow: 1;
 	}
 
-	// The increased specificity here is to overcome component styles
-	// without relying on internal component class names.
+	// TODO: Consider using the Theme component to automatically adapt to a dark background.
 	.edit-site-patterns__search {
-		input[type="search"] {
-			height: $button-size-next-default-40px;
-			background: $gray-800;
-			color: $gray-200;
+		--wp-components-color-foreground: #{$gray-200};
 
-			&:focus {
-				background: $gray-800;
-			}
+		.components-input-control__container {
+			background: $gray-800;
 		}
 
 		svg {

package/src/components/page-templates-template-parts/index.js

@@ -151,6 +151,7 @@ function Preview( { item, viewType } ) {
 		postType: item.type,
 		canvas: 'edit',
 	} );
+
 	const isEmpty = ! blocks?.length;
 	// Wrap everything in a block editor provider to ensure 'styles' that are needed
 	// for the previews are synced between the site editor store and the block editor store.
@@ -165,18 +166,23 @@ function Preview( { item, viewType } ) {
 				className={ `page-templates-preview-field is-viewtype-${ viewType }` }
 				style={ { backgroundColor } }
 			>
-				<button
-					className="page-templates-preview-field__button"
-					type="button"
-					onClick={ onClick }
-					aria-label={ item.title?.rendered || item.title }
-				>
-					{ isEmpty &&
-						( item.type === TEMPLATE_POST_TYPE
-							? __( 'Empty template' )
-							: __( 'Empty template part' ) ) }
-					{ ! isEmpty && <BlockPreview blocks={ blocks } /> }
-				</button>
+				{ viewType === LAYOUT_LIST && ! isEmpty && (
+					<BlockPreview blocks={ blocks } />
+				) }
+				{ viewType !== LAYOUT_LIST && (
+					<button
+						className="page-templates-preview-field__button"
+						type="button"
+						onClick={ onClick }
+						aria-label={ item.title?.rendered || item.title }
+					>
+						{ isEmpty &&
+							( item.type === TEMPLATE_POST_TYPE
+								? __( 'Empty template' )
+								: __( 'Empty template part' ) ) }
+						{ ! isEmpty && <BlockPreview blocks={ blocks } /> }
+					</button>
+				) }
 			</div>
 		</ExperimentalBlockEditorProvider>
 	);
@@ -186,11 +192,13 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 	const { params } = useLocation();
 	const { activeView = 'all', layout } = params;
 	const defaultView = useMemo( () => {
+		const usedType = window?.__experimentalAdminViews
+			? layout ?? DEFAULT_VIEW.type
+			: DEFAULT_VIEW.type;
 		return {
 			...DEFAULT_VIEW,
-			type: window?.__experimentalAdminViews
-				? layout ?? DEFAULT_VIEW.type
-				: DEFAULT_VIEW.type,
+			type: usedType,
+			layout: defaultConfigPerViewType[ usedType ],
 			filters:
 				activeView !== 'all'
 					? [
@@ -317,7 +325,6 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 			render: ( { item } ) => {
 				return <AuthorField viewType={ view.type } item={ item } />;
 			},
-			enableHiding: false,
 			type: ENUMERATION_TYPE,
 			elements: authors,
 			width: '1%',

package/src/components/page-templates-template-parts/style.scss

@@ -37,6 +37,22 @@
 			border-radius: 3px 3px 0 0;
 		}
 	}
+
+	&.is-viewtype-table {
+		border-radius: $radius-block-ui;
+		position: relative;
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+			border-radius: $radius-block-ui;
+		}
+	}
 }
 
 .page-templates-description {

package/src/components/routes/link.js

@@ -15,14 +15,10 @@ import {
 
 const { useHistory } = unlock( routerPrivateApis );
 
-export function getPostLinkProps(
-	history,
-	params = {},
-	state,
-	shouldReplace = false
-) {
+export function useLink( params, state, shouldReplace = false ) {
+	const history = useHistory();
 	function onClick( event ) {
-		event.preventDefault();
+		event?.preventDefault();
 
 		if ( shouldReplace ) {
 			history.replace( params, state );
@@ -52,11 +48,6 @@ export function getPostLinkProps(
 	};
 }
 
-export function useLink( params, state, shouldReplace ) {
-	const history = useHistory();
-	return getPostLinkProps( history, params, state, shouldReplace );
-}
-
 export default function Link( {
 	params = {},
 	state,

package/src/components/sidebar-dataviews/default-views.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { trash } from '@wordpress/icons';
 
 /**
@@ -42,14 +42,14 @@ const DEFAULT_PAGE_BASE = {
 	// better to keep track of the hidden ones.
 	hiddenFields: [ 'date', 'featured-image' ],
 	layout: {
-		...DEFAULT_CONFIG_PER_VIEW_TYPE[ LAYOUT_LIST ],
+		...DEFAULT_CONFIG_PER_VIEW_TYPE[ LAYOUT_TABLE ],
 	},
 };
 
 export const DEFAULT_VIEWS = {
 	page: [
 		{
-			title: __( 'All' ),
+			title: _x( 'All', 'pages' ),
 			slug: 'all',
 			view: DEFAULT_PAGE_BASE,
 		},