@wordpress/block-editor 12.13.0 → 12.15.0

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

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PatternCategoryPreviews = PatternCategoryPreviews;
+var _react = require("react");
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+var _components = require("@wordpress/components");
+var _usePatternsState = _interopRequireDefault(require("../hooks/use-patterns-state"));
+var _blockPatternsList = _interopRequireDefault(require("../../block-patterns-list"));
+var _usePatternsPaging = _interopRequireDefault(require("../hooks/use-patterns-paging"));
+var _patternsFilter = require("./patterns-filter");
+var _usePatternCategories = require("./use-pattern-categories");
+var _utils = require("./utils");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const noop = () => {};
+function PatternCategoryPreviews({
+  rootClientId,
+  onInsert,
+  onHover = noop,
+  category,
+  showTitlesAsTooltip
+}) {
+  const [allPatterns,, onClickPattern] = (0, _usePatternsState.default)(onInsert, rootClientId);
+  const [patternSyncFilter, setPatternSyncFilter] = (0, _element.useState)('all');
+  const [patternSourceFilter, setPatternSourceFilter] = (0, _element.useState)('all');
+  const availableCategories = (0, _usePatternCategories.usePatternCategories)(rootClientId, patternSourceFilter);
+  const scrollContainerRef = (0, _element.useRef)();
+  const currentCategoryPatterns = (0, _element.useMemo)(() => allPatterns.filter(pattern => {
+    var _pattern$categories$f;
+    if ((0, _utils.isPatternFiltered)(pattern, patternSourceFilter, patternSyncFilter)) {
+      return false;
+    }
+    if (category.name === _utils.allPatternsCategory.name) {
+      return true;
+    }
+    if (category.name === _utils.myPatternsCategory.name && pattern.type === _utils.PATTERN_TYPES.user) {
+      return true;
+    }
+    if (category.name !== 'uncategorized') {
+      return pattern.categories?.includes(category.name);
+    }
+
+    // The uncategorized category should show all the patterns without any category
+    // or with no available category.
+    const availablePatternCategories = (_pattern$categories$f = pattern.categories?.filter(cat => availableCategories.find(availableCategory => availableCategory.name === cat))) !== null && _pattern$categories$f !== void 0 ? _pattern$categories$f : [];
+    return availablePatternCategories.length === 0;
+  }), [allPatterns, availableCategories, category.name, patternSourceFilter, patternSyncFilter]);
+  const pagingProps = (0, _usePatternsPaging.default)(currentCategoryPatterns, category, scrollContainerRef);
+  const {
+    changePage
+  } = pagingProps;
+
+  // Hide block pattern preview on unmount.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  (0, _element.useEffect)(() => () => onHover(null), []);
+  const onSetPatternSyncFilter = (0, _element.useCallback)(value => {
+    setPatternSyncFilter(value);
+    changePage(1);
+  }, [setPatternSyncFilter, changePage]);
+  const onSetPatternSourceFilter = (0, _element.useCallback)(value => {
+    setPatternSourceFilter(value);
+    changePage(1);
+  }, [setPatternSourceFilter, changePage]);
+  return (0, _react.createElement)("div", {
+    className: "block-editor-inserter__patterns-category-panel"
+  }, (0, _react.createElement)(_components.__experimentalVStack, {
+    spacing: 2,
+    className: "block-editor-inserter__patterns-category-panel-header"
+  }, (0, _react.createElement)(_components.__experimentalHStack, null, (0, _react.createElement)(_components.FlexBlock, null, (0, _react.createElement)(_components.__experimentalHeading, {
+    level: 4,
+    as: "div"
+  }, category.label)), (0, _react.createElement)(_patternsFilter.PatternsFilter, {
+    patternSyncFilter: patternSyncFilter,
+    patternSourceFilter: patternSourceFilter,
+    setPatternSyncFilter: onSetPatternSyncFilter,
+    setPatternSourceFilter: onSetPatternSourceFilter,
+    scrollContainerRef: scrollContainerRef,
+    category: category
+  })), !currentCategoryPatterns.length && (0, _react.createElement)(_components.__experimentalText, {
+    variant: "muted",
+    className: "block-editor-inserter__patterns-category-no-results"
+  }, (0, _i18n.__)('No results found'))), currentCategoryPatterns.length > 0 && (0, _react.createElement)(_blockPatternsList.default, {
+    ref: scrollContainerRef,
+    shownPatterns: pagingProps.categoryPatternsAsyncList,
+    blockPatterns: pagingProps.categoryPatterns,
+    onClickPattern: onClickPattern,
+    onHover: onHover,
+    label: category.label,
+    orientation: "vertical",
+    category: category.name,
+    isDraggable: true,
+    showTitlesAsTooltip: showTitlesAsTooltip,
+    patternFilter: patternSourceFilter,
+    pagingProps: pagingProps
+  }));
+}
+//# sourceMappingURL=pattern-category-previews.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_i18n","_components","_usePatternsState","_interopRequireDefault","_blockPatternsList","_usePatternsPaging","_patternsFilter","_usePatternCategories","_utils","noop","PatternCategoryPreviews","rootClientId","onInsert","onHover","category","showTitlesAsTooltip","allPatterns","onClickPattern","usePatternsState","patternSyncFilter","setPatternSyncFilter","useState","patternSourceFilter","setPatternSourceFilter","availableCategories","usePatternCategories","scrollContainerRef","useRef","currentCategoryPatterns","useMemo","filter","pattern","_pattern$categories$f","isPatternFiltered","name","allPatternsCategory","myPatternsCategory","type","PATTERN_TYPES","user","categories","includes","availablePatternCategories","cat","find","availableCategory","length","pagingProps","usePatternsPaging","changePage","useEffect","onSetPatternSyncFilter","useCallback","value","onSetPatternSourceFilter","_react","createElement","className","__experimentalVStack","spacing","__experimentalHStack","FlexBlock","__experimentalHeading","level","as","label","PatternsFilter","__experimentalText","variant","__","default","ref","shownPatterns","categoryPatternsAsyncList","blockPatterns","categoryPatterns","orientation","isDraggable","patternFilter"],"sources":["@wordpress/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tuseMemo,\n\tuseState,\n\tuseCallback,\n\tuseRef,\n\tuseEffect,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalHeading as Heading,\n\t__experimentalText as Text,\n\tFlexBlock,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\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\tPATTERN_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);\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\t\t\t\tif (\n\t\t\t\t\tcategory.name === myPatternsCategory.name &&\n\t\t\t\t\tpattern.type === PATTERN_TYPES.user\n\t\t\t\t) {\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\t\t\t\tif ( category.name !== 'uncategorized' ) {\n\t\t\t\t\treturn pattern.categories?.includes( category.name );\n\t\t\t\t}\n\n\t\t\t\t// The uncategorized category should show all the patterns without any category\n\t\t\t\t// or with no available category.\n\t\t\t\tconst availablePatternCategories =\n\t\t\t\t\tpattern.categories?.filter( ( cat ) =>\n\t\t\t\t\t\tavailableCategories.find(\n\t\t\t\t\t\t\t( availableCategory ) =>\n\t\t\t\t\t\t\t\tavailableCategory.name === cat\n\t\t\t\t\t\t)\n\t\t\t\t\t) ?? [];\n\n\t\t\t\treturn availablePatternCategories.length === 0;\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\t// eslint-disable-next-line react-hooks/exhaustive-deps\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<div className=\"block-editor-inserter__patterns-category-panel\">\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 level={ 4 } as=\"div\">\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<Text\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</Text>\n\t\t\t\t) }\n\t\t\t</VStack>\n\n\t\t\t{ currentCategoryPatterns.length > 0 && (\n\t\t\t\t<BlockPatternsList\n\t\t\t\t\tref={ scrollContainerRef }\n\t\t\t\t\tshownPatterns={ pagingProps.categoryPatternsAsyncList }\n\t\t\t\t\tblockPatterns={ pagingProps.categoryPatterns }\n\t\t\t\t\tonClickPattern={ onClickPattern }\n\t\t\t\t\tonHover={ onHover }\n\t\t\t\t\tlabel={ category.label }\n\t\t\t\t\torientation=\"vertical\"\n\t\t\t\t\tcategory={ category.name }\n\t\t\t\t\tisDraggable\n\t\t\t\t\tshowTitlesAsTooltip={ showTitlesAsTooltip }\n\t\t\t\t\tpatternFilter={ patternSourceFilter }\n\t\t\t\t\tpagingProps={ pagingProps }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}

