@wordpress/edit-site 5.9.0 → 5.11.0

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-colors.js"],"names":["__","__experimentalVStack","VStack","privateApis","blockEditorPrivateApis","ScreenHeader","Palette","BlockPreviewPanel","getVariationClassName","unlock","useGlobalStyle","useGlobalSetting","useSettingsForBlockElement","ColorPanel","StylesColorPanel","ScreenColors","name","variation","variationClassName","prefixParts","concat","prefix","join","style","inheritedStyle","setStyle","shouldDecodeEncode","rawSettings","settings"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,oBAAoB,IAAIC,MAAjC,QAA+C,uBAA/C;AACA,SAASC,WAAW,IAAIC,sBAAxB,QAAsD,yBAAtD;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,OAAOC,OAAP,MAAoB,WAApB;AACA,OAAOC,iBAAP,MAA8B,uBAA9B;AACA,SAASC,qBAAT,QAAsC,SAAtC;AACA,SAASC,MAAT,QAAuB,oBAAvB;AAEA,MAAM;AACLC,EAAAA,cADK;AAELC,EAAAA,gBAFK;AAGLC,EAAAA,0BAHK;AAILC,EAAAA,UAAU,EAAEC;AAJP,IAKFL,MAAM,CAAEL,sBAAF,CALV;;AAOA,SAASW,YAAT,OAAkD;AAAA,MAA3B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,SAAS,GAAG;AAApB,GAA2B;AACjD,QAAMC,kBAAkB,GAAGV,qBAAqB,CAAES,SAAF,CAAhD;AAEA,MAAIE,WAAW,GAAG,EAAlB;;AACA,MAAKF,SAAL,EAAiB;AAChBE,IAAAA,WAAW,GAAG,CAAE,YAAF,EAAgBF,SAAhB,EAA4BG,MAA5B,CAAoCD,WAApC,CAAd;AACA;;AACD,QAAME,MAAM,GAAGF,WAAW,CAACG,IAAZ,CAAkB,GAAlB,CAAf;AAEA,QAAM,CAAEC,KAAF,IAAYb,cAAc,CAAEW,MAAF,EAAUL,IAAV,EAAgB,MAAhB,EAAwB,KAAxB,CAAhC;AACA,QAAM,CAAEQ,cAAF,EAAkBC,QAAlB,IAA+Bf,cAAc,CAAEW,MAAF,EAAUL,IAAV,EAAgB,KAAhB,EAAuB;AACzEU,IAAAA,kBAAkB,EAAE;AADqD,GAAvB,CAAnD;AAGA,QAAM,CAAEC,WAAF,IAAkBhB,gBAAgB,CAAE,EAAF,EAAMK,IAAN,CAAxC;AACA,QAAMY,QAAQ,GAAGhB,0BAA0B,CAAEe,WAAF,EAAeX,IAAf,CAA3C;AAEA,SACC,8BACC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGhB,EAAE,CAAE,QAAF,CADX;AAEC,IAAA,WAAW,EAAGA,EAAE,CACf,iFADe;AAFjB,IADD,EAQC,cAAC,iBAAD;AAAmB,IAAA,IAAI,EAAGgB,IAA1B;AAAiC,IAAA,SAAS,EAAGE;AAA7C,IARD,EAUC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,cAAC,OAAD;AAAS,IAAA,IAAI,EAAGF;AAAhB,IADD,EAGC,cAAC,gBAAD;AACC,IAAA,cAAc,EAAGQ,cADlB;AAEC,IAAA,KAAK,EAAGD,KAFT;AAGC,IAAA,QAAQ,EAAGE,QAHZ;AAIC,IAAA,QAAQ,EAAGG;AAJZ,IAHD,CADD,CAVD,CADD;AAyBA;;AAED,eAAeb,YAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport Palette from './palette';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { getVariationClassName } from './utils';\nimport { unlock } from '../../private-apis';\n\nconst {\n\tuseGlobalStyle,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n\tColorPanel: StylesColorPanel,\n} = unlock( blockEditorPrivateApis );\n\nfunction ScreenColors( { name, variation = '' } ) {\n\tconst variationClassName = getVariationClassName( variation );\n\n\tlet prefixParts = [];\n\tif ( variation ) {\n\t\tprefixParts = [ 'variations', variation ].concat( prefixParts );\n\t}\n\tconst prefix = prefixParts.join( '.' );\n\n\tconst [ style ] = useGlobalStyle( prefix, name, 'user', false );\n\tconst [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {\n\t\tshouldDecodeEncode: false,\n\t} );\n\tconst [ rawSettings ] = useGlobalSetting( '', name );\n\tconst settings = useSettingsForBlockElement( rawSettings, name );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Colors' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Manage palettes and the default color of different global elements on the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<BlockPreviewPanel name={ name } variation={ variationClassName } />\n\n\t\t\t<div className=\"edit-site-global-styles-screen-colors\">\n\t\t\t\t<VStack spacing={ 10 }>\n\t\t\t\t\t<Palette name={ name } />\n\n\t\t\t\t\t<StylesColorPanel\n\t\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t/>\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenColors;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-colors.js"],"names":["__","__experimentalVStack","VStack","privateApis","blockEditorPrivateApis","ScreenHeader","Palette","BlockPreviewPanel","unlock","useGlobalStyle","useGlobalSetting","useSettingsForBlockElement","ColorPanel","StylesColorPanel","ScreenColors","style","undefined","shouldDecodeEncode","inheritedStyle","setStyle","rawSettings","settings"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,oBAAoB,IAAIC,MAAjC,QAA+C,uBAA/C;AACA,SAASC,WAAW,IAAIC,sBAAxB,QAAsD,yBAAtD;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,OAAOC,OAAP,MAAoB,WAApB;AACA,OAAOC,iBAAP,MAA8B,uBAA9B;AACA,SAASC,MAAT,QAAuB,oBAAvB;AAEA,MAAM;AACLC,EAAAA,cADK;AAELC,EAAAA,gBAFK;AAGLC,EAAAA,0BAHK;AAILC,EAAAA,UAAU,EAAEC;AAJP,IAKFL,MAAM,CAAEJ,sBAAF,CALV;;AAOA,SAASU,YAAT,GAAwB;AACvB,QAAM,CAAEC,KAAF,IAAYN,cAAc,CAAE,EAAF,EAAMO,SAAN,EAAiB,MAAjB,EAAyB;AACxDC,IAAAA,kBAAkB,EAAE;AADoC,GAAzB,CAAhC;AAGA,QAAM,CAAEC,cAAF,EAAkBC,QAAlB,IAA+BV,cAAc,CAAE,EAAF,EAAMO,SAAN,EAAiB,KAAjB,EAAwB;AAC1EC,IAAAA,kBAAkB,EAAE;AADsD,GAAxB,CAAnD;AAGA,QAAM,CAAEG,WAAF,IAAkBV,gBAAgB,CAAE,EAAF,CAAxC;AACA,QAAMW,QAAQ,GAAGV,0BAA0B,CAAES,WAAF,CAA3C;AAEA,SACC,8BACC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGpB,EAAE,CAAE,QAAF,CADX;AAEC,IAAA,WAAW,EAAGA,EAAE,CACf,iFADe;AAFjB,IADD,EAQC,cAAC,iBAAD,OARD,EAUC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,cAAC,OAAD,OADD,EAGC,cAAC,gBAAD;AACC,IAAA,cAAc,EAAGkB,cADlB;AAEC,IAAA,KAAK,EAAGH,KAFT;AAGC,IAAA,QAAQ,EAAGI,QAHZ;AAIC,IAAA,QAAQ,EAAGE;AAJZ,IAHD,CADD,CAVD,CADD;AAyBA;;AAED,eAAeP,YAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport Palette from './palette';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { unlock } from '../../private-apis';\n\nconst {\n\tuseGlobalStyle,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n\tColorPanel: StylesColorPanel,\n} = unlock( blockEditorPrivateApis );\n\nfunction ScreenColors() {\n\tconst [ style ] = useGlobalStyle( '', undefined, 'user', {\n\t\tshouldDecodeEncode: false,\n\t} );\n\tconst [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {\n\t\tshouldDecodeEncode: false,\n\t} );\n\tconst [ rawSettings ] = useGlobalSetting( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Colors' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Manage palettes and the default color of different global elements on the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<BlockPreviewPanel />\n\n\t\t\t<div className=\"edit-site-global-styles-screen-colors\">\n\t\t\t\t<VStack spacing={ 10 }>\n\t\t\t\t\t<Palette />\n\n\t\t\t\t\t<StylesColorPanel\n\t\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t/>\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenColors;\n"]}

package/build-module/components/global-styles/screen-css.js

@@ -3,26 +3,29 @@ import { createElement, Fragment } from "@wordpress/element";
 /**
  * WordPress dependencies
  */
-import { sprintf, __ } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { ExternalLink } from '@wordpress/components';
-import { getBlockType } from '@wordpress/blocks';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
 
+import { unlock } from '../../private-apis';
 import ScreenHeader from './header';
-import CustomCSSControl from './custom-css';
+const {
+  useGlobalStyle,
+  AdvancedPanel: StylesAdvancedPanel
+} = unlock(blockEditorPrivateApis);
 
-function ScreenCSS(_ref) {
-  let {
-    name
-  } = _ref;
-  // If name is defined, we are customizing CSS at the block level.
-  // Display the block title in the description.
-  const blockType = getBlockType(name);
-  const title = blockType === null || blockType === void 0 ? void 0 : blockType.title;
-  const description = title !== undefined ? sprintf( // translators: %s: is the name of a block e.g., 'Image' or 'Table'.
-  __('Add your own CSS to customize the appearance of the %s block.'), title) : __('Add your own CSS to customize the appearance and layout of your site.');
+function ScreenCSS() {
+  const description = __('Add your own CSS to customize the appearance and layout of your site.');
+
+  const [style] = useGlobalStyle('', undefined, 'user', {
+    shouldDecodeEncode: false
+  });
+  const [inheritedStyle, setStyle] = useGlobalStyle('', undefined, 'all', {
+    shouldDecodeEncode: false
+  });
   return createElement(Fragment, null, createElement(ScreenHeader, {
     title: __('CSS'),
     description: createElement(Fragment, null, description, createElement(ExternalLink, {
@@ -31,8 +34,10 @@ function ScreenCSS(_ref) {
     }, __('Learn more about CSS')))
   }), createElement("div", {
     className: "edit-site-global-styles-screen-css"
-  }, createElement(CustomCSSControl, {
-    blockName: name
+  }, createElement(StylesAdvancedPanel, {
+    value: style,
+    onChange: setStyle,
+    inheritedValue: inheritedStyle
   })));
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-css.js"],"names":["sprintf","__","ExternalLink","getBlockType","ScreenHeader","CustomCSSControl","ScreenCSS","name","blockType","title","description","undefined"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,OAAT,EAAkBC,EAAlB,QAA4B,iBAA5B;AACA,SAASC,YAAT,QAA6B,uBAA7B;AACA,SAASC,YAAT,QAA6B,mBAA7B;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,OAAOC,gBAAP,MAA6B,cAA7B;;AAEA,SAASC,SAAT,OAA+B;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AAC9B;AACA;AACA,QAAMC,SAAS,GAAGL,YAAY,CAAEI,IAAF,CAA9B;AACA,QAAME,KAAK,GAAGD,SAAH,aAAGA,SAAH,uBAAGA,SAAS,CAAEC,KAAzB;AAEA,QAAMC,WAAW,GAChBD,KAAK,KAAKE,SAAV,GACGX,OAAO,EACP;AACAC,EAAAA,EAAE,CACD,+DADC,CAFK,EAKPQ,KALO,CADV,GAQGR,EAAE,CACF,uEADE,CATN;AAaA,SACC,8BACC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGA,EAAE,CAAE,KAAF,CADX;AAEC,IAAA,WAAW,EACV,8BACGS,WADH,EAEC,cAAC,YAAD;AACC,MAAA,IAAI,EAAC,kDADN;AAEC,MAAA,SAAS,EAAC;AAFX,OAIGT,EAAE,CAAE,sBAAF,CAJL,CAFD;AAHF,IADD,EAeC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,gBAAD;AAAkB,IAAA,SAAS,EAAGM;AAA9B,IADD,CAfD,CADD;AAqBA;;AAED,eAAeD,SAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { sprintf, __ } from '@wordpress/i18n';\nimport { ExternalLink } from '@wordpress/components';\nimport { getBlockType } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport CustomCSSControl from './custom-css';\n\nfunction ScreenCSS( { name } ) {\n\t// If name is defined, we are customizing CSS at the block level.\n\t// Display the block title in the description.\n\tconst blockType = getBlockType( name );\n\tconst title = blockType?.title;\n\n\tconst description =\n\t\ttitle !== undefined\n\t\t\t? sprintf(\n\t\t\t\t\t// translators: %s: is the name of a block e.g., 'Image' or 'Table'.\n\t\t\t\t\t__(\n\t\t\t\t\t\t'Add your own CSS to customize the appearance of the %s block.'\n\t\t\t\t\t),\n\t\t\t\t\ttitle\n\t\t\t  )\n\t\t\t: __(\n\t\t\t\t\t'Add your own CSS to customize the appearance and layout of your site.'\n\t\t\t  );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'CSS' ) }\n\t\t\t\tdescription={\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ description }\n\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\thref=\"https://wordpress.org/documentation/article/css/\"\n\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-screen-css-help-link\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Learn more about CSS' ) }\n\t\t\t\t\t\t</ExternalLink>\n\t\t\t\t\t</>\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<div className=\"edit-site-global-styles-screen-css\">\n\t\t\t\t<CustomCSSControl blockName={ name } />\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenCSS;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-css.js"],"names":["__","ExternalLink","privateApis","blockEditorPrivateApis","unlock","ScreenHeader","useGlobalStyle","AdvancedPanel","StylesAdvancedPanel","ScreenCSS","description","style","undefined","shouldDecodeEncode","inheritedStyle","setStyle"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,YAAT,QAA6B,uBAA7B;AACA,SAASC,WAAW,IAAIC,sBAAxB,QAAsD,yBAAtD;AAEA;AACA;AACA;;AACA,SAASC,MAAT,QAAuB,oBAAvB;AACA,OAAOC,YAAP,MAAyB,UAAzB;AAEA,MAAM;AAAEC,EAAAA,cAAF;AAAkBC,EAAAA,aAAa,EAAEC;AAAjC,IAAyDJ,MAAM,CACpED,sBADoE,CAArE;;AAIA,SAASM,SAAT,GAAqB;AACpB,QAAMC,WAAW,GAAGV,EAAE,CACrB,uEADqB,CAAtB;;AAGA,QAAM,CAAEW,KAAF,IAAYL,cAAc,CAAE,EAAF,EAAMM,SAAN,EAAiB,MAAjB,EAAyB;AACxDC,IAAAA,kBAAkB,EAAE;AADoC,GAAzB,CAAhC;AAGA,QAAM,CAAEC,cAAF,EAAkBC,QAAlB,IAA+BT,cAAc,CAAE,EAAF,EAAMM,SAAN,EAAiB,KAAjB,EAAwB;AAC1EC,IAAAA,kBAAkB,EAAE;AADsD,GAAxB,CAAnD;AAIA,SACC,8BACC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGb,EAAE,CAAE,KAAF,CADX;AAEC,IAAA,WAAW,EACV,8BACGU,WADH,EAEC,cAAC,YAAD;AACC,MAAA,IAAI,EAAC,kDADN;AAEC,MAAA,SAAS,EAAC;AAFX,OAIGV,EAAE,CAAE,sBAAF,CAJL,CAFD;AAHF,IADD,EAeC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,mBAAD;AACC,IAAA,KAAK,EAAGW,KADT;AAEC,IAAA,QAAQ,EAAGI,QAFZ;AAGC,IAAA,cAAc,EAAGD;AAHlB,IADD,CAfD,CADD;AAyBA;;AAED,eAAeL,SAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { ExternalLink } from '@wordpress/components';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\nimport ScreenHeader from './header';\n\nconst { useGlobalStyle, AdvancedPanel: StylesAdvancedPanel } = unlock(\n\tblockEditorPrivateApis\n);\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\tconst [ style ] = useGlobalStyle( '', undefined, 'user', {\n\t\tshouldDecodeEncode: false,\n\t} );\n\tconst [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {\n\t\tshouldDecodeEncode: false,\n\t} );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'CSS' ) }\n\t\t\t\tdescription={\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ description }\n\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\thref=\"https://wordpress.org/documentation/article/css/\"\n\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-screen-css-help-link\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Learn more about CSS' ) }\n\t\t\t\t\t\t</ExternalLink>\n\t\t\t\t\t</>\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<div className=\"edit-site-global-styles-screen-css\">\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"]}

package/build-module/components/global-styles/screen-layout.js

@@ -12,7 +12,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import DimensionsPanel from './dimensions-panel';
 import ScreenHeader from './header';
 import BlockPreviewPanel from './block-preview-panel';
-import { getVariationClassName } from './utils';
 import { unlock } from '../../private-apis';
 const {
   useHasDimensionsPanel,
@@ -20,24 +19,13 @@ const {
   useSettingsForBlockElement
 } = unlock(blockEditorPrivateApis);
 
-function ScreenLayout(_ref) {
-  let {
-    name,
-    variation = ''
-  } = _ref;
-  const [rawSettings] = useGlobalSetting('', name);
-  const settings = useSettingsForBlockElement(rawSettings, name);
+function ScreenLayout() {
+  const [rawSettings] = useGlobalSetting('');
+  const settings = useSettingsForBlockElement(rawSettings);
   const hasDimensionsPanel = useHasDimensionsPanel(settings);
-  const variationClassName = getVariationClassName(variation);
   return createElement(Fragment, null, createElement(ScreenHeader, {
     title: __('Layout')
-  }), createElement(BlockPreviewPanel, {
-    name: name,
-    variation: variationClassName
-  }), hasDimensionsPanel && createElement(DimensionsPanel, {
-    name: name,
-    variation: variation
-  }));
+  }), createElement(BlockPreviewPanel, null), hasDimensionsPanel && createElement(DimensionsPanel, null));
 }
 
 export default ScreenLayout;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-layout.js"],"names":["__","privateApis","blockEditorPrivateApis","DimensionsPanel","ScreenHeader","BlockPreviewPanel","getVariationClassName","unlock","useHasDimensionsPanel","useGlobalSetting","useSettingsForBlockElement","ScreenLayout","name","variation","rawSettings","settings","hasDimensionsPanel","variationClassName"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,WAAW,IAAIC,sBAAxB,QAAsD,yBAAtD;AAEA;AACA;AACA;;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,OAAOC,iBAAP,MAA8B,uBAA9B;AACA,SAASC,qBAAT,QAAsC,SAAtC;AACA,SAASC,MAAT,QAAuB,oBAAvB;AAEA,MAAM;AAAEC,EAAAA,qBAAF;AAAyBC,EAAAA,gBAAzB;AAA2CC,EAAAA;AAA3C,IACLH,MAAM,CAAEL,sBAAF,CADP;;AAGA,SAASS,YAAT,OAAkD;AAAA,MAA3B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,SAAS,GAAG;AAApB,GAA2B;AACjD,QAAM,CAAEC,WAAF,IAAkBL,gBAAgB,CAAE,EAAF,EAAMG,IAAN,CAAxC;AACA,QAAMG,QAAQ,GAAGL,0BAA0B,CAAEI,WAAF,EAAeF,IAAf,CAA3C;AACA,QAAMI,kBAAkB,GAAGR,qBAAqB,CAAEO,QAAF,CAAhD;AACA,QAAME,kBAAkB,GAAGX,qBAAqB,CAAEO,SAAF,CAAhD;AACA,SACC,8BACC,cAAC,YAAD;AAAc,IAAA,KAAK,EAAGb,EAAE,CAAE,QAAF;AAAxB,IADD,EAEC,cAAC,iBAAD;AAAmB,IAAA,IAAI,EAAGY,IAA1B;AAAiC,IAAA,SAAS,EAAGK;AAA7C,IAFD,EAGGD,kBAAkB,IACnB,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAGJ,IAAxB;AAA+B,IAAA,SAAS,EAAGC;AAA3C,IAJF,CADD;AASA;;AAED,eAAeF,YAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport DimensionsPanel from './dimensions-panel';\nimport ScreenHeader from './header';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { getVariationClassName } from './utils';\nimport { unlock } from '../../private-apis';\n\nconst { useHasDimensionsPanel, useGlobalSetting, useSettingsForBlockElement } =\n\tunlock( blockEditorPrivateApis );\n\nfunction ScreenLayout( { name, variation = '' } ) {\n\tconst [ rawSettings ] = useGlobalSetting( '', name );\n\tconst settings = useSettingsForBlockElement( rawSettings, name );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst variationClassName = getVariationClassName( variation );\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'Layout' ) } />\n\t\t\t<BlockPreviewPanel name={ name } variation={ variationClassName } />\n\t\t\t{ hasDimensionsPanel && (\n\t\t\t\t<DimensionsPanel name={ name } variation={ variation } />\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenLayout;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-layout.js"],"names":["__","privateApis","blockEditorPrivateApis","DimensionsPanel","ScreenHeader","BlockPreviewPanel","unlock","useHasDimensionsPanel","useGlobalSetting","useSettingsForBlockElement","ScreenLayout","rawSettings","settings","hasDimensionsPanel"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,WAAW,IAAIC,sBAAxB,QAAsD,yBAAtD;AAEA;AACA;AACA;;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,OAAOC,iBAAP,MAA8B,uBAA9B;AACA,SAASC,MAAT,QAAuB,oBAAvB;AAEA,MAAM;AAAEC,EAAAA,qBAAF;AAAyBC,EAAAA,gBAAzB;AAA2CC,EAAAA;AAA3C,IACLH,MAAM,CAAEJ,sBAAF,CADP;;AAGA,SAASQ,YAAT,GAAwB;AACvB,QAAM,CAAEC,WAAF,IAAkBH,gBAAgB,CAAE,EAAF,CAAxC;AACA,QAAMI,QAAQ,GAAGH,0BAA0B,CAAEE,WAAF,CAA3C;AACA,QAAME,kBAAkB,GAAGN,qBAAqB,CAAEK,QAAF,CAAhD;AACA,SACC,8BACC,cAAC,YAAD;AAAc,IAAA,KAAK,EAAGZ,EAAE,CAAE,QAAF;AAAxB,IADD,EAEC,cAAC,iBAAD,OAFD,EAGGa,kBAAkB,IAAI,cAAC,eAAD,OAHzB,CADD;AAOA;;AAED,eAAeH,YAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport DimensionsPanel from './dimensions-panel';\nimport ScreenHeader from './header';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { unlock } from '../../private-apis';\n\nconst { useHasDimensionsPanel, useGlobalSetting, useSettingsForBlockElement } =\n\tunlock( blockEditorPrivateApis );\n\nfunction ScreenLayout() {\n\tconst [ rawSettings ] = useGlobalSetting( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'Layout' ) } />\n\t\t\t<BlockPreviewPanel />\n\t\t\t{ hasDimensionsPanel && <DimensionsPanel /> }\n\t\t</>\n\t);\n}\n\nexport default ScreenLayout;\n"]}

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

