@wordpress/edit-site 5.3.4 → 5.3.6

package/src/components/sidebar/index.js

@@ -1,10 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { memo } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import { __experimentalNavigatorProvider as NavigatorProvider } from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
+import { memo, useRef } from '@wordpress/element';
+import {
+	__experimentalNavigatorProvider as NavigatorProvider,
+	__experimentalNavigatorScreen as NavigatorScreen,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -12,54 +13,58 @@ import { store as coreStore } from '@wordpress/core-data';
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
 import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';
 import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template';
-import useSyncPathWithURL from '../sync-state-with-url/use-sync-path-with-url';
+import useSyncPathWithURL, {
+	getPathFromURL,
+} from '../sync-state-with-url/use-sync-path-with-url';
 import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
 import SaveButton from '../save-button';
 import SidebarNavigationScreenNavigationItem from '../sidebar-navigation-screen-navigation-item';
+import { useLocation } from '../routes';
 
 function SidebarScreens() {
 	useSyncPathWithURL();
 
 	return (
 		<>
-			<SidebarNavigationScreenMain />
-			<SidebarNavigationScreenNavigationMenus />
-			<SidebarNavigationScreenNavigationItem />
-			<SidebarNavigationScreenTemplates postType="wp_template" />
-			<SidebarNavigationScreenTemplates postType="wp_template_part" />
-			<SidebarNavigationScreenTemplate postType="wp_template" />
-			<SidebarNavigationScreenTemplate postType="wp_template_part" />
-			<SidebarNavigationScreenTemplatesBrowse postType="wp_template" />
-			<SidebarNavigationScreenTemplatesBrowse postType="wp_template_part" />
+			<NavigatorScreen path="/">
+				<SidebarNavigationScreenMain />
+			</NavigatorScreen>
+			<NavigatorScreen path="/navigation">
+				<SidebarNavigationScreenNavigationMenus />
+			</NavigatorScreen>
+			<NavigatorScreen path="/navigation/:postType/:postId">
+				<SidebarNavigationScreenNavigationItem />
+			</NavigatorScreen>
+			<NavigatorScreen path="/:postType(wp_template|wp_template_part)">
+				<SidebarNavigationScreenTemplates />
+			</NavigatorScreen>
+			<NavigatorScreen path="/:postType(wp_template|wp_template_part)/all">
+				<SidebarNavigationScreenTemplatesBrowse />
+			</NavigatorScreen>
+			<NavigatorScreen path="/:postType(wp_template|wp_template_part)/:postId">
+				<SidebarNavigationScreenTemplate />
+			</NavigatorScreen>
 		</>
 	);
 }
 
 function Sidebar() {
-	const { isDirty } = useSelect( ( select ) => {
-		const { __experimentalGetDirtyEntityRecords } = select( coreStore );
-		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
-		// The currently selected entity to display.
-		// Typically template or template part in the site editor.
-		return {
-			isDirty: dirtyEntityRecords.length > 0,
-		};
-	}, [] );
+	const { params: urlParams } = useLocation();
+	const initialPath = useRef( getPathFromURL( urlParams ) );
 
 	return (
 		<>
 			<NavigatorProvider
 				className="edit-site-sidebar__content"
-				initialPath="/"
+				initialPath={ initialPath.current }
 			>
 				<SidebarScreens />
 			</NavigatorProvider>
-			{ isDirty && (
-				<div className="edit-site-sidebar__footer">
-					<SaveButton />
-				</div>
-			) }
+
+			<div className="edit-site-sidebar__footer">
+				<SaveButton showTooltip={ false } />
+			</div>
 		</>
 	);
 }

package/src/components/sidebar-button/index.js

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+
+export default function SidebarButton( props ) {
+	return (
+		<Button
+			{ ...props }
+			className={ classnames(
+				'edit-site-sidebar-button',
+				props.className
+			) }
+		/>
+	);
+}

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

@@ -0,0 +1,23 @@
+.edit-site-sidebar-button {
+	color: $gray-200;
+	flex-shrink: 0;
+
+	// Focus (resets default button focus and use focus-visible).
+	&:focus:not(:disabled) {
+		box-shadow: none;
+		outline: none;
+	}
+	&:focus-visible:not(:disabled) {
+		box-shadow:
+			0 0 0 var(--wp-admin-border-width-focus)
+			var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+		outline: 3px solid transparent;
+	}
+
+	&:hover,
+	&:focus-visible,
+	&:focus,
+	&:not([aria-disabled="true"]):active {
+		color: $white;
+	}
+}

package/src/components/sidebar-edit-mode/global-styles-sidebar.js

@@ -37,18 +37,14 @@ export default function GlobalStylesSidebar() {
 			closeLabel={ __( 'Close Styles sidebar' ) }
 			panelClassName="edit-site-global-styles-sidebar__panel"
 			header={
-				<Flex>
-					<FlexBlock>
+				<Flex className="edit-site-global-styles-sidebar__header">
+					<FlexBlock style={ { minWidth: 'min-content' } }>
 						<strong>{ __( 'Styles' ) }</strong>
 					</FlexBlock>
 					<FlexItem>
 						<Button
 							icon={ seen }
-							label={
-								isStyleBookOpened
-									? __( 'Close Style Book' )
-									: __( 'Open Style Book' )
-							}
+							label={ __( 'Style Book' ) }
 							isPressed={ isStyleBookOpened }
 							disabled={ editorMode !== 'visual' }
 							onClick={ () => {

package/src/components/sidebar-edit-mode/style.scss

@@ -83,3 +83,19 @@
 .edit-site-global-styles-sidebar hr {
 	margin: 0;
 }
+
+.show-icon-labels {
+	.edit-site-global-styles-sidebar__header {
+		.components-button.has-icon {
+			// Hide the button icons when labels are set to display...
+			svg {
+				display: none;
+			}
+			// ... and display labels.
+			&::after {
+				content: attr(aria-label);
+				font-size: $helptext-font-size;
+			}
+		}
+	}
+}

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

@@ -5,8 +5,6 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	__experimentalNavigatorToParentButton as NavigatorToParentButton,
-	Button,
-	__experimentalNavigatorScreen as NavigatorScreen,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
@@ -17,9 +15,10 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../private-apis';
+import SidebarButton from '../sidebar-button';
 
 export default function SidebarNavigationScreen( {
-	path,
+	isRoot,
 	title,
 	actions,
 	content,
@@ -32,41 +31,35 @@ export default function SidebarNavigationScreen( {
 	}, [] );
 
 	return (
-		<NavigatorScreen
-			className="edit-site-sidebar-navigation-screen"
-			path={ path }
-		>
-			<VStack spacing={ 2 }>
-				<HStack
-					spacing={ 4 }
-					justify="flex-start"
-					className="edit-site-sidebar-navigation-screen__title-icon"
-				>
-					{ path !== '/' ? (
-						<NavigatorToParentButton
-							className="edit-site-sidebar-navigation-screen__back"
-							icon={ isRTL() ? chevronRight : chevronLeft }
-							aria-label={ __( 'Back' ) }
-						/>
-					) : (
-						<Button
-							className="edit-site-sidebar-navigation-screen__back"
-							icon={ isRTL() ? chevronRight : chevronLeft }
-							aria-label={ __( 'Navigate to the Dashboard' ) }
-							href={ dashboardLink || 'index.php' }
-							label={ __( 'Dashboard' ) }
-						/>
-					) }
-					<h2 className="edit-site-sidebar-navigation-screen__title">
-						{ title }
-					</h2>
-					{ actions }
-				</HStack>
+		<VStack spacing={ 2 }>
+			<HStack
+				spacing={ 4 }
+				justify="flex-start"
+				className="edit-site-sidebar-navigation-screen__title-icon"
+			>
+				{ ! isRoot ? (
+					<NavigatorToParentButton
+						as={ SidebarButton }
+						icon={ isRTL() ? chevronRight : chevronLeft }
+						aria-label={ __( 'Back' ) }
+					/>
+				) : (
+					<SidebarButton
+						icon={ isRTL() ? chevronRight : chevronLeft }
+						aria-label={ __( 'Navigate to the Dashboard' ) }
+						href={ dashboardLink || 'index.php' }
+						label={ __( 'Dashboard' ) }
+					/>
+				) }
+				<h2 className="edit-site-sidebar-navigation-screen__title">
+					{ title }
+				</h2>
+				{ actions }
+			</HStack>
 
-				<nav className="edit-site-sidebar-navigation-screen__content">
-					{ content }
-				</nav>
-			</VStack>
-		</NavigatorScreen>
+			<nav className="edit-site-sidebar-navigation-screen__content">
+				{ content }
+			</nav>
+		</VStack>
 	);
 }

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

@@ -23,17 +23,9 @@
 
 .edit-site-sidebar-navigation-screen__title {
 	font-size: calc(1.56 * 13px);
+	line-height: normal;
 	font-weight: 500;
 	flex-grow: 1;
 	color: $white;
 	margin: 0;
 }
-
-.edit-site-sidebar-navigation-screen__back {
-	color: $gray-200;
-
-	&:hover,
-	&:not([aria-disabled="true"]):active {
-		color: $white;
-	}
-}

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

@@ -29,7 +29,7 @@ export default function SidebarNavigationScreenMain() {
 
 	return (
 		<SidebarNavigationScreen
-			path="/"
+			isRoot
 			title={ __( 'Design' ) }
 			content={
 				<ItemGroup>
@@ -45,7 +45,7 @@ export default function SidebarNavigationScreenMain() {
 					) }
 					<NavigatorButton
 						as={ SidebarNavigationItem }
-						path="/templates"
+						path="/wp_template"
 						withChevron
 						icon={ layout }
 					>
@@ -53,7 +53,7 @@ export default function SidebarNavigationScreenMain() {
 					</NavigatorButton>
 					<NavigatorButton
 						as={ SidebarNavigationItem }
-						path="/template-parts"
+						path="/wp_template_part"
 						withChevron
 						icon={ symbolFilled }
 					>

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

@@ -3,9 +3,10 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { Button } from '@wordpress/components';
+import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
+import { pencil } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -13,36 +14,39 @@ import { decodeEntities } from '@wordpress/html-entities';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import { unlock } from '../../private-apis';
 import { store as editSiteStore } from '../../store';
+import SidebarButton from '../sidebar-button';
 
 export default function SidebarNavigationScreenNavigationItem() {
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+	const {
+		params: { postType, postId },
+	} = useNavigator();
 
-	const { post } = useSelect( ( select ) => {
-		const { getEditedPostContext } = select( editSiteStore );
-		const { getEntityRecord } = select( coreStore );
-		const { postType, postId } = getEditedPostContext() ?? {};
+	const { post } = useSelect(
+		( select ) => {
+			const { getEntityRecord } = select( coreStore );
 
-		// The currently selected entity to display.
-		// Typically template or template part in the site editor.
-		return {
-			post:
-				postId && postType
-					? getEntityRecord( 'postType', postType, postId )
-					: null,
-		};
-	}, [] );
+			// The currently selected entity to display.
+			// Typically template or template part in the site editor.
+			return {
+				post:
+					postId && postType
+						? getEntityRecord( 'postType', postType, postId )
+						: null,
+			};
+		},
+		[ postType, postId ]
+	);
 
 	return (
 		<SidebarNavigationScreen
-			path="/navigation/single"
 			title={ post ? decodeEntities( post?.title?.rendered ) : null }
 			actions={
-				<Button
-					variant="primary"
+				<SidebarButton
 					onClick={ () => setCanvasMode( 'edit' ) }
-				>
-					{ __( 'Edit' ) }
-				</Button>
+					label={ __( 'Edit' ) }
+					icon={ pencil }
+				/>
 			}
 			content={
 				post ? decodeEntities( post?.description?.rendered ) : null

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

@@ -25,7 +25,6 @@ export default function SidebarNavigationScreenNavigationMenus() {
 				history.push( {
 					postType: attributes.type,
 					postId: attributes.id,
-					path: '/navigation/single',
 				} );
 			}
 		},
@@ -33,7 +32,6 @@ export default function SidebarNavigationScreenNavigationMenus() {
 	);
 	return (
 		<SidebarNavigationScreen
-			path="/navigation"
 			title={ __( 'Navigation' ) }
 			content={
 				<div className="edit-site-sidebar-navigation-screen-navigation-menus">

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

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
-import { Button } from '@wordpress/components';
+import { pencil } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -12,19 +12,9 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import useEditedEntityRecord from '../use-edited-entity-record';
 import { unlock } from '../../private-apis';
 import { store as editSiteStore } from '../../store';
+import SidebarButton from '../sidebar-button';
 
-const config = {
-	wp_template: {
-		path: '/templates/single',
-	},
-	wp_template_part: {
-		path: '/template-parts/single',
-	},
-};
-
-export default function SidebarNavigationScreenTemplate( {
-	postType = 'wp_template',
-} ) {
+export default function SidebarNavigationScreenTemplate() {
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const { getDescription, getTitle, record } = useEditedEntityRecord();
 	let description = getDescription();
@@ -36,15 +26,13 @@ export default function SidebarNavigationScreenTemplate( {
 
 	return (
 		<SidebarNavigationScreen
-			path={ config[ postType ].path }
 			title={ getTitle() }
 			actions={
-				<Button
-					variant="primary"
+				<SidebarButton
 					onClick={ () => setCanvasMode( 'edit' ) }
-				>
-					{ __( 'Edit' ) }
-				</Button>
+					label={ __( 'Edit' ) }
+					icon={ pencil }
+				/>
 			}
 			content={ description ? <p>{ description }</p> : undefined }
 		/>

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

@@ -4,9 +4,11 @@
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
+	__experimentalUseNavigator as useNavigator,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useEntityRecords } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useViewportMatch } from '@wordpress/compose';
 
@@ -17,10 +19,11 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import { useLink } from '../routes/link';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import AddNewTemplate from '../add-new-template';
+import { store as editSiteStore } from '../../store';
+import SidebarButton from '../sidebar-button';
 
 const config = {
 	wp_template: {
-		path: '/templates',
 		labels: {
 			title: __( 'Templates' ),
 			loading: __( 'Loading templates' ),
@@ -29,7 +32,6 @@ const config = {
 		},
 	},
 	wp_template_part: {
-		path: '/template-parts',
 		labels: {
 			title: __( 'Template parts' ),
 			loading: __( 'Loading template parts' ),
@@ -43,15 +45,20 @@ const TemplateItem = ( { postType, postId, ...props } ) => {
 	const linkInfo = useLink( {
 		postType,
 		postId,
-		path: config[ postType ].path + '/single',
 	} );
 	return <SidebarNavigationItem { ...linkInfo } { ...props } />;
 };
 
-export default function SidebarNavigationScreenTemplates( {
-	postType = 'wp_template',
-} ) {
+export default function SidebarNavigationScreenTemplates() {
+	const {
+		params: { postType },
+	} = useNavigator();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const isTemplatePartsMode = useSelect( ( select ) => {
+		const settings = select( editSiteStore ).getSettings();
+
+		return !! settings.supportsTemplatePartsMode;
+	}, [] );
 
 	const { records: templates, isResolving: isLoading } = useEntityRecords(
 		'postType',
@@ -60,24 +67,25 @@ export default function SidebarNavigationScreenTemplates( {
 			per_page: -1,
 		}
 	);
+	const sortedTemplates = templates ? [ ...templates ] : [];
+	sortedTemplates.sort( ( a, b ) => a.slug.localeCompare( b.slug ) );
 
 	const browseAllLink = useLink( {
-		postType,
-		postId: undefined,
-		path: config[ postType ].path + '/all',
+		path: '/' + postType + '/all',
 	} );
 
+	const canCreate = ! isMobileViewport && ! isTemplatePartsMode;
+
 	return (
 		<SidebarNavigationScreen
-			path={ config[ postType ].path }
+			isRoot={ isTemplatePartsMode }
 			title={ config[ postType ].labels.title }
 			actions={
-				! isMobileViewport && (
+				canCreate && (
 					<AddNewTemplate
 						templateType={ postType }
 						toggleProps={ {
-							className:
-								'edit-site-sidebar-navigation-screen-templates__add-button',
+							as: SidebarButton,
 						} }
 					/>
 				)
@@ -92,7 +100,7 @@ export default function SidebarNavigationScreenTemplates( {
 									{ config[ postType ].labels.notFound }
 								</Item>
 							) }
-							{ ( templates ?? [] ).map( ( template ) => (
+							{ sortedTemplates.map( ( template ) => (
 								<TemplateItem
 									postType={ postType }
 									postId={ template.id }

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

@@ -2,8 +2,3 @@
 	/* Overrides the margin that comes from the Item component */
 	margin-top: $grid-unit-20 !important;
 }
-
-.edit-site-sidebar-navigation-screen-templates__add-button {
-	/* Overrides the color for all states of the button */
-	color: inherit !important;
-}

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

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -10,22 +11,16 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 
 const config = {
 	wp_template: {
-		path: '/templates/all',
 		title: __( 'All templates' ),
 	},
 	wp_template_part: {
-		path: '/template-parts/all',
 		title: __( 'All template parts' ),
 	},
 };
 
-export default function SidebarNavigationScreenTemplatesBrowse( {
-	postType = 'wp_template',
-} ) {
-	return (
-		<SidebarNavigationScreen
-			path={ config[ postType ].path }
-			title={ config[ postType ].title }
-		/>
-	);
+export default function SidebarNavigationScreenTemplatesBrowse() {
+	const {
+		params: { postType },
+	} = useNavigator();
+	return <SidebarNavigationScreen title={ config[ postType ].title } />;
 }

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

@@ -24,8 +24,14 @@ import {
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { closeSmall } from '@wordpress/icons';
-import { useResizeObserver } from '@wordpress/compose';
+import {
+	useResizeObserver,
+	useFocusOnMount,
+	useFocusReturn,
+	useMergeRefs,
+} from '@wordpress/compose';
 import { useMemo, memo } from '@wordpress/element';
+import { ESCAPE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -90,6 +96,9 @@ function getExamples() {
 
 function StyleBook( { isSelected, onSelect, onClose } ) {
 	const [ resizeObserver, sizes ] = useResizeObserver();
+	const focusOnMountRef = useFocusOnMount( 'firstElement' );
+	const sectionFocusReturnRef = useFocusReturn();
+
 	const [ textColor ] = useGlobalStyle( 'color.text' );
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 	const examples = useMemo( getExamples, [] );
@@ -108,8 +117,17 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 				} ) ),
 		[ examples ]
 	);
+
+	function closeOnEscape( event ) {
+		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
+			event.preventDefault();
+			onClose();
+		}
+	}
+
 	return (
 		<StyleBookFill>
+			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
 			<section
 				className={ classnames( 'edit-site-style-book', {
 					'is-wide': sizes.width > 600,
@@ -119,6 +137,11 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 					background: backgroundColor,
 				} }
 				aria-label={ __( 'Style Book' ) }
+				onKeyDown={ closeOnEscape }
+				ref={ useMergeRefs( [
+					sectionFocusReturnRef,
+					focusOnMountRef,
+				] ) }
 			>
 				{ resizeObserver }
 				<Button
@@ -126,6 +149,7 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 					icon={ closeSmall }
 					label={ __( 'Close Style Book' ) }
 					onClick={ onClose }
+					showTooltip={ false }
 				/>
 				<TabPanel
 					className="edit-site-style-book__tab-panel"