package/build/components/inserter/{block-patterns-filter.js → block-patterns-tab/patterns-filter.js}

@@ -3,14 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BlockPatternsSyncFilter = BlockPatternsSyncFilter;
-exports.SYNC_TYPES = exports.PATTERN_TYPES = void 0;
+exports.PatternsFilter = PatternsFilter;
 var _react = require("react");
 var _components = require("@wordpress/components");
 var _i18n = require("@wordpress/i18n");
 var _icons = require("@wordpress/icons");
 var _element = require("@wordpress/element");
-var _blockPatternsTab = require("./block-patterns-tab");
+var _utils = require("./utils");
 /**
  * WordPress dependencies
  */
@@ -19,26 +18,11 @@ var _blockPatternsTab = require("./block-patterns-tab");
  * Internal dependencies
  */
 
-const PATTERN_TYPES = {
-  all: 'all',
-  synced: 'synced',
-  unsynced: 'unsynced',
-  user: 'user',
-  theme: 'theme',
-  directory: 'directory'
-};
-exports.PATTERN_TYPES = PATTERN_TYPES;
-const SYNC_TYPES = {
-  all: 'all',
-  full: 'fully',
-  unsynced: 'unsynced'
-};
-exports.SYNC_TYPES = SYNC_TYPES;
-const getShouldDisableSyncFilter = sourceFilter => sourceFilter !== PATTERN_TYPES.all && sourceFilter !== PATTERN_TYPES.user;
+const getShouldDisableSyncFilter = sourceFilter => sourceFilter !== _utils.PATTERN_TYPES.all && sourceFilter !== _utils.PATTERN_TYPES.user;
 const getShouldDisableNonUserSources = category => {
-  return category.name === _blockPatternsTab.myPatternsCategory.name;
+  return category.name === _utils.myPatternsCategory.name;
 };
