@wordpress/edit-site 5.32.0 → 5.34.0

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

@@ -23,6 +23,7 @@ import { memo } from '@wordpress/element';
 import { search, external } from '@wordpress/icons';
 import { store as commandsStore } from '@wordpress/commands';
 import { displayShortcut } from '@wordpress/keycodes';
+import { filterURLForDisplay } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -44,13 +45,16 @@ const SiteHub = memo( ( { isTransparent, className } ) => {
 				getSite,
 				getUnstableBase, // Site index.
 			} = select( coreStore );
-
+			const _site = getSite();
 			return {
 				canvasMode: getCanvasMode(),
 				dashboardLink:
 					getSettings().__experimentalDashboardLink || 'index.php',
 				homeUrl: getUnstableBase()?.home,
-				siteTitle: getSite()?.title,
+				siteTitle:
+					! _site?.title && !! _site?.url
+						? filterURLForDisplay( _site?.url )
+						: _site?.title,
 			};
 		},
 		[]
@@ -97,108 +101,94 @@ const SiteHub = memo( ( { isTransparent, className } ) => {
 				ease: 'easeOut',
 			} }
 		>
-			<HStack
-				justify="space-between"
-				alignment="center"
-				className="edit-site-site-hub__container"
-			>
-				<HStack
-					justify="flex-start"
-					className="edit-site-site-hub__text-content"
-					spacing="0"
+			<HStack justify="flex-start" spacing="0">
+				<motion.div
+					className={ classnames(
+						'edit-site-site-hub__view-mode-toggle-container',
+						{
+							'has-transparent-background': isTransparent,
+						}
+					) }
+					layout
+					transition={ {
+						type: 'tween',
+						duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
+						ease: 'easeOut',
+					} }
 				>
-					<motion.div
-						className={ classnames(
-							'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"
 					>
-						<Button
-							{ ...siteIconButtonProps }
-							className="edit-site-layout__view-mode-toggle"
-						>
-							<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',
-								} }
-							>
-								<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
-							</motion.div>
-						</Button>
-					</motion.div>
-
-					<AnimatePresence>
 						<motion.div
-							layout={ canvasMode === 'edit' }
+							initial={ false }
 							animate={ {
-								opacity: canvasMode === 'view' ? 1 : 0,
+								scale: canvasMode === 'view' ? 0.5 : 1,
 							} }
-							exit={ {
-								opacity: 0,
+							whileHover={ {
+								scale: canvasMode === 'view' ? 0.5 : 0.96,
 							} }
-							className={ classnames(
-								'edit-site-site-hub__site-title',
-								{ 'is-transparent': isTransparent }
-							) }
 							transition={ {
 								type: 'tween',
-								duration: disableMotion ? 0 : 0.2,
+								duration: disableMotion
+									? 0
+									: HUB_ANIMATION_DURATION,
 								ease: 'easeOut',
-								delay: canvasMode === 'view' ? 0.1 : 0,
 							} }
 						>
-							{ decodeEntities( siteTitle ) }
+							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
 						</motion.div>
-					</AnimatePresence>
+					</Button>
+				</motion.div>
+
+				<AnimatePresence initial={ false }>
 					{ canvasMode === 'view' && (
-						<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={ classnames(
-								'edit-site-site-hub__site-view-link',
-								{ 'is-transparent': isTransparent }
-							) }
-						/>
+						<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,
+							} }
+						>
+							<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>
+						</HStack>
 					) }
-				</HStack>
-				{ canvasMode === 'view' && (
-					<Button
-						className={ classnames(
-							'edit-site-site-hub_toggle-command-center',
-							{ 'is-transparent': isTransparent }
-						) }
-						icon={ search }
-						onClick={ () => openCommandCenter() }
-						label={ __( 'Open command palette' ) }
-						shortcut={ displayShortcut.primary( 'k' ) }
-					/>
-				) }
+				</AnimatePresence>
 			</HStack>
 		</motion.div>
 	);

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

@@ -3,61 +3,41 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: $grid-unit-10;
-
-	.edit-site-site-hub__container {
-		gap: 0;
-	}
-
-	.edit-site-site-hub__site-title,
-	.edit-site-site-hub__site-view-link,
-	.edit-site-site-hub_toggle-command-center {
-		transition: opacity ease 0.1s;
-
-		&.is-transparent {
-			opacity: 0 !important;
-		}
-	}
-
-	.edit-site-site-hub__site-view-link {
-		flex-grow: 0;
-		margin-right: var(--wp-admin-border-width-focus);
-		svg {
-			fill: $gray-200;
-		}
-	}
 }
 
