@wordpress/edit-site 5.8.0 → 5.10.0

package/build-module/components/site-hub/index.js

@@ -10,13 +10,15 @@ import classnames from 'classnames';
  */
 
 import { useSelect, useDispatch } from '@wordpress/data';
-import { Button, __unstableMotion as motion, __experimentalHStack as HStack } from '@wordpress/components';
+import { Button, __unstableMotion as motion, __unstableAnimatePresence as AnimatePresence, __experimentalHStack as HStack } from '@wordpress/components';
 import { useReducedMotion } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
-import { forwardRef } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
+import { forwardRef } from '@wordpress/element';
+import { search } from '@wordpress/icons';
+import { privateApis as commandsPrivateApis } from '@wordpress/commands';
 /**
  * Internal dependencies
  */
@@ -24,8 +26,13 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { store as editSiteStore } from '../../store';
 import SiteIcon from '../site-icon';
 import { unlock } from '../../private-apis';
+const {
+  store: commandsStore
+} = unlock(commandsPrivateApis);
 const HUB_ANIMATION_DURATION = 0.3;
 const SiteHub = forwardRef((props, ref) => {
+  var _window;
+
   const {
     canvasMode,
     dashboardLink
@@ -36,9 +43,12 @@ const SiteHub = forwardRef((props, ref) => {
     } = unlock(select(editSiteStore));
     return {
       canvasMode: getCanvasMode(),
-      dashboardLink: getSettings().__experimentalDashboardLink
+      dashboardLink: getSettings().__experimentalDashboardLink || 'index.php'
     };
   }, []);
+  const {
+    open: openCommandCenter
+  } = useDispatch(commandsStore);
   const disableMotion = useReducedMotion();
   const {
     setCanvasMode
@@ -47,15 +57,21 @@ const SiteHub = forwardRef((props, ref) => {
     clearSelectedBlock
   } = useDispatch(blockEditorStore);
   const isBackToDashboardButton = canvasMode === 'view';
-  const showLabels = canvasMode !== 'edit';
   const siteIconButtonProps = isBackToDashboardButton ? {
-    href: dashboardLink || 'index.php',
+    href: dashboardLink,
     label: __('Go back to the Dashboard')
   } : {
-    label: __('Open Navigation Sidebar'),
-    onClick: () => {
-      clearSelectedBlock();
-      setCanvasMode('view');
+    href: dashboardLink,
+    // We need to keep the `href` here so the component doesn't remount as a `<button>` and break the animation.
+    role: 'button',
+    label: __('Open Navigation'),
+    onClick: event => {
+      event.preventDefault();
+
+      if (canvasMode === 'edit') {
+        clearSelectedBlock();
+        setCanvasMode('view');
+      }
     }
   };
   const siteTitle = useSelect(select => {
@@ -67,13 +83,16 @@ const SiteHub = forwardRef((props, ref) => {
     ref: ref
   }, props, {
     className: classnames('edit-site-site-hub', props.className),
-    layout: true,
+    initial: false,
     transition: {
       type: 'tween',
       duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
       ease: 'easeOut'
     }
   }), createElement(HStack, {
+    justify: "space-between",
+    alignment: "center"
+  }, createElement(HStack, {
     justify: "flex-start",
     className: "edit-site-site-hub__text-content",
     spacing: "0"
@@ -87,11 +106,42 @@ const SiteHub = forwardRef((props, ref) => {
     }
   }, createElement(Button, _extends({}, siteIconButtonProps, {
     className: "edit-site-layout__view-mode-toggle"
-  }), createElement(SiteIcon, {
+  }), createElement(motion.div, {
+    initial: false,
+    animate: {
+      scale: canvasMode === 'view' ? 0.5 : 1
+    },
+    whileHover: {
+      scale: canvasMode === 'view' ? 0.5 : 0.96
+    },
+    transition: {
+      type: 'tween',
+      duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
+      ease: 'easeOut'
+    }
+  }, createElement(SiteIcon, {
     className: "edit-site-layout__view-mode-toggle-icon"
-  }))), showLabels && createElement("div", {
-    className: "edit-site-site-hub__site-title"
-  }, decodeEntities(siteTitle))));
+  })))), createElement(AnimatePresence, null, createElement(motion.div, {
+    layout: canvasMode === 'edit',
+    animate: {
+      opacity: canvasMode === 'view' ? 1 : 0
+    },
+    exit: {
+      opacity: 0
+    },
+    className: "edit-site-site-hub__site-title",
+    transition: {
+      type: 'tween',
+      duration: disableMotion ? 0 : 0.2,
+      ease: 'easeOut',
+      delay: canvasMode === 'view' ? 0.1 : 0
+    }
+  }, decodeEntities(siteTitle)))), ((_window = window) === null || _window === void 0 ? void 0 : _window.__experimentalEnableCommandCenter) && canvasMode === 'view' && createElement(Button, {
+    className: "edit-site-site-hub_toggle-command-center",
+    icon: search,
+    onClick: () => openCommandCenter(),
+    label: __('Open command center')
+  })));
 });
 export default SiteHub;
 //# sourceMappingURL=index.js.map

