@wordpress/edit-site 5.34.0 → 6.0.0

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

@@ -46,7 +46,7 @@ function buildMenuLabel( title, id, status ) {
 // Save a boolean to prevent us creating a fallback more than once per session.
 let hasCreatedFallback = false;
 
-export default function SidebarNavigationScreenNavigationMenus() {
+export default function SidebarNavigationScreenNavigationMenus( { backPath } ) {
 	const {
 		records: navigationMenus,
 		isResolving: isResolvingNavigationMenus,
@@ -87,7 +87,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
 
 	if ( isLoading ) {
 		return (
-			<SidebarNavigationScreenWrapper>
+			<SidebarNavigationScreenWrapper backPath={ backPath }>
 				<Spinner className="edit-site-sidebar-navigation-screen-navigation-menus__loading" />
 			</SidebarNavigationScreenWrapper>
 		);
@@ -97,6 +97,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
 		return (
 			<SidebarNavigationScreenWrapper
 				description={ __( 'No Navigation Menus found.' ) }
+				backPath={ backPath }
 			/>
 		);
 	}
@@ -106,6 +107,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
 		return (
 			<SingleNavigationMenu
 				navigationMenu={ firstNavigationMenu }
+				backPath={ backPath }
 				handleDelete={ () => handleDelete( firstNavigationMenu ) }
 				handleDuplicate={ () => handleDuplicate( firstNavigationMenu ) }
 				handleSave={ ( edits ) =>
@@ -116,7 +118,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
 	}
 
 	return (
-		<SidebarNavigationScreenWrapper>
+		<SidebarNavigationScreenWrapper backPath={ backPath }>
 			<ItemGroup>
 				{ navigationMenus?.map( ( { id, title, status }, index ) => (
 					<NavMenuItem
@@ -138,12 +140,14 @@ export function SidebarNavigationScreenWrapper( {
 	actions,
 	title,
 	description,
+	backPath,
 } ) {
 	return (
 		<SidebarNavigationScreen
 			title={ title || __( 'Navigation' ) }
 			actions={ actions }
 			description={ description || __( 'Manage your Navigation Menus.' ) }
+			backPath={ backPath }
 			content={ children }
 		/>
 	);
@@ -152,7 +156,7 @@ export function SidebarNavigationScreenWrapper( {
 const NavMenuItem = ( { postId, ...props } ) => {
 	const linkInfo = useLink( {
 		postId,
-		postType: NAVIGATION_POST_TYPE,
+		postType: 'wp_navigation',
 	} );
 	return <SidebarNavigationItem { ...linkInfo } { ...props } />;
 };

package/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js

@@ -18,16 +18,11 @@ const POPOVER_PROPS = {
 /**
  * Internal dependencies
  */
-import {
-	isPreviewingTheme,
-	currentlyPreviewingTheme,
-} from '../../utils/is-previewing-theme';
 import { unlock } from '../../lock-unlock';
 
-const { useLocation, useHistory } = unlock( routerPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
 
 export default function LeafMoreMenu( props ) {
-	const { params } = useLocation();
 	const history = useHistory();
 	const { block } = props;
 	const { clientId } = block;
@@ -64,13 +59,12 @@ export default function LeafMoreMenu( props ) {
 				attributes.type &&
 				history
 			) {
+				const { params } = history.getLocationWithParams();
 				history.push(
 					{
 						postType: attributes.type,
 						postId: attributes.id,
-						...( isPreviewingTheme() && {
-							wp_theme_preview: currentlyPreviewingTheme(),
-						} ),
+						canvas: 'edit',
 					},
 					{
 						backPath: params,
@@ -78,13 +72,12 @@ export default function LeafMoreMenu( props ) {
 				);
 			}
 			if ( name === 'core/page-list-item' && attributes.id && history ) {
+				const { params } = history.getLocationWithParams();
 				history.push(
 					{
 						postType: 'page',
 						postId: attributes.id,
-						...( isPreviewingTheme() && {
-							wp_theme_preview: currentlyPreviewingTheme(),
-						} ),
+						canvas: 'edit',
 					},
 					{
 						backPath: params,
@@ -92,7 +85,7 @@ export default function LeafMoreMenu( props ) {
 				);
 			}
 		},
-		[ history, params ]
+		[ history ]
 	);
 
 	return (

package/src/components/sidebar-navigation-screen-navigation-menus/style.scss

@@ -3,67 +3,6 @@
 }
 
 .edit-site-sidebar-navigation-screen-navigation-menus__content {
-	.offcanvas-editor-list-view-leaf {
-		max-width: calc(100% - #{ $grid-unit-05 });
-		border-radius: $radius-block-ui;
-		&:hover,
-		&:focus,
-		&[aria-current] {
-			background: $gray-800;
-		}
-		.block-editor-list-view-block__menu {
-			margin-left: -$grid-unit-10;
-		}
-		&.is-selected {
-			> td {
-				background: transparent;
-			}
-
-			.block-editor-list-view-block-contents {
-				color: inherit;
-			}
-
-			&:not(:hover) {
-				.block-editor-list-view-block__menu {
-					opacity: 0;
-				}
-			}
-
-			&:hover,
-			&:focus {
-				color: $white;
-
-				.block-editor-list-view-block__menu-cell {
-					opacity: 1;
-				}
-			}
-
-			.block-editor-list-view-block__menu {
-				opacity: 1;
-
-				&:focus {
-					box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-				}
-			}
-		}
-
-		.block-editor-list-view-block-contents {
-			&:focus {
-				&::after {
-					box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-				}
-			}
-		}
-
-		&.is-branch-selected:not(.is-selected):not(.is-synced-branch) {
-			background: transparent;
-
-			&:hover {
-				background: $gray-800;
-			}
-		}
-	}
-
 	.block-editor-list-view-leaf .block-editor-list-view-block__contents-cell {
 		width: 100%;
 	}

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

@@ -3,6 +3,7 @@
  */
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import { useLink } from '../routes/link';
+import { TEMPLATE_PART_POST_TYPE, PATTERN_TYPES } from '../../utils/constants';
 
 export default function CategoryItem( {
 	count,
@@ -11,12 +12,13 @@ export default function CategoryItem( {
 	isActive,
 	label,
 	type,
-	path = '/patterns',
 } ) {
 	const linkInfo = useLink( {
-		path,
-		categoryType: type,
 		categoryId: id,
+		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
 					}
 				/>
 			) ) }
@@ -110,12 +102,12 @@ function CategoriesGroup( {
 	);
 }
 
-export default function SidebarNavigationScreenPatterns() {
+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 { templatePartAreas, hasTemplateParts, isLoading } =
 		useTemplatePartAreas();
@@ -125,18 +117,6 @@ export default function SidebarNavigationScreenPatterns() {
 		[]
 	);
 
-	/**
-	 * This sidebar needs to temporarily accomodate two different "URLs":
-	 *
-	 * 1. path = /patterns
-	 *    Block based themes. Also classic themes can access this URL, though it's not linked anywhere.
-	 *
-	 * 2. path = /wp_template_part/all
-	 *    Classic themes with support for block-template-parts. We need to list only Template Parts in this case.
-	 *    The URL is accessible from the Appearance > Template Parts menu.
-	 *
-	 * This is temporary. We aim to consolidate to /patterns.
-	 */
 	return (
 		<SidebarNavigationScreen
 			isRoot={ ! isBlockBasedTheme }
@@ -144,7 +124,7 @@ export default function SidebarNavigationScreenPatterns() {
 			description={ __(
 				'Manage what patterns are available when editing the site.'
 			) }
-			actions={ <AddNewPattern /> }
+			backPath={ backPath }
 			content={
 				<>
 					{ isLoading && __( 'Loading items…' ) }
@@ -156,7 +136,6 @@ export default function SidebarNavigationScreenPatterns() {
 								</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

@@ -13,17 +13,18 @@ import DataviewsTemplatesSidebarContent from './content';
 
 const { useLocation } = unlock( routerPrivateApis );
 
-export default function SidebarNavigationScreenTemplatesBrowse() {
+export default function SidebarNavigationScreenTemplatesBrowse( { backPath } ) {
 	const {
 		params: { activeView = 'all' },
 	} = useLocation();
 
 	return (
 		<SidebarNavigationScreen
-			title={ __( 'Manage templates' ) }
+			title={ __( 'Templates' ) }
 			description={ __(
 				'Create new templates, or reset any customizations made to the templates supplied by your theme.'
 			) }
+			backPath={ backPath }
 			content={
 				<DataviewsTemplatesSidebarContent
 					activeView={ activeView }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -20,7 +20,7 @@ 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 { search } from '@wordpress/icons';
 import { store as commandsStore } from '@wordpress/commands';
 import { displayShortcut } from '@wordpress/keycodes';
 import { filterURLForDisplay } from '@wordpress/url';
@@ -87,7 +87,7 @@ const SiteHub = memo( ( { isTransparent, className } ) => {
 
 	return (
 		<motion.div
-			className={ classnames( 'edit-site-site-hub', className ) }
+			className={ clsx( 'edit-site-site-hub', className ) }
 			variants={ {
 				isDistractionFree: { x: '-100%' },
 				isDistractionFreeHovering: { x: 0 },
@@ -103,7 +103,7 @@ const SiteHub = memo( ( { isTransparent, className } ) => {
 		>
 			<HStack justify="flex-start" spacing="0">
 				<motion.div
-					className={ classnames(
+					className={ clsx(
 						'edit-site-site-hub__view-mode-toggle-container',
 						{
 							'has-transparent-background': isTransparent,
@@ -158,14 +158,8 @@ const SiteHub = memo( ( { isTransparent, className } ) => {
 							} }
 						>
 							<div className="edit-site-site-hub__title">
-								{ decodeEntities( siteTitle ) }
-							</div>
-							<HStack
-								spacing={ 0 }
-								expanded={ false }
-								className="edit-site-site-hub__actions"
-							>
 								<Button
+									variant="link"
 									href={ homeUrl }
 									target="_blank"
 									label={ __(
@@ -174,10 +168,15 @@ const SiteHub = memo( ( { isTransparent, className } ) => {
 									aria-label={ __(
 										'View site (opens in a new tab)'
 									) }
-									icon={ external }
-									className="edit-site-site-hub__site-view-link"
-								/>
-
+								>
+									{ decodeEntities( siteTitle ) }
+								</Button>
+							</div>
+							<HStack
+								spacing={ 0 }
+								expanded={ false }
+								className="edit-site-site-hub__actions"
+							>
 								<Button
 									className="edit-site-site-hub_toggle-command-center"
 									icon={ search }

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

@@ -23,18 +23,55 @@
 	}
 }
 
-.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/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -42,7 +42,7 @@ function SiteIcon( { className } ) {
 	);
 
 	return (
-		<div className={ classnames( className, 'edit-site-site-icon' ) }>
+		<div className={ clsx( className, 'edit-site-site-icon' ) }>
 			{ icon }
 		</div>
 	);

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -24,6 +24,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 { useResizeObserver } from '@wordpress/compose';
 import { useMemo, useState, memo, useContext } from '@wordpress/element';
@@ -34,7 +35,6 @@ import { ENTER, SPACE } from '@wordpress/keycodes';
  */
 import { unlock } from '../../lock-unlock';
 import EditorCanvasContainer from '../editor-canvas-container';
-import { mergeBaseAndUserConfigs } from '../global-styles/global-styles-provider';
 
 const {
 	ExperimentalBlockEditorProvider,
@@ -42,6 +42,7 @@ const {
 	GlobalStylesContext,
 	useGlobalStylesOutputWithConfig,
 } = unlock( blockEditorPrivateApis );
+const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
 const {
 	CompositeV2: Composite,
@@ -189,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()
@@ -240,7 +241,7 @@ function StyleBook( {
 			closeButtonLabel={ showCloseButton ? __( 'Close' ) : null }
 		>
 			<div
-				className={ classnames( 'edit-site-style-book', {
+				className={ clsx( 'edit-site-style-book', {
 					'is-wide': sizes.width > 600,
 					'is-button': !! onClick,
 				} ) }
@@ -343,7 +344,7 @@ const StyleBookBody = ( {
 
 	return (
 		<Iframe
-			className={ classnames( 'edit-site-style-book__iframe', {
+			className={ clsx( 'edit-site-style-book__iframe', {
 				'is-focused': isFocused && !! onClick,
 				'is-button': !! onClick,
 			} ) }
@@ -363,7 +364,7 @@ const StyleBookBody = ( {
 				}
 			</style>
 			<Examples
-				className={ classnames( 'edit-site-style-book__examples', {
+				className={ clsx( 'edit-site-style-book__examples', {
 					'is-wide': sizes.width > 600,
 				} ) }
 				examples={ examples }
@@ -441,7 +442,7 @@ const Example = ( { id, title, blocks, isSelected, onClick } ) => {
 		<div role="row">
 			<div role="gridcell">
 				<CompositeItem
-					className={ classnames( 'edit-site-style-book__example', {
+					className={ clsx( 'edit-site-style-book__example', {
 						'is-selected': isSelected,
 					} ) }
 					id={ id }

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 };
 	}