@@ -0,0 +1,121 @@
+import { createElement, Fragment } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button, __experimentalUseNavigator as useNavigator, __experimentalConfirmDialog as ConfirmDialog, Spinner } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useContext, useState, useEffect } from '@wordpress/element';
+import { privateApis as blockEditorPrivateApis, store as blockEditorStore } from '@wordpress/block-editor';
+/**
+ * Internal dependencies
+ */
+
+import ScreenHeader from '../header';
+import { unlock } from '../../../private-apis';
+import Revisions from '../../revisions';
+import SidebarFixedBottom from '../../sidebar-edit-mode/sidebar-fixed-bottom';
+import { store as editSiteStore } from '../../../store';
+import useGlobalStylesRevisions from './use-global-styles-revisions';
+import RevisionsButtons from './revisions-buttons';
+const {
+  GlobalStylesContext,
+  areGlobalStyleConfigsEqual
+} = unlock(blockEditorPrivateApis);
+
+function ScreenRevisions() {
+  const {
+    goBack
+  } = useNavigator();
+  const {
+    user: userConfig,
+    setUserConfig
+  } = useContext(GlobalStylesContext);
+  const {
+    blocks,
+    editorCanvasContainerView
+  } = useSelect(select => {
+    return {
+      editorCanvasContainerView: unlock(select(editSiteStore)).getEditorCanvasContainerView(),
+      blocks: select(blockEditorStore).getBlocks()
+    };
+  }, []);
+  const {
+    revisions,
+    isLoading,
+    hasUnsavedChanges
+  } = useGlobalStylesRevisions();
+  const [selectedRevisionId, setSelectedRevisionId] = useState();
+  const [globalStylesRevision, setGlobalStylesRevision] = useState(userConfig);
+  const [isLoadingRevisionWithUnsavedChanges, setIsLoadingRevisionWithUnsavedChanges] = useState(false);
+  const {
+    setEditorCanvasContainerView
+  } = unlock(useDispatch(editSiteStore));
+  useEffect(() => {
+    if (editorCanvasContainerView !== 'global-styles-revisions') {
+      goBack();
+      setEditorCanvasContainerView(editorCanvasContainerView);
+    }
+  }, [editorCanvasContainerView]);
+
+  const onCloseRevisions = () => {
+    goBack();
+  };
+
+  const restoreRevision = revision => {
+    setUserConfig(() => ({
+      styles: revision === null || revision === void 0 ? void 0 : revision.styles,
+      settings: revision === null || revision === void 0 ? void 0 : revision.settings
+    }));
+    setIsLoadingRevisionWithUnsavedChanges(false);
+    onCloseRevisions();
+  };
+
+  const selectRevision = revision => {
+    setGlobalStylesRevision({
+      styles: revision === null || revision === void 0 ? void 0 : revision.styles,
+      settings: revision === null || revision === void 0 ? void 0 : revision.settings,
+      id: revision === null || revision === void 0 ? void 0 : revision.id
+    });
+    setSelectedRevisionId(revision === null || revision === void 0 ? void 0 : revision.id);
+  };
+
+  const isLoadButtonEnabled = !!(globalStylesRevision !== null && globalStylesRevision !== void 0 && globalStylesRevision.id) && !areGlobalStyleConfigsEqual(globalStylesRevision, userConfig);
+  return createElement(Fragment, null, createElement(ScreenHeader, {
+    title: __('Revisions'),
+    description: __('Revisions are added to the timeline when style changes are saved.')
+  }), isLoading && createElement(Spinner, {
+    className: "edit-site-global-styles-screen-revisions__loading"
+  }), !isLoading && createElement(Revisions, {
+    blocks: blocks,
+    userConfig: globalStylesRevision,
+    onClose: onCloseRevisions
+  }), createElement("div", {
+    className: "edit-site-global-styles-screen-revisions"
+  }, createElement(RevisionsButtons, {
+    onChange: selectRevision,
+    selectedRevisionId: selectedRevisionId,
+    userRevisions: revisions
+  }), isLoadButtonEnabled && createElement(SidebarFixedBottom, null, createElement(Button, {
+    variant: "primary",
+    className: "edit-site-global-styles-screen-revisions__button",
+    disabled: !(globalStylesRevision !== null && globalStylesRevision !== void 0 && globalStylesRevision.id) || (globalStylesRevision === null || globalStylesRevision === void 0 ? void 0 : globalStylesRevision.id) === 'unsaved',
+    onClick: () => {
+      if (hasUnsavedChanges) {
+        setIsLoadingRevisionWithUnsavedChanges(true);
+      } else {
+        restoreRevision(globalStylesRevision);
+      }
+    }
+  }, __('Apply')))), isLoadingRevisionWithUnsavedChanges && createElement(ConfirmDialog, {
+    title: __('Loading this revision will discard all unsaved changes.'),
+    isOpen: isLoadingRevisionWithUnsavedChanges,
+    confirmButtonText: __(' Discard unsaved changes'),
+    onConfirm: () => restoreRevision(globalStylesRevision),
+    onCancel: () => setIsLoadingRevisionWithUnsavedChanges(false)
+  }, createElement(Fragment, null, createElement("h2", null, __('Loading this revision will discard all unsaved changes.')), createElement("p", null, __('Do you want to replace your unsaved changes in the editor?')))));
+}
+
+export default ScreenRevisions;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-revisions/index.js"],"names":["__","Button","__experimentalUseNavigator","useNavigator","__experimentalConfirmDialog","ConfirmDialog","Spinner","useSelect","useDispatch","useContext","useState","useEffect","privateApis","blockEditorPrivateApis","store","blockEditorStore","ScreenHeader","unlock","Revisions","SidebarFixedBottom","editSiteStore","useGlobalStylesRevisions","RevisionsButtons","GlobalStylesContext","areGlobalStyleConfigsEqual","ScreenRevisions","goBack","user","userConfig","setUserConfig","blocks","editorCanvasContainerView","select","getEditorCanvasContainerView","getBlocks","revisions","isLoading","hasUnsavedChanges","selectedRevisionId","setSelectedRevisionId","globalStylesRevision","setGlobalStylesRevision","isLoadingRevisionWithUnsavedChanges","setIsLoadingRevisionWithUnsavedChanges","setEditorCanvasContainerView","onCloseRevisions","restoreRevision","revision","styles","settings","selectRevision","id","isLoadButtonEnabled"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } 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 { 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 '../../../private-apis';\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 { goBack } = useNavigator();\n\tconst { user: userConfig, setUserConfig } =\n\t\tuseContext( GlobalStylesContext );\n\tconst { blocks, editorCanvasContainerView } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\teditorCanvasContainerView: unlock(\n\t\t\t\tselect( editSiteStore )\n\t\t\t).getEditorCanvasContainerView(),\n\t\t\tblocks: select( blockEditorStore ).getBlocks(),\n\t\t};\n\t}, [] );\n\tconst { revisions, isLoading, hasUnsavedChanges } =\n\t\tuseGlobalStylesRevisions();\n\tconst [ selectedRevisionId, setSelectedRevisionId ] = useState();\n\tconst [ globalStylesRevision, setGlobalStylesRevision ] =\n\t\tuseState( userConfig );\n\tconst [\n\t\tisLoadingRevisionWithUnsavedChanges,\n\t\tsetIsLoadingRevisionWithUnsavedChanges,\n\t] = useState( false );\n\tconst { setEditorCanvasContainerView } = unlock(\n\t\tuseDispatch( editSiteStore )\n\t);\n\n\tuseEffect( () => {\n\t\tif ( editorCanvasContainerView !== 'global-styles-revisions' ) {\n\t\t\tgoBack();\n\t\t\tsetEditorCanvasContainerView( editorCanvasContainerView );\n\t\t}\n\t}, [ editorCanvasContainerView ] );\n\n\tconst onCloseRevisions = () => {\n\t\tgoBack();\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\tsetGlobalStylesRevision( {\n\t\t\tstyles: revision?.styles,\n\t\t\tsettings: revision?.settings,\n\t\t\tid: revision?.id,\n\t\t} );\n\t\tsetSelectedRevisionId( revision?.id );\n\t};\n\n\tconst isLoadButtonEnabled =\n\t\t!! globalStylesRevision?.id &&\n\t\t! areGlobalStyleConfigsEqual( globalStylesRevision, userConfig );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Revisions' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Revisions are added to the timeline when style changes are saved.'\n\t\t\t\t) }\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{ ! isLoading && (\n\t\t\t\t<Revisions\n\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\tuserConfig={ globalStylesRevision }\n\t\t\t\t\tonClose={ onCloseRevisions }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<div className=\"edit-site-global-styles-screen-revisions\">\n\t\t\t\t<RevisionsButtons\n\t\t\t\t\tonChange={ selectRevision }\n\t\t\t\t\tselectedRevisionId={ selectedRevisionId }\n\t\t\t\t\tuserRevisions={ revisions }\n\t\t\t\t/>\n\t\t\t\t{ isLoadButtonEnabled && (\n\t\t\t\t\t<SidebarFixedBottom>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-screen-revisions__button\"\n\t\t\t\t\t\t\tdisabled={\n\t\t\t\t\t\t\t\t! globalStylesRevision?.id ||\n\t\t\t\t\t\t\t\tglobalStylesRevision?.id === 'unsaved'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tif ( hasUnsavedChanges ) {\n\t\t\t\t\t\t\t\t\tsetIsLoadingRevisionWithUnsavedChanges(\n\t\t\t\t\t\t\t\t\t\ttrue\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\trestoreRevision( globalStylesRevision );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Apply' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</SidebarFixedBottom>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t{ isLoadingRevisionWithUnsavedChanges && (\n\t\t\t\t<ConfirmDialog\n\t\t\t\t\ttitle={ __(\n\t\t\t\t\t\t'Loading this revision will discard all unsaved changes.'\n\t\t\t\t\t) }\n\t\t\t\t\tisOpen={ isLoadingRevisionWithUnsavedChanges }\n\t\t\t\t\tconfirmButtonText={ __( ' Discard unsaved changes' ) }\n\t\t\t\t\tonConfirm={ () => restoreRevision( globalStylesRevision ) }\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>\n\t\t\t\t\t<>\n\t\t\t\t\t\t<h2>\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Loading this revision will discard all unsaved changes.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Do you want to replace your unsaved changes in the editor?'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</p>\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"]}

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

