@wordpress/edit-site 5.10.0 → 5.11.0

package/build-module/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js

@@ -3,11 +3,10 @@ import { createElement, Fragment } from "@wordpress/element";
 /**
  * WordPress dependencies
  */
-import { privateApis as blockEditorPrivateApis, store as blockEditorStore, BlockList, BlockTools, __experimentalLinkControl as LinkControl } from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis, store as blockEditorStore, BlockList, BlockTools } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
-import { Popover } from '@wordpress/components';
-import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+import { VisuallyHidden } from '@wordpress/components';
 import { useCallback, useEffect, useState } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 /**
@@ -15,46 +14,7 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 
 import { unlock } from '../../private-apis';
-import { NavigationMenuLoader } from './loader';
-
-function CustomLinkAdditionalBlockUI(_ref) {
-  let {
-    block,
-    onClose
-  } = _ref;
-  const {
-    updateBlockAttributes
-  } = useDispatch(blockEditorStore);
-  const {
-    label,
-    url,
-    opensInNewTab
-  } = block.attributes;
-  const link = {
-    url,
-    opensInNewTab,
-    title: label && stripHTML(label)
-  };
-  return createElement(Popover, {
-    placement: "bottom",
-    shift: true,
-    onClose: onClose
-  }, createElement(LinkControl, {
-    hasTextControl: true,
-    hasRichPreviews: true,
-    value: link,
-    onChange: updatedValue => {
-      updateBlockAttributes(block.clientId, {
-        label: updatedValue.title,
-        url: updatedValue.url,
-        opensInNewTab: updatedValue.opensInNewTab
-      });
-      onClose();
-    },
-    onCancel: onClose
-  }));
-} // Needs to be kept in sync with the query used at packages/block-library/src/page-list/edit.js.
-
+import LeafMoreMenu from './leaf-more-menu'; // Needs to be kept in sync with the query used at packages/block-library/src/page-list/edit.js.
 
 const MAX_PAGE_COUNT = 100;
 const PAGES_QUERY = ['postType', 'page', {
@@ -66,11 +26,11 @@ const PAGES_QUERY = ['postType', 'page', {
   orderby: 'menu_order',
   order: 'asc'
 }];
-export default function NavigationMenuContent(_ref2) {
+export default function NavigationMenuContent(_ref) {
   let {
     rootClientId,
     onSelect
-  } = _ref2;
+  } = _ref;
   const [isLoading, setIsLoading] = useState(true);
   const {
     clientIdsTree,
@@ -101,20 +61,7 @@ export default function NavigationMenuContent(_ref2) {
   const {
     replaceBlock,
     __unstableMarkNextChangeAsNotPersistent
-  } = useDispatch(blockEditorStore);
-  const [customLinkEditPopoverOpenId, setIsCustomLinkEditPopoverOpenId] = useState(false);
-  const renderAdditionalBlockUICallback = useCallback(block => {
-    if (customLinkEditPopoverOpenId && block.clientId === customLinkEditPopoverOpenId) {
-      return createElement(CustomLinkAdditionalBlockUI, {
-        block: block,
-        onClose: () => {
-          setIsCustomLinkEditPopoverOpenId(false);
-        }
-      });
-    }
-
-    return null;
-  }, [customLinkEditPopoverOpenId, setIsCustomLinkEditPopoverOpenId]); // Delay loading stop by 50ms to avoid flickering.
+  } = useDispatch(blockEditorStore); // Delay loading stop by 50ms to avoid flickering.
 
   useEffect(() => {
     let timeoutId;
@@ -137,32 +84,26 @@ export default function NavigationMenuContent(_ref2) {
     };
   }, [shouldKeepLoading, clientIdsTree, isLoading]);
   const {
-    PrivateListView,
-    LeafMoreMenu
+    PrivateListView
   } = unlock(blockEditorPrivateApis);
   const offCanvasOnselect = useCallback(block => {
     if (block.name === 'core/navigation-link' && !block.attributes.url) {
       __unstableMarkNextChangeAsNotPersistent();
 
       replaceBlock(block.clientId, createBlock('core/navigation-link', block.attributes));
-    } else if (block.name === 'core/navigation-link' && block.attributes.kind === 'custom' && block.attributes.url) {
-      setIsCustomLinkEditPopoverOpenId(block.clientId);
     } else {
       onSelect(block);
     }
-  }, [onSelect, __unstableMarkNextChangeAsNotPersistent, replaceBlock, setIsCustomLinkEditPopoverOpenId]); // The hidden block is needed because it makes block edit side effects trigger.
+  }, [onSelect, __unstableMarkNextChangeAsNotPersistent, replaceBlock]); // The hidden block is needed because it makes block edit side effects trigger.
   // For example a navigation page list load its items has an effect on edit to load its items.
 
-  return createElement(Fragment, null, isLoading && createElement(NavigationMenuLoader, null), !isLoading && createElement(PrivateListView, {
+  return createElement(Fragment, null, !isLoading && createElement(PrivateListView, {
     blocks: isSinglePageList ? clientIdsTree[0].innerBlocks : clientIdsTree,
     onSelect: offCanvasOnselect,
     blockSettingsMenu: LeafMoreMenu,
-    showAppender: false,
-    renderAdditionalBlockUI: renderAdditionalBlockUICallback
-  }), createElement("div", {
-    style: {
-      visibility: 'hidden'
-    }
+    showAppender: false
+  }), createElement(VisuallyHidden, {
+    "aria-hidden": "true"
   }, createElement(BlockTools, null, createElement(BlockList, null))));
 }
 //# sourceMappingURL=navigation-menu-content.js.map

package/build-module/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js"],"names":["privateApis","blockEditorPrivateApis","store","blockEditorStore","BlockList","BlockTools","__experimentalLinkControl","LinkControl","useDispatch","useSelect","createBlock","Popover","__unstableStripHTML","stripHTML","useCallback","useEffect","useState","coreStore","unlock","NavigationMenuLoader","CustomLinkAdditionalBlockUI","block","onClose","updateBlockAttributes","label","url","opensInNewTab","attributes","link","title","updatedValue","clientId","MAX_PAGE_COUNT","PAGES_QUERY","per_page","_fields","orderby","order","NavigationMenuContent","rootClientId","onSelect","isLoading","setIsLoading","clientIdsTree","shouldKeepLoading","isSinglePageList","select","__unstableGetClientIdsTree","areInnerBlocksControlled","getBlockName","isResolving","_clientIdsTree","hasOnlyPageListBlock","length","isLoadingPages","innerBlocks","replaceBlock","__unstableMarkNextChangeAsNotPersistent","customLinkEditPopoverOpenId","setIsCustomLinkEditPopoverOpenId","renderAdditionalBlockUICallback","timeoutId","setTimeout","undefined","clearTimeout","PrivateListView","LeafMoreMenu","offCanvasOnselect","name","kind","visibility"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n\tBlockList,\n\tBlockTools,\n\t__experimentalLinkControl as LinkControl,\n} from '@wordpress/block-editor';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { createBlock } from '@wordpress/blocks';\nimport { Popover } from '@wordpress/components';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\nimport { useCallback, useEffect, useState } from '@wordpress/element';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\nimport { NavigationMenuLoader } from './loader';\n\nfunction CustomLinkAdditionalBlockUI( { block, onClose } ) {\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\tconst { label, url, opensInNewTab } = block.attributes;\n\tconst link = {\n\t\turl,\n\t\topensInNewTab,\n\t\ttitle: label && stripHTML( label ),\n\t};\n\treturn (\n\t\t<Popover placement=\"bottom\" shift onClose={ onClose }>\n\t\t\t<LinkControl\n\t\t\t\thasTextControl\n\t\t\t\thasRichPreviews\n\t\t\t\tvalue={ link }\n\t\t\t\tonChange={ ( updatedValue ) => {\n\t\t\t\t\tupdateBlockAttributes( block.clientId, {\n\t\t\t\t\t\tlabel: updatedValue.title,\n\t\t\t\t\t\turl: updatedValue.url,\n\t\t\t\t\t\topensInNewTab: updatedValue.opensInNewTab,\n\t\t\t\t\t} );\n\t\t\t\t\tonClose();\n\t\t\t\t} }\n\t\t\t\tonCancel={ onClose }\n\t\t\t/>\n\t\t</Popover>\n\t);\n}\n// Needs to be kept in sync with the query used at packages/block-library/src/page-list/edit.js.\nconst MAX_PAGE_COUNT = 100;\nconst PAGES_QUERY = [\n\t'postType',\n\t'page',\n\t{\n\t\tper_page: MAX_PAGE_COUNT,\n\t\t_fields: [ 'id', 'link', 'menu_order', 'parent', 'title', 'type' ],\n\t\t// TODO: When https://core.trac.wordpress.org/ticket/39037 REST API support for multiple orderby\n\t\t// values is resolved, update 'orderby' to [ 'menu_order', 'post_title' ] to provide a consistent\n\t\t// sort.\n\t\torderby: 'menu_order',\n\t\torder: 'asc',\n\t},\n];\n\nexport default function NavigationMenuContent( { rootClientId, onSelect } ) {\n\tconst [ isLoading, setIsLoading ] = useState( true );\n\tconst { clientIdsTree, shouldKeepLoading, isSinglePageList } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\t__unstableGetClientIdsTree,\n\t\t\t\tareInnerBlocksControlled,\n\t\t\t\tgetBlockName,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst { isResolving } = select( coreStore );\n\n\t\t\tconst _clientIdsTree = __unstableGetClientIdsTree( rootClientId );\n\t\t\tconst hasOnlyPageListBlock =\n\t\t\t\t_clientIdsTree.length === 1 &&\n\t\t\t\tgetBlockName( _clientIdsTree[ 0 ].clientId ) ===\n\t\t\t\t\t'core/page-list';\n\t\t\tconst isLoadingPages = isResolving(\n\t\t\t\t'getEntityRecords',\n\t\t\t\tPAGES_QUERY\n\t\t\t);\n\t\t\treturn {\n\t\t\t\tclientIdsTree: _clientIdsTree,\n\t\t\t\t// This is a small hack to wait for the navigation block\n\t\t\t\t// to actually load its inner blocks.\n\t\t\t\tshouldKeepLoading:\n\t\t\t\t\t! areInnerBlocksControlled( rootClientId ) ||\n\t\t\t\t\tisLoadingPages,\n\t\t\t\tisSinglePageList:\n\t\t\t\t\thasOnlyPageListBlock &&\n\t\t\t\t\t! isLoadingPages &&\n\t\t\t\t\t_clientIdsTree[ 0 ].innerBlocks.length > 0,\n\t\t\t};\n\t\t},\n\t\t[ rootClientId ]\n\t);\n\tconst { replaceBlock, __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\n\tconst [ customLinkEditPopoverOpenId, setIsCustomLinkEditPopoverOpenId ] =\n\t\tuseState( false );\n\n\tconst renderAdditionalBlockUICallback = useCallback(\n\t\t( block ) => {\n\t\t\tif (\n\t\t\t\tcustomLinkEditPopoverOpenId &&\n\t\t\t\tblock.clientId === customLinkEditPopoverOpenId\n\t\t\t) {\n\t\t\t\treturn (\n\t\t\t\t\t<CustomLinkAdditionalBlockUI\n\t\t\t\t\t\tblock={ block }\n\t\t\t\t\t\tonClose={ () => {\n\t\t\t\t\t\t\tsetIsCustomLinkEditPopoverOpenId( false );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn null;\n\t\t},\n\t\t[ customLinkEditPopoverOpenId, setIsCustomLinkEditPopoverOpenId ]\n\t);\n\n\t// Delay loading stop by 50ms to avoid flickering.\n\tuseEffect( () => {\n\t\tlet timeoutId;\n\t\tif ( shouldKeepLoading && ! isLoading ) {\n\t\t\tsetIsLoading( true );\n\t\t}\n\t\tif ( ! shouldKeepLoading && isLoading ) {\n\t\t\ttimeoutId = setTimeout( () => {\n\t\t\t\tsetIsLoading( false );\n\t\t\t\ttimeoutId = undefined;\n\t\t\t}, 50 );\n\t\t}\n\t\treturn () => {\n\t\t\tif ( timeoutId ) {\n\t\t\t\tclearTimeout( timeoutId );\n\t\t\t}\n\t\t};\n\t}, [ shouldKeepLoading, clientIdsTree, isLoading ] );\n\n\tconst { PrivateListView, LeafMoreMenu } = unlock( blockEditorPrivateApis );\n\n\tconst offCanvasOnselect = useCallback(\n\t\t( block ) => {\n\t\t\tif (\n\t\t\t\tblock.name === 'core/navigation-link' &&\n\t\t\t\t! block.attributes.url\n\t\t\t) {\n\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\treplaceBlock(\n\t\t\t\t\tblock.clientId,\n\t\t\t\t\tcreateBlock( 'core/navigation-link', block.attributes )\n\t\t\t\t);\n\t\t\t} else if (\n\t\t\t\tblock.name === 'core/navigation-link' &&\n\t\t\t\tblock.attributes.kind === 'custom' &&\n\t\t\t\tblock.attributes.url\n\t\t\t) {\n\t\t\t\tsetIsCustomLinkEditPopoverOpenId( block.clientId );\n\t\t\t} else {\n\t\t\t\tonSelect( block );\n\t\t\t}\n\t\t},\n\t\t[\n\t\t\tonSelect,\n\t\t\t__unstableMarkNextChangeAsNotPersistent,\n\t\t\treplaceBlock,\n\t\t\tsetIsCustomLinkEditPopoverOpenId,\n\t\t]\n\t);\n\n\t// The hidden block is needed because it makes block edit side effects trigger.\n\t// For example a navigation page list load its items has an effect on edit to load its items.\n\treturn (\n\t\t<>\n\t\t\t{ isLoading && <NavigationMenuLoader /> }\n\t\t\t{ ! isLoading && (\n\t\t\t\t<PrivateListView\n\t\t\t\t\tblocks={\n\t\t\t\t\t\tisSinglePageList\n\t\t\t\t\t\t\t? clientIdsTree[ 0 ].innerBlocks\n\t\t\t\t\t\t\t: clientIdsTree\n\t\t\t\t\t}\n\t\t\t\t\tonSelect={ offCanvasOnselect }\n\t\t\t\t\tblockSettingsMenu={ LeafMoreMenu }\n\t\t\t\t\tshowAppender={ false }\n\t\t\t\t\trenderAdditionalBlockUI={ renderAdditionalBlockUICallback }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<div style={ { visibility: 'hidden' } }>\n\t\t\t\t<BlockTools>\n\t\t\t\t\t<BlockList />\n\t\t\t\t</BlockTools>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js"],"names":["privateApis","blockEditorPrivateApis","store","blockEditorStore","BlockList","BlockTools","useDispatch","useSelect","createBlock","VisuallyHidden","useCallback","useEffect","useState","coreStore","unlock","LeafMoreMenu","MAX_PAGE_COUNT","PAGES_QUERY","per_page","_fields","orderby","order","NavigationMenuContent","rootClientId","onSelect","isLoading","setIsLoading","clientIdsTree","shouldKeepLoading","isSinglePageList","select","__unstableGetClientIdsTree","areInnerBlocksControlled","getBlockName","isResolving","_clientIdsTree","hasOnlyPageListBlock","length","clientId","isLoadingPages","innerBlocks","replaceBlock","__unstableMarkNextChangeAsNotPersistent","timeoutId","setTimeout","undefined","clearTimeout","PrivateListView","offCanvasOnselect","block","name","attributes","url"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n\tBlockList,\n\tBlockTools,\n} from '@wordpress/block-editor';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { createBlock } from '@wordpress/blocks';\nimport { VisuallyHidden } from '@wordpress/components';\nimport { useCallback, useEffect, useState } from '@wordpress/element';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\nimport LeafMoreMenu from './leaf-more-menu';\n\n// Needs to be kept in sync with the query used at packages/block-library/src/page-list/edit.js.\nconst MAX_PAGE_COUNT = 100;\nconst PAGES_QUERY = [\n\t'postType',\n\t'page',\n\t{\n\t\tper_page: MAX_PAGE_COUNT,\n\t\t_fields: [ 'id', 'link', 'menu_order', 'parent', 'title', 'type' ],\n\t\t// TODO: When https://core.trac.wordpress.org/ticket/39037 REST API support for multiple orderby\n\t\t// values is resolved, update 'orderby' to [ 'menu_order', 'post_title' ] to provide a consistent\n\t\t// sort.\n\t\torderby: 'menu_order',\n\t\torder: 'asc',\n\t},\n];\n\nexport default function NavigationMenuContent( { rootClientId, onSelect } ) {\n\tconst [ isLoading, setIsLoading ] = useState( true );\n\tconst { clientIdsTree, shouldKeepLoading, isSinglePageList } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\t__unstableGetClientIdsTree,\n\t\t\t\tareInnerBlocksControlled,\n\t\t\t\tgetBlockName,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst { isResolving } = select( coreStore );\n\n\t\t\tconst _clientIdsTree = __unstableGetClientIdsTree( rootClientId );\n\t\t\tconst hasOnlyPageListBlock =\n\t\t\t\t_clientIdsTree.length === 1 &&\n\t\t\t\tgetBlockName( _clientIdsTree[ 0 ].clientId ) ===\n\t\t\t\t\t'core/page-list';\n\t\t\tconst isLoadingPages = isResolving(\n\t\t\t\t'getEntityRecords',\n\t\t\t\tPAGES_QUERY\n\t\t\t);\n\t\t\treturn {\n\t\t\t\tclientIdsTree: _clientIdsTree,\n\t\t\t\t// This is a small hack to wait for the navigation block\n\t\t\t\t// to actually load its inner blocks.\n\t\t\t\tshouldKeepLoading:\n\t\t\t\t\t! areInnerBlocksControlled( rootClientId ) ||\n\t\t\t\t\tisLoadingPages,\n\t\t\t\tisSinglePageList:\n\t\t\t\t\thasOnlyPageListBlock &&\n\t\t\t\t\t! isLoadingPages &&\n\t\t\t\t\t_clientIdsTree[ 0 ].innerBlocks.length > 0,\n\t\t\t};\n\t\t},\n\t\t[ rootClientId ]\n\t);\n\tconst { replaceBlock, __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\n\t// Delay loading stop by 50ms to avoid flickering.\n\tuseEffect( () => {\n\t\tlet timeoutId;\n\t\tif ( shouldKeepLoading && ! isLoading ) {\n\t\t\tsetIsLoading( true );\n\t\t}\n\t\tif ( ! shouldKeepLoading && isLoading ) {\n\t\t\ttimeoutId = setTimeout( () => {\n\t\t\t\tsetIsLoading( false );\n\t\t\t\ttimeoutId = undefined;\n\t\t\t}, 50 );\n\t\t}\n\t\treturn () => {\n\t\t\tif ( timeoutId ) {\n\t\t\t\tclearTimeout( timeoutId );\n\t\t\t}\n\t\t};\n\t}, [ shouldKeepLoading, clientIdsTree, isLoading ] );\n\n\tconst { PrivateListView } = unlock( blockEditorPrivateApis );\n\tconst offCanvasOnselect = useCallback(\n\t\t( block ) => {\n\t\t\tif (\n\t\t\t\tblock.name === 'core/navigation-link' &&\n\t\t\t\t! block.attributes.url\n\t\t\t) {\n\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\treplaceBlock(\n\t\t\t\t\tblock.clientId,\n\t\t\t\t\tcreateBlock( 'core/navigation-link', block.attributes )\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tonSelect( block );\n\t\t\t}\n\t\t},\n\t\t[ onSelect, __unstableMarkNextChangeAsNotPersistent, replaceBlock ]\n\t);\n\n\t// The hidden block is needed because it makes block edit side effects trigger.\n\t// For example a navigation page list load its items has an effect on edit to load its items.\n\treturn (\n\t\t<>\n\t\t\t{ ! isLoading && (\n\t\t\t\t<PrivateListView\n\t\t\t\t\tblocks={\n\t\t\t\t\t\tisSinglePageList\n\t\t\t\t\t\t\t? clientIdsTree[ 0 ].innerBlocks\n\t\t\t\t\t\t\t: clientIdsTree\n\t\t\t\t\t}\n\t\t\t\t\tonSelect={ offCanvasOnselect }\n\t\t\t\t\tblockSettingsMenu={ LeafMoreMenu }\n\t\t\t\t\tshowAppender={ false }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<VisuallyHidden aria-hidden=\"true\">\n\t\t\t\t<BlockTools>\n\t\t\t\t\t<BlockList />\n\t\t\t\t</BlockTools>\n\t\t\t</VisuallyHidden>\n\t\t</>\n\t);\n}\n"]}

package/build-module/components/sidebar-navigation-screen-navigation-menus/navigator-button.js

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createElement } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalNavigatorButton as NavigatorButton } from '@wordpress/components';
+import { useEntityRecords } from '@wordpress/core-data';
+/**
+ * Internal dependencies
+ */
+
+import { PRELOADED_NAVIGATION_MENUS_QUERY } from './constants';
+export default function SidebarNavigationScreenNavigationMenuButton(_ref) {
+  let {
+    children,
+    ...props
+  } = _ref;
+  const {
+    records: navigationMenus,
+    isResolving: isLoading
+  } = useEntityRecords('postType', `wp_navigation`, PRELOADED_NAVIGATION_MENUS_QUERY);
+  const hasNavigationMenus = !!(navigationMenus !== null && navigationMenus !== void 0 && navigationMenus.length);
+  const hasSingleNavigationMenu = (navigationMenus === null || navigationMenus === void 0 ? void 0 : navigationMenus.length) === 1;
+  const firstNavigationMenu = navigationMenus === null || navigationMenus === void 0 ? void 0 : navigationMenus[0];
+  const showNavigationScreen = process.env.IS_GUTENBERG_PLUGIN ? hasNavigationMenus : false; // If there is a single menu then we can go directly to that menu.
+  // Otherwise we go to the navigation listing screen.
+
+  const path = hasSingleNavigationMenu ? `/navigation/wp_navigation/${firstNavigationMenu === null || firstNavigationMenu === void 0 ? void 0 : firstNavigationMenu.id}` : '/navigation';
+
+  if (!showNavigationScreen) {
+    return null;
+  }
+
+  return createElement(NavigatorButton, _extends({}, props, {
+    disabled: isLoading,
+    path: path
+  }), children);
+}
+//# sourceMappingURL=navigator-button.js.map

