@wordpress/edit-site 5.9.0 → 5.11.0

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';
@@ -20,6 +19,8 @@ import { ESCAPE } from '@wordpress/keycodes';
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../private-apis';
 
+const { PrivateListView } = unlock( blockEditorPrivateApis );
+
 export default function ListViewSidebar() {
 	const { setIsListViewOpened } = useDispatch( editSiteStore );
 
@@ -32,13 +33,9 @@ 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 +43,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
@@ -17,11 +18,15 @@ 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 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();
@@ -34,11 +39,17 @@ function SidebarScreens() {
 			<NavigatorScreen path="/navigation">
 				<SidebarNavigationScreenNavigationMenus />
 			</NavigatorScreen>
+			<NavigatorScreen path="/navigation/:postType/:postId">
+				<SidebarNavigationScreenNavigationMenu />
+			</NavigatorScreen>
 			<NavigatorScreen path="/wp_global_styles">
 				<SidebarNavigationScreenGlobalStyles />
 			</NavigatorScreen>
-			<NavigatorScreen path="/navigation/:postType/:postId">
-				<SidebarNavigationScreenNavigationItem />
+			<NavigatorScreen path="/page">
+				<SidebarNavigationScreenPages />
+			</NavigatorScreen>
+			<NavigatorScreen path="/page/:postId">
+				<SidebarNavigationScreenPage />
 			</NavigatorScreen>
 			<NavigatorScreen path="/:postType(wp_template|wp_template_part)">
 				<SidebarNavigationScreenTemplates />

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-edit-mode/{template-card/last-revision.js → template-revisions/index.js}

@@ -19,8 +19,7 @@ const useRevisionData = () => {
 		currentTemplate?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id ?? null;
 
 	const revisionsCount =
-		( currentTemplate?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0 ) +
-		1;
+		currentTemplate?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
 
 	return {
 		currentTemplate,

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,19 @@
 	&[aria-current] {
 		background: var(--wp-admin-theme-color);
 	}
+
+	.edit-site-sidebar-navigation-item__drilldown-indicator {
+		fill: $gray-700;
+	}
+
+	&:is(a) {
+		text-decoration: none;
+
+		&:focus {
+			box-shadow: none;
+			outline: none;
+		}
+	}
 }
 
 .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>

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

@@ -6,7 +6,7 @@
 }
 
 .edit-site-sidebar-navigation-screen__content {
-	margin: 0 $grid-unit-20 $grid-unit-20 $button-size;
+	margin: 0 0 $grid-unit-20 0;
 	color: $gray-600;
 	//z-index: z-index(".edit-site-sidebar-navigation-screen__content");
 }
@@ -34,7 +34,6 @@
 	box-shadow: 0 $grid-unit-10 $grid-unit-20 $gray-900;
 	margin-bottom: $grid-unit-10;
 	padding-bottom: $grid-unit-10;
-	padding-right: $grid-unit-20;
 	z-index: z-index(".edit-site-sidebar-navigation-screen__title-icon");
 }
 

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

@@ -2,8 +2,11 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { edit } from '@wordpress/icons';
-import { useDispatch } from '@wordpress/data';
+import { edit, seen } from '@wordpress/icons';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __experimentalNavigatorButton as NavigatorButton } from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -13,29 +16,111 @@ import StyleVariationsContainer from '../global-styles/style-variations-containe
 import { unlock } from '../../private-apis';
 import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import StyleBook from '../style-book';
 
-export default function SidebarNavigationScreenGlobalStyles() {
+export function SidebarNavigationItemGlobalStyles( props ) {
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+	const hasGlobalStyleVariations = useSelect(
+		( select ) =>
+			!! select(
+				coreStore
+			).__experimentalGetCurrentThemeGlobalStylesVariations()?.length,
+		[]
+	);
+	if ( hasGlobalStyleVariations ) {
+		return (
+			<NavigatorButton
+				{ ...props }
+				as={ SidebarNavigationItem }
+				path="/wp_global_styles"
+			/>
+		);
+	}
 	return (
-		<SidebarNavigationScreen
-			title={ __( 'Styles' ) }
-			description={ __(
-				'Choose a different style combination for the theme styles.'
-			) }
-			content={ <StyleVariationsContainer /> }
-			actions={
-				<SidebarButton
-					icon={ edit }
-					label={ __( 'Edit styles' ) }
-					onClick={ () => {
-						// switch to edit mode.
-						setCanvasMode( 'edit' );
-						// open global styles sidebar.
-						openGeneralSidebar( 'edit-site/global-styles' );
-					} }
-				/>
-			}
+		<SidebarNavigationItem
+			{ ...props }
+			onClick={ () => {
+				// switch to edit mode.
+				setCanvasMode( 'edit' );
+				// open global styles sidebar.
+				openGeneralSidebar( 'edit-site/global-styles' );
+			} }
 		/>
 	);
 }
+
+export default function SidebarNavigationScreenGlobalStyles() {
+	const { openGeneralSidebar } = useDispatch( editSiteStore );
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const { setCanvasMode, setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
+
+	const isStyleBookOpened = useSelect(
+		( select ) =>
+			'style-book' ===
+			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
+		[]
+	);
+
+	const openGlobalStyles = async () =>
+		Promise.all( [
+			setCanvasMode( 'edit' ),
+			openGeneralSidebar( 'edit-site/global-styles' ),
+		] );
+
+	const openStyleBook = async () => {
+		await openGlobalStyles();
+		// Open the Style Book once the canvas mode is set to edit,
+		// and the global styles sidebar is open. This ensures that
+		// the Style Book is not prematurely closed.
+		setEditorCanvasContainerView( 'style-book' );
+	};
+
+	return (
+		<>
+			<SidebarNavigationScreen
+				title={ __( 'Styles' ) }
+				description={ __(
+					'Choose a different style combination for the theme styles.'
+				) }
+				content={ <StyleVariationsContainer /> }
+				actions={
+					<div>
+						{ ! isMobileViewport && (
+							<SidebarButton
+								icon={ seen }
+								label={ __( 'Style Book' ) }
+								onClick={ () =>
+									setEditorCanvasContainerView(
+										! isStyleBookOpened
+											? 'style-book'
+											: undefined
+									)
+								}
+								isPressed={ isStyleBookOpened }
+							/>
+						) }
+						<SidebarButton
+							icon={ edit }
+							label={ __( 'Edit styles' ) }
+							onClick={ async () => await openGlobalStyles() }
+						/>
+					</div>
+				}
+			/>
+			{ isStyleBookOpened && ! isMobileViewport && (
+				<StyleBook
+					enableResizing={ false }
+					isSelected={ () => false }
+					onClick={ openStyleBook }
+					onSelect={ openStyleBook }
+					showCloseButton={ false }
+					showTabs={ false }
+				/>
+			) }
+		</>
+	);
+}