@wordpress/edit-site 6.8.5 → 6.9.0

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","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// TODO: Switch to `true` (40px size) if possible\n\t\t\t\t\t\t\t__next40pxDefaultSize={ false }\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.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>\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// TODO: Switch to `true` (40px size) if possible\n\t\t\t\t\t\t\t\t__next40pxDefaultSize={ false }\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\t// TODO: Switch to `true` (40px size) if possible\n\t\t\t\t\t\t\t\t__next40pxDefaultSize={ false }\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// TODO: Switch to `true` (40px size) if possible\n\t\t\t\t\t\t\t__next40pxDefaultSize={ false }\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// TODO: Switch to `true` (40px size) if possible\n\t\t\t\t\t\t\t\t__next40pxDefaultSize={ false }\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// TODO: Switch to `true` (40px size) if possible\n\t\t\t\t\t\t\t\t__next40pxDefaultSize={ false }\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","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.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>\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\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\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":[]}

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

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { getCategories } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+
+import { STYLE_BOOK_CATEGORIES, STYLE_BOOK_THEME_SUBCATEGORIES } from './constants';
+
+/**
+ * Returns category examples for a given category definition and list of examples.
+ * @param {StyleBookCategory} categoryDefinition The category definition.
+ * @param {BlockExample[]}    examples           An array of block examples.
+ * @return {CategoryExamples|undefined} An object containing the category examples.
+ */
+export function getExamplesByCategory(categoryDefinition, examples) {
+  if (!categoryDefinition?.slug || !examples?.length) {
+    return;
+  }
+  if (categoryDefinition?.subcategories?.length) {
+    return categoryDefinition.subcategories.reduce((acc, subcategoryDefinition) => {
+      const subcategoryExamples = getExamplesByCategory(subcategoryDefinition, examples);
+      if (subcategoryExamples) {
+        acc.subcategories = [...acc.subcategories, subcategoryExamples];
+      }
+      return acc;
+    }, {
+      title: categoryDefinition.title,
+      slug: categoryDefinition.slug,
+      subcategories: []
+    });
+  }
+  const blocksToInclude = categoryDefinition?.blocks || [];
+  const blocksToExclude = categoryDefinition?.exclude || [];
+  const categoryExamples = examples.filter(example => {
+    return !blocksToExclude.includes(example.name) && (example.category === categoryDefinition.slug || blocksToInclude.includes(example.name));
+  });
+  if (!categoryExamples.length) {
+    return;
+  }
+  return {
+    title: categoryDefinition.title,
+    slug: categoryDefinition.slug,
+    examples: categoryExamples
+  };
+}
+
+/**
+ * Returns category examples for a given category definition and list of examples.
+ *
+ * @return {StyleBookCategory[]} An array of top-level category definitions.
+ */
+export function getTopLevelStyleBookCategories() {
+  const reservedCategories = [...STYLE_BOOK_THEME_SUBCATEGORIES, ...STYLE_BOOK_CATEGORIES].map(({
+    slug
+  }) => slug);
+  const extraCategories = getCategories().filter(({
+    slug
+  }) => !reservedCategories.includes(slug));
+  return [...STYLE_BOOK_CATEGORIES, ...extraCategories];
+}
+//# sourceMappingURL=categories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["getCategories","STYLE_BOOK_CATEGORIES","STYLE_BOOK_THEME_SUBCATEGORIES","getExamplesByCategory","categoryDefinition","examples","slug","length","subcategories","reduce","acc","subcategoryDefinition","subcategoryExamples","title","blocksToInclude","blocks","blocksToExclude","exclude","categoryExamples","filter","example","includes","name","category","getTopLevelStyleBookCategories","reservedCategories","map","extraCategories"],"sources":["@wordpress/edit-site/src/components/style-book/categories.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getCategories } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tBlockExample,\n\tStyleBookCategory,\n\tCategoryExamples,\n} from './types';\nimport {\n\tSTYLE_BOOK_CATEGORIES,\n\tSTYLE_BOOK_THEME_SUBCATEGORIES,\n} from './constants';\n\n/**\n * Returns category examples for a given category definition and list of examples.\n * @param {StyleBookCategory} categoryDefinition The category definition.\n * @param {BlockExample[]}    examples           An array of block examples.\n * @return {CategoryExamples|undefined} An object containing the category examples.\n */\nexport function getExamplesByCategory(\n\tcategoryDefinition: StyleBookCategory,\n\texamples: BlockExample[]\n): CategoryExamples | undefined {\n\tif ( ! categoryDefinition?.slug || ! examples?.length ) {\n\t\treturn;\n\t}\n\n\tif ( categoryDefinition?.subcategories?.length ) {\n\t\treturn categoryDefinition.subcategories.reduce(\n\t\t\t( acc, subcategoryDefinition ) => {\n\t\t\t\tconst subcategoryExamples = getExamplesByCategory(\n\t\t\t\t\tsubcategoryDefinition,\n\t\t\t\t\texamples\n\t\t\t\t);\n\t\t\t\tif ( subcategoryExamples ) {\n\t\t\t\t\tacc.subcategories = [\n\t\t\t\t\t\t...acc.subcategories,\n\t\t\t\t\t\tsubcategoryExamples,\n\t\t\t\t\t];\n\t\t\t\t}\n\t\t\t\treturn acc;\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: categoryDefinition.title,\n\t\t\t\tslug: categoryDefinition.slug,\n\t\t\t\tsubcategories: [],\n\t\t\t}\n\t\t);\n\t}\n\n\tconst blocksToInclude = categoryDefinition?.blocks || [];\n\tconst blocksToExclude = categoryDefinition?.exclude || [];\n\tconst categoryExamples = examples.filter( ( example ) => {\n\t\treturn (\n\t\t\t! blocksToExclude.includes( example.name ) &&\n\t\t\t( example.category === categoryDefinition.slug ||\n\t\t\t\tblocksToInclude.includes( example.name ) )\n\t\t);\n\t} );\n\n\tif ( ! categoryExamples.length ) {\n\t\treturn;\n\t}\n\n\treturn {\n\t\ttitle: categoryDefinition.title,\n\t\tslug: categoryDefinition.slug,\n\t\texamples: categoryExamples,\n\t};\n}\n\n/**\n * Returns category examples for a given category definition and list of examples.\n *\n * @return {StyleBookCategory[]} An array of top-level category definitions.\n */\nexport function getTopLevelStyleBookCategories(): StyleBookCategory[] {\n\tconst reservedCategories = [\n\t\t...STYLE_BOOK_THEME_SUBCATEGORIES,\n\t\t...STYLE_BOOK_CATEGORIES,\n\t].map( ( { slug } ) => slug );\n\tconst extraCategories = getCategories().filter(\n\t\t( { slug } ) => ! reservedCategories.includes( slug )\n\t);\n\treturn [ ...STYLE_BOOK_CATEGORIES, ...extraCategories ];\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,mBAAmB;;AAEjD;AACA;AACA;;AAMA,SACCC,qBAAqB,EACrBC,8BAA8B,QACxB,aAAa;;AAEpB;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,qBAAqBA,CACpCC,kBAAqC,EACrCC,QAAwB,EACO;EAC/B,IAAK,CAAED,kBAAkB,EAAEE,IAAI,IAAI,CAAED,QAAQ,EAAEE,MAAM,EAAG;IACvD;EACD;EAEA,IAAKH,kBAAkB,EAAEI,aAAa,EAAED,MAAM,EAAG;IAChD,OAAOH,kBAAkB,CAACI,aAAa,CAACC,MAAM,CAC7C,CAAEC,GAAG,EAAEC,qBAAqB,KAAM;MACjC,MAAMC,mBAAmB,GAAGT,qBAAqB,CAChDQ,qBAAqB,EACrBN,QACD,CAAC;MACD,IAAKO,mBAAmB,EAAG;QAC1BF,GAAG,CAACF,aAAa,GAAG,CACnB,GAAGE,GAAG,CAACF,aAAa,EACpBI,mBAAmB,CACnB;MACF;MACA,OAAOF,GAAG;IACX,CAAC,EACD;MACCG,KAAK,EAAET,kBAAkB,CAACS,KAAK;MAC/BP,IAAI,EAAEF,kBAAkB,CAACE,IAAI;MAC7BE,aAAa,EAAE;IAChB,CACD,CAAC;EACF;EAEA,MAAMM,eAAe,GAAGV,kBAAkB,EAAEW,MAAM,IAAI,EAAE;EACxD,MAAMC,eAAe,GAAGZ,kBAAkB,EAAEa,OAAO,IAAI,EAAE;EACzD,MAAMC,gBAAgB,GAAGb,QAAQ,CAACc,MAAM,CAAIC,OAAO,IAAM;IACxD,OACC,CAAEJ,eAAe,CAACK,QAAQ,CAAED,OAAO,CAACE,IAAK,CAAC,KACxCF,OAAO,CAACG,QAAQ,KAAKnB,kBAAkB,CAACE,IAAI,IAC7CQ,eAAe,CAACO,QAAQ,CAAED,OAAO,CAACE,IAAK,CAAC,CAAE;EAE7C,CAAE,CAAC;EAEH,IAAK,CAAEJ,gBAAgB,CAACX,MAAM,EAAG;IAChC;EACD;EAEA,OAAO;IACNM,KAAK,EAAET,kBAAkB,CAACS,KAAK;IAC/BP,IAAI,EAAEF,kBAAkB,CAACE,IAAI;IAC7BD,QAAQ,EAAEa;EACX,CAAC;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASM,8BAA8BA,CAAA,EAAwB;EACrE,MAAMC,kBAAkB,GAAG,CAC1B,GAAGvB,8BAA8B,EACjC,GAAGD,qBAAqB,CACxB,CAACyB,GAAG,CAAE,CAAE;IAAEpB;EAAK,CAAC,KAAMA,IAAK,CAAC;EAC7B,MAAMqB,eAAe,GAAG3B,aAAa,CAAC,CAAC,CAACmB,MAAM,CAC7C,CAAE;IAAEb;EAAK,CAAC,KAAM,CAAEmB,kBAAkB,CAACJ,QAAQ,CAAEf,IAAK,CACrD,CAAC;EACD,OAAO,CAAE,GAAGL,qBAAqB,EAAE,GAAG0B,eAAe,CAAE;AACxD","ignoreList":[]}

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

