@wordpress/global-styles-ui 1.1.0

package/build-module/screen-css.js

@@ -0,0 +1,48 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { __ } from "@wordpress/i18n";
+import { ExternalLink } from "@wordpress/components";
+import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
+import { ScreenHeader } from "./screen-header";
+import { useStyle } from "./hooks";
+import { unlock } from "./lock-unlock";
+const { AdvancedPanel: StylesAdvancedPanel } = unlock(blockEditorPrivateApis);
+function ScreenCSS() {
+  const description = __(
+    "Add your own CSS to customize the appearance and layout of your site."
+  );
+  const [style] = useStyle("", void 0, "user", false);
+  const [inheritedStyle, setStyle] = useStyle(
+    "",
+    void 0,
+    "merged",
+    false
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ScreenHeader, { title: __("CSS"), description }),
+    /* @__PURE__ */ jsxs("div", { className: "global-styles-ui-screen-css", children: [
+      /* @__PURE__ */ jsx(
+        ExternalLink,
+        {
+          href: __(
+            "https://developer.wordpress.org/advanced-administration/wordpress/css/"
+          ),
+          className: "global-styles-ui-screen-css-help-link",
+          children: __("Learn more about CSS")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StylesAdvancedPanel,
+        {
+          value: style,
+          onChange: setStyle,
+          inheritedValue: inheritedStyle
+        }
+      )
+    ] })
+  ] });
+}
+var screen_css_default = ScreenCSS;
+export {
+  screen_css_default as default
+};
+//# sourceMappingURL=screen-css.js.map

package/build-module/screen-css.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/screen-css.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { ExternalLink } from '@wordpress/components';\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { ScreenHeader } from './screen-header';\nimport { useStyle } from './hooks';\nimport { unlock } from './lock-unlock';\n\n// Access AdvancedPanel from block-editor private APIs\nconst { AdvancedPanel: StylesAdvancedPanel } = unlock( blockEditorPrivateApis );\n\nfunction ScreenCSS() {\n\tconst description = __(\n\t\t'Add your own CSS to customize the appearance and layout of your site.'\n\t);\n\n\t// Get user-only styles (should not decode/encode to preserve raw CSS)\n\tconst [ style ] = useStyle( '', undefined, 'user', false );\n\t// Get all styles (inherited + user) for context\n\tconst [ inheritedStyle, setStyle ] = useStyle(\n\t\t'',\n\t\tundefined,\n\t\t'merged',\n\t\tfalse\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'CSS' ) } description={ description } />\n\t\t\t<div className=\"global-styles-ui-screen-css\">\n\t\t\t\t<ExternalLink\n\t\t\t\t\thref={ __(\n\t\t\t\t\t\t'https://developer.wordpress.org/advanced-administration/wordpress/css/'\n\t\t\t\t\t) }\n\t\t\t\t\tclassName=\"global-styles-ui-screen-css-help-link\"\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Learn more about CSS' ) }\n\t\t\t\t</ExternalLink>\n\t\t\t\t<StylesAdvancedPanel\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenCSS;\n"],
+  "mappings": "AAkCE,mBACC,KACA,YAFD;AA/BF,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAE7B,SAAS,eAAe,8BAA8B;AAKtD,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,cAAc;AAGvB,MAAM,EAAE,eAAe,oBAAoB,IAAI,OAAQ,sBAAuB;AAE9E,SAAS,YAAY;AACpB,QAAM,cAAc;AAAA,IACnB;AAAA,EACD;AAGA,QAAM,CAAE,KAAM,IAAI,SAAU,IAAI,QAAW,QAAQ,KAAM;AAEzD,QAAM,CAAE,gBAAgB,QAAS,IAAI;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,SACC,iCACC;AAAA,wBAAC,gBAAa,OAAQ,GAAI,KAAM,GAAI,aAA4B;AAAA,IAChE,qBAAC,SAAI,WAAU,+BACd;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,MAAO;AAAA,YACN;AAAA,UACD;AAAA,UACA,WAAU;AAAA,UAER,aAAI,sBAAuB;AAAA;AAAA,MAC9B;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA,OAAQ;AAAA,UACR,UAAW;AAAA,UACX,gBAAiB;AAAA;AAAA,MAClB;AAAA,OACD;AAAA,KACD;AAEF;AAEA,IAAO,qBAAQ;",
+  "names": []
+}