package/build-module/components/sidebar-navigation-screen-navigation-menus/navigator-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigator-button.js"],"names":["__experimentalNavigatorButton","NavigatorButton","useEntityRecords","PRELOADED_NAVIGATION_MENUS_QUERY","SidebarNavigationScreenNavigationMenuButton","children","props","records","navigationMenus","isResolving","isLoading","hasNavigationMenus","length","hasSingleNavigationMenu","firstNavigationMenu","showNavigationScreen","process","env","IS_GUTENBERG_PLUGIN","path","id"],"mappings":";;;AAAA;AACA;AACA;AAEA,SAASA,6BAA6B,IAAIC,eAA1C,QAAiE,uBAAjE;AACA,SAASC,gBAAT,QAAiC,sBAAjC;AAEA;AACA;AACA;;AACA,SAASC,gCAAT,QAAiD,aAAjD;AAEA,eAAe,SAASC,2CAAT,OAGX;AAAA,MAHiE;AACpEC,IAAAA,QADoE;AAEpE,OAAGC;AAFiE,GAGjE;AACH,QAAM;AAAEC,IAAAA,OAAO,EAAEC,eAAX;AAA4BC,IAAAA,WAAW,EAAEC;AAAzC,MACLR,gBAAgB,CACf,UADe,EAEd,eAFc,EAGfC,gCAHe,CADjB;AAOA,QAAMQ,kBAAkB,GAAG,CAAC,EAAEH,eAAF,aAAEA,eAAF,eAAEA,eAAe,CAAEI,MAAnB,CAA5B;AACA,QAAMC,uBAAuB,GAAG,CAAAL,eAAe,SAAf,IAAAA,eAAe,WAAf,YAAAA,eAAe,CAAEI,MAAjB,MAA4B,CAA5D;AACA,QAAME,mBAAmB,GAAGN,eAAH,aAAGA,eAAH,uBAAGA,eAAe,CAAI,CAAJ,CAA3C;AAEA,QAAMO,oBAAoB,GAAGC,OAAO,CAACC,GAAR,CAAYC,mBAAZ,GAC1BP,kBAD0B,GAE1B,KAFH,CAZG,CAgBH;AACA;;AACA,QAAMQ,IAAI,GAAGN,uBAAuB,GAChC,6BAA6BC,mBAA9B,aAA8BA,mBAA9B,uBAA8BA,mBAAmB,CAAEM,EAAI,EADtB,GAEjC,aAFH;;AAIA,MAAK,CAAEL,oBAAP,EAA8B;AAC7B,WAAO,IAAP;AACA;;AAED,SACC,cAAC,eAAD,eAAsBT,KAAtB;AAA8B,IAAA,QAAQ,EAAGI,SAAzC;AAAqD,IAAA,IAAI,EAAGS;AAA5D,MACGd,QADH,CADD;AAKA","sourcesContent":["/**\n * WordPress dependencies\n */\n\nimport { __experimentalNavigatorButton as NavigatorButton } from '@wordpress/components';\nimport { useEntityRecords } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { PRELOADED_NAVIGATION_MENUS_QUERY } from './constants';\n\nexport default function SidebarNavigationScreenNavigationMenuButton( {\n\tchildren,\n\t...props\n} ) {\n\tconst { records: navigationMenus, isResolving: isLoading } =\n\t\tuseEntityRecords(\n\t\t\t'postType',\n\t\t\t`wp_navigation`,\n\t\t\tPRELOADED_NAVIGATION_MENUS_QUERY\n\t\t);\n\n\tconst hasNavigationMenus = !! navigationMenus?.length;\n\tconst hasSingleNavigationMenu = navigationMenus?.length === 1;\n\tconst firstNavigationMenu = navigationMenus?.[ 0 ];\n\n\tconst showNavigationScreen = process.env.IS_GUTENBERG_PLUGIN\n\t\t? hasNavigationMenus\n\t\t: false;\n\n\t// If there is a single menu then we can go directly to that menu.\n\t// Otherwise we go to the navigation listing screen.\n\tconst path = hasSingleNavigationMenu\n\t\t? `/navigation/wp_navigation/${ firstNavigationMenu?.id }`\n\t\t: '/navigation';\n\n\tif ( ! showNavigationScreen ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigatorButton { ...props } disabled={ isLoading } path={ path }>\n\t\t\t{ children }\n\t\t</NavigatorButton>\n\t);\n}\n"]}

package/build-module/components/sidebar-navigation-screen-templates/index.js

@@ -10,6 +10,7 @@ import { useEntityRecords } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useViewportMatch } from '@wordpress/compose';
+import { getTemplatePartIcon } from '@wordpress/editor';
 /**
  * Internal dependencies
  */
