@wordpress/edit-site 5.8.0 → 5.9.0

package/build/components/sidebar-edit-mode/global-styles-sidebar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js"],"names":["GlobalStylesSidebar","isStyleBookOpened","setIsStyleBookOpened","editorMode","select","editSiteStore","getEditorMode","styles","minWidth","seen"],"mappings":";;;;;;;;;AAQA;;AALA;;AACA;;AACA;;AACA;;AAOA;;AACA;;AACA;;AACA;;AAhBA;AACA;AACA;;AAQA;AACA;AACA;AAMe,SAASA,mBAAT,GAA+B;AAC7C,QAAM,CAAEC,iBAAF,EAAqBC,oBAArB,IAA8C,uBAAU,KAAV,CAApD;AACA,QAAMC,UAAU,GAAG,qBAChBC,MAAF,IAAcA,MAAM,CAAEC,YAAF,CAAN,CAAwBC,aAAxB,EADI,EAElB,EAFkB,CAAnB;AAKA,0BAAW,MAAM;AAChB,QAAKH,UAAU,KAAK,QAApB,EAA+B;AAC9BD,MAAAA,oBAAoB,CAAE,KAAF,CAApB;AACA;AACD,GAJD,EAIG,CAAEC,UAAF,CAJH;AAKA,SACC,4BAAC,uBAAD;AACC,IAAA,SAAS,EAAC,iCADX;AAEC,IAAA,UAAU,EAAC,yBAFZ;AAGC,IAAA,KAAK,EAAG,cAAI,QAAJ,CAHT;AAIC,IAAA,IAAI,EAAGI,aAJR;AAKC,IAAA,UAAU,EAAG,cAAI,sBAAJ,CALd;AAMC,IAAA,cAAc,EAAC,wCANhB;AAOC,IAAA,MAAM,EACL,4BAAC,gBAAD;AAAM,MAAA,SAAS,EAAC;AAAhB,OACC,4BAAC,qBAAD;AAAW,MAAA,KAAK,EAAG;AAAEC,QAAAA,QAAQ,EAAE;AAAZ;AAAnB,OACC,4CAAU,cAAI,QAAJ,CAAV,CADD,CADD,EAIC,4BAAC,oBAAD,QACC,4BAAC,kBAAD;AACC,MAAA,IAAI,EAAGC,WADR;AAEC,MAAA,KAAK,EAAG,cAAI,YAAJ,CAFT;AAGC,MAAA,SAAS,EAAGR,iBAHb;AAIC,MAAA,QAAQ,EAAGE,UAAU,KAAK,QAJ3B;AAKC,MAAA,OAAO,EAAG,MAAM;AACfD,QAAAA,oBAAoB,CAAE,CAAED,iBAAJ,CAApB;AACA;AAPF,MADD,CAJD,EAeC,4BAAC,oBAAD,QACC,4BAAC,wBAAD,OADD,CAfD;AARF,KA6BC,4BAAC,4BAAD;AACC,IAAA,iBAAiB,EAAGA,iBADrB;AAEC,IAAA,gBAAgB,EAAG,MAAMC,oBAAoB,CAAE,KAAF;AAF9C,IA7BD,CADD;AAoCA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { FlexItem, FlexBlock, Flex, Button } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { styles, seen } from '@wordpress/icons';\nimport { useSelect } from '@wordpress/data';\n\nimport { useState, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport DefaultSidebar from './default-sidebar';\nimport { GlobalStylesUI } from '../global-styles';\nimport { store as editSiteStore } from '../../store';\nimport { GlobalStylesMenuSlot } from '../global-styles/ui';\n\nexport default function GlobalStylesSidebar() {\n\tconst [ isStyleBookOpened, setIsStyleBookOpened ] = useState( false );\n\tconst editorMode = useSelect(\n\t\t( select ) => select( editSiteStore ).getEditorMode(),\n\t\t[]\n\t);\n\n\tuseEffect( () => {\n\t\tif ( editorMode !== 'visual' ) {\n\t\t\tsetIsStyleBookOpened( false );\n\t\t}\n\t}, [ editorMode ] );\n\treturn (\n\t\t<DefaultSidebar\n\t\t\tclassName=\"edit-site-global-styles-sidebar\"\n\t\t\tidentifier=\"edit-site/global-styles\"\n\t\t\ttitle={ __( 'Styles' ) }\n\t\t\ticon={ styles }\n\t\t\tcloseLabel={ __( 'Close Styles sidebar' ) }\n\t\t\tpanelClassName=\"edit-site-global-styles-sidebar__panel\"\n\t\t\theader={\n\t\t\t\t<Flex className=\"edit-site-global-styles-sidebar__header\">\n\t\t\t\t\t<FlexBlock style={ { minWidth: 'min-content' } }>\n\t\t\t\t\t\t<strong>{ __( 'Styles' ) }</strong>\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ticon={ seen }\n\t\t\t\t\t\t\tlabel={ __( 'Style Book' ) }\n\t\t\t\t\t\t\tisPressed={ isStyleBookOpened }\n\t\t\t\t\t\t\tdisabled={ editorMode !== 'visual' }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsStyleBookOpened( ! isStyleBookOpened );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<GlobalStylesMenuSlot />\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</Flex>\n\t\t\t}\n\t\t>\n\t\t\t<GlobalStylesUI\n\t\t\t\tisStyleBookOpened={ isStyleBookOpened }\n\t\t\t\tonCloseStyleBook={ () => setIsStyleBookOpened( false ) }\n\t\t\t/>\n\t\t</DefaultSidebar>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js"],"names":["GlobalStylesSidebar","shouldClearCanvasContainerView","isStyleBookOpened","select","getActiveComplementaryArea","interfaceStore","_isVisualEditorMode","editSiteStore","getEditorMode","getEditorCanvasContainerView","setEditorCanvasContainerView","undefined","styles","minWidth","seen"],"mappings":";;;;;;;;;AAOA;;AAJA;;AACA;;AACA;;AACA;;AAEA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAjBA;AACA;AACA;;AAQA;AACA;AACA;AAOe,SAASA,mBAAT,GAA+B;AAC7C,QAAM;AAAEC,IAAAA,8BAAF;AAAkCC,IAAAA;AAAlC,MAAwD,qBAC3DC,MAAF,IAAc;AACb,UAAM;AAAEC,MAAAA;AAAF,QAAiCD,MAAM,CAAEE,gBAAF,CAA7C;;AACA,UAAMC,mBAAmB,GACxB,aAAaH,MAAM,CAAEI,YAAF,CAAN,CAAwBC,aAAxB,EADd;;AAGA,WAAO;AACNN,MAAAA,iBAAiB,EAChB,iBACA,yBACCC,MAAM,CAAEI,YAAF,CADP,EAEEE,4BAFF,EAHK;AAMNR,MAAAA,8BAA8B,EAC7B,8BACCG,0BAA0B,CAAE,gBAAF,CAD3B,IAEA,CAAEE;AATG,KAAP;AAWA,GAjB4D,EAkB7D,EAlB6D,CAA9D;AAqBA,QAAM;AAAEI,IAAAA;AAAF,MAAmC,yBACxC,uBAAaH,YAAb,CADwC,CAAzC;AAGA,0BAAW,MAAM;AAChB,QAAKN,8BAAL,EAAsC;AACrCS,MAAAA,4BAA4B,CAAEC,SAAF,CAA5B;AACA;AACD,GAJD,EAIG,CAAEV,8BAAF,CAJH;AAMA,SACC,4BAAC,uBAAD;AACC,IAAA,SAAS,EAAC,iCADX;AAEC,IAAA,UAAU,EAAC,yBAFZ;AAGC,IAAA,KAAK,EAAG,cAAI,QAAJ,CAHT;AAIC,IAAA,IAAI,EAAGW,aAJR;AAKC,IAAA,UAAU,EAAG,cAAI,sBAAJ,CALd;AAMC,IAAA,cAAc,EAAC,wCANhB;AAOC,IAAA,MAAM,EACL,4BAAC,gBAAD;AAAM,MAAA,SAAS,EAAC;AAAhB,OACC,4BAAC,qBAAD;AAAW,MAAA,KAAK,EAAG;AAAEC,QAAAA,QAAQ,EAAE;AAAZ;AAAnB,OACC,4CAAU,cAAI,QAAJ,CAAV,CADD,CADD,EAIC,4BAAC,oBAAD,QACC,4BAAC,kBAAD;AACC,MAAA,IAAI,EAAGC,WADR;AAEC,MAAA,KAAK,EAAG,cAAI,YAAJ,CAFT;AAGC,MAAA,SAAS,EAAGZ,iBAHb;AAIC,MAAA,QAAQ,EAAGD,8BAJZ;AAKC,MAAA,OAAO,EAAG,MACTS,4BAA4B,CAC3BR,iBAAiB,GAAGS,SAAH,GAAe,YADL;AAN9B,MADD,CAJD,EAiBC,4BAAC,oBAAD,QACC,4BAAC,wBAAD,OADD,CAjBD;AARF,KA+BC,4BAAC,4BAAD,OA/BD,CADD;AAmCA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { FlexItem, FlexBlock, Flex, Button } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { styles, seen } from '@wordpress/icons';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useEffect } from '@wordpress/element';\nimport { store as interfaceStore } from '@wordpress/interface';\n\n/**\n * Internal dependencies\n */\nimport DefaultSidebar from './default-sidebar';\nimport { GlobalStylesUI } from '../global-styles';\nimport { store as editSiteStore } from '../../store';\nimport { GlobalStylesMenuSlot } from '../global-styles/ui';\nimport { unlock } from '../../private-apis';\n\nexport default function GlobalStylesSidebar() {\n\tconst { shouldClearCanvasContainerView, isStyleBookOpened } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getActiveComplementaryArea } = select( interfaceStore );\n\t\t\tconst _isVisualEditorMode =\n\t\t\t\t'visual' === select( editSiteStore ).getEditorMode();\n\n\t\t\treturn {\n\t\t\t\tisStyleBookOpened:\n\t\t\t\t\t'style-book' ===\n\t\t\t\t\tunlock(\n\t\t\t\t\t\tselect( editSiteStore )\n\t\t\t\t\t).getEditorCanvasContainerView(),\n\t\t\t\tshouldClearCanvasContainerView:\n\t\t\t\t\t'edit-site/global-styles' !==\n\t\t\t\t\t\tgetActiveComplementaryArea( 'core/edit-site' ) ||\n\t\t\t\t\t! _isVisualEditorMode,\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\tconst { setEditorCanvasContainerView } = unlock(\n\t\tuseDispatch( editSiteStore )\n\t);\n\tuseEffect( () => {\n\t\tif ( shouldClearCanvasContainerView ) {\n\t\t\tsetEditorCanvasContainerView( undefined );\n\t\t}\n\t}, [ shouldClearCanvasContainerView ] );\n\n\treturn (\n\t\t<DefaultSidebar\n\t\t\tclassName=\"edit-site-global-styles-sidebar\"\n\t\t\tidentifier=\"edit-site/global-styles\"\n\t\t\ttitle={ __( 'Styles' ) }\n\t\t\ticon={ styles }\n\t\t\tcloseLabel={ __( 'Close Styles sidebar' ) }\n\t\t\tpanelClassName=\"edit-site-global-styles-sidebar__panel\"\n\t\t\theader={\n\t\t\t\t<Flex className=\"edit-site-global-styles-sidebar__header\">\n\t\t\t\t\t<FlexBlock style={ { minWidth: 'min-content' } }>\n\t\t\t\t\t\t<strong>{ __( 'Styles' ) }</strong>\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ticon={ seen }\n\t\t\t\t\t\t\tlabel={ __( 'Style Book' ) }\n\t\t\t\t\t\t\tisPressed={ isStyleBookOpened }\n\t\t\t\t\t\t\tdisabled={ shouldClearCanvasContainerView }\n\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\tsetEditorCanvasContainerView(\n\t\t\t\t\t\t\t\t\tisStyleBookOpened ? undefined : 'style-book'\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</FlexItem>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<GlobalStylesMenuSlot />\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</Flex>\n\t\t\t}\n\t\t>\n\t\t\t<GlobalStylesUI />\n\t\t</DefaultSidebar>\n\t);\n}\n"]}

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

