@wordpress/edit-site 5.24.1 → 5.25.0

package/build-module/components/global-styles/screen-revisions/get-revision-changes.js

@@ -0,0 +1,139 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+const globalStylesChangesCache = new Map();
+const EMPTY_ARRAY = [];
+const translationMap = {
+  caption: __('Caption'),
+  link: __('Link'),
+  button: __('Button'),
+  heading: __('Heading'),
+  'settings.color': __('Color settings'),
+  'settings.typography': __('Typography settings'),
+  'styles.color': __('Colors'),
+  'styles.spacing': __('Spacing'),
+  'styles.typography': __('Typography')
+};
+const isObject = obj => obj !== null && typeof obj === 'object';
+
+/**
+ * Get the translation for a given global styles key.
+ * @param {string}                key        A key representing a path to a global style property or setting.
+ * @param {Record<string,string>} blockNames A key/value pair object of block names and their rendered titles.
+ * @return {string|undefined}                A translated key or undefined if no translation exists.
+ */
+function getTranslation(key, blockNames) {
+  if (translationMap[key]) {
+    return translationMap[key];
+  }
+  const keyArray = key.split('.');
+  if (keyArray?.[0] === 'blocks') {
+    const blockName = blockNames[keyArray[1]];
+    return blockName ? sprintf(
+    // translators: %s: block name.
+    __('%s block'), blockName) : keyArray[1];
+  }
+  if (keyArray?.[0] === 'elements') {
+    return sprintf(
+    // translators: %s: element name, e.g., heading button, link, caption.
+    __('%s element'), translationMap[keyArray[1]]);
+  }
+  return undefined;
+}
+
+/**
+ * A deep comparison of two objects, optimized for comparing global styles.
+ * @param {Object} changedObject  The changed object to compare.
+ * @param {Object} originalObject The original object to compare against.
+ * @param {string} parentPath     A key/value pair object of block names and their rendered titles.
+ * @return {string[]}             An array of paths whose values have changed.
+ */
+function deepCompare(changedObject, originalObject, parentPath = '') {
+  // We have two non-object values to compare.
+  if (!isObject(changedObject) && !isObject(originalObject)) {
+    /*
+     * Only return a path if the value has changed.
+     * And then only the path name up to 2 levels deep.
+     */
+    return changedObject !== originalObject ? parentPath.split('.').slice(0, 2).join('.') : undefined;
+  }
+
+  // Enable comparison when an object doesn't have a corresponding property to compare.
+  changedObject = isObject(changedObject) ? changedObject : {};
+  originalObject = isObject(originalObject) ? originalObject : {};
+  const allKeys = new Set([...Object.keys(changedObject), ...Object.keys(originalObject)]);
+  let diffs = [];
+  for (const key of allKeys) {
+    const path = parentPath ? parentPath + '.' + key : key;
+    const changedPath = deepCompare(changedObject[key], originalObject[key], path);
+    if (changedPath) {
+      diffs = diffs.concat(changedPath);
+    }
+  }
+  return diffs;
+}
+
+/**
+ * Get an array of translated summarized global styles changes.
+ * Results are cached using a Map() key of `JSON.stringify( { revision, previousRevision } )`.
+ *
+ * @param {Object}                revision         The changed object to compare.
+ * @param {Object}                previousRevision The original object to compare against.
+ * @param {Record<string,string>} blockNames       A key/value pair object of block names and their rendered titles.
+ * @return {string[]}                              An array of translated changes.
+ */
+export default function getRevisionChanges(revision, previousRevision, blockNames) {
+  const cacheKey = JSON.stringify({
+    revision,
+    previousRevision
+  });
+  if (globalStylesChangesCache.has(cacheKey)) {
+    return globalStylesChangesCache.get(cacheKey);
+  }
+
+  /*
+   * Compare the two revisions with normalized keys.
+   * The order of these keys determines the order in which
+   * they'll appear in the results.
+   */
+  const changedValueTree = deepCompare({
+    styles: {
+      color: revision?.styles?.color,
+      typography: revision?.styles?.typography,
+      spacing: revision?.styles?.spacing
+    },
+    blocks: revision?.styles?.blocks,
+    elements: revision?.styles?.elements,
+    settings: revision?.settings
+  }, {
+    styles: {
+      color: previousRevision?.styles?.color,
+      typography: previousRevision?.styles?.typography,
+      spacing: previousRevision?.styles?.spacing
+    },
+    blocks: previousRevision?.styles?.blocks,
+    elements: previousRevision?.styles?.elements,
+    settings: previousRevision?.settings
+  });
+  if (!changedValueTree.length) {
+    globalStylesChangesCache.set(cacheKey, EMPTY_ARRAY);
+    return EMPTY_ARRAY;
+  }
+
+  // Remove duplicate results.
+  const result = [...new Set(changedValueTree)]
+  /*
+   * Translate the keys.
+   * Remove duplicate or empty translations.
+   */.reduce((acc, curr) => {
+    const translation = getTranslation(curr, blockNames);
+    if (translation && !acc.includes(translation)) {
+      acc.push(translation);
+    }
+    return acc;
+  }, []);
+  globalStylesChangesCache.set(cacheKey, result);
+  return result;
+}
+//# sourceMappingURL=get-revision-changes.js.map

package/build-module/components/global-styles/screen-revisions/get-revision-changes.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__","sprintf","globalStylesChangesCache","Map","EMPTY_ARRAY","translationMap","caption","link","button","heading","isObject","obj","getTranslation","key","blockNames","keyArray","split","blockName","undefined","deepCompare","changedObject","originalObject","parentPath","slice","join","allKeys","Set","Object","keys","diffs","path","changedPath","concat","getRevisionChanges","revision","previousRevision","cacheKey","JSON","stringify","has","get","changedValueTree","styles","color","typography","spacing","blocks","elements","settings","length","set","result","reduce","acc","curr","translation","includes","push"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-revisions/get-revision-changes.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\n\nconst globalStylesChangesCache = new Map();\nconst EMPTY_ARRAY = [];\n\nconst translationMap = {\n\tcaption: __( 'Caption' ),\n\tlink: __( 'Link' ),\n\tbutton: __( 'Button' ),\n\theading: __( 'Heading' ),\n\t'settings.color': __( 'Color settings' ),\n\t'settings.typography': __( 'Typography settings' ),\n\t'styles.color': __( 'Colors' ),\n\t'styles.spacing': __( 'Spacing' ),\n\t'styles.typography': __( 'Typography' ),\n};\n\nconst isObject = ( obj ) => obj !== null && typeof obj === 'object';\n\n/**\n * Get the translation for a given global styles key.\n * @param {string}                key        A key representing a path to a global style property or setting.\n * @param {Record<string,string>} blockNames A key/value pair object of block names and their rendered titles.\n * @return {string|undefined}                A translated key or undefined if no translation exists.\n */\nfunction getTranslation( key, blockNames ) {\n\tif ( translationMap[ key ] ) {\n\t\treturn translationMap[ key ];\n\t}\n\n\tconst keyArray = key.split( '.' );\n\n\tif ( keyArray?.[ 0 ] === 'blocks' ) {\n\t\tconst blockName = blockNames[ keyArray[ 1 ] ];\n\t\treturn blockName\n\t\t\t? sprintf(\n\t\t\t\t\t// translators: %s: block name.\n\t\t\t\t\t__( '%s block' ),\n\t\t\t\t\tblockName\n\t\t\t  )\n\t\t\t: keyArray[ 1 ];\n\t}\n\n\tif ( keyArray?.[ 0 ] === 'elements' ) {\n\t\treturn sprintf(\n\t\t\t// translators: %s: element name, e.g., heading button, link, caption.\n\t\t\t__( '%s element' ),\n\t\t\ttranslationMap[ keyArray[ 1 ] ]\n\t\t);\n\t}\n\n\treturn undefined;\n}\n\n/**\n * A deep comparison of two objects, optimized for comparing global styles.\n * @param {Object} changedObject  The changed object to compare.\n * @param {Object} originalObject The original object to compare against.\n * @param {string} parentPath     A key/value pair object of block names and their rendered titles.\n * @return {string[]}             An array of paths whose values have changed.\n */\nfunction deepCompare( changedObject, originalObject, parentPath = '' ) {\n\t// We have two non-object values to compare.\n\tif ( ! isObject( changedObject ) && ! isObject( originalObject ) ) {\n\t\t/*\n\t\t * Only return a path if the value has changed.\n\t\t * And then only the path name up to 2 levels deep.\n\t\t */\n\t\treturn changedObject !== originalObject\n\t\t\t? parentPath.split( '.' ).slice( 0, 2 ).join( '.' )\n\t\t\t: undefined;\n\t}\n\n\t// Enable comparison when an object doesn't have a corresponding property to compare.\n\tchangedObject = isObject( changedObject ) ? changedObject : {};\n\toriginalObject = isObject( originalObject ) ? originalObject : {};\n\n\tconst allKeys = new Set( [\n\t\t...Object.keys( changedObject ),\n\t\t...Object.keys( originalObject ),\n\t] );\n\n\tlet diffs = [];\n\tfor ( const key of allKeys ) {\n\t\tconst path = parentPath ? parentPath + '.' + key : key;\n\t\tconst changedPath = deepCompare(\n\t\t\tchangedObject[ key ],\n\t\t\toriginalObject[ key ],\n\t\t\tpath\n\t\t);\n\t\tif ( changedPath ) {\n\t\t\tdiffs = diffs.concat( changedPath );\n\t\t}\n\t}\n\treturn diffs;\n}\n\n/**\n * Get an array of translated summarized global styles changes.\n * Results are cached using a Map() key of `JSON.stringify( { revision, previousRevision } )`.\n *\n * @param {Object}                revision         The changed object to compare.\n * @param {Object}                previousRevision The original object to compare against.\n * @param {Record<string,string>} blockNames       A key/value pair object of block names and their rendered titles.\n * @return {string[]}                              An array of translated changes.\n */\nexport default function getRevisionChanges(\n\trevision,\n\tpreviousRevision,\n\tblockNames\n) {\n\tconst cacheKey = JSON.stringify( { revision, previousRevision } );\n\n\tif ( globalStylesChangesCache.has( cacheKey ) ) {\n\t\treturn globalStylesChangesCache.get( cacheKey );\n\t}\n\n\t/*\n\t * Compare the two revisions with normalized keys.\n\t * The order of these keys determines the order in which\n\t * they'll appear in the results.\n\t */\n\tconst changedValueTree = deepCompare(\n\t\t{\n\t\t\tstyles: {\n\t\t\t\tcolor: revision?.styles?.color,\n\t\t\t\ttypography: revision?.styles?.typography,\n\t\t\t\tspacing: revision?.styles?.spacing,\n\t\t\t},\n\t\t\tblocks: revision?.styles?.blocks,\n\t\t\telements: revision?.styles?.elements,\n\t\t\tsettings: revision?.settings,\n\t\t},\n\t\t{\n\t\t\tstyles: {\n\t\t\t\tcolor: previousRevision?.styles?.color,\n\t\t\t\ttypography: previousRevision?.styles?.typography,\n\t\t\t\tspacing: previousRevision?.styles?.spacing,\n\t\t\t},\n\t\t\tblocks: previousRevision?.styles?.blocks,\n\t\t\telements: previousRevision?.styles?.elements,\n\t\t\tsettings: previousRevision?.settings,\n\t\t}\n\t);\n\n\tif ( ! changedValueTree.length ) {\n\t\tglobalStylesChangesCache.set( cacheKey, EMPTY_ARRAY );\n\t\treturn EMPTY_ARRAY;\n\t}\n\n\t// Remove duplicate results.\n\tconst result = [ ...new Set( changedValueTree ) ]\n\t\t/*\n\t\t * Translate the keys.\n\t\t * Remove duplicate or empty translations.\n\t\t */\n\t\t.reduce( ( acc, curr ) => {\n\t\t\tconst translation = getTranslation( curr, blockNames );\n\t\t\tif ( translation && ! acc.includes( translation ) ) {\n\t\t\t\tacc.push( translation );\n\t\t\t}\n\t\t\treturn acc;\n\t\t}, [] );\n\n\tglobalStylesChangesCache.set( cacheKey, result );\n\n\treturn result;\n}\n"],"mappings":"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"}

