This commit:

- refactors useGlobalOutput by splitting out the build logic into a separate hook so that we can pass a custom config
- uses wp.date.getSettings().formats.datetimeAbbreviated for formatted date in the revisions buttons
- removes unnecessary role on the ordered list
- updated copy
- replacing modal component with the confirm dialog component
- minor code optimizations
- making the revisions store methods stable
- updating tests
- removing shouldShowClose button prop on the editor-canvas-container

update e2e

docs/reference-guides/data/data-core.md

@@ -126,6 +126,18 @@ _Returns_
 
 -   `any`: The current theme.
 
+### getCurrentThemeGlobalStylesRevisions
+
+Returns the revisions of the current global styles theme.
+
+_Parameters_
+
+-   _state_ `State`: Data state.
+
+_Returns_
+
+-   `Object | null`: The current global styles.
+
 ### getCurrentUser
 
 Returns the current user.

packages/block-editor/src/components/global-styles/index.js

@@ -5,7 +5,10 @@ export {
 	useSettingsForBlockElement,
 } from './hooks';
 export { getBlockCSSSelector } from './get-block-css-selector';
-export { useGlobalStylesOutput } from './use-global-styles-output';
+export {
+	useGlobalStylesOutput,
+	useGlobalStylesOutputWithConfig,
+} from './use-global-styles-output';
 export { GlobalStylesContext } from './context';
 export {
 	default as TypographyPanel,
@@ -20,4 +23,4 @@ export { default as ColorPanel, useHasColorPanel } from './color-panel';
 export { default as EffectsPanel, useHasEffectsPanel } from './effects-panel';
 export { default as FiltersPanel, useHasFiltersPanel } from './filters-panel';
 export { default as AdvancedPanel } from './advanced-panel';
-export { isGlobalStyleConfigEqual } from './utils';
+export { areGlobalStyleConfigsEqual } from './utils';

packages/block-editor/src/components/global-styles/test/utils.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import {
-	isGlobalStyleConfigEqual,
+	areGlobalStyleConfigsEqual,
 	getPresetVariableFromValue,
 	getValueFromVariable,
 } from '../utils';
@@ -208,9 +208,10 @@ describe( 'editor utils', () => {
 		} );
 	} );
 
