npm - @wordpress/edit-site - Versions diffs - 5.31.0 → 5.32.0 - Mend

@wordpress/edit-site 5.31.0 → 5.32.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (280) hide show

package/build/components/global-styles/screen-style-variations.js CHANGED Viewed

@@ -9,8 +9,6 @@ var _react = require("react");
 var _components = require("@wordpress/components");
 var _i18n = require("@wordpress/i18n");
 var _blockEditor = require("@wordpress/block-editor");
-var _element = require("@wordpress/element");
-var _data = require("@wordpress/data");
 var _header = _interopRequireDefault(require("./header"));
 var _styleVariationsContainer = _interopRequireDefault(require("./style-variations-container"));
 /**
@@ -22,42 +20,10 @@ var _styleVariationsContainer = _interopRequireDefault(require("./style-variatio
  */
 function ScreenStyleVariations() {
-  const {
-    mode
-  } = (0, _data.useSelect)(select => {
-    return {
-      mode: select(_blockEditor.store).__unstableGetEditorMode()
-    };
-  }, []);
-  const shouldRevertInitialMode = (0, _element.useRef)(null);
-  (0, _element.useEffect)(() => {
-    // ignore changes to zoom-out mode as we explictily change to it on mount.
-    if (mode !== 'zoom-out') {
-      shouldRevertInitialMode.current = false;
-    }
-  }, [mode]);
-  // Intentionality left without any dependency.
-  // This effect should only run the first time the component is rendered.
-  // The effect opens the zoom-out view if it is not open before when applying a style variation.
-  (0, _element.useEffect)(() => {
-    if (mode !== 'zoom-out') {
-      __unstableSetEditorMode('zoom-out');
-      shouldRevertInitialMode.current = true;
-      return () => {
-        // if there were not mode changes revert to the initial mode when unmounting.
-        if (shouldRevertInitialMode.current) {
-          __unstableSetEditorMode(mode);
-        }
-      };
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const {
-    __unstableSetEditorMode
-  } = (0, _data.useDispatch)(_blockEditor.store);
+  // Move to zoom out mode when this component is mounted
+  // and back to the previous mode when unmounted.
+  (0, _blockEditor.useZoomOut)();
   return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_header.default, {
-    back: "/",
     title: (0, _i18n.__)('Browse styles'),
     description: (0, _i18n.__)('Choose a variation to change the look of the site.')
   }), (0, _react.createElement)(_components.Card, {

package/build/components/global-styles/screen-style-variations.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_components","require","_i18n","_blockEditor","~~_element","_data","~~_header","_interopRequireDefault","_styleVariationsContainer","ScreenStyleVariations","~~mode~~","~~useSelect","select","blockEditorStore","__unstableGetEditorMode","shouldRevertInitialMode","useRef","useEffect","current","__unstableSetEditorMode","useDispatch","~~_react","createElement","Fragment","default","~~back","~~title","__","description","Card","size","isBorderless","className","CardBody","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-style-variations.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { Card, CardBody } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { ~~store~~ ~~as blockEditorStore~~ } from '@wordpress/block-editor';\~~nimport { useEffect, useRef } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\~~n\n/\n Internal dependencies\n */\nimport ScreenHeader from './header';\nimport StyleVariationsContainer from './style-variations-container';\n\nfunction ScreenStyleVariations() {\n\~~tconst { mode } = useSelect( ( select ) => {\n\~~t~~\treturn {\n\t\t\tmode: select( blockEditorStore ).__unstableGetEditorMode(),\n\t\t};\n\t}, [] );\n\n\tconst shouldRevertInitialMode = useRef( null );\n\tuseEffect( () => {\n\t\t~~// ~~ignore~~ ~~changes~~ to zoom~~-out~~ ~~mode as we explictily change to it on mount.\n\t\tif ( mode !== 'zoom-~~out' ~~) {\n\t\t\tshouldRevertInitialMode.current = false;\n\t\t}\n\t}, [~~ mode ] ~~);\n\n\t//~~ ~~Intentionality left without any dependency.\n\t// This effect should only run the first time the~~ component is ~~rendered.\n~~\~~t// The effect opens the zoom-out view if it is not open before when applying a style variation.\~~n\~~tuseEffect( () => {\n\~~t~~\tif ( mode !== 'zoom-out' ) {\n\t\t\t__unstableSetEditorMode( 'zoom-out' );\n\t\t\tshouldRevertInitialMode.current = true;\n\t\t\treturn () => {\n\t\t\t\t~~// if ~~there~~ ~~were not mode changes revert~~ to the ~~initial~~ mode when ~~unmounting~~.\n\~~t\t\t\tif~~ ( ~~shouldRevertInitialMode.current~~ ) ~~{\n\t\t\t\t\t__unstableSetEditorMode( mode )~~;\n\~~t\t\t\t}\~~n\~~t\t\t};\n\t\t}\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tconst { __unstableSetEditorMode } = useDispatch( blockEditorStore );\n\n\~~treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\~~tback=\"/\"\n\t\t\t\~~ttitle={ __( 'Browse styles' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Choose a variation to change the look of the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<Card\n\t\t\t\tsize=\"small\"\n\t\t\t\tisBorderless\n\t\t\t\tclassName=\"edit-site-global-styles-screen-style-variations\"\n\t\t\t>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<StyleVariationsContainer />\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</>\n\t);\n}\n\nexport default ScreenStyleVariations;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;~~AACA~~,IAAAG,~~QAAA,GAAAH,~~OAAA~~;AACA~~,~~IAAAI,KAAA,GAAAJ,OAAA;AAKA,IAAAK,OAAA,~~GAAAC,sBAAA,~~CAAAN~~,OAAA;AACA,~~IAAAO~~,yBAAA,GAAAD,sBAAA,~~CAAAN~~,OAAA;~~AAbA~~;AACA;AACA;;~~AAOA~~;AACA;AACA;;AAIA,~~SAASQ~~,qBAAqBA,CAAA,EAAG;EAChC~~,MAAM~~;IAAEC;EAAK,CAAC,GAAG,IAAAC,eAAS,EAAIC,MAAM,IAAM;IACzC,OAAO;MACNF,IAAI,EAAEE,MAAM,CAAEC,kBAAiB,CAAC,CAACC,uBAAuB,CAAC;IAC1D,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,MAAMC,uBAAuB,GAAG,IAAAC,eAAM,EAAE,IAAK,CAAC;EAC9C,IAAAC,kBAAS,EAAE,MAAM;IAChB;IACA,IAAKP,IAAI,KAAK,UAAU,EAAG;MAC1BK,uBAAuB,CAACG,OAAO,GAAG,KAAK;IACxC;EACD,CAAC,EAAE,CAAER,IAAI,CAAG,CAAC;;EAEb;EACA;EACA~~;EACA~~,IAAAO,kBAAS,EAAE,MAAM;IAChB,IAAKP,IAAI,KAAK,UAAU,EAAG;MAC1BS,uBAAuB,CAAE,UAAW,CAAC;MACrCJ,uBAAuB,CAACG,OAAO,GAAG,IAAI;MACtC,OAAO,MAAM;QACZ;QACA,IAAKH,uBAAuB,CAACG,OAAO,EAAG;UACtCC,uBAAuB,CAAET,IAAK,CAAC;QAChC;MACD,CAAC;IACF;IACA;EACD,CAAC,EAAE,EAAG,CAAC;EAEP,MAAM;IAAES;EAAwB,CAAC,GAAG,IAAAC,~~iBAAW~~,~~EAAEP~~,~~kBAAiB,~~CAAC;~~EAEnE~~,OACC,~~IAAAQ~~,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAE,QAAA,QACC,IAAAF,MAAA,CAAAC,aAAA,~~EAAChB~~,OAAA,~~CAAAkB~~,OAAY;IACZC,~~IAAI,EAAC,GAAG;IACRC,~~KAAK,EAAG,IAAAC,QAAE,EAAE,eAAgB,CAAG;IAC/BC,WAAW,EAAG,IAAAD,QAAE,EACf,oDACD;EAAG,CACH,CAAC,EAEF,~~IAAAN~~,MAAA,CAAAC,aAAA,~~EAACtB~~,WAAA,~~CAAA6B~~,IAAI;IACJC,IAAI,EAAC,OAAO;IACZC,YAAY;IACZC,SAAS,EAAC;EAAiD,GAE3D,~~IAAAX~~,MAAA,CAAAC,aAAA,~~EAACtB~~,WAAA,~~CAAAiC~~,QAAQ,QACR,~~IAAAZ~~,MAAA,CAAAC,aAAA,~~EAACd~~,yBAAA,~~CAAAgB~~,OAAwB,MAAE,CAClB,CACL,CACL,CAAC;AAEL;AAAC,~~IAAAU~~,QAAA,GAAAC,OAAA,~~CAAAX~~,OAAA,~~GAEcf~~,qBAAqB"}
1	+ {"version":3,"names":["_components","require","_i18n","_blockEditor","_header","_interopRequireDefault","_styleVariationsContainer","ScreenStyleVariations","useZoomOut","_react","createElement","Fragment","default","title","__","description","Card","size","isBorderless","className","CardBody","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-style-variations.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { Card, CardBody } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useZoomOut } from '@wordpress/block-editor';\n\n/\n Internal dependencies\n */\nimport ScreenHeader from './header';\nimport StyleVariationsContainer from './style-variations-container';\n\nfunction ScreenStyleVariations() {\n\t// Move to zoom out mode when this component is mounted\n\t// and back to the previous mode when unmounted.\n\tuseZoomOut();\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Browse styles' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Choose a variation to change the look of the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<Card\n\t\t\t\tsize=\"small\"\n\t\t\t\tisBorderless\n\t\t\t\tclassName=\"edit-site-global-styles-screen-style-variations\"\n\t\t\t>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<StyleVariationsContainer />\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</>\n\t);\n}\n\nexport default ScreenStyleVariations;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AAKA,IAAAG,OAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,yBAAA,GAAAD,sBAAA,CAAAJ,OAAA;AAXA;AACA;AACA;;AAKA;AACA;AACA;;AAIA,SAASM,qBAAqBA,CAAA,EAAG;EAChC;EACA;EACA,IAAAC,uBAAU,EAAC,CAAC;EAEZ,OACC,IAAAC,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAE,QAAA,QACC,IAAAF,MAAA,CAAAC,aAAA,EAACN,OAAA,CAAAQ,OAAY;IACZC,KAAK,EAAG,IAAAC,QAAE,EAAE,eAAgB,CAAG;IAC/BC,WAAW,EAAG,IAAAD,QAAE,EACf,oDACD;EAAG,CACH,CAAC,EAEF,IAAAL,MAAA,CAAAC,aAAA,EAACV,WAAA,CAAAgB,IAAI;IACJC,IAAI,EAAC,OAAO;IACZC,YAAY;IACZC,SAAS,EAAC;EAAiD,GAE3D,IAAAV,MAAA,CAAAC,aAAA,EAACV,WAAA,CAAAoB,QAAQ,QACR,IAAAX,MAAA,CAAAC,aAAA,EAACJ,yBAAA,CAAAM,OAAwB,MAAE,CAClB,CACL,CACL,CAAC;AAEL;AAAC,IAAAS,QAAA,GAAAC,OAAA,CAAAV,OAAA,GAEcL,qBAAqB"}

package/build/components/global-styles/screen-typography.js CHANGED Viewed

@@ -26,14 +26,14 @@ function ScreenTypography() {
   const fontLibraryEnabled = (0, _data.useSelect)(select => select(_editor.store).getEditorSettings().fontLibraryEnabled, []);
   return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_header.default, {
     title: (0, _i18n.__)('Typography'),
-    description: (0, _i18n.__)('Manage the typography settings for different elements.')
+    description: (0, _i18n.__)('Typography styles and the application of those styles on site elements.')
   }), (0, _react.createElement)("div", {
-    className: "edit-site-global-styles-screen-typography"
+    className: "edit-site-global-styles-screen"
   }, (0, _react.createElement)(_components.__experimentalVStack, {
-    spacing: 6
-  }, (0, _react.createElement)(_variationsTypography.default, null), !window.__experimentalDisableFontLibrary && (0, _react.createElement)(_components.__experimentalVStack, {
-    spacing: 3
-  }, fontLibraryEnabled && (0, _react.createElement)(_fontFamilies.default, null)), (0, _react.createElement)(_typographyElements.default, null))));
+    spacing: 7
+  }, (0, _react.createElement)(_variationsTypography.default, {
+    title: (0, _i18n.__)('Presets')
+  }), !window.__experimentalDisableFontLibrary && fontLibraryEnabled && (0, _react.createElement)(_fontFamilies.default, null), (0, _react.createElement)(_typographyElements.default, null))));
 }
 var _default = exports.default = ScreenTypography;
 //# sourceMappingURL=screen-typography.js.map

package/build/components/global-styles/screen-typography.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_i18n","require","_components","_editor","_data","_typographyElements","_interopRequireDefault","_variationsTypography","_fontFamilies","_header","ScreenTypography","fontLibraryEnabled","useSelect","select","editorStore","getEditorSettings","_react","createElement","Fragment","default","title","__","description","className","__experimentalVStack","spacing","window","__experimentalDisableFontLibrary","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { store as editorStore } from '@wordpress/editor';\nimport { useSelect } from '@wordpress/data';\n\n/\n Internal dependencies\n */\nimport TypographyElements from './typography-elements';\nimport TypographyVariations from './variations/variations-typography';\nimport FontFamilies from './font-families';\nimport ScreenHeader from './header';\n\nfunction ScreenTypography() {\n\tconst fontLibraryEnabled = useSelect(\n\t\t( select ) =>\n\t\t\tselect( editorStore ).getEditorSettings().fontLibraryEnabled,\n\t\t[]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Typography' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'~~Manage~~ the ~~typography~~ ~~settings~~ ~~for~~ ~~different~~ elements.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<div className=\"edit-site-global-styles-screen~~-typography~~\">\n\t\t\t\t<VStack spacing={ 6 }>\n\t\t\t\t\t<TypographyVariations />\n\t\t\t\t\t{ ! window.__experimentalDisableFontLibrary ~~&& (\~~n\t\t\t\t\t\~~t<VStack~~ ~~spacing={ 3 }>\n\t\t\t\t\t\t\t{ fontLibraryEnabled~~ && <FontFamilies /> }\n\t\t\t\t\t~~\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t\t~~<TypographyElements />\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenTypography;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAKA,IAAAI,mBAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,qBAAA,GAAAD,sBAAA,CAAAL,OAAA;AACA,IAAAO,aAAA,GAAAF,sBAAA,CAAAL,OAAA;AACA,IAAAQ,OAAA,GAAAH,sBAAA,CAAAL,OAAA;AAdA;AACA;AACA;;AAMA;AACA;AACA;;AAMA,SAASS,gBAAgBA,CAAA,EAAG;EAC3B,MAAMC,kBAAkB,GAAG,IAAAC,eAAS,EACjCC,MAAM,IACPA,MAAM,CAAEC,aAAY,CAAC,CAACC,iBAAiB,CAAC,CAAC,CAACJ,kBAAkB,EAC7D,EACD,CAAC;EAED,OACC,IAAAK,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAE,QAAA,QACC,IAAAF,MAAA,CAAAC,aAAA,EAACR,OAAA,CAAAU,OAAY;IACZC,KAAK,EAAG,IAAAC,QAAE,EAAE,YAAa,CAAG;IAC5BC,WAAW,EAAG,IAAAD,QAAE,EACf,~~wDACD~~;EAAG,CACH,CAAC,EACF,IAAAL,MAAA,CAAAC,aAAA;IAAKM,SAAS,EAAC;~~EAA2C~~,~~GACzD~~,IAAAP,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAsB,oBAAM;IAACC,OAAO,EAAG;EAAG,GACpB,IAAAT,MAAA,CAAAC,aAAA,EAACV,qBAAA,CAAAY,OAAoB,~~MAAE~~,~~CAAC~~,~~EACtB~~,~~CAAEO~~,~~MAAM~~,~~CAACC~~,~~gCAAgC~~,~~IAC1C~~,~~IAAAX~~,~~MAAA~~,~~CAAAC~~,~~aAAA~~,~~EAACf~~,~~WAAA~~,~~CAAAsB,oBAAM;IAACC,OAAO,EAAG;EAAG,GAClBd,~~kBAAkB,IAAI,IAAAK,MAAA,CAAAC,aAAA,EAACT,aAAA,CAAAW,OAAY,MAAE,~~CAChC~~,~~CACR~~,~~EACD,~~IAAAH,MAAA,CAAAC,aAAA,EAACZ,mBAAA,CAAAc,OAAkB,MAAE,CACd,CACJ,CACJ,CAAC;AAEL;AAAC,IAAAS,QAAA,GAAAC,OAAA,CAAAV,OAAA,GAEcT,gBAAgB"}
1	+ {"version":3,"names":["_i18n","require","_components","_editor","_data","_typographyElements","_interopRequireDefault","_variationsTypography","_fontFamilies","_header","ScreenTypography","fontLibraryEnabled","useSelect","select","editorStore","getEditorSettings","_react","createElement","Fragment","default","title","__","description","className","__experimentalVStack","spacing","window","__experimentalDisableFontLibrary","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { store as editorStore } from '@wordpress/editor';\nimport { useSelect } from '@wordpress/data';\n\n/\n Internal dependencies\n */\nimport TypographyElements from './typography-elements';\nimport TypographyVariations from './variations/variations-typography';\nimport FontFamilies from './font-families';\nimport ScreenHeader from './header';\n\nfunction ScreenTypography() {\n\tconst fontLibraryEnabled = useSelect(\n\t\t( select ) =>\n\t\t\tselect( editorStore ).getEditorSettings().fontLibraryEnabled,\n\t\t[]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Typography' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Typography styles and the application of those styles on site elements.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<div className=\"edit-site-global-styles-screen\">\n\t\t\t\t<VStack spacing={ 7 }>\n\t\t\t\t\t<TypographyVariations title={ __( 'Presets' ) } />\n\t\t\t\t\t{ ! window.__experimentalDisableFontLibrary &&\n\t\t\t\t\t\tfontLibraryEnabled && <FontFamilies /> }\n\t\t\t\t\t<TypographyElements />\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenTypography;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAKA,IAAAI,mBAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,qBAAA,GAAAD,sBAAA,CAAAL,OAAA;AACA,IAAAO,aAAA,GAAAF,sBAAA,CAAAL,OAAA;AACA,IAAAQ,OAAA,GAAAH,sBAAA,CAAAL,OAAA;AAdA;AACA;AACA;;AAMA;AACA;AACA;;AAMA,SAASS,gBAAgBA,CAAA,EAAG;EAC3B,MAAMC,kBAAkB,GAAG,IAAAC,eAAS,EACjCC,MAAM,IACPA,MAAM,CAAEC,aAAY,CAAC,CAACC,iBAAiB,CAAC,CAAC,CAACJ,kBAAkB,EAC7D,EACD,CAAC;EAED,OACC,IAAAK,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAE,QAAA,QACC,IAAAF,MAAA,CAAAC,aAAA,EAACR,OAAA,CAAAU,OAAY;IACZC,KAAK,EAAG,IAAAC,QAAE,EAAE,YAAa,CAAG;IAC5BC,WAAW,EAAG,IAAAD,QAAE,EACf,yEACD;EAAG,CACH,CAAC,EACF,IAAAL,MAAA,CAAAC,aAAA;IAAKM,SAAS,EAAC;EAAgC,GAC9C,IAAAP,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAsB,oBAAM;IAACC,OAAO,EAAG;EAAG,GACpB,IAAAT,MAAA,CAAAC,aAAA,EAACV,qBAAA,CAAAY,OAAoB;IAACC,KAAK,EAAG,IAAAC,QAAE,EAAE,SAAU;EAAG,CAAE,CAAC,EAChD,CAAEK,MAAM,CAACC,gCAAgC,IAC1ChB,kBAAkB,IAAI,IAAAK,MAAA,CAAAC,aAAA,EAACT,aAAA,CAAAW,OAAY,MAAE,CAAC,EACvC,IAAAH,MAAA,CAAAC,aAAA,EAACZ,mBAAA,CAAAc,OAAkB,MAAE,CACd,CACJ,CACJ,CAAC;AAEL;AAAC,IAAAS,QAAA,GAAAC,OAAA,CAAAV,OAAA,GAEcT,gBAAgB"}

package/build/components/global-styles/style-variations-container.js CHANGED Viewed

@@ -21,7 +21,9 @@ var _variation = _interopRequireDefault(require("./variations/variation"));
  * Internal dependencies
  */
-function StyleVariationsContainer() {
+function StyleVariationsContainer({
+  gap = 2
+}) {
   const variations = (0, _data.useSelect)(select => {
     return select(_coreData.store).__experimentalGetCurrentThemeGlobalStylesVariations();
   }, []);
@@ -41,7 +43,8 @@ function StyleVariationsContainer() {
   }, [variations]);
   return (0, _react.createElement)(_components.__experimentalGrid, {
     columns: 2,
-    className: "edit-site-global-styles-style-variations-container"
+    className: "edit-site-global-styles-style-variations-container",
+    gap: gap
   }, withEmptyVariation.map((variation, index) => (0, _react.createElement)(_variation.default, {
     key: index,
     variation: variation

package/build/components/global-styles/style-variations-container.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_coreData","require","_data","_element","_components","_i18n","_previewStyles","_interopRequireDefault","_variation","StyleVariationsContainer","variations","useSelect","select","coreStore","__experimentalGetCurrentThemeGlobalStylesVariations","withEmptyVariation","useMemo","title","__","settings","styles","map","variation","_variation$settings","_variation$styles","_react","createElement","__experimentalGrid","columns","className","index","default","key","isFocused","label","withHoverView"],"sources":["@wordpress/edit-site/src/components/global-styles/style-variations-container.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\nimport { __experimentalGrid as Grid } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n */\nimport PreviewStyles from './preview-styles';\nimport Variation from './variations/variation';\n\nexport default function StyleVariationsContainer() {\n\tconst variations = useSelect( ( select ) => {\n\t\treturn select(\n\t\t\tcoreStore\n\t\t).__experimentalGetCurrentThemeGlobalStylesVariations();\n\t}, [] );\n\n\tconst withEmptyVariation = useMemo( () => {\n\t\treturn [\n\t\t\t{\n\t\t\t\ttitle: __( 'Default' ),\n\t\t\t\tsettings: {},\n\t\t\t\tstyles: {},\n\t\t\t},\n\t\t\t...( variations ?? [] ).map( ( variation ) => ( {\n\t\t\t\t...variation,\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t} ) ),\n\t\t];\n\t}, [ variations ] );\n\n\treturn (\n\t\t<Grid\n\t\t\tcolumns={ 2 }\n\t\t\tclassName=\"edit-site-global-styles-style-variations-container\"\n\t\t>\n\t\t\t{ withEmptyVariation.map( ( variation, index ) => (\n\t\t\t\t<Variation key={ index } variation={ variation }>\n\t\t\t\t\t{ ( isFocused ) => (\n\t\t\t\t\t\t<PreviewStyles\n\t\t\t\t\t\t\tlabel={ variation?.title }\n\t\t\t\t\t\t\twithHoverView\n\t\t\t\t\t\t\tisFocused={ isFocused }\n\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Variation>\n\t\t\t) ) }\n\t\t</Grid>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAKA,IAAAK,cAAA,GAAAC,sBAAA,CAAAN,OAAA;AACA,IAAAO,UAAA,GAAAD,sBAAA,CAAAN,OAAA;AAbA;AACA;AACA;;AAOA;AACA;AACA;;AAIe,SAASQ,wBAAwBA,~~CAAA~~,EAAG;~~EAClD~~,MAAMC,UAAU,GAAG,IAAAC,eAAS,EAAIC,MAAM,IAAM;IAC3C,OAAOA,MAAM,CACZC,eACD,CAAC,CAACC,mDAAmD,CAAC,CAAC;EACxD,CAAC,EAAE,EAAG,CAAC;EAEP,MAAMC,kBAAkB,GAAG,IAAAC,gBAAO,EAAE,MAAM;IACzC,OAAO,CACN;MACCC,KAAK,EAAE,IAAAC,QAAE,EAAE,SAAU,CAAC;MACtBC,QAAQ,EAAE,CAAC,CAAC;MACZC,MAAM,EAAE,CAAC;IACV,CAAC,EACD,GAAG,CAAEV,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,EAAE,EAAGW,GAAG,CAAIC,SAAS;MAAA,IAAAC,mBAAA,EAAAC,iBAAA;MAAA,OAAQ;QAC/C,GAAGF,SAAS;QACZH,QAAQ,GAAAI,mBAAA,GAAED,SAAS,CAACH,QAAQ,cAAAI,mBAAA,cAAAA,mBAAA,GAAI,CAAC,CAAC;QAClCH,MAAM,GAAAI,iBAAA,GAAEF,SAAS,CAACF,MAAM,cAAAI,iBAAA,cAAAA,iBAAA,GAAI,CAAC;MAC9B,CAAC;IAAA,CAAG,CAAC,CACL;EACF,CAAC,EAAE,CAAEd,UAAU,CAAG,CAAC;EAEnB,OACC,IAAAe,MAAA,CAAAC,aAAA,~~EAACtB~~,WAAA,~~CAAAuB~~,kBAAI;IACJC,OAAO,EAAG,CAAG;IACbC,SAAS,EAAC;~~EAAoD~~,~~GAE5Dd~~,kBAAkB,CAACM,GAAG,CAAE,CAAEC,SAAS,EAAEQ,KAAK,KAC3C,IAAAL,MAAA,CAAAC,aAAA,~~EAAClB~~,UAAA,~~CAAAuB~~,OAAS;IAACC,GAAG,EAAGF,KAAO;IAACR,SAAS,EAAGA;EAAW,GAC3CW,SAAS,IACZ,IAAAR,MAAA,CAAAC,aAAA,~~EAACpB~~,cAAA,~~CAAAyB~~,OAAa;IACbG,KAAK,EAAGZ,SAAS,EAAEL,KAAO;IAC1BkB,aAAa;IACbF,SAAS,EAAGA,SAAW;IACvBX,SAAS,EAAGA;EAAW,CACvB,CAEQ,CACV,CACG,CAAC;AAET"}
1	+ {"version":3,"names":["_coreData","require","_data","_element","_components","_i18n","_previewStyles","_interopRequireDefault","_variation","StyleVariationsContainer","gap","variations","useSelect","select","coreStore","__experimentalGetCurrentThemeGlobalStylesVariations","withEmptyVariation","useMemo","title","__","settings","styles","map","variation","_variation$settings","_variation$styles","_react","createElement","__experimentalGrid","columns","className","index","default","key","isFocused","label","withHoverView"],"sources":["@wordpress/edit-site/src/components/global-styles/style-variations-container.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\nimport { __experimentalGrid as Grid } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n */\nimport PreviewStyles from './preview-styles';\nimport Variation from './variations/variation';\n\nexport default function StyleVariationsContainer( { gap = 2 } ) {\n\tconst variations = useSelect( ( select ) => {\n\t\treturn select(\n\t\t\tcoreStore\n\t\t).__experimentalGetCurrentThemeGlobalStylesVariations();\n\t}, [] );\n\n\tconst withEmptyVariation = useMemo( () => {\n\t\treturn [\n\t\t\t{\n\t\t\t\ttitle: __( 'Default' ),\n\t\t\t\tsettings: {},\n\t\t\t\tstyles: {},\n\t\t\t},\n\t\t\t...( variations ?? [] ).map( ( variation ) => ( {\n\t\t\t\t...variation,\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t} ) ),\n\t\t];\n\t}, [ variations ] );\n\n\treturn (\n\t\t<Grid\n\t\t\tcolumns={ 2 }\n\t\t\tclassName=\"edit-site-global-styles-style-variations-container\"\n\t\t\tgap={ gap }\n\t\t>\n\t\t\t{ withEmptyVariation.map( ( variation, index ) => (\n\t\t\t\t<Variation key={ index } variation={ variation }>\n\t\t\t\t\t{ ( isFocused ) => (\n\t\t\t\t\t\t<PreviewStyles\n\t\t\t\t\t\t\tlabel={ variation?.title }\n\t\t\t\t\t\t\twithHoverView\n\t\t\t\t\t\t\tisFocused={ isFocused }\n\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Variation>\n\t\t\t) ) }\n\t\t</Grid>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAKA,IAAAK,cAAA,GAAAC,sBAAA,CAAAN,OAAA;AACA,IAAAO,UAAA,GAAAD,sBAAA,CAAAN,OAAA;AAbA;AACA;AACA;;AAOA;AACA;AACA;;AAIe,SAASQ,wBAAwBA,CAAE;EAAEC,GAAG,GAAG;AAAE,CAAC,EAAG;EAC/D,MAAMC,UAAU,GAAG,IAAAC,eAAS,EAAIC,MAAM,IAAM;IAC3C,OAAOA,MAAM,CACZC,eACD,CAAC,CAACC,mDAAmD,CAAC,CAAC;EACxD,CAAC,EAAE,EAAG,CAAC;EAEP,MAAMC,kBAAkB,GAAG,IAAAC,gBAAO,EAAE,MAAM;IACzC,OAAO,CACN;MACCC,KAAK,EAAE,IAAAC,QAAE,EAAE,SAAU,CAAC;MACtBC,QAAQ,EAAE,CAAC,CAAC;MACZC,MAAM,EAAE,CAAC;IACV,CAAC,EACD,GAAG,CAAEV,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,EAAE,EAAGW,GAAG,CAAIC,SAAS;MAAA,IAAAC,mBAAA,EAAAC,iBAAA;MAAA,OAAQ;QAC/C,GAAGF,SAAS;QACZH,QAAQ,GAAAI,mBAAA,GAAED,SAAS,CAACH,QAAQ,cAAAI,mBAAA,cAAAA,mBAAA,GAAI,CAAC,CAAC;QAClCH,MAAM,GAAAI,iBAAA,GAAEF,SAAS,CAACF,MAAM,cAAAI,iBAAA,cAAAA,iBAAA,GAAI,CAAC;MAC9B,CAAC;IAAA,CAAG,CAAC,CACL;EACF,CAAC,EAAE,CAAEd,UAAU,CAAG,CAAC;EAEnB,OACC,IAAAe,MAAA,CAAAC,aAAA,EAACvB,WAAA,CAAAwB,kBAAI;IACJC,OAAO,EAAG,CAAG;IACbC,SAAS,EAAC,oDAAoD;IAC9DpB,GAAG,EAAGA;EAAK,GAETM,kBAAkB,CAACM,GAAG,CAAE,CAAEC,SAAS,EAAEQ,KAAK,KAC3C,IAAAL,MAAA,CAAAC,aAAA,EAACnB,UAAA,CAAAwB,OAAS;IAACC,GAAG,EAAGF,KAAO;IAACR,SAAS,EAAGA;EAAW,GAC3CW,SAAS,IACZ,IAAAR,MAAA,CAAAC,aAAA,EAACrB,cAAA,CAAA0B,OAAa;IACbG,KAAK,EAAGZ,SAAS,EAAEL,KAAO;IAC1BkB,aAAa;IACbF,SAAS,EAAGA,SAAW;IACvBX,SAAS,EAAGA;EAAW,CACvB,CAEQ,CACV,CACG,CAAC;AAET"}

package/build/components/global-styles/ui.js CHANGED Viewed

@@ -27,6 +27,7 @@ var _screenStyleVariations = _interopRequireDefault(require("./screen-style-vari
 var _styleBook = _interopRequireDefault(require("../style-book"));
 var _screenCss = _interopRequireDefault(require("./screen-css"));
 var _screenRevisions = _interopRequireDefault(require("./screen-revisions"));
+var _screenBackground = _interopRequireDefault(require("./screen-background"));
 var _lockUnlock = require("../../lock-unlock");
 var _store = require("../../store");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -282,7 +283,9 @@ function GlobalStylesUI() {
     path: "/css"
   }, (0, _react.createElement)(_screenCss.default, null)), (0, _react.createElement)(GlobalStylesNavigationScreen, {
     path: '/revisions'
-  }, (0, _react.createElement)(_screenRevisions.default, null)), blocks.map(block => (0, _react.createElement)(GlobalStylesNavigationScreen, {
+  }, (0, _react.createElement)(_screenRevisions.default, null)), (0, _react.createElement)(GlobalStylesNavigationScreen, {
+    path: '/background'
+  }, (0, _react.createElement)(_screenBackground.default, null)), blocks.map(block => (0, _react.createElement)(GlobalStylesNavigationScreen, {
     key: 'menu-block-' + block.name,
     path: '/blocks/' + encodeURIComponent(block.name)
   }, (0, _react.createElement)(_screenBlock.default, {

package/build/components/global-styles/ui.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_components","require","_blocks","_data","_blockEditor","_i18n","_preferences","_icons","_coreData","_element","_screenRoot","_interopRequireDefault","_screenBlockList","_interopRequireWildcard","_screenBlock","_screenTypography","_screenTypographyElement","_screenColors","_screenColorPalette","_screenLayout","_screenStyleVariations","_styleBook","_screenCss","_screenRevisions","_lockUnlock","_store","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","SLOT_FILL_NAME","useGlobalStylesReset","unlock","blockEditorPrivateApis","Slot","GlobalStylesMenuSlot","Fill","GlobalStylesMenuFill","createSlotFill","exports","GlobalStylesActionMenu","canReset","onReset","toggle","useDispatch","preferencesStore","canEditCSS","useSelect","select","getEntityRecord","__experimentalGetCurrentGlobalStylesId","coreStore","globalStylesId","globalStyles","undefined","_links","setEditorCanvasContainerView","editSiteStore","goTo","useNavigator","loadCustomCSS","_react","createElement","DropdownMenu","icon","moreVertical","label","__","onClose","Fragment","MenuGroup","MenuItem","onClick","disabled","GlobalStylesNavigationScreen","className","props","__experimentalNavigatorScreen","filter","Boolean","join","BlockStylesNavigationScreens","parentMenu","blockStyles","blockName","map","style","index","key","path","name","variation","ContextScreens","blockStyleVariations","getBlockStyles","blocksStore","length","GlobalStylesStyleBook","navigator","location","isSelected","encodeURIComponent","startsWith","onSelect","GlobalStylesBlockLink","selectedBlockName","selectedBlockClientId","getSelectedBlockClientId","getBlockName","blockEditorStore","clientId","blockHasGlobalStyles","useBlockHasGlobalStyles","useEffect","currentPath","newPath","skipFocus","GlobalStylesEditorCanvasContainerLink","editorCanvasContainerView","getEditorCanvasContainerView","isRevisionsOpen","GlobalStylesUI","blocks","getBlockTypes","__experimentalNavigatorProvider","initialPath","element","block","_default"],"sources":["@wordpress/edit-site/src/components/global-styles/ui.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\t__experimentalNavigatorProvider as NavigatorProvider,\n\t__experimentalNavigatorScreen as NavigatorScreen,\n\t__experimentalUseNavigator as useNavigator,\n\tcreateSlotFill,\n\tDropdownMenu,\n\tMenuGroup,\n\tMenuItem,\n} from '@wordpress/components';\nimport { getBlockTypes, store as blocksStore } from '@wordpress/blocks';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport { moreVertical } from '@wordpress/icons';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useEffect } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport ScreenRoot from './screen-root';\nimport {\n\tuseBlockHasGlobalStyles,\n\tdefault as ScreenBlockList,\n} from './screen-block-list';\nimport ScreenBlock from './screen-block';\nimport ScreenTypography from './screen-typography';\nimport ScreenTypographyElement from './screen-typography-element';\nimport ScreenColors from './screen-colors';\nimport ScreenColorPalette from './screen-color-palette';\nimport ScreenLayout from './screen-layout';\nimport ScreenStyleVariations from './screen-style-variations';\nimport StyleBook from '../style-book';\nimport ScreenCSS from './screen-css';\nimport ScreenRevisions from './screen-revisions';\nimport { unlock } from '../../lock-unlock';\nimport { store as editSiteStore } from '../../store';\n\nconst SLOT_FILL_NAME = 'GlobalStylesMenu';\nconst { useGlobalStylesReset } = unlock( blockEditorPrivateApis );\nconst { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } =\n\tcreateSlotFill( SLOT_FILL_NAME );\n\nfunction GlobalStylesActionMenu() {\n\tconst [ canReset, onReset ] = useGlobalStylesReset();\n\tconst { toggle } = useDispatch( preferencesStore );\n\tconst { canEditCSS } = useSelect( ( select ) => {\n\t\tconst { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =\n\t\t\tselect( coreStore );\n\n\t\tconst globalStylesId = __experimentalGetCurrentGlobalStylesId();\n\t\tconst globalStyles = globalStylesId\n\t\t\t? getEntityRecord( 'root', 'globalStyles', globalStylesId )\n\t\t\t: undefined;\n\n\t\treturn {\n\t\t\tcanEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],\n\t\t};\n\t}, [] );\n\tconst { setEditorCanvasContainerView } = unlock(\n\t\tuseDispatch( editSiteStore )\n\t);\n\tconst { goTo } = useNavigator();\n\tconst loadCustomCSS = () => {\n\t\tsetEditorCanvasContainerView( 'global-styles-css' );\n\t\tgoTo( '/css' );\n\t};\n\n\treturn (\n\t\t<GlobalStylesMenuFill>\n\t\t\t<DropdownMenu icon={ moreVertical } label={ __( 'More' ) }>\n\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t{ canEditCSS && (\n\t\t\t\t\t\t\t\t<MenuItem onClick={ loadCustomCSS }>\n\t\t\t\t\t\t\t\t\t{ __( 'Additional CSS' ) }\n\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\ttoggle(\n\t\t\t\t\t\t\t\t\t\t'core/edit-site',\n\t\t\t\t\t\t\t\t\t\t'welcomeGuideStyles'\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Welcome Guide' ) }\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\tonReset();\n\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tdisabled={ ! canReset }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Reset styles' ) }\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</DropdownMenu>\n\t\t</GlobalStylesMenuFill>\n\t);\n}\n\nfunction GlobalStylesNavigationScreen( { className, ...props } ) {\n\treturn (\n\t\t<NavigatorScreen\n\t\t\tclassName={ [\n\t\t\t\t'edit-site-global-styles-sidebar__navigator-screen',\n\t\t\t\tclassName,\n\t\t\t]\n\t\t\t\t.filter( Boolean )\n\t\t\t\t.join( ' ' ) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction BlockStylesNavigationScreens( {\n\tparentMenu,\n\tblockStyles,\n\tblockName,\n} ) {\n\treturn blockStyles.map( ( style, index ) => (\n\t\t<GlobalStylesNavigationScreen\n\t\t\tkey={ index }\n\t\t\tpath={ parentMenu + '/variations/' + style.name }\n\t\t>\n\t\t\t<ScreenBlock name={ blockName } variation={ style.name } />\n\t\t</GlobalStylesNavigationScreen>\n\t) );\n}\n\nfunction ContextScreens( { name, parentMenu = '' } ) {\n\tconst blockStyleVariations = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockStyles } = select( blocksStore );\n\t\t\treturn getBlockStyles( name );\n\t\t},\n\t\t[ name ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/palette' }\n\t\t\t>\n\t\t\t\t<ScreenColorPalette name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t{ !! blockStyleVariations?.length && (\n\t\t\t\t<BlockStylesNavigationScreens\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\tblockStyles={ blockStyleVariations }\n\t\t\t\t\tblockName={ name }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction GlobalStylesStyleBook() {\n\tconst navigator = useNavigator();\n\tconst { path } = navigator.location;\n\treturn (\n\t\t<StyleBook\n\t\t\tisSelected={ ( blockName ) =>\n\t\t\t\t// Match '/blocks/core%2Fbutton' and\n\t\t\t\t// '/blocks/core%2Fbutton/typography', but not\n\t\t\t\t// '/blocks/core%2Fbuttons'.\n\t\t\t\tpath === `/blocks/${ encodeURIComponent( blockName ) }` \|\|\n\t\t\t\tpath.startsWith(\n\t\t\t\t\t`/blocks/${ encodeURIComponent( blockName ) }/`\n\t\t\t\t)\n\t\t\t}\n\t\t\tonSelect={ ( blockName ) => {\n\t\t\t\t// Now go to the selected block.\n\t\t\t\tnavigator.goTo( '/blocks/' + encodeURIComponent( blockName ) );\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nfunction GlobalStylesBlockLink() {\n\tconst navigator = useNavigator();\n\tconst { selectedBlockName, selectedBlockClientId } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getSelectedBlockClientId, getBlockName } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\tconst clientId = getSelectedBlockClientId();\n\t\t\treturn {\n\t\t\t\tselectedBlockName: getBlockName( clientId ),\n\t\t\t\tselectedBlockClientId: clientId,\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\tconst blockHasGlobalStyles = useBlockHasGlobalStyles( selectedBlockName );\n\t// When we're in the `Blocks` screen enable deep linking to the selected block.\n\tuseEffect( () => {\n\t\tif ( ! selectedBlockClientId \|\| ! blockHasGlobalStyles ) {\n\t\t\treturn;\n\t\t}\n\t\tconst currentPath = navigator.location.path;\n\t\tif (\n\t\t\tcurrentPath !== '/blocks' &&\n\t\t\t! currentPath.startsWith( '/blocks/' )\n\t\t) {\n\t\t\treturn;\n\t\t}\n\t\tconst newPath = '/blocks/' + encodeURIComponent( selectedBlockName );\n\t\t// Avoid navigating to the same path. This can happen when selecting\n\t\t// a new block of the same type.\n\t\tif ( newPath !== currentPath ) {\n\t\t\tnavigator.goTo( newPath, { skipFocus: true } );\n\t\t}\n\t}, [ selectedBlockClientId, selectedBlockName, blockHasGlobalStyles ] );\n}\n\nfunction GlobalStylesEditorCanvasContainerLink() {\n\tconst { goTo, location } = useNavigator();\n\tconst editorCanvasContainerView = useSelect(\n\t\t( select ) =>\n\t\t\tunlock( select( editSiteStore ) ).getEditorCanvasContainerView(),\n\t\t[]\n\t);\n\tconst path = location?.path;\n\tconst isRevisionsOpen = path === '/revisions';\n\n\t// If the user switches the editor canvas container view, redirect\n\t// to the appropriate screen. This effectively allows deep linking to the\n\t// desired screens from outside the global styles navigation provider.\n\tuseEffect( () => {\n\t\tswitch ( editorCanvasContainerView ) {\n\t\t\tcase 'global-styles-revisions':\n\t\t\tcase 'global-styles-revisions:style-book':\n\t\t\t\tgoTo( '/revisions' );\n\t\t\t\tbreak;\n\t\t\tcase 'global-styles-css':\n\t\t\t\tgoTo( '/css' );\n\t\t\t\tbreak;\n\t\t\tcase 'style-book':\n\t\t\t\t/\n\t\t\t\t * The stand-alone style book is open\n\t\t\t\t * and the revisions panel is open,\n\t\t\t\t * close the revisions panel.\n\t\t\t\t * Otherwise keep the style book open while\n\t\t\t\t * browsing global styles panel.\n\t\t\t\t /\n\t\t\t\tif ( isRevisionsOpen ) {\n\t\t\t\t\tgoTo( '/' );\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\t/\n\t\t\t\t * Example: the user has navigated to \"Browse styles\" or elsewhere\n\t\t\t\t * and changes the editorCanvasContainerView, e.g., closes the style book.\n\t\t\t\t * The panel should not be affected.\n\t\t\t\t * Exclude revisions panel from this behavior,\n\t\t\t\t * as it should close when the editorCanvasContainerView doesn't correspond.\n\t\t\t\t */\n\t\t\t\tif ( path !== '/' && ! isRevisionsOpen ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tgoTo( '/' );\n\t\t\t\tbreak;\n\t\t}\n\t}, [ editorCanvasContainerView, isRevisionsOpen, goTo ] );\n}\n\nfunction GlobalStylesUI() {\n\tconst blocks = getBlockTypes();\n\tconst editorCanvasContainerView = useSelect(\n\t\t( select ) =>\n\t\t\tunlock( select( editSiteStore ) ).getEditorCanvasContainerView(),\n\t\t[]\n\t);\n\treturn (\n\t\t<NavigatorProvider\n\t\t\tclassName=\"edit-site-global-styles-sidebar__navigator-provider\"\n\t\t\tinitialPath=\"/\"\n\t\t>\n\t\t\t<GlobalStylesNavigationScreen path=\"/\">\n\t\t\t\t<ScreenRoot />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/variations\">\n\t\t\t\t<ScreenStyleVariations />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/blocks\">\n\t\t\t\t<ScreenBlockList />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/typography\">\n\t\t\t\t<ScreenTypography />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/typography/text\">\n\t\t\t\t<ScreenTypographyElement element=\"text\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/typography/link\">\n\t\t\t\t<ScreenTypographyElement element=\"link\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/typography/heading\">\n\t\t\t\t<ScreenTypographyElement element=\"heading\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/typography/caption\">\n\t\t\t\t<ScreenTypographyElement element=\"caption\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/typography/button\">\n\t\t\t\t<ScreenTypographyElement element=\"button\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/colors\">\n\t\t\t\t<ScreenColors />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/layout\">\n\t\t\t\t<ScreenLayout />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/css\">\n\t\t\t\t<ScreenCSS />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ '/revisions' }>\n\t\t\t\t<ScreenRevisions />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t{ blocks.map( ( block ) => (\n\t\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\t\tkey={ 'menu-block-' + block.name }\n\t\t\t\t\tpath={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t\t\t>\n\t\t\t\t\t<ScreenBlock name={ block.name } />\n\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t) ) }\n\n\t\t\t<ContextScreens />\n\n\t\t\t{ blocks.map( ( block ) => (\n\t\t\t\t<ContextScreens\n\t\t\t\t\tkey={ 'screens-block-' + block.name }\n\t\t\t\t\tname={ block.name }\n\t\t\t\t\tparentMenu={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t\t\t/>\n\t\t\t) ) }\n\n\t\t\t{ 'style-book' === editorCanvasContainerView && (\n\t\t\t\t<GlobalStylesStyleBook />\n\t\t\t) }\n\n\t\t\t<GlobalStylesActionMenu />\n\t\t\t<GlobalStylesBlockLink />\n\t\t\t<GlobalStylesEditorCanvasContainerLink />\n\t\t</NavigatorProvider>\n\t);\n}\nexport { GlobalStylesMenuSlot };\nexport default GlobalStylesUI;\n"],"mappings":"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"}
1	+ {"version":3,"names":["_components","require","_blocks","_data","_blockEditor","_i18n","_preferences","_icons","_coreData","_element","_screenRoot","_interopRequireDefault","_screenBlockList","_interopRequireWildcard","_screenBlock","_screenTypography","_screenTypographyElement","_screenColors","_screenColorPalette","_screenLayout","_screenStyleVariations","_styleBook","_screenCss","_screenRevisions","_screenBackground","_lockUnlock","_store","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","SLOT_FILL_NAME","useGlobalStylesReset","unlock","blockEditorPrivateApis","Slot","GlobalStylesMenuSlot","Fill","GlobalStylesMenuFill","createSlotFill","exports","GlobalStylesActionMenu","canReset","onReset","toggle","useDispatch","preferencesStore","canEditCSS","useSelect","select","getEntityRecord","__experimentalGetCurrentGlobalStylesId","coreStore","globalStylesId","globalStyles","undefined","_links","setEditorCanvasContainerView","editSiteStore","goTo","useNavigator","loadCustomCSS","_react","createElement","DropdownMenu","icon","moreVertical","label","__","onClose","Fragment","MenuGroup","MenuItem","onClick","disabled","GlobalStylesNavigationScreen","className","props","__experimentalNavigatorScreen","filter","Boolean","join","BlockStylesNavigationScreens","parentMenu","blockStyles","blockName","map","style","index","key","path","name","variation","ContextScreens","blockStyleVariations","getBlockStyles","blocksStore","length","GlobalStylesStyleBook","navigator","location","isSelected","encodeURIComponent","startsWith","onSelect","GlobalStylesBlockLink","selectedBlockName","selectedBlockClientId","getSelectedBlockClientId","getBlockName","blockEditorStore","clientId","blockHasGlobalStyles","useBlockHasGlobalStyles","useEffect","currentPath","newPath","skipFocus","GlobalStylesEditorCanvasContainerLink","editorCanvasContainerView","getEditorCanvasContainerView","isRevisionsOpen","GlobalStylesUI","blocks","getBlockTypes","__experimentalNavigatorProvider","initialPath","element","block","_default"],"sources":["@wordpress/edit-site/src/components/global-styles/ui.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\t__experimentalNavigatorProvider as NavigatorProvider,\n\t__experimentalNavigatorScreen as NavigatorScreen,\n\t__experimentalUseNavigator as useNavigator,\n\tcreateSlotFill,\n\tDropdownMenu,\n\tMenuGroup,\n\tMenuItem,\n} from '@wordpress/components';\nimport { getBlockTypes, store as blocksStore } from '@wordpress/blocks';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport { moreVertical } from '@wordpress/icons';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useEffect } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport ScreenRoot from './screen-root';\nimport {\n\tuseBlockHasGlobalStyles,\n\tdefault as ScreenBlockList,\n} from './screen-block-list';\nimport ScreenBlock from './screen-block';\nimport ScreenTypography from './screen-typography';\nimport ScreenTypographyElement from './screen-typography-element';\nimport ScreenColors from './screen-colors';\nimport ScreenColorPalette from './screen-color-palette';\nimport ScreenLayout from './screen-layout';\nimport ScreenStyleVariations from './screen-style-variations';\nimport StyleBook from '../style-book';\nimport ScreenCSS from './screen-css';\nimport ScreenRevisions from './screen-revisions';\nimport ScreenBackground from './screen-background';\nimport { unlock } from '../../lock-unlock';\nimport { store as editSiteStore } from '../../store';\n\nconst SLOT_FILL_NAME = 'GlobalStylesMenu';\nconst { useGlobalStylesReset } = unlock( blockEditorPrivateApis );\nconst { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } =\n\tcreateSlotFill( SLOT_FILL_NAME );\n\nfunction GlobalStylesActionMenu() {\n\tconst [ canReset, onReset ] = useGlobalStylesReset();\n\tconst { toggle } = useDispatch( preferencesStore );\n\tconst { canEditCSS } = useSelect( ( select ) => {\n\t\tconst { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =\n\t\t\tselect( coreStore );\n\n\t\tconst globalStylesId = __experimentalGetCurrentGlobalStylesId();\n\t\tconst globalStyles = globalStylesId\n\t\t\t? getEntityRecord( 'root', 'globalStyles', globalStylesId )\n\t\t\t: undefined;\n\n\t\treturn {\n\t\t\tcanEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],\n\t\t};\n\t}, [] );\n\tconst { setEditorCanvasContainerView } = unlock(\n\t\tuseDispatch( editSiteStore )\n\t);\n\tconst { goTo } = useNavigator();\n\tconst loadCustomCSS = () => {\n\t\tsetEditorCanvasContainerView( 'global-styles-css' );\n\t\tgoTo( '/css' );\n\t};\n\n\treturn (\n\t\t<GlobalStylesMenuFill>\n\t\t\t<DropdownMenu icon={ moreVertical } label={ __( 'More' ) }>\n\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t{ canEditCSS && (\n\t\t\t\t\t\t\t\t<MenuItem onClick={ loadCustomCSS }>\n\t\t\t\t\t\t\t\t\t{ __( 'Additional CSS' ) }\n\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\ttoggle(\n\t\t\t\t\t\t\t\t\t\t'core/edit-site',\n\t\t\t\t\t\t\t\t\t\t'welcomeGuideStyles'\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Welcome Guide' ) }\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\tonReset();\n\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tdisabled={ ! canReset }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Reset styles' ) }\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</DropdownMenu>\n\t\t</GlobalStylesMenuFill>\n\t);\n}\n\nfunction GlobalStylesNavigationScreen( { className, ...props } ) {\n\treturn (\n\t\t<NavigatorScreen\n\t\t\tclassName={ [\n\t\t\t\t'edit-site-global-styles-sidebar__navigator-screen',\n\t\t\t\tclassName,\n\t\t\t]\n\t\t\t\t.filter( Boolean )\n\t\t\t\t.join( ' ' ) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction BlockStylesNavigationScreens( {\n\tparentMenu,\n\tblockStyles,\n\tblockName,\n} ) {\n\treturn blockStyles.map( ( style, index ) => (\n\t\t<GlobalStylesNavigationScreen\n\t\t\tkey={ index }\n\t\t\tpath={ parentMenu + '/variations/' + style.name }\n\t\t>\n\t\t\t<ScreenBlock name={ blockName } variation={ style.name } />\n\t\t</GlobalStylesNavigationScreen>\n\t) );\n}\n\nfunction ContextScreens( { name, parentMenu = '' } ) {\n\tconst blockStyleVariations = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockStyles } = select( blocksStore );\n\t\t\treturn getBlockStyles( name );\n\t\t},\n\t\t[ name ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/palette' }\n\t\t\t>\n\t\t\t\t<ScreenColorPalette name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t{ !! blockStyleVariations?.length && (\n\t\t\t\t<BlockStylesNavigationScreens\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\tblockStyles={ blockStyleVariations }\n\t\t\t\t\tblockName={ name }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction GlobalStylesStyleBook() {\n\tconst navigator = useNavigator();\n\tconst { path } = navigator.location;\n\treturn (\n\t\t<StyleBook\n\t\t\tisSelected={ ( blockName ) =>\n\t\t\t\t// Match '/blocks/core%2Fbutton' and\n\t\t\t\t// '/blocks/core%2Fbutton/typography', but not\n\t\t\t\t// '/blocks/core%2Fbuttons'.\n\t\t\t\tpath === `/blocks/${ encodeURIComponent( blockName ) }` \|\|\n\t\t\t\tpath.startsWith(\n\t\t\t\t\t`/blocks/${ encodeURIComponent( blockName ) }/`\n\t\t\t\t)\n\t\t\t}\n\t\t\tonSelect={ ( blockName ) => {\n\t\t\t\t// Now go to the selected block.\n\t\t\t\tnavigator.goTo( '/blocks/' + encodeURIComponent( blockName ) );\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nfunction GlobalStylesBlockLink() {\n\tconst navigator = useNavigator();\n\tconst { selectedBlockName, selectedBlockClientId } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getSelectedBlockClientId, getBlockName } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\tconst clientId = getSelectedBlockClientId();\n\t\t\treturn {\n\t\t\t\tselectedBlockName: getBlockName( clientId ),\n\t\t\t\tselectedBlockClientId: clientId,\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\tconst blockHasGlobalStyles = useBlockHasGlobalStyles( selectedBlockName );\n\t// When we're in the `Blocks` screen enable deep linking to the selected block.\n\tuseEffect( () => {\n\t\tif ( ! selectedBlockClientId \|\| ! blockHasGlobalStyles ) {\n\t\t\treturn;\n\t\t}\n\t\tconst currentPath = navigator.location.path;\n\t\tif (\n\t\t\tcurrentPath !== '/blocks' &&\n\t\t\t! currentPath.startsWith( '/blocks/' )\n\t\t) {\n\t\t\treturn;\n\t\t}\n\t\tconst newPath = '/blocks/' + encodeURIComponent( selectedBlockName );\n\t\t// Avoid navigating to the same path. This can happen when selecting\n\t\t// a new block of the same type.\n\t\tif ( newPath !== currentPath ) {\n\t\t\tnavigator.goTo( newPath, { skipFocus: true } );\n\t\t}\n\t}, [ selectedBlockClientId, selectedBlockName, blockHasGlobalStyles ] );\n}\n\nfunction GlobalStylesEditorCanvasContainerLink() {\n\tconst { goTo, location } = useNavigator();\n\tconst editorCanvasContainerView = useSelect(\n\t\t( select ) =>\n\t\t\tunlock( select( editSiteStore ) ).getEditorCanvasContainerView(),\n\t\t[]\n\t);\n\tconst path = location?.path;\n\tconst isRevisionsOpen = path === '/revisions';\n\n\t// If the user switches the editor canvas container view, redirect\n\t// to the appropriate screen. This effectively allows deep linking to the\n\t// desired screens from outside the global styles navigation provider.\n\tuseEffect( () => {\n\t\tswitch ( editorCanvasContainerView ) {\n\t\t\tcase 'global-styles-revisions':\n\t\t\tcase 'global-styles-revisions:style-book':\n\t\t\t\tgoTo( '/revisions' );\n\t\t\t\tbreak;\n\t\t\tcase 'global-styles-css':\n\t\t\t\tgoTo( '/css' );\n\t\t\t\tbreak;\n\t\t\tcase 'style-book':\n\t\t\t\t/\n\t\t\t\t * The stand-alone style book is open\n\t\t\t\t * and the revisions panel is open,\n\t\t\t\t * close the revisions panel.\n\t\t\t\t * Otherwise keep the style book open while\n\t\t\t\t * browsing global styles panel.\n\t\t\t\t /\n\t\t\t\tif ( isRevisionsOpen ) {\n\t\t\t\t\tgoTo( '/' );\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\t/\n\t\t\t\t * Example: the user has navigated to \"Browse styles\" or elsewhere\n\t\t\t\t * and changes the editorCanvasContainerView, e.g., closes the style book.\n\t\t\t\t * The panel should not be affected.\n\t\t\t\t * Exclude revisions panel from this behavior,\n\t\t\t\t * as it should close when the editorCanvasContainerView doesn't correspond.\n\t\t\t\t */\n\t\t\t\tif ( path !== '/' && ! isRevisionsOpen ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tgoTo( '/' );\n\t\t\t\tbreak;\n\t\t}\n\t}, [ editorCanvasContainerView, isRevisionsOpen, goTo ] );\n}\n\nfunction GlobalStylesUI() {\n\tconst blocks = getBlockTypes();\n\tconst editorCanvasContainerView = useSelect(\n\t\t( select ) =>\n\t\t\tunlock( select( editSiteStore ) ).getEditorCanvasContainerView(),\n\t\t[]\n\t);\n\treturn (\n\t\t<NavigatorProvider\n\t\t\tclassName=\"edit-site-global-styles-sidebar__navigator-provider\"\n\t\t\tinitialPath=\"/\"\n\t\t>\n\t\t\t<GlobalStylesNavigationScreen path=\"/\">\n\t\t\t\t<ScreenRoot />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/variations\">\n\t\t\t\t<ScreenStyleVariations />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/blocks\">\n\t\t\t\t<ScreenBlockList />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/typography\">\n\t\t\t\t<ScreenTypography />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/typography/text\">\n\t\t\t\t<ScreenTypographyElement element=\"text\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/typography/link\">\n\t\t\t\t<ScreenTypographyElement element=\"link\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/typography/heading\">\n\t\t\t\t<ScreenTypographyElement element=\"heading\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/typography/caption\">\n\t\t\t\t<ScreenTypographyElement element=\"caption\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/typography/button\">\n\t\t\t\t<ScreenTypographyElement element=\"button\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/colors\">\n\t\t\t\t<ScreenColors />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/layout\">\n\t\t\t\t<ScreenLayout />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/css\">\n\t\t\t\t<ScreenCSS />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ '/revisions' }>\n\t\t\t\t<ScreenRevisions />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ '/background' }>\n\t\t\t\t<ScreenBackground />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t{ blocks.map( ( block ) => (\n\t\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\t\tkey={ 'menu-block-' + block.name }\n\t\t\t\t\tpath={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t\t\t>\n\t\t\t\t\t<ScreenBlock name={ block.name } />\n\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t) ) }\n\n\t\t\t<ContextScreens />\n\n\t\t\t{ blocks.map( ( block ) => (\n\t\t\t\t<ContextScreens\n\t\t\t\t\tkey={ 'screens-block-' + block.name }\n\t\t\t\t\tname={ block.name }\n\t\t\t\t\tparentMenu={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t\t\t/>\n\t\t\t) ) }\n\n\t\t\t{ 'style-book' === editorCanvasContainerView && (\n\t\t\t\t<GlobalStylesStyleBook />\n\t\t\t) }\n\n\t\t\t<GlobalStylesActionMenu />\n\t\t\t<GlobalStylesBlockLink />\n\t\t\t<GlobalStylesEditorCanvasContainerLink />\n\t\t</NavigatorProvider>\n\t);\n}\nexport { GlobalStylesMenuSlot };\nexport default GlobalStylesUI;\n"],"mappings":"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"}

package/build/components/global-styles/variations/variations-color.js CHANGED Viewed

@@ -10,6 +10,7 @@ var _components = require("@wordpress/components");
 var _variation = _interopRequireDefault(require("./variation"));
 var _previewColors = _interopRequireDefault(require("../preview-colors"));
 var _hooks = require("../hooks");
+var _subtitle = _interopRequireDefault(require("../subtitle"));
 /**
  * WordPress dependencies
  */
@@ -18,15 +19,21 @@ var _hooks = require("../hooks");
  * Internal dependencies
  */
-function ColorVariations() {
+function ColorVariations({
+  title,
+  gap = 2
+}) {
   const colorVariations = (0, _hooks.useColorVariations)();
   if (!colorVariations?.length) {
     return null;
   }
   return (0, _react.createElement)(_components.__experimentalVStack, {
     spacing: 3
-  }, (0, _react.createElement)(_components.__experimentalGrid, {
-    columns: 3
+  }, title && (0, _react.createElement)(_subtitle.default, {
+    level: 3
+  }, title), (0, _react.createElement)(_components.__experimentalGrid, {
+    columns: 3,
+    gap: gap
   }, colorVariations.map((variation, index) => (0, _react.createElement)(_variation.default, {
     key: index,
     variation: variation

package/build/components/global-styles/variations/variations-color.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_components","require","_variation","_interopRequireDefault","_previewColors","_hooks","ColorVariations","colorVariations","useColorVariations","length","_react","createElement","__experimentalVStack","spacing","__experimentalGrid","columns","map","variation","index","~~default","~~key"],"sources":["@wordpress/edit-site/src/components/global-styles/variations/variations-color.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\t__experimentalGrid as Grid,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n */\nimport Variation from './variation';\nimport StylesPreviewColors from '../preview-colors';\nimport { useColorVariations } from '../hooks';\n\nexport default function ColorVariations() {\n\tconst colorVariations = useColorVariations();\n\n\tif ( ! colorVariations?.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Grid columns={ 3 }>\n\t\t\t\t{ colorVariations.map( ( variation, index ) => (\n\t\t\t\t\t<Variation key={ index } variation={ variation }>\n\t\t\t\t\t\t{ () => <StylesPreviewColors /> }\n\t\t\t\t\t</Variation>\n\t\t\t\t) ) }\n\t\t\t</Grid>\n\t\t</VStack>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAQA,IAAAC,UAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,cAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;~~AAbA~~;AACA;AACA;;AAMA;AACA;AACA;;~~AAKe~~,~~SAASK~~,eAAeA,~~CAAA~~,EAAG;~~EACzC~~,MAAMC,eAAe,GAAG,IAAAC,yBAAkB,EAAC,CAAC;EAE5C,IAAK,CAAED,eAAe,EAAEE,MAAM,EAAG;IAChC,OAAO,IAAI;EACZ;EAEA,OACC,IAAAC,MAAA,CAAAC,aAAA,~~EAACX~~,WAAA,~~CAAAY~~,oBAAM;IAACC,OAAO,EAAG;EAAG,~~GACpB~~,~~IAAAH~~,MAAA,CAAAC,aAAA,~~EAACX~~,WAAA,~~CAAAc~~,kBAAI;IAACC,OAAO,EAAG;~~EAAG~~,~~GAChBR~~,eAAe,~~CAACS~~,GAAG,CAAE,CAAEC,SAAS,EAAEC,KAAK,KACxC,~~IAAAR~~,MAAA,CAAAC,aAAA,~~EAACT~~,UAAA,~~CAAAiB~~,OAAS;~~IAACC~~,GAAG,~~EAAGF~~,KAAO;IAACD,SAAS,EAAGA;EAAW,GAC7C,MAAM,~~IAAAP~~,MAAA,CAAAC,aAAA,~~EAACP~~,cAAA,~~CAAAe~~,OAAmB,MAAE,CACpB,CACV,CACG,CACC,CAAC;AAEX"}
1	+ {"version":3,"names":["_components","require","_variation","_interopRequireDefault","_previewColors","_hooks","_subtitle","ColorVariations","title","gap","colorVariations","useColorVariations","length","_react","createElement","__experimentalVStack","spacing","default","level","__experimentalGrid","columns","map","variation","index","key"],"sources":["@wordpress/edit-site/src/components/global-styles/variations/variations-color.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\t__experimentalGrid as Grid,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n */\nimport Variation from './variation';\nimport StylesPreviewColors from '../preview-colors';\nimport { useColorVariations } from '../hooks';\nimport Subtitle from '../subtitle';\n\nexport default function ColorVariations( { title, gap = 2 } ) {\n\tconst colorVariations = useColorVariations();\n\n\tif ( ! colorVariations?.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }\n\t\t\t<Grid columns={ 3 } gap={ gap }>\n\t\t\t\t{ colorVariations.map( ( variation, index ) => (\n\t\t\t\t\t<Variation key={ index } variation={ variation }>\n\t\t\t\t\t\t{ () => <StylesPreviewColors /> }\n\t\t\t\t\t</Variation>\n\t\t\t\t) ) }\n\t\t\t</Grid>\n\t\t</VStack>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAQA,IAAAC,UAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,cAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,SAAA,GAAAH,sBAAA,CAAAF,OAAA;AAdA;AACA;AACA;;AAMA;AACA;AACA;;AAMe,SAASM,eAAeA,CAAE;EAAEC,KAAK;EAAEC,GAAG,GAAG;AAAE,CAAC,EAAG;EAC7D,MAAMC,eAAe,GAAG,IAAAC,yBAAkB,EAAC,CAAC;EAE5C,IAAK,CAAED,eAAe,EAAEE,MAAM,EAAG;IAChC,OAAO,IAAI;EACZ;EAEA,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACd,WAAA,CAAAe,oBAAM;IAACC,OAAO,EAAG;EAAG,GAClBR,KAAK,IAAI,IAAAK,MAAA,CAAAC,aAAA,EAACR,SAAA,CAAAW,OAAQ;IAACC,KAAK,EAAG;EAAG,GAAGV,KAAiB,CAAC,EACrD,IAAAK,MAAA,CAAAC,aAAA,EAACd,WAAA,CAAAmB,kBAAI;IAACC,OAAO,EAAG,CAAG;IAACX,GAAG,EAAGA;EAAK,GAC5BC,eAAe,CAACW,GAAG,CAAE,CAAEC,SAAS,EAAEC,KAAK,KACxC,IAAAV,MAAA,CAAAC,aAAA,EAACZ,UAAA,CAAAe,OAAS;IAACO,GAAG,EAAGD,KAAO;IAACD,SAAS,EAAGA;EAAW,GAC7C,MAAM,IAAAT,MAAA,CAAAC,aAAA,EAACV,cAAA,CAAAa,OAAmB,MAAE,CACpB,CACV,CACG,CACC,CAAC;AAEX"}

package/build/components/global-styles/variations/variations-typography.js CHANGED Viewed

@@ -11,6 +11,7 @@ var _hooks = require("../hooks");
 var _typographyExample = _interopRequireDefault(require("../typography-example"));
 var _previewIframe = _interopRequireDefault(require("../preview-iframe"));
 var _variation = _interopRequireDefault(require("./variation"));
+var _subtitle = _interopRequireDefault(require("../subtitle"));
 /**
  * WordPress dependencies
  */
@@ -19,15 +20,21 @@ var _variation = _interopRequireDefault(require("./variation"));
  * Internal dependencies
  */
-function TypographyVariations() {
+function TypographyVariations({
+  title,
+  gap = 2
+}) {
   const typographyVariations = (0, _hooks.useTypographyVariations)();
   if (!typographyVariations?.length) {
     return null;
   }
   return (0, _react.createElement)(_components.__experimentalVStack, {
     spacing: 3
-  }, (0, _react.createElement)(_components.__experimentalGrid, {
+  }, title && (0, _react.createElement)(_subtitle.default, {
+    level: 3
+  }, title), (0, _react.createElement)(_components.__experimentalGrid, {
     columns: 3,
+    gap: gap,
     className: "edit-site-global-styles-style-variations-container"
   }, typographyVariations && typographyVariations.length && typographyVariations.map((variation, index) => (0, _react.createElement)(_variation.default, {
     key: index,

package/build/components/global-styles/variations/variations-typography.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_components","require","_hooks","_typographyExample","_interopRequireDefault","_previewIframe","_variation","TypographyVariations","typographyVariations","useTypographyVariations","length","_react","createElement","__experimentalVStack","spacing","__experimentalGrid","columns","className","map","variation","index","~~default","~~key","isFocused","label","~~title","~~ratio","justify","style","height","overflow","fontSize"],"sources":["@wordpress/edit-site/src/components/global-styles/variations/variations-typography.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\t__experimentalGrid as Grid,\n\t__experimentalVStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n /\nimport { useTypographyVariations } from '../hooks';\nimport TypographyExample from '../typography-example';\nimport PreviewIframe from '../preview-iframe';\nimport Variation from './variation';\n\nexport default function TypographyVariations() {\n\tconst typographyVariations = useTypographyVariations();\n\n\tif ( ! typographyVariations?.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Grid\n\t\t\t\tcolumns={ 3 }\n\t\t\t\tclassName=\"edit-site-global-styles-style-variations-container\"\n\t\t\t>\n\t\t\t\t{ typographyVariations &&\n\t\t\t\t\ttypographyVariations.length &&\n\t\t\t\t\ttypographyVariations.map( ( variation, index ) => (\n\t\t\t\t\t\t<Variation key={ index } variation={ variation }>\n\t\t\t\t\t\t\t{ ( isFocused ) => (\n\t\t\t\t\t\t\t\t<PreviewIframe\n\t\t\t\t\t\t\t\t\tlabel={ variation?.title }\n\t\t\t\t\t\t\t\t\tisFocused={ isFocused }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\t\t\t\tkey={ key }\n\t\t\t\t\t\t\t\t\t\t\tspacing={ 10 ratio }\n\t\t\t\t\t\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\t\t\toverflow: 'hidden',\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\t\t<TypographyExample\n\t\t\t\t\t\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t\t\t\t\t\t\tfontSize={ 85 * ratio }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</PreviewIframe>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Variation>\n\t\t\t\t\t) ) }\n\t\t\t</Grid>\n\t\t</VStack>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AASA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,kBAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,cAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,UAAA,GAAAF,sBAAA,CAAAH,OAAA;~~AAfA~~;AACA;AACA;;AAOA;AACA;AACA;;~~AAMe~~,~~SAASM~~,oBAAoBA,~~CAAA~~,EAAG;~~EAC9C~~,MAAMC,oBAAoB,GAAG,IAAAC,8BAAuB,EAAC,CAAC;EAEtD,IAAK,CAAED,oBAAoB,EAAEE,MAAM,EAAG;IACrC,OAAO,IAAI;EACZ;EAEA,OACC,IAAAC,MAAA,CAAAC,aAAA,~~EAACZ~~,WAAA,~~CAAAa~~,oBAAM;IAACC,OAAO,EAAG;EAAG,~~GACpB~~,~~IAAAH~~,MAAA,CAAAC,aAAA,~~EAACZ~~,WAAA,~~CAAAe~~,kBAAI;IACJC,OAAO,EAAG,CAAG;~~IACbC~~,SAAS,EAAC;EAAoD,~~GAE5DT~~,oBAAoB,IACrBA,oBAAoB,CAACE,MAAM,IAC3BF,oBAAoB,~~CAACU~~,GAAG,CAAE,CAAEC,SAAS,EAAEC,KAAK,KAC3C,~~IAAAT~~,MAAA,CAAAC,aAAA,~~EAACN~~,UAAA,~~CAAAe~~,OAAS;~~IAACC~~,GAAG,~~EAAGF~~,KAAO;IAACD,SAAS,EAAGA;EAAW,~~GAC3CI~~,SAAS,IACZ,~~IAAAZ~~,MAAA,CAAAC,aAAA,~~EAACP~~,cAAA,~~CAAAgB~~,OAAa;~~IACbG~~,KAAK,~~EAAGL~~,SAAS,~~EAAEM~~,KAAO;~~IAC1BF~~,SAAS,EAAGA;EAAW,GAErB,CAAE;~~IAAEG~~,KAAK;~~IAAEJ~~;EAAI,CAAC,KACjB,~~IAAAX~~,MAAA,CAAAC,aAAA,~~EAACZ~~,WAAA,~~CAAAa~~,oBAAM;~~IACNS~~,GAAG,EAAGA,GAAK;~~IACXR~~,OAAO,EAAG,EAAE,GAAGY,KAAO;IACtBC,OAAO,EAAC,QAAQ;IAChBC,KAAK,EAAG;MACPC,MAAM,EAAE,MAAM;MACdC,QAAQ,EAAE;IACX;EAAG,GAEH,IAAAnB,MAAA,CAAAC,aAAA,~~EAACT~~,kBAAA,~~CAAAkB~~,OAAiB;~~IACjBF~~,SAAS,EAAGA,SAAW;~~IACvBY~~,QAAQ,EAAG,EAAE,GAAGL;EAAO,CACvB,CACM,CAEK,CAEN,CACV,CACE,CACC,CAAC;AAEX"}
1	+ {"version":3,"names":["_components","require","_hooks","_typographyExample","_interopRequireDefault","_previewIframe","_variation","_subtitle","TypographyVariations","title","gap","typographyVariations","useTypographyVariations","length","_react","createElement","__experimentalVStack","spacing","default","level","__experimentalGrid","columns","className","map","variation","index","key","isFocused","label","ratio","justify","style","height","overflow","fontSize"],"sources":["@wordpress/edit-site/src/components/global-styles/variations/variations-typography.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\t__experimentalGrid as Grid,\n\t__experimentalVStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n /\nimport { useTypographyVariations } from '../hooks';\nimport TypographyExample from '../typography-example';\nimport PreviewIframe from '../preview-iframe';\nimport Variation from './variation';\nimport Subtitle from '../subtitle';\n\nexport default function TypographyVariations( { title, gap = 2 } ) {\n\tconst typographyVariations = useTypographyVariations();\n\n\tif ( ! typographyVariations?.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }\n\t\t\t<Grid\n\t\t\t\tcolumns={ 3 }\n\t\t\t\tgap={ gap }\n\t\t\t\tclassName=\"edit-site-global-styles-style-variations-container\"\n\t\t\t>\n\t\t\t\t{ typographyVariations &&\n\t\t\t\t\ttypographyVariations.length &&\n\t\t\t\t\ttypographyVariations.map( ( variation, index ) => (\n\t\t\t\t\t\t<Variation key={ index } variation={ variation }>\n\t\t\t\t\t\t\t{ ( isFocused ) => (\n\t\t\t\t\t\t\t\t<PreviewIframe\n\t\t\t\t\t\t\t\t\tlabel={ variation?.title }\n\t\t\t\t\t\t\t\t\tisFocused={ isFocused }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\t\t\t\tkey={ key }\n\t\t\t\t\t\t\t\t\t\t\tspacing={ 10 ratio }\n\t\t\t\t\t\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\t\t\toverflow: 'hidden',\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\t\t<TypographyExample\n\t\t\t\t\t\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t\t\t\t\t\t\tfontSize={ 85 * ratio }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</PreviewIframe>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Variation>\n\t\t\t\t\t) ) }\n\t\t\t</Grid>\n\t\t</VStack>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AASA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,kBAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,cAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,UAAA,GAAAF,sBAAA,CAAAH,OAAA;AACA,IAAAM,SAAA,GAAAH,sBAAA,CAAAH,OAAA;AAhBA;AACA;AACA;;AAOA;AACA;AACA;;AAOe,SAASO,oBAAoBA,CAAE;EAAEC,KAAK;EAAEC,GAAG,GAAG;AAAE,CAAC,EAAG;EAClE,MAAMC,oBAAoB,GAAG,IAAAC,8BAAuB,EAAC,CAAC;EAEtD,IAAK,CAAED,oBAAoB,EAAEE,MAAM,EAAG;IACrC,OAAO,IAAI;EACZ;EAEA,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAgB,oBAAM;IAACC,OAAO,EAAG;EAAG,GAClBR,KAAK,IAAI,IAAAK,MAAA,CAAAC,aAAA,EAACR,SAAA,CAAAW,OAAQ;IAACC,KAAK,EAAG;EAAG,GAAGV,KAAiB,CAAC,EACrD,IAAAK,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAoB,kBAAI;IACJC,OAAO,EAAG,CAAG;IACbX,GAAG,EAAGA,GAAK;IACXY,SAAS,EAAC;EAAoD,GAE5DX,oBAAoB,IACrBA,oBAAoB,CAACE,MAAM,IAC3BF,oBAAoB,CAACY,GAAG,CAAE,CAAEC,SAAS,EAAEC,KAAK,KAC3C,IAAAX,MAAA,CAAAC,aAAA,EAACT,UAAA,CAAAY,OAAS;IAACQ,GAAG,EAAGD,KAAO;IAACD,SAAS,EAAGA;EAAW,GAC3CG,SAAS,IACZ,IAAAb,MAAA,CAAAC,aAAA,EAACV,cAAA,CAAAa,OAAa;IACbU,KAAK,EAAGJ,SAAS,EAAEf,KAAO;IAC1BkB,SAAS,EAAGA;EAAW,GAErB,CAAE;IAAEE,KAAK;IAAEH;EAAI,CAAC,KACjB,IAAAZ,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAgB,oBAAM;IACNU,GAAG,EAAGA,GAAK;IACXT,OAAO,EAAG,EAAE,GAAGY,KAAO;IACtBC,OAAO,EAAC,QAAQ;IAChBC,KAAK,EAAG;MACPC,MAAM,EAAE,MAAM;MACdC,QAAQ,EAAE;IACX;EAAG,GAEH,IAAAnB,MAAA,CAAAC,aAAA,EAACZ,kBAAA,CAAAe,OAAiB;IACjBM,SAAS,EAAGA,SAAW;IACvBU,QAAQ,EAAG,EAAE,GAAGL;EAAO,CACvB,CACM,CAEK,CAEN,CACV,CACE,CACC,CAAC;AAEX"}

package/build/components/keyboard-shortcut-help-modal/index.js CHANGED Viewed

@@ -111,6 +111,9 @@ function KeyboardShortcutHelpModal() {
   }), (0, _react.createElement)(ShortcutSection, {
     title: (0, _i18n.__)('Text formatting'),
     shortcuts: _config.textFormattingShortcuts
+  }), (0, _react.createElement)(ShortcutCategorySection, {
+    title: (0, _i18n.__)('List View shortcuts'),
+    categoryName: "list-view"
   }));
 }
 //# sourceMappingURL=index.js.map

package/build/components/keyboard-shortcut-help-modal/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_classnames","_interopRequireDefault","require","_components","_i18n","_keyboardShortcuts","_interface","_data","_config","_shortcut","_dynamicShortcut","KEYBOARD_SHORTCUT_HELP_MODAL_NAME","exports","ShortcutList","shortcuts","_react","createElement","className","role","map","shortcut","index","key","default","name","ShortcutSection","title","classnames","ShortcutCategorySection","categoryName","additionalShortcuts","categoryShortcuts","useSelect","select","keyboardShortcutsStore","getCategoryShortcuts","concat","KeyboardShortcutHelpModal","isModalActive","interfaceStore","closeModal","openModal","useDispatch","toggleModal","useShortcut","Modal","__","onRequestClose","keyCombination","character","description","ariaLabel","textFormattingShortcuts"],"sources":["@wordpress/edit-site/src/components/keyboard-shortcut-help-modal/index.js"],"sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { Modal } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tuseShortcut,\n\tstore as keyboardShortcutsStore,\n} from '@wordpress/keyboard-shortcuts';\nimport { store as interfaceStore } from '@wordpress/interface';\nimport { useSelect, useDispatch } from '@wordpress/data';\n\n/\n Internal dependencies\n /\nimport { textFormattingShortcuts } from './config';\nimport Shortcut from './shortcut';\nimport DynamicShortcut from './dynamic-shortcut';\n\nexport const KEYBOARD_SHORTCUT_HELP_MODAL_NAME =\n\t'edit-site/keyboard-shortcut-help';\n\nconst ShortcutList = ( { shortcuts } ) => (\n\t/\n\t * Disable reason: The `list` ARIA role is redundant but\n\t * Safari+VoiceOver won't announce the list otherwise.\n\t /\n\t/ eslint-disable jsx-a11y/no-redundant-roles /\n\t<ul\n\t\tclassName=\"edit-site-keyboard-shortcut-help-modal__shortcut-list\"\n\t\trole=\"list\"\n\t>\n\t\t{ shortcuts.map( ( shortcut, index ) => (\n\t\t\t<li\n\t\t\t\tclassName=\"edit-site-keyboard-shortcut-help-modal__shortcut\"\n\t\t\t\tkey={ index }\n\t\t\t>\n\t\t\t\t{ typeof shortcut === 'string' ? (\n\t\t\t\t\t<DynamicShortcut name={ shortcut } />\n\t\t\t\t) : (\n\t\t\t\t\t<Shortcut { ...shortcut } />\n\t\t\t\t) }\n\t\t\t</li>\n\t\t) ) }\n\t</ul>\n\t/ eslint-enable jsx-a11y/no-redundant-roles /\n);\n\nconst ShortcutSection = ( { title, shortcuts, className } ) => (\n\t<section\n\t\tclassName={ classnames(\n\t\t\t'edit-site-keyboard-shortcut-help-modal__section',\n\t\t\tclassName\n\t\t) }\n\t>\n\t\t{ !! title && (\n\t\t\t<h2 className=\"edit-site-keyboard-shortcut-help-modal__section-title\">\n\t\t\t\t{ title }\n\t\t\t</h2>\n\t\t) }\n\t\t<ShortcutList shortcuts={ shortcuts } />\n\t</section>\n);\n\nconst ShortcutCategorySection = ( {\n\ttitle,\n\tcategoryName,\n\tadditionalShortcuts = [],\n} ) => {\n\tconst categoryShortcuts = useSelect(\n\t\t( select ) => {\n\t\t\treturn select( keyboardShortcutsStore ).getCategoryShortcuts(\n\t\t\t\tcategoryName\n\t\t\t);\n\t\t},\n\t\t[ categoryName ]\n\t);\n\n\treturn (\n\t\t<ShortcutSection\n\t\t\ttitle={ title }\n\t\t\tshortcuts={ categoryShortcuts.concat( additionalShortcuts ) }\n\t\t/>\n\t);\n};\n\nexport default function KeyboardShortcutHelpModal() {\n\tconst isModalActive = useSelect( ( select ) =>\n\t\tselect( interfaceStore ).isModalActive(\n\t\t\tKEYBOARD_SHORTCUT_HELP_MODAL_NAME\n\t\t)\n\t);\n\tconst { closeModal, openModal } = useDispatch( interfaceStore );\n\tconst toggleModal = () =>\n\t\tisModalActive\n\t\t\t? closeModal()\n\t\t\t: openModal( KEYBOARD_SHORTCUT_HELP_MODAL_NAME );\n\tuseShortcut( 'core/edit-site/keyboard-shortcuts', toggleModal );\n\tif ( ! isModalActive ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"edit-site-keyboard-shortcut-help-modal\"\n\t\t\ttitle={ __( 'Keyboard shortcuts' ) }\n\t\t\tonRequestClose={ toggleModal }\n\t\t>\n\t\t\t<ShortcutSection\n\t\t\t\tclassName=\"edit-site-keyboard-shortcut-help-modal__main-shortcuts\"\n\t\t\t\tshortcuts={ [ 'core/edit-site/keyboard-shortcuts' ] }\n\t\t\t/>\n\t\t\t<ShortcutCategorySection\n\t\t\t\ttitle={ __( 'Global shortcuts' ) }\n\t\t\t\tcategoryName=\"global\"\n\t\t\t/>\n\n\t\t\t<ShortcutCategorySection\n\t\t\t\ttitle={ __( 'Selection shortcuts' ) }\n\t\t\t\tcategoryName=\"selection\"\n\t\t\t/>\n\n\t\t\t<ShortcutCategorySection\n\t\t\t\ttitle={ __( 'Block shortcuts' ) }\n\t\t\t\tcategoryName=\"block\"\n\t\t\t\tadditionalShortcuts={ [\n\t\t\t\t\t{\n\t\t\t\t\t\tkeyCombination: { character: '/' },\n\t\t\t\t\t\tdescription: __(\n\t\t\t\t\t\t\t'Change the block type after adding a new paragraph.'\n\t\t\t\t\t\t),\n\t\t\t\t\t\t/ translators: The forward-slash character. e.g. '/'. */\n\t\t\t\t\t\tariaLabel: __( 'Forward-slash' ),\n\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t/>\n\t\t\t<ShortcutSection\n\t\t\t\ttitle={ __( 'Text formatting' ) }\n\t\t\t\tshortcuts={ textFormattingShortcuts }\n\t\t\t/>\n\t\t</Modal>\n\t);\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["_classnames","_interopRequireDefault","require","_components","_i18n","_keyboardShortcuts","_interface","_data","_config","_shortcut","_dynamicShortcut","KEYBOARD_SHORTCUT_HELP_MODAL_NAME","exports","ShortcutList","shortcuts","_react","createElement","className","role","map","shortcut","index","key","default","name","ShortcutSection","title","classnames","ShortcutCategorySection","categoryName","additionalShortcuts","categoryShortcuts","useSelect","select","keyboardShortcutsStore","getCategoryShortcuts","concat","KeyboardShortcutHelpModal","isModalActive","interfaceStore","closeModal","openModal","useDispatch","toggleModal","useShortcut","Modal","__","onRequestClose","keyCombination","character","description","ariaLabel","textFormattingShortcuts"],"sources":["@wordpress/edit-site/src/components/keyboard-shortcut-help-modal/index.js"],"sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { Modal } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tuseShortcut,\n\tstore as keyboardShortcutsStore,\n} from '@wordpress/keyboard-shortcuts';\nimport { store as interfaceStore } from '@wordpress/interface';\nimport { useSelect, useDispatch } from '@wordpress/data';\n\n/\n Internal dependencies\n /\nimport { textFormattingShortcuts } from './config';\nimport Shortcut from './shortcut';\nimport DynamicShortcut from './dynamic-shortcut';\n\nexport const KEYBOARD_SHORTCUT_HELP_MODAL_NAME =\n\t'edit-site/keyboard-shortcut-help';\n\nconst ShortcutList = ( { shortcuts } ) => (\n\t/\n\t * Disable reason: The `list` ARIA role is redundant but\n\t * Safari+VoiceOver won't announce the list otherwise.\n\t /\n\t/ eslint-disable jsx-a11y/no-redundant-roles /\n\t<ul\n\t\tclassName=\"edit-site-keyboard-shortcut-help-modal__shortcut-list\"\n\t\trole=\"list\"\n\t>\n\t\t{ shortcuts.map( ( shortcut, index ) => (\n\t\t\t<li\n\t\t\t\tclassName=\"edit-site-keyboard-shortcut-help-modal__shortcut\"\n\t\t\t\tkey={ index }\n\t\t\t>\n\t\t\t\t{ typeof shortcut === 'string' ? (\n\t\t\t\t\t<DynamicShortcut name={ shortcut } />\n\t\t\t\t) : (\n\t\t\t\t\t<Shortcut { ...shortcut } />\n\t\t\t\t) }\n\t\t\t</li>\n\t\t) ) }\n\t</ul>\n\t/ eslint-enable jsx-a11y/no-redundant-roles /\n);\n\nconst ShortcutSection = ( { title, shortcuts, className } ) => (\n\t<section\n\t\tclassName={ classnames(\n\t\t\t'edit-site-keyboard-shortcut-help-modal__section',\n\t\t\tclassName\n\t\t) }\n\t>\n\t\t{ !! title && (\n\t\t\t<h2 className=\"edit-site-keyboard-shortcut-help-modal__section-title\">\n\t\t\t\t{ title }\n\t\t\t</h2>\n\t\t) }\n\t\t<ShortcutList shortcuts={ shortcuts } />\n\t</section>\n);\n\nconst ShortcutCategorySection = ( {\n\ttitle,\n\tcategoryName,\n\tadditionalShortcuts = [],\n} ) => {\n\tconst categoryShortcuts = useSelect(\n\t\t( select ) => {\n\t\t\treturn select( keyboardShortcutsStore ).getCategoryShortcuts(\n\t\t\t\tcategoryName\n\t\t\t);\n\t\t},\n\t\t[ categoryName ]\n\t);\n\n\treturn (\n\t\t<ShortcutSection\n\t\t\ttitle={ title }\n\t\t\tshortcuts={ categoryShortcuts.concat( additionalShortcuts ) }\n\t\t/>\n\t);\n};\n\nexport default function KeyboardShortcutHelpModal() {\n\tconst isModalActive = useSelect( ( select ) =>\n\t\tselect( interfaceStore ).isModalActive(\n\t\t\tKEYBOARD_SHORTCUT_HELP_MODAL_NAME\n\t\t)\n\t);\n\tconst { closeModal, openModal } = useDispatch( interfaceStore );\n\tconst toggleModal = () =>\n\t\tisModalActive\n\t\t\t? closeModal()\n\t\t\t: openModal( KEYBOARD_SHORTCUT_HELP_MODAL_NAME );\n\tuseShortcut( 'core/edit-site/keyboard-shortcuts', toggleModal );\n\tif ( ! isModalActive ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"edit-site-keyboard-shortcut-help-modal\"\n\t\t\ttitle={ __( 'Keyboard shortcuts' ) }\n\t\t\tonRequestClose={ toggleModal }\n\t\t>\n\t\t\t<ShortcutSection\n\t\t\t\tclassName=\"edit-site-keyboard-shortcut-help-modal__main-shortcuts\"\n\t\t\t\tshortcuts={ [ 'core/edit-site/keyboard-shortcuts' ] }\n\t\t\t/>\n\t\t\t<ShortcutCategorySection\n\t\t\t\ttitle={ __( 'Global shortcuts' ) }\n\t\t\t\tcategoryName=\"global\"\n\t\t\t/>\n\n\t\t\t<ShortcutCategorySection\n\t\t\t\ttitle={ __( 'Selection shortcuts' ) }\n\t\t\t\tcategoryName=\"selection\"\n\t\t\t/>\n\n\t\t\t<ShortcutCategorySection\n\t\t\t\ttitle={ __( 'Block shortcuts' ) }\n\t\t\t\tcategoryName=\"block\"\n\t\t\t\tadditionalShortcuts={ [\n\t\t\t\t\t{\n\t\t\t\t\t\tkeyCombination: { character: '/' },\n\t\t\t\t\t\tdescription: __(\n\t\t\t\t\t\t\t'Change the block type after adding a new paragraph.'\n\t\t\t\t\t\t),\n\t\t\t\t\t\t/ translators: The forward-slash character. e.g. '/'. */\n\t\t\t\t\t\tariaLabel: __( 'Forward-slash' ),\n\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t/>\n\t\t\t<ShortcutSection\n\t\t\t\ttitle={ __( 'Text formatting' ) }\n\t\t\t\tshortcuts={ textFormattingShortcuts }\n\t\t\t/>\n\t\t\t<ShortcutCategorySection\n\t\t\t\ttitle={ __( 'List View shortcuts' ) }\n\t\t\t\tcategoryName=\"list-view\"\n\t\t\t/>\n\t\t</Modal>\n\t);\n}\n"],"mappings":";;;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,kBAAA,GAAAH,OAAA;AAIA,IAAAI,UAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AAKA,IAAAM,OAAA,GAAAN,OAAA;AACA,IAAAO,SAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,gBAAA,GAAAT,sBAAA,CAAAC,OAAA;AAtBA;AACA;AACA;;AAGA;AACA;AACA;;AAUA;AACA;AACA;;AAKO,MAAMS,iCAAiC,GAAAC,OAAA,CAAAD,iCAAA,GAC7C,kCAAkC;AAEnC,MAAME,YAAY,GAAGA,CAAE;EAAEC;AAAU,CAAC;AACnC;AACD;AACA;AACA;AACC;AACA,IAAAC,MAAA,CAAAC,aAAA;EACCC,SAAS,EAAC,uDAAuD;EACjEC,IAAI,EAAC;AAAM,GAETJ,SAAS,CAACK,GAAG,CAAE,CAAEC,QAAQ,EAAEC,KAAK,KACjC,IAAAN,MAAA,CAAAC,aAAA;EACCC,SAAS,EAAC,kDAAkD;EAC5DK,GAAG,EAAGD;AAAO,GAEX,OAAOD,QAAQ,KAAK,QAAQ,GAC7B,IAAAL,MAAA,CAAAC,aAAA,EAACN,gBAAA,CAAAa,OAAe;EAACC,IAAI,EAAGJ;AAAU,CAAE,CAAC,GAErC,IAAAL,MAAA,CAAAC,aAAA,EAACP,SAAA,CAAAc,OAAQ;EAAA,GAAMH;AAAQ,CAAI,CAEzB,CACH,CACC;AACJ,+CACA;AAED,MAAMK,eAAe,GAAGA,CAAE;EAAEC,KAAK;EAAEZ,SAAS;EAAEG;AAAU,CAAC,KACxD,IAAAF,MAAA,CAAAC,aAAA;EACCC,SAAS,EAAG,IAAAU,mBAAU,EACrB,iDAAiD,EACjDV,SACD;AAAG,GAED,CAAC,CAAES,KAAK,IACT,IAAAX,MAAA,CAAAC,aAAA;EAAIC,SAAS,EAAC;AAAuD,GAClES,KACC,CACJ,EACD,IAAAX,MAAA,CAAAC,aAAA,EAACH,YAAY;EAACC,SAAS,EAAGA;AAAW,CAAE,CAC/B,CACT;AAED,MAAMc,uBAAuB,GAAGA,CAAE;EACjCF,KAAK;EACLG,YAAY;EACZC,mBAAmB,GAAG;AACvB,CAAC,KAAM;EACN,MAAMC,iBAAiB,GAAG,IAAAC,eAAS,EAChCC,MAAM,IAAM;IACb,OAAOA,MAAM,CAAEC,wBAAuB,CAAC,CAACC,oBAAoB,CAC3DN,YACD,CAAC;EACF,CAAC,EACD,CAAEA,YAAY,CACf,CAAC;EAED,OACC,IAAAd,MAAA,CAAAC,aAAA,EAACS,eAAe;IACfC,KAAK,EAAGA,KAAO;IACfZ,SAAS,EAAGiB,iBAAiB,CAACK,MAAM,CAAEN,mBAAoB;EAAG,CAC7D,CAAC;AAEJ,CAAC;AAEc,SAASO,yBAAyBA,CAAA,EAAG;EACnD,MAAMC,aAAa,GAAG,IAAAN,eAAS,EAAIC,MAAM,IACxCA,MAAM,CAAEM,gBAAe,CAAC,CAACD,aAAa,CACrC3B,iCACD,CACD,CAAC;EACD,MAAM;IAAE6B,UAAU;IAAEC;EAAU,CAAC,GAAG,IAAAC,iBAAW,EAAEH,gBAAe,CAAC;EAC/D,MAAMI,WAAW,GAAGA,CAAA,KACnBL,aAAa,GACVE,UAAU,CAAC,CAAC,GACZC,SAAS,CAAE9B,iCAAkC,CAAC;EAClD,IAAAiC,8BAAW,EAAE,mCAAmC,EAAED,WAAY,CAAC;EAC/D,IAAK,CAAEL,aAAa,EAAG;IACtB,OAAO,IAAI;EACZ;EACA,OACC,IAAAvB,MAAA,CAAAC,aAAA,EAACb,WAAA,CAAA0C,KAAK;IACL5B,SAAS,EAAC,wCAAwC;IAClDS,KAAK,EAAG,IAAAoB,QAAE,EAAE,oBAAqB,CAAG;IACpCC,cAAc,EAAGJ;EAAa,GAE9B,IAAA5B,MAAA,CAAAC,aAAA,EAACS,eAAe;IACfR,SAAS,EAAC,wDAAwD;IAClEH,SAAS,EAAG,CAAE,mCAAmC;EAAI,CACrD,CAAC,EACF,IAAAC,MAAA,CAAAC,aAAA,EAACY,uBAAuB;IACvBF,KAAK,EAAG,IAAAoB,QAAE,EAAE,kBAAmB,CAAG;IAClCjB,YAAY,EAAC;EAAQ,CACrB,CAAC,EAEF,IAAAd,MAAA,CAAAC,aAAA,EAACY,uBAAuB;IACvBF,KAAK,EAAG,IAAAoB,QAAE,EAAE,qBAAsB,CAAG;IACrCjB,YAAY,EAAC;EAAW,CACxB,CAAC,EAEF,IAAAd,MAAA,CAAAC,aAAA,EAACY,uBAAuB;IACvBF,KAAK,EAAG,IAAAoB,QAAE,EAAE,iBAAkB,CAAG;IACjCjB,YAAY,EAAC,OAAO;IACpBC,mBAAmB,EAAG,CACrB;MACCkB,cAAc,EAAE;QAAEC,SAAS,EAAE;MAAI,CAAC;MAClCC,WAAW,EAAE,IAAAJ,QAAE,EACd,qDACD,CAAC;MACD;MACAK,SAAS,EAAE,IAAAL,QAAE,EAAE,eAAgB;IAChC,CAAC;EACC,CACH,CAAC,EACF,IAAA/B,MAAA,CAAAC,aAAA,EAACS,eAAe;IACfC,KAAK,EAAG,IAAAoB,QAAE,EAAE,iBAAkB,CAAG;IACjChC,SAAS,EAAGsC;EAAyB,CACrC,CAAC,EACF,IAAArC,MAAA,CAAAC,aAAA,EAACY,uBAAuB;IACvBF,KAAK,EAAG,IAAAoB,QAAE,EAAE,qBAAsB,CAAG;IACrCjB,YAAY,EAAC;EAAW,CACxB,CACK,CAAC;AAEV"}

package/build/components/layout/animation.js ADDED Viewed

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _web = require("@react-spring/web");
+var _element = require("@wordpress/element");
+/**
+ * External dependencies
+ */
+/**
+ * WordPress dependencies
+ */
+function getAbsolutePosition(element) {
+  return {
+    top: element.offsetTop,
+    left: element.offsetLeft
+  };
+}
+const ANIMATION_DURATION = 300;
+/**
+ * Hook used to compute the styles required to move a div into a new position.
+ *
+ * The way this animation works is the following:
+ *  - It first renders the element as if there was no animation.
+ *  - It takes a snapshot of the position of the block to use it
+ *    as a destination point for the animation.
+ *  - It restores the element to the previous position using a CSS transform
+ *  - It uses the "resetAnimation" flag to reset the animation
+ *    from the beginning in order to animate to the new destination point.
+ *
+ * @param {Object} $1                          Options
+ * @param {*}      $1.triggerAnimationOnChange Variable used to trigger the animation if it changes.
+ */
+function useMovingAnimation({
+  triggerAnimationOnChange
+}) {
+  const ref = (0, _element.useRef)();
+  // Whenever the trigger changes, we need to take a snapshot of the current
+  // position of the block to use it as a destination point for the animation.
+  const {
+    previous,
+    prevRect
+  } = (0, _element.useMemo)(() => ({
+    previous: ref.current && getAbsolutePosition(ref.current),
+    prevRect: ref.current && ref.current.getBoundingClientRect()
+  }),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [triggerAnimationOnChange]);
+  (0, _element.useLayoutEffect)(() => {
+    if (!previous || !ref.current) {
+      return;
+    }
+    // We disable the animation if the user has a preference for reduced
+    // motion.
+    const disableAnimation = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (disableAnimation) {
+      return;
+    }
+    const controller = new _web.Controller({
+      x: 0,
+      y: 0,
+      width: prevRect.width,
+      height: prevRect.height,
+      config: {
+        duration: ANIMATION_DURATION
+      },
+      onChange({
+        value
+      }) {
+        if (!ref.current) {
+          return;
+        }
+        let {
+          x,
+          y,
+          width,
+          height
+        } = value;
+        x = Math.round(x);
+        y = Math.round(y);
+        width = Math.round(width);
+        height = Math.round(height);
+        const finishedMoving = x === 0 && y === 0;
+        ref.current.style.transformOrigin = 'center center';
+        ref.current.style.transform = finishedMoving ? null // Set to `null` to explicitly remove the transform.
+        : `translate3d(${x}px,${y}px,0)`;
+        ref.current.style.width = finishedMoving ? null : `${width}px`;
+        ref.current.style.height = finishedMoving ? null : `${height}px`;
+      }
+    });
+    ref.current.style.transform = undefined;
+    const destination = ref.current.getBoundingClientRect();
+    const x = Math.round(prevRect.left - destination.left);
+    const y = Math.round(prevRect.top - destination.top);
+    const width = destination.width;
+    const height = destination.height;
+    controller.start({
+      x: 0,
+      y: 0,
+      width,
+      height,
+      from: {
+        x,
+        y,
+        width: prevRect.width,
+        height: prevRect.height
+      }
+    });
+    return () => {
+      controller.stop();
+      controller.set({
+        x: 0,
+        y: 0,
+        width: prevRect.width,
+        height: prevRect.height
+      });
+    };
+  }, [previous, prevRect]);
+  return ref;
+}
+var _default = exports.default = useMovingAnimation;
+//# sourceMappingURL=animation.js.map