@@ -32,11 +33,25 @@ const config = {
   },
   wp_template_part: {
     labels: {
-      title: __('Template parts'),
-      loading: __('Loading template parts'),
-      notFound: __('No template parts found'),
+      title: __('Library'),
+      loading: __('Loading library'),
+      notFound: __('No patterns found'),
       manage: __('Manage all template parts'),
-      description: __('Template Parts are small pieces of a layout that can be reused across multiple templates and always appear the same way. Common template parts include the site header, footer, or sidebar.')
+      reusableBlocks: __('Manage reusable blocks'),
+      description: __('Manage what patterns are available when editing your site.')
+    },
+    sortCallback: items => {
+      const groupedByArea = items.reduce((accumulator, item) => {
+        const key = accumulator[item.area] ? item.area : 'rest';
+        accumulator[key].push(item);
+        return accumulator;
+      }, {
+        header: [],
+        footer: [],
+        sidebar: [],
+        rest: []
+      });
+      return [...groupedByArea.header, ...groupedByArea.footer, ...groupedByArea.sidebar, ...groupedByArea.rest];
     }
   }
 };
@@ -71,12 +86,18 @@ export default function SidebarNavigationScreenTemplates() {
   } = useEntityRecords('postType', postType, {
     per_page: -1
   });
-  const sortedTemplates = templates ? [...templates] : [];
+  let sortedTemplates = templates ? [...templates] : [];
   sortedTemplates.sort((a, b) => a.title.rendered.localeCompare(b.title.rendered));
