@wordpress/edit-site 5.10.0 → 5.12.0

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

@@ -2,8 +2,19 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { edit } from '@wordpress/icons';
-import { useDispatch } from '@wordpress/data';
+import { backup, edit, seen } from '@wordpress/icons';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import {
+	Icon,
+	__experimentalNavigatorButton as NavigatorButton,
+	__experimentalVStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
+import { BlockEditorProvider } from '@wordpress/block-editor';
+import { humanTimeDiff } from '@wordpress/date';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -13,29 +24,209 @@ 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';
+import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-global-styles-revisions';
 
-export default function SidebarNavigationScreenGlobalStyles() {
+const noop = () => {};
+
+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' );
+			} }
 		/>
 	);
 }
+
+function SidebarNavigationScreenGlobalStylesContent() {
+	const { storedSettings } = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+
+		return {
+			storedSettings: getSettings( false ),
+		};
+	}, [] );
+
+	// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
+	// loaded. This is necessary because the Iframe component waits until
+	// the block editor store's `__internalIsInitialized` is true before
+	// rendering the iframe. Without this, the iframe previews will not render
+	// in mobile viewport sizes, where the editor canvas is hidden.
+	return (
+		<BlockEditorProvider
+			settings={ storedSettings }
+			onChange={ noop }
+			onInput={ noop }
+		>
+			<StyleVariationsContainer />
+		</BlockEditorProvider>
+	);
+}
+
+function SidebarNavigationScreenGlobalStylesFooter( { onClickRevisions } ) {
+	const { revisions, isLoading } = useGlobalStylesRevisions();
+	const { revisionsCount } = useSelect( ( select ) => {
+		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+			select( coreStore );
+
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+		const globalStyles = globalStylesId
+			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+			: undefined;
+
+		return {
+			revisionsCount:
+				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0,
+		};
+	}, [] );
+
+	const hasRevisions = revisionsCount >= 2;
+	const modified = revisions?.[ 0 ]?.modified;
+
+	if ( ! hasRevisions || isLoading || ! modified ) {
+		return null;
+	}
+
+	return (
+		<VStack className="edit-site-sidebar-navigation-screen-global-styles__footer">
+			<SidebarNavigationItem
+				className="edit-site-sidebar-navigation-screen-global-styles__revisions"
+				label={ __( 'Revisions' ) }
+				onClick={ onClickRevisions }
+			>
+				<HStack
+					as="span"
+					alignment="center"
+					spacing={ 5 }
+					direction="row"
+					justify="space-between"
+				>
+					<span className="edit-site-sidebar-navigation-screen-global-styles__revisions__label">
+						{ __( 'Last modified' ) }
+					</span>
+					<span>
+						<time dateTime={ modified }>
+							{ humanTimeDiff( modified ) }
+						</time>
+					</span>
+					<Icon icon={ backup } style={ { fill: 'currentcolor' } } />
+				</HStack>
+			</SidebarNavigationItem>
+		</VStack>
+	);
+}
+
+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 = useCallback(
+		async () =>
+			Promise.all( [
+				setCanvasMode( 'edit' ),
+				openGeneralSidebar( 'edit-site/global-styles' ),
+			] ),
+		[ setCanvasMode, openGeneralSidebar ]
+	);
+
+	const openStyleBook = useCallback( 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' );
+	}, [ openGlobalStyles, setEditorCanvasContainerView ] );
+
+	const openRevisions = useCallback( async () => {
+		await openGlobalStyles();
+		// Open the global styles revisions once the canvas mode is set to edit,
+		// and the global styles sidebar is open. The global styles UI is responsible
+		// for redirecting to the revisions screen once the editor canvas container
+		// has been set to 'global-styles-revisions'.
+		setEditorCanvasContainerView( 'global-styles-revisions' );
+	}, [ openGlobalStyles, setEditorCanvasContainerView ] );
+
+	return (
+		<>
+			<SidebarNavigationScreen
+				title={ __( 'Styles' ) }
+				description={ __(
+					'Choose a different style combination for the theme styles.'
+				) }
+				content={ <SidebarNavigationScreenGlobalStylesContent /> }
+				footer={
+					<SidebarNavigationScreenGlobalStylesFooter
+						onClickRevisions={ openRevisions }
+					/>
+				}
+				actions={
+					<>
+						{ ! 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() }
+						/>
+					</>
+				}
+			/>
+			{ isStyleBookOpened && ! isMobileViewport && (
+				<StyleBook
+					enableResizing={ false }
+					isSelected={ () => false }
+					onClick={ openStyleBook }
+					onSelect={ openStyleBook }
+					showCloseButton={ false }
+					showTabs={ false }
+				/>
+			) }
+		</>
+	);
+}

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

