@wordpress/block-editor 16.2.0 → 17.0.2-next.v.202608281122.0

package/build-module/components/inner-content/index.mjs.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../src/components/inner-content/index.js"],
+  "sources": ["../../../src/components/inner-content/index.jsx"],
   "sourcesContent": ["import {\n\tcreatePortal,\n\tuseLayoutEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\nimport { AsyncModeProvider, useSelect } from '@wordpress/data';\nimport { safeHTML } from '@wordpress/dom';\nimport { store as blockEditorStore } from '../../store';\nimport BlockListBlock from '../block-list/block';\nimport { LayoutProvider } from '../block-list/layout';\n\nconst SLOT_TAG_NAME = 'wp-inner-block-slot';\n\n// The static markup surrounding the inner blocks is arbitrary HTML the block\n// editor doesn't manage, so it provides no layout context: no alignments are\n// available to the inner blocks.\nconst LAYOUT = { type: 'default', alignments: [] };\n\n/**\n * Renders the static HTML fragments of a block with the `innerContent`\n * support, mounting each inner block at the position of its `null`\n * placeholder within the static markup.\n *\n * Unlike `InnerBlocks`, the rendered blocks are not a contiguous list: they\n * live at arbitrary positions inside markup the block editor doesn't manage.\n * The static fragments are sanitized with `safeHTML` before being injected\n * into the canvas — the same treatment block save content receives elsewhere\n * in the editor — and the inner blocks are portalled into placeholder\n * elements. Inner blocks are locked: they can be edited in place but not\n * moved, removed, or added to.\n *\n * @param {Object} props          Component props.\n * @param {string} props.clientId Client ID of the block whose inner content\n *                                should be rendered.\n */\nexport default function InnerContent( { clientId } ) {\n\tconst { innerContent, order, selectedClientIds } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlock, getBlockOrder, getSelectedBlockClientIds } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\treturn {\n\t\t\t\tinnerContent: getBlock( clientId )?.innerContent,\n\t\t\t\torder: getBlockOrder( clientId ),\n\t\t\t\tselectedClientIds: getSelectedBlockClientIds(),\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\tconst html = useMemo( () => {\n\t\tlet slotIndex = 0;\n\t\treturn ( innerContent ?? [] )\n\t\t\t.map( ( item ) =>\n\t\t\t\titem === null\n\t\t\t\t\t? `<${ SLOT_TAG_NAME } data-slot-index=\"${ slotIndex++ }\" style=\"display: contents\"></${ SLOT_TAG_NAME }>`\n\t\t\t\t\t: item\n\t\t\t)\n\t\t\t.join( '' );\n\t}, [ innerContent ] );\n\n\tconst containerRef = useRef();\n\tconst [ slots, setSlots ] = useState( [] );\n\n\tuseLayoutEffect( () => {\n\t\tconst container = containerRef.current;\n\n\t\t// Sanitize before injecting into the canvas: `safeHTML` removes\n\t\t// `<script>` elements and inline event handlers, matching how block\n\t\t// save content is rendered elsewhere in the editor.\n\t\tcontainer.innerHTML = safeHTML( html );\n\n\t\tsetSlots(\n\t\t\tArray.from( container.querySelectorAll( SLOT_TAG_NAME ) ).sort(\n\t\t\t\t( a, b ) =>\n\t\t\t\t\tNumber( a.dataset.slotIndex ) -\n\t\t\t\t\tNumber( b.dataset.slotIndex )\n\t\t\t)\n\t\t);\n\t}, [ html ] );\n\n\treturn (\n\t\t<LayoutProvider value={ LAYOUT }>\n\t\t\t<div\n\t\t\t\tref={ containerRef }\n\t\t\t\tclassName=\"block-editor-inner-content\"\n\t\t\t\tstyle={ { display: 'contents' } }\n\t\t\t/>\n\t\t\t{ order.map( ( childClientId, index ) =>\n\t\t\t\tslots[ index ]\n\t\t\t\t\t? createPortal(\n\t\t\t\t\t\t\t// Render the selected block synchronously, as the block list does.\n\t\t\t\t\t\t\t<AsyncModeProvider\n\t\t\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\t\t\t! selectedClientIds.includes(\n\t\t\t\t\t\t\t\t\t\tchildClientId\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\t\t<BlockListBlock\n\t\t\t\t\t\t\t\t\trootClientId={ clientId }\n\t\t\t\t\t\t\t\t\tclientId={ childClientId }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</AsyncModeProvider>,\n\t\t\t\t\t\t\tslots[ index ],\n\t\t\t\t\t\t\tchildClientId\n\t\t\t\t\t  )\n\t\t\t\t\t: null\n\t\t\t) }\n\t\t</LayoutProvider>\n\t);\n}\n"],
   "mappings": ";AAAA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,mBAAmB,iBAAiB;AAC7C,SAAS,gBAAgB;AACzB,SAAS,SAAS,wBAAwB;AAC1C,OAAO,oBAAoB;AAC3B,SAAS,sBAAsB;AAuE7B,SACC,KADD;AArEF,IAAM,gBAAgB;AAKtB,IAAM,SAAS,EAAE,MAAM,WAAW,YAAY,CAAC,EAAE;AAmBlC,SAAR,aAA+B,EAAE,SAAS,GAAI;AACpD,QAAM,EAAE,cAAc,OAAO,kBAAkB,IAAI;AAAA,IAClD,CAAE,WAAY;AACb,YAAM,EAAE,UAAU,eAAe,0BAA0B,IAC1D,OAAQ,gBAAiB;AAC1B,aAAO;AAAA,QACN,cAAc,SAAU,QAAS,GAAG;AAAA,QACpC,OAAO,cAAe,QAAS;AAAA,QAC/B,mBAAmB,0BAA0B;AAAA,MAC9C;AAAA,IACD;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AACA,QAAM,OAAO,QAAS,MAAM;AAC3B,QAAI,YAAY;AAChB,YAAS,gBAAgB,CAAC,GACxB;AAAA,MAAK,CAAE,SACP,SAAS,OACN,IAAK,aAAc,qBAAsB,WAAY,iCAAkC,aAAc,MACrG;AAAA,IACJ,EACC,KAAM,EAAG;AAAA,EACZ,GAAG,CAAE,YAAa,CAAE;AAEpB,QAAM,eAAe,OAAO;AAC5B,QAAM,CAAE,OAAO,QAAS,IAAI,SAAU,CAAC,CAAE;AAEzC,kBAAiB,MAAM;AACtB,UAAM,YAAY,aAAa;AAK/B,cAAU,YAAY,SAAU,IAAK;AAErC;AAAA,MACC,MAAM,KAAM,UAAU,iBAAkB,aAAc,CAAE,EAAE;AAAA,QACzD,CAAE,GAAG,MACJ,OAAQ,EAAE,QAAQ,SAAU,IAC5B,OAAQ,EAAE,QAAQ,SAAU;AAAA,MAC9B;AAAA,IACD;AAAA,EACD,GAAG,CAAE,IAAK,CAAE;AAEZ,SACC,qBAAC,kBAAe,OAAQ,QACvB;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,KAAM;AAAA,QACN,WAAU;AAAA,QACV,OAAQ,EAAE,SAAS,WAAW;AAAA;AAAA,IAC/B;AAAA,IACE,MAAM;AAAA,MAAK,CAAE,eAAe,UAC7B,MAAO,KAAM,IACV;AAAA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACA,OACC,CAAE,kBAAkB;AAAA,cACnB;AAAA,YACD;AAAA,YAGD;AAAA,cAAC;AAAA;AAAA,gBACA,cAAe;AAAA,gBACf,UAAW;AAAA;AAAA,YACZ;AAAA;AAAA,QACD;AAAA,QACA,MAAO,KAAM;AAAA,QACb;AAAA,MACA,IACA;AAAA,IACJ;AAAA,KACD;AAEF;",
   "names": []

package/build-module/components/inserter/block-patterns-explorer/index.mjs

@@ -1,5 +1,6 @@
-// packages/block-editor/src/components/inserter/block-patterns-explorer/index.js
+// packages/block-editor/src/components/inserter/block-patterns-explorer/index.jsx
 import { Modal } from "@wordpress/components";
+import { Tabs } from "@wordpress/ui";
 import { useState } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
 import PatternExplorerSidebar from "./pattern-explorer-sidebar.mjs";
@@ -12,28 +13,44 @@ function PatternsExplorer({ initialCategory, rootClientId, onModalClose }) {
     initialCategory?.name
   );
   const patternCategories = usePatternCategories(rootClientId);