+
+  if (config[postType].sortCallback) {
+    sortedTemplates = config[postType].sortCallback(sortedTemplates);
+  }
+
   const browseAllLink = useLink({
     path: '/' + postType + '/all'
   });
   const canCreate = !isMobileViewport && !isTemplatePartsMode;
+  const isTemplateList = postType === 'wp_template';
   return createElement(SidebarNavigationScreen, {
     isRoot: isTemplatePartsMode,
     title: config[postType].labels.title,
@@ -94,14 +115,17 @@ export default function SidebarNavigationScreenTemplates() {
         postType: postType,
         postId: template.id,
         key: template.id,
-        withChevron: true
+        withChevron: true,
+        icon: !isTemplateList && getTemplatePartIcon(template.area)
       }, decodeEntities(((_template$title = template.title) === null || _template$title === void 0 ? void 0 : _template$title.rendered) || template.slug));
-    }), !isMobileViewport && createElement(SidebarNavigationItem, _extends({
-      className: "edit-site-sidebar-navigation-screen-templates__see-all"
-    }, browseAllLink, {
-      children: config[postType].labels.manage,
+    }), !isMobileViewport && createElement(Fragment, null, createElement(SidebarNavigationItem, _extends({
+      className: "edit-site-sidebar-navigation-screen-templates__see-all",
+      withChevron: true
+    }, browseAllLink), config[postType].labels.manage), !!config[postType].labels.reusableBlocks && createElement(SidebarNavigationItem, {
+      as: "a",
+      href: "edit.php?post_type=wp_block",
       withChevron: true
-    }))))
+    }, config[postType].labels.reusableBlocks))))
   });
 }
 //# sourceMappingURL=index.js.map