package/build-module/components/global-styles/screen-revisions/index.js

@@ -3,7 +3,7 @@ import { createElement, Fragment } from "react";
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { Button, __experimentalUseNavigator as useNavigator, __experimentalConfirmDialog as ConfirmDialog, Spinner, __experimentalSpacer as Spacer } from '@wordpress/components';
+import { Button, __experimentalUseNavigator as useNavigator, __experimentalConfirmDialog as ConfirmDialog, Spinner } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { useContext, useState, useEffect } from '@wordpress/element';
@@ -113,7 +113,8 @@ function ScreenRevisions() {
     }
   }, [shouldSelectFirstItem, firstRevision]);
 
-  // Only display load button if there is a revision to load and it is different from the current editor styles.
+  // Only display load button if there is a revision to load,
+  // and it is different from the current editor styles.
   const isLoadButtonEnabled = !!currentlySelectedRevisionId && !selectedRevisionMatchesEditorStyles;
   const shouldShowRevisions = !isLoading && revisions.length;
   return createElement(Fragment, null, createElement(ScreenHeader, {
@@ -124,7 +125,7 @@ function ScreenRevisions() {
     onBack: onCloseRevisions
   }), isLoading && createElement(Spinner, {
     className: "edit-site-global-styles-screen-revisions__loading"
-  }), shouldShowRevisions ? createElement(Fragment, null, createElement(Revisions, {
+  }), shouldShowRevisions && createElement(Fragment, null, createElement(Revisions, {
     blocks: blocks,
     userConfig: currentlySelectedRevision,
     onClose: onCloseRevisions
@@ -133,7 +134,8 @@ function ScreenRevisions() {
   }, createElement(RevisionsButtons, {
     onChange: selectRevision,
     selectedRevisionId: currentlySelectedRevisionId,
-    userRevisions: revisions
+    userRevisions: revisions,
+    canApplyRevision: isLoadButtonEnabled
   }), isLoadButtonEnabled && createElement(SidebarFixedBottom, null, createElement(Button, {
     variant: "primary",
     className: "edit-site-global-styles-screen-revisions__button",
@@ -150,13 +152,7 @@ function ScreenRevisions() {
     confirmButtonText: __('Apply'),
     onConfirm: () => restoreRevision(currentlySelectedRevision),
     onCancel: () => setIsLoadingRevisionWithUnsavedChanges(false)
-  }, __('Any unsaved changes will be lost when you apply this revision.'))) : createElement(Spacer, {
-    marginX: 4,
-    "data-testid": "global-styles-no-revisions"
-  },
-  // Adding an existing translation here in case these changes are shipped to WordPress 6.3.
-  // Later we could update to something better, e.g., "There are currently no style revisions.".
-  __('No results found.')));
+  }, __('Any unsaved changes will be lost when you apply this revision.'))));
 }
 export default ScreenRevisions;
 //# sourceMappingURL=index.js.map

package/build-module/components/global-styles/screen-revisions/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["__","sprintf","Button","__experimentalUseNavigator","useNavigator","__experimentalConfirmDialog","ConfirmDialog","Spinner","__experimentalSpacer","Spacer","useSelect","useDispatch","store","coreStore","useContext","useState","useEffect","privateApis","blockEditorPrivateApis","blockEditorStore","ScreenHeader","unlock","Revisions","SidebarFixedBottom","editSiteStore","useGlobalStylesRevisions","RevisionsButtons","GlobalStylesContext","areGlobalStyleConfigsEqual","ScreenRevisions","goTo","user","currentEditorGlobalStyles","setUserConfig","blocks","editorCanvasContainerView","revisionsCount","select","getEntityRecord","__experimentalGetCurrentGlobalStylesId","__experimentalGetDirtyEntityRecords","isDirty","length","globalStylesId","globalStyles","undefined","_revisionsCount","_links","count","getEditorCanvasContainerView","getBlocks","revisions","isLoading","hasUnsavedChanges","currentlySelectedRevision","setCurrentlySelectedRevision","isLoadingRevisionWithUnsavedChanges","setIsLoadingRevisionWithUnsavedChanges","setEditorCanvasContainerView","selectedRevisionMatchesEditorStyles","onCloseRevisions","restoreRevision","revision","styles","settings","selectRevision","id","firstRevision","currentlySelectedRevisionId","shouldSelectFirstItem","isLoadButtonEnabled","shouldShowRevisions","createElement","Fragment","title","description","onBack","className","userConfig","onClose","onChange","selectedRevisionId","userRevisions","variant","disabled","onClick","isOpen","confirmButtonText","onConfirm","onCancel","marginX"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-revisions/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tButton,\n\t__experimentalUseNavigator as useNavigator,\n\t__experimentalConfirmDialog as ConfirmDialog,\n\tSpinner,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useContext, useState, useEffect } from '@wordpress/element';\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from '../header';\nimport { unlock } from '../../../lock-unlock';\nimport Revisions from '../../revisions';\nimport SidebarFixedBottom from '../../sidebar-edit-mode/sidebar-fixed-bottom';\nimport { store as editSiteStore } from '../../../store';\nimport useGlobalStylesRevisions from './use-global-styles-revisions';\nimport RevisionsButtons from './revisions-buttons';\n\nconst { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(\n\tblockEditorPrivateApis\n);\n\nfunction ScreenRevisions() {\n\tconst { goTo } = useNavigator();\n\tconst { user: currentEditorGlobalStyles, setUserConfig } =\n\t\tuseContext( GlobalStylesContext );\n\tconst { blocks, editorCanvasContainerView, revisionsCount } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetEntityRecord,\n\t\t\t\t__experimentalGetCurrentGlobalStylesId,\n\t\t\t\t__experimentalGetDirtyEntityRecords,\n\t\t\t} = select( coreStore );\n\t\t\tconst isDirty = __experimentalGetDirtyEntityRecords().length > 0;\n\t\t\tconst globalStylesId = __experimentalGetCurrentGlobalStylesId();\n\t\t\tconst globalStyles = globalStylesId\n\t\t\t\t? getEntityRecord( 'root', 'globalStyles', globalStylesId )\n\t\t\t\t: undefined;\n\t\t\tlet _revisionsCount =\n\t\t\t\tglobalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count || 0;\n\t\t\t// one for the reset item.\n\t\t\t_revisionsCount++;\n\t\t\t// one for any dirty changes (unsaved).\n\t\t\tif ( isDirty ) {\n\t\t\t\t_revisionsCount++;\n\t\t\t}\n\t\t\treturn {\n\t\t\t\teditorCanvasContainerView: unlock(\n\t\t\t\t\tselect( editSiteStore )\n\t\t\t\t).getEditorCanvasContainerView(),\n\t\t\t\tblocks: select( blockEditorStore ).getBlocks(),\n\t\t\t\trevisionsCount: _revisionsCount,\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\tconst { revisions, isLoading, hasUnsavedChanges } =\n\t\tuseGlobalStylesRevisions();\n\tconst [ currentlySelectedRevision, setCurrentlySelectedRevision ] =\n\t\tuseState( currentEditorGlobalStyles );\n\tconst [\n\t\tisLoadingRevisionWithUnsavedChanges,\n\t\tsetIsLoadingRevisionWithUnsavedChanges,\n\t] = useState( false );\n\tconst { setEditorCanvasContainerView } = unlock(\n\t\tuseDispatch( editSiteStore )\n\t);\n\tconst selectedRevisionMatchesEditorStyles = areGlobalStyleConfigsEqual(\n\t\tcurrentlySelectedRevision,\n\t\tcurrentEditorGlobalStyles\n\t);\n\n\tconst onCloseRevisions = () => {\n\t\tgoTo( '/' ); // Return to global styles main panel.\n\t\tsetEditorCanvasContainerView( undefined );\n\t};\n\n\tconst restoreRevision = ( revision ) => {\n\t\tsetUserConfig( () => ( {\n\t\t\tstyles: revision?.styles,\n\t\t\tsettings: revision?.settings,\n\t\t} ) );\n\t\tsetIsLoadingRevisionWithUnsavedChanges( false );\n\t\tonCloseRevisions();\n\t};\n\n\tconst selectRevision = ( revision ) => {\n\t\tsetCurrentlySelectedRevision( {\n\t\t\tstyles: revision?.styles || {},\n\t\t\tsettings: revision?.settings || {},\n\t\t\tid: revision?.id,\n\t\t} );\n\t};\n\n\tuseEffect( () => {\n\t\tif ( editorCanvasContainerView !== 'global-styles-revisions' ) {\n\t\t\tgoTo( '/' ); // Return to global styles main panel.\n\t\t\tsetEditorCanvasContainerView( editorCanvasContainerView );\n\t\t}\n\t}, [ editorCanvasContainerView ] );\n\n\tconst firstRevision = revisions[ 0 ];\n\tconst currentlySelectedRevisionId = currentlySelectedRevision?.id;\n\tconst shouldSelectFirstItem =\n\t\t!! firstRevision?.id &&\n\t\t! selectedRevisionMatchesEditorStyles &&\n\t\t! currentlySelectedRevisionId;\n\n\tuseEffect( () => {\n\t\t/*\n\t\t * Ensure that the first item is selected and loaded into the preview pane\n\t\t * when no revision is selected and the selected styles don't match the current editor styles.\n\t\t * This is required in case editor styles are changed outside the revisions panel,\n\t\t * e.g., via the reset styles function of useGlobalStylesReset().\n\t\t * See: https://github.com/WordPress/gutenberg/issues/55866\n\t\t */\n\t\tif ( shouldSelectFirstItem ) {\n\t\t\tsetCurrentlySelectedRevision( {\n\t\t\t\tstyles: firstRevision?.styles || {},\n\t\t\t\tsettings: firstRevision?.settings || {},\n\t\t\t\tid: firstRevision?.id,\n\t\t\t} );\n\t\t}\n\t}, [ shouldSelectFirstItem, firstRevision ] );\n\n\t// Only display load button if there is a revision to load and it is different from the current editor styles.\n\tconst isLoadButtonEnabled =\n\t\t!! currentlySelectedRevisionId && ! selectedRevisionMatchesEditorStyles;\n\tconst shouldShowRevisions = ! isLoading && revisions.length;\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={\n\t\t\t\t\trevisionsCount &&\n\t\t\t\t\t// translators: %s: number of revisions.\n\t\t\t\t\tsprintf( __( 'Revisions (%s)' ), revisionsCount )\n\t\t\t\t}\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Click on previously saved styles to preview them. To restore a selected version to the editor, hit \"Apply.\" When you\\'re ready, use the Save button to save your changes.'\n\t\t\t\t) }\n\t\t\t\tonBack={ onCloseRevisions }\n\t\t\t/>\n\t\t\t{ isLoading && (\n\t\t\t\t<Spinner className=\"edit-site-global-styles-screen-revisions__loading\" />\n\t\t\t) }\n\t\t\t{ shouldShowRevisions ? (\n\t\t\t\t<>\n\t\t\t\t\t<Revisions\n\t\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\t\tuserConfig={ currentlySelectedRevision }\n\t\t\t\t\t\tonClose={ onCloseRevisions }\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"edit-site-global-styles-screen-revisions\">\n\t\t\t\t\t\t<RevisionsButtons\n\t\t\t\t\t\t\tonChange={ selectRevision }\n\t\t\t\t\t\t\tselectedRevisionId={ currentlySelectedRevisionId }\n\t\t\t\t\t\t\tuserRevisions={ revisions }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ isLoadButtonEnabled && (\n\t\t\t\t\t\t\t<SidebarFixedBottom>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-screen-revisions__button\"\n\t\t\t\t\t\t\t\t\tdisabled={\n\t\t\t\t\t\t\t\t\t\t! currentlySelectedRevisionId ||\n\t\t\t\t\t\t\t\t\t\tcurrentlySelectedRevisionId ===\n\t\t\t\t\t\t\t\t\t\t\t'unsaved'\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tif ( hasUnsavedChanges ) {\n\t\t\t\t\t\t\t\t\t\t\tsetIsLoadingRevisionWithUnsavedChanges(\n\t\t\t\t\t\t\t\t\t\t\t\ttrue\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\trestoreRevision(\n\t\t\t\t\t\t\t\t\t\t\t\tcurrentlySelectedRevision\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ currentlySelectedRevisionId === 'parent'\n\t\t\t\t\t\t\t\t\t\t? __( 'Reset to defaults' )\n\t\t\t\t\t\t\t\t\t\t: __( 'Apply' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</SidebarFixedBottom>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</div>\n\t\t\t\t\t{ isLoadingRevisionWithUnsavedChanges && (\n\t\t\t\t\t\t<ConfirmDialog\n\t\t\t\t\t\t\tisOpen={ isLoadingRevisionWithUnsavedChanges }\n\t\t\t\t\t\t\tconfirmButtonText={ __( 'Apply' ) }\n\t\t\t\t\t\t\tonConfirm={ () =>\n\t\t\t\t\t\t\t\trestoreRevision( currentlySelectedRevision )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonCancel={ () =>\n\t\t\t\t\t\t\t\tsetIsLoadingRevisionWithUnsavedChanges( false )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Any unsaved changes will be lost when you apply this revision.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</ConfirmDialog>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<Spacer marginX={ 4 } data-testid=\"global-styles-no-revisions\">\n\t\t\t\t\t{\n\t\t\t\t\t\t// Adding an existing translation here in case these changes are shipped to WordPress 6.3.\n\t\t\t\t\t\t// Later we could update to something better, e.g., \"There are currently no style revisions.\".\n\t\t\t\t\t\t__( 'No results found.' )\n\t\t\t\t\t}\n\t\t\t\t</Spacer>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenRevisions;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AAC7C,SACCC,MAAM,EACNC,0BAA0B,IAAIC,YAAY,EAC1CC,2BAA2B,IAAIC,aAAa,EAC5CC,OAAO,EACPC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;AAC9B,SAASC,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SAASC,KAAK,IAAIC,SAAS,QAAQ,sBAAsB;AACzD,SAASC,UAAU,EAAEC,QAAQ,EAAEC,SAAS,QAAQ,oBAAoB;AACpE,SACCC,WAAW,IAAIC,sBAAsB,EACrCN,KAAK,IAAIO,gBAAgB,QACnB,yBAAyB;;AAEhC;AACA;AACA;AACA,OAAOC,YAAY,MAAM,WAAW;AACpC,SAASC,MAAM,QAAQ,sBAAsB;AAC7C,OAAOC,SAAS,MAAM,iBAAiB;AACvC,OAAOC,kBAAkB,MAAM,8CAA8C;AAC7E,SAASX,KAAK,IAAIY,aAAa,QAAQ,gBAAgB;AACvD,OAAOC,wBAAwB,MAAM,+BAA+B;AACpE,OAAOC,gBAAgB,MAAM,qBAAqB;AAElD,MAAM;EAAEC,mBAAmB;EAAEC;AAA2B,CAAC,GAAGP,MAAM,CACjEH,sBACD,CAAC;AAED,SAASW,eAAeA,CAAA,EAAG;EAC1B,MAAM;IAAEC;EAAK,CAAC,GAAG1B,YAAY,CAAC,CAAC;EAC/B,MAAM;IAAE2B,IAAI,EAAEC,yBAAyB;IAAEC;EAAc,CAAC,GACvDnB,UAAU,CAAEa,mBAAoB,CAAC;EAClC,MAAM;IAAEO,MAAM;IAAEC,yBAAyB;IAAEC;EAAe,CAAC,GAAG1B,SAAS,CACpE2B,MAAM,IAAM;IACb,MAAM;MACLC,eAAe;MACfC,sCAAsC;MACtCC;IACD,CAAC,GAAGH,MAAM,CAAExB,SAAU,CAAC;IACvB,MAAM4B,OAAO,GAAGD,mCAAmC,CAAC,CAAC,CAACE,MAAM,GAAG,CAAC;IAChE,MAAMC,cAAc,GAAGJ,sCAAsC,CAAC,CAAC;IAC/D,MAAMK,YAAY,GAAGD,cAAc,GAChCL,eAAe,CAAE,MAAM,EAAE,cAAc,EAAEK,cAAe,CAAC,GACzDE,SAAS;IACZ,IAAIC,eAAe,GAClBF,YAAY,EAAEG,MAAM,GAAI,iBAAiB,CAAE,GAAI,CAAC,CAAE,EAAEC,KAAK,IAAI,CAAC;IAC/D;IACAF,eAAe,EAAE;IACjB;IACA,IAAKL,OAAO,EAAG;MACdK,eAAe,EAAE;IAClB;IACA,OAAO;MACNX,yBAAyB,EAAEd,MAAM,CAChCgB,MAAM,CAAEb,aAAc,CACvB,CAAC,CAACyB,4BAA4B,CAAC,CAAC;MAChCf,MAAM,EAAEG,MAAM,CAAElB,gBAAiB,CAAC,CAAC+B,SAAS,CAAC,CAAC;MAC9Cd,cAAc,EAAEU;IACjB,CAAC;EACF,CAAC,EACD,EACD,CAAC;EACD,MAAM;IAAEK,SAAS;IAAEC,SAAS;IAAEC;EAAkB,CAAC,GAChD5B,wBAAwB,CAAC,CAAC;EAC3B,MAAM,CAAE6B,yBAAyB,EAAEC,4BAA4B,CAAE,GAChExC,QAAQ,CAAEiB,yBAA0B,CAAC;EACtC,MAAM,CACLwB,mCAAmC,EACnCC,sCAAsC,CACtC,GAAG1C,QAAQ,CAAE,KAAM,CAAC;EACrB,MAAM;IAAE2C;EAA6B,CAAC,GAAGrC,MAAM,CAC9CV,WAAW,CAAEa,aAAc,CAC5B,CAAC;EACD,MAAMmC,mCAAmC,GAAG/B,0BAA0B,CACrE0B,yBAAyB,EACzBtB,yBACD,CAAC;EAED,MAAM4B,gBAAgB,GAAGA,CAAA,KAAM;IAC9B9B,IAAI,CAAE,GAAI,CAAC,CAAC,CAAC;IACb4B,4BAA4B,CAAEb,SAAU,CAAC;EAC1C,CAAC;EAED,MAAMgB,eAAe,GAAKC,QAAQ,IAAM;IACvC7B,aAAa,CAAE,OAAQ;MACtB8B,MAAM,EAAED,QAAQ,EAAEC,MAAM;MACxBC,QAAQ,EAAEF,QAAQ,EAAEE;IACrB,CAAC,CAAG,CAAC;IACLP,sCAAsC,CAAE,KAAM,CAAC;IAC/CG,gBAAgB,CAAC,CAAC;EACnB,CAAC;EAED,MAAMK,cAAc,GAAKH,QAAQ,IAAM;IACtCP,4BAA4B,CAAE;MAC7BQ,MAAM,EAAED,QAAQ,EAAEC,MAAM,IAAI,CAAC,CAAC;MAC9BC,QAAQ,EAAEF,QAAQ,EAAEE,QAAQ,IAAI,CAAC,CAAC;MAClCE,EAAE,EAAEJ,QAAQ,EAAEI;IACf,CAAE,CAAC;EACJ,CAAC;EAEDlD,SAAS,CAAE,MAAM;IAChB,IAAKmB,yBAAyB,KAAK,yBAAyB,EAAG;MAC9DL,IAAI,CAAE,GAAI,CAAC,CAAC,CAAC;MACb4B,4BAA4B,CAAEvB,yBAA0B,CAAC;IAC1D;EACD,CAAC,EAAE,CAAEA,yBAAyB,CAAG,CAAC;EAElC,MAAMgC,aAAa,GAAGhB,SAAS,CAAE,CAAC,CAAE;EACpC,MAAMiB,2BAA2B,GAAGd,yBAAyB,EAAEY,EAAE;EACjE,MAAMG,qBAAqB,GAC1B,CAAC,CAAEF,aAAa,EAAED,EAAE,IACpB,CAAEP,mCAAmC,IACrC,CAAES,2BAA2B;EAE9BpD,SAAS,CAAE,MAAM;IAChB;AACF;AACA;AACA;AACA;AACA;AACA;IACE,IAAKqD,qBAAqB,EAAG;MAC5Bd,4BAA4B,CAAE;QAC7BQ,MAAM,EAAEI,aAAa,EAAEJ,MAAM,IAAI,CAAC,CAAC;QACnCC,QAAQ,EAAEG,aAAa,EAAEH,QAAQ,IAAI,CAAC,CAAC;QACvCE,EAAE,EAAEC,aAAa,EAAED;MACpB,CAAE,CAAC;IACJ;EACD,CAAC,EAAE,CAAEG,qBAAqB,EAAEF,aAAa,CAAG,CAAC;;EAE7C;EACA,MAAMG,mBAAmB,GACxB,CAAC,CAAEF,2BAA2B,IAAI,CAAET,mCAAmC;EACxE,MAAMY,mBAAmB,GAAG,CAAEnB,SAAS,IAAID,SAAS,CAACT,MAAM;EAE3D,OACC8B,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACpD,YAAY;IACZsD,KAAK,EACJtC,cAAc;IACd;IACAnC,OAAO,CAAED,EAAE,CAAE,gBAAiB,CAAC,EAAEoC,cAAe,CAChD;IACDuC,WAAW,EAAG3E,EAAE,CACf,2KACD,CAAG;IACH4E,MAAM,EAAGhB;EAAkB,CAC3B,CAAC,EACAR,SAAS,IACVoB,aAAA,CAACjE,OAAO;IAACsE,SAAS,EAAC;EAAmD,CAAE,CACxE,EACCN,mBAAmB,GACpBC,aAAA,CAAAC,QAAA,QACCD,aAAA,CAAClD,SAAS;IACTY,MAAM,EAAGA,MAAQ;IACjB4C,UAAU,EAAGxB,yBAA2B;IACxCyB,OAAO,EAAGnB;EAAkB,CAC5B,CAAC,EACFY,aAAA;IAAKK,SAAS,EAAC;EAA0C,GACxDL,aAAA,CAAC9C,gBAAgB;IAChBsD,QAAQ,EAAGf,cAAgB;IAC3BgB,kBAAkB,EAAGb,2BAA6B;IAClDc,aAAa,EAAG/B;EAAW,CAC3B,CAAC,EACAmB,mBAAmB,IACpBE,aAAA,CAACjD,kBAAkB,QAClBiD,aAAA,CAACtE,MAAM;IACNiF,OAAO,EAAC,SAAS;IACjBN,SAAS,EAAC,kDAAkD;IAC5DO,QAAQ,EACP,CAAEhB,2BAA2B,IAC7BA,2BAA2B,KAC1B,SACD;IACDiB,OAAO,EAAGA,CAAA,KAAM;MACf,IAAKhC,iBAAiB,EAAG;QACxBI,sCAAsC,CACrC,IACD,CAAC;MACF,CAAC,MAAM;QACNI,eAAe,CACdP,yBACD,CAAC;MACF;IACD;EAAG,GAEDc,2BAA2B,KAAK,QAAQ,GACvCpE,EAAE,CAAE,mBAAoB,CAAC,GACzBA,EAAE,CAAE,OAAQ,CACR,CACW,CAEjB,CAAC,EACJwD,mCAAmC,IACpCgB,aAAA,CAAClE,aAAa;IACbgF,MAAM,EAAG9B,mCAAqC;IAC9C+B,iBAAiB,EAAGvF,EAAE,CAAE,OAAQ,CAAG;IACnCwF,SAAS,EAAGA,CAAA,KACX3B,eAAe,CAAEP,yBAA0B,CAC3C;IACDmC,QAAQ,EAAGA,CAAA,KACVhC,sCAAsC,CAAE,KAAM;EAC9C,GAECzD,EAAE,CACH,gEACD,CACc,CAEf,CAAC,GAEHwE,aAAA,CAAC/D,MAAM;IAACiF,OAAO,EAAG,CAAG;IAAC,eAAY;EAA4B;EAE5D;EACA;EACA1F,EAAE,CAAE,mBAAoB,CAElB,CAER,CAAC;AAEL;AAEA,eAAe6B,eAAe"}
+{"version":3,"names":["__","sprintf","Button","__experimentalUseNavigator","useNavigator","__experimentalConfirmDialog","ConfirmDialog","Spinner","useSelect","useDispatch","store","coreStore","useContext","useState","useEffect","privateApis","blockEditorPrivateApis","blockEditorStore","ScreenHeader","unlock","Revisions","SidebarFixedBottom","editSiteStore","useGlobalStylesRevisions","RevisionsButtons","GlobalStylesContext","areGlobalStyleConfigsEqual","ScreenRevisions","goTo","user","currentEditorGlobalStyles","setUserConfig","blocks","editorCanvasContainerView","revisionsCount","select","getEntityRecord","__experimentalGetCurrentGlobalStylesId","__experimentalGetDirtyEntityRecords","isDirty","length","globalStylesId","globalStyles","undefined","_revisionsCount","_links","count","getEditorCanvasContainerView","getBlocks","revisions","isLoading","hasUnsavedChanges","currentlySelectedRevision","setCurrentlySelectedRevision","isLoadingRevisionWithUnsavedChanges","setIsLoadingRevisionWithUnsavedChanges","setEditorCanvasContainerView","selectedRevisionMatchesEditorStyles","onCloseRevisions","restoreRevision","revision","styles","settings","selectRevision","id","firstRevision","currentlySelectedRevisionId","shouldSelectFirstItem","isLoadButtonEnabled","shouldShowRevisions","createElement","Fragment","title","description","onBack","className","userConfig","onClose","onChange","selectedRevisionId","userRevisions","canApplyRevision","variant","disabled","onClick","isOpen","confirmButtonText","onConfirm","onCancel"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-revisions/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tButton,\n\t__experimentalUseNavigator as useNavigator,\n\t__experimentalConfirmDialog as ConfirmDialog,\n\tSpinner,\n} from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useContext, useState, useEffect } from '@wordpress/element';\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from '../header';\nimport { unlock } from '../../../lock-unlock';\nimport Revisions from '../../revisions';\nimport SidebarFixedBottom from '../../sidebar-edit-mode/sidebar-fixed-bottom';\nimport { store as editSiteStore } from '../../../store';\nimport useGlobalStylesRevisions from './use-global-styles-revisions';\nimport RevisionsButtons from './revisions-buttons';\n\nconst { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(\n\tblockEditorPrivateApis\n);\n\nfunction ScreenRevisions() {\n\tconst { goTo } = useNavigator();\n\tconst { user: currentEditorGlobalStyles, setUserConfig } =\n\t\tuseContext( GlobalStylesContext );\n\tconst { blocks, editorCanvasContainerView, revisionsCount } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetEntityRecord,\n\t\t\t\t__experimentalGetCurrentGlobalStylesId,\n\t\t\t\t__experimentalGetDirtyEntityRecords,\n\t\t\t} = select( coreStore );\n\t\t\tconst isDirty = __experimentalGetDirtyEntityRecords().length > 0;\n\t\t\tconst globalStylesId = __experimentalGetCurrentGlobalStylesId();\n\t\t\tconst globalStyles = globalStylesId\n\t\t\t\t? getEntityRecord( 'root', 'globalStyles', globalStylesId )\n\t\t\t\t: undefined;\n\t\t\tlet _revisionsCount =\n\t\t\t\tglobalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count || 0;\n\t\t\t// one for the reset item.\n\t\t\t_revisionsCount++;\n\t\t\t// one for any dirty changes (unsaved).\n\t\t\tif ( isDirty ) {\n\t\t\t\t_revisionsCount++;\n\t\t\t}\n\t\t\treturn {\n\t\t\t\teditorCanvasContainerView: unlock(\n\t\t\t\t\tselect( editSiteStore )\n\t\t\t\t).getEditorCanvasContainerView(),\n\t\t\t\tblocks: select( blockEditorStore ).getBlocks(),\n\t\t\t\trevisionsCount: _revisionsCount,\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\tconst { revisions, isLoading, hasUnsavedChanges } =\n\t\tuseGlobalStylesRevisions();\n\tconst [ currentlySelectedRevision, setCurrentlySelectedRevision ] =\n\t\tuseState( currentEditorGlobalStyles );\n\tconst [\n\t\tisLoadingRevisionWithUnsavedChanges,\n\t\tsetIsLoadingRevisionWithUnsavedChanges,\n\t] = useState( false );\n\tconst { setEditorCanvasContainerView } = unlock(\n\t\tuseDispatch( editSiteStore )\n\t);\n\tconst selectedRevisionMatchesEditorStyles = areGlobalStyleConfigsEqual(\n\t\tcurrentlySelectedRevision,\n\t\tcurrentEditorGlobalStyles\n\t);\n\n\tconst onCloseRevisions = () => {\n\t\tgoTo( '/' ); // Return to global styles main panel.\n\t\tsetEditorCanvasContainerView( undefined );\n\t};\n\n\tconst restoreRevision = ( revision ) => {\n\t\tsetUserConfig( () => ( {\n\t\t\tstyles: revision?.styles,\n\t\t\tsettings: revision?.settings,\n\t\t} ) );\n\t\tsetIsLoadingRevisionWithUnsavedChanges( false );\n\t\tonCloseRevisions();\n\t};\n\n\tconst selectRevision = ( revision ) => {\n\t\tsetCurrentlySelectedRevision( {\n\t\t\tstyles: revision?.styles || {},\n\t\t\tsettings: revision?.settings || {},\n\t\t\tid: revision?.id,\n\t\t} );\n\t};\n\n\tuseEffect( () => {\n\t\tif ( editorCanvasContainerView !== 'global-styles-revisions' ) {\n\t\t\tgoTo( '/' ); // Return to global styles main panel.\n\t\t\tsetEditorCanvasContainerView( editorCanvasContainerView );\n\t\t}\n\t}, [ editorCanvasContainerView ] );\n\n\tconst firstRevision = revisions[ 0 ];\n\tconst currentlySelectedRevisionId = currentlySelectedRevision?.id;\n\tconst shouldSelectFirstItem =\n\t\t!! firstRevision?.id &&\n\t\t! selectedRevisionMatchesEditorStyles &&\n\t\t! currentlySelectedRevisionId;\n\n\tuseEffect( () => {\n\t\t/*\n\t\t * Ensure that the first item is selected and loaded into the preview pane\n\t\t * when no revision is selected and the selected styles don't match the current editor styles.\n\t\t * This is required in case editor styles are changed outside the revisions panel,\n\t\t * e.g., via the reset styles function of useGlobalStylesReset().\n\t\t * See: https://github.com/WordPress/gutenberg/issues/55866\n\t\t */\n\t\tif ( shouldSelectFirstItem ) {\n\t\t\tsetCurrentlySelectedRevision( {\n\t\t\t\tstyles: firstRevision?.styles || {},\n\t\t\t\tsettings: firstRevision?.settings || {},\n\t\t\t\tid: firstRevision?.id,\n\t\t\t} );\n\t\t}\n\t}, [ shouldSelectFirstItem, firstRevision ] );\n\n\t// Only display load button if there is a revision to load,\n\t// and it is different from the current editor styles.\n\tconst isLoadButtonEnabled =\n\t\t!! currentlySelectedRevisionId && ! selectedRevisionMatchesEditorStyles;\n\tconst shouldShowRevisions = ! isLoading && revisions.length;\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={\n\t\t\t\t\trevisionsCount &&\n\t\t\t\t\t// translators: %s: number of revisions.\n\t\t\t\t\tsprintf( __( 'Revisions (%s)' ), revisionsCount )\n\t\t\t\t}\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Click on previously saved styles to preview them. To restore a selected version to the editor, hit \"Apply.\" When you\\'re ready, use the Save button to save your changes.'\n\t\t\t\t) }\n\t\t\t\tonBack={ onCloseRevisions }\n\t\t\t/>\n\t\t\t{ isLoading && (\n\t\t\t\t<Spinner className=\"edit-site-global-styles-screen-revisions__loading\" />\n\t\t\t) }\n\t\t\t{ shouldShowRevisions && (\n\t\t\t\t<>\n\t\t\t\t\t<Revisions\n\t\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\t\tuserConfig={ currentlySelectedRevision }\n\t\t\t\t\t\tonClose={ onCloseRevisions }\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"edit-site-global-styles-screen-revisions\">\n\t\t\t\t\t\t<RevisionsButtons\n\t\t\t\t\t\t\tonChange={ selectRevision }\n\t\t\t\t\t\t\tselectedRevisionId={ currentlySelectedRevisionId }\n\t\t\t\t\t\t\tuserRevisions={ revisions }\n\t\t\t\t\t\t\tcanApplyRevision={ isLoadButtonEnabled }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ isLoadButtonEnabled && (\n\t\t\t\t\t\t\t<SidebarFixedBottom>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-screen-revisions__button\"\n\t\t\t\t\t\t\t\t\tdisabled={\n\t\t\t\t\t\t\t\t\t\t! currentlySelectedRevisionId ||\n\t\t\t\t\t\t\t\t\t\tcurrentlySelectedRevisionId ===\n\t\t\t\t\t\t\t\t\t\t\t'unsaved'\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tif ( hasUnsavedChanges ) {\n\t\t\t\t\t\t\t\t\t\t\tsetIsLoadingRevisionWithUnsavedChanges(\n\t\t\t\t\t\t\t\t\t\t\t\ttrue\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\trestoreRevision(\n\t\t\t\t\t\t\t\t\t\t\t\tcurrentlySelectedRevision\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ currentlySelectedRevisionId === 'parent'\n\t\t\t\t\t\t\t\t\t\t? __( 'Reset to defaults' )\n\t\t\t\t\t\t\t\t\t\t: __( 'Apply' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</SidebarFixedBottom>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</div>\n\t\t\t\t\t{ isLoadingRevisionWithUnsavedChanges && (\n\t\t\t\t\t\t<ConfirmDialog\n\t\t\t\t\t\t\tisOpen={ isLoadingRevisionWithUnsavedChanges }\n\t\t\t\t\t\t\tconfirmButtonText={ __( 'Apply' ) }\n\t\t\t\t\t\t\tonConfirm={ () =>\n\t\t\t\t\t\t\t\trestoreRevision( currentlySelectedRevision )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonCancel={ () =>\n\t\t\t\t\t\t\t\tsetIsLoadingRevisionWithUnsavedChanges( false )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Any unsaved changes will be lost when you apply this revision.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</ConfirmDialog>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenRevisions;\n"],"mappings":"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"}

package/build-module/components/global-styles/screen-revisions/revisions-buttons.js

@@ -7,32 +7,66 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { getBlockTypes } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import getRevisionChanges from './get-revision-changes';
 const DAY_IN_MILLISECONDS = 60 * 60 * 1000 * 24;
+const MAX_CHANGES = 7;
+function ChangesSummary({
+  revision,
+  previousRevision,
+  blockNames
+}) {
+  const changes = getRevisionChanges(revision, previousRevision, blockNames);
+  const changesLength = changes.length;
+  if (!changesLength) {
+    return null;
+  }
+
+  // Truncate to `n` results if necessary.
+  if (changesLength > MAX_CHANGES) {
+    const deleteCount = changesLength - MAX_CHANGES;
+    const andMoreText = sprintf(
+    // translators: %d: number of global styles changes that are not displayed in the UI.
+    _n('…and %d more change.', '…and %d more changes.', deleteCount), deleteCount);
+    changes.splice(MAX_CHANGES, deleteCount, andMoreText);
+  }
+  return createElement("span", {
+    "data-testid": "global-styles-revision-changes",
+    className: "edit-site-global-styles-screen-revisions__changes"
+  }, changes.join(', '));
+}
 
 /**
  * Returns a button label for the revision.
  *
  * @param {string|number} id                    A revision object.
- * @param {boolean}       isLatest              Whether the revision is the most current.
  * @param {string}        authorDisplayName     Author name.
  * @param {string}        formattedModifiedDate Revision modified date formatted.
+ * @param {boolean}       areStylesEqual        Whether the revision matches the current editor styles.
  * @return {string} Translated label.
  */
-function getRevisionLabel(id, isLatest, authorDisplayName, formattedModifiedDate) {
+function getRevisionLabel(id, authorDisplayName, formattedModifiedDate, areStylesEqual) {
   if ('parent' === id) {
     return __('Reset the styles to the theme defaults');
   }
   if ('unsaved' === id) {
-    return sprintf( /* translators: %s author display name */
+    return sprintf( /* translators: %s: author display name */
     __('Unsaved changes by %s'), authorDisplayName);
   }
-  return isLatest ? sprintf( /* translators: %1$s author display name, %2$s: revision creation date */
-  __('Changes saved by %1$s on %2$s (current)'), authorDisplayName, formattedModifiedDate) : sprintf( /* translators: %1$s author display name, %2$s: revision creation date */
+  return areStylesEqual ? sprintf(
+  // translators: %1$s: author display name, %2$s: revision creation date.
+  __('Changes saved by %1$s on %2$s. This revision matches current editor styles.'), authorDisplayName, formattedModifiedDate) : sprintf(
+  // translators: %1$s: author display name, %2$s: revision creation date.
   __('Changes saved by %1$s on %2$s'), authorDisplayName, formattedModifiedDate);
 }
 
@@ -50,7 +84,8 @@ function getRevisionLabel(id, isLatest, authorDisplayName, formattedModifiedDate
 function RevisionsButtons({
   userRevisions,
   selectedRevisionId,
-  onChange
+  onChange,
+  canApplyRevision
 }) {
   const {
     currentThemeName,
@@ -66,9 +101,18 @@ function RevisionsButtons({
       currentUser: getCurrentUser()
     };
   }, []);
+  const blockNames = useMemo(() => {
+    const blockTypes = getBlockTypes();
+    return blockTypes.reduce((accumulator, {
+      name,
+      title
+    }) => {
+      accumulator[name] = title;
+      return accumulator;
+    }, {});
+  }, []);
   const dateNowInMs = getDate().getTime();
   const {
-    date: dateFormat,
     datetimeAbbreviated
   } = getSettings().formats;
   return createElement("ol", {
@@ -78,7 +122,6 @@ function RevisionsButtons({
   }, userRevisions.map((revision, index) => {
     const {
       id,
-      isLatest,
       author,
       modified
     } = revision;
@@ -87,14 +130,17 @@ function RevisionsButtons({
     const revisionAuthor = isUnsaved ? currentUser : author;
     const authorDisplayName = revisionAuthor?.name || __('User');
     const authorAvatar = revisionAuthor?.avatar_urls?.['48'];
-    const isSelected = selectedRevisionId ? selectedRevisionId === id : index === 0;
+    const isFirstItem = index === 0;
+    const isSelected = selectedRevisionId ? selectedRevisionId === id : isFirstItem;
+    const areStylesEqual = !canApplyRevision && isSelected;
     const isReset = 'parent' === id;
     const modifiedDate = getDate(modified);
-    const displayDate = modified && dateNowInMs - modifiedDate.getTime() > DAY_IN_MILLISECONDS ? dateI18n(dateFormat, modifiedDate) : humanTimeDiff(modified);
-    const revisionLabel = getRevisionLabel(id, isLatest, authorDisplayName, dateI18n(datetimeAbbreviated, modifiedDate));
+    const displayDate = modified && dateNowInMs - modifiedDate.getTime() > DAY_IN_MILLISECONDS ? dateI18n(datetimeAbbreviated, modifiedDate) : humanTimeDiff(modified);
+    const revisionLabel = getRevisionLabel(id, authorDisplayName, dateI18n(datetimeAbbreviated, modifiedDate), areStylesEqual);
     return createElement("li", {
       className: classnames('edit-site-global-styles-screen-revisions__revision-item', {
         'is-selected': isSelected,
+        'is-active': areStylesEqual,
         'is-reset': isReset
       }),
       key: id
@@ -104,7 +150,7 @@ function RevisionsButtons({
       onClick: () => {
         onChange(revision);
       },
-      label: revisionLabel
+      "aria-label": revisionLabel
     }, isReset ? createElement("span", {
       className: "edit-site-global-styles-screen-revisions__description"
     }, __('Default styles'), createElement("span", {
@@ -116,7 +162,11 @@ function RevisionsButtons({
     }, __('(Unsaved)')) : createElement("time", {
       className: "edit-site-global-styles-screen-revisions__date",
       dateTime: modified
-    }, displayDate), createElement("span", {
+    }, displayDate), isSelected && createElement(ChangesSummary, {
+      blockNames: blockNames,
+      revision: revision,
+      previousRevision: index < userRevisions.length ? userRevisions[index + 1] : {}
+    }), createElement("span", {
       className: "edit-site-global-styles-screen-revisions__meta"
     }, createElement("img", {
       alt: authorDisplayName,

package/build-module/components/global-styles/screen-revisions/revisions-buttons.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","__","sprintf","Button","dateI18n","getDate","humanTimeDiff","getSettings","store","coreStore","useSelect","DAY_IN_MILLISECONDS","getRevisionLabel","id","isLatest","authorDisplayName","formattedModifiedDate","RevisionsButtons","userRevisions","selectedRevisionId","onChange","currentThemeName","currentUser","select","getCurrentTheme","getCurrentUser","currentTheme","name","rendered","stylesheet","dateNowInMs","getTime","date","dateFormat","datetimeAbbreviated","formats","createElement","className","role","map","revision","index","author","modified","isUnsaved","revisionAuthor","authorAvatar","avatar_urls","isSelected","isReset","modifiedDate","displayDate","revisionLabel","key","disabled","onClick","label","dateTime","alt","src"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Button } from '@wordpress/components';\nimport { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\n\nconst DAY_IN_MILLISECONDS = 60 * 60 * 1000 * 24;\n\n/**\n * Returns a button label for the revision.\n *\n * @param {string|number} id                    A revision object.\n * @param {boolean}       isLatest              Whether the revision is the most current.\n * @param {string}        authorDisplayName     Author name.\n * @param {string}        formattedModifiedDate Revision modified date formatted.\n * @return {string} Translated label.\n */\nfunction getRevisionLabel(\n\tid,\n\tisLatest,\n\tauthorDisplayName,\n\tformattedModifiedDate\n) {\n\tif ( 'parent' === id ) {\n\t\treturn __( 'Reset the styles to the theme defaults' );\n\t}\n\n\tif ( 'unsaved' === id ) {\n\t\treturn sprintf(\n\t\t\t/* translators: %s author display name */\n\t\t\t__( 'Unsaved changes by %s' ),\n\t\t\tauthorDisplayName\n\t\t);\n\t}\n\n\treturn isLatest\n\t\t? sprintf(\n\t\t\t\t/* translators: %1$s author display name, %2$s: revision creation date */\n\t\t\t\t__( 'Changes saved by %1$s on %2$s (current)' ),\n\t\t\t\tauthorDisplayName,\n\t\t\t\tformattedModifiedDate\n\t\t  )\n\t\t: sprintf(\n\t\t\t\t/* translators: %1$s author display name, %2$s: revision creation date */\n\t\t\t\t__( 'Changes saved by %1$s on %2$s' ),\n\t\t\t\tauthorDisplayName,\n\t\t\t\tformattedModifiedDate\n\t\t  );\n}\n\n/**\n * Returns a rendered list of revisions buttons.\n *\n * @typedef {Object} props\n * @property {Array<Object>} userRevisions      A collection of user revisions.\n * @property {number}        selectedRevisionId The id of the currently-selected revision.\n * @property {Function}      onChange           Callback fired when a revision is selected.\n *\n * @param    {props}         Component          props.\n * @return {JSX.Element} The modal component.\n */\nfunction RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {\n\tconst { currentThemeName, currentUser } = useSelect( ( select ) => {\n\t\tconst { getCurrentTheme, getCurrentUser } = select( coreStore );\n\t\tconst currentTheme = getCurrentTheme();\n\t\treturn {\n\t\t\tcurrentThemeName:\n\t\t\t\tcurrentTheme?.name?.rendered || currentTheme?.stylesheet,\n\t\t\tcurrentUser: getCurrentUser(),\n\t\t};\n\t}, [] );\n\tconst dateNowInMs = getDate().getTime();\n\tconst { date: dateFormat, datetimeAbbreviated } = getSettings().formats;\n\n\treturn (\n\t\t<ol\n\t\t\tclassName=\"edit-site-global-styles-screen-revisions__revisions-list\"\n\t\t\taria-label={ __( 'Global styles revisions' ) }\n\t\t\trole=\"group\"\n\t\t>\n\t\t\t{ userRevisions.map( ( revision, index ) => {\n\t\t\t\tconst { id, isLatest, author, modified } = revision;\n\t\t\t\tconst isUnsaved = 'unsaved' === id;\n\t\t\t\t// Unsaved changes are created by the current user.\n\t\t\t\tconst revisionAuthor = isUnsaved ? currentUser : author;\n\t\t\t\tconst authorDisplayName = revisionAuthor?.name || __( 'User' );\n\t\t\t\tconst authorAvatar = revisionAuthor?.avatar_urls?.[ '48' ];\n\t\t\t\tconst isSelected = selectedRevisionId\n\t\t\t\t\t? selectedRevisionId === id\n\t\t\t\t\t: index === 0;\n\t\t\t\tconst isReset = 'parent' === id;\n\t\t\t\tconst modifiedDate = getDate( modified );\n\t\t\t\tconst displayDate =\n\t\t\t\t\tmodified &&\n\t\t\t\t\tdateNowInMs - modifiedDate.getTime() > DAY_IN_MILLISECONDS\n\t\t\t\t\t\t? dateI18n( dateFormat, modifiedDate )\n\t\t\t\t\t\t: humanTimeDiff( modified );\n\t\t\t\tconst revisionLabel = getRevisionLabel(\n\t\t\t\t\tid,\n\t\t\t\t\tisLatest,\n\t\t\t\t\tauthorDisplayName,\n\t\t\t\t\tdateI18n( datetimeAbbreviated, modifiedDate )\n\t\t\t\t);\n\n\t\t\t\treturn (\n\t\t\t\t\t<li\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'edit-site-global-styles-screen-revisions__revision-item',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'is-selected': isSelected,\n\t\t\t\t\t\t\t\t'is-reset': isReset,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-screen-revisions__revision-button\"\n\t\t\t\t\t\t\tdisabled={ isSelected }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tonChange( revision );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tlabel={ revisionLabel }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ isReset ? (\n\t\t\t\t\t\t\t\t<span className=\"edit-site-global-styles-screen-revisions__description\">\n\t\t\t\t\t\t\t\t\t{ __( 'Default styles' ) }\n\t\t\t\t\t\t\t\t\t<span className=\"edit-site-global-styles-screen-revisions__meta\">\n\t\t\t\t\t\t\t\t\t\t{ currentThemeName }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span className=\"edit-site-global-styles-screen-revisions__description\">\n\t\t\t\t\t\t\t\t\t{ isUnsaved ? (\n\t\t\t\t\t\t\t\t\t\t<span className=\"edit-site-global-styles-screen-revisions__date\">\n\t\t\t\t\t\t\t\t\t\t\t{ __( '(Unsaved)' ) }\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<time\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-screen-revisions__date\"\n\t\t\t\t\t\t\t\t\t\t\tdateTime={ modified }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ displayDate }\n\t\t\t\t\t\t\t\t\t\t</time>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t<span className=\"edit-site-global-styles-screen-revisions__meta\">\n\t\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\t\talt={ authorDisplayName }\n\t\t\t\t\t\t\t\t\t\t\tsrc={ authorAvatar }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t{ authorDisplayName }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</li>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ol>\n\t);\n}\n\nexport default RevisionsButtons;\n"],"mappings":"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"}
+{"version":3,"names":["classnames","__","_n","sprintf","Button","dateI18n","getDate","humanTimeDiff","getSettings","store","coreStore","useSelect","useMemo","getBlockTypes","getRevisionChanges","DAY_IN_MILLISECONDS","MAX_CHANGES","ChangesSummary","revision","previousRevision","blockNames","changes","changesLength","length","deleteCount","andMoreText","splice","createElement","className","join","getRevisionLabel","id","authorDisplayName","formattedModifiedDate","areStylesEqual","RevisionsButtons","userRevisions","selectedRevisionId","onChange","canApplyRevision","currentThemeName","currentUser","select","getCurrentTheme","getCurrentUser","currentTheme","name","rendered","stylesheet","blockTypes","reduce","accumulator","title","dateNowInMs","getTime","datetimeAbbreviated","formats","role","map","index","author","modified","isUnsaved","revisionAuthor","authorAvatar","avatar_urls","isFirstItem","isSelected","isReset","modifiedDate","displayDate","revisionLabel","key","disabled","onClick","dateTime","alt","src"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { Button } from '@wordpress/components';\nimport { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\nimport { getBlockTypes } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport getRevisionChanges from './get-revision-changes';\n\nconst DAY_IN_MILLISECONDS = 60 * 60 * 1000 * 24;\nconst MAX_CHANGES = 7;\n\nfunction ChangesSummary( { revision, previousRevision, blockNames } ) {\n\tconst changes = getRevisionChanges(\n\t\trevision,\n\t\tpreviousRevision,\n\t\tblockNames\n\t);\n\tconst changesLength = changes.length;\n\n\tif ( ! changesLength ) {\n\t\treturn null;\n\t}\n\n\t// Truncate to `n` results if necessary.\n\tif ( changesLength > MAX_CHANGES ) {\n\t\tconst deleteCount = changesLength - MAX_CHANGES;\n\t\tconst andMoreText = sprintf(\n\t\t\t// translators: %d: number of global styles changes that are not displayed in the UI.\n\t\t\t_n( '…and %d more change.', '…and %d more changes.', deleteCount ),\n\t\t\tdeleteCount\n\t\t);\n\t\tchanges.splice( MAX_CHANGES, deleteCount, andMoreText );\n\t}\n\n\treturn (\n\t\t<span\n\t\t\tdata-testid=\"global-styles-revision-changes\"\n\t\t\tclassName=\"edit-site-global-styles-screen-revisions__changes\"\n\t\t>\n\t\t\t{ changes.join( ', ' ) }\n\t\t</span>\n\t);\n}\n\n/**\n * Returns a button label for the revision.\n *\n * @param {string|number} id                    A revision object.\n * @param {string}        authorDisplayName     Author name.\n * @param {string}        formattedModifiedDate Revision modified date formatted.\n * @param {boolean}       areStylesEqual        Whether the revision matches the current editor styles.\n * @return {string} Translated label.\n */\nfunction getRevisionLabel(\n\tid,\n\tauthorDisplayName,\n\tformattedModifiedDate,\n\tareStylesEqual\n) {\n\tif ( 'parent' === id ) {\n\t\treturn __( 'Reset the styles to the theme defaults' );\n\t}\n\n\tif ( 'unsaved' === id ) {\n\t\treturn sprintf(\n\t\t\t/* translators: %s: author display name */\n\t\t\t__( 'Unsaved changes by %s' ),\n\t\t\tauthorDisplayName\n\t\t);\n\t}\n\n\treturn areStylesEqual\n\t\t? sprintf(\n\t\t\t\t// translators: %1$s: author display name, %2$s: revision creation date.\n\t\t\t\t__(\n\t\t\t\t\t'Changes saved by %1$s on %2$s. This revision matches current editor styles.'\n\t\t\t\t),\n\t\t\t\tauthorDisplayName,\n\t\t\t\tformattedModifiedDate\n\t\t  )\n\t\t: sprintf(\n\t\t\t\t// translators: %1$s: author display name, %2$s: revision creation date.\n\t\t\t\t__( 'Changes saved by %1$s on %2$s' ),\n\t\t\t\tauthorDisplayName,\n\t\t\t\tformattedModifiedDate\n\t\t  );\n}\n\n/**\n * Returns a rendered list of revisions buttons.\n *\n * @typedef {Object} props\n * @property {Array<Object>} userRevisions      A collection of user revisions.\n * @property {number}        selectedRevisionId The id of the currently-selected revision.\n * @property {Function}      onChange           Callback fired when a revision is selected.\n *\n * @param    {props}         Component          props.\n * @return {JSX.Element} The modal component.\n */\nfunction RevisionsButtons( {\n\tuserRevisions,\n\tselectedRevisionId,\n\tonChange,\n\tcanApplyRevision,\n} ) {\n\tconst { currentThemeName, currentUser } = useSelect( ( select ) => {\n\t\tconst { getCurrentTheme, getCurrentUser } = select( coreStore );\n\t\tconst currentTheme = getCurrentTheme();\n\t\treturn {\n\t\t\tcurrentThemeName:\n\t\t\t\tcurrentTheme?.name?.rendered || currentTheme?.stylesheet,\n\t\t\tcurrentUser: getCurrentUser(),\n\t\t};\n\t}, [] );\n\tconst blockNames = useMemo( () => {\n\t\tconst blockTypes = getBlockTypes();\n\t\treturn blockTypes.reduce( ( accumulator, { name, title } ) => {\n\t\t\taccumulator[ name ] = title;\n\t\t\treturn accumulator;\n\t\t}, {} );\n\t}, [] );\n\tconst dateNowInMs = getDate().getTime();\n\tconst { datetimeAbbreviated } = getSettings().formats;\n\n\treturn (\n\t\t<ol\n\t\t\tclassName=\"edit-site-global-styles-screen-revisions__revisions-list\"\n\t\t\taria-label={ __( 'Global styles revisions' ) }\n\t\t\trole=\"group\"\n\t\t>\n\t\t\t{ userRevisions.map( ( revision, index ) => {\n\t\t\t\tconst { id, author, modified } = revision;\n\t\t\t\tconst isUnsaved = 'unsaved' === id;\n\t\t\t\t// Unsaved changes are created by the current user.\n\t\t\t\tconst revisionAuthor = isUnsaved ? currentUser : author;\n\t\t\t\tconst authorDisplayName = revisionAuthor?.name || __( 'User' );\n\t\t\t\tconst authorAvatar = revisionAuthor?.avatar_urls?.[ '48' ];\n\t\t\t\tconst isFirstItem = index === 0;\n\t\t\t\tconst isSelected = selectedRevisionId\n\t\t\t\t\t? selectedRevisionId === id\n\t\t\t\t\t: isFirstItem;\n\t\t\t\tconst areStylesEqual = ! canApplyRevision && isSelected;\n\t\t\t\tconst isReset = 'parent' === id;\n\t\t\t\tconst modifiedDate = getDate( modified );\n\t\t\t\tconst displayDate =\n\t\t\t\t\tmodified &&\n\t\t\t\t\tdateNowInMs - modifiedDate.getTime() > DAY_IN_MILLISECONDS\n\t\t\t\t\t\t? dateI18n( datetimeAbbreviated, modifiedDate )\n\t\t\t\t\t\t: humanTimeDiff( modified );\n\t\t\t\tconst revisionLabel = getRevisionLabel(\n\t\t\t\t\tid,\n\t\t\t\t\tauthorDisplayName,\n\t\t\t\t\tdateI18n( datetimeAbbreviated, modifiedDate ),\n\t\t\t\t\tareStylesEqual\n\t\t\t\t);\n\n\t\t\t\treturn (\n\t\t\t\t\t<li\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'edit-site-global-styles-screen-revisions__revision-item',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'is-selected': isSelected,\n\t\t\t\t\t\t\t\t'is-active': areStylesEqual,\n\t\t\t\t\t\t\t\t'is-reset': isReset,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-screen-revisions__revision-button\"\n\t\t\t\t\t\t\tdisabled={ isSelected }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tonChange( revision );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taria-label={ revisionLabel }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ isReset ? (\n\t\t\t\t\t\t\t\t<span className=\"edit-site-global-styles-screen-revisions__description\">\n\t\t\t\t\t\t\t\t\t{ __( 'Default styles' ) }\n\t\t\t\t\t\t\t\t\t<span className=\"edit-site-global-styles-screen-revisions__meta\">\n\t\t\t\t\t\t\t\t\t\t{ currentThemeName }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span className=\"edit-site-global-styles-screen-revisions__description\">\n\t\t\t\t\t\t\t\t\t{ isUnsaved ? (\n\t\t\t\t\t\t\t\t\t\t<span className=\"edit-site-global-styles-screen-revisions__date\">\n\t\t\t\t\t\t\t\t\t\t\t{ __( '(Unsaved)' ) }\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<time\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-screen-revisions__date\"\n\t\t\t\t\t\t\t\t\t\t\tdateTime={ modified }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ displayDate }\n\t\t\t\t\t\t\t\t\t\t</time>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t{ isSelected && (\n\t\t\t\t\t\t\t\t\t\t<ChangesSummary\n\t\t\t\t\t\t\t\t\t\t\tblockNames={ blockNames }\n\t\t\t\t\t\t\t\t\t\t\trevision={ revision }\n\t\t\t\t\t\t\t\t\t\t\tpreviousRevision={\n\t\t\t\t\t\t\t\t\t\t\t\tindex < userRevisions.length\n\t\t\t\t\t\t\t\t\t\t\t\t\t? userRevisions[ index + 1 ]\n\t\t\t\t\t\t\t\t\t\t\t\t\t: {}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t<span className=\"edit-site-global-styles-screen-revisions__meta\">\n\t\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\t\talt={ authorDisplayName }\n\t\t\t\t\t\t\t\t\t\t\tsrc={ authorAvatar }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t{ authorDisplayName }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</li>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ol>\n\t);\n}\n\nexport default RevisionsButtons;\n"],"mappings":"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"}

package/build-module/components/header-edit-mode/document-tools/index.js

@@ -10,6 +10,7 @@ import { _x, __ } from '@wordpress/i18n';
 import { listView, plus, chevronUpDown } from '@wordpress/icons';
 import { Button, ToolbarItem } from '@wordpress/components';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -39,7 +40,6 @@ export default function DocumentTools({
     isVisualMode
   } = useSelect(select => {
     const {
-      __experimentalGetPreviewDeviceType,
       isInserterOpened,
       isListViewOpened,
       getEditorMode
@@ -48,7 +48,6 @@ export default function DocumentTools({
       getShortcutRepresentation
     } = select(keyboardShortcutsStore);
     return {
-      deviceType: __experimentalGetPreviewDeviceType(),
       isInserterOpen: isInserterOpened(),
       isListViewOpen: isListViewOpened(),
       listViewShortcut: getShortcutRepresentation('core/edit-site/toggle-list-view'),
@@ -56,13 +55,15 @@ export default function DocumentTools({
     };
   }, []);
   const {
-    __experimentalSetPreviewDeviceType: setPreviewDeviceType,
     setIsInserterOpened,
     setIsListViewOpened
   } = useDispatch(editSiteStore);
   const {
     __unstableSetEditorMode
   } = useDispatch(blockEditorStore);
+  const {
+    setDeviceType
+  } = useDispatch(editorStore);
   const isLargeViewport = useViewportMatch('medium');
   const toggleInserter = useCallback(() => {
     if (isInserterOpen) {
@@ -108,20 +109,24 @@ export default function DocumentTools({
     icon: plus,
     label: showIconLabels ? shortLabel : longLabel,
     showTooltip: !showIconLabels,
-    "aria-expanded": isInserterOpen
+    "aria-expanded": isInserterOpen,
+    size: "compact"
   }), isLargeViewport && createElement(Fragment, null, !hasFixedToolbar && createElement(ToolbarItem, {
     as: ToolSelector,
     showTooltip: !showIconLabels,
     variant: showIconLabels ? 'tertiary' : undefined,
-    disabled: !isVisualMode
+    disabled: !isVisualMode,
+    size: "compact"
   }), createElement(ToolbarItem, {
     as: UndoButton,
     showTooltip: !showIconLabels,
-    variant: showIconLabels ? 'tertiary' : undefined
+    variant: showIconLabels ? 'tertiary' : undefined,
+    size: "compact"
   }), createElement(ToolbarItem, {
     as: RedoButton,
     showTooltip: !showIconLabels,
-    variant: showIconLabels ? 'tertiary' : undefined
+    variant: showIconLabels ? 'tertiary' : undefined,
+    size: "compact"
   }), !isDistractionFree && createElement(ToolbarItem, {
     as: Button,
     className: "edit-site-header-edit-mode__list-view-toggle",
@@ -135,7 +140,8 @@ export default function DocumentTools({
     shortcut: listViewShortcut,
     showTooltip: !showIconLabels,
     variant: showIconLabels ? 'tertiary' : undefined,
-    "aria-expanded": isListViewOpen
+    "aria-expanded": isListViewOpen,
+    size: "compact"
   }), isZoomedOutViewExperimentEnabled && !isDistractionFree && !hasFixedToolbar && createElement(ToolbarItem, {
     as: Button,
     className: "edit-site-header-edit-mode__zoom-out-view-toggle",
@@ -144,9 +150,10 @@ export default function DocumentTools({
     /* translators: button label text should, if possible, be under 16 characters. */,
     label: __('Zoom-out View'),
     onClick: () => {
-      setPreviewDeviceType('Desktop');
+      setDeviceType('Desktop');
       __unstableSetEditorMode(isZoomedOutView ? 'edit' : 'zoom-out');
-    }
+    },
+    size: "compact"
   }))));
 }
 //# sourceMappingURL=index.js.map