@wordpress/edit-site 5.31.0 → 5.32.0

package/src/components/header-edit-mode/style.scss

@@ -1,5 +1,3 @@
-$header-toolbar-min-width: 335px;
-
 .edit-site-header-edit-mode {
 	height: $header-height;
 	align-items: center;
@@ -16,46 +14,62 @@ $header-toolbar-min-width: 335px;
 		display: flex;
 		border: none;
 		align-items: center;
+		flex-grow: 1;
 		flex-shrink: 2;
-		// We need this to be overflow hidden so the block toolbar can
-		// overflow scroll. If the overflow is visible, flexbox allows
-		// the toolbar to grow outside of the allowed container space.
-		overflow: hidden;
 		// Take up the full height of the header so the border focus
 		// is visible on toolbar buttons.
 		height: 100%;
 		// Allow focus ring to be fully visible on furthest right button.
 		@include break-medium() {
+			// Account for the site hub, which is 60x60px.
+			flex-basis: calc(37.5% - 60px);
 			padding-right: 2px;
+			// We need this to be overflow hidden so the block toolbar can
+			// overflow scroll. If the overflow is visible, flexbox allows
+			// the toolbar to grow outside of the allowed container space.
+			overflow: hidden;
 		}
 	}
 
 	.edit-site-header-edit-mode__end {
 		display: flex;
 		justify-content: flex-end;
+		height: 100%;
+		flex-grow: 1;
+		flex-shrink: 1;
+
+		@include break-medium() {
+			flex-basis: 37.5%;
+		}
 	}
 
 	.edit-site-header-edit-mode__center {
-		display: flex;
 		align-items: center;
-		height: 100%;
+		display: flex;
+		flex-basis: 100%;
 		flex-grow: 1;
-		margin: 0 $grid-unit-20;
+		flex-shrink: 2;
+		height: 100%;
 		justify-content: center;
+
 		// Flex items will, by default, refuse to shrink below a minimum
 		// intrinsic width. In order to shrink this flexbox item, and
 		// subsequently truncate child text, we set an explicit min-width.
 		// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
 		min-width: 0;
+
+		@include break-medium() {
+			flex-basis: 25%;
+		}
 	}
 
 }
 
 .edit-site-header-edit-mode__toolbar {
-	display: flex;
 	align-items: center;
-	padding-left: $grid-unit-20;
+	display: flex;
 	gap: $grid-unit-10;
+	padding-left: $grid-unit-20;
 
 	@include break-medium() {
 		padding-left: $grid-unit-50 * 0.5;
@@ -87,12 +101,9 @@ $header-toolbar-min-width: 335px;
 	display: inline-flex;
 	align-items: center;
 	flex-wrap: nowrap;
-	padding-right: $grid-unit-05;
-
-	@include break-small () {
-		padding-right: $grid-unit-10;
-	}
-
+	// Ensure actions do not press against .edit-site-header-edit-mode__center.
+	padding-left: $grid-unit-10;
+	padding-right: $grid-unit-10;
 	gap: $grid-unit-10;
 }
 

package/src/components/keyboard-shortcut-help-modal/index.js

@@ -142,6 +142,10 @@ export default function KeyboardShortcutHelpModal() {
 				title={ __( 'Text formatting' ) }
 				shortcuts={ textFormattingShortcuts }
 			/>
+			<ShortcutCategorySection
+				title={ __( 'List View shortcuts' ) }
+				categoryName="list-view"
+			/>
 		</Modal>
 	);
 }

package/src/components/layout/animation.js

