@wordpress/edit-site 5.27.2 → 5.28.0

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,12 +15,8 @@ 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();
 
@@ -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,
 		},

package/src/components/sidebar-edit-mode/index.js

@@ -1,13 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { createSlotFill } from '@wordpress/components';
+import {
+	createSlotFill,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { drawerLeft, drawerRight } from '@wordpress/icons';
-import { useEffect } from '@wordpress/element';
+import { useCallback, useContext, useEffect, useRef } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -21,12 +25,89 @@ import TemplatePanel from './template-panel';
 import PluginTemplateSettingPanel from '../plugin-template-setting-panel';
 import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from './constants';
 import { store as editSiteStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
 
 const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill(
 	'EditSiteSidebarInspector'
 );
 export const SidebarInspectorFill = InspectorFill;
 
+const FillContents = ( {
+	sidebarName,
+	isEditingPage,
+	supportsGlobalStyles,
+} ) => {
+	const tabListRef = useRef( null );
+	// Because `DefaultSidebar` renders a `ComplementaryArea`, we
+	// need to forward the `Tabs` context so it can be passed through the
+	// underlying slot/fill.
+	const tabsContextValue = useContext( Tabs.Context );
+
+	// This effect addresses a race condition caused by tabbing from the last
+	// block in the editor into the settings sidebar. Without this effect, the
+	// selected tab and browser focus can become separated in an unexpected way.
+	// (e.g the "block" tab is focused, but the "post" tab is selected).
+	useEffect( () => {
+		const tabsElements = Array.from(
+			tabListRef.current?.querySelectorAll( '[role="tab"]' ) || []
+		);
+		const selectedTabElement = tabsElements.find(
+			// We are purposefully using a custom `data-tab-id` attribute here
+			// because we don't want rely on any assumptions about `Tabs`
+			// component internals.
+			( element ) => element.getAttribute( 'data-tab-id' ) === sidebarName
+		);
+		const activeElement = selectedTabElement?.ownerDocument.activeElement;
+		const tabsHasFocus = tabsElements.some( ( element ) => {
+			return activeElement && activeElement.id === element.id;
+		} );
+		if (
+			tabsHasFocus &&
+			selectedTabElement &&
+			selectedTabElement.id !== activeElement?.id
+		) {
+			selectedTabElement?.focus();
+		}
+	}, [ sidebarName ] );
+
+	return (
+		<>
+			<DefaultSidebar
+				identifier={ sidebarName }
+				title={ __( 'Settings' ) }
+				icon={ isRTL() ? drawerLeft : drawerRight }
+				closeLabel={ __( 'Close Settings' ) }
+				header={
+					<Tabs.Context.Provider value={ tabsContextValue }>
+						<SettingsHeader ref={ tabListRef } />
+					</Tabs.Context.Provider>
+				}
+				headerClassName="edit-site-sidebar-edit-mode__panel-tabs"
+				// This classname is added so we can apply a corrective negative
+				// margin to the panel.
+				// see https://github.com/WordPress/gutenberg/pull/55360#pullrequestreview-1737671049
+				className="edit-site-sidebar__panel"
+			>
+				<Tabs.Context.Provider value={ tabsContextValue }>
+					<Tabs.TabPanel
+						tabId={ SIDEBAR_TEMPLATE }
+						focusable={ false }
+					>
+						{ isEditingPage ? <PagePanels /> : <TemplatePanel /> }
+						<PluginTemplateSettingPanel.Slot />
+					</Tabs.TabPanel>
+					<Tabs.TabPanel tabId={ SIDEBAR_BLOCK } focusable={ false }>
+						<InspectorSlot bubblesVirtually />
+					</Tabs.TabPanel>
+				</Tabs.Context.Provider>
+			</DefaultSidebar>
+			{ supportsGlobalStyles && <GlobalStylesSidebar /> }
+		</>
+	);
+};
+
 export function SidebarComplementaryAreaFills() {
 	const {
 		sidebar,
@@ -34,21 +115,26 @@ export function SidebarComplementaryAreaFills() {
 		hasBlockSelection,
 		supportsGlobalStyles,
 		isEditingPage,
+		isEditorOpen,
 	} = useSelect( ( select ) => {
 		const _sidebar =
 			select( interfaceStore ).getActiveComplementaryArea( STORE_NAME );
+
 		const _isEditorSidebarOpened = [
 			SIDEBAR_BLOCK,
 			SIDEBAR_TEMPLATE,
 		].includes( _sidebar );
-		const settings = select( editSiteStore ).getSettings();
+		const { getCanvasMode } = unlock( select( editSiteStore ) );
+
 		return {
 			sidebar: _sidebar,
 			isEditorSidebarOpened: _isEditorSidebarOpened,
 			hasBlockSelection:
 				!! select( blockEditorStore ).getBlockSelectionStart(),
-			supportsGlobalStyles: ! settings?.supportsTemplatePartsMode,
+			supportsGlobalStyles:
+				select( coreStore ).getCurrentTheme()?.is_block_theme,
 			isEditingPage: select( editSiteStore ).isPage(),
+			isEditorOpen: getCanvasMode() === 'edit',
 		};
 	}, [] );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
@@ -78,27 +164,37 @@ export function SidebarComplementaryAreaFills() {
 		sidebarName = hasBlockSelection ? SIDEBAR_BLOCK : SIDEBAR_TEMPLATE;
 	}
 
+	// `newSelectedTabId` could technically be falsey if no tab is selected (i.e.
+	// the initial render) or when we don't want a tab displayed (i.e. the
+	// sidebar is closed). These cases should both be covered by the `!!` check
+	// below, so we shouldn't need any additional falsey handling.
+	const onTabSelect = useCallback(
+		( newSelectedTabId ) => {
+			if ( !! newSelectedTabId ) {
+				enableComplementaryArea( STORE_NAME, newSelectedTabId );
+			}
+		},
+		[ enableComplementaryArea ]
+	);
+
 	return (
-		<>
-			<DefaultSidebar
-				identifier={ sidebarName }
-				title={ __( 'Settings' ) }
-				icon={ isRTL() ? drawerLeft : drawerRight }
-				closeLabel={ __( 'Close Settings' ) }
-				header={ <SettingsHeader sidebarName={ sidebarName } /> }
-				headerClassName="edit-site-sidebar-edit-mode__panel-tabs"
-			>
-				{ sidebarName === SIDEBAR_TEMPLATE && (
-					<>
-						{ isEditingPage ? <PagePanels /> : <TemplatePanel /> }
-						<PluginTemplateSettingPanel.Slot />
-					</>
-				) }
-				{ sidebarName === SIDEBAR_BLOCK && (
-					<InspectorSlot bubblesVirtually />
-				) }
-			</DefaultSidebar>
-			{ supportsGlobalStyles && <GlobalStylesSidebar /> }
-		</>
+		<Tabs
+			// Due to how this component is controlled (via a value from the
+			// edit-site store), when the sidebar closes the currently selected
+			// tab can't be found. This causes the component to continuously reset
+			// the selection to `null` in an infinite loop. Proactively setting
+			// the selected tab to `null` avoids that.
+			selectedTabId={
+				isEditorOpen && isEditorSidebarOpened ? sidebarName : null
+			}
+			onSelect={ onTabSelect }
+			selectOnMove={ false }
+		>
+			<FillContents
+				sidebarName={ sidebarName }
+				isEditingPage={ isEditingPage }
+				supportsGlobalStyles={ supportsGlobalStyles }
+			/>
+		</Tabs>
 	);
 }

package/src/components/sidebar-edit-mode/settings-header/index.js

@@ -1,82 +1,44 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { STORE_NAME } from '../../../store/constants';
 import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from '../constants';
+import { unlock } from '../../../lock-unlock';
 
-const SettingsHeader = ( { sidebarName } ) => {
+const { Tabs } = unlock( componentsPrivateApis );
+
+const SettingsHeader = ( _, ref ) => {
 	const postTypeLabel = useSelect(
 		( select ) => select( editorStore ).getPostTypeLabel(),
 		[]
 	);
 
-	const { enableComplementaryArea } = useDispatch( interfaceStore );
-	const openTemplateSettings = () =>
-		enableComplementaryArea( STORE_NAME, SIDEBAR_TEMPLATE );
-	const openBlockSettings = () =>
-		enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
-
-	const documentAriaLabel =
-		sidebarName === SIDEBAR_TEMPLATE
-			? // translators: ARIA label for the Template sidebar tab, selected.
-			  sprintf( __( '%s (selected)' ), postTypeLabel )
-			: postTypeLabel;
-
-	/* Use a list so screen readers will announce how many tabs there are. */
 	return (
-		<ul>
-			<li>
-				<Button
-					onClick={ openTemplateSettings }
-					className={ classnames(
-						'edit-site-sidebar-edit-mode__panel-tab',
-						{
-							'is-active': sidebarName === SIDEBAR_TEMPLATE,
-						}
-					) }
-					aria-label={ documentAriaLabel }
-					data-label={ postTypeLabel }
-				>
-					{ postTypeLabel }
-				</Button>
-			</li>
-			<li>
-				<Button
-					onClick={ openBlockSettings }
-					className={ classnames(
-						'edit-site-sidebar-edit-mode__panel-tab',
-						{
-							'is-active': sidebarName === SIDEBAR_BLOCK,
-						}
-					) }
-					aria-label={
-						sidebarName === SIDEBAR_BLOCK
-							? // translators: ARIA label for the Block Settings Sidebar tab, selected.
-							  __( 'Block (selected)' )
-							: // translators: ARIA label for the Block Settings Sidebar tab, not selected.
-							  __( 'Block' )
-					}
-					data-label={ __( 'Block' ) }
-				>
-					{ __( 'Block' ) }
-				</Button>
-			</li>
-		</ul>
+		<Tabs.TabList ref={ ref }>
+			<Tabs.Tab
+				tabId={ SIDEBAR_TEMPLATE }
+				// Used for focus management in the SettingsSidebar component.
+				data-tab-id={ SIDEBAR_TEMPLATE }
+			>
+				{ postTypeLabel }
+			</Tabs.Tab>
+			<Tabs.Tab
+				tabId={ SIDEBAR_BLOCK }
+				// Used for focus management in the SettingsSidebar component.
+				data-tab-id={ SIDEBAR_BLOCK }
+			>
+				{ __( 'Block' ) }
+			</Tabs.Tab>
+		</Tabs.TabList>
 	);
 };
 
-export default SettingsHeader;
+export default forwardRef( SettingsHeader );