@@ -0,0 +1,118 @@
+import { createElement } from "@wordpress/element";
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+/**
+ * WordPress dependencies
+ */
+
+import { __, sprintf } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
+/**
+ * Returns a button label for the revision.
+ *
+ * @param {Object} revision A revision object.
+ * @return {string} Translated label.
+ */
+
+function getRevisionLabel(revision) {
+  var _revision$author;
+
+  const authorDisplayName = (revision === null || revision === void 0 ? void 0 : (_revision$author = revision.author) === null || _revision$author === void 0 ? void 0 : _revision$author.name) || __('User');
+
+  if ('unsaved' === (revision === null || revision === void 0 ? void 0 : revision.id)) {
+    return sprintf(
+    /* translators: %(name)s author display name */
+    __('Unsaved changes by %(name)s'), {
+      name: authorDisplayName
+    });
+  }
+
+  const formattedDate = dateI18n(getSettings().formats.datetimeAbbreviated, getDate(revision === null || revision === void 0 ? void 0 : revision.modified));
+  return revision !== null && revision !== void 0 && revision.isLatest ? sprintf(
+  /* translators: %(name)s author display name, %(date)s: revision creation date */
+  __('Changes saved by %(name)s on %(date)s (current)'), {
+    name: authorDisplayName,
+    date: formattedDate
+  }) : sprintf(
+  /* translators: %(name)s author display name, %(date)s: revision creation date */
+  __('Changes saved by %(name)s on %(date)s'), {
+    name: authorDisplayName,
+    date: formattedDate
+  });
+}
+/**
+ * Returns a rendered list of revisions buttons.
+ *
+ * @typedef {Object} props
+ * @property {Array<Object>} userRevisions      A collection of user revisions.
+ * @property {number}        selectedRevisionId The id of the currently-selected revision.
+ * @property {Function}      onChange           Callback fired when a revision is selected.
+ *
+ * @param    {props}         Component          props.
+ * @return {JSX.Element} The modal component.
+ */
+
+
+function RevisionsButtons(_ref) {
+  let {
+    userRevisions,
+    selectedRevisionId,
+    onChange
+  } = _ref;
+  return createElement("ol", {
+    className: "edit-site-global-styles-screen-revisions__revisions-list",
+    "aria-label": __('Global styles revisions'),
+    role: "group"
+  }, userRevisions.map((revision, index) => {
+    var _author$avatar_urls;
+
+    const {
+      id,
+      author,
+      modified
+    } = revision;
+
+    const authorDisplayName = (author === null || author === void 0 ? void 0 : author.name) || __('User');
+
+    const authorAvatar = author === null || author === void 0 ? void 0 : (_author$avatar_urls = author.avatar_urls) === null || _author$avatar_urls === void 0 ? void 0 : _author$avatar_urls['48'];
+    const isUnsaved = 'unsaved' === (revision === null || revision === void 0 ? void 0 : revision.id);
+    const isSelected = selectedRevisionId ? selectedRevisionId === (revision === null || revision === void 0 ? void 0 : revision.id) : index === 0;
+    return createElement("li", {
+      className: classnames('edit-site-global-styles-screen-revisions__revision-item', {
+        'is-selected': isSelected
+      }),
+      key: id
+    }, createElement(Button, {
+      className: "edit-site-global-styles-screen-revisions__revision-button",
+      disabled: isSelected,
+      onClick: () => {
+        onChange(revision);
+      },
+      label: getRevisionLabel(revision)
+    }, createElement("span", {
+      className: "edit-site-global-styles-screen-revisions__description"
+    }, createElement("time", {
+      dateTime: modified
+    }, humanTimeDiff(modified)), createElement("span", {
+      className: "edit-site-global-styles-screen-revisions__meta"
+    }, isUnsaved ? sprintf(
+    /* translators: %(name)s author display name */
+    __('Unsaved changes by %(name)s'), {
+      name: authorDisplayName
+    }) : sprintf(
+    /* translators: %(name)s author display name */
+    __('Changes saved by %(name)s'), {
+      name: authorDisplayName
+    }), createElement("img", {
+      alt: author === null || author === void 0 ? void 0 : author.name,
+      src: authorAvatar
+    })))));
+  }));
+}
+
+export default RevisionsButtons;
+//# sourceMappingURL=revisions-buttons.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js"],"names":["classnames","__","sprintf","Button","dateI18n","getDate","humanTimeDiff","getSettings","getRevisionLabel","revision","authorDisplayName","author","name","id","formattedDate","formats","datetimeAbbreviated","modified","isLatest","date","RevisionsButtons","userRevisions","selectedRevisionId","onChange","map","index","authorAvatar","avatar_urls","isUnsaved","isSelected"],"mappings":"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","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';\n\n/**\n * Returns a button label for the revision.\n *\n * @param {Object} revision A revision object.\n * @return {string} Translated label.\n */\nfunction getRevisionLabel( revision ) {\n\tconst authorDisplayName = revision?.author?.name || __( 'User' );\n\n\tif ( 'unsaved' === revision?.id ) {\n\t\treturn sprintf(\n\t\t\t/* translators: %(name)s author display name */\n\t\t\t__( 'Unsaved changes by %(name)s' ),\n\t\t\t{\n\t\t\t\tname: authorDisplayName,\n\t\t\t}\n\t\t);\n\t}\n\tconst formattedDate = dateI18n(\n\t\tgetSettings().formats.datetimeAbbreviated,\n\t\tgetDate( revision?.modified )\n\t);\n\n\treturn revision?.isLatest\n\t\t? sprintf(\n\t\t\t\t/* translators: %(name)s author display name, %(date)s: revision creation date */\n\t\t\t\t__( 'Changes saved by %(name)s on %(date)s (current)' ),\n\t\t\t\t{\n\t\t\t\t\tname: authorDisplayName,\n\t\t\t\t\tdate: formattedDate,\n\t\t\t\t}\n\t\t  )\n\t\t: sprintf(\n\t\t\t\t/* translators: %(name)s author display name, %(date)s: revision creation date */\n\t\t\t\t__( 'Changes saved by %(name)s on %(date)s' ),\n\t\t\t\t{\n\t\t\t\t\tname: authorDisplayName,\n\t\t\t\t\tdate: formattedDate,\n\t\t\t\t}\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\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 authorDisplayName = author?.name || __( 'User' );\n\t\t\t\tconst authorAvatar = author?.avatar_urls?.[ '48' ];\n\t\t\t\tconst isUnsaved = 'unsaved' === revision?.id;\n\t\t\t\tconst isSelected = selectedRevisionId\n\t\t\t\t\t? selectedRevisionId === revision?.id\n\t\t\t\t\t: index === 0;\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}\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={ getRevisionLabel( revision ) }\n\t\t\t\t\t\t>\n\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<time dateTime={ modified }>\n\t\t\t\t\t\t\t\t\t{ humanTimeDiff( modified ) }\n\t\t\t\t\t\t\t\t</time>\n\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{ isUnsaved\n\t\t\t\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t/* translators: %(name)s author display name */\n\t\t\t\t\t\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t\t\t\t\t\t'Unsaved changes by %(name)s'\n\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\tname: authorDisplayName,\n\t\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\t: sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t/* translators: %(name)s author display name */\n\t\t\t\t\t\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t\t\t\t\t\t'Changes saved by %(name)s'\n\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\tname: authorDisplayName,\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t  ) }\n\n\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\talt={ author?.name }\n\t\t\t\t\t\t\t\t\t\tsrc={ authorAvatar }\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</span>\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"]}

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

