@wordpress/block-editor 12.26.0 → 13.0.0

package/build-module/components/block-styles/index.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -16,6 +15,8 @@ import { Button, __experimentalTruncate as Truncate, Popover } from '@wordpress/
  */
 import BlockStylesPreviewPanel from './preview-panel';
 import useStylesForBlocks from './use-styles-for-block';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const noop = () => {};
 
 // Block Styles component for the Settings Sidebar.
@@ -55,43 +56,48 @@ function BlockStyles({
     debouncedSetHoveredStyle(item);
     onHoverClassName((_item$name = item?.name) !== null && _item$name !== void 0 ? _item$name : null);
   };
-  return createElement("div", {
-    className: "block-editor-block-styles"
-  }, createElement("div", {
-    className: "block-editor-block-styles__variants"
-  }, stylesToRender.map(style => {
-    const buttonText = style.label || style.name;
-    return createElement(Button, {
-      __next40pxDefaultSize: true,
-      className: clsx('block-editor-block-styles__item', {
-        'is-active': activeStyle.name === style.name
-      }),
-      key: style.name,
-      variant: "secondary",
-      label: buttonText,
-      onMouseEnter: () => styleItemHandler(style),
-      onFocus: () => styleItemHandler(style),
-      onMouseLeave: () => styleItemHandler(null),
-      onBlur: () => styleItemHandler(null),
-      onClick: () => onSelectStylePreview(style),
-      "aria-current": activeStyle.name === style.name
-    }, createElement(Truncate, {
-      numberOfLines: 1,
-      className: "block-editor-block-styles__item-text"
-    }, buttonText));
-  })), hoveredStyle && !isMobileViewport && createElement(Popover, {
-    placement: "left-start",
-    offset: 34,
-    focusOnMount: false
-  }, createElement("div", {
-    className: "block-editor-block-styles__preview-panel",
-    onMouseLeave: () => styleItemHandler(null)
-  }, createElement(BlockStylesPreviewPanel, {
-    activeStyle: activeStyle,
-    className: previewClassName,
-    genericPreviewBlock: genericPreviewBlock,
-    style: hoveredStyle
-  }))));
+  return /*#__PURE__*/_jsxs("div", {
+    className: "block-editor-block-styles",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "block-editor-block-styles__variants",
+      children: stylesToRender.map(style => {
+        const buttonText = style.label || style.name;
+        return /*#__PURE__*/_jsx(Button, {
+          __next40pxDefaultSize: true,
+          className: clsx('block-editor-block-styles__item', {
+            'is-active': activeStyle.name === style.name
+          }),
+          variant: "secondary",
+          label: buttonText,
+          onMouseEnter: () => styleItemHandler(style),
+          onFocus: () => styleItemHandler(style),
+          onMouseLeave: () => styleItemHandler(null),
+          onBlur: () => styleItemHandler(null),
+          onClick: () => onSelectStylePreview(style),
+          "aria-current": activeStyle.name === style.name,
+          children: /*#__PURE__*/_jsx(Truncate, {
+            numberOfLines: 1,
+            className: "block-editor-block-styles__item-text",
+            children: buttonText
+          })
+        }, style.name);
+      })
+    }), hoveredStyle && !isMobileViewport && /*#__PURE__*/_jsx(Popover, {
+      placement: "left-start",
+      offset: 34,
+      focusOnMount: false,
+      children: /*#__PURE__*/_jsx("div", {
+        className: "block-editor-block-styles__preview-panel",
+        onMouseLeave: () => styleItemHandler(null),
+        children: /*#__PURE__*/_jsx(BlockStylesPreviewPanel, {
+          activeStyle: activeStyle,
+          className: previewClassName,
+          genericPreviewBlock: genericPreviewBlock,
+          style: hoveredStyle
+        })
+      })
+    })]
+  });
 }
 export default BlockStyles;
 //# sourceMappingURL=index.js.map