package/build-module/components/sidebar-navigation-screen-templates/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-navigation-screen-templates/index.js"],"names":["__experimentalItemGroup","ItemGroup","__experimentalItem","Item","__experimentalUseNavigator","useNavigator","__","useEntityRecords","useSelect","decodeEntities","useViewportMatch","SidebarNavigationScreen","useLink","SidebarNavigationItem","AddNewTemplate","store","editSiteStore","SidebarButton","config","wp_template","labels","title","loading","notFound","manage","description","wp_template_part","TemplateItem","postType","postId","props","linkInfo","SidebarNavigationScreenTemplates","params","isMobileViewport","isTemplatePartsMode","select","settings","getSettings","supportsTemplatePartsMode","records","templates","isResolving","isLoading","per_page","sortedTemplates","sort","a","b","rendered","localeCompare","browseAllLink","path","canCreate","as","length","map","template","id","slug"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n\t__experimentalUseNavigator as useNavigator,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useEntityRecords } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport SidebarNavigationScreen from '../sidebar-navigation-screen';\nimport { useLink } from '../routes/link';\nimport SidebarNavigationItem from '../sidebar-navigation-item';\nimport AddNewTemplate from '../add-new-template';\nimport { store as editSiteStore } from '../../store';\nimport SidebarButton from '../sidebar-button';\n\nconst config = {\n\twp_template: {\n\t\tlabels: {\n\t\t\ttitle: __( 'Templates' ),\n\t\t\tloading: __( 'Loading templates' ),\n\t\t\tnotFound: __( 'No templates found' ),\n\t\t\tmanage: __( 'Manage all templates' ),\n\t\t\tdescription: __(\n\t\t\t\t'Express the layout of your site with templates.'\n\t\t\t),\n\t\t},\n\t},\n\twp_template_part: {\n\t\tlabels: {\n\t\t\ttitle: __( 'Template parts' ),\n\t\t\tloading: __( 'Loading template parts' ),\n\t\t\tnotFound: __( 'No template parts found' ),\n\t\t\tmanage: __( 'Manage all template parts' ),\n\t\t\tdescription: __(\n\t\t\t\t'Template Parts are small pieces of a layout that can be reused across multiple templates and always appear the same way. Common template parts include the site header, footer, or sidebar.'\n\t\t\t),\n\t\t},\n\t},\n};\n\nconst TemplateItem = ( { postType, postId, ...props } ) => {\n\tconst linkInfo = useLink( {\n\t\tpostType,\n\t\tpostId,\n\t} );\n\treturn <SidebarNavigationItem { ...linkInfo } { ...props } />;\n};\n\nexport default function SidebarNavigationScreenTemplates() {\n\tconst {\n\t\tparams: { postType },\n\t} = useNavigator();\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst isTemplatePartsMode = useSelect( ( select ) => {\n\t\tconst settings = select( editSiteStore ).getSettings();\n\n\t\treturn !! settings.supportsTemplatePartsMode;\n\t}, [] );\n\n\tconst { records: templates, isResolving: isLoading } = useEntityRecords(\n\t\t'postType',\n\t\tpostType,\n\t\t{\n\t\t\tper_page: -1,\n\t\t}\n\t);\n\tconst sortedTemplates = templates ? [ ...templates ] : [];\n\tsortedTemplates.sort( ( a, b ) =>\n\t\ta.title.rendered.localeCompare( b.title.rendered )\n\t);\n\n\tconst browseAllLink = useLink( {\n\t\tpath: '/' + postType + '/all',\n\t} );\n\n\tconst canCreate = ! isMobileViewport && ! isTemplatePartsMode;\n\n\treturn (\n\t\t<SidebarNavigationScreen\n\t\t\tisRoot={ isTemplatePartsMode }\n\t\t\ttitle={ config[ postType ].labels.title }\n\t\t\tdescription={ config[ postType ].labels.description }\n\t\t\tactions={\n\t\t\t\tcanCreate && (\n\t\t\t\t\t<AddNewTemplate\n\t\t\t\t\t\ttemplateType={ postType }\n\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\tas: SidebarButton,\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t}\n\t\t\tcontent={\n\t\t\t\t<>\n\t\t\t\t\t{ isLoading && config[ postType ].labels.loading }\n\t\t\t\t\t{ ! isLoading && (\n\t\t\t\t\t\t<ItemGroup>\n\t\t\t\t\t\t\t{ ! templates?.length && (\n\t\t\t\t\t\t\t\t<Item>\n\t\t\t\t\t\t\t\t\t{ config[ postType ].labels.notFound }\n\t\t\t\t\t\t\t\t</Item>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ sortedTemplates.map( ( template ) => (\n\t\t\t\t\t\t\t\t<TemplateItem\n\t\t\t\t\t\t\t\t\tpostType={ postType }\n\t\t\t\t\t\t\t\t\tpostId={ template.id }\n\t\t\t\t\t\t\t\t\tkey={ template.id }\n\t\t\t\t\t\t\t\t\twithChevron\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ decodeEntities(\n\t\t\t\t\t\t\t\t\t\ttemplate.title?.rendered ||\n\t\t\t\t\t\t\t\t\t\t\ttemplate.slug\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</TemplateItem>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t{ ! isMobileViewport && (\n\t\t\t\t\t\t\t\t<SidebarNavigationItem\n\t\t\t\t\t\t\t\t\tclassName=\"edit-site-sidebar-navigation-screen-templates__see-all\"\n\t\t\t\t\t\t\t\t\t{ ...browseAllLink }\n\t\t\t\t\t\t\t\t\tchildren={\n\t\t\t\t\t\t\t\t\t\tconfig[ postType ].labels.manage\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\twithChevron\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t}\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-navigation-screen-templates/index.js"],"names":["__experimentalItemGroup","ItemGroup","__experimentalItem","Item","__experimentalUseNavigator","useNavigator","__","useEntityRecords","useSelect","decodeEntities","useViewportMatch","getTemplatePartIcon","SidebarNavigationScreen","useLink","SidebarNavigationItem","AddNewTemplate","store","editSiteStore","SidebarButton","config","wp_template","labels","title","loading","notFound","manage","description","wp_template_part","reusableBlocks","sortCallback","items","groupedByArea","reduce","accumulator","item","key","area","push","header","footer","sidebar","rest","TemplateItem","postType","postId","props","linkInfo","SidebarNavigationScreenTemplates","params","isMobileViewport","isTemplatePartsMode","select","settings","getSettings","supportsTemplatePartsMode","records","templates","isResolving","isLoading","per_page","sortedTemplates","sort","a","b","rendered","localeCompare","browseAllLink","path","canCreate","isTemplateList","as","length","map","template","id","slug"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n\t__experimentalUseNavigator as useNavigator,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useEntityRecords } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { getTemplatePartIcon } from '@wordpress/editor';\n\n/**\n * Internal dependencies\n */\nimport SidebarNavigationScreen from '../sidebar-navigation-screen';\nimport { useLink } from '../routes/link';\nimport SidebarNavigationItem from '../sidebar-navigation-item';\nimport AddNewTemplate from '../add-new-template';\nimport { store as editSiteStore } from '../../store';\nimport SidebarButton from '../sidebar-button';\n\nconst config = {\n\twp_template: {\n\t\tlabels: {\n\t\t\ttitle: __( 'Templates' ),\n\t\t\tloading: __( 'Loading templates' ),\n\t\t\tnotFound: __( 'No templates found' ),\n\t\t\tmanage: __( 'Manage all templates' ),\n\t\t\tdescription: __(\n\t\t\t\t'Express the layout of your site with templates.'\n\t\t\t),\n\t\t},\n\t},\n\twp_template_part: {\n\t\tlabels: {\n\t\t\ttitle: __( 'Library' ),\n\t\t\tloading: __( 'Loading library' ),\n\t\t\tnotFound: __( 'No patterns found' ),\n\t\t\tmanage: __( 'Manage all template parts' ),\n\t\t\treusableBlocks: __( 'Manage reusable blocks' ),\n\t\t\tdescription: __(\n\t\t\t\t'Manage what patterns are available when editing your site.'\n\t\t\t),\n\t\t},\n\t\tsortCallback: ( items ) => {\n\t\t\tconst groupedByArea = items.reduce(\n\t\t\t\t( accumulator, item ) => {\n\t\t\t\t\tconst key = accumulator[ item.area ] ? item.area : 'rest';\n\t\t\t\t\taccumulator[ key ].push( item );\n\t\t\t\t\treturn accumulator;\n\t\t\t\t},\n\t\t\t\t{ header: [], footer: [], sidebar: [], rest: [] }\n\t\t\t);\n\t\t\treturn [\n\t\t\t\t...groupedByArea.header,\n\t\t\t\t...groupedByArea.footer,\n\t\t\t\t...groupedByArea.sidebar,\n\t\t\t\t...groupedByArea.rest,\n\t\t\t];\n\t\t},\n\t},\n};\n\nconst TemplateItem = ( { postType, postId, ...props } ) => {\n\tconst linkInfo = useLink( {\n\t\tpostType,\n\t\tpostId,\n\t} );\n\treturn <SidebarNavigationItem { ...linkInfo } { ...props } />;\n};\n\nexport default function SidebarNavigationScreenTemplates() {\n\tconst {\n\t\tparams: { postType },\n\t} = useNavigator();\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst isTemplatePartsMode = useSelect( ( select ) => {\n\t\tconst settings = select( editSiteStore ).getSettings();\n\n\t\treturn !! settings.supportsTemplatePartsMode;\n\t}, [] );\n\n\tconst { records: templates, isResolving: isLoading } = useEntityRecords(\n\t\t'postType',\n\t\tpostType,\n\t\t{\n\t\t\tper_page: -1,\n\t\t}\n\t);\n\tlet sortedTemplates = templates ? [ ...templates ] : [];\n\tsortedTemplates.sort( ( a, b ) =>\n\t\ta.title.rendered.localeCompare( b.title.rendered )\n\t);\n\tif ( config[ postType ].sortCallback ) {\n\t\tsortedTemplates = config[ postType ].sortCallback( sortedTemplates );\n\t}\n\n\tconst browseAllLink = useLink( {\n\t\tpath: '/' + postType + '/all',\n\t} );\n\n\tconst canCreate = ! isMobileViewport && ! isTemplatePartsMode;\n\tconst isTemplateList = postType === 'wp_template';\n\treturn (\n\t\t<SidebarNavigationScreen\n\t\t\tisRoot={ isTemplatePartsMode }\n\t\t\ttitle={ config[ postType ].labels.title }\n\t\t\tdescription={ config[ postType ].labels.description }\n\t\t\tactions={\n\t\t\t\tcanCreate && (\n\t\t\t\t\t<AddNewTemplate\n\t\t\t\t\t\ttemplateType={ postType }\n\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\tas: SidebarButton,\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t}\n\t\t\tcontent={\n\t\t\t\t<>\n\t\t\t\t\t{ isLoading && config[ postType ].labels.loading }\n\t\t\t\t\t{ ! isLoading && (\n\t\t\t\t\t\t<ItemGroup>\n\t\t\t\t\t\t\t{ ! templates?.length && (\n\t\t\t\t\t\t\t\t<Item>\n\t\t\t\t\t\t\t\t\t{ config[ postType ].labels.notFound }\n\t\t\t\t\t\t\t\t</Item>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ sortedTemplates.map( ( template ) => (\n\t\t\t\t\t\t\t\t<TemplateItem\n\t\t\t\t\t\t\t\t\tpostType={ postType }\n\t\t\t\t\t\t\t\t\tpostId={ template.id }\n\t\t\t\t\t\t\t\t\tkey={ template.id }\n\t\t\t\t\t\t\t\t\twithChevron\n\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t! isTemplateList &&\n\t\t\t\t\t\t\t\t\t\tgetTemplatePartIcon( template.area )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ decodeEntities(\n\t\t\t\t\t\t\t\t\t\ttemplate.title?.rendered ||\n\t\t\t\t\t\t\t\t\t\t\ttemplate.slug\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</TemplateItem>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t{ ! isMobileViewport && (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<SidebarNavigationItem\n\t\t\t\t\t\t\t\t\t\tclassName=\"edit-site-sidebar-navigation-screen-templates__see-all\"\n\t\t\t\t\t\t\t\t\t\twithChevron\n\t\t\t\t\t\t\t\t\t\t{ ...browseAllLink }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ config[ postType ].labels.manage }\n\t\t\t\t\t\t\t\t\t</SidebarNavigationItem>\n\t\t\t\t\t\t\t\t\t{ !! config[ postType ].labels\n\t\t\t\t\t\t\t\t\t\t.reusableBlocks && (\n\t\t\t\t\t\t\t\t\t\t<SidebarNavigationItem\n\t\t\t\t\t\t\t\t\t\t\tas=\"a\"\n\t\t\t\t\t\t\t\t\t\t\thref=\"edit.php?post_type=wp_block\"\n\t\t\t\t\t\t\t\t\t\t\twithChevron\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\tconfig[ postType ].labels\n\t\t\t\t\t\t\t\t\t\t\t\t\t.reusableBlocks\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t</SidebarNavigationItem>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t}\n\t\t/>\n\t);\n}\n"]}

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

@@ -31,8 +31,6 @@ const {
 } = unlock(commandsPrivateApis);
 const HUB_ANIMATION_DURATION = 0.3;
 const SiteHub = forwardRef((props, ref) => {
-  var _window;
-
   const {
     canvasMode,
     dashboardLink
@@ -136,7 +134,7 @@ const SiteHub = forwardRef((props, ref) => {
       ease: 'easeOut',
       delay: canvasMode === 'view' ? 0.1 : 0
     }
-  }, decodeEntities(siteTitle)))), ((_window = window) === null || _window === void 0 ? void 0 : _window.__experimentalEnableCommandCenter) && canvasMode === 'view' && createElement(Button, {
+  }, decodeEntities(siteTitle)))), canvasMode === 'view' && createElement(Button, {
     className: "edit-site-site-hub_toggle-command-center",
     icon: search,
     onClick: () => openCommandCenter(),

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

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

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

@@ -15,7 +15,8 @@ import { getCategories, getBlockTypes, getBlockFromExample, createBlock } from '
 import { BlockList, privateApis as blockEditorPrivateApis, store as blockEditorStore, __unstableEditorStyles as EditorStyles, __unstableIframe as Iframe } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { useResizeObserver } from '@wordpress/compose';
-import { useMemo, memo } from '@wordpress/element';
+import { useMemo, useState, memo } from '@wordpress/element';
+import { ENTER, SPACE } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
@@ -138,8 +139,12 @@ function getExamples() {
 
 function StyleBook(_ref) {
   let {
+    enableResizing = true,
     isSelected,
-    onSelect
+    onClick,
+    onSelect,
+    showCloseButton = true,
+    showTabs = true
   } = _ref;
   const [resizeObserver, sizes] = useResizeObserver();
   const [textColor] = useGlobalStyle('color.text');
@@ -155,41 +160,109 @@ function StyleBook(_ref) {
     __unstableIsPreviewMode: true
   }), [originalSettings]);
   return createElement(EditorCanvasContainer, {
-    closeButtonLabel: __('Close Style Book')
+    enableResizing: enableResizing,
+    closeButtonLabel: showCloseButton ? __('Close Style Book') : null
   }, createElement("div", {
     className: classnames('edit-site-style-book', {
-      'is-wide': sizes.width > 600
+      'is-wide': sizes.width > 600,
+      'is-button': !!onClick
     }),
     style: {
       color: textColor,
       background: backgroundColor
     }
-  }, resizeObserver, createElement(TabPanel, {
+  }, resizeObserver, showTabs ? createElement(TabPanel, {
     className: "edit-site-style-book__tab-panel",
     tabs: tabs
-  }, tab => createElement(Iframe, {
-    className: "edit-site-style-book__iframe",
+  }, tab => createElement(StyleBookBody, {
+    category: tab.name,
+    examples: examples,
+    isSelected: isSelected,
+    onSelect: onSelect,
+    settings: settings,
+    sizes: sizes,
+    title: tab.title
+  })) : createElement(StyleBookBody, {
+    examples: examples,
+    isSelected: isSelected,
+    onClick: onClick,
+    onSelect: onSelect,
+    settings: settings,
+    sizes: sizes
+  })));
+}
+
+const StyleBookBody = _ref2 => {
+  let {
+    category,
+    examples,
+    isSelected,
+    onClick,
+    onSelect,
+    settings,
+    sizes,
+    title
+  } = _ref2;
+  const [isFocused, setIsFocused] = useState(false); // 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 = {
+    role: 'button',
+    onFocus: () => setIsFocused(true),
+    onBlur: () => setIsFocused(false),
+    onKeyDown: event => {
+      if (event.defaultPrevented) {
+        return;
+      }
+
+      const {
+        keyCode
+      } = event;
+
+      if (onClick && (keyCode === ENTER || keyCode === SPACE)) {
+        event.preventDefault();
+        onClick(event);
+      }
+    },
+    onClick: event => {
+      if (event.defaultPrevented) {
+        return;
+      }
+
+      if (onClick) {
+        event.preventDefault();
+        onClick(event);
+      }
+    },
+    readonly: true
+  };
+  const buttonModeStyles = onClick ? 'body { cursor: pointer; } body * { pointer-events: none; }' : '';
+  return createElement(Iframe, _extends({
+    className: classnames('edit-site-style-book__iframe', {
+      'is-focused': isFocused && !!onClick,
+      'is-button': !!onClick
+    }),
     name: "style-book-canvas",
     tabIndex: 0
-  }, createElement(EditorStyles, {
+  }, onClick ? buttonModeProps : {}), createElement(EditorStyles, {
     styles: settings.styles
   }), createElement("style", null, // 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), createElement(Examples, {
+						body { position: relative; padding: 32px !important; }` + STYLE_BOOK_IFRAME_STYLES + buttonModeStyles), createElement(Examples, {
     className: classnames('edit-site-style-book__examples', {
       'is-wide': sizes.width > 600
     }),
     examples: examples,
-    category: tab.name,
-    label: sprintf( // translators: %s: Category of blocks, e.g. Text.
-    __('Examples of blocks in the %s category'), tab.title),
+    category: category,
+    label: title ? sprintf( // translators: %s: Category of blocks, e.g. Text.
+    __('Examples of blocks in the %s category'), title) : __('Examples of blocks'),
     isSelected: isSelected,
     onSelect: onSelect
-  })))));
-}
+  }));
+};
 
-const Examples = memo(_ref2 => {
+const Examples = memo(_ref3 => {
   let {
     className,
     examples,
@@ -197,14 +270,14 @@ const Examples = memo(_ref2 => {
     label,
     isSelected,
     onSelect
-  } = _ref2;
+  } = _ref3;
   const composite = useCompositeState({
     orientation: 'vertical'
   });
   return createElement(Composite, _extends({}, composite, {
     className: className,
     "aria-label": label
-  }), examples.filter(example => example.category === category).map(example => createElement(Example, {
+  }), examples.filter(example => category ? example.category === category : true).map(example => createElement(Example, {
     key: example.name,
     id: `example-${example.name}`,
     composite: composite,
@@ -212,12 +285,12 @@ const Examples = memo(_ref2 => {
     blocks: example.blocks,
     isSelected: isSelected(example.name),
     onClick: () => {
-      onSelect(example.name);
+      onSelect === null || onSelect === void 0 ? void 0 : onSelect(example.name);
     }
   })));
 });
 
-const Example = _ref3 => {
+const Example = _ref4 => {
   let {
     composite,
     id,
@@ -225,7 +298,7 @@ const Example = _ref3 => {
     blocks,
     isSelected,
     onClick
-  } = _ref3;
+  } = _ref4;
   const originalSettings = useSelect(select => select(blockEditorStore).getSettings(), []);
   const settings = useMemo(() => ({ ...originalSettings,
     __unstableIsPreviewMode: true