@wordpress/edit-site 5.34.0 → 5.35.0

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

@@ -22,7 +22,7 @@ const { useLocation } = unlock( routerPrivateApis );
 
 export const postType = `wp_navigation`;
 
-export default function SidebarNavigationScreenNavigationMenu() {
+export default function SidebarNavigationScreenNavigationMenu( { backPath } ) {
 	const {
 		params: { postId },
 	} = useLocation();
@@ -67,6 +67,7 @@ export default function SidebarNavigationScreenNavigationMenu() {
 				description={ __(
 					'Navigation Menus are a curated collection of blocks that allow visitors to get around your site.'
 				) }
+				backPath={ backPath }
 			>
 				<Spinner className="edit-site-sidebar-navigation-screen-navigation-menus__loading" />
 			</SidebarNavigationScreenWrapper>
@@ -77,6 +78,7 @@ export default function SidebarNavigationScreenNavigationMenu() {
 		return (
 			<SidebarNavigationScreenWrapper
 				description={ __( 'Navigation Menu missing.' ) }
+				backPath={ backPath }
 			/>
 		);
 	}
@@ -86,12 +88,14 @@ export default function SidebarNavigationScreenNavigationMenu() {
 			<SidebarNavigationScreenWrapper
 				actions={
 					<ScreenNavigationMoreMenu
+						menuId={ navigationMenu?.id }
 						menuTitle={ decodeEntities( menuTitle ) }
 						onDelete={ _handleDelete }
 						onSave={ _handleSave }
 						onDuplicate={ _handleDuplicate }
 					/>
 				}
+				backPath={ backPath }
 				title={ buildNavigationLabel(
 					navigationMenu?.title,
 					navigationMenu?.id,
@@ -105,6 +109,7 @@ export default function SidebarNavigationScreenNavigationMenu() {
 	return (
 		<SingleNavigationMenu
 			navigationMenu={ navigationMenu }
+			backPath={ backPath }
 			handleDelete={ _handleDelete }
 			handleSave={ _handleSave }
 			handleDuplicate={ _handleDuplicate }

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

@@ -5,24 +5,30 @@ import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import RenameModal from './rename-modal';
 import DeleteConfirmDialog from './delete-confirm-dialog';
+import { unlock } from '../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
 
 const POPOVER_PROPS = {
 	position: 'bottom right',
 };
 
 export default function ScreenNavigationMoreMenu( props ) {
-	const { onDelete, onSave, onDuplicate, menuTitle } = props;
+	const { onDelete, onSave, onDuplicate, menuTitle, menuId } = props;
 
 	const [ renameModalOpen, setRenameModalOpen ] = useState( false );
 	const [ deleteConfirmDialogOpen, setDeleteConfirmDialogOpen ] =
 		useState( false );
 
+	const history = useHistory();
+
 	const closeModals = () => {
 		setRenameModalOpen( false );
 		setDeleteConfirmDialogOpen( false );
@@ -50,6 +56,17 @@ export default function ScreenNavigationMoreMenu( props ) {
 							>
 								{ __( 'Rename' ) }
 							</MenuItem>
+							<MenuItem
+								onClick={ () => {
+									history.push( {
+										postId: menuId,
+										postType: 'wp_navigation',
+										canvas: 'edit',
+									} );
+								} }
+							>
+								{ __( 'Edit' ) }
+							</MenuItem>
 							<MenuItem
 								onClick={ () => {
 									onDuplicate();

package/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js

@@ -13,6 +13,7 @@ import buildNavigationLabel from '../sidebar-navigation-screen-navigation-menus/
 
 export default function SingleNavigationMenu( {
 	navigationMenu,
+	backPath,
 	handleDelete,
 	handleDuplicate,
 	handleSave,
@@ -24,6 +25,7 @@ export default function SingleNavigationMenu( {
 			actions={
 				<>
 					<ScreenNavigationMoreMenu
+						menuId={ navigationMenu?.id }
 						menuTitle={ decodeEntities( menuTitle ) }
 						onDelete={ handleDelete }
 						onSave={ handleSave }
@@ -31,6 +33,7 @@ export default function SingleNavigationMenu( {
 					/>
 				</>
 			}
+			backPath={ backPath }
 			title={ buildNavigationLabel(
 				navigationMenu?.title,
 				navigationMenu?.id,

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,
+		path: '/navigation',
 	} );
 	return <SidebarNavigationItem { ...linkInfo } { ...props } />;
 };

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

@@ -18,10 +18,6 @@ const POPOVER_PROPS = {
 /**
  * Internal dependencies
  */
-import {
-	isPreviewingTheme,
-	currentlyPreviewingTheme,
-} from '../../utils/is-previewing-theme';
 import { unlock } from '../../lock-unlock';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
@@ -68,9 +64,6 @@ export default function LeafMoreMenu( props ) {
 					{
 						postType: attributes.type,
 						postId: attributes.id,
-						...( isPreviewingTheme() && {
-							wp_theme_preview: currentlyPreviewingTheme(),
-						} ),
 					},
 					{
 						backPath: params,
@@ -82,9 +75,6 @@ export default function LeafMoreMenu( props ) {
 					{
 						postType: 'page',
 						postId: attributes.id,
-						...( isPreviewingTheme() && {
-							wp_theme_preview: currentlyPreviewingTheme(),
-						} ),
 					},
 					{
 						backPath: params,

package/src/components/sidebar-navigation-screen-page/status-label.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -58,7 +58,7 @@ export default function StatusLabel( { status, date, short } ) {
 
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				'edit-site-sidebar-navigation-screen-page__status',
 				{
 					[ `has-status has-${ status }-status` ]: !! status,

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

@@ -19,11 +19,11 @@ import TemplateActions from '../template-actions';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
-export default function SidebarNavigationScreenPattern() {
+export default function SidebarNavigationScreenPattern( { backPath } ) {
 	const history = useHistory();
 	const location = useLocation();
 	const {
-		params: { postType, postId, categoryId, categoryType },
+		params: { postType, postId },
 	} = location;
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 
@@ -31,12 +31,6 @@ export default function SidebarNavigationScreenPattern() {
 
 	const patternDetails = usePatternDetails( postType, postId );
 
-	const backPath = {
-		categoryId,
-		categoryType,
-		path: '/patterns',
-	};
-
 	return (
 		<SidebarNavigationScreen
 			actions={

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

@@ -110,7 +110,7 @@ function CategoriesGroup( {
 	);
 }
 
-export default function SidebarNavigationScreenPatterns() {
+export default function SidebarNavigationScreenPatterns( { backPath } ) {
 	const {
 		params: { categoryType, categoryId, path },
 	} = useLocation();
@@ -125,18 +125,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,6 +132,7 @@ export default function SidebarNavigationScreenPatterns() {
 			description={ __(
 				'Manage what patterns are available when editing the site.'
 			) }
+			backPath={ backPath }
 			actions={ <AddNewPattern /> }
 			content={
 				<>

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

@@ -94,7 +94,7 @@ function useTemplateDetails( postType, postId ) {
 	return { title, description, content, footer };
 }
 
-export default function SidebarNavigationScreenTemplate() {
+export default function SidebarNavigationScreenTemplate( { backPath } ) {
 	const history = useHistory();
 	const {
 		params: { postType, postId },
@@ -108,6 +108,7 @@ export default function SidebarNavigationScreenTemplate() {
 	return (
 		<SidebarNavigationScreen
 			title={ title }
+			backPath={ backPath }
 			actions={
 				<>
 					<TemplateActions

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

@@ -13,7 +13,7 @@ import DataviewsTemplatesSidebarContent from './content';
 
 const { useLocation } = unlock( routerPrivateApis );
 
-export default function SidebarNavigationScreenTemplatesBrowse() {
+export default function SidebarNavigationScreenTemplatesBrowse( { backPath } ) {
 	const {
 		params: { activeView = 'all' },
 	} = useLocation();
@@ -24,6 +24,7 @@ export default function SidebarNavigationScreenTemplatesBrowse() {
 			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
@@ -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,

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,
@@ -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/template-part-converter/index.js

@@ -27,12 +27,25 @@ export default function TemplatePartConverter() {
 }
 
 function TemplatePartConverterMenuItem( { clientIds, onClose } ) {
-	const blocks = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getBlocksByClientId( clientIds ),
+	const { isContentOnly, blocks } = useSelect(
+		( select ) => {
+			const { getBlocksByClientId, getBlockEditingMode } =
+				select( blockEditorStore );
+			return {
+				blocks: getBlocksByClientId( clientIds ),
+				isContentOnly:
+					clientIds.length === 1 &&
+					getBlockEditingMode( clientIds[ 0 ] ) === 'contentOnly',
+			};
+		},
 		[ clientIds ]
 	);
 
+	// Do not show the convert button if the block is in content-only mode.
+	if ( isContentOnly ) {
+		return null;
+	}
+
 	// Allow converting a single template part to standard blocks.
 	if ( blocks.length === 1 && blocks[ 0 ]?.name === 'core/template-part' ) {
 		return (

package/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js

@@ -5,16 +5,17 @@ import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { useContext, useMemo } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { mergeBaseAndUserConfigs } from '../../components/global-styles/global-styles-provider';
 import cloneDeep from '../../utils/clone-deep';
 import { unlock } from '../../lock-unlock';
 
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
 /**
  * Removes all instances of a property from an object.

package/src/style.scss

@@ -6,19 +6,16 @@
 @import "./components/code-editor/style.scss";
 @import "./components/global-styles/style.scss";
 @import "./components/global-styles/screen-revisions/style.scss";
+@import "./components/global-styles-sidebar/style.scss";
 @import "./components/header-edit-mode/style.scss";
 @import "./components/page/style.scss";
 @import "./components/page-pages/style.scss";
 @import "./components/page-patterns/style.scss";
 @import "./components/page-templates/style.scss";
 @import "./components/table/style.scss";
-@import "./components/sidebar-edit-mode/style.scss";
-@import "./components/sidebar-edit-mode/settings-header/style.scss";
-@import "./components/sidebar-edit-mode/template-panel/style.scss";
 @import "./components/editor/style.scss";
 @import "./components/create-template-part-modal/style.scss";
 @import "./components/welcome-guide/style.scss";
-@import "./components/start-template-options/style.scss";
 @import "./components/layout/style.scss";
 @import "./components/save-hub/style.scss";
 @import "./components/save-panel/style.scss";
@@ -85,13 +82,6 @@ body.js.site-editor-php {
 	.interface-interface-skeleton {
 		top: 0;
 	}
-
-	// Todo: Remove this rule when edit site gets support
-	// for opening unpinned sidebar items.
-	.interface-complementary-area__pin-unpin-item.components-button {
-		display: none;
-	}
-
 }
 
 /**

package/src/utils/get-is-list-page.js

@@ -14,9 +14,7 @@ export default function getIsListPage(
 	isMobileViewport
 ) {
 	return (
-		[ '/wp_template', '/wp_template_part/all', '/pages' ].includes(
-			path
-		) ||
+		[ '/wp_template', '/pages' ].includes( path ) ||
 		( path === '/patterns' &&
 			// Don't treat "/patterns" without categoryType and categoryId as a
 			// list page in mobile because the sidebar covers the whole page.

package/src/utils/use-activate-theme.js

@@ -23,7 +23,7 @@ const { useHistory, useLocation } = unlock( routerPrivateApis );
  */
 export function useActivateTheme() {
 	const history = useHistory();
-	const location = useLocation();
+	const { params } = useLocation();
 	const { startResolution, finishResolution } = useDispatch( coreStore );
 
 	return async () => {
@@ -36,9 +36,9 @@ export function useActivateTheme() {
 			startResolution( 'activateTheme' );
 			await window.fetch( activationURL );
 			finishResolution( 'activateTheme' );
-			const { wp_theme_preview: themePreview, ...params } =
-				location.params;
-			history.replace( params );
+			// Remove the wp_theme_preview query param: we've finished activating
+			// the queue and are switching to normal Site Editor.
+			history.replace( { ...params, wp_theme_preview: undefined } );
 		}
 	};
 }