@@ -0,0 +1,15 @@
+.edit-site-sidebar-navigation-screen-global-styles__footer {
+	padding-left: $grid-unit-15;
+}
+
+.edit-site-sidebar-navigation-screen-global-styles__revisions {
+	border-radius: $radius-block-ui;
+
+	&:not(:hover) {
+		color: $gray-200;
+
+		.edit-site-sidebar-navigation-screen-global-styles__revisions__label {
+			color: $gray-600;
+		}
+	}
+}

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

@@ -7,46 +7,36 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { layout, symbol, navigation, styles, page } from '@wordpress/icons';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationItem from '../sidebar-navigation-item';
+import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles';
+import { unlock } from '../../private-apis';
+import { store as editSiteStore } from '../../store';
+import SidebarNavigationScreenNavigationMenuButton from '../sidebar-navigation-screen-navigation-menus/navigator-button';
 
 export default function SidebarNavigationScreenMain() {
-	const { hasNavigationMenus, hasGlobalStyleVariations } = useSelect(
-		( select ) => {
-			const {
-				getEntityRecords,
-				__experimentalGetCurrentThemeGlobalStylesVariations,
-			} = select( coreStore );
-			// The query needs to be the same as in the "SidebarNavigationScreenNavigationMenus" component,
-			// to avoid double network calls.
-			const navigationMenus = getEntityRecords(
-				'postType',
-				'wp_navigation',
-				{
-					per_page: 1,
-					status: 'publish',
-					order: 'desc',
-					orderby: 'date',
-				}
-			);
-			return {
-				hasNavigationMenus: !! navigationMenus?.length,
-				hasGlobalStyleVariations:
-					!! __experimentalGetCurrentThemeGlobalStylesVariations()
-						?.length,
-			};
-		},
-		[]
+	const editorCanvasContainerView = useSelect( ( select ) => {
+		return unlock( select( editSiteStore ) ).getEditorCanvasContainerView();
+	}, [] );
+
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
 	);
-	const showNavigationScreen = process.env.IS_GUTENBERG_PLUGIN
-		? hasNavigationMenus
-		: false;
+
+	// Clear the editor canvas container view when accessing the main navigation screen.
+	useEffect( () => {
+		if ( editorCanvasContainerView ) {
+			setEditorCanvasContainerView( undefined );
+		}
+	}, [ editorCanvasContainerView, setEditorCanvasContainerView ] );
+
 	return (
 		<SidebarNavigationScreen
 			isRoot
@@ -56,27 +46,20 @@ export default function SidebarNavigationScreenMain() {
 			) }
 			content={
 				<ItemGroup>
-					{ showNavigationScreen && (
-						<NavigatorButton
-							as={ SidebarNavigationItem }
-							path="/navigation"
-							withChevron
-							icon={ navigation }
-						>
-							{ __( 'Navigation' ) }
-						</NavigatorButton>
-					) }
-					{ hasGlobalStyleVariations && (
-						<NavigatorButton
-							as={ SidebarNavigationItem }
-							path="/wp_global_styles"
-							withChevron
-							icon={ styles }
-						>
-							{ __( 'Styles' ) }
-						</NavigatorButton>
-					) }
+					<SidebarNavigationScreenNavigationMenuButton
+						withChevron
+						icon={ navigation }
+						as={ SidebarNavigationItem }
+					>
+						{ __( 'Navigation' ) }
+					</SidebarNavigationScreenNavigationMenuButton>
 
+					<SidebarNavigationItemGlobalStyles
+						withChevron
+						icon={ styles }
+					>
+						{ __( 'Styles' ) }
+					</SidebarNavigationItemGlobalStyles>
 					<NavigatorButton
 						as={ SidebarNavigationItem }
 						path="/page"
@@ -99,7 +82,7 @@ export default function SidebarNavigationScreenMain() {
 						withChevron
 						icon={ symbol }
 					>
-						{ __( 'Template Parts' ) }
+						{ __( 'Library' ) }
 					</NavigatorButton>
 				</ItemGroup>
 			}

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

@@ -0,0 +1,157 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityRecord } from '@wordpress/core-data';
+import {
+	__experimentalUseNavigator as useNavigator,
+	Spinner,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useCallback, useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { BlockEditorProvider } from '@wordpress/block-editor';
+import { createBlock } from '@wordpress/blocks';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../private-apis';
+import { store as editSiteStore } from '../../store';
+import {
+	isPreviewingTheme,
+	currentlyPreviewingTheme,
+} from '../../utils/is-previewing-theme';
+import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-navigation-menus';
+import NavigationMenuContent from '../sidebar-navigation-screen-navigation-menus/navigation-menu-content';
+
+const { useHistory } = unlock( routerPrivateApis );
+const noop = () => {};
+
+export default function SidebarNavigationScreenNavigationMenu() {
+	const postType = `wp_navigation`;
+	const {
+		params: { postId },
+	} = useNavigator();
+
+	const { record: navigationMenu, isResolving: isLoading } = useEntityRecord(
+		'postType',
+		postType,
+		postId
+	);
+
+	const menuTitle = navigationMenu?.title?.rendered || navigationMenu?.slug;
+
+	if ( isLoading ) {
+		return (
+			<SidebarNavigationScreenWrapper
+				description={ __(
+					'Navigation menus are a curated collection of blocks that allow visitors to get around your site.'
+				) }
+			>
+				<Spinner className="edit-site-sidebar-navigation-screen-navigation-menus__loading" />
+			</SidebarNavigationScreenWrapper>
+		);
+	}
+
+	if ( ! isLoading && ! navigationMenu ) {
+		return (
+			<SidebarNavigationScreenWrapper
+				description={ __( 'Navigation Menu missing.' ) }
+			/>
+		);
+	}
+
+	if ( ! navigationMenu?.content?.raw ) {
+		return (
+			<SidebarNavigationScreenWrapper
+				title={ decodeEntities( menuTitle ) }
+				description={ __( 'This Navigation Menu is empty.' ) }
+			/>
+		);
+	}
+
+	return (
+		<SidebarNavigationScreenWrapper
+			title={ decodeEntities( menuTitle ) }
+			description={ __(
+				'Navigation menus are a curated collection of blocks that allow visitors to get around your site.'
+			) }
+		>
+			<NavigationMenuEditor navigationMenu={ navigationMenu } />
+		</SidebarNavigationScreenWrapper>
+	);
+}
+
+function NavigationMenuEditor( { navigationMenu } ) {
+	const history = useHistory();
+
+	const onSelect = useCallback(
+		( selectedBlock ) => {
+			const { attributes, name } = selectedBlock;
+			if (
+				attributes.kind === 'post-type' &&
+				attributes.id &&
+				attributes.type &&
+				history
+			) {
+				history.push( {
+					postType: attributes.type,
+					postId: attributes.id,
+					...( isPreviewingTheme() && {
+						theme_preview: currentlyPreviewingTheme(),
+					} ),
+				} );
+			}
+			if ( name === 'core/page-list-item' && attributes.id && history ) {
+				history.push( {
+					postType: 'page',
+					postId: attributes.id,
+					...( isPreviewingTheme() && {
+						theme_preview: currentlyPreviewingTheme(),
+					} ),
+				} );
+			}
+		},
+		[ history ]
+	);
+
+	const { storedSettings } = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+
+		return {
+			storedSettings: getSettings( false ),
+		};
+	}, [] );
+
+	const blocks = useMemo( () => {
+		if ( ! NavigationMenuEditor ) {
+			return [];
+		}
+
+		return [
+			createBlock( 'core/navigation', { ref: navigationMenu?.id } ),
+		];
+	}, [ navigationMenu ] );
+
+	if ( ! navigationMenu || ! blocks?.length ) {
+		return null;
+	}
+
+	return (
+		<BlockEditorProvider
+			settings={ storedSettings }
+			value={ blocks }
+			onChange={ noop }
+			onInput={ noop }
+		>
+			<div className="edit-site-sidebar-navigation-screen-navigation-menus__content">
+				<NavigationMenuContent
+					rootClientId={ blocks[ 0 ].clientId }
+					onSelect={ onSelect }
+				/>
+			</div>
+		</BlockEditorProvider>
+	);
+}

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

@@ -0,0 +1,9 @@
+// This requested is preloaded in `gutenberg_preload_navigation_posts`.
+// As unbounded queries are limited to 100 by `fetchAllMiddleware`
+// on apiFetch this query is limited to 100.
+export const PRELOADED_NAVIGATION_MENUS_QUERY = {
+	per_page: 100,
+	status: 'publish',
+	order: 'desc',
+	orderby: 'date',
+};