@@ -47,8 +47,7 @@ var _privateApis = require("../../private-apis");
 const HUB_ANIMATION_DURATION = 0.3;
 const SiteHub = (0, _element.forwardRef)((props, ref) => {
   const {
-    canvasMode,
-    dashboardLink
+    canvasMode
   } = (0, _data.useSelect)(select => {
     const {
       getCanvasMode,
@@ -66,16 +65,13 @@ const SiteHub = (0, _element.forwardRef)((props, ref) => {
   const {
     clearSelectedBlock
   } = (0, _data.useDispatch)(_blockEditor.store);
-  const isBackToDashboardButton = canvasMode === 'view';
-  const showLabels = canvasMode !== 'edit';
-  const siteIconButtonProps = isBackToDashboardButton ? {
-    href: dashboardLink || 'index.php',
-    label: (0, _i18n.__)('Go back to the Dashboard')
-  } : {
-    label: (0, _i18n.__)('Open Navigation Sidebar'),
+  const siteIconButtonProps = {
+    label: (0, _i18n.__)('Open Admin Sidebar'),
     onClick: () => {
-      clearSelectedBlock();
-      setCanvasMode('view');
+      if (canvasMode === 'edit') {
+        clearSelectedBlock();
+        setCanvasMode('view');
+      }
     }
   };
   const siteTitle = (0, _data.useSelect)(select => {
@@ -87,7 +83,7 @@ const SiteHub = (0, _element.forwardRef)((props, ref) => {
     ref: ref
   }, props, {
     className: (0, _classnames.default)('edit-site-site-hub', props.className),
-    layout: true,
+    initial: false,
     transition: {
       type: 'tween',
       duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
@@ -107,11 +103,37 @@ const SiteHub = (0, _element.forwardRef)((props, ref) => {
     }
   }, (0, _element.createElement)(_components.Button, (0, _extends2.default)({}, siteIconButtonProps, {
     className: "edit-site-layout__view-mode-toggle"
-  }), (0, _element.createElement)(_siteIcon.default, {
+  }), (0, _element.createElement)(_components.__unstableMotion.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'
+    }
+  }, (0, _element.createElement)(_siteIcon.default, {
     className: "edit-site-layout__view-mode-toggle-icon"
-  }))), showLabels && (0, _element.createElement)("div", {
-    className: "edit-site-site-hub__site-title"
-  }, (0, _htmlEntities.decodeEntities)(siteTitle))));
+  })))), (0, _element.createElement)(_components.__unstableAnimatePresence, null, (0, _element.createElement)(_components.__unstableMotion.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
+    }
+  }, (0, _htmlEntities.decodeEntities)(siteTitle)))));
 });
 var _default = SiteHub;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/site-hub/index.js"],"names":["HUB_ANIMATION_DURATION","SiteHub","props","ref","canvasMode","dashboardLink","select","getCanvasMode","getSettings","editSiteStore","__experimentalDashboardLink","disableMotion","setCanvasMode","clearSelectedBlock","blockEditorStore","isBackToDashboardButton","showLabels","siteIconButtonProps","href","label","onClick","siteTitle","coreStore","getEntityRecord","title","className","type","duration","ease"],"mappings":";;;;;;;;;AAkBA;;;;AAfA;;AAKA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAEA;;AAKA;;AACA;;AACA;;AA1BA;AACA;AACA;;AAGA;AACA;AACA;;AAcA;AACA;AACA;AAKA,MAAMA,sBAAsB,GAAG,GAA/B;AAEA,MAAMC,OAAO,GAAG,yBAAY,CAAEC,KAAF,EAASC,GAAT,KAAkB;AAC7C,QAAM;AAAEC,IAAAA,UAAF;AAAcC,IAAAA;AAAd,MAAgC,qBAAaC,MAAF,IAAc;AAC9D,UAAM;AAAEC,MAAAA,aAAF;AAAiBC,MAAAA;AAAjB,QAAiC,yBACtCF,MAAM,CAAEG,YAAF,CADgC,CAAvC;AAGA,WAAO;AACNL,MAAAA,UAAU,EAAEG,aAAa,EADnB;AAENF,MAAAA,aAAa,EAAEG,WAAW,GAAGE;AAFvB,KAAP;AAIA,GARqC,EAQnC,EARmC,CAAtC;AASA,QAAMC,aAAa,GAAG,gCAAtB;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAoB,yBAAQ,uBAAaH,YAAb,CAAR,CAA1B;AACA,QAAM;AAAEI,IAAAA;AAAF,MAAyB,uBAAaC,kBAAb,CAA/B;AACA,QAAMC,uBAAuB,GAAGX,UAAU,KAAK,MAA/C;AACA,QAAMY,UAAU,GAAGZ,UAAU,KAAK,MAAlC;AACA,QAAMa,mBAAmB,GAAGF,uBAAuB,GAChD;AACAG,IAAAA,IAAI,EAAEb,aAAa,IAAI,WADvB;AAEAc,IAAAA,KAAK,EAAE,cAAI,0BAAJ;AAFP,GADgD,GAKhD;AACAA,IAAAA,KAAK,EAAE,cAAI,yBAAJ,CADP;AAEAC,IAAAA,OAAO,EAAE,MAAM;AACdP,MAAAA,kBAAkB;AAClBD,MAAAA,aAAa,CAAE,MAAF,CAAb;AACA;AALD,GALH;AAYA,QAAMS,SAAS,GAAG,qBACff,MAAF;AAAA;;AAAA,oCACCA,MAAM,CAAEgB,eAAF,CAAN,CAAoBC,eAApB,CAAqC,MAArC,EAA6C,MAA7C,CADD,0DACC,sBAAuDC,KADxD;AAAA,GADiB,EAGjB,EAHiB,CAAlB;AAMA,SACC,4BAAC,4BAAD,CAAQ,GAAR;AACC,IAAA,GAAG,EAAGrB;AADP,KAEMD,KAFN;AAGC,IAAA,SAAS,EAAG,yBAAY,oBAAZ,EAAkCA,KAAK,CAACuB,SAAxC,CAHb;AAIC,IAAA,MAAM,MAJP;AAKC,IAAA,UAAU,EAAG;AACZC,MAAAA,IAAI,EAAE,OADM;AAEZC,MAAAA,QAAQ,EAAEhB,aAAa,GAAG,CAAH,GAAOX,sBAFlB;AAGZ4B,MAAAA,IAAI,EAAE;AAHM;AALd,MAWC,4BAAC,gCAAD;AACC,IAAA,OAAO,EAAC,YADT;AAEC,IAAA,SAAS,EAAC,kCAFX;AAGC,IAAA,OAAO,EAAC;AAHT,KAKC,4BAAC,4BAAD,CAAQ,GAAR;AACC,IAAA,SAAS,EAAC,gDADX;AAEC,IAAA,MAAM,MAFP;AAGC,IAAA,UAAU,EAAG;AACZF,MAAAA,IAAI,EAAE,OADM;AAEZC,MAAAA,QAAQ,EAAEhB,aAAa,GAAG,CAAH,GAAOX,sBAFlB;AAGZ4B,MAAAA,IAAI,EAAE;AAHM;AAHd,KASC,4BAAC,kBAAD,6BACMX,mBADN;AAEC,IAAA,SAAS,EAAC;AAFX,MAIC,4BAAC,iBAAD;AAAU,IAAA,SAAS,EAAC;AAApB,IAJD,CATD,CALD,EAsBGD,UAAU,IACX;AAAK,IAAA,SAAS,EAAC;AAAf,KACG,kCAAgBK,SAAhB,CADH,CAvBF,CAXD,CADD;AA0CA,CA3Ee,CAAhB;eA6EepB,O","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":["HUB_ANIMATION_DURATION","SiteHub","props","ref","canvasMode","select","getCanvasMode","getSettings","editSiteStore","dashboardLink","__experimentalDashboardLink","disableMotion","setCanvasMode","clearSelectedBlock","blockEditorStore","siteIconButtonProps","label","onClick","siteTitle","coreStore","getEntityRecord","title","className","type","duration","ease","scale","opacity","delay"],"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';\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 } = 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 siteIconButtonProps = {\n\t\tlabel: __( 'Open Admin Sidebar' ),\n\t\tonClick: () => {\n\t\t\tif ( canvasMode === 'edit' ) {\n\t\t\t\tclearSelectedBlock();\n\t\t\t\tsetCanvasMode( 'view' );\n\t\t\t}\n\t\t},\n\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\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\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<motion.div\n\t\t\t\t\t\t\tinitial={ false }\n\t\t\t\t\t\t\tanimate={ {\n\t\t\t\t\t\t\t\tscale: canvasMode === 'view' ? 0.5 : 1,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\twhileHover={ {\n\t\t\t\t\t\t\t\tscale: canvasMode === 'view' ? 0.5 : 0.96,\n\t\t\t\t\t\t\t} }\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\n\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t: HUB_ANIMATION_DURATION,\n\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SiteIcon className=\"edit-site-layout__view-mode-toggle-icon\" />\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t</Button>\n\t\t\t\t</motion.div>\n\n\t\t\t\t<AnimatePresence>\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tlayout={ canvasMode === 'edit' }\n\t\t\t\t\t\tanimate={ {\n\t\t\t\t\t\t\topacity: canvasMode === 'view' ? 1 : 0,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\texit={ {\n\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tclassName=\"edit-site-site-hub__site-title\"\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 ? 0 : 0.2,\n\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\tdelay: canvasMode === 'view' ? 0.1 : 0,\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ decodeEntities( siteTitle ) }\n\t\t\t\t\t</motion.div>\n\t\t\t\t</AnimatePresence>\n\t\t\t</HStack>\n\t\t</motion.div>\n\t);\n} );\n\nexport default SiteHub;\n"]}

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

