@wordpress/edit-site 5.33.0 → 5.35.0

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/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	__experimentalVStack as VStack,
@@ -17,6 +17,7 @@ import { safeDecodeURIComponent, filterURLForDisplay } from '@wordpress/url';
 import { useEffect, useCallback } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -34,6 +35,7 @@ const { PostActions } = unlock( editorPrivateApis );
 export default function SidebarNavigationScreenPage( { backPath } ) {
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const history = useHistory();
+	const { createSuccessNotice } = useDispatch( noticesStore );
 	const {
 		params: { postId },
 	} = useLocation();
@@ -83,16 +85,53 @@ export default function SidebarNavigationScreenPage( { backPath } ) {
 
 	const onActionPerformed = useCallback(
 		( actionId, items ) => {
-			if ( actionId === 'move-to-trash' ) {
-				history.push( {
-					path: '/' + items[ 0 ].type,
-					postId: undefined,
-					postType: undefined,
-					canvas: 'view',
-				} );
+			switch ( actionId ) {
+				case 'move-to-trash':
+					{
+						history.push( {
+							path: '/' + items[ 0 ].type,
+							postId: undefined,
+							postType: undefined,
+							canvas: 'view',
+						} );
+					}
+					break;
+				case 'duplicate-post':
+					{
+						const newItem = items[ 0 ];
+						const title =
+							typeof newItem.title === 'string'
+								? newItem.title
+								: newItem.title?.rendered;
+						createSuccessNotice(
+							sprintf(
+								// translators: %s: Title of the created post e.g: "Post 1".
+								__( '"%s" successfully created.' ),
+								title
+							),
+							{
+								type: 'snackbar',
+								id: 'duplicate-post-action',
+								actions: [
+									{
+										label: __( 'Edit' ),
+										onClick: () => {
+											history.push( {
+												path: undefined,
+												postId: newItem.id,
+												postType: newItem.type,
+												canvas: 'edit',
+											} );
+										},
+									},
+								],
+							}
+						);
+					}
+					break;
 			}
 		},
-		[ history ]
+		[ history, createSuccessNotice ]
 	);
 
 	const featureImageAltText = featuredMediaAltText

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

@@ -4,7 +4,6 @@
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { pencil } from '@wordpress/icons';
-import { getQueryArgs } from '@wordpress/url';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
@@ -17,31 +16,21 @@ import usePatternDetails from './use-pattern-details';
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import TemplateActions from '../template-actions';
-import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
-export default function SidebarNavigationScreenPattern() {
+export default function SidebarNavigationScreenPattern( { backPath } ) {
 	const history = useHistory();
 	const location = useLocation();
 	const {
 		params: { postType, postId },
 	} = location;
-	const { categoryType } = getQueryArgs( window.location.href );
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 
 	useInitEditedEntityFromURL();
 
 	const patternDetails = usePatternDetails( postType, postId );
 
-	// The absence of a category type in the query params for template parts
-	// indicates the user has arrived at the template part via the "manage all"
-	// page and the back button should return them to that list page.
-	const backPath =
-		! categoryType && postType === TEMPLATE_PART_POST_TYPE
-			? { path: '/wp_template_part/all' }
-			: { path: '/patterns' };
-
 	return (
 		<SidebarNavigationScreen
 			actions={

package/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menus.js

@@ -10,7 +10,9 @@ import TemplatePartNavigationMenu from './template-part-navigation-menu';
 import TemplatePartNavigationMenuList from './template-part-navigation-menu-list';
 
 export default function TemplatePartNavigationMenus( { menus } ) {
-	if ( ! menus.length ) return null;
+	if ( ! menus.length ) {
+		return null;
+	}
 
 	// if there is a single menu then render TemplatePartNavigationMenu
 	if ( menus.length === 1 ) {

package/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js

@@ -14,7 +14,7 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { useAddedBy } from '../page-templates-template-parts/hooks';
+import { useAddedBy } from '../page-templates/hooks';
 import useEditedEntityRecord from '../use-edited-entity-record';
 import useNavigationMenuContent from './use-navigation-menu-content';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';

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

@@ -11,9 +11,10 @@ export default function CategoryItem( {
 	isActive,
 	label,
 	type,
+	path = '/patterns',
 } ) {
 	const linkInfo = useLink( {
-		path: '/patterns',
+		path,
 		categoryType: type,
 		categoryId: id,
 	} );

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

@@ -5,32 +5,33 @@ import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
 } from '@wordpress/components';
-import { useViewportMatch } from '@wordpress/compose';
 import { getTemplatePartIcon } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
-import { getQueryArgs } from '@wordpress/url';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { file } from '@wordpress/icons';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import AddNewPattern from '../add-new-pattern';
-import SidebarNavigationItem from '../sidebar-navigation-item';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import CategoryItem from './category-item';
 import {
 	PATTERN_DEFAULT_CATEGORY,
 	PATTERN_TYPES,
 	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_PART_ALL_AREAS_CATEGORY,
 } from '../../utils/constants';
-import { useLink } from '../routes/link';
 import usePatternCategories from './use-pattern-categories';
 import useTemplatePartAreas from './use-template-part-areas';
-import { store as editSiteStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation } = unlock( routerPrivateApis );
 
 function CategoriesGroup( {
+	path,
 	templatePartAreas,
 	patternCategories,
 	currentCategory,
@@ -42,15 +43,16 @@ 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 ) }
 				icon={ getTemplatePartIcon() } /* no name, so it provides the fallback icon */
 				label={ __( 'All template parts' ) }
-				id={ 'all-parts' }
+				id={ TEMPLATE_PART_ALL_AREAS_CATEGORY }
 				type={ TEMPLATE_PART_POST_TYPE }
 				isActive={
-					currentCategory === 'all-parts' &&
+					currentCategory === TEMPLATE_PART_ALL_AREAS_CATEGORY &&
 					currentType === TEMPLATE_PART_POST_TYPE
 				}
 			/>
@@ -58,6 +60,7 @@ function CategoriesGroup( {
 				( [ area, { label, templateParts } ] ) => (
 					<CategoryItem
 						key={ area }
+						path={ path }
 						count={ templateParts?.length }
 						icon={ getTemplatePartIcon( area ) }
 						label={ label }
@@ -74,6 +77,7 @@ function CategoriesGroup( {
 			{ allPatterns && (
 				<CategoryItem
 					key={ allPatterns.name }
+					path={ path }
 					count={ allPatterns.count }
 					label={ allPatterns.label }
 					icon={ file }
@@ -89,6 +93,7 @@ function CategoriesGroup( {
 			{ otherPatterns.map( ( category ) => (
 				<CategoryItem
 					key={ category.name }
+					path={ path }
 					count={ category.count }
 					label={ category.label }
 					icon={ file }
@@ -105,9 +110,10 @@ function CategoriesGroup( {
 	);
 }
 
-export default function SidebarNavigationScreenPatterns() {
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const { categoryType, categoryId } = getQueryArgs( window.location.href );
+export default function SidebarNavigationScreenPatterns( { backPath } ) {
+	const {
+		params: { categoryType, categoryId, path },
+	} = useLocation();
 	const currentCategory = categoryId || PATTERN_DEFAULT_CATEGORY;
 	const currentType = categoryType || PATTERN_TYPES.theme;
 
@@ -118,28 +124,6 @@ export default function SidebarNavigationScreenPatterns() {
 		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
 		[]
 	);
-	const isTemplatePartsMode = useSelect( ( select ) => {
-		const settings = select( editSiteStore ).getSettings();
-		return !! settings.supportsTemplatePartsMode;
-	}, [] );
-
-	const templatePartsLink = useLink( {
-		path: '/wp_template_part/all',
-		// If a classic theme that supports template parts accessed
-		// the Patterns page directly, preserve that state in the URL.
-		didAccessPatternsPage:
-			! isBlockBasedTheme && isTemplatePartsMode ? 1 : undefined,
-	} );
-
-	const footer = ! isMobileViewport ? (
-		<ItemGroup>
-			{ ( isBlockBasedTheme || isTemplatePartsMode ) && (
-				<SidebarNavigationItem withChevron { ...templatePartsLink }>
-					{ __( 'Manage all template parts' ) }
-				</SidebarNavigationItem>
-			) }
-		</ItemGroup>
-	) : undefined;
 
 	return (
 		<SidebarNavigationScreen
@@ -148,23 +132,20 @@ export default function SidebarNavigationScreenPatterns() {
 			description={ __(
 				'Manage what patterns are available when editing the site.'
 			) }
+			backPath={ backPath }
 			actions={ <AddNewPattern /> }
-			footer={ footer }
 			content={
 				<>
-					{ isLoading && __( 'Loading patterns…' ) }
+					{ isLoading && __( 'Loading items…' ) }
 					{ ! isLoading && (
 						<>
 							{ ! hasTemplateParts && ! hasPatterns && (
 								<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
-									<Item>
-										{ __(
-											'No template parts or patterns found'
-										) }
-									</Item>
+									<Item>{ __( 'No items found' ) }</Item>
 								</ItemGroup>
 							) }
 							<CategoriesGroup
+								path={ path }
 								templatePartAreas={ templatePartAreas }
 								patternCategories={ patternCategories }
 								currentCategory={ currentCategory }

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

@@ -17,7 +17,7 @@ import useEditedEntityRecord from '../use-edited-entity-record';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
-import { useAddedBy } from '../page-templates-template-parts/hooks';
+import { useAddedBy } from '../page-templates/hooks';
 import TemplateActions from '../template-actions';
 import HomeTemplateDetails from './home-template-details';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
@@ -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/content.js

@@ -9,8 +9,9 @@ import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
  * Internal dependencies
  */
 import DataViewItem from '../sidebar-dataviews/dataview-item';
-import { useAddedBy } from '../page-templates-template-parts/hooks';
+import { useAddedBy } from '../page-templates/hooks';
 import { layout } from '@wordpress/icons';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 const EMPTY_ARRAY = [];
 
@@ -30,10 +31,9 @@ function TemplateDataviewItem( { template, isActive } ) {
 
 export default function DataviewsTemplatesSidebarContent( {
 	activeView,
-	postType,
 	title,
 } ) {
-	const { records } = useEntityRecords( 'postType', postType, {
+	const { records } = useEntityRecords( 'postType', TEMPLATE_POST_TYPE, {
 		per_page: -1,
 	} );
 	const firstItemPerAuthorText = useMemo( () => {

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

@@ -2,64 +2,33 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import { store as editSiteStore } from '../../store';
-import {
-	TEMPLATE_POST_TYPE,
-	TEMPLATE_PART_POST_TYPE,
-} from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 import DataviewsTemplatesSidebarContent from './content';
 
-const config = {
-	[ TEMPLATE_POST_TYPE ]: {
-		title: __( 'Manage templates' ),
-		description: __(
-			'Create new templates, or reset any customizations made to the templates supplied by your theme.'
-		),
-		contentTitle: __( 'All templates' ),
-	},
-	[ TEMPLATE_PART_POST_TYPE ]: {
-		title: __( 'Manage template parts' ),
-		description: __(
-			'Create new template parts, or reset any customizations made to the template parts supplied by your theme.'
-		),
-		backPath: { path: '/patterns' },
-		contentTitle: __( 'All template parts' ),
-	},
-};
-
 const { useLocation } = unlock( routerPrivateApis );
 
-export default function SidebarNavigationScreenTemplatesBrowse( { postType } ) {
+export default function SidebarNavigationScreenTemplatesBrowse( { backPath } ) {
 	const {
-		params: { didAccessPatternsPage, activeView = 'all' },
+		params: { activeView = 'all' },
 	} = useLocation();
 
-	const isTemplatePartsMode = useSelect( ( select ) => {
-		return !! select( editSiteStore ).getSettings()
-			.supportsTemplatePartsMode;
-	}, [] );
-
 	return (
 		<SidebarNavigationScreen
-			// If a classic theme that supports template parts has never
-			// accessed the Patterns page, return to the dashboard.
-			isRoot={ isTemplatePartsMode && ! didAccessPatternsPage }
-			title={ config[ postType ].title }
-			description={ config[ postType ].description }
-			backPath={ config[ postType ].backPath }
+			title={ __( 'Manage templates' ) }
+			description={ __(
+				'Create new templates, or reset any customizations made to the templates supplied by your theme.'
+			) }
+			backPath={ backPath }
 			content={
 				<DataviewsTemplatesSidebarContent
 					activeView={ activeView }
-					postType={ postType }
-					title={ config[ postType ].contentTitle }
+					title={ __( 'All templates' ) }
 				/>
 			}
 		/>

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/sync-state-with-url/use-init-edited-entity-from-url.js

@@ -226,10 +226,6 @@ function useResolveEditedEntityAndContext( { path, postId, postType } ) {
 		return { isReady: true, postType: 'wp_template', postId, context };
 	}
 
-	if ( path === '/wp_template_part/all' && postId ) {
-		return { isReady: true, postType: 'wp_template_part', postId, context };
-	}
-
 	if ( postTypesWithoutParentTemplate.includes( postType ) ) {
 		return { isReady: true, postType, postId, context };
 	}

package/src/components/template-actions/index.js

@@ -135,7 +135,7 @@ function ResetMenuItem( { template, onClose } ) {
 				onCancel={ () => setIsModalOpen( false ) }
 				confirmButtonText={ __( 'Reset' ) }
 			>
-				{ __( 'Rese to default and clear all customizations?' ) }
+				{ __( 'Reset to default and clear all customizations?' ) }
 			</ConfirmDialog>
 		</>
 	);

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 (