@@ -0,0 +1,145 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+
+export const STYLE_BOOK_THEME_SUBCATEGORIES = [{
+  slug: 'site-identity',
+  title: __('Site Identity'),
+  blocks: ['core/site-logo', 'core/site-title', 'core/site-tagline']
+}, {
+  slug: 'design',
+  title: __('Design'),
+  blocks: ['core/navigation', 'core/avatar', 'core/post-time-to-read'],
+  exclude: ['core/home-link', 'core/navigation-link']
+}, {
+  slug: 'posts',
+  title: __('Posts'),
+  blocks: ['core/post-title', 'core/post-excerpt', 'core/post-author', 'core/post-author-name', 'core/post-author-biography', 'core/post-date', 'core/post-terms', 'core/term-description', 'core/query-title', 'core/query-no-results', 'core/query-pagination', 'core/query-numbers']
+}, {
+  slug: 'comments',
+  title: __('Comments'),
+  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: 'text',
+  title: __('Text'),
+  blocks: ['core/post-content', 'core/home-link', 'core/navigation-link']
+}, {
+  slug: 'colors',
+  title: __('Colors'),
+  blocks: ['custom/colors']
+}, {
+  slug: 'theme',
+  title: __('Theme'),
+  subcategories: STYLE_BOOK_THEME_SUBCATEGORIES
+}, {
+  slug: 'media',
+  title: __('Media'),
+  blocks: ['core/post-featured-image']
+}, {
+  slug: 'widgets',
+  title: __('Widgets'),
+  blocks: []
+}, {
+  slug: 'embed',
+  title: __('Embeds'),
+  include: []
+}];
+
+// 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.
+// Note that button styles are unset, and then focus rules from the `Button` component are
+// applied to the `button` element, targeted via `.edit-site-style-book__example`.
+// This is to ensure that browser default styles for buttons are not applied to the previews.
+export const STYLE_BOOK_IFRAME_STYLES = `
+	// Forming a "block formatting context" to prevent margin collapsing.
+	// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+	.is-root-container {
+		display: flow-root;
+	}
+	
+	body {
+		position: relative;
+		padding: 32px !important;
+	}
+
+	.edit-site-style-book__examples {
+		max-width: 1200px;
+		margin: 0 auto;
+	}
+
+	.edit-site-style-book__example {
+	    max-width: 900px;
+		border-radius: 2px;
+		cursor: pointer;
+		display: flex;
+		flex-direction: column;
+		gap: 40px;
+		padding: 16px;
+		width: 100%;
+		box-sizing: border-box;
+		scroll-margin-top: 32px;
+		scroll-margin-bottom: 32px;
+		margin: 0 auto 40px auto;
+	}
+
+	.edit-site-style-book__example.is-selected {
+		box-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+	}
+
+	.edit-site-style-book__example:focus:not(:disabled) {
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+		outline: 3px solid transparent;
+	}
+
+	.edit-site-style-book__examples.is-wide .edit-site-style-book__example {
+		flex-direction: row;
+	}
+	
+	.edit-site-style-book__subcategory-title,
+	.edit-site-style-book__example-title {
+		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+		font-size: 11px;
+		font-weight: 500;
+		line-height: normal;
+		margin: 0;
+		text-align: left;
+		text-transform: uppercase;
+	}
+	
+	.edit-site-style-book__subcategory-title {
+		font-size: 16px;
+		margin-bottom: 40px;
+    	border-bottom: 1px solid #ddd;
+    	padding-bottom: 8px;
+	}
+
+	.edit-site-style-book__examples.is-wide .edit-site-style-book__example-title {
+		text-align: right;
+		width: 120px;
+	}
+
+	.edit-site-style-book__example-preview {
+		width: 100%;
+	}
+
+	.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 {
+		margin-top: 0;
+	}
+	.edit-site-style-book__example-preview .is-root-container > .wp-block:last-child {
+		margin-bottom: 0;
+	}
+`;
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__","STYLE_BOOK_THEME_SUBCATEGORIES","slug","title","blocks","exclude","STYLE_BOOK_CATEGORIES","subcategories","include","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 } from './types';\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: [ 'custom/colors' ],\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// 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\t// Forming a \"block formatting context\" to prevent margin collapsing.\n\t// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context\n\t.is-root-container {\n\t\tdisplay: flow-root;\n\t}\n\t\n\tbody {\n\t\tposition: relative;\n\t\tpadding: 32px !important;\n\t}\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: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\t\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\t\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":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;;AAGA,OAAO,MAAMC,8BAGV,GAAG,CACL;EACCC,IAAI,EAAE,eAAe;EACrBC,KAAK,EAAEH,EAAE,CAAE,eAAgB,CAAC;EAC5BI,MAAM,EAAE,CAAE,gBAAgB,EAAE,iBAAiB,EAAE,mBAAmB;AACnE,CAAC,EACD;EACCF,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAEH,EAAE,CAAE,QAAS,CAAC;EACrBI,MAAM,EAAE,CAAE,iBAAiB,EAAE,aAAa,EAAE,wBAAwB,CAAE;EACtEC,OAAO,EAAE,CAAE,gBAAgB,EAAE,sBAAsB;AACpD,CAAC,EACD;EACCH,IAAI,EAAE,OAAO;EACbC,KAAK,EAAEH,EAAE,CAAE,OAAQ,CAAC;EACpBI,MAAM,EAAE,CACP,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,EAClB,uBAAuB,EACvB,4BAA4B,EAC5B,gBAAgB,EAChB,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EAClB,uBAAuB,EACvB,uBAAuB,EACvB,oBAAoB;AAEtB,CAAC,EACD;EACCF,IAAI,EAAE,UAAU;EAChBC,KAAK,EAAEH,EAAE,CAAE,UAAW,CAAC;EACvBI,MAAM,EAAE,CACP,qBAAqB,EACrB,0BAA0B,EAC1B,kCAAkC,EAClC,eAAe,EACf,2BAA2B,EAC3B,sBAAsB,EACtB,mBAAmB,EACnB,wBAAwB,EACxB,yBAAyB,EACzB,uBAAuB,EACvB,0BAA0B,EAC1B,yBAAyB;AAE3B,CAAC,CACD;AAED,OAAO,MAAME,qBAA0C,GAAG,CACzD;EACCJ,IAAI,EAAE,MAAM;EACZC,KAAK,EAAEH,EAAE,CAAE,MAAO,CAAC;EACnBI,MAAM,EAAE,CACP,mBAAmB,EACnB,gBAAgB,EAChB,sBAAsB;AAExB,CAAC,EACD;EACCF,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAEH,EAAE,CAAE,QAAS,CAAC;EACrBI,MAAM,EAAE,CAAE,eAAe;AAC1B,CAAC,EACD;EACCF,IAAI,EAAE,OAAO;EACbC,KAAK,EAAEH,EAAE,CAAE,OAAQ,CAAC;EACpBO,aAAa,EAAEN;AAChB,CAAC,EACD;EACCC,IAAI,EAAE,OAAO;EACbC,KAAK,EAAEH,EAAE,CAAE,OAAQ,CAAC;EACpBI,MAAM,EAAE,CAAE,0BAA0B;AACrC,CAAC,EACD;EACCF,IAAI,EAAE,SAAS;EACfC,KAAK,EAAEH,EAAE,CAAE,SAAU,CAAC;EACtBI,MAAM,EAAE;AACT,CAAC,EACD;EACCF,IAAI,EAAE,OAAO;EACbC,KAAK,EAAEH,EAAE,CAAE,QAAS,CAAC;EACrBQ,OAAO,EAAE;AACV,CAAC,CACD;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,wBAAwB,GAAI;AACzC;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

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { getBlockType, getBlockTypes, getBlockFromExample, createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * Returns a list of examples for registered block types.
+ *
+ * @return {BlockExample[]} An array of block examples.
+ */
+export function getExamples() {
+  const nonHeadingBlockExamples = getBlockTypes().filter(blockType => {
+    const {
+      name,
+      example,
+      supports
+    } = blockType;
+    return name !== 'core/heading' && !!example && supports.inserter !== false;
+  }).map(blockType => ({
+    name: blockType.name,
+    title: blockType.title,
+    category: blockType.category,
+    blocks: getBlockFromExample(blockType.name, blockType.example)
+  }));
+  const isHeadingBlockRegistered = !!getBlockType('core/heading');
+  if (!isHeadingBlockRegistered) {
+    return nonHeadingBlockExamples;
+  }
+
+  // Use our own example for the Heading block so that we can show multiple
+  // heading levels.
+  const headingsExample = {
+    name: 'core/heading',
+    title: __('Headings'),
+    category: 'text',
+    blocks: [1, 2, 3, 4, 5, 6].map(level => {
+      return createBlock('core/heading', {
+        content: sprintf(
+        // translators: %d: heading level e.g: "1", "2", "3"
+        __('Heading %d'), level),
+        level
+      });
+    })
+  };
+  return [headingsExample, ...nonHeadingBlockExamples];
+}
+//# sourceMappingURL=examples.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__","sprintf","getBlockType","getBlockTypes","getBlockFromExample","createBlock","getExamples","nonHeadingBlockExamples","filter","blockType","name","example","supports","inserter","map","title","category","blocks","isHeadingBlockRegistered","headingsExample","level","content"],"sources":["@wordpress/edit-site/src/components/style-book/examples.ts"],"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 } from './types';\n\n/**\n * Returns a list of examples for registered block types.\n *\n * @return {BlockExample[]} An array of block examples.\n */\nexport function getExamples(): 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\n\treturn [ headingsExample, ...nonHeadingBlockExamples ];\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AAC7C,SACCC,YAAY,EACZC,aAAa,EACbC,mBAAmB,EACnBC,WAAW,QACL,mBAAmB;;AAE1B;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,WAAWA,CAAA,EAAmB;EAC7C,MAAMC,uBAAuB,GAAGJ,aAAa,CAAC,CAAC,CAC7CK,MAAM,CAAIC,SAAS,IAAM;IACzB,MAAM;MAAEC,IAAI;MAAEC,OAAO;MAAEC;IAAS,CAAC,GAAGH,SAAS;IAC7C,OACCC,IAAI,KAAK,cAAc,IACvB,CAAC,CAAEC,OAAO,IACVC,QAAQ,CAACC,QAAQ,KAAK,KAAK;EAE7B,CAAE,CAAC,CACFC,GAAG,CAAIL,SAAS,KAAQ;IACxBC,IAAI,EAAED,SAAS,CAACC,IAAI;IACpBK,KAAK,EAAEN,SAAS,CAACM,KAAK;IACtBC,QAAQ,EAAEP,SAAS,CAACO,QAAQ;IAC5BC,MAAM,EAAEb,mBAAmB,CAAEK,SAAS,CAACC,IAAI,EAAED,SAAS,CAACE,OAAQ;EAChE,CAAC,CAAG,CAAC;EACN,MAAMO,wBAAwB,GAAG,CAAC,CAAEhB,YAAY,CAAE,cAAe,CAAC;EAElE,IAAK,CAAEgB,wBAAwB,EAAG;IACjC,OAAOX,uBAAuB;EAC/B;;EAEA;EACA;EACA,MAAMY,eAAe,GAAG;IACvBT,IAAI,EAAE,cAAc;IACpBK,KAAK,EAAEf,EAAE,CAAE,UAAW,CAAC;IACvBgB,QAAQ,EAAE,MAAM;IAChBC,MAAM,EAAE,CAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAE,CAACH,GAAG,CAAIM,KAAK,IAAM;MAC9C,OAAOf,WAAW,CAAE,cAAc,EAAE;QACnCgB,OAAO,EAAEpB,OAAO;QACf;QACAD,EAAE,CAAE,YAAa,CAAC,EAClBoB,KACD,CAAC;QACDA;MACD,CAAE,CAAC;IACJ,CAAE;EACH,CAAC;EAED,OAAO,CAAED,eAAe,EAAE,GAAGZ,uBAAuB,CAAE;AACvD","ignoreList":[]}

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

@@ -8,7 +8,6 @@ import clsx from 'clsx';
  */
 import { Disabled, Composite, privateApis as componentsPrivateApis } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { getCategories, getBlockType, getBlockTypes, getBlockFromExample, createBlock } from '@wordpress/blocks';
 import { BlockList, privateApis as blockEditorPrivateApis, store as blockEditorStore, __unstableEditorStyles as EditorStyles, __unstableIframe as Iframe } from '@wordpress/block-editor';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
@@ -21,6 +20,9 @@ import { ENTER, SPACE } from '@wordpress/keycodes';
  */
 import { unlock } from '../../lock-unlock';
 import EditorCanvasContainer from '../editor-canvas-container';
+import { STYLE_BOOK_IFRAME_STYLES } from './constants';
+import { getExamplesByCategory, getTopLevelStyleBookCategories } from './categories';
+import { getExamples } from './examples';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const {
@@ -35,117 +37,9 @@ const {
 const {
   Tabs
 } = unlock(componentsPrivateApis);
-
-// 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.
-// Note that button styles are unset, and then focus rules from the `Button` component are
-// applied to the `button` element, targeted via `.edit-site-style-book__example`.
-// This is to ensure that browser default styles for buttons are not applied to the previews.
-const STYLE_BOOK_IFRAME_STYLES = `
-	.edit-site-style-book__examples {
-		max-width: 900px;
-		margin: 0 auto;
-	}
-
-	.edit-site-style-book__example {
-		border-radius: 2px;
-		cursor: pointer;
-		display: flex;
-		flex-direction: column;
-		gap: 40px;
-		margin-bottom: 40px;
-		padding: 16px;
-		width: 100%;
-		box-sizing: border-box;
-		scroll-margin-top: 32px;
-		scroll-margin-bottom: 32px;
-	}
-
-	.edit-site-style-book__example.is-selected {
-		box-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-	}
-
-	.edit-site-style-book__example:focus:not(:disabled) {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-		outline: 3px solid transparent;
-	}
-
-	.edit-site-style-book__examples.is-wide .edit-site-style-book__example {
-		flex-direction: row;
-	}
-
-	.edit-site-style-book__example-title {
-		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-		font-size: 11px;
-		font-weight: 500;
-		line-height: normal;
-		margin: 0;
-		text-align: left;
-		text-transform: uppercase;
-	}
-
-	.edit-site-style-book__examples.is-wide .edit-site-style-book__example-title {
-		text-align: right;
-		width: 120px;
-	}
-
-	.edit-site-style-book__example-preview {
-		width: 100%;
-	}
-
-	.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 {
-		margin-top: 0;
-	}
-	.edit-site-style-book__example-preview .is-root-container > .wp-block:last-child {
-		margin-bottom: 0;
-	}
-`;
 function isObjectEmpty(object) {
   return !object || Object.keys(object).length === 0;
 }
-function getExamples() {
-  const nonHeadingBlockExamples = getBlockTypes().filter(blockType => {
-    const {
-      name,
-      example,
-      supports
-    } = blockType;
-    return name !== 'core/heading' && !!example && supports.inserter !== false;
-  }).map(blockType => ({
-    name: blockType.name,
-    title: blockType.title,
-    category: blockType.category,
-    blocks: getBlockFromExample(blockType.name, blockType.example)
-  }));
-  const isHeadingBlockRegistered = !!getBlockType('core/heading');
-  if (!isHeadingBlockRegistered) {
-    return nonHeadingBlockExamples;
-  }
-
-  // Use our own example for the Heading block so that we can show multiple
-  // heading levels.
-  const headingsExample = {
-    name: 'core/heading',
-    title: __('Headings'),
-    category: 'text',
-    blocks: [1, 2, 3, 4, 5, 6].map(level => {
-      return createBlock('core/heading', {
-        content: sprintf(
-        // translators: %d: heading level e.g: "1", "2", "3"
-        __('Heading %d'), level),
-        level
-      });
-    })
-  };
-  return [headingsExample, ...nonHeadingBlockExamples];
-}
 function StyleBook({
   enableResizing = true,
   isSelected,
@@ -160,11 +54,7 @@ function StyleBook({
   const [textColor] = useGlobalStyle('color.text');
   const [backgroundColor] = useGlobalStyle('color.background');
   const [examples] = useState(getExamples);
-  const tabs = useMemo(() => getCategories().filter(category => examples.some(example => example.category === category.slug)).map(category => ({
-    name: category.slug,
-    title: category.title,
-    icon: category.icon
-  })), [examples]);
+  const tabs = useMemo(() => getTopLevelStyleBookCategories().filter(category => examples.some(example => example.category === category.slug)), [examples]);
   const {
     base: baseConfig
   } = useContext(GlobalStylesContext);
@@ -200,16 +90,19 @@ function StyleBook({
       children: [resizeObserver, showTabs ? /*#__PURE__*/_jsx("div", {
         className: "edit-site-style-book__tabs",
         children: /*#__PURE__*/_jsxs(Tabs, {
-          children: [/*#__PURE__*/_jsx(Tabs.TabList, {
-            children: tabs.map(tab => /*#__PURE__*/_jsx(Tabs.Tab, {
-              tabId: tab.name,
-              children: tab.title
-            }, tab.name))
+          children: [/*#__PURE__*/_jsx("div", {
+            className: "edit-site-style-book__tablist-container",
+            children: /*#__PURE__*/_jsx(Tabs.TabList, {
+              children: tabs.map(tab => /*#__PURE__*/_jsx(Tabs.Tab, {
+                tabId: tab.slug,
+                children: tab.title
+              }, tab.slug))
+            })
           }), tabs.map(tab => /*#__PURE__*/_jsx(Tabs.TabPanel, {
-            tabId: tab.name,
+            tabId: tab.slug,
             focusable: false,
             children: /*#__PURE__*/_jsx(StyleBookBody, {
-              category: tab.name,
+              category: tab.slug,
               examples: examples,
               isSelected: isSelected,
               onSelect: onSelect,
@@ -217,7 +110,7 @@ function StyleBook({
               sizes: sizes,
               title: tab.title
             })
-          }, tab.name))]
+          }, tab.slug))]
         })
       }) : /*#__PURE__*/_jsx(StyleBookBody, {
         examples: examples,
@@ -271,7 +164,6 @@ const StyleBookBody = ({
     },
     readonly: true
   };
-  const buttonModeStyles = onClick ? 'body { cursor: pointer; } body * { pointer-events: none; }' : '';
   return /*#__PURE__*/_jsxs(Iframe, {
     className: clsx('edit-site-style-book__iframe', {
       'is-focused': isFocused && !!onClick,
@@ -282,12 +174,8 @@ const StyleBookBody = ({
     ...(onClick ? buttonModeProps : {}),
     children: [/*#__PURE__*/_jsx(EditorStyles, {
       styles: settings.styles
-    }), /*#__PURE__*/_jsx("style", {
-      children:
-      // Forming a "block formatting context" to prevent margin collapsing.
-      // @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-      `.is-root-container { display: flow-root; }
-						body { position: relative; padding: 32px !important; }` + STYLE_BOOK_IFRAME_STYLES + buttonModeStyles
+    }), /*#__PURE__*/_jsxs("style", {
+      children: [STYLE_BOOK_IFRAME_STYLES, !!onClick && 'body { cursor: pointer; } body * { pointer-events: none; }']
     }), /*#__PURE__*/_jsx(Examples, {
       className: clsx('edit-site-style-book__examples', {
         'is-wide': sizes.width > 600
@@ -310,12 +198,16 @@ const Examples = memo(({
   isSelected,
   onSelect
 }) => {
-  return /*#__PURE__*/_jsx(Composite, {
+  const categoryDefinition = category ? getTopLevelStyleBookCategories().find(_category => _category.slug === category) : null;
+  const filteredExamples = categoryDefinition ? getExamplesByCategory(categoryDefinition, examples) : {
+    examples
+  };
+  return /*#__PURE__*/_jsxs(Composite, {
     orientation: "vertical",
     className: className,
     "aria-label": label,
     role: "grid",
-    children: examples.filter(example => category ? example.category === category : true).map(example => /*#__PURE__*/_jsx(Example, {
+    children: [!!filteredExamples?.examples?.length && filteredExamples.examples.map(example => /*#__PURE__*/_jsx(Example, {
       id: `example-${example.name}`,
       title: example.title,
       blocks: example.blocks,
@@ -323,9 +215,36 @@ const Examples = memo(({
       onClick: () => {
         onSelect?.(example.name);
       }
-    }, 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, {
+        children: /*#__PURE__*/_jsx("h2", {
+          className: "edit-site-style-book__subcategory-title",
+          children: subcategory.title
+        })
+      }), /*#__PURE__*/_jsx(Subcategory, {
+        examples: subcategory.examples,
+        isSelected: isSelected,
+        onSelect: onSelect
+      })]
+    }, `subcategory-${subcategory.slug}`))]
   });
 });
+const Subcategory = ({
+  examples,
+  isSelected,
+  onSelect
+}) => {
+  return !!examples?.length && examples.map(example => /*#__PURE__*/_jsx(Example, {
+    id: `example-${example.name}`,
+    title: example.title,
+    blocks: example.blocks,
+    isSelected: isSelected(example.name),
+    onClick: () => {
+      onSelect?.(example.name);
+    }
+  }, example.name));
+};
 const Example = ({
   id,
   title,