package/build-module/components/block-styles/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["clsx","useState","debounce","useViewportMatch","Button","__experimentalTruncate","Truncate","Popover","BlockStylesPreviewPanel","useStylesForBlocks","noop","BlockStyles","clientId","onSwitch","onHoverClassName","onSelect","stylesToRender","activeStyle","genericPreviewBlock","className","previewClassName","hoveredStyle","setHoveredStyle","isMobileViewport","length","debouncedSetHoveredStyle","onSelectStylePreview","style","cancel","styleItemHandler","item","_item$name","name","createElement","map","buttonText","label","__next40pxDefaultSize","key","variant","onMouseEnter","onFocus","onMouseLeave","onBlur","onClick","numberOfLines","placement","offset","focusOnMount"],"sources":["@wordpress/block-editor/src/components/block-styles/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { debounce, useViewportMatch } from '@wordpress/compose';\nimport {\n\tButton,\n\t__experimentalTruncate as Truncate,\n\tPopover,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport BlockStylesPreviewPanel from './preview-panel';\nimport useStylesForBlocks from './use-styles-for-block';\n\nconst noop = () => {};\n\n// Block Styles component for the Settings Sidebar.\nfunction BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {\n\tconst {\n\t\tonSelect,\n\t\tstylesToRender,\n\t\tactiveStyle,\n\t\tgenericPreviewBlock,\n\t\tclassName: previewClassName,\n\t} = useStylesForBlocks( {\n\t\tclientId,\n\t\tonSwitch,\n\t} );\n\tconst [ hoveredStyle, setHoveredStyle ] = useState( null );\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\n\tif ( ! stylesToRender || stylesToRender.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst debouncedSetHoveredStyle = debounce( setHoveredStyle, 250 );\n\n\tconst onSelectStylePreview = ( style ) => {\n\t\tonSelect( style );\n\t\tonHoverClassName( null );\n\t\tsetHoveredStyle( null );\n\t\tdebouncedSetHoveredStyle.cancel();\n\t};\n\n\tconst styleItemHandler = ( item ) => {\n\t\tif ( hoveredStyle === item ) {\n\t\t\tdebouncedSetHoveredStyle.cancel();\n\t\t\treturn;\n\t\t}\n\t\tdebouncedSetHoveredStyle( item );\n\t\tonHoverClassName( item?.name ?? null );\n\t};\n\n\treturn (\n\t\t<div className=\"block-editor-block-styles\">\n\t\t\t<div className=\"block-editor-block-styles__variants\">\n\t\t\t\t{ stylesToRender.map( ( style ) => {\n\t\t\t\t\tconst buttonText = style.label || style.name;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t'block-editor-block-styles__item',\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t'is-active':\n\t\t\t\t\t\t\t\t\t\tactiveStyle.name === style.name,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tkey={ style.name }\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\tlabel={ buttonText }\n\t\t\t\t\t\t\tonMouseEnter={ () => styleItemHandler( style ) }\n\t\t\t\t\t\t\tonFocus={ () => styleItemHandler( style ) }\n\t\t\t\t\t\t\tonMouseLeave={ () => styleItemHandler( null ) }\n\t\t\t\t\t\t\tonBlur={ () => styleItemHandler( null ) }\n\t\t\t\t\t\t\tonClick={ () => onSelectStylePreview( style ) }\n\t\t\t\t\t\t\taria-current={ activeStyle.name === style.name }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\tnumberOfLines={ 1 }\n\t\t\t\t\t\t\t\tclassName=\"block-editor-block-styles__item-text\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ buttonText }\n\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</div>\n\t\t\t{ hoveredStyle && ! isMobileViewport && (\n\t\t\t\t<Popover\n\t\t\t\t\tplacement=\"left-start\"\n\t\t\t\t\toffset={ 34 }\n\t\t\t\t\tfocusOnMount={ false }\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"block-editor-block-styles__preview-panel\"\n\t\t\t\t\t\tonMouseLeave={ () => styleItemHandler( null ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<BlockStylesPreviewPanel\n\t\t\t\t\t\t\tactiveStyle={ activeStyle }\n\t\t\t\t\t\t\tclassName={ previewClassName }\n\t\t\t\t\t\t\tgenericPreviewBlock={ genericPreviewBlock }\n\t\t\t\t\t\t\tstyle={ hoveredStyle }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</Popover>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default BlockStyles;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,QAAQ,EAAEC,gBAAgB,QAAQ,oBAAoB;AAC/D,SACCC,MAAM,EACNC,sBAAsB,IAAIC,QAAQ,EAClCC,OAAO,QACD,uBAAuB;;AAE9B;AACA;AACA;AACA,OAAOC,uBAAuB,MAAM,iBAAiB;AACrD,OAAOC,kBAAkB,MAAM,wBAAwB;AAEvD,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;;AAErB;AACA,SAASC,WAAWA,CAAE;EAAEC,QAAQ;EAAEC,QAAQ,GAAGH,IAAI;EAAEI,gBAAgB,GAAGJ;AAAK,CAAC,EAAG;EAC9E,MAAM;IACLK,QAAQ;IACRC,cAAc;IACdC,WAAW;IACXC,mBAAmB;IACnBC,SAAS,EAAEC;EACZ,CAAC,GAAGX,kBAAkB,CAAE;IACvBG,QAAQ;IACRC;EACD,CAAE,CAAC;EACH,MAAM,CAAEQ,YAAY,EAAEC,eAAe,CAAE,GAAGrB,QAAQ,CAAE,IAAK,CAAC;EAC1D,MAAMsB,gBAAgB,GAAGpB,gBAAgB,CAAE,QAAQ,EAAE,GAAI,CAAC;EAE1D,IAAK,CAAEa,cAAc,IAAIA,cAAc,CAACQ,MAAM,KAAK,CAAC,EAAG;IACtD,OAAO,IAAI;EACZ;EAEA,MAAMC,wBAAwB,GAAGvB,QAAQ,CAAEoB,eAAe,EAAE,GAAI,CAAC;EAEjE,MAAMI,oBAAoB,GAAKC,KAAK,IAAM;IACzCZ,QAAQ,CAAEY,KAAM,CAAC;IACjBb,gBAAgB,CAAE,IAAK,CAAC;IACxBQ,eAAe,CAAE,IAAK,CAAC;IACvBG,wBAAwB,CAACG,MAAM,CAAC,CAAC;EAClC,CAAC;EAED,MAAMC,gBAAgB,GAAKC,IAAI,IAAM;IAAA,IAAAC,UAAA;IACpC,IAAKV,YAAY,KAAKS,IAAI,EAAG;MAC5BL,wBAAwB,CAACG,MAAM,CAAC,CAAC;MACjC;IACD;IACAH,wBAAwB,CAAEK,IAAK,CAAC;IAChChB,gBAAgB,EAAAiB,UAAA,GAAED,IAAI,EAAEE,IAAI,cAAAD,UAAA,cAAAA,UAAA,GAAI,IAAK,CAAC;EACvC,CAAC;EAED,OACCE,aAAA;IAAKd,SAAS,EAAC;EAA2B,GACzCc,aAAA;IAAKd,SAAS,EAAC;EAAqC,GACjDH,cAAc,CAACkB,GAAG,CAAIP,KAAK,IAAM;IAClC,MAAMQ,UAAU,GAAGR,KAAK,CAACS,KAAK,IAAIT,KAAK,CAACK,IAAI;IAE5C,OACCC,aAAA,CAAC7B,MAAM;MACNiC,qBAAqB;MACrBlB,SAAS,EAAGnB,IAAI,CACf,iCAAiC,EACjC;QACC,WAAW,EACViB,WAAW,CAACe,IAAI,KAAKL,KAAK,CAACK;MAC7B,CACD,CAAG;MACHM,GAAG,EAAGX,KAAK,CAACK,IAAM;MAClBO,OAAO,EAAC,WAAW;MACnBH,KAAK,EAAGD,UAAY;MACpBK,YAAY,EAAGA,CAAA,KAAMX,gBAAgB,CAAEF,KAAM,CAAG;MAChDc,OAAO,EAAGA,CAAA,KAAMZ,gBAAgB,CAAEF,KAAM,CAAG;MAC3Ce,YAAY,EAAGA,CAAA,KAAMb,gBAAgB,CAAE,IAAK,CAAG;MAC/Cc,MAAM,EAAGA,CAAA,KAAMd,gBAAgB,CAAE,IAAK,CAAG;MACzCe,OAAO,EAAGA,CAAA,KAAMlB,oBAAoB,CAAEC,KAAM,CAAG;MAC/C,gBAAeV,WAAW,CAACe,IAAI,KAAKL,KAAK,CAACK;IAAM,GAEhDC,aAAA,CAAC3B,QAAQ;MACRuC,aAAa,EAAG,CAAG;MACnB1B,SAAS,EAAC;IAAsC,GAE9CgB,UACO,CACH,CAAC;EAEX,CAAE,CACE,CAAC,EACJd,YAAY,IAAI,CAAEE,gBAAgB,IACnCU,aAAA,CAAC1B,OAAO;IACPuC,SAAS,EAAC,YAAY;IACtBC,MAAM,EAAG,EAAI;IACbC,YAAY,EAAG;EAAO,GAEtBf,aAAA;IACCd,SAAS,EAAC,0CAA0C;IACpDuB,YAAY,EAAGA,CAAA,KAAMb,gBAAgB,CAAE,IAAK;EAAG,GAE/CI,aAAA,CAACzB,uBAAuB;IACvBS,WAAW,EAAGA,WAAa;IAC3BE,SAAS,EAAGC,gBAAkB;IAC9BF,mBAAmB,EAAGA,mBAAqB;IAC3CS,KAAK,EAAGN;EAAc,CACtB,CACG,CACG,CAEN,CAAC;AAER;AAEA,eAAeV,WAAW","ignoreList":[]}
+{"version":3,"names":["clsx","useState","debounce","useViewportMatch","Button","__experimentalTruncate","Truncate","Popover","BlockStylesPreviewPanel","useStylesForBlocks","jsx","_jsx","jsxs","_jsxs","noop","BlockStyles","clientId","onSwitch","onHoverClassName","onSelect","stylesToRender","activeStyle","genericPreviewBlock","className","previewClassName","hoveredStyle","setHoveredStyle","isMobileViewport","length","debouncedSetHoveredStyle","onSelectStylePreview","style","cancel","styleItemHandler","item","_item$name","name","children","map","buttonText","label","__next40pxDefaultSize","variant","onMouseEnter","onFocus","onMouseLeave","onBlur","onClick","numberOfLines","placement","offset","focusOnMount"],"sources":["@wordpress/block-editor/src/components/block-styles/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { debounce, useViewportMatch } from '@wordpress/compose';\nimport {\n\tButton,\n\t__experimentalTruncate as Truncate,\n\tPopover,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport BlockStylesPreviewPanel from './preview-panel';\nimport useStylesForBlocks from './use-styles-for-block';\n\nconst noop = () => {};\n\n// Block Styles component for the Settings Sidebar.\nfunction BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {\n\tconst {\n\t\tonSelect,\n\t\tstylesToRender,\n\t\tactiveStyle,\n\t\tgenericPreviewBlock,\n\t\tclassName: previewClassName,\n\t} = useStylesForBlocks( {\n\t\tclientId,\n\t\tonSwitch,\n\t} );\n\tconst [ hoveredStyle, setHoveredStyle ] = useState( null );\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\n\tif ( ! stylesToRender || stylesToRender.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst debouncedSetHoveredStyle = debounce( setHoveredStyle, 250 );\n\n\tconst onSelectStylePreview = ( style ) => {\n\t\tonSelect( style );\n\t\tonHoverClassName( null );\n\t\tsetHoveredStyle( null );\n\t\tdebouncedSetHoveredStyle.cancel();\n\t};\n\n\tconst styleItemHandler = ( item ) => {\n\t\tif ( hoveredStyle === item ) {\n\t\t\tdebouncedSetHoveredStyle.cancel();\n\t\t\treturn;\n\t\t}\n\t\tdebouncedSetHoveredStyle( item );\n\t\tonHoverClassName( item?.name ?? null );\n\t};\n\n\treturn (\n\t\t<div className=\"block-editor-block-styles\">\n\t\t\t<div className=\"block-editor-block-styles__variants\">\n\t\t\t\t{ stylesToRender.map( ( style ) => {\n\t\t\t\t\tconst buttonText = style.label || style.name;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t'block-editor-block-styles__item',\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t'is-active':\n\t\t\t\t\t\t\t\t\t\tactiveStyle.name === style.name,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tkey={ style.name }\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\tlabel={ buttonText }\n\t\t\t\t\t\t\tonMouseEnter={ () => styleItemHandler( style ) }\n\t\t\t\t\t\t\tonFocus={ () => styleItemHandler( style ) }\n\t\t\t\t\t\t\tonMouseLeave={ () => styleItemHandler( null ) }\n\t\t\t\t\t\t\tonBlur={ () => styleItemHandler( null ) }\n\t\t\t\t\t\t\tonClick={ () => onSelectStylePreview( style ) }\n\t\t\t\t\t\t\taria-current={ activeStyle.name === style.name }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\tnumberOfLines={ 1 }\n\t\t\t\t\t\t\t\tclassName=\"block-editor-block-styles__item-text\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ buttonText }\n\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</div>\n\t\t\t{ hoveredStyle && ! isMobileViewport && (\n\t\t\t\t<Popover\n\t\t\t\t\tplacement=\"left-start\"\n\t\t\t\t\toffset={ 34 }\n\t\t\t\t\tfocusOnMount={ false }\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"block-editor-block-styles__preview-panel\"\n\t\t\t\t\t\tonMouseLeave={ () => styleItemHandler( null ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<BlockStylesPreviewPanel\n\t\t\t\t\t\t\tactiveStyle={ activeStyle }\n\t\t\t\t\t\t\tclassName={ previewClassName }\n\t\t\t\t\t\t\tgenericPreviewBlock={ genericPreviewBlock }\n\t\t\t\t\t\t\tstyle={ hoveredStyle }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</Popover>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default BlockStyles;\n"],"mappings":"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","ignoreList":[]}