package/build-module/screen-header.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  __experimentalHStack as HStack,
+  __experimentalVStack as VStack,
+  __experimentalSpacer as Spacer,
+  __experimentalHeading as Heading,
+  __experimentalView as View,
+  Navigator
+} from "@wordpress/components";
+import { isRTL, __ } from "@wordpress/i18n";
+import { chevronRight, chevronLeft } from "@wordpress/icons";
+function ScreenHeader({
+  title,
+  description,
+  onBack
+}) {
+  return /* @__PURE__ */ jsxs(VStack, { spacing: 0, children: [
+    /* @__PURE__ */ jsx(View, { children: /* @__PURE__ */ jsx(Spacer, { marginBottom: 0, paddingX: 4, paddingY: 3, children: /* @__PURE__ */ jsxs(HStack, { spacing: 2, children: [
+      /* @__PURE__ */ jsx(
+        Navigator.BackButton,
+        {
+          icon: isRTL() ? chevronRight : chevronLeft,
+          size: "small",
+          label: __("Back"),
+          onClick: onBack
+        }
+      ),
+      /* @__PURE__ */ jsx(Spacer, { children: /* @__PURE__ */ jsx(
+        Heading,
+        {
+          className: "global-styles-ui-header",
+          level: 2,
+          size: 13,
+          children: title
+        }
+      ) })
+    ] }) }) }),
+    description && /* @__PURE__ */ jsx("p", { className: "global-styles-ui-header__description", children: description })
+  ] });
+}
+export {
+  ScreenHeader
+};
+//# sourceMappingURL=screen-header.js.map

package/build-module/screen-header.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/screen-header.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalHeading as Heading,\n\t__experimentalView as View,\n\tNavigator,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronRight, chevronLeft } from '@wordpress/icons';\n\ninterface ScreenHeaderProps {\n\ttitle: string;\n\tdescription?: string | React.ReactElement;\n\tonBack?: () => void;\n}\n\nexport function ScreenHeader( {\n\ttitle,\n\tdescription,\n\tonBack,\n}: ScreenHeaderProps ) {\n\treturn (\n\t\t<VStack spacing={ 0 }>\n\t\t\t<View>\n\t\t\t\t<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>\n\t\t\t\t\t<HStack spacing={ 2 }>\n\t\t\t\t\t\t<Navigator.BackButton\n\t\t\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\tonClick={ onBack }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Spacer>\n\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\tclassName=\"global-styles-ui-header\"\n\t\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t</HStack>\n\t\t\t\t</Spacer>\n\t\t\t</View>\n\t\t\t{ description && (\n\t\t\t\t<p className=\"global-styles-ui-header__description\">\n\t\t\t\t\t{ description }\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],
+  "mappings": "AA6BK,SACC,KADD;AA1BL;AAAA,EACC,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,yBAAyB;AAAA,EACzB,sBAAsB;AAAA,EACtB;AAAA,OACM;AACP,SAAS,OAAO,UAAU;AAC1B,SAAS,cAAc,mBAAmB;AAQnC,SAAS,aAAc;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACD,GAAuB;AACtB,SACC,qBAAC,UAAO,SAAU,GACjB;AAAA,wBAAC,QACA,8BAAC,UAAO,cAAe,GAAI,UAAW,GAAI,UAAW,GACpD,+BAAC,UAAO,SAAU,GACjB;AAAA;AAAA,QAAC,UAAU;AAAA,QAAV;AAAA,UACA,MAAO,MAAM,IAAI,eAAe;AAAA,UAChC,MAAK;AAAA,UACL,OAAQ,GAAI,MAAO;AAAA,UACnB,SAAU;AAAA;AAAA,MACX;AAAA,MACA,oBAAC,UACA;AAAA,QAAC;AAAA;AAAA,UACA,WAAU;AAAA,UACV,OAAQ;AAAA,UACR,MAAO;AAAA,UAEL;AAAA;AAAA,MACH,GACD;AAAA,OACD,GACD,GACD;AAAA,IACE,eACD,oBAAC,OAAE,WAAU,wCACV,uBACH;AAAA,KAEF;AAEF;",
+  "names": []
+}

package/build-module/screen-layout.js

@@ -0,0 +1,24 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { __ } from "@wordpress/i18n";
+import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
+import { ScreenHeader } from "./screen-header";
+import DimensionsPanel from "./dimensions-panel";
+import { useSetting } from "./hooks";
+import { unlock } from "./lock-unlock";
+const { useHasDimensionsPanel, useSettingsForBlockElement } = unlock(
+  blockEditorPrivateApis
+);
+function ScreenLayout() {
+  const [rawSettings] = useSetting("");
+  const settings = useSettingsForBlockElement(rawSettings);
+  const hasDimensionsPanel = useHasDimensionsPanel(settings);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ScreenHeader, { title: __("Layout") }),
+    hasDimensionsPanel && /* @__PURE__ */ jsx(DimensionsPanel, {})
+  ] });
+}
+var screen_layout_default = ScreenLayout;
+export {
+  screen_layout_default as default
+};
+//# sourceMappingURL=screen-layout.js.map