@@ -37,18 +37,19 @@ function SiteIcon(_ref) {
     siteIconUrl
   } = (0, _data.useSelect)(select => {
     const {
-      getEntityRecord,
-      isResolving
+      getEntityRecord
     } = select(_coreData.store);
-    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 (0, _element.createElement)("div", {
+      className: "edit-site-site-icon__image"
+    });
   }
 
   const icon = siteIconUrl ? (0, _element.createElement)("img", {
@@ -57,7 +58,7 @@ function SiteIcon(_ref) {
     src: siteIconUrl
   }) : (0, _element.createElement)(_components.Icon, {
     className: "edit-site-site-icon__icon",
-    size: "32px",
+    size: "48px",
     icon: _icons.wordpress
   });
   return (0, _element.createElement)("div", {

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/site-icon/index.js"],"names":["SiteIcon","className","isRequestingSite","siteIconUrl","select","getEntityRecord","isResolving","coreDataStore","siteData","undefined","site_icon_url","icon","wordpress"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAZA;AACA;AACA;;AAGA;AACA;AACA;AAOA,SAASA,QAAT,OAAmC;AAAA,MAAhB;AAAEC,IAAAA;AAAF,GAAgB;AAClC,QAAM;AAAEC,IAAAA,gBAAF;AAAoBC,IAAAA;AAApB,MAAoC,qBAAaC,MAAF,IAAc;AAClE,UAAM;AAAEC,MAAAA,eAAF;AAAmBC,MAAAA;AAAnB,QAAmCF,MAAM,CAAEG,eAAF,CAA/C;AACA,UAAMC,QAAQ,GACbH,eAAe,CAAE,MAAF,EAAU,gBAAV,EAA4BI,SAA5B,CAAf,IAA0D,EAD3D;AAGA,WAAO;AACNP,MAAAA,gBAAgB,EAAEI,WAAW,CAAE,MAAF,EAAU,iBAAV,EAA6B,CACzD,MADyD,EAEzD,gBAFyD,EAGzDG,SAHyD,CAA7B,CADvB;AAMNN,MAAAA,WAAW,EAAEK,QAAQ,CAACE;AANhB,KAAP;AAQA,GAbyC,EAavC,EAbuC,CAA1C;;AAeA,MAAKR,gBAAgB,IAAI,CAAEC,WAA3B,EAAyC;AACxC,WAAO,IAAP;AACA;;AAED,QAAMQ,IAAI,GAAGR,WAAW,GACvB;AACC,IAAA,SAAS,EAAC,4BADX;AAEC,IAAA,GAAG,EAAG,cAAI,WAAJ,CAFP;AAGC,IAAA,GAAG,EAAGA;AAHP,IADuB,GAOvB,4BAAC,gBAAD;AACC,IAAA,SAAS,EAAC,2BADX;AAEC,IAAA,IAAI,EAAC,MAFN;AAGC,IAAA,IAAI,EAAGS;AAHR,IAPD;AAcA,SACC;AAAK,IAAA,SAAS,EAAG,yBAAYX,SAAZ,EAAuB,qBAAvB;AAAjB,KACGU,IADH,CADD;AAKA;;eAEcX,Q","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":["SiteIcon","className","isRequestingSite","siteIconUrl","select","getEntityRecord","coreDataStore","siteData","undefined","site_icon_url","icon","wordpress"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAZA;AACA;AACA;;AAGA;AACA;AACA;AAOA,SAASA,QAAT,OAAmC;AAAA,MAAhB;AAAEC,IAAAA;AAAF,GAAgB;AAClC,QAAM;AAAEC,IAAAA,gBAAF;AAAoBC,IAAAA;AAApB,MAAoC,qBAAaC,MAAF,IAAc;AAClE,UAAM;AAAEC,MAAAA;AAAF,QAAsBD,MAAM,CAAEE,eAAF,CAAlC;AACA,UAAMC,QAAQ,GAAGF,eAAe,CAAE,MAAF,EAAU,gBAAV,EAA4BG,SAA5B,CAAhC;AAEA,WAAO;AACNN,MAAAA,gBAAgB,EAAE,CAAEK,QADd;AAENJ,MAAAA,WAAW,EAAEI,QAAF,aAAEA,QAAF,uBAAEA,QAAQ,CAAEE;AAFjB,KAAP;AAIA,GARyC,EAQvC,EARuC,CAA1C;;AAUA,MAAKP,gBAAgB,IAAI,CAAEC,WAA3B,EAAyC;AACxC,WAAO;AAAK,MAAA,SAAS,EAAC;AAAf,MAAP;AACA;;AAED,QAAMO,IAAI,GAAGP,WAAW,GACvB;AACC,IAAA,SAAS,EAAC,4BADX;AAEC,IAAA,GAAG,EAAG,cAAI,WAAJ,CAFP;AAGC,IAAA,GAAG,EAAGA;AAHP,IADuB,GAOvB,4BAAC,gBAAD;AACC,IAAA,SAAS,EAAC,2BADX;AAEC,IAAA,IAAI,EAAC,MAFN;AAGC,IAAA,IAAI,EAAGQ;AAHR,IAPD;AAcA,SACC;AAAK,IAAA,SAAS,EAAG,yBAAYV,SAAZ,EAAuB,qBAAvB;AAAjB,KACGS,IADH,CADD;AAKA;;eAEcV,Q","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/components/start-template-options/index.js

@@ -54,7 +54,7 @@ function useFallbackTemplateContent(slug) {
       } = _ref;
       return setTemplateContent(content.raw);
     });
-  }, [slug]);
+  }, [isCustom, slug]);
   return templateContent;
 }
 