package/build-module/components/block-styles/index.native.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -19,6 +18,7 @@ import { getActiveStyle, replaceActiveStyle } from './utils';
 import StylePreview from './preview';
 import containerStyles from './style.scss';
 import { store as blockEditorStore } from '../../store';
+import { jsx as _jsx } from "react/jsx-runtime";
 const EMPTY_ARRAY = [];
 function BlockStyles({
   clientId,
@@ -59,23 +59,23 @@ function BlockStyles({
           className: styleClassName
         });
       };
-      return createElement(StylePreview, {
+      return /*#__PURE__*/_jsx(StylePreview, {
         onPress: onStylePress,
         isActive: isActive,
-        key: style.name,
         style: style,
         url: url
-      });
+      }, style.name);
     });
   }, [renderedStyles, className, clientId]);
   if (!styles || styles.length === 0) {
     return null;
   }
-  return createElement(ScrollView, {
+  return /*#__PURE__*/_jsx(ScrollView, {
     horizontal: true,
     showsHorizontalScrollIndicator: false,
-    contentContainerStyle: containerStyles.content
-  }, mappedRenderedStyles);
+    contentContainerStyle: containerStyles.content,
+    children: mappedRenderedStyles
+  });
 }
 export default BlockStyles;
 //# sourceMappingURL=index.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["ScrollView","store","blocksStore","useSelect","useDispatch","useMemo","_x","getActiveStyle","replaceActiveStyle","StylePreview","containerStyles","blockEditorStore","EMPTY_ARRAY","BlockStyles","clientId","url","selector","select","getBlock","getBlockStyles","block","styles","name","className","attributes","updateBlockAttributes","renderedStyles","find","style","isDefault","label","mappedRenderedStyles","activeStyle","map","styleClassName","isActive","onStylePress","createElement","onPress","key","length","horizontal","showsHorizontalScrollIndicator","contentContainerStyle","content"],"sources":["@wordpress/block-editor/src/components/block-styles/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { ScrollView } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\nimport { _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getActiveStyle, replaceActiveStyle } from './utils';\nimport StylePreview from './preview';\nimport containerStyles from './style.scss';\nimport { store as blockEditorStore } from '../../store';\n\nconst EMPTY_ARRAY = [];\n\nfunction BlockStyles( { clientId, url } ) {\n\tconst selector = ( select ) => {\n\t\tconst { getBlock } = select( blockEditorStore );\n\t\tconst { getBlockStyles } = select( blocksStore );\n\t\tconst block = getBlock( clientId );\n\t\treturn {\n\t\t\tstyles: getBlockStyles( block?.name ) || EMPTY_ARRAY,\n\t\t\tclassName: block?.attributes?.className || '',\n\t\t};\n\t};\n\n\tconst { styles, className } = useSelect( selector, [ clientId ] );\n\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\n\tconst renderedStyles = styles?.find( ( style ) => style.isDefault )\n\t\t? styles\n\t\t: [\n\t\t\t\t{\n\t\t\t\t\tname: 'default',\n\t\t\t\t\tlabel: _x( 'Default', 'block style' ),\n\t\t\t\t\tisDefault: true,\n\t\t\t\t},\n\t\t\t\t...styles,\n\t\t  ];\n\n\tconst mappedRenderedStyles = useMemo( () => {\n\t\tconst activeStyle = getActiveStyle( renderedStyles, className );\n\n\t\treturn renderedStyles.map( ( style ) => {\n\t\t\tconst styleClassName = replaceActiveStyle(\n\t\t\t\tclassName,\n\t\t\t\tactiveStyle,\n\t\t\t\tstyle\n\t\t\t);\n\t\t\tconst isActive = activeStyle === style;\n\n\t\t\tconst onStylePress = () => {\n\t\t\t\tupdateBlockAttributes( clientId, {\n\t\t\t\t\tclassName: styleClassName,\n\t\t\t\t} );\n\t\t\t};\n\n\t\t\treturn (\n\t\t\t\t<StylePreview\n\t\t\t\t\tonPress={ onStylePress }\n\t\t\t\t\tisActive={ isActive }\n\t\t\t\t\tkey={ style.name }\n\t\t\t\t\tstyle={ style }\n\t\t\t\t\turl={ url }\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ renderedStyles, className, clientId ] );\n\n\tif ( ! styles || styles.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ScrollView\n\t\t\thorizontal\n\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\tcontentContainerStyle={ containerStyles.content }\n\t\t>\n\t\t\t{ mappedRenderedStyles }\n\t\t</ScrollView>\n\t);\n}\n\nexport default BlockStyles;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,cAAc;;AAEzC;AACA;AACA;AACA,SAASC,KAAK,IAAIC,WAAW,QAAQ,mBAAmB;AACxD,SAASC,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SAASC,cAAc,EAAEC,kBAAkB,QAAQ,SAAS;AAC5D,OAAOC,YAAY,MAAM,WAAW;AACpC,OAAOC,eAAe,MAAM,cAAc;AAC1C,SAAST,KAAK,IAAIU,gBAAgB,QAAQ,aAAa;AAEvD,MAAMC,WAAW,GAAG,EAAE;AAEtB,SAASC,WAAWA,CAAE;EAAEC,QAAQ;EAAEC;AAAI,CAAC,EAAG;EACzC,MAAMC,QAAQ,GAAKC,MAAM,IAAM;IAC9B,MAAM;MAAEC;IAAS,CAAC,GAAGD,MAAM,CAAEN,gBAAiB,CAAC;IAC/C,MAAM;MAAEQ;IAAe,CAAC,GAAGF,MAAM,CAAEf,WAAY,CAAC;IAChD,MAAMkB,KAAK,GAAGF,QAAQ,CAAEJ,QAAS,CAAC;IAClC,OAAO;MACNO,MAAM,EAAEF,cAAc,CAAEC,KAAK,EAAEE,IAAK,CAAC,IAAIV,WAAW;MACpDW,SAAS,EAAEH,KAAK,EAAEI,UAAU,EAAED,SAAS,IAAI;IAC5C,CAAC;EACF,CAAC;EAED,MAAM;IAAEF,MAAM;IAAEE;EAAU,CAAC,GAAGpB,SAAS,CAAEa,QAAQ,EAAE,CAAEF,QAAQ,CAAG,CAAC;EAEjE,MAAM;IAAEW;EAAsB,CAAC,GAAGrB,WAAW,CAAEO,gBAAiB,CAAC;EAEjE,MAAMe,cAAc,GAAGL,MAAM,EAAEM,IAAI,CAAIC,KAAK,IAAMA,KAAK,CAACC,SAAU,CAAC,GAChER,MAAM,GACN,CACA;IACCC,IAAI,EAAE,SAAS;IACfQ,KAAK,EAAExB,EAAE,CAAE,SAAS,EAAE,aAAc,CAAC;IACrCuB,SAAS,EAAE;EACZ,CAAC,EACD,GAAGR,MAAM,CACR;EAEJ,MAAMU,oBAAoB,GAAG1B,OAAO,CAAE,MAAM;IAC3C,MAAM2B,WAAW,GAAGzB,cAAc,CAAEmB,cAAc,EAAEH,SAAU,CAAC;IAE/D,OAAOG,cAAc,CAACO,GAAG,CAAIL,KAAK,IAAM;MACvC,MAAMM,cAAc,GAAG1B,kBAAkB,CACxCe,SAAS,EACTS,WAAW,EACXJ,KACD,CAAC;MACD,MAAMO,QAAQ,GAAGH,WAAW,KAAKJ,KAAK;MAEtC,MAAMQ,YAAY,GAAGA,CAAA,KAAM;QAC1BX,qBAAqB,CAAEX,QAAQ,EAAE;UAChCS,SAAS,EAAEW;QACZ,CAAE,CAAC;MACJ,CAAC;MAED,OACCG,aAAA,CAAC5B,YAAY;QACZ6B,OAAO,EAAGF,YAAc;QACxBD,QAAQ,EAAGA,QAAU;QACrBI,GAAG,EAAGX,KAAK,CAACN,IAAM;QAClBM,KAAK,EAAGA,KAAO;QACfb,GAAG,EAAGA;MAAK,CACX,CAAC;IAEJ,CAAE,CAAC;EACJ,CAAC,EAAE,CAAEW,cAAc,EAAEH,SAAS,EAAET,QAAQ,CAAG,CAAC;EAE5C,IAAK,CAAEO,MAAM,IAAIA,MAAM,CAACmB,MAAM,KAAK,CAAC,EAAG;IACtC,OAAO,IAAI;EACZ;EAEA,OACCH,aAAA,CAACrC,UAAU;IACVyC,UAAU;IACVC,8BAA8B,EAAG,KAAO;IACxCC,qBAAqB,EAAGjC,eAAe,CAACkC;EAAS,GAE/Cb,oBACS,CAAC;AAEf;AAEA,eAAelB,WAAW","ignoreList":[]}