@@ -0,0 +1,107 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useContext, useMemo } from '@wordpress/element';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+/**
+ * External dependencies
+ */
+
+import { isEmpty } from 'lodash';
+/**
+ * Internal dependencies
+ */
+
+import { unlock } from '../../../private-apis';
+const SITE_EDITOR_AUTHORS_QUERY = {
+  per_page: -1,
+  _fields: 'id,name,avatar_urls',
+  context: 'view',
+  capabilities: ['edit_theme_options']
+};
+const EMPTY_ARRAY = [];
+const {
+  GlobalStylesContext
+} = unlock(blockEditorPrivateApis);
+export default function useGlobalStylesRevisions() {
+  const {
+    user: userConfig
+  } = useContext(GlobalStylesContext);
+  const {
+    authors,
+    currentUser,
+    isDirty,
+    revisions
+  } = useSelect(select => {
+    const {
+      __experimentalGetDirtyEntityRecords,
+      getCurrentUser,
+      getUsers,
+      getCurrentThemeGlobalStylesRevisions
+    } = select(coreStore);
+
+    const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+
+    const _currentUser = getCurrentUser();
+
+    const _isDirty = dirtyEntityRecords.length > 0;
+
+    const globalStylesRevisions = getCurrentThemeGlobalStylesRevisions() || EMPTY_ARRAY;
+
+    const _authors = getUsers(SITE_EDITOR_AUTHORS_QUERY) || EMPTY_ARRAY;
+
+    return {
+      authors: _authors,
+      currentUser: _currentUser,
+      isDirty: _isDirty,
+      revisions: globalStylesRevisions
+    };
+  }, []);
+  return useMemo(() => {
+    let _modifiedRevisions = [];
+
+    if (!authors.length || !revisions.length) {
+      return {
+        revisions: _modifiedRevisions,
+        hasUnsavedChanges: isDirty,
+        isLoading: true
+      };
+    } // Adds author details to each revision.
+
+
+    _modifiedRevisions = revisions.map(revision => {
+      return { ...revision,
+        author: authors.find(author => author.id === revision.author)
+      };
+    }); // Flags the most current saved revision.
+
+    if (_modifiedRevisions[0].id !== 'unsaved') {
+      _modifiedRevisions[0].isLatest = true;
+    } // Adds an item for unsaved changes.
+
+
+    if (isDirty && !isEmpty(userConfig) && currentUser) {
+      const unsavedRevision = {
+        id: 'unsaved',
+        styles: userConfig === null || userConfig === void 0 ? void 0 : userConfig.styles,
+        settings: userConfig === null || userConfig === void 0 ? void 0 : userConfig.settings,
+        author: {
+          name: currentUser === null || currentUser === void 0 ? void 0 : currentUser.name,
+          avatar_urls: currentUser === null || currentUser === void 0 ? void 0 : currentUser.avatar_urls
+        },
+        modified: new Date()
+      };
+
+      _modifiedRevisions.unshift(unsavedRevision);
+    }
+
+    return {
+      revisions: _modifiedRevisions,
+      hasUnsavedChanges: isDirty,
+      isLoading: false
+    };
+  }, [isDirty, revisions, currentUser, authors, userConfig]);
+}
+//# sourceMappingURL=use-global-styles-revisions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js"],"names":["useSelect","store","coreStore","useContext","useMemo","privateApis","blockEditorPrivateApis","isEmpty","unlock","SITE_EDITOR_AUTHORS_QUERY","per_page","_fields","context","capabilities","EMPTY_ARRAY","GlobalStylesContext","useGlobalStylesRevisions","user","userConfig","authors","currentUser","isDirty","revisions","select","__experimentalGetDirtyEntityRecords","getCurrentUser","getUsers","getCurrentThemeGlobalStylesRevisions","dirtyEntityRecords","_currentUser","_isDirty","length","globalStylesRevisions","_authors","_modifiedRevisions","hasUnsavedChanges","isLoading","map","revision","author","find","id","isLatest","unsavedRevision","styles","settings","name","avatar_urls","modified","Date","unshift"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useContext, useMemo } from '@wordpress/element';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n/**\n * External dependencies\n */\nimport { isEmpty } from 'lodash';\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../../private-apis';\n\nconst SITE_EDITOR_AUTHORS_QUERY = {\n\tper_page: -1,\n\t_fields: 'id,name,avatar_urls',\n\tcontext: 'view',\n\tcapabilities: [ 'edit_theme_options' ],\n};\nconst EMPTY_ARRAY = [];\nconst { GlobalStylesContext } = unlock( blockEditorPrivateApis );\nexport default function useGlobalStylesRevisions() {\n\tconst { user: userConfig } = useContext( GlobalStylesContext );\n\tconst { authors, currentUser, isDirty, revisions } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\t__experimentalGetDirtyEntityRecords,\n\t\t\t\tgetCurrentUser,\n\t\t\t\tgetUsers,\n\t\t\t\tgetCurrentThemeGlobalStylesRevisions,\n\t\t\t} = select( coreStore );\n\t\t\tconst dirtyEntityRecords = __experimentalGetDirtyEntityRecords();\n\t\t\tconst _currentUser = getCurrentUser();\n\t\t\tconst _isDirty = dirtyEntityRecords.length > 0;\n\t\t\tconst globalStylesRevisions =\n\t\t\t\tgetCurrentThemeGlobalStylesRevisions() || EMPTY_ARRAY;\n\t\t\tconst _authors =\n\t\t\t\tgetUsers( SITE_EDITOR_AUTHORS_QUERY ) || EMPTY_ARRAY;\n\n\t\t\treturn {\n\t\t\t\tauthors: _authors,\n\t\t\t\tcurrentUser: _currentUser,\n\t\t\t\tisDirty: _isDirty,\n\t\t\t\trevisions: globalStylesRevisions,\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\treturn useMemo( () => {\n\t\tlet _modifiedRevisions = [];\n\t\tif ( ! authors.length || ! revisions.length ) {\n\t\t\treturn {\n\t\t\t\trevisions: _modifiedRevisions,\n\t\t\t\thasUnsavedChanges: isDirty,\n\t\t\t\tisLoading: true,\n\t\t\t};\n\t\t}\n\n\t\t// Adds author details to each revision.\n\t\t_modifiedRevisions = revisions.map( ( revision ) => {\n\t\t\treturn {\n\t\t\t\t...revision,\n\t\t\t\tauthor: authors.find(\n\t\t\t\t\t( author ) => author.id === revision.author\n\t\t\t\t),\n\t\t\t};\n\t\t} );\n\n\t\t// Flags the most current saved revision.\n\t\tif ( _modifiedRevisions[ 0 ].id !== 'unsaved' ) {\n\t\t\t_modifiedRevisions[ 0 ].isLatest = true;\n\t\t}\n\n\t\t// Adds an item for unsaved changes.\n\t\tif ( isDirty && ! isEmpty( userConfig ) && currentUser ) {\n\t\t\tconst unsavedRevision = {\n\t\t\t\tid: 'unsaved',\n\t\t\t\tstyles: userConfig?.styles,\n\t\t\t\tsettings: userConfig?.settings,\n\t\t\t\tauthor: {\n\t\t\t\t\tname: currentUser?.name,\n\t\t\t\t\tavatar_urls: currentUser?.avatar_urls,\n\t\t\t\t},\n\t\t\t\tmodified: new Date(),\n\t\t\t};\n\n\t\t\t_modifiedRevisions.unshift( unsavedRevision );\n\t\t}\n\n\t\treturn {\n\t\t\trevisions: _modifiedRevisions,\n\t\t\thasUnsavedChanges: isDirty,\n\t\t\tisLoading: false,\n\t\t};\n\t}, [ isDirty, revisions, currentUser, authors, userConfig ] );\n}\n"]}