package/build-module/screen-layout.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/screen-layout.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport type { GlobalStylesSettings } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { ScreenHeader } from './screen-header';\nimport DimensionsPanel from './dimensions-panel';\nimport { useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst { useHasDimensionsPanel, useSettingsForBlockElement } = unlock(\n\tblockEditorPrivateApis\n);\n\nfunction ScreenLayout() {\n\tconst [ rawSettings ] = useSetting< GlobalStylesSettings >( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'Layout' ) } />\n\t\t\t{ hasDimensionsPanel && <DimensionsPanel /> }\n\t\t</>\n\t);\n}\n\nexport default ScreenLayout;\n"],
+  "mappings": "AA0BE,mBACC,KADD;AAvBF,SAAS,UAAU;AAEnB,SAAS,eAAe,8BAA8B;AAMtD,SAAS,oBAAoB;AAC7B,OAAO,qBAAqB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAEvB,MAAM,EAAE,uBAAuB,2BAA2B,IAAI;AAAA,EAC7D;AACD;AAEA,SAAS,eAAe;AACvB,QAAM,CAAE,WAAY,IAAI,WAAoC,EAAG;AAC/D,QAAM,WAAW,2BAA4B,WAAY;AACzD,QAAM,qBAAqB,sBAAuB,QAAS;AAE3D,SACC,iCACC;AAAA,wBAAC,gBAAa,OAAQ,GAAI,QAAS,GAAI;AAAA,IACrC,sBAAsB,oBAAC,mBAAgB;AAAA,KAC1C;AAEF;AAEA,IAAO,wBAAQ;",
+  "names": []
+}

package/build-module/screen-revisions/index.js

@@ -0,0 +1,121 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { __, sprintf } from "@wordpress/i18n";
+import {
+  __experimentalConfirmDialog as ConfirmDialog,
+  Spinner,
+  useNavigator
+} from "@wordpress/components";
+import { useContext, useState, useMemo } from "@wordpress/element";
+import { areGlobalStylesEqual } from "@wordpress/global-styles-engine";
+import { ScreenHeader } from "../screen-header";
+import { GlobalStylesContext } from "../context";
+import useGlobalStylesRevisions from "./use-global-styles-revisions";
+import RevisionsButtons from "./revisions-buttons";
+import Pagination from "../pagination";
+const PAGE_SIZE = 10;
+function ScreenRevisions({ onClose } = {}) {
+  const { user: currentEditorGlobalStyles, onChange: setUserConfig } = useContext(GlobalStylesContext);
+  const { params, goTo } = useNavigator();
+  const { revisionId } = params;
+  const [currentPage, setCurrentPage] = useState(1);
+  const { revisions, isLoading, hasUnsavedChanges, revisionsCount } = useGlobalStylesRevisions({
+    query: {
+      per_page: PAGE_SIZE,
+      page: currentPage
+    }
+  });
+  const numPages = Math.ceil(revisionsCount / PAGE_SIZE);
+  const [
+    isLoadingRevisionWithUnsavedChanges,
+    setIsLoadingRevisionWithUnsavedChanges
+  ] = useState(false);
+  const currentlySelectedRevision = useMemo(() => {
+    if (!revisionId) {
+      return currentEditorGlobalStyles;
+    }
+    const revision = revisions.find(
+      (rev) => String(rev.id) === String(revisionId)
+    );
+    return revision || currentEditorGlobalStyles;
+  }, [revisionId, revisions, currentEditorGlobalStyles]);
+  const selectedRevisionMatchesEditorStyles = areGlobalStylesEqual(
+    currentlySelectedRevision,
+    currentEditorGlobalStyles
+  );
+  const onCloseRevisions = () => {
+    if (onClose) {
+      onClose();
+    }
+  };
+  const restoreRevision = (revision) => {
+    setUserConfig(revision);
+    setIsLoadingRevisionWithUnsavedChanges(false);
+    onCloseRevisions();
+  };
+  const handleRevisionSelect = (revision) => {
+    goTo(`/revisions/${revision.id}`);
+  };
+  const currentlySelectedRevisionId = (
+    // @ts-expect-error: revision id is not present in the fallback (default object).
+    currentlySelectedRevision?.id ?? revisions[0]?.id
+  );
+  const isLoadButtonEnabled = !!currentlySelectedRevisionId && currentlySelectedRevisionId !== "unsaved" && !selectedRevisionMatchesEditorStyles;
+  const hasRevisions = !!revisions.length;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ScreenHeader,
+      {
+        title: revisionsCount ? sprintf(
+          // translators: %d: number of revisions.
+          __("Revisions (%d)"),
+          revisionsCount
+        ) : __("Revisions"),
+        description: __(
+          `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.`
+        ),
+        onBack: onCloseRevisions
+      }
+    ),
+    !hasRevisions && /* @__PURE__ */ jsx(Spinner, { className: "global-styles-ui-screen-revisions__loading" }),
+    /* @__PURE__ */ jsx(
+      RevisionsButtons,
+      {
+        onChange: handleRevisionSelect,
+        selectedRevisionId: currentlySelectedRevisionId,
+        userRevisions: revisions,
+        canApplyRevision: isLoadButtonEnabled,
+        onApplyRevision: () => hasUnsavedChanges ? setIsLoadingRevisionWithUnsavedChanges(true) : restoreRevision(currentlySelectedRevision)
+      }
+    ),
+    numPages > 1 && /* @__PURE__ */ jsx("div", { className: "global-styles-ui-screen-revisions__footer", children: /* @__PURE__ */ jsx(
+      Pagination,
+      {
+        className: "global-styles-ui-screen-revisions__pagination",
+        currentPage,
+        numPages,
+        changePage: setCurrentPage,
+        totalItems: revisionsCount,
+        disabled: isLoading,
+        label: __("Global Styles pagination")
+      }
+    ) }),
+    isLoadingRevisionWithUnsavedChanges && /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        isOpen: isLoadingRevisionWithUnsavedChanges,
+        confirmButtonText: __("Apply"),
+        onConfirm: () => restoreRevision(currentlySelectedRevision),
+        onCancel: () => setIsLoadingRevisionWithUnsavedChanges(false),
+        size: "medium",
+        children: __(
+          "Are you sure you want to apply this revision? Any unsaved changes will be lost."
+        )
+      }
+    )
+  ] });
+}
+var screen_revisions_default = ScreenRevisions;
+export {
+  screen_revisions_default as default
+};
+//# sourceMappingURL=index.js.map