-function BlockPatternsSyncFilter({
+function PatternsFilter({
   setPatternSyncFilter,
   setPatternSourceFilter,
   patternSyncFilter,
@@ -50,7 +34,7 @@ function BlockPatternsSyncFilter({
   // we do this by deriving from props rather than calling setPatternSourceFilter otherwise
   // the user may be confused when switching to another category if the haven't explicity set
   // this filter themselves.
-  const currentPatternSourceFilter = category.name === _blockPatternsTab.myPatternsCategory.name ? PATTERN_TYPES.user : patternSourceFilter;
+  const currentPatternSourceFilter = category.name === _utils.myPatternsCategory.name ? _utils.PATTERN_TYPES.user : patternSourceFilter;
 
   // We need to disable the sync filter option if the source filter is not 'all' or 'user'
   // otherwise applying them will just result in no patterns being shown.
@@ -60,37 +44,37 @@ function BlockPatternsSyncFilter({
   // is `myPatterns` otherwise applying them will also just result in no patterns being shown.
   const shouldDisableNonUserSources = getShouldDisableNonUserSources(category);
   const patternSyncMenuOptions = (0, _element.useMemo)(() => [{
-    value: SYNC_TYPES.all,
-    label: (0, _i18n.__)('All')
+    value: _utils.SYNC_TYPES.all,
+    label: (0, _i18n._x)('All', 'Option that shows all patterns')
   }, {
-    value: SYNC_TYPES.full,
-    label: (0, _i18n.__)('Synced'),
+    value: _utils.SYNC_TYPES.full,
+    label: (0, _i18n._x)('Synced', 'Option that shows all synchronized patterns'),
     disabled: shouldDisableSyncFilter
   }, {
-    value: SYNC_TYPES.unsynced,
-    label: (0, _i18n.__)('Not synced'),
+    value: _utils.SYNC_TYPES.unsynced,
+    label: (0, _i18n._x)('Not synced', 'Option that shows all patterns that are not synchronized'),
     disabled: shouldDisableSyncFilter
   }], [shouldDisableSyncFilter]);
   const patternSourceMenuOptions = (0, _element.useMemo)(() => [{
-    value: PATTERN_TYPES.all,
+    value: _utils.PATTERN_TYPES.all,
     label: (0, _i18n.__)('All'),
     disabled: shouldDisableNonUserSources
   }, {
-    value: PATTERN_TYPES.directory,
+    value: _utils.PATTERN_TYPES.directory,
     label: (0, _i18n.__)('Pattern Directory'),
     disabled: shouldDisableNonUserSources
   }, {
-    value: PATTERN_TYPES.theme,
+    value: _utils.PATTERN_TYPES.theme,
     label: (0, _i18n.__)('Theme & Plugins'),
     disabled: shouldDisableNonUserSources
   }, {
-    value: PATTERN_TYPES.user,
+    value: _utils.PATTERN_TYPES.user,
     label: (0, _i18n.__)('User')
   }], [shouldDisableNonUserSources]);
   function handleSetSourceFilterChange(newSourceFilter) {
     setPatternSourceFilter(newSourceFilter);
     if (getShouldDisableSyncFilter(newSourceFilter)) {
-      setPatternSyncFilter(SYNC_TYPES.all);
+      setPatternSyncFilter(_utils.SYNC_TYPES.all);
     }
   }
   return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_components.DropdownMenu, {
@@ -136,4 +120,4 @@ function BlockPatternsSyncFilter({
     })
   })))));
 }
-//# sourceMappingURL=block-patterns-filter.js.map
+//# sourceMappingURL=patterns-filter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_components","require","_i18n","_icons","_element","_utils","getShouldDisableSyncFilter","sourceFilter","PATTERN_TYPES","all","user","getShouldDisableNonUserSources","category","name","myPatternsCategory","PatternsFilter","setPatternSyncFilter","setPatternSourceFilter","patternSyncFilter","patternSourceFilter","scrollContainerRef","currentPatternSourceFilter","shouldDisableSyncFilter","shouldDisableNonUserSources","patternSyncMenuOptions","useMemo","value","SYNC_TYPES","label","_x","full","disabled","unsynced","patternSourceMenuOptions","__","directory","theme","handleSetSourceFilterChange","newSourceFilter","_react","createElement","Fragment","DropdownMenu","popoverProps","placement","icon","Icon","SVG","width","height","viewBox","fill","xmlns","Path","d","MenuGroup","MenuItemsChoice","choices","onSelect","current","scrollTo","className","createInterpolateElement","Link","ExternalLink","href"],"sources":["@wordpress/block-editor/src/components/inserter/block-patterns-tab/patterns-filter.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\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';\n\n/**\n * Internal dependencies\n */\nimport { myPatternsCategory, SYNC_TYPES, PATTERN_TYPES } from './utils';\n\nconst getShouldDisableSyncFilter = ( sourceFilter ) =>\n\tsourceFilter !== PATTERN_TYPES.all && sourceFilter !== PATTERN_TYPES.user;\n\nconst getShouldDisableNonUserSources = ( category ) => {\n\treturn category.name === myPatternsCategory.name;\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 explicity set\n\t// this filter themselves.\n\tconst currentPatternSourceFilter =\n\t\tcategory.name === myPatternsCategory.name\n\t\t\t? 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 need to disable the directory and theme source filter options if the category\n\t// is `myPatterns` otherwise applying them will also just result in no patterns being shown.\n\tconst shouldDisableNonUserSources =\n\t\tgetShouldDisableNonUserSources( category );\n\n\tconst patternSyncMenuOptions = useMemo(\n\t\t() => [\n\t\t\t{\n\t\t\t\tvalue: SYNC_TYPES.all,\n\t\t\t\tlabel: _x( 'All', 'Option that shows all patterns' ),\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: SYNC_TYPES.full,\n\t\t\t\tlabel: _x(\n\t\t\t\t\t'Synced',\n\t\t\t\t\t'Option that shows all synchronized patterns'\n\t\t\t\t),\n\t\t\t\tdisabled: shouldDisableSyncFilter,\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: SYNC_TYPES.unsynced,\n\t\t\t\tlabel: _x(\n\t\t\t\t\t'Not synced',\n\t\t\t\t\t'Option that shows all patterns that are not synchronized'\n\t\t\t\t),\n\t\t\t\tdisabled: shouldDisableSyncFilter,\n\t\t\t},\n\t\t],\n\t\t[ shouldDisableSyncFilter ]\n\t);\n\n\tconst patternSourceMenuOptions = useMemo(\n\t\t() => [\n\t\t\t{\n\t\t\t\tvalue: PATTERN_TYPES.all,\n\t\t\t\tlabel: __( 'All' ),\n\t\t\t\tdisabled: shouldDisableNonUserSources,\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: PATTERN_TYPES.directory,\n\t\t\t\tlabel: __( 'Pattern Directory' ),\n\t\t\t\tdisabled: shouldDisableNonUserSources,\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: PATTERN_TYPES.theme,\n\t\t\t\tlabel: __( 'Theme & Plugins' ),\n\t\t\t\tdisabled: shouldDisableNonUserSources,\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: PATTERN_TYPES.user,\n\t\t\t\tlabel: __( 'User' ),\n\t\t\t},\n\t\t],\n\t\t[ shouldDisableNonUserSources ]\n\t);\n\n\tfunction handleSetSourceFilterChange( newSourceFilter ) {\n\t\tsetPatternSourceFilter( newSourceFilter );\n\t\tif ( getShouldDisableSyncFilter( newSourceFilter ) ) {\n\t\t\tsetPatternSyncFilter( SYNC_TYPES.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\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=\"#1E1E1E\"\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<MenuGroup label={ __( 'Source' ) }>\n\t\t\t\t\t\t\t<MenuItemsChoice\n\t\t\t\t\t\t\t\tchoices={ patternSourceMenuOptions }\n\t\t\t\t\t\t\t\tonSelect={ ( value ) => {\n\t\t\t\t\t\t\t\t\thandleSetSourceFilterChange( 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={ currentPatternSourceFilter }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</MenuGroup>\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-tool-selector__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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"}

package/build/components/inserter/block-patterns-tab/use-pattern-categories.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePatternCategories = usePatternCategories;
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+var _a11y = require("@wordpress/a11y");
+var _usePatternsState = _interopRequireDefault(require("../hooks/use-patterns-state"));
+var _utils = require("./utils");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function usePatternCategories(rootClientId, sourceFilter = 'all') {
+  const [patterns, allCategories] = (0, _usePatternsState.default)(undefined, rootClientId);
+  const filteredPatterns = (0, _element.useMemo)(() => sourceFilter === 'all' ? patterns : patterns.filter(pattern => !(0, _utils.isPatternFiltered)(pattern, sourceFilter)), [sourceFilter, patterns]);
+  const hasRegisteredCategory = (0, _element.useCallback)(pattern => {
+    if (!pattern.categories || !pattern.categories.length) {
+      return false;
+    }
+    return pattern.categories.some(cat => allCategories.some(category => category.name === cat));
+  }, [allCategories]);
+
+  // Remove any empty categories.
+  const populatedCategories = (0, _element.useMemo)(() => {
+    const categories = allCategories.filter(category => filteredPatterns.some(pattern => pattern.categories?.includes(category.name))).sort((a, b) => a.label.localeCompare(b.label));
+    if (filteredPatterns.some(pattern => !hasRegisteredCategory(pattern)) && !categories.find(category => category.name === 'uncategorized')) {
+      categories.push({
+        name: 'uncategorized',
+        label: (0, _i18n._x)('Uncategorized')
+      });
+    }
+    if (filteredPatterns.some(pattern => pattern.type === _utils.PATTERN_TYPES.user)) {
+      categories.unshift(_utils.myPatternsCategory);
+    }
+    if (filteredPatterns.length > 0) {
+      categories.unshift({
+        name: _utils.allPatternsCategory.name,
+        label: _utils.allPatternsCategory.label
+      });
+    }
+    (0, _a11y.speak)((0, _i18n.sprintf)( /* translators: %d: number of categories . */
+    (0, _i18n._n)('%d category button displayed.', '%d category buttons displayed.', categories.length), categories.length));
+    return categories;
+  }, [allCategories, filteredPatterns, hasRegisteredCategory]);
+  return populatedCategories;
+}
+//# sourceMappingURL=use-pattern-categories.js.map

package/build/components/inserter/block-patterns-tab/use-pattern-categories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_i18n","_a11y","_usePatternsState","_interopRequireDefault","_utils","usePatternCategories","rootClientId","sourceFilter","patterns","allCategories","usePatternsState","undefined","filteredPatterns","useMemo","filter","pattern","isPatternFiltered","hasRegisteredCategory","useCallback","categories","length","some","cat","category","name","populatedCategories","includes","sort","a","b","label","localeCompare","find","push","_x","type","PATTERN_TYPES","user","unshift","myPatternsCategory","allPatternsCategory","speak","sprintf","_n"],"sources":["@wordpress/block-editor/src/components/inserter/block-patterns-tab/use-pattern-categories.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, useCallback } from '@wordpress/element';\nimport { _x, _n, sprintf } from '@wordpress/i18n';\n\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport usePatternsState from '../hooks/use-patterns-state';\nimport {\n\tisPatternFiltered,\n\tallPatternsCategory,\n\tmyPatternsCategory,\n\tPATTERN_TYPES,\n} from './utils';\n\nexport function usePatternCategories( rootClientId, sourceFilter = 'all' ) {\n\tconst [ patterns, allCategories ] = usePatternsState(\n\t\tundefined,\n\t\trootClientId\n\t);\n\n\tconst filteredPatterns = useMemo(\n\t\t() =>\n\t\t\tsourceFilter === 'all'\n\t\t\t\t? patterns\n\t\t\t\t: patterns.filter(\n\t\t\t\t\t\t( pattern ) =>\n\t\t\t\t\t\t\t! isPatternFiltered( pattern, sourceFilter )\n\t\t\t\t  ),\n\t\t[ sourceFilter, patterns ]\n\t);\n\n\tconst hasRegisteredCategory = useCallback(\n\t\t( pattern ) => {\n\t\t\tif ( ! pattern.categories || ! pattern.categories.length ) {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\treturn pattern.categories.some( ( cat ) =>\n\t\t\t\tallCategories.some( ( category ) => category.name === cat )\n\t\t\t);\n\t\t},\n\t\t[ allCategories ]\n\t);\n\n\t// Remove any empty categories.\n\tconst populatedCategories = useMemo( () => {\n\t\tconst categories = allCategories\n\t\t\t.filter( ( category ) =>\n\t\t\t\tfilteredPatterns.some( ( pattern ) =>\n\t\t\t\t\tpattern.categories?.includes( category.name )\n\t\t\t\t)\n\t\t\t)\n\t\t\t.sort( ( a, b ) => a.label.localeCompare( b.label ) );\n\n\t\tif (\n\t\t\tfilteredPatterns.some(\n\t\t\t\t( pattern ) => ! hasRegisteredCategory( pattern )\n\t\t\t) &&\n\t\t\t! categories.find(\n\t\t\t\t( category ) => category.name === 'uncategorized'\n\t\t\t)\n\t\t) {\n\t\t\tcategories.push( {\n\t\t\t\tname: 'uncategorized',\n\t\t\t\tlabel: _x( 'Uncategorized' ),\n\t\t\t} );\n\t\t}\n\t\tif (\n\t\t\tfilteredPatterns.some(\n\t\t\t\t( pattern ) => pattern.type === PATTERN_TYPES.user\n\t\t\t)\n\t\t) {\n\t\t\tcategories.unshift( myPatternsCategory );\n\t\t}\n\t\tif ( filteredPatterns.length > 0 ) {\n\t\t\tcategories.unshift( {\n\t\t\t\tname: allPatternsCategory.name,\n\t\t\t\tlabel: allPatternsCategory.label,\n\t\t\t} );\n\t\t}\n\t\tspeak(\n\t\t\tsprintf(\n\t\t\t\t/* translators: %d: number of categories . */\n\t\t\t\t_n(\n\t\t\t\t\t'%d category button displayed.',\n\t\t\t\t\t'%d category buttons displayed.',\n\t\t\t\t\tcategories.length\n\t\t\t\t),\n\t\t\t\tcategories.length\n\t\t\t)\n\t\t);\n\t\treturn categories;\n\t}, [ allCategories, filteredPatterns, hasRegisteredCategory ] );\n\n\treturn populatedCategories;\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAEA,IAAAE,KAAA,GAAAF,OAAA;AAKA,IAAAG,iBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AAZA;AACA;AACA;;AAMA;AACA;AACA;;AASO,SAASM,oBAAoBA,CAAEC,YAAY,EAAEC,YAAY,GAAG,KAAK,EAAG;EAC1E,MAAM,CAAEC,QAAQ,EAAEC,aAAa,CAAE,GAAG,IAAAC,yBAAgB,EACnDC,SAAS,EACTL,YACD,CAAC;EAED,MAAMM,gBAAgB,GAAG,IAAAC,gBAAO,EAC/B,MACCN,YAAY,KAAK,KAAK,GACnBC,QAAQ,GACRA,QAAQ,CAACM,MAAM,CACbC,OAAO,IACR,CAAE,IAAAC,wBAAiB,EAAED,OAAO,EAAER,YAAa,CAC5C,CAAC,EACL,CAAEA,YAAY,EAAEC,QAAQ,CACzB,CAAC;EAED,MAAMS,qBAAqB,GAAG,IAAAC,oBAAW,EACtCH,OAAO,IAAM;IACd,IAAK,CAAEA,OAAO,CAACI,UAAU,IAAI,CAAEJ,OAAO,CAACI,UAAU,CAACC,MAAM,EAAG;MAC1D,OAAO,KAAK;IACb;IAEA,OAAOL,OAAO,CAACI,UAAU,CAACE,IAAI,CAAIC,GAAG,IACpCb,aAAa,CAACY,IAAI,CAAIE,QAAQ,IAAMA,QAAQ,CAACC,IAAI,KAAKF,GAAI,CAC3D,CAAC;EACF,CAAC,EACD,CAAEb,aAAa,CAChB,CAAC;;EAED;EACA,MAAMgB,mBAAmB,GAAG,IAAAZ,gBAAO,EAAE,MAAM;IAC1C,MAAMM,UAAU,GAAGV,aAAa,CAC9BK,MAAM,CAAIS,QAAQ,IAClBX,gBAAgB,CAACS,IAAI,CAAIN,OAAO,IAC/BA,OAAO,CAACI,UAAU,EAAEO,QAAQ,CAAEH,QAAQ,CAACC,IAAK,CAC7C,CACD,CAAC,CACAG,IAAI,CAAE,CAAEC,CAAC,EAAEC,CAAC,KAAMD,CAAC,CAACE,KAAK,CAACC,aAAa,CAAEF,CAAC,CAACC,KAAM,CAAE,CAAC;IAEtD,IACClB,gBAAgB,CAACS,IAAI,CAClBN,OAAO,IAAM,CAAEE,qBAAqB,CAAEF,OAAQ,CACjD,CAAC,IACD,CAAEI,UAAU,CAACa,IAAI,CACdT,QAAQ,IAAMA,QAAQ,CAACC,IAAI,KAAK,eACnC,CAAC,EACA;MACDL,UAAU,CAACc,IAAI,CAAE;QAChBT,IAAI,EAAE,eAAe;QACrBM,KAAK,EAAE,IAAAI,QAAE,EAAE,eAAgB;MAC5B,CAAE,CAAC;IACJ;IACA,IACCtB,gBAAgB,CAACS,IAAI,CAClBN,OAAO,IAAMA,OAAO,CAACoB,IAAI,KAAKC,oBAAa,CAACC,IAC/C,CAAC,EACA;MACDlB,UAAU,CAACmB,OAAO,CAAEC,yBAAmB,CAAC;IACzC;IACA,IAAK3B,gBAAgB,CAACQ,MAAM,GAAG,CAAC,EAAG;MAClCD,UAAU,CAACmB,OAAO,CAAE;QACnBd,IAAI,EAAEgB,0BAAmB,CAAChB,IAAI;QAC9BM,KAAK,EAAEU,0BAAmB,CAACV;MAC5B,CAAE,CAAC;IACJ;IACA,IAAAW,WAAK,EACJ,IAAAC,aAAO,GACN;IACA,IAAAC,QAAE,EACD,+BAA+B,EAC/B,gCAAgC,EAChCxB,UAAU,CAACC,MACZ,CAAC,EACDD,UAAU,CAACC,MACZ,CACD,CAAC;IACD,OAAOD,UAAU;EAClB,CAAC,EAAE,CAAEV,aAAa,EAAEG,gBAAgB,EAAEK,qBAAqB,CAAG,CAAC;EAE/D,OAAOQ,mBAAmB;AAC3B"}

package/build/components/inserter/block-patterns-tab/utils.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allPatternsCategory = exports.SYNC_TYPES = exports.PATTERN_TYPES = void 0;
+exports.isPatternFiltered = isPatternFiltered;
+exports.myPatternsCategory = void 0;
+var _i18n = require("@wordpress/i18n");
+/**
+ * WordPress dependencies
+ */
+
+const PATTERN_TYPES = {
+  all: 'all',
+  synced: 'synced',
+  unsynced: 'unsynced',
+  user: 'user',
+  theme: 'theme',
+  directory: 'directory'
+};
+exports.PATTERN_TYPES = PATTERN_TYPES;
+const SYNC_TYPES = {
+  all: 'all',
+  full: 'fully',
+  unsynced: 'unsynced'
+};
+exports.SYNC_TYPES = SYNC_TYPES;
+const allPatternsCategory = {
+  name: 'allPatterns',
+  label: (0, _i18n.__)('All')
+};
+exports.allPatternsCategory = allPatternsCategory;
+const myPatternsCategory = {
+  name: 'myPatterns',
+  label: (0, _i18n.__)('My patterns')
+};
+exports.myPatternsCategory = myPatternsCategory;
+function isPatternFiltered(pattern, sourceFilter, syncFilter) {
+  const isUserPattern = pattern.name.startsWith('core/block');
+  const isDirectoryPattern = pattern.source === 'core' || pattern.source?.startsWith('pattern-directory');
+
+  // If theme source selected, filter out user created patterns and those from
+  // the core patterns directory.
+  if (sourceFilter === PATTERN_TYPES.theme && (isUserPattern || isDirectoryPattern)) {
+    return true;
+  }
+
+  // If the directory source is selected, filter out user created patterns
+  // and those bundled with the theme.
+  if (sourceFilter === PATTERN_TYPES.directory && (isUserPattern || !isDirectoryPattern)) {
+    return true;
+  }
+
+  // If user source selected, filter out theme patterns.
+  if (sourceFilter === PATTERN_TYPES.user && pattern.type !== PATTERN_TYPES.user) {
+    return true;
+  }
+
+  // Filter by sync status.
+  if (syncFilter === SYNC_TYPES.full && pattern.syncStatus !== '') {
+    return true;
+  }
+  if (syncFilter === SYNC_TYPES.unsynced && pattern.syncStatus !== 'unsynced' && isUserPattern) {
+    return true;
+  }
+  return false;
+}
+//# sourceMappingURL=utils.js.map

package/build/components/inserter/block-patterns-tab/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_i18n","require","PATTERN_TYPES","all","synced","unsynced","user","theme","directory","exports","SYNC_TYPES","full","allPatternsCategory","name","label","__","myPatternsCategory","isPatternFiltered","pattern","sourceFilter","syncFilter","isUserPattern","startsWith","isDirectoryPattern","source","type","syncStatus"],"sources":["@wordpress/block-editor/src/components/inserter/block-patterns-tab/utils.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\n\nimport { __ } from '@wordpress/i18n';\n\nexport const PATTERN_TYPES = {\n\tall: 'all',\n\tsynced: 'synced',\n\tunsynced: 'unsynced',\n\tuser: 'user',\n\ttheme: 'theme',\n\tdirectory: 'directory',\n};\n\nexport const SYNC_TYPES = {\n\tall: 'all',\n\tfull: 'fully',\n\tunsynced: 'unsynced',\n};\n\nexport const allPatternsCategory = {\n\tname: 'allPatterns',\n\tlabel: __( 'All' ),\n};\n\nexport const myPatternsCategory = {\n\tname: 'myPatterns',\n\tlabel: __( 'My patterns' ),\n};\n\nexport function isPatternFiltered( pattern, sourceFilter, syncFilter ) {\n\tconst isUserPattern = pattern.name.startsWith( 'core/block' );\n\tconst isDirectoryPattern =\n\t\tpattern.source === 'core' ||\n\t\tpattern.source?.startsWith( 'pattern-directory' );\n\n\t// If theme source selected, filter out user created patterns and those from\n\t// the core patterns directory.\n\tif (\n\t\tsourceFilter === PATTERN_TYPES.theme &&\n\t\t( isUserPattern || isDirectoryPattern )\n\t) {\n\t\treturn true;\n\t}\n\n\t// If the directory source is selected, filter out user created patterns\n\t// and those bundled with the theme.\n\tif (\n\t\tsourceFilter === PATTERN_TYPES.directory &&\n\t\t( isUserPattern || ! isDirectoryPattern )\n\t) {\n\t\treturn true;\n\t}\n\n\t// If user source selected, filter out theme patterns.\n\tif (\n\t\tsourceFilter === PATTERN_TYPES.user &&\n\t\tpattern.type !== PATTERN_TYPES.user\n\t) {\n\t\treturn true;\n\t}\n\n\t// Filter by sync status.\n\tif ( syncFilter === SYNC_TYPES.full && pattern.syncStatus !== '' ) {\n\t\treturn true;\n\t}\n\n\tif (\n\t\tsyncFilter === SYNC_TYPES.unsynced &&\n\t\tpattern.syncStatus !== 'unsynced' &&\n\t\tisUserPattern\n\t) {\n\t\treturn true;\n\t}\n\n\treturn false;\n}\n"],"mappings":";;;;;;;;AAIA,IAAAA,KAAA,GAAAC,OAAA;AAJA;AACA;AACA;;AAIO,MAAMC,aAAa,GAAG;EAC5BC,GAAG,EAAE,KAAK;EACVC,MAAM,EAAE,QAAQ;EAChBC,QAAQ,EAAE,UAAU;EACpBC,IAAI,EAAE,MAAM;EACZC,KAAK,EAAE,OAAO;EACdC,SAAS,EAAE;AACZ,CAAC;AAACC,OAAA,CAAAP,aAAA,GAAAA,aAAA;AAEK,MAAMQ,UAAU,GAAG;EACzBP,GAAG,EAAE,KAAK;EACVQ,IAAI,EAAE,OAAO;EACbN,QAAQ,EAAE;AACX,CAAC;AAACI,OAAA,CAAAC,UAAA,GAAAA,UAAA;AAEK,MAAME,mBAAmB,GAAG;EAClCC,IAAI,EAAE,aAAa;EACnBC,KAAK,EAAE,IAAAC,QAAE,EAAE,KAAM;AAClB,CAAC;AAACN,OAAA,CAAAG,mBAAA,GAAAA,mBAAA;AAEK,MAAMI,kBAAkB,GAAG;EACjCH,IAAI,EAAE,YAAY;EAClBC,KAAK,EAAE,IAAAC,QAAE,EAAE,aAAc;AAC1B,CAAC;AAACN,OAAA,CAAAO,kBAAA,GAAAA,kBAAA;AAEK,SAASC,iBAAiBA,CAAEC,OAAO,EAAEC,YAAY,EAAEC,UAAU,EAAG;EACtE,MAAMC,aAAa,GAAGH,OAAO,CAACL,IAAI,CAACS,UAAU,CAAE,YAAa,CAAC;EAC7D,MAAMC,kBAAkB,GACvBL,OAAO,CAACM,MAAM,KAAK,MAAM,IACzBN,OAAO,CAACM,MAAM,EAAEF,UAAU,CAAE,mBAAoB,CAAC;;EAElD;EACA;EACA,IACCH,YAAY,KAAKjB,aAAa,CAACK,KAAK,KAClCc,aAAa,IAAIE,kBAAkB,CAAE,EACtC;IACD,OAAO,IAAI;EACZ;;EAEA;EACA;EACA,IACCJ,YAAY,KAAKjB,aAAa,CAACM,SAAS,KACtCa,aAAa,IAAI,CAAEE,kBAAkB,CAAE,EACxC;IACD,OAAO,IAAI;EACZ;;EAEA;EACA,IACCJ,YAAY,KAAKjB,aAAa,CAACI,IAAI,IACnCY,OAAO,CAACO,IAAI,KAAKvB,aAAa,CAACI,IAAI,EAClC;IACD,OAAO,IAAI;EACZ;;EAEA;EACA,IAAKc,UAAU,KAAKV,UAAU,CAACC,IAAI,IAAIO,OAAO,CAACQ,UAAU,KAAK,EAAE,EAAG;IAClE,OAAO,IAAI;EACZ;EAEA,IACCN,UAAU,KAAKV,UAAU,CAACL,QAAQ,IAClCa,OAAO,CAACQ,UAAU,KAAK,UAAU,IACjCL,aAAa,EACZ;IACD,OAAO,IAAI;EACZ;EAEA,OAAO,KAAK;AACb"}

package/build/components/inserter/hooks/use-patterns-state.js

@@ -10,6 +10,7 @@ var _data = require("@wordpress/data");
 var _i18n = require("@wordpress/i18n");
 var _notices = require("@wordpress/notices");
 var _store = require("../../../store");
+var _utils = require("../block-patterns-tab/utils");
 /**
  * WordPress dependencies
  */
@@ -59,7 +60,7 @@ const usePatternsState = (onInsert, rootClientId) => {
     createSuccessNotice
   } = (0, _data.useDispatch)(_notices.store);
   const onClickPattern = (0, _element.useCallback)((pattern, blocks) => {
-    const patternBlocks = pattern.id && pattern.syncStatus !== 'unsynced' ? [(0, _blocks.createBlock)('core/block', {
+    const patternBlocks = pattern.type === _utils.PATTERN_TYPES.user && pattern.syncStatus !== 'unsynced' ? [(0, _blocks.createBlock)('core/block', {
       ref: pattern.id
     })] : blocks;
     onInsert((patternBlocks !== null && patternBlocks !== void 0 ? patternBlocks : []).map(block => (0, _blocks.cloneBlock)(block)), pattern.name);

package/build/components/inserter/hooks/use-patterns-state.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_blocks","_data","_i18n","_notices","_store","usePatternsState","onInsert","rootClientId","patternCategories","patterns","userPatternCategories","useSelect","select","__experimentalGetAllowedPatterns","getSettings","blockEditorStore","__experimentalUserPatternCategories","__experimentalBlockPatternCategories","allCategories","useMemo","categories","forEach","userCategory","find","existingCategory","name","push","createSuccessNotice","useDispatch","noticesStore","onClickPattern","useCallback","pattern","blocks","patternBlocks","id","syncStatus","createBlock","ref","map","block","cloneBlock","sprintf","__","title","type","_default","exports","default"],"sources":["@wordpress/block-editor/src/components/inserter/hooks/use-patterns-state.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { cloneBlock, createBlock } from '@wordpress/blocks';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { store as noticesStore } from '@wordpress/notices';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../../store';\n\n/**\n * Retrieves the block patterns inserter state.\n *\n * @param {Function} onInsert     function called when inserter a list of blocks.\n * @param {string=}  rootClientId Insertion's root client ID.\n *\n * @return {Array} Returns the patterns state. (patterns, categories, onSelect handler)\n */\nconst usePatternsState = ( onInsert, rootClientId ) => {\n\tconst { patternCategories, patterns, userPatternCategories } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { __experimentalGetAllowedPatterns, getSettings } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\tconst {\n\t\t\t\t__experimentalUserPatternCategories,\n\t\t\t\t__experimentalBlockPatternCategories,\n\t\t\t} = getSettings();\n\t\t\treturn {\n\t\t\t\tpatterns: __experimentalGetAllowedPatterns( rootClientId ),\n\t\t\t\tuserPatternCategories: __experimentalUserPatternCategories,\n\t\t\t\tpatternCategories: __experimentalBlockPatternCategories,\n\t\t\t};\n\t\t},\n\t\t[ rootClientId ]\n\t);\n\n\tconst allCategories = useMemo( () => {\n\t\tconst categories = [ ...patternCategories ];\n\t\tuserPatternCategories?.forEach( ( userCategory ) => {\n\t\t\tif (\n\t\t\t\t! categories.find(\n\t\t\t\t\t( existingCategory ) =>\n\t\t\t\t\t\texistingCategory.name === userCategory.name\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\tcategories.push( userCategory );\n\t\t\t}\n\t\t} );\n\t\treturn categories;\n\t}, [ patternCategories, userPatternCategories ] );\n\n\tconst { createSuccessNotice } = useDispatch( noticesStore );\n\tconst onClickPattern = useCallback(\n\t\t( pattern, blocks ) => {\n\t\t\tconst patternBlocks =\n\t\t\t\tpattern.id && pattern.syncStatus !== 'unsynced'\n\t\t\t\t\t? [ createBlock( 'core/block', { ref: pattern.id } ) ]\n\t\t\t\t\t: blocks;\n\t\t\tonInsert(\n\t\t\t\t( patternBlocks ?? [] ).map( ( block ) => cloneBlock( block ) ),\n\t\t\t\tpattern.name\n\t\t\t);\n\t\t\tcreateSuccessNotice(\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %s: block pattern title. */\n\t\t\t\t\t__( 'Block pattern \"%s\" inserted.' ),\n\t\t\t\t\tpattern.title\n\t\t\t\t),\n\t\t\t\t{\n\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\tid: 'block-pattern-inserted-notice',\n\t\t\t\t}\n\t\t\t);\n\t\t},\n\t\t[ createSuccessNotice, onInsert ]\n\t);\n\n\treturn [ patterns, allCategories, onClickPattern ];\n};\n\nexport default usePatternsState;\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAKA,IAAAK,MAAA,GAAAL,OAAA;AAZA;AACA;AACA;;AAOA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMM,gBAAgB,GAAGA,CAAEC,QAAQ,EAAEC,YAAY,KAAM;EACtD,MAAM;IAAEC,iBAAiB;IAAEC,QAAQ;IAAEC;EAAsB,CAAC,GAAG,IAAAC,eAAS,EACrEC,MAAM,IAAM;IACb,MAAM;MAAEC,gCAAgC;MAAEC;IAAY,CAAC,GACtDF,MAAM,CAAEG,YAAiB,CAAC;IAC3B,MAAM;MACLC,mCAAmC;MACnCC;IACD,CAAC,GAAGH,WAAW,CAAC,CAAC;IACjB,OAAO;MACNL,QAAQ,EAAEI,gCAAgC,CAAEN,YAAa,CAAC;MAC1DG,qBAAqB,EAAEM,mCAAmC;MAC1DR,iBAAiB,EAAES;IACpB,CAAC;EACF,CAAC,EACD,CAAEV,YAAY,CACf,CAAC;EAED,MAAMW,aAAa,GAAG,IAAAC,gBAAO,EAAE,MAAM;IACpC,MAAMC,UAAU,GAAG,CAAE,GAAGZ,iBAAiB,CAAE;IAC3CE,qBAAqB,EAAEW,OAAO,CAAIC,YAAY,IAAM;MACnD,IACC,CAAEF,UAAU,CAACG,IAAI,CACdC,gBAAgB,IACjBA,gBAAgB,CAACC,IAAI,KAAKH,YAAY,CAACG,IACzC,CAAC,EACA;QACDL,UAAU,CAACM,IAAI,CAAEJ,YAAa,CAAC;MAChC;IACD,CAAE,CAAC;IACH,OAAOF,UAAU;EAClB,CAAC,EAAE,CAAEZ,iBAAiB,EAAEE,qBAAqB,CAAG,CAAC;EAEjD,MAAM;IAAEiB;EAAoB,CAAC,GAAG,IAAAC,iBAAW,EAAEC,cAAa,CAAC;EAC3D,MAAMC,cAAc,GAAG,IAAAC,oBAAW,EACjC,CAAEC,OAAO,EAAEC,MAAM,KAAM;IACtB,MAAMC,aAAa,GAClBF,OAAO,CAACG,EAAE,IAAIH,OAAO,CAACI,UAAU,KAAK,UAAU,GAC5C,CAAE,IAAAC,mBAAW,EAAE,YAAY,EAAE;MAAEC,GAAG,EAAEN,OAAO,CAACG;IAAG,CAAE,CAAC,CAAE,GACpDF,MAAM;IACV3B,QAAQ,CACP,CAAE4B,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAI,EAAE,EAAGK,GAAG,CAAIC,KAAK,IAAM,IAAAC,kBAAU,EAAED,KAAM,CAAE,CAAC,EAC/DR,OAAO,CAACP,IACT,CAAC;IACDE,mBAAmB,CAClB,IAAAe,aAAO,GACN;IACA,IAAAC,QAAE,EAAE,8BAA+B,CAAC,EACpCX,OAAO,CAACY,KACT,CAAC,EACD;MACCC,IAAI,EAAE,UAAU;MAChBV,EAAE,EAAE;IACL,CACD,CAAC;EACF,CAAC,EACD,CAAER,mBAAmB,EAAErB,QAAQ,CAChC,CAAC;EAED,OAAO,CAAEG,QAAQ,EAAES,aAAa,EAAEY,cAAc,CAAE;AACnD,CAAC;AAAC,IAAAgB,QAAA,GAEazC,gBAAgB;AAAA0C,OAAA,CAAAC,OAAA,GAAAF,QAAA"}
+{"version":3,"names":["_element","require","_blocks","_data","_i18n","_notices","_store","_utils","usePatternsState","onInsert","rootClientId","patternCategories","patterns","userPatternCategories","useSelect","select","__experimentalGetAllowedPatterns","getSettings","blockEditorStore","__experimentalUserPatternCategories","__experimentalBlockPatternCategories","allCategories","useMemo","categories","forEach","userCategory","find","existingCategory","name","push","createSuccessNotice","useDispatch","noticesStore","onClickPattern","useCallback","pattern","blocks","patternBlocks","type","PATTERN_TYPES","user","syncStatus","createBlock","ref","id","map","block","cloneBlock","sprintf","__","title","_default","exports","default"],"sources":["@wordpress/block-editor/src/components/inserter/hooks/use-patterns-state.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { cloneBlock, createBlock } from '@wordpress/blocks';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { store as noticesStore } from '@wordpress/notices';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../../store';\nimport { PATTERN_TYPES } from '../block-patterns-tab/utils';\n\n/**\n * Retrieves the block patterns inserter state.\n *\n * @param {Function} onInsert     function called when inserter a list of blocks.\n * @param {string=}  rootClientId Insertion's root client ID.\n *\n * @return {Array} Returns the patterns state. (patterns, categories, onSelect handler)\n */\nconst usePatternsState = ( onInsert, rootClientId ) => {\n\tconst { patternCategories, patterns, userPatternCategories } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { __experimentalGetAllowedPatterns, getSettings } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\tconst {\n\t\t\t\t__experimentalUserPatternCategories,\n\t\t\t\t__experimentalBlockPatternCategories,\n\t\t\t} = getSettings();\n\t\t\treturn {\n\t\t\t\tpatterns: __experimentalGetAllowedPatterns( rootClientId ),\n\t\t\t\tuserPatternCategories: __experimentalUserPatternCategories,\n\t\t\t\tpatternCategories: __experimentalBlockPatternCategories,\n\t\t\t};\n\t\t},\n\t\t[ rootClientId ]\n\t);\n\n\tconst allCategories = useMemo( () => {\n\t\tconst categories = [ ...patternCategories ];\n\t\tuserPatternCategories?.forEach( ( userCategory ) => {\n\t\t\tif (\n\t\t\t\t! categories.find(\n\t\t\t\t\t( existingCategory ) =>\n\t\t\t\t\t\texistingCategory.name === userCategory.name\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\tcategories.push( userCategory );\n\t\t\t}\n\t\t} );\n\t\treturn categories;\n\t}, [ patternCategories, userPatternCategories ] );\n\n\tconst { createSuccessNotice } = useDispatch( noticesStore );\n\tconst onClickPattern = useCallback(\n\t\t( pattern, blocks ) => {\n\t\t\tconst patternBlocks =\n\t\t\t\tpattern.type === PATTERN_TYPES.user &&\n\t\t\t\tpattern.syncStatus !== 'unsynced'\n\t\t\t\t\t? [ createBlock( 'core/block', { ref: pattern.id } ) ]\n\t\t\t\t\t: blocks;\n\t\t\tonInsert(\n\t\t\t\t( patternBlocks ?? [] ).map( ( block ) => cloneBlock( block ) ),\n\t\t\t\tpattern.name\n\t\t\t);\n\t\t\tcreateSuccessNotice(\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %s: block pattern title. */\n\t\t\t\t\t__( 'Block pattern \"%s\" inserted.' ),\n\t\t\t\t\tpattern.title\n\t\t\t\t),\n\t\t\t\t{\n\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\tid: 'block-pattern-inserted-notice',\n\t\t\t\t}\n\t\t\t);\n\t\t},\n\t\t[ createSuccessNotice, onInsert ]\n\t);\n\n\treturn [ patterns, allCategories, onClickPattern ];\n};\n\nexport default usePatternsState;\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAKA,IAAAK,MAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AAbA;AACA;AACA;;AAOA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMO,gBAAgB,GAAGA,CAAEC,QAAQ,EAAEC,YAAY,KAAM;EACtD,MAAM;IAAEC,iBAAiB;IAAEC,QAAQ;IAAEC;EAAsB,CAAC,GAAG,IAAAC,eAAS,EACrEC,MAAM,IAAM;IACb,MAAM;MAAEC,gCAAgC;MAAEC;IAAY,CAAC,GACtDF,MAAM,CAAEG,YAAiB,CAAC;IAC3B,MAAM;MACLC,mCAAmC;MACnCC;IACD,CAAC,GAAGH,WAAW,CAAC,CAAC;IACjB,OAAO;MACNL,QAAQ,EAAEI,gCAAgC,CAAEN,YAAa,CAAC;MAC1DG,qBAAqB,EAAEM,mCAAmC;MAC1DR,iBAAiB,EAAES;IACpB,CAAC;EACF,CAAC,EACD,CAAEV,YAAY,CACf,CAAC;EAED,MAAMW,aAAa,GAAG,IAAAC,gBAAO,EAAE,MAAM;IACpC,MAAMC,UAAU,GAAG,CAAE,GAAGZ,iBAAiB,CAAE;IAC3CE,qBAAqB,EAAEW,OAAO,CAAIC,YAAY,IAAM;MACnD,IACC,CAAEF,UAAU,CAACG,IAAI,CACdC,gBAAgB,IACjBA,gBAAgB,CAACC,IAAI,KAAKH,YAAY,CAACG,IACzC,CAAC,EACA;QACDL,UAAU,CAACM,IAAI,CAAEJ,YAAa,CAAC;MAChC;IACD,CAAE,CAAC;IACH,OAAOF,UAAU;EAClB,CAAC,EAAE,CAAEZ,iBAAiB,EAAEE,qBAAqB,CAAG,CAAC;EAEjD,MAAM;IAAEiB;EAAoB,CAAC,GAAG,IAAAC,iBAAW,EAAEC,cAAa,CAAC;EAC3D,MAAMC,cAAc,GAAG,IAAAC,oBAAW,EACjC,CAAEC,OAAO,EAAEC,MAAM,KAAM;IACtB,MAAMC,aAAa,GAClBF,OAAO,CAACG,IAAI,KAAKC,oBAAa,CAACC,IAAI,IACnCL,OAAO,CAACM,UAAU,KAAK,UAAU,GAC9B,CAAE,IAAAC,mBAAW,EAAE,YAAY,EAAE;MAAEC,GAAG,EAAER,OAAO,CAACS;IAAG,CAAE,CAAC,CAAE,GACpDR,MAAM;IACV3B,QAAQ,CACP,CAAE4B,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAI,EAAE,EAAGQ,GAAG,CAAIC,KAAK,IAAM,IAAAC,kBAAU,EAAED,KAAM,CAAE,CAAC,EAC/DX,OAAO,CAACP,IACT,CAAC;IACDE,mBAAmB,CAClB,IAAAkB,aAAO,GACN;IACA,IAAAC,QAAE,EAAE,8BAA+B,CAAC,EACpCd,OAAO,CAACe,KACT,CAAC,EACD;MACCZ,IAAI,EAAE,UAAU;MAChBM,EAAE,EAAE;IACL,CACD,CAAC;EACF,CAAC,EACD,CAAEd,mBAAmB,EAAErB,QAAQ,CAChC,CAAC;EAED,OAAO,CAAEG,QAAQ,EAAES,aAAa,EAAEY,cAAc,CAAE;AACnD,CAAC;AAAC,IAAAkB,QAAA,GAEa3C,gBAAgB;AAAA4C,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

package/build/components/inserter/media-tab/media-list.js

@@ -8,6 +8,7 @@ var _react = require("react");
 var _components = require("@wordpress/components");
 var _i18n = require("@wordpress/i18n");
 var _mediaPreview = require("./media-preview");
+var _lockUnlock = require("../../../lock-unlock");
 /**
  * WordPress dependencies
  */
@@ -16,15 +17,19 @@ var _mediaPreview = require("./media-preview");
  * Internal dependencies
  */
 
+const {
+  CompositeV2: Composite,
+  useCompositeStoreV2: useCompositeStore
+} = (0, _lockUnlock.unlock)(_components.privateApis);
 function MediaList({
   mediaList,
   category,
   onClick,
   label = (0, _i18n.__)('Media List')
 }) {
-  const composite = (0, _components.__unstableUseCompositeState)();
-  return (0, _react.createElement)(_components.__unstableComposite, {
-    ...composite,
+  const compositeStore = useCompositeStore();
+  return (0, _react.createElement)(Composite, {
+    store: compositeStore,
     role: "listbox",
     className: "block-editor-inserter__media-list",
     "aria-label": label
@@ -32,8 +37,7 @@ function MediaList({
     key: media.id || media.sourceId || index,
     media: media,
     category: category,
-    onClick: onClick,
-    composite: composite
+    onClick: onClick
   })));
 }
 var _default = MediaList;

package/build/components/inserter/media-tab/media-list.js.map

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_i18n","_mediaPreview","MediaList","mediaList","category","onClick","label","__","composite","useCompositeState","_react","createElement","__unstableComposite","role","className","map","media","index","MediaPreview","key","id","sourceId","_default","exports","default"],"sources":["@wordpress/block-editor/src/components/inserter/media-tab/media-list.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__unstableComposite as Composite,\n\t__unstableUseCompositeState as useCompositeState,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { MediaPreview } from './media-preview';\n\nfunction MediaList( {\n\tmediaList,\n\tcategory,\n\tonClick,\n\tlabel = __( 'Media List' ),\n} ) {\n\tconst composite = useCompositeState();\n\treturn (\n\t\t<Composite\n\t\t\t{ ...composite }\n\t\t\trole=\"listbox\"\n\t\t\tclassName=\"block-editor-inserter__media-list\"\n\t\t\taria-label={ label }\n\t\t>\n\t\t\t{ mediaList.map( ( media, index ) => (\n\t\t\t\t<MediaPreview\n\t\t\t\t\tkey={ media.id || media.sourceId || index }\n\t\t\t\t\tmedia={ media }\n\t\t\t\t\tcategory={ category }\n\t\t\t\t\tonClick={ onClick }\n\t\t\t\t\tcomposite={ composite }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n\nexport default MediaList;\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAIA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,aAAA,GAAAF,OAAA;AAZA;AACA;AACA;;AAOA;AACA;AACA;;AAGA,SAASG,SAASA,CAAE;EACnBC,SAAS;EACTC,QAAQ;EACRC,OAAO;EACPC,KAAK,GAAG,IAAAC,QAAE,EAAE,YAAa;AAC1B,CAAC,EAAG;EACH,MAAMC,SAAS,GAAG,IAAAC,uCAAiB,EAAC,CAAC;EACrC,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACb,WAAA,CAAAc,mBAAS;IAAA,GACJJ,SAAS;IACdK,IAAI,EAAC,SAAS;IACdC,SAAS,EAAC,mCAAmC;IAC7C,cAAaR;EAAO,GAElBH,SAAS,CAACY,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KAC9B,IAAAP,MAAA,CAAAC,aAAA,EAACV,aAAA,CAAAiB,YAAY;IACZC,GAAG,EAAGH,KAAK,CAACI,EAAE,IAAIJ,KAAK,CAACK,QAAQ,IAAIJ,KAAO;IAC3CD,KAAK,EAAGA,KAAO;IACfZ,QAAQ,EAAGA,QAAU;IACrBC,OAAO,EAAGA,OAAS;IACnBG,SAAS,EAAGA;EAAW,CACvB,CACA,CACQ,CAAC;AAEd;AAAC,IAAAc,QAAA,GAEcpB,SAAS;AAAAqB,OAAA,CAAAC,OAAA,GAAAF,QAAA"}
+{"version":3,"names":["_components","require","_i18n","_mediaPreview","_lockUnlock","CompositeV2","Composite","useCompositeStoreV2","useCompositeStore","unlock","componentsPrivateApis","MediaList","mediaList","category","onClick","label","__","compositeStore","_react","createElement","store","role","className","map","media","index","MediaPreview","key","id","sourceId","_default","exports","default"],"sources":["@wordpress/block-editor/src/components/inserter/media-tab/media-list.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as componentsPrivateApis } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { MediaPreview } from './media-preview';\nimport { unlock } from '../../../lock-unlock';\n\nconst { CompositeV2: Composite, useCompositeStoreV2: useCompositeStore } =\n\tunlock( componentsPrivateApis );\n\nfunction MediaList( {\n\tmediaList,\n\tcategory,\n\tonClick,\n\tlabel = __( 'Media List' ),\n} ) {\n\tconst compositeStore = useCompositeStore();\n\treturn (\n\t\t<Composite\n\t\t\tstore={ compositeStore }\n\t\t\trole=\"listbox\"\n\t\t\tclassName=\"block-editor-inserter__media-list\"\n\t\t\taria-label={ label }\n\t\t>\n\t\t\t{ mediaList.map( ( media, index ) => (\n\t\t\t\t<MediaPreview\n\t\t\t\t\tkey={ media.id || media.sourceId || index }\n\t\t\t\t\tmedia={ media }\n\t\t\t\t\tcategory={ category }\n\t\t\t\t\tonClick={ onClick }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n\nexport default MediaList;\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAIA,MAAM;EAAEI,WAAW,EAAEC,SAAS;EAAEC,mBAAmB,EAAEC;AAAkB,CAAC,GACvE,IAAAC,kBAAM,EAAEC,uBAAsB,CAAC;AAEhC,SAASC,SAASA,CAAE;EACnBC,SAAS;EACTC,QAAQ;EACRC,OAAO;EACPC,KAAK,GAAG,IAAAC,QAAE,EAAE,YAAa;AAC1B,CAAC,EAAG;EACH,MAAMC,cAAc,GAAGT,iBAAiB,CAAC,CAAC;EAC1C,OACC,IAAAU,MAAA,CAAAC,aAAA,EAACb,SAAS;IACTc,KAAK,EAAGH,cAAgB;IACxBI,IAAI,EAAC,SAAS;IACdC,SAAS,EAAC,mCAAmC;IAC7C,cAAaP;EAAO,GAElBH,SAAS,CAACW,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KAC9B,IAAAP,MAAA,CAAAC,aAAA,EAAChB,aAAA,CAAAuB,YAAY;IACZC,GAAG,EAAGH,KAAK,CAACI,EAAE,IAAIJ,KAAK,CAACK,QAAQ,IAAIJ,KAAO;IAC3CD,KAAK,EAAGA,KAAO;IACfX,QAAQ,EAAGA,QAAU;IACrBC,OAAO,EAAGA;EAAS,CACnB,CACA,CACQ,CAAC;AAEd;AAAC,IAAAgB,QAAA,GAEcnB,SAAS;AAAAoB,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

package/build/components/inserter/media-tab/media-preview.js

@@ -18,6 +18,7 @@ var _blob = require("@wordpress/blob");
 var _inserterDraggableBlocks = _interopRequireDefault(require("../../inserter-draggable-blocks"));
 var _utils = require("./utils");
 var _store = require("../../../store");
+var _lockUnlock = require("../../../lock-unlock");
 /**
  * External dependencies
  */
@@ -36,6 +37,9 @@ const MEDIA_OPTIONS_POPOVER_PROPS = {
   position: 'bottom left',
   className: 'block-editor-inserter__media-list__item-preview-options__popover'
 };
+const {
+  CompositeItemV2: CompositeItem
+} = (0, _lockUnlock.unlock)(_components.privateApis);
 function MediaPreviewOptions({
   category,
   media
@@ -80,7 +84,6 @@ function InsertExternalImageModal({
 function MediaPreview({
   media,
   onClick,
-  composite,
   category
 }) {
   const [showExternalUploadModal, setShowExternalUploadModal] = (0, _element.useState)(false);
@@ -172,26 +175,26 @@ function MediaPreview({
     draggable: draggable,
     onDragStart: onDragStart,
     onDragEnd: onDragEnd
-  }, (0, _react.createElement)(_components.Tooltip, {
-    text: truncatedTitle || title
   }, (0, _react.createElement)("div", {
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave
-  }, (0, _react.createElement)(_components.__unstableCompositeItem, {
-    role: "option",
-    as: "div",
-    ...composite,
-    className: "block-editor-inserter__media-list__item",
-    onClick: () => onMediaInsert(block),
-    "aria-label": title
+  }, (0, _react.createElement)(_components.Tooltip, {
+    text: truncatedTitle || title
+  }, (0, _react.createElement)(CompositeItem, {
+    render: (0, _react.createElement)("div", {
+      "aria-label": title,
+      role: "option",
+      className: "block-editor-inserter__media-list__item"
+    }),
+    onClick: () => onMediaInsert(block)
   }, (0, _react.createElement)("div", {
     className: "block-editor-inserter__media-list__item-preview"
   }, preview, isInserting && (0, _react.createElement)("div", {
     className: "block-editor-inserter__media-list__item-preview-spinner"
-  }, (0, _react.createElement)(_components.Spinner, null)))), !isInserting && (0, _react.createElement)(MediaPreviewOptions, {
+  }, (0, _react.createElement)(_components.Spinner, null))))), !isInserting && (0, _react.createElement)(MediaPreviewOptions, {
     category: category,
     media: media
-  }))))), showExternalUploadModal && (0, _react.createElement)(InsertExternalImageModal, {
+  })))), showExternalUploadModal && (0, _react.createElement)(InsertExternalImageModal, {
     onClose: () => setShowExternalUploadModal(false),
     onSubmit: () => {
       onClick((0, _blocks.cloneBlock)(block));