package/build-module/components/site-hub/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/site-hub/index.js"],"names":["classnames","useSelect","useDispatch","Button","__unstableMotion","motion","__experimentalHStack","HStack","useReducedMotion","__","store","blockEditorStore","coreStore","forwardRef","decodeEntities","editSiteStore","SiteIcon","unlock","HUB_ANIMATION_DURATION","SiteHub","props","ref","canvasMode","dashboardLink","select","getCanvasMode","getSettings","__experimentalDashboardLink","disableMotion","setCanvasMode","clearSelectedBlock","isBackToDashboardButton","showLabels","siteIconButtonProps","href","label","onClick","siteTitle","getEntityRecord","title","className","type","duration","ease"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tButton,\n\t__unstableMotion as motion,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { useReducedMotion } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { forwardRef } from '@wordpress/element';\nimport { decodeEntities } from '@wordpress/html-entities';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport SiteIcon from '../site-icon';\nimport { unlock } from '../../private-apis';\n\nconst HUB_ANIMATION_DURATION = 0.3;\n\nconst SiteHub = forwardRef( ( props, ref ) => {\n\tconst { canvasMode, dashboardLink } = useSelect( ( select ) => {\n\t\tconst { getCanvasMode, getSettings } = unlock(\n\t\t\tselect( editSiteStore )\n\t\t);\n\t\treturn {\n\t\t\tcanvasMode: getCanvasMode(),\n\t\t\tdashboardLink: getSettings().__experimentalDashboardLink,\n\t\t};\n\t}, [] );\n\tconst disableMotion = useReducedMotion();\n\tconst { setCanvasMode } = unlock( useDispatch( editSiteStore ) );\n\tconst { clearSelectedBlock } = useDispatch( blockEditorStore );\n\tconst isBackToDashboardButton = canvasMode === 'view';\n\tconst showLabels = canvasMode !== 'edit';\n\tconst siteIconButtonProps = isBackToDashboardButton\n\t\t? {\n\t\t\t\thref: dashboardLink || 'index.php',\n\t\t\t\tlabel: __( 'Go back to the Dashboard' ),\n\t\t  }\n\t\t: {\n\t\t\t\tlabel: __( 'Open Navigation Sidebar' ),\n\t\t\t\tonClick: () => {\n\t\t\t\t\tclearSelectedBlock();\n\t\t\t\t\tsetCanvasMode( 'view' );\n\t\t\t\t},\n\t\t  };\n\tconst siteTitle = useSelect(\n\t\t( select ) =>\n\t\t\tselect( coreStore ).getEntityRecord( 'root', 'site' )?.title,\n\t\t[]\n\t);\n\n\treturn (\n\t\t<motion.div\n\t\t\tref={ ref }\n\t\t\t{ ...props }\n\t\t\tclassName={ classnames( 'edit-site-site-hub', props.className ) }\n\t\t\tlayout\n\t\t\ttransition={ {\n\t\t\t\ttype: 'tween',\n\t\t\t\tduration: disableMotion ? 0 : HUB_ANIMATION_DURATION,\n\t\t\t\tease: 'easeOut',\n\t\t\t} }\n\t\t>\n\t\t\t<HStack\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t\tclassName=\"edit-site-site-hub__text-content\"\n\t\t\t\tspacing=\"0\"\n\t\t\t>\n\t\t\t\t<motion.div\n\t\t\t\t\tclassName=\"edit-site-site-hub__view-mode-toggle-container\"\n\t\t\t\t\tlayout\n\t\t\t\t\ttransition={ {\n\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\tduration: disableMotion ? 0 : HUB_ANIMATION_DURATION,\n\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\t{ ...siteIconButtonProps }\n\t\t\t\t\t\tclassName=\"edit-site-layout__view-mode-toggle\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<SiteIcon className=\"edit-site-layout__view-mode-toggle-icon\" />\n\t\t\t\t\t</Button>\n\t\t\t\t</motion.div>\n\n\t\t\t\t{ showLabels && (\n\t\t\t\t\t<div className=\"edit-site-site-hub__site-title\">\n\t\t\t\t\t\t{ decodeEntities( siteTitle ) }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</motion.div>\n\t);\n} );\n\nexport default SiteHub;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/site-hub/index.js"],"names":["classnames","useSelect","useDispatch","Button","__unstableMotion","motion","__unstableAnimatePresence","AnimatePresence","__experimentalHStack","HStack","useReducedMotion","__","store","blockEditorStore","coreStore","decodeEntities","forwardRef","search","privateApis","commandsPrivateApis","editSiteStore","SiteIcon","unlock","commandsStore","HUB_ANIMATION_DURATION","SiteHub","props","ref","canvasMode","dashboardLink","select","getCanvasMode","getSettings","__experimentalDashboardLink","open","openCommandCenter","disableMotion","setCanvasMode","clearSelectedBlock","isBackToDashboardButton","siteIconButtonProps","href","label","role","onClick","event","preventDefault","siteTitle","getEntityRecord","title","className","type","duration","ease","scale","opacity","delay","window","__experimentalEnableCommandCenter"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tButton,\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { useReducedMotion } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { forwardRef } from '@wordpress/element';\nimport { search } from '@wordpress/icons';\nimport { privateApis as commandsPrivateApis } from '@wordpress/commands';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport SiteIcon from '../site-icon';\nimport { unlock } from '../../private-apis';\n\nconst { store: commandsStore } = unlock( commandsPrivateApis );\n\nconst HUB_ANIMATION_DURATION = 0.3;\n\nconst SiteHub = forwardRef( ( props, ref ) => {\n\tconst { canvasMode, dashboardLink } = useSelect( ( select ) => {\n\t\tconst { getCanvasMode, getSettings } = unlock(\n\t\t\tselect( editSiteStore )\n\t\t);\n\n\t\treturn {\n\t\t\tcanvasMode: getCanvasMode(),\n\t\t\tdashboardLink:\n\t\t\t\tgetSettings().__experimentalDashboardLink || 'index.php',\n\t\t};\n\t}, [] );\n\tconst { open: openCommandCenter } = useDispatch( commandsStore );\n\n\tconst disableMotion = useReducedMotion();\n\tconst { setCanvasMode } = unlock( useDispatch( editSiteStore ) );\n\tconst { clearSelectedBlock } = useDispatch( blockEditorStore );\n\tconst isBackToDashboardButton = canvasMode === 'view';\n\tconst siteIconButtonProps = isBackToDashboardButton\n\t\t? {\n\t\t\t\thref: dashboardLink,\n\t\t\t\tlabel: __( 'Go back to the Dashboard' ),\n\t\t  }\n\t\t: {\n\t\t\t\thref: dashboardLink, // We need to keep the `href` here so the component doesn't remount as a `<button>` and break the animation.\n\t\t\t\trole: 'button',\n\t\t\t\tlabel: __( 'Open Navigation' ),\n\t\t\t\tonClick: ( event ) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tif ( canvasMode === 'edit' ) {\n\t\t\t\t\t\tclearSelectedBlock();\n\t\t\t\t\t\tsetCanvasMode( 'view' );\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t  };\n\n\tconst siteTitle = useSelect(\n\t\t( select ) =>\n\t\t\tselect( coreStore ).getEntityRecord( 'root', 'site' )?.title,\n\t\t[]\n\t);\n\n\treturn (\n\t\t<motion.div\n\t\t\tref={ ref }\n\t\t\t{ ...props }\n\t\t\tclassName={ classnames( 'edit-site-site-hub', props.className ) }\n\t\t\tinitial={ false }\n\t\t\ttransition={ {\n\t\t\t\ttype: 'tween',\n\t\t\t\tduration: disableMotion ? 0 : HUB_ANIMATION_DURATION,\n\t\t\t\tease: 'easeOut',\n\t\t\t} }\n\t\t>\n\t\t\t<HStack justify=\"space-between\" alignment=\"center\">\n\t\t\t\t<HStack\n\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\tclassName=\"edit-site-site-hub__text-content\"\n\t\t\t\t\tspacing=\"0\"\n\t\t\t\t>\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tclassName=\"edit-site-site-hub__view-mode-toggle-container\"\n\t\t\t\t\t\tlayout\n\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\tduration: disableMotion\n\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t: HUB_ANIMATION_DURATION,\n\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t{ ...siteIconButtonProps }\n\t\t\t\t\t\t\tclassName=\"edit-site-layout__view-mode-toggle\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\tinitial={ false }\n\t\t\t\t\t\t\t\tanimate={ {\n\t\t\t\t\t\t\t\t\tscale: canvasMode === 'view' ? 0.5 : 1,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\twhileHover={ {\n\t\t\t\t\t\t\t\t\tscale: canvasMode === 'view' ? 0.5 : 0.96,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\tduration: disableMotion\n\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t: HUB_ANIMATION_DURATION,\n\t\t\t\t\t\t\t\t\tease: 'easeOut',\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<SiteIcon className=\"edit-site-layout__view-mode-toggle-icon\" />\n\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</motion.div>\n\n\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tlayout={ canvasMode === 'edit' }\n\t\t\t\t\t\t\tanimate={ {\n\t\t\t\t\t\t\t\topacity: canvasMode === 'view' ? 1 : 0,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\texit={ {\n\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tclassName=\"edit-site-site-hub__site-title\"\n\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\tduration: disableMotion ? 0 : 0.2,\n\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\tdelay: canvasMode === 'view' ? 0.1 : 0,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ decodeEntities( siteTitle ) }\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t</AnimatePresence>\n\t\t\t\t</HStack>\n\t\t\t\t{ window?.__experimentalEnableCommandCenter &&\n\t\t\t\t\tcanvasMode === 'view' && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"edit-site-site-hub_toggle-command-center\"\n\t\t\t\t\t\t\ticon={ search }\n\t\t\t\t\t\t\tonClick={ () => openCommandCenter() }\n\t\t\t\t\t\t\tlabel={ __( 'Open command center' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</motion.div>\n\t);\n} );\n\nexport default SiteHub;\n"]}

package/build-module/components/site-icon/index.js

@@ -23,18 +23,19 @@ function SiteIcon(_ref) {
     siteIconUrl
   } = useSelect(select => {
     const {
-      getEntityRecord,
-      isResolving
+      getEntityRecord
     } = select(coreDataStore);
-    const siteData = getEntityRecord('root', '__unstableBase', undefined) || {};
+    const siteData = getEntityRecord('root', '__unstableBase', undefined);
     return {
-      isRequestingSite: isResolving('core', 'getEntityRecord', ['root', '__unstableBase', undefined]),
-      siteIconUrl: siteData.site_icon_url
+      isRequestingSite: !siteData,
+      siteIconUrl: siteData === null || siteData === void 0 ? void 0 : siteData.site_icon_url
     };
   }, []);
 
   if (isRequestingSite && !siteIconUrl) {
-    return null;
+    return createElement("div", {
+      className: "edit-site-site-icon__image"
+    });
   }
 
   const icon = siteIconUrl ? createElement("img", {
@@ -43,7 +44,7 @@ function SiteIcon(_ref) {
     src: siteIconUrl
   }) : createElement(Icon, {
     className: "edit-site-site-icon__icon",
-    size: "32px",
+    size: "48px",
     icon: wordpress
   });
   return createElement("div", {

package/build-module/components/site-icon/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/site-icon/index.js"],"names":["classnames","useSelect","Icon","__","wordpress","store","coreDataStore","SiteIcon","className","isRequestingSite","siteIconUrl","select","getEntityRecord","isResolving","siteData","undefined","site_icon_url","icon"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,SAAT,QAA0B,iBAA1B;AACA,SAASC,IAAT,QAAqB,uBAArB;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SAASC,KAAK,IAAIC,aAAlB,QAAuC,sBAAvC;;AAEA,SAASC,QAAT,OAAmC;AAAA,MAAhB;AAAEC,IAAAA;AAAF,GAAgB;AAClC,QAAM;AAAEC,IAAAA,gBAAF;AAAoBC,IAAAA;AAApB,MAAoCT,SAAS,CAAIU,MAAF,IAAc;AAClE,UAAM;AAAEC,MAAAA,eAAF;AAAmBC,MAAAA;AAAnB,QAAmCF,MAAM,CAAEL,aAAF,CAA/C;AACA,UAAMQ,QAAQ,GACbF,eAAe,CAAE,MAAF,EAAU,gBAAV,EAA4BG,SAA5B,CAAf,IAA0D,EAD3D;AAGA,WAAO;AACNN,MAAAA,gBAAgB,EAAEI,WAAW,CAAE,MAAF,EAAU,iBAAV,EAA6B,CACzD,MADyD,EAEzD,gBAFyD,EAGzDE,SAHyD,CAA7B,CADvB;AAMNL,MAAAA,WAAW,EAAEI,QAAQ,CAACE;AANhB,KAAP;AAQA,GAbkD,EAahD,EAbgD,CAAnD;;AAeA,MAAKP,gBAAgB,IAAI,CAAEC,WAA3B,EAAyC;AACxC,WAAO,IAAP;AACA;;AAED,QAAMO,IAAI,GAAGP,WAAW,GACvB;AACC,IAAA,SAAS,EAAC,4BADX;AAEC,IAAA,GAAG,EAAGP,EAAE,CAAE,WAAF,CAFT;AAGC,IAAA,GAAG,EAAGO;AAHP,IADuB,GAOvB,cAAC,IAAD;AACC,IAAA,SAAS,EAAC,2BADX;AAEC,IAAA,IAAI,EAAC,MAFN;AAGC,IAAA,IAAI,EAAGN;AAHR,IAPD;AAcA,SACC;AAAK,IAAA,SAAS,EAAGJ,UAAU,CAAEQ,SAAF,EAAa,qBAAb;AAA3B,KACGS,IADH,CADD;AAKA;;AAED,eAAeV,QAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { Icon } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { wordpress } from '@wordpress/icons';\nimport { store as coreDataStore } from '@wordpress/core-data';\n\nfunction SiteIcon( { className } ) {\n\tconst { isRequestingSite, siteIconUrl } = useSelect( ( select ) => {\n\t\tconst { getEntityRecord, isResolving } = select( coreDataStore );\n\t\tconst siteData =\n\t\t\tgetEntityRecord( 'root', '__unstableBase', undefined ) || {};\n\n\t\treturn {\n\t\t\tisRequestingSite: isResolving( 'core', 'getEntityRecord', [\n\t\t\t\t'root',\n\t\t\t\t'__unstableBase',\n\t\t\t\tundefined,\n\t\t\t] ),\n\t\t\tsiteIconUrl: siteData.site_icon_url,\n\t\t};\n\t}, [] );\n\n\tif ( isRequestingSite && ! siteIconUrl ) {\n\t\treturn null;\n\t}\n\n\tconst icon = siteIconUrl ? (\n\t\t<img\n\t\t\tclassName=\"edit-site-site-icon__image\"\n\t\t\talt={ __( 'Site Icon' ) }\n\t\t\tsrc={ siteIconUrl }\n\t\t/>\n\t) : (\n\t\t<Icon\n\t\t\tclassName=\"edit-site-site-icon__icon\"\n\t\t\tsize=\"32px\"\n\t\t\ticon={ wordpress }\n\t\t/>\n\t);\n\n\treturn (\n\t\t<div className={ classnames( className, 'edit-site-site-icon' ) }>\n\t\t\t{ icon }\n\t\t</div>\n\t);\n}\n\nexport default SiteIcon;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/site-icon/index.js"],"names":["classnames","useSelect","Icon","__","wordpress","store","coreDataStore","SiteIcon","className","isRequestingSite","siteIconUrl","select","getEntityRecord","siteData","undefined","site_icon_url","icon"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,SAAT,QAA0B,iBAA1B;AACA,SAASC,IAAT,QAAqB,uBAArB;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SAASC,KAAK,IAAIC,aAAlB,QAAuC,sBAAvC;;AAEA,SAASC,QAAT,OAAmC;AAAA,MAAhB;AAAEC,IAAAA;AAAF,GAAgB;AAClC,QAAM;AAAEC,IAAAA,gBAAF;AAAoBC,IAAAA;AAApB,MAAoCT,SAAS,CAAIU,MAAF,IAAc;AAClE,UAAM;AAAEC,MAAAA;AAAF,QAAsBD,MAAM,CAAEL,aAAF,CAAlC;AACA,UAAMO,QAAQ,GAAGD,eAAe,CAAE,MAAF,EAAU,gBAAV,EAA4BE,SAA5B,CAAhC;AAEA,WAAO;AACNL,MAAAA,gBAAgB,EAAE,CAAEI,QADd;AAENH,MAAAA,WAAW,EAAEG,QAAF,aAAEA,QAAF,uBAAEA,QAAQ,CAAEE;AAFjB,KAAP;AAIA,GARkD,EAQhD,EARgD,CAAnD;;AAUA,MAAKN,gBAAgB,IAAI,CAAEC,WAA3B,EAAyC;AACxC,WAAO;AAAK,MAAA,SAAS,EAAC;AAAf,MAAP;AACA;;AAED,QAAMM,IAAI,GAAGN,WAAW,GACvB;AACC,IAAA,SAAS,EAAC,4BADX;AAEC,IAAA,GAAG,EAAGP,EAAE,CAAE,WAAF,CAFT;AAGC,IAAA,GAAG,EAAGO;AAHP,IADuB,GAOvB,cAAC,IAAD;AACC,IAAA,SAAS,EAAC,2BADX;AAEC,IAAA,IAAI,EAAC,MAFN;AAGC,IAAA,IAAI,EAAGN;AAHR,IAPD;AAcA,SACC;AAAK,IAAA,SAAS,EAAGJ,UAAU,CAAEQ,SAAF,EAAa,qBAAb;AAA3B,KACGQ,IADH,CADD;AAKA;;AAED,eAAeT,QAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { Icon } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { wordpress } from '@wordpress/icons';\nimport { store as coreDataStore } from '@wordpress/core-data';\n\nfunction SiteIcon( { className } ) {\n\tconst { isRequestingSite, siteIconUrl } = useSelect( ( select ) => {\n\t\tconst { getEntityRecord } = select( coreDataStore );\n\t\tconst siteData = getEntityRecord( 'root', '__unstableBase', undefined );\n\n\t\treturn {\n\t\t\tisRequestingSite: ! siteData,\n\t\t\tsiteIconUrl: siteData?.site_icon_url,\n\t\t};\n\t}, [] );\n\n\tif ( isRequestingSite && ! siteIconUrl ) {\n\t\treturn <div className=\"edit-site-site-icon__image\" />;\n\t}\n\n\tconst icon = siteIconUrl ? (\n\t\t<img\n\t\t\tclassName=\"edit-site-site-icon__image\"\n\t\t\talt={ __( 'Site Icon' ) }\n\t\t\tsrc={ siteIconUrl }\n\t\t/>\n\t) : (\n\t\t<Icon\n\t\t\tclassName=\"edit-site-site-icon__icon\"\n\t\t\tsize=\"48px\"\n\t\t\ticon={ wordpress }\n\t\t/>\n\t);\n\n\treturn (\n\t\t<div className={ classnames( className, 'edit-site-site-icon' ) }>\n\t\t\t{ icon }\n\t\t</div>\n\t);\n}\n\nexport default SiteIcon;\n"]}

package/build-module/components/start-template-options/index.js

@@ -3,7 +3,7 @@ import { createElement } from "@wordpress/element";
 /**
  * WordPress dependencies
  */
-import { Modal } from '@wordpress/components';
+import { Modal, Flex, FlexItem, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect, useMemo } from '@wordpress/element';
 import { __experimentalBlockPatternsList as BlockPatternsList, store as blockEditorStore } from '@wordpress/block-editor';
@@ -36,12 +36,10 @@ function useFallbackTemplateContent(slug) {
       } = _ref;
       return setTemplateContent(content.raw);
     });
-  }, [slug]);
+  }, [isCustom, slug]);
   return templateContent;
 }
 