package/build-module/screen-revisions/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/screen-revisions/index.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\t__experimentalConfirmDialog as ConfirmDialog,\n\tSpinner,\n\tuseNavigator,\n} from '@wordpress/components';\nimport { useContext, useState, useMemo } from '@wordpress/element';\nimport { areGlobalStylesEqual } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { ScreenHeader } from '../screen-header';\nimport { GlobalStylesContext } from '../context';\nimport useGlobalStylesRevisions from './use-global-styles-revisions';\nimport RevisionsButtons from './revisions-buttons';\nimport Pagination from '../pagination';\n\nconst PAGE_SIZE = 10;\n\ninterface ScreenRevisionsProps {\n\tonClose?: () => void;\n}\n\nfunction ScreenRevisions( { onClose }: ScreenRevisionsProps = {} ) {\n\tconst { user: currentEditorGlobalStyles, onChange: setUserConfig } =\n\t\tuseContext( GlobalStylesContext );\n\tconst { params, goTo } = useNavigator();\n\tconst { revisionId } = params;\n\tconst [ currentPage, setCurrentPage ] = useState( 1 );\n\tconst { revisions, isLoading, hasUnsavedChanges, revisionsCount } =\n\t\tuseGlobalStylesRevisions( {\n\t\t\tquery: {\n\t\t\t\tper_page: PAGE_SIZE,\n\t\t\t\tpage: currentPage,\n\t\t\t},\n\t\t} );\n\n\tconst numPages = Math.ceil( revisionsCount / PAGE_SIZE );\n\n\tconst [\n\t\tisLoadingRevisionWithUnsavedChanges,\n\t\tsetIsLoadingRevisionWithUnsavedChanges,\n\t] = useState( false );\n\n\t// Derive the currently selected revision from the path parameter\n\tconst currentlySelectedRevision = useMemo( () => {\n\t\tif ( ! revisionId ) {\n\t\t\treturn currentEditorGlobalStyles;\n\t\t}\n\t\tconst revision = revisions.find(\n\t\t\t( rev ) => String( rev.id ) === String( revisionId )\n\t\t);\n\t\treturn revision || currentEditorGlobalStyles;\n\t}, [ revisionId, revisions, currentEditorGlobalStyles ] );\n\n\tconst selectedRevisionMatchesEditorStyles = areGlobalStylesEqual(\n\t\tcurrentlySelectedRevision,\n\t\tcurrentEditorGlobalStyles\n\t);\n\n\tconst onCloseRevisions = () => {\n\t\tif ( onClose ) {\n\t\t\tonClose();\n\t\t}\n\t};\n\n\tconst restoreRevision = ( revision: any ) => {\n\t\tsetUserConfig( revision );\n\t\tsetIsLoadingRevisionWithUnsavedChanges( false );\n\t\tonCloseRevisions();\n\t};\n\n\tconst handleRevisionSelect = ( revision: any ) => {\n\t\tgoTo( `/revisions/${ revision.id }` );\n\t};\n\n\tconst currentlySelectedRevisionId =\n\t\t// @ts-expect-error: revision id is not present in the fallback (default object).\n\t\tcurrentlySelectedRevision?.id ?? revisions[ 0 ]?.id;\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 &&\n\t\tcurrentlySelectedRevisionId !== 'unsaved' &&\n\t\t! selectedRevisionMatchesEditorStyles;\n\tconst hasRevisions = !! 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\t? sprintf(\n\t\t\t\t\t\t\t\t// translators: %d: number of revisions.\n\t\t\t\t\t\t\t\t__( 'Revisions (%d)' ),\n\t\t\t\t\t\t\t\trevisionsCount\n\t\t\t\t\t\t  )\n\t\t\t\t\t\t: __( 'Revisions' )\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{ ! hasRevisions && (\n\t\t\t\t<Spinner className=\"global-styles-ui-screen-revisions__loading\" />\n\t\t\t) }\n\t\t\t<RevisionsButtons\n\t\t\t\tonChange={ handleRevisionSelect }\n\t\t\t\tselectedRevisionId={ currentlySelectedRevisionId }\n\t\t\t\tuserRevisions={ revisions }\n\t\t\t\tcanApplyRevision={ isLoadButtonEnabled }\n\t\t\t\tonApplyRevision={ () =>\n\t\t\t\t\thasUnsavedChanges\n\t\t\t\t\t\t? setIsLoadingRevisionWithUnsavedChanges( true )\n\t\t\t\t\t\t: restoreRevision( currentlySelectedRevision )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ numPages > 1 && (\n\t\t\t\t<div className=\"global-styles-ui-screen-revisions__footer\">\n\t\t\t\t\t<Pagination\n\t\t\t\t\t\tclassName=\"global-styles-ui-screen-revisions__pagination\"\n\t\t\t\t\t\tcurrentPage={ currentPage }\n\t\t\t\t\t\tnumPages={ numPages }\n\t\t\t\t\t\tchangePage={ setCurrentPage }\n\t\t\t\t\t\ttotalItems={ revisionsCount }\n\t\t\t\t\t\tdisabled={ isLoading }\n\t\t\t\t\t\tlabel={ __( 'Global Styles pagination' ) }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ isLoadingRevisionWithUnsavedChanges && (\n\t\t\t\t<ConfirmDialog\n\t\t\t\t\tisOpen={ isLoadingRevisionWithUnsavedChanges }\n\t\t\t\t\tconfirmButtonText={ __( 'Apply' ) }\n\t\t\t\t\tonConfirm={ () =>\n\t\t\t\t\t\trestoreRevision( currentlySelectedRevision )\n\t\t\t\t\t}\n\t\t\t\t\tonCancel={ () =>\n\t\t\t\t\t\tsetIsLoadingRevisionWithUnsavedChanges( false )\n\t\t\t\t\t}\n\t\t\t\t\tsize=\"medium\"\n\t\t\t\t>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'Are you sure you want to apply this revision? Any unsaved changes will be lost.'\n\t\t\t\t\t) }\n\t\t\t\t</ConfirmDialog>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenRevisions;\n"],
+  "mappings": "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",
+  "names": []
+}

