@wordpress/block-editor 12.25.0 → 13.0.0

package/build-module/components/block-settings-menu-controls/index.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
@@ -15,6 +14,8 @@ import { BlockLockMenuItem, useBlockLock } from '../block-lock';
 import { store as blockEditorStore } from '../../store';
 import BlockModeToggle from '../block-settings-menu/block-mode-toggle';
 import { BlockRenameControl, useBlockRename } from '../block-rename';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const {
   Fill,
   Slot
@@ -25,16 +26,19 @@ const BlockSettingsMenuControlsSlot = ({
 }) => {
   const {
     selectedBlocks,
-    selectedClientIds
+    selectedClientIds,
+    isContentOnly
   } = useSelect(select => {
     const {
       getBlockNamesByClientId,
-      getSelectedBlockClientIds
+      getSelectedBlockClientIds,
+      getBlockEditingMode
     } = select(blockEditorStore);
     const ids = clientIds !== null ? clientIds : getSelectedBlockClientIds();
     return {
       selectedBlocks: getBlockNamesByClientId(ids),
-      selectedClientIds: ids
+      selectedClientIds: ids,
+      isContentOnly: getBlockEditingMode(ids[0]) === 'contentOnly'
     };
   }, [clientIds]);
   const {
@@ -43,8 +47,8 @@ const BlockSettingsMenuControlsSlot = ({
   const {
     canRename
   } = useBlockRename(selectedBlocks[0]);
-  const showLockButton = selectedClientIds.length === 1 && canLock;
-  const showRenameButton = selectedClientIds.length === 1 && canRename;
+  const showLockButton = selectedClientIds.length === 1 && canLock && !isContentOnly;
+  const showRenameButton = selectedClientIds.length === 1 && canRename && !isContentOnly;
 
   // Check if current selection of blocks is Groupable or Ungroupable
   // and pass this props down to ConvertToGroupButton.
@@ -54,29 +58,33 @@ const BlockSettingsMenuControlsSlot = ({
     isUngroupable
   } = convertToGroupButtonProps;
   const showConvertToGroupButton = isGroupable || isUngroupable;
-  return createElement(Slot, {
+  return /*#__PURE__*/_jsx(Slot, {
     fillProps: {
       ...fillProps,
       selectedBlocks,
       selectedClientIds
+    },
+    children: fills => {
+      if (!fills?.length > 0 && !showConvertToGroupButton && !showLockButton) {
+        return null;
+      }
+      return /*#__PURE__*/_jsxs(MenuGroup, {
+        children: [showConvertToGroupButton && /*#__PURE__*/_jsx(ConvertToGroupButton, {
+          ...convertToGroupButtonProps,
+          onClose: fillProps?.onClose
+        }), showLockButton && /*#__PURE__*/_jsx(BlockLockMenuItem, {
+          clientId: selectedClientIds[0]
+        }), showRenameButton && /*#__PURE__*/_jsx(BlockRenameControl, {
+          clientId: selectedClientIds[0]
+        }), fills, fillProps?.canMove && !fillProps?.onlyBlock && !isContentOnly && /*#__PURE__*/_jsx(MenuItem, {
+          onClick: pipe(fillProps?.onClose, fillProps?.onMoveTo),
+          children: __('Move to')
+        }), fillProps?.count === 1 && !isContentOnly && /*#__PURE__*/_jsx(BlockModeToggle, {
+          clientId: fillProps?.firstBlockClientId,
+          onToggle: fillProps?.onClose
+        })]
+      });
     }
-  }, fills => {
-    if (!fills?.length > 0 && !showConvertToGroupButton && !showLockButton) {
-      return null;
-    }
-    return createElement(MenuGroup, null, showConvertToGroupButton && createElement(ConvertToGroupButton, {
-      ...convertToGroupButtonProps,
-      onClose: fillProps?.onClose
-    }), showLockButton && createElement(BlockLockMenuItem, {
-      clientId: selectedClientIds[0]
-    }), showRenameButton && createElement(BlockRenameControl, {
-      clientId: selectedClientIds[0]
-    }), fills, fillProps?.canMove && !fillProps?.onlyBlock && createElement(MenuItem, {
-      onClick: pipe(fillProps?.onClose, fillProps?.onMoveTo)
-    }, __('Move to')), fillProps?.count === 1 && createElement(BlockModeToggle, {
-      clientId: fillProps?.firstBlockClientId,
-      onToggle: fillProps?.onClose
-    }));
   });
 };
 
@@ -89,11 +97,12 @@ const BlockSettingsMenuControlsSlot = ({
 function BlockSettingsMenuControls({
   ...props
 }) {
-  return createElement(StyleProvider, {
-    document: document
-  }, createElement(Fill, {
-    ...props
-  }));
+  return /*#__PURE__*/_jsx(StyleProvider, {
+    document: document,
+    children: /*#__PURE__*/_jsx(Fill, {
+      ...props
+    })
+  });
 }
 BlockSettingsMenuControls.Slot = BlockSettingsMenuControlsSlot;
 export default BlockSettingsMenuControls;

package/build-module/components/block-settings-menu-controls/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["createSlotFill","MenuGroup","MenuItem","__experimentalStyleProvider","StyleProvider","useSelect","pipe","__","useConvertToGroupButtonProps","ConvertToGroupButton","BlockLockMenuItem","useBlockLock","store","blockEditorStore","BlockModeToggle","BlockRenameControl","useBlockRename","Fill","Slot","BlockSettingsMenuControlsSlot","fillProps","clientIds","selectedBlocks","selectedClientIds","select","getBlockNamesByClientId","getSelectedBlockClientIds","ids","canLock","canRename","showLockButton","length","showRenameButton","convertToGroupButtonProps","isGroupable","isUngroupable","showConvertToGroupButton","createElement","fills","onClose","clientId","canMove","onlyBlock","onClick","onMoveTo","count","firstBlockClientId","onToggle","BlockSettingsMenuControls","props","document"],"sources":["@wordpress/block-editor/src/components/block-settings-menu-controls/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tcreateSlotFill,\n\tMenuGroup,\n\tMenuItem,\n\t__experimentalStyleProvider as StyleProvider,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { pipe } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tuseConvertToGroupButtonProps,\n\tConvertToGroupButton,\n} from '../convert-to-group-buttons';\nimport { BlockLockMenuItem, useBlockLock } from '../block-lock';\nimport { store as blockEditorStore } from '../../store';\nimport BlockModeToggle from '../block-settings-menu/block-mode-toggle';\n\nimport { BlockRenameControl, useBlockRename } from '../block-rename';\n\nconst { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' );\n\nconst BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {\n\tconst { selectedBlocks, selectedClientIds } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockNamesByClientId, getSelectedBlockClientIds } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\tconst ids =\n\t\t\t\tclientIds !== null ? clientIds : getSelectedBlockClientIds();\n\t\t\treturn {\n\t\t\t\tselectedBlocks: getBlockNamesByClientId( ids ),\n\t\t\t\tselectedClientIds: ids,\n\t\t\t};\n\t\t},\n\t\t[ clientIds ]\n\t);\n\n\tconst { canLock } = useBlockLock( selectedClientIds[ 0 ] );\n\tconst { canRename } = useBlockRename( selectedBlocks[ 0 ] );\n\tconst showLockButton = selectedClientIds.length === 1 && canLock;\n\tconst showRenameButton = selectedClientIds.length === 1 && canRename;\n\n\t// Check if current selection of blocks is Groupable or Ungroupable\n\t// and pass this props down to ConvertToGroupButton.\n\tconst convertToGroupButtonProps =\n\t\tuseConvertToGroupButtonProps( selectedClientIds );\n\tconst { isGroupable, isUngroupable } = convertToGroupButtonProps;\n\tconst showConvertToGroupButton = isGroupable || isUngroupable;\n\n\treturn (\n\t\t<Slot\n\t\t\tfillProps={ {\n\t\t\t\t...fillProps,\n\t\t\t\tselectedBlocks,\n\t\t\t\tselectedClientIds,\n\t\t\t} }\n\t\t>\n\t\t\t{ ( fills ) => {\n\t\t\t\tif (\n\t\t\t\t\t! fills?.length > 0 &&\n\t\t\t\t\t! showConvertToGroupButton &&\n\t\t\t\t\t! showLockButton\n\t\t\t\t) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t{ showConvertToGroupButton && (\n\t\t\t\t\t\t\t<ConvertToGroupButton\n\t\t\t\t\t\t\t\t{ ...convertToGroupButtonProps }\n\t\t\t\t\t\t\t\tonClose={ fillProps?.onClose }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ showLockButton && (\n\t\t\t\t\t\t\t<BlockLockMenuItem\n\t\t\t\t\t\t\t\tclientId={ selectedClientIds[ 0 ] }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ showRenameButton && (\n\t\t\t\t\t\t\t<BlockRenameControl\n\t\t\t\t\t\t\t\tclientId={ selectedClientIds[ 0 ] }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ fills }\n\t\t\t\t\t\t{ fillProps?.canMove && ! fillProps?.onlyBlock && (\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\tonClick={ pipe(\n\t\t\t\t\t\t\t\t\tfillProps?.onClose,\n\t\t\t\t\t\t\t\t\tfillProps?.onMoveTo\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Move to' ) }\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ fillProps?.count === 1 && (\n\t\t\t\t\t\t\t<BlockModeToggle\n\t\t\t\t\t\t\t\tclientId={ fillProps?.firstBlockClientId }\n\t\t\t\t\t\t\t\tonToggle={ fillProps?.onClose }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</MenuGroup>\n\t\t\t\t);\n\t\t\t} }\n\t\t</Slot>\n\t);\n};\n\n/**\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-settings-menu-controls/README.md\n *\n * @param {Object} props Fill props.\n * @return {Element} Element.\n */\nfunction BlockSettingsMenuControls( { ...props } ) {\n\treturn (\n\t\t<StyleProvider document={ document }>\n\t\t\t<Fill { ...props } />\n\t\t</StyleProvider>\n\t);\n}\n\nBlockSettingsMenuControls.Slot = BlockSettingsMenuControlsSlot;\n\nexport default BlockSettingsMenuControls;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["createSlotFill","MenuGroup","MenuItem","__experimentalStyleProvider","StyleProvider","useSelect","pipe","__","useConvertToGroupButtonProps","ConvertToGroupButton","BlockLockMenuItem","useBlockLock","store","blockEditorStore","BlockModeToggle","BlockRenameControl","useBlockRename","jsx","_jsx","jsxs","_jsxs","Fill","Slot","BlockSettingsMenuControlsSlot","fillProps","clientIds","selectedBlocks","selectedClientIds","isContentOnly","select","getBlockNamesByClientId","getSelectedBlockClientIds","getBlockEditingMode","ids","canLock","canRename","showLockButton","length","showRenameButton","convertToGroupButtonProps","isGroupable","isUngroupable","showConvertToGroupButton","children","fills","onClose","clientId","canMove","onlyBlock","onClick","onMoveTo","count","firstBlockClientId","onToggle","BlockSettingsMenuControls","props","document"],"sources":["@wordpress/block-editor/src/components/block-settings-menu-controls/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tcreateSlotFill,\n\tMenuGroup,\n\tMenuItem,\n\t__experimentalStyleProvider as StyleProvider,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { pipe } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tuseConvertToGroupButtonProps,\n\tConvertToGroupButton,\n} from '../convert-to-group-buttons';\nimport { BlockLockMenuItem, useBlockLock } from '../block-lock';\nimport { store as blockEditorStore } from '../../store';\nimport BlockModeToggle from '../block-settings-menu/block-mode-toggle';\n\nimport { BlockRenameControl, useBlockRename } from '../block-rename';\n\nconst { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' );\n\nconst BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {\n\tconst { selectedBlocks, selectedClientIds, isContentOnly } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockNamesByClientId,\n\t\t\t\tgetSelectedBlockClientIds,\n\t\t\t\tgetBlockEditingMode,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst ids =\n\t\t\t\tclientIds !== null ? clientIds : getSelectedBlockClientIds();\n\t\t\treturn {\n\t\t\t\tselectedBlocks: getBlockNamesByClientId( ids ),\n\t\t\t\tselectedClientIds: ids,\n\t\t\t\tisContentOnly:\n\t\t\t\t\tgetBlockEditingMode( ids[ 0 ] ) === 'contentOnly',\n\t\t\t};\n\t\t},\n\t\t[ clientIds ]\n\t);\n\n\tconst { canLock } = useBlockLock( selectedClientIds[ 0 ] );\n\tconst { canRename } = useBlockRename( selectedBlocks[ 0 ] );\n\tconst showLockButton =\n\t\tselectedClientIds.length === 1 && canLock && ! isContentOnly;\n\tconst showRenameButton =\n\t\tselectedClientIds.length === 1 && canRename && ! isContentOnly;\n\n\t// Check if current selection of blocks is Groupable or Ungroupable\n\t// and pass this props down to ConvertToGroupButton.\n\tconst convertToGroupButtonProps =\n\t\tuseConvertToGroupButtonProps( selectedClientIds );\n\tconst { isGroupable, isUngroupable } = convertToGroupButtonProps;\n\tconst showConvertToGroupButton = isGroupable || isUngroupable;\n\n\treturn (\n\t\t<Slot\n\t\t\tfillProps={ {\n\t\t\t\t...fillProps,\n\t\t\t\tselectedBlocks,\n\t\t\t\tselectedClientIds,\n\t\t\t} }\n\t\t>\n\t\t\t{ ( fills ) => {\n\t\t\t\tif (\n\t\t\t\t\t! fills?.length > 0 &&\n\t\t\t\t\t! showConvertToGroupButton &&\n\t\t\t\t\t! showLockButton\n\t\t\t\t) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t{ showConvertToGroupButton && (\n\t\t\t\t\t\t\t<ConvertToGroupButton\n\t\t\t\t\t\t\t\t{ ...convertToGroupButtonProps }\n\t\t\t\t\t\t\t\tonClose={ fillProps?.onClose }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ showLockButton && (\n\t\t\t\t\t\t\t<BlockLockMenuItem\n\t\t\t\t\t\t\t\tclientId={ selectedClientIds[ 0 ] }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ showRenameButton && (\n\t\t\t\t\t\t\t<BlockRenameControl\n\t\t\t\t\t\t\t\tclientId={ selectedClientIds[ 0 ] }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ fills }\n\t\t\t\t\t\t{ fillProps?.canMove &&\n\t\t\t\t\t\t\t! fillProps?.onlyBlock &&\n\t\t\t\t\t\t\t! isContentOnly && (\n\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\tonClick={ pipe(\n\t\t\t\t\t\t\t\t\t\tfillProps?.onClose,\n\t\t\t\t\t\t\t\t\t\tfillProps?.onMoveTo\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Move to' ) }\n\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ fillProps?.count === 1 && ! isContentOnly && (\n\t\t\t\t\t\t\t<BlockModeToggle\n\t\t\t\t\t\t\t\tclientId={ fillProps?.firstBlockClientId }\n\t\t\t\t\t\t\t\tonToggle={ fillProps?.onClose }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</MenuGroup>\n\t\t\t\t);\n\t\t\t} }\n\t\t</Slot>\n\t);\n};\n\n/**\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-settings-menu-controls/README.md\n *\n * @param {Object} props Fill props.\n * @return {Element} Element.\n */\nfunction BlockSettingsMenuControls( { ...props } ) {\n\treturn (\n\t\t<StyleProvider document={ document }>\n\t\t\t<Fill { ...props } />\n\t\t</StyleProvider>\n\t);\n}\n\nBlockSettingsMenuControls.Slot = BlockSettingsMenuControlsSlot;\n\nexport default BlockSettingsMenuControls;\n"],"mappings":"AAAA;AACA;AACA;AACA,SACCA,cAAc,EACdC,SAAS,EACTC,QAAQ,EACRC,2BAA2B,IAAIC,aAAa,QACtC,uBAAuB;AAC9B,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,IAAI,QAAQ,oBAAoB;AACzC,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SACCC,4BAA4B,EAC5BC,oBAAoB,QACd,6BAA6B;AACpC,SAASC,iBAAiB,EAAEC,YAAY,QAAQ,eAAe;AAC/D,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,aAAa;AACvD,OAAOC,eAAe,MAAM,0CAA0C;AAEtE,SAASC,kBAAkB,EAAEC,cAAc,QAAQ,iBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAErE,MAAM;EAAEC,IAAI;EAAEC;AAAK,CAAC,GAAGtB,cAAc,CAAE,2BAA4B,CAAC;AAEpE,MAAMuB,6BAA6B,GAAGA,CAAE;EAAEC,SAAS;EAAEC,SAAS,GAAG;AAAK,CAAC,KAAM;EAC5E,MAAM;IAAEC,cAAc;IAAEC,iBAAiB;IAAEC;EAAc,CAAC,GAAGvB,SAAS,CACnEwB,MAAM,IAAM;IACb,MAAM;MACLC,uBAAuB;MACvBC,yBAAyB;MACzBC;IACD,CAAC,GAAGH,MAAM,CAAEhB,gBAAiB,CAAC;IAC9B,MAAMoB,GAAG,GACRR,SAAS,KAAK,IAAI,GAAGA,SAAS,GAAGM,yBAAyB,CAAC,CAAC;IAC7D,OAAO;MACNL,cAAc,EAAEI,uBAAuB,CAAEG,GAAI,CAAC;MAC9CN,iBAAiB,EAAEM,GAAG;MACtBL,aAAa,EACZI,mBAAmB,CAAEC,GAAG,CAAE,CAAC,CAAG,CAAC,KAAK;IACtC,CAAC;EACF,CAAC,EACD,CAAER,SAAS,CACZ,CAAC;EAED,MAAM;IAAES;EAAQ,CAAC,GAAGvB,YAAY,CAAEgB,iBAAiB,CAAE,CAAC,CAAG,CAAC;EAC1D,MAAM;IAAEQ;EAAU,CAAC,GAAGnB,cAAc,CAAEU,cAAc,CAAE,CAAC,CAAG,CAAC;EAC3D,MAAMU,cAAc,GACnBT,iBAAiB,CAACU,MAAM,KAAK,CAAC,IAAIH,OAAO,IAAI,CAAEN,aAAa;EAC7D,MAAMU,gBAAgB,GACrBX,iBAAiB,CAACU,MAAM,KAAK,CAAC,IAAIF,SAAS,IAAI,CAAEP,aAAa;;EAE/D;EACA;EACA,MAAMW,yBAAyB,GAC9B/B,4BAA4B,CAAEmB,iBAAkB,CAAC;EAClD,MAAM;IAAEa,WAAW;IAAEC;EAAc,CAAC,GAAGF,yBAAyB;EAChE,MAAMG,wBAAwB,GAAGF,WAAW,IAAIC,aAAa;EAE7D,oBACCvB,IAAA,CAACI,IAAI;IACJE,SAAS,EAAG;MACX,GAAGA,SAAS;MACZE,cAAc;MACdC;IACD,CAAG;IAAAgB,QAAA,EAECC,KAAK,IAAM;MACd,IACC,CAAEA,KAAK,EAAEP,MAAM,GAAG,CAAC,IACnB,CAAEK,wBAAwB,IAC1B,CAAEN,cAAc,EACf;QACD,OAAO,IAAI;MACZ;MAEA,oBACChB,KAAA,CAACnB,SAAS;QAAA0C,QAAA,GACPD,wBAAwB,iBACzBxB,IAAA,CAACT,oBAAoB;UAAA,GACf8B,yBAAyB;UAC9BM,OAAO,EAAGrB,SAAS,EAAEqB;QAAS,CAC9B,CACD,EACCT,cAAc,iBACflB,IAAA,CAACR,iBAAiB;UACjBoC,QAAQ,EAAGnB,iBAAiB,CAAE,CAAC;QAAI,CACnC,CACD,EACCW,gBAAgB,iBACjBpB,IAAA,CAACH,kBAAkB;UAClB+B,QAAQ,EAAGnB,iBAAiB,CAAE,CAAC;QAAI,CACnC,CACD,EACCiB,KAAK,EACLpB,SAAS,EAAEuB,OAAO,IACnB,CAAEvB,SAAS,EAAEwB,SAAS,IACtB,CAAEpB,aAAa,iBACdV,IAAA,CAAChB,QAAQ;UACR+C,OAAO,EAAG3C,IAAI,CACbkB,SAAS,EAAEqB,OAAO,EAClBrB,SAAS,EAAE0B,QACZ,CAAG;UAAAP,QAAA,EAEDpC,EAAE,CAAE,SAAU;QAAC,CACR,CACV,EACAiB,SAAS,EAAE2B,KAAK,KAAK,CAAC,IAAI,CAAEvB,aAAa,iBAC1CV,IAAA,CAACJ,eAAe;UACfgC,QAAQ,EAAGtB,SAAS,EAAE4B,kBAAoB;UAC1CC,QAAQ,EAAG7B,SAAS,EAAEqB;QAAS,CAC/B,CACD;MAAA,CACS,CAAC;IAEd;EAAC,CACI,CAAC;AAET,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA,SAASS,yBAAyBA,CAAE;EAAE,GAAGC;AAAM,CAAC,EAAG;EAClD,oBACCrC,IAAA,CAACd,aAAa;IAACoD,QAAQ,EAAGA,QAAU;IAAAb,QAAA,eACnCzB,IAAA,CAACG,IAAI;MAAA,GAAMkC;IAAK,CAAI;EAAC,CACP,CAAC;AAElB;AAEAD,yBAAyB,CAAChC,IAAI,GAAGC,6BAA6B;AAE9D,eAAe+B,yBAAyB","ignoreList":[]}

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

@@ -1,8 +1,7 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress 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: classnames('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":["classnames","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 classnames from 'classnames';\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={ classnames(\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":[]}
+{"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":[]}