@@ -147,7 +147,8 @@ function StartModal(_ref3) {
     title: (0, _i18n.__)('Choose a pattern'),
     closeLabel: (0, _i18n.__)('Cancel'),
     focusOnMount: "firstElement",
-    onRequestClose: onClose
+    onRequestClose: onClose,
+    isFullScreen: true
   }, (0, _element.createElement)("div", {
     className: "edit-site-start-template-options__modal-content"
   }, (0, _element.createElement)(PatternSelection, {
@@ -169,7 +170,7 @@ const START_TEMPLATE_MODAL_STATES = {
 function StartTemplateOptions() {
   const [modalState, setModalState] = (0, _element.useState)(START_TEMPLATE_MODAL_STATES.INITIAL);
   const {
-    shouldOpenModel,
+    shouldOpenModal,
     slug,
     isCustom,
     postType
@@ -183,20 +184,20 @@ function StartTemplateOptions() {
 
     const postId = getEditedPostId();
     const {
-      __experimentalGetDirtyEntityRecords,
-      getEditedEntityRecord
+      getEditedEntityRecord,
+      hasEditsForEntityRecord
     } = select(_coreData.store);
     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(_preferences.store).get('core/edit-site', 'welcomeGuide'),
+      shouldOpenModal: !hasEdits && '' === templateRecord.content && 'wp_template' === _postType && !select(_preferences.store).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/components/start-template-options/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/start-template-options/index.js"],"names":["useFallbackTemplateContent","slug","isCustom","templateContent","setTemplateContent","path","is_custom","ignore_empty","then","content","raw","START_BLANK_TITLE","useStartPatterns","fallbackContent","patterns","select","getEditedPostType","getEditedPostId","editSiteStore","getEntityRecord","coreStore","postId","postType","record","getSettings","blockEditorStore","__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","preferencesStore","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":["useFallbackTemplateContent","slug","isCustom","templateContent","setTemplateContent","path","is_custom","ignore_empty","then","content","raw","START_BLANK_TITLE","useStartPatterns","fallbackContent","patterns","select","getEditedPostType","getEditedPostId","editSiteStore","getEntityRecord","coreStore","postId","postType","record","getSettings","blockEditorStore","__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","preferencesStore","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}, [ isCustom, 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\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</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/components/style-book/index.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-exports.useHasStyleBook = useHasStyleBook;
 
 var _element = require("@wordpress/element");
 
@@ -24,14 +23,12 @@ var _blockEditor = require("@wordpress/block-editor");
 
 var _data = require("@wordpress/data");
 
-var _icons = require("@wordpress/icons");
-
 var _compose = require("@wordpress/compose");
 
-var _keycodes = require("@wordpress/keycodes");
-
 var _privateApis = require("../../private-apis");
 
+var _editorCanvasContainer = _interopRequireDefault(require("../editor-canvas-container"));
+
 /**
  * External dependencies
  */
@@ -46,12 +43,7 @@ var _privateApis = require("../../private-apis");
 const {
   ExperimentalBlockEditorProvider,
   useGlobalStyle
-} = (0, _privateApis.unlock)(_blockEditor.privateApis);
-const SLOT_FILL_NAME = 'EditSiteStyleBook';
-const {
-  Slot: StyleBookSlot,
-  Fill: StyleBookFill
-} = (0, _components.createSlotFill)(SLOT_FILL_NAME); // The content area of the Style Book is rendered within an iframe so that global styles
+} = (0, _privateApis.unlock)(_blockEditor.privateApis); // 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.
@@ -165,12 +157,9 @@ function getExamples() {
 function StyleBook(_ref) {
   let {
     isSelected,
-    onSelect,
-    onClose
+    onSelect
   } = _ref;
   const [resizeObserver, sizes] = (0, _compose.useResizeObserver)();
-  const focusOnMountRef = (0, _compose.useFocusOnMount)('firstElement');
-  const sectionFocusReturnRef = (0, _compose.useFocusReturn)();
   const [textColor] = useGlobalStyle('color.text');
   const [backgroundColor] = useGlobalStyle('color.background');
   const examples = (0, _element.useMemo)(getExamples, []);
@@ -183,32 +172,17 @@ function StyleBook(_ref) {
   const settings = (0, _element.useMemo)(() => ({ ...originalSettings,
     __unstableIsPreviewMode: true
   }), [originalSettings]);
-
-  function closeOnEscape(event) {
-    if (event.keyCode === _keycodes.ESCAPE && !event.defaultPrevented) {
-      event.preventDefault();
-      onClose();
-    }
-  }
-
-  return (0, _element.createElement)(StyleBookFill, null, (0, _element.createElement)("section", {
+  return (0, _element.createElement)(_editorCanvasContainer.default, {
+    closeButtonLabel: (0, _i18n.__)('Close Style Book')
+  }, (0, _element.createElement)("div", {
     className: (0, _classnames.default)('edit-site-style-book', {
       'is-wide': sizes.width > 600
     }),
     style: {
       color: textColor,
       background: backgroundColor
-    },
-    "aria-label": (0, _i18n.__)('Style Book'),
-    onKeyDown: closeOnEscape,
-    ref: (0, _compose.useMergeRefs)([sectionFocusReturnRef, focusOnMountRef])
-  }, resizeObserver, (0, _element.createElement)(_components.Button, {
-    className: "edit-site-style-book__close-button",
-    icon: _icons.closeSmall,
-    label: (0, _i18n.__)('Close Style Book'),
-    onClick: onClose,
-    showTooltip: false
-  }), (0, _element.createElement)(_components.TabPanel, {
+    }
+  }, resizeObserver, (0, _element.createElement)(_components.TabPanel, {
     className: "edit-site-style-book__tab-panel",
     tabs: tabs
   }, tab => (0, _element.createElement)(_blockEditor.__unstableIframe, {
@@ -301,12 +275,6 @@ const Example = _ref3 => {
   })))));
 };
 
-function useHasStyleBook() {
-  const fills = (0, _components.__experimentalUseSlotFills)(SLOT_FILL_NAME);
-  return !!(fills !== null && fills !== void 0 && fills.length);
-}
-
-StyleBook.Slot = StyleBookSlot;
 var _default = StyleBook;
 exports.default = _default;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/style-book/index.js"],"names":["ExperimentalBlockEditorProvider","useGlobalStyle","blockEditorPrivateApis","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","blockEditorStore","getSettings","settings","__unstableIsPreviewMode","closeOnEscape","event","keyCode","ESCAPE","defaultPrevented","preventDefault","width","color","background","closeSmall","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":["ExperimentalBlockEditorProvider","useGlobalStyle","blockEditorPrivateApis","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","blockEditorStore","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"]}

package/build/components/sync-state-with-url/use-init-edited-entity-from-url.js

@@ -35,13 +35,15 @@ function useInitEditedEntityFromURL() {
     url
   } = (0, _data.useSelect)(select => {
     const {
-      getSite
+      getSite,
+      getUnstableBase
     } = select(_coreData.store);
     const siteData = getSite();
+    const base = getUnstableBase();
     return {
-      isRequestingSite: !siteData,
+      isRequestingSite: !base,
       homepageId: (siteData === null || siteData === void 0 ? void 0 : siteData.show_on_front) === 'page' ? siteData.page_on_front : null,
-      url: siteData === null || siteData === void 0 ? void 0 : siteData.url
+      url: base === null || base === void 0 ? void 0 : base.home
     };
   }, []);
   const {

package/build/components/sync-state-with-url/use-init-edited-entity-from-url.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js"],"names":["useInitEditedEntityFromURL","params","postId","postType","isRequestingSite","homepageId","url","select","getSite","coreDataStore","siteData","show_on_front","page_on_front","setTemplate","setTemplatePart","setPage","editSiteStore","context","path"],"mappings":";;;;;;;AAGA;;AACA;;AACA;;AAKA;;AACA;;AAXA;AACA;AACA;;AAKA;AACA;AACA;AAIe,SAASA,0BAAT,GAAsC;AACpD,QAAM;AAAEC,IAAAA,MAAM,EAAE;AAAEC,MAAAA,MAAF;AAAUC,MAAAA;AAAV,QAAuB;AAAjC,MAAwC,0BAA9C;AACA,QAAM;AAAEC,IAAAA,gBAAF;AAAoBC,IAAAA,UAApB;AAAgCC,IAAAA;AAAhC,MAAwC,qBAAaC,MAAF,IAAc;AACtE,UAAM;AAAEC,MAAAA;AAAF,QAAcD,MAAM,CAAEE,eAAF,CAA1B;AACA,UAAMC,QAAQ,GAAGF,OAAO,EAAxB;AAEA,WAAO;AACNJ,MAAAA,gBAAgB,EAAE,CAAEM,QADd;AAENL,MAAAA,UAAU,EACT,CAAAK,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAEC,aAAV,MAA4B,MAA5B,GACGD,QAAQ,CAACE,aADZ,GAEG,IALE;AAMNN,MAAAA,GAAG,EAAEI,QAAF,aAAEA,QAAF,uBAAEA,QAAQ,CAAEJ;AANT,KAAP;AAQA,GAZ6C,EAY3C,EAZ2C,CAA9C;AAcA,QAAM;AAAEO,IAAAA,WAAF;AAAeC,IAAAA,eAAf;AAAgCC,IAAAA;AAAhC,MACL,uBAAaC,YAAb,CADD;AAGA,0BAAW,MAAM;AAChB,QAAKb,QAAQ,IAAID,MAAjB,EAA0B;AACzB,cAASC,QAAT;AACC,aAAK,aAAL;AACCU,UAAAA,WAAW,CAAEX,MAAF,CAAX;AACA;;AACD,aAAK,kBAAL;AACCY,UAAAA,eAAe,CAAEZ,MAAF,CAAf;AACA;;AACD;AACCa,UAAAA,OAAO,CAAE;AACRE,YAAAA,OAAO,EAAE;AAAEd,cAAAA,QAAF;AAAYD,cAAAA;AAAZ;AADD,WAAF,CAAP;AARF;;AAaA;AACA,KAhBe,CAkBhB;;;AACA,QAAKG,UAAL,EAAkB;AACjBU,MAAAA,OAAO,CAAE;AACRE,QAAAA,OAAO,EAAE;AAAEd,UAAAA,QAAQ,EAAE,MAAZ;AAAoBD,UAAAA,MAAM,EAAEG;AAA5B;AADD,OAAF,CAAP;AAGA,KAJD,MAIO,IAAK,CAAED,gBAAP,EAA0B;AAChCW,MAAAA,OAAO,CAAE;AACRG,QAAAA,IAAI,EAAEZ;AADE,OAAF,CAAP;AAGA;AACD,GA5BD,EA4BG,CACFA,GADE,EAEFJ,MAFE,EAGFC,QAHE,EAIFE,UAJE,EAKFD,gBALE,EAMFW,OANE,EAOFF,WAPE,EAQFC,eARE,CA5BH;AAsCA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as coreDataStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { useLocation } from '../routes';\nimport { store as editSiteStore } from '../../store';\n\nexport default function useInitEditedEntityFromURL() {\n\tconst { params: { postId, postType } = {} } = useLocation();\n\tconst { isRequestingSite, homepageId, url } = useSelect( ( select ) => {\n\t\tconst { getSite } = select( coreDataStore );\n\t\tconst siteData = getSite();\n\n\t\treturn {\n\t\t\tisRequestingSite: ! siteData,\n\t\t\thomepageId:\n\t\t\t\tsiteData?.show_on_front === 'page'\n\t\t\t\t\t? siteData.page_on_front\n\t\t\t\t\t: null,\n\t\t\turl: siteData?.url,\n\t\t};\n\t}, [] );\n\n\tconst { setTemplate, setTemplatePart, setPage } =\n\t\tuseDispatch( editSiteStore );\n\n\tuseEffect( () => {\n\t\tif ( postType && postId ) {\n\t\t\tswitch ( postType ) {\n\t\t\t\tcase 'wp_template':\n\t\t\t\t\tsetTemplate( postId );\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'wp_template_part':\n\t\t\t\t\tsetTemplatePart( postId );\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tsetPage( {\n\t\t\t\t\t\tcontext: { postType, postId },\n\t\t\t\t\t} );\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\t// In all other cases, we need to set the home page in the site editor view.\n\t\tif ( homepageId ) {\n\t\t\tsetPage( {\n\t\t\t\tcontext: { postType: 'page', postId: homepageId },\n\t\t\t} );\n\t\t} else if ( ! isRequestingSite ) {\n\t\t\tsetPage( {\n\t\t\t\tpath: url,\n\t\t\t} );\n\t\t}\n\t}, [\n\t\turl,\n\t\tpostId,\n\t\tpostType,\n\t\thomepageId,\n\t\tisRequestingSite,\n\t\tsetPage,\n\t\tsetTemplate,\n\t\tsetTemplatePart,\n\t] );\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js"],"names":["useInitEditedEntityFromURL","params","postId","postType","isRequestingSite","homepageId","url","select","getSite","getUnstableBase","coreDataStore","siteData","base","show_on_front","page_on_front","home","setTemplate","setTemplatePart","setPage","editSiteStore","context","path"],"mappings":";;;;;;;AAGA;;AACA;;AACA;;AAKA;;AACA;;AAXA;AACA;AACA;;AAKA;AACA;AACA;AAIe,SAASA,0BAAT,GAAsC;AACpD,QAAM;AAAEC,IAAAA,MAAM,EAAE;AAAEC,MAAAA,MAAF;AAAUC,MAAAA;AAAV,QAAuB;AAAjC,MAAwC,0BAA9C;AACA,QAAM;AAAEC,IAAAA,gBAAF;AAAoBC,IAAAA,UAApB;AAAgCC,IAAAA;AAAhC,MAAwC,qBAAaC,MAAF,IAAc;AACtE,UAAM;AAAEC,MAAAA,OAAF;AAAWC,MAAAA;AAAX,QAA+BF,MAAM,CAAEG,eAAF,CAA3C;AACA,UAAMC,QAAQ,GAAGH,OAAO,EAAxB;AACA,UAAMI,IAAI,GAAGH,eAAe,EAA5B;AAEA,WAAO;AACNL,MAAAA,gBAAgB,EAAE,CAAEQ,IADd;AAENP,MAAAA,UAAU,EACT,CAAAM,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAEE,aAAV,MAA4B,MAA5B,GACGF,QAAQ,CAACG,aADZ,GAEG,IALE;AAMNR,MAAAA,GAAG,EAAEM,IAAF,aAAEA,IAAF,uBAAEA,IAAI,CAAEG;AANL,KAAP;AAQA,GAb6C,EAa3C,EAb2C,CAA9C;AAeA,QAAM;AAAEC,IAAAA,WAAF;AAAeC,IAAAA,eAAf;AAAgCC,IAAAA;AAAhC,MACL,uBAAaC,YAAb,CADD;AAGA,0BAAW,MAAM;AAChB,QAAKhB,QAAQ,IAAID,MAAjB,EAA0B;AACzB,cAASC,QAAT;AACC,aAAK,aAAL;AACCa,UAAAA,WAAW,CAAEd,MAAF,CAAX;AACA;;AACD,aAAK,kBAAL;AACCe,UAAAA,eAAe,CAAEf,MAAF,CAAf;AACA;;AACD;AACCgB,UAAAA,OAAO,CAAE;AACRE,YAAAA,OAAO,EAAE;AAAEjB,cAAAA,QAAF;AAAYD,cAAAA;AAAZ;AADD,WAAF,CAAP;AARF;;AAaA;AACA,KAhBe,CAkBhB;;;AACA,QAAKG,UAAL,EAAkB;AACjBa,MAAAA,OAAO,CAAE;AACRE,QAAAA,OAAO,EAAE;AAAEjB,UAAAA,QAAQ,EAAE,MAAZ;AAAoBD,UAAAA,MAAM,EAAEG;AAA5B;AADD,OAAF,CAAP;AAGA,KAJD,MAIO,IAAK,CAAED,gBAAP,EAA0B;AAChCc,MAAAA,OAAO,CAAE;AACRG,QAAAA,IAAI,EAAEf;AADE,OAAF,CAAP;AAGA;AACD,GA5BD,EA4BG,CACFA,GADE,EAEFJ,MAFE,EAGFC,QAHE,EAIFE,UAJE,EAKFD,gBALE,EAMFc,OANE,EAOFF,WAPE,EAQFC,eARE,CA5BH;AAsCA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as coreDataStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { useLocation } from '../routes';\nimport { store as editSiteStore } from '../../store';\n\nexport default function useInitEditedEntityFromURL() {\n\tconst { params: { postId, postType } = {} } = useLocation();\n\tconst { isRequestingSite, homepageId, url } = useSelect( ( select ) => {\n\t\tconst { getSite, getUnstableBase } = select( coreDataStore );\n\t\tconst siteData = getSite();\n\t\tconst base = getUnstableBase();\n\n\t\treturn {\n\t\t\tisRequestingSite: ! base,\n\t\t\thomepageId:\n\t\t\t\tsiteData?.show_on_front === 'page'\n\t\t\t\t\t? siteData.page_on_front\n\t\t\t\t\t: null,\n\t\t\turl: base?.home,\n\t\t};\n\t}, [] );\n\n\tconst { setTemplate, setTemplatePart, setPage } =\n\t\tuseDispatch( editSiteStore );\n\n\tuseEffect( () => {\n\t\tif ( postType && postId ) {\n\t\t\tswitch ( postType ) {\n\t\t\t\tcase 'wp_template':\n\t\t\t\t\tsetTemplate( postId );\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'wp_template_part':\n\t\t\t\t\tsetTemplatePart( postId );\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tsetPage( {\n\t\t\t\t\t\tcontext: { postType, postId },\n\t\t\t\t\t} );\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\t// In all other cases, we need to set the home page in the site editor view.\n\t\tif ( homepageId ) {\n\t\t\tsetPage( {\n\t\t\t\tcontext: { postType: 'page', postId: homepageId },\n\t\t\t} );\n\t\t} else if ( ! isRequestingSite ) {\n\t\t\tsetPage( {\n\t\t\t\tpath: url,\n\t\t\t} );\n\t\t}\n\t}, [\n\t\turl,\n\t\tpostId,\n\t\tpostType,\n\t\thomepageId,\n\t\tisRequestingSite,\n\t\tsetPage,\n\t\tsetTemplate,\n\t\tsetTemplatePart,\n\t] );\n}\n"]}

package/build/components/template-details/index.js

@@ -96,6 +96,8 @@ function TemplateDetails(_ref) {
     onClick: revert
   }, (0, _i18n.__)('Clear customizations'))), (0, _element.createElement)(_components.Button, (0, _extends2.default)({
     className: "edit-site-template-details__show-all-button"
-  }, browseAllLinkProps), (template === null || template === void 0 ? void 0 : template.type) === 'wp_template' ? (0, _i18n.__)('Manage all templates') : (0, _i18n.__)('Manage all template parts')));
+  }, browseAllLinkProps, {
+    onClick: () => onClose()
+  }), (template === null || template === void 0 ? void 0 : template.type) === 'wp_template' ? (0, _i18n.__)('Manage all templates') : (0, _i18n.__)('Manage all template parts')));
 }
 //# sourceMappingURL=index.js.map

package/build/components/template-details/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/template-details/index.js"],"names":["TemplateDetails","template","onClose","title","description","select","editorStore","__experimentalGetTemplateInfo","revertTemplate","editSiteStore","browseAllLinkProps","path","type","isTemplatePart","canEditTitle","has_theme_file","is_custom","revert","id"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AAOA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAtBA;AACA;AACA;;AAaA;AACA;AACA;AAOe,SAASA,eAAT,OAAkD;AAAA,MAAxB;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAwB;AAChE,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAyB,qBAC5BC,MAAF,IACCA,MAAM,CAAEC,aAAF,CAAN,CAAsBC,6BAAtB,CAAqDN,QAArD,CAF6B,EAG9B,EAH8B,CAA/B;AAKA,QAAM;AAAEO,IAAAA;AAAF,MAAqB,uBAAaC,YAAb,CAA3B,CANgE,CAQhE;;AACA,QAAMC,kBAAkB,GAAG,mBAAS;AACnCC,IAAAA,IAAI,EAAE,MAAMV,QAAQ,CAACW,IAAf,GAAsB;AADO,GAAT,CAA3B;AAIA,QAAMC,cAAc,GAAGZ,QAAQ,CAACW,IAAT,KAAkB,kBAAzC,CAbgE,CAehE;AACA;;AACA,QAAME,YAAY,GAAGD,cAAc,GAChC,CAAEZ,QAAQ,CAACc,cADqB,GAEhCd,QAAQ,CAACe,SAAT,IAAsB,CAAEf,QAAQ,CAACc,cAFpC;;AAIA,MAAK,CAAEd,QAAP,EAAkB;AACjB,WAAO,IAAP;AACA;;AAED,QAAMgB,MAAM,GAAG,MAAM;AACpBT,IAAAA,cAAc,CAAEP,QAAF,CAAd;AACAC,IAAAA,OAAO;AACP,GAHD;;AAKA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,gCAAD;AAAQ,IAAA,SAAS,EAAC,mCAAlB;AAAsD,IAAA,OAAO,EAAG;AAAhE,KACGY,YAAY,GACb,4BAAC,0BAAD;AAAmB,IAAA,QAAQ,EAAGb;AAA9B,IADa,GAGb,4BAAC,8BAAD;AACC,IAAA,IAAI,EAAG,EADR;AAEC,IAAA,MAAM,EAAG,GAFV;AAGC,IAAA,SAAS,EAAC,mCAHX;AAIC,IAAA,EAAE,EAAC;AAJJ,KAMG,kCAAgBE,KAAhB,CANH,CAJF,EAcGC,WAAW,IACZ,4BAAC,8BAAD;AACC,IAAA,IAAI,EAAC,MADN;AAEC,IAAA,SAAS,EAAC,yCAFX;AAGC,IAAA,EAAE,EAAC;AAHJ,KAKG,kCAAgBA,WAAhB,CALH,CAfF,CADD,EA0BGS,cAAc,IACf;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,iCAAD;AAA0B,IAAA,EAAE,EAAGZ,QAAQ,CAACiB;AAAxC,IADD,CA3BF,EAgCG,mCAAsBjB,QAAtB,KACD,4BAAC,qBAAD;AAAW,IAAA,SAAS,EAAC;AAArB,KACC,4BAAC,oBAAD;AACC,IAAA,SAAS,EAAC,2CADX;AAEC,IAAA,IAAI,EAAG,cACN,4CADM,CAFR;AAKC,IAAA,OAAO,EAAGgB;AALX,KAOG,cAAI,sBAAJ,CAPH,CADD,CAjCF,EA8CC,4BAAC,kBAAD;AACC,IAAA,SAAS,EAAC;AADX,KAEMP,kBAFN,GAIG,CAAAT,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAEW,IAAV,MAAmB,aAAnB,GACC,cAAI,sBAAJ,CADD,GAEC,cAAI,2BAAJ,CANJ,CA9CD,CADD;AAyDA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tButton,\n\tMenuGroup,\n\tMenuItem,\n\t__experimentalVStack as VStack,\n\t__experimentalText as Text,\n} from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { store as editorStore } from '@wordpress/editor';\nimport { decodeEntities } from '@wordpress/html-entities';\n\n/**\n * Internal dependencies\n */\nimport isTemplateRevertable from '../../utils/is-template-revertable';\nimport { store as editSiteStore } from '../../store';\nimport EditTemplateTitle from './edit-template-title';\nimport { useLink } from '../routes/link';\nimport TemplatePartAreaSelector from './template-part-area-selector';\n\nexport default function TemplateDetails( { template, onClose } ) {\n\tconst { title, description } = useSelect(\n\t\t( select ) =>\n\t\t\tselect( editorStore ).__experimentalGetTemplateInfo( template ),\n\t\t[]\n\t);\n\tconst { revertTemplate } = useDispatch( editSiteStore );\n\n\t// TODO: We should update this to filter by template part's areas as well.\n\tconst browseAllLinkProps = useLink( {\n\t\tpath: '/' + template.type + '/all',\n\t} );\n\n\tconst isTemplatePart = template.type === 'wp_template_part';\n\n\t// Only user-created and non-default templates can change the name.\n\t// But any user-created template part can be renamed.\n\tconst canEditTitle = isTemplatePart\n\t\t? ! template.has_theme_file\n\t\t: template.is_custom && ! template.has_theme_file;\n\n\tif ( ! template ) {\n\t\treturn null;\n\t}\n\n\tconst revert = () => {\n\t\trevertTemplate( template );\n\t\tonClose();\n\t};\n\n\treturn (\n\t\t<div className=\"edit-site-template-details\">\n\t\t\t<VStack className=\"edit-site-template-details__group\" spacing={ 3 }>\n\t\t\t\t{ canEditTitle ? (\n\t\t\t\t\t<EditTemplateTitle template={ template } />\n\t\t\t\t) : (\n\t\t\t\t\t<Text\n\t\t\t\t\t\tsize={ 16 }\n\t\t\t\t\t\tweight={ 600 }\n\t\t\t\t\t\tclassName=\"edit-site-template-details__title\"\n\t\t\t\t\t\tas=\"p\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ decodeEntities( title ) }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\n\t\t\t\t{ description && (\n\t\t\t\t\t<Text\n\t\t\t\t\t\tsize=\"body\"\n\t\t\t\t\t\tclassName=\"edit-site-template-details__description\"\n\t\t\t\t\t\tas=\"p\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ decodeEntities( description ) }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\t\t\t</VStack>\n\n\t\t\t{ isTemplatePart && (\n\t\t\t\t<div className=\"edit-site-template-details__group\">\n\t\t\t\t\t<TemplatePartAreaSelector id={ template.id } />\n\t\t\t\t</div>\n\t\t\t) }\n\n\t\t\t{ isTemplateRevertable( template ) && (\n\t\t\t\t<MenuGroup className=\"edit-site-template-details__group edit-site-template-details__revert\">\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tclassName=\"edit-site-template-details__revert-button\"\n\t\t\t\t\t\tinfo={ __(\n\t\t\t\t\t\t\t'Use the template as supplied by the theme.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tonClick={ revert }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear customizations' ) }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\n\t\t\t<Button\n\t\t\t\tclassName=\"edit-site-template-details__show-all-button\"\n\t\t\t\t{ ...browseAllLinkProps }\n\t\t\t>\n\t\t\t\t{ template?.type === 'wp_template'\n\t\t\t\t\t? __( 'Manage all templates' )\n\t\t\t\t\t: __( 'Manage all template parts' ) }\n\t\t\t</Button>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/template-details/index.js"],"names":["TemplateDetails","template","onClose","title","description","select","editorStore","__experimentalGetTemplateInfo","revertTemplate","editSiteStore","browseAllLinkProps","path","type","isTemplatePart","canEditTitle","has_theme_file","is_custom","revert","id"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AAOA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAtBA;AACA;AACA;;AAaA;AACA;AACA;AAOe,SAASA,eAAT,OAAkD;AAAA,MAAxB;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAwB;AAChE,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAyB,qBAC5BC,MAAF,IACCA,MAAM,CAAEC,aAAF,CAAN,CAAsBC,6BAAtB,CAAqDN,QAArD,CAF6B,EAG9B,EAH8B,CAA/B;AAKA,QAAM;AAAEO,IAAAA;AAAF,MAAqB,uBAAaC,YAAb,CAA3B,CANgE,CAQhE;;AACA,QAAMC,kBAAkB,GAAG,mBAAS;AACnCC,IAAAA,IAAI,EAAE,MAAMV,QAAQ,CAACW,IAAf,GAAsB;AADO,GAAT,CAA3B;AAIA,QAAMC,cAAc,GAAGZ,QAAQ,CAACW,IAAT,KAAkB,kBAAzC,CAbgE,CAehE;AACA;;AACA,QAAME,YAAY,GAAGD,cAAc,GAChC,CAAEZ,QAAQ,CAACc,cADqB,GAEhCd,QAAQ,CAACe,SAAT,IAAsB,CAAEf,QAAQ,CAACc,cAFpC;;AAIA,MAAK,CAAEd,QAAP,EAAkB;AACjB,WAAO,IAAP;AACA;;AAED,QAAMgB,MAAM,GAAG,MAAM;AACpBT,IAAAA,cAAc,CAAEP,QAAF,CAAd;AACAC,IAAAA,OAAO;AACP,GAHD;;AAKA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,gCAAD;AAAQ,IAAA,SAAS,EAAC,mCAAlB;AAAsD,IAAA,OAAO,EAAG;AAAhE,KACGY,YAAY,GACb,4BAAC,0BAAD;AAAmB,IAAA,QAAQ,EAAGb;AAA9B,IADa,GAGb,4BAAC,8BAAD;AACC,IAAA,IAAI,EAAG,EADR;AAEC,IAAA,MAAM,EAAG,GAFV;AAGC,IAAA,SAAS,EAAC,mCAHX;AAIC,IAAA,EAAE,EAAC;AAJJ,KAMG,kCAAgBE,KAAhB,CANH,CAJF,EAcGC,WAAW,IACZ,4BAAC,8BAAD;AACC,IAAA,IAAI,EAAC,MADN;AAEC,IAAA,SAAS,EAAC,yCAFX;AAGC,IAAA,EAAE,EAAC;AAHJ,KAKG,kCAAgBA,WAAhB,CALH,CAfF,CADD,EA0BGS,cAAc,IACf;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,iCAAD;AAA0B,IAAA,EAAE,EAAGZ,QAAQ,CAACiB;AAAxC,IADD,CA3BF,EAgCG,mCAAsBjB,QAAtB,KACD,4BAAC,qBAAD;AAAW,IAAA,SAAS,EAAC;AAArB,KACC,4BAAC,oBAAD;AACC,IAAA,SAAS,EAAC,2CADX;AAEC,IAAA,IAAI,EAAG,cACN,4CADM,CAFR;AAKC,IAAA,OAAO,EAAGgB;AALX,KAOG,cAAI,sBAAJ,CAPH,CADD,CAjCF,EA8CC,4BAAC,kBAAD;AACC,IAAA,SAAS,EAAC;AADX,KAEMP,kBAFN;AAGC,IAAA,OAAO,EAAG,MAAMR,OAAO;AAHxB,MAKG,CAAAD,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAEW,IAAV,MAAmB,aAAnB,GACC,cAAI,sBAAJ,CADD,GAEC,cAAI,2BAAJ,CAPJ,CA9CD,CADD;AA0DA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tButton,\n\tMenuGroup,\n\tMenuItem,\n\t__experimentalVStack as VStack,\n\t__experimentalText as Text,\n} from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { store as editorStore } from '@wordpress/editor';\nimport { decodeEntities } from '@wordpress/html-entities';\n\n/**\n * Internal dependencies\n */\nimport isTemplateRevertable from '../../utils/is-template-revertable';\nimport { store as editSiteStore } from '../../store';\nimport EditTemplateTitle from './edit-template-title';\nimport { useLink } from '../routes/link';\nimport TemplatePartAreaSelector from './template-part-area-selector';\n\nexport default function TemplateDetails( { template, onClose } ) {\n\tconst { title, description } = useSelect(\n\t\t( select ) =>\n\t\t\tselect( editorStore ).__experimentalGetTemplateInfo( template ),\n\t\t[]\n\t);\n\tconst { revertTemplate } = useDispatch( editSiteStore );\n\n\t// TODO: We should update this to filter by template part's areas as well.\n\tconst browseAllLinkProps = useLink( {\n\t\tpath: '/' + template.type + '/all',\n\t} );\n\n\tconst isTemplatePart = template.type === 'wp_template_part';\n\n\t// Only user-created and non-default templates can change the name.\n\t// But any user-created template part can be renamed.\n\tconst canEditTitle = isTemplatePart\n\t\t? ! template.has_theme_file\n\t\t: template.is_custom && ! template.has_theme_file;\n\n\tif ( ! template ) {\n\t\treturn null;\n\t}\n\n\tconst revert = () => {\n\t\trevertTemplate( template );\n\t\tonClose();\n\t};\n\n\treturn (\n\t\t<div className=\"edit-site-template-details\">\n\t\t\t<VStack className=\"edit-site-template-details__group\" spacing={ 3 }>\n\t\t\t\t{ canEditTitle ? (\n\t\t\t\t\t<EditTemplateTitle template={ template } />\n\t\t\t\t) : (\n\t\t\t\t\t<Text\n\t\t\t\t\t\tsize={ 16 }\n\t\t\t\t\t\tweight={ 600 }\n\t\t\t\t\t\tclassName=\"edit-site-template-details__title\"\n\t\t\t\t\t\tas=\"p\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ decodeEntities( title ) }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\n\t\t\t\t{ description && (\n\t\t\t\t\t<Text\n\t\t\t\t\t\tsize=\"body\"\n\t\t\t\t\t\tclassName=\"edit-site-template-details__description\"\n\t\t\t\t\t\tas=\"p\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ decodeEntities( description ) }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\t\t\t</VStack>\n\n\t\t\t{ isTemplatePart && (\n\t\t\t\t<div className=\"edit-site-template-details__group\">\n\t\t\t\t\t<TemplatePartAreaSelector id={ template.id } />\n\t\t\t\t</div>\n\t\t\t) }\n\n\t\t\t{ isTemplateRevertable( template ) && (\n\t\t\t\t<MenuGroup className=\"edit-site-template-details__group edit-site-template-details__revert\">\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tclassName=\"edit-site-template-details__revert-button\"\n\t\t\t\t\t\tinfo={ __(\n\t\t\t\t\t\t\t'Use the template as supplied by the theme.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tonClick={ revert }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear customizations' ) }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\n\t\t\t<Button\n\t\t\t\tclassName=\"edit-site-template-details__show-all-button\"\n\t\t\t\t{ ...browseAllLinkProps }\n\t\t\t\tonClick={ () => onClose() }\n\t\t\t>\n\t\t\t\t{ template?.type === 'wp_template'\n\t\t\t\t\t? __( 'Manage all templates' )\n\t\t\t\t\t: __( 'Manage all template parts' ) }\n\t\t\t</Button>\n\t\t</div>\n\t);\n}\n"]}