@wordpress/edit-site 6.11.0 → 6.12.1-next.082ed6819.0

package/build-module/components/site-editor-routes/styles-view.js

@@ -3,17 +3,23 @@
  */
 import Editor from '../editor';
 import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
+import GlobalStylesUIWrapper from '../sidebar-global-styles-wrapper';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const stylesViewRoute = {
   name: 'styles-view',
   match: params => {
-    return params.path === '/wp_global_styles' && params.canvas !== 'edit';
+    return params.path && params.path.startsWith('/wp_global_styles') && params.canvas !== 'edit';
   },
   areas: {
+    content: /*#__PURE__*/_jsx(GlobalStylesUIWrapper, {}),
     sidebar: /*#__PURE__*/_jsx(SidebarNavigationScreenGlobalStyles, {
       backPath: {}
     }),
-    preview: /*#__PURE__*/_jsx(Editor, {})
+    preview: /*#__PURE__*/_jsx(Editor, {}),
+    mobile: /*#__PURE__*/_jsx(GlobalStylesUIWrapper, {})
+  },
+  widths: {
+    content: 380
   }
 };
 //# sourceMappingURL=styles-view.js.map

package/build-module/components/site-editor-routes/styles-view.js.map

@@ -1 +1 @@
-{"version":3,"names":["Editor","SidebarNavigationScreenGlobalStyles","jsx","_jsx","stylesViewRoute","name","match","params","path","canvas","areas","sidebar","backPath","preview"],"sources":["@wordpress/edit-site/src/components/site-editor-routes/styles-view.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport Editor from '../editor';\nimport SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';\n\nexport const stylesViewRoute = {\n\tname: 'styles-view',\n\tmatch: ( params ) => {\n\t\treturn params.path === '/wp_global_styles' && params.canvas !== 'edit';\n\t},\n\tareas: {\n\t\tsidebar: <SidebarNavigationScreenGlobalStyles backPath={ {} } />,\n\t\tpreview: <Editor />,\n\t},\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,MAAM,MAAM,WAAW;AAC9B,OAAOC,mCAAmC,MAAM,4CAA4C;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE7F,OAAO,MAAMC,eAAe,GAAG;EAC9BC,IAAI,EAAE,aAAa;EACnBC,KAAK,EAAIC,MAAM,IAAM;IACpB,OAAOA,MAAM,CAACC,IAAI,KAAK,mBAAmB,IAAID,MAAM,CAACE,MAAM,KAAK,MAAM;EACvE,CAAC;EACDC,KAAK,EAAE;IACNC,OAAO,eAAER,IAAA,CAACF,mCAAmC;MAACW,QAAQ,EAAG,CAAC;IAAG,CAAE,CAAC;IAChEC,OAAO,eAAEV,IAAA,CAACH,MAAM,IAAE;EACnB;AACD,CAAC","ignoreList":[]}
+{"version":3,"names":["Editor","SidebarNavigationScreenGlobalStyles","GlobalStylesUIWrapper","jsx","_jsx","stylesViewRoute","name","match","params","path","startsWith","canvas","areas","content","sidebar","backPath","preview","mobile","widths"],"sources":["@wordpress/edit-site/src/components/site-editor-routes/styles-view.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport Editor from '../editor';\nimport SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';\nimport GlobalStylesUIWrapper from '../sidebar-global-styles-wrapper';\n\nexport const stylesViewRoute = {\n\tname: 'styles-view',\n\tmatch: ( params ) => {\n\t\treturn (\n\t\t\tparams.path &&\n\t\t\tparams.path.startsWith( '/wp_global_styles' ) &&\n\t\t\tparams.canvas !== 'edit'\n\t\t);\n\t},\n\tareas: {\n\t\tcontent: <GlobalStylesUIWrapper />,\n\t\tsidebar: <SidebarNavigationScreenGlobalStyles backPath={ {} } />,\n\t\tpreview: <Editor />,\n\t\tmobile: <GlobalStylesUIWrapper />,\n\t},\n\twidths: {\n\t\tcontent: 380,\n\t},\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,MAAM,MAAM,WAAW;AAC9B,OAAOC,mCAAmC,MAAM,4CAA4C;AAC5F,OAAOC,qBAAqB,MAAM,kCAAkC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAErE,OAAO,MAAMC,eAAe,GAAG;EAC9BC,IAAI,EAAE,aAAa;EACnBC,KAAK,EAAIC,MAAM,IAAM;IACpB,OACCA,MAAM,CAACC,IAAI,IACXD,MAAM,CAACC,IAAI,CAACC,UAAU,CAAE,mBAAoB,CAAC,IAC7CF,MAAM,CAACG,MAAM,KAAK,MAAM;EAE1B,CAAC;EACDC,KAAK,EAAE;IACNC,OAAO,eAAET,IAAA,CAACF,qBAAqB,IAAE,CAAC;IAClCY,OAAO,eAAEV,IAAA,CAACH,mCAAmC;MAACc,QAAQ,EAAG,CAAC;IAAG,CAAE,CAAC;IAChEC,OAAO,eAAEZ,IAAA,CAACJ,MAAM,IAAE,CAAC;IACnBiB,MAAM,eAAEb,IAAA,CAACF,qBAAqB,IAAE;EACjC,CAAC;EACDgB,MAAM,EAAE;IACPL,OAAO,EAAE;EACV;AACD,CAAC","ignoreList":[]}

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

@@ -117,14 +117,22 @@ export const SiteHubMobile = memo(forwardRef(({
     navigate
   } = useContext(SidebarNavigationContext);
   const {
+    dashboardLink,
+    isBlockTheme,
     homeUrl,
     siteTitle
   } = useSelect(select => {
     const {
-      getEntityRecord
+      getSettings
+    } = unlock(select(editSiteStore));
+    const {
+      getEntityRecord,
+      getCurrentTheme
     } = select(coreStore);
     const _site = getEntityRecord('root', 'site');
     return {
+      dashboardLink: getSettings().__experimentalDashboardLink || 'index.php',
+      isBlockTheme: getCurrentTheme()?.is_block_theme,
       homeUrl: getEntityRecord('root', '__unstableBase')?.home,
       siteTitle: !_site?.title && !!_site?.url ? filterURLForDisplay(_site?.url) : _site?.title
     };
@@ -144,16 +152,21 @@ export const SiteHubMobile = memo(forwardRef(({
         children: /*#__PURE__*/_jsx(Button, {
           __next40pxDefaultSize: true,
           ref: ref,
-          label: __('Go to Site Editor'),
           className: "edit-site-layout__view-mode-toggle",
           style: {
             transform: 'scale(0.5)',
             borderRadius: 4
           },
-          onClick: () => {
-            history.push({});
-            navigate('back');
-          },
+          ...(!isBlockTheme ? {
+            href: dashboardLink,
+            label: __('Go to the Dashboard')
+          } : {
+            onClick: () => {
+              history.push({});
+              navigate('back');
+            },
+            label: __('Go to Site Editor')
+          }),
           children: /*#__PURE__*/_jsx(SiteIcon, {
             className: "edit-site-layout__view-mode-toggle-icon"
           })

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

@@ -1 +1 @@
-{"version":3,"names":["clsx","useSelect","useDispatch","Button","__experimentalHStack","HStack","VisuallyHidden","__","store","coreStore","decodeEntities","memo","forwardRef","useContext","search","commandsStore","displayShortcut","filterURLForDisplay","privateApis","routerPrivateApis","editSiteStore","SiteIcon","unlock","useHistory","SidebarNavigationContext","jsx","_jsx","jsxs","_jsxs","SiteHub","isTransparent","ref","dashboardLink","homeUrl","siteTitle","select","getSettings","getEntityRecord","_site","__experimentalDashboardLink","home","title","url","open","openCommandCenter","className","children","justify","spacing","__next40pxDefaultSize","href","label","style","transform","borderRadius","variant","target","as","expanded","size","icon","onClick","shortcut","primary","SiteHubMobile","history","navigate","push"],"sources":["@wordpress/edit-site/src/components/site-hub/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tButton,\n\t__experimentalHStack as HStack,\n\tVisuallyHidden,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { memo, forwardRef, useContext } from '@wordpress/element';\nimport { search } from '@wordpress/icons';\nimport { store as commandsStore } from '@wordpress/commands';\nimport { displayShortcut } from '@wordpress/keycodes';\nimport { filterURLForDisplay } from '@wordpress/url';\nimport { privateApis as routerPrivateApis } from '@wordpress/router';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport SiteIcon from '../site-icon';\nimport { unlock } from '../../lock-unlock';\nconst { useHistory } = unlock( routerPrivateApis );\nimport { SidebarNavigationContext } from '../sidebar';\n\nconst SiteHub = memo(\n\tforwardRef( ( { isTransparent }, ref ) => {\n\t\tconst { dashboardLink, homeUrl, siteTitle } = useSelect( ( select ) => {\n\t\t\tconst { getSettings } = unlock( select( editSiteStore ) );\n\n\t\t\tconst { getEntityRecord } = select( coreStore );\n\t\t\tconst _site = getEntityRecord( 'root', 'site' );\n\t\t\treturn {\n\t\t\t\tdashboardLink:\n\t\t\t\t\tgetSettings().__experimentalDashboardLink || 'index.php',\n\t\t\t\thomeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,\n\t\t\t\tsiteTitle:\n\t\t\t\t\t! _site?.title && !! _site?.url\n\t\t\t\t\t\t? filterURLForDisplay( _site?.url )\n\t\t\t\t\t\t: _site?.title,\n\t\t\t};\n\t\t}, [] );\n\t\tconst { open: openCommandCenter } = useDispatch( commandsStore );\n\n\t\treturn (\n\t\t\t<div className=\"edit-site-site-hub\">\n\t\t\t\t<HStack justify=\"flex-start\" spacing=\"0\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'edit-site-site-hub__view-mode-toggle-container',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'has-transparent-background': isTransparent,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\t\thref={ dashboardLink }\n\t\t\t\t\t\t\tlabel={ __( 'Go to the Dashboard' ) }\n\t\t\t\t\t\t\tclassName=\"edit-site-layout__view-mode-toggle\"\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\ttransform: 'scale(0.5333) translateX(-4px)', // Offset to position the icon 12px from viewport edge\n\t\t\t\t\t\t\t\tborderRadius: 4,\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</Button>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<HStack>\n\t\t\t\t\t\t<div className=\"edit-site-site-hub__title\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\thref={ homeUrl }\n\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ decodeEntities( siteTitle ) }\n\t\t\t\t\t\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t/* translators: accessibility text */\n\t\t\t\t\t\t\t\t\t\t__( '(opens in a new tab)' )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\t\tclassName=\"edit-site-site-hub__actions\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\tclassName=\"edit-site-site-hub_toggle-command-center\"\n\t\t\t\t\t\t\t\ticon={ search }\n\t\t\t\t\t\t\t\tonClick={ () => openCommandCenter() }\n\t\t\t\t\t\t\t\tlabel={ __( 'Open command palette' ) }\n\t\t\t\t\t\t\t\tshortcut={ displayShortcut.primary( 'k' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</HStack>\n\t\t\t\t</HStack>\n\t\t\t</div>\n\t\t);\n\t} )\n);\n\nexport default SiteHub;\n\nexport const SiteHubMobile = memo(\n\tforwardRef( ( { isTransparent }, ref ) => {\n\t\tconst history = useHistory();\n\t\tconst { navigate } = useContext( SidebarNavigationContext );\n\n\t\tconst { homeUrl, siteTitle } = useSelect( ( select ) => {\n\t\t\tconst { getEntityRecord } = select( coreStore );\n\t\t\tconst _site = getEntityRecord( 'root', 'site' );\n\t\t\treturn {\n\t\t\t\thomeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,\n\t\t\t\tsiteTitle:\n\t\t\t\t\t! _site?.title && !! _site?.url\n\t\t\t\t\t\t? filterURLForDisplay( _site?.url )\n\t\t\t\t\t\t: _site?.title,\n\t\t\t};\n\t\t}, [] );\n\t\tconst { open: openCommandCenter } = useDispatch( commandsStore );\n\n\t\treturn (\n\t\t\t<div className=\"edit-site-site-hub\">\n\t\t\t\t<HStack justify=\"flex-start\" spacing=\"0\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'edit-site-site-hub__view-mode-toggle-container',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'has-transparent-background': isTransparent,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\t\tlabel={ __( 'Go to Site Editor' ) }\n\t\t\t\t\t\t\tclassName=\"edit-site-layout__view-mode-toggle\"\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\ttransform: 'scale(0.5)',\n\t\t\t\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\thistory.push( {} );\n\t\t\t\t\t\t\t\tnavigate( 'back' );\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</Button>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<HStack>\n\t\t\t\t\t\t<div className=\"edit-site-site-hub__title\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\thref={ homeUrl }\n\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\tlabel={ __( 'View site (opens in a new tab)' ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ decodeEntities( siteTitle ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\t\tclassName=\"edit-site-site-hub__actions\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tclassName=\"edit-site-site-hub_toggle-command-center\"\n\t\t\t\t\t\t\t\ticon={ search }\n\t\t\t\t\t\t\t\tonClick={ () => openCommandCenter() }\n\t\t\t\t\t\t\t\tlabel={ __( 'Open command palette' ) }\n\t\t\t\t\t\t\t\tshortcut={ displayShortcut.primary( 'k' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</HStack>\n\t\t\t\t</HStack>\n\t\t\t</div>\n\t\t);\n\t} )\n);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["clsx","useSelect","useDispatch","Button","__experimentalHStack","HStack","VisuallyHidden","__","store","coreStore","decodeEntities","memo","forwardRef","useContext","search","commandsStore","displayShortcut","filterURLForDisplay","privateApis","routerPrivateApis","editSiteStore","SiteIcon","unlock","useHistory","SidebarNavigationContext","jsx","_jsx","jsxs","_jsxs","SiteHub","isTransparent","ref","dashboardLink","homeUrl","siteTitle","select","getSettings","getEntityRecord","_site","__experimentalDashboardLink","home","title","url","open","openCommandCenter","className","children","justify","spacing","__next40pxDefaultSize","href","label","style","transform","borderRadius","variant","target","as","expanded","size","icon","onClick","shortcut","primary","SiteHubMobile","history","navigate","isBlockTheme","getCurrentTheme","is_block_theme","push"],"sources":["@wordpress/edit-site/src/components/site-hub/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tButton,\n\t__experimentalHStack as HStack,\n\tVisuallyHidden,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { memo, forwardRef, useContext } from '@wordpress/element';\nimport { search } from '@wordpress/icons';\nimport { store as commandsStore } from '@wordpress/commands';\nimport { displayShortcut } from '@wordpress/keycodes';\nimport { filterURLForDisplay } from '@wordpress/url';\nimport { privateApis as routerPrivateApis } from '@wordpress/router';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport SiteIcon from '../site-icon';\nimport { unlock } from '../../lock-unlock';\nconst { useHistory } = unlock( routerPrivateApis );\nimport { SidebarNavigationContext } from '../sidebar';\n\nconst SiteHub = memo(\n\tforwardRef( ( { isTransparent }, ref ) => {\n\t\tconst { dashboardLink, homeUrl, siteTitle } = useSelect( ( select ) => {\n\t\t\tconst { getSettings } = unlock( select( editSiteStore ) );\n\n\t\t\tconst { getEntityRecord } = select( coreStore );\n\t\t\tconst _site = getEntityRecord( 'root', 'site' );\n\t\t\treturn {\n\t\t\t\tdashboardLink:\n\t\t\t\t\tgetSettings().__experimentalDashboardLink || 'index.php',\n\t\t\t\thomeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,\n\t\t\t\tsiteTitle:\n\t\t\t\t\t! _site?.title && !! _site?.url\n\t\t\t\t\t\t? filterURLForDisplay( _site?.url )\n\t\t\t\t\t\t: _site?.title,\n\t\t\t};\n\t\t}, [] );\n\t\tconst { open: openCommandCenter } = useDispatch( commandsStore );\n\n\t\treturn (\n\t\t\t<div className=\"edit-site-site-hub\">\n\t\t\t\t<HStack justify=\"flex-start\" spacing=\"0\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'edit-site-site-hub__view-mode-toggle-container',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'has-transparent-background': isTransparent,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\t\thref={ dashboardLink }\n\t\t\t\t\t\t\tlabel={ __( 'Go to the Dashboard' ) }\n\t\t\t\t\t\t\tclassName=\"edit-site-layout__view-mode-toggle\"\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\ttransform: 'scale(0.5333) translateX(-4px)', // Offset to position the icon 12px from viewport edge\n\t\t\t\t\t\t\t\tborderRadius: 4,\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</Button>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<HStack>\n\t\t\t\t\t\t<div className=\"edit-site-site-hub__title\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\thref={ homeUrl }\n\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ decodeEntities( siteTitle ) }\n\t\t\t\t\t\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t/* translators: accessibility text */\n\t\t\t\t\t\t\t\t\t\t__( '(opens in a new tab)' )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\t\tclassName=\"edit-site-site-hub__actions\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\tclassName=\"edit-site-site-hub_toggle-command-center\"\n\t\t\t\t\t\t\t\ticon={ search }\n\t\t\t\t\t\t\t\tonClick={ () => openCommandCenter() }\n\t\t\t\t\t\t\t\tlabel={ __( 'Open command palette' ) }\n\t\t\t\t\t\t\t\tshortcut={ displayShortcut.primary( 'k' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</HStack>\n\t\t\t\t</HStack>\n\t\t\t</div>\n\t\t);\n\t} )\n);\n\nexport default SiteHub;\n\nexport const SiteHubMobile = memo(\n\tforwardRef( ( { isTransparent }, ref ) => {\n\t\tconst history = useHistory();\n\t\tconst { navigate } = useContext( SidebarNavigationContext );\n\n\t\tconst { dashboardLink, isBlockTheme, homeUrl, siteTitle } = useSelect(\n\t\t\t( select ) => {\n\t\t\t\tconst { getSettings } = unlock( select( editSiteStore ) );\n\n\t\t\t\tconst { getEntityRecord, getCurrentTheme } =\n\t\t\t\t\tselect( coreStore );\n\t\t\t\tconst _site = getEntityRecord( 'root', 'site' );\n\t\t\t\treturn {\n\t\t\t\t\tdashboardLink:\n\t\t\t\t\t\tgetSettings().__experimentalDashboardLink ||\n\t\t\t\t\t\t'index.php',\n\t\t\t\t\tisBlockTheme: getCurrentTheme()?.is_block_theme,\n\t\t\t\t\thomeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,\n\t\t\t\t\tsiteTitle:\n\t\t\t\t\t\t! _site?.title && !! _site?.url\n\t\t\t\t\t\t\t? filterURLForDisplay( _site?.url )\n\t\t\t\t\t\t\t: _site?.title,\n\t\t\t\t};\n\t\t\t},\n\t\t\t[]\n\t\t);\n\t\tconst { open: openCommandCenter } = useDispatch( commandsStore );\n\n\t\treturn (\n\t\t\t<div className=\"edit-site-site-hub\">\n\t\t\t\t<HStack justify=\"flex-start\" spacing=\"0\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'edit-site-site-hub__view-mode-toggle-container',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'has-transparent-background': isTransparent,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\t\tclassName=\"edit-site-layout__view-mode-toggle\"\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\ttransform: 'scale(0.5)',\n\t\t\t\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t{ ...( ! isBlockTheme\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\thref: dashboardLink,\n\t\t\t\t\t\t\t\t\t\tlabel: __( 'Go to the Dashboard' ),\n\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\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\t\t\thistory.push( {} );\n\t\t\t\t\t\t\t\t\t\t\tnavigate( 'back' );\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tlabel: __( 'Go to Site Editor' ),\n\t\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</Button>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<HStack>\n\t\t\t\t\t\t<div className=\"edit-site-site-hub__title\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\thref={ homeUrl }\n\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\tlabel={ __( 'View site (opens in a new tab)' ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ decodeEntities( siteTitle ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\t\tclassName=\"edit-site-site-hub__actions\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tclassName=\"edit-site-site-hub_toggle-command-center\"\n\t\t\t\t\t\t\t\ticon={ search }\n\t\t\t\t\t\t\t\tonClick={ () => openCommandCenter() }\n\t\t\t\t\t\t\t\tlabel={ __( 'Open command palette' ) }\n\t\t\t\t\t\t\t\tshortcut={ displayShortcut.primary( 'k' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</HStack>\n\t\t\t\t</HStack>\n\t\t\t</div>\n\t\t);\n\t} )\n);\n"],"mappings":"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","ignoreList":[]}

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

@@ -63,6 +63,10 @@ export const STYLE_BOOK_THEME_SUBCATEGORIES = [{
   blocks: ['core/comments-title', 'core/comments-pagination', 'core/comments-pagination-numbers', 'core/comments', 'core/comments-author-name', 'core/comment-content', 'core/comment-date', 'core/comment-edit-link', 'core/comment-reply-link', 'core/comment-template', 'core/post-comments-count', 'core/post-comments-link']
 }];
 export const STYLE_BOOK_CATEGORIES = [{
+  slug: 'overview',
+  title: __('Overview'),
+  blocks: []
+}, {
   slug: 'text',
   title: __('Text'),
   blocks: ['core/post-content', 'core/home-link', 'core/navigation-link']
@@ -194,16 +198,19 @@ export const STYLE_BOOK_IFRAME_STYLES = `
 	.edit-site-style-book__example-preview {
 		width: 100%;
 	}
+	
+	.is-wide .edit-site-style-book__example-preview {
+		width: calc(100% - 120px);
+	}
 
 	.edit-site-style-book__example-preview .block-editor-block-list__insertion-point,
 	.edit-site-style-book__example-preview .block-list-appender {
 		display: none;
 	}
-
-	.edit-site-style-book__example-preview .is-root-container > .wp-block:first-child {
+	:where(.is-root-container > .wp-block:first-child) {
 		margin-top: 0;
 	}
-	.edit-site-style-book__example-preview .is-root-container > .wp-block:last-child {
+	:where(.is-root-container > .wp-block:last-child) {
 		margin-bottom: 0;
 	}
 `;

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

@@ -1 +1 @@
-{"version":3,"names":["__","STYLE_BOOK_COLOR_GROUPS","slug","title","origin","type","STYLE_BOOK_THEME_SUBCATEGORIES","blocks","exclude","STYLE_BOOK_CATEGORIES","subcategories","include","ROOT_CONTAINER","STYLE_BOOK_IFRAME_STYLES"],"sources":["@wordpress/edit-site/src/components/style-book/constants.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { StyleBookCategory, StyleBookColorGroup } from './types';\n\nexport const STYLE_BOOK_COLOR_GROUPS: StyleBookColorGroup[] = [\n\t{\n\t\tslug: 'theme-colors',\n\t\ttitle: __( 'Theme Colors' ),\n\t\torigin: 'theme',\n\t\ttype: 'colors',\n\t},\n\t{\n\t\tslug: 'theme-gradients',\n\t\ttitle: __( 'Theme Gradients' ),\n\t\torigin: 'theme',\n\t\ttype: 'gradients',\n\t},\n\t{\n\t\tslug: 'custom-colors',\n\t\ttitle: __( 'Custom Colors' ),\n\t\torigin: 'custom',\n\t\ttype: 'colors',\n\t},\n\t{\n\t\tslug: 'custom-gradients',\n\t\ttitle: __( 'Custom Gradients' ),\n\t\torigin: 'custom', // User.\n\t\ttype: 'gradients',\n\t},\n\t{\n\t\tslug: 'duotones',\n\t\ttitle: __( 'Duotones' ),\n\t\torigin: 'theme',\n\t\ttype: 'duotones',\n\t},\n\t{\n\t\tslug: 'default-colors',\n\t\ttitle: __( 'Default Colors' ),\n\t\torigin: 'default',\n\t\ttype: 'colors',\n\t},\n\t{\n\t\tslug: 'default-gradients',\n\t\ttitle: __( 'Default Gradients' ),\n\t\torigin: 'default',\n\t\ttype: 'gradients',\n\t},\n];\n\nexport const STYLE_BOOK_THEME_SUBCATEGORIES: Omit<\n\tStyleBookCategory,\n\t'subcategories'\n>[] = [\n\t{\n\t\tslug: 'site-identity',\n\t\ttitle: __( 'Site Identity' ),\n\t\tblocks: [ 'core/site-logo', 'core/site-title', 'core/site-tagline' ],\n\t},\n\t{\n\t\tslug: 'design',\n\t\ttitle: __( 'Design' ),\n\t\tblocks: [ 'core/navigation', 'core/avatar', 'core/post-time-to-read' ],\n\t\texclude: [ 'core/home-link', 'core/navigation-link' ],\n\t},\n\t{\n\t\tslug: 'posts',\n\t\ttitle: __( 'Posts' ),\n\t\tblocks: [\n\t\t\t'core/post-title',\n\t\t\t'core/post-excerpt',\n\t\t\t'core/post-author',\n\t\t\t'core/post-author-name',\n\t\t\t'core/post-author-biography',\n\t\t\t'core/post-date',\n\t\t\t'core/post-terms',\n\t\t\t'core/term-description',\n\t\t\t'core/query-title',\n\t\t\t'core/query-no-results',\n\t\t\t'core/query-pagination',\n\t\t\t'core/query-numbers',\n\t\t],\n\t},\n\t{\n\t\tslug: 'comments',\n\t\ttitle: __( 'Comments' ),\n\t\tblocks: [\n\t\t\t'core/comments-title',\n\t\t\t'core/comments-pagination',\n\t\t\t'core/comments-pagination-numbers',\n\t\t\t'core/comments',\n\t\t\t'core/comments-author-name',\n\t\t\t'core/comment-content',\n\t\t\t'core/comment-date',\n\t\t\t'core/comment-edit-link',\n\t\t\t'core/comment-reply-link',\n\t\t\t'core/comment-template',\n\t\t\t'core/post-comments-count',\n\t\t\t'core/post-comments-link',\n\t\t],\n\t},\n];\n\nexport const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [\n\t{\n\t\tslug: 'text',\n\t\ttitle: __( 'Text' ),\n\t\tblocks: [\n\t\t\t'core/post-content',\n\t\t\t'core/home-link',\n\t\t\t'core/navigation-link',\n\t\t],\n\t},\n\t{\n\t\tslug: 'colors',\n\t\ttitle: __( 'Colors' ),\n\t\tblocks: [],\n\t},\n\t{\n\t\tslug: 'theme',\n\t\ttitle: __( 'Theme' ),\n\t\tsubcategories: STYLE_BOOK_THEME_SUBCATEGORIES,\n\t},\n\t{\n\t\tslug: 'media',\n\t\ttitle: __( 'Media' ),\n\t\tblocks: [ 'core/post-featured-image' ],\n\t},\n\t{\n\t\tslug: 'widgets',\n\t\ttitle: __( 'Widgets' ),\n\t\tblocks: [],\n\t},\n\t{\n\t\tslug: 'embed',\n\t\ttitle: __( 'Embeds' ),\n\t\tinclude: [],\n\t},\n];\n\n// Forming a \"block formatting context\" to prevent margin collapsing.\n// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context\nconst ROOT_CONTAINER = `\n\t.is-root-container {\n\t\tdisplay: flow-root;\n\t}\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.\nexport const STYLE_BOOK_IFRAME_STYLES = `\n\tbody {\n\t\tposition: relative;\n\t\tpadding: 32px !important;\n\t}\n\n\t${ ROOT_CONTAINER }\n\n\t.edit-site-style-book__examples {\n\t\tmax-width: 1200px;\n\t\tmargin: 0 auto;\n\t}\n\n\t.edit-site-style-book__example {\n\t    max-width: 900px;\n\t\tborder-radius: 2px;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 40px;\n\t\tpadding: 16px;\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\t\tscroll-margin-top: 32px;\n\t\tscroll-margin-bottom: 32px;\n\t\tmargin: 0 auto 40px auto;\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.is-disabled-example {\n\t\tpointer-events: none;\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__duotone-example > div:first-child {\n\t\tdisplay: flex;\n\t\taspect-ratio: 16 / 9;\n\t\tgrid-row: span 1;\n\t\tgrid-column: span 2;\n\t}\n\t.edit-site-style-book__duotone-example img {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tobject-fit: cover;\n\t}\n\t.edit-site-style-book__duotone-example > div:not(:first-child) {\n\t\theight: 20px;\n\t\tborder: 1px solid #ddd;\n\t}\n\n\t.edit-site-style-book__color-example {\n\t\theight: 52px;\n\t\tborder: 1px solid #ddd;\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__subcategory-title,\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__subcategory-title {\n\t\tfont-size: 16px;\n\t\tmargin-bottom: 40px;\n    \tborder-bottom: 1px solid #ddd;\n    \tpadding-bottom: 8px;\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"],"mappings":"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CA;AACA,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,wBAAwB,GAAG;AACxC;AACA;AACA;AACA;AACA;AACA,GAAID,cAAc;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"names":["__","STYLE_BOOK_COLOR_GROUPS","slug","title","origin","type","STYLE_BOOK_THEME_SUBCATEGORIES","blocks","exclude","STYLE_BOOK_CATEGORIES","subcategories","include","ROOT_CONTAINER","STYLE_BOOK_IFRAME_STYLES"],"sources":["@wordpress/edit-site/src/components/style-book/constants.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { StyleBookCategory, StyleBookColorGroup } from './types';\n\nexport const STYLE_BOOK_COLOR_GROUPS: StyleBookColorGroup[] = [\n\t{\n\t\tslug: 'theme-colors',\n\t\ttitle: __( 'Theme Colors' ),\n\t\torigin: 'theme',\n\t\ttype: 'colors',\n\t},\n\t{\n\t\tslug: 'theme-gradients',\n\t\ttitle: __( 'Theme Gradients' ),\n\t\torigin: 'theme',\n\t\ttype: 'gradients',\n\t},\n\t{\n\t\tslug: 'custom-colors',\n\t\ttitle: __( 'Custom Colors' ),\n\t\torigin: 'custom',\n\t\ttype: 'colors',\n\t},\n\t{\n\t\tslug: 'custom-gradients',\n\t\ttitle: __( 'Custom Gradients' ),\n\t\torigin: 'custom', // User.\n\t\ttype: 'gradients',\n\t},\n\t{\n\t\tslug: 'duotones',\n\t\ttitle: __( 'Duotones' ),\n\t\torigin: 'theme',\n\t\ttype: 'duotones',\n\t},\n\t{\n\t\tslug: 'default-colors',\n\t\ttitle: __( 'Default Colors' ),\n\t\torigin: 'default',\n\t\ttype: 'colors',\n\t},\n\t{\n\t\tslug: 'default-gradients',\n\t\ttitle: __( 'Default Gradients' ),\n\t\torigin: 'default',\n\t\ttype: 'gradients',\n\t},\n];\n\nexport const STYLE_BOOK_THEME_SUBCATEGORIES: Omit<\n\tStyleBookCategory,\n\t'subcategories'\n>[] = [\n\t{\n\t\tslug: 'site-identity',\n\t\ttitle: __( 'Site Identity' ),\n\t\tblocks: [ 'core/site-logo', 'core/site-title', 'core/site-tagline' ],\n\t},\n\t{\n\t\tslug: 'design',\n\t\ttitle: __( 'Design' ),\n\t\tblocks: [ 'core/navigation', 'core/avatar', 'core/post-time-to-read' ],\n\t\texclude: [ 'core/home-link', 'core/navigation-link' ],\n\t},\n\t{\n\t\tslug: 'posts',\n\t\ttitle: __( 'Posts' ),\n\t\tblocks: [\n\t\t\t'core/post-title',\n\t\t\t'core/post-excerpt',\n\t\t\t'core/post-author',\n\t\t\t'core/post-author-name',\n\t\t\t'core/post-author-biography',\n\t\t\t'core/post-date',\n\t\t\t'core/post-terms',\n\t\t\t'core/term-description',\n\t\t\t'core/query-title',\n\t\t\t'core/query-no-results',\n\t\t\t'core/query-pagination',\n\t\t\t'core/query-numbers',\n\t\t],\n\t},\n\t{\n\t\tslug: 'comments',\n\t\ttitle: __( 'Comments' ),\n\t\tblocks: [\n\t\t\t'core/comments-title',\n\t\t\t'core/comments-pagination',\n\t\t\t'core/comments-pagination-numbers',\n\t\t\t'core/comments',\n\t\t\t'core/comments-author-name',\n\t\t\t'core/comment-content',\n\t\t\t'core/comment-date',\n\t\t\t'core/comment-edit-link',\n\t\t\t'core/comment-reply-link',\n\t\t\t'core/comment-template',\n\t\t\t'core/post-comments-count',\n\t\t\t'core/post-comments-link',\n\t\t],\n\t},\n];\n\nexport const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [\n\t{\n\t\tslug: 'overview',\n\t\ttitle: __( 'Overview' ),\n\t\tblocks: [],\n\t},\n\t{\n\t\tslug: 'text',\n\t\ttitle: __( 'Text' ),\n\t\tblocks: [\n\t\t\t'core/post-content',\n\t\t\t'core/home-link',\n\t\t\t'core/navigation-link',\n\t\t],\n\t},\n\t{\n\t\tslug: 'colors',\n\t\ttitle: __( 'Colors' ),\n\t\tblocks: [],\n\t},\n\t{\n\t\tslug: 'theme',\n\t\ttitle: __( 'Theme' ),\n\t\tsubcategories: STYLE_BOOK_THEME_SUBCATEGORIES,\n\t},\n\t{\n\t\tslug: 'media',\n\t\ttitle: __( 'Media' ),\n\t\tblocks: [ 'core/post-featured-image' ],\n\t},\n\t{\n\t\tslug: 'widgets',\n\t\ttitle: __( 'Widgets' ),\n\t\tblocks: [],\n\t},\n\t{\n\t\tslug: 'embed',\n\t\ttitle: __( 'Embeds' ),\n\t\tinclude: [],\n\t},\n];\n\n// Forming a \"block formatting context\" to prevent margin collapsing.\n// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context\nconst ROOT_CONTAINER = `\n\t.is-root-container {\n\t\tdisplay: flow-root;\n\t}\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.\nexport const STYLE_BOOK_IFRAME_STYLES = `\n\tbody {\n\t\tposition: relative;\n\t\tpadding: 32px !important;\n\t}\n\n\t${ ROOT_CONTAINER }\n\n\t.edit-site-style-book__examples {\n\t\tmax-width: 1200px;\n\t\tmargin: 0 auto;\n\t}\n\n\t.edit-site-style-book__example {\n\t    max-width: 900px;\n\t\tborder-radius: 2px;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 40px;\n\t\tpadding: 16px;\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\t\tscroll-margin-top: 32px;\n\t\tscroll-margin-bottom: 32px;\n\t\tmargin: 0 auto 40px auto;\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.is-disabled-example {\n\t\tpointer-events: none;\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__duotone-example > div:first-child {\n\t\tdisplay: flex;\n\t\taspect-ratio: 16 / 9;\n\t\tgrid-row: span 1;\n\t\tgrid-column: span 2;\n\t}\n\t.edit-site-style-book__duotone-example img {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tobject-fit: cover;\n\t}\n\t.edit-site-style-book__duotone-example > div:not(:first-child) {\n\t\theight: 20px;\n\t\tborder: 1px solid #ddd;\n\t}\n\n\t.edit-site-style-book__color-example {\n\t\theight: 52px;\n\t\tborder: 1px solid #ddd;\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__subcategory-title,\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__subcategory-title {\n\t\tfont-size: 16px;\n\t\tmargin-bottom: 40px;\n    \tborder-bottom: 1px solid #ddd;\n    \tpadding-bottom: 8px;\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\t\n\t.is-wide .edit-site-style-book__example-preview {\n\t\twidth: calc(100% - 120px);\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\t:where(.is-root-container > .wp-block:first-child) {\n\t\tmargin-top: 0;\n\t}\n\t:where(.is-root-container > .wp-block:last-child) {\n\t\tmargin-bottom: 0;\n\t}\n`;\n"],"mappings":"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AAE,QAAS,CAAC;EACrBW,OAAO,EAAE;AACV,CAAC,CACD;;AAED;AACA;AACA,MAAMC,cAAc,GAAG;AACvB;AACA;AACA;AACA,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,wBAAwB,GAAG;AACxC;AACA;AACA;AACA;AACA;AACA,GAAID,cAAc;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -50,6 +50,86 @@ function getColorExamples(colors) {
   return examples;
 }
 
+/**
+ * Returns examples for the overview page.
+ *
+ * @param {MultiOriginPalettes} colors Global Styles color palettes per origin.
+ * @return {BlockExample[]} An array of block examples.
+ */
+function getOverviewBlockExamples(colors) {
+  const examples = [];
+
+  // Get theme palette from colors.
+  const themePalette = colors.colors.find(origin => origin.slug === 'theme');
+  if (themePalette) {
+    const themeColorexample = {
+      name: 'theme-colors',
+      title: __('Colors'),
+      category: 'overview',
+      content: /*#__PURE__*/_jsx(ColorExamples, {
+        colors: themePalette.colors,
+        type: colors
+      })
+    };
+    examples.push(themeColorexample);
+  }
+  const headingBlock = createBlock('core/heading', {
+    content: __(`AaBbCcDdEeFfGgHhiiJjKkLIMmNnOoPpQakRrssTtUuVVWwXxxYyZzOl23356789X{(…)},2!*&:/A@HELFO™`),
+    level: 1
+  });
+  const firstParagraphBlock = createBlock('core/paragraph', {
+    content: __(`A paragraph in a website refers to a distinct block of text that is used to present and organize information. It is a fundamental unit of content in web design and is typically composed of a group of related sentences or thoughts focused on a particular topic or idea. Paragraphs play a crucial role in improving the readability and user experience of a website. They break down the text into smaller, manageable chunks, allowing readers to scan the content more easily.`)
+  });
+  const secondParagraphBlock = createBlock('core/paragraph', {
+    content: __(`Additionally, paragraphs help structure the flow of information and provide logical breaks between different concepts or pieces of information. In terms of formatting, paragraphs in websites are commonly denoted by a vertical gap or indentation between each block of text. This visual separation helps visually distinguish one paragraph from another, creating a clear and organized layout that guides the reader through the content smoothly.`)
+  });
+  const textExample = {
+    name: 'typography',
+    title: __('Typography'),
+    category: 'overview',
+    blocks: [headingBlock, createBlock('core/group', {
+      layout: {
+        type: 'grid',
+        columnCount: 2,
+        minimumColumnWidth: '12rem'
+      },
+      style: {
+        spacing: {
+          blockGap: '1.5rem'
+        }
+      }
+    }, [firstParagraphBlock, secondParagraphBlock])]
+  };
+  examples.push(textExample);
+  const otherBlockExamples = ['core/image', 'core/separator', 'core/buttons', 'core/pullquote', 'core/search'];
+
+  // Get examples for other blocks and put them in order of above array.
+  otherBlockExamples.forEach(blockName => {
+    const blockType = getBlockType(blockName);
+    if (blockType && blockType.example) {
+      const blockExample = {
+        name: blockName,
+        title: blockType.title,
+        category: 'overview',
+        /*
+         * CSS generated from style attributes will take precedence over global styles CSS,
+         * so remove the style attribute from the example to ensure the example
+         * demonstrates changes to global styles.
+         */
+        blocks: getBlockFromExample(blockName, {
+          ...blockType.example,
+          attributes: {
+            ...blockType.example.attributes,
+            style: undefined
+          }
+        })
+      };
+      examples.push(blockExample);
+    }
+  });
+  return examples;
+}
+
 /**
  * Returns a list of examples for registered block types.
  *
@@ -68,7 +148,18 @@ export function getExamples(colors) {
     name: blockType.name,
     title: blockType.title,
     category: blockType.category,
-    blocks: getBlockFromExample(blockType.name, blockType.example)
+    /*
+     * CSS generated from style attributes will take precedence over global styles CSS,
+     * so remove the style attribute from the example to ensure the example
+     * demonstrates changes to global styles.
+     */
+    blocks: getBlockFromExample(blockType.name, {
+      ...blockType.example,
+      attributes: {
+        ...blockType.example.attributes,
+        style: undefined
+      }
+    })
   }));
   const isHeadingBlockRegistered = !!getBlockType('core/heading');
   if (!isHeadingBlockRegistered) {
@@ -91,6 +182,7 @@ export function getExamples(colors) {
     })
   };
   const colorExamples = getColorExamples(colors);
-  return [headingsExample, ...colorExamples, ...nonHeadingBlockExamples];
+  const overviewBlockExamples = getOverviewBlockExamples(colors);
+  return [headingsExample, ...colorExamples, ...nonHeadingBlockExamples, ...overviewBlockExamples];
 }
 //# sourceMappingURL=examples.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__","sprintf","getBlockType","getBlockTypes","getBlockFromExample","createBlock","ColorExamples","DuotoneExamples","STYLE_BOOK_COLOR_GROUPS","jsx","_jsx","getColorExamples","colors","examples","forEach","group","palette","type","find","origin","slug","example","name","title","category","content","duotones","push","getExamples","nonHeadingBlockExamples","filter","blockType","supports","inserter","map","blocks","isHeadingBlockRegistered","headingsExample","level","colorExamples"],"sources":["@wordpress/edit-site/src/components/style-book/examples.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tgetBlockType,\n\tgetBlockTypes,\n\tgetBlockFromExample,\n\tcreateBlock,\n} from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport type { BlockExample, ColorOrigin, MultiOriginPalettes } from './types';\nimport ColorExamples from './color-examples';\nimport DuotoneExamples from './duotone-examples';\nimport { STYLE_BOOK_COLOR_GROUPS } from './constants';\n\n/**\n * Returns examples color examples for each origin\n * e.g. Core (Default), Theme, and User.\n *\n * @param {MultiOriginPalettes} colors Global Styles color palettes per origin.\n * @return {BlockExample[]} An array of color block examples.\n */\nfunction getColorExamples( colors: MultiOriginPalettes ): BlockExample[] {\n\tif ( ! colors ) {\n\t\treturn [];\n\t}\n\n\tconst examples: BlockExample[] = [];\n\n\tSTYLE_BOOK_COLOR_GROUPS.forEach( ( group ) => {\n\t\tconst palette = colors[ group.type ].find(\n\t\t\t( origin: ColorOrigin ) => origin.slug === group.origin\n\t\t);\n\n\t\tif ( palette?.[ group.type ] ) {\n\t\t\tconst example: BlockExample = {\n\t\t\t\tname: group.slug,\n\t\t\t\ttitle: group.title,\n\t\t\t\tcategory: 'colors',\n\t\t\t};\n\t\t\tif ( group.type === 'duotones' ) {\n\t\t\t\texample.content = (\n\t\t\t\t\t<DuotoneExamples duotones={ palette[ group.type ] } />\n\t\t\t\t);\n\t\t\t\texamples.push( example );\n\t\t\t} else {\n\t\t\t\texample.content = (\n\t\t\t\t\t<ColorExamples\n\t\t\t\t\t\tcolors={ palette[ group.type ] }\n\t\t\t\t\t\ttype={ group.type }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t\texamples.push( example );\n\t\t\t}\n\t\t}\n\t} );\n\n\treturn examples;\n}\n\n/**\n * Returns a list of examples for registered block types.\n *\n * @param {MultiOriginPalettes} colors Global styles colors grouped by origin e.g. Core, Theme, and User.\n * @return {BlockExample[]} An array of block examples.\n */\nexport function getExamples( colors: MultiOriginPalettes ): BlockExample[] {\n\tconst nonHeadingBlockExamples = 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\tconst isHeadingBlockRegistered = !! getBlockType( 'core/heading' );\n\n\tif ( ! isHeadingBlockRegistered ) {\n\t\treturn nonHeadingBlockExamples;\n\t}\n\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: [ 1, 2, 3, 4, 5, 6 ].map( ( level ) => {\n\t\t\treturn createBlock( 'core/heading', {\n\t\t\t\tcontent: sprintf(\n\t\t\t\t\t// translators: %d: heading level e.g: \"1\", \"2\", \"3\"\n\t\t\t\t\t__( 'Heading %d' ),\n\t\t\t\t\tlevel\n\t\t\t\t),\n\t\t\t\tlevel,\n\t\t\t} );\n\t\t} ),\n\t};\n\tconst colorExamples = getColorExamples( colors );\n\n\treturn [ headingsExample, ...colorExamples, ...nonHeadingBlockExamples ];\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__","sprintf","getBlockType","getBlockTypes","getBlockFromExample","createBlock","ColorExamples","DuotoneExamples","STYLE_BOOK_COLOR_GROUPS","jsx","_jsx","getColorExamples","colors","examples","forEach","group","palette","type","find","origin","slug","example","name","title","category","content","duotones","push","getOverviewBlockExamples","themePalette","themeColorexample","headingBlock","level","firstParagraphBlock","secondParagraphBlock","textExample","blocks","layout","columnCount","minimumColumnWidth","style","spacing","blockGap","otherBlockExamples","blockName","blockType","blockExample","attributes","undefined","getExamples","nonHeadingBlockExamples","filter","supports","inserter","map","isHeadingBlockRegistered","headingsExample","colorExamples","overviewBlockExamples"],"sources":["@wordpress/edit-site/src/components/style-book/examples.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tgetBlockType,\n\tgetBlockTypes,\n\tgetBlockFromExample,\n\tcreateBlock,\n} from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport type { BlockExample, ColorOrigin, MultiOriginPalettes } from './types';\nimport ColorExamples from './color-examples';\nimport DuotoneExamples from './duotone-examples';\nimport { STYLE_BOOK_COLOR_GROUPS } from './constants';\n\n/**\n * Returns examples color examples for each origin\n * e.g. Core (Default), Theme, and User.\n *\n * @param {MultiOriginPalettes} colors Global Styles color palettes per origin.\n * @return {BlockExample[]} An array of color block examples.\n */\nfunction getColorExamples( colors: MultiOriginPalettes ): BlockExample[] {\n\tif ( ! colors ) {\n\t\treturn [];\n\t}\n\n\tconst examples: BlockExample[] = [];\n\n\tSTYLE_BOOK_COLOR_GROUPS.forEach( ( group ) => {\n\t\tconst palette = colors[ group.type ].find(\n\t\t\t( origin: ColorOrigin ) => origin.slug === group.origin\n\t\t);\n\n\t\tif ( palette?.[ group.type ] ) {\n\t\t\tconst example: BlockExample = {\n\t\t\t\tname: group.slug,\n\t\t\t\ttitle: group.title,\n\t\t\t\tcategory: 'colors',\n\t\t\t};\n\t\t\tif ( group.type === 'duotones' ) {\n\t\t\t\texample.content = (\n\t\t\t\t\t<DuotoneExamples duotones={ palette[ group.type ] } />\n\t\t\t\t);\n\t\t\t\texamples.push( example );\n\t\t\t} else {\n\t\t\t\texample.content = (\n\t\t\t\t\t<ColorExamples\n\t\t\t\t\t\tcolors={ palette[ group.type ] }\n\t\t\t\t\t\ttype={ group.type }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t\texamples.push( example );\n\t\t\t}\n\t\t}\n\t} );\n\n\treturn examples;\n}\n\n/**\n * Returns examples for the overview page.\n *\n * @param {MultiOriginPalettes} colors Global Styles color palettes per origin.\n * @return {BlockExample[]} An array of block examples.\n */\nfunction getOverviewBlockExamples(\n\tcolors: MultiOriginPalettes\n): BlockExample[] {\n\tconst examples: BlockExample[] = [];\n\n\t// Get theme palette from colors.\n\tconst themePalette = colors.colors.find(\n\t\t( origin: ColorOrigin ) => origin.slug === 'theme'\n\t);\n\n\tif ( themePalette ) {\n\t\tconst themeColorexample: BlockExample = {\n\t\t\tname: 'theme-colors',\n\t\t\ttitle: __( 'Colors' ),\n\t\t\tcategory: 'overview',\n\t\t\tcontent: (\n\t\t\t\t<ColorExamples colors={ themePalette.colors } type={ colors } />\n\t\t\t),\n\t\t};\n\n\t\texamples.push( themeColorexample );\n\t}\n\n\tconst headingBlock = createBlock( 'core/heading', {\n\t\tcontent: __(\n\t\t\t`AaBbCcDdEeFfGgHhiiJjKkLIMmNnOoPpQakRrssTtUuVVWwXxxYyZzOl23356789X{(…)},2!*&:/A@HELFO™`\n\t\t),\n\t\tlevel: 1,\n\t} );\n\tconst firstParagraphBlock = createBlock( 'core/paragraph', {\n\t\tcontent: __(\n\t\t\t`A paragraph in a website refers to a distinct block of text that is used to present and organize information. It is a fundamental unit of content in web design and is typically composed of a group of related sentences or thoughts focused on a particular topic or idea. Paragraphs play a crucial role in improving the readability and user experience of a website. They break down the text into smaller, manageable chunks, allowing readers to scan the content more easily.`\n\t\t),\n\t} );\n\tconst secondParagraphBlock = createBlock( 'core/paragraph', {\n\t\tcontent: __(\n\t\t\t`Additionally, paragraphs help structure the flow of information and provide logical breaks between different concepts or pieces of information. In terms of formatting, paragraphs in websites are commonly denoted by a vertical gap or indentation between each block of text. This visual separation helps visually distinguish one paragraph from another, creating a clear and organized layout that guides the reader through the content smoothly.`\n\t\t),\n\t} );\n\n\tconst textExample = {\n\t\tname: 'typography',\n\t\ttitle: __( 'Typography' ),\n\t\tcategory: 'overview',\n\t\tblocks: [\n\t\t\theadingBlock,\n\t\t\tcreateBlock(\n\t\t\t\t'core/group',\n\t\t\t\t{\n\t\t\t\t\tlayout: {\n\t\t\t\t\t\ttype: 'grid',\n\t\t\t\t\t\tcolumnCount: 2,\n\t\t\t\t\t\tminimumColumnWidth: '12rem',\n\t\t\t\t\t},\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\tspacing: {\n\t\t\t\t\t\t\tblockGap: '1.5rem',\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t[ firstParagraphBlock, secondParagraphBlock ]\n\t\t\t),\n\t\t],\n\t};\n\texamples.push( textExample );\n\n\tconst otherBlockExamples = [\n\t\t'core/image',\n\t\t'core/separator',\n\t\t'core/buttons',\n\t\t'core/pullquote',\n\t\t'core/search',\n\t];\n\n\t// Get examples for other blocks and put them in order of above array.\n\totherBlockExamples.forEach( ( blockName ) => {\n\t\tconst blockType = getBlockType( blockName );\n\t\tif ( blockType && blockType.example ) {\n\t\t\tconst blockExample: BlockExample = {\n\t\t\t\tname: blockName,\n\t\t\t\ttitle: blockType.title,\n\t\t\t\tcategory: 'overview',\n\t\t\t\t/*\n\t\t\t\t * CSS generated from style attributes will take precedence over global styles CSS,\n\t\t\t\t * so remove the style attribute from the example to ensure the example\n\t\t\t\t * demonstrates changes to global styles.\n\t\t\t\t */\n\t\t\t\tblocks: getBlockFromExample( blockName, {\n\t\t\t\t\t...blockType.example,\n\t\t\t\t\tattributes: {\n\t\t\t\t\t\t...blockType.example.attributes,\n\t\t\t\t\t\tstyle: undefined,\n\t\t\t\t\t},\n\t\t\t\t} ),\n\t\t\t};\n\t\t\texamples.push( blockExample );\n\t\t}\n\t} );\n\n\treturn examples;\n}\n\n/**\n * Returns a list of examples for registered block types.\n *\n * @param {MultiOriginPalettes} colors Global styles colors grouped by origin e.g. Core, Theme, and User.\n * @return {BlockExample[]} An array of block examples.\n */\nexport function getExamples( colors: MultiOriginPalettes ): BlockExample[] {\n\tconst nonHeadingBlockExamples = 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\t/*\n\t\t\t * CSS generated from style attributes will take precedence over global styles CSS,\n\t\t\t * so remove the style attribute from the example to ensure the example\n\t\t\t * demonstrates changes to global styles.\n\t\t\t */\n\t\t\tblocks: getBlockFromExample( blockType.name, {\n\t\t\t\t...blockType.example,\n\t\t\t\tattributes: {\n\t\t\t\t\t...blockType.example.attributes,\n\t\t\t\t\tstyle: undefined,\n\t\t\t\t},\n\t\t\t} ),\n\t\t} ) );\n\tconst isHeadingBlockRegistered = !! getBlockType( 'core/heading' );\n\n\tif ( ! isHeadingBlockRegistered ) {\n\t\treturn nonHeadingBlockExamples;\n\t}\n\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: [ 1, 2, 3, 4, 5, 6 ].map( ( level ) => {\n\t\t\treturn createBlock( 'core/heading', {\n\t\t\t\tcontent: sprintf(\n\t\t\t\t\t// translators: %d: heading level e.g: \"1\", \"2\", \"3\"\n\t\t\t\t\t__( 'Heading %d' ),\n\t\t\t\t\tlevel\n\t\t\t\t),\n\t\t\t\tlevel,\n\t\t\t} );\n\t\t} ),\n\t};\n\tconst colorExamples = getColorExamples( colors );\n\n\tconst overviewBlockExamples = getOverviewBlockExamples( colors );\n\n\treturn [\n\t\theadingsExample,\n\t\t...colorExamples,\n\t\t...nonHeadingBlockExamples,\n\t\t...overviewBlockExamples,\n\t];\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -12,7 +12,7 @@ import { BlockList, privateApis as blockEditorPrivateApis, store as blockEditorS
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
 import { useResizeObserver } from '@wordpress/compose';
-import { useMemo, useState, memo, useContext } from '@wordpress/element';
+import { useMemo, useState, memo, useContext, useRef, useLayoutEffect } from '@wordpress/element';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 
 /**
@@ -40,6 +40,44 @@ function isObjectEmpty(object) {
   return !object || Object.keys(object).length === 0;
 }
 
+/**
+ * Scrolls to a section within an iframe.
+ *
+ * @param {string}            anchorId The id of the element to scroll to.
+ * @param {HTMLIFrameElement} iframe   The target iframe.
+ */
+const scrollToSection = (anchorId, iframe) => {
+  if (!iframe || !iframe?.contentDocument) {
+    return;
+  }
+  const element = iframe.contentDocument.getElementById(anchorId);
+  if (element) {
+    element.scrollIntoView({
+      behavior: 'smooth'
+    });
+  }
+};
+
+/**
+ * Parses a Block Editor navigation path to extract the block name and
+ * build a style book navigation path. The object can be extended to include a category,
+ * representing a style book tab/section.
+ *
+ * @param {string} path An internal Block Editor navigation path.
+ * @return {null|{block: string}} An object containing the example to navigate to.
+ */
+const getStyleBookNavigationFromPath = path => {
+  if (path && typeof path === 'string') {
+    let block = path.includes('/blocks/') ? decodeURIComponent(path.split('/blocks/')[1]) : null;
+    // Default to theme-colors if the path ends with /colors.
+    block = path.endsWith('/colors') ? 'theme-colors' : block;
+    return {
+      block
+    };
+  }
+  return null;
+};
+
 /**
  * Retrieves colors, gradients, and duotone filters from Global Styles.
  * The inclusion of default (Core) palettes is controlled by the relevant
@@ -94,7 +132,8 @@ function StyleBook({
   showCloseButton = true,
   onClose,
   showTabs = true,
-  userConfig = {}
+  userConfig = {},
+  path = ''
 }) {
   const [resizeObserver, sizes] = useResizeObserver();
   const [textColor] = useGlobalStyle('color.text');
@@ -102,9 +141,19 @@ function StyleBook({
   const colors = useMultiOriginPalettes();
   const examples = useMemo(() => getExamples(colors), [colors]);
   const tabs = useMemo(() => getTopLevelStyleBookCategories().filter(category => examples.some(example => example.category === category.slug)), [examples]);
+  const examplesForSinglePageUse = [];
+  const overviewCategoryExamples = getExamplesByCategory({
+    slug: 'overview'
+  }, examples);
+  examplesForSinglePageUse.push(...overviewCategoryExamples.examples);
+  const otherExamples = examples.filter(example => {
+    return example.category !== 'overview' && !overviewCategoryExamples.examples.find(overviewExample => overviewExample.name === example.name);
+  });
+  examplesForSinglePageUse.push(...otherExamples);
   const {
     base: baseConfig
   } = useContext(GlobalStylesContext);
+  const goTo = getStyleBookNavigationFromPath(path);
   const mergedConfig = useMemo(() => {
     if (!isObjectEmpty(userConfig) && !isObjectEmpty(baseConfig)) {
       return mergeBaseAndUserConfigs(baseConfig, userConfig);
@@ -154,16 +203,18 @@ function StyleBook({
             onSelect: onSelect,
             settings: settings,
             sizes: sizes,
-            title: tab.title
+            title: tab.title,
+            goTo: goTo
           })
         }, tab.slug))]
       }) : /*#__PURE__*/_jsx(StyleBookBody, {
-        examples: examples,
+        examples: examplesForSinglePageUse,
         isSelected: isSelected,
         onClick: onClick,
         onSelect: onSelect,
         settings: settings,
-        sizes: sizes
+        sizes: sizes,
+        goTo: goTo
       })]
     })
   });
@@ -176,10 +227,12 @@ const StyleBookBody = ({
   onSelect,
   settings,
   sizes,
-  title
+  title,
+  goTo
 }) => {
   const [isFocused, setIsFocused] = useState(false);
-
+  const [hasIframeLoaded, setHasIframeLoaded] = useState(false);
+  const iframeRef = useRef(null);
   // The presence of an `onClick` prop indicates that the Style Book is being used as a button.
   // In this case, add additional props to the iframe to make it behave like a button.
   const buttonModeProps = {
@@ -209,7 +262,15 @@ const StyleBookBody = ({
     },
     readonly: true
   };
+  const handleLoad = () => setHasIframeLoaded(true);
+  useLayoutEffect(() => {
+    if (goTo?.block && hasIframeLoaded && iframeRef?.current) {
+      scrollToSection(`example-${goTo?.block}`, iframeRef?.current);
+    }
+  }, [iframeRef?.current, goTo?.block, scrollToSection, hasIframeLoaded]);
   return /*#__PURE__*/_jsxs(Iframe, {
+    onLoad: handleLoad,
+    ref: iframeRef,
     className: clsx('edit-site-style-book__iframe', {
       'is-focused': isFocused && !!onClick,
       'is-button': !!onClick
@@ -257,10 +318,8 @@ const Examples = memo(({
       title: example.title,
       content: example.content,
       blocks: example.blocks,
-      isSelected: isSelected(example.name),
-      onClick: () => {
-        onSelect?.(example.name);
-      }
+      isSelected: isSelected?.(example.name),
+      onClick: () => onSelect?.(example.name)
     }, example.name)), !!filteredExamples?.subcategories?.length && filteredExamples.subcategories.map(subcategory => /*#__PURE__*/_jsxs(Composite.Group, {
       className: "edit-site-style-book__subcategory",
       children: [/*#__PURE__*/_jsx(Composite.GroupLabel, {
@@ -286,7 +345,7 @@ const Subcategory = ({
     title: example.title,
     content: example.content,
     blocks: example.blocks,
-    isSelected: isSelected(example.name),
+    isSelected: isSelected?.(example.name),
     onClick: () => {
       onSelect?.(example.name);
     }