@wordpress/edit-site 5.12.0 → 5.12.2

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
  */
@@ -6,7 +11,10 @@ import {
 	__experimentalNavigatorScreen as NavigatorScreen,
 	__experimentalUseNavigator as useNavigator,
 	createSlotFill,
+	Button,
 	DropdownMenu,
+	MenuGroup,
+	MenuItem,
 } from '@wordpress/components';
 import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -14,9 +22,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 +46,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 +55,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 +67,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 +134,8 @@ function GlobalStylesActionMenu() {
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
-	const loadCustomCSS = () => goTo( '/css' );
 	const loadRevisions = () => {
+		setIsListViewOpened( false );
 		goTo( '/revisions' );
 		setEditorCanvasContainerView( 'global-styles-revisions' );
 	};
@@ -78,46 +143,42 @@ 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,
-								},
-						  ]
-						: [] ),
-				] }
-			/>
+			{ canReset || hasRevisions ? (
+				<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>
+			) : (
+				<Button
+					label={ __( 'Revisions' ) }
+					icon={ backup }
+					disabled
+					__experimentalIsFocusable
+				/>
+			) }
 		</GlobalStylesMenuFill>
 	);
 }
@@ -260,8 +321,15 @@ function GlobalStylesEditorCanvasContainerLink() {
 			// 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' );
 		}
-	}, [ editorCanvasContainerView, location?.path, goTo ] );
+
+		// 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() {
@@ -351,6 +419,7 @@ function GlobalStylesUI() {
 				<GlobalStylesStyleBook />
 			) }
 
+			<GlobalStylesRevisionsMenu />
 			<GlobalStylesActionMenu />
 			<GlobalStylesBlockLink />
 			<GlobalStylesEditorCanvasContainerLink />

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

@@ -19,10 +19,11 @@ import { store as commandsStore } from '@wordpress/commands';
 import {
 	chevronLeftSmall as chevronLeftSmallIcon,
 	page as pageIcon,
+	navigation as navigationIcon,
 } from '@wordpress/icons';
-import { useEntityRecord } from '@wordpress/core-data';
 import { displayShortcut } from '@wordpress/keycodes';
 import { useState, useEffect, useRef } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -36,36 +37,46 @@ export default function DocumentActions() {
 }
 
 function PageDocumentActions() {
-	const { hasPageContentLock, context } = useSelect(
-		( select ) => ( {
-			hasPageContentLock: select( editSiteStore ).hasPageContentLock(),
-			context: select( editSiteStore ).getEditedPostContext(),
-		} ),
+	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 { hasResolved, editedRecord } = useEntityRecord(
-		'postType',
-		context.postType,
-		context.postId
-	);
-
-	const { setHasPageContentLock } = useDispatch( editSiteStore );
+	const { setHasPageContentFocus } = useDispatch( editSiteStore );
 
 	const [ hasEditedTemplate, setHasEditedTemplate ] = useState( false );
-	const prevHasPageContentLock = useRef( false );
+	const prevHasPageContentFocus = useRef( false );
 	useEffect( () => {
-		if ( prevHasPageContentLock.current && ! hasPageContentLock ) {
+		if ( prevHasPageContentFocus.current && ! hasPageContentFocus ) {
 			setHasEditedTemplate( true );
 		}
-		prevHasPageContentLock.current = hasPageContentLock;
-	}, [ hasPageContentLock ] );
+		prevHasPageContentFocus.current = hasPageContentFocus;
+	}, [ hasPageContentFocus ] );
 
 	if ( ! hasResolved ) {
 		return null;
 	}
 
-	if ( ! editedRecord ) {
+	if ( ! isFound ) {
 		return (
 			<div className="edit-site-document-actions">
 				{ __( 'Document not found' ) }
@@ -73,19 +84,19 @@ function PageDocumentActions() {
 		);
 	}
 
-	return hasPageContentLock ? (
+	return hasPageContentFocus ? (
 		<BaseDocumentActions
 			className={ classnames( 'is-page', {
 				'is-animated': hasEditedTemplate,
 			} ) }
 			icon={ pageIcon }
 		>
-			{ editedRecord.title }
+			{ title }
 		</BaseDocumentActions>
 	) : (
 		<TemplateDocumentActions
 			className="is-animated"
-			onBack={ () => setHasPageContentLock( true ) }
+			onBack={ () => setHasPageContentFocus( true ) }
 		/>
 	);
 }
@@ -105,15 +116,12 @@ function TemplateDocumentActions( { className, onBack } ) {
 		);
 	}
 
-	const entityLabel =
-		record.type === 'wp_template_part'
-			? __( 'template part' )
-			: __( 'template' );
+	const entityLabel = getEntityLabel( record.type );
 
 	return (
 		<BaseDocumentActions
 			className={ className }
-			icon={ icon }
+			icon={ record.type === 'wp_navigation' ? navigationIcon : icon }
 			onBack={ onBack }
 		>
 			<VisuallyHidden as="span">
@@ -167,3 +175,20 @@ function BaseDocumentActions( { className, icon, children, onBack } ) {
 		</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;
+}

package/src/components/header-edit-mode/document-actions/style.scss

@@ -58,15 +58,19 @@
 	}
 }
 
-.edit-site-document-actions__shortcut {
-	color: $gray-700;
-	text-align: right;
+.edit-site-document-actions__shortcut,
+.edit-site-document-actions__back {
+	color: $gray-800;
 
-	&:hover {
-		color: $gray-700;
+	.edit-site-document-actions:hover & {
+		color: $gray-900;
 	}
 }
 
+.edit-site-document-actions__shortcut {
+	text-align: right;
+}
+
 .edit-site-document-actions__back {
 	min-width: $button-size;
 	flex-shrink: 0;