-.edit-site-site-hub__post-type {
-	opacity: 0.6;
+.edit-site-site-hub__actions {
+	flex-shrink: 0;
 }
 
 .edit-site-site-hub__view-mode-toggle-container {
 	height: $header-height;
 	width: $header-height;
 	flex-shrink: 0;
-	background: $gray-900;
 
-	&.has-transparent-background {
-		background: transparent;
+	.edit-site-layout__view-mode-toggle-icon {
+		background: $gray-900;
 	}
-}
 
-.edit-site-site-hub__text-content {
-	// Necessary for the ellipsis to work.
-	overflow: hidden;
+	&.has-transparent-background .edit-site-layout__view-mode-toggle-icon {
+		background: transparent;
+	}
 }
 
 .edit-site-site-hub__title {
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;
-}
-
-.edit-site-site-hub__site-title {
 	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;
+	}
+}
+
 .edit-site-site-hub_toggle-command-center {
 	color: $gray-200;
 

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

@@ -28,42 +28,48 @@ const postTypesWithoutParentTemplate = [
 ];
 
 function useResolveEditedEntityAndContext( { path, postId, postType } ) {
-	const { hasLoadedAllDependencies, homepageId, url, frontPageTemplateId } =
-		useSelect( ( select ) => {
-			const { getSite, getUnstableBase, getEntityRecords } =
-				select( coreDataStore );
-			const siteData = getSite();
-			const base = getUnstableBase();
-			const templates = getEntityRecords(
-				'postType',
-				TEMPLATE_POST_TYPE,
-				{
-					per_page: -1,
-				}
+	const {
+		hasLoadedAllDependencies,
+		homepageId,
+		postsPageId,
+		url,
+		frontPageTemplateId,
+	} = useSelect( ( select ) => {
+		const { getSite, getUnstableBase, getEntityRecords } =
+			select( coreDataStore );
+		const siteData = getSite();
+		const base = getUnstableBase();
+		const templates = getEntityRecords( 'postType', TEMPLATE_POST_TYPE, {
+			per_page: -1,
+		} );
+		const _homepageId =
+			siteData?.show_on_front === 'page' &&
+			[ 'number', 'string' ].includes( typeof siteData.page_on_front ) &&
+			!! +siteData.page_on_front // We also need to check if it's not zero(`0`).
+				? siteData.page_on_front.toString()
+				: null;
+		const _postsPageId =
+			siteData?.show_on_front === 'page' &&
+			[ 'number', 'string' ].includes( typeof siteData.page_for_posts )
+				? siteData.page_for_posts.toString()
+				: null;
+		let _frontPageTemplateId;
+		if ( templates ) {
+			const frontPageTemplate = templates.find(
+				( t ) => t.slug === 'front-page'
 			);
-			let _frontPateTemplateId;
-			if ( templates ) {
-				const frontPageTemplate = templates.find(
-					( t ) => t.slug === 'front-page'
-				);
-				_frontPateTemplateId = frontPageTemplate
-					? frontPageTemplate.id
-					: false;
-			}
-
-			return {
-				hasLoadedAllDependencies: !! base && !! siteData,
-				homepageId:
-					siteData?.show_on_front === 'page' &&
-					[ 'number', 'string' ].includes(
-						typeof siteData.page_on_front
-					)
-						? siteData.page_on_front.toString()
-						: null,
-				url: base?.home,
-				frontPageTemplateId: _frontPateTemplateId,
-			};
-		}, [] );
+			_frontPageTemplateId = frontPageTemplate
+				? frontPageTemplate.id
+				: false;
+		}
+		return {
+			hasLoadedAllDependencies: !! base && !! siteData,
+			homepageId: _homepageId,
+			postsPageId: _postsPageId,
+			url: base?.home,
+			frontPageTemplateId: _frontPageTemplateId,
+		};
+	}, [] );
 
 	/**
 	 * This is a hook that recreates the logic to resolve a template for a given WordPress postID postTypeId
@@ -114,6 +120,14 @@ function useResolveEditedEntityAndContext( { path, postId, postType } ) {
 				if ( ! editedEntity ) {
 					return undefined;
 				}
+				// Check if the current page is the posts page.
+				if (
+					postTypeToResolve === 'page' &&
+					postsPageId === postIdToResolve
+				) {
+					return __experimentalGetTemplateForLink( editedEntity.link )
+						?.id;
+				}
 				// First see if the post/page has an assigned template and fetch it.
 				const currentTemplateSlug = editedEntity.template;
 				if ( currentTemplateSlug ) {
@@ -177,6 +191,7 @@ function useResolveEditedEntityAndContext( { path, postId, postType } ) {
 		},
 		[
 			homepageId,
+			postsPageId,
 			hasLoadedAllDependencies,
 			url,
 			postId,
@@ -211,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

@@ -21,7 +21,7 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { store as editSiteStore } from '../../store';
 import isTemplateRemovable from '../../utils/is-template-removable';
 import isTemplateRevertable from '../../utils/is-template-revertable';
-import RenameMenuItem from './rename-menu-item';
+import RenamePostMenuItem from '../rename-post-menu-item';
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 export default function TemplateActions( {
@@ -55,8 +55,8 @@ export default function TemplateActions( {
 				<MenuGroup>
 					{ isRemovable && (
 						<>
-							<RenameMenuItem
-								template={ template }
+							<RenamePostMenuItem
+								post={ template }
 								onClose={ onClose }
 							/>
 							<DeleteMenuItem
@@ -98,7 +98,7 @@ function ResetMenuItem( { template, onClose } ) {
 			createSuccessNotice(
 				sprintf(
 					/* translators: The template/part's name. */
-					__( '"%s" reverted.' ),
+					__( '"%s" reset.' ),
 					decodeEntities( template.title.rendered )
 				),
 				{
@@ -123,11 +123,8 @@ function ResetMenuItem( { template, onClose } ) {
 	}
 	return (
 		<>
-			<MenuItem
-				info={ __( 'Use the template as supplied by the theme.' ) }
-				onClick={ () => setIsModalOpen( true ) }
-			>
-				{ __( 'Clear customizations' ) }
+			<MenuItem onClick={ () => setIsModalOpen( true ) }>
+				{ __( 'Reset' ) }
 			</MenuItem>
 			<ConfirmDialog
 				isOpen={ isModalOpen }
@@ -136,9 +133,9 @@ function ResetMenuItem( { template, onClose } ) {
 					onClose();
 				} }
 				onCancel={ () => setIsModalOpen( false ) }
-				confirmButtonText={ __( 'Clear' ) }
+				confirmButtonText={ __( 'Reset' ) }
 			>
-				{ __( 'Are you sure you want to clear these customizations?' ) }
+				{ __( 'Reset to default and clear all customizations?' ) }
 			</ConfirmDialog>
 		</>
 	);

package/src/components/welcome-guide/style.scss

@@ -1,7 +1,7 @@
 .edit-site-welcome-guide {
 	width: 312px;
 
-	&.guide-editor .edit-site-welcome-guide__image
+	&.guide-editor .edit-site-welcome-guide__image,
 	&.guide-styles .edit-site-welcome-guide__image {
 		background: #00a0d2;
 	}

package/src/components/welcome-guide/styles.js

@@ -4,22 +4,23 @@
 import { useDispatch, useSelect } from '@wordpress/data';
 import { ExternalLink, Guide } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { store as interfaceStore } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import WelcomeGuideImage from './image';
-import { store as editSiteStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { interfaceStore } = unlock( editorPrivateApis );
 
 export default function WelcomeGuideStyles() {
 	const { toggle } = useDispatch( preferencesStore );
 
 	const { isActive, isStylesOpen } = useSelect( ( select ) => {
-		const sidebar = select( interfaceStore ).getActiveComplementaryArea(
-			editSiteStore.name
-		);
+		const sidebar =
+			select( interfaceStore ).getActiveComplementaryArea( 'core' );
 
 		return {
 			isActive: !! select( preferencesStore ).get(

package/src/deprecated.js

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	PluginMoreMenuItem as EditorPluginMoreMenuItem,
+	PluginSidebar as EditorPluginSidebar,
+	PluginSidebarMoreMenuItem as EditorPluginSidebarMoreMenuItem,
+} from '@wordpress/editor';
+import deprecated from '@wordpress/deprecated';
+
+const deprecateSlot = ( name ) => {
+	deprecated( `wp.editPost.${ name }`, {
+		since: '6.6',
+		alternative: `wp.editor.${ name }`,
+	} );
+};
+
+/* eslint-disable jsdoc/require-param */
+/**
+ * @see PluginMoreMenuItem in @wordpress/editor package.
+ */
+export function PluginMoreMenuItem( props ) {
+	deprecateSlot( 'PluginMoreMenuItem' );
+	return <EditorPluginMoreMenuItem { ...props } />;
+}
+
+/**
+ * @see PluginSidebar in @wordpress/editor package.
+ */
+export function PluginSidebar( props ) {
+	deprecateSlot( 'PluginSidebar' );
+	return <EditorPluginSidebar { ...props } />;
+}
+
+/**
+ * @see PluginSidebarMoreMenuItem in @wordpress/editor package.
+ */
+export function PluginSidebarMoreMenuItem( props ) {
+	deprecateSlot( 'PluginSidebarMoreMenuItem' );
+	return <EditorPluginSidebarMoreMenuItem { ...props } />;
+}
+/* eslint-enable jsdoc/require-param */

package/src/hooks/commands/use-edit-mode-commands.js

@@ -13,14 +13,15 @@ import {
 	drawerLeft,
 	drawerRight,
 	blockDefault,
-	keyboard,
 	symbol,
 } from '@wordpress/icons';
 import { useCommandLoader } from '@wordpress/commands';
 import { decodeEntities } from '@wordpress/html-entities';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { store as interfaceStore } from '@wordpress/interface';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -29,13 +30,12 @@ import { store as editSiteStore } from '../../store';
 import useEditedEntityRecord from '../../components/use-edited-entity-record';
 import isTemplateRemovable from '../../utils/is-template-removable';
 import isTemplateRevertable from '../../utils/is-template-revertable';
-import { KEYBOARD_SHORTCUT_HELP_MODAL_NAME } from '../../components/keyboard-shortcut-help-modal';
-import { PREFERENCES_MODAL_NAME } from '../../components/preferences-modal';
 import { PATTERN_MODALS } from '../../components/pattern-modal';
 import { unlock } from '../../lock-unlock';
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 import { useLink } from '../../components/routes/link';
 
+const { interfaceStore } = unlock( editorPrivateApis );
 const { useHistory } = unlock( routerPrivateApis );
 
 function usePageContentFocusCommands() {
@@ -154,9 +154,7 @@ function useManipulateDocumentCommands() {
 						decodeEntities( template.title )
 				  );
 		const path =
-			template.type === TEMPLATE_POST_TYPE
-				? '/wp_template'
-				: '/wp_template_part/all';
+			template.type === TEMPLATE_POST_TYPE ? '/wp_template' : '/patterns';
 		commands.push( {
 			name: 'core/remove-template',
 			label,
@@ -184,12 +182,10 @@ function useEditUICommands() {
 	const { canvasMode, activeSidebar } = useSelect( ( select ) => {
 		return {
 			canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
-			activeSidebar: select( interfaceStore ).getActiveComplementaryArea(
-				editSiteStore.name
-			),
+			activeSidebar:
+				select( interfaceStore ).getActiveComplementaryArea( 'core' ),
 		};
 	}, [] );
-	const { openModal } = useDispatch( interfaceStore );
 
 	if ( canvasMode !== 'edit' ) {
 		return { isLoading: false, commands: [] };
@@ -203,10 +199,10 @@ function useEditUICommands() {
 		icon: isRTL() ? drawerLeft : drawerRight,
 		callback: ( { close } ) => {
 			close();
-			if ( activeSidebar === 'edit-site/template' ) {
+			if ( activeSidebar === 'edit-post/document' ) {
 				closeGeneralSidebar();
 			} else {
-				openGeneralSidebar( 'edit-site/template' );
+				openGeneralSidebar( 'edit-post/document' );
 			}
 		},
 	} );
@@ -217,31 +213,14 @@ function useEditUICommands() {
 		icon: blockDefault,
 		callback: ( { close } ) => {
 			close();
-			if ( activeSidebar === 'edit-site/block-inspector' ) {
+			if ( activeSidebar === 'edit-site/block' ) {
 				closeGeneralSidebar();
 			} else {
-				openGeneralSidebar( 'edit-site/block-inspector' );
+				openGeneralSidebar( 'edit-site/block' );
 			}
 		},
 	} );
 
-	commands.push( {
-		name: 'core/open-preferences',
-		label: __( 'Editor preferences' ),
-		callback: () => {
-			openModal( PREFERENCES_MODAL_NAME );
-		},
-	} );
-
-	commands.push( {
-		name: 'core/open-shortcut-help',
-		label: __( 'Keyboard shortcuts' ),
-		icon: keyboard,
-		callback: () => {
-			openModal( KEYBOARD_SHORTCUT_HELP_MODAL_NAME );
-		},
-	} );
-
 	return {
 		isLoading: false,
 		commands,