package/build-module/screen-revisions/revisions-buttons.js

@@ -0,0 +1,178 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { __, sprintf } from "@wordpress/i18n";
+import { Button, Composite } 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 { getGlobalStylesChanges } from "@wordpress/global-styles-engine";
+import { ENTER, SPACE } from "@wordpress/keycodes";
+const DAY_IN_MILLISECONDS = 60 * 60 * 1e3 * 24;
+function ChangesSummary({ revision, previousRevision }) {
+  const changes = getGlobalStylesChanges(
+    revision,
+    previousRevision,
+    {
+      maxResults: 7
+    }
+  );
+  if (!changes.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "data-testid": "global-styles-revision-changes",
+      className: "global-styles-ui-screen-revisions__changes",
+      children: changes.map((change) => /* @__PURE__ */ jsx("li", { children: change }, change))
+    }
+  );
+}
+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 */
+      __("Unsaved changes by %s"),
+      authorDisplayName
+    );
+  }
+  return areStylesEqual ? sprintf(
+    // translators: 1: author display name. 2: revision creation date.
+    __(
+      "Changes saved by %1$s on %2$s. This revision matches current editor styles."
+    ),
+    authorDisplayName,
+    formattedModifiedDate
+  ) : sprintf(
+    // translators: 1: author display name. 2: revision creation date.
+    __("Changes saved by %1$s on %2$s"),
+    authorDisplayName,
+    formattedModifiedDate
+  );
+}
+function RevisionsButtons({
+  userRevisions,
+  selectedRevisionId,
+  onChange,
+  canApplyRevision,
+  onApplyRevision
+}) {
+  const { currentThemeName, currentUser } = useSelect((select) => {
+    const { getCurrentTheme, getCurrentUser } = select(coreStore);
+    const currentTheme = getCurrentTheme();
+    return {
+      currentThemeName: currentTheme?.name?.rendered || currentTheme?.stylesheet,
+      currentUser: getCurrentUser()
+    };
+  }, []);
+  const dateNowInMs = getDate(null).getTime();
+  const { datetimeAbbreviated } = getSettings().formats;
+  return /* @__PURE__ */ jsx(
+    Composite,
+    {
+      orientation: "vertical",
+      className: "global-styles-ui-screen-revisions__revisions-list",
+      "aria-label": __("Global styles revisions list"),
+      role: "listbox",
+      children: userRevisions.map((revision, index) => {
+        const { id, author, modified } = revision;
+        const isUnsaved = "unsaved" === id;
+        const revisionAuthor = isUnsaved ? currentUser : author;
+        const authorDisplayName = revisionAuthor?.name || __("User");
+        const authorAvatar = revisionAuthor?.avatar_urls?.["48"];
+        const isFirstItem = index === 0;
+        const isSelected = selectedRevisionId ? selectedRevisionId === id : isFirstItem;
+        const areStylesEqual = !canApplyRevision && isSelected;
+        const isReset = "parent" === id;
+        const modifiedString = modified instanceof Date ? modified.toISOString() : modified;
+        const modifiedDate = getDate(modifiedString ?? null);
+        const displayDate = modifiedString && dateNowInMs - modifiedDate.getTime() > DAY_IN_MILLISECONDS ? dateI18n(datetimeAbbreviated, modifiedDate) : humanTimeDiff(
+          modifiedString ?? modifiedDate,
+          void 0
+        );
+        const revisionLabel = getRevisionLabel(
+          id,
+          authorDisplayName,
+          dateI18n(datetimeAbbreviated, modifiedDate),
+          areStylesEqual
+        );
+        return /* @__PURE__ */ jsxs(
+          Composite.Item,
+          {
+            className: "global-styles-ui-screen-revisions__revision-item",
+            "aria-current": isSelected,
+            role: "option",
+            onKeyDown: (event) => {
+              const { keyCode } = event;
+              if (keyCode === ENTER || keyCode === SPACE) {
+                onChange(revision);
+              }
+            },
+            onClick: (event) => {
+              event.preventDefault();
+              onChange(revision);
+            },
+            "aria-selected": isSelected,
+            "aria-label": revisionLabel,
+            render: /* @__PURE__ */ jsx("div", {}),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "global-styles-ui-screen-revisions__revision-item-wrapper", children: isReset ? /* @__PURE__ */ jsxs("span", { className: "global-styles-ui-screen-revisions__description", children: [
+                __("Default styles"),
+                /* @__PURE__ */ jsx("span", { className: "global-styles-ui-screen-revisions__meta", children: currentThemeName })
+              ] }) : /* @__PURE__ */ jsxs("span", { className: "global-styles-ui-screen-revisions__description", children: [
+                isUnsaved ? /* @__PURE__ */ jsx("span", { className: "global-styles-ui-screen-revisions__date", children: __("(Unsaved)") }) : /* @__PURE__ */ jsx(
+                  "time",
+                  {
+                    className: "global-styles-ui-screen-revisions__date",
+                    dateTime: modifiedString,
+                    children: displayDate
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "global-styles-ui-screen-revisions__meta", children: [
+                  /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      alt: authorDisplayName,
+                      src: authorAvatar
+                    }
+                  ),
+                  authorDisplayName
+                ] }),
+                isSelected && /* @__PURE__ */ jsx(
+                  ChangesSummary,
+                  {
+                    revision,
+                    previousRevision: index < userRevisions.length ? userRevisions[index + 1] : void 0
+                  }
+                )
+              ] }) }),
+              isSelected && (areStylesEqual ? /* @__PURE__ */ jsx("p", { className: "global-styles-ui-screen-revisions__applied-text", children: __(
+                "These styles are already applied to your site."
+              ) }) : /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "compact",
+                  variant: "primary",
+                  className: "global-styles-ui-screen-revisions__apply-button",
+                  onClick: onApplyRevision,
+                  "aria-label": __(
+                    "Apply the selected revision to your site."
+                  ),
+                  children: isReset ? __("Reset to defaults") : __("Apply")
+                }
+              ))
+            ]
+          },
+          id
+        );
+      })
+    }
+  );
+}
+var revisions_buttons_default = RevisionsButtons;
+export {
+  revisions_buttons_default as default
+};
+//# sourceMappingURL=revisions-buttons.js.map

