@wordpress/block-editor 9.5.0 → 9.6.0

package/build-module/components/block-types-list/index.native.js

@@ -4,13 +4,14 @@ import { createElement } from "@wordpress/element";
 /**
  * External dependencies
  */
-import { Dimensions, FlatList, StyleSheet, TouchableWithoutFeedback, View } from 'react-native';
+import { Dimensions, FlatList, SectionList, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native';
 /**
  * WordPress dependencies
  */
 
 import { useState, useEffect } from '@wordpress/element';
-import { BottomSheet, InserterButton } from '@wordpress/components';
+import { BottomSheet, Gradient, InserterButton } from '@wordpress/components';
+import { usePreferredColorScheme, usePreferredColorSchemeStyle } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
@@ -20,7 +21,7 @@ const MIN_COL_NUM = 3;
 export default function BlockTypesList(_ref) {
   let {
     name,
-    items,
+    sections,
     onSelect,
     listProps,
     initialNumToRender = 3
@@ -65,32 +66,73 @@ export default function BlockTypesList(_ref) {
   }
 
   const contentContainerStyle = StyleSheet.flatten(listProps.contentContainerStyle);
-  return createElement(FlatList, _extends({
+
+  const renderSection = _ref2 => {
+    let {
+      item
+    } = _ref2;
+    return createElement(TouchableWithoutFeedback, {
+      accessible: false
+    }, createElement(FlatList, {
+      data: item.list,
+      key: `InserterUI-${name}-${numberOfColumns}` // Re-render when numberOfColumns changes.
+      ,
+      numColumns: numberOfColumns,
+      ItemSeparatorComponent: () => createElement(TouchableWithoutFeedback, {
+        accessible: false
+      }, createElement(View, {
+        style: styles['block-types-list__row-separator']
+      })),
+      scrollEnabled: false,
+      renderItem: renderListItem
+    }));
+  };
+
+  const renderListItem = _ref3 => {
+    let {
+      item
+    } = _ref3;
+    return createElement(InserterButton, {
+      item: item,
+      itemWidth: itemWidth,
+      maxWidth: maxWidth,
+      onSelect: onSelect
+    });
+  };
+
+  const colorScheme = usePreferredColorScheme();
+  const sectionHeaderGradientValue = colorScheme === 'light' ? 'linear-gradient(#fff 70%, rgba(255, 255, 255, 0))' : 'linear-gradient(#2e2e2e 70%, rgba(46, 46, 46, 0))';
+  const sectionHeaderTitleStyles = usePreferredColorSchemeStyle(styles['block-types-list__section-header-title'], styles['block-types-list__section-header-title--dark']);
+
+  const renderSectionHeader = _ref4 => {
+    let {
+      section: {
+        metadata
+      }
+    } = _ref4;
+
+    if (!(metadata !== null && metadata !== void 0 && metadata.icon) || !(metadata !== null && metadata !== void 0 && metadata.title)) {
+      return null;
+    }
+
+    return createElement(TouchableWithoutFeedback, {
+      accessible: false
+    }, createElement(Gradient, {
+      gradientValue: sectionHeaderGradientValue,
+      style: styles['block-types-list__section-header']
+    }, metadata === null || metadata === void 0 ? void 0 : metadata.icon, createElement(Text, {
+      style: sectionHeaderTitleStyles
+    }, metadata === null || metadata === void 0 ? void 0 : metadata.title)));
+  };
+
+  return createElement(SectionList, _extends({
     onLayout: onLayout,
-    key: `InserterUI-${name}-${numberOfColumns}` // Re-render when numberOfColumns changes.
-    ,
     testID: `InserterUI-${name}`,
     keyboardShouldPersistTaps: "always",
-    numColumns: numberOfColumns,
-    data: items,
+    sections: sections,
     initialNumToRender: initialNumToRender,
-    ItemSeparatorComponent: () => createElement(TouchableWithoutFeedback, {
-      accessible: false
-    }, createElement(View, {
-      style: styles['block-types-list__row-separator']
-    })),
-    keyExtractor: item => item.id,
-    renderItem: _ref2 => {
-      let {
-        item
-      } = _ref2;
-      return createElement(InserterButton, {
-        item,
-        itemWidth,
-        maxWidth,
-        onSelect
-      });
-    }
+    renderItem: renderSection,
+    renderSectionHeader: renderSectionHeader
   }, listProps, {
     contentContainerStyle: { ...contentContainerStyle,
       paddingBottom: Math.max(listProps.safeAreaBottomInset, contentContainerStyle.paddingBottom)

package/build-module/components/block-types-list/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-types-list/index.native.js"],"names":["Dimensions","FlatList","StyleSheet","TouchableWithoutFeedback","View","useState","useEffect","BottomSheet","InserterButton","styles","MIN_COL_NUM","BlockTypesList","name","items","onSelect","listProps","initialNumToRender","numberOfColumns","setNumberOfColumns","itemWidth","setItemWidth","maxWidth","setMaxWidth","dimensionsChangeSubscription","addEventListener","onLayout","remove","calculateItemWidth","paddingLeft","itemPaddingLeft","paddingRight","itemPaddingRight","Styles","modalItem","width","modalIconWrapper","columnStyle","sumLeftRightPadding","bottomSheetWidth","getWidth","containerTotalWidth","itemTotalWidth","columnsFitToWidth","Math","floor","numColumns","max","updatedItemWidth","contentContainerStyle","flatten","item","id","paddingBottom","safeAreaBottomInset"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tDimensions,\n\tFlatList,\n\tStyleSheet,\n\tTouchableWithoutFeedback,\n\tView,\n} from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport { BottomSheet, InserterButton } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst MIN_COL_NUM = 3;\n\nexport default function BlockTypesList( {\n\tname,\n\titems,\n\tonSelect,\n\tlistProps,\n\tinitialNumToRender = 3,\n} ) {\n\tconst [ numberOfColumns, setNumberOfColumns ] = useState( MIN_COL_NUM );\n\tconst [ itemWidth, setItemWidth ] = useState();\n\tconst [ maxWidth, setMaxWidth ] = useState();\n\n\tuseEffect( () => {\n\t\tconst dimensionsChangeSubscription = Dimensions.addEventListener(\n\t\t\t'change',\n\t\t\tonLayout\n\t\t);\n\t\tonLayout();\n\t\treturn () => {\n\t\t\tdimensionsChangeSubscription.remove();\n\t\t};\n\t}, [] );\n\n\tfunction calculateItemWidth() {\n\t\tconst { paddingLeft: itemPaddingLeft, paddingRight: itemPaddingRight } =\n\t\t\tInserterButton.Styles.modalItem;\n\t\tconst { width } = InserterButton.Styles.modalIconWrapper;\n\t\treturn width + itemPaddingLeft + itemPaddingRight;\n\t}\n\n\tfunction onLayout() {\n\t\tconst columnStyle = styles[ 'block-types-list__column' ];\n\t\tconst sumLeftRightPadding =\n\t\t\tcolumnStyle.paddingLeft + columnStyle.paddingRight;\n\n\t\tconst bottomSheetWidth = BottomSheet.getWidth();\n\t\tconst containerTotalWidth = bottomSheetWidth - sumLeftRightPadding;\n\t\tconst itemTotalWidth = calculateItemWidth();\n\n\t\tconst columnsFitToWidth = Math.floor(\n\t\t\tcontainerTotalWidth / itemTotalWidth\n\t\t);\n\n\t\tconst numColumns = Math.max( MIN_COL_NUM, columnsFitToWidth );\n\n\t\tsetNumberOfColumns( numColumns );\n\t\tsetMaxWidth( containerTotalWidth / numColumns );\n\n\t\tif ( columnsFitToWidth < MIN_COL_NUM ) {\n\t\t\tconst updatedItemWidth =\n\t\t\t\t( bottomSheetWidth - 2 * sumLeftRightPadding ) / MIN_COL_NUM;\n\t\t\tsetItemWidth( updatedItemWidth );\n\t\t}\n\t}\n\n\tconst contentContainerStyle = StyleSheet.flatten(\n\t\tlistProps.contentContainerStyle\n\t);\n\n\treturn (\n\t\t<FlatList\n\t\t\tonLayout={ onLayout }\n\t\t\tkey={ `InserterUI-${ name }-${ numberOfColumns }` } // Re-render when numberOfColumns changes.\n\t\t\ttestID={ `InserterUI-${ name }` }\n\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\tnumColumns={ numberOfColumns }\n\t\t\tdata={ items }\n\t\t\tinitialNumToRender={ initialNumToRender }\n\t\t\tItemSeparatorComponent={ () => (\n\t\t\t\t<TouchableWithoutFeedback accessible={ false }>\n\t\t\t\t\t<View\n\t\t\t\t\t\tstyle={ styles[ 'block-types-list__row-separator' ] }\n\t\t\t\t\t/>\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t) }\n\t\t\tkeyExtractor={ ( item ) => item.id }\n\t\t\trenderItem={ ( { item } ) => (\n\t\t\t\t<InserterButton\n\t\t\t\t\t{ ...{\n\t\t\t\t\t\titem,\n\t\t\t\t\t\titemWidth,\n\t\t\t\t\t\tmaxWidth,\n\t\t\t\t\t\tonSelect,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ...listProps }\n\t\t\tcontentContainerStyle={ {\n\t\t\t\t...contentContainerStyle,\n\t\t\t\tpaddingBottom: Math.max(\n\t\t\t\t\tlistProps.safeAreaBottomInset,\n\t\t\t\t\tcontentContainerStyle.paddingBottom\n\t\t\t\t),\n\t\t\t} }\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-types-list/index.native.js"],"names":["Dimensions","FlatList","SectionList","StyleSheet","Text","TouchableWithoutFeedback","View","useState","useEffect","BottomSheet","Gradient","InserterButton","usePreferredColorScheme","usePreferredColorSchemeStyle","styles","MIN_COL_NUM","BlockTypesList","name","sections","onSelect","listProps","initialNumToRender","numberOfColumns","setNumberOfColumns","itemWidth","setItemWidth","maxWidth","setMaxWidth","dimensionsChangeSubscription","addEventListener","onLayout","remove","calculateItemWidth","paddingLeft","itemPaddingLeft","paddingRight","itemPaddingRight","Styles","modalItem","width","modalIconWrapper","columnStyle","sumLeftRightPadding","bottomSheetWidth","getWidth","containerTotalWidth","itemTotalWidth","columnsFitToWidth","Math","floor","numColumns","max","updatedItemWidth","contentContainerStyle","flatten","renderSection","item","list","renderListItem","colorScheme","sectionHeaderGradientValue","sectionHeaderTitleStyles","renderSectionHeader","section","metadata","icon","title","paddingBottom","safeAreaBottomInset"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tDimensions,\n\tFlatList,\n\tSectionList,\n\tStyleSheet,\n\tText,\n\tTouchableWithoutFeedback,\n\tView,\n} from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport { BottomSheet, Gradient, InserterButton } from '@wordpress/components';\nimport {\n\tusePreferredColorScheme,\n\tusePreferredColorSchemeStyle,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst MIN_COL_NUM = 3;\n\nexport default function BlockTypesList( {\n\tname,\n\tsections,\n\tonSelect,\n\tlistProps,\n\tinitialNumToRender = 3,\n} ) {\n\tconst [ numberOfColumns, setNumberOfColumns ] = useState( MIN_COL_NUM );\n\tconst [ itemWidth, setItemWidth ] = useState();\n\tconst [ maxWidth, setMaxWidth ] = useState();\n\n\tuseEffect( () => {\n\t\tconst dimensionsChangeSubscription = Dimensions.addEventListener(\n\t\t\t'change',\n\t\t\tonLayout\n\t\t);\n\t\tonLayout();\n\t\treturn () => {\n\t\t\tdimensionsChangeSubscription.remove();\n\t\t};\n\t}, [] );\n\n\tfunction calculateItemWidth() {\n\t\tconst { paddingLeft: itemPaddingLeft, paddingRight: itemPaddingRight } =\n\t\t\tInserterButton.Styles.modalItem;\n\t\tconst { width } = InserterButton.Styles.modalIconWrapper;\n\t\treturn width + itemPaddingLeft + itemPaddingRight;\n\t}\n\n\tfunction onLayout() {\n\t\tconst columnStyle = styles[ 'block-types-list__column' ];\n\t\tconst sumLeftRightPadding =\n\t\t\tcolumnStyle.paddingLeft + columnStyle.paddingRight;\n\n\t\tconst bottomSheetWidth = BottomSheet.getWidth();\n\t\tconst containerTotalWidth = bottomSheetWidth - sumLeftRightPadding;\n\t\tconst itemTotalWidth = calculateItemWidth();\n\n\t\tconst columnsFitToWidth = Math.floor(\n\t\t\tcontainerTotalWidth / itemTotalWidth\n\t\t);\n\n\t\tconst numColumns = Math.max( MIN_COL_NUM, columnsFitToWidth );\n\n\t\tsetNumberOfColumns( numColumns );\n\t\tsetMaxWidth( containerTotalWidth / numColumns );\n\n\t\tif ( columnsFitToWidth < MIN_COL_NUM ) {\n\t\t\tconst updatedItemWidth =\n\t\t\t\t( bottomSheetWidth - 2 * sumLeftRightPadding ) / MIN_COL_NUM;\n\t\t\tsetItemWidth( updatedItemWidth );\n\t\t}\n\t}\n\n\tconst contentContainerStyle = StyleSheet.flatten(\n\t\tlistProps.contentContainerStyle\n\t);\n\n\tconst renderSection = ( { item } ) => {\n\t\treturn (\n\t\t\t<TouchableWithoutFeedback accessible={ false }>\n\t\t\t\t<FlatList\n\t\t\t\t\tdata={ item.list }\n\t\t\t\t\tkey={ `InserterUI-${ name }-${ numberOfColumns }` } // Re-render when numberOfColumns changes.\n\t\t\t\t\tnumColumns={ numberOfColumns }\n\t\t\t\t\tItemSeparatorComponent={ () => (\n\t\t\t\t\t\t<TouchableWithoutFeedback accessible={ false }>\n\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\tstyles[ 'block-types-list__row-separator' ]\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t) }\n\t\t\t\t\tscrollEnabled={ false }\n\t\t\t\t\trenderItem={ renderListItem }\n\t\t\t\t/>\n\t\t\t</TouchableWithoutFeedback>\n\t\t);\n\t};\n\n\tconst renderListItem = ( { item } ) => {\n\t\treturn (\n\t\t\t<InserterButton\n\t\t\t\titem={ item }\n\t\t\t\titemWidth={ itemWidth }\n\t\t\t\tmaxWidth={ maxWidth }\n\t\t\t\tonSelect={ onSelect }\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst colorScheme = usePreferredColorScheme();\n\tconst sectionHeaderGradientValue =\n\t\tcolorScheme === 'light'\n\t\t\t? 'linear-gradient(#fff 70%, rgba(255, 255, 255, 0))'\n\t\t\t: 'linear-gradient(#2e2e2e 70%, rgba(46, 46, 46, 0))';\n\tconst sectionHeaderTitleStyles = usePreferredColorSchemeStyle(\n\t\tstyles[ 'block-types-list__section-header-title' ],\n\t\tstyles[ 'block-types-list__section-header-title--dark' ]\n\t);\n\n\tconst renderSectionHeader = ( { section: { metadata } } ) => {\n\t\tif ( ! metadata?.icon || ! metadata?.title ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<TouchableWithoutFeedback accessible={ false }>\n\t\t\t\t<Gradient\n\t\t\t\t\tgradientValue={ sectionHeaderGradientValue }\n\t\t\t\t\tstyle={ styles[ 'block-types-list__section-header' ] }\n\t\t\t\t>\n\t\t\t\t\t{ metadata?.icon }\n\t\t\t\t\t<Text style={ sectionHeaderTitleStyles }>\n\t\t\t\t\t\t{ metadata?.title }\n\t\t\t\t\t</Text>\n\t\t\t\t</Gradient>\n\t\t\t</TouchableWithoutFeedback>\n\t\t);\n\t};\n\n\treturn (\n\t\t<SectionList\n\t\t\tonLayout={ onLayout }\n\t\t\ttestID={ `InserterUI-${ name }` }\n\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\tsections={ sections }\n\t\t\tinitialNumToRender={ initialNumToRender }\n\t\t\trenderItem={ renderSection }\n\t\t\trenderSectionHeader={ renderSectionHeader }\n\t\t\t{ ...listProps }\n\t\t\tcontentContainerStyle={ {\n\t\t\t\t...contentContainerStyle,\n\t\t\t\tpaddingBottom: Math.max(\n\t\t\t\t\tlistProps.safeAreaBottomInset,\n\t\t\t\t\tcontentContainerStyle.paddingBottom\n\t\t\t\t),\n\t\t\t} }\n\t\t/>\n\t);\n}\n"]}

package/build-module/components/colors-gradients/control.js

@@ -82,6 +82,7 @@ function ColorGradientControlInner(_ref) {
     })
   };
   return createElement(BaseControl, {
+    __nextHasNoMarginBottom: true,
     className: classnames('block-editor-color-gradient-control', className)
   }, createElement("fieldset", {
     className: "block-editor-color-gradient-control__fieldset"

package/build-module/components/colors-gradients/control.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/control.js"],"names":["classnames","every","isEmpty","BaseControl","__experimentalVStack","VStack","TabPanel","ColorPalette","GradientPicker","useSetting","colorsAndGradientKeys","TAB_COLOR","name","title","value","TAB_GRADIENT","TABS_SETTINGS","ColorGradientControlInner","colors","gradients","disableCustomColors","disableCustomGradients","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","className","label","onColorChange","onGradientChange","colorValue","gradientValue","clearable","showTitle","enableAlpha","canChooseAColor","canChooseAGradient","tabPanels","newColor","newGradient","tab","ColorGradientControlSelect","props","colorGradientSettings","ColorGradientControl","key","hasOwnProperty"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { every, isEmpty } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tBaseControl,\n\t__experimentalVStack as VStack,\n\tTabPanel,\n\tColorPalette,\n\tGradientPicker,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../use-setting';\n\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nconst TAB_COLOR = {\n\tname: 'color',\n\ttitle: 'Solid color',\n\tvalue: 'color',\n};\nconst TAB_GRADIENT = {\n\tname: 'gradient',\n\ttitle: 'Gradient',\n\tvalue: 'gradient',\n};\n\nconst TABS_SETTINGS = [ TAB_COLOR, TAB_GRADIENT ];\n\nfunction ColorGradientControlInner( {\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\t__experimentalHasMultipleOrigins,\n\t__experimentalIsRenderedInSidebar,\n\tclassName,\n\tlabel,\n\tonColorChange,\n\tonGradientChange,\n\tcolorValue,\n\tgradientValue,\n\tclearable,\n\tshowTitle = true,\n\tenableAlpha,\n} ) {\n\tconst canChooseAColor =\n\t\tonColorChange && ( ! isEmpty( colors ) || ! disableCustomColors );\n\tconst canChooseAGradient =\n\t\tonGradientChange &&\n\t\t( ! isEmpty( gradients ) || ! disableCustomGradients );\n\n\tif ( ! canChooseAColor && ! canChooseAGradient ) {\n\t\treturn null;\n\t}\n\n\tconst tabPanels = {\n\t\t[ TAB_COLOR.value ]: (\n\t\t\t<ColorPalette\n\t\t\t\tvalue={ colorValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAGradient\n\t\t\t\t\t\t? ( newColor ) => {\n\t\t\t\t\t\t\t\tonColorChange( newColor );\n\t\t\t\t\t\t\t\tonGradientChange();\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: onColorChange\n\t\t\t\t}\n\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t}\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t),\n\t\t[ TAB_GRADIENT.value ]: (\n\t\t\t<GradientPicker\n\t\t\t\tvalue={ gradientValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAColor\n\t\t\t\t\t\t? ( newGradient ) => {\n\t\t\t\t\t\t\t\tonGradientChange( newGradient );\n\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: onGradientChange\n\t\t\t\t}\n\t\t\t\t{ ...{ gradients, disableCustomGradients } }\n\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t}\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t/>\n\t\t),\n\t};\n\n\treturn (\n\t\t<BaseControl\n\t\t\tclassName={ classnames(\n\t\t\t\t'block-editor-color-gradient-control',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<fieldset className=\"block-editor-color-gradient-control__fieldset\">\n\t\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t\t{ showTitle && (\n\t\t\t\t\t\t<legend>\n\t\t\t\t\t\t\t<div className=\"block-editor-color-gradient-control__color-indicator\">\n\t\t\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</legend>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canChooseAColor && canChooseAGradient && (\n\t\t\t\t\t\t<TabPanel\n\t\t\t\t\t\t\tclassName=\"block-editor-color-gradient-control__tabs\"\n\t\t\t\t\t\t\ttabs={ TABS_SETTINGS }\n\t\t\t\t\t\t\tinitialTabName={\n\t\t\t\t\t\t\t\tgradientValue\n\t\t\t\t\t\t\t\t\t? TAB_GRADIENT.value\n\t\t\t\t\t\t\t\t\t: !! canChooseAColor && TAB_COLOR.value\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ ( tab ) => (\n\t\t\t\t\t\t\t\t<div className=\"block-editor-color-gradient-control__tab-panel\">\n\t\t\t\t\t\t\t\t\t{ tabPanels[ tab.value ] }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</TabPanel>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canChooseAGradient && tabPanels[ TAB_COLOR.value ] }\n\t\t\t\t\t{ ! canChooseAColor && tabPanels[ TAB_GRADIENT.value ] }\n\t\t\t\t</VStack>\n\t\t\t</fieldset>\n\t\t</BaseControl>\n\t);\n}\n\nfunction ColorGradientControlSelect( props ) {\n\tconst colorGradientSettings = {};\n\tcolorGradientSettings.colors = useSetting( 'color.palette' );\n\tcolorGradientSettings.gradients = useSetting( 'color.gradients' );\n\tcolorGradientSettings.disableCustomColors = ! useSetting( 'color.custom' );\n\tcolorGradientSettings.disableCustomGradients = ! useSetting(\n\t\t'color.customGradient'\n\t);\n\n\treturn (\n\t\t<ColorGradientControlInner\n\t\t\t{ ...{ ...colorGradientSettings, ...props } }\n\t\t/>\n\t);\n}\n\nfunction ColorGradientControl( props ) {\n\tif (\n\t\tevery( colorsAndGradientKeys, ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <ColorGradientControlInner { ...props } />;\n\t}\n\treturn <ColorGradientControlSelect { ...props } />;\n}\n\nexport default ColorGradientControl;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/control.js"],"names":["classnames","every","isEmpty","BaseControl","__experimentalVStack","VStack","TabPanel","ColorPalette","GradientPicker","useSetting","colorsAndGradientKeys","TAB_COLOR","name","title","value","TAB_GRADIENT","TABS_SETTINGS","ColorGradientControlInner","colors","gradients","disableCustomColors","disableCustomGradients","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","className","label","onColorChange","onGradientChange","colorValue","gradientValue","clearable","showTitle","enableAlpha","canChooseAColor","canChooseAGradient","tabPanels","newColor","newGradient","tab","ColorGradientControlSelect","props","colorGradientSettings","ColorGradientControl","key","hasOwnProperty"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { every, isEmpty } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tBaseControl,\n\t__experimentalVStack as VStack,\n\tTabPanel,\n\tColorPalette,\n\tGradientPicker,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../use-setting';\n\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nconst TAB_COLOR = {\n\tname: 'color',\n\ttitle: 'Solid color',\n\tvalue: 'color',\n};\nconst TAB_GRADIENT = {\n\tname: 'gradient',\n\ttitle: 'Gradient',\n\tvalue: 'gradient',\n};\n\nconst TABS_SETTINGS = [ TAB_COLOR, TAB_GRADIENT ];\n\nfunction ColorGradientControlInner( {\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\t__experimentalHasMultipleOrigins,\n\t__experimentalIsRenderedInSidebar,\n\tclassName,\n\tlabel,\n\tonColorChange,\n\tonGradientChange,\n\tcolorValue,\n\tgradientValue,\n\tclearable,\n\tshowTitle = true,\n\tenableAlpha,\n} ) {\n\tconst canChooseAColor =\n\t\tonColorChange && ( ! isEmpty( colors ) || ! disableCustomColors );\n\tconst canChooseAGradient =\n\t\tonGradientChange &&\n\t\t( ! isEmpty( gradients ) || ! disableCustomGradients );\n\n\tif ( ! canChooseAColor && ! canChooseAGradient ) {\n\t\treturn null;\n\t}\n\n\tconst tabPanels = {\n\t\t[ TAB_COLOR.value ]: (\n\t\t\t<ColorPalette\n\t\t\t\tvalue={ colorValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAGradient\n\t\t\t\t\t\t? ( newColor ) => {\n\t\t\t\t\t\t\t\tonColorChange( newColor );\n\t\t\t\t\t\t\t\tonGradientChange();\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: onColorChange\n\t\t\t\t}\n\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t}\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t),\n\t\t[ TAB_GRADIENT.value ]: (\n\t\t\t<GradientPicker\n\t\t\t\tvalue={ gradientValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAColor\n\t\t\t\t\t\t? ( newGradient ) => {\n\t\t\t\t\t\t\t\tonGradientChange( newGradient );\n\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: onGradientChange\n\t\t\t\t}\n\t\t\t\t{ ...{ gradients, disableCustomGradients } }\n\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t}\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t/>\n\t\t),\n\t};\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tclassName={ classnames(\n\t\t\t\t'block-editor-color-gradient-control',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<fieldset className=\"block-editor-color-gradient-control__fieldset\">\n\t\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t\t{ showTitle && (\n\t\t\t\t\t\t<legend>\n\t\t\t\t\t\t\t<div className=\"block-editor-color-gradient-control__color-indicator\">\n\t\t\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</legend>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canChooseAColor && canChooseAGradient && (\n\t\t\t\t\t\t<TabPanel\n\t\t\t\t\t\t\tclassName=\"block-editor-color-gradient-control__tabs\"\n\t\t\t\t\t\t\ttabs={ TABS_SETTINGS }\n\t\t\t\t\t\t\tinitialTabName={\n\t\t\t\t\t\t\t\tgradientValue\n\t\t\t\t\t\t\t\t\t? TAB_GRADIENT.value\n\t\t\t\t\t\t\t\t\t: !! canChooseAColor && TAB_COLOR.value\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ ( tab ) => (\n\t\t\t\t\t\t\t\t<div className=\"block-editor-color-gradient-control__tab-panel\">\n\t\t\t\t\t\t\t\t\t{ tabPanels[ tab.value ] }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</TabPanel>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canChooseAGradient && tabPanels[ TAB_COLOR.value ] }\n\t\t\t\t\t{ ! canChooseAColor && tabPanels[ TAB_GRADIENT.value ] }\n\t\t\t\t</VStack>\n\t\t\t</fieldset>\n\t\t</BaseControl>\n\t);\n}\n\nfunction ColorGradientControlSelect( props ) {\n\tconst colorGradientSettings = {};\n\tcolorGradientSettings.colors = useSetting( 'color.palette' );\n\tcolorGradientSettings.gradients = useSetting( 'color.gradients' );\n\tcolorGradientSettings.disableCustomColors = ! useSetting( 'color.custom' );\n\tcolorGradientSettings.disableCustomGradients = ! useSetting(\n\t\t'color.customGradient'\n\t);\n\n\treturn (\n\t\t<ColorGradientControlInner\n\t\t\t{ ...{ ...colorGradientSettings, ...props } }\n\t\t/>\n\t);\n}\n\nfunction ColorGradientControl( props ) {\n\tif (\n\t\tevery( colorsAndGradientKeys, ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <ColorGradientControlInner { ...props } />;\n\t}\n\treturn <ColorGradientControlSelect { ...props } />;\n}\n\nexport default ColorGradientControl;\n"]}

package/build-module/components/colors-gradients/dropdown.js

@@ -9,7 +9,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 
-import { Button, ColorIndicator, Dropdown, FlexItem, __experimentalHStack as HStack, __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
+import { Button, ColorIndicator, Dropdown, FlexItem, __experimentalDropdownContentWrapper as DropdownContentWrapper, __experimentalHStack as HStack, __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
 /**
  * Internal dependencies
  */
@@ -148,9 +148,12 @@ export default function ColorGradientSettingsDropdown(_ref4) {
     }, props), createElement(Dropdown, {
       popoverProps: popoverProps,
       className: "block-editor-tools-panel-color-gradient-settings__dropdown",
-      contentClassName: "block-editor-panel-color-gradient-settings__dropdown-content",
       renderToggle: renderToggle(toggleSettings),
-      renderContent: () => createElement(ColorGradientControl, controlProps)
+      renderContent: () => createElement(DropdownContentWrapper, {
+        paddingSize: "medium"
+      }, createElement("div", {
+        className: "block-editor-panel-color-gradient-settings__dropdown-content"
+      }, createElement(ColorGradientControl, controlProps)))
     }));
   }));
 }

package/build-module/components/colors-gradients/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/dropdown.js"],"names":["classnames","Button","ColorIndicator","Dropdown","FlexItem","__experimentalHStack","HStack","__experimentalToolsPanelItem","ToolsPanelItem","ColorGradientControl","WithToolsPanelItem","setting","children","panelId","props","clearValue","colorValue","onColorChange","gradientValue","onGradientChange","label","isShownByDefault","undefined","resetAllFilter","LabeledColorIndicator","renderToggle","settings","onToggle","isOpen","toggleProps","onClick","className","ColorGradientSettingsDropdown","colors","disableCustomColors","disableCustomGradients","enableAlpha","gradients","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","popoverProps","placement","offset","__unstableShift","map","index","controlProps","clearable","showTitle","toggleSettings"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tColorIndicator,\n\tDropdown,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ColorGradientControl from './control';\n\n// When the `ColorGradientSettingsDropdown` controls are being rendered to a\n// `ToolsPanel` they must be wrapped in a `ToolsPanelItem`.\nconst WithToolsPanelItem = ( { setting, children, panelId, ...props } ) => {\n\tconst clearValue = () => {\n\t\tif ( setting.colorValue ) {\n\t\t\tsetting.onColorChange();\n\t\t} else if ( setting.gradientValue ) {\n\t\t\tsetting.onGradientChange();\n\t\t}\n\t};\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\thasValue={ () => {\n\t\t\t\treturn !! setting.colorValue || !! setting.gradientValue;\n\t\t\t} }\n\t\t\tlabel={ setting.label }\n\t\t\tonDeselect={ clearValue }\n\t\t\tisShownByDefault={\n\t\t\t\tsetting.isShownByDefault !== undefined\n\t\t\t\t\t? setting.isShownByDefault\n\t\t\t\t\t: true\n\t\t\t}\n\t\t\t{ ...props }\n\t\t\tclassName=\"block-editor-tools-panel-color-gradient-settings__item\"\n\t\t\tpanelId={ panelId }\n\t\t\t// Pass resetAllFilter if supplied due to rendering via SlotFill\n\t\t\t// into parent ToolsPanel.\n\t\t\tresetAllFilter={ setting.resetAllFilter }\n\t\t>\n\t\t\t{ children }\n\t\t</ToolsPanelItem>\n\t);\n};\n\nconst LabeledColorIndicator = ( { colorValue, label } ) => (\n\t<HStack justify=\"flex-start\">\n\t\t<ColorIndicator\n\t\t\tclassName=\"block-editor-panel-color-gradient-settings__color-indicator\"\n\t\t\tcolorValue={ colorValue }\n\t\t/>\n\t\t<FlexItem>{ label }</FlexItem>\n\t</HStack>\n);\n\n// Renders a color dropdown's toggle as an `Item` if it is within an `ItemGroup`\n// or as a `Button` if it isn't e.g. the controls are being rendered in\n// a `ToolsPanel`.\nconst renderToggle =\n\t( settings ) =>\n\t( { onToggle, isOpen } ) => {\n\t\tconst { colorValue, label } = settings;\n\n\t\tconst toggleProps = {\n\t\t\tonClick: onToggle,\n\t\t\tclassName: classnames(\n\t\t\t\t'block-editor-panel-color-gradient-settings__dropdown',\n\t\t\t\t{ 'is-open': isOpen }\n\t\t\t),\n\t\t\t'aria-expanded': isOpen,\n\t\t};\n\n\t\treturn (\n\t\t\t<Button { ...toggleProps }>\n\t\t\t\t<LabeledColorIndicator\n\t\t\t\t\tcolorValue={ colorValue }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t/>\n\t\t\t</Button>\n\t\t);\n\t};\n\n// Renders a collection of color controls as dropdowns. Depending upon the\n// context in which these dropdowns are being rendered, they may be wrapped\n// in an `ItemGroup` with each dropdown's toggle as an `Item`, or alternatively,\n// the may be individually wrapped in a `ToolsPanelItem` with the toggle as\n// a regular `Button`.\n//\n// For more context see: https://github.com/WordPress/gutenberg/pull/40084\nexport default function ColorGradientSettingsDropdown( {\n\tcolors,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\tenableAlpha,\n\tgradients,\n\tsettings,\n\t__experimentalHasMultipleOrigins,\n\t__experimentalIsRenderedInSidebar,\n\t...props\n} ) {\n\tlet popoverProps;\n\tif ( __experimentalIsRenderedInSidebar ) {\n\t\tpopoverProps = {\n\t\t\tplacement: 'left-start',\n\t\t\toffset: 36,\n\t\t\t__unstableShift: true,\n\t\t};\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ settings.map( ( setting, index ) => {\n\t\t\t\tconst controlProps = {\n\t\t\t\t\tclearable: false,\n\t\t\t\t\tcolorValue: setting.colorValue,\n\t\t\t\t\tcolors,\n\t\t\t\t\tdisableCustomColors,\n\t\t\t\t\tdisableCustomGradients,\n\t\t\t\t\tenableAlpha,\n\t\t\t\t\tgradientValue: setting.gradientValue,\n\t\t\t\t\tgradients,\n\t\t\t\t\tlabel: setting.label,\n\t\t\t\t\tonColorChange: setting.onColorChange,\n\t\t\t\t\tonGradientChange: setting.onGradientChange,\n\t\t\t\t\tshowTitle: false,\n\t\t\t\t\t__experimentalHasMultipleOrigins,\n\t\t\t\t\t__experimentalIsRenderedInSidebar,\n\t\t\t\t\t...setting,\n\t\t\t\t};\n\t\t\t\tconst toggleSettings = {\n\t\t\t\t\tcolorValue: setting.gradientValue ?? setting.colorValue,\n\t\t\t\t\tlabel: setting.label,\n\t\t\t\t};\n\n\t\t\t\treturn (\n\t\t\t\t\tsetting && (\n\t\t\t\t\t\t// If not in an `ItemGroup` wrap the dropdown in a\n\t\t\t\t\t\t// `ToolsPanelItem`\n\t\t\t\t\t\t<WithToolsPanelItem\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tsetting={ setting }\n\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t\t\tclassName=\"block-editor-tools-panel-color-gradient-settings__dropdown\"\n\t\t\t\t\t\t\t\tcontentClassName=\"block-editor-panel-color-gradient-settings__dropdown-content\"\n\t\t\t\t\t\t\t\trenderToggle={ renderToggle( toggleSettings ) }\n\t\t\t\t\t\t\t\trenderContent={ () => (\n\t\t\t\t\t\t\t\t\t<ColorGradientControl { ...controlProps } />\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</WithToolsPanelItem>\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/dropdown.js"],"names":["classnames","Button","ColorIndicator","Dropdown","FlexItem","__experimentalDropdownContentWrapper","DropdownContentWrapper","__experimentalHStack","HStack","__experimentalToolsPanelItem","ToolsPanelItem","ColorGradientControl","WithToolsPanelItem","setting","children","panelId","props","clearValue","colorValue","onColorChange","gradientValue","onGradientChange","label","isShownByDefault","undefined","resetAllFilter","LabeledColorIndicator","renderToggle","settings","onToggle","isOpen","toggleProps","onClick","className","ColorGradientSettingsDropdown","colors","disableCustomColors","disableCustomGradients","enableAlpha","gradients","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","popoverProps","placement","offset","__unstableShift","map","index","controlProps","clearable","showTitle","toggleSettings"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tColorIndicator,\n\tDropdown,\n\tFlexItem,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n\t__experimentalHStack as HStack,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ColorGradientControl from './control';\n\n// When the `ColorGradientSettingsDropdown` controls are being rendered to a\n// `ToolsPanel` they must be wrapped in a `ToolsPanelItem`.\nconst WithToolsPanelItem = ( { setting, children, panelId, ...props } ) => {\n\tconst clearValue = () => {\n\t\tif ( setting.colorValue ) {\n\t\t\tsetting.onColorChange();\n\t\t} else if ( setting.gradientValue ) {\n\t\t\tsetting.onGradientChange();\n\t\t}\n\t};\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\thasValue={ () => {\n\t\t\t\treturn !! setting.colorValue || !! setting.gradientValue;\n\t\t\t} }\n\t\t\tlabel={ setting.label }\n\t\t\tonDeselect={ clearValue }\n\t\t\tisShownByDefault={\n\t\t\t\tsetting.isShownByDefault !== undefined\n\t\t\t\t\t? setting.isShownByDefault\n\t\t\t\t\t: true\n\t\t\t}\n\t\t\t{ ...props }\n\t\t\tclassName=\"block-editor-tools-panel-color-gradient-settings__item\"\n\t\t\tpanelId={ panelId }\n\t\t\t// Pass resetAllFilter if supplied due to rendering via SlotFill\n\t\t\t// into parent ToolsPanel.\n\t\t\tresetAllFilter={ setting.resetAllFilter }\n\t\t>\n\t\t\t{ children }\n\t\t</ToolsPanelItem>\n\t);\n};\n\nconst LabeledColorIndicator = ( { colorValue, label } ) => (\n\t<HStack justify=\"flex-start\">\n\t\t<ColorIndicator\n\t\t\tclassName=\"block-editor-panel-color-gradient-settings__color-indicator\"\n\t\t\tcolorValue={ colorValue }\n\t\t/>\n\t\t<FlexItem>{ label }</FlexItem>\n\t</HStack>\n);\n\n// Renders a color dropdown's toggle as an `Item` if it is within an `ItemGroup`\n// or as a `Button` if it isn't e.g. the controls are being rendered in\n// a `ToolsPanel`.\nconst renderToggle =\n\t( settings ) =>\n\t( { onToggle, isOpen } ) => {\n\t\tconst { colorValue, label } = settings;\n\n\t\tconst toggleProps = {\n\t\t\tonClick: onToggle,\n\t\t\tclassName: classnames(\n\t\t\t\t'block-editor-panel-color-gradient-settings__dropdown',\n\t\t\t\t{ 'is-open': isOpen }\n\t\t\t),\n\t\t\t'aria-expanded': isOpen,\n\t\t};\n\n\t\treturn (\n\t\t\t<Button { ...toggleProps }>\n\t\t\t\t<LabeledColorIndicator\n\t\t\t\t\tcolorValue={ colorValue }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t/>\n\t\t\t</Button>\n\t\t);\n\t};\n\n// Renders a collection of color controls as dropdowns. Depending upon the\n// context in which these dropdowns are being rendered, they may be wrapped\n// in an `ItemGroup` with each dropdown's toggle as an `Item`, or alternatively,\n// the may be individually wrapped in a `ToolsPanelItem` with the toggle as\n// a regular `Button`.\n//\n// For more context see: https://github.com/WordPress/gutenberg/pull/40084\nexport default function ColorGradientSettingsDropdown( {\n\tcolors,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\tenableAlpha,\n\tgradients,\n\tsettings,\n\t__experimentalHasMultipleOrigins,\n\t__experimentalIsRenderedInSidebar,\n\t...props\n} ) {\n\tlet popoverProps;\n\tif ( __experimentalIsRenderedInSidebar ) {\n\t\tpopoverProps = {\n\t\t\tplacement: 'left-start',\n\t\t\toffset: 36,\n\t\t\t__unstableShift: true,\n\t\t};\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ settings.map( ( setting, index ) => {\n\t\t\t\tconst controlProps = {\n\t\t\t\t\tclearable: false,\n\t\t\t\t\tcolorValue: setting.colorValue,\n\t\t\t\t\tcolors,\n\t\t\t\t\tdisableCustomColors,\n\t\t\t\t\tdisableCustomGradients,\n\t\t\t\t\tenableAlpha,\n\t\t\t\t\tgradientValue: setting.gradientValue,\n\t\t\t\t\tgradients,\n\t\t\t\t\tlabel: setting.label,\n\t\t\t\t\tonColorChange: setting.onColorChange,\n\t\t\t\t\tonGradientChange: setting.onGradientChange,\n\t\t\t\t\tshowTitle: false,\n\t\t\t\t\t__experimentalHasMultipleOrigins,\n\t\t\t\t\t__experimentalIsRenderedInSidebar,\n\t\t\t\t\t...setting,\n\t\t\t\t};\n\t\t\t\tconst toggleSettings = {\n\t\t\t\t\tcolorValue: setting.gradientValue ?? setting.colorValue,\n\t\t\t\t\tlabel: setting.label,\n\t\t\t\t};\n\n\t\t\t\treturn (\n\t\t\t\t\tsetting && (\n\t\t\t\t\t\t// If not in an `ItemGroup` wrap the dropdown in a\n\t\t\t\t\t\t// `ToolsPanelItem`\n\t\t\t\t\t\t<WithToolsPanelItem\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tsetting={ setting }\n\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t\t\tclassName=\"block-editor-tools-panel-color-gradient-settings__dropdown\"\n\t\t\t\t\t\t\t\trenderToggle={ renderToggle( toggleSettings ) }\n\t\t\t\t\t\t\t\trenderContent={ () => (\n\t\t\t\t\t\t\t\t\t<DropdownContentWrapper paddingSize=\"medium\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"block-editor-panel-color-gradient-settings__dropdown-content\">\n\t\t\t\t\t\t\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\t\t\t\t\t\t\t{ ...controlProps }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</DropdownContentWrapper>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</WithToolsPanelItem>\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n"]}

package/build-module/components/image-editor/cropper.js

@@ -23,7 +23,8 @@ export default function ImageCropper(_ref) {
     height,
     clientWidth,
     naturalHeight,
-    naturalWidth
+    naturalWidth,
+    borderProps
   } = _ref;
   const {
     isInProgress,
@@ -43,10 +44,10 @@ export default function ImageCropper(_ref) {
   }
 
   return createElement("div", {
-    className: classnames('wp-block-image__crop-area', {
+    className: classnames('wp-block-image__crop-area', borderProps === null || borderProps === void 0 ? void 0 : borderProps.className, {
       'is-applying': isInProgress
     }),
-    style: {
+    style: { ...(borderProps === null || borderProps === void 0 ? void 0 : borderProps.style),
       width: width || clientWidth,
       height: editedHeight
     }

package/build-module/components/image-editor/cropper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/image-editor/cropper.js"],"names":["Cropper","classnames","Spinner","MIN_ZOOM","MAX_ZOOM","useImageEditingContext","ImageCropper","url","width","height","clientWidth","naturalHeight","naturalWidth","isInProgress","editedUrl","position","zoom","aspect","setPosition","setCrop","setZoom","rotation","editedHeight","newCropPercent","newZoom"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,OAAP,MAAoB,iBAApB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,OAAT,QAAwB,uBAAxB;AAEA;AACA;AACA;;AACA,SAASC,QAAT,EAAmBC,QAAnB,QAAmC,aAAnC;AAEA,SAASC,sBAAT,QAAuC,WAAvC;AAEA,eAAe,SAASC,YAAT,OAOX;AAAA,MAPkC;AACrCC,IAAAA,GADqC;AAErCC,IAAAA,KAFqC;AAGrCC,IAAAA,MAHqC;AAIrCC,IAAAA,WAJqC;AAKrCC,IAAAA,aALqC;AAMrCC,IAAAA;AANqC,GAOlC;AACH,QAAM;AACLC,IAAAA,YADK;AAELC,IAAAA,SAFK;AAGLC,IAAAA,QAHK;AAILC,IAAAA,IAJK;AAKLC,IAAAA,MALK;AAMLC,IAAAA,WANK;AAOLC,IAAAA,OAPK;AAQLC,IAAAA,OARK;AASLC,IAAAA;AATK,MAUFhB,sBAAsB,EAV1B;AAYA,MAAIiB,YAAY,GAAGb,MAAM,IAAMC,WAAW,GAAGC,aAAhB,GAAkCC,YAA/D;;AAEA,MAAKS,QAAQ,GAAG,GAAX,KAAmB,EAAxB,EAA6B;AAC5BC,IAAAA,YAAY,GAAKZ,WAAW,GAAGE,YAAhB,GAAiCD,aAAhD;AACA;;AAED,SACC;AACC,IAAA,SAAS,EAAGV,UAAU,CAAE,2BAAF,EAA+B;AACpD,qBAAeY;AADqC,KAA/B,CADvB;AAIC,IAAA,KAAK,EAAG;AACPL,MAAAA,KAAK,EAAEA,KAAK,IAAIE,WADT;AAEPD,MAAAA,MAAM,EAAEa;AAFD;AAJT,KASC,cAAC,OAAD;AACC,IAAA,KAAK,EAAGR,SAAS,IAAIP,GADtB;AAEC,IAAA,QAAQ,EAAGM,YAFZ;AAGC,IAAA,OAAO,EAAGV,QAAQ,GAAG,GAHtB;AAIC,IAAA,OAAO,EAAGC,QAAQ,GAAG,GAJtB;AAKC,IAAA,IAAI,EAAGW,QALR;AAMC,IAAA,IAAI,EAAGC,IAAI,GAAG,GANf;AAOC,IAAA,MAAM,EAAGC,MAPV;AAQC,IAAA,YAAY,EAAGC,WARhB;AASC,IAAA,cAAc,EAAKK,cAAF,IAAsB;AACtCJ,MAAAA,OAAO,CAAEI,cAAF,CAAP;AACA,KAXF;AAYC,IAAA,YAAY,EAAKC,OAAF,IAAe;AAC7BJ,MAAAA,OAAO,CAAEI,OAAO,GAAG,GAAZ,CAAP;AACA;AAdF,IATD,EAyBGX,YAAY,IAAI,cAAC,OAAD,OAzBnB,CADD;AA6BA","sourcesContent":["/**\n * External dependencies\n */\nimport Cropper from 'react-easy-crop';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Spinner } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { MIN_ZOOM, MAX_ZOOM } from './constants';\n\nimport { useImageEditingContext } from './context';\n\nexport default function ImageCropper( {\n\turl,\n\twidth,\n\theight,\n\tclientWidth,\n\tnaturalHeight,\n\tnaturalWidth,\n} ) {\n\tconst {\n\t\tisInProgress,\n\t\teditedUrl,\n\t\tposition,\n\t\tzoom,\n\t\taspect,\n\t\tsetPosition,\n\t\tsetCrop,\n\t\tsetZoom,\n\t\trotation,\n\t} = useImageEditingContext();\n\n\tlet editedHeight = height || ( clientWidth * naturalHeight ) / naturalWidth;\n\n\tif ( rotation % 180 === 90 ) {\n\t\teditedHeight = ( clientWidth * naturalWidth ) / naturalHeight;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames( 'wp-block-image__crop-area', {\n\t\t\t\t'is-applying': isInProgress,\n\t\t\t} ) }\n\t\t\tstyle={ {\n\t\t\t\twidth: width || clientWidth,\n\t\t\t\theight: editedHeight,\n\t\t\t} }\n\t\t>\n\t\t\t<Cropper\n\t\t\t\timage={ editedUrl || url }\n\t\t\t\tdisabled={ isInProgress }\n\t\t\t\tminZoom={ MIN_ZOOM / 100 }\n\t\t\t\tmaxZoom={ MAX_ZOOM / 100 }\n\t\t\t\tcrop={ position }\n\t\t\t\tzoom={ zoom / 100 }\n\t\t\t\taspect={ aspect }\n\t\t\t\tonCropChange={ setPosition }\n\t\t\t\tonCropComplete={ ( newCropPercent ) => {\n\t\t\t\t\tsetCrop( newCropPercent );\n\t\t\t\t} }\n\t\t\t\tonZoomChange={ ( newZoom ) => {\n\t\t\t\t\tsetZoom( newZoom * 100 );\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ isInProgress && <Spinner /> }\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/image-editor/cropper.js"],"names":["Cropper","classnames","Spinner","MIN_ZOOM","MAX_ZOOM","useImageEditingContext","ImageCropper","url","width","height","clientWidth","naturalHeight","naturalWidth","borderProps","isInProgress","editedUrl","position","zoom","aspect","setPosition","setCrop","setZoom","rotation","editedHeight","className","style","newCropPercent","newZoom"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,OAAP,MAAoB,iBAApB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,OAAT,QAAwB,uBAAxB;AAEA;AACA;AACA;;AACA,SAASC,QAAT,EAAmBC,QAAnB,QAAmC,aAAnC;AAEA,SAASC,sBAAT,QAAuC,WAAvC;AAEA,eAAe,SAASC,YAAT,OAQX;AAAA,MARkC;AACrCC,IAAAA,GADqC;AAErCC,IAAAA,KAFqC;AAGrCC,IAAAA,MAHqC;AAIrCC,IAAAA,WAJqC;AAKrCC,IAAAA,aALqC;AAMrCC,IAAAA,YANqC;AAOrCC,IAAAA;AAPqC,GAQlC;AACH,QAAM;AACLC,IAAAA,YADK;AAELC,IAAAA,SAFK;AAGLC,IAAAA,QAHK;AAILC,IAAAA,IAJK;AAKLC,IAAAA,MALK;AAMLC,IAAAA,WANK;AAOLC,IAAAA,OAPK;AAQLC,IAAAA,OARK;AASLC,IAAAA;AATK,MAUFjB,sBAAsB,EAV1B;AAYA,MAAIkB,YAAY,GAAGd,MAAM,IAAMC,WAAW,GAAGC,aAAhB,GAAkCC,YAA/D;;AAEA,MAAKU,QAAQ,GAAG,GAAX,KAAmB,EAAxB,EAA6B;AAC5BC,IAAAA,YAAY,GAAKb,WAAW,GAAGE,YAAhB,GAAiCD,aAAhD;AACA;;AAED,SACC;AACC,IAAA,SAAS,EAAGV,UAAU,CACrB,2BADqB,EAErBY,WAFqB,aAErBA,WAFqB,uBAErBA,WAAW,CAAEW,SAFQ,EAGrB;AACC,qBAAeV;AADhB,KAHqB,CADvB;AAQC,IAAA,KAAK,EAAG,EACP,IAAGD,WAAH,aAAGA,WAAH,uBAAGA,WAAW,CAAEY,KAAhB,CADO;AAEPjB,MAAAA,KAAK,EAAEA,KAAK,IAAIE,WAFT;AAGPD,MAAAA,MAAM,EAAEc;AAHD;AART,KAcC,cAAC,OAAD;AACC,IAAA,KAAK,EAAGR,SAAS,IAAIR,GADtB;AAEC,IAAA,QAAQ,EAAGO,YAFZ;AAGC,IAAA,OAAO,EAAGX,QAAQ,GAAG,GAHtB;AAIC,IAAA,OAAO,EAAGC,QAAQ,GAAG,GAJtB;AAKC,IAAA,IAAI,EAAGY,QALR;AAMC,IAAA,IAAI,EAAGC,IAAI,GAAG,GANf;AAOC,IAAA,MAAM,EAAGC,MAPV;AAQC,IAAA,YAAY,EAAGC,WARhB;AASC,IAAA,cAAc,EAAKO,cAAF,IAAsB;AACtCN,MAAAA,OAAO,CAAEM,cAAF,CAAP;AACA,KAXF;AAYC,IAAA,YAAY,EAAKC,OAAF,IAAe;AAC7BN,MAAAA,OAAO,CAAEM,OAAO,GAAG,GAAZ,CAAP;AACA;AAdF,IAdD,EA8BGb,YAAY,IAAI,cAAC,OAAD,OA9BnB,CADD;AAkCA","sourcesContent":["/**\n * External dependencies\n */\nimport Cropper from 'react-easy-crop';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Spinner } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { MIN_ZOOM, MAX_ZOOM } from './constants';\n\nimport { useImageEditingContext } from './context';\n\nexport default function ImageCropper( {\n\turl,\n\twidth,\n\theight,\n\tclientWidth,\n\tnaturalHeight,\n\tnaturalWidth,\n\tborderProps,\n} ) {\n\tconst {\n\t\tisInProgress,\n\t\teditedUrl,\n\t\tposition,\n\t\tzoom,\n\t\taspect,\n\t\tsetPosition,\n\t\tsetCrop,\n\t\tsetZoom,\n\t\trotation,\n\t} = useImageEditingContext();\n\n\tlet editedHeight = height || ( clientWidth * naturalHeight ) / naturalWidth;\n\n\tif ( rotation % 180 === 90 ) {\n\t\teditedHeight = ( clientWidth * naturalWidth ) / naturalHeight;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'wp-block-image__crop-area',\n\t\t\t\tborderProps?.className,\n\t\t\t\t{\n\t\t\t\t\t'is-applying': isInProgress,\n\t\t\t\t}\n\t\t\t) }\n\t\t\tstyle={ {\n\t\t\t\t...borderProps?.style,\n\t\t\t\twidth: width || clientWidth,\n\t\t\t\theight: editedHeight,\n\t\t\t} }\n\t\t>\n\t\t\t<Cropper\n\t\t\t\timage={ editedUrl || url }\n\t\t\t\tdisabled={ isInProgress }\n\t\t\t\tminZoom={ MIN_ZOOM / 100 }\n\t\t\t\tmaxZoom={ MAX_ZOOM / 100 }\n\t\t\t\tcrop={ position }\n\t\t\t\tzoom={ zoom / 100 }\n\t\t\t\taspect={ aspect }\n\t\t\t\tonCropChange={ setPosition }\n\t\t\t\tonCropComplete={ ( newCropPercent ) => {\n\t\t\t\t\tsetCrop( newCropPercent );\n\t\t\t\t} }\n\t\t\t\tonZoomChange={ ( newZoom ) => {\n\t\t\t\t\tsetZoom( newZoom * 100 );\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ isInProgress && <Spinner /> }\n\t\t</div>\n\t);\n}\n"]}

package/build-module/components/image-editor/index.js

@@ -21,9 +21,11 @@ export default function ImageEditor(_ref) {
     height,
     clientWidth,
     naturalHeight,
-    naturalWidth
+    naturalWidth,
+    borderProps
   } = _ref;
   return createElement(Fragment, null, createElement(Cropper, {
+    borderProps: borderProps,
     url: url,
     width: width,
     height: height,

package/build-module/components/image-editor/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/image-editor/index.js"],"names":["ToolbarGroup","ToolbarItem","BlockControls","Cropper","ZoomDropdown","AspectRatioDropdown","RotationButton","FormControls","ImageEditor","url","width","height","clientWidth","naturalHeight","naturalWidth","toggleProps","default","ImageEditingProvider"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,YAAT,EAAuBC,WAAvB,QAA0C,uBAA1C;AAEA;AACA;AACA;;AACA,OAAOC,aAAP,MAA0B,mBAA1B;AACA,OAAOC,OAAP,MAAoB,WAApB;AACA,OAAOC,YAAP,MAAyB,iBAAzB;AACA,OAAOC,mBAAP,MAAgC,yBAAhC;AACA,OAAOC,cAAP,MAA2B,mBAA3B;AACA,OAAOC,YAAP,MAAyB,iBAAzB;AAEA,eAAe,SAASC,WAAT,OAOX;AAAA,MAPiC;AACpCC,IAAAA,GADoC;AAEpCC,IAAAA,KAFoC;AAGpCC,IAAAA,MAHoC;AAIpCC,IAAAA,WAJoC;AAKpCC,IAAAA,aALoC;AAMpCC,IAAAA;AANoC,GAOjC;AACH,SACC,8BACC,cAAC,OAAD;AACC,IAAA,GAAG,EAAGL,GADP;AAEC,IAAA,KAAK,EAAGC,KAFT;AAGC,IAAA,MAAM,EAAGC,MAHV;AAIC,IAAA,WAAW,EAAGC,WAJf;AAKC,IAAA,aAAa,EAAGC,aALjB;AAMC,IAAA,YAAY,EAAGC;AANhB,IADD,EASC,cAAC,aAAD,QACC,cAAC,YAAD,QACC,cAAC,YAAD,OADD,EAEC,cAAC,WAAD,QACKC,WAAF,IACD,cAAC,mBAAD;AAAqB,IAAA,WAAW,EAAGA;AAAnC,IAFF,CAFD,EAOC,cAAC,cAAD,OAPD,CADD,EAUC,cAAC,YAAD,QACC,cAAC,YAAD,OADD,CAVD,CATD,CADD;AA0BA;AAED,SAASC,OAAO,IAAIC,oBAApB,QAAgD,WAAhD","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { ToolbarGroup, ToolbarItem } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport BlockControls from '../block-controls';\nimport Cropper from './cropper';\nimport ZoomDropdown from './zoom-dropdown';\nimport AspectRatioDropdown from './aspect-ratio-dropdown';\nimport RotationButton from './rotation-button';\nimport FormControls from './form-controls';\n\nexport default function ImageEditor( {\n\turl,\n\twidth,\n\theight,\n\tclientWidth,\n\tnaturalHeight,\n\tnaturalWidth,\n} ) {\n\treturn (\n\t\t<>\n\t\t\t<Cropper\n\t\t\t\turl={ url }\n\t\t\t\twidth={ width }\n\t\t\t\theight={ height }\n\t\t\t\tclientWidth={ clientWidth }\n\t\t\t\tnaturalHeight={ naturalHeight }\n\t\t\t\tnaturalWidth={ naturalWidth }\n\t\t\t/>\n\t\t\t<BlockControls>\n\t\t\t\t<ToolbarGroup>\n\t\t\t\t\t<ZoomDropdown />\n\t\t\t\t\t<ToolbarItem>\n\t\t\t\t\t\t{ ( toggleProps ) => (\n\t\t\t\t\t\t\t<AspectRatioDropdown toggleProps={ toggleProps } />\n\t\t\t\t\t\t) }\n\t\t\t\t\t</ToolbarItem>\n\t\t\t\t\t<RotationButton />\n\t\t\t\t</ToolbarGroup>\n\t\t\t\t<ToolbarGroup>\n\t\t\t\t\t<FormControls />\n\t\t\t\t</ToolbarGroup>\n\t\t\t</BlockControls>\n\t\t</>\n\t);\n}\n\nexport { default as ImageEditingProvider } from './context';\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/image-editor/index.js"],"names":["ToolbarGroup","ToolbarItem","BlockControls","Cropper","ZoomDropdown","AspectRatioDropdown","RotationButton","FormControls","ImageEditor","url","width","height","clientWidth","naturalHeight","naturalWidth","borderProps","toggleProps","default","ImageEditingProvider"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,YAAT,EAAuBC,WAAvB,QAA0C,uBAA1C;AAEA;AACA;AACA;;AACA,OAAOC,aAAP,MAA0B,mBAA1B;AACA,OAAOC,OAAP,MAAoB,WAApB;AACA,OAAOC,YAAP,MAAyB,iBAAzB;AACA,OAAOC,mBAAP,MAAgC,yBAAhC;AACA,OAAOC,cAAP,MAA2B,mBAA3B;AACA,OAAOC,YAAP,MAAyB,iBAAzB;AAEA,eAAe,SAASC,WAAT,OAQX;AAAA,MARiC;AACpCC,IAAAA,GADoC;AAEpCC,IAAAA,KAFoC;AAGpCC,IAAAA,MAHoC;AAIpCC,IAAAA,WAJoC;AAKpCC,IAAAA,aALoC;AAMpCC,IAAAA,YANoC;AAOpCC,IAAAA;AAPoC,GAQjC;AACH,SACC,8BACC,cAAC,OAAD;AACC,IAAA,WAAW,EAAGA,WADf;AAEC,IAAA,GAAG,EAAGN,GAFP;AAGC,IAAA,KAAK,EAAGC,KAHT;AAIC,IAAA,MAAM,EAAGC,MAJV;AAKC,IAAA,WAAW,EAAGC,WALf;AAMC,IAAA,aAAa,EAAGC,aANjB;AAOC,IAAA,YAAY,EAAGC;AAPhB,IADD,EAUC,cAAC,aAAD,QACC,cAAC,YAAD,QACC,cAAC,YAAD,OADD,EAEC,cAAC,WAAD,QACKE,WAAF,IACD,cAAC,mBAAD;AAAqB,IAAA,WAAW,EAAGA;AAAnC,IAFF,CAFD,EAOC,cAAC,cAAD,OAPD,CADD,EAUC,cAAC,YAAD,QACC,cAAC,YAAD,OADD,CAVD,CAVD,CADD;AA2BA;AAED,SAASC,OAAO,IAAIC,oBAApB,QAAgD,WAAhD","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { ToolbarGroup, ToolbarItem } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport BlockControls from '../block-controls';\nimport Cropper from './cropper';\nimport ZoomDropdown from './zoom-dropdown';\nimport AspectRatioDropdown from './aspect-ratio-dropdown';\nimport RotationButton from './rotation-button';\nimport FormControls from './form-controls';\n\nexport default function ImageEditor( {\n\turl,\n\twidth,\n\theight,\n\tclientWidth,\n\tnaturalHeight,\n\tnaturalWidth,\n\tborderProps,\n} ) {\n\treturn (\n\t\t<>\n\t\t\t<Cropper\n\t\t\t\tborderProps={ borderProps }\n\t\t\t\turl={ url }\n\t\t\t\twidth={ width }\n\t\t\t\theight={ height }\n\t\t\t\tclientWidth={ clientWidth }\n\t\t\t\tnaturalHeight={ naturalHeight }\n\t\t\t\tnaturalWidth={ naturalWidth }\n\t\t\t/>\n\t\t\t<BlockControls>\n\t\t\t\t<ToolbarGroup>\n\t\t\t\t\t<ZoomDropdown />\n\t\t\t\t\t<ToolbarItem>\n\t\t\t\t\t\t{ ( toggleProps ) => (\n\t\t\t\t\t\t\t<AspectRatioDropdown toggleProps={ toggleProps } />\n\t\t\t\t\t\t) }\n\t\t\t\t\t</ToolbarItem>\n\t\t\t\t\t<RotationButton />\n\t\t\t\t</ToolbarGroup>\n\t\t\t\t<ToolbarGroup>\n\t\t\t\t\t<FormControls />\n\t\t\t\t</ToolbarGroup>\n\t\t\t</BlockControls>\n\t\t</>\n\t);\n}\n\nexport { default as ImageEditingProvider } from './context';\n"]}

package/build-module/components/inserter/block-types-tab.native.js

@@ -3,16 +3,18 @@ import { createElement } from "@wordpress/element";
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 
 import BlockTypesList from '../block-types-list';
 import useClipboardBlock from './hooks/use-clipboard-block';
-import { store as blockEditorStore } from '../../store';
 import useBlockTypeImpressions from './hooks/use-block-type-impressions';
-import { filterInserterItems } from './utils';
+import { createInserterSection, filterInserterItems } from './utils';
+import useBlockTypesState from './hooks/use-block-types-state';
+
+const getBlockNamespace = item => item.name.split('/')[0];
 
 function BlockTypesTab(_ref) {
   let {
@@ -20,18 +22,10 @@ function BlockTypesTab(_ref) {
     rootClientId,
     listProps
   } = _ref;
+  const [rawBlockTypes,, collections] = useBlockTypesState(rootClientId, onSelect);
   const clipboardBlock = useClipboardBlock(rootClientId);
-  const {
-    blockTypes
-  } = useSelect(select => {
-    const {
-      getInserterItems
-    } = select(blockEditorStore);
-    const blockItems = filterInserterItems(getInserterItems(rootClientId));
-    return {
-      blockTypes: clipboardBlock ? [clipboardBlock, ...blockItems] : blockItems
-    };
-  }, [rootClientId]);
+  const filteredBlockTypes = filterInserterItems(rawBlockTypes);
+  const blockTypes = clipboardBlock ? [clipboardBlock, ...filteredBlockTypes] : filteredBlockTypes;
   const {
     items,
     trackBlockTypeSelected
@@ -42,9 +36,31 @@ function BlockTypesTab(_ref) {
     onSelect(...arguments);
   };
 
+  const collectionSections = useMemo(() => {
+    const result = [];
+    Object.keys(collections).forEach(namespace => {
+      const data = items.filter(item => getBlockNamespace(item) === namespace);
+
+      if (data.length > 0) {
+        result.push(createInserterSection({
+          key: `collection-${namespace}`,
+          metadata: {
+            icon: collections[namespace].icon,
+            title: collections[namespace].title
+          },
+          items: data
+        }));
+      }
+    });
+    return result;
+  }, [items, collections]);
+  const sections = [createInserterSection({
+    key: 'default',
+    items
+  }), ...collectionSections];
   return createElement(BlockTypesList, {
     name: "Blocks",
-    items: items,
+    sections: sections,
     onSelect: handleSelect,
     listProps: listProps
   });

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/block-types-tab.native.js"],"names":["useSelect","BlockTypesList","useClipboardBlock","store","blockEditorStore","useBlockTypeImpressions","filterInserterItems","BlockTypesTab","onSelect","rootClientId","listProps","clipboardBlock","blockTypes","select","getInserterItems","blockItems","items","trackBlockTypeSelected","handleSelect"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,iBAA1B;AAEA;AACA;AACA;;AACA,OAAOC,cAAP,MAA2B,qBAA3B;AACA,OAAOC,iBAAP,MAA8B,6BAA9B;AACA,SAASC,KAAK,IAAIC,gBAAlB,QAA0C,aAA1C;AACA,OAAOC,uBAAP,MAAoC,oCAApC;AACA,SAASC,mBAAT,QAAoC,SAApC;;AAEA,SAASC,aAAT,OAAgE;AAAA,MAAxC;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,YAAZ;AAA0BC,IAAAA;AAA1B,GAAwC;AAC/D,QAAMC,cAAc,GAAGT,iBAAiB,CAAEO,YAAF,CAAxC;AAEA,QAAM;AAAEG,IAAAA;AAAF,MAAiBZ,SAAS,CAC7Ba,MAAF,IAAc;AACb,UAAM;AAAEC,MAAAA;AAAF,QAAuBD,MAAM,CAAET,gBAAF,CAAnC;AACA,UAAMW,UAAU,GAAGT,mBAAmB,CACrCQ,gBAAgB,CAAEL,YAAF,CADqB,CAAtC;AAIA,WAAO;AACNG,MAAAA,UAAU,EAAED,cAAc,GACvB,CAAEA,cAAF,EAAkB,GAAGI,UAArB,CADuB,GAEvBA;AAHG,KAAP;AAKA,GAZ8B,EAa/B,CAAEN,YAAF,CAb+B,CAAhC;AAgBA,QAAM;AAAEO,IAAAA,KAAF;AAASC,IAAAA;AAAT,MACLZ,uBAAuB,CAAEO,UAAF,CADxB;;AAGA,QAAMM,YAAY,GAAG,YAAe;AACnCD,IAAAA,sBAAsB,CAAE,YAAF,CAAtB;AACAT,IAAAA,QAAQ,CAAE,YAAF,CAAR;AACA,GAHD;;AAKA,SACC,cAAC,cAAD;AACC,IAAA,IAAI,EAAC,QADN;AAEC,IAAA,KAAK,EAAGQ,KAFT;AAGC,IAAA,QAAQ,EAAGE,YAHZ;AAIC,IAAA,SAAS,EAAGR;AAJb,IADD;AAQA;;AAED,eAAeH,aAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport BlockTypesList from '../block-types-list';\nimport useClipboardBlock from './hooks/use-clipboard-block';\nimport { store as blockEditorStore } from '../../store';\nimport useBlockTypeImpressions from './hooks/use-block-type-impressions';\nimport { filterInserterItems } from './utils';\n\nfunction BlockTypesTab( { onSelect, rootClientId, listProps } ) {\n\tconst clipboardBlock = useClipboardBlock( rootClientId );\n\n\tconst { blockTypes } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getInserterItems } = select( blockEditorStore );\n\t\t\tconst blockItems = filterInserterItems(\n\t\t\t\tgetInserterItems( rootClientId )\n\t\t\t);\n\n\t\t\treturn {\n\t\t\t\tblockTypes: clipboardBlock\n\t\t\t\t\t? [ clipboardBlock, ...blockItems ]\n\t\t\t\t\t: blockItems,\n\t\t\t};\n\t\t},\n\t\t[ rootClientId ]\n\t);\n\n\tconst { items, trackBlockTypeSelected } =\n\t\tuseBlockTypeImpressions( blockTypes );\n\n\tconst handleSelect = ( ...args ) => {\n\t\ttrackBlockTypeSelected( ...args );\n\t\tonSelect( ...args );\n\t};\n\n\treturn (\n\t\t<BlockTypesList\n\t\t\tname=\"Blocks\"\n\t\t\titems={ items }\n\t\t\tonSelect={ handleSelect }\n\t\t\tlistProps={ listProps }\n\t\t/>\n\t);\n}\n\nexport default BlockTypesTab;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/block-types-tab.native.js"],"names":["useMemo","BlockTypesList","useClipboardBlock","useBlockTypeImpressions","createInserterSection","filterInserterItems","useBlockTypesState","getBlockNamespace","item","name","split","BlockTypesTab","onSelect","rootClientId","listProps","rawBlockTypes","collections","clipboardBlock","filteredBlockTypes","blockTypes","items","trackBlockTypeSelected","handleSelect","collectionSections","result","Object","keys","forEach","namespace","data","filter","length","push","key","metadata","icon","title","sections"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,OAAOC,cAAP,MAA2B,qBAA3B;AACA,OAAOC,iBAAP,MAA8B,6BAA9B;AACA,OAAOC,uBAAP,MAAoC,oCAApC;AACA,SAASC,qBAAT,EAAgCC,mBAAhC,QAA2D,SAA3D;AACA,OAAOC,kBAAP,MAA+B,+BAA/B;;AAEA,MAAMC,iBAAiB,GAAKC,IAAF,IAAYA,IAAI,CAACC,IAAL,CAAUC,KAAV,CAAiB,GAAjB,EAAwB,CAAxB,CAAtC;;AAEA,SAASC,aAAT,OAAgE;AAAA,MAAxC;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,YAAZ;AAA0BC,IAAAA;AAA1B,GAAwC;AAC/D,QAAM,CAAEC,aAAF,GAAmBC,WAAnB,IAAmCV,kBAAkB,CAC1DO,YAD0D,EAE1DD,QAF0D,CAA3D;AAIA,QAAMK,cAAc,GAAGf,iBAAiB,CAAEW,YAAF,CAAxC;AACA,QAAMK,kBAAkB,GAAGb,mBAAmB,CAAEU,aAAF,CAA9C;AACA,QAAMI,UAAU,GAAGF,cAAc,GAC9B,CAAEA,cAAF,EAAkB,GAAGC,kBAArB,CAD8B,GAE9BA,kBAFH;AAGA,QAAM;AAAEE,IAAAA,KAAF;AAASC,IAAAA;AAAT,MACLlB,uBAAuB,CAAEgB,UAAF,CADxB;;AAGA,QAAMG,YAAY,GAAG,YAAe;AACnCD,IAAAA,sBAAsB,CAAE,YAAF,CAAtB;AACAT,IAAAA,QAAQ,CAAE,YAAF,CAAR;AACA,GAHD;;AAKA,QAAMW,kBAAkB,GAAGvB,OAAO,CAAE,MAAM;AACzC,UAAMwB,MAAM,GAAG,EAAf;AACAC,IAAAA,MAAM,CAACC,IAAP,CAAaV,WAAb,EAA2BW,OAA3B,CAAsCC,SAAF,IAAiB;AACpD,YAAMC,IAAI,GAAGT,KAAK,CAACU,MAAN,CACVtB,IAAF,IAAYD,iBAAiB,CAAEC,IAAF,CAAjB,KAA8BoB,SAD9B,CAAb;;AAGA,UAAKC,IAAI,CAACE,MAAL,GAAc,CAAnB,EAAuB;AACtBP,QAAAA,MAAM,CAACQ,IAAP,CACC5B,qBAAqB,CAAE;AACtB6B,UAAAA,GAAG,EAAG,cAAcL,SAAW,EADT;AAEtBM,UAAAA,QAAQ,EAAE;AACTC,YAAAA,IAAI,EAAEnB,WAAW,CAAEY,SAAF,CAAX,CAAyBO,IADtB;AAETC,YAAAA,KAAK,EAAEpB,WAAW,CAAEY,SAAF,CAAX,CAAyBQ;AAFvB,WAFY;AAMtBhB,UAAAA,KAAK,EAAES;AANe,SAAF,CADtB;AAUA;AACD,KAhBD;AAkBA,WAAOL,MAAP;AACA,GArBiC,EAqB/B,CAAEJ,KAAF,EAASJ,WAAT,CArB+B,CAAlC;AAuBA,QAAMqB,QAAQ,GAAG,CAChBjC,qBAAqB,CAAE;AAAE6B,IAAAA,GAAG,EAAE,SAAP;AAAkBb,IAAAA;AAAlB,GAAF,CADL,EAEhB,GAAGG,kBAFa,CAAjB;AAKA,SACC,cAAC,cAAD;AACC,IAAA,IAAI,EAAC,QADN;AAEC,IAAA,QAAQ,EAAGc,QAFZ;AAGC,IAAA,QAAQ,EAAGf,YAHZ;AAIC,IAAA,SAAS,EAAGR;AAJb,IADD;AAQA;;AAED,eAAeH,aAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BlockTypesList from '../block-types-list';\nimport useClipboardBlock from './hooks/use-clipboard-block';\nimport useBlockTypeImpressions from './hooks/use-block-type-impressions';\nimport { createInserterSection, filterInserterItems } from './utils';\nimport useBlockTypesState from './hooks/use-block-types-state';\n\nconst getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ];\n\nfunction BlockTypesTab( { onSelect, rootClientId, listProps } ) {\n\tconst [ rawBlockTypes, , collections ] = useBlockTypesState(\n\t\trootClientId,\n\t\tonSelect\n\t);\n\tconst clipboardBlock = useClipboardBlock( rootClientId );\n\tconst filteredBlockTypes = filterInserterItems( rawBlockTypes );\n\tconst blockTypes = clipboardBlock\n\t\t? [ clipboardBlock, ...filteredBlockTypes ]\n\t\t: filteredBlockTypes;\n\tconst { items, trackBlockTypeSelected } =\n\t\tuseBlockTypeImpressions( blockTypes );\n\n\tconst handleSelect = ( ...args ) => {\n\t\ttrackBlockTypeSelected( ...args );\n\t\tonSelect( ...args );\n\t};\n\n\tconst collectionSections = useMemo( () => {\n\t\tconst result = [];\n\t\tObject.keys( collections ).forEach( ( namespace ) => {\n\t\t\tconst data = items.filter(\n\t\t\t\t( item ) => getBlockNamespace( item ) === namespace\n\t\t\t);\n\t\t\tif ( data.length > 0 ) {\n\t\t\t\tresult.push(\n\t\t\t\t\tcreateInserterSection( {\n\t\t\t\t\t\tkey: `collection-${ namespace }`,\n\t\t\t\t\t\tmetadata: {\n\t\t\t\t\t\t\ticon: collections[ namespace ].icon,\n\t\t\t\t\t\t\ttitle: collections[ namespace ].title,\n\t\t\t\t\t\t},\n\t\t\t\t\t\titems: data,\n\t\t\t\t\t} )\n\t\t\t\t);\n\t\t\t}\n\t\t} );\n\n\t\treturn result;\n\t}, [ items, collections ] );\n\n\tconst sections = [\n\t\tcreateInserterSection( { key: 'default', items } ),\n\t\t...collectionSections,\n\t];\n\n\treturn (\n\t\t<BlockTypesList\n\t\t\tname=\"Blocks\"\n\t\t\tsections={ sections }\n\t\t\tonSelect={ handleSelect }\n\t\t\tlistProps={ listProps }\n\t\t/>\n\t);\n}\n\nexport default BlockTypesTab;\n"]}

package/build-module/components/inserter/preview-panel.js

@@ -3,7 +3,7 @@ import { createElement } from "@wordpress/element";
 /**
  * WordPress dependencies
  */
-import { isReusableBlock, createBlock, getBlockFromExample, getBlockType } from '@wordpress/blocks';
+import { isReusableBlock, createBlock, getBlockFromExample } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
@@ -13,7 +13,7 @@ import BlockCard from '../block-card';
 import BlockPreview from '../block-preview';
 
 function InserterPreviewPanel(_ref) {
-  var _hoveredItemBlockType, _hoveredItemBlockType2;
+  var _example$viewportWidt;
 
   let {
     item
@@ -23,24 +23,24 @@ function InserterPreviewPanel(_ref) {
     title,
     icon,
     description,
-    initialAttributes
+    initialAttributes,
+    example
   } = item;
-  const hoveredItemBlockType = getBlockType(name);
   const isReusable = isReusableBlock(item);
   return createElement("div", {
     className: "block-editor-inserter__preview-container"
   }, createElement("div", {
     className: "block-editor-inserter__preview"
-  }, isReusable || hoveredItemBlockType !== null && hoveredItemBlockType !== void 0 && hoveredItemBlockType.example ? createElement("div", {
+  }, isReusable || example ? createElement("div", {
     className: "block-editor-inserter__preview-content"
   }, createElement(BlockPreview, {
     __experimentalPadding: 16,
-    viewportWidth: (_hoveredItemBlockType = (_hoveredItemBlockType2 = hoveredItemBlockType.example) === null || _hoveredItemBlockType2 === void 0 ? void 0 : _hoveredItemBlockType2.viewportWidth) !== null && _hoveredItemBlockType !== void 0 ? _hoveredItemBlockType : 500,
-    blocks: hoveredItemBlockType.example ? getBlockFromExample(item.name, {
-      attributes: { ...hoveredItemBlockType.example.attributes,
+    viewportWidth: (_example$viewportWidt = example === null || example === void 0 ? void 0 : example.viewportWidth) !== null && _example$viewportWidt !== void 0 ? _example$viewportWidt : 500,
+    blocks: example ? getBlockFromExample(item.name, {
+      attributes: { ...example.attributes,
         ...initialAttributes
       },
-      innerBlocks: hoveredItemBlockType.example.innerBlocks
+      innerBlocks: example.innerBlocks
     }) : createBlock(name, initialAttributes)
   })) : createElement("div", {
     className: "block-editor-inserter__preview-content-missing"

package/build-module/components/inserter/preview-panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/preview-panel.js"],"names":["isReusableBlock","createBlock","getBlockFromExample","getBlockType","__","BlockCard","BlockPreview","InserterPreviewPanel","item","name","title","icon","description","initialAttributes","hoveredItemBlockType","isReusable","example","viewportWidth","attributes","innerBlocks"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,eADD,EAECC,WAFD,EAGCC,mBAHD,EAICC,YAJD,QAKO,mBALP;AAMA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,SAAP,MAAsB,eAAtB;AACA,OAAOC,YAAP,MAAyB,kBAAzB;;AAEA,SAASC,oBAAT,OAA0C;AAAA;;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACzC,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,KAAR;AAAeC,IAAAA,IAAf;AAAqBC,IAAAA,WAArB;AAAkCC,IAAAA;AAAlC,MAAwDL,IAA9D;AACA,QAAMM,oBAAoB,GAAGX,YAAY,CAAEM,IAAF,CAAzC;AACA,QAAMM,UAAU,GAAGf,eAAe,CAAEQ,IAAF,CAAlC;AACA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGO,UAAU,IAAID,oBAAJ,aAAIA,oBAAJ,eAAIA,oBAAoB,CAAEE,OAApC,GACD;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,YAAD;AACC,IAAA,qBAAqB,EAAG,EADzB;AAEC,IAAA,aAAa,qDACZF,oBAAoB,CAACE,OADT,2DACZ,uBAA8BC,aADlB,yEAEZ,GAJF;AAMC,IAAA,MAAM,EACLH,oBAAoB,CAACE,OAArB,GACGd,mBAAmB,CAAEM,IAAI,CAACC,IAAP,EAAa;AAChCS,MAAAA,UAAU,EAAE,EACX,GAAGJ,oBAAoB,CAACE,OAArB,CACDE,UAFS;AAGX,WAAGL;AAHQ,OADoB;AAMhCM,MAAAA,WAAW,EACVL,oBAAoB,CAACE,OAArB,CACEG;AAR6B,KAAb,CADtB,GAWGlB,WAAW,CAAEQ,IAAF,EAAQI,iBAAR;AAlBhB,IADD,CADC,GAyBD;AAAK,IAAA,SAAS,EAAC;AAAf,KACGT,EAAE,CAAE,uBAAF,CADL,CA1BF,CADD,EAgCG,CAAEW,UAAF,IACD,cAAC,SAAD;AACC,IAAA,KAAK,EAAGL,KADT;AAEC,IAAA,IAAI,EAAGC,IAFR;AAGC,IAAA,WAAW,EAAGC;AAHf,IAjCF,CADD;AA0CA;;AAED,eAAeL,oBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tisReusableBlock,\n\tcreateBlock,\n\tgetBlockFromExample,\n\tgetBlockType,\n} from '@wordpress/blocks';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BlockCard from '../block-card';\nimport BlockPreview from '../block-preview';\n\nfunction InserterPreviewPanel( { item } ) {\n\tconst { name, title, icon, description, initialAttributes } = item;\n\tconst hoveredItemBlockType = getBlockType( name );\n\tconst isReusable = isReusableBlock( item );\n\treturn (\n\t\t<div className=\"block-editor-inserter__preview-container\">\n\t\t\t<div className=\"block-editor-inserter__preview\">\n\t\t\t\t{ isReusable || hoveredItemBlockType?.example ? (\n\t\t\t\t\t<div className=\"block-editor-inserter__preview-content\">\n\t\t\t\t\t\t<BlockPreview\n\t\t\t\t\t\t\t__experimentalPadding={ 16 }\n\t\t\t\t\t\t\tviewportWidth={\n\t\t\t\t\t\t\t\thoveredItemBlockType.example?.viewportWidth ??\n\t\t\t\t\t\t\t\t500\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tblocks={\n\t\t\t\t\t\t\t\thoveredItemBlockType.example\n\t\t\t\t\t\t\t\t\t? getBlockFromExample( item.name, {\n\t\t\t\t\t\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t\t\t\t\t\t...hoveredItemBlockType.example\n\t\t\t\t\t\t\t\t\t\t\t\t\t.attributes,\n\t\t\t\t\t\t\t\t\t\t\t\t...initialAttributes,\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\tinnerBlocks:\n\t\t\t\t\t\t\t\t\t\t\t\thoveredItemBlockType.example\n\t\t\t\t\t\t\t\t\t\t\t\t\t.innerBlocks,\n\t\t\t\t\t\t\t\t\t  } )\n\t\t\t\t\t\t\t\t\t: createBlock( name, initialAttributes )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<div className=\"block-editor-inserter__preview-content-missing\">\n\t\t\t\t\t\t{ __( 'No Preview Available.' ) }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t{ ! isReusable && (\n\t\t\t\t<BlockCard\n\t\t\t\t\ttitle={ title }\n\t\t\t\t\ticon={ icon }\n\t\t\t\t\tdescription={ description }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default InserterPreviewPanel;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/preview-panel.js"],"names":["isReusableBlock","createBlock","getBlockFromExample","__","BlockCard","BlockPreview","InserterPreviewPanel","item","name","title","icon","description","initialAttributes","example","isReusable","viewportWidth","attributes","innerBlocks"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,eADD,EAECC,WAFD,EAGCC,mBAHD,QAIO,mBAJP;AAKA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,SAAP,MAAsB,eAAtB;AACA,OAAOC,YAAP,MAAyB,kBAAzB;;AAEA,SAASC,oBAAT,OAA0C;AAAA;;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACzC,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,KAAR;AAAeC,IAAAA,IAAf;AAAqBC,IAAAA,WAArB;AAAkCC,IAAAA,iBAAlC;AAAqDC,IAAAA;AAArD,MAAiEN,IAAvE;AACA,QAAMO,UAAU,GAAGd,eAAe,CAAEO,IAAF,CAAlC;AACA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGO,UAAU,IAAID,OAAd,GACD;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,YAAD;AACC,IAAA,qBAAqB,EAAG,EADzB;AAEC,IAAA,aAAa,2BAAGA,OAAH,aAAGA,OAAH,uBAAGA,OAAO,CAAEE,aAAZ,yEAA6B,GAF3C;AAGC,IAAA,MAAM,EACLF,OAAO,GACJX,mBAAmB,CAAEK,IAAI,CAACC,IAAP,EAAa;AAChCQ,MAAAA,UAAU,EAAE,EACX,GAAGH,OAAO,CAACG,UADA;AAEX,WAAGJ;AAFQ,OADoB;AAKhCK,MAAAA,WAAW,EAAEJ,OAAO,CAACI;AALW,KAAb,CADf,GAQJhB,WAAW,CAAEO,IAAF,EAAQI,iBAAR;AAZhB,IADD,CADC,GAmBD;AAAK,IAAA,SAAS,EAAC;AAAf,KACGT,EAAE,CAAE,uBAAF,CADL,CApBF,CADD,EA0BG,CAAEW,UAAF,IACD,cAAC,SAAD;AACC,IAAA,KAAK,EAAGL,KADT;AAEC,IAAA,IAAI,EAAGC,IAFR;AAGC,IAAA,WAAW,EAAGC;AAHf,IA3BF,CADD;AAoCA;;AAED,eAAeL,oBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tisReusableBlock,\n\tcreateBlock,\n\tgetBlockFromExample,\n} from '@wordpress/blocks';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BlockCard from '../block-card';\nimport BlockPreview from '../block-preview';\n\nfunction InserterPreviewPanel( { item } ) {\n\tconst { name, title, icon, description, initialAttributes, example } = item;\n\tconst isReusable = isReusableBlock( item );\n\treturn (\n\t\t<div className=\"block-editor-inserter__preview-container\">\n\t\t\t<div className=\"block-editor-inserter__preview\">\n\t\t\t\t{ isReusable || example ? (\n\t\t\t\t\t<div className=\"block-editor-inserter__preview-content\">\n\t\t\t\t\t\t<BlockPreview\n\t\t\t\t\t\t\t__experimentalPadding={ 16 }\n\t\t\t\t\t\t\tviewportWidth={ example?.viewportWidth ?? 500 }\n\t\t\t\t\t\t\tblocks={\n\t\t\t\t\t\t\t\texample\n\t\t\t\t\t\t\t\t\t? getBlockFromExample( item.name, {\n\t\t\t\t\t\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t\t\t\t\t\t...example.attributes,\n\t\t\t\t\t\t\t\t\t\t\t\t...initialAttributes,\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\tinnerBlocks: example.innerBlocks,\n\t\t\t\t\t\t\t\t\t  } )\n\t\t\t\t\t\t\t\t\t: createBlock( name, initialAttributes )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<div className=\"block-editor-inserter__preview-content-missing\">\n\t\t\t\t\t\t{ __( 'No Preview Available.' ) }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t{ ! isReusable && (\n\t\t\t\t<BlockCard\n\t\t\t\t\ttitle={ title }\n\t\t\t\t\ticon={ icon }\n\t\t\t\t\tdescription={ description }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default InserterPreviewPanel;\n"]}

package/build-module/components/inserter/reusable-blocks-tab.native.js

@@ -10,7 +10,7 @@ import { useSelect } from '@wordpress/data';
 
 import BlockTypesList from '../block-types-list';
 import { store as blockEditorStore } from '../../store';
-import { filterInserterItems } from './utils';
+import { createInserterSection, filterInserterItems } from './utils';
 
 function ReusableBlocksTab(_ref) {
   let {
@@ -31,9 +31,13 @@ function ReusableBlocksTab(_ref) {
       })
     };
   }, [rootClientId]);
+  const sections = [createInserterSection({
+    key: 'reuseable',
+    items
+  })];
   return createElement(BlockTypesList, {
     name: "ReusableBlocks",
-    items: items,
+    sections: sections,
     onSelect: onSelect,
     listProps: listProps
   });

package/build-module/components/inserter/reusable-blocks-tab.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/reusable-blocks-tab.native.js"],"names":["useSelect","BlockTypesList","store","blockEditorStore","filterInserterItems","ReusableBlocksTab","onSelect","rootClientId","listProps","items","select","getInserterItems","allItems","onlyReusable"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,iBAA1B;AAEA;AACA;AACA;;AACA,OAAOC,cAAP,MAA2B,qBAA3B;AACA,SAASC,KAAK,IAAIC,gBAAlB,QAA0C,aAA1C;AACA,SAASC,mBAAT,QAAoC,SAApC;;AAEA,SAASC,iBAAT,OAAoE;AAAA,MAAxC;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,YAAZ;AAA0BC,IAAAA;AAA1B,GAAwC;AACnE,QAAM;AAAEC,IAAAA;AAAF,MAAYT,SAAS,CACxBU,MAAF,IAAc;AACb,UAAM;AAAEC,MAAAA;AAAF,QAAuBD,MAAM,CAAEP,gBAAF,CAAnC;AACA,UAAMS,QAAQ,GAAGD,gBAAgB,CAAEJ,YAAF,CAAjC;AAEA,WAAO;AACNE,MAAAA,KAAK,EAAEL,mBAAmB,CAAEQ,QAAF,EAAY;AAAEC,QAAAA,YAAY,EAAE;AAAhB,OAAZ;AADpB,KAAP;AAGA,GARyB,EAS1B,CAAEN,YAAF,CAT0B,CAA3B;AAYA,SACC,cAAC,cAAD;AACC,IAAA,IAAI,EAAC,gBADN;AAEC,IAAA,KAAK,EAAGE,KAFT;AAGC,IAAA,QAAQ,EAAGH,QAHZ;AAIC,IAAA,SAAS,EAAGE;AAJb,IADD;AAQA;;AAED,eAAeH,iBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport BlockTypesList from '../block-types-list';\nimport { store as blockEditorStore } from '../../store';\nimport { filterInserterItems } from './utils';\n\nfunction ReusableBlocksTab( { onSelect, rootClientId, listProps } ) {\n\tconst { items } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getInserterItems } = select( blockEditorStore );\n\t\t\tconst allItems = getInserterItems( rootClientId );\n\n\t\t\treturn {\n\t\t\t\titems: filterInserterItems( allItems, { onlyReusable: true } ),\n\t\t\t};\n\t\t},\n\t\t[ rootClientId ]\n\t);\n\n\treturn (\n\t\t<BlockTypesList\n\t\t\tname=\"ReusableBlocks\"\n\t\t\titems={ items }\n\t\t\tonSelect={ onSelect }\n\t\t\tlistProps={ listProps }\n\t\t/>\n\t);\n}\n\nexport default ReusableBlocksTab;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/reusable-blocks-tab.native.js"],"names":["useSelect","BlockTypesList","store","blockEditorStore","createInserterSection","filterInserterItems","ReusableBlocksTab","onSelect","rootClientId","listProps","items","select","getInserterItems","allItems","onlyReusable","sections","key"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,iBAA1B;AAEA;AACA;AACA;;AACA,OAAOC,cAAP,MAA2B,qBAA3B;AACA,SAASC,KAAK,IAAIC,gBAAlB,QAA0C,aAA1C;AACA,SAASC,qBAAT,EAAgCC,mBAAhC,QAA2D,SAA3D;;AAEA,SAASC,iBAAT,OAAoE;AAAA,MAAxC;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,YAAZ;AAA0BC,IAAAA;AAA1B,GAAwC;AACnE,QAAM;AAAEC,IAAAA;AAAF,MAAYV,SAAS,CACxBW,MAAF,IAAc;AACb,UAAM;AAAEC,MAAAA;AAAF,QAAuBD,MAAM,CAAER,gBAAF,CAAnC;AACA,UAAMU,QAAQ,GAAGD,gBAAgB,CAAEJ,YAAF,CAAjC;AAEA,WAAO;AACNE,MAAAA,KAAK,EAAEL,mBAAmB,CAAEQ,QAAF,EAAY;AAAEC,QAAAA,YAAY,EAAE;AAAhB,OAAZ;AADpB,KAAP;AAGA,GARyB,EAS1B,CAAEN,YAAF,CAT0B,CAA3B;AAYA,QAAMO,QAAQ,GAAG,CAAEX,qBAAqB,CAAE;AAAEY,IAAAA,GAAG,EAAE,WAAP;AAAoBN,IAAAA;AAApB,GAAF,CAAvB,CAAjB;AAEA,SACC,cAAC,cAAD;AACC,IAAA,IAAI,EAAC,gBADN;AAEC,IAAA,QAAQ,EAAGK,QAFZ;AAGC,IAAA,QAAQ,EAAGR,QAHZ;AAIC,IAAA,SAAS,EAAGE;AAJb,IADD;AAQA;;AAED,eAAeH,iBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport BlockTypesList from '../block-types-list';\nimport { store as blockEditorStore } from '../../store';\nimport { createInserterSection, filterInserterItems } from './utils';\n\nfunction ReusableBlocksTab( { onSelect, rootClientId, listProps } ) {\n\tconst { items } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getInserterItems } = select( blockEditorStore );\n\t\t\tconst allItems = getInserterItems( rootClientId );\n\n\t\t\treturn {\n\t\t\t\titems: filterInserterItems( allItems, { onlyReusable: true } ),\n\t\t\t};\n\t\t},\n\t\t[ rootClientId ]\n\t);\n\n\tconst sections = [ createInserterSection( { key: 'reuseable', items } ) ];\n\n\treturn (\n\t\t<BlockTypesList\n\t\t\tname=\"ReusableBlocks\"\n\t\t\tsections={ sections }\n\t\t\tonSelect={ onSelect }\n\t\t\tlistProps={ listProps }\n\t\t/>\n\t);\n}\n\nexport default ReusableBlocksTab;\n"]}