@wordpress/edit-site 5.12.0 → 5.12.1

package/src/components/global-styles/color-palette-panel.js

@@ -12,7 +12,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 const mobilePopoverProps = { placement: 'bottom-start', offset: 8 };

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

@@ -7,7 +7,7 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const {
 	useGlobalStyle,

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

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { mergeWith } from 'lodash';
+import deepmerge from 'deepmerge';
+import { isPlainObject } from 'is-plain-object';
 
 /**
  * WordPress dependencies
@@ -14,24 +15,19 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import CanvasSpinner from '../canvas-spinner';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { GlobalStylesContext, cleanEmptyObject } = unlock(
 	blockEditorPrivateApis
 );
 
-function mergeTreesCustomizer( _, srcValue ) {
-	// We only pass as arrays the presets,
-	// in which case we want the new array of values
-	// to override the old array (no merging).
-	if ( Array.isArray( srcValue ) ) {
-		return srcValue;
-	}
-}
-
 export function mergeBaseAndUserConfigs( base, user ) {
-	return mergeWith( {}, base, user, mergeTreesCustomizer );
+	return deepmerge( base, user, {
+		// We only pass as arrays the presets,
+		// in which case we want the new array of values
+		// to override the old array (no merging).
+		isMergeableObject: isPlainObject,
+	} );
 }
 
 function useGlobalStylesUserConfig() {
@@ -155,7 +151,7 @@ function useGlobalStylesContext() {
 export function GlobalStylesProvider( { children } ) {
 	const context = useGlobalStylesContext();
 	if ( ! context.isReady ) {
-		return <CanvasSpinner />;
+		return null;
 	}
 
 	return (

package/src/components/global-styles/gradients-palette-panel.js

@@ -15,7 +15,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import Subtitle from './subtitle';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 const mobilePopoverProps = { placement: 'bottom-start', offset: 8 };

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

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

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

@@ -22,7 +22,7 @@ import Subtitle from './subtitle';
 import { NavigationButtonAsItem } from './navigation-button';
 import { useColorRandomizer } from './hooks';
 import ColorIndicatorWrapper from './color-indicator-wrapper';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 
@@ -91,7 +91,7 @@ function Palette( { name } ) {
 					</HStack>
 				</NavigationButtonAsItem>
 			</ItemGroup>
-			{ randomizeThemeColors && (
+			{ themeColors?.length > 0 && (
 				<Button
 					variant="secondary"
 					icon={ shuffle }

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

@@ -17,7 +17,7 @@ import { useState, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useGlobalSetting, useGlobalStyle, useGlobalStylesOutput } = unlock(
 	blockEditorPrivateApis

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

@@ -10,7 +10,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import { NavigationButtonAsItem } from './navigation-button';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const {
 	useHasDimensionsPanel,

package/src/components/global-styles/screen-block-list.js

@@ -23,7 +23,7 @@ import { speak } from '@wordpress/a11y';
 import { useBlockVariations } from './variations-panel';
 import ScreenHeader from './header';
 import { NavigationButtonAsItem } from './navigation-button';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const {
 	useHasDimensionsPanel,

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

@@ -18,7 +18,7 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import ScreenHeader from './header';
 import BlockPreviewPanel from './block-preview-panel';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import Subtitle from './subtitle';
 import { useBlockVariations, VariationsPanel } from './variations-panel';
 

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

@@ -11,7 +11,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import ScreenHeader from './header';
 import Palette from './palette';
 import BlockPreviewPanel from './block-preview-panel';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const {
 	useGlobalStyle,

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

@@ -8,7 +8,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import ScreenHeader from './header';
 
 const { useGlobalStyle, AdvancedPanel: StylesAdvancedPanel } = unlock(

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

@@ -10,7 +10,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import DimensionsPanel from './dimensions-panel';
 import ScreenHeader from './header';
 import BlockPreviewPanel from './block-preview-panel';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useHasDimensionsPanel, useGlobalSetting, useSettingsForBlockElement } =
 	unlock( blockEditorPrivateApis );

package/src/components/global-styles/screen-revisions/index.js

@@ -19,7 +19,7 @@ import {
  * Internal dependencies
  */
 import ScreenHeader from '../header';
-import { unlock } from '../../../private-apis';
+import { unlock } from '../../../lock-unlock';
 import Revisions from '../../revisions';
 import SidebarFixedBottom from '../../sidebar-edit-mode/sidebar-fixed-bottom';
 import { store as editSiteStore } from '../../../store';

package/src/components/global-styles/screen-revisions/use-global-styles-revisions.js

@@ -9,7 +9,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../../private-apis';
+import { unlock } from '../../../lock-unlock';
 
 const SITE_EDITOR_AUTHORS_QUERY = {
 	per_page: -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>
 	);
 }
@@ -260,8 +311,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 +409,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 );