@wordpress/edit-site 5.13.0 → 5.15.0

package/src/components/save-panel/index.js

@@ -39,13 +39,19 @@ const EntitiesSavedStatesForPreview = ( { onClose } ) => {
 		activateSaveLabel = __( 'Activate' );
 	}
 
-	const { getTheme } = useSelect( coreStore );
-	const theme = getTheme( currentlyPreviewingTheme() );
+	const themeName = useSelect( ( select ) => {
+		const theme = select( coreStore ).getTheme(
+			currentlyPreviewingTheme()
+		);
+
+		return theme?.name?.rendered;
+	}, [] );
+
 	const additionalPrompt = (
 		<p>
 			{ sprintf(
-				'Saving your changes will change your active theme to  %1$s.',
-				theme?.name?.rendered
+				'Saving your changes will change your active theme to %s.',
+				themeName
 			) }
 		</p>
 	);

package/src/components/sidebar/index.js

@@ -12,9 +12,9 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
-import SidebarNavigationScreenLibrary from '../sidebar-navigation-screen-library';
 import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';
 import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template';
+import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
 import SidebarNavigationScreenPattern from '../sidebar-navigation-screen-pattern';
 import useSyncPathWithURL, {
 	getPathFromURL,
@@ -56,15 +56,15 @@ function SidebarScreens() {
 			<NavigatorScreen path="/:postType(wp_template)">
 				<SidebarNavigationScreenTemplates />
 			</NavigatorScreen>
-			<NavigatorScreen path="/library">
-				<SidebarNavigationScreenLibrary />
+			<NavigatorScreen path="/patterns">
+				<SidebarNavigationScreenPatterns />
+			</NavigatorScreen>
+			<NavigatorScreen path="/:postType(wp_template|wp_template_part)/all">
+				<SidebarNavigationScreenTemplatesBrowse />
 			</NavigatorScreen>
 			<NavigatorScreen path="/:postType(wp_template_part|wp_block)/:postId">
 				<SidebarNavigationScreenPattern />
 			</NavigatorScreen>
-			<NavigatorScreen path="/:postType(wp_template)/all">
-				<SidebarNavigationScreenTemplatesBrowse />
-			</NavigatorScreen>
 			<NavigatorScreen path="/:postType(wp_template)/:postId">
 				<SidebarNavigationScreenTemplate />
 			</NavigatorScreen>

package/src/components/sidebar-button/style.scss

@@ -19,6 +19,6 @@
 	&:focus,
 	&:not([aria-disabled="true"]):active,
 	&[aria-expanded="true"] {
-		color: $white;
+		color: $gray-100;
 	}
 }

package/src/components/sidebar-edit-mode/index.js

@@ -56,11 +56,13 @@ export function SidebarComplementaryAreaFills() {
 	useEffect( () => {
 		// Don't automatically switch tab when the sidebar is closed or when we
 		// are focused on page content.
-		if ( ! isEditorSidebarOpened || hasPageContentFocus ) {
+		if ( ! isEditorSidebarOpened ) {
 			return;
 		}
 		if ( hasBlockSelection ) {
-			enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
+			if ( ! hasPageContentFocus ) {
+				enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
+			}
 		} else {
 			enableComplementaryArea( STORE_NAME, SIDEBAR_TEMPLATE );
 		}

package/src/components/sidebar-edit-mode/page-panels/page-content.js

@@ -6,22 +6,24 @@ import {
 	store as blockEditorStore,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { PAGE_CONTENT_BLOCK_TYPES } from '../../page-content-focus-manager/constants';
 import { unlock } from '../../../lock-unlock';
 
 const { BlockQuickNavigation } = unlock( blockEditorPrivateApis );
 
 export default function PageContent() {
-	const clientIds = useSelect(
+	const clientIdsTree = useSelect(
 		( select ) =>
-			select( blockEditorStore ).__experimentalGetGlobalBlocksByName(
-				PAGE_CONTENT_BLOCK_TYPES
-			),
+			unlock( select( blockEditorStore ) ).getEnabledClientIdsTree(),
 		[]
 	);
+	const clientIds = useMemo(
+		() => clientIdsTree.map( ( { clientId } ) => clientId ),
+		[ clientIdsTree ]
+	);
 	return <BlockQuickNavigation clientIds={ clientIds } />;
 }

package/src/components/sidebar-edit-mode/page-panels/page-status.js

@@ -212,13 +212,10 @@ export default function PageStatus( {
 													} )
 												}
 												value={ password }
-												/* eslint-disable jsx-a11y/no-autofocus */
-												autoFocus={ ! password }
-												/* eslint-enable jsx-a11y/no-autofocus */
 												placeholder={ __(
-													'Enter a secure password'
+													'Use a secure password'
 												) }
-												type="password"
+												type="text"
 											/>
 										) }
 									</BaseControl>

package/src/components/sidebar-edit-mode/settings-header/index.js

@@ -18,6 +18,12 @@ import { STORE_NAME } from '../../../store/constants';
 import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from '../constants';
 import { store as editSiteStore } from '../../../store';
 
+const entityLabels = {
+	wp_navigation: __( 'Navigation' ),
+	wp_block: __( 'Pattern' ),
+	wp_template: __( 'Template' ),
+};
+
 const SettingsHeader = ( { sidebarName } ) => {
 	const { hasPageContentFocus, entityType } = useSelect( ( select ) => {
 		const { getEditedPostType, hasPageContentFocus: _hasPageContentFocus } =
@@ -29,8 +35,7 @@ const SettingsHeader = ( { sidebarName } ) => {
 		};
 	} );
 
-	const entityLabel =
-		entityType === 'wp_navigation' ? __( 'Navigation' ) : __( 'Template' );
+	const entityLabel = entityLabels[ entityType ] || entityLabels.wp_template;
 
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	const openTemplateSettings = () =>

package/src/components/sidebar-navigation-item/style.scss

@@ -9,27 +9,21 @@
 	&:hover,
 	&:focus,
 	&[aria-current] {
-		color: $white;
+		color: $gray-200;
 		background: $gray-800;
+
+		.edit-site-sidebar-navigation-item__drilldown-indicator {
+			fill: $gray-200;
+		}
 	}
 
 	&[aria-current] {
 		background: var(--wp-admin-theme-color);
+		color: $white;
 	}
 
 	.edit-site-sidebar-navigation-item__drilldown-indicator {
-		fill: $gray-700;
-	}
-
-	&:is(a) {
-		text-decoration: none;
-		display: flex;
-		align-items: center;
-
-		&:focus {
-			box-shadow: none;
-			outline: none;
-		}
+		fill: $gray-600;
 	}
 
 	&.with-suffix {

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

@@ -4,7 +4,6 @@
 import {
 	__experimentalHStack as HStack,
 	__experimentalHeading as Heading,
-	__experimentalNavigatorToParentButton as NavigatorToParentButton,
 	__experimentalUseNavigator as useNavigator,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
@@ -41,7 +40,7 @@ export default function SidebarNavigationScreen( {
 		};
 	}, [] );
 	const { getTheme } = useSelect( coreStore );
-	const { goTo } = useNavigator();
+	const navigator = useNavigator();
 	const theme = getTheme( currentlyPreviewingTheme() );
 	const icon = isRTL() ? chevronRight : chevronLeft;
 
@@ -58,17 +57,27 @@ export default function SidebarNavigationScreen( {
 					className="edit-site-sidebar-navigation-screen__title-icon"
 				>
 					{ ! isRoot && ! backPath && (
-						<NavigatorToParentButton
-							as={ SidebarButton }
-							icon={ isRTL() ? chevronRight : chevronLeft }
-							aria-label={ __( 'Back' ) }
+						<SidebarButton
+							onClick={ () => {
+								if ( navigator.location.isInitial ) {
+									navigator.goToParent( { replace: true } );
+								} else {
+									navigator.goBack();
+								}
+							} }
+							icon={ icon }
+							label={ __( 'Back' ) }
+							showTooltip={ false }
 						/>
 					) }
 					{ ! isRoot && backPath && (
 						<SidebarButton
-							onClick={ () => goTo( backPath, { isBack: true } ) }
+							onClick={ () =>
+								navigator.goTo( backPath, { isBack: true } )
+							}
 							icon={ icon }
 							label={ __( 'Back' ) }
+							showTooltip={ false }
 						/>
 					) }
 					{ isRoot && (
@@ -76,7 +85,7 @@ export default function SidebarNavigationScreen( {
 							icon={ icon }
 							label={
 								! isPreviewingTheme()
-									? __( 'Go back to the Dashboard' )
+									? __( 'Go to the Dashboard' )
 									: __( 'Go back to the theme showcase' )
 							}
 							href={
@@ -88,7 +97,7 @@ export default function SidebarNavigationScreen( {
 					) }
 					<Heading
 						className="edit-site-sidebar-navigation-screen__title"
-						color={ 'white' }
+						color={ '#e0e0e0' /* $gray-200 */ }
 						level={ 1 }
 						size={ 20 }
 					>

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

@@ -12,7 +12,6 @@
 }
 
 .edit-site-sidebar-navigation-screen__content {
-	color: $gray-400;
 	padding: 0 $grid-unit-20;
 
 	.components-item-group {
@@ -65,6 +64,8 @@
 .edit-site-sidebar-navigation-screen__title {
 	flex-grow: 1;
 	padding: $grid-unit-15 * 0.5 0 0 0;
+	overflow: hidden;
+	overflow-wrap: break-word;
 }
 
 .edit-site-sidebar-navigation-screen__actions {
@@ -97,6 +98,20 @@
 	border-top: 1px solid $gray-800;
 }
 
+.edit-site-sidebar__notice {
+	background: $gray-800;
+	color: $gray-300;
+	margin: $grid-unit-30 0;
+	&.is-dismissible {
+		padding-right: $grid-unit-10;
+	}
+	.components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):focus,
+	.components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):active,
+	.components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover {
+		color: $gray-100;
+	}
+}
+
 /* In general style overrides are discouraged.
  * This is a temporary solution to override the InputControl component's styles.
  * The `Theme` component will potentially be the more appropriate approach
@@ -106,7 +121,11 @@
 .edit-site-sidebar-navigation-screen__input-control {
 	width: 100%;
 	.components-input-control__container {
-		background: transparent;
+		background: $gray-800;
+
+		.components-button {
+			color: $gray-200 !important;
+		}
 	}
 	.components-input-control__input {
 		color: $gray-200 !important;

package/src/components/sidebar-navigation-screen-details-panel/style.scss

@@ -1,5 +1,5 @@
 .edit-site-sidebar-navigation-details-screen-panel {
-	margin-bottom: $grid-unit-30;
+	margin: $grid-unit-30 0;
 
 	&:last-of-type {
 		margin-bottom: 0;

package/src/components/sidebar-navigation-screen-global-styles/index.js

@@ -15,6 +15,8 @@ import { useViewportMatch } from '@wordpress/compose';
 import { BlockEditorProvider } from '@wordpress/block-editor';
 import { humanTimeDiff } from '@wordpress/date';
 import { useCallback } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -33,6 +35,24 @@ const noop = () => {};
 export function SidebarNavigationItemGlobalStyles( props ) {
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+	const { createNotice } = useDispatch( noticesStore );
+	const { set: setPreference } = useDispatch( preferencesStore );
+	const { get: getPrefference } = useSelect( preferencesStore );
+
+	const turnOffDistractionFreeMode = useCallback( () => {
+		const isDistractionFree = getPrefference(
+			editSiteStore.name,
+			'distractionFree'
+		);
+		if ( ! isDistractionFree ) {
+			return;
+		}
+		setPreference( editSiteStore.name, 'distractionFree', false );
+		createNotice( 'info', __( 'Distraction free mode turned off' ), {
+			isDismissible: true,
+			type: 'snackbar',
+		} );
+	}, [ createNotice, setPreference, getPrefference ] );
 	const hasGlobalStyleVariations = useSelect(
 		( select ) =>
 			!! select(
@@ -53,9 +73,10 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 		<SidebarNavigationItem
 			{ ...props }
 			onClick={ () => {
-				// switch to edit mode.
+				turnOffDistractionFreeMode();
+				// Switch to edit mode.
 				setCanvasMode( 'edit' );
-				// open global styles sidebar.
+				// Open global styles sidebar.
 				openGeneralSidebar( 'edit-site/global-styles' );
 			} }
 		/>
@@ -147,22 +168,41 @@ export default function SidebarNavigationScreenGlobalStyles() {
 	const { setCanvasMode, setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
+	const { createNotice } = useDispatch( noticesStore );
+	const { set: setPreference } = useDispatch( preferencesStore );
+	const { get: getPrefference } = useSelect( preferencesStore );
+	const { isViewMode, isStyleBookOpened } = useSelect( ( select ) => {
+		const { getCanvasMode, getEditorCanvasContainerView } = unlock(
+			select( editSiteStore )
+		);
+		return {
+			isViewMode: 'view' === getCanvasMode(),
+			isStyleBookOpened: 'style-book' === getEditorCanvasContainerView(),
+		};
+	}, [] );
 
-	const isStyleBookOpened = useSelect(
-		( select ) =>
-			'style-book' ===
-			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
-		[]
-	);
+	const turnOffDistractionFreeMode = useCallback( () => {
+		const isDistractionFree = getPrefference(
+			editSiteStore.name,
+			'distractionFree'
+		);
+		if ( ! isDistractionFree ) {
+			return;
+		}
+		setPreference( editSiteStore.name, 'distractionFree', false );
+		createNotice( 'info', __( 'Distraction free mode turned off' ), {
+			isDismissible: true,
+			type: 'snackbar',
+		} );
+	}, [ createNotice, setPreference, getPrefference ] );
 
-	const openGlobalStyles = useCallback(
-		async () =>
-			Promise.all( [
-				setCanvasMode( 'edit' ),
-				openGeneralSidebar( 'edit-site/global-styles' ),
-			] ),
-		[ setCanvasMode, openGeneralSidebar ]
-	);
+	const openGlobalStyles = useCallback( async () => {
+		turnOffDistractionFreeMode();
+		return Promise.all( [
+			setCanvasMode( 'edit' ),
+			openGeneralSidebar( 'edit-site/global-styles' ),
+		] );
+	}, [ setCanvasMode, openGeneralSidebar, turnOffDistractionFreeMode ] );
 
 	const openStyleBook = useCallback( async () => {
 		await openGlobalStyles();
@@ -223,7 +263,7 @@ export default function SidebarNavigationScreenGlobalStyles() {
 					</>
 				}
 			/>
-			{ isStyleBookOpened && ! isMobileViewport && (
+			{ isStyleBookOpened && ! isMobileViewport && isViewMode && (
 				<StyleBook
 					enableResizing={ false }
 					isSelected={ () => false }

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

@@ -20,6 +20,7 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
+import TemplatePartHint from './template-part-hint';
 
 export default function SidebarNavigationScreenMain() {
 	const { location } = useNavigator();
@@ -42,46 +43,49 @@ export default function SidebarNavigationScreenMain() {
 				'Customize the appearance of your website using the block editor.'
 			) }
 			content={
-				<ItemGroup>
-					<NavigatorButton
-						as={ SidebarNavigationItem }
-						path="/navigation"
-						withChevron
-						icon={ navigation }
-					>
-						{ __( 'Navigation' ) }
-					</NavigatorButton>
-					<SidebarNavigationItemGlobalStyles
-						withChevron
-						icon={ styles }
-					>
-						{ __( 'Styles' ) }
-					</SidebarNavigationItemGlobalStyles>
-					<NavigatorButton
-						as={ SidebarNavigationItem }
-						path="/page"
-						withChevron
-						icon={ page }
-					>
-						{ __( 'Pages' ) }
-					</NavigatorButton>
-					<NavigatorButton
-						as={ SidebarNavigationItem }
-						path="/wp_template"
-						withChevron
-						icon={ layout }
-					>
-						{ __( 'Templates' ) }
-					</NavigatorButton>
-					<NavigatorButton
-						as={ SidebarNavigationItem }
-						path="/library"
-						withChevron
-						icon={ symbol }
-					>
-						{ __( 'Library' ) }
-					</NavigatorButton>
-				</ItemGroup>
+				<>
+					<ItemGroup>
+						<NavigatorButton
+							as={ SidebarNavigationItem }
+							path="/navigation"
+							withChevron
+							icon={ navigation }
+						>
+							{ __( 'Navigation' ) }
+						</NavigatorButton>
+						<SidebarNavigationItemGlobalStyles
+							withChevron
+							icon={ styles }
+						>
+							{ __( 'Styles' ) }
+						</SidebarNavigationItemGlobalStyles>
+						<NavigatorButton
+							as={ SidebarNavigationItem }
+							path="/page"
+							withChevron
+							icon={ page }
+						>
+							{ __( 'Pages' ) }
+						</NavigatorButton>
+						<NavigatorButton
+							as={ SidebarNavigationItem }
+							path="/wp_template"
+							withChevron
+							icon={ layout }
+						>
+							{ __( 'Templates' ) }
+						</NavigatorButton>
+						<NavigatorButton
+							as={ SidebarNavigationItem }
+							path="/patterns"
+							withChevron
+							icon={ symbol }
+						>
+							{ __( 'Patterns' ) }
+						</NavigatorButton>
+					</ItemGroup>
+					<TemplatePartHint />
+				</>
 			}
 		/>
 	);

package/src/components/sidebar-navigation-screen-main/template-part-hint.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { Notice } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+const PREFERENCE_NAME = 'isTemplatePartMoveHintVisible';
+
+export default function TemplatePartHint() {
+	const showTemplatePartHint = useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', PREFERENCE_NAME ) ?? true,
+		[]
+	);
+
+	const { set: setPreference } = useDispatch( preferencesStore );
+	if ( ! showTemplatePartHint ) {
+		return null;
+	}
+
+	return (
+		<Notice
+			politeness="polite"
+			className="edit-site-sidebar__notice"
+			onRemove={ () => {
+				setPreference( 'core', PREFERENCE_NAME, false );
+			} }
+		>
+			{ __( 'Looking for template parts? Find them in "Patterns".' ) }
+		</Notice>
+	);
+}

package/src/components/sidebar-navigation-screen-navigation-menu/delete-modal.js

@@ -1,45 +1,24 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	Button,
-	Modal,
-} from '@wordpress/components';
+import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 export default function RenameModal( { onClose, onConfirm } ) {
 	return (
-		<Modal title={ __( 'Delete' ) } onRequestClose={ onClose }>
-			<form>
-				<VStack spacing="3">
-					<p>
-						{ __(
-							'Are you sure you want to delete this Navigation menu?'
-						) }
-					</p>
-					<HStack justify="right">
-						<Button variant="tertiary" onClick={ onClose }>
-							{ __( 'Cancel' ) }
-						</Button>
+		<ConfirmDialog
+			isOpen={ true }
+			onConfirm={ ( e ) => {
+				e.preventDefault();
+				onConfirm();
 
-						<Button
-							variant="primary"
-							type="submit"
-							onClick={ ( e ) => {
-								e.preventDefault();
-								onConfirm();
-
-								// Immediate close avoids ability to hit delete multiple times.
-								onClose();
-							} }
-						>
-							{ __( 'Delete' ) }
-						</Button>
-					</HStack>
-				</VStack>
-			</form>
-		</Modal>
+				// Immediate close avoids ability to hit delete multiple times.
+				onClose();
+			} }
+			onCancel={ onClose }
+			confirmButtonText={ __( 'Delete' ) }
+		>
+			{ __( 'Are you sure you want to delete this Navigation menu?' ) }
+		</ConfirmDialog>
 	);
 }

package/src/components/sidebar-navigation-screen-navigation-menu/edit-button.js

@@ -2,23 +2,20 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
 import { pencil } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
-import { unlock } from '../../lock-unlock';
-
-export default function EditButton() {
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+import { useLink } from '../routes/link';
 
+export default function EditButton( { postId } ) {
+	const linkInfo = useLink( {
+		postId,
+		postType: 'wp_navigation',
+		canvas: 'edit',
+	} );
 	return (
-		<SidebarButton
-			onClick={ () => setCanvasMode( 'edit' ) }
-			label={ __( 'Edit' ) }
-			icon={ pencil }
-		/>
+		<SidebarButton { ...linkInfo } label={ __( 'Edit' ) } icon={ pencil } />
 	);
 }