@wordpress/edit-site 6.14.0 → 6.15.0

package/src/components/global-styles/shadows-panel.js

@@ -8,10 +8,17 @@ import {
 	Button,
 	Flex,
 	FlexItem,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, sprintf, isRTL } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { plus, shadow as shadowIcon } from '@wordpress/icons';
+import {
+	plus,
+	Icon,
+	chevronLeft,
+	chevronRight,
+	moreVertical,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -21,8 +28,11 @@ import Subtitle from './subtitle';
 import { NavigationButtonAsItem } from './navigation-button';
 import ScreenHeader from './header';
 import { getNewIndexFromPresets } from './utils';
+import { useState } from '@wordpress/element';
+import ConfirmResetShadowDialog from './confirm-reset-shadow-dialog';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+const { Menu } = unlock( componentsPrivateApis );
 
 export const defaultShadow = '6px 6px 9px rgba(0, 0, 0, 0.2)';
 
@@ -40,8 +50,27 @@ export default function ShadowsPanel() {
 		setCustomShadows( [ ...( customShadows || [] ), shadow ] );
 	};
 
+	const handleResetShadows = () => {
+		setCustomShadows( [] );
+	};
+
+	const [ isResetDialogOpen, setIsResetDialogOpen ] = useState( false );
+
+	const toggleResetDialog = () => setIsResetDialogOpen( ! isResetDialogOpen );
+
 	return (
 		<>
+			{ isResetDialogOpen && (
+				<ConfirmResetShadowDialog
+					text={ __(
+						'Are you sure you want to remove all custom shadows?'
+					) }
+					confirmButtonText={ __( 'Remove' ) }
+					isOpen={ isResetDialogOpen }
+					toggleOpen={ toggleResetDialog }
+					onConfirm={ handleResetShadows }
+				/>
+			) }
 			<ScreenHeader
 				title={ __( 'Shadows' ) }
 				description={ __(
@@ -73,6 +102,7 @@ export default function ShadowsPanel() {
 						category="custom"
 						canCreate
 						onCreate={ onCreateShadow }
+						onReset={ toggleResetDialog }
 					/>
 				</VStack>
 			</div>
@@ -80,7 +110,14 @@ export default function ShadowsPanel() {
 	);
 }
 
-function ShadowList( { label, shadows, category, canCreate, onCreate } ) {
+function ShadowList( {
+	label,
+	shadows,
+	category,
+	canCreate,
+	onCreate,
+	onReset,
+} ) {
 	const handleAddShadow = () => {
 		const newIndex = getNewIndexFromPresets( shadows, 'shadow-' );
 		onCreate( {
@@ -115,6 +152,26 @@ function ShadowList( { label, shadows, category, canCreate, onCreate } ) {
 						/>
 					</FlexItem>
 				) }
+				{ !! shadows?.length && category === 'custom' && (
+					<Menu>
+						<Menu.TriggerButton
+							render={
+								<Button
+									size="small"
+									icon={ moreVertical }
+									label={ __( 'Shadow options' ) }
+								/>
+							}
+						/>
+						<Menu.Popover>
+							<Menu.Item onClick={ onReset }>
+								<Menu.ItemLabel>
+									{ __( 'Remove all custom shadows' ) }
+								</Menu.ItemLabel>
+							</Menu.Item>
+						</Menu.Popover>
+					</Menu>
+				) }
 			</HStack>
 			{ shadows.length > 0 && (
 				<ItemGroup isBordered isSeparated>
@@ -135,9 +192,11 @@ function ShadowItem( { shadow, category } ) {
 	return (
 		<NavigationButtonAsItem
 			path={ `/shadows/edit/${ category }/${ shadow.slug }` }
-			icon={ shadowIcon }
 		>
-			{ shadow.name }
+			<HStack>
+				<FlexItem>{ shadow.name }</FlexItem>
+				<Icon icon={ isRTL() ? chevronLeft : chevronRight } />
+			</HStack>
 		</NavigationButtonAsItem>
 	);
 }

package/src/components/global-styles/style.scss

@@ -169,10 +169,18 @@
 	top: $grid-unit;
 	opacity: 0;
 
+	&.edit-site-global-styles__shadow-editor__remove-button {
+		border: none;
+	}
+
 	.edit-site-global-styles__shadow-editor__dropdown-toggle:hover + &,
 	&:focus,
 	&:hover {
-		border: none;
+		opacity: 1;
+	}
+
+	@media (hover: none) {
+		// Show reset button on devices that do not support hover.
 		opacity: 1;
 	}
 }

package/src/components/global-styles/variations/style.scss

@@ -9,9 +9,10 @@
 		outline-offset: -$border-width;
 		overflow: hidden;
 		position: relative;
-		// Add the same transition that block style variations and other buttons have.
-		transition: outline 0.1s linear;
-		@include reduce-motion("transition");
+		@media not (prefers-reduced-motion) {
+			// Add the same transition that block style variations and other buttons have.
+			transition: outline 0.1s linear;
+		}
 
 		&.is-pill {
 			height: $button-size-compact;

package/src/components/layout/index.js

@@ -32,7 +32,8 @@ import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { PluginArea } from '@wordpress/plugins';
 import { store as noticesStore } from '@wordpress/notices';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -70,6 +71,15 @@ function Layout() {
 		triggerAnimationOnChange: routeKey + '-' + canvas,
 	} );
 
+	const { showIconLabels } = useSelect( ( select ) => {
+		return {
+			showIconLabels: select( preferencesStore ).get(
+				'core',
+				'showIconLabels'
+			),
+		};
+	} );
+
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
 	const previousCanvaMode = usePrevious( canvas );
@@ -93,6 +103,7 @@ function Layout() {
 					navigateRegionsProps.className,
 					{
 						'is-full-canvas': canvas === 'edit',
+						'show-icon-labels': showIconLabels,
 					}
 				) }
 			>

package/src/components/layout/style.scss

@@ -115,10 +115,13 @@
 
 		.edit-site-resizable-frame__inner-content {
 			box-shadow: $elevation-x-small;
-			transition: border-radius, box-shadow 0.4s;
 			// This ensure the radius work properly.
 			overflow: hidden;
 
+			@media not (prefers-reduced-motion) {
+				transition: border-radius, box-shadow 0.4s;
+			}
+
 			.edit-site-layout:not(.is-full-canvas) & {
 				border-radius: $radius-large;
 			}
@@ -195,8 +198,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	}
 
 	&::before {
-		transition: box-shadow 0.1s ease;
-		@include reduce-motion("transition");
 		content: "";
 		display: block;
 		position: absolute;
@@ -206,6 +207,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 		left: 9px;
 		border-radius: $radius-medium;
 		box-shadow: none;
+
+		@media not (prefers-reduced-motion) {
+			transition: box-shadow 0.1s ease;
+		}
 	}
 
 	.edit-site-layout__view-mode-toggle-icon {

package/src/components/page/style.scss

@@ -4,8 +4,10 @@
 	height: calc(100% - #{$header-height});
 	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
 	container: edit-site-page / inline-size;
-	transition: width ease-out 0.2s;
-	@include reduce-motion("transition");
+
+	@media not (prefers-reduced-motion) {
+		transition: width ease-out 0.2s;
+	}
 
 	@include break-medium() {
 		height: 100%;
@@ -19,8 +21,10 @@
 	position: sticky;
 	top: 0;
 	z-index: z-index(".edit-site-page-header");
-	transition: padding ease-out 0.1s;
-	@include reduce-motion("transition");
+
+	@media not (prefers-reduced-motion) {
+		transition: padding ease-out 0.1s;
+	}
 
 	.components-heading {
 		color: $gray-900;
@@ -41,7 +45,6 @@
 	}
 }
 
-/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
 @container (max-width: 430px) {
 	.edit-site-page-header {
 		padding: $grid-unit-20 $grid-unit-30;

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

@@ -15,50 +15,25 @@ import {
 } from '@wordpress/block-editor';
 import { Icon } from '@wordpress/icons';
 import { parse } from '@wordpress/blocks';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import {
-	PATTERN_TYPES,
 	TEMPLATE_PART_POST_TYPE,
 	PATTERN_SYNC_TYPES,
 	OPERATOR_IS,
 } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 import { useAddedBy } from '../page-templates/hooks';
-import { defaultGetTitle } from './search-items';
 
-const { useLink } = unlock( routerPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
-function PreviewWrapper( { item, onClick, ariaDescribedBy, children } ) {
-	return (
-		<button
-			className="page-patterns-preview-field__button"
-			type="button"
-			onClick={ item.type !== PATTERN_TYPES.theme ? onClick : undefined }
-			aria-label={ defaultGetTitle( item ) }
-			aria-describedby={ ariaDescribedBy }
-			aria-disabled={ item.type === PATTERN_TYPES.theme }
-		>
-			{ children }
-		</button>
-	);
-}
-
 function PreviewField( { item } ) {
 	const descriptionId = useId();
 	const description = item.description || item?.excerpt?.raw;
-	const isUserPattern = item.type === PATTERN_TYPES.user;
 	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
-	const { onClick } = useLink(
-		`/${ item.type }/${
-			isUserPattern || isTemplatePart ? item.id : item.name
-		}?canvas=edit`
-	);
 	const blocks = useMemo( () => {
 		return (
 			item.blocks ??
@@ -73,23 +48,18 @@ function PreviewField( { item } ) {
 		<div
 			className="page-patterns-preview-field"
 			style={ { backgroundColor } }
+			aria-describedby={ !! description ? descriptionId : undefined }
 		>
-			<PreviewWrapper
-				item={ item }
-				onClick={ onClick }
-				ariaDescribedBy={ !! description ? descriptionId : undefined }
-			>
-				{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
-				{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
-				{ ! isEmpty && (
-					<BlockPreview.Async>
-						<BlockPreview
-							blocks={ blocks }
-							viewportWidth={ item.viewportWidth }
-						/>
-					</BlockPreview.Async>
-				) }
-			</PreviewWrapper>
+			{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
+			{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
+			{ ! isEmpty && (
+				<BlockPreview.Async>
+					<BlockPreview
+						blocks={ blocks }
+						viewportWidth={ item.viewportWidth }
+					/>
+				</BlockPreview.Async>
+			) }
 			{ !! description && (
 				<div hidden id={ descriptionId }>
 					{ description }

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

@@ -12,28 +12,6 @@
 		width: 96px;
 		flex-grow: 0;
 	}
-
-	.page-patterns-preview-field__button {
-		box-shadow: none;
-		border: none;
-		padding: 0;
-		background-color: unset;
-		box-sizing: border-box;
-		cursor: pointer;
-		overflow: hidden;
-		height: 100%;
-		border-radius: $grid-unit-05;
-
-		&:focus-visible {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			// Windows High Contrast mode will show this outline, but not the box-shadow.
-			outline: 2px solid transparent;
-		}
-
-		&[aria-disabled="true"] {
-			cursor: default;
-		}
-	}
 }
 
 .edit-site-patterns__pattern-icon {
@@ -48,10 +26,12 @@
 	top: 0;
 	z-index: 2;
 	flex-shrink: 0;
-	transition: padding ease-out 0.1s;
-	@include reduce-motion("transition");
 	min-height: $grid-unit-50;
 
+	@media not (prefers-reduced-motion) {
+		transition: padding ease-out 0.1s;
+	}
+
 	.edit-site-patterns__title {
 		min-height: $grid-unit-50;
 
@@ -114,7 +94,6 @@
 	}
 }
 
-/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
 @container (max-width: 430px) {
 	.edit-site-page-patterns-dataviews .edit-site-patterns__section-header {
 		padding-left: $grid-unit-30;

package/src/components/page-templates/fields.js

@@ -16,7 +16,6 @@ import {
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { EditorProvider } from '@wordpress/editor';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -25,7 +24,6 @@ import { useAddedBy } from './hooks';
 import usePatternSettings from '../page-patterns/use-pattern-settings';
 import { unlock } from '../../lock-unlock';
 
-const { useLink } = unlock( routerPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 function PreviewField( { item } ) {
@@ -34,7 +32,6 @@ function PreviewField( { item } ) {
 	const blocks = useMemo( () => {
 		return parse( item.content.raw );
 	}, [ item.content.raw ] );
-	const { onClick } = useLink( `/${ item.type }/${ item.id }?canvas=edit` );
 
 	const isEmpty = ! blocks?.length;
 	// Wrap everything in a block editor provider to ensure 'styles' that are needed
@@ -50,19 +47,12 @@ function PreviewField( { item } ) {
 				className="page-templates-preview-field"
 				style={ { backgroundColor } }
 			>
-				<button
-					className="page-templates-preview-field__button"
-					type="button"
-					onClick={ onClick }
-					aria-label={ item.title?.rendered || item.title }
-				>
-					{ isEmpty && __( 'Empty template' ) }
-					{ ! isEmpty && (
-						<BlockPreview.Async>
-							<BlockPreview blocks={ blocks } />
-						</BlockPreview.Async>
-					) }
-				</button>
+				{ isEmpty && __( 'Empty template' ) }
+				{ ! isEmpty && (
+					<BlockPreview.Async>
+						<BlockPreview blocks={ blocks } />
+					</BlockPreview.Async>
+				) }
 			</div>
 		</EditorProvider>
 	);

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

@@ -5,24 +5,6 @@
 	width: 100%;
 	border-radius: $radius-medium;
 
-	.page-templates-preview-field__button {
-		box-shadow: none;
-		border: none;
-		padding: 0;
-		background-color: unset;
-		box-sizing: border-box;
-		cursor: pointer;
-		overflow: hidden;
-		height: 100%;
-		border-radius: $radius-medium;
-
-		&:focus-visible {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			// Windows High Contrast mode will show this outline, but not the box-shadow.
-			outline: 2px solid transparent;
-		}
-	}
-
 	.dataviews-view-list & {
 		.block-editor-block-preview__container {
 			height: 120px;
@@ -85,9 +67,11 @@
 		height: $grid-unit-20;
 		object-fit: cover;
 		opacity: 0;
-		transition: opacity 0.1s linear;
-		@include reduce-motion("transition");
 		border-radius: 100%;
+
+		@media not (prefers-reduced-motion) {
+			transition: opacity 0.1s linear;
+		}
 	}
 
 	&.is-loaded {

package/src/components/post-list/index.js

@@ -109,6 +109,7 @@ function useView( postType ) {
 		return {
 			...initialView,
 			type,
+			...defaultLayouts[ type ],
 		};
 	} );
 
@@ -140,13 +141,15 @@ function useView( postType ) {
 	// without affecting any other config.
 	const onUrlLayoutChange = useEvent( () => {
 		setView( ( prevView ) => {
-			const layoutToApply = layout ?? LAYOUT_LIST;
-			if ( layoutToApply === prevView.type ) {
+			const newType = layout ?? LAYOUT_LIST;
+			if ( newType === prevView.type ) {
 				return prevView;
 			}
+
 			return {
 				...prevView,
-				type: layout ?? LAYOUT_LIST,
+				type: newType,
+				...defaultLayouts[ newType ],
 			};
 		} );
 	} );
@@ -168,6 +171,7 @@ function useView( postType ) {
 			setView( {
 				...newView,
 				type,
+				...defaultLayouts[ type ],
 			} );
 		}
 	} );
@@ -190,6 +194,10 @@ function getItemId( item ) {
 	return item.id.toString();
 }
 
+function getItemLevel( item ) {
+	return item.level;
+}
+
 export default function PostList( { postType } ) {
 	const [ view, setView ] = useView( postType );
 	const defaultViews = useDefaultViews( { postType } );
@@ -215,7 +223,6 @@ export default function PostList( { postType } ) {
 		},
 		[ location.path, location.query.isCustom, history ]
 	);
-
 	const getActiveViewFilters = ( views, match ) => {
 		const found = views.find( ( { slug } ) => slug === match );
 		return found?.filters ?? [];
@@ -296,6 +303,7 @@ export default function PostList( { postType } ) {
 			_embed: 'author',
 			order: view.sort?.direction,
 			orderby: view.sort?.field,
+			orderby_hierarchy: !! view.showLevels,
 			search: view.search,
 			...filters,
 		};
@@ -417,6 +425,7 @@ export default function PostList( { postType } ) {
 					history.navigate( `/${ postType }/${ id }?canvas=edit` );
 				} }
 				getItemId={ getItemId }
+				getItemLevel={ getItemLevel }
 				defaultLayouts={ defaultLayouts }
 				header={
 					window.__experimentalQuickEditDataViews &&

package/src/components/sidebar-dataviews/custom-dataviews-list.js

@@ -27,7 +27,7 @@ import DataViewItem from './dataview-item';
 import AddNewItem from './add-new-view';
 import { unlock } from '../../lock-unlock';
 
-const { useHistory } = unlock( routerPrivateApis );
+const { useHistory, useLocation } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
 
@@ -85,6 +85,7 @@ function RenameItemModalContent( { dataviewId, currentTitle, setIsRenaming } ) {
 
 function CustomDataViewItem( { dataviewId, isActive } ) {
 	const history = useHistory();
+	const location = useLocation();
 	const { dataview } = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord } = select( coreStore );
@@ -145,10 +146,10 @@ function CustomDataViewItem( { dataviewId, isActive } ) {
 											}
 										);
 										if ( isActive ) {
-											const {
-												params: { postType },
-											} = history.getLocationWithParams();
-											history.replace( { postType } );
+											history.replace( {
+												postType:
+													location.query.postType,
+											} );
 										}
 										onClose();
 									} }
@@ -212,7 +213,7 @@ export default function CustomDataViewsList( { type, activeView, isCustom } ) {
 			<div className="edit-site-sidebar-navigation-screen-dataviews__group-header">
 				<Heading level={ 2 }>{ __( 'Custom Views' ) }</Heading>
 			</div>
-			<ItemGroup>
+			<ItemGroup className="edit-site-sidebar-navigation-screen-dataviews__custom-items">
 				{ customDataViews.map( ( customViewRecord ) => {
 					return (
 						<CustomDataViewItem

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

@@ -39,9 +39,10 @@ const DEFAULT_POST_BASE = {
 	page: 1,
 	perPage: 20,
 	sort: {
-		field: 'date',
-		direction: 'desc',
+		field: 'title',
+		direction: 'asc',
 	},
+	showLevels: true,
 	titleField: 'title',
 	mediaField: 'featured_media',
 	fields: [ 'author', 'status' ],

package/src/components/sidebar-dataviews/style.scss

@@ -12,9 +12,12 @@
 	margin-right: -$grid-unit-20;
 }
 
+.edit-site-sidebar-navigation-screen-dataviews__custom-items .edit-site-sidebar-dataviews-dataview-item {
+	padding-right: $grid-unit-10;
+}
+
 .edit-site-sidebar-dataviews-dataview-item {
 	border-radius: $radius-small;
-	padding-right: $grid-unit-10;
 
 	.edit-site-sidebar-dataviews-dataview-item__dropdown-menu {
 		min-width: initial;