-  return /* @__PURE__ */ jsxs("div", { className: "block-editor-block-patterns-explorer", children: [
-    /* @__PURE__ */ jsx(
-      PatternExplorerSidebar,
-      {
-        selectedCategory,
-        patternCategories,
-        onClickCategory: setSelectedCategory,
-        searchValue,
-        setSearchValue
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      PatternList,
-      {
-        searchValue,
-        selectedCategory,
-        patternCategories,
-        rootClientId,
-        onModalClose
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Tabs.Root,
+    {
+      className: "block-editor-block-patterns-explorer",
+      orientation: "vertical",
+      value: selectedCategory,
+      onValueChange: setSelectedCategory,
+      children: [
+        /* @__PURE__ */ jsx(
+          PatternExplorerSidebar,
+          {
+            patternCategories,
+            searchValue,
+            setSearchValue
+          }
+        ),
+        patternCategories.map(({ name }) => /* @__PURE__ */ jsx(
+          Tabs.Panel,
+          {
+            value: name,
+            tabIndex: -1,
+            className: "block-editor-block-patterns-explorer__panel",
+            children: /* @__PURE__ */ jsx(
+              PatternList,
+              {
+                searchValue,
+                selectedCategory: name,
+                patternCategories,
+                rootClientId,
+                onModalClose
+              }
+            )
+          },
+          name
+        ))
+      ]
+    }
+  );
 }
 function PatternsExplorerModal({ onModalClose, ...restProps }) {
   return /* @__PURE__ */ jsx(

package/build-module/components/inserter/block-patterns-explorer/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../src/components/inserter/block-patterns-explorer/index.js"],
-  "sourcesContent": ["import { Modal } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport PatternExplorerSidebar from './pattern-explorer-sidebar';\nimport PatternList from './pattern-list';\nimport { usePatternCategories } from '../block-patterns-tab/use-pattern-categories';\n\nfunction PatternsExplorer( { initialCategory, rootClientId, onModalClose } ) {\n\tconst [ searchValue, setSearchValue ] = useState( '' );\n\tconst [ selectedCategory, setSelectedCategory ] = useState(\n\t\tinitialCategory?.name\n\t);\n\n\tconst patternCategories = usePatternCategories( rootClientId );\n\n\treturn (\n\t\t<div className=\"block-editor-block-patterns-explorer\">\n\t\t\t<PatternExplorerSidebar\n\t\t\t\tselectedCategory={ selectedCategory }\n\t\t\t\tpatternCategories={ patternCategories }\n\t\t\t\tonClickCategory={ setSelectedCategory }\n\t\t\t\tsearchValue={ searchValue }\n\t\t\t\tsetSearchValue={ setSearchValue }\n\t\t\t/>\n\t\t\t<PatternList\n\t\t\t\tsearchValue={ searchValue }\n\t\t\t\tselectedCategory={ selectedCategory }\n\t\t\t\tpatternCategories={ patternCategories }\n\t\t\t\trootClientId={ rootClientId }\n\t\t\t\tonModalClose={ onModalClose }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nfunction PatternsExplorerModal( { onModalClose, ...restProps } ) {\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ __( 'Patterns' ) }\n\t\t\tonRequestClose={ onModalClose }\n\t\t\tisFullScreen\n\t\t>\n\t\t\t<PatternsExplorer onModalClose={ onModalClose } { ...restProps } />\n\t\t</Modal>\n\t);\n}\n\nexport default PatternsExplorerModal;\n"],
-  "mappings": ";AAAA,SAAS,aAAa;AACtB,SAAS,gBAAgB;AACzB,SAAS,UAAU;AACnB,OAAO,4BAA4B;AACnC,OAAO,iBAAiB;AACxB,SAAS,4BAA4B;AAWnC,SACC,KADD;AATF,SAAS,iBAAkB,EAAE,iBAAiB,cAAc,aAAa,GAAI;AAC5E,QAAM,CAAE,aAAa,cAAe,IAAI,SAAU,EAAG;AACrD,QAAM,CAAE,kBAAkB,mBAAoB,IAAI;AAAA,IACjD,iBAAiB;AAAA,EAClB;AAEA,QAAM,oBAAoB,qBAAsB,YAAa;AAE7D,SACC,qBAAC,SAAI,WAAU,wCACd;AAAA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA,iBAAkB;AAAA,QAClB;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,KACD;AAEF;AAEA,SAAS,sBAAuB,EAAE,cAAc,GAAG,UAAU,GAAI;AAChE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAQ,GAAI,UAAW;AAAA,MACvB,gBAAiB;AAAA,MACjB,cAAY;AAAA,MAEZ,8BAAC,oBAAiB,cAAgC,GAAG,WAAY;AAAA;AAAA,EAClE;AAEF;AAEA,IAAO,kCAAQ;",
+  "sources": ["../../../../src/components/inserter/block-patterns-explorer/index.jsx"],
+  "sourcesContent": ["import { Modal } from '@wordpress/components';\nimport { Tabs } from '@wordpress/ui';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport PatternExplorerSidebar from './pattern-explorer-sidebar';\nimport PatternList from './pattern-list';\nimport { usePatternCategories } from '../block-patterns-tab/use-pattern-categories';\n\nfunction PatternsExplorer( { initialCategory, rootClientId, onModalClose } ) {\n\tconst [ searchValue, setSearchValue ] = useState( '' );\n\tconst [ selectedCategory, setSelectedCategory ] = useState(\n\t\tinitialCategory?.name\n\t);\n\n\tconst patternCategories = usePatternCategories( rootClientId );\n\n\treturn (\n\t\t<Tabs.Root\n\t\t\tclassName=\"block-editor-block-patterns-explorer\"\n\t\t\torientation=\"vertical\"\n\t\t\tvalue={ selectedCategory }\n\t\t\tonValueChange={ setSelectedCategory }\n\t\t>\n\t\t\t<PatternExplorerSidebar\n\t\t\t\tpatternCategories={ patternCategories }\n\t\t\t\tsearchValue={ searchValue }\n\t\t\t\tsetSearchValue={ setSearchValue }\n\t\t\t/>\n\t\t\t{ patternCategories.map( ( { name } ) => (\n\t\t\t\t<Tabs.Panel\n\t\t\t\t\tkey={ name }\n\t\t\t\t\tvalue={ name }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\tclassName=\"block-editor-block-patterns-explorer__panel\"\n\t\t\t\t>\n\t\t\t\t\t<PatternList\n\t\t\t\t\t\tsearchValue={ searchValue }\n\t\t\t\t\t\tselectedCategory={ name }\n\t\t\t\t\t\tpatternCategories={ patternCategories }\n\t\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t\t\tonModalClose={ onModalClose }\n\t\t\t\t\t/>\n\t\t\t\t</Tabs.Panel>\n\t\t\t) ) }\n\t\t</Tabs.Root>\n\t);\n}\n\nfunction PatternsExplorerModal( { onModalClose, ...restProps } ) {\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ __( 'Patterns' ) }\n\t\t\tonRequestClose={ onModalClose }\n\t\t\tisFullScreen\n\t\t>\n\t\t\t<PatternsExplorer onModalClose={ onModalClose } { ...restProps } />\n\t\t</Modal>\n\t);\n}\n\nexport default PatternsExplorerModal;\n"],
+  "mappings": ";AAAA,SAAS,aAAa;AACtB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,UAAU;AACnB,OAAO,4BAA4B;AACnC,OAAO,iBAAiB;AACxB,SAAS,4BAA4B;AAWnC,SAMC,KAND;AATF,SAAS,iBAAkB,EAAE,iBAAiB,cAAc,aAAa,GAAI;AAC5E,QAAM,CAAE,aAAa,cAAe,IAAI,SAAU,EAAG;AACrD,QAAM,CAAE,kBAAkB,mBAAoB,IAAI;AAAA,IACjD,iBAAiB;AAAA,EAClB;AAEA,QAAM,oBAAoB,qBAAsB,YAAa;AAE7D,SACC;AAAA,IAAC,KAAK;AAAA,IAAL;AAAA,MACA,WAAU;AAAA,MACV,aAAY;AAAA,MACZ,OAAQ;AAAA,MACR,eAAgB;AAAA,MAEhB;AAAA;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACD;AAAA,QACE,kBAAkB,IAAK,CAAE,EAAE,KAAK,MACjC;AAAA,UAAC,KAAK;AAAA,UAAL;AAAA,YAEA,OAAQ;AAAA,YACR,UAAW;AAAA,YACX,WAAU;AAAA,YAEV;AAAA,cAAC;AAAA;AAAA,gBACA;AAAA,gBACA,kBAAmB;AAAA,gBACnB;AAAA,gBACA;AAAA,gBACA;AAAA;AAAA,YACD;AAAA;AAAA,UAXM;AAAA,QAYP,CACC;AAAA;AAAA;AAAA,EACH;AAEF;AAEA,SAAS,sBAAuB,EAAE,cAAc,GAAG,UAAU,GAAI;AAChE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAQ,GAAI,UAAW;AAAA,MACvB,gBAAiB;AAAA,MACjB,cAAY;AAAA,MAEZ,8BAAC,oBAAiB,cAAgC,GAAG,WAAY;AAAA;AAAA,EAClE;AAEF;AAEA,IAAO,kCAAQ;",
   "names": []
 }

package/build-module/components/inserter/block-patterns-explorer/pattern-explorer-sidebar.mjs

@@ -1,67 +1,33 @@
-// packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-explorer-sidebar.js
-import { Button, SearchControl } from "@wordpress/components";
+// packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-explorer-sidebar.jsx
+import { SearchControl } from "@wordpress/components";
+import { Stack, Tabs } from "@wordpress/ui";
 import { __ } from "@wordpress/i18n";
 import { jsx, jsxs } from "react/jsx-runtime";
-function PatternCategoriesList({
-  selectedCategory,
-  patternCategories,
-  onClickCategory
-}) {
-  const baseClassName = "block-editor-block-patterns-explorer__sidebar";
-  return /* @__PURE__ */ jsx("div", { className: `${baseClassName}__categories-list`, children: patternCategories.map(({ name, label }) => {
-    return /* @__PURE__ */ jsx(
-      Button,
-      {
-        __next40pxDefaultSize: true,
-        label,
-        className: `${baseClassName}__categories-list__item`,
-        isPressed: selectedCategory === name,
-        onClick: () => {
-          onClickCategory(name);
-        },
-        children: label
-      },
-      name
-    );
-  }) });
-}
-function PatternsExplorerSearch({ searchValue, setSearchValue }) {
-  const baseClassName = "block-editor-block-patterns-explorer__search";
-  return /* @__PURE__ */ jsx("div", { className: baseClassName, children: /* @__PURE__ */ jsx(
-    SearchControl,
-    {
-      onChange: setSearchValue,
-      value: searchValue,
-      label: __("Search"),
-      placeholder: __("Search")
-    }
-  ) });
-}
 function PatternExplorerSidebar({
-  selectedCategory,
   patternCategories,
-  onClickCategory,
   searchValue,
   setSearchValue
 }) {
-  const baseClassName = "block-editor-block-patterns-explorer__sidebar";
-  return /* @__PURE__ */ jsxs("div", { className: baseClassName, children: [
-    /* @__PURE__ */ jsx(
-      PatternsExplorerSearch,
-      {
-        searchValue,
-        setSearchValue
-      }
-    ),
-    !searchValue && /* @__PURE__ */ jsx(
-      PatternCategoriesList,
-      {
-        selectedCategory,
-        patternCategories,
-        onClickCategory
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: "column",
+      gap: "lg",
+      className: "block-editor-block-patterns-explorer__sidebar",
+      children: [
+        /* @__PURE__ */ jsx(
+          SearchControl,
+          {
+            onChange: setSearchValue,
+            value: searchValue,
+            label: __("Search"),
+            placeholder: __("Search")
+          }
+        ),
+        /* @__PURE__ */ jsx(Tabs.List, { children: patternCategories.map(({ name, label }) => /* @__PURE__ */ jsx(Tabs.Tab, { value: name, children: label }, name)) })
+      ]
+    }
+  );
 }
 var pattern_explorer_sidebar_default = PatternExplorerSidebar;
 export {

package/build-module/components/inserter/block-patterns-explorer/pattern-explorer-sidebar.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../src/components/inserter/block-patterns-explorer/pattern-explorer-sidebar.js"],
-  "sourcesContent": ["import { Button, SearchControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\nfunction PatternCategoriesList( {\n\tselectedCategory,\n\tpatternCategories,\n\tonClickCategory,\n} ) {\n\tconst baseClassName = 'block-editor-block-patterns-explorer__sidebar';\n\treturn (\n\t\t<div className={ `${ baseClassName }__categories-list` }>\n\t\t\t{ patternCategories.map( ( { name, label } ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tkey={ name }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\tclassName={ `${ baseClassName }__categories-list__item` }\n\t\t\t\t\t\tisPressed={ selectedCategory === name }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonClickCategory( name );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</Button>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</div>\n\t);\n}\n\nfunction PatternsExplorerSearch( { searchValue, setSearchValue } ) {\n\tconst baseClassName = 'block-editor-block-patterns-explorer__search';\n\treturn (\n\t\t<div className={ baseClassName }>\n\t\t\t<SearchControl\n\t\t\t\tonChange={ setSearchValue }\n\t\t\t\tvalue={ searchValue }\n\t\t\t\tlabel={ __( 'Search' ) }\n\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nfunction PatternExplorerSidebar( {\n\tselectedCategory,\n\tpatternCategories,\n\tonClickCategory,\n\tsearchValue,\n\tsetSearchValue,\n} ) {\n\tconst baseClassName = 'block-editor-block-patterns-explorer__sidebar';\n\treturn (\n\t\t<div className={ baseClassName }>\n\t\t\t<PatternsExplorerSearch\n\t\t\t\tsearchValue={ searchValue }\n\t\t\t\tsetSearchValue={ setSearchValue }\n\t\t\t/>\n\t\t\t{ ! searchValue && (\n\t\t\t\t<PatternCategoriesList\n\t\t\t\t\tselectedCategory={ selectedCategory }\n\t\t\t\t\tpatternCategories={ patternCategories }\n\t\t\t\t\tonClickCategory={ onClickCategory }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default PatternExplorerSidebar;\n"],
-  "mappings": ";AAAA,SAAS,QAAQ,qBAAqB;AACtC,SAAS,UAAU;AAYd,cAyCH,YAzCG;AAVL,SAAS,sBAAuB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,gBAAgB;AACtB,SACC,oBAAC,SAAI,WAAY,GAAI,aAAc,qBAChC,4BAAkB,IAAK,CAAE,EAAE,MAAM,MAAM,MAAO;AAC/C,WACC;AAAA,MAAC;AAAA;AAAA,QACA,uBAAqB;AAAA,QAErB;AAAA,QACA,WAAY,GAAI,aAAc;AAAA,QAC9B,WAAY,qBAAqB;AAAA,QACjC,SAAU,MAAM;AACf,0BAAiB,IAAK;AAAA,QACvB;AAAA,QAEE;AAAA;AAAA,MARI;AAAA,IASP;AAAA,EAEF,CAAE,GACH;AAEF;AAEA,SAAS,uBAAwB,EAAE,aAAa,eAAe,GAAI;AAClE,QAAM,gBAAgB;AACtB,SACC,oBAAC,SAAI,WAAY,eAChB;AAAA,IAAC;AAAA;AAAA,MACA,UAAW;AAAA,MACX,OAAQ;AAAA,MACR,OAAQ,GAAI,QAAS;AAAA,MACrB,aAAc,GAAI,QAAS;AAAA;AAAA,EAC5B,GACD;AAEF;AAEA,SAAS,uBAAwB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,gBAAgB;AACtB,SACC,qBAAC,SAAI,WAAY,eAChB;AAAA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IACE,CAAE,eACH;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;AAEA,IAAO,mCAAQ;",
+  "sources": ["../../../../src/components/inserter/block-patterns-explorer/pattern-explorer-sidebar.jsx"],
+  "sourcesContent": ["import { SearchControl } from '@wordpress/components';\nimport { Stack, Tabs } from '@wordpress/ui';\nimport { __ } from '@wordpress/i18n';\n\nfunction PatternExplorerSidebar( {\n\tpatternCategories,\n\tsearchValue,\n\tsetSearchValue,\n} ) {\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"column\"\n\t\t\tgap=\"lg\"\n\t\t\tclassName=\"block-editor-block-patterns-explorer__sidebar\"\n\t\t>\n\t\t\t<SearchControl\n\t\t\t\tonChange={ setSearchValue }\n\t\t\t\tvalue={ searchValue }\n\t\t\t\tlabel={ __( 'Search' ) }\n\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t/>\n\t\t\t<Tabs.List>\n\t\t\t\t{ patternCategories.map( ( { name, label } ) => (\n\t\t\t\t\t<Tabs.Tab key={ name } value={ name }>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t) ) }\n\t\t\t</Tabs.List>\n\t\t</Stack>\n\t);\n}\n\nexport default PatternExplorerSidebar;\n"],
+  "mappings": ";AAAA,SAAS,qBAAqB;AAC9B,SAAS,OAAO,YAAY;AAC5B,SAAS,UAAU;AAQjB,SAKC,KALD;AANF,SAAS,uBAAwB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,WAAU;AAAA,MAEV;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,UAAW;AAAA,YACX,OAAQ;AAAA,YACR,OAAQ,GAAI,QAAS;AAAA,YACrB,aAAc,GAAI,QAAS;AAAA;AAAA,QAC5B;AAAA,QACA,oBAAC,KAAK,MAAL,EACE,4BAAkB,IAAK,CAAE,EAAE,MAAM,MAAM,MACxC,oBAAC,KAAK,KAAL,EAAsB,OAAQ,MAC5B,mBADa,IAEhB,CACC,GACH;AAAA;AAAA;AAAA,EACD;AAEF;AAEA,IAAO,mCAAQ;",
   "names": []
 }

package/build-module/components/inserter/block-patterns-explorer/pattern-list.mjs

@@ -1,13 +1,12 @@
-// packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js
+// packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.jsx
 import { useMemo, useEffect, useRef, useState } from "@wordpress/element";
-import { _n, sprintf } from "@wordpress/i18n";
+import { __, _n, sprintf } from "@wordpress/i18n";
 import { useDebounce } from "@wordpress/compose";
-import { __experimentalHeading as Heading } from "@wordpress/components";
+import { Text } from "@wordpress/ui";
 import { speak } from "@wordpress/a11y";
 import BlockPatternsList from "../../block-patterns-list/index.mjs";
 import useInsertionPoint from "../hooks/use-insertion-point.mjs";
 import usePatternsState from "../hooks/use-patterns-state.mjs";
-import InserterListbox from "../../inserter-listbox/index.mjs";
 import { searchItems } from "../search-items.mjs";
 import BlockPatternsPaging from "../../block-patterns-paging/index.mjs";
 import usePatternsPaging from "../hooks/use-patterns-paging.mjs";
@@ -18,28 +17,6 @@ import {
   starterPatternsCategory
 } from "../block-patterns-tab/utils.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function PatternsListHeader({ filterValue, filteredBlockPatternsLength }) {
-  if (!filterValue) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    Heading,
-    {
-      level: 2,
-      lineHeight: "48px",
-      className: "block-editor-block-patterns-explorer__search-results-count",
-      children: sprintf(
-        /* translators: %d: number of patterns. */
-        _n(
-          "%d pattern found",
-          "%d patterns found",
-          filteredBlockPatternsLength
-        ),
-        filteredBlockPatternsLength
-      )
-    }
-  );
-}
 function PatternList({
   searchValue,
   selectedCategory,
@@ -116,34 +93,32 @@ function PatternList({
     pagingProps.changePage(1);
   }
   const hasItems = !!filteredBlockPatterns?.length;
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: "block-editor-block-patterns-explorer__list",
       ref: container,
-      children: [
+      children: hasItems ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
-          PatternsListHeader,
+          BlockPatternsList,
           {
-            filterValue: searchValue,
-            filteredBlockPatternsLength: filteredBlockPatterns.length
+            blockPatterns: pagingProps.categoryPatterns,
+            onClickPattern: (pattern, blocks) => {
+              onClickPattern(pattern, blocks);
+              onModalClose();
+            },
+            isDraggable: false
           }
         ),
-        /* @__PURE__ */ jsx(InserterListbox, { children: hasItems && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            BlockPatternsList,
-            {
-              blockPatterns: pagingProps.categoryPatterns,
-              onClickPattern: (pattern, blocks) => {
-                onClickPattern(pattern, blocks);
-                onModalClose();
-              },
-              isDraggable: false
-            }
-          ),
-          /* @__PURE__ */ jsx(BlockPatternsPaging, { ...pagingProps })
-        ] }) })
-      ]
+        /* @__PURE__ */ jsx(BlockPatternsPaging, { ...pagingProps })
+      ] }) : /* @__PURE__ */ jsx(
+        Text,
+        {
+          render: /* @__PURE__ */ jsx("p", {}),
+          className: "block-editor-block-patterns-explorer__no-results",
+          children: __("No results found.")
+        }
+      )
     }
   );
 }

