@wordpress/edit-site 5.31.0 → 5.33.0

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

@@ -3,9 +3,14 @@
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Button } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 import { displayShortcut } from '@wordpress/keycodes';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import {
+	useEntitiesSavedStatesIsDirty,
+	store as editorStore,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -15,30 +20,30 @@ import {
 	currentlyPreviewingTheme,
 	isPreviewingTheme,
 } from '../../utils/is-previewing-theme';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation } = unlock( routerPrivateApis );
 
 export default function SaveButton( {
 	className = 'edit-site-save-button__button',
 	variant = 'primary',
 	showTooltip = true,
-	defaultLabel,
+	showReviewMessage,
 	icon,
 	size,
 	__next40pxDefaultSize = false,
 } ) {
-	const { isDirty, isSaving, isSaveViewOpen, previewingThemeName } =
-		useSelect( ( select ) => {
-			const {
-				__experimentalGetDirtyEntityRecords,
-				isSavingEntityRecord,
-				isResolving,
-			} = select( coreStore );
-			const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+	const { params } = useLocation();
+	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
+	const { saveDirtyEntities } = unlock( useDispatch( editorStore ) );
+	const { dirtyEntityRecords } = useEntitiesSavedStatesIsDirty();
+	const { isSaving, isSaveViewOpen, previewingThemeName } = useSelect(
+		( select ) => {
+			const { isSavingEntityRecord, isResolving } = select( coreStore );
 			const { isSaveViewOpened } = select( editSiteStore );
 			const isActivatingTheme = isResolving( 'activateTheme' );
 			const currentlyPreviewingThemeId = currentlyPreviewingTheme();
-
 			return {
-				isDirty: dirtyEntityRecords.length > 0,
 				isSaving:
 					dirtyEntityRecords.some( ( record ) =>
 						isSavingEntityRecord(
@@ -55,12 +60,26 @@ export default function SaveButton( {
 							?.name?.rendered
 					: undefined,
 			};
-		}, [] );
-	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
-
-	const activateSaveEnabled = isPreviewingTheme() || isDirty;
-	const disabled = isSaving || ! activateSaveEnabled;
-
+		},
+		[ dirtyEntityRecords ]
+	);
+	const hasDirtyEntities = !! dirtyEntityRecords.length;
+	let isOnlyCurrentEntityDirty;
+	// Check if the current entity is the only entity with changes.
+	// We have some extra logic for `wp_global_styles` for now, that
+	// is used in navigation sidebar.
+	if ( dirtyEntityRecords.length === 1 ) {
+		if ( params.postId ) {
+			isOnlyCurrentEntityDirty =
+				`${ dirtyEntityRecords[ 0 ].key }` === params.postId &&
+				dirtyEntityRecords[ 0 ].name === params.postType;
+		} else if ( params.path?.includes( 'wp_global_styles' ) ) {
+			isOnlyCurrentEntityDirty =
+				dirtyEntityRecords[ 0 ].name === 'globalStyles';
+		}
+	}
+	const disabled =
+		isSaving || ( ! hasDirtyEntities && ! isPreviewingTheme() );
 	const getLabel = () => {
 		if ( isPreviewingTheme() ) {
 			if ( isSaving ) {
@@ -71,32 +90,42 @@ export default function SaveButton( {
 				);
 			} else if ( disabled ) {
 				return __( 'Saved' );
-			} else if ( isDirty ) {
+			} else if ( hasDirtyEntities ) {
 				return sprintf(
 					/* translators: %s: The name of theme to be activated. */
 					__( 'Activate %s & Save' ),
 					previewingThemeName
 				);
 			}
-
 			return sprintf(
 				/* translators: %s: The name of theme to be activated. */
 				__( 'Activate %s' ),
 				previewingThemeName
 			);
 		}
-
 		if ( isSaving ) {
 			return __( 'Saving' );
-		} else if ( disabled ) {
+		}
+		if ( disabled ) {
 			return __( 'Saved' );
-		} else if ( defaultLabel ) {
-			return defaultLabel;
+		}
+		if ( ! isOnlyCurrentEntityDirty && showReviewMessage ) {
+			return sprintf(
+				// translators: %d: number of unsaved changes (number).
+				_n(
+					'Review %d change…',
+					'Review %d changes…',
+					dirtyEntityRecords.length
+				),
+				dirtyEntityRecords.length
+			);
 		}
 		return __( 'Save' );
 	};
 	const label = getLabel();
-
+	const onClick = isOnlyCurrentEntityDirty
+		? () => saveDirtyEntities( { dirtyEntityRecords } )
+		: () => setIsSaveViewOpened( true );
 	return (
 		<Button
 			variant={ variant }
@@ -104,7 +133,7 @@ export default function SaveButton( {
 			aria-disabled={ disabled }
 			aria-expanded={ isSaveViewOpen }
 			isBusy={ isSaving }
-			onClick={ disabled ? undefined : () => setIsSaveViewOpened( true ) }
+			onClick={ disabled ? undefined : onClick }
 			label={ label }
 			/*
 			 * We want the tooltip to show the keyboard shortcut only when the

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

@@ -1,186 +1,42 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { Button, __experimentalHStack as HStack } from '@wordpress/components';
-import { __, sprintf, _n } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { __experimentalHStack as HStack } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
 import { check } from '@wordpress/icons';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
  */
 import SaveButton from '../save-button';
 import { isPreviewingTheme } from '../../utils/is-previewing-theme';
-import { unlock } from '../../lock-unlock';
-import { NAVIGATION_POST_TYPE } from '../../utils/constants';
-
-const { useLocation } = unlock( routerPrivateApis );
-
-const PUBLISH_ON_SAVE_ENTITIES = [
-	{
-		kind: 'postType',
-		name: NAVIGATION_POST_TYPE,
-	},
-];
 
 export default function SaveHub() {
-	const saveNoticeId = 'site-edit-save-notice';
-	const { params } = useLocation();
-
-	const { __unstableMarkLastChangeAsPersistent } =
-		useDispatch( blockEditorStore );
-
-	const { createSuccessNotice, createErrorNotice, removeNotice } =
-		useDispatch( noticesStore );
-
-	const { dirtyCurrentEntity, countUnsavedChanges, isDirty, isSaving } =
-		useSelect(
-			( select ) => {
-				const {
-					__experimentalGetDirtyEntityRecords,
-					isSavingEntityRecord,
-				} = select( coreStore );
-				const dirtyEntityRecords =
-					__experimentalGetDirtyEntityRecords();
-				let calcDirtyCurrentEntity = null;
-
-				if ( dirtyEntityRecords.length === 1 ) {
-					// if we are on global styles
-					if ( params.path?.includes( 'wp_global_styles' ) ) {
-						calcDirtyCurrentEntity = dirtyEntityRecords.find(
-							( record ) => record.name === 'globalStyles'
-						);
-					}
-					// if we are on pages
-					else if ( params.postId ) {
-						calcDirtyCurrentEntity = dirtyEntityRecords.find(
-							( record ) =>
-								record.name === params.postType &&
-								String( record.key ) === params.postId
-						);
-					}
-				}
-
-				return {
-					dirtyCurrentEntity: calcDirtyCurrentEntity,
-					isDirty: dirtyEntityRecords.length > 0,
-					isSaving: dirtyEntityRecords.some( ( record ) =>
-						isSavingEntityRecord(
-							record.kind,
-							record.name,
-							record.key
-						)
-					),
-					countUnsavedChanges: dirtyEntityRecords.length,
-				};
-			},
-			[ params.path, params.postType, params.postId ]
+	const { isDisabled, isSaving } = useSelect( ( select ) => {
+		const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
+			select( coreStore );
+		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+		const _isSaving = dirtyEntityRecords.some( ( record ) =>
+			isSavingEntityRecord( record.kind, record.name, record.key )
 		);
-
-	const {
-		editEntityRecord,
-		saveEditedEntityRecord,
-		__experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
-	} = useDispatch( coreStore );
-
-	const disabled = isSaving || ( ! isDirty && ! isPreviewingTheme() );
-
-	// if we have only one unsaved change and it matches current context, we can show a more specific label
-	let label = dirtyCurrentEntity
-		? __( 'Save' )
-		: sprintf(
-				// translators: %d: number of unsaved changes (number).
-				_n(
-					'Review %d change…',
-					'Review %d changes…',
-					countUnsavedChanges
-				),
-				countUnsavedChanges
-		  );
-
-	if ( isSaving ) {
-		label = __( 'Saving' );
-	}
-
-	const { homeUrl } = useSelect( ( select ) => {
-		const {
-			getUnstableBase, // Site index.
-		} = select( coreStore );
 		return {
-			homeUrl: getUnstableBase()?.home,
+			isSaving: _isSaving,
+			isDisabled:
+				_isSaving ||
+				( ! dirtyEntityRecords.length && ! isPreviewingTheme() ),
 		};
 	}, [] );
-
-	const saveCurrentEntity = async () => {
-		if ( ! dirtyCurrentEntity ) return;
-
-		removeNotice( saveNoticeId );
-		const { kind, name, key, property } = dirtyCurrentEntity;
-
-		try {
-			if ( 'root' === dirtyCurrentEntity.kind && 'site' === name ) {
-				await saveSpecifiedEntityEdits( 'root', 'site', undefined, [
-					property,
-				] );
-			} else {
-				if (
-					PUBLISH_ON_SAVE_ENTITIES.some(
-						( typeToPublish ) =>
-							typeToPublish.kind === kind &&
-							typeToPublish.name === name
-					)
-				) {
-					editEntityRecord( kind, name, key, { status: 'publish' } );
-				}
-
-				await saveEditedEntityRecord( kind, name, key );
-			}
-
-			__unstableMarkLastChangeAsPersistent();
-
-			createSuccessNotice( __( 'Site updated.' ), {
-				type: 'snackbar',
-				actions: [
-					{
-						label: __( 'View site' ),
-						url: homeUrl,
-					},
-				],
-				id: saveNoticeId,
-			} );
-		} catch ( error ) {
-			createErrorNotice( `${ __( 'Saving failed.' ) } ${ error }` );
-		}
-	};
-
 	return (
 		<HStack className="edit-site-save-hub" alignment="right" spacing={ 4 }>
-			{ dirtyCurrentEntity ? (
-				<Button
-					variant="primary"
-					onClick={ saveCurrentEntity }
-					isBusy={ isSaving }
-					disabled={ isSaving }
-					aria-disabled={ isSaving }
-					className="edit-site-save-hub__button"
-					__next40pxDefaultSize
-				>
-					{ label }
-				</Button>
-			) : (
-				<SaveButton
-					className="edit-site-save-hub__button"
-					variant={ disabled ? null : 'primary' }
-					showTooltip={ false }
-					icon={ disabled && ! isSaving ? check : null }
-					defaultLabel={ label }
-					__next40pxDefaultSize
-				/>
-			) }
+			<SaveButton
+				className="edit-site-save-hub__button"
+				variant={ isDisabled ? null : 'primary' }
+				showTooltip={ false }
+				icon={ isDisabled && ! isSaving ? check : null }
+				showReviewMessage
+				__next40pxDefaultSize
+			/>
 		</HStack>
 	);
 }

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

@@ -14,7 +14,6 @@ import {
 } from '@wordpress/editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
-import { NavigableRegion } from '@wordpress/interface';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -26,7 +25,8 @@ import { useActivateTheme } from '../../utils/use-activate-theme';
 import { useActualCurrentTheme } from '../../utils/use-actual-current-theme';
 import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 
-const { EntitiesSavedStatesExtensible } = unlock( privateApis );
+const { EntitiesSavedStatesExtensible, NavigableRegion } =
+	unlock( privateApis );
 
 const EntitiesSavedStatesForPreview = ( { onClose } ) => {
 	const isDirtyProps = useEntitiesSavedStatesIsDirty();

package/src/components/sidebar/index.js

@@ -1,122 +1,69 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import { memo, useRef } from '@wordpress/element';
 import {
-	__experimentalNavigatorProvider as NavigatorProvider,
-	__experimentalNavigatorScreen as NavigatorScreen,
-} from '@wordpress/components';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { useViewportMatch } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
+	useCallback,
+	createContext,
+	useState,
+	useRef,
+	useEffect,
+} from '@wordpress/element';
+import { focus } from '@wordpress/dom';
 
-/**
- * Internal dependencies
- */
-import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
-import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template';
-import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
-import SidebarNavigationScreenPattern from '../sidebar-navigation-screen-pattern';
-import useSyncPathWithURL, {
-	getPathFromURL,
-} from '../sync-state-with-url/use-sync-path-with-url';
-import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
-import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';
-import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
-import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
-import SaveHub from '../save-hub';
-import { unlock } from '../../lock-unlock';
-import SidebarNavigationScreenPages from '../sidebar-navigation-screen-pages';
-import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import DataViewsSidebarContent from '../sidebar-dataviews';
-import SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';
-
-const { useLocation } = unlock( routerPrivateApis );
+export const SidebarNavigationContext = createContext( () => {} );
 
-function SidebarScreenWrapper( { className, ...props } ) {
-	return (
-		<NavigatorScreen
-			className={ classNames(
-				'edit-site-sidebar__screen-wrapper',
-				className
-			) }
-			{ ...props }
-		/>
-	);
-}
+export default function SidebarContent( { routeKey, children } ) {
+	const [ navState, setNavState ] = useState( {
+		direction: null,
+		focusSelector: null,
+	} );
 
-function SidebarScreens() {
-	useSyncPathWithURL();
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const navigate = useCallback( ( direction, focusSelector = null ) => {
+		setNavState( ( prevState ) => ( {
+			direction,
+			focusSelector:
+				direction === 'forward' && focusSelector
+					? focusSelector
+					: prevState.focusSelector,
+		} ) );
+	}, [] );
 
-	return (
-		<>
-			<SidebarScreenWrapper path="/">
-				<SidebarNavigationScreenMain />
-			</SidebarScreenWrapper>
-			<SidebarScreenWrapper path="/navigation">
-				<SidebarNavigationScreenNavigationMenus />
-			</SidebarScreenWrapper>
-			<SidebarScreenWrapper path="/navigation/:postType/:postId">
-				<SidebarNavigationScreenNavigationMenu />
-			</SidebarScreenWrapper>
-			<SidebarScreenWrapper path="/wp_global_styles">
-				<SidebarNavigationScreenGlobalStyles />
-			</SidebarScreenWrapper>
-			<SidebarScreenWrapper path="/page">
-				<SidebarNavigationScreenPages />
-			</SidebarScreenWrapper>
-			<SidebarScreenWrapper path="/pages">
-				<SidebarNavigationScreen
-					title={ __( 'Manage pages' ) }
-					content={ <DataViewsSidebarContent /> }
-					backPath="/page"
-				/>
-			</SidebarScreenWrapper>
-			<SidebarScreenWrapper path="/page/:postId">
-				<SidebarNavigationScreenPage />
-			</SidebarScreenWrapper>
-			<SidebarScreenWrapper path="/:postType(wp_template)">
-				<SidebarNavigationScreenTemplatesBrowse />
-			</SidebarScreenWrapper>
-			{ ! isMobileViewport && (
-				<SidebarScreenWrapper path="/patterns">
-					<SidebarNavigationScreenPatterns />
-				</SidebarScreenWrapper>
-			) }
-			<SidebarScreenWrapper path="/:postType(wp_template_part)/all">
-				<SidebarNavigationScreenTemplatesBrowse />
-			</SidebarScreenWrapper>
-			<SidebarScreenWrapper path="/:postType(wp_template_part|wp_block)/:postId">
-				<SidebarNavigationScreenPattern />
-			</SidebarScreenWrapper>
-			<SidebarScreenWrapper path="/:postType(wp_template)/:postId">
-				<SidebarNavigationScreenTemplate />
-			</SidebarScreenWrapper>
-		</>
-	);
-}
+	const wrapperRef = useRef();
+	useEffect( () => {
+		let elementToFocus;
+		if ( navState.direction === 'back' && navState.focusSelector ) {
+			elementToFocus = wrapperRef.current.querySelector(
+				navState.focusSelector
+			);
+		}
+		if ( navState.direction !== null && ! elementToFocus ) {
+			const [ firstTabbable ] = focus.tabbable.find( wrapperRef.current );
+			elementToFocus = firstTabbable ?? wrapperRef.current;
+		}
+		elementToFocus?.focus();
+	}, [ navState ] );
 
-function Sidebar() {
-	const { params: urlParams } = useLocation();
-	const initialPath = useRef( getPathFromURL( urlParams ) );
+	const wrapperCls = classnames( 'edit-site-sidebar__screen-wrapper', {
+		'slide-from-left': navState.direction === 'back',
+		'slide-from-right': navState.direction === 'forward',
+	} );
 
 	return (
-		<>
-			<NavigatorProvider
-				className="edit-site-sidebar__content"
-				initialPath={ initialPath.current }
-			>
-				<SidebarScreens />
-			</NavigatorProvider>
-			<SaveHub />
-		</>
+		<SidebarNavigationContext.Provider value={ navigate }>
+			<div className="edit-site-sidebar__content">
+				<div
+					ref={ wrapperRef }
+					key={ routeKey }
+					className={ wrapperCls }
+				>
+					{ children }
+				</div>
+			</div>
+		</SidebarNavigationContext.Provider>
 	);
 }
-
-export default memo( Sidebar );

package/src/components/sidebar/style.scss

@@ -3,20 +3,55 @@
 	overflow-y: auto;
 }
 
+@keyframes slide-from-right {
+	from {
+		transform: translateX(50px);
+		opacity: 0;
+	}
+	to {
+		transform: none;
+		opacity: 1;
+	}
+}
+
+@keyframes slide-from-left {
+	from {
+		transform: translateX(-50px);
+		opacity: 0;
+	}
+	to {
+		transform: none;
+		opacity: 1;
+	}
+}
+
 .edit-site-sidebar__screen-wrapper {
+	overflow-x: auto;
 	@include custom-scrollbars-on-hover(transparent, $gray-700);
 	scrollbar-gutter: stable;
 	display: flex;
 	flex-direction: column;
 	height: 100%;
+	max-height: 100%;
 
 	// This matches the logo padding
 	padding: 0 $grid-unit-15;
-}
 
-.edit-site-sidebar__footer {
-	border-top: 1px solid $gray-800;
-	flex-shrink: 0;
-	margin: 0 $canvas-padding;
-	padding: $canvas-padding 0;
+	// Animation
+	animation-duration: 0.14s;
+	animation-timing-function: ease-in-out;
+	will-change: transform, opacity;
+
+	@media ( prefers-reduced-motion: reduce ) {
+		animation-duration: 0s;
+	}
+
+	&.slide-from-left {
+		animation-name: slide-from-left;
+	}
+
+	&.slide-from-right {
+		animation-name: slide-from-right;
+	}
+
 }

package/src/components/sidebar-dataviews/default-views.js

@@ -29,7 +29,7 @@ export const DEFAULT_CONFIG_PER_VIEW_TYPE = {
 };
 
 const DEFAULT_PAGE_BASE = {
-	type: LAYOUT_TABLE,
+	type: LAYOUT_LIST,
 	search: '',
 	filters: [],
 	page: 1,
@@ -42,7 +42,7 @@ const DEFAULT_PAGE_BASE = {
 	// better to keep track of the hidden ones.
 	hiddenFields: [ 'date', 'featured-image' ],
 	layout: {
-		...DEFAULT_CONFIG_PER_VIEW_TYPE[ LAYOUT_TABLE ],
+		...DEFAULT_CONFIG_PER_VIEW_TYPE[ LAYOUT_LIST ],
 	},
 };
 

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

@@ -15,7 +15,7 @@ import DataViewItem from './dataview-item';
 import CustomDataViewsList from './custom-dataviews-list';
 
 const PATH_TO_TYPE = {
-	'/pages': 'page',
+	'/page': 'page',
 };
 
 export default function DataViewsSidebarContent() {
@@ -48,7 +48,7 @@ export default function DataViewsSidebarContent() {
 					);
 				} ) }
 			</ItemGroup>
-			{ window?.__experimentalAdminViews && (
+			{ window?.__experimentalCustomViews && (
 				<CustomDataViewsList
 					activeView={ activeView }
 					type={ type }