+{"version":3,"names":["ScrollView","store","blocksStore","useSelect","useDispatch","useMemo","_x","getActiveStyle","replaceActiveStyle","StylePreview","containerStyles","blockEditorStore","jsx","_jsx","EMPTY_ARRAY","BlockStyles","clientId","url","selector","select","getBlock","getBlockStyles","block","styles","name","className","attributes","updateBlockAttributes","renderedStyles","find","style","isDefault","label","mappedRenderedStyles","activeStyle","map","styleClassName","isActive","onStylePress","onPress","length","horizontal","showsHorizontalScrollIndicator","contentContainerStyle","content","children"],"sources":["@wordpress/block-editor/src/components/block-styles/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { ScrollView } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\nimport { _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getActiveStyle, replaceActiveStyle } from './utils';\nimport StylePreview from './preview';\nimport containerStyles from './style.scss';\nimport { store as blockEditorStore } from '../../store';\n\nconst EMPTY_ARRAY = [];\n\nfunction BlockStyles( { clientId, url } ) {\n\tconst selector = ( select ) => {\n\t\tconst { getBlock } = select( blockEditorStore );\n\t\tconst { getBlockStyles } = select( blocksStore );\n\t\tconst block = getBlock( clientId );\n\t\treturn {\n\t\t\tstyles: getBlockStyles( block?.name ) || EMPTY_ARRAY,\n\t\t\tclassName: block?.attributes?.className || '',\n\t\t};\n\t};\n\n\tconst { styles, className } = useSelect( selector, [ clientId ] );\n\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\n\tconst renderedStyles = styles?.find( ( style ) => style.isDefault )\n\t\t? styles\n\t\t: [\n\t\t\t\t{\n\t\t\t\t\tname: 'default',\n\t\t\t\t\tlabel: _x( 'Default', 'block style' ),\n\t\t\t\t\tisDefault: true,\n\t\t\t\t},\n\t\t\t\t...styles,\n\t\t  ];\n\n\tconst mappedRenderedStyles = useMemo( () => {\n\t\tconst activeStyle = getActiveStyle( renderedStyles, className );\n\n\t\treturn renderedStyles.map( ( style ) => {\n\t\t\tconst styleClassName = replaceActiveStyle(\n\t\t\t\tclassName,\n\t\t\t\tactiveStyle,\n\t\t\t\tstyle\n\t\t\t);\n\t\t\tconst isActive = activeStyle === style;\n\n\t\t\tconst onStylePress = () => {\n\t\t\t\tupdateBlockAttributes( clientId, {\n\t\t\t\t\tclassName: styleClassName,\n\t\t\t\t} );\n\t\t\t};\n\n\t\t\treturn (\n\t\t\t\t<StylePreview\n\t\t\t\t\tonPress={ onStylePress }\n\t\t\t\t\tisActive={ isActive }\n\t\t\t\t\tkey={ style.name }\n\t\t\t\t\tstyle={ style }\n\t\t\t\t\turl={ url }\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ renderedStyles, className, clientId ] );\n\n\tif ( ! styles || styles.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ScrollView\n\t\t\thorizontal\n\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\tcontentContainerStyle={ containerStyles.content }\n\t\t>\n\t\t\t{ mappedRenderedStyles }\n\t\t</ScrollView>\n\t);\n}\n\nexport default BlockStyles;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,cAAc;;AAEzC;AACA;AACA;AACA,SAASC,KAAK,IAAIC,WAAW,QAAQ,mBAAmB;AACxD,SAASC,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SAASC,cAAc,EAAEC,kBAAkB,QAAQ,SAAS;AAC5D,OAAOC,YAAY,MAAM,WAAW;AACpC,OAAOC,eAAe,MAAM,cAAc;AAC1C,SAAST,KAAK,IAAIU,gBAAgB,QAAQ,aAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAExD,MAAMC,WAAW,GAAG,EAAE;AAEtB,SAASC,WAAWA,CAAE;EAAEC,QAAQ;EAAEC;AAAI,CAAC,EAAG;EACzC,MAAMC,QAAQ,GAAKC,MAAM,IAAM;IAC9B,MAAM;MAAEC;IAAS,CAAC,GAAGD,MAAM,CAAER,gBAAiB,CAAC;IAC/C,MAAM;MAAEU;IAAe,CAAC,GAAGF,MAAM,CAAEjB,WAAY,CAAC;IAChD,MAAMoB,KAAK,GAAGF,QAAQ,CAAEJ,QAAS,CAAC;IAClC,OAAO;MACNO,MAAM,EAAEF,cAAc,CAAEC,KAAK,EAAEE,IAAK,CAAC,IAAIV,WAAW;MACpDW,SAAS,EAAEH,KAAK,EAAEI,UAAU,EAAED,SAAS,IAAI;IAC5C,CAAC;EACF,CAAC;EAED,MAAM;IAAEF,MAAM;IAAEE;EAAU,CAAC,GAAGtB,SAAS,CAAEe,QAAQ,EAAE,CAAEF,QAAQ,CAAG,CAAC;EAEjE,MAAM;IAAEW;EAAsB,CAAC,GAAGvB,WAAW,CAAEO,gBAAiB,CAAC;EAEjE,MAAMiB,cAAc,GAAGL,MAAM,EAAEM,IAAI,CAAIC,KAAK,IAAMA,KAAK,CAACC,SAAU,CAAC,GAChER,MAAM,GACN,CACA;IACCC,IAAI,EAAE,SAAS;IACfQ,KAAK,EAAE1B,EAAE,CAAE,SAAS,EAAE,aAAc,CAAC;IACrCyB,SAAS,EAAE;EACZ,CAAC,EACD,GAAGR,MAAM,CACR;EAEJ,MAAMU,oBAAoB,GAAG5B,OAAO,CAAE,MAAM;IAC3C,MAAM6B,WAAW,GAAG3B,cAAc,CAAEqB,cAAc,EAAEH,SAAU,CAAC;IAE/D,OAAOG,cAAc,CAACO,GAAG,CAAIL,KAAK,IAAM;MACvC,MAAMM,cAAc,GAAG5B,kBAAkB,CACxCiB,SAAS,EACTS,WAAW,EACXJ,KACD,CAAC;MACD,MAAMO,QAAQ,GAAGH,WAAW,KAAKJ,KAAK;MAEtC,MAAMQ,YAAY,GAAGA,CAAA,KAAM;QAC1BX,qBAAqB,CAAEX,QAAQ,EAAE;UAChCS,SAAS,EAAEW;QACZ,CAAE,CAAC;MACJ,CAAC;MAED,oBACCvB,IAAA,CAACJ,YAAY;QACZ8B,OAAO,EAAGD,YAAc;QACxBD,QAAQ,EAAGA,QAAU;QAErBP,KAAK,EAAGA,KAAO;QACfb,GAAG,EAAGA;MAAK,GAFLa,KAAK,CAACN,IAGZ,CAAC;IAEJ,CAAE,CAAC;EACJ,CAAC,EAAE,CAAEI,cAAc,EAAEH,SAAS,EAAET,QAAQ,CAAG,CAAC;EAE5C,IAAK,CAAEO,MAAM,IAAIA,MAAM,CAACiB,MAAM,KAAK,CAAC,EAAG;IACtC,OAAO,IAAI;EACZ;EAEA,oBACC3B,IAAA,CAACb,UAAU;IACVyC,UAAU;IACVC,8BAA8B,EAAG,KAAO;IACxCC,qBAAqB,EAAGjC,eAAe,CAACkC,OAAS;IAAAC,QAAA,EAE/CZ;EAAoB,CACX,CAAC;AAEf;AAEA,eAAelB,WAAW","ignoreList":[]}

package/build-module/components/block-styles/menu-items.js

@@ -1,4 +1,3 @@
-import { createElement, Fragment } from "react";
 /**
  * WordPress dependencies
  */
@@ -9,6 +8,8 @@ import { check } from '@wordpress/icons';
  * Internal dependencies
  */
 import useStylesForBlocks from './use-styles-for-block';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const noop = () => {};
 export default function BlockStylesMenuItems({
   clientId,
@@ -25,18 +26,21 @@ export default function BlockStylesMenuItems({
   if (!stylesToRender || stylesToRender.length === 0) {
     return null;
   }
-  return createElement(Fragment, null, stylesToRender.map(style => {
-    const menuItemText = style.label || style.name;
-    return createElement(MenuItem, {
-      key: style.name,
-      icon: activeStyle.name === style.name ? check : null,
-      onClick: () => onSelect(style)
-    }, createElement(Text, {
-      as: "span",
-      limit: 18,
-      ellipsizeMode: "tail",
-      truncate: true
-    }, menuItemText));
-  }));
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: stylesToRender.map(style => {
+      const menuItemText = style.label || style.name;
+      return /*#__PURE__*/_jsx(MenuItem, {
+        icon: activeStyle.name === style.name ? check : null,
+        onClick: () => onSelect(style),
+        children: /*#__PURE__*/_jsx(Text, {
+          as: "span",
+          limit: 18,
+          ellipsizeMode: "tail",
+          truncate: true,
+          children: menuItemText
+        })
+      }, style.name);
+    })
+  });
 }
 //# sourceMappingURL=menu-items.js.map

package/build-module/components/block-styles/menu-items.js.map

@@ -1 +1 @@
-{"version":3,"names":["MenuItem","__experimentalText","Text","check","useStylesForBlocks","noop","BlockStylesMenuItems","clientId","onSwitch","onSelect","stylesToRender","activeStyle","length","createElement","Fragment","map","style","menuItemText","label","name","key","icon","onClick","as","limit","ellipsizeMode","truncate"],"sources":["@wordpress/block-editor/src/components/block-styles/menu-items.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { MenuItem, __experimentalText as Text } from '@wordpress/components';\nimport { check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport useStylesForBlocks from './use-styles-for-block';\n\nconst noop = () => {};\n\nexport default function BlockStylesMenuItems( { clientId, onSwitch = noop } ) {\n\tconst { onSelect, stylesToRender, activeStyle } = useStylesForBlocks( {\n\t\tclientId,\n\t\tonSwitch,\n\t} );\n\n\tif ( ! stylesToRender || stylesToRender.length === 0 ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<>\n\t\t\t{ stylesToRender.map( ( style ) => {\n\t\t\t\tconst menuItemText = style.label || style.name;\n\t\t\t\treturn (\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tkey={ style.name }\n\t\t\t\t\t\ticon={ activeStyle.name === style.name ? check : null }\n\t\t\t\t\t\tonClick={ () => onSelect( style ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\tlimit={ 18 }\n\t\t\t\t\t\t\tellipsizeMode=\"tail\"\n\t\t\t\t\t\t\ttruncate\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ menuItemText }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</MenuItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,QAAQ,EAAEC,kBAAkB,IAAIC,IAAI,QAAQ,uBAAuB;AAC5E,SAASC,KAAK,QAAQ,kBAAkB;;AAExC;AACA;AACA;AACA,OAAOC,kBAAkB,MAAM,wBAAwB;AAEvD,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAErB,eAAe,SAASC,oBAAoBA,CAAE;EAAEC,QAAQ;EAAEC,QAAQ,GAAGH;AAAK,CAAC,EAAG;EAC7E,MAAM;IAAEI,QAAQ;IAAEC,cAAc;IAAEC;EAAY,CAAC,GAAGP,kBAAkB,CAAE;IACrEG,QAAQ;IACRC;EACD,CAAE,CAAC;EAEH,IAAK,CAAEE,cAAc,IAAIA,cAAc,CAACE,MAAM,KAAK,CAAC,EAAG;IACtD,OAAO,IAAI;EACZ;EACA,OACCC,aAAA,CAAAC,QAAA,QACGJ,cAAc,CAACK,GAAG,CAAIC,KAAK,IAAM;IAClC,MAAMC,YAAY,GAAGD,KAAK,CAACE,KAAK,IAAIF,KAAK,CAACG,IAAI;IAC9C,OACCN,aAAA,CAACb,QAAQ;MACRoB,GAAG,EAAGJ,KAAK,CAACG,IAAM;MAClBE,IAAI,EAAGV,WAAW,CAACQ,IAAI,KAAKH,KAAK,CAACG,IAAI,GAAGhB,KAAK,GAAG,IAAM;MACvDmB,OAAO,EAAGA,CAAA,KAAMb,QAAQ,CAAEO,KAAM;IAAG,GAEnCH,aAAA,CAACX,IAAI;MACJqB,EAAE,EAAC,MAAM;MACTC,KAAK,EAAG,EAAI;MACZC,aAAa,EAAC,MAAM;MACpBC,QAAQ;IAAA,GAENT,YACG,CACG,CAAC;EAEb,CAAE,CACD,CAAC;AAEL","ignoreList":[]}
+{"version":3,"names":["MenuItem","__experimentalText","Text","check","useStylesForBlocks","jsx","_jsx","Fragment","_Fragment","noop","BlockStylesMenuItems","clientId","onSwitch","onSelect","stylesToRender","activeStyle","length","children","map","style","menuItemText","label","name","icon","onClick","as","limit","ellipsizeMode","truncate"],"sources":["@wordpress/block-editor/src/components/block-styles/menu-items.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { MenuItem, __experimentalText as Text } from '@wordpress/components';\nimport { check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport useStylesForBlocks from './use-styles-for-block';\n\nconst noop = () => {};\n\nexport default function BlockStylesMenuItems( { clientId, onSwitch = noop } ) {\n\tconst { onSelect, stylesToRender, activeStyle } = useStylesForBlocks( {\n\t\tclientId,\n\t\tonSwitch,\n\t} );\n\n\tif ( ! stylesToRender || stylesToRender.length === 0 ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<>\n\t\t\t{ stylesToRender.map( ( style ) => {\n\t\t\t\tconst menuItemText = style.label || style.name;\n\t\t\t\treturn (\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tkey={ style.name }\n\t\t\t\t\t\ticon={ activeStyle.name === style.name ? check : null }\n\t\t\t\t\t\tonClick={ () => onSelect( style ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\tlimit={ 18 }\n\t\t\t\t\t\t\tellipsizeMode=\"tail\"\n\t\t\t\t\t\t\ttruncate\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ menuItemText }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</MenuItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,QAAQ,EAAEC,kBAAkB,IAAIC,IAAI,QAAQ,uBAAuB;AAC5E,SAASC,KAAK,QAAQ,kBAAkB;;AAExC;AACA;AACA;AACA,OAAOC,kBAAkB,MAAM,wBAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAExD,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAErB,eAAe,SAASC,oBAAoBA,CAAE;EAAEC,QAAQ;EAAEC,QAAQ,GAAGH;AAAK,CAAC,EAAG;EAC7E,MAAM;IAAEI,QAAQ;IAAEC,cAAc;IAAEC;EAAY,CAAC,GAAGX,kBAAkB,CAAE;IACrEO,QAAQ;IACRC;EACD,CAAE,CAAC;EAEH,IAAK,CAAEE,cAAc,IAAIA,cAAc,CAACE,MAAM,KAAK,CAAC,EAAG;IACtD,OAAO,IAAI;EACZ;EACA,oBACCV,IAAA,CAAAE,SAAA;IAAAS,QAAA,EACGH,cAAc,CAACI,GAAG,CAAIC,KAAK,IAAM;MAClC,MAAMC,YAAY,GAAGD,KAAK,CAACE,KAAK,IAAIF,KAAK,CAACG,IAAI;MAC9C,oBACChB,IAAA,CAACN,QAAQ;QAERuB,IAAI,EAAGR,WAAW,CAACO,IAAI,KAAKH,KAAK,CAACG,IAAI,GAAGnB,KAAK,GAAG,IAAM;QACvDqB,OAAO,EAAGA,CAAA,KAAMX,QAAQ,CAAEM,KAAM,CAAG;QAAAF,QAAA,eAEnCX,IAAA,CAACJ,IAAI;UACJuB,EAAE,EAAC,MAAM;UACTC,KAAK,EAAG,EAAI;UACZC,aAAa,EAAC,MAAM;UACpBC,QAAQ;UAAAX,QAAA,EAENG;QAAY,CACT;MAAC,GAXDD,KAAK,CAACG,IAYH,CAAC;IAEb,CAAE;EAAC,CACF,CAAC;AAEL","ignoreList":[]}

package/build-module/components/block-styles/preview-panel.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
@@ -10,6 +9,7 @@ import { useMemo } from '@wordpress/element';
  */
 import InserterPreviewPanel from '../inserter/preview-panel';
 import { replaceActiveStyle } from './utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 export default function BlockStylesPreviewPanel({
   genericPreviewBlock,
   style,
@@ -30,7 +30,7 @@ export default function BlockStylesPreviewPanel({
       example
     };
   }, [genericPreviewBlock, styleClassName]);
-  return createElement(InserterPreviewPanel, {
+  return /*#__PURE__*/_jsx(InserterPreviewPanel, {
     item: previewBlocks
   });
 }

package/build-module/components/block-styles/preview-panel.js.map

@@ -1 +1 @@
-{"version":3,"names":["getBlockType","useMemo","InserterPreviewPanel","replaceActiveStyle","BlockStylesPreviewPanel","genericPreviewBlock","style","className","activeStyle","example","name","styleClassName","previewBlocks","title","label","description","initialAttributes","attributes","createElement","item"],"sources":["@wordpress/block-editor/src/components/block-styles/preview-panel.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockType } from '@wordpress/blocks';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport InserterPreviewPanel from '../inserter/preview-panel';\nimport { replaceActiveStyle } from './utils';\n\nexport default function BlockStylesPreviewPanel( {\n\tgenericPreviewBlock,\n\tstyle,\n\tclassName,\n\tactiveStyle,\n} ) {\n\tconst example = getBlockType( genericPreviewBlock.name )?.example;\n\tconst styleClassName = replaceActiveStyle( className, activeStyle, style );\n\tconst previewBlocks = useMemo( () => {\n\t\treturn {\n\t\t\t...genericPreviewBlock,\n\t\t\ttitle: style.label || style.name,\n\t\t\tdescription: style.description,\n\t\t\tinitialAttributes: {\n\t\t\t\t...genericPreviewBlock.attributes,\n\t\t\t\tclassName:\n\t\t\t\t\tstyleClassName +\n\t\t\t\t\t' block-editor-block-styles__block-preview-container',\n\t\t\t},\n\t\t\texample,\n\t\t};\n\t}, [ genericPreviewBlock, styleClassName ] );\n\n\treturn <InserterPreviewPanel item={ previewBlocks } />;\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,YAAY,QAAQ,mBAAmB;AAChD,SAASC,OAAO,QAAQ,oBAAoB;;AAE5C;AACA;AACA;AACA,OAAOC,oBAAoB,MAAM,2BAA2B;AAC5D,SAASC,kBAAkB,QAAQ,SAAS;AAE5C,eAAe,SAASC,uBAAuBA,CAAE;EAChDC,mBAAmB;EACnBC,KAAK;EACLC,SAAS;EACTC;AACD,CAAC,EAAG;EACH,MAAMC,OAAO,GAAGT,YAAY,CAAEK,mBAAmB,CAACK,IAAK,CAAC,EAAED,OAAO;EACjE,MAAME,cAAc,GAAGR,kBAAkB,CAAEI,SAAS,EAAEC,WAAW,EAAEF,KAAM,CAAC;EAC1E,MAAMM,aAAa,GAAGX,OAAO,CAAE,MAAM;IACpC,OAAO;MACN,GAAGI,mBAAmB;MACtBQ,KAAK,EAAEP,KAAK,CAACQ,KAAK,IAAIR,KAAK,CAACI,IAAI;MAChCK,WAAW,EAAET,KAAK,CAACS,WAAW;MAC9BC,iBAAiB,EAAE;QAClB,GAAGX,mBAAmB,CAACY,UAAU;QACjCV,SAAS,EACRI,cAAc,GACd;MACF,CAAC;MACDF;IACD,CAAC;EACF,CAAC,EAAE,CAAEJ,mBAAmB,EAAEM,cAAc,CAAG,CAAC;EAE5C,OAAOO,aAAA,CAAChB,oBAAoB;IAACiB,IAAI,EAAGP;EAAe,CAAE,CAAC;AACvD","ignoreList":[]}
+{"version":3,"names":["getBlockType","useMemo","InserterPreviewPanel","replaceActiveStyle","jsx","_jsx","BlockStylesPreviewPanel","genericPreviewBlock","style","className","activeStyle","example","name","styleClassName","previewBlocks","title","label","description","initialAttributes","attributes","item"],"sources":["@wordpress/block-editor/src/components/block-styles/preview-panel.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockType } from '@wordpress/blocks';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport InserterPreviewPanel from '../inserter/preview-panel';\nimport { replaceActiveStyle } from './utils';\n\nexport default function BlockStylesPreviewPanel( {\n\tgenericPreviewBlock,\n\tstyle,\n\tclassName,\n\tactiveStyle,\n} ) {\n\tconst example = getBlockType( genericPreviewBlock.name )?.example;\n\tconst styleClassName = replaceActiveStyle( className, activeStyle, style );\n\tconst previewBlocks = useMemo( () => {\n\t\treturn {\n\t\t\t...genericPreviewBlock,\n\t\t\ttitle: style.label || style.name,\n\t\t\tdescription: style.description,\n\t\t\tinitialAttributes: {\n\t\t\t\t...genericPreviewBlock.attributes,\n\t\t\t\tclassName:\n\t\t\t\t\tstyleClassName +\n\t\t\t\t\t' block-editor-block-styles__block-preview-container',\n\t\t\t},\n\t\t\texample,\n\t\t};\n\t}, [ genericPreviewBlock, styleClassName ] );\n\n\treturn <InserterPreviewPanel item={ previewBlocks } />;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,YAAY,QAAQ,mBAAmB;AAChD,SAASC,OAAO,QAAQ,oBAAoB;;AAE5C;AACA;AACA;AACA,OAAOC,oBAAoB,MAAM,2BAA2B;AAC5D,SAASC,kBAAkB,QAAQ,SAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE7C,eAAe,SAASC,uBAAuBA,CAAE;EAChDC,mBAAmB;EACnBC,KAAK;EACLC,SAAS;EACTC;AACD,CAAC,EAAG;EACH,MAAMC,OAAO,GAAGX,YAAY,CAAEO,mBAAmB,CAACK,IAAK,CAAC,EAAED,OAAO;EACjE,MAAME,cAAc,GAAGV,kBAAkB,CAAEM,SAAS,EAAEC,WAAW,EAAEF,KAAM,CAAC;EAC1E,MAAMM,aAAa,GAAGb,OAAO,CAAE,MAAM;IACpC,OAAO;MACN,GAAGM,mBAAmB;MACtBQ,KAAK,EAAEP,KAAK,CAACQ,KAAK,IAAIR,KAAK,CAACI,IAAI;MAChCK,WAAW,EAAET,KAAK,CAACS,WAAW;MAC9BC,iBAAiB,EAAE;QAClB,GAAGX,mBAAmB,CAACY,UAAU;QACjCV,SAAS,EACRI,cAAc,GACd;MACF,CAAC;MACDF;IACD,CAAC;EACF,CAAC,EAAE,CAAEJ,mBAAmB,EAAEM,cAAc,CAAG,CAAC;EAE5C,oBAAOR,IAAA,CAACH,oBAAoB;IAACkB,IAAI,EAAGN;EAAe,CAAE,CAAC;AACvD","ignoreList":[]}

package/build-module/components/block-styles/preview.native.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -15,6 +14,8 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
  * Internal dependencies
  */
 import styles from './style.scss';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const MAX_ITEM_WIDTH = 120;
 const HALF_COLUMN = 0.5;
 function StylePreview({
@@ -54,32 +55,35 @@ function StylePreview({
   };
   const innerOutlineStyle = usePreferredColorSchemeStyle(styles.innerOutline, styles.innerOutlineDark);
   const getOutline = outlineStyles => outlineStyles.map((outlineStyle, index) => {
-    return createElement(Animated.View, {
+    return /*#__PURE__*/_jsx(Animated.View, {
       style: [outlineStyle, {
         opacity
-      }, styles[name]],
-      key: index
-    });
+      }, styles[name]]
+    }, index);
   });
-  return createElement(TouchableWithoutFeedback, {
+  return /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
     onPress: () => {
       onPress();
       animateOutline();
-    }
-  }, createElement(View, {
-    style: [styles.container, {
-      width: itemWidth
-    }]
-  }, createElement(View, {
-    style: styles.imageWrapper
-  }, isActive && getOutline([styles.outline, innerOutlineStyle]), createElement(Image, {
-    style: [styles.image, styles[name]],
-    source: {
-      uri: url
-    }
-  })), createElement(Text, {
-    style: [labelStyle, isActive && styles.labelSelected]
-  }, label)));
+    },
+    children: /*#__PURE__*/_jsxs(View, {
+      style: [styles.container, {
+        width: itemWidth
+      }],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.imageWrapper,
+        children: [isActive && getOutline([styles.outline, innerOutlineStyle]), /*#__PURE__*/_jsx(Image, {
+          style: [styles.image, styles[name]],
+          source: {
+            uri: url
+          }
+        })]
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [labelStyle, isActive && styles.labelSelected],
+        children: label
+      })]
+    })
+  });
 }
 export default StylePreview;
 //# sourceMappingURL=preview.native.js.map