package/build-module/components/inserter/block-patterns-explorer/pattern-list.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../src/components/inserter/block-patterns-explorer/pattern-list.js"],
-  "sourcesContent": ["import { useMemo, useEffect, useRef, useState } from '@wordpress/element';\nimport { _n, sprintf } from '@wordpress/i18n';\nimport { useDebounce } from '@wordpress/compose';\nimport { __experimentalHeading as Heading } from '@wordpress/components';\nimport { speak } from '@wordpress/a11y';\nimport BlockPatternsList from '../../block-patterns-list';\nimport useInsertionPoint from '../hooks/use-insertion-point';\nimport usePatternsState from '../hooks/use-patterns-state';\nimport InserterListbox from '../../inserter-listbox';\nimport { searchItems } from '../search-items';\nimport BlockPatternsPaging from '../../block-patterns-paging';\nimport usePatternsPaging from '../hooks/use-patterns-paging';\nimport {\n\tINSERTER_PATTERN_TYPES,\n\tallPatternsCategory,\n\tmyPatternsCategory,\n\tstarterPatternsCategory,\n} from '../block-patterns-tab/utils';\n\nfunction PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {\n\tif ( ! filterValue ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Heading\n\t\t\tlevel={ 2 }\n\t\t\tlineHeight=\"48px\"\n\t\t\tclassName=\"block-editor-block-patterns-explorer__search-results-count\"\n\t\t>\n\t\t\t{ sprintf(\n\t\t\t\t/* translators: %d: number of patterns. */\n\t\t\t\t_n(\n\t\t\t\t\t'%d pattern found',\n\t\t\t\t\t'%d patterns found',\n\t\t\t\t\tfilteredBlockPatternsLength\n\t\t\t\t),\n\t\t\t\tfilteredBlockPatternsLength\n\t\t\t) }\n\t\t</Heading>\n\t);\n}\n\nfunction PatternList( {\n\tsearchValue,\n\tselectedCategory,\n\tpatternCategories,\n\trootClientId,\n\tonModalClose,\n} ) {\n\tconst container = useRef();\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {\n\t\trootClientId,\n\t\tshouldFocusBlock: true,\n\t} );\n\tconst [ patterns, , onClickPattern ] = usePatternsState(\n\t\tonInsertBlocks,\n\t\tdestinationRootClientId,\n\t\tselectedCategory\n\t);\n\n\tconst registeredPatternCategories = useMemo(\n\t\t() =>\n\t\t\tpatternCategories.map(\n\t\t\t\t( patternCategory ) => patternCategory.name\n\t\t\t),\n\t\t[ patternCategories ]\n\t);\n\n\tconst filteredBlockPatterns = useMemo( () => {\n\t\tconst filteredPatterns = patterns.filter( ( pattern ) => {\n\t\t\tif ( selectedCategory === allPatternsCategory.name ) {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t\tif (\n\t\t\t\tselectedCategory === myPatternsCategory.name &&\n\t\t\t\tpattern.type === INSERTER_PATTERN_TYPES.user\n\t\t\t) {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t\tif (\n\t\t\t\tselectedCategory === starterPatternsCategory.name &&\n\t\t\t\tpattern.blockTypes?.includes( 'core/post-content' )\n\t\t\t) {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t\tif ( selectedCategory === 'uncategorized' ) {\n\t\t\t\tconst hasKnownCategory =\n\t\t\t\t\tpattern.categories?.some( ( category ) =>\n\t\t\t\t\t\tregisteredPatternCategories.includes( category )\n\t\t\t\t\t) ?? false;\n\n\t\t\t\treturn ! pattern.categories?.length || ! hasKnownCategory;\n\t\t\t}\n\n\t\t\treturn pattern.categories?.includes( selectedCategory );\n\t\t} );\n\n\t\tif ( ! searchValue ) {\n\t\t\treturn filteredPatterns;\n\t\t}\n\n\t\treturn searchItems( filteredPatterns, searchValue );\n\t}, [\n\t\tsearchValue,\n\t\tpatterns,\n\t\tselectedCategory,\n\t\tregisteredPatternCategories,\n\t] );\n\n\t// Announce search results on change.\n\tuseEffect( () => {\n\t\tif ( ! searchValue ) {\n\t\t\treturn;\n\t\t}\n\t\tconst count = filteredBlockPatterns.length;\n\t\tconst resultsFoundMessage = sprintf(\n\t\t\t/* translators: %d: number of results. */\n\t\t\t_n( '%d result found.', '%d results found.', count ),\n\t\t\tcount\n\t\t);\n\t\tdebouncedSpeak( resultsFoundMessage );\n\t}, [ searchValue, debouncedSpeak, filteredBlockPatterns.length ] );\n\n\tconst pagingProps = usePatternsPaging(\n\t\tfilteredBlockPatterns,\n\t\tselectedCategory,\n\t\tcontainer\n\t);\n\n\t// Reset page when search value changes.\n\tconst [ previousSearchValue, setPreviousSearchValue ] =\n\t\tuseState( searchValue );\n\tif ( searchValue !== previousSearchValue ) {\n\t\tsetPreviousSearchValue( searchValue );\n\t\tpagingProps.changePage( 1 );\n\t}\n\n\tconst hasItems = !! filteredBlockPatterns?.length;\n\treturn (\n\t\t<div\n\t\t\tclassName=\"block-editor-block-patterns-explorer__list\"\n\t\t\tref={ container }\n\t\t>\n\t\t\t<PatternsListHeader\n\t\t\t\tfilterValue={ searchValue }\n\t\t\t\tfilteredBlockPatternsLength={ filteredBlockPatterns.length }\n\t\t\t/>\n\n\t\t\t<InserterListbox>\n\t\t\t\t{ hasItems && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<BlockPatternsList\n\t\t\t\t\t\t\tblockPatterns={ pagingProps.categoryPatterns }\n\t\t\t\t\t\t\tonClickPattern={ ( pattern, blocks ) => {\n\t\t\t\t\t\t\t\tonClickPattern( pattern, blocks );\n\t\t\t\t\t\t\t\tonModalClose();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tisDraggable={ false }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<BlockPatternsPaging { ...pagingProps } />\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</InserterListbox>\n\t\t</div>\n\t);\n}\n\nexport default PatternList;\n"],
-  "mappings": "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",
+  "sources": ["../../../../src/components/inserter/block-patterns-explorer/pattern-list.jsx"],
+  "sourcesContent": ["import { useMemo, useEffect, useRef, useState } from '@wordpress/element';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { useDebounce } from '@wordpress/compose';\nimport { Text } from '@wordpress/ui';\nimport { speak } from '@wordpress/a11y';\nimport BlockPatternsList from '../../block-patterns-list';\nimport useInsertionPoint from '../hooks/use-insertion-point';\nimport usePatternsState from '../hooks/use-patterns-state';\nimport { searchItems } from '../search-items';\nimport BlockPatternsPaging from '../../block-patterns-paging';\nimport usePatternsPaging from '../hooks/use-patterns-paging';\nimport {\n\tINSERTER_PATTERN_TYPES,\n\tallPatternsCategory,\n\tmyPatternsCategory,\n\tstarterPatternsCategory,\n} from '../block-patterns-tab/utils';\n\nfunction PatternList( {\n\tsearchValue,\n\tselectedCategory,\n\tpatternCategories,\n\trootClientId,\n\tonModalClose,\n} ) {\n\tconst container = useRef();\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {\n\t\trootClientId,\n\t\tshouldFocusBlock: true,\n\t} );\n\tconst [ patterns, , onClickPattern ] = usePatternsState(\n\t\tonInsertBlocks,\n\t\tdestinationRootClientId,\n\t\tselectedCategory\n\t);\n\n\tconst registeredPatternCategories = useMemo(\n\t\t() =>\n\t\t\tpatternCategories.map(\n\t\t\t\t( patternCategory ) => patternCategory.name\n\t\t\t),\n\t\t[ patternCategories ]\n\t);\n\n\tconst filteredBlockPatterns = useMemo( () => {\n\t\tconst filteredPatterns = patterns.filter( ( pattern ) => {\n\t\t\tif ( selectedCategory === allPatternsCategory.name ) {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t\tif (\n\t\t\t\tselectedCategory === myPatternsCategory.name &&\n\t\t\t\tpattern.type === INSERTER_PATTERN_TYPES.user\n\t\t\t) {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t\tif (\n\t\t\t\tselectedCategory === starterPatternsCategory.name &&\n\t\t\t\tpattern.blockTypes?.includes( 'core/post-content' )\n\t\t\t) {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t\tif ( selectedCategory === 'uncategorized' ) {\n\t\t\t\tconst hasKnownCategory =\n\t\t\t\t\tpattern.categories?.some( ( category ) =>\n\t\t\t\t\t\tregisteredPatternCategories.includes( category )\n\t\t\t\t\t) ?? false;\n\n\t\t\t\treturn ! pattern.categories?.length || ! hasKnownCategory;\n\t\t\t}\n\n\t\t\treturn pattern.categories?.includes( selectedCategory );\n\t\t} );\n\n\t\tif ( ! searchValue ) {\n\t\t\treturn filteredPatterns;\n\t\t}\n\n\t\treturn searchItems( filteredPatterns, searchValue );\n\t}, [\n\t\tsearchValue,\n\t\tpatterns,\n\t\tselectedCategory,\n\t\tregisteredPatternCategories,\n\t] );\n\n\t// Announce search results on change.\n\tuseEffect( () => {\n\t\tif ( ! searchValue ) {\n\t\t\treturn;\n\t\t}\n\t\tconst count = filteredBlockPatterns.length;\n\t\tconst resultsFoundMessage = sprintf(\n\t\t\t/* translators: %d: number of results. */\n\t\t\t_n( '%d result found.', '%d results found.', count ),\n\t\t\tcount\n\t\t);\n\t\tdebouncedSpeak( resultsFoundMessage );\n\t}, [ searchValue, debouncedSpeak, filteredBlockPatterns.length ] );\n\n\tconst pagingProps = usePatternsPaging(\n\t\tfilteredBlockPatterns,\n\t\tselectedCategory,\n\t\tcontainer\n\t);\n\n\t// Reset page when search value changes.\n\tconst [ previousSearchValue, setPreviousSearchValue ] =\n\t\tuseState( searchValue );\n\tif ( searchValue !== previousSearchValue ) {\n\t\tsetPreviousSearchValue( searchValue );\n\t\tpagingProps.changePage( 1 );\n\t}\n\n\tconst hasItems = !! filteredBlockPatterns?.length;\n\treturn (\n\t\t<div\n\t\t\tclassName=\"block-editor-block-patterns-explorer__list\"\n\t\t\tref={ container }\n\t\t>\n\t\t\t{ hasItems ? (\n\t\t\t\t<>\n\t\t\t\t\t<BlockPatternsList\n\t\t\t\t\t\tblockPatterns={ pagingProps.categoryPatterns }\n\t\t\t\t\t\tonClickPattern={ ( pattern, blocks ) => {\n\t\t\t\t\t\t\tonClickPattern( pattern, blocks );\n\t\t\t\t\t\t\tonModalClose();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisDraggable={ false }\n\t\t\t\t\t/>\n\t\t\t\t\t<BlockPatternsPaging { ...pagingProps } />\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<Text\n\t\t\t\t\trender={ <p /> }\n\t\t\t\t\tclassName=\"block-editor-block-patterns-explorer__no-results\"\n\t\t\t\t>\n\t\t\t\t\t{ __( 'No results found.' ) }\n\t\t\t\t</Text>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default PatternList;\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/inserter/block-patterns-tab/index.mjs

@@ -1,4 +1,4 @@
-// packages/block-editor/src/components/inserter/block-patterns-tab/index.js
+// packages/block-editor/src/components/inserter/block-patterns-tab/index.jsx
 import { useState } from "@wordpress/element";
 import { useViewportMatch } from "@wordpress/compose";
 import { Button } from "@wordpress/components";

package/build-module/components/inserter/block-patterns-tab/index.mjs.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../src/components/inserter/block-patterns-tab/index.js"],
+  "sources": ["../../../../src/components/inserter/block-patterns-tab/index.jsx"],
   "sourcesContent": ["import { useState } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { Button } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport PatternsExplorerModal from '../block-patterns-explorer';\nimport MobileTabNavigation from '../mobile-tab-navigation';\nimport { PatternCategoryPreviews } from './pattern-category-previews';\nimport { usePatternCategories } from './use-pattern-categories';\nimport CategoryTabs from '../category-tabs';\nimport InserterNoResults from '../no-results';\n\nfunction BlockPatternsTab( {\n\tonSelectCategory,\n\tselectedCategory,\n\tonInsert,\n\trootClientId,\n\tchildren,\n} ) {\n\tconst [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );\n\n\tconst categories = usePatternCategories( rootClientId );\n\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\n\tif ( ! categories.length ) {\n\t\treturn <InserterNoResults />;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ ! isMobile && (\n\t\t\t\t<div className=\"block-editor-inserter__block-patterns-tabs-container\">\n\t\t\t\t\t<CategoryTabs\n\t\t\t\t\t\tcategories={ categories }\n\t\t\t\t\t\tselectedCategory={ selectedCategory }\n\t\t\t\t\t\tonSelectCategory={ onSelectCategory }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</CategoryTabs>\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tclassName=\"block-editor-inserter__patterns-explore-button\"\n\t\t\t\t\t\tonClick={ () => setShowPatternsExplorer( true ) }\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Explore all patterns' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ isMobile && (\n\t\t\t\t<MobileTabNavigation categories={ categories }>\n\t\t\t\t\t{ ( category ) => (\n\t\t\t\t\t\t<div className=\"block-editor-inserter__category-panel\">\n\t\t\t\t\t\t\t<PatternCategoryPreviews\n\t\t\t\t\t\t\t\tkey={ category.name }\n\t\t\t\t\t\t\t\tonInsert={ onInsert }\n\t\t\t\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t\t\t\t\tcategory={ category }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</MobileTabNavigation>\n\t\t\t) }\n\t\t\t{ showPatternsExplorer && (\n\t\t\t\t<PatternsExplorerModal\n\t\t\t\t\tinitialCategory={ selectedCategory || categories[ 0 ] }\n\t\t\t\t\tpatternCategories={ categories }\n\t\t\t\t\tonModalClose={ () => setShowPatternsExplorer( false ) }\n\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default BlockPatternsTab;\n"],
   "mappings": ";AAAA,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,cAAc;AACvB,SAAS,UAAU;AACnB,OAAO,2BAA2B;AAClC,OAAO,yBAAyB;AAChC,SAAS,+BAA+B;AACxC,SAAS,4BAA4B;AACrC,OAAO,kBAAkB;AACzB,OAAO,uBAAuB;AAgBrB,SAIP,UAJO,KAML,YANK;AAdT,SAAS,iBAAkB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,CAAE,sBAAsB,uBAAwB,IAAI,SAAU,KAAM;AAE1E,QAAM,aAAa,qBAAsB,YAAa;AAEtD,QAAM,WAAW,iBAAkB,UAAU,GAAI;AAEjD,MAAK,CAAE,WAAW,QAAS;AAC1B,WAAO,oBAAC,qBAAkB;AAAA,EAC3B;AAEA,SACC,iCACG;AAAA,KAAE,YACH,qBAAC,SAAI,WAAU,wDACd;AAAA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UAEE;AAAA;AAAA,MACH;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA,uBAAqB;AAAA,UACrB,WAAU;AAAA,UACV,SAAU,MAAM,wBAAyB,IAAK;AAAA,UAC9C,SAAQ;AAAA,UAEN,aAAI,sBAAuB;AAAA;AAAA,MAC9B;AAAA,OACD;AAAA,IAEC,YACD,oBAAC,uBAAoB,YAClB,WAAE,aACH,oBAAC,SAAI,WAAU,yCACd;AAAA,MAAC;AAAA;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,MAHM,SAAS;AAAA,IAIhB,GACD,GAEF;AAAA,IAEC,wBACD;AAAA,MAAC;AAAA;AAAA,QACA,iBAAkB,oBAAoB,WAAY,CAAE;AAAA,QACpD,mBAAoB;AAAA,QACpB,cAAe,MAAM,wBAAyB,KAAM;AAAA,QACpD;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;AAEA,IAAO,6BAAQ;",
   "names": []

package/build-module/components/inserter/block-patterns-tab/pattern-category-previews.mjs

@@ -1,4 +1,4 @@
-// packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js
+// packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.jsx
 import {
   useMemo,
   useState,

package/build-module/components/inserter/block-patterns-tab/pattern-category-previews.mjs.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../src/components/inserter/block-patterns-tab/pattern-category-previews.js"],
+  "sources": ["../../../../src/components/inserter/block-patterns-tab/pattern-category-previews.jsx"],
   "sourcesContent": ["import {\n\tuseMemo,\n\tuseState,\n\tuseCallback,\n\tuseRef,\n\tuseEffect,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalHeading as Heading,\n\t__experimentalText as WCText,\n\tFlexBlock,\n} from '@wordpress/components';\nimport usePatternsState from '../hooks/use-patterns-state';\nimport BlockPatternsList from '../../block-patterns-list';\nimport usePatternsPaging from '../hooks/use-patterns-paging';\nimport { PatternsFilter } from './patterns-filter';\nimport { usePatternCategories } from './use-pattern-categories';\nimport {\n\tisPatternFiltered,\n\tallPatternsCategory,\n\tmyPatternsCategory,\n\tstarterPatternsCategory,\n\tINSERTER_PATTERN_TYPES,\n} from './utils';\n\nconst noop = () => {};\n\nexport function PatternCategoryPreviews( {\n\trootClientId,\n\tonInsert,\n\tonHover = noop,\n\tcategory,\n\tshowTitlesAsTooltip,\n} ) {\n\tconst [ allPatterns, , onClickPattern ] = usePatternsState(\n\t\tonInsert,\n\t\trootClientId,\n\t\tcategory?.name\n\t);\n\tconst [ patternSyncFilter, setPatternSyncFilter ] = useState( 'all' );\n\tconst [ patternSourceFilter, setPatternSourceFilter ] = useState( 'all' );\n\n\tconst availableCategories = usePatternCategories(\n\t\trootClientId,\n\t\tpatternSourceFilter\n\t);\n\tconst scrollContainerRef = useRef();\n\tconst currentCategoryPatterns = useMemo(\n\t\t() =>\n\t\t\tallPatterns.filter( ( pattern ) => {\n\t\t\t\tif (\n\t\t\t\t\tisPatternFiltered(\n\t\t\t\t\t\tpattern,\n\t\t\t\t\t\tpatternSourceFilter,\n\t\t\t\t\t\tpatternSyncFilter\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tif ( category.name === allPatternsCategory.name ) {\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\n\t\t\t\tif (\n\t\t\t\t\tcategory.name === myPatternsCategory.name &&\n\t\t\t\t\tpattern.type === INSERTER_PATTERN_TYPES.user\n\t\t\t\t) {\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\n\t\t\t\tif (\n\t\t\t\t\tcategory.name === starterPatternsCategory.name &&\n\t\t\t\t\tpattern.blockTypes?.includes( 'core/post-content' )\n\t\t\t\t) {\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\n\t\t\t\tif ( category.name === 'uncategorized' ) {\n\t\t\t\t\t// The uncategorized category should show all the patterns without any category...\n\t\t\t\t\tif ( ! pattern.categories ) {\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\n\t\t\t\t\t// ...or with no available category.\n\t\t\t\t\treturn ! pattern.categories.some( ( catName ) =>\n\t\t\t\t\t\tavailableCategories.some( ( c ) => c.name === catName )\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn pattern.categories?.includes( category.name );\n\t\t\t} ),\n\t\t[\n\t\t\tallPatterns,\n\t\t\tavailableCategories,\n\t\t\tcategory.name,\n\t\t\tpatternSourceFilter,\n\t\t\tpatternSyncFilter,\n\t\t]\n\t);\n\n\tconst pagingProps = usePatternsPaging(\n\t\tcurrentCategoryPatterns,\n\t\tcategory,\n\t\tscrollContainerRef\n\t);\n\tconst { changePage } = pagingProps;\n\n\t// Hide block pattern preview on unmount.\n\tuseEffect( () => () => onHover( null ), [] );\n\n\tconst onSetPatternSyncFilter = useCallback(\n\t\t( value ) => {\n\t\t\tsetPatternSyncFilter( value );\n\t\t\tchangePage( 1 );\n\t\t},\n\t\t[ setPatternSyncFilter, changePage ]\n\t);\n\tconst onSetPatternSourceFilter = useCallback(\n\t\t( value ) => {\n\t\t\tsetPatternSourceFilter( value );\n\t\t\tchangePage( 1 );\n\t\t},\n\t\t[ setPatternSourceFilter, changePage ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<VStack\n\t\t\t\tspacing={ 2 }\n\t\t\t\tclassName=\"block-editor-inserter__patterns-category-panel-header\"\n\t\t\t>\n\t\t\t\t<HStack>\n\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\tclassName=\"block-editor-inserter__patterns-category-panel-title\"\n\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\tlevel={ 4 }\n\t\t\t\t\t\t\tas=\"div\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ category.label }\n\t\t\t\t\t\t</Heading>\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t<PatternsFilter\n\t\t\t\t\t\tpatternSyncFilter={ patternSyncFilter }\n\t\t\t\t\t\tpatternSourceFilter={ patternSourceFilter }\n\t\t\t\t\t\tsetPatternSyncFilter={ onSetPatternSyncFilter }\n\t\t\t\t\t\tsetPatternSourceFilter={ onSetPatternSourceFilter }\n\t\t\t\t\t\tscrollContainerRef={ scrollContainerRef }\n\t\t\t\t\t\tcategory={ category }\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t\t{ ! currentCategoryPatterns.length && (\n\t\t\t\t\t<WCText\n\t\t\t\t\t\tvariant=\"muted\"\n\t\t\t\t\t\tclassName=\"block-editor-inserter__patterns-category-no-results\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'No results found' ) }\n\t\t\t\t\t</WCText>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t\t{ currentCategoryPatterns.length > 0 && (\n\t\t\t\t<>\n\t\t\t\t\t<WCText\n\t\t\t\t\t\tsize=\"12\"\n\t\t\t\t\t\tas=\"p\"\n\t\t\t\t\t\tclassName=\"block-editor-inserter__help-text\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Drag and drop patterns into the canvas.' ) }\n\t\t\t\t\t</WCText>\n\t\t\t\t\t<BlockPatternsList\n\t\t\t\t\t\tref={ scrollContainerRef }\n\t\t\t\t\t\tblockPatterns={ pagingProps.categoryPatterns }\n\t\t\t\t\t\tonClickPattern={ onClickPattern }\n\t\t\t\t\t\tonHover={ onHover }\n\t\t\t\t\t\tlabel={ category.label }\n\t\t\t\t\t\torientation=\"vertical\"\n\t\t\t\t\t\tcategory={ category.name }\n\t\t\t\t\t\tisDraggable\n\t\t\t\t\t\tshowTitlesAsTooltip={ showTitlesAsTooltip }\n\t\t\t\t\t\tpatternFilter={ patternSourceFilter }\n\t\t\t\t\t\tpagingProps={ pagingProps }\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],
   "mappings": "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",
   "names": []

package/build-module/components/inserter/block-patterns-tab/patterns-filter.mjs

@@ -1,4 +1,4 @@
-// packages/block-editor/src/components/inserter/block-patterns-tab/patterns-filter.js
+// packages/block-editor/src/components/inserter/block-patterns-tab/patterns-filter.jsx
 import {
   SVG,
   Path,

package/build-module/components/inserter/block-patterns-tab/patterns-filter.mjs.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../src/components/inserter/block-patterns-tab/patterns-filter.js"],
+  "sources": ["../../../../src/components/inserter/block-patterns-tab/patterns-filter.jsx"],
   "sourcesContent": ["import {\n\tSVG,\n\tPath,\n\tDropdownMenu,\n\tMenuGroup,\n\tMenuItemsChoice,\n\tExternalLink,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport { Icon } from '@wordpress/icons';\nimport { useMemo, createInterpolateElement } from '@wordpress/element';\nimport {\n\tmyPatternsCategory,\n\tINSERTER_SYNC_TYPES,\n\tINSERTER_PATTERN_TYPES,\n} from './utils';\n\nconst getShouldDisableSyncFilter = ( sourceFilter ) =>\n\tsourceFilter !== 'all' && sourceFilter !== 'user';\nconst getShouldHideSourcesFilter = ( category ) => {\n\treturn category.name === myPatternsCategory.name;\n};\n\nconst PATTERN_SOURCE_MENU_OPTIONS = [\n\t{\n\t\tvalue: 'all',\n\t\tlabel: _x( 'All', 'patterns' ),\n\t},\n\t{\n\t\tvalue: INSERTER_PATTERN_TYPES.directory,\n\t\tlabel: __( 'Pattern Directory' ),\n\t},\n\t{\n\t\tvalue: INSERTER_PATTERN_TYPES.theme,\n\t\tlabel: __( 'Theme & Plugins' ),\n\t},\n\t{\n\t\tvalue: INSERTER_PATTERN_TYPES.user,\n\t\tlabel: __( 'User' ),\n\t},\n];\n\nexport function PatternsFilter( {\n\tsetPatternSyncFilter,\n\tsetPatternSourceFilter,\n\tpatternSyncFilter,\n\tpatternSourceFilter,\n\tscrollContainerRef,\n\tcategory,\n} ) {\n\t// If the category is `myPatterns` then we need to set the source filter to `user`, but\n\t// we do this by deriving from props rather than calling setPatternSourceFilter otherwise\n\t// the user may be confused when switching to another category if the haven't explicitly set\n\t// this filter themselves.\n\tconst currentPatternSourceFilter =\n\t\tcategory.name === myPatternsCategory.name\n\t\t\t? INSERTER_PATTERN_TYPES.user\n\t\t\t: patternSourceFilter;\n\n\t// We need to disable the sync filter option if the source filter is not 'all' or 'user'\n\t// otherwise applying them will just result in no patterns being shown.\n\tconst shouldDisableSyncFilter = getShouldDisableSyncFilter(\n\t\tcurrentPatternSourceFilter\n\t);\n\n\t// We also hide the directory and theme source filter if the category is `myPatterns`\n\t// otherwise there will only be one option available.\n\tconst shouldHideSourcesFilter = getShouldHideSourcesFilter( category );\n\n\tconst patternSyncMenuOptions = useMemo(\n\t\t() => [\n\t\t\t{\n\t\t\t\tvalue: 'all',\n\t\t\t\tlabel: _x( 'All', 'patterns' ),\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: INSERTER_SYNC_TYPES.full,\n\t\t\t\tlabel: _x( 'Synced', 'patterns' ),\n\t\t\t\tdisabled: shouldDisableSyncFilter,\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: INSERTER_SYNC_TYPES.unsynced,\n\t\t\t\tlabel: _x( 'Not synced', 'patterns' ),\n\t\t\t\tdisabled: shouldDisableSyncFilter,\n\t\t\t},\n\t\t],\n\t\t[ shouldDisableSyncFilter ]\n\t);\n\n\tfunction handleSetSourceFilterChange( newSourceFilter ) {\n\t\tsetPatternSourceFilter( newSourceFilter );\n\t\tif ( getShouldDisableSyncFilter( newSourceFilter ) ) {\n\t\t\tsetPatternSyncFilter( 'all' );\n\t\t}\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<DropdownMenu\n\t\t\t\tpopoverProps={ {\n\t\t\t\t\tplacement: 'right-end',\n\t\t\t\t} }\n\t\t\t\tlabel={ __( 'Filter patterns' ) }\n\t\t\t\ttoggleProps={ { size: 'compact' } }\n\t\t\t\ticon={\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t<SVG\n\t\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Path\n\t\t\t\t\t\t\t\t\td=\"M10 17.5H14V16H10V17.5ZM6 6V7.5H18V6H6ZM8 12.5H16V11H8V12.5Z\"\n\t\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</SVG>\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\t\t{ () => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ ! shouldHideSourcesFilter && (\n\t\t\t\t\t\t\t<MenuGroup label={ __( 'Source' ) }>\n\t\t\t\t\t\t\t\t<MenuItemsChoice\n\t\t\t\t\t\t\t\t\tchoices={ PATTERN_SOURCE_MENU_OPTIONS }\n\t\t\t\t\t\t\t\t\tonSelect={ ( value ) => {\n\t\t\t\t\t\t\t\t\t\thandleSetSourceFilterChange( value );\n\t\t\t\t\t\t\t\t\t\tscrollContainerRef.current?.scrollTo(\n\t\t\t\t\t\t\t\t\t\t\t0,\n\t\t\t\t\t\t\t\t\t\t\t0\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tvalue={ currentPatternSourceFilter }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<MenuGroup label={ __( 'Type' ) }>\n\t\t\t\t\t\t\t<MenuItemsChoice\n\t\t\t\t\t\t\t\tchoices={ patternSyncMenuOptions }\n\t\t\t\t\t\t\t\tonSelect={ ( value ) => {\n\t\t\t\t\t\t\t\t\tsetPatternSyncFilter( value );\n\t\t\t\t\t\t\t\t\tscrollContainerRef.current?.scrollTo(\n\t\t\t\t\t\t\t\t\t\t0,\n\t\t\t\t\t\t\t\t\t\t0\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\tvalue={ patternSyncFilter }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t<div className=\"block-editor-inserter__patterns-filter-help\">\n\t\t\t\t\t\t\t{ createInterpolateElement(\n\t\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t\t'Patterns are available from the <Link>WordPress.org Pattern Directory</Link>, bundled in the active theme, or created by users on this site. Only patterns created on this site can be synced.'\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tLink: (\n\t\t\t\t\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t'https://wordpress.org/patterns/'\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t/>\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</div>\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</DropdownMenu>\n\t\t</>\n\t);\n}\n"],
   "mappings": "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",
   "names": []

package/build-module/components/inserter/block-types-tab.mjs

@@ -1,4 +1,4 @@
-// packages/block-editor/src/components/inserter/block-types-tab.js
+// packages/block-editor/src/components/inserter/block-types-tab.jsx
 import { __, _x } from "@wordpress/i18n";
 import { useMemo, useEffect, forwardRef } from "@wordpress/element";
 import { useAsyncList } from "@wordpress/compose";

package/build-module/components/inserter/block-types-tab.mjs.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../src/components/inserter/block-types-tab.js"],
+  "sources": ["../../../src/components/inserter/block-types-tab.jsx"],
   "sourcesContent": ["import { __, _x } from '@wordpress/i18n';\nimport { useMemo, useEffect, forwardRef } from '@wordpress/element';\nimport { useAsyncList } from '@wordpress/compose';\nimport BlockTypesList from '../block-types-list';\nimport InserterPanel from './panel';\nimport useBlockTypesState from './hooks/use-block-types-state';\nimport InserterListbox from '../inserter-listbox';\nimport { orderBy } from '../../utils/sorting';\nimport InserterNoResults from './no-results';\n\nconst getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ];\n\nconst MAX_SUGGESTED_ITEMS = 6;\n\n/**\n * Shared reference to an empty array for cases where it is important to avoid\n * returning a new array reference on every invocation and rerendering the component.\n *\n * @type {Array}\n */\nconst EMPTY_ARRAY = [];\n\nexport function BlockTypesTabPanel( {\n\titems,\n\tcollections,\n\tcategories,\n\tonSelectItem,\n\tonHover,\n\tshowMostUsedBlocks,\n\tclassName,\n} ) {\n\tconst suggestedItems = useMemo( () => {\n\t\treturn orderBy( items, 'frecency', 'desc' ).slice(\n\t\t\t0,\n\t\t\tMAX_SUGGESTED_ITEMS\n\t\t);\n\t}, [ items ] );\n\n\tconst uncategorizedItems = useMemo( () => {\n\t\treturn items.filter( ( item ) => ! item.category );\n\t}, [ items ] );\n\n\tconst itemsPerCollection = useMemo( () => {\n\t\t// Create a new Object to avoid mutating collection.\n\t\tconst result = { ...collections };\n\t\tObject.keys( collections ).forEach( ( namespace ) => {\n\t\t\tresult[ namespace ] = items.filter(\n\t\t\t\t( item ) => getBlockNamespace( item ) === namespace\n\t\t\t);\n\t\t\tif ( result[ namespace ].length === 0 ) {\n\t\t\t\tdelete result[ namespace ];\n\t\t\t}\n\t\t} );\n\n\t\treturn result;\n\t}, [ items, collections ] );\n\n\t// Hide block preview on unmount.\n\tuseEffect( () => () => onHover( null ), [] );\n\n\t/**\n\t * The inserter contains a big number of blocks and opening it is a costful operation.\n\t * The rendering is the most costful part of it, in order to improve the responsiveness\n\t * of the \"opening\" action, these lazy lists allow us to render the inserter category per category,\n\t * once all the categories are rendered, we start rendering the collections and the uncategorized block types.\n\t */\n\tconst currentlyRenderedCategories = useAsyncList( categories );\n\tconst didRenderAllCategories =\n\t\tcategories.length === currentlyRenderedCategories.length;\n\n\t// Async List requires an array.\n\tconst collectionEntries = useMemo( () => {\n\t\treturn Object.entries( collections );\n\t}, [ collections ] );\n\tconst currentlyRenderedCollections = useAsyncList(\n\t\tdidRenderAllCategories ? collectionEntries : EMPTY_ARRAY\n\t);\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t{ showMostUsedBlocks &&\n\t\t\t\t// Only show the most used blocks if the total amount of block\n\t\t\t\t// is larger than 1 row, otherwise it is not so useful.\n\t\t\t\titems.length > 3 &&\n\t\t\t\t!! suggestedItems.length && (\n\t\t\t\t\t<InserterPanel title={ _x( 'Most used', 'blocks' ) }>\n\t\t\t\t\t\t<BlockTypesList\n\t\t\t\t\t\t\titems={ suggestedItems }\n\t\t\t\t\t\t\tonSelect={ onSelectItem }\n\t\t\t\t\t\t\tonHover={ onHover }\n\t\t\t\t\t\t\tlabel={ _x( 'Most used', 'blocks' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</InserterPanel>\n\t\t\t\t) }\n\n\t\t\t{ currentlyRenderedCategories.map( ( category ) => {\n\t\t\t\tconst categoryItems = items.filter(\n\t\t\t\t\t( item ) => item.category === category.slug\n\t\t\t\t);\n\t\t\t\tif ( ! categoryItems || ! categoryItems.length ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t\treturn (\n\t\t\t\t\t<InserterPanel\n\t\t\t\t\t\tkey={ category.slug }\n\t\t\t\t\t\ttitle={ category.title }\n\t\t\t\t\t\ticon={ category.icon }\n\t\t\t\t\t>\n\t\t\t\t\t\t<BlockTypesList\n\t\t\t\t\t\t\titems={ categoryItems }\n\t\t\t\t\t\t\tonSelect={ onSelectItem }\n\t\t\t\t\t\t\tonHover={ onHover }\n\t\t\t\t\t\t\tlabel={ category.title }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</InserterPanel>\n\t\t\t\t);\n\t\t\t} ) }\n\n\t\t\t{ didRenderAllCategories && uncategorizedItems.length > 0 && (\n\t\t\t\t<InserterPanel\n\t\t\t\t\tclassName=\"block-editor-inserter__uncategorized-blocks-panel\"\n\t\t\t\t\ttitle={ __( 'Uncategorized' ) }\n\t\t\t\t>\n\t\t\t\t\t<BlockTypesList\n\t\t\t\t\t\titems={ uncategorizedItems }\n\t\t\t\t\t\tonSelect={ onSelectItem }\n\t\t\t\t\t\tonHover={ onHover }\n\t\t\t\t\t\tlabel={ __( 'Uncategorized' ) }\n\t\t\t\t\t/>\n\t\t\t\t</InserterPanel>\n\t\t\t) }\n\n\t\t\t{ currentlyRenderedCollections.map(\n\t\t\t\t( [ namespace, collection ] ) => {\n\t\t\t\t\tconst collectionItems = itemsPerCollection[ namespace ];\n\t\t\t\t\tif ( ! collectionItems || ! collectionItems.length ) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<InserterPanel\n\t\t\t\t\t\t\tkey={ namespace }\n\t\t\t\t\t\t\ttitle={ collection.title }\n\t\t\t\t\t\t\ticon={ collection.icon }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<BlockTypesList\n\t\t\t\t\t\t\t\titems={ collectionItems }\n\t\t\t\t\t\t\t\tonSelect={ onSelectItem }\n\t\t\t\t\t\t\t\tonHover={ onHover }\n\t\t\t\t\t\t\t\tlabel={ collection.title }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</InserterPanel>\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport function BlockTypesTab(\n\t{ rootClientId, onInsert, onHover, showMostUsedBlocks },\n\tref\n) {\n\tconst [ items, categories, collections, onSelectItem ] = useBlockTypesState(\n\t\trootClientId,\n\t\tonInsert\n\t);\n\n\tif ( ! items.length ) {\n\t\treturn <InserterNoResults />;\n\t}\n\n\tconst itemsForCurrentRoot = [];\n\tconst itemsRemaining = [];\n\n\tfor ( const item of items ) {\n\t\t// Skip reusable blocks, they moved to the patterns tab.\n\t\tif ( item.category === 'reusable' ) {\n\t\t\tcontinue;\n\t\t}\n\n\t\t// Skip search-only items from browse view (they're still searchable).\n\t\tif ( item.isSearchOnly ) {\n\t\t\tcontinue;\n\t\t}\n\n\t\tif ( item.isAllowedInCurrentRoot ) {\n\t\t\titemsForCurrentRoot.push( item );\n\t\t} else {\n\t\t\titemsRemaining.push( item );\n\t\t}\n\t}\n\n\treturn (\n\t\t<InserterListbox>\n\t\t\t<div ref={ ref }>\n\t\t\t\t{ !! itemsForCurrentRoot.length && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<BlockTypesTabPanel\n\t\t\t\t\t\t\titems={ itemsForCurrentRoot }\n\t\t\t\t\t\t\tcategories={ categories }\n\t\t\t\t\t\t\tcollections={ collections }\n\t\t\t\t\t\t\tonSelectItem={ onSelectItem }\n\t\t\t\t\t\t\tonHover={ onHover }\n\t\t\t\t\t\t\tshowMostUsedBlocks={ showMostUsedBlocks }\n\t\t\t\t\t\t\tclassName=\"block-editor-inserter__insertable-blocks-at-selection\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t\t<BlockTypesTabPanel\n\t\t\t\t\titems={ itemsRemaining }\n\t\t\t\t\tcategories={ categories }\n\t\t\t\t\tcollections={ collections }\n\t\t\t\t\tonSelectItem={ onSelectItem }\n\t\t\t\t\tonHover={ onHover }\n\t\t\t\t\tshowMostUsedBlocks={ showMostUsedBlocks }\n\t\t\t\t\tclassName=\"block-editor-inserter__all-blocks\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</InserterListbox>\n\t);\n}\n\nexport default forwardRef( BlockTypesTab );\n"],
   "mappings": "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",
   "names": []

package/build-module/components/inserter/category-tabs/index.mjs

@@ -1,4 +1,4 @@
-// packages/block-editor/src/components/inserter/category-tabs/index.js
+// packages/block-editor/src/components/inserter/category-tabs/index.jsx
 import { usePrevious, useReducedMotion } from "@wordpress/compose";
 import {
   privateApis as componentsPrivateApis,

package/build-module/components/inserter/category-tabs/index.mjs.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../src/components/inserter/category-tabs/index.js"],
+  "sources": ["../../../../src/components/inserter/category-tabs/index.jsx"],
   "sourcesContent": ["import { usePrevious, useReducedMotion } from '@wordpress/compose';\nimport {\n\tprivateApis as componentsPrivateApis,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { unlock } from '../../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\nfunction CategoryTabs( {\n\tcategories,\n\tselectedCategory,\n\tonSelectCategory,\n\tchildren,\n} ) {\n\t// Copied from InterfaceSkeleton.\n\tconst ANIMATION_DURATION = 0.25;\n\tconst disableMotion = useReducedMotion();\n\tconst defaultTransition = {\n\t\ttype: 'tween',\n\t\tduration: disableMotion ? 0 : ANIMATION_DURATION,\n\t\tease: [ 0.6, 0, 0.4, 1 ],\n\t};\n\n\tconst previousSelectedCategory = usePrevious( selectedCategory );\n\n\tconst selectedTabId = selectedCategory ? selectedCategory.name : null;\n\tconst [ activeTabId, setActiveId ] = useState();\n\tconst firstTabId = categories?.[ 0 ]?.name;\n\n\t// If there is no active tab, make the first tab the active tab, so that\n\t// when focus is moved to the tablist, the first tab will be focused\n\t// despite not being selected\n\tif ( selectedTabId === null && ! activeTabId && firstTabId ) {\n\t\tsetActiveId( firstTabId );\n\t}\n\n\treturn (\n\t\t<Tabs\n\t\t\tselectOnMove={ false }\n\t\t\tselectedTabId={ selectedTabId }\n\t\t\torientation=\"vertical\"\n\t\t\tonSelect={ ( categoryId ) => {\n\t\t\t\t// Pass the full category object\n\t\t\t\tonSelectCategory(\n\t\t\t\t\tcategories.find(\n\t\t\t\t\t\t( category ) => category.name === categoryId\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} }\n\t\t\tactiveTabId={ activeTabId }\n\t\t\tonActiveTabIdChange={ setActiveId }\n\t\t>\n\t\t\t<Tabs.TabList className=\"block-editor-inserter__category-tablist\">\n\t\t\t\t{ categories.map( ( category ) => (\n\t\t\t\t\t<Tabs.Tab\n\t\t\t\t\t\tkey={ category.name }\n\t\t\t\t\t\ttabId={ category.name }\n\t\t\t\t\t\taria-current={\n\t\t\t\t\t\t\tcategory === selectedCategory ? 'true' : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ category.label }\n\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t) ) }\n\t\t\t</Tabs.TabList>\n\t\t\t{ categories.map( ( category ) => (\n\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\tkey={ category.name }\n\t\t\t\t\ttabId={ category.name }\n\t\t\t\t\tfocusable={ false }\n\t\t\t\t>\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tclassName=\"block-editor-inserter__category-panel\"\n\t\t\t\t\t\tinitial={\n\t\t\t\t\t\t\t! previousSelectedCategory ? 'closed' : 'open'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tanimate=\"open\"\n\t\t\t\t\t\tvariants={ {\n\t\t\t\t\t\t\topen: {\n\t\t\t\t\t\t\t\ttransform: 'translateX( 0 )',\n\t\t\t\t\t\t\t\ttransitionEnd: {\n\t\t\t\t\t\t\t\t\tzIndex: '1',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tclosed: {\n\t\t\t\t\t\t\t\ttransform: 'translateX( -100% )',\n\t\t\t\t\t\t\t\tzIndex: '-1',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t} }\n\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</motion.div>\n\t\t\t\t</Tabs.TabPanel>\n\t\t\t) ) }\n\t\t</Tabs>\n\t);\n}\n\nexport default CategoryTabs;\n"],
   "mappings": ";AAAA,SAAS,aAAa,wBAAwB;AAC9C;AAAA,EACC,eAAe;AAAA,EACf,oBAAoB;AAAA,OACd;AACP,SAAS,gBAAgB;AACzB,SAAS,cAAc;AAiCrB,SAiBG,KAjBH;AA/BF,IAAM,EAAE,KAAK,IAAI,OAAQ,qBAAsB;AAE/C,SAAS,aAAc;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AAEH,QAAM,qBAAqB;AAC3B,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,oBAAoB;AAAA,IACzB,MAAM;AAAA,IACN,UAAU,gBAAgB,IAAI;AAAA,IAC9B,MAAM,CAAE,KAAK,GAAG,KAAK,CAAE;AAAA,EACxB;AAEA,QAAM,2BAA2B,YAAa,gBAAiB;AAE/D,QAAM,gBAAgB,mBAAmB,iBAAiB,OAAO;AACjE,QAAM,CAAE,aAAa,WAAY,IAAI,SAAS;AAC9C,QAAM,aAAa,aAAc,CAAE,GAAG;AAKtC,MAAK,kBAAkB,QAAQ,CAAE,eAAe,YAAa;AAC5D,gBAAa,UAAW;AAAA,EACzB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,cAAe;AAAA,MACf;AAAA,MACA,aAAY;AAAA,MACZ,UAAW,CAAE,eAAgB;AAE5B;AAAA,UACC,WAAW;AAAA,YACV,CAAE,aAAc,SAAS,SAAS;AAAA,UACnC;AAAA,QACD;AAAA,MACD;AAAA,MACA;AAAA,MACA,qBAAsB;AAAA,MAEtB;AAAA,4BAAC,KAAK,SAAL,EAAa,WAAU,2CACrB,qBAAW,IAAK,CAAE,aACnB;AAAA,UAAC,KAAK;AAAA,UAAL;AAAA,YAEA,OAAQ,SAAS;AAAA,YACjB,gBACC,aAAa,mBAAmB,SAAS;AAAA,YAGxC,mBAAS;AAAA;AAAA,UANL,SAAS;AAAA,QAOhB,CACC,GACH;AAAA,QACE,WAAW,IAAK,CAAE,aACnB;AAAA,UAAC,KAAK;AAAA,UAAL;AAAA,YAEA,OAAQ,SAAS;AAAA,YACjB,WAAY;AAAA,YAEZ;AAAA,cAAC,OAAO;AAAA,cAAP;AAAA,gBACA,WAAU;AAAA,gBACV,SACC,CAAE,2BAA2B,WAAW;AAAA,gBAEzC,SAAQ;AAAA,gBACR,UAAW;AAAA,kBACV,MAAM;AAAA,oBACL,WAAW;AAAA,oBACX,eAAe;AAAA,sBACd,QAAQ;AAAA,oBACT;AAAA,kBACD;AAAA,kBACA,QAAQ;AAAA,oBACP,WAAW;AAAA,oBACX,QAAQ;AAAA,kBACT;AAAA,gBACD;AAAA,gBACA,YAAa;AAAA,gBAEX;AAAA;AAAA,YACH;AAAA;AAAA,UAzBM,SAAS;AAAA,QA0BhB,CACC;AAAA;AAAA;AAAA,EACH;AAEF;AAEA,IAAO,wBAAQ;",
   "names": []

package/build-module/components/inserter/hooks/use-insertion-point.mjs

@@ -39,7 +39,7 @@ function useInsertionPoint({
   const {
     getSelectedBlock,
     getClosestAllowedInsertionPoint,
-    isBlockInsertionPointVisible
+    getBlockInsertionPoint
   } = unlock(useSelect(blockEditorStore));
   const { destinationRootClientId, destinationIndex } = useSelect(
     (select) => {
@@ -141,7 +141,7 @@ function useInsertionPoint({
   );
   const onToggleInsertionPoint = useCallback(
     (item) => {
-      if (item && !isBlockInsertionPointVisible()) {
+      if (item) {
         const allowedDestinationRootClientId = getClosestAllowedInsertionPoint(
           item.name,
           destinationRootClientId
@@ -157,13 +157,13 @@ function useInsertionPoint({
             })
           );
         }
-      } else {
+      } else if (!getBlockInsertionPoint()?.__unstableWithInserter) {
         hideInsertionPoint();
       }
     },
     [
       getClosestAllowedInsertionPoint,
-      isBlockInsertionPointVisible,
+      getBlockInsertionPoint,
       showInsertionPoint,
       hideInsertionPoint,
       destinationRootClientId,