@@ -0,0 +1,122 @@
+/**
+ * External dependencies
+ */
+import { Controller } from '@react-spring/web';
+
+/**
+ * WordPress dependencies
+ */
+import { useLayoutEffect, useMemo, useRef } from '@wordpress/element';
+
+function getAbsolutePosition( element ) {
+	return {
+		top: element.offsetTop,
+		left: element.offsetLeft,
+	};
+}
+
+const ANIMATION_DURATION = 300;
+
+/**
+ * Hook used to compute the styles required to move a div into a new position.
+ *
+ * The way this animation works is the following:
+ *  - It first renders the element as if there was no animation.
+ *  - It takes a snapshot of the position of the block to use it
+ *    as a destination point for the animation.
+ *  - It restores the element to the previous position using a CSS transform
+ *  - It uses the "resetAnimation" flag to reset the animation
+ *    from the beginning in order to animate to the new destination point.
+ *
+ * @param {Object} $1                          Options
+ * @param {*}      $1.triggerAnimationOnChange Variable used to trigger the animation if it changes.
+ */
+function useMovingAnimation( { triggerAnimationOnChange } ) {
+	const ref = useRef();
+
+	// Whenever the trigger changes, we need to take a snapshot of the current
+	// position of the block to use it as a destination point for the animation.
+	const { previous, prevRect } = useMemo(
+		() => ( {
+			previous: ref.current && getAbsolutePosition( ref.current ),
+			prevRect: ref.current && ref.current.getBoundingClientRect(),
+		} ),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[ triggerAnimationOnChange ]
+	);
+
+	useLayoutEffect( () => {
+		if ( ! previous || ! ref.current ) {
+			return;
+		}
+
+		// We disable the animation if the user has a preference for reduced
+		// motion.
+		const disableAnimation = window.matchMedia(
+			'(prefers-reduced-motion: reduce)'
+		).matches;
+
+		if ( disableAnimation ) {
+			return;
+		}
+
+		const controller = new Controller( {
+			x: 0,
+			y: 0,
+			width: prevRect.width,
+			height: prevRect.height,
+			config: { duration: ANIMATION_DURATION },
+			onChange( { value } ) {
+				if ( ! ref.current ) {
+					return;
+				}
+				let { x, y, width, height } = value;
+				x = Math.round( x );
+				y = Math.round( y );
+				width = Math.round( width );
+				height = Math.round( height );
+				const finishedMoving = x === 0 && y === 0;
+				ref.current.style.transformOrigin = 'center center';
+				ref.current.style.transform = finishedMoving
+					? null // Set to `null` to explicitly remove the transform.
+					: `translate3d(${ x }px,${ y }px,0)`;
+				ref.current.style.width = finishedMoving
+					? null
+					: `${ width }px`;
+				ref.current.style.height = finishedMoving
+					? null
+					: `${ height }px`;
+			},
+		} );
+
+		ref.current.style.transform = undefined;
+		const destination = ref.current.getBoundingClientRect();
+
+		const x = Math.round( prevRect.left - destination.left );
+		const y = Math.round( prevRect.top - destination.top );
+		const width = destination.width;
+		const height = destination.height;
+
+		controller.start( {
+			x: 0,
+			y: 0,
+			width,
+			height,
+			from: { x, y, width: prevRect.width, height: prevRect.height },
+		} );
+
+		return () => {
+			controller.stop();
+			controller.set( {
+				x: 0,
+				y: 0,
+				width: prevRect.width,
+				height: prevRect.height,
+			} );
+		};
+	}, [ previous, prevRect ] );
+
+	return ref;
+}
+
+export default useMovingAnimation;

package/src/components/layout/index.js

@@ -51,12 +51,13 @@ import { useCommonCommands } from '../../hooks/commands/use-common-commands';
 import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands';
 import { useIsSiteEditorLoading } from './hooks';
 import useLayoutAreas from './router';