package/build-module/components/global-styles/screen-root.js

@@ -15,7 +15,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 import { IconWithCurrentColor } from './icon-with-current-color';
 import { NavigationButtonAsItem } from './navigation-button';
-import ContextMenu from './context-menu';
+import RootMenu from './root-menu';
 import StylesPreview from './preview';
 import { unlock } from '../../private-apis';
 
@@ -25,10 +25,10 @@ function ScreenRoot() {
   } = unlock(blockEditorPrivateApis);
   const [customCSS] = useGlobalStyle('css');
   const {
-    variations,
+    hasVariations,
     canEditCSS
   } = useSelect(select => {
-    var _globalStyles$_links$, _globalStyles$_links;
+    var _experimentalGetCurr, _globalStyles$_links$, _globalStyles$_links;
 
     const {
       getEntityRecord,
@@ -40,7 +40,7 @@ function ScreenRoot() {
 
     const globalStyles = globalStylesId ? getEntityRecord('root', 'globalStyles', globalStylesId) : undefined;
     return {
-      variations: __experimentalGetCurrentThemeGlobalStylesVariations(),
+      hasVariations: !!((_experimentalGetCurr = __experimentalGetCurrentThemeGlobalStylesVariations()) !== null && _experimentalGetCurr !== void 0 && _experimentalGetCurr.length),
       canEditCSS: (_globalStyles$_links$ = !!(globalStyles !== null && globalStyles !== void 0 && (_globalStyles$_links = globalStyles._links) !== null && _globalStyles$_links !== void 0 && _globalStyles$_links['wp:action-edit-css'])) !== null && _globalStyles$_links$ !== void 0 ? _globalStyles$_links$ : false
     };
   }, []);
@@ -49,14 +49,14 @@ function ScreenRoot() {
     className: "edit-site-global-styles-screen-root"
   }, createElement(CardBody, null, createElement(VStack, {
     spacing: 4
-  }, createElement(Card, null, createElement(CardMedia, null, createElement(StylesPreview, null))), !!(variations !== null && variations !== void 0 && variations.length) && createElement(ItemGroup, null, createElement(NavigationButtonAsItem, {
+  }, createElement(Card, null, createElement(CardMedia, null, createElement(StylesPreview, null))), hasVariations && createElement(ItemGroup, null, createElement(NavigationButtonAsItem, {
     path: "/variations",
     "aria-label": __('Browse styles')
   }, createElement(HStack, {
     justify: "space-between"
   }, createElement(FlexItem, null, __('Browse styles')), createElement(IconWithCurrentColor, {
     icon: isRTL() ? chevronLeft : chevronRight
-  })))), createElement(ContextMenu, null))), createElement(CardDivider, null), createElement(CardBody, null, createElement(Spacer, {
+  })))), createElement(RootMenu, null))), createElement(CardDivider, null), createElement(CardBody, null, createElement(Spacer, {
     as: "p",
     paddingTop: 2
     /*