-	describe( 'isGlobalStyleConfigEqual', () => {
+	describe( 'areGlobalStyleConfigsEqual', () => {
 		test.each( [
-			{ original: null, variation: null, expected: false },
+			{ original: null, variation: null, expected: true },
+			{ original: {}, variation: {}, expected: true },
 			{ original: {}, variation: undefined, expected: false },
 			{
 				original: {
@@ -250,11 +251,11 @@ describe( 'editor utils', () => {
 				expected: true,
 			},
 		] )(
-			'.isGlobalStyleConfigEqual( $original, $variation )',
+			'.areGlobalStyleConfigsEqual( $original, $variation )',
 			( { original, variation, expected } ) => {
-				expect( isGlobalStyleConfigEqual( original, variation ) ).toBe(
-					expected
-				);
+				expect(
+					areGlobalStyleConfigsEqual( original, variation )
+				).toBe( expected );
 			}
 		);
 	} );

packages/block-editor/src/components/global-styles/use-global-styles-output.js

@@ -1106,12 +1106,17 @@ const processCSSNesting = ( css, blockSelector ) => {
 	return processedCSS;
 };
 
-export function useGlobalStylesOutput( customMergedConfig = null ) {
-	let { merged: mergedConfig } = useContext( GlobalStylesContext );
-	if ( !! customMergedConfig ) {
-		mergedConfig = customMergedConfig;
-	}
-
+/**
+ * Returns the global styles output using a global styles configuration.
+ * If wishing to generate global styles and settings based on the
+ * global styles config loaded in the editor context, use `useGlobalStylesOutput()`.
+ * The use case for a custom config is to generate bespoke styles
+ * and settings for previews, or other out-of-editor experiences.
+ *
+ * @param {Object} mergedConfig Global styles configuration.
+ * @return {Array} Array of stylesheets and settings.
+ */
+export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 	const [ blockGap ] = useGlobalSetting( 'spacing.blockGap' );
 	const hasBlockGapSupport = blockGap !== null;
 	const hasFallbackGapSupport = ! hasBlockGapSupport; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback styles support.
@@ -1193,3 +1198,13 @@ export function useGlobalStylesOutput( customMergedConfig = null ) {
 		disableLayoutStyles,
 	] );
 }
+
+/**
+ * Returns the global styles output based on the current state of global styles config loaded in the editor context.
+ *
+ * @return {Array} Array of stylesheets and settings.
+ */
+export function useGlobalStylesOutput() {
+	const { merged: mergedConfig } = useContext( GlobalStylesContext );
+	return useGlobalStylesOutputWithConfig( mergedConfig );
+}

packages/block-editor/src/components/global-styles/utils.js

@@ -385,7 +385,7 @@ export function scopeSelector( scope, selector ) {
  * ```js
  * const globalStyles = { styles: { typography: { fontSize: '10px' } }, settings: {} };
  * const variation = { styles: { typography: { fontSize: '10000px' } }, settings: {} };
- * const isEqual = isGlobalStyleConfigEqual( globalStyles, variation );
+ * const isEqual = areGlobalStyleConfigsEqual( globalStyles, variation );
  * // false
  * ```
  *
@@ -394,9 +394,9 @@ export function scopeSelector( scope, selector ) {
  *
  * @return {boolean} Whether `original` and `variation` match.
  */
-export function isGlobalStyleConfigEqual( original, variation ) {
-	if ( ! original || ! variation ) {
-		return false;
+export function areGlobalStyleConfigsEqual( original, variation ) {
+	if ( typeof original !== 'object' || typeof variation !== 'object' ) {
+		return original === variation;
 	}
 	return (
 		fastDeepEqual( original?.styles, variation?.styles ) &&

packages/core-data/README.md

@@ -303,6 +303,18 @@ _Returns_
 
 -   `any`: The current theme.
 
+### getCurrentThemeGlobalStylesRevisions
+
+Returns the revisions of the current global styles theme.
+
+_Parameters_
+
+-   _state_ `State`: Data state.
+
+_Returns_
+
+-   `Object | null`: The current global styles.
+
 ### getCurrentUser
 
 Returns the current user.

packages/core-data/src/actions.js

@@ -221,10 +221,7 @@ export function receiveThemeSupports() {
  *
  * @return {Object} Action object.
  */
-export function __experimentalReceiveThemeGlobalStyleRevisions(
-	currentId,
-	revisions
-) {
+export function receiveThemeGlobalStyleRevisions( currentId, revisions ) {
 	return {
 		type: 'RECEIVE_THEME_GLOBAL_STYLE_REVISIONS',
 		currentId,

packages/core-data/src/resolvers.js

@@ -500,7 +500,10 @@ export const __experimentalGetCurrentThemeGlobalStylesVariations =
 		);
 	};
 
-export const __experimentalGetCurrentThemeGlobalStylesRevisions =
+/**
+ * Fetches and returns the revisions of the current global styles theme.
+ */
+export const getCurrentThemeGlobalStylesRevisions =
 	() =>
 	async ( { resolveSelect, dispatch } ) => {
 		const globalStylesId =
@@ -526,16 +529,14 @@ export const __experimentalGetCurrentThemeGlobalStylesRevisions =
 					] )
 				)
 			);
-			dispatch.__experimentalReceiveThemeGlobalStyleRevisions(
+			dispatch.receiveThemeGlobalStyleRevisions(
 				globalStylesId,
 				revisions
 			);
 		}
 	};
 
-__experimentalGetCurrentThemeGlobalStylesRevisions.shouldInvalidate = (
-	action
-) => {
+getCurrentThemeGlobalStylesRevisions.shouldInvalidate = ( action ) => {
 	return (
 		action.type === 'SAVE_ENTITY_RECORD_FINISH' &&
 		action.kind === 'root' &&

packages/core-data/src/selectors.ts

@@ -1256,7 +1256,7 @@ export function getNavigationFallbackId(
  *
  * @return The current global styles.
  */
-export function __experimentalGetCurrentThemeGlobalStylesRevisions(
+export function getCurrentThemeGlobalStylesRevisions(
 	state: State
 ): Object | null {
 	const currentGlobalStylesId =

packages/edit-site/src/components/editor-canvas-container/index.js

@@ -46,12 +46,7 @@ const {
 	Fill: EditorCanvasContainerFill,
 } = createPrivateSlotFill( SLOT_FILL_NAME );
 
-function EditorCanvasContainer( {
-	children,
-	showCloseButton = false,
-	closeButtonLabel,
-	onClose = () => {},
-} ) {
+function EditorCanvasContainer( { children, closeButtonLabel, onClose } ) {
 	const editorCanvasContainerView = useSelect(
 		( select ) =>
 			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
@@ -68,7 +63,9 @@ function EditorCanvasContainer( {
 		[ editorCanvasContainerView ]
 	);
 	function onCloseContainer() {
-		onClose();
+		if ( typeof onClose === 'function' ) {
+			onClose();
+		}
 		setEditorCanvasContainerView( undefined );
 		setIsClosed( true );
 	}
@@ -96,7 +93,7 @@ function EditorCanvasContainer( {
 		return null;
 	}
 
-	const shouldShowCloseButton = showCloseButton || !! closeButtonLabel;
+	const shouldShowCloseButton = onClose || closeButtonLabel;
 
 	return (
 		<EditorCanvasContainerFill>

packages/edit-site/src/components/global-styles/screen-revisions/index.js

@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 import {
 	Button,
 	__experimentalUseNavigator as useNavigator,
+	__experimentalConfirmDialog as ConfirmDialog,
 	Spinner,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -22,11 +23,10 @@ import { unlock } from '../../../private-apis';
 import Revisions from '../../revisions';
 import SidebarFixedBottom from '../../sidebar-edit-mode/sidebar-fixed-bottom';
 import { store as editSiteStore } from '../../../store';
-import useGetGlobalStylesRevisions from './use-get-global-styles-revisions';
-import RestoreGlobalStylesRevisionModal from './restore-global-styles-revision-modal';
+import useGlobalStylesRevisions from './use-global-styles-revisions';
 import RevisionsButtons from './revisions-buttons';
 
-const { GlobalStylesContext, isGlobalStyleConfigEqual } = unlock(
+const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
 	blockEditorPrivateApis
 );
 
@@ -44,11 +44,16 @@ function ScreenRevisions() {
 	}, [] );
 
 	const { revisions, isLoading, hasUnsavedChanges } =
-		useGetGlobalStylesRevisions();
-	const [ globalStylesRevision, setGlobalStylesRevision ] = useState( {} );
+		useGlobalStylesRevisions();
+	const [ globalStylesRevision, setGlobalStylesRevision ] =
+		useState( userConfig );
 
 	const [ currentRevisionId, setCurrentRevisionId ] = useState(
-		revisions?.[ 0 ]?.id
+		/*
+		 * We need this for the first render,
+		 * otherwise the unsaved changes haven't been merged into the revisions array yet.
+		 */
+		hasUnsavedChanges ? 'unsaved' : revisions?.[ 0 ]?.id
 	);
 	const [
 		isLoadingRevisionWithUnsavedChanges,
@@ -89,7 +94,7 @@ function ScreenRevisions() {
 
 	const isLoadButtonEnabled =
 		!! globalStylesRevision?.id &&
-		! isGlobalStyleConfigEqual( globalStylesRevision, userConfig );
+		! areGlobalStyleConfigsEqual( globalStylesRevision, userConfig );
 
 	return (
 		<>
@@ -135,18 +140,36 @@ function ScreenRevisions() {
 								}
 							} }
 						>
-							{ __( 'Load revision' ) }
+							{ __( 'Apply' ) }
 						</Button>
 					</SidebarFixedBottom>
 				) }
 			</div>
 			{ isLoadingRevisionWithUnsavedChanges && (
-				<RestoreGlobalStylesRevisionModal
-					onClose={ () =>
+				<ConfirmDialog
+					title={ __(
+						'Loading this revision will discard all unsaved changes.'
+					) }
+					isOpen={ isLoadingRevisionWithUnsavedChanges }
+					confirmButtonText={ __( ' Discard unsaved changes' ) }
+					onConfirm={ () => restoreRevision( globalStylesRevision ) }
+					onCancel={ () =>
 						setIsLoadingRevisionWithUnsavedChanges( false )
 					}
-					onSubmit={ () => restoreRevision( globalStylesRevision ) }
-				/>
+				>
+					<>
+						<h2>
+							{ __(
+								'Loading this revision will discard all unsaved changes.'
+							) }
+						</h2>
+						<p>
+							{ __(
+								'Do you want to replace your unsaved changes in the editor?'
+							) }
+						</p>
+					</>
+				</ConfirmDialog>
 			) }
 		</>
 	);