@wordpress/edit-site 5.9.0 → 5.11.0

package/build/components/editor-canvas-container/index.js

@@ -1,10 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getEditorCanvasContainerTitle = getEditorCanvasContainerTitle;
+exports.useHasEditorCanvasContainer = useHasEditorCanvasContainer;
 
 var _element = require("@wordpress/element");
 
@@ -24,6 +27,8 @@ var _privateApis = require("../../private-apis");
 
 var _store = require("../../store");
 
+var _resizableEditor = _interopRequireDefault(require("../block-editor/resizable-editor"));
+
 /**
  * WordPress dependencies
  */
@@ -44,6 +49,9 @@ function getEditorCanvasContainerTitle(view) {
     case 'style-book':
       return (0, _i18n.__)('Style Book');
 
+    case 'global-styles-revisions':
+      return (0, _i18n.__)('Global styles revisions');
+
     default:
       return '';
   }
@@ -55,6 +63,7 @@ const {
 } = (0, _privateApis.unlock)(_components.privateApis);
 const SLOT_FILL_NAME = 'EditSiteEditorCanvasContainerSlot';
 const {
+  privateKey,
   Slot: EditorCanvasContainerSlot,
   Fill: EditorCanvasContainerFill
 } = createPrivateSlotFill(SLOT_FILL_NAME);
