@wordpress/edit-site 5.9.0 → 5.10.0

package/src/components/routes/link.js

@@ -2,11 +2,18 @@
  * WordPress dependencies
  */
 import { addQueryArgs, getQueryArgs, removeQueryArgs } from '@wordpress/url';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
-import { useHistory } from './index';
+import { unlock } from '../../private-apis';
+import {
+	isPreviewingTheme,
+	currentlyPreviewingTheme,
+} from '../../utils/is-previewing-theme';
+
+const { useHistory } = unlock( routerPrivateApis );
 
 export function useLink( params = {}, state, shouldReplace = false ) {
 	const history = useHistory();
@@ -26,6 +33,14 @@ export function useLink( params = {}, state, shouldReplace = false ) {
 		window.location.href,
 		...Object.keys( currentArgs )
 	);
+
+	if ( isPreviewingTheme() ) {
+		params = {
+			...params,
+			theme_preview: currentlyPreviewingTheme(),
+		};
+	}
+
 	const newUrl = addQueryArgs( currentUrlWithoutArgs, params );
 
 	return {

package/src/components/routes/use-title.js

@@ -7,11 +7,14 @@ import { store as coreStore } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import { decodeEntities } from '@wordpress/html-entities';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
-import { useLocation } from './index';
+import { unlock } from '../../private-apis';
+
+const { useLocation } = unlock( routerPrivateApis );
 
 export default function useTitle( title ) {
 	const location = useLocation();

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

@@ -11,8 +11,14 @@ import { displayShortcut } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
+import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 
-export default function SaveButton() {
+export default function SaveButton( {
+	className = 'edit-site-save-button__button',
+	variant = 'primary',
+	showTooltip = true,
+	icon,
+} ) {
 	const { isDirty, isSaving, isSaveViewOpen } = useSelect( ( select ) => {
 		const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
 			select( coreStore );
@@ -28,14 +34,28 @@ export default function SaveButton() {
 	}, [] );
 	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
 
-	const disabled = ! isDirty || isSaving;
+	const activateSaveEnabled = isPreviewingTheme() || isDirty;
+	const disabled = isSaving || ! activateSaveEnabled;
 
-	const label = __( 'Save' );
+	const getLabel = () => {
+		if ( disabled ) {
+			return __( 'Saved' );
+		}
+
+		if ( isPreviewingTheme() && isDirty ) {
+			return __( 'Activate & Save' );
+		} else if ( isPreviewingTheme() ) {
+			return __( 'Activate' );
+		}
+
+		return __( 'Save' );
+	};
+	const label = getLabel();
 
 	return (
 		<Button
-			variant="primary"
-			className="edit-site-save-button__button"
+			variant={ variant }
+			className={ className }
 			aria-disabled={ disabled }
 			aria-expanded={ isSaveViewOpen }
 			isBusy={ isSaving }
@@ -52,7 +72,8 @@ export default function SaveButton() {
 			 * of the button that we want to avoid. By setting `showTooltip`,
 			 & the tooltip is always rendered even when there's no keyboard shortcut.
 			 */
-			showTooltip
+			showTooltip={ showTooltip }
+			icon={ icon }
 		>
 			{ label }
 		</Button>

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

@@ -1,41 +1,38 @@
 /**
  * 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 { sprintf, _n } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
-import { displayShortcut } from '@wordpress/keycodes';
 import { check } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../store';
+import SaveButton from '../save-button';
+import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 
-export default function SaveButton() {
-	const { countUnsavedChanges, isDirty, isSaving, isSaveViewOpen } =
-		useSelect( ( select ) => {
+export default function SaveHub() {
+	const { countUnsavedChanges, isDirty, isSaving } = useSelect(
+		( select ) => {
 			const {
 				__experimentalGetDirtyEntityRecords,
 				isSavingEntityRecord,
 			} = select( coreStore );
 			const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
-			const { isSaveViewOpened } = select( editSiteStore );
 			return {
 				isDirty: dirtyEntityRecords.length > 0,
 				isSaving: dirtyEntityRecords.some( ( record ) =>
 					isSavingEntityRecord( record.kind, record.name, record.key )
 				),
-				isSaveViewOpen: isSaveViewOpened(),
 				countUnsavedChanges: dirtyEntityRecords.length,
 			};
-		}, [] );
-	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
-
-	const disabled = ! isDirty || isSaving;
+		},
+		[]
+	);
 
-	const label = disabled ? __( 'Saved' ) : __( 'Save' );
+	const disabled = isSaving || ( ! isDirty && ! isPreviewingTheme() );
 
 	return (
 		<HStack className="edit-site-save-hub" alignment="right" spacing={ 4 }>
@@ -52,27 +49,12 @@ export default function SaveButton() {
 					) }
 				</span>
 			) }
-			<Button
+			<SaveButton
 				className="edit-site-save-hub__button"
-				variant={ disabled ? undefined : 'primary' }
-				aria-disabled={ disabled }
-				aria-expanded={ isSaveViewOpen }
-				isBusy={ isSaving }
-				onClick={
-					disabled ? undefined : () => setIsSaveViewOpened( true )
-				}
-				label={ label }
-				/*
-				 * We want the tooltip to show the keyboard shortcut only when the
-				 * button does something, i.e. when it's not disabled.
-				 */
-				shortcut={
-					disabled ? undefined : displayShortcut.primary( 's' )
-				}
-				icon={ disabled ? check : undefined }
-			>
-				{ label }
-			</Button>
+				variant={ disabled ? null : 'primary' }
+				showTooltip={ false }
+				icon={ disabled ? check : null }
+			/>
 		</HStack>
 	);
 }

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

@@ -17,6 +17,7 @@ import { NavigableRegion } from '@wordpress/interface';
  */
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../private-apis';
+import { useActivateTheme } from '../../utils/use-activate-theme';
 
 export default function SavePanel() {
 	const { isSaveViewOpen, canvasMode } = useSelect( ( select ) => {
@@ -32,7 +33,18 @@ export default function SavePanel() {
 		};
 	}, [] );
 	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
+	const activateTheme = useActivateTheme();
 	const onClose = () => setIsSaveViewOpened( false );
+	const onSave = async ( values ) => {
+		await activateTheme();
+		return values;
+	};
+
+	const entitySavedStates = window?.__experimentalEnableThemePreviews ? (
+		<EntitiesSavedStates close={ onClose } onSave={ onSave } />
+	) : (
+		<EntitiesSavedStates close={ onClose } />
+	);
 
 	if ( canvasMode === 'view' ) {
 		return isSaveViewOpen ? (
@@ -44,7 +56,7 @@ export default function SavePanel() {
 					'Save site, content, and template changes'
 				) }
 			>
-				<EntitiesSavedStates close={ onClose } />
+				{ entitySavedStates }
 			</Modal>
 		) : null;
 	}
@@ -54,10 +66,10 @@ export default function SavePanel() {
 			className={ classnames( 'edit-site-layout__actions', {
 				'is-entity-save-view-open': isSaveViewOpen,
 			} ) }
-			ariaLabel={ __( 'Save sidebar' ) }
+			ariaLabel={ __( 'Save panel' ) }
 		>
 			{ isSaveViewOpen ? (
-				<EntitiesSavedStates close={ onClose } />
+				entitySavedStates
 			) : (
 				<div className="edit-site-editor__toggle-save-panel">
 					<Button

package/src/components/secondary-sidebar/list-view-sidebar.js

@@ -6,7 +6,6 @@ import { Button } from '@wordpress/components';
 import {
 	useFocusOnMount,
 	useFocusReturn,
-	useInstanceId,
 	useMergeRefs,
 } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
@@ -32,13 +31,10 @@ export default function ListViewSidebar() {
 		}
 	}
 
-	const instanceId = useInstanceId( ListViewSidebar );
-	const labelId = `edit-site-editor__list-view-panel-label-${ instanceId }`;
 	const { PrivateListView } = unlock( blockEditorPrivateApis );
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
-			aria-labelledby={ labelId }
 			className="edit-site-editor__list-view-panel"
 			onKeyDown={ closeOnEscape }
 		>
@@ -46,10 +42,10 @@ export default function ListViewSidebar() {
 				className="edit-site-editor__list-view-panel-header"
 				ref={ headerFocusReturnRef }
 			>
-				<strong id={ labelId }>{ __( 'List View' ) }</strong>
+				<strong>{ __( 'List View' ) }</strong>
 				<Button
 					icon={ closeSmall }
-					label={ __( 'Close List View Sidebar' ) }
+					label={ __( 'Close' ) }
 					onClick={ () => setIsListViewOpened( false ) }
 				/>
 			</div>

package/src/components/sidebar/index.js

@@ -6,6 +6,7 @@ import {
 	__experimentalNavigatorProvider as NavigatorProvider,
 	__experimentalNavigatorScreen as NavigatorScreen,
 } from '@wordpress/components';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -21,7 +22,11 @@ import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-gl
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
 import SaveHub from '../save-hub';
 import SidebarNavigationScreenNavigationItem from '../sidebar-navigation-screen-navigation-item';
-import { useLocation } from '../routes';
+import { unlock } from '../../private-apis';
+import SidebarNavigationScreenPages from '../sidebar-navigation-screen-pages';
+import SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';
+
+const { useLocation } = unlock( routerPrivateApis );
 
 function SidebarScreens() {
 	useSyncPathWithURL();
@@ -40,6 +45,12 @@ function SidebarScreens() {
 			<NavigatorScreen path="/navigation/:postType/:postId">
 				<SidebarNavigationScreenNavigationItem />
 			</NavigatorScreen>
+			<NavigatorScreen path="/page">
+				<SidebarNavigationScreenPages />
+			</NavigatorScreen>
+			<NavigatorScreen path="/page/:postId">
+				<SidebarNavigationScreenPage />
+			</NavigatorScreen>
 			<NavigatorScreen path="/:postType(wp_template|wp_template_part)">
 				<SidebarNavigationScreenTemplates />
 			</NavigatorScreen>

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

@@ -21,27 +21,29 @@ export default function GlobalStylesSidebar() {
 	const { shouldClearCanvasContainerView, isStyleBookOpened } = useSelect(
 		( select ) => {
 			const { getActiveComplementaryArea } = select( interfaceStore );
+			const { getEditorCanvasContainerView, getCanvasMode } = unlock(
+				select( editSiteStore )
+			);
 			const _isVisualEditorMode =
 				'visual' === select( editSiteStore ).getEditorMode();
+			const _isEditCanvasMode = 'edit' === getCanvasMode();
 
 			return {
 				isStyleBookOpened:
-					'style-book' ===
-					unlock(
-						select( editSiteStore )
-					).getEditorCanvasContainerView(),
+					'style-book' === getEditorCanvasContainerView(),
 				shouldClearCanvasContainerView:
 					'edit-site/global-styles' !==
 						getActiveComplementaryArea( 'core/edit-site' ) ||
-					! _isVisualEditorMode,
+					! _isVisualEditorMode ||
+					! _isEditCanvasMode,
 			};
 		},
 		[]
 	);
-
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
+
 	useEffect( () => {
 		if ( shouldClearCanvasContainerView ) {
 			setEditorCanvasContainerView( undefined );
@@ -54,7 +56,7 @@ export default function GlobalStylesSidebar() {
 			identifier="edit-site/global-styles"
 			title={ __( 'Styles' ) }
 			icon={ styles }
-			closeLabel={ __( 'Close Styles sidebar' ) }
+			closeLabel={ __( 'Close Styles' ) }
 			panelClassName="edit-site-global-styles-sidebar__panel"
 			header={
 				<Flex className="edit-site-global-styles-sidebar__header">

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

@@ -1,10 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { createSlotFill, PanelBody } from '@wordpress/components';
+import { createSlotFill, PanelBody, PanelRow } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { drawerLeft, drawerRight } from '@wordpress/icons';
-import { useEffect, Fragment } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -16,7 +16,9 @@ import DefaultSidebar from './default-sidebar';
 import GlobalStylesSidebar from './global-styles-sidebar';
 import { STORE_NAME } from '../../store/constants';
 import SettingsHeader from './settings-header';
+import LastRevision from './template-revisions';
 import TemplateCard from './template-card';
+import PluginTemplateSettingPanel from '../plugin-template-setting-panel';
 import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from './constants';
 import { store as editSiteStore } from '../../store';
 
@@ -69,14 +71,23 @@ export function SidebarComplementaryAreaFills() {
 				identifier={ sidebarName }
 				title={ __( 'Settings' ) }
 				icon={ isRTL() ? drawerLeft : drawerRight }
-				closeLabel={ __( 'Close settings' ) }
+				closeLabel={ __( 'Close Settings' ) }
 				header={ <SettingsHeader sidebarName={ sidebarName } /> }
 				headerClassName="edit-site-sidebar-edit-mode__panel-tabs"
 			>
 				{ sidebarName === SIDEBAR_TEMPLATE && (
-					<PanelBody>
-						<TemplateCard />
-					</PanelBody>
+					<>
+						<PanelBody>
+							<TemplateCard />
+							<PanelRow
+								header={ __( 'Editing history' ) }
+								className="edit-site-template-revisions"
+							>
+								<LastRevision />
+							</PanelRow>
+						</PanelBody>
+						<PluginTemplateSettingPanel.Slot />
+					</>
 				) }
 				{ sidebarName === SIDEBAR_BLOCK && (
 					<InspectorSlot bubblesVirtually />

package/src/components/sidebar-edit-mode/sidebar-fixed-bottom.js

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../private-apis';
+
+const { createPrivateSlotFill } = unlock( componentsPrivateApis );
+const SIDEBAR_FIXED_BOTTOM_SLOT_FILL_NAME = 'SidebarFixedBottom';
+const { Slot: SidebarFixedBottomSlot, Fill: SidebarFixedBottomFill } =
+	createPrivateSlotFill( SIDEBAR_FIXED_BOTTOM_SLOT_FILL_NAME );
+
+export default function SidebarFixedBottom( { children } ) {
+	return (
+		<SidebarFixedBottomFill>
+			<div className="edit-site-sidebar-fixed-bottom-slot">
+				{ children }
+			</div>
+		</SidebarFixedBottomFill>
+	);
+}
+
+export { SidebarFixedBottomSlot };

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

@@ -99,3 +99,13 @@
 		}
 	}
 }
+
+.edit-site-sidebar-fixed-bottom-slot {
+	position: sticky;
+	bottom: 0;
+	background: $white;
+	display: flex;
+	padding: $grid-unit-20;
+	border-top: $border-width solid $gray-300;
+	box-sizing: content-box;
+}

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

@@ -1,9 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { PanelRow, Icon } from '@wordpress/components';
+import { Icon } from '@wordpress/components';
 import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -14,7 +13,6 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { store as editSiteStore } from '../../../store';
 import TemplateActions from './template-actions';
 import TemplateAreas from './template-areas';
-import LastRevision from './last-revision';
 
 export default function TemplateCard() {
 	const {
@@ -56,12 +54,6 @@ export default function TemplateCard() {
 					<TemplateAreas />
 				</div>
 			</div>
-			<PanelRow
-				header={ __( 'Editing history' ) }
-				className="edit-site-template-revisions"
-			>
-				<LastRevision />
-			</PanelRow>
 		</>
 	);
 }

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

@@ -11,7 +11,7 @@ import {
 	__experimentalHStack as HStack,
 	FlexBlock,
 } from '@wordpress/components';
-import { chevronRight, Icon } from '@wordpress/icons';
+import { chevronRightSmall, Icon } from '@wordpress/icons';
 
 export default function SidebarNavigationItem( {
 	className,
@@ -28,24 +28,23 @@ export default function SidebarNavigationItem( {
 			) }
 			{ ...props }
 		>
-			{ icon && (
-				<HStack justify="flex-start">
+			<HStack justify="flex-start">
+				{ icon && (
 					<Icon
 						style={ { fill: 'currentcolor' } }
 						icon={ icon }
 						size={ 24 }
 					/>
-					<FlexBlock>{ children }</FlexBlock>
-					{ withChevron && (
-						<Icon
-							style={ { fill: 'currentcolor' } }
-							icon={ chevronRight }
-							size={ 24 }
-						/>
-					) }
-				</HStack>
-			) }
-			{ ! icon && children }
+				) }
+				<FlexBlock>{ children }</FlexBlock>
+				{ withChevron && (
+					<Icon
+						icon={ chevronRightSmall }
+						className="edit-site-sidebar-navigation-item__drilldown-indicator"
+						size={ 24 }
+					/>
+				) }
+			</HStack>
 		</Item>
 	);
 }

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

@@ -1,6 +1,9 @@
 .edit-site-sidebar-navigation-item.components-item {
 	color: $gray-600;
-	margin: 0 $grid-unit-05;
+	// 6px right padding to align with + button
+	padding: $grid-unit-10 6px $grid-unit-10 $grid-unit-20;
+	border: none;
+	min-height: $grid-unit-50;
 
 	&:hover,
 	&:focus,
@@ -12,6 +15,10 @@
 	&[aria-current] {
 		background: var(--wp-admin-theme-color);
 	}
+
+	.edit-site-sidebar-navigation-item__drilldown-indicator {
+		fill: $gray-700;
+	}
 }
 
 .edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button {

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

@@ -7,8 +7,9 @@ import {
 	__experimentalNavigatorToParentButton as NavigatorToParentButton,
 	__experimentalHeading as Heading,
 } from '@wordpress/components';
-import { isRTL, __ } from '@wordpress/i18n';
+import { isRTL, __, sprintf } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
+import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -17,6 +18,10 @@ import { useSelect } from '@wordpress/data';
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../private-apis';
 import SidebarButton from '../sidebar-button';
+import {
+	isPreviewingTheme,
+	currentlyPreviewingTheme,
+} from '../../utils/is-previewing-theme';
 
 export default function SidebarNavigationScreen( {
 	isRoot,
@@ -31,6 +36,8 @@ export default function SidebarNavigationScreen( {
 			dashboardLink: getSettings().__experimentalDashboardLink,
 		};
 	}, [] );
+	const { getTheme } = useSelect( coreStore );
+	const theme = getTheme( currentlyPreviewingTheme() );
 
 	return (
 		<VStack spacing={ 2 }>
@@ -43,13 +50,21 @@ export default function SidebarNavigationScreen( {
 					<NavigatorToParentButton
 						as={ SidebarButton }
 						icon={ isRTL() ? chevronRight : chevronLeft }
-						aria-label={ __( 'Back' ) }
+						label={ __( 'Back' ) }
 					/>
 				) : (
 					<SidebarButton
 						icon={ isRTL() ? chevronRight : chevronLeft }
-						label={ __( 'Go back to the Dashboard' ) }
-						href={ dashboardLink || 'index.php' }
+						label={
+							! isPreviewingTheme()
+								? __( 'Go back to the Dashboard' )
+								: __( 'Go back to the theme showcase' )
+						}
+						href={
+							! isPreviewingTheme()
+								? dashboardLink || 'index.php'
+								: 'themes.php'
+						}
 					/>
 				) }
 				<Heading
@@ -58,7 +73,13 @@ export default function SidebarNavigationScreen( {
 					level={ 2 }
 					size={ 20 }
 				>
-					{ title }
+					{ ! isPreviewingTheme()
+						? title
+						: sprintf(
+								'Previewing %1$s: %2$s',
+								theme?.name?.rendered,
+								title
+						  ) }
 				</Heading>
 				{ actions }
 			</HStack>