package/build-module/components/block-styles/preview.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["View","TouchableWithoutFeedback","Text","Dimensions","Animated","Easing","Image","BottomSheet","useState","useEffect","useRef","usePreferredColorSchemeStyle","styles","MAX_ITEM_WIDTH","HALF_COLUMN","StylePreview","onPress","isActive","style","url","itemWidth","setItemWidth","label","name","opacity","Value","current","onLayout","columnsNum","Math","floor","getWidth","dimensionsChangeSubscription","addEventListener","remove","labelStyle","labelDark","animateOutline","setValue","timing","toValue","duration","useNativeDriver","easing","linear","start","innerOutlineStyle","innerOutline","innerOutlineDark","getOutline","outlineStyles","map","outlineStyle","index","createElement","key","container","width","imageWrapper","outline","image","source","uri","labelSelected"],"sources":["@wordpress/block-editor/src/components/block-styles/preview.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tView,\n\tTouchableWithoutFeedback,\n\tText,\n\tDimensions,\n\tAnimated,\n\tEasing,\n\tImage,\n} from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { BottomSheet } from '@wordpress/components';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst MAX_ITEM_WIDTH = 120;\nconst HALF_COLUMN = 0.5;\n\nfunction StylePreview( { onPress, isActive, style, url } ) {\n\tconst [ itemWidth, setItemWidth ] = useState( MAX_ITEM_WIDTH );\n\tconst { label, name } = style;\n\tconst opacity = useRef( new Animated.Value( 1 ) ).current;\n\n\tfunction onLayout() {\n\t\tconst columnsNum =\n\t\t\t// To indicate scroll availabilty, there is a need to display additional half the column.\n\t\t\tMath.floor( BottomSheet.getWidth() / MAX_ITEM_WIDTH ) + HALF_COLUMN;\n\t\tsetItemWidth( BottomSheet.getWidth() / columnsNum );\n\t}\n\n\tuseEffect( () => {\n\t\tonLayout();\n\t\tconst dimensionsChangeSubscription = Dimensions.addEventListener(\n\t\t\t'change',\n\t\t\tonLayout\n\t\t);\n\n\t\treturn () => {\n\t\t\tdimensionsChangeSubscription.remove();\n\t\t};\n\t}, [] );\n\n\tconst labelStyle = usePreferredColorSchemeStyle(\n\t\tstyles.label,\n\t\tstyles.labelDark\n\t);\n\n\tconst animateOutline = () => {\n\t\topacity.setValue( 0 );\n\t\tAnimated.timing( opacity, {\n\t\t\ttoValue: 1,\n\t\t\tduration: 100,\n\t\t\tuseNativeDriver: true,\n\t\t\teasing: Easing.linear,\n\t\t} ).start();\n\t};\n\n\tconst innerOutlineStyle = usePreferredColorSchemeStyle(\n\t\tstyles.innerOutline,\n\t\tstyles.innerOutlineDark\n\t);\n\n\tconst getOutline = ( outlineStyles ) =>\n\t\toutlineStyles.map( ( outlineStyle, index ) => {\n\t\t\treturn (\n\t\t\t\t<Animated.View\n\t\t\t\t\tstyle={ [ outlineStyle, { opacity }, styles[ name ] ] }\n\t\t\t\t\tkey={ index }\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\n\treturn (\n\t\t<TouchableWithoutFeedback\n\t\t\tonPress={ () => {\n\t\t\t\tonPress();\n\t\t\t\tanimateOutline();\n\t\t\t} }\n\t\t>\n\t\t\t<View style={ [ styles.container, { width: itemWidth } ] }>\n\t\t\t\t<View style={ styles.imageWrapper }>\n\t\t\t\t\t{ isActive &&\n\t\t\t\t\t\tgetOutline( [ styles.outline, innerOutlineStyle ] ) }\n\t\t\t\t\t<Image\n\t\t\t\t\t\tstyle={ [ styles.image, styles[ name ] ] }\n\t\t\t\t\t\tsource={ { uri: url } }\n\t\t\t\t\t/>\n\t\t\t\t</View>\n\t\t\t\t<Text\n\t\t\t\t\tstyle={ [ labelStyle, isActive && styles.labelSelected ] }\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</Text>\n\t\t\t</View>\n\t\t</TouchableWithoutFeedback>\n\t);\n}\n\nexport default StylePreview;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["View","TouchableWithoutFeedback","Text","Dimensions","Animated","Easing","Image","BottomSheet","useState","useEffect","useRef","usePreferredColorSchemeStyle","styles","jsx","_jsx","jsxs","_jsxs","MAX_ITEM_WIDTH","HALF_COLUMN","StylePreview","onPress","isActive","style","url","itemWidth","setItemWidth","label","name","opacity","Value","current","onLayout","columnsNum","Math","floor","getWidth","dimensionsChangeSubscription","addEventListener","remove","labelStyle","labelDark","animateOutline","setValue","timing","toValue","duration","useNativeDriver","easing","linear","start","innerOutlineStyle","innerOutline","innerOutlineDark","getOutline","outlineStyles","map","outlineStyle","index","children","container","width","imageWrapper","outline","image","source","uri","labelSelected"],"sources":["@wordpress/block-editor/src/components/block-styles/preview.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tView,\n\tTouchableWithoutFeedback,\n\tText,\n\tDimensions,\n\tAnimated,\n\tEasing,\n\tImage,\n} from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { BottomSheet } from '@wordpress/components';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst MAX_ITEM_WIDTH = 120;\nconst HALF_COLUMN = 0.5;\n\nfunction StylePreview( { onPress, isActive, style, url } ) {\n\tconst [ itemWidth, setItemWidth ] = useState( MAX_ITEM_WIDTH );\n\tconst { label, name } = style;\n\tconst opacity = useRef( new Animated.Value( 1 ) ).current;\n\n\tfunction onLayout() {\n\t\tconst columnsNum =\n\t\t\t// To indicate scroll availabilty, there is a need to display additional half the column.\n\t\t\tMath.floor( BottomSheet.getWidth() / MAX_ITEM_WIDTH ) + HALF_COLUMN;\n\t\tsetItemWidth( BottomSheet.getWidth() / columnsNum );\n\t}\n\n\tuseEffect( () => {\n\t\tonLayout();\n\t\tconst dimensionsChangeSubscription = Dimensions.addEventListener(\n\t\t\t'change',\n\t\t\tonLayout\n\t\t);\n\n\t\treturn () => {\n\t\t\tdimensionsChangeSubscription.remove();\n\t\t};\n\t}, [] );\n\n\tconst labelStyle = usePreferredColorSchemeStyle(\n\t\tstyles.label,\n\t\tstyles.labelDark\n\t);\n\n\tconst animateOutline = () => {\n\t\topacity.setValue( 0 );\n\t\tAnimated.timing( opacity, {\n\t\t\ttoValue: 1,\n\t\t\tduration: 100,\n\t\t\tuseNativeDriver: true,\n\t\t\teasing: Easing.linear,\n\t\t} ).start();\n\t};\n\n\tconst innerOutlineStyle = usePreferredColorSchemeStyle(\n\t\tstyles.innerOutline,\n\t\tstyles.innerOutlineDark\n\t);\n\n\tconst getOutline = ( outlineStyles ) =>\n\t\toutlineStyles.map( ( outlineStyle, index ) => {\n\t\t\treturn (\n\t\t\t\t<Animated.View\n\t\t\t\t\tstyle={ [ outlineStyle, { opacity }, styles[ name ] ] }\n\t\t\t\t\tkey={ index }\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\n\treturn (\n\t\t<TouchableWithoutFeedback\n\t\t\tonPress={ () => {\n\t\t\t\tonPress();\n\t\t\t\tanimateOutline();\n\t\t\t} }\n\t\t>\n\t\t\t<View style={ [ styles.container, { width: itemWidth } ] }>\n\t\t\t\t<View style={ styles.imageWrapper }>\n\t\t\t\t\t{ isActive &&\n\t\t\t\t\t\tgetOutline( [ styles.outline, innerOutlineStyle ] ) }\n\t\t\t\t\t<Image\n\t\t\t\t\t\tstyle={ [ styles.image, styles[ name ] ] }\n\t\t\t\t\t\tsource={ { uri: url } }\n\t\t\t\t\t/>\n\t\t\t\t</View>\n\t\t\t\t<Text\n\t\t\t\t\tstyle={ [ labelStyle, isActive && styles.labelSelected ] }\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</Text>\n\t\t\t</View>\n\t\t</TouchableWithoutFeedback>\n\t);\n}\n\nexport default StylePreview;\n"],"mappings":"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","ignoreList":[]}

package/build-module/components/block-switcher/block-styles-menu.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
@@ -9,6 +8,7 @@ import { MenuGroup } from '@wordpress/components';
  * Internal dependencies
  */
 import BlockStylesMenuItems from '../block-styles/menu-items';
+import { jsx as _jsx } from "react/jsx-runtime";
 export default function BlockStylesMenu({
   hoveredBlock,
   onSwitch
@@ -16,12 +16,13 @@ export default function BlockStylesMenu({
   const {
     clientId
   } = hoveredBlock;
-  return createElement(MenuGroup, {
+  return /*#__PURE__*/_jsx(MenuGroup, {
     label: __('Styles'),
-    className: "block-editor-block-switcher__styles__menugroup"
-  }, createElement(BlockStylesMenuItems, {
-    clientId: clientId,
-    onSwitch: onSwitch
-  }));
+    className: "block-editor-block-switcher__styles__menugroup",
+    children: /*#__PURE__*/_jsx(BlockStylesMenuItems, {
+      clientId: clientId,
+      onSwitch: onSwitch
+    })
+  });
 }
 //# sourceMappingURL=block-styles-menu.js.map

package/build-module/components/block-switcher/block-styles-menu.js.map

@@ -1 +1 @@
-{"version":3,"names":["__","MenuGroup","BlockStylesMenuItems","BlockStylesMenu","hoveredBlock","onSwitch","clientId","createElement","label","className"],"sources":["@wordpress/block-editor/src/components/block-switcher/block-styles-menu.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { MenuGroup } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport BlockStylesMenuItems from '../block-styles/menu-items';\n\nexport default function BlockStylesMenu( { hoveredBlock, onSwitch } ) {\n\tconst { clientId } = hoveredBlock;\n\n\treturn (\n\t\t<MenuGroup\n\t\t\tlabel={ __( 'Styles' ) }\n\t\t\tclassName=\"block-editor-block-switcher__styles__menugroup\"\n\t\t>\n\t\t\t<BlockStylesMenuItems clientId={ clientId } onSwitch={ onSwitch } />\n\t\t</MenuGroup>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,SAAS,QAAQ,uBAAuB;;AAEjD;AACA;AACA;AACA,OAAOC,oBAAoB,MAAM,4BAA4B;AAE7D,eAAe,SAASC,eAAeA,CAAE;EAAEC,YAAY;EAAEC;AAAS,CAAC,EAAG;EACrE,MAAM;IAAEC;EAAS,CAAC,GAAGF,YAAY;EAEjC,OACCG,aAAA,CAACN,SAAS;IACTO,KAAK,EAAGR,EAAE,CAAE,QAAS,CAAG;IACxBS,SAAS,EAAC;EAAgD,GAE1DF,aAAA,CAACL,oBAAoB;IAACI,QAAQ,EAAGA,QAAU;IAACD,QAAQ,EAAGA;EAAU,CAAE,CACzD,CAAC;AAEd","ignoreList":[]}
+{"version":3,"names":["__","MenuGroup","BlockStylesMenuItems","jsx","_jsx","BlockStylesMenu","hoveredBlock","onSwitch","clientId","label","className","children"],"sources":["@wordpress/block-editor/src/components/block-switcher/block-styles-menu.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { MenuGroup } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport BlockStylesMenuItems from '../block-styles/menu-items';\n\nexport default function BlockStylesMenu( { hoveredBlock, onSwitch } ) {\n\tconst { clientId } = hoveredBlock;\n\n\treturn (\n\t\t<MenuGroup\n\t\t\tlabel={ __( 'Styles' ) }\n\t\t\tclassName=\"block-editor-block-switcher__styles__menugroup\"\n\t\t>\n\t\t\t<BlockStylesMenuItems clientId={ clientId } onSwitch={ onSwitch } />\n\t\t</MenuGroup>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,SAAS,QAAQ,uBAAuB;;AAEjD;AACA;AACA;AACA,OAAOC,oBAAoB,MAAM,4BAA4B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE9D,eAAe,SAASC,eAAeA,CAAE;EAAEC,YAAY;EAAEC;AAAS,CAAC,EAAG;EACrE,MAAM;IAAEC;EAAS,CAAC,GAAGF,YAAY;EAEjC,oBACCF,IAAA,CAACH,SAAS;IACTQ,KAAK,EAAGT,EAAE,CAAE,QAAS,CAAG;IACxBU,SAAS,EAAC,gDAAgD;IAAAC,QAAA,eAE1DP,IAAA,CAACF,oBAAoB;MAACM,QAAQ,EAAGA,QAAU;MAACD,QAAQ,EAAGA;IAAU,CAAE;EAAC,CAC1D,CAAC;AAEd","ignoreList":[]}

package/build-module/components/block-switcher/block-transformations-menu.js

@@ -1,4 +1,3 @@
-import { createElement, Fragment } from "react";
 /**
  * WordPress dependencies
  */
@@ -24,6 +23,9 @@ import BlockVariationTransformations from './block-variation-transformations';
  * @param {Object[]} possibleBlockTransformations The available block transformations.
  * @return {Record<string, Object[]>} The grouped block transformations.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 function useGroupedTransforms(possibleBlockTransformations) {
   const priorityContentTranformationBlocks = {
     'core/paragraph': 1,
@@ -86,40 +88,42 @@ const BlockTransformationsMenu = ({
   // We have to check if both content transformations(priority and rest) are set
   // in order to create a separate MenuGroup for them.
   const hasBothContentTransformations = priorityTextTransformations.length && restTransformations.length;
-  const restTransformItems = !!restTransformations.length && createElement(RestTransformationItems, {
+  const restTransformItems = !!restTransformations.length && /*#__PURE__*/_jsx(RestTransformationItems, {
     restTransformations: restTransformations,
     onSelect: onSelect,
     setHoveredTransformItemName: setHoveredTransformItemName
   });
-  return createElement(Fragment, null, createElement(MenuGroup, {
-    label: __('Transform to'),
-    className: className
-  }, hoveredTransformItemName && createElement(PreviewBlockPopover, {
-    blocks: switchToBlockType(blocks, hoveredTransformItemName)
-  }), !!possibleBlockVariationTransformations?.length && createElement(BlockVariationTransformations, {
-    transformations: possibleBlockVariationTransformations,
-    blocks: blocks,
-    onSelect: onSelectVariation
-  }), priorityTextTransformations.map(item => createElement(BlockTranformationItem, {
-    key: item.name,
-    item: item,
-    onSelect: onSelect,
-    setHoveredTransformItemName: setHoveredTransformItemName
-  })), !hasBothContentTransformations && restTransformItems), !!hasBothContentTransformations && createElement(MenuGroup, {
-    className: className
-  }, restTransformItems));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(MenuGroup, {
+      label: __('Transform to'),
+      className: className,
+      children: [hoveredTransformItemName && /*#__PURE__*/_jsx(PreviewBlockPopover, {
+        blocks: switchToBlockType(blocks, hoveredTransformItemName)
+      }), !!possibleBlockVariationTransformations?.length && /*#__PURE__*/_jsx(BlockVariationTransformations, {
+        transformations: possibleBlockVariationTransformations,
+        blocks: blocks,
+        onSelect: onSelectVariation
+      }), priorityTextTransformations.map(item => /*#__PURE__*/_jsx(BlockTranformationItem, {
+        item: item,
+        onSelect: onSelect,
+        setHoveredTransformItemName: setHoveredTransformItemName
+      }, item.name)), !hasBothContentTransformations && restTransformItems]
+    }), !!hasBothContentTransformations && /*#__PURE__*/_jsx(MenuGroup, {
+      className: className,
+      children: restTransformItems
+    })]
+  });
 };
 function RestTransformationItems({
   restTransformations,
   onSelect,
   setHoveredTransformItemName
 }) {
-  return restTransformations.map(item => createElement(BlockTranformationItem, {
-    key: item.name,
+  return restTransformations.map(item => /*#__PURE__*/_jsx(BlockTranformationItem, {
     item: item,
     onSelect: onSelect,
     setHoveredTransformItemName: setHoveredTransformItemName
-  }));
+  }, item.name));
 }
 function BlockTranformationItem({
   item,
@@ -132,7 +136,7 @@ function BlockTranformationItem({
     title,
     isDisabled
   } = item;
-  return createElement(MenuItem, {
+  return /*#__PURE__*/_jsxs(MenuItem, {
     className: getBlockMenuDefaultClassName(name),
     onClick: event => {
       event.preventDefault();
@@ -140,11 +144,12 @@ function BlockTranformationItem({
     },
     disabled: isDisabled,
     onMouseLeave: () => setHoveredTransformItemName(null),
-    onMouseEnter: () => setHoveredTransformItemName(name)
-  }, createElement(BlockIcon, {
-    icon: icon,
-    showColors: true
-  }), title);
+    onMouseEnter: () => setHoveredTransformItemName(name),
+    children: [/*#__PURE__*/_jsx(BlockIcon, {
+      icon: icon,
+      showColors: true
+    }), title]
+  });
 }
 export default BlockTransformationsMenu;
 //# sourceMappingURL=block-transformations-menu.js.map