@@ -63,7 +72,8 @@ function EditorCanvasContainer(_ref) {
   let {
     children,
     closeButtonLabel,
-    onClose = () => {}
+    onClose,
+    enableResizing = false
   } = _ref;
   const editorCanvasContainerView = (0, _data.useSelect)(select => (0, _privateApis.unlock)(select(_store.store)).getEditorCanvasContainerView(), []);
   const [isClosed, setIsClosed] = (0, _element.useState)(false);
@@ -75,7 +85,10 @@ function EditorCanvasContainer(_ref) {
   const title = (0, _element.useMemo)(() => getEditorCanvasContainerTitle(editorCanvasContainerView), [editorCanvasContainerView]);
 
   function onCloseContainer() {
-    onClose();
+    if (typeof onClose === 'function') {
+      onClose();
+    }
+
     setEditorCanvasContainerView(undefined);
     setIsClosed(true);
   }
@@ -97,18 +110,26 @@ function EditorCanvasContainer(_ref) {
     return null;
   }
 
-  return (0, _element.createElement)(EditorCanvasContainerFill, null, (0, _element.createElement)("section", {
+  const shouldShowCloseButton = onClose || closeButtonLabel;
+  return (0, _element.createElement)(EditorCanvasContainerFill, null, (0, _element.createElement)(_resizableEditor.default, {
+    enableResizing: enableResizing
+  }, (0, _element.createElement)("section", {
     className: "edit-site-editor-canvas-container",
-    ref: focusOnMountRef,
+    ref: shouldShowCloseButton ? focusOnMountRef : null,
     onKeyDown: closeOnEscape,
     "aria-label": title
-  }, (0, _element.createElement)(_components.Button, {
+  }, shouldShowCloseButton && (0, _element.createElement)(_components.Button, {
     className: "edit-site-editor-canvas-container__close-button",
     icon: _icons.closeSmall,
     label: closeButtonLabel || (0, _i18n.__)('Close'),
     onClick: onCloseContainer,
     showTooltip: false
-  }), childrenWithProps));
+  }), childrenWithProps)));
+}
+
+function useHasEditorCanvasContainer() {
+  const fills = (0, _components.__experimentalUseSlotFills)(privateKey);
+  return !!(fills !== null && fills !== void 0 && fills.length);
 }
 
 EditorCanvasContainer.Slot = EditorCanvasContainerSlot;

package/build/components/editor-canvas-container/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/editor-canvas-container/index.js"],"names":["getEditorCanvasContainerTitle","view","createPrivateSlotFill","componentsPrivateApis","SLOT_FILL_NAME","Slot","EditorCanvasContainerSlot","Fill","EditorCanvasContainerFill","EditorCanvasContainer","children","closeButtonLabel","onClose","editorCanvasContainerView","select","editSiteStore","getEditorCanvasContainerView","isClosed","setIsClosed","setEditorCanvasContainerView","focusOnMountRef","sectionFocusReturnRef","title","onCloseContainer","undefined","closeOnEscape","event","keyCode","ESCAPE","defaultPrevented","preventDefault","childrenWithProps","Array","isArray","Children","map","child","index","ref","closeSmall"],"mappings":";;;;;;;;AAGA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AAlBA;AACA;AACA;;AAYA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,6BAAT,CAAwCC,IAAxC,EAA+C;AACrD,UAASA,IAAT;AACC,SAAK,YAAL;AACC,aAAO,cAAI,YAAJ,CAAP;;AACD;AACC,aAAO,EAAP;AAJF;AAMA,C,CAED;;;AACA,MAAM;AAAEC,EAAAA;AAAF,IAA4B,yBAAQC,uBAAR,CAAlC;AACA,MAAMC,cAAc,GAAG,mCAAvB;AACA,MAAM;AAAEC,EAAAA,IAAI,EAAEC,yBAAR;AAAmCC,EAAAA,IAAI,EAAEC;AAAzC,IACLN,qBAAqB,CAAEE,cAAF,CADtB;;AAGA,SAASK,qBAAT,OAII;AAAA,MAJ4B;AAC/BC,IAAAA,QAD+B;AAE/BC,IAAAA,gBAF+B;AAG/BC,IAAAA,OAAO,GAAG,MAAM,CAAE;AAHa,GAI5B;AACH,QAAMC,yBAAyB,GAAG,qBAC/BC,MAAF,IACC,yBAAQA,MAAM,CAAEC,YAAF,CAAd,EAAkCC,4BAAlC,EAFgC,EAGjC,EAHiC,CAAlC;AAKA,QAAM,CAAEC,QAAF,EAAYC,WAAZ,IAA4B,uBAAU,KAAV,CAAlC;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAmC,yBACxC,uBAAaJ,YAAb,CADwC,CAAzC;AAGA,QAAMK,eAAe,GAAG,8BAAiB,cAAjB,CAAxB;AACA,QAAMC,qBAAqB,GAAG,8BAA9B;AACA,QAAMC,KAAK,GAAG,sBACb,MAAMtB,6BAA6B,CAAEa,yBAAF,CADtB,EAEb,CAAEA,yBAAF,CAFa,CAAd;;AAIA,WAASU,gBAAT,GAA4B;AAC3BX,IAAAA,OAAO;AACPO,IAAAA,4BAA4B,CAAEK,SAAF,CAA5B;AACAN,IAAAA,WAAW,CAAE,IAAF,CAAX;AACA;;AAED,WAASO,aAAT,CAAwBC,KAAxB,EAAgC;AAC/B,QAAKA,KAAK,CAACC,OAAN,KAAkBC,gBAAlB,IAA4B,CAAEF,KAAK,CAACG,gBAAzC,EAA4D;AAC3DH,MAAAA,KAAK,CAACI,cAAN;AACAP,MAAAA,gBAAgB;AAChB;AACD;;AAED,QAAMQ,iBAAiB,GAAGC,KAAK,CAACC,OAAN,CAAevB,QAAf,IACvBwB,kBAASC,GAAT,CAAczB,QAAd,EAAwB,CAAE0B,KAAF,EAASC,KAAT,KACxBA,KAAK,KAAK,CAAV,GACG,2BAAcD,KAAd,EAAqB;AACrBE,IAAAA,GAAG,EAAEjB;AADgB,GAArB,CADH,GAIGe,KALH,CADuB,GAQvB,2BAAc1B,QAAd,EAAwB;AACxB4B,IAAAA,GAAG,EAAEjB;AADmB,GAAxB,CARH;;AAYA,MAAKJ,QAAL,EAAgB;AACf,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,yBAAD,QAEC;AACC,IAAA,SAAS,EAAC,mCADX;AAEC,IAAA,GAAG,EAAGG,eAFP;AAGC,IAAA,SAAS,EAAGK,aAHb;AAIC,kBAAaH;AAJd,KAMC,4BAAC,kBAAD;AACC,IAAA,SAAS,EAAC,iDADX;AAEC,IAAA,IAAI,EAAGiB,iBAFR;AAGC,IAAA,KAAK,EAAG5B,gBAAgB,IAAI,cAAI,OAAJ,CAH7B;AAIC,IAAA,OAAO,EAAGY,gBAJX;AAKC,IAAA,WAAW,EAAG;AALf,IAND,EAaGQ,iBAbH,CAFD,CADD;AAoBA;;AAEDtB,qBAAqB,CAACJ,IAAtB,GAA6BC,yBAA7B;eACeG,qB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Children, cloneElement, useState, useMemo } from '@wordpress/element';\nimport {\n\tButton,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { ESCAPE } from '@wordpress/keycodes';\nimport { __ } from '@wordpress/i18n';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { closeSmall } from '@wordpress/icons';\nimport { useFocusOnMount, useFocusReturn } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\nimport { store as editSiteStore } from '../../store';\n\n/**\n * Returns a translated string for the title of the editor canvas container.\n *\n * @param {string} view Editor canvas container view.\n *\n * @return {string} Translated string corresponding to value of view. Default is ''.\n */\nexport function getEditorCanvasContainerTitle( view ) {\n\tswitch ( view ) {\n\t\tcase 'style-book':\n\t\t\treturn __( 'Style Book' );\n\t\tdefault:\n\t\t\treturn '';\n\t}\n}\n\n// Creates a private slot fill.\nconst { createPrivateSlotFill } = unlock( componentsPrivateApis );\nconst SLOT_FILL_NAME = 'EditSiteEditorCanvasContainerSlot';\nconst { Slot: EditorCanvasContainerSlot, Fill: EditorCanvasContainerFill } =\n\tcreatePrivateSlotFill( SLOT_FILL_NAME );\n\nfunction EditorCanvasContainer( {\n\tchildren,\n\tcloseButtonLabel,\n\tonClose = () => {},\n} ) {\n\tconst editorCanvasContainerView = useSelect(\n\t\t( select ) =>\n\t\t\tunlock( select( editSiteStore ) ).getEditorCanvasContainerView(),\n\t\t[]\n\t);\n\tconst [ isClosed, setIsClosed ] = useState( false );\n\tconst { setEditorCanvasContainerView } = unlock(\n\t\tuseDispatch( editSiteStore )\n\t);\n\tconst focusOnMountRef = useFocusOnMount( 'firstElement' );\n\tconst sectionFocusReturnRef = useFocusReturn();\n\tconst title = useMemo(\n\t\t() => getEditorCanvasContainerTitle( editorCanvasContainerView ),\n\t\t[ editorCanvasContainerView ]\n\t);\n\tfunction onCloseContainer() {\n\t\tonClose();\n\t\tsetEditorCanvasContainerView( undefined );\n\t\tsetIsClosed( true );\n\t}\n\n\tfunction closeOnEscape( event ) {\n\t\tif ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {\n\t\t\tevent.preventDefault();\n\t\t\tonCloseContainer();\n\t\t}\n\t}\n\n\tconst childrenWithProps = Array.isArray( children )\n\t\t? Children.map( children, ( child, index ) =>\n\t\t\t\tindex === 0\n\t\t\t\t\t? cloneElement( child, {\n\t\t\t\t\t\t\tref: sectionFocusReturnRef,\n\t\t\t\t\t  } )\n\t\t\t\t\t: child\n\t\t  )\n\t\t: cloneElement( children, {\n\t\t\t\tref: sectionFocusReturnRef,\n\t\t  } );\n\n\tif ( isClosed ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<EditorCanvasContainerFill>\n\t\t\t{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }\n\t\t\t<section\n\t\t\t\tclassName=\"edit-site-editor-canvas-container\"\n\t\t\t\tref={ focusOnMountRef }\n\t\t\t\tonKeyDown={ closeOnEscape }\n\t\t\t\taria-label={ title }\n\t\t\t>\n\t\t\t\t<Button\n\t\t\t\t\tclassName=\"edit-site-editor-canvas-container__close-button\"\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ closeButtonLabel || __( 'Close' ) }\n\t\t\t\t\tonClick={ onCloseContainer }\n\t\t\t\t\tshowTooltip={ false }\n\t\t\t\t/>\n\t\t\t\t{ childrenWithProps }\n\t\t\t</section>\n\t\t</EditorCanvasContainerFill>\n\t);\n}\n\nEditorCanvasContainer.Slot = EditorCanvasContainerSlot;\nexport default EditorCanvasContainer;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/editor-canvas-container/index.js"],"names":["getEditorCanvasContainerTitle","view","createPrivateSlotFill","componentsPrivateApis","SLOT_FILL_NAME","privateKey","Slot","EditorCanvasContainerSlot","Fill","EditorCanvasContainerFill","EditorCanvasContainer","children","closeButtonLabel","onClose","enableResizing","editorCanvasContainerView","select","editSiteStore","getEditorCanvasContainerView","isClosed","setIsClosed","setEditorCanvasContainerView","focusOnMountRef","sectionFocusReturnRef","title","onCloseContainer","undefined","closeOnEscape","event","keyCode","ESCAPE","defaultPrevented","preventDefault","childrenWithProps","Array","isArray","Children","map","child","index","ref","shouldShowCloseButton","closeSmall","useHasEditorCanvasContainer","fills","length"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AApBA;AACA;AACA;;AAaA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,6BAAT,CAAwCC,IAAxC,EAA+C;AAC9C,UAASA,IAAT;AACC,SAAK,YAAL;AACC,aAAO,cAAI,YAAJ,CAAP;;AACD,SAAK,yBAAL;AACC,aAAO,cAAI,yBAAJ,CAAP;;AACD;AACC,aAAO,EAAP;AANF;AAQA,C,CAED;;;AACA,MAAM;AAAEC,EAAAA;AAAF,IAA4B,yBAAQC,uBAAR,CAAlC;AACA,MAAMC,cAAc,GAAG,mCAAvB;AACA,MAAM;AACLC,EAAAA,UADK;AAELC,EAAAA,IAAI,EAAEC,yBAFD;AAGLC,EAAAA,IAAI,EAAEC;AAHD,IAIFP,qBAAqB,CAAEE,cAAF,CAJzB;;AAMA,SAASM,qBAAT,OAKI;AAAA,MAL4B;AAC/BC,IAAAA,QAD+B;AAE/BC,IAAAA,gBAF+B;AAG/BC,IAAAA,OAH+B;AAI/BC,IAAAA,cAAc,GAAG;AAJc,GAK5B;AACH,QAAMC,yBAAyB,GAAG,qBAC/BC,MAAF,IACC,yBAAQA,MAAM,CAAEC,YAAF,CAAd,EAAkCC,4BAAlC,EAFgC,EAGjC,EAHiC,CAAlC;AAKA,QAAM,CAAEC,QAAF,EAAYC,WAAZ,IAA4B,uBAAU,KAAV,CAAlC;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAmC,yBACxC,uBAAaJ,YAAb,CADwC,CAAzC;AAGA,QAAMK,eAAe,GAAG,8BAAiB,cAAjB,CAAxB;AACA,QAAMC,qBAAqB,GAAG,8BAA9B;AACA,QAAMC,KAAK,GAAG,sBACb,MAAMxB,6BAA6B,CAAEe,yBAAF,CADtB,EAEb,CAAEA,yBAAF,CAFa,CAAd;;AAKA,WAASU,gBAAT,GAA4B;AAC3B,QAAK,OAAOZ,OAAP,KAAmB,UAAxB,EAAqC;AACpCA,MAAAA,OAAO;AACP;;AACDQ,IAAAA,4BAA4B,CAAEK,SAAF,CAA5B;AACAN,IAAAA,WAAW,CAAE,IAAF,CAAX;AACA;;AAED,WAASO,aAAT,CAAwBC,KAAxB,EAAgC;AAC/B,QAAKA,KAAK,CAACC,OAAN,KAAkBC,gBAAlB,IAA4B,CAAEF,KAAK,CAACG,gBAAzC,EAA4D;AAC3DH,MAAAA,KAAK,CAACI,cAAN;AACAP,MAAAA,gBAAgB;AAChB;AACD;;AAED,QAAMQ,iBAAiB,GAAGC,KAAK,CAACC,OAAN,CAAexB,QAAf,IACvByB,kBAASC,GAAT,CAAc1B,QAAd,EAAwB,CAAE2B,KAAF,EAASC,KAAT,KACxBA,KAAK,KAAK,CAAV,GACG,2BAAcD,KAAd,EAAqB;AACrBE,IAAAA,GAAG,EAAEjB;AADgB,GAArB,CADH,GAIGe,KALH,CADuB,GAQvB,2BAAc3B,QAAd,EAAwB;AACxB6B,IAAAA,GAAG,EAAEjB;AADmB,GAAxB,CARH;;AAYA,MAAKJ,QAAL,EAAgB;AACf,WAAO,IAAP;AACA;;AAED,QAAMsB,qBAAqB,GAAG5B,OAAO,IAAID,gBAAzC;AAEA,SACC,4BAAC,yBAAD,QACC,4BAAC,wBAAD;AAAiB,IAAA,cAAc,EAAGE;AAAlC,KAEC;AACC,IAAA,SAAS,EAAC,mCADX;AAEC,IAAA,GAAG,EAAG2B,qBAAqB,GAAGnB,eAAH,GAAqB,IAFjD;AAGC,IAAA,SAAS,EAAGK,aAHb;AAIC,kBAAaH;AAJd,KAMGiB,qBAAqB,IACtB,4BAAC,kBAAD;AACC,IAAA,SAAS,EAAC,iDADX;AAEC,IAAA,IAAI,EAAGC,iBAFR;AAGC,IAAA,KAAK,EAAG9B,gBAAgB,IAAI,cAAI,OAAJ,CAH7B;AAIC,IAAA,OAAO,EAAGa,gBAJX;AAKC,IAAA,WAAW,EAAG;AALf,IAPF,EAeGQ,iBAfH,CAFD,CADD,CADD;AAwBA;;AACD,SAASU,2BAAT,GAAuC;AACtC,QAAMC,KAAK,GAAG,4CAAcvC,UAAd,CAAd;AACA,SAAO,CAAC,EAAEuC,KAAF,aAAEA,KAAF,eAAEA,KAAK,CAAEC,MAAT,CAAR;AACA;;AAEDnC,qBAAqB,CAACJ,IAAtB,GAA6BC,yBAA7B;eACeG,qB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Children, cloneElement, useState, useMemo } from '@wordpress/element';\nimport {\n\tButton,\n\tprivateApis as componentsPrivateApis,\n\t__experimentalUseSlotFills as useSlotFills,\n} from '@wordpress/components';\nimport { ESCAPE } from '@wordpress/keycodes';\nimport { __ } from '@wordpress/i18n';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { closeSmall } from '@wordpress/icons';\nimport { useFocusOnMount, useFocusReturn } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\nimport { store as editSiteStore } from '../../store';\nimport ResizableEditor from '../block-editor/resizable-editor';\n\n/**\n * Returns a translated string for the title of the editor canvas container.\n *\n * @param {string} view Editor canvas container view.\n *\n * @return {string} Translated string corresponding to value of view. Default is ''.\n */\nfunction getEditorCanvasContainerTitle( view ) {\n\tswitch ( view ) {\n\t\tcase 'style-book':\n\t\t\treturn __( 'Style Book' );\n\t\tcase 'global-styles-revisions':\n\t\t\treturn __( 'Global styles revisions' );\n\t\tdefault:\n\t\t\treturn '';\n\t}\n}\n\n// Creates a private slot fill.\nconst { createPrivateSlotFill } = unlock( componentsPrivateApis );\nconst SLOT_FILL_NAME = 'EditSiteEditorCanvasContainerSlot';\nconst {\n\tprivateKey,\n\tSlot: EditorCanvasContainerSlot,\n\tFill: EditorCanvasContainerFill,\n} = createPrivateSlotFill( SLOT_FILL_NAME );\n\nfunction EditorCanvasContainer( {\n\tchildren,\n\tcloseButtonLabel,\n\tonClose,\n\tenableResizing = false,\n} ) {\n\tconst editorCanvasContainerView = useSelect(\n\t\t( select ) =>\n\t\t\tunlock( select( editSiteStore ) ).getEditorCanvasContainerView(),\n\t\t[]\n\t);\n\tconst [ isClosed, setIsClosed ] = useState( false );\n\tconst { setEditorCanvasContainerView } = unlock(\n\t\tuseDispatch( editSiteStore )\n\t);\n\tconst focusOnMountRef = useFocusOnMount( 'firstElement' );\n\tconst sectionFocusReturnRef = useFocusReturn();\n\tconst title = useMemo(\n\t\t() => getEditorCanvasContainerTitle( editorCanvasContainerView ),\n\t\t[ editorCanvasContainerView ]\n\t);\n\n\tfunction onCloseContainer() {\n\t\tif ( typeof onClose === 'function' ) {\n\t\t\tonClose();\n\t\t}\n\t\tsetEditorCanvasContainerView( undefined );\n\t\tsetIsClosed( true );\n\t}\n\n\tfunction closeOnEscape( event ) {\n\t\tif ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {\n\t\t\tevent.preventDefault();\n\t\t\tonCloseContainer();\n\t\t}\n\t}\n\n\tconst childrenWithProps = Array.isArray( children )\n\t\t? Children.map( children, ( child, index ) =>\n\t\t\t\tindex === 0\n\t\t\t\t\t? cloneElement( child, {\n\t\t\t\t\t\t\tref: sectionFocusReturnRef,\n\t\t\t\t\t  } )\n\t\t\t\t\t: child\n\t\t  )\n\t\t: cloneElement( children, {\n\t\t\t\tref: sectionFocusReturnRef,\n\t\t  } );\n\n\tif ( isClosed ) {\n\t\treturn null;\n\t}\n\n\tconst shouldShowCloseButton = onClose || closeButtonLabel;\n\n\treturn (\n\t\t<EditorCanvasContainerFill>\n\t\t\t<ResizableEditor enableResizing={ enableResizing }>\n\t\t\t\t{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }\n\t\t\t\t<section\n\t\t\t\t\tclassName=\"edit-site-editor-canvas-container\"\n\t\t\t\t\tref={ shouldShowCloseButton ? focusOnMountRef : null }\n\t\t\t\t\tonKeyDown={ closeOnEscape }\n\t\t\t\t\taria-label={ title }\n\t\t\t\t>\n\t\t\t\t\t{ shouldShowCloseButton && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"edit-site-editor-canvas-container__close-button\"\n\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\tlabel={ closeButtonLabel || __( 'Close' ) }\n\t\t\t\t\t\t\tonClick={ onCloseContainer }\n\t\t\t\t\t\t\tshowTooltip={ false }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ childrenWithProps }\n\t\t\t\t</section>\n\t\t\t</ResizableEditor>\n\t\t</EditorCanvasContainerFill>\n\t);\n}\nfunction useHasEditorCanvasContainer() {\n\tconst fills = useSlotFills( privateKey );\n\treturn !! fills?.length;\n}\n\nEditorCanvasContainer.Slot = EditorCanvasContainerSlot;\nexport default EditorCanvasContainer;\nexport { useHasEditorCanvasContainer, getEditorCanvasContainerTitle };\n"]}

package/build/components/global-styles/block-preview-panel.js

@@ -26,7 +26,7 @@ const BlockPreviewPanel = _ref => {
   const blockExample = (_getBlockType = (0, _blocks.getBlockType)(name)) === null || _getBlockType === void 0 ? void 0 : _getBlockType.example;
   const blockExampleWithVariation = { ...blockExample,
     attributes: { ...(blockExample === null || blockExample === void 0 ? void 0 : blockExample.attributes),
-      className: variation
+      className: 'is-style-' + variation
     }
   };
   const blocks = blockExample && (0, _blocks.getBlockFromExample)(name, variation ? blockExampleWithVariation : blockExample);

package/build/components/global-styles/block-preview-panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/block-preview-panel.js"],"names":["BlockPreviewPanel","name","variation","blockExample","example","blockExampleWithVariation","attributes","className","blocks","viewportWidth","previewHeight","maxHeight","boxSizing","css"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;AAKA,MAAMA,iBAAiB,GAAG,QAAgC;AAAA;;AAAA,MAA9B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,SAAS,GAAG;AAApB,GAA8B;AACzD,QAAMC,YAAY,oBAAG,0BAAcF,IAAd,CAAH,kDAAG,cAAsBG,OAA3C;AACA,QAAMC,yBAAyB,GAAG,EACjC,GAAGF,YAD8B;AAEjCG,IAAAA,UAAU,EAAE,EACX,IAAGH,YAAH,aAAGA,YAAH,uBAAGA,YAAY,CAAEG,UAAjB,CADW;AAEXC,MAAAA,SAAS,EAAEL;AAFA;AAFqB,GAAlC;AAOA,QAAMM,MAAM,GACXL,YAAY,IACZ,iCACCF,IADD,EAECC,SAAS,GAAGG,yBAAH,GAA+BF,YAFzC,CAFD;AAMA,QAAMM,aAAa,GAAG,CAAAN,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY,CAAEM,aAAd,KAA+B,IAArD;AACA,QAAMC,aAAa,GAAG,OAAtB;AAEA,SAAO,CAAEP,YAAF,GAAiB,IAAjB,GACN,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG,CAAlB;AAAsB,IAAA,YAAY,EAAG;AAArC,KACC;AACC,IAAA,SAAS,EAAC,8CADX;AAEC,IAAA,KAAK,EAAG;AAAEQ,MAAAA,SAAS,EAAED,aAAb;AAA4BE,MAAAA,SAAS,EAAE;AAAvC;AAFT,KAIC,4BAAC,yBAAD;AACC,IAAA,MAAM,EAAGJ,MADV;AAEC,IAAA,aAAa,EAAGC,aAFjB;AAGC,IAAA,SAAS,EAAGC,aAHb;AAIC,IAAA,gBAAgB,EAAG,CAClB;AACCG,MAAAA,GAAG,EAAG;AACb;AACA,sBAAuBH,aAAe;AACtC;AACA;AACA;AANM,KADkB;AAJpB,IAJD,CADD,CADD;AAwBA,CA1CD;;eA4CeV,iB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { BlockPreview } from '@wordpress/block-editor';\nimport { getBlockType, getBlockFromExample } from '@wordpress/blocks';\nimport { __experimentalSpacer as Spacer } from '@wordpress/components';\n\nconst BlockPreviewPanel = ( { name, variation = '' } ) => {\n\tconst blockExample = getBlockType( name )?.example;\n\tconst blockExampleWithVariation = {\n\t\t...blockExample,\n\t\tattributes: {\n\t\t\t...blockExample?.attributes,\n\t\t\tclassName: variation,\n\t\t},\n\t};\n\tconst blocks =\n\t\tblockExample &&\n\t\tgetBlockFromExample(\n\t\t\tname,\n\t\t\tvariation ? blockExampleWithVariation : blockExample\n\t\t);\n\tconst viewportWidth = blockExample?.viewportWidth || null;\n\tconst previewHeight = '150px';\n\n\treturn ! blockExample ? null : (\n\t\t<Spacer marginX={ 4 } marginBottom={ 4 }>\n\t\t\t<div\n\t\t\t\tclassName=\"edit-site-global-styles__block-preview-panel\"\n\t\t\t\tstyle={ { maxHeight: previewHeight, boxSizing: 'initial' } }\n\t\t\t>\n\t\t\t\t<BlockPreview\n\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\tviewportWidth={ viewportWidth }\n\t\t\t\t\tminHeight={ previewHeight }\n\t\t\t\t\tadditionalStyles={ [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tcss: `\n\t\t\t\t\t\t\t\tbody{\n\t\t\t\t\t\t\t\t\tmin-height:${ previewHeight };\n\t\t\t\t\t\t\t\t\tdisplay:flex;align-items:center;justify-content:center;\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] }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</Spacer>\n\t);\n};\n\nexport default BlockPreviewPanel;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/block-preview-panel.js"],"names":["BlockPreviewPanel","name","variation","blockExample","example","blockExampleWithVariation","attributes","className","blocks","viewportWidth","previewHeight","maxHeight","boxSizing","css"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;AAKA,MAAMA,iBAAiB,GAAG,QAAgC;AAAA;;AAAA,MAA9B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,SAAS,GAAG;AAApB,GAA8B;AACzD,QAAMC,YAAY,oBAAG,0BAAcF,IAAd,CAAH,kDAAG,cAAsBG,OAA3C;AACA,QAAMC,yBAAyB,GAAG,EACjC,GAAGF,YAD8B;AAEjCG,IAAAA,UAAU,EAAE,EACX,IAAGH,YAAH,aAAGA,YAAH,uBAAGA,YAAY,CAAEG,UAAjB,CADW;AAEXC,MAAAA,SAAS,EAAE,cAAcL;AAFd;AAFqB,GAAlC;AAOA,QAAMM,MAAM,GACXL,YAAY,IACZ,iCACCF,IADD,EAECC,SAAS,GAAGG,yBAAH,GAA+BF,YAFzC,CAFD;AAMA,QAAMM,aAAa,GAAG,CAAAN,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY,CAAEM,aAAd,KAA+B,IAArD;AACA,QAAMC,aAAa,GAAG,OAAtB;AAEA,SAAO,CAAEP,YAAF,GAAiB,IAAjB,GACN,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG,CAAlB;AAAsB,IAAA,YAAY,EAAG;AAArC,KACC;AACC,IAAA,SAAS,EAAC,8CADX;AAEC,IAAA,KAAK,EAAG;AAAEQ,MAAAA,SAAS,EAAED,aAAb;AAA4BE,MAAAA,SAAS,EAAE;AAAvC;AAFT,KAIC,4BAAC,yBAAD;AACC,IAAA,MAAM,EAAGJ,MADV;AAEC,IAAA,aAAa,EAAGC,aAFjB;AAGC,IAAA,SAAS,EAAGC,aAHb;AAIC,IAAA,gBAAgB,EAAG,CAClB;AACCG,MAAAA,GAAG,EAAG;AACb;AACA,sBAAuBH,aAAe;AACtC;AACA;AACA;AANM,KADkB;AAJpB,IAJD,CADD,CADD;AAwBA,CA1CD;;eA4CeV,iB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { BlockPreview } from '@wordpress/block-editor';\nimport { getBlockType, getBlockFromExample } from '@wordpress/blocks';\nimport { __experimentalSpacer as Spacer } from '@wordpress/components';\n\nconst BlockPreviewPanel = ( { name, variation = '' } ) => {\n\tconst blockExample = getBlockType( name )?.example;\n\tconst blockExampleWithVariation = {\n\t\t...blockExample,\n\t\tattributes: {\n\t\t\t...blockExample?.attributes,\n\t\t\tclassName: 'is-style-' + variation,\n\t\t},\n\t};\n\tconst blocks =\n\t\tblockExample &&\n\t\tgetBlockFromExample(\n\t\t\tname,\n\t\t\tvariation ? blockExampleWithVariation : blockExample\n\t\t);\n\tconst viewportWidth = blockExample?.viewportWidth || null;\n\tconst previewHeight = '150px';\n\n\treturn ! blockExample ? null : (\n\t\t<Spacer marginX={ 4 } marginBottom={ 4 }>\n\t\t\t<div\n\t\t\t\tclassName=\"edit-site-global-styles__block-preview-panel\"\n\t\t\t\tstyle={ { maxHeight: previewHeight, boxSizing: 'initial' } }\n\t\t\t>\n\t\t\t\t<BlockPreview\n\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\tviewportWidth={ viewportWidth }\n\t\t\t\t\tminHeight={ previewHeight }\n\t\t\t\t\tadditionalStyles={ [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tcss: `\n\t\t\t\t\t\t\t\tbody{\n\t\t\t\t\t\t\t\t\tmin-height:${ previewHeight };\n\t\t\t\t\t\t\t\t\tdisplay:flex;align-items:center;justify-content:center;\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] }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</Spacer>\n\t);\n};\n\nexport default BlockPreviewPanel;\n"]}

package/build/components/global-styles/color-palette-panel.js

@@ -7,6 +7,8 @@ exports.default = ColorPalettePanel;
 
 var _element = require("@wordpress/element");
 
+var _compose = require("@wordpress/compose");
+
 var _components = require("@wordpress/components");
 
 var _i18n = require("@wordpress/i18n");
@@ -25,6 +27,10 @@ var _privateApis = require("../../private-apis");
 const {
   useGlobalSetting
 } = (0, _privateApis.unlock)(_blockEditor.privateApis);
+const mobilePopoverProps = {
+  placement: 'bottom-start',
+  offset: 8
+};
 
 function ColorPalettePanel(_ref) {
   let {
@@ -36,6 +42,8 @@ function ColorPalettePanel(_ref) {
   const [baseDefaultColors] = useGlobalSetting('color.palette.default', name, 'base');
   const [customColors, setCustomColors] = useGlobalSetting('color.palette.custom', name);
   const [defaultPaletteEnabled] = useGlobalSetting('color.defaultPalette', name);
+  const isMobileViewport = (0, _compose.useViewportMatch)('small', '<');
+  const popoverProps = isMobileViewport ? mobilePopoverProps : undefined;
   return (0, _element.createElement)(_components.__experimentalVStack, {
     className: "edit-site-global-styles-color-palette-panel",
     spacing: 10
@@ -45,21 +53,24 @@ function ColorPalettePanel(_ref) {
     colors: themeColors,
     onChange: setThemeColors,
     paletteLabel: (0, _i18n.__)('Theme'),
-    paletteLabelHeadingLevel: 3
+    paletteLabelHeadingLevel: 3,
+    popoverProps: popoverProps
   }), !!defaultColors && !!defaultColors.length && !!defaultPaletteEnabled && (0, _element.createElement)(_components.__experimentalPaletteEdit, {
     canReset: defaultColors !== baseDefaultColors,
     canOnlyChangeValues: true,
     colors: defaultColors,
     onChange: setDefaultColors,
     paletteLabel: (0, _i18n.__)('Default'),
-    paletteLabelHeadingLevel: 3
+    paletteLabelHeadingLevel: 3,
+    popoverProps: popoverProps
   }), (0, _element.createElement)(_components.__experimentalPaletteEdit, {
     colors: customColors,
     onChange: setCustomColors,
     paletteLabel: (0, _i18n.__)('Custom'),
     paletteLabelHeadingLevel: 3,
     emptyMessage: (0, _i18n.__)('Custom colors are empty! Add some colors to create your own color palette.'),
-    slugPrefix: "custom-"
+    slugPrefix: "custom-",
+    popoverProps: popoverProps
   }));
 }
 //# sourceMappingURL=color-palette-panel.js.map

package/build/components/global-styles/color-palette-panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/color-palette-panel.js"],"names":["useGlobalSetting","blockEditorPrivateApis","ColorPalettePanel","name","themeColors","setThemeColors","baseThemeColors","defaultColors","setDefaultColors","baseDefaultColors","customColors","setCustomColors","defaultPaletteEnabled","length"],"mappings":";;;;;;;;;AAGA;;AAIA;;AACA;;AAKA;;AAbA;AACA;AACA;;AAQA;AACA;AACA;AAGA,MAAM;AAAEA,EAAAA;AAAF,IAAuB,yBAAQC,wBAAR,CAA7B;;AAEe,SAASC,iBAAT,OAAuC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACrD,QAAM,CAAEC,WAAF,EAAeC,cAAf,IAAkCL,gBAAgB,CACvD,qBADuD,EAEvDG,IAFuD,CAAxD;AAIA,QAAM,CAAEG,eAAF,IAAsBN,gBAAgB,CAC3C,qBAD2C,EAE3CG,IAF2C,EAG3C,MAH2C,CAA5C;AAKA,QAAM,CAAEI,aAAF,EAAiBC,gBAAjB,IAAsCR,gBAAgB,CAC3D,uBAD2D,EAE3DG,IAF2D,CAA5D;AAIA,QAAM,CAAEM,iBAAF,IAAwBT,gBAAgB,CAC7C,uBAD6C,EAE7CG,IAF6C,EAG7C,MAH6C,CAA9C;AAKA,QAAM,CAAEO,YAAF,EAAgBC,eAAhB,IAAoCX,gBAAgB,CACzD,sBADyD,EAEzDG,IAFyD,CAA1D;AAKA,QAAM,CAAES,qBAAF,IAA4BZ,gBAAgB,CACjD,sBADiD,EAEjDG,IAFiD,CAAlD;AAIA,SACC,4BAAC,gCAAD;AACC,IAAA,SAAS,EAAC,6CADX;AAEC,IAAA,OAAO,EAAG;AAFX,KAIG,CAAC,CAAEC,WAAH,IAAkB,CAAC,CAAEA,WAAW,CAACS,MAAjC,IACD,4BAAC,qCAAD;AACC,IAAA,QAAQ,EAAGT,WAAW,KAAKE,eAD5B;AAEC,IAAA,mBAAmB,MAFpB;AAGC,IAAA,MAAM,EAAGF,WAHV;AAIC,IAAA,QAAQ,EAAGC,cAJZ;AAKC,IAAA,YAAY,EAAG,cAAI,OAAJ,CALhB;AAMC,IAAA,wBAAwB,EAAG;AAN5B,IALF,EAcG,CAAC,CAAEE,aAAH,IACD,CAAC,CAAEA,aAAa,CAACM,MADhB,IAED,CAAC,CAAED,qBAFF,IAGA,4BAAC,qCAAD;AACC,IAAA,QAAQ,EAAGL,aAAa,KAAKE,iBAD9B;AAEC,IAAA,mBAAmB,MAFpB;AAGC,IAAA,MAAM,EAAGF,aAHV;AAIC,IAAA,QAAQ,EAAGC,gBAJZ;AAKC,IAAA,YAAY,EAAG,cAAI,SAAJ,CALhB;AAMC,IAAA,wBAAwB,EAAG;AAN5B,IAjBH,EA0BC,4BAAC,qCAAD;AACC,IAAA,MAAM,EAAGE,YADV;AAEC,IAAA,QAAQ,EAAGC,eAFZ;AAGC,IAAA,YAAY,EAAG,cAAI,QAAJ,CAHhB;AAIC,IAAA,wBAAwB,EAAG,CAJ5B;AAKC,IAAA,YAAY,EAAG,cACd,4EADc,CALhB;AAQC,IAAA,UAAU,EAAC;AARZ,IA1BD,CADD;AAuCA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalPaletteEdit as PaletteEdit,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\n\nconst { useGlobalSetting } = unlock( blockEditorPrivateApis );\n\nexport default function ColorPalettePanel( { name } ) {\n\tconst [ themeColors, setThemeColors ] = useGlobalSetting(\n\t\t'color.palette.theme',\n\t\tname\n\t);\n\tconst [ baseThemeColors ] = useGlobalSetting(\n\t\t'color.palette.theme',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ defaultColors, setDefaultColors ] = useGlobalSetting(\n\t\t'color.palette.default',\n\t\tname\n\t);\n\tconst [ baseDefaultColors ] = useGlobalSetting(\n\t\t'color.palette.default',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ customColors, setCustomColors ] = useGlobalSetting(\n\t\t'color.palette.custom',\n\t\tname\n\t);\n\n\tconst [ defaultPaletteEnabled ] = useGlobalSetting(\n\t\t'color.defaultPalette',\n\t\tname\n\t);\n\treturn (\n\t\t<VStack\n\t\t\tclassName=\"edit-site-global-styles-color-palette-panel\"\n\t\t\tspacing={ 10 }\n\t\t>\n\t\t\t{ !! themeColors && !! themeColors.length && (\n\t\t\t\t<PaletteEdit\n\t\t\t\t\tcanReset={ themeColors !== baseThemeColors }\n\t\t\t\t\tcanOnlyChangeValues\n\t\t\t\t\tcolors={ themeColors }\n\t\t\t\t\tonChange={ setThemeColors }\n\t\t\t\t\tpaletteLabel={ __( 'Theme' ) }\n\t\t\t\t\tpaletteLabelHeadingLevel={ 3 }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ !! defaultColors &&\n\t\t\t\t!! defaultColors.length &&\n\t\t\t\t!! defaultPaletteEnabled && (\n\t\t\t\t\t<PaletteEdit\n\t\t\t\t\t\tcanReset={ defaultColors !== baseDefaultColors }\n\t\t\t\t\t\tcanOnlyChangeValues\n\t\t\t\t\t\tcolors={ defaultColors }\n\t\t\t\t\t\tonChange={ setDefaultColors }\n\t\t\t\t\t\tpaletteLabel={ __( 'Default' ) }\n\t\t\t\t\t\tpaletteLabelHeadingLevel={ 3 }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t<PaletteEdit\n\t\t\t\tcolors={ customColors }\n\t\t\t\tonChange={ setCustomColors }\n\t\t\t\tpaletteLabel={ __( 'Custom' ) }\n\t\t\t\tpaletteLabelHeadingLevel={ 3 }\n\t\t\t\temptyMessage={ __(\n\t\t\t\t\t'Custom colors are empty! Add some colors to create your own color palette.'\n\t\t\t\t) }\n\t\t\t\tslugPrefix=\"custom-\"\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/color-palette-panel.js"],"names":["useGlobalSetting","blockEditorPrivateApis","mobilePopoverProps","placement","offset","ColorPalettePanel","name","themeColors","setThemeColors","baseThemeColors","defaultColors","setDefaultColors","baseDefaultColors","customColors","setCustomColors","defaultPaletteEnabled","isMobileViewport","popoverProps","undefined","length"],"mappings":";;;;;;;;;AAGA;;AACA;;AAIA;;AACA;;AAKA;;AAdA;AACA;AACA;;AASA;AACA;AACA;AAGA,MAAM;AAAEA,EAAAA;AAAF,IAAuB,yBAAQC,wBAAR,CAA7B;AACA,MAAMC,kBAAkB,GAAG;AAAEC,EAAAA,SAAS,EAAE,cAAb;AAA6BC,EAAAA,MAAM,EAAE;AAArC,CAA3B;;AAEe,SAASC,iBAAT,OAAuC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACrD,QAAM,CAAEC,WAAF,EAAeC,cAAf,IAAkCR,gBAAgB,CACvD,qBADuD,EAEvDM,IAFuD,CAAxD;AAIA,QAAM,CAAEG,eAAF,IAAsBT,gBAAgB,CAC3C,qBAD2C,EAE3CM,IAF2C,EAG3C,MAH2C,CAA5C;AAKA,QAAM,CAAEI,aAAF,EAAiBC,gBAAjB,IAAsCX,gBAAgB,CAC3D,uBAD2D,EAE3DM,IAF2D,CAA5D;AAIA,QAAM,CAAEM,iBAAF,IAAwBZ,gBAAgB,CAC7C,uBAD6C,EAE7CM,IAF6C,EAG7C,MAH6C,CAA9C;AAKA,QAAM,CAAEO,YAAF,EAAgBC,eAAhB,IAAoCd,gBAAgB,CACzD,sBADyD,EAEzDM,IAFyD,CAA1D;AAKA,QAAM,CAAES,qBAAF,IAA4Bf,gBAAgB,CACjD,sBADiD,EAEjDM,IAFiD,CAAlD;AAKA,QAAMU,gBAAgB,GAAG,+BAAkB,OAAlB,EAA2B,GAA3B,CAAzB;AACA,QAAMC,YAAY,GAAGD,gBAAgB,GAAGd,kBAAH,GAAwBgB,SAA7D;AAEA,SACC,4BAAC,gCAAD;AACC,IAAA,SAAS,EAAC,6CADX;AAEC,IAAA,OAAO,EAAG;AAFX,KAIG,CAAC,CAAEX,WAAH,IAAkB,CAAC,CAAEA,WAAW,CAACY,MAAjC,IACD,4BAAC,qCAAD;AACC,IAAA,QAAQ,EAAGZ,WAAW,KAAKE,eAD5B;AAEC,IAAA,mBAAmB,MAFpB;AAGC,IAAA,MAAM,EAAGF,WAHV;AAIC,IAAA,QAAQ,EAAGC,cAJZ;AAKC,IAAA,YAAY,EAAG,cAAI,OAAJ,CALhB;AAMC,IAAA,wBAAwB,EAAG,CAN5B;AAOC,IAAA,YAAY,EAAGS;AAPhB,IALF,EAeG,CAAC,CAAEP,aAAH,IACD,CAAC,CAAEA,aAAa,CAACS,MADhB,IAED,CAAC,CAAEJ,qBAFF,IAGA,4BAAC,qCAAD;AACC,IAAA,QAAQ,EAAGL,aAAa,KAAKE,iBAD9B;AAEC,IAAA,mBAAmB,MAFpB;AAGC,IAAA,MAAM,EAAGF,aAHV;AAIC,IAAA,QAAQ,EAAGC,gBAJZ;AAKC,IAAA,YAAY,EAAG,cAAI,SAAJ,CALhB;AAMC,IAAA,wBAAwB,EAAG,CAN5B;AAOC,IAAA,YAAY,EAAGM;AAPhB,IAlBH,EA4BC,4BAAC,qCAAD;AACC,IAAA,MAAM,EAAGJ,YADV;AAEC,IAAA,QAAQ,EAAGC,eAFZ;AAGC,IAAA,YAAY,EAAG,cAAI,QAAJ,CAHhB;AAIC,IAAA,wBAAwB,EAAG,CAJ5B;AAKC,IAAA,YAAY,EAAG,cACd,4EADc,CALhB;AAQC,IAAA,UAAU,EAAC,SARZ;AASC,IAAA,YAAY,EAAGG;AAThB,IA5BD,CADD;AA0CA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\t__experimentalPaletteEdit as PaletteEdit,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\n\nconst { useGlobalSetting } = unlock( blockEditorPrivateApis );\nconst mobilePopoverProps = { placement: 'bottom-start', offset: 8 };\n\nexport default function ColorPalettePanel( { name } ) {\n\tconst [ themeColors, setThemeColors ] = useGlobalSetting(\n\t\t'color.palette.theme',\n\t\tname\n\t);\n\tconst [ baseThemeColors ] = useGlobalSetting(\n\t\t'color.palette.theme',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ defaultColors, setDefaultColors ] = useGlobalSetting(\n\t\t'color.palette.default',\n\t\tname\n\t);\n\tconst [ baseDefaultColors ] = useGlobalSetting(\n\t\t'color.palette.default',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ customColors, setCustomColors ] = useGlobalSetting(\n\t\t'color.palette.custom',\n\t\tname\n\t);\n\n\tconst [ defaultPaletteEnabled ] = useGlobalSetting(\n\t\t'color.defaultPalette',\n\t\tname\n\t);\n\n\tconst isMobileViewport = useViewportMatch( 'small', '<' );\n\tconst popoverProps = isMobileViewport ? mobilePopoverProps : undefined;\n\n\treturn (\n\t\t<VStack\n\t\t\tclassName=\"edit-site-global-styles-color-palette-panel\"\n\t\t\tspacing={ 10 }\n\t\t>\n\t\t\t{ !! themeColors && !! themeColors.length && (\n\t\t\t\t<PaletteEdit\n\t\t\t\t\tcanReset={ themeColors !== baseThemeColors }\n\t\t\t\t\tcanOnlyChangeValues\n\t\t\t\t\tcolors={ themeColors }\n\t\t\t\t\tonChange={ setThemeColors }\n\t\t\t\t\tpaletteLabel={ __( 'Theme' ) }\n\t\t\t\t\tpaletteLabelHeadingLevel={ 3 }\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ !! defaultColors &&\n\t\t\t\t!! defaultColors.length &&\n\t\t\t\t!! defaultPaletteEnabled && (\n\t\t\t\t\t<PaletteEdit\n\t\t\t\t\t\tcanReset={ defaultColors !== baseDefaultColors }\n\t\t\t\t\t\tcanOnlyChangeValues\n\t\t\t\t\t\tcolors={ defaultColors }\n\t\t\t\t\t\tonChange={ setDefaultColors }\n\t\t\t\t\t\tpaletteLabel={ __( 'Default' ) }\n\t\t\t\t\t\tpaletteLabelHeadingLevel={ 3 }\n\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t<PaletteEdit\n\t\t\t\tcolors={ customColors }\n\t\t\t\tonChange={ setCustomColors }\n\t\t\t\tpaletteLabel={ __( 'Custom' ) }\n\t\t\t\tpaletteLabelHeadingLevel={ 3 }\n\t\t\t\temptyMessage={ __(\n\t\t\t\t\t'Custom colors are empty! Add some colors to create your own color palette.'\n\t\t\t\t) }\n\t\t\t\tslugPrefix=\"custom-\"\n\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"]}

package/build/components/global-styles/dimensions-panel.js

@@ -34,24 +34,15 @@ const DEFAULT_CONTROLS = {
   childLayout: false
 };
 
-function DimensionsPanel(_ref) {
-  let {
-    name,
-    variation = ''
-  } = _ref;
-  let prefixParts = [];
-
-  if (variation) {
-    prefixParts = ['variations', variation].concat(prefixParts);
-  }
-
-  const prefix = prefixParts.join('.');
-  const [style] = useGlobalStyle(prefix, name, 'user', false);
-  const [inheritedStyle, setStyle] = useGlobalStyle(prefix, name, 'all', {
+function DimensionsPanel() {
+  const [style] = useGlobalStyle('', undefined, 'user', {
+    shouldDecodeEncode: false
+  });
+  const [inheritedStyle, setStyle] = useGlobalStyle('', undefined, 'all', {
     shouldDecodeEncode: false
   });
-  const [rawSettings, setSettings] = useGlobalSetting('', name);
-  const settings = useSettingsForBlockElement(rawSettings, name); // These intermediary objects are needed because the "layout" property is stored
+  const [rawSettings, setSettings] = useGlobalSetting('');
+  const settings = useSettingsForBlockElement(rawSettings); // These intermediary objects are needed because the "layout" property is stored
   // in settings rather than styles.
 
   const inheritedStyleWithLayout = (0, _element.useMemo)(() => {
@@ -72,9 +63,17 @@ function DimensionsPanel(_ref) {
     setStyle(updatedStyle);
 
     if (newStyle.layout !== settings.layout) {
-      setSettings({ ...rawSettings,
+      var _updatedSettings$layo;
+
+      const updatedSettings = { ...rawSettings,
         layout: newStyle.layout
-      });
+      }; // Ensure any changes to layout definitions are not persisted.
+
+      if ((_updatedSettings$layo = updatedSettings.layout) !== null && _updatedSettings$layo !== void 0 && _updatedSettings$layo.definitions) {
+        delete updatedSettings.layout.definitions;
+      }
+
+      setSettings(updatedSettings);
     }
   };
 

package/build/components/global-styles/dimensions-panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/dimensions-panel.js"],"names":["useGlobalStyle","useGlobalSetting","useSettingsForBlockElement","DimensionsPanel","StylesDimensionsPanel","blockEditorPrivateApis","DEFAULT_CONTROLS","contentSize","wideSize","padding","margin","blockGap","minHeight","childLayout","name","variation","prefixParts","concat","prefix","join","style","inheritedStyle","setStyle","shouldDecodeEncode","rawSettings","setSettings","settings","inheritedStyleWithLayout","layout","styleWithLayout","onChange","newStyle","updatedStyle"],"mappings":";;;;;;;AAIA;;AADA;;AAMA;;AATA;AACA;AACA;;AAIA;AACA;AACA;AAGA,MAAM;AACLA,EAAAA,cADK;AAELC,EAAAA,gBAFK;AAGLC,EAAAA,0BAHK;AAILC,EAAAA,eAAe,EAAEC;AAJZ,IAKF,yBAAQC,wBAAR,CALJ;AAOA,MAAMC,gBAAgB,GAAG;AACxBC,EAAAA,WAAW,EAAE,IADW;AAExBC,EAAAA,QAAQ,EAAE,IAFc;AAGxBC,EAAAA,OAAO,EAAE,IAHe;AAIxBC,EAAAA,MAAM,EAAE,IAJgB;AAKxBC,EAAAA,QAAQ,EAAE,IALc;AAMxBC,EAAAA,SAAS,EAAE,IANa;AAOxBC,EAAAA,WAAW,EAAE;AAPW,CAAzB;;AAUe,SAASV,eAAT,OAAqD;AAAA,MAA3B;AAAEW,IAAAA,IAAF;AAAQC,IAAAA,SAAS,GAAG;AAApB,GAA2B;AACnE,MAAIC,WAAW,GAAG,EAAlB;;AACA,MAAKD,SAAL,EAAiB;AAChBC,IAAAA,WAAW,GAAG,CAAE,YAAF,EAAgBD,SAAhB,EAA4BE,MAA5B,CAAoCD,WAApC,CAAd;AACA;;AACD,QAAME,MAAM,GAAGF,WAAW,CAACG,IAAZ,CAAkB,GAAlB,CAAf;AAEA,QAAM,CAAEC,KAAF,IAAYpB,cAAc,CAAEkB,MAAF,EAAUJ,IAAV,EAAgB,MAAhB,EAAwB,KAAxB,CAAhC;AACA,QAAM,CAAEO,cAAF,EAAkBC,QAAlB,IAA+BtB,cAAc,CAAEkB,MAAF,EAAUJ,IAAV,EAAgB,KAAhB,EAAuB;AACzES,IAAAA,kBAAkB,EAAE;AADqD,GAAvB,CAAnD;AAGA,QAAM,CAAEC,WAAF,EAAeC,WAAf,IAA+BxB,gBAAgB,CAAE,EAAF,EAAMa,IAAN,CAArD;AACA,QAAMY,QAAQ,GAAGxB,0BAA0B,CAAEsB,WAAF,EAAeV,IAAf,CAA3C,CAZmE,CAcnE;AACA;;AACA,QAAMa,wBAAwB,GAAG,sBAAS,MAAM;AAC/C,WAAO,EACN,GAAGN,cADG;AAENO,MAAAA,MAAM,EAAEF,QAAQ,CAACE;AAFX,KAAP;AAIA,GALgC,EAK9B,CAAEP,cAAF,EAAkBK,QAAQ,CAACE,MAA3B,CAL8B,CAAjC;AAOA,QAAMC,eAAe,GAAG,sBAAS,MAAM;AACtC,WAAO,EACN,GAAGT,KADG;AAENQ,MAAAA,MAAM,EAAEF,QAAQ,CAACE;AAFX,KAAP;AAIA,GALuB,EAKrB,CAAER,KAAF,EAASM,QAAQ,CAACE,MAAlB,CALqB,CAAxB;;AAOA,QAAME,QAAQ,GAAKC,QAAF,IAAgB;AAChC,UAAMC,YAAY,GAAG,EAAE,GAAGD;AAAL,KAArB;AACA,WAAOC,YAAY,CAACJ,MAApB;AACAN,IAAAA,QAAQ,CAAEU,YAAF,CAAR;;AAEA,QAAKD,QAAQ,CAACH,MAAT,KAAoBF,QAAQ,CAACE,MAAlC,EAA2C;AAC1CH,MAAAA,WAAW,CAAE,EACZ,GAAGD,WADS;AAEZI,QAAAA,MAAM,EAAEG,QAAQ,CAACH;AAFL,OAAF,CAAX;AAIA;AACD,GAXD;;AAaA,SACC,4BAAC,qBAAD;AACC,IAAA,cAAc,EAAGD,wBADlB;AAEC,IAAA,KAAK,EAAGE,eAFT;AAGC,IAAA,QAAQ,EAAGC,QAHZ;AAIC,IAAA,QAAQ,EAAGJ,QAJZ;AAKC,IAAA,qBAAqB,MALtB;AAMC,IAAA,eAAe,EAAGpB;AANnB,IADD;AAUA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\n\nconst {\n\tuseGlobalStyle,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n\tDimensionsPanel: StylesDimensionsPanel,\n} = unlock( blockEditorPrivateApis );\n\nconst DEFAULT_CONTROLS = {\n\tcontentSize: true,\n\twideSize: true,\n\tpadding: true,\n\tmargin: true,\n\tblockGap: true,\n\tminHeight: true,\n\tchildLayout: false,\n};\n\nexport default function DimensionsPanel( { name, variation = '' } ) {\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, setSettings ] = useGlobalSetting( '', name );\n\tconst settings = useSettingsForBlockElement( rawSettings, name );\n\n\t// These intermediary objects are needed because the \"layout\" property is stored\n\t// in settings rather than styles.\n\tconst inheritedStyleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...inheritedStyle,\n\t\t\tlayout: settings.layout,\n\t\t};\n\t}, [ inheritedStyle, settings.layout ] );\n\n\tconst styleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...style,\n\t\t\tlayout: settings.layout,\n\t\t};\n\t}, [ style, settings.layout ] );\n\n\tconst onChange = ( newStyle ) => {\n\t\tconst updatedStyle = { ...newStyle };\n\t\tdelete updatedStyle.layout;\n\t\tsetStyle( updatedStyle );\n\n\t\tif ( newStyle.layout !== settings.layout ) {\n\t\t\tsetSettings( {\n\t\t\t\t...rawSettings,\n\t\t\t\tlayout: newStyle.layout,\n\t\t\t} );\n\t\t}\n\t};\n\n\treturn (\n\t\t<StylesDimensionsPanel\n\t\t\tinheritedValue={ inheritedStyleWithLayout }\n\t\t\tvalue={ styleWithLayout }\n\t\t\tonChange={ onChange }\n\t\t\tsettings={ settings }\n\t\t\tincludeLayoutControls\n\t\t\tdefaultControls={ DEFAULT_CONTROLS }\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/dimensions-panel.js"],"names":["useGlobalStyle","useGlobalSetting","useSettingsForBlockElement","DimensionsPanel","StylesDimensionsPanel","blockEditorPrivateApis","DEFAULT_CONTROLS","contentSize","wideSize","padding","margin","blockGap","minHeight","childLayout","style","undefined","shouldDecodeEncode","inheritedStyle","setStyle","rawSettings","setSettings","settings","inheritedStyleWithLayout","layout","styleWithLayout","onChange","newStyle","updatedStyle","updatedSettings","definitions"],"mappings":";;;;;;;AAIA;;AADA;;AAMA;;AATA;AACA;AACA;;AAIA;AACA;AACA;AAGA,MAAM;AACLA,EAAAA,cADK;AAELC,EAAAA,gBAFK;AAGLC,EAAAA,0BAHK;AAILC,EAAAA,eAAe,EAAEC;AAJZ,IAKF,yBAAQC,wBAAR,CALJ;AAOA,MAAMC,gBAAgB,GAAG;AACxBC,EAAAA,WAAW,EAAE,IADW;AAExBC,EAAAA,QAAQ,EAAE,IAFc;AAGxBC,EAAAA,OAAO,EAAE,IAHe;AAIxBC,EAAAA,MAAM,EAAE,IAJgB;AAKxBC,EAAAA,QAAQ,EAAE,IALc;AAMxBC,EAAAA,SAAS,EAAE,IANa;AAOxBC,EAAAA,WAAW,EAAE;AAPW,CAAzB;;AAUe,SAASV,eAAT,GAA2B;AACzC,QAAM,CAAEW,KAAF,IAAYd,cAAc,CAAE,EAAF,EAAMe,SAAN,EAAiB,MAAjB,EAAyB;AACxDC,IAAAA,kBAAkB,EAAE;AADoC,GAAzB,CAAhC;AAGA,QAAM,CAAEC,cAAF,EAAkBC,QAAlB,IAA+BlB,cAAc,CAAE,EAAF,EAAMe,SAAN,EAAiB,KAAjB,EAAwB;AAC1EC,IAAAA,kBAAkB,EAAE;AADsD,GAAxB,CAAnD;AAGA,QAAM,CAAEG,WAAF,EAAeC,WAAf,IAA+BnB,gBAAgB,CAAE,EAAF,CAArD;AACA,QAAMoB,QAAQ,GAAGnB,0BAA0B,CAAEiB,WAAF,CAA3C,CARyC,CAUzC;AACA;;AACA,QAAMG,wBAAwB,GAAG,sBAAS,MAAM;AAC/C,WAAO,EACN,GAAGL,cADG;AAENM,MAAAA,MAAM,EAAEF,QAAQ,CAACE;AAFX,KAAP;AAIA,GALgC,EAK9B,CAAEN,cAAF,EAAkBI,QAAQ,CAACE,MAA3B,CAL8B,CAAjC;AAOA,QAAMC,eAAe,GAAG,sBAAS,MAAM;AACtC,WAAO,EACN,GAAGV,KADG;AAENS,MAAAA,MAAM,EAAEF,QAAQ,CAACE;AAFX,KAAP;AAIA,GALuB,EAKrB,CAAET,KAAF,EAASO,QAAQ,CAACE,MAAlB,CALqB,CAAxB;;AAOA,QAAME,QAAQ,GAAKC,QAAF,IAAgB;AAChC,UAAMC,YAAY,GAAG,EAAE,GAAGD;AAAL,KAArB;AACA,WAAOC,YAAY,CAACJ,MAApB;AACAL,IAAAA,QAAQ,CAAES,YAAF,CAAR;;AAEA,QAAKD,QAAQ,CAACH,MAAT,KAAoBF,QAAQ,CAACE,MAAlC,EAA2C;AAAA;;AAC1C,YAAMK,eAAe,GAAG,EAAE,GAAGT,WAAL;AAAkBI,QAAAA,MAAM,EAAEG,QAAQ,CAACH;AAAnC,OAAxB,CAD0C,CAG1C;;AACA,mCAAKK,eAAe,CAACL,MAArB,kDAAK,sBAAwBM,WAA7B,EAA2C;AAC1C,eAAOD,eAAe,CAACL,MAAhB,CAAuBM,WAA9B;AACA;;AAEDT,MAAAA,WAAW,CAAEQ,eAAF,CAAX;AACA;AACD,GAfD;;AAiBA,SACC,4BAAC,qBAAD;AACC,IAAA,cAAc,EAAGN,wBADlB;AAEC,IAAA,KAAK,EAAGE,eAFT;AAGC,IAAA,QAAQ,EAAGC,QAHZ;AAIC,IAAA,QAAQ,EAAGJ,QAJZ;AAKC,IAAA,qBAAqB,MALtB;AAMC,IAAA,eAAe,EAAGf;AANnB,IADD;AAUA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\n\nconst {\n\tuseGlobalStyle,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n\tDimensionsPanel: StylesDimensionsPanel,\n} = unlock( blockEditorPrivateApis );\n\nconst DEFAULT_CONTROLS = {\n\tcontentSize: true,\n\twideSize: true,\n\tpadding: true,\n\tmargin: true,\n\tblockGap: true,\n\tminHeight: true,\n\tchildLayout: false,\n};\n\nexport default function DimensionsPanel() {\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, setSettings ] = useGlobalSetting( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\n\t// These intermediary objects are needed because the \"layout\" property is stored\n\t// in settings rather than styles.\n\tconst inheritedStyleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...inheritedStyle,\n\t\t\tlayout: settings.layout,\n\t\t};\n\t}, [ inheritedStyle, settings.layout ] );\n\n\tconst styleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...style,\n\t\t\tlayout: settings.layout,\n\t\t};\n\t}, [ style, settings.layout ] );\n\n\tconst onChange = ( newStyle ) => {\n\t\tconst updatedStyle = { ...newStyle };\n\t\tdelete updatedStyle.layout;\n\t\tsetStyle( updatedStyle );\n\n\t\tif ( newStyle.layout !== settings.layout ) {\n\t\t\tconst updatedSettings = { ...rawSettings, layout: newStyle.layout };\n\n\t\t\t// Ensure any changes to layout definitions are not persisted.\n\t\t\tif ( updatedSettings.layout?.definitions ) {\n\t\t\t\tdelete updatedSettings.layout.definitions;\n\t\t\t}\n\n\t\t\tsetSettings( updatedSettings );\n\t\t}\n\t};\n\n\treturn (\n\t\t<StylesDimensionsPanel\n\t\t\tinheritedValue={ inheritedStyleWithLayout }\n\t\t\tvalue={ styleWithLayout }\n\t\t\tonChange={ onChange }\n\t\t\tsettings={ settings }\n\t\t\tincludeLayoutControls\n\t\t\tdefaultControls={ DEFAULT_CONTROLS }\n\t\t/>\n\t);\n}\n"]}

package/build/components/global-styles/gradients-palette-panel.js

@@ -9,6 +9,8 @@ exports.default = GradientPalettePanel;
 
 var _element = require("@wordpress/element");
 
+var _compose = require("@wordpress/compose");
+
 var _components = require("@wordpress/components");
 
 var _i18n = require("@wordpress/i18n");
@@ -29,6 +31,10 @@ var _privateApis = require("../../private-apis");
 const {
   useGlobalSetting
 } = (0, _privateApis.unlock)(_blockEditor.privateApis);
+const mobilePopoverProps = {
+  placement: 'bottom-start',
+  offset: 8
+};
 
 const noop = () => {};
 
@@ -47,6 +53,8 @@ function GradientPalettePanel(_ref) {
   const [themeDuotone] = useGlobalSetting('color.duotone.theme') || [];
   const [defaultDuotoneEnabled] = useGlobalSetting('color.defaultDuotone');
   const duotonePalette = [...(customDuotone || []), ...(themeDuotone || []), ...(defaultDuotone && defaultDuotoneEnabled ? defaultDuotone : [])];
+  const isMobileViewport = (0, _compose.useViewportMatch)('small', '<');
+  const popoverProps = isMobileViewport ? mobilePopoverProps : undefined;
   return (0, _element.createElement)(_components.__experimentalVStack, {
     className: "edit-site-global-styles-gradient-palette-panel",
     spacing: 10
@@ -56,21 +64,24 @@ function GradientPalettePanel(_ref) {
     gradients: themeGradients,
     onChange: setThemeGradients,
     paletteLabel: (0, _i18n.__)('Theme'),
-    paletteLabelHeadingLevel: 3
+    paletteLabelHeadingLevel: 3,
+    popoverProps: popoverProps
   }), !!defaultGradients && !!defaultGradients.length && !!defaultPaletteEnabled && (0, _element.createElement)(_components.__experimentalPaletteEdit, {
     canReset: defaultGradients !== baseDefaultGradients,
     canOnlyChangeValues: true,
     gradients: defaultGradients,
     onChange: setDefaultGradients,
     paletteLabel: (0, _i18n.__)('Default'),
-    paletteLabelLevel: 3
+    paletteLabelLevel: 3,
+    popoverProps: popoverProps
   }), (0, _element.createElement)(_components.__experimentalPaletteEdit, {
     gradients: customGradients,
     onChange: setCustomGradients,
     paletteLabel: (0, _i18n.__)('Custom'),
     paletteLabelLevel: 3,
     emptyMessage: (0, _i18n.__)('Custom gradients are empty! Add some gradients to create your own palette.'),
-    slugPrefix: "custom-"
+    slugPrefix: "custom-",
+    popoverProps: popoverProps
   }), !!duotonePalette && !!duotonePalette.length && (0, _element.createElement)("div", null, (0, _element.createElement)(_subtitle.default, {
     level: 3
   }, (0, _i18n.__)('Duotone')), (0, _element.createElement)(_components.__experimentalSpacer, {

package/build/components/global-styles/gradients-palette-panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/gradients-palette-panel.js"],"names":["useGlobalSetting","blockEditorPrivateApis","noop","GradientPalettePanel","name","themeGradients","setThemeGradients","baseThemeGradients","defaultGradients","setDefaultGradients","baseDefaultGradients","customGradients","setCustomGradients","defaultPaletteEnabled","customDuotone","defaultDuotone","themeDuotone","defaultDuotoneEnabled","duotonePalette","length"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalPaletteEdit as PaletteEdit,\n\t__experimentalSpacer as Spacer,\n\tDuotonePicker,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport Subtitle from './subtitle';\nimport { unlock } from '../../private-apis';\n\nconst { useGlobalSetting } = unlock( blockEditorPrivateApis );\n\nconst noop = () => {};\n\nexport default function GradientPalettePanel( { name } ) {\n\tconst [ themeGradients, setThemeGradients ] = useGlobalSetting(\n\t\t'color.gradients.theme',\n\t\tname\n\t);\n\tconst [ baseThemeGradients ] = useGlobalSetting(\n\t\t'color.gradients.theme',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ defaultGradients, setDefaultGradients ] = useGlobalSetting(\n\t\t'color.gradients.default',\n\t\tname\n\t);\n\tconst [ baseDefaultGradients ] = useGlobalSetting(\n\t\t'color.gradients.default',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ customGradients, setCustomGradients ] = useGlobalSetting(\n\t\t'color.gradients.custom',\n\t\tname\n\t);\n\n\tconst [ defaultPaletteEnabled ] = useGlobalSetting(\n\t\t'color.defaultGradients',\n\t\tname\n\t);\n\n\tconst [ customDuotone ] = useGlobalSetting( 'color.duotone.custom' ) || [];\n\tconst [ defaultDuotone ] =\n\t\tuseGlobalSetting( 'color.duotone.default' ) || [];\n\tconst [ themeDuotone ] = useGlobalSetting( 'color.duotone.theme' ) || [];\n\tconst [ defaultDuotoneEnabled ] = useGlobalSetting(\n\t\t'color.defaultDuotone'\n\t);\n\n\tconst duotonePalette = [\n\t\t...( customDuotone || [] ),\n\t\t...( themeDuotone || [] ),\n\t\t...( defaultDuotone && defaultDuotoneEnabled ? defaultDuotone : [] ),\n\t];\n\n\treturn (\n\t\t<VStack\n\t\t\tclassName=\"edit-site-global-styles-gradient-palette-panel\"\n\t\t\tspacing={ 10 }\n\t\t>\n\t\t\t{ !! themeGradients && !! themeGradients.length && (\n\t\t\t\t<PaletteEdit\n\t\t\t\t\tcanReset={ themeGradients !== baseThemeGradients }\n\t\t\t\t\tcanOnlyChangeValues\n\t\t\t\t\tgradients={ themeGradients }\n\t\t\t\t\tonChange={ setThemeGradients }\n\t\t\t\t\tpaletteLabel={ __( 'Theme' ) }\n\t\t\t\t\tpaletteLabelHeadingLevel={ 3 }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ !! defaultGradients &&\n\t\t\t\t!! defaultGradients.length &&\n\t\t\t\t!! defaultPaletteEnabled && (\n\t\t\t\t\t<PaletteEdit\n\t\t\t\t\t\tcanReset={ defaultGradients !== baseDefaultGradients }\n\t\t\t\t\t\tcanOnlyChangeValues\n\t\t\t\t\t\tgradients={ defaultGradients }\n\t\t\t\t\t\tonChange={ setDefaultGradients }\n\t\t\t\t\t\tpaletteLabel={ __( 'Default' ) }\n\t\t\t\t\t\tpaletteLabelLevel={ 3 }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t<PaletteEdit\n\t\t\t\tgradients={ customGradients }\n\t\t\t\tonChange={ setCustomGradients }\n\t\t\t\tpaletteLabel={ __( 'Custom' ) }\n\t\t\t\tpaletteLabelLevel={ 3 }\n\t\t\t\temptyMessage={ __(\n\t\t\t\t\t'Custom gradients are empty! Add some gradients to create your own palette.'\n\t\t\t\t) }\n\t\t\t\tslugPrefix=\"custom-\"\n\t\t\t/>\n\t\t\t{ !! duotonePalette && !! duotonePalette.length && (\n\t\t\t\t<div>\n\t\t\t\t\t<Subtitle level={ 3 }>{ __( 'Duotone' ) }</Subtitle>\n\t\t\t\t\t<Spacer margin={ 3 } />\n\t\t\t\t\t<DuotonePicker\n\t\t\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\t\t\tdisableCustomDuotone={ true }\n\t\t\t\t\t\tdisableCustomColors={ true }\n\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\tonChange={ noop }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/gradients-palette-panel.js"],"names":["useGlobalSetting","blockEditorPrivateApis","mobilePopoverProps","placement","offset","noop","GradientPalettePanel","name","themeGradients","setThemeGradients","baseThemeGradients","defaultGradients","setDefaultGradients","baseDefaultGradients","customGradients","setCustomGradients","defaultPaletteEnabled","customDuotone","defaultDuotone","themeDuotone","defaultDuotoneEnabled","duotonePalette","isMobileViewport","popoverProps","undefined","length"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalPaletteEdit as PaletteEdit,\n\t__experimentalSpacer as Spacer,\n\tDuotonePicker,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport Subtitle from './subtitle';\nimport { unlock } from '../../private-apis';\n\nconst { useGlobalSetting } = unlock( blockEditorPrivateApis );\nconst mobilePopoverProps = { placement: 'bottom-start', offset: 8 };\n\nconst noop = () => {};\n\nexport default function GradientPalettePanel( { name } ) {\n\tconst [ themeGradients, setThemeGradients ] = useGlobalSetting(\n\t\t'color.gradients.theme',\n\t\tname\n\t);\n\tconst [ baseThemeGradients ] = useGlobalSetting(\n\t\t'color.gradients.theme',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ defaultGradients, setDefaultGradients ] = useGlobalSetting(\n\t\t'color.gradients.default',\n\t\tname\n\t);\n\tconst [ baseDefaultGradients ] = useGlobalSetting(\n\t\t'color.gradients.default',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ customGradients, setCustomGradients ] = useGlobalSetting(\n\t\t'color.gradients.custom',\n\t\tname\n\t);\n\n\tconst [ defaultPaletteEnabled ] = useGlobalSetting(\n\t\t'color.defaultGradients',\n\t\tname\n\t);\n\n\tconst [ customDuotone ] = useGlobalSetting( 'color.duotone.custom' ) || [];\n\tconst [ defaultDuotone ] =\n\t\tuseGlobalSetting( 'color.duotone.default' ) || [];\n\tconst [ themeDuotone ] = useGlobalSetting( 'color.duotone.theme' ) || [];\n\tconst [ defaultDuotoneEnabled ] = useGlobalSetting(\n\t\t'color.defaultDuotone'\n\t);\n\n\tconst duotonePalette = [\n\t\t...( customDuotone || [] ),\n\t\t...( themeDuotone || [] ),\n\t\t...( defaultDuotone && defaultDuotoneEnabled ? defaultDuotone : [] ),\n\t];\n\n\tconst isMobileViewport = useViewportMatch( 'small', '<' );\n\tconst popoverProps = isMobileViewport ? mobilePopoverProps : undefined;\n\n\treturn (\n\t\t<VStack\n\t\t\tclassName=\"edit-site-global-styles-gradient-palette-panel\"\n\t\t\tspacing={ 10 }\n\t\t>\n\t\t\t{ !! themeGradients && !! themeGradients.length && (\n\t\t\t\t<PaletteEdit\n\t\t\t\t\tcanReset={ themeGradients !== baseThemeGradients }\n\t\t\t\t\tcanOnlyChangeValues\n\t\t\t\t\tgradients={ themeGradients }\n\t\t\t\t\tonChange={ setThemeGradients }\n\t\t\t\t\tpaletteLabel={ __( 'Theme' ) }\n\t\t\t\t\tpaletteLabelHeadingLevel={ 3 }\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ !! defaultGradients &&\n\t\t\t\t!! defaultGradients.length &&\n\t\t\t\t!! defaultPaletteEnabled && (\n\t\t\t\t\t<PaletteEdit\n\t\t\t\t\t\tcanReset={ defaultGradients !== baseDefaultGradients }\n\t\t\t\t\t\tcanOnlyChangeValues\n\t\t\t\t\t\tgradients={ defaultGradients }\n\t\t\t\t\t\tonChange={ setDefaultGradients }\n\t\t\t\t\t\tpaletteLabel={ __( 'Default' ) }\n\t\t\t\t\t\tpaletteLabelLevel={ 3 }\n\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t<PaletteEdit\n\t\t\t\tgradients={ customGradients }\n\t\t\t\tonChange={ setCustomGradients }\n\t\t\t\tpaletteLabel={ __( 'Custom' ) }\n\t\t\t\tpaletteLabelLevel={ 3 }\n\t\t\t\temptyMessage={ __(\n\t\t\t\t\t'Custom gradients are empty! Add some gradients to create your own palette.'\n\t\t\t\t) }\n\t\t\t\tslugPrefix=\"custom-\"\n\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t/>\n\t\t\t{ !! duotonePalette && !! duotonePalette.length && (\n\t\t\t\t<div>\n\t\t\t\t\t<Subtitle level={ 3 }>{ __( 'Duotone' ) }</Subtitle>\n\t\t\t\t\t<Spacer margin={ 3 } />\n\t\t\t\t\t<DuotonePicker\n\t\t\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\t\t\tdisableCustomDuotone={ true }\n\t\t\t\t\t\tdisableCustomColors={ true }\n\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\tonChange={ noop }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"]}

package/build/components/global-styles/root-menu.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _components = require("@wordpress/components");
+
+var _icons = require("@wordpress/icons");
+
+var _i18n = require("@wordpress/i18n");
+
+var _blockEditor = require("@wordpress/block-editor");
+
+var _navigationButton = require("./navigation-button");
+
+var _privateApis = require("../../private-apis");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const {
+  useHasDimensionsPanel,
+  useHasTypographyPanel,
+  useHasColorPanel,
+  useGlobalSetting,
+  useSettingsForBlockElement
+} = (0, _privateApis.unlock)(_blockEditor.privateApis);
+
+function RootMenu() {
+  const [rawSettings] = useGlobalSetting('');
+  const settings = useSettingsForBlockElement(rawSettings);
+  const hasTypographyPanel = useHasTypographyPanel(settings);
+  const hasColorPanel = useHasColorPanel(settings);
+  const hasDimensionsPanel = useHasDimensionsPanel(settings);
+  const hasLayoutPanel = hasDimensionsPanel;
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalItemGroup, null, hasTypographyPanel && (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
+    icon: _icons.typography,
+    path: "/typography",
+    "aria-label": (0, _i18n.__)('Typography styles')
+  }, (0, _i18n.__)('Typography')), hasColorPanel && (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
+    icon: _icons.color,
+    path: "/colors",
+    "aria-label": (0, _i18n.__)('Colors styles')
+  }, (0, _i18n.__)('Colors')), hasLayoutPanel && (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
+    icon: _icons.layout,
+    path: "/layout",
+    "aria-label": (0, _i18n.__)('Layout styles')
+  }, (0, _i18n.__)('Layout'))));
+}
+
+var _default = RootMenu;
+exports.default = _default;
+//# sourceMappingURL=root-menu.js.map

package/build/components/global-styles/root-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/root-menu.js"],"names":["useHasDimensionsPanel","useHasTypographyPanel","useHasColorPanel","useGlobalSetting","useSettingsForBlockElement","blockEditorPrivateApis","RootMenu","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasDimensionsPanel","hasLayoutPanel","typography","color","layout"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AAZA;AACA;AACA;;AAMA;AACA;AACA;AAIA,MAAM;AACLA,EAAAA,qBADK;AAELC,EAAAA,qBAFK;AAGLC,EAAAA,gBAHK;AAILC,EAAAA,gBAJK;AAKLC,EAAAA;AALK,IAMF,yBAAQC,wBAAR,CANJ;;AAQA,SAASC,QAAT,GAAoB;AACnB,QAAM,CAAEC,WAAF,IAAkBJ,gBAAgB,CAAE,EAAF,CAAxC;AACA,QAAMK,QAAQ,GAAGJ,0BAA0B,CAAEG,WAAF,CAA3C;AACA,QAAME,kBAAkB,GAAGR,qBAAqB,CAAEO,QAAF,CAAhD;AACA,QAAME,aAAa,GAAGR,gBAAgB,CAAEM,QAAF,CAAtC;AACA,QAAMG,kBAAkB,GAAGX,qBAAqB,CAAEQ,QAAF,CAAhD;AACA,QAAMI,cAAc,GAAGD,kBAAvB;AAEA,SACC,qDACC,4BAAC,mCAAD,QACGF,kBAAkB,IACnB,4BAAC,wCAAD;AACC,IAAA,IAAI,EAAGI,iBADR;AAEC,IAAA,IAAI,EAAC,aAFN;AAGC,kBAAa,cAAI,mBAAJ;AAHd,KAKG,cAAI,YAAJ,CALH,CAFF,EAUGH,aAAa,IACd,4BAAC,wCAAD;AACC,IAAA,IAAI,EAAGI,YADR;AAEC,IAAA,IAAI,EAAC,SAFN;AAGC,kBAAa,cAAI,eAAJ;AAHd,KAKG,cAAI,QAAJ,CALH,CAXF,EAmBGF,cAAc,IACf,4BAAC,wCAAD;AACC,IAAA,IAAI,EAAGG,aADR;AAEC,IAAA,IAAI,EAAC,SAFN;AAGC,kBAAa,cAAI,eAAJ;AAHd,KAKG,cAAI,QAAJ,CALH,CApBF,CADD,CADD;AAiCA;;eAEcT,Q","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalItemGroup as ItemGroup } from '@wordpress/components';\nimport { typography, color, layout } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { unlock } from '../../private-apis';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasColorPanel,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n} = unlock( blockEditorPrivateApis );\n\nfunction RootMenu() {\n\tconst [ rawSettings ] = useGlobalSetting( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasDimensionsPanel;\n\n\treturn (\n\t\t<>\n\t\t\t<ItemGroup>\n\t\t\t\t{ hasTypographyPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ typography }\n\t\t\t\t\t\tpath=\"/typography\"\n\t\t\t\t\t\taria-label={ __( 'Typography styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Typography' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasColorPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ color }\n\t\t\t\t\t\tpath=\"/colors\"\n\t\t\t\t\t\taria-label={ __( 'Colors styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Colors' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasLayoutPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ layout }\n\t\t\t\t\t\tpath=\"/layout\"\n\t\t\t\t\t\taria-label={ __( 'Layout styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Layout' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t</ItemGroup>\n\t\t</>\n\t);\n}\n\nexport default RootMenu;\n"]}

package/build/components/global-styles/screen-block-list.js

@@ -76,6 +76,8 @@ function useSortedBlockTypes() {
 }
 
 function useBlockHasGlobalStyles(blockName) {
+  var _useBlockVariations;
+
   const [rawSettings] = useGlobalSetting('', blockName);
   const settings = useSettingsForBlockElement(rawSettings, blockName);
   const hasTypographyPanel = useHasTypographyPanel(settings);
@@ -83,7 +85,7 @@ function useBlockHasGlobalStyles(blockName) {
   const hasBorderPanel = useHasBorderPanel(settings);
   const hasDimensionsPanel = useHasDimensionsPanel(settings);
   const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
-  const hasVariationsPanel = (0, _variationsPanel.useHasVariationsPanel)(blockName);
+  const hasVariationsPanel = !!((_useBlockVariations = (0, _variationsPanel.useBlockVariations)(blockName)) !== null && _useBlockVariations !== void 0 && _useBlockVariations.length);
   const hasGlobalStyles = hasTypographyPanel || hasColorPanel || hasLayoutPanel || hasVariationsPanel;
   return hasGlobalStyles;
 }

package/build/components/global-styles/screen-block-list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-block-list.js"],"names":["useHasDimensionsPanel","useHasTypographyPanel","useHasBorderPanel","useGlobalSetting","useSettingsForBlockElement","useHasColorPanel","blockEditorPrivateApis","useSortedBlockTypes","blockItems","select","blocksStore","getBlockTypes","groupByType","blocks","block","core","noncore","type","name","startsWith","push","coreItems","nonCoreItems","reduce","useBlockHasGlobalStyles","blockName","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","hasVariationsPanel","hasGlobalStyles","BlockMenuItem","hasBlockMenuItem","navigationButtonLabel","title","encodeURIComponent","icon","ScreenBlockList","sortedBlockTypes","filterValue","setFilterValue","debouncedSpeak","speak","isMatchingSearchTerm","filteredBlockTypes","filter","blockType","blockTypesListRef","count","current","childElementCount","resultsFoundMessage","map"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport {\n\tFlexItem,\n\tSearchControl,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useState, useMemo, useEffect, useRef } from '@wordpress/element';\nimport {\n\tBlockIcon,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { useDebounce } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { useHasVariationsPanel } from './variations-panel';\nimport ScreenHeader from './header';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { unlock } from '../../private-apis';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n\tuseHasColorPanel,\n} = unlock( blockEditorPrivateApis );\n\nfunction useSortedBlockTypes() {\n\tconst blockItems = useSelect(\n\t\t( select ) => select( blocksStore ).getBlockTypes(),\n\t\t[]\n\t);\n\t// Ensure core blocks are prioritized in the returned results,\n\t// because third party blocks can be registered earlier than\n\t// the core blocks (usually by using the `init` action),\n\t// thus affecting the display order.\n\t// We don't sort reusable blocks as they are handled differently.\n\tconst groupByType = ( blocks, block ) => {\n\t\tconst { core, noncore } = blocks;\n\t\tconst type = block.name.startsWith( 'core/' ) ? core : noncore;\n\t\ttype.push( block );\n\t\treturn blocks;\n\t};\n\tconst { core: coreItems, noncore: nonCoreItems } = blockItems.reduce(\n\t\tgroupByType,\n\t\t{ core: [], noncore: [] }\n\t);\n\treturn [ ...coreItems, ...nonCoreItems ];\n}\n\nexport function useBlockHasGlobalStyles( blockName ) {\n\tconst [ rawSettings ] = useGlobalSetting( '', blockName );\n\tconst settings = useSettingsForBlockElement( rawSettings, blockName );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\tconst hasVariationsPanel = useHasVariationsPanel( blockName );\n\tconst hasGlobalStyles =\n\t\thasTypographyPanel ||\n\t\thasColorPanel ||\n\t\thasLayoutPanel ||\n\t\thasVariationsPanel;\n\treturn hasGlobalStyles;\n}\n\nfunction BlockMenuItem( { block } ) {\n\tconst hasBlockMenuItem = useBlockHasGlobalStyles( block.name );\n\tif ( ! hasBlockMenuItem ) {\n\t\treturn null;\n\t}\n\n\tconst navigationButtonLabel = sprintf(\n\t\t// translators: %s: is the name of a block e.g., 'Image' or 'Table'.\n\t\t__( '%s block styles' ),\n\t\tblock.title\n\t);\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t\taria-label={ navigationButtonLabel }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<BlockIcon icon={ block.icon } />\n\t\t\t\t<FlexItem>{ block.title }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction ScreenBlockList() {\n\tconst sortedBlockTypes = useSortedBlockTypes();\n\tconst [ filterValue, setFilterValue ] = useState( '' );\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst isMatchingSearchTerm = useSelect(\n\t\t( select ) => select( blocksStore ).isMatchingSearchTerm,\n\t\t[]\n\t);\n\tconst filteredBlockTypes = useMemo( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn sortedBlockTypes;\n\t\t}\n\t\treturn sortedBlockTypes.filter( ( blockType ) =>\n\t\t\tisMatchingSearchTerm( blockType, filterValue )\n\t\t);\n\t}, [ filterValue, sortedBlockTypes, isMatchingSearchTerm ] );\n\n\tconst blockTypesListRef = useRef();\n\n\t// Announce search results on change\n\tuseEffect( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn;\n\t\t}\n\t\t// We extract the results from the wrapper div's `ref` because\n\t\t// filtered items can contain items that will eventually not\n\t\t// render and there is no reliable way to detect when a child\n\t\t// will return `null`.\n\t\t// TODO: We should find a better way of handling this as it's\n\t\t// fragile and depends on the number of rendered elements of `BlockMenuItem`,\n\t\t// which is now one.\n\t\t// @see https://github.com/WordPress/gutenberg/pull/39117#discussion_r816022116\n\t\tconst count = blockTypesListRef.current.childElementCount;\n\t\tconst resultsFoundMessage = sprintf(\n\t\t\t/* translators: %d: number of results. */\n\t\t\t_n( '%d result found.', '%d results found.', count ),\n\t\t\tcount\n\t\t);\n\t\tdebouncedSpeak( resultsFoundMessage, count );\n\t}, [ filterValue, debouncedSpeak ] );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Blocks' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Customize the appearance of specific blocks and for the whole site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<SearchControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tclassName=\"edit-site-block-types-search\"\n\t\t\t\tonChange={ setFilterValue }\n\t\t\t\tvalue={ filterValue }\n\t\t\t\tlabel={ __( 'Search for blocks' ) }\n\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tref={ blockTypesListRef }\n\t\t\t\tclassName=\"edit-site-block-types-item-list\"\n\t\t\t>\n\t\t\t\t{ filteredBlockTypes.map( ( block ) => (\n\t\t\t\t\t<BlockMenuItem\n\t\t\t\t\t\tblock={ block }\n\t\t\t\t\t\tkey={ 'menu-itemblock-' + block.name }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenBlockList;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-block-list.js"],"names":["useHasDimensionsPanel","useHasTypographyPanel","useHasBorderPanel","useGlobalSetting","useSettingsForBlockElement","useHasColorPanel","blockEditorPrivateApis","useSortedBlockTypes","blockItems","select","blocksStore","getBlockTypes","groupByType","blocks","block","core","noncore","type","name","startsWith","push","coreItems","nonCoreItems","reduce","useBlockHasGlobalStyles","blockName","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","hasVariationsPanel","length","hasGlobalStyles","BlockMenuItem","hasBlockMenuItem","navigationButtonLabel","title","encodeURIComponent","icon","ScreenBlockList","sortedBlockTypes","filterValue","setFilterValue","debouncedSpeak","speak","isMatchingSearchTerm","filteredBlockTypes","filter","blockType","blockTypesListRef","count","current","childElementCount","resultsFoundMessage","map"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport {\n\tFlexItem,\n\tSearchControl,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useState, useMemo, useEffect, useRef } from '@wordpress/element';\nimport {\n\tBlockIcon,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { useDebounce } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { useBlockVariations } from './variations-panel';\nimport ScreenHeader from './header';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { unlock } from '../../private-apis';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n\tuseHasColorPanel,\n} = unlock( blockEditorPrivateApis );\n\nfunction useSortedBlockTypes() {\n\tconst blockItems = useSelect(\n\t\t( select ) => select( blocksStore ).getBlockTypes(),\n\t\t[]\n\t);\n\t// Ensure core blocks are prioritized in the returned results,\n\t// because third party blocks can be registered earlier than\n\t// the core blocks (usually by using the `init` action),\n\t// thus affecting the display order.\n\t// We don't sort reusable blocks as they are handled differently.\n\tconst groupByType = ( blocks, block ) => {\n\t\tconst { core, noncore } = blocks;\n\t\tconst type = block.name.startsWith( 'core/' ) ? core : noncore;\n\t\ttype.push( block );\n\t\treturn blocks;\n\t};\n\tconst { core: coreItems, noncore: nonCoreItems } = blockItems.reduce(\n\t\tgroupByType,\n\t\t{ core: [], noncore: [] }\n\t);\n\treturn [ ...coreItems, ...nonCoreItems ];\n}\n\nexport function useBlockHasGlobalStyles( blockName ) {\n\tconst [ rawSettings ] = useGlobalSetting( '', blockName );\n\tconst settings = useSettingsForBlockElement( rawSettings, blockName );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\tconst hasVariationsPanel = !! useBlockVariations( blockName )?.length;\n\tconst hasGlobalStyles =\n\t\thasTypographyPanel ||\n\t\thasColorPanel ||\n\t\thasLayoutPanel ||\n\t\thasVariationsPanel;\n\treturn hasGlobalStyles;\n}\n\nfunction BlockMenuItem( { block } ) {\n\tconst hasBlockMenuItem = useBlockHasGlobalStyles( block.name );\n\tif ( ! hasBlockMenuItem ) {\n\t\treturn null;\n\t}\n\n\tconst navigationButtonLabel = sprintf(\n\t\t// translators: %s: is the name of a block e.g., 'Image' or 'Table'.\n\t\t__( '%s block styles' ),\n\t\tblock.title\n\t);\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t\taria-label={ navigationButtonLabel }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<BlockIcon icon={ block.icon } />\n\t\t\t\t<FlexItem>{ block.title }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction ScreenBlockList() {\n\tconst sortedBlockTypes = useSortedBlockTypes();\n\tconst [ filterValue, setFilterValue ] = useState( '' );\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst isMatchingSearchTerm = useSelect(\n\t\t( select ) => select( blocksStore ).isMatchingSearchTerm,\n\t\t[]\n\t);\n\tconst filteredBlockTypes = useMemo( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn sortedBlockTypes;\n\t\t}\n\t\treturn sortedBlockTypes.filter( ( blockType ) =>\n\t\t\tisMatchingSearchTerm( blockType, filterValue )\n\t\t);\n\t}, [ filterValue, sortedBlockTypes, isMatchingSearchTerm ] );\n\n\tconst blockTypesListRef = useRef();\n\n\t// Announce search results on change\n\tuseEffect( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn;\n\t\t}\n\t\t// We extract the results from the wrapper div's `ref` because\n\t\t// filtered items can contain items that will eventually not\n\t\t// render and there is no reliable way to detect when a child\n\t\t// will return `null`.\n\t\t// TODO: We should find a better way of handling this as it's\n\t\t// fragile and depends on the number of rendered elements of `BlockMenuItem`,\n\t\t// which is now one.\n\t\t// @see https://github.com/WordPress/gutenberg/pull/39117#discussion_r816022116\n\t\tconst count = blockTypesListRef.current.childElementCount;\n\t\tconst resultsFoundMessage = sprintf(\n\t\t\t/* translators: %d: number of results. */\n\t\t\t_n( '%d result found.', '%d results found.', count ),\n\t\t\tcount\n\t\t);\n\t\tdebouncedSpeak( resultsFoundMessage, count );\n\t}, [ filterValue, debouncedSpeak ] );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Blocks' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Customize the appearance of specific blocks and for the whole site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<SearchControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tclassName=\"edit-site-block-types-search\"\n\t\t\t\tonChange={ setFilterValue }\n\t\t\t\tvalue={ filterValue }\n\t\t\t\tlabel={ __( 'Search for blocks' ) }\n\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tref={ blockTypesListRef }\n\t\t\t\tclassName=\"edit-site-block-types-item-list\"\n\t\t\t>\n\t\t\t\t{ filteredBlockTypes.map( ( block ) => (\n\t\t\t\t\t<BlockMenuItem\n\t\t\t\t\t\tblock={ block }\n\t\t\t\t\t\tkey={ 'menu-itemblock-' + block.name }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenBlockList;\n"]}