@wordpress/edit-site 5.34.0 → 6.0.0

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -46,26 +46,19 @@ import {
 	PATTERN_DEFAULT_CATEGORY,
 	OPERATOR_IS,
 } from '../../utils/constants';
-import {
-	exportJSONaction,
-	renameAction,
-	resetAction,
-	deleteAction,
-	duplicatePatternAction,
-	duplicateTemplatePartAction,
-} from './dataviews-pattern-actions';
 import usePatternSettings from './use-pattern-settings';
 import { unlock } from '../../lock-unlock';
 import usePatterns from './use-patterns';
 import PatternsHeader from './header';
 import { useLink } from '../routes/link';
 import { useAddedBy } from '../page-templates/hooks';
+import { useEditPostAction } from '../dataviews-actions';
 
 const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
 	blockEditorPrivateApis
 );
 const { usePostActions } = unlock( editorPrivateApis );
-const { useHistory, useLocation } = unlock( routerPrivateApis );
+const { useLocation } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
 const defaultConfigPerViewType = {
@@ -123,7 +116,7 @@ function PreviewWrapper( { item, onClick, ariaDescribedBy, children } ) {
 	);
 }
 
-function Preview( { item, categoryId, viewType } ) {
+function Preview( { item, viewType } ) {
 	const descriptionId = useId();
 	const isUserPattern = item.type === PATTERN_TYPES.user;
 	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
@@ -133,8 +126,6 @@ function Preview( { item, categoryId, viewType } ) {
 	const { onClick } = useLink( {
 		postType: item.type,
 		postId: isUserPattern ? item.id : item.name,
-		categoryId,
-		categoryType: isTemplatePart ? item.type : PATTERN_TYPES.theme,
 		canvas: 'edit',
 	} );
 
@@ -177,12 +168,9 @@ function Author( { item, viewType } ) {
 		<HStack alignment="left" spacing={ 1 }>
 			{ withIcon && imageUrl && (
 				<div
-					className={ classnames(
-						'page-templates-author-field__avatar',
-						{
-							'is-loaded': isImageLoaded,
-						}
-					) }
+					className={ clsx( 'page-templates-author-field__avatar', {
+						'is-loaded': isImageLoaded,
+					} ) }
 				>
 					<img
 						onLoad={ () => setIsImageLoaded( true ) }
@@ -201,14 +189,11 @@ function Author( { item, viewType } ) {
 	);
 }
 
-function Title( { item, categoryId } ) {
+function Title( { item } ) {
 	const isUserPattern = item.type === PATTERN_TYPES.user;
-	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
 	const { onClick } = useLink( {
 		postType: item.type,
 		postId: isUserPattern ? item.id : item.name,
-		categoryId,
-		categoryType: isTemplatePart ? item.type : PATTERN_TYPES.theme,
 		canvas: 'edit',
 	} );
 	return (
@@ -251,25 +236,19 @@ function Title( { item, categoryId } ) {
 
 export default function DataviewsPatterns() {
 	const {
-		params: { categoryType, categoryId: categoryIdFromURL },
+		params: { postType, categoryId: categoryIdFromURL },
 	} = useLocation();
-	const type = categoryType || PATTERN_TYPES.theme;
+	const type = postType || PATTERN_TYPES.user;
 	const categoryId = categoryIdFromURL || PATTERN_DEFAULT_CATEGORY;
 	const [ view, setView ] = useState( DEFAULT_VIEW );
-	const isUncategorizedThemePatterns =
-		type === PATTERN_TYPES.theme && categoryId === 'uncategorized';
 	const previousCategoryId = usePrevious( categoryId );
 	const viewSyncStatus = view.filters?.find(
 		( { field } ) => field === 'sync-status'
 	)?.value;
-	const { patterns, isResolving } = usePatterns(
-		type,
-		isUncategorizedThemePatterns ? '' : categoryId,
-		{
-			search: view.search,
-			syncStatus: viewSyncStatus,
-		}
-	);
+	const { patterns, isResolving } = usePatterns( type, categoryId, {
+		search: view.search,
+		syncStatus: viewSyncStatus,
+	} );
 
 	const { records } = useEntityRecords( 'postType', TEMPLATE_PART_POST_TYPE, {
 		per_page: -1,
@@ -294,11 +273,7 @@ export default function DataviewsPatterns() {
 				header: __( 'Preview' ),
 				id: 'preview',
 				render: ( { item } ) => (
-					<Preview
-						item={ item }
-						categoryId={ categoryId }
-						viewType={ view.type }
-					/>
+					<Preview item={ item } viewType={ view.type } />
 				),
 				enableSorting: false,
 				enableHiding: false,
@@ -307,14 +282,12 @@ export default function DataviewsPatterns() {
 			{
 				header: __( 'Title' ),
 				id: 'title',
-				render: ( { item } ) => (
-					<Title item={ item } categoryId={ categoryId } />
-				),
+				render: ( { item } ) => <Title item={ item } />,
 				enableHiding: false,
 			},
 		];
 
-		if ( type === PATTERN_TYPES.theme ) {
+		if ( type === PATTERN_TYPES.user ) {
 			_fields.push( {
 				header: __( 'Sync status' ),
 				id: 'sync-status',
@@ -359,7 +332,7 @@ export default function DataviewsPatterns() {
 		}
 
 		return _fields;
-	}, [ view.type, categoryId, type, authors ] );
+	}, [ view.type, type, authors ] );
 
 	// Reset the page number when the category changes.
 	useEffect( () => {
@@ -378,45 +351,16 @@ export default function DataviewsPatterns() {
 		return filterSortAndPaginate( patterns, viewWithoutFilters, fields );
 	}, [ patterns, view, fields, type ] );
 
-	const history = useHistory();
-	const onActionPerformed = useCallback(
-		( actionId, items ) => {
-			if ( actionId === 'edit-post' ) {
-				const post = items[ 0 ];
-				history.push( {
-					postId: post.id,
-					postType: post.type,
-					categoryId,
-					categoryType: type,
-					canvas: 'edit',
-				} );
-			}
-		},
-		[ history, categoryId, type ]
-	);
-	const [ editAction, viewRevisionsAction ] = usePostActions(
-		onActionPerformed,
-		[ 'edit-post', 'view-post-revisions' ]
-	);
+	const templatePartActions = usePostActions( TEMPLATE_PART_POST_TYPE );
+	const patternActions = usePostActions( PATTERN_TYPES.user );
+	const editAction = useEditPostAction();
+
 	const actions = useMemo( () => {
 		if ( type === TEMPLATE_PART_POST_TYPE ) {
-			return [
-				editAction,
-				renameAction,
-				duplicateTemplatePartAction,
-				viewRevisionsAction,
-				resetAction,
-				deleteAction,
-			];
+			return [ editAction, ...templatePartActions ].filter( Boolean );
 		}
-		return [
-			renameAction,
-			duplicatePatternAction,
-			exportJSONaction,
-			resetAction,
-			deleteAction,
-		];
-	}, [ type, editAction, viewRevisionsAction ] );
+		return [ editAction, ...patternActions ].filter( Boolean );
+	}, [ editAction, type, templatePartActions, patternActions ] );
 	const onChangeView = useCallback(
 		( newView ) => {
 			if ( newView.type !== view.type ) {

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

@@ -1,15 +1,3 @@
-.edit-site-patterns__header {
-	position: sticky;
-	top: 0;
-	background: $gray-900;
-	padding: $grid-unit-40 $grid-unit-40 $grid-unit-20;
-	z-index: z-index(".edit-site-patterns__header");
-
-	.edit-site-patterns__button {
-		color: $gray-600;
-	}
-}
-
 .edit-site-patterns__section-header {
 	.screen-reader-shortcut:focus {
 		top: 0;
@@ -99,11 +87,22 @@
 
 	.edit-site-patterns__section-header {
 		border-bottom: 1px solid #f0f0f0;
-		min-height: 72px;
-		padding: $grid-unit-20 $grid-unit-40;
+		padding: $grid-unit-20 $grid-unit-60;
 		position: sticky;
 		top: 0;
 		z-index: 2;
+		flex-shrink: 0;
+		transition: padding ease-out 0.1s;
+		@include reduce-motion("transition");
+		min-height: $grid-unit-50;
+
+		.edit-site-patterns__title {
+			min-height: $grid-unit-50;
+		}
+
+		.edit-site-patterns__sub-title {
+			margin-bottom: $grid-unit-10;
+		}
 	}
 
 	.edit-site-patterns__pattern-title {
@@ -160,3 +159,11 @@
 		}
 	}
 }
+
+/* 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;
+		padding-right: $grid-unit-30;
+	}
+}

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

@@ -291,21 +291,28 @@ const selectUserPatterns = createSelector(
 );
 
 export const usePatterns = (
-	categoryType,
+	postType,
 	categoryId,
 	{ search = '', syncStatus } = {}
 ) => {
 	return useSelect(
 		( select ) => {
-			if ( categoryType === TEMPLATE_PART_POST_TYPE ) {
+			if ( postType === TEMPLATE_PART_POST_TYPE ) {
 				return selectTemplatePartsAsPatterns(
 					select,
 					categoryId,
 					search
 				);
-			} else if ( categoryType === PATTERN_TYPES.theme ) {
-				return selectPatterns( select, categoryId, syncStatus, search );
-			} else if ( categoryType === PATTERN_TYPES.user ) {
+			} else if ( postType === PATTERN_TYPES.user && !! categoryId ) {
+				const appliedCategory =
+					categoryId === 'uncategorized' ? '' : categoryId;
+				return selectPatterns(
+					select,
+					appliedCategory,
+					syncStatus,
+					search
+				);
+			} else if ( postType === PATTERN_TYPES.user ) {
 				return selectUserPatterns( select, syncStatus, search );
 			}
 			return {
@@ -313,7 +320,7 @@ export const usePatterns = (
 				isResolving: false,
 			};
 		},
-		[ categoryId, categoryType, search, syncStatus ]
+		[ categoryId, postType, search, syncStatus ]
 	);
 };
 

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -43,6 +43,7 @@ import {
 
 import usePatternSettings from '../page-patterns/use-pattern-settings';
 import { unlock } from '../../lock-unlock';
+import { useEditPostAction } from '../dataviews-actions';
 
 const { usePostActions } = unlock( editorPrivateApis );
 
@@ -111,12 +112,9 @@ function AuthorField( { item, viewType } ) {
 		<HStack alignment="left" spacing={ 1 }>
 			{ withIcon && imageUrl && (
 				<div
-					className={ classnames(
-						'page-templates-author-field__avatar',
-						{
-							'is-loaded': isImageLoaded,
-						}
-					) }
+					className={ clsx( 'page-templates-author-field__avatar', {
+						'is-loaded': isImageLoaded,
+					} ) }
 				>
 					<img
 						onLoad={ () => setIsImageLoaded( true ) }
@@ -186,14 +184,6 @@ function Preview( { item, viewType } ) {
 	);
 }
 
-const TEMPLATE_ACTIONS = [
-	'edit-post',
-	'reset-template',
-	'rename-template',
-	'view-post-revisions',
-	'delete-template',
-];
-
 export default function PageTemplates() {
 	const { params } = useLocation();
 	const { activeView = 'all', layout } = params;
@@ -333,22 +323,13 @@ export default function PageTemplates() {
 		return filterSortAndPaginate( records, view, fields );
 	}, [ records, view, fields ] );
 
-	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 postTypeActions = usePostActions( TEMPLATE_POST_TYPE );
+	const editAction = useEditPostAction();
+	const actions = useMemo(
+		() => [ editAction, ...postTypeActions ],
+		[ postTypeActions, editAction ]
 	);
 
-	const actions = usePostActions( onActionPerformed, TEMPLATE_ACTIONS );
-
 	const onChangeView = useCallback(
 		( newView ) => {
 			if ( newView.type !== view.type ) {

package/src/components/pagination/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -30,7 +30,7 @@ export default function Pagination( {
 			aria-label={ label }
 			spacing={ 3 }
 			justify="flex-start"
-			className={ classnames( 'edit-site-pagination', className ) }
+			className={ clsx( 'edit-site-pagination', className ) }
 		>
 			<Text variant="muted" className="edit-site-pagination__total">
 				{

package/src/components/resizable-frame/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -12,7 +12,7 @@ import {
 	Tooltip,
 	__unstableMotion as motion,
 } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
+import { useInstanceId, useReducedMotion } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
@@ -86,6 +86,7 @@ function ResizableFrame( {
 	defaultSize,
 	innerContentStyle,
 } ) {
+	const disableMotion = useReducedMotion();
 	const [ frameSize, setFrameSize ] = useState( INITIAL_FRAME_SIZE );
 	// The width of the resizable frame when a new resize gesture starts.
 	const [ startingWidth, setStartingWidth ] = useState();
@@ -230,6 +231,17 @@ function ResizableFrame( {
 					setFrameSize( { width: '100%', height: '100%' } );
 				}
 			} }
+			whileHover={
+				canvasMode === 'view'
+					? {
+							scale: 1.005,
+							transition: {
+								duration: disableMotion ? 0 : 0.5,
+								ease: 'easeOut',
+							},
+					  }
+					: {}
+			}
 			transition={ FRAME_TRANSITION }
 			size={ frameSize }
 			enable={ {
@@ -251,7 +263,7 @@ function ResizableFrame( {
 			} }
 			minWidth={ FRAME_MIN_WIDTH }
 			maxWidth={ isFullWidth ? '100%' : '150%' }
-			maxHeight={ '100%' }
+			maxHeight="100%"
 			onFocus={ () => setShouldShowHandle( true ) }
 			onBlur={ () => setShouldShowHandle( false ) }
 			onMouseOver={ () => setShouldShowHandle( true ) }
@@ -266,7 +278,7 @@ function ResizableFrame( {
 								key="handle"
 								role="separator"
 								aria-orientation="vertical"
-								className={ classnames(
+								className={ clsx(
 									'edit-site-resizable-frame__handle',
 									{ 'is-resizing': isResizing }
 								) }
@@ -298,7 +310,7 @@ function ResizableFrame( {
 			onResizeStart={ handleResizeStart }
 			onResize={ handleResize }
 			onResizeStop={ handleResizeStop }
-			className={ classnames( 'edit-site-resizable-frame__inner', {
+			className={ clsx( 'edit-site-resizable-frame__inner', {
 				'is-resizing': isResizing,
 			} ) }
 			showHandle={ false } // Do not show the default handle, as we're using a custom one.

package/src/components/revisions/index.js

@@ -10,6 +10,7 @@ import {
 	__unstableEditorStyles as EditorStyles,
 	__unstableIframe as Iframe,
 } from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
 import { useContext, useMemo } from '@wordpress/element';
 
@@ -18,7 +19,6 @@ import { useContext, useMemo } from '@wordpress/element';
  */
 
 import { unlock } from '../../lock-unlock';
-import { mergeBaseAndUserConfigs } from '../global-styles/global-styles-provider';
 import EditorCanvasContainer from '../editor-canvas-container';
 
 const {
@@ -26,6 +26,7 @@ const {
 	GlobalStylesContext,
 	useGlobalStylesOutputWithConfig,
 } = unlock( blockEditorPrivateApis );
+const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
 function isObjectEmpty( object ) {
 	return ! object || Object.keys( object ).length === 0;

package/src/components/save-panel/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -139,23 +139,21 @@ export default function SavePanel() {
 	const disabled = isSaving || ! activateSaveEnabled;
 	return (
 		<NavigableRegion
-			className={ classnames( 'edit-site-layout__actions', {
+			className={ clsx( 'edit-site-layout__actions', {
 				'is-entity-save-view-open': isSaveViewOpen,
 			} ) }
 			ariaLabel={ __( 'Save panel' ) }
 		>
 			<div
-				className={ classnames( 'edit-site-editor__toggle-save-panel', {
+				className={ clsx( 'edit-site-editor__toggle-save-panel', {
 					'screen-reader-text': isSaveViewOpen,
 				} ) }
 			>
 				<Button
 					variant="secondary"
-					className={ classnames(
-						'edit-site-editor__toggle-save-panel-button'
-					) }
+					className="edit-site-editor__toggle-save-panel-button"
 					onClick={ () => setIsSaveViewOpened( true ) }
-					aria-haspopup={ 'dialog' }
+					aria-haspopup="dialog"
 					disabled={ disabled }
 					__experimentalIsFocusable
 				>

package/src/components/sidebar/index.js

@@ -1,68 +1,92 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import {
-	useCallback,
 	createContext,
+	useContext,
 	useState,
 	useRef,
-	useEffect,
+	useLayoutEffect,
 } from '@wordpress/element';
 import { focus } from '@wordpress/dom';
 
 export const SidebarNavigationContext = createContext( () => {} );
+// Focus a sidebar element after a navigation. The element to focus is either
+// specified by `focusSelector` (when navigating back) or it is the first
+// tabbable element (usually the "Back" button).
+function focusSidebarElement( el, direction, focusSelector ) {
+	let elementToFocus;
+	if ( direction === 'back' && focusSelector ) {
+		elementToFocus = el.querySelector( focusSelector );
+	}
+	if ( direction !== null && ! elementToFocus ) {
+		const [ firstTabbable ] = focus.tabbable.find( el );
+		elementToFocus = firstTabbable ?? el;
+	}
+	elementToFocus?.focus();
+}
 
-export default function SidebarContent( { routeKey, children } ) {
-	const [ navState, setNavState ] = useState( {
+// Navigation state that is updated when navigating back or forward. Helps us
+// manage the animations and also focus.
+function createNavState() {
+	let state = {
 		direction: null,
 		focusSelector: null,
-	} );
+	};
 
-	const navigate = useCallback( ( direction, focusSelector = null ) => {
-		setNavState( ( prevState ) => ( {
-			direction,
-			focusSelector:
-				direction === 'forward' && focusSelector
-					? focusSelector
-					: prevState.focusSelector,
-		} ) );
-	}, [] );
+	return {
+		get() {
+			return state;
+		},
+		navigate( direction, focusSelector = null ) {
+			state = {
+				direction,
+				focusSelector:
+					direction === 'forward' && focusSelector
+						? focusSelector
+						: state.focusSelector,
+			};
+		},
+	};
+}
 
+function SidebarContentWrapper( { children } ) {
+	const navState = useContext( SidebarNavigationContext );
 	const wrapperRef = useRef();
-	useEffect( () => {
-		let elementToFocus;
-		if ( navState.direction === 'back' && navState.focusSelector ) {
-			elementToFocus = wrapperRef.current.querySelector(
-				navState.focusSelector
-			);
-		}
-		if ( navState.direction !== null && ! elementToFocus ) {
-			const [ firstTabbable ] = focus.tabbable.find( wrapperRef.current );
-			elementToFocus = firstTabbable ?? wrapperRef.current;
-		}
-		elementToFocus?.focus();
+	const [ navAnimation, setNavAnimation ] = useState( null );
+
+	useLayoutEffect( () => {
+		const { direction, focusSelector } = navState.get();
+		focusSidebarElement( wrapperRef.current, direction, focusSelector );
+		setNavAnimation( direction );
 	}, [ navState ] );
 
-	const wrapperCls = classnames( 'edit-site-sidebar__screen-wrapper', {
-		'slide-from-left': navState.direction === 'back',
-		'slide-from-right': navState.direction === 'forward',
+	const wrapperCls = clsx( 'edit-site-sidebar__screen-wrapper', {
+		'slide-from-left': navAnimation === 'back',
+		'slide-from-right': navAnimation === 'forward',
 	} );
 
 	return (
-		<SidebarNavigationContext.Provider value={ navigate }>
+		<div ref={ wrapperRef } className={ wrapperCls }>
+			{ children }
+		</div>
+	);
+}
+
+export default function SidebarContent( { routeKey, children } ) {
+	const [ navState ] = useState( createNavState );
+
+	return (
+		<SidebarNavigationContext.Provider value={ navState }>
 			<div className="edit-site-sidebar__content">
-				<div
-					ref={ wrapperRef }
-					key={ routeKey }
-					className={ wrapperCls }
-				>
+				<SidebarContentWrapper key={ routeKey }>
 					{ children }
-				</div>
+				</SidebarContentWrapper>
 			</div>
 		</SidebarNavigationContext.Provider>
 	);

package/src/components/sidebar-button/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -12,10 +12,7 @@ export default function SidebarButton( props ) {
 	return (
 		<Button
 			{ ...props }
-			className={ classnames(
-				'edit-site-sidebar-button',
-				props.className
-			) }
+			className={ clsx( 'edit-site-sidebar-button', props.className ) }
 		/>
 	);
 }