@wordpress/edit-site 5.35.0 → 6.0.1

package/src/components/sidebar-navigation-screen-patterns/category-item.js

@@ -3,6 +3,12 @@
  */
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import { useLink } from '../routes/link';
+import {
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_PART_ALL_AREAS_CATEGORY,
+	PATTERN_DEFAULT_CATEGORY,
+	PATTERN_TYPES,
+} from '../../utils/constants';
 
 export default function CategoryItem( {
 	count,
@@ -11,12 +17,17 @@ export default function CategoryItem( {
 	isActive,
 	label,
 	type,
-	path = '/patterns',
 } ) {
 	const linkInfo = useLink( {
-		path,
-		categoryType: type,
-		categoryId: id,
+		categoryId:
+			id !== TEMPLATE_PART_ALL_AREAS_CATEGORY &&
+			id !== PATTERN_DEFAULT_CATEGORY
+				? id
+				: undefined,
+		postType:
+			type === TEMPLATE_PART_POST_TYPE
+				? TEMPLATE_PART_POST_TYPE
+				: PATTERN_TYPES.user,
 	} );
 
 	if ( ! count ) {

package/src/components/sidebar-navigation-screen-patterns/index.js

@@ -15,7 +15,6 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
-import AddNewPattern from '../add-new-pattern';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import CategoryItem from './category-item';
 import {
@@ -31,7 +30,6 @@ import { unlock } from '../../lock-unlock';
 const { useLocation } = unlock( routerPrivateApis );
 
 function CategoriesGroup( {
-	path,
 	templatePartAreas,
 	patternCategories,
 	currentCategory,
@@ -43,7 +41,6 @@ function CategoriesGroup( {
 		<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
 			<CategoryItem
 				key="all"
-				path={ path }
 				count={ Object.values( templatePartAreas )
 					.map( ( { templateParts } ) => templateParts?.length || 0 )
 					.reduce( ( acc, val ) => acc + val, 0 ) }
@@ -60,7 +57,6 @@ function CategoriesGroup( {
 				( [ area, { label, templateParts } ] ) => (
 					<CategoryItem
 						key={ area }
-						path={ path }
 						count={ templateParts?.length }
 						icon={ getTemplatePartIcon( area ) }
 						label={ label }
@@ -77,32 +73,28 @@ function CategoriesGroup( {
 			{ allPatterns && (
 				<CategoryItem
 					key={ allPatterns.name }
-					path={ path }
 					count={ allPatterns.count }
 					label={ allPatterns.label }
 					icon={ file }
 					id={ allPatterns.name }
-					type="pattern"
+					type={ PATTERN_TYPES.user }
 					isActive={
 						currentCategory === `${ allPatterns.name }` &&
-						( currentType === PATTERN_TYPES.theme ||
-							currentType === PATTERN_TYPES.user )
+						currentType === PATTERN_TYPES.user
 					}
 				/>
 			) }
 			{ otherPatterns.map( ( category ) => (
 				<CategoryItem
 					key={ category.name }
-					path={ path }
 					count={ category.count }
 					label={ category.label }
 					icon={ file }
 					id={ category.name }
-					type="pattern"
+					type={ PATTERN_TYPES.user }
 					isActive={
 						currentCategory === `${ category.name }` &&
-						( currentType === PATTERN_TYPES.theme ||
-							currentType === PATTERN_TYPES.user )
+						currentType === PATTERN_TYPES.user
 					}
 				/>
 			) ) }
@@ -112,10 +104,14 @@ function CategoriesGroup( {
 
 export default function SidebarNavigationScreenPatterns( { backPath } ) {
 	const {
-		params: { categoryType, categoryId, path },
+		params: { postType, categoryId },
 	} = useLocation();
-	const currentCategory = categoryId || PATTERN_DEFAULT_CATEGORY;
-	const currentType = categoryType || PATTERN_TYPES.theme;
+	const currentType = postType || PATTERN_TYPES.user;
+	const currentCategory =
+		categoryId ||
+		( currentType === PATTERN_TYPES.user
+			? PATTERN_DEFAULT_CATEGORY
+			: TEMPLATE_PART_ALL_AREAS_CATEGORY );
 
 	const { templatePartAreas, hasTemplateParts, isLoading } =
 		useTemplatePartAreas();
@@ -133,7 +129,6 @@ export default function SidebarNavigationScreenPatterns( { backPath } ) {
 				'Manage what patterns are available when editing the site.'
 			) }
 			backPath={ backPath }
-			actions={ <AddNewPattern /> }
 			content={
 				<>
 					{ isLoading && __( 'Loading items…' ) }
@@ -145,7 +140,6 @@ export default function SidebarNavigationScreenPatterns( { backPath } ) {
 								</ItemGroup>
 							) }
 							<CategoriesGroup
-								path={ path }
 								templatePartAreas={ templatePartAreas }
 								patternCategories={ patternCategories }
 								currentCategory={ currentCategory }

package/src/components/sidebar-navigation-screen-templates-browse/content.js

@@ -53,7 +53,7 @@ export default function DataviewsTemplatesSidebarContent( {
 	return (
 		<ItemGroup>
 			<DataViewItem
-				slug={ 'all' }
+				slug="all"
 				title={ title }
 				icon={ layout }
 				isActive={ activeView === 'all' }

package/src/components/sidebar-navigation-screen-templates-browse/index.js

@@ -20,7 +20,7 @@ export default function SidebarNavigationScreenTemplatesBrowse( { backPath } ) {
 
 	return (
 		<SidebarNavigationScreen
-			title={ __( 'Manage templates' ) }
+			title={ __( 'Templates' ) }
 			description={ __(
 				'Create new templates, or reset any customizations made to the templates supplied by your theme.'
 			) }

package/src/components/site-hub/index.js

@@ -7,20 +7,12 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	Button,
-	__unstableMotion as motion,
-	__unstableAnimatePresence as AnimatePresence,
-	__experimentalHStack as HStack,
-} from '@wordpress/components';
-import { useReducedMotion } from '@wordpress/compose';
+import { Button, __experimentalHStack as HStack } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
-import { store as editorStore } from '@wordpress/editor';
 import { decodeEntities } from '@wordpress/html-entities';
-import { memo } from '@wordpress/element';
-import { search, external } from '@wordpress/icons';
+import { memo, forwardRef } from '@wordpress/element';
+import { search } from '@wordpress/icons';
 import { store as commandsStore } from '@wordpress/commands';
 import { displayShortcut } from '@wordpress/keycodes';
 import { filterURLForDisplay } from '@wordpress/url';
@@ -32,14 +24,10 @@ import { store as editSiteStore } from '../../store';
 import SiteIcon from '../site-icon';
 import { unlock } from '../../lock-unlock';
 
-const HUB_ANIMATION_DURATION = 0.3;
-
-const SiteHub = memo( ( { isTransparent, className } ) => {
-	const { canvasMode, dashboardLink, homeUrl, siteTitle } = useSelect(
-		( select ) => {
-			const { getCanvasMode, getSettings } = unlock(
-				select( editSiteStore )
-			);
+const SiteHub = memo(
+	forwardRef( ( { isTransparent }, ref ) => {
+		const { dashboardLink, homeUrl, siteTitle } = useSelect( ( select ) => {
+			const { getSettings } = unlock( select( editSiteStore ) );
 
 			const {
 				getSite,
@@ -47,7 +35,6 @@ const SiteHub = memo( ( { isTransparent, className } ) => {
 			} = select( coreStore );
 			const _site = getSite();
 			return {
-				canvasMode: getCanvasMode(),
 				dashboardLink:
 					getSettings().__experimentalDashboardLink || 'index.php',
 				homeUrl: getUnstableBase()?.home,
@@ -56,142 +43,63 @@ const SiteHub = memo( ( { isTransparent, className } ) => {
 						? filterURLForDisplay( _site?.url )
 						: _site?.title,
 			};
-		},
-		[]
-	);
-	const { open: openCommandCenter } = useDispatch( commandsStore );
-
-	const disableMotion = useReducedMotion();
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-	const { setDeviceType } = useDispatch( editorStore );
-	const isBackToDashboardButton = canvasMode === 'view';
-	const siteIconButtonProps = isBackToDashboardButton
-		? {
-				href: dashboardLink,
-				label: __( 'Go to the Dashboard' ),
-		  }
-		: {
-				href: dashboardLink, // We need to keep the `href` here so the component doesn't remount as a `<button>` and break the animation.
-				role: 'button',
-				label: __( 'Open Navigation' ),
-				onClick: ( event ) => {
-					event.preventDefault();
-					if ( canvasMode === 'edit' ) {
-						clearSelectedBlock();
-						setDeviceType( 'Desktop' );
-						setCanvasMode( 'view' );
-					}
-				},
-		  };
+		}, [] );
+		const { open: openCommandCenter } = useDispatch( commandsStore );
 
-	return (
-		<motion.div
-			className={ clsx( 'edit-site-site-hub', className ) }
-			variants={ {
-				isDistractionFree: { x: '-100%' },
-				isDistractionFreeHovering: { x: 0 },
-				view: { x: 0 },
-				edit: { x: 0 },
-			} }
-			initial={ false }
-			transition={ {
-				type: 'tween',
-				duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
-				ease: 'easeOut',
-			} }
-		>
-			<HStack justify="flex-start" spacing="0">
-				<motion.div
-					className={ clsx(
-						'edit-site-site-hub__view-mode-toggle-container',
-						{
-							'has-transparent-background': isTransparent,
-						}
-					) }
-					layout
-					transition={ {
-						type: 'tween',
-						duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
-						ease: 'easeOut',
-					} }
-				>
-					<Button
-						{ ...siteIconButtonProps }
-						className="edit-site-layout__view-mode-toggle"
+		return (
+			<div className="edit-site-site-hub">
+				<HStack justify="flex-start" spacing="0">
+					<div
+						className={ clsx(
+							'edit-site-site-hub__view-mode-toggle-container',
+							{
+								'has-transparent-background': isTransparent,
+							}
+						) }
 					>
-						<motion.div
-							initial={ false }
-							animate={ {
-								scale: canvasMode === 'view' ? 0.5 : 1,
-							} }
-							whileHover={ {
-								scale: canvasMode === 'view' ? 0.5 : 0.96,
-							} }
-							transition={ {
-								type: 'tween',
-								duration: disableMotion
-									? 0
-									: HUB_ANIMATION_DURATION,
-								ease: 'easeOut',
+						<Button
+							ref={ ref }
+							href={ dashboardLink }
+							label={ __( 'Go to the Dashboard' ) }
+							className="edit-site-layout__view-mode-toggle"
+							style={ {
+								transform: 'scale(0.5)',
+								borderRadius: 4,
 							} }
 						>
 							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
-						</motion.div>
-					</Button>
-				</motion.div>
+						</Button>
+					</div>
 
-				<AnimatePresence initial={ false }>
-					{ canvasMode === 'view' && (
+					<HStack>
+						<div className="edit-site-site-hub__title">
+							<Button
+								variant="link"
+								href={ homeUrl }
+								target="_blank"
+								label={ __( 'View site (opens in a new tab)' ) }
+							>
+								{ decodeEntities( siteTitle ) }
+							</Button>
+						</div>
 						<HStack
-							as={ motion.div }
-							initial={ { opacity: 0 } }
-							animate={ {
-								opacity: isTransparent ? 0 : 1,
-							} }
-							exit={ { opacity: 0 } }
-							transition={ {
-								type: 'tween',
-								duration: disableMotion ? 0 : 0.2,
-								ease: 'easeOut',
-								delay: canvasMode === 'view' ? 0.1 : 0,
-							} }
+							spacing={ 0 }
+							expanded={ false }
+							className="edit-site-site-hub__actions"
 						>
-							<div className="edit-site-site-hub__title">
-								{ decodeEntities( siteTitle ) }
-							</div>
-							<HStack
-								spacing={ 0 }
-								expanded={ false }
-								className="edit-site-site-hub__actions"
-							>
-								<Button
-									href={ homeUrl }
-									target="_blank"
-									label={ __(
-										'View site (opens in a new tab)'
-									) }
-									aria-label={ __(
-										'View site (opens in a new tab)'
-									) }
-									icon={ external }
-									className="edit-site-site-hub__site-view-link"
-								/>
-
-								<Button
-									className="edit-site-site-hub_toggle-command-center"
-									icon={ search }
-									onClick={ () => openCommandCenter() }
-									label={ __( 'Open command palette' ) }
-									shortcut={ displayShortcut.primary( 'k' ) }
-								/>
-							</HStack>
+							<Button
+								className="edit-site-site-hub_toggle-command-center"
+								icon={ search }
+								onClick={ () => openCommandCenter() }
+								label={ __( 'Open command palette' ) }
+								shortcut={ displayShortcut.primary( 'k' ) }
+							/>
 						</HStack>
-					) }
-				</AnimatePresence>
-			</HStack>
-		</motion.div>
-	);
-} );
+					</HStack>
+				</HStack>
+			</div>
+		);
+	} )
+);
 
 export default SiteHub;

package/src/components/site-hub/style.scss

@@ -3,6 +3,7 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: $grid-unit-10;
+	margin-right: $grid-unit-15;
 }
 
 .edit-site-site-hub__actions {
@@ -14,27 +15,60 @@
 	width: $header-height;
 	flex-shrink: 0;
 
-	.edit-site-layout__view-mode-toggle-icon {
-		background: $gray-900;
-	}
-
 	&.has-transparent-background .edit-site-layout__view-mode-toggle-icon {
 		background: transparent;
 	}
 }
 
-.edit-site-site-hub__title {
+.edit-site-site-hub__title .components-button {
+	color: $gray-200;
+	display: block;
+	flex-grow: 1;
+	font-size: 15px;
+	font-weight: 500;
+	overflow: hidden;
+	// Add space for the ↗ to render.
+	padding-right: $grid-unit-20;
+	position: relative;
+	text-decoration: none;
 	text-overflow: ellipsis;
 	white-space: nowrap;
-	overflow: hidden;
-	flex-grow: 1;
-	color: $gray-200;
-}
 
-.edit-site-site-hub__site-view-link {
-	margin-right: var(--wp-admin-border-width-focus);
-	svg {
-		fill: $gray-200;
+	&:hover,
+	&:focus,
+	&:active {
+		color: $gray-200;
+	}
+
+	&:focus {
+		// Defer to :focus-visible below.
+		box-shadow: none;
+		outline: none;
+	}
+
+	&:focus-visible {
+		// Push the shadow away from the title.
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $gray-900, 0 0 0 calc(2 * 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;
+		outline-offset: 2px;
+	}
+
+	&::after {
+		content: "\2197";
+		font-weight: 400;
+		opacity: 0;
+		position: absolute;
+		right: 0;
+		transition: opacity 0.1s linear;
+		@include reduce-motion("transition");
+	}
+
+	&:hover::after,
+	&:focus::after,
+	&:active::after {
+		opacity: 1;
 	}
 }
 

package/src/components/site-icon/style.scss

@@ -1,8 +1,5 @@
 .edit-site-site-icon__icon {
 	fill: currentColor;
-	// Matches SiteIcon motion, smoothing out the transition.
-	transition: padding 0.3s ease-out;
-	@include reduce-motion("transition");
 
 	.edit-site-layout.is-full-canvas & {
 		// Make the WordPress icon not so big in full canvas.
@@ -13,7 +10,6 @@
 .edit-site-site-icon__image {
 	width: 100%;
 	height: 100%;
-	border-radius: $radius-block-ui * 2;
 	object-fit: cover;
 	background: #333;
 

package/src/components/style-book/index.js

@@ -190,7 +190,7 @@ function StyleBook( {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const [ textColor ] = useGlobalStyle( 'color.text' );
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
-	const examples = useMemo( getExamples, [] );
+	const [ examples ] = useState( getExamples );
 	const tabs = useMemo(
 		() =>
 			getCategories()

package/src/components/sync-state-with-url/use-init-edited-entity-from-url.js

@@ -27,7 +27,9 @@ const postTypesWithoutParentTemplate = [
 	PATTERN_TYPES.user,
 ];
 
-function useResolveEditedEntityAndContext( { path, postId, postType } ) {
+const authorizedPostTypes = [ 'page' ];
+
+function useResolveEditedEntityAndContext( { postId, postType } ) {
 	const {
 		hasLoadedAllDependencies,
 		homepageId,
@@ -81,7 +83,10 @@ function useResolveEditedEntityAndContext( { path, postId, postType } ) {
 		( select ) => {
 			// If we're rendering a post type that doesn't have a template
 			// no need to resolve its template.
-			if ( postTypesWithoutParentTemplate.includes( postType ) ) {
+			if (
+				postTypesWithoutParentTemplate.includes( postType ) &&
+				postId
+			) {
 				return undefined;
 			}
 
@@ -168,16 +173,16 @@ function useResolveEditedEntityAndContext( { path, postId, postType } ) {
 				return undefined;
 			}
 
-			// If we're rendering a specific page, post... we need to resolve its template.
-			if ( postType && postId ) {
+			// If we're rendering a specific page, we need to resolve its template.
+			// The site editor only supports pages for now, not other CPTs.
+			if (
+				postType &&
+				postId &&
+				authorizedPostTypes.includes( postType )
+			) {
 				return resolveTemplateForPostTypeAndId( postType, postId );
 			}
 
-			// Some URLs in list views are different
-			if ( path === '/page' && postId ) {
-				return resolveTemplateForPostTypeAndId( 'page', postId );
-			}
-
 			// If we're rendering the home page, and we have a static home page, resolve its template.
 			if ( homepageId ) {
 				return resolveTemplateForPostTypeAndId( 'page', homepageId );
@@ -196,37 +201,27 @@ function useResolveEditedEntityAndContext( { path, postId, postType } ) {
 			url,
 			postId,
 			postType,
-			path,
 			frontPageTemplateId,
 		]
 	);
 
 	const context = useMemo( () => {
-		if ( postTypesWithoutParentTemplate.includes( postType ) ) {
+		if ( postTypesWithoutParentTemplate.includes( postType ) && postId ) {
 			return {};
 		}
 
-		if ( postType && postId ) {
+		if ( postType && postId && authorizedPostTypes.includes( postType ) ) {
 			return { postType, postId };
 		}
 
-		// Some URLs in list views are different
-		if ( path === '/page' && postId ) {
-			return { postType: 'page', postId };
-		}
-
 		if ( homepageId ) {
 			return { postType: 'page', postId: homepageId };
 		}
 
 		return {};
-	}, [ homepageId, postType, postId, path ] );
-
-	if ( path === '/wp_template' && postId ) {
-		return { isReady: true, postType: 'wp_template', postId, context };
-	}
+	}, [ homepageId, postType, postId ] );
 
-	if ( postTypesWithoutParentTemplate.includes( postType ) ) {
+	if ( postTypesWithoutParentTemplate.includes( postType ) && postId ) {
 		return { isReady: true, postType, postId, context };
 	}
 

package/src/components/template-part-converter/convert-to-template-part.js

@@ -9,13 +9,16 @@ import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { symbolFilled } from '@wordpress/icons';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import CreateTemplatePartModal from '../create-template-part-modal';
+import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
+const { CreateTemplatePartModal } = unlock( editorPrivateApis );
+
 export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const { replaceBlocks } = useDispatch( blockEditorStore );