+import useMovingAnimation from './animation';
 
 const { useCommands } = unlock( coreCommandsPrivateApis );
 const { useCommandContext } = unlock( commandsPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
-const ANIMATION_DURATION = 0.5;
+const ANIMATION_DURATION = 0.3;
 
 export default function Layout() {
 	// This ensures the edited entity id and type are initialized properly.
@@ -114,7 +115,10 @@ export default function Layout() {
 	const isEditorLoading = useIsSiteEditorLoading();
 	const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
 		useState( false );
-	const { areas, widths } = useLayoutAreas();
+	const { key: routeKey, areas, widths } = useLayoutAreas();
+	const animationRef = useMovingAnimation( {
+		triggerAnimationOnChange: canvasMode + '__' + routeKey,
+	} );
 
 	// This determines which animation variant should apply to the header.
 	// There is also a `isDistractionFreeHovering` state that gets priority
@@ -239,7 +243,9 @@ export default function Layout() {
 								} }
 								transition={ {
 									type: 'tween',
-									duration: disableMotion ? 0 : 0.2,
+									duration: disableMotion
+										? 0
+										: ANIMATION_DURATION,
 									ease: 'easeOut',
 								} }
 							>
@@ -315,22 +321,7 @@ export default function Layout() {
 						<div className="edit-site-layout__canvas-container">
 							{ canvasResizer }
 							{ !! canvasSize.width && (
-								<motion.div
-									whileHover={
-										canvasMode === 'view'
-											? {
-													scale: 1.005,
-													transition: {
-														duration: disableMotion
-															? 0
-															: 0.5,
-														ease: 'easeOut',
-													},
-											  }
-											: {}
-									}
-									initial={ false }
-									layout="position"
+								<div
 									className={ classnames(
 										'edit-site-layout__canvas',
 										{
@@ -338,13 +329,7 @@ export default function Layout() {
 												isResizableFrameOversized,
 										}
 									) }
-									transition={ {
-										type: 'tween',
-										duration: disableMotion
-											? 0
-											: ANIMATION_DURATION,
-										ease: 'easeOut',
-									} }
+									ref={ animationRef }
 								>
 									<ErrorBoundary>
 										<ResizableFrame
@@ -373,7 +358,7 @@ export default function Layout() {
 											{ areas.preview }
 										</ResizableFrame>
 									</ErrorBoundary>
-								</motion.div>
+								</div>
 							) }
 						</div>
 					) }

package/src/components/layout/router.js

@@ -18,10 +18,11 @@ import {
 	TEMPLATE_PART_POST_TYPE,
 } from '../../utils/constants';
 
-const { useLocation } = unlock( routerPrivateApis );
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 export default function useLayoutAreas() {
 	const isSiteEditorLoading = useIsSiteEditorLoading();
+	const history = useHistory();
 	const { params } = useLocation();
 	const { postType, postId, path, layout, isCustom, canvas } = params ?? {};
 
@@ -30,31 +31,29 @@ export default function useLayoutAreas() {
 
 	// Regular page
 	if ( path === '/page' ) {
+		const isListLayout = layout === 'list' || ! layout;
 		return {
+			key: 'pages-list',
 			areas: {
-				content: undefined,
-				preview: <Editor isLoading={ isSiteEditorLoading } />,
+				content: <PagePages />,
+				preview: isListLayout && (
+					<Editor
+						isLoading={ isSiteEditorLoading }
+						onClick={ () =>
+							history.push( {
+								path,
+								postType: 'page',
+								postId,
+								canvas: 'edit',
+							} )
+						}
+					/>
+				),
 				mobile:
 					canvas === 'edit' ? (
 						<Editor isLoading={ isSiteEditorLoading } />
 					) : undefined,
 			},
-			widths: {
-				content: undefined,
-			},
-		};
-	}
-
-	const isListLayout = isCustom !== 'true' && layout === 'list';
-
-	if ( path === '/pages' ) {
-		return {
-			areas: {
-				content: <PagePages />,
-				preview: isListLayout && (
-					<Editor isLoading={ isSiteEditorLoading } />
-				),
-			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
 			},
@@ -64,6 +63,7 @@ export default function useLayoutAreas() {
 	// Regular other post types
 	if ( postType && postId ) {
 		return {
+			key: 'page',
 			areas: {
 				preview: <Editor isLoading={ isSiteEditorLoading } />,
 				mobile:
@@ -76,7 +76,9 @@ export default function useLayoutAreas() {
 
 	// Templates
 	if ( path === '/wp_template' ) {
+		const isListLayout = isCustom !== 'true' && layout === 'list';
 		return {
+			key: 'templates-list',
 			areas: {
 				content: (
 					<PageTemplatesTemplateParts
@@ -100,7 +102,9 @@ export default function useLayoutAreas() {
 
 	// Template parts
 	if ( path === '/wp_template_part/all' ) {
+		const isListLayout = isCustom !== 'true' && layout === 'list';
 		return {
+			key: 'template-parts',
 			areas: {
 				content: (
 					<PageTemplatesTemplateParts
@@ -125,6 +129,7 @@ export default function useLayoutAreas() {
 	// Patterns
 	if ( path === '/patterns' ) {
 		return {
+			key: 'patterns',
 			areas: {
 				content: <PagePatterns />,
 				mobile: <PagePatterns />,
@@ -134,6 +139,7 @@ export default function useLayoutAreas() {
 
 	// Fallback shows the home page preview
 	return {
+		key: 'default',
 		areas: {
 			preview: <Editor isLoading={ isSiteEditorLoading } />,
 			mobile:

package/src/components/layout/style.scss

@@ -93,6 +93,8 @@
 	position: relative;
 	flex-grow: 1;
 	z-index: z-index(".edit-site-layout__canvas-container");
+	// When animating the frame size can exceed its container size.
+	overflow: visible;
 
 	&.is-resizing::after {
 		// This covers the whole content which ensures mouse up triggers

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

@@ -15,6 +15,7 @@ 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 { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -34,18 +35,12 @@ import {
 	OPERATOR_IS_NONE,
 } from '../../utils/constants';
 
-import {
-	trashPostAction,
-	usePermanentlyDeletePostAction,
-	useRestorePostAction,
-	postRevisionsAction,
-	viewPostAction,
-	useEditPostAction,
-} from '../actions';
 import AddNewPageModal from '../add-new-page';
 import Media from '../media';
 import { unlock } from '../../lock-unlock';
 
+const { usePostActions } = unlock( editorPrivateApis );
+
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
@@ -345,21 +340,20 @@ export default function PagePages() {
 		],
 		[ authors, view.type ]
 	);
-
-	const permanentlyDeletePostAction = usePermanentlyDeletePostAction();
-	const restorePostAction = useRestorePostAction();
-	const editPostAction = useEditPostAction();
-	const actions = useMemo(
-		() => [
-			editPostAction,
-			viewPostAction,
-			restorePostAction,
-			permanentlyDeletePostAction,
-			postRevisionsAction,
-			trashPostAction,
-		],
-		[ permanentlyDeletePostAction, restorePostAction, editPostAction ]
+	const onActionPerformed = useCallback(
+		( actionId, items ) => {
+			if ( actionId === 'edit-post' ) {
+				const post = items[ 0 ];
+				history.push( {
+					postId: post.id,
+					postType: post.type,
+					canvas: 'edit',
+				} );
+			}
+		},
+		[ history ]
 	);
+	const actions = usePostActions( onActionPerformed );
 	const onChangeView = useCallback(
 		( newView ) => {
 			if ( newView.type !== view.type ) {
@@ -377,27 +371,17 @@ export default function PagePages() {
 	);
 
 	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 ]
-	);
+
+	const openModal = () => setShowAddPageModal( true );
+	const closeModal = () => setShowAddPageModal( false );
+	const handleNewPage = ( { type, id } ) => {
+		history.push( {
+			postId: id,
+			postType: type,
+			canvas: 'edit',
+		} );
+		closeModal();
+	};
 
 	// TODO: we need to handle properly `data={ data || EMPTY_ARRAY }` for when `isLoading`.
 	return (

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

@@ -20,11 +20,7 @@ import {
 	BlockPreview,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
-import {
-	DataViews,
-	sortByTextFields,
-	getPaginationResults,
-} from '@wordpress/dataviews';
+import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
 import {
 	Icon,
 	header,
@@ -41,6 +37,7 @@ import { usePrevious } from '@wordpress/compose';
 import Page from '../page';
 import {
 	LAYOUT_GRID,
+	LAYOUT_TABLE,
 	PATTERN_TYPES,
 	TEMPLATE_PART_POST_TYPE,
 	PATTERN_SYNC_TYPES,
@@ -69,6 +66,9 @@ const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
 const templatePartIcons = { header, footer, uncategorized };
 const EMPTY_ARRAY = [];
 const defaultConfigPerViewType = {
+	[ LAYOUT_TABLE ]: {
+		primaryField: 'title',
+	},
 	[ LAYOUT_GRID ]: {
 		mediaField: 'preview',
 		primaryField: 'title',
@@ -151,6 +151,7 @@ function Preview( { item, categoryId, viewType } ) {
 		postId: isUserPattern ? item.id : item.name,
 		categoryId,
 		categoryType: isTemplatePart ? item.type : PATTERN_TYPES.theme,
+		canvas: 'edit',
 	} );
 
 	return (
@@ -175,7 +176,12 @@ function Preview( { item, categoryId, viewType } ) {
 				>
 					{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
 					{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
-					{ ! isEmpty && <BlockPreview blocks={ item.blocks } /> }
+					{ ! isEmpty && (
+						<BlockPreview
+							blocks={ item.blocks }
+							viewportWidth={ item.viewportWidth }
+						/>
+					) }
 				</PreviewWrapper>
 			</div>
 			{ ariaDescriptions.map( ( ariaDescription, index ) => (
@@ -201,6 +207,7 @@ function Title( { item, categoryId } ) {
 		postId: isUserPattern ? item.id : item.name,
 		categoryId,
 		categoryType: isTemplatePart ? item.type : PATTERN_TYPES.theme,
+		canvas: 'edit',
 	} );
 	if ( ! isUserPattern && templatePartIcons[ categoryId ] ) {
 		itemIcon = templatePartIcons[ categoryId ];
@@ -337,27 +344,12 @@ export default function DataviewsPatterns() {
 		}
 	}, [ categoryId, previousCategoryId ] );
 	const { data, paginationInfo } = useMemo( () => {
-		if ( ! patterns ) {
-			return {
-				data: EMPTY_ARRAY,
-				paginationInfo: { totalItems: 0, totalPages: 0 },
-			};
-		}
-		let filteredData = [ ...patterns ];
-		// Handle sorting.
-		if ( view.sort ) {
-			filteredData = sortByTextFields( {
-				data: filteredData,
-				view,
-				fields,
-				textFields: [ 'title', 'author' ],
-			} );
-		}
-		// Handle pagination.
-		return getPaginationResults( {
-			data: filteredData,
-			view,
-		} );
+		// Since filters are applied server-side,
+		// we need to remove them from the view
+		const viewWithoutFilters = { ...view };
+		delete viewWithoutFilters.search;
+		viewWithoutFilters.filters = [];
+		return filterSortAndPaginate( patterns, viewWithoutFilters, fields );
 	}, [ patterns, view, fields ] );
 
 	const actions = useMemo(
@@ -413,7 +405,7 @@ export default function DataviewsPatterns() {
 					view={ view }
 					onChangeView={ onChangeView }
 					deferredRendering
-					supportedLayouts={ [ LAYOUT_GRID ] }
+					supportedLayouts={ [ LAYOUT_GRID, LAYOUT_TABLE ] }
 				/>
 			</Page>
 		</ExperimentalBlockEditorProvider>