@wordpress/edit-site 5.11.0 → 5.12.1

package/src/components/global-styles/screen-root.js

@@ -25,7 +25,7 @@ import { IconWithCurrentColor } from './icon-with-current-color';
 import { NavigationButtonAsItem } from './navigation-button';
 import RootMenu from './root-menu';
 import StylesPreview from './preview';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 function ScreenRoot() {
 	const { useGlobalStyle } = unlock( blockEditorPrivateApis );

package/src/components/global-styles/screen-typography.js

@@ -17,7 +17,7 @@ import ScreenHeader from './header';
 import { NavigationButtonAsItem } from './navigation-button';
 import Subtitle from './subtitle';
 import BlockPreviewPanel from './block-preview-panel';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 

package/src/components/global-styles/stories/index.js

@@ -9,7 +9,7 @@ import { useMemo, useState } from '@wordpress/element';
  */
 import { mergeBaseAndUserConfigs } from '../global-styles-provider';
 import { default as GlobalStylesUIComponent } from '../ui';
-import { unlock } from '../../../private-apis';
+import { unlock } from '../../../lock-unlock';
 
 const { GlobalStylesContext, ExperimentalBlockEditorProvider } = unlock(
 	blockEditorPrivateApis

package/src/components/global-styles/style-variations-container.js

@@ -11,7 +11,7 @@ import { useSelect } from '@wordpress/data';
 import { useMemo, useContext, useState } from '@wordpress/element';
 import { ENTER } from '@wordpress/keycodes';
 import { __experimentalGrid as Grid } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
@@ -19,7 +19,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  */
 import { mergeBaseAndUserConfigs } from './global-styles-provider';
 import StylesPreview from './preview';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
 	blockEditorPrivateApis
@@ -60,6 +60,16 @@ function Variation( { variation } ) {
 		return areGlobalStyleConfigsEqual( user, variation );
 	}, [ user, variation ] );
 
+	let label = variation?.title;
+	if ( variation?.description ) {
+		label = sprintf(
+			/* translators: %1$s: variation title. %2$s variation description. */
+			__( '%1$s (%2$s)' ),
+			variation?.title,
+			variation?.description
+		);
+	}
+
 	return (
 		<GlobalStylesContext.Provider value={ context }>
 			<div
@@ -73,7 +83,7 @@ function Variation( { variation } ) {
 				onClick={ selectVariation }
 				onKeyDown={ selectOnEnter }
 				tabIndex="0"
-				aria-label={ variation?.title }
+				aria-label={ label }
 				aria-current={ isActive }
 				onFocus={ () => setIsFocused( true ) }
 				onBlur={ () => setIsFocused( false ) }

package/src/components/global-styles/style.scss

@@ -179,3 +179,14 @@
 .edit-site-global-styles-sidebar__panel .block-editor-block-icon svg {
 	fill: currentColor;
 }
+
+[class][class].edit-site-global-styles-sidebar__revisions-count-badge {
+	align-items: center;
+	background: $gray-800;
+	border-radius: 2px;
+	color: $white;
+	display: inline-flex;
+	justify-content: center;
+	min-height: $icon-size;
+	min-width: $icon-size;
+}

package/src/components/global-styles/typography-panel.js

@@ -6,7 +6,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const {
 	useGlobalStyle,

package/src/components/global-styles/typography-preview.js

@@ -6,7 +6,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 

package/src/components/global-styles/ui.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -7,6 +12,8 @@ import {
 	__experimentalUseNavigator as useNavigator,
 	createSlotFill,
 	DropdownMenu,
+	MenuGroup,
+	MenuItem,
 } from '@wordpress/components';
 import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -14,9 +21,9 @@ import {
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { __, sprintf, _n } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { moreVertical } from '@wordpress/icons';
+import { backup, moreVertical } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 import { useEffect } from '@wordpress/element';
 
@@ -38,7 +45,7 @@ import ScreenStyleVariations from './screen-style-variations';
 import StyleBook from '../style-book';
 import ScreenCSS from './screen-css';
 import ScreenRevisions from './screen-revisions';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
 const SLOT_FILL_NAME = 'GlobalStylesMenu';
@@ -47,7 +54,7 @@ const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } =
 
 function GlobalStylesActionMenu() {
 	const { toggle } = useDispatch( preferencesStore );
-	const { canEditCSS, revisionsCount } = useSelect( ( select ) => {
+	const { canEditCSS } = useSelect( ( select ) => {
 		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
 			select( coreStore );
 
@@ -59,6 +66,63 @@ function GlobalStylesActionMenu() {
 		return {
 			canEditCSS:
 				!! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,
+		};
+	}, [] );
+	const { goTo } = useNavigator();
+	const loadCustomCSS = () => goTo( '/css' );
+
+	return (
+		<GlobalStylesMenuFill>
+			<DropdownMenu icon={ moreVertical } label={ __( 'More' ) }>
+				{ ( { onClose } ) => (
+					<MenuGroup>
+						{ canEditCSS && (
+							<MenuItem onClick={ loadCustomCSS }>
+								{ __( 'Additional CSS' ) }
+							</MenuItem>
+						) }
+						<MenuItem
+							onClick={ () => {
+								toggle(
+									'core/edit-site',
+									'welcomeGuideStyles'
+								);
+								onClose();
+							} }
+						>
+							{ __( 'Welcome Guide' ) }
+						</MenuItem>
+					</MenuGroup>
+				) }
+			</DropdownMenu>
+		</GlobalStylesMenuFill>
+	);
+}
+
+function RevisionsCountBadge( { className, children } ) {
+	return (
+		<span
+			className={ classnames(
+				className,
+				'edit-site-global-styles-sidebar__revisions-count-badge'
+			) }
+		>
+			{ children }
+		</span>
+	);
+}
+function GlobalStylesRevisionsMenu() {
+	const { setIsListViewOpened } = useDispatch( editSiteStore );
+	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,
 		};
@@ -69,8 +133,8 @@ function GlobalStylesActionMenu() {
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
-	const loadCustomCSS = () => goTo( '/css' );
 	const loadRevisions = () => {
+		setIsListViewOpened( false );
 		goTo( '/revisions' );
 		setEditorCanvasContainerView( 'global-styles-revisions' );
 	};
@@ -78,46 +142,33 @@ function GlobalStylesActionMenu() {
 
 	return (
 		<GlobalStylesMenuFill>
-			<DropdownMenu
-				icon={ moreVertical }
-				label={ __( 'Styles actions' ) }
-				controls={ [
-					{
-						title: __( 'Reset to defaults' ),
-						onClick: onReset,
-						isDisabled: ! canReset,
-					},
-					{
-						title: __( 'Welcome Guide' ),
-						onClick: () =>
-							toggle( 'core/edit-site', 'welcomeGuideStyles' ),
-					},
-					...( canEditCSS
-						? [
-								{
-									title: __( 'Additional CSS' ),
-									onClick: loadCustomCSS,
-								},
-						  ]
-						: [] ),
-					...( hasRevisions
-						? [
-								{
-									title: sprintf(
-										/* translators: %d: number of revisions */
-										_n(
-											'%d Revision',
-											'%d Revisions',
-											revisionsCount
-										),
-										revisionsCount
-									),
-									onClick: loadRevisions,
-								},
-						  ]
-						: [] ),
-				] }
-			/>
+			<DropdownMenu icon={ backup } label={ __( 'Revisions' ) }>
+				{ ( { onClose } ) => (
+					<MenuGroup>
+						{ hasRevisions && (
+							<MenuItem
+								onClick={ loadRevisions }
+								icon={
+									<RevisionsCountBadge>
+										{ revisionsCount }
+									</RevisionsCountBadge>
+								}
+							>
+								{ __( 'Revision history' ) }
+							</MenuItem>
+						) }
+						<MenuItem
+							onClick={ () => {
+								onReset();
+								onClose();
+							} }
+							disabled={ ! canReset }
+						>
+							{ __( 'Reset to defaults' ) }
+						</MenuItem>
+					</MenuGroup>
+				) }
+			</DropdownMenu>
 		</GlobalStylesMenuFill>
 	);
 }
@@ -237,6 +288,40 @@ function GlobalStylesBlockLink() {
 	}, [ selectedBlockClientId, selectedBlockName, blockHasGlobalStyles ] );
 }
 
+function GlobalStylesEditorCanvasContainerLink() {
+	const { goTo, location } = useNavigator();
+	const editorCanvasContainerView = useSelect(
+		( select ) =>
+			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
+		[]
+	);
+
+	// If the user switches the editor canvas container view, redirect
+	// to the appropriate screen. This effectively allows deep linking to the
+	// desired screens from outside the global styles navigation provider.
+	useEffect( () => {
+		if ( editorCanvasContainerView === 'global-styles-revisions' ) {
+			// Switching to the revisions container view should
+			// redirect to the revisions screen.
+			goTo( '/revisions' );
+		} else if (
+			!! editorCanvasContainerView &&
+			location?.path === '/revisions'
+		) {
+			// Switching to any container other than revisions should
+			// redirect from the revisions screen to the root global styles screen.
+			goTo( '/' );
+		} else if ( editorCanvasContainerView === 'global-styles-css' ) {
+			goTo( '/css' );
+		}
+
+		// location?.path is not a dependency because we don't want to track it.
+		// Doing so will cause an infinite loop. We could abstract logic to avoid
+		// having to disable the check later.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ editorCanvasContainerView, goTo ] );
+}
+
 function GlobalStylesUI() {
 	const blocks = getBlockTypes();
 	const editorCanvasContainerView = useSelect(
@@ -324,8 +409,10 @@ function GlobalStylesUI() {
 				<GlobalStylesStyleBook />
 			) }
 
+			<GlobalStylesRevisionsMenu />
 			<GlobalStylesActionMenu />
 			<GlobalStylesBlockLink />
+			<GlobalStylesEditorCanvasContainerLink />
 		</NavigatorProvider>
 	);
 }

package/src/components/global-styles-renderer/index.js

@@ -9,7 +9,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useGlobalStylesOutput } = unlock( blockEditorPrivateApis );
 

package/src/components/header-edit-mode/document-actions/index.js

@@ -1,8 +1,13 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { sprintf, __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	Button,
 	VisuallyHidden,
@@ -10,27 +15,99 @@ import {
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { BlockIcon } from '@wordpress/block-editor';
-import { privateApis as commandsPrivateApis } from '@wordpress/commands';
+import { store as commandsStore } from '@wordpress/commands';
+import {
+	chevronLeftSmall as chevronLeftSmallIcon,
+	page as pageIcon,
+	navigation as navigationIcon,
+} from '@wordpress/icons';
 import { displayShortcut } from '@wordpress/keycodes';
+import { useState, useEffect, useRef } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import useEditedEntityRecord from '../../use-edited-entity-record';
-import { unlock } from '../../../private-apis';
-
-const { store: commandsStore } = unlock( commandsPrivateApis );
+import { store as editSiteStore } from '../../../store';
 
 export default function DocumentActions() {
-	const { open: openCommandCenter } = useDispatch( commandsStore );
+	const isPage = useSelect( ( select ) => select( editSiteStore ).isPage() );
+	return isPage ? <PageDocumentActions /> : <TemplateDocumentActions />;
+}
+
+function PageDocumentActions() {
+	const { hasPageContentFocus, hasResolved, isFound, title } = useSelect(
+		( select ) => {
+			const {
+				hasPageContentFocus: _hasPageContentFocus,
+				getEditedPostContext,
+			} = select( editSiteStore );
+			const { getEditedEntityRecord, hasFinishedResolution } =
+				select( coreStore );
+			const context = getEditedPostContext();
+			const queryArgs = [ 'postType', context.postType, context.postId ];
+			const page = getEditedEntityRecord( ...queryArgs );
+			return {
+				hasPageContentFocus: _hasPageContentFocus(),
+				hasResolved: hasFinishedResolution(
+					'getEditedEntityRecord',
+					queryArgs
+				),
+				isFound: !! page,
+				title: page?.title,
+			};
+		},
+		[]
+	);
+
+	const { setHasPageContentFocus } = useDispatch( editSiteStore );
+
+	const [ hasEditedTemplate, setHasEditedTemplate ] = useState( false );
+	const prevHasPageContentFocus = useRef( false );
+	useEffect( () => {
+		if ( prevHasPageContentFocus.current && ! hasPageContentFocus ) {
+			setHasEditedTemplate( true );
+		}
+		prevHasPageContentFocus.current = hasPageContentFocus;
+	}, [ hasPageContentFocus ] );
+
+	if ( ! hasResolved ) {
+		return null;
+	}
+
+	if ( ! isFound ) {
+		return (
+			<div className="edit-site-document-actions">
+				{ __( 'Document not found' ) }
+			</div>
+		);
+	}
+
+	return hasPageContentFocus ? (
+		<BaseDocumentActions
+			className={ classnames( 'is-page', {
+				'is-animated': hasEditedTemplate,
+			} ) }
+			icon={ pageIcon }
+		>
+			{ title }
+		</BaseDocumentActions>
+	) : (
+		<TemplateDocumentActions
+			className="is-animated"
+			onBack={ () => setHasPageContentFocus( true ) }
+		/>
+	);
+}
+
+function TemplateDocumentActions( { className, onBack } ) {
 	const { isLoaded, record, getTitle, icon } = useEditedEntityRecord();
 
-	// Return a simple loading indicator until we have information to show.
 	if ( ! isLoaded ) {
 		return null;
 	}
 
-	// Return feedback that the template does not seem to exist.
 	if ( ! record ) {
 		return (
 			<div className="edit-site-document-actions">
@@ -39,37 +116,79 @@ export default function DocumentActions() {
 		);
 	}
 
-	const entityLabel =
-		record.type === 'wp_template_part'
-			? __( 'template part' )
-			: __( 'template' );
+	const entityLabel = getEntityLabel( record.type );
+
+	return (
+		<BaseDocumentActions
+			className={ className }
+			icon={ record.type === 'wp_navigation' ? navigationIcon : icon }
+			onBack={ onBack }
+		>
+			<VisuallyHidden as="span">
+				{ sprintf(
+					/* translators: %s: the entity being edited, like "template"*/
+					__( 'Editing %s: ' ),
+					entityLabel
+				) }
+			</VisuallyHidden>
+			{ getTitle() }
+		</BaseDocumentActions>
+	);
+}
 
+function BaseDocumentActions( { className, icon, children, onBack } ) {
+	const { open: openCommandCenter } = useDispatch( commandsStore );
 	return (
-		<Button
-			className="edit-site-document-actions"
-			onClick={ () => openCommandCenter() }
+		<div
+			className={ classnames( 'edit-site-document-actions', className ) }
 		>
-			<span className="edit-site-document-actions__left"></span>
-			<HStack
-				spacing={ 1 }
-				justify="center"
-				className="edit-site-document-actions__title"
+			{ onBack && (
+				<Button
+					className="edit-site-document-actions__back"
+					icon={ chevronLeftSmallIcon }
+					onClick={ ( event ) => {
+						event.stopPropagation();
+						onBack();
+					} }
+				>
+					{ __( 'Back' ) }
+				</Button>
+			) }
+			<Button
+				className="edit-site-document-actions__command"
+				onClick={ () => openCommandCenter() }
 			>
-				<BlockIcon icon={ icon } />
-				<Text size="body" as="h1">
-					<VisuallyHidden as="span">
-						{ sprintf(
-							/* translators: %s: the entity being edited, like "template"*/
-							__( 'Editing %s: ' ),
-							entityLabel
-						) }
-					</VisuallyHidden>
-					{ getTitle() }
-				</Text>
-			</HStack>
-			<span className="edit-site-document-actions__shortcut">
-				{ displayShortcut.primary( 'k' ) }
-			</span>
-		</Button>
+				<HStack
+					className="edit-site-document-actions__title"
+					spacing={ 1 }
+					justify="center"
+				>
+					<BlockIcon icon={ icon } />
+					<Text size="body" as="h1">
+						{ children }
+					</Text>
+				</HStack>
+				<span className="edit-site-document-actions__shortcut">
+					{ displayShortcut.primary( 'k' ) }
+				</span>
+			</Button>
+		</div>
 	);
 }
+
+function getEntityLabel( entityType ) {
+	let label = '';
+	switch ( entityType ) {
+		case 'wp_navigation':
+			label = 'navigation menu';
+			break;
+		case 'wp_template_part':
+			label = 'template part';
+			break;
+		default:
+			label = 'template';
+			break;
+	}
+
+	return label;
+}