package/build-module/screen-revisions/revisions-buttons.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/screen-revisions/revisions-buttons.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Button, Composite } 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 { getGlobalStylesChanges } from '@wordpress/global-styles-engine';\nimport { ENTER, SPACE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport type { Revision } from './types';\n\nconst DAY_IN_MILLISECONDS = 60 * 60 * 1000 * 24;\n\ninterface ChangesSummaryProps {\n\trevision: Revision;\n\tpreviousRevision?: Revision;\n}\n\nfunction ChangesSummary( { revision, previousRevision }: ChangesSummaryProps ) {\n\tconst changes: string[] = getGlobalStylesChanges(\n\t\trevision,\n\t\tpreviousRevision,\n\t\t{\n\t\t\tmaxResults: 7,\n\t\t}\n\t);\n\n\tif ( ! changes.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ul\n\t\t\tdata-testid=\"global-styles-revision-changes\"\n\t\t\tclassName=\"global-styles-ui-screen-revisions__changes\"\n\t\t>\n\t\t\t{ changes.map( ( change ) => (\n\t\t\t\t<li key={ change }>{ change }</li>\n\t\t\t) ) }\n\t\t</ul>\n\t);\n}\n\n/**\n * Returns a button label for the revision.\n * @param id\n * @param authorDisplayName\n * @param formattedModifiedDate\n * @param areStylesEqual\n */\nfunction getRevisionLabel(\n\tid: string | number,\n\tauthorDisplayName: string,\n\tformattedModifiedDate: string,\n\tareStylesEqual: boolean\n): string {\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: author display name. 2: 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: author display name. 2: 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\ninterface RevisionButtonsProps {\n\tuserRevisions: Revision[];\n\tselectedRevisionId?: string | number;\n\tonChange: ( revision: Revision ) => void;\n\tcanApplyRevision?: boolean;\n\tonApplyRevision?: () => void;\n}\n\n/**\n * Returns a rendered list of revisions buttons.\n * @param root0\n * @param root0.userRevisions\n * @param root0.selectedRevisionId\n * @param root0.onChange\n * @param root0.canApplyRevision\n * @param root0.onApplyRevision\n */\nfunction RevisionsButtons( {\n\tuserRevisions,\n\tselectedRevisionId,\n\tonChange,\n\tcanApplyRevision,\n\tonApplyRevision,\n}: RevisionButtonsProps ) {\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( null ).getTime();\n\tconst { datetimeAbbreviated } = getSettings().formats;\n\n\treturn (\n\t\t<Composite\n\t\t\torientation=\"vertical\"\n\t\t\tclassName=\"global-styles-ui-screen-revisions__revisions-list\"\n\t\t\taria-label={ __( 'Global styles revisions list' ) }\n\t\t\trole=\"listbox\"\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\t// Convert modified to string if it's a Date, for type compatibility\n\t\t\t\tconst modifiedString =\n\t\t\t\t\tmodified instanceof Date\n\t\t\t\t\t\t? modified.toISOString()\n\t\t\t\t\t\t: modified;\n\t\t\t\tconst modifiedDate = getDate( modifiedString ?? null );\n\t\t\t\tconst displayDate =\n\t\t\t\t\tmodifiedString &&\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(\n\t\t\t\t\t\t\t\tmodifiedString ?? modifiedDate,\n\t\t\t\t\t\t\t\tundefined\n\t\t\t\t\t\t  );\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<Composite.Item\n\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\tclassName=\"global-styles-ui-screen-revisions__revision-item\"\n\t\t\t\t\t\taria-current={ isSelected }\n\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\tconst { keyCode } = event;\n\t\t\t\t\t\t\tif ( keyCode === ENTER || keyCode === SPACE ) {\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} }\n\t\t\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tonChange( revision );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\taria-selected={ isSelected }\n\t\t\t\t\t\taria-label={ revisionLabel }\n\t\t\t\t\t\trender={ <div /> }\n\t\t\t\t\t>\n\t\t\t\t\t\t<span className=\"global-styles-ui-screen-revisions__revision-item-wrapper\">\n\t\t\t\t\t\t\t{ isReset ? (\n\t\t\t\t\t\t\t\t<span className=\"global-styles-ui-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=\"global-styles-ui-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=\"global-styles-ui-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=\"global-styles-ui-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=\"global-styles-ui-screen-revisions__date\"\n\t\t\t\t\t\t\t\t\t\t\tdateTime={ modifiedString }\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=\"global-styles-ui-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\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\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: undefined\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</span>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{ isSelected &&\n\t\t\t\t\t\t\t( areStylesEqual ? (\n\t\t\t\t\t\t\t\t<p className=\"global-styles-ui-screen-revisions__applied-text\">\n\t\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t'These styles are already applied to your site.'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\tclassName=\"global-styles-ui-screen-revisions__apply-button\"\n\t\t\t\t\t\t\t\t\tonClick={ onApplyRevision }\n\t\t\t\t\t\t\t\t\taria-label={ __(\n\t\t\t\t\t\t\t\t\t\t'Apply the selected revision to your site.'\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{ isReset\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) ) }\n\t\t\t\t\t</Composite.Item>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Composite>\n\t);\n}\n\nexport default RevisionsButtons;\n"],
+  "mappings": "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",
+  "names": []
+}

package/build-module/screen-revisions/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/build-module/screen-revisions/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/build-module/screen-revisions/use-global-styles-revisions.js

@@ -0,0 +1,145 @@
+import { useSelect } from "@wordpress/data";
+import {
+  store as coreStore
+} from "@wordpress/core-data";
+import { useContext, useMemo } from "@wordpress/element";
+import { GlobalStylesContext } from "../context";
+const SITE_EDITOR_AUTHORS_QUERY = {
+  per_page: -1,
+  _fields: "id,name,avatar_urls",
+  context: "view",
+  capabilities: ["edit_theme_options"]
+};
+const DEFAULT_QUERY = { per_page: 100, page: 1 };
+const EMPTY_ARRAY = [];
+function useGlobalStylesRevisions({
+  query
+} = {}) {
+  const { user: userConfig } = useContext(GlobalStylesContext);
+  const _query = useMemo(
+    () => ({ ...DEFAULT_QUERY, ...query }),
+    [query]
+  );
+  const {
+    authors,
+    currentUser,
+    isDirty,
+    revisions,
+    isLoadingGlobalStylesRevisions,
+    revisionsCount
+  } = useSelect(
+    (select) => {
+      const {
+        __experimentalGetDirtyEntityRecords,
+        getCurrentUser,
+        getUsers,
+        getRevisions,
+        __experimentalGetCurrentGlobalStylesId,
+        getEntityRecord,
+        // @ts-expect-error
+        isResolving
+      } = select(coreStore);
+      const dirtyEntityRecords = __experimentalGetDirtyEntityRecords() || [];
+      const _currentUser = getCurrentUser();
+      const _isDirty = dirtyEntityRecords.length > 0;
+      const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+      const globalStyles = globalStylesId ? getEntityRecord(
+        "root",
+        "globalStyles",
+        globalStylesId
+      ) : void 0;
+      const _revisionsCount = (
+        // @ts-expect-error - _links is not typed in GlobalStylesRevision
+        globalStyles?._links?.["version-history"]?.[0]?.count ?? 0
+      );
+      const globalStylesRevisions = globalStylesId ? getRevisions(
+        "root",
+        "globalStyles",
+        globalStylesId,
+        _query
+      ) || EMPTY_ARRAY : EMPTY_ARRAY;
+      const _authors = getUsers(SITE_EDITOR_AUTHORS_QUERY) || [];
+      const _isResolving = globalStylesId ? isResolving("getRevisions", [
+        "root",
+        "globalStyles",
+        globalStylesId,
+        _query
+      ]) : false;
+      return {
+        authors: _authors,
+        currentUser: _currentUser,
+        isDirty: _isDirty,
+        revisions: globalStylesRevisions,
+        isLoadingGlobalStylesRevisions: _isResolving,
+        revisionsCount: _revisionsCount
+      };
+    },
+    [_query]
+  );
+  return useMemo(() => {
+    if (!authors.length || isLoadingGlobalStylesRevisions) {
+      return {
+        revisions: EMPTY_ARRAY,
+        hasUnsavedChanges: isDirty,
+        isLoading: true,
+        revisionsCount
+      };
+    }
+    const _modifiedRevisions = revisions.map((revision) => {
+      return {
+        ...revision,
+        author: authors.find(
+          (author) => author.id === revision.author
+        )
+      };
+    });
+    const fetchedRevisionsCount = revisions.length;
+    if (fetchedRevisionsCount) {
+      if (_modifiedRevisions[0].id !== "unsaved" && _query.page === 1) {
+        _modifiedRevisions[0].isLatest = true;
+      }
+      if (isDirty && userConfig && Object.keys(userConfig).length > 0 && currentUser && _query.page === 1) {
+        const unsavedRevision = {
+          id: "unsaved",
+          styles: userConfig?.styles,
+          settings: userConfig?.settings,
+          _links: userConfig?._links,
+          author: {
+            name: currentUser?.name || "",
+            // @ts-expect-error - avatar_urls is not typed in User
+            avatar_urls: currentUser?.avatar_urls || {}
+          },
+          modified: /* @__PURE__ */ new Date()
+        };
+        _modifiedRevisions.unshift(unsavedRevision);
+      }
+      if (_query.per_page && _query.page === Math.ceil(revisionsCount / _query.per_page)) {
+        _modifiedRevisions.push({
+          id: "parent",
+          styles: {},
+          settings: {}
+        });
+      }
+    }
+    return {
+      revisions: _modifiedRevisions,
+      hasUnsavedChanges: isDirty,
+      isLoading: false,
+      revisionsCount
+    };
+  }, [
+    isDirty,
+    revisions,
+    currentUser,
+    authors,
+    userConfig,
+    isLoadingGlobalStylesRevisions,
+    revisionsCount,
+    _query.page,
+    _query.per_page
+  ]);
+}
+export {
+  useGlobalStylesRevisions as default
+};
+//# sourceMappingURL=use-global-styles-revisions.js.map