-const START_BLANK_TITLE = __('Start blank');
-
 function useStartPatterns(fallbackContent) {
   const {
     slug,
@@ -77,11 +75,7 @@ function useStartPatterns(fallbackContent) {
       return { ...pattern,
         blocks: parse(pattern.content)
       };
-    }), {
-      name: 'start-blank',
-      blocks: parse('<!-- wp:paragraph --><p></p><!-- /wp:paragraph -->'),
-      title: START_BLANK_TITLE
-    }];
+    })];
   }, [fallbackContent, slug, patterns]);
 }
 
@@ -94,21 +88,16 @@ function PatternSelection(_ref2) {
   const [,, onChange] = useEntityBlockEditor('postType', postType);
   const blockPatterns = useStartPatterns(fallbackContent);
   const shownBlockPatterns = useAsyncList(blockPatterns);
-  return createElement("div", {
-    className: "edit-site-start-template-options__pattern-container",
-    style: {
-      '--wp-edit-site-start-template-options-start-blank': `"${START_BLANK_TITLE}"`
-    }
-  }, createElement(BlockPatternsList, {
+  return createElement(BlockPatternsList, {
     blockPatterns: blockPatterns,
     shownPatterns: shownBlockPatterns,
     onClickPattern: (pattern, blocks) => {
-      onChange('start-blank' === pattern.name ? [] : blocks, {
+      onChange(blocks, {
         selection: undefined
       });
       onChoosePattern();
     }
-  }));
+  });
 }
 
 function StartModal(_ref3) {
@@ -129,7 +118,8 @@ function StartModal(_ref3) {
     title: __('Choose a pattern'),
     closeLabel: __('Cancel'),
     focusOnMount: "firstElement",
-    onRequestClose: onClose
+    onRequestClose: onClose,
+    isFullScreen: true
   }, createElement("div", {
     className: "edit-site-start-template-options__modal-content"
   }, createElement(PatternSelection, {
@@ -140,7 +130,14 @@ function StartModal(_ref3) {
     onChoosePattern: () => {
       onClose();
     }
-  })));
+  })), createElement(Flex, {
+    className: "edit-site-start-template-options__modal__actions",
+    justify: "flex-end",
+    expanded: false
+  }, createElement(FlexItem, null, createElement(Button, {
+    variant: "tertiary",
+    onClick: onClose
+  }, __('Skip')))));
 }
 
 const START_TEMPLATE_MODAL_STATES = {
@@ -150,7 +147,7 @@ const START_TEMPLATE_MODAL_STATES = {
 export default function StartTemplateOptions() {
   const [modalState, setModalState] = useState(START_TEMPLATE_MODAL_STATES.INITIAL);
   const {
-    shouldOpenModel,
+    shouldOpenModal,
     slug,
     isCustom,
     postType
@@ -164,20 +161,20 @@ export default function StartTemplateOptions() {
 
     const postId = getEditedPostId();
     const {
-      __experimentalGetDirtyEntityRecords,
-      getEditedEntityRecord
+      getEditedEntityRecord,
+      hasEditsForEntityRecord
     } = select(coreStore);
     const templateRecord = getEditedEntityRecord('postType', _postType, postId);
-    const hasDirtyEntityRecords = __experimentalGetDirtyEntityRecords().length > 0;
+    const hasEdits = hasEditsForEntityRecord('postType', _postType, postId);
     return {
-      shouldOpenModel: !hasDirtyEntityRecords && '' === templateRecord.content && 'wp_template' === _postType && !select(preferencesStore).get('core/edit-site', 'welcomeGuide'),
+      shouldOpenModal: !hasEdits && '' === templateRecord.content && 'wp_template' === _postType && !select(preferencesStore).get('core/edit-site', 'welcomeGuide'),
       slug: templateRecord.slug,
       isCustom: templateRecord.is_custom,
       postType: _postType
     };
   }, []);
 
-  if (modalState === START_TEMPLATE_MODAL_STATES.INITIAL && !shouldOpenModel || modalState === START_TEMPLATE_MODAL_STATES.CLOSED) {
+  if (modalState === START_TEMPLATE_MODAL_STATES.INITIAL && !shouldOpenModal || modalState === START_TEMPLATE_MODAL_STATES.CLOSED) {
     return null;
   }
 

package/build-module/components/start-template-options/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/start-template-options/index.js"],"names":["Modal","__","useState","useEffect","useMemo","__experimentalBlockPatternsList","BlockPatternsList","store","blockEditorStore","useSelect","useAsyncList","preferencesStore","parse","editSiteStore","coreStore","useEntityBlockEditor","apiFetch","addQueryArgs","useFallbackTemplateContent","slug","isCustom","templateContent","setTemplateContent","path","is_custom","ignore_empty","then","content","raw","START_BLANK_TITLE","useStartPatterns","fallbackContent","patterns","select","getEditedPostType","getEditedPostId","getEntityRecord","postId","postType","record","getSettings","__experimentalBlockPatterns","name","blocks","title","filter","pattern","Array","isArray","templateTypes","some","templateType","startsWith","map","PatternSelection","onChoosePattern","onChange","blockPatterns","shownBlockPatterns","selection","undefined","StartModal","onClose","START_TEMPLATE_MODAL_STATES","INITIAL","CLOSED","StartTemplateOptions","modalState","setModalState","shouldOpenModel","_postType","__experimentalGetDirtyEntityRecords","getEditedEntityRecord","templateRecord","hasDirtyEntityRecords","length","get"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Modal } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useState, useEffect, useMemo } from '@wordpress/element';\nimport {\n\t__experimentalBlockPatternsList as BlockPatternsList,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { useAsyncList } from '@wordpress/compose';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport { parse } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';\nimport apiFetch from '@wordpress/api-fetch';\nimport { addQueryArgs } from '@wordpress/url';\n\nfunction useFallbackTemplateContent( slug, isCustom = false ) {\n\tconst [ templateContent, setTemplateContent ] = useState( '' );\n\n\tuseEffect( () => {\n\t\tapiFetch( {\n\t\t\tpath: addQueryArgs( '/wp/v2/templates/lookup', {\n\t\t\t\tslug,\n\t\t\t\tis_custom: isCustom,\n\t\t\t\tignore_empty: true,\n\t\t\t} ),\n\t\t} ).then( ( { content } ) => setTemplateContent( content.raw ) );\n\t}, [ slug ] );\n\treturn templateContent;\n}\n\nconst START_BLANK_TITLE = __( 'Start blank' );\n\nfunction useStartPatterns( fallbackContent ) {\n\tconst { slug, patterns } = useSelect( ( select ) => {\n\t\tconst { getEditedPostType, getEditedPostId } = select( editSiteStore );\n\t\tconst { getEntityRecord } = select( coreStore );\n\t\tconst postId = getEditedPostId();\n\t\tconst postType = getEditedPostType();\n\t\tconst record = getEntityRecord( 'postType', postType, postId );\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\treturn {\n\t\t\tslug: record.slug,\n\t\t\tpatterns: getSettings().__experimentalBlockPatterns,\n\t\t};\n\t}, [] );\n\n\treturn useMemo( () => {\n\t\t// filter patterns that are supposed to be used in the current template being edited.\n\t\treturn [\n\t\t\t{\n\t\t\t\tname: 'fallback',\n\t\t\t\tblocks: parse( fallbackContent ),\n\t\t\t\ttitle: __( 'Fallback content' ),\n\t\t\t},\n\t\t\t...patterns\n\t\t\t\t.filter( ( pattern ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\tArray.isArray( pattern.templateTypes ) &&\n\t\t\t\t\t\tpattern.templateTypes.some( ( templateType ) =>\n\t\t\t\t\t\t\tslug.startsWith( templateType )\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\t\t\t\t} )\n\t\t\t\t.map( ( pattern ) => {\n\t\t\t\t\treturn { ...pattern, blocks: parse( pattern.content ) };\n\t\t\t\t} ),\n\t\t\t{\n\t\t\t\tname: 'start-blank',\n\t\t\t\tblocks: parse(\n\t\t\t\t\t'<!-- wp:paragraph --><p></p><!-- /wp:paragraph -->'\n\t\t\t\t),\n\t\t\t\ttitle: START_BLANK_TITLE,\n\t\t\t},\n\t\t];\n\t}, [ fallbackContent, slug, patterns ] );\n}\n\nfunction PatternSelection( { fallbackContent, onChoosePattern, postType } ) {\n\tconst [ , , onChange ] = useEntityBlockEditor( 'postType', postType );\n\tconst blockPatterns = useStartPatterns( fallbackContent );\n\tconst shownBlockPatterns = useAsyncList( blockPatterns );\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"edit-site-start-template-options__pattern-container\"\n\t\t\tstyle={ {\n\t\t\t\t'--wp-edit-site-start-template-options-start-blank': `\"${ START_BLANK_TITLE }\"`,\n\t\t\t} }\n\t\t>\n\t\t\t<BlockPatternsList\n\t\t\t\tblockPatterns={ blockPatterns }\n\t\t\t\tshownPatterns={ shownBlockPatterns }\n\t\t\t\tonClickPattern={ ( pattern, blocks ) => {\n\t\t\t\t\tonChange( 'start-blank' === pattern.name ? [] : blocks, {\n\t\t\t\t\t\tselection: undefined,\n\t\t\t\t\t} );\n\t\t\t\t\tonChoosePattern();\n\t\t\t\t} }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nfunction StartModal( { slug, isCustom, onClose, postType } ) {\n\tconst fallbackContent = useFallbackTemplateContent( slug, isCustom );\n\tif ( ! fallbackContent ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"edit-site-start-template-options__modal\"\n\t\t\ttitle={ __( 'Choose a pattern' ) }\n\t\t\tcloseLabel={ __( 'Cancel' ) }\n\t\t\tfocusOnMount=\"firstElement\"\n\t\t\tonRequestClose={ onClose }\n\t\t>\n\t\t\t<div className=\"edit-site-start-template-options__modal-content\">\n\t\t\t\t<PatternSelection\n\t\t\t\t\tfallbackContent={ fallbackContent }\n\t\t\t\t\tslug={ slug }\n\t\t\t\t\tisCustom={ isCustom }\n\t\t\t\t\tpostType={ postType }\n\t\t\t\t\tonChoosePattern={ () => {\n\t\t\t\t\t\tonClose();\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n\nconst START_TEMPLATE_MODAL_STATES = {\n\tINITIAL: 'INITIAL',\n\tCLOSED: 'CLOSED',\n};\n\nexport default function StartTemplateOptions() {\n\tconst [ modalState, setModalState ] = useState(\n\t\tSTART_TEMPLATE_MODAL_STATES.INITIAL\n\t);\n\tconst { shouldOpenModel, slug, isCustom, postType } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getEditedPostType, getEditedPostId } =\n\t\t\t\tselect( editSiteStore );\n\t\t\tconst _postType = getEditedPostType();\n\t\t\tconst postId = getEditedPostId();\n\t\t\tconst {\n\t\t\t\t__experimentalGetDirtyEntityRecords,\n\t\t\t\tgetEditedEntityRecord,\n\t\t\t} = select( coreStore );\n\t\t\tconst templateRecord = getEditedEntityRecord(\n\t\t\t\t'postType',\n\t\t\t\t_postType,\n\t\t\t\tpostId\n\t\t\t);\n\n\t\t\tconst hasDirtyEntityRecords =\n\t\t\t\t__experimentalGetDirtyEntityRecords().length > 0;\n\n\t\t\treturn {\n\t\t\t\tshouldOpenModel:\n\t\t\t\t\t! hasDirtyEntityRecords &&\n\t\t\t\t\t'' === templateRecord.content &&\n\t\t\t\t\t'wp_template' === _postType &&\n\t\t\t\t\t! select( preferencesStore ).get(\n\t\t\t\t\t\t'core/edit-site',\n\t\t\t\t\t\t'welcomeGuide'\n\t\t\t\t\t),\n\t\t\t\tslug: templateRecord.slug,\n\t\t\t\tisCustom: templateRecord.is_custom,\n\t\t\t\tpostType: _postType,\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\tif (\n\t\t( modalState === START_TEMPLATE_MODAL_STATES.INITIAL &&\n\t\t\t! shouldOpenModel ) ||\n\t\tmodalState === START_TEMPLATE_MODAL_STATES.CLOSED\n\t) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<StartModal\n\t\t\tslug={ slug }\n\t\t\tisCustom={ isCustom }\n\t\t\tpostType={ postType }\n\t\t\tonClose={ () =>\n\t\t\t\tsetModalState( START_TEMPLATE_MODAL_STATES.CLOSED )\n\t\t\t}\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/start-template-options/index.js"],"names":["Modal","Flex","FlexItem","Button","__","useState","useEffect","useMemo","__experimentalBlockPatternsList","BlockPatternsList","store","blockEditorStore","useSelect","useAsyncList","preferencesStore","parse","editSiteStore","coreStore","useEntityBlockEditor","apiFetch","addQueryArgs","useFallbackTemplateContent","slug","isCustom","templateContent","setTemplateContent","path","is_custom","ignore_empty","then","content","raw","useStartPatterns","fallbackContent","patterns","select","getEditedPostType","getEditedPostId","getEntityRecord","postId","postType","record","getSettings","__experimentalBlockPatterns","name","blocks","title","filter","pattern","Array","isArray","templateTypes","some","templateType","startsWith","map","PatternSelection","onChoosePattern","onChange","blockPatterns","shownBlockPatterns","selection","undefined","StartModal","onClose","START_TEMPLATE_MODAL_STATES","INITIAL","CLOSED","StartTemplateOptions","modalState","setModalState","shouldOpenModal","_postType","getEditedEntityRecord","hasEditsForEntityRecord","templateRecord","hasEdits","get"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Modal, Flex, FlexItem, Button } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useState, useEffect, useMemo } from '@wordpress/element';\nimport {\n\t__experimentalBlockPatternsList as BlockPatternsList,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { useAsyncList } from '@wordpress/compose';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport { parse } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';\nimport apiFetch from '@wordpress/api-fetch';\nimport { addQueryArgs } from '@wordpress/url';\n\nfunction useFallbackTemplateContent( slug, isCustom = false ) {\n\tconst [ templateContent, setTemplateContent ] = useState( '' );\n\n\tuseEffect( () => {\n\t\tapiFetch( {\n\t\t\tpath: addQueryArgs( '/wp/v2/templates/lookup', {\n\t\t\t\tslug,\n\t\t\t\tis_custom: isCustom,\n\t\t\t\tignore_empty: true,\n\t\t\t} ),\n\t\t} ).then( ( { content } ) => setTemplateContent( content.raw ) );\n\t}, [ isCustom, slug ] );\n\treturn templateContent;\n}\n\nfunction useStartPatterns( fallbackContent ) {\n\tconst { slug, patterns } = useSelect( ( select ) => {\n\t\tconst { getEditedPostType, getEditedPostId } = select( editSiteStore );\n\t\tconst { getEntityRecord } = select( coreStore );\n\t\tconst postId = getEditedPostId();\n\t\tconst postType = getEditedPostType();\n\t\tconst record = getEntityRecord( 'postType', postType, postId );\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\treturn {\n\t\t\tslug: record.slug,\n\t\t\tpatterns: getSettings().__experimentalBlockPatterns,\n\t\t};\n\t}, [] );\n\n\treturn useMemo( () => {\n\t\t// filter patterns that are supposed to be used in the current template being edited.\n\t\treturn [\n\t\t\t{\n\t\t\t\tname: 'fallback',\n\t\t\t\tblocks: parse( fallbackContent ),\n\t\t\t\ttitle: __( 'Fallback content' ),\n\t\t\t},\n\t\t\t...patterns\n\t\t\t\t.filter( ( pattern ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\tArray.isArray( pattern.templateTypes ) &&\n\t\t\t\t\t\tpattern.templateTypes.some( ( templateType ) =>\n\t\t\t\t\t\t\tslug.startsWith( templateType )\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\t\t\t\t} )\n\t\t\t\t.map( ( pattern ) => {\n\t\t\t\t\treturn { ...pattern, blocks: parse( pattern.content ) };\n\t\t\t\t} ),\n\t\t];\n\t}, [ fallbackContent, slug, patterns ] );\n}\n\nfunction PatternSelection( { fallbackContent, onChoosePattern, postType } ) {\n\tconst [ , , onChange ] = useEntityBlockEditor( 'postType', postType );\n\tconst blockPatterns = useStartPatterns( fallbackContent );\n\tconst shownBlockPatterns = useAsyncList( blockPatterns );\n\treturn (\n\t\t<BlockPatternsList\n\t\t\tblockPatterns={ blockPatterns }\n\t\t\tshownPatterns={ shownBlockPatterns }\n\t\t\tonClickPattern={ ( pattern, blocks ) => {\n\t\t\t\tonChange( blocks, { selection: undefined } );\n\t\t\t\tonChoosePattern();\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nfunction StartModal( { slug, isCustom, onClose, postType } ) {\n\tconst fallbackContent = useFallbackTemplateContent( slug, isCustom );\n\tif ( ! fallbackContent ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"edit-site-start-template-options__modal\"\n\t\t\ttitle={ __( 'Choose a pattern' ) }\n\t\t\tcloseLabel={ __( 'Cancel' ) }\n\t\t\tfocusOnMount=\"firstElement\"\n\t\t\tonRequestClose={ onClose }\n\t\t\tisFullScreen={ true }\n\t\t>\n\t\t\t<div className=\"edit-site-start-template-options__modal-content\">\n\t\t\t\t<PatternSelection\n\t\t\t\t\tfallbackContent={ fallbackContent }\n\t\t\t\t\tslug={ slug }\n\t\t\t\t\tisCustom={ isCustom }\n\t\t\t\t\tpostType={ postType }\n\t\t\t\t\tonChoosePattern={ () => {\n\t\t\t\t\t\tonClose();\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<Flex\n\t\t\t\tclassName=\"edit-site-start-template-options__modal__actions\"\n\t\t\t\tjustify=\"flex-end\"\n\t\t\t\texpanded={ false }\n\t\t\t>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<Button variant=\"tertiary\" onClick={ onClose }>\n\t\t\t\t\t\t{ __( 'Skip' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</FlexItem>\n\t\t\t</Flex>\n\t\t</Modal>\n\t);\n}\n\nconst START_TEMPLATE_MODAL_STATES = {\n\tINITIAL: 'INITIAL',\n\tCLOSED: 'CLOSED',\n};\n\nexport default function StartTemplateOptions() {\n\tconst [ modalState, setModalState ] = useState(\n\t\tSTART_TEMPLATE_MODAL_STATES.INITIAL\n\t);\n\tconst { shouldOpenModal, slug, isCustom, postType } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getEditedPostType, getEditedPostId } =\n\t\t\t\tselect( editSiteStore );\n\t\t\tconst _postType = getEditedPostType();\n\t\t\tconst postId = getEditedPostId();\n\t\t\tconst { getEditedEntityRecord, hasEditsForEntityRecord } =\n\t\t\t\tselect( coreStore );\n\t\t\tconst templateRecord = getEditedEntityRecord(\n\t\t\t\t'postType',\n\t\t\t\t_postType,\n\t\t\t\tpostId\n\t\t\t);\n\t\t\tconst hasEdits = hasEditsForEntityRecord(\n\t\t\t\t'postType',\n\t\t\t\t_postType,\n\t\t\t\tpostId\n\t\t\t);\n\n\t\t\treturn {\n\t\t\t\tshouldOpenModal:\n\t\t\t\t\t! hasEdits &&\n\t\t\t\t\t'' === templateRecord.content &&\n\t\t\t\t\t'wp_template' === _postType &&\n\t\t\t\t\t! select( preferencesStore ).get(\n\t\t\t\t\t\t'core/edit-site',\n\t\t\t\t\t\t'welcomeGuide'\n\t\t\t\t\t),\n\t\t\t\tslug: templateRecord.slug,\n\t\t\t\tisCustom: templateRecord.is_custom,\n\t\t\t\tpostType: _postType,\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\tif (\n\t\t( modalState === START_TEMPLATE_MODAL_STATES.INITIAL &&\n\t\t\t! shouldOpenModal ) ||\n\t\tmodalState === START_TEMPLATE_MODAL_STATES.CLOSED\n\t) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<StartModal\n\t\t\tslug={ slug }\n\t\t\tisCustom={ isCustom }\n\t\t\tpostType={ postType }\n\t\t\tonClose={ () =>\n\t\t\t\tsetModalState( START_TEMPLATE_MODAL_STATES.CLOSED )\n\t\t\t}\n\t\t/>\n\t);\n}\n"]}

package/build-module/components/style-book/index.js

@@ -9,29 +9,23 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 
-import { Button, __unstableComposite as Composite, __unstableUseCompositeState as useCompositeState, __unstableCompositeItem as CompositeItem, Disabled, TabPanel, createSlotFill, __experimentalUseSlotFills as useSlotFills } from '@wordpress/components';
+import { __unstableComposite as Composite, __unstableUseCompositeState as useCompositeState, __unstableCompositeItem as CompositeItem, Disabled, TabPanel } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { getCategories, getBlockTypes, getBlockFromExample, createBlock } from '@wordpress/blocks';
 import { BlockList, privateApis as blockEditorPrivateApis, store as blockEditorStore, __unstableEditorStyles as EditorStyles, __unstableIframe as Iframe } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { closeSmall } from '@wordpress/icons';
-import { useResizeObserver, useFocusOnMount, useFocusReturn, useMergeRefs } from '@wordpress/compose';
+import { useResizeObserver } from '@wordpress/compose';
 import { useMemo, memo } from '@wordpress/element';
-import { ESCAPE } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
 
 import { unlock } from '../../private-apis';
+import EditorCanvasContainer from '../editor-canvas-container';
 const {
   ExperimentalBlockEditorProvider,
   useGlobalStyle
-} = unlock(blockEditorPrivateApis);
-const SLOT_FILL_NAME = 'EditSiteStyleBook';
-const {
-  Slot: StyleBookSlot,
-  Fill: StyleBookFill
-} = createSlotFill(SLOT_FILL_NAME); // The content area of the Style Book is rendered within an iframe so that global styles
+} = unlock(blockEditorPrivateApis); // The content area of the Style Book is rendered within an iframe so that global styles
 // are applied to elements within the entire content area. To support elements that are
 // not part of the block previews, such as headings and layout for the block previews,
 // additional CSS rules need to be passed into the iframe. These are hard-coded below.
@@ -145,12 +139,9 @@ function getExamples() {
 function StyleBook(_ref) {
   let {
     isSelected,
-    onSelect,
-    onClose
+    onSelect
   } = _ref;
   const [resizeObserver, sizes] = useResizeObserver();
-  const focusOnMountRef = useFocusOnMount('firstElement');
-  const sectionFocusReturnRef = useFocusReturn();
   const [textColor] = useGlobalStyle('color.text');
   const [backgroundColor] = useGlobalStyle('color.background');
   const examples = useMemo(getExamples, []);
@@ -163,32 +154,17 @@ function StyleBook(_ref) {
   const settings = useMemo(() => ({ ...originalSettings,
     __unstableIsPreviewMode: true
   }), [originalSettings]);
-
-  function closeOnEscape(event) {
-    if (event.keyCode === ESCAPE && !event.defaultPrevented) {
-      event.preventDefault();
-      onClose();
-    }
-  }
-
-  return createElement(StyleBookFill, null, createElement("section", {
+  return createElement(EditorCanvasContainer, {
+    closeButtonLabel: __('Close Style Book')
+  }, createElement("div", {
     className: classnames('edit-site-style-book', {
       'is-wide': sizes.width > 600
     }),
     style: {
       color: textColor,
       background: backgroundColor
-    },
-    "aria-label": __('Style Book'),
-    onKeyDown: closeOnEscape,
-    ref: useMergeRefs([sectionFocusReturnRef, focusOnMountRef])
-  }, resizeObserver, createElement(Button, {
-    className: "edit-site-style-book__close-button",
-    icon: closeSmall,
-    label: __('Close Style Book'),
-    onClick: onClose,
-    showTooltip: false
-  }), createElement(TabPanel, {
+    }
+  }, resizeObserver, createElement(TabPanel, {
     className: "edit-site-style-book__tab-panel",
     tabs: tabs
   }, tab => createElement(Iframe, {
@@ -281,12 +257,5 @@ const Example = _ref3 => {
   })))));
 };
 
-function useHasStyleBook() {
-  const fills = useSlotFills(SLOT_FILL_NAME);
-  return !!(fills !== null && fills !== void 0 && fills.length);
-}
-
-StyleBook.Slot = StyleBookSlot;
 export default StyleBook;
-export { useHasStyleBook };
 //# sourceMappingURL=index.js.map

package/build-module/components/style-book/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/style-book/index.js"],"names":["classnames","Button","__unstableComposite","Composite","__unstableUseCompositeState","useCompositeState","__unstableCompositeItem","CompositeItem","Disabled","TabPanel","createSlotFill","__experimentalUseSlotFills","useSlotFills","__","sprintf","getCategories","getBlockTypes","getBlockFromExample","createBlock","BlockList","privateApis","blockEditorPrivateApis","store","blockEditorStore","__unstableEditorStyles","EditorStyles","__unstableIframe","Iframe","useSelect","closeSmall","useResizeObserver","useFocusOnMount","useFocusReturn","useMergeRefs","useMemo","memo","ESCAPE","unlock","ExperimentalBlockEditorProvider","useGlobalStyle","SLOT_FILL_NAME","Slot","StyleBookSlot","Fill","StyleBookFill","STYLE_BOOK_IFRAME_STYLES","getExamples","headingsExample","name","title","category","blocks","content","level","otherExamples","filter","blockType","example","supports","inserter","map","StyleBook","isSelected","onSelect","onClose","resizeObserver","sizes","focusOnMountRef","sectionFocusReturnRef","textColor","backgroundColor","examples","tabs","some","slug","icon","originalSettings","select","getSettings","settings","__unstableIsPreviewMode","closeOnEscape","event","keyCode","defaultPrevented","preventDefault","width","color","background","tab","styles","Examples","className","label","composite","orientation","Example","id","onClick","renderedBlocks","Array","isArray","useHasStyleBook","fills","length"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\t__unstableComposite as Composite,\n\t__unstableUseCompositeState as useCompositeState,\n\t__unstableCompositeItem as CompositeItem,\n\tDisabled,\n\tTabPanel,\n\tcreateSlotFill,\n\t__experimentalUseSlotFills as useSlotFills,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tgetCategories,\n\tgetBlockTypes,\n\tgetBlockFromExample,\n\tcreateBlock,\n} from '@wordpress/blocks';\nimport {\n\tBlockList,\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n\t__unstableEditorStyles as EditorStyles,\n\t__unstableIframe as Iframe,\n} from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { closeSmall } from '@wordpress/icons';\nimport {\n\tuseResizeObserver,\n\tuseFocusOnMount,\n\tuseFocusReturn,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { useMemo, memo } from '@wordpress/element';\nimport { ESCAPE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\n\nconst { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(\n\tblockEditorPrivateApis\n);\n\nconst SLOT_FILL_NAME = 'EditSiteStyleBook';\nconst { Slot: StyleBookSlot, Fill: StyleBookFill } =\n\tcreateSlotFill( SLOT_FILL_NAME );\n\n// The content area of the Style Book is rendered within an iframe so that global styles\n// are applied to elements within the entire content area. To support elements that are\n// not part of the block previews, such as headings and layout for the block previews,\n// additional CSS rules need to be passed into the iframe. These are hard-coded below.\n// Note that button styles are unset, and then focus rules from the `Button` component are\n// applied to the `button` element, targeted via `.edit-site-style-book__example`.\n// This is to ensure that browser default styles for buttons are not applied to the previews.\nconst STYLE_BOOK_IFRAME_STYLES = `\n\t.edit-site-style-book__examples {\n\t\tmax-width: 900px;\n\t\tmargin: 0 auto;\n\t}\n\n\t.edit-site-style-book__example {\n\t\tborder-radius: 2px;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 40px;\n\t\tmargin-bottom: 40px;\n\t\tpadding: 16px;\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.edit-site-style-book__example.is-selected {\n\t\tbox-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));\n\t}\n\n\t.edit-site-style-book__example:focus:not(:disabled) {\n\t\tbox-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));\n\t\toutline: 3px solid transparent;\n\t}\n\n\t.edit-site-style-book__examples.is-wide .edit-site-style-book__example {\n\t\tflex-direction: row;\n\t}\n\n\t.edit-site-style-book__example-title {\n\t\tfont-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n\t\tfont-size: 11px;\n\t\tfont-weight: 500;\n\t\tline-height: normal;\n\t\tmargin: 0;\n\t\ttext-align: left;\n\t\ttext-transform: uppercase;\n\t}\n\n\t.edit-site-style-book__examples.is-wide .edit-site-style-book__example-title {\n\t\ttext-align: right;\n\t\twidth: 120px;\n\t}\n\n\t.edit-site-style-book__example-preview {\n\t\twidth: 100%;\n\t}\n\n\t.edit-site-style-book__example-preview .block-editor-block-list__insertion-point,\n\t.edit-site-style-book__example-preview .block-list-appender {\n\t\tdisplay: none;\n\t}\n\n\t.edit-site-style-book__example-preview .is-root-container > .wp-block:first-child {\n\t\tmargin-top: 0;\n\t}\n\t.edit-site-style-book__example-preview .is-root-container > .wp-block:last-child {\n\t\tmargin-bottom: 0;\n\t}\n`;\n\nfunction getExamples() {\n\t// Use our own example for the Heading block so that we can show multiple\n\t// heading levels.\n\tconst headingsExample = {\n\t\tname: 'core/heading',\n\t\ttitle: __( 'Headings' ),\n\t\tcategory: 'text',\n\t\tblocks: [\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 1,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 2,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 3,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 4,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 5,\n\t\t\t} ),\n\t\t],\n\t};\n\n\tconst otherExamples = getBlockTypes()\n\t\t.filter( ( blockType ) => {\n\t\t\tconst { name, example, supports } = blockType;\n\t\t\treturn (\n\t\t\t\tname !== 'core/heading' &&\n\t\t\t\t!! example &&\n\t\t\t\tsupports.inserter !== false\n\t\t\t);\n\t\t} )\n\t\t.map( ( blockType ) => ( {\n\t\t\tname: blockType.name,\n\t\t\ttitle: blockType.title,\n\t\t\tcategory: blockType.category,\n\t\t\tblocks: getBlockFromExample( blockType.name, blockType.example ),\n\t\t} ) );\n\n\treturn [ headingsExample, ...otherExamples ];\n}\n\nfunction StyleBook( { isSelected, onSelect, onClose } ) {\n\tconst [ resizeObserver, sizes ] = useResizeObserver();\n\tconst focusOnMountRef = useFocusOnMount( 'firstElement' );\n\tconst sectionFocusReturnRef = useFocusReturn();\n\n\tconst [ textColor ] = useGlobalStyle( 'color.text' );\n\tconst [ backgroundColor ] = useGlobalStyle( 'color.background' );\n\tconst examples = useMemo( getExamples, [] );\n\tconst tabs = useMemo(\n\t\t() =>\n\t\t\tgetCategories()\n\t\t\t\t.filter( ( category ) =>\n\t\t\t\t\texamples.some(\n\t\t\t\t\t\t( example ) => example.category === category.slug\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t\t.map( ( category ) => ( {\n\t\t\t\t\tname: category.slug,\n\t\t\t\t\ttitle: category.title,\n\t\t\t\t\ticon: category.icon,\n\t\t\t\t} ) ),\n\t\t[ examples ]\n\t);\n\n\tconst originalSettings = useSelect(\n\t\t( select ) => select( blockEditorStore ).getSettings(),\n\t\t[]\n\t);\n\tconst settings = useMemo(\n\t\t() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),\n\t\t[ originalSettings ]\n\t);\n\n\tfunction closeOnEscape( event ) {\n\t\tif ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {\n\t\t\tevent.preventDefault();\n\t\t\tonClose();\n\t\t}\n\t}\n\n\treturn (\n\t\t<StyleBookFill>\n\t\t\t{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }\n\t\t\t<section\n\t\t\t\tclassName={ classnames( 'edit-site-style-book', {\n\t\t\t\t\t'is-wide': sizes.width > 600,\n\t\t\t\t} ) }\n\t\t\t\tstyle={ {\n\t\t\t\t\tcolor: textColor,\n\t\t\t\t\tbackground: backgroundColor,\n\t\t\t\t} }\n\t\t\t\taria-label={ __( 'Style Book' ) }\n\t\t\t\tonKeyDown={ closeOnEscape }\n\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\tsectionFocusReturnRef,\n\t\t\t\t\tfocusOnMountRef,\n\t\t\t\t] ) }\n\t\t\t>\n\t\t\t\t{ resizeObserver }\n\t\t\t\t<Button\n\t\t\t\t\tclassName=\"edit-site-style-book__close-button\"\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Close Style Book' ) }\n\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\tshowTooltip={ false }\n\t\t\t\t/>\n\t\t\t\t<TabPanel\n\t\t\t\t\tclassName=\"edit-site-style-book__tab-panel\"\n\t\t\t\t\ttabs={ tabs }\n\t\t\t\t>\n\t\t\t\t\t{ ( tab ) => (\n\t\t\t\t\t\t<Iframe\n\t\t\t\t\t\t\tclassName=\"edit-site-style-book__iframe\"\n\t\t\t\t\t\t\tname=\"style-book-canvas\"\n\t\t\t\t\t\t\ttabIndex={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<EditorStyles styles={ settings.styles } />\n\t\t\t\t\t\t\t<style>\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t// Forming a \"block formatting context\" to prevent margin collapsing.\n\t\t\t\t\t\t\t\t\t// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context\n\t\t\t\t\t\t\t\t\t`.is-root-container { display: flow-root; }\n\t\t\t\t\t\t\t\t\t\t\tbody { position: relative; padding: 32px !important; }` +\n\t\t\t\t\t\t\t\t\t\tSTYLE_BOOK_IFRAME_STYLES\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</style>\n\t\t\t\t\t\t\t<Examples\n\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t'edit-site-style-book__examples',\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t'is-wide': sizes.width > 600,\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\texamples={ examples }\n\t\t\t\t\t\t\t\tcategory={ tab.name }\n\t\t\t\t\t\t\t\tlabel={ sprintf(\n\t\t\t\t\t\t\t\t\t// translators: %s: Category of blocks, e.g. Text.\n\t\t\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t\t\t'Examples of blocks in the %s category'\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\ttab.title\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Iframe>\n\t\t\t\t\t) }\n\t\t\t\t</TabPanel>\n\t\t\t</section>\n\t\t</StyleBookFill>\n\t);\n}\n\nconst Examples = memo(\n\t( { className, examples, category, label, isSelected, onSelect } ) => {\n\t\tconst composite = useCompositeState( { orientation: 'vertical' } );\n\t\treturn (\n\t\t\t<Composite\n\t\t\t\t{ ...composite }\n\t\t\t\tclassName={ className }\n\t\t\t\taria-label={ label }\n\t\t\t>\n\t\t\t\t{ examples\n\t\t\t\t\t.filter( ( example ) => example.category === category )\n\t\t\t\t\t.map( ( example ) => (\n\t\t\t\t\t\t<Example\n\t\t\t\t\t\t\tkey={ example.name }\n\t\t\t\t\t\t\tid={ `example-${ example.name }` }\n\t\t\t\t\t\t\tcomposite={ composite }\n\t\t\t\t\t\t\ttitle={ example.title }\n\t\t\t\t\t\t\tblocks={ example.blocks }\n\t\t\t\t\t\t\tisSelected={ isSelected( example.name ) }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tonSelect( example.name );\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</Composite>\n\t\t);\n\t}\n);\n\nconst Example = ( { composite, id, title, blocks, isSelected, onClick } ) => {\n\tconst originalSettings = useSelect(\n\t\t( select ) => select( blockEditorStore ).getSettings(),\n\t\t[]\n\t);\n\tconst settings = useMemo(\n\t\t() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),\n\t\t[ originalSettings ]\n\t);\n\n\t// Cache the list of blocks to avoid additional processing when the component is re-rendered.\n\tconst renderedBlocks = useMemo(\n\t\t() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),\n\t\t[ blocks ]\n\t);\n\n\treturn (\n\t\t<CompositeItem\n\t\t\t{ ...composite }\n\t\t\tclassName={ classnames( 'edit-site-style-book__example', {\n\t\t\t\t'is-selected': isSelected,\n\t\t\t} ) }\n\t\t\tid={ id }\n\t\t\taria-label={ sprintf(\n\t\t\t\t// translators: %s: Title of a block, e.g. Heading.\n\t\t\t\t__( 'Open %s styles in Styles panel' ),\n\t\t\t\ttitle\n\t\t\t) }\n\t\t\tonClick={ onClick }\n\t\t\trole=\"button\"\n\t\t\tas=\"div\"\n\t\t>\n\t\t\t<span className=\"edit-site-style-book__example-title\">\n\t\t\t\t{ title }\n\t\t\t</span>\n\t\t\t<div className=\"edit-site-style-book__example-preview\" aria-hidden>\n\t\t\t\t<Disabled className=\"edit-site-style-book__example-preview__content\">\n\t\t\t\t\t<ExperimentalBlockEditorProvider\n\t\t\t\t\t\tvalue={ renderedBlocks }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t>\n\t\t\t\t\t\t<BlockList renderAppender={ false } />\n\t\t\t\t\t</ExperimentalBlockEditorProvider>\n\t\t\t\t</Disabled>\n\t\t\t</div>\n\t\t</CompositeItem>\n\t);\n};\n\nfunction useHasStyleBook() {\n\tconst fills = useSlotFills( SLOT_FILL_NAME );\n\treturn !! fills?.length;\n}\n\nStyleBook.Slot = StyleBookSlot;\nexport default StyleBook;\nexport { useHasStyleBook };\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/style-book/index.js"],"names":["classnames","__unstableComposite","Composite","__unstableUseCompositeState","useCompositeState","__unstableCompositeItem","CompositeItem","Disabled","TabPanel","__","sprintf","getCategories","getBlockTypes","getBlockFromExample","createBlock","BlockList","privateApis","blockEditorPrivateApis","store","blockEditorStore","__unstableEditorStyles","EditorStyles","__unstableIframe","Iframe","useSelect","useResizeObserver","useMemo","memo","unlock","EditorCanvasContainer","ExperimentalBlockEditorProvider","useGlobalStyle","STYLE_BOOK_IFRAME_STYLES","getExamples","headingsExample","name","title","category","blocks","content","level","otherExamples","filter","blockType","example","supports","inserter","map","StyleBook","isSelected","onSelect","resizeObserver","sizes","textColor","backgroundColor","examples","tabs","some","slug","icon","originalSettings","select","getSettings","settings","__unstableIsPreviewMode","width","color","background","tab","styles","Examples","className","label","composite","orientation","Example","id","onClick","renderedBlocks","Array","isArray"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__unstableComposite as Composite,\n\t__unstableUseCompositeState as useCompositeState,\n\t__unstableCompositeItem as CompositeItem,\n\tDisabled,\n\tTabPanel,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tgetCategories,\n\tgetBlockTypes,\n\tgetBlockFromExample,\n\tcreateBlock,\n} from '@wordpress/blocks';\nimport {\n\tBlockList,\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n\t__unstableEditorStyles as EditorStyles,\n\t__unstableIframe as Iframe,\n} from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { useResizeObserver } from '@wordpress/compose';\nimport { useMemo, memo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\nimport EditorCanvasContainer from '../editor-canvas-container';\n\nconst { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(\n\tblockEditorPrivateApis\n);\n\n// The content area of the Style Book is rendered within an iframe so that global styles\n// are applied to elements within the entire content area. To support elements that are\n// not part of the block previews, such as headings and layout for the block previews,\n// additional CSS rules need to be passed into the iframe. These are hard-coded below.\n// Note that button styles are unset, and then focus rules from the `Button` component are\n// applied to the `button` element, targeted via `.edit-site-style-book__example`.\n// This is to ensure that browser default styles for buttons are not applied to the previews.\nconst STYLE_BOOK_IFRAME_STYLES = `\n\t.edit-site-style-book__examples {\n\t\tmax-width: 900px;\n\t\tmargin: 0 auto;\n\t}\n\n\t.edit-site-style-book__example {\n\t\tborder-radius: 2px;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 40px;\n\t\tmargin-bottom: 40px;\n\t\tpadding: 16px;\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.edit-site-style-book__example.is-selected {\n\t\tbox-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));\n\t}\n\n\t.edit-site-style-book__example:focus:not(:disabled) {\n\t\tbox-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));\n\t\toutline: 3px solid transparent;\n\t}\n\n\t.edit-site-style-book__examples.is-wide .edit-site-style-book__example {\n\t\tflex-direction: row;\n\t}\n\n\t.edit-site-style-book__example-title {\n\t\tfont-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n\t\tfont-size: 11px;\n\t\tfont-weight: 500;\n\t\tline-height: normal;\n\t\tmargin: 0;\n\t\ttext-align: left;\n\t\ttext-transform: uppercase;\n\t}\n\n\t.edit-site-style-book__examples.is-wide .edit-site-style-book__example-title {\n\t\ttext-align: right;\n\t\twidth: 120px;\n\t}\n\n\t.edit-site-style-book__example-preview {\n\t\twidth: 100%;\n\t}\n\n\t.edit-site-style-book__example-preview .block-editor-block-list__insertion-point,\n\t.edit-site-style-book__example-preview .block-list-appender {\n\t\tdisplay: none;\n\t}\n\n\t.edit-site-style-book__example-preview .is-root-container > .wp-block:first-child {\n\t\tmargin-top: 0;\n\t}\n\t.edit-site-style-book__example-preview .is-root-container > .wp-block:last-child {\n\t\tmargin-bottom: 0;\n\t}\n`;\n\nfunction getExamples() {\n\t// Use our own example for the Heading block so that we can show multiple\n\t// heading levels.\n\tconst headingsExample = {\n\t\tname: 'core/heading',\n\t\ttitle: __( 'Headings' ),\n\t\tcategory: 'text',\n\t\tblocks: [\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 1,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 2,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 3,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 4,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 5,\n\t\t\t} ),\n\t\t],\n\t};\n\n\tconst otherExamples = getBlockTypes()\n\t\t.filter( ( blockType ) => {\n\t\t\tconst { name, example, supports } = blockType;\n\t\t\treturn (\n\t\t\t\tname !== 'core/heading' &&\n\t\t\t\t!! example &&\n\t\t\t\tsupports.inserter !== false\n\t\t\t);\n\t\t} )\n\t\t.map( ( blockType ) => ( {\n\t\t\tname: blockType.name,\n\t\t\ttitle: blockType.title,\n\t\t\tcategory: blockType.category,\n\t\t\tblocks: getBlockFromExample( blockType.name, blockType.example ),\n\t\t} ) );\n\n\treturn [ headingsExample, ...otherExamples ];\n}\n\nfunction StyleBook( { isSelected, onSelect } ) {\n\tconst [ resizeObserver, sizes ] = useResizeObserver();\n\tconst [ textColor ] = useGlobalStyle( 'color.text' );\n\tconst [ backgroundColor ] = useGlobalStyle( 'color.background' );\n\tconst examples = useMemo( getExamples, [] );\n\tconst tabs = useMemo(\n\t\t() =>\n\t\t\tgetCategories()\n\t\t\t\t.filter( ( category ) =>\n\t\t\t\t\texamples.some(\n\t\t\t\t\t\t( example ) => example.category === category.slug\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t\t.map( ( category ) => ( {\n\t\t\t\t\tname: category.slug,\n\t\t\t\t\ttitle: category.title,\n\t\t\t\t\ticon: category.icon,\n\t\t\t\t} ) ),\n\t\t[ examples ]\n\t);\n\n\tconst originalSettings = useSelect(\n\t\t( select ) => select( blockEditorStore ).getSettings(),\n\t\t[]\n\t);\n\tconst settings = useMemo(\n\t\t() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),\n\t\t[ originalSettings ]\n\t);\n\n\treturn (\n\t\t<EditorCanvasContainer closeButtonLabel={ __( 'Close Style Book' ) }>\n\t\t\t<div\n\t\t\t\tclassName={ classnames( 'edit-site-style-book', {\n\t\t\t\t\t'is-wide': sizes.width > 600,\n\t\t\t\t} ) }\n\t\t\t\tstyle={ {\n\t\t\t\t\tcolor: textColor,\n\t\t\t\t\tbackground: backgroundColor,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ resizeObserver }\n\t\t\t\t<TabPanel\n\t\t\t\t\tclassName=\"edit-site-style-book__tab-panel\"\n\t\t\t\t\ttabs={ tabs }\n\t\t\t\t>\n\t\t\t\t\t{ ( tab ) => (\n\t\t\t\t\t\t<Iframe\n\t\t\t\t\t\t\tclassName=\"edit-site-style-book__iframe\"\n\t\t\t\t\t\t\tname=\"style-book-canvas\"\n\t\t\t\t\t\t\ttabIndex={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<EditorStyles styles={ settings.styles } />\n\t\t\t\t\t\t\t<style>\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t// Forming a \"block formatting context\" to prevent margin collapsing.\n\t\t\t\t\t\t\t\t\t// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context\n\t\t\t\t\t\t\t\t\t`.is-root-container { display: flow-root; }\n\t\t\t\t\t\t\t\t\t\t\tbody { position: relative; padding: 32px !important; }` +\n\t\t\t\t\t\t\t\t\t\tSTYLE_BOOK_IFRAME_STYLES\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</style>\n\t\t\t\t\t\t\t<Examples\n\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t'edit-site-style-book__examples',\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t'is-wide': sizes.width > 600,\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\texamples={ examples }\n\t\t\t\t\t\t\t\tcategory={ tab.name }\n\t\t\t\t\t\t\t\tlabel={ sprintf(\n\t\t\t\t\t\t\t\t\t// translators: %s: Category of blocks, e.g. Text.\n\t\t\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t\t\t'Examples of blocks in the %s category'\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\ttab.title\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Iframe>\n\t\t\t\t\t) }\n\t\t\t\t</TabPanel>\n\t\t\t</div>\n\t\t</EditorCanvasContainer>\n\t);\n}\n\nconst Examples = memo(\n\t( { className, examples, category, label, isSelected, onSelect } ) => {\n\t\tconst composite = useCompositeState( { orientation: 'vertical' } );\n\t\treturn (\n\t\t\t<Composite\n\t\t\t\t{ ...composite }\n\t\t\t\tclassName={ className }\n\t\t\t\taria-label={ label }\n\t\t\t>\n\t\t\t\t{ examples\n\t\t\t\t\t.filter( ( example ) => example.category === category )\n\t\t\t\t\t.map( ( example ) => (\n\t\t\t\t\t\t<Example\n\t\t\t\t\t\t\tkey={ example.name }\n\t\t\t\t\t\t\tid={ `example-${ example.name }` }\n\t\t\t\t\t\t\tcomposite={ composite }\n\t\t\t\t\t\t\ttitle={ example.title }\n\t\t\t\t\t\t\tblocks={ example.blocks }\n\t\t\t\t\t\t\tisSelected={ isSelected( example.name ) }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tonSelect( example.name );\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</Composite>\n\t\t);\n\t}\n);\n\nconst Example = ( { composite, id, title, blocks, isSelected, onClick } ) => {\n\tconst originalSettings = useSelect(\n\t\t( select ) => select( blockEditorStore ).getSettings(),\n\t\t[]\n\t);\n\tconst settings = useMemo(\n\t\t() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),\n\t\t[ originalSettings ]\n\t);\n\n\t// Cache the list of blocks to avoid additional processing when the component is re-rendered.\n\tconst renderedBlocks = useMemo(\n\t\t() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),\n\t\t[ blocks ]\n\t);\n\n\treturn (\n\t\t<CompositeItem\n\t\t\t{ ...composite }\n\t\t\tclassName={ classnames( 'edit-site-style-book__example', {\n\t\t\t\t'is-selected': isSelected,\n\t\t\t} ) }\n\t\t\tid={ id }\n\t\t\taria-label={ sprintf(\n\t\t\t\t// translators: %s: Title of a block, e.g. Heading.\n\t\t\t\t__( 'Open %s styles in Styles panel' ),\n\t\t\t\ttitle\n\t\t\t) }\n\t\t\tonClick={ onClick }\n\t\t\trole=\"button\"\n\t\t\tas=\"div\"\n\t\t>\n\t\t\t<span className=\"edit-site-style-book__example-title\">\n\t\t\t\t{ title }\n\t\t\t</span>\n\t\t\t<div className=\"edit-site-style-book__example-preview\" aria-hidden>\n\t\t\t\t<Disabled className=\"edit-site-style-book__example-preview__content\">\n\t\t\t\t\t<ExperimentalBlockEditorProvider\n\t\t\t\t\t\tvalue={ renderedBlocks }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t>\n\t\t\t\t\t\t<BlockList renderAppender={ false } />\n\t\t\t\t\t</ExperimentalBlockEditorProvider>\n\t\t\t\t</Disabled>\n\t\t\t</div>\n\t\t</CompositeItem>\n\t);\n};\n\nexport default StyleBook;\n"]}