@wordpress/block-editor 12.1.0 → 12.3.0

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

@@ -21,12 +21,10 @@ import StylePreview from './preview';
 import containerStyles from './style.scss';
 import { store as blockEditorStore } from '../../store';
 
-function BlockStyles(_ref) {
-  let {
-    clientId,
-    url
-  } = _ref;
-
+function BlockStyles({
+  clientId,
+  url
+}) {
   const selector = select => {
     const {
       getBlock
@@ -48,7 +46,7 @@ function BlockStyles(_ref) {
   const {
     updateBlockAttributes
   } = useDispatch(blockEditorStore);
-  const renderedStyles = styles !== null && styles !== void 0 && styles.find(style => style.isDefault) ? styles : [{
+  const renderedStyles = styles?.find(style => style.isDefault) ? styles : [{
     name: 'default',
     label: _x('Default', 'block style'),
     isDefault: true

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-styles/index.native.js"],"names":["ScrollView","store","blocksStore","useSelect","useDispatch","useMemo","_x","getActiveStyle","replaceActiveStyle","StylePreview","containerStyles","blockEditorStore","BlockStyles","clientId","url","selector","select","getBlock","getBlockStyles","block","styles","name","className","attributes","updateBlockAttributes","renderedStyles","find","style","isDefault","label","mappedRenderedStyles","activeStyle","map","styleClassName","isActive","onStylePress","length","content"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,cAA3B;AAEA;AACA;AACA;;AACA,SAASC,KAAK,IAAIC,WAAlB,QAAqC,mBAArC;AACA,SAASC,SAAT,EAAoBC,WAApB,QAAuC,iBAAvC;AACA,SAASC,OAAT,QAAwB,oBAAxB;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SAASC,cAAT,EAAyBC,kBAAzB,QAAmD,SAAnD;AACA,OAAOC,YAAP,MAAyB,WAAzB;AACA,OAAOC,eAAP,MAA4B,cAA5B;AACA,SAAST,KAAK,IAAIU,gBAAlB,QAA0C,aAA1C;;AAEA,SAASC,WAAT,OAA0C;AAAA,MAApB;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAoB;;AACzC,QAAMC,QAAQ,GAAKC,MAAF,IAAc;AAC9B,UAAM;AAAEC,MAAAA;AAAF,QAAeD,MAAM,CAAEL,gBAAF,CAA3B;AACA,UAAM;AAAEO,MAAAA;AAAF,QAAqBF,MAAM,CAAEd,WAAF,CAAjC;AACA,UAAMiB,KAAK,GAAGF,QAAQ,CAAEJ,QAAF,CAAtB;AACA,WAAO;AACNO,MAAAA,MAAM,EAAEF,cAAc,CAAEC,KAAK,CAACE,IAAR,CADhB;AAENC,MAAAA,SAAS,EAAEH,KAAK,CAACI,UAAN,CAAiBD,SAAjB,IAA8B;AAFnC,KAAP;AAIA,GARD;;AAUA,QAAM;AAAEF,IAAAA,MAAF;AAAUE,IAAAA;AAAV,MAAwBnB,SAAS,CAAEY,QAAF,EAAY,CAAEF,QAAF,CAAZ,CAAvC;AAEA,QAAM;AAAEW,IAAAA;AAAF,MAA4BpB,WAAW,CAAEO,gBAAF,CAA7C;AAEA,QAAMc,cAAc,GAAGL,MAAM,SAAN,IAAAA,MAAM,WAAN,IAAAA,MAAM,CAAEM,IAAR,CAAgBC,KAAF,IAAaA,KAAK,CAACC,SAAjC,IACpBR,MADoB,GAEpB,CACA;AACCC,IAAAA,IAAI,EAAE,SADP;AAECQ,IAAAA,KAAK,EAAEvB,EAAE,CAAE,SAAF,EAAa,aAAb,CAFV;AAGCsB,IAAAA,SAAS,EAAE;AAHZ,GADA,EAMA,GAAGR,MANH,CAFH;AAWA,QAAMU,oBAAoB,GAAGzB,OAAO,CAAE,MAAM;AAC3C,UAAM0B,WAAW,GAAGxB,cAAc,CAAEkB,cAAF,EAAkBH,SAAlB,CAAlC;AAEA,WAAOG,cAAc,CAACO,GAAf,CAAsBL,KAAF,IAAa;AACvC,YAAMM,cAAc,GAAGzB,kBAAkB,CACxCc,SADwC,EAExCS,WAFwC,EAGxCJ,KAHwC,CAAzC;AAKA,YAAMO,QAAQ,GAAGH,WAAW,KAAKJ,KAAjC;;AAEA,YAAMQ,YAAY,GAAG,MAAM;AAC1BX,QAAAA,qBAAqB,CAAEX,QAAF,EAAY;AAChCS,UAAAA,SAAS,EAAEW;AADqB,SAAZ,CAArB;AAGA,OAJD;;AAMA,aACC,cAAC,YAAD;AACC,QAAA,OAAO,EAAGE,YADX;AAEC,QAAA,QAAQ,EAAGD,QAFZ;AAGC,QAAA,GAAG,EAAGP,KAAK,CAACN,IAHb;AAIC,QAAA,KAAK,EAAGM,KAJT;AAKC,QAAA,GAAG,EAAGb;AALP,QADD;AASA,KAvBM,CAAP;AAwBA,GA3BmC,EA2BjC,CAAEW,cAAF,EAAkBH,SAAlB,EAA6BT,QAA7B,CA3BiC,CAApC;;AA6BA,MAAK,CAAEO,MAAF,IAAYA,MAAM,CAACgB,MAAP,KAAkB,CAAnC,EAAuC;AACtC,WAAO,IAAP;AACA;;AAED,SACC,cAAC,UAAD;AACC,IAAA,UAAU,MADX;AAEC,IAAA,8BAA8B,EAAG,KAFlC;AAGC,IAAA,qBAAqB,EAAG1B,eAAe,CAAC2B;AAHzC,KAKGP,oBALH,CADD;AASA;;AAED,eAAelB,WAAf","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\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 ),\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"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-styles/index.native.js"],"names":["ScrollView","store","blocksStore","useSelect","useDispatch","useMemo","_x","getActiveStyle","replaceActiveStyle","StylePreview","containerStyles","blockEditorStore","BlockStyles","clientId","url","selector","select","getBlock","getBlockStyles","block","styles","name","className","attributes","updateBlockAttributes","renderedStyles","find","style","isDefault","label","mappedRenderedStyles","activeStyle","map","styleClassName","isActive","onStylePress","length","content"],"mappings":"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","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\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 ),\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"]}

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

@@ -13,11 +13,10 @@ import useStylesForBlocks from './use-styles-for-block';
 
 const noop = () => {};
 
-export default function BlockStylesMenuItems(_ref) {
-  let {
-    clientId,
-    onSwitch = noop
-  } = _ref;
+export default function BlockStylesMenuItems({
+  clientId,
+  onSwitch = noop
+}) {
   const {
     onSelect,
     stylesToRender,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-styles/menu-items.js"],"names":["MenuItem","__experimentalText","Text","check","useStylesForBlocks","noop","BlockStylesMenuItems","clientId","onSwitch","onSelect","stylesToRender","activeStyle","length","map","style","menuItemText","label","name"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,QAAT,EAAmBC,kBAAkB,IAAIC,IAAzC,QAAqD,uBAArD;AACA,SAASC,KAAT,QAAsB,kBAAtB;AAEA;AACA;AACA;;AACA,OAAOC,kBAAP,MAA+B,wBAA/B;;AAEA,MAAMC,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEA,eAAe,SAASC,oBAAT,OAA+D;AAAA,MAAhC;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,QAAQ,GAAGH;AAAvB,GAAgC;AAC7E,QAAM;AAAEI,IAAAA,QAAF;AAAYC,IAAAA,cAAZ;AAA4BC,IAAAA;AAA5B,MAA4CP,kBAAkB,CAAE;AACrEG,IAAAA,QADqE;AAErEC,IAAAA;AAFqE,GAAF,CAApE;;AAKA,MAAK,CAAEE,cAAF,IAAoBA,cAAc,CAACE,MAAf,KAA0B,CAAnD,EAAuD;AACtD,WAAO,IAAP;AACA;;AACD,SACC,8BACGF,cAAc,CAACG,GAAf,CAAsBC,KAAF,IAAa;AAClC,UAAMC,YAAY,GAAGD,KAAK,CAACE,KAAN,IAAeF,KAAK,CAACG,IAA1C;AACA,WACC,cAAC,QAAD;AACC,MAAA,GAAG,EAAGH,KAAK,CAACG,IADb;AAEC,MAAA,IAAI,EAAGN,WAAW,CAACM,IAAZ,KAAqBH,KAAK,CAACG,IAA3B,GAAkCd,KAAlC,GAA0C,IAFlD;AAGC,MAAA,OAAO,EAAG,MAAMM,QAAQ,CAAEK,KAAF;AAHzB,OAKC,cAAC,IAAD;AACC,MAAA,EAAE,EAAC,MADJ;AAEC,MAAA,KAAK,EAAG,EAFT;AAGC,MAAA,aAAa,EAAC,MAHf;AAIC,MAAA,QAAQ;AAJT,OAMGC,YANH,CALD,CADD;AAgBA,GAlBC,CADH,CADD;AAuBA","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"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-styles/menu-items.js"],"names":["MenuItem","__experimentalText","Text","check","useStylesForBlocks","noop","BlockStylesMenuItems","clientId","onSwitch","onSelect","stylesToRender","activeStyle","length","map","style","menuItemText","label","name"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,QAAT,EAAmBC,kBAAkB,IAAIC,IAAzC,QAAqD,uBAArD;AACA,SAASC,KAAT,QAAsB,kBAAtB;AAEA;AACA;AACA;;AACA,OAAOC,kBAAP,MAA+B,wBAA/B;;AAEA,MAAMC,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEA,eAAe,SAASC,oBAAT,CAA+B;AAAEC,EAAAA,QAAF;AAAYC,EAAAA,QAAQ,GAAGH;AAAvB,CAA/B,EAA+D;AAC7E,QAAM;AAAEI,IAAAA,QAAF;AAAYC,IAAAA,cAAZ;AAA4BC,IAAAA;AAA5B,MAA4CP,kBAAkB,CAAE;AACrEG,IAAAA,QADqE;AAErEC,IAAAA;AAFqE,GAAF,CAApE;;AAKA,MAAK,CAAEE,cAAF,IAAoBA,cAAc,CAACE,MAAf,KAA0B,CAAnD,EAAuD;AACtD,WAAO,IAAP;AACA;;AACD,SACC,8BACGF,cAAc,CAACG,GAAf,CAAsBC,KAAF,IAAa;AAClC,UAAMC,YAAY,GAAGD,KAAK,CAACE,KAAN,IAAeF,KAAK,CAACG,IAA1C;AACA,WACC,cAAC,QAAD;AACC,MAAA,GAAG,EAAGH,KAAK,CAACG,IADb;AAEC,MAAA,IAAI,EAAGN,WAAW,CAACM,IAAZ,KAAqBH,KAAK,CAACG,IAA3B,GAAkCd,KAAlC,GAA0C,IAFlD;AAGC,MAAA,OAAO,EAAG,MAAMM,QAAQ,CAAEK,KAAF;AAHzB,OAKC,cAAC,IAAD;AACC,MAAA,EAAE,EAAC,MADJ;AAEC,MAAA,KAAK,EAAG,EAFT;AAGC,MAAA,aAAa,EAAC,MAHf;AAIC,MAAA,QAAQ;AAJT,OAMGC,YANH,CALD,CADD;AAgBA,GAlBC,CADH,CADD;AAuBA","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"]}

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

@@ -11,16 +11,13 @@ import { useMemo } from '@wordpress/element';
 
 import InserterPreviewPanel from '../inserter/preview-panel';
 import { replaceActiveStyle } from './utils';
-export default function BlockStylesPreviewPanel(_ref) {
-  var _getBlockType;
-
-  let {
-    genericPreviewBlock,
-    style,
-    className,
-    activeStyle
-  } = _ref;
-  const example = (_getBlockType = getBlockType(genericPreviewBlock.name)) === null || _getBlockType === void 0 ? void 0 : _getBlockType.example;
+export default function BlockStylesPreviewPanel({
+  genericPreviewBlock,
+  style,
+  className,
+  activeStyle
+}) {
+  const example = getBlockType(genericPreviewBlock.name)?.example;
   const styleClassName = replaceActiveStyle(className, activeStyle, style);
   const previewBlocks = useMemo(() => {
     return { ...genericPreviewBlock,
@@ -33,8 +30,7 @@ export default function BlockStylesPreviewPanel(_ref) {
     };
   }, [genericPreviewBlock, styleClassName]);
   return createElement(InserterPreviewPanel, {
-    item: previewBlocks,
-    isStylePreview: true
+    item: previewBlocks
   });
 }
 //# sourceMappingURL=preview-panel.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-styles/preview-panel.js"],"names":["getBlockType","useMemo","InserterPreviewPanel","replaceActiveStyle","BlockStylesPreviewPanel","genericPreviewBlock","style","className","activeStyle","example","name","styleClassName","previewBlocks","title","label","description","initialAttributes","attributes"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,YAAT,QAA6B,mBAA7B;AACA,SAASC,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,OAAOC,oBAAP,MAAiC,2BAAjC;AACA,SAASC,kBAAT,QAAmC,SAAnC;AAEA,eAAe,SAASC,uBAAT,OAKX;AAAA;;AAAA,MAL6C;AAChDC,IAAAA,mBADgD;AAEhDC,IAAAA,KAFgD;AAGhDC,IAAAA,SAHgD;AAIhDC,IAAAA;AAJgD,GAK7C;AACH,QAAMC,OAAO,oBAAGT,YAAY,CAAEK,mBAAmB,CAACK,IAAtB,CAAf,kDAAG,cAA0CD,OAA1D;AACA,QAAME,cAAc,GAAGR,kBAAkB,CAAEI,SAAF,EAAaC,WAAb,EAA0BF,KAA1B,CAAzC;AACA,QAAMM,aAAa,GAAGX,OAAO,CAAE,MAAM;AACpC,WAAO,EACN,GAAGI,mBADG;AAENQ,MAAAA,KAAK,EAAEP,KAAK,CAACQ,KAAN,IAAeR,KAAK,CAACI,IAFtB;AAGNK,MAAAA,WAAW,EAAET,KAAK,CAACS,WAHb;AAINC,MAAAA,iBAAiB,EAAE,EAClB,GAAGX,mBAAmB,CAACY,UADL;AAElBV,QAAAA,SAAS,EACRI,cAAc,GACd;AAJiB,OAJb;AAUNF,MAAAA;AAVM,KAAP;AAYA,GAb4B,EAa1B,CAAEJ,mBAAF,EAAuBM,cAAvB,CAb0B,CAA7B;AAeA,SACC,cAAC,oBAAD;AAAsB,IAAA,IAAI,EAAGC,aAA7B;AAA6C,IAAA,cAAc,EAAG;AAA9D,IADD;AAGA","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 (\n\t\t<InserterPreviewPanel item={ previewBlocks } isStylePreview={ true } />\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-styles/preview-panel.js"],"names":["getBlockType","useMemo","InserterPreviewPanel","replaceActiveStyle","BlockStylesPreviewPanel","genericPreviewBlock","style","className","activeStyle","example","name","styleClassName","previewBlocks","title","label","description","initialAttributes","attributes"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,YAAT,QAA6B,mBAA7B;AACA,SAASC,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,OAAOC,oBAAP,MAAiC,2BAAjC;AACA,SAASC,kBAAT,QAAmC,SAAnC;AAEA,eAAe,SAASC,uBAAT,CAAkC;AAChDC,EAAAA,mBADgD;AAEhDC,EAAAA,KAFgD;AAGhDC,EAAAA,SAHgD;AAIhDC,EAAAA;AAJgD,CAAlC,EAKX;AACH,QAAMC,OAAO,GAAGT,YAAY,CAAEK,mBAAmB,CAACK,IAAtB,CAAZ,EAA0CD,OAA1D;AACA,QAAME,cAAc,GAAGR,kBAAkB,CAAEI,SAAF,EAAaC,WAAb,EAA0BF,KAA1B,CAAzC;AACA,QAAMM,aAAa,GAAGX,OAAO,CAAE,MAAM;AACpC,WAAO,EACN,GAAGI,mBADG;AAENQ,MAAAA,KAAK,EAAEP,KAAK,CAACQ,KAAN,IAAeR,KAAK,CAACI,IAFtB;AAGNK,MAAAA,WAAW,EAAET,KAAK,CAACS,WAHb;AAINC,MAAAA,iBAAiB,EAAE,EAClB,GAAGX,mBAAmB,CAACY,UADL;AAElBV,QAAAA,SAAS,EACRI,cAAc,GACd;AAJiB,OAJb;AAUNF,MAAAA;AAVM,KAAP;AAYA,GAb4B,EAa1B,CAAEJ,mBAAF,EAAuBM,cAAvB,CAb0B,CAA7B;AAeA,SAAO,cAAC,oBAAD;AAAsB,IAAA,IAAI,EAAGC;AAA7B,IAAP;AACA","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"]}

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

@@ -19,13 +19,12 @@ import styles from './style.scss';
 const MAX_ITEM_WIDTH = 120;
 const HALF_COLUMN = 0.5;
 
-function StylePreview(_ref) {
-  let {
-    onPress,
-    isActive,
-    style,
-    url
-  } = _ref;
+function StylePreview({
+  onPress,
+  isActive,
+  style,
+  url
+}) {
   const [itemWidth, setItemWidth] = useState(MAX_ITEM_WIDTH);
   const {
     label,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-styles/preview.native.js"],"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","container","width","imageWrapper","outline","image","uri","labelSelected"],"mappings":"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","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"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-styles/preview.native.js"],"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","container","width","imageWrapper","outline","image","uri","labelSelected"],"mappings":"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","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"]}

package/build-module/components/block-styles/use-styles-for-block.js

@@ -19,8 +19,8 @@ import { store as blockEditorStore } from '../../store';
 
 function useGenericPreviewBlock(block, type) {
   return useMemo(() => {
-    const example = type === null || type === void 0 ? void 0 : type.example;
-    const blockName = type === null || type === void 0 ? void 0 : type.name;
+    const example = type?.example;
+    const blockName = type?.name;
 
     if (example && blockName) {
       return getBlockFromExample(blockName, {
@@ -32,7 +32,7 @@ function useGenericPreviewBlock(block, type) {
     if (block) {
       return cloneBlock(block);
     }
-  }, [type !== null && type !== void 0 && type.example ? block === null || block === void 0 ? void 0 : block.name : block, type]);
+  }, [type?.example ? block?.name : block, type]);
 }
 /**
  * @typedef useStylesForBlocksArguments
@@ -47,12 +47,10 @@ function useGenericPreviewBlock(block, type) {
  */
 
 
-export default function useStylesForBlocks(_ref) {
-  let {
-    clientId,
-    onSwitch
-  } = _ref;
-
+export default function useStylesForBlocks({
+  clientId,
+  onSwitch
+}) {
   const selector = select => {
     const {
       getBlock

package/build-module/components/block-styles/use-styles-for-block.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-styles/use-styles-for-block.js"],"names":["useDispatch","useSelect","cloneBlock","getBlockType","getBlockFromExample","store","blocksStore","useMemo","getActiveStyle","getRenderedStyles","replaceActiveStyle","blockEditorStore","useGenericPreviewBlock","block","type","example","blockName","name","attributes","innerBlocks","useStylesForBlocks","clientId","onSwitch","selector","select","getBlock","blockType","getBlockStyles","styles","className","updateBlockAttributes","stylesToRender","activeStyle","genericPreviewBlock","onSelect","style","styleClassName"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport {\n\tcloneBlock,\n\tgetBlockType,\n\tgetBlockFromExample,\n\tstore as blocksStore,\n} from '@wordpress/blocks';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { getActiveStyle, getRenderedStyles, replaceActiveStyle } from './utils';\nimport { store as blockEditorStore } from '../../store';\n\n/**\n *\n * @param {WPBlock}     block Block object.\n * @param {WPBlockType} type  Block type settings.\n * @return {WPBlock}          A generic block ready for styles preview.\n */\nfunction useGenericPreviewBlock( block, type ) {\n\treturn useMemo( () => {\n\t\tconst example = type?.example;\n\t\tconst blockName = type?.name;\n\n\t\tif ( example && blockName ) {\n\t\t\treturn getBlockFromExample( blockName, {\n\t\t\t\tattributes: example.attributes,\n\t\t\t\tinnerBlocks: example.innerBlocks,\n\t\t\t} );\n\t\t}\n\n\t\tif ( block ) {\n\t\t\treturn cloneBlock( block );\n\t\t}\n\t}, [ type?.example ? block?.name : block, type ] );\n}\n\n/**\n * @typedef useStylesForBlocksArguments\n * @property {string}     clientId Block client ID.\n * @property {() => void} onSwitch Block style switch callback function.\n */\n\n/**\n *\n * @param {useStylesForBlocksArguments} useStylesForBlocks arguments.\n * @return {Object}                                         Results of the select methods.\n */\nexport default function useStylesForBlocks( { clientId, onSwitch } ) {\n\tconst selector = ( select ) => {\n\t\tconst { getBlock } = select( blockEditorStore );\n\t\tconst block = getBlock( clientId );\n\n\t\tif ( ! block ) {\n\t\t\treturn {};\n\t\t}\n\t\tconst blockType = getBlockType( block.name );\n\t\tconst { getBlockStyles } = select( blocksStore );\n\n\t\treturn {\n\t\t\tblock,\n\t\t\tblockType,\n\t\t\tstyles: getBlockStyles( block.name ),\n\t\t\tclassName: block.attributes.className || '',\n\t\t};\n\t};\n\tconst { styles, block, blockType, className } = useSelect( selector, [\n\t\tclientId,\n\t] );\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\tconst stylesToRender = getRenderedStyles( styles );\n\tconst activeStyle = getActiveStyle( stylesToRender, className );\n\tconst genericPreviewBlock = useGenericPreviewBlock( block, blockType );\n\n\tconst onSelect = ( style ) => {\n\t\tconst styleClassName = replaceActiveStyle(\n\t\t\tclassName,\n\t\t\tactiveStyle,\n\t\t\tstyle\n\t\t);\n\t\tupdateBlockAttributes( clientId, {\n\t\t\tclassName: styleClassName,\n\t\t} );\n\t\tonSwitch();\n\t};\n\n\treturn {\n\t\tonSelect,\n\t\tstylesToRender,\n\t\tactiveStyle,\n\t\tgenericPreviewBlock,\n\t\tclassName,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-styles/use-styles-for-block.js"],"names":["useDispatch","useSelect","cloneBlock","getBlockType","getBlockFromExample","store","blocksStore","useMemo","getActiveStyle","getRenderedStyles","replaceActiveStyle","blockEditorStore","useGenericPreviewBlock","block","type","example","blockName","name","attributes","innerBlocks","useStylesForBlocks","clientId","onSwitch","selector","select","getBlock","blockType","getBlockStyles","styles","className","updateBlockAttributes","stylesToRender","activeStyle","genericPreviewBlock","onSelect","style","styleClassName"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport {\n\tcloneBlock,\n\tgetBlockType,\n\tgetBlockFromExample,\n\tstore as blocksStore,\n} from '@wordpress/blocks';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { getActiveStyle, getRenderedStyles, replaceActiveStyle } from './utils';\nimport { store as blockEditorStore } from '../../store';\n\n/**\n *\n * @param {WPBlock}     block Block object.\n * @param {WPBlockType} type  Block type settings.\n * @return {WPBlock}          A generic block ready for styles preview.\n */\nfunction useGenericPreviewBlock( block, type ) {\n\treturn useMemo( () => {\n\t\tconst example = type?.example;\n\t\tconst blockName = type?.name;\n\n\t\tif ( example && blockName ) {\n\t\t\treturn getBlockFromExample( blockName, {\n\t\t\t\tattributes: example.attributes,\n\t\t\t\tinnerBlocks: example.innerBlocks,\n\t\t\t} );\n\t\t}\n\n\t\tif ( block ) {\n\t\t\treturn cloneBlock( block );\n\t\t}\n\t}, [ type?.example ? block?.name : block, type ] );\n}\n\n/**\n * @typedef useStylesForBlocksArguments\n * @property {string}     clientId Block client ID.\n * @property {() => void} onSwitch Block style switch callback function.\n */\n\n/**\n *\n * @param {useStylesForBlocksArguments} useStylesForBlocks arguments.\n * @return {Object}                                         Results of the select methods.\n */\nexport default function useStylesForBlocks( { clientId, onSwitch } ) {\n\tconst selector = ( select ) => {\n\t\tconst { getBlock } = select( blockEditorStore );\n\t\tconst block = getBlock( clientId );\n\n\t\tif ( ! block ) {\n\t\t\treturn {};\n\t\t}\n\t\tconst blockType = getBlockType( block.name );\n\t\tconst { getBlockStyles } = select( blocksStore );\n\n\t\treturn {\n\t\t\tblock,\n\t\t\tblockType,\n\t\t\tstyles: getBlockStyles( block.name ),\n\t\t\tclassName: block.attributes.className || '',\n\t\t};\n\t};\n\tconst { styles, block, blockType, className } = useSelect( selector, [\n\t\tclientId,\n\t] );\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\tconst stylesToRender = getRenderedStyles( styles );\n\tconst activeStyle = getActiveStyle( stylesToRender, className );\n\tconst genericPreviewBlock = useGenericPreviewBlock( block, blockType );\n\n\tconst onSelect = ( style ) => {\n\t\tconst styleClassName = replaceActiveStyle(\n\t\t\tclassName,\n\t\t\tactiveStyle,\n\t\t\tstyle\n\t\t);\n\t\tupdateBlockAttributes( clientId, {\n\t\t\tclassName: styleClassName,\n\t\t} );\n\t\tonSwitch();\n\t};\n\n\treturn {\n\t\tonSelect,\n\t\tstylesToRender,\n\t\tactiveStyle,\n\t\tgenericPreviewBlock,\n\t\tclassName,\n\t};\n}\n"]}

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

@@ -19,12 +19,9 @@ export function getActiveStyle(styles, className) {
     }
 
     const potentialStyleName = style.substring(9);
-    const activeStyle = styles === null || styles === void 0 ? void 0 : styles.find(_ref => {
-      let {
-        name
-      } = _ref;
-      return name === potentialStyleName;
-    });
+    const activeStyle = styles?.find(({
+      name
+    }) => name === potentialStyleName);
 
     if (activeStyle) {
       return activeStyle;
@@ -84,6 +81,6 @@ export function getRenderedStyles(styles) {
  */
 
 export function getDefaultStyle(styles) {
-  return styles === null || styles === void 0 ? void 0 : styles.find(style => style.isDefault);
+  return styles?.find(style => style.isDefault);
 }
 //# sourceMappingURL=utils.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-styles/utils.js"],"names":["TokenList","_x","getActiveStyle","styles","className","style","values","indexOf","potentialStyleName","substring","activeStyle","find","name","getDefaultStyle","replaceActiveStyle","newStyle","list","remove","add","value","getRenderedStyles","length","label","isDefault"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,SAAP,MAAsB,uBAAtB;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,cAAT,CAAyBC,MAAzB,EAAiCC,SAAjC,EAA6C;AACnD,OAAM,MAAMC,KAAZ,IAAqB,IAAIL,SAAJ,CAAeI,SAAf,EAA2BE,MAA3B,EAArB,EAA2D;AAC1D,QAAKD,KAAK,CAACE,OAAN,CAAe,WAAf,MAAiC,CAAC,CAAvC,EAA2C;AAC1C;AACA;;AAED,UAAMC,kBAAkB,GAAGH,KAAK,CAACI,SAAN,CAAiB,CAAjB,CAA3B;AACA,UAAMC,WAAW,GAAGP,MAAH,aAAGA,MAAH,uBAAGA,MAAM,CAAEQ,IAAR,CACnB;AAAA,UAAE;AAAEC,QAAAA;AAAF,OAAF;AAAA,aAAgBA,IAAI,KAAKJ,kBAAzB;AAAA,KADmB,CAApB;;AAGA,QAAKE,WAAL,EAAmB;AAClB,aAAOA,WAAP;AACA;AACD;;AAED,SAAOG,eAAe,CAAEV,MAAF,CAAtB;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASW,kBAAT,CAA6BV,SAA7B,EAAwCM,WAAxC,EAAqDK,QAArD,EAAgE;AACtE,QAAMC,IAAI,GAAG,IAAIhB,SAAJ,CAAeI,SAAf,CAAb;;AAEA,MAAKM,WAAL,EAAmB;AAClBM,IAAAA,IAAI,CAACC,MAAL,CAAa,cAAcP,WAAW,CAACE,IAAvC;AACA;;AAEDI,EAAAA,IAAI,CAACE,GAAL,CAAU,cAAcH,QAAQ,CAACH,IAAjC;AAEA,SAAOI,IAAI,CAACG,KAAZ;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,iBAAT,CAA4BjB,MAA5B,EAAqC;AAC3C,MAAK,CAAEA,MAAF,IAAYA,MAAM,CAACkB,MAAP,KAAkB,CAAnC,EAAuC;AACtC,WAAO,EAAP;AACA;;AAED,SAAOR,eAAe,CAAEV,MAAF,CAAf,GACJA,MADI,GAEJ,CACA;AACCS,IAAAA,IAAI,EAAE,SADP;AAECU,IAAAA,KAAK,EAAErB,EAAE,CAAE,SAAF,EAAa,aAAb,CAFV;AAGCsB,IAAAA,SAAS,EAAE;AAHZ,GADA,EAMA,GAAGpB,MANH,CAFH;AAUA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASU,eAAT,CAA0BV,MAA1B,EAAmC;AACzC,SAAOA,MAAP,aAAOA,MAAP,uBAAOA,MAAM,CAAEQ,IAAR,CAAgBN,KAAF,IAAaA,KAAK,CAACkB,SAAjC,CAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport TokenList from '@wordpress/token-list';\nimport { _x } from '@wordpress/i18n';\n\n/**\n * Returns the active style from the given className.\n *\n * @param {Array}  styles    Block styles.\n * @param {string} className Class name\n *\n * @return {Object?} The active style.\n */\nexport function getActiveStyle( styles, className ) {\n\tfor ( const style of new TokenList( className ).values() ) {\n\t\tif ( style.indexOf( 'is-style-' ) === -1 ) {\n\t\t\tcontinue;\n\t\t}\n\n\t\tconst potentialStyleName = style.substring( 9 );\n\t\tconst activeStyle = styles?.find(\n\t\t\t( { name } ) => name === potentialStyleName\n\t\t);\n\t\tif ( activeStyle ) {\n\t\t\treturn activeStyle;\n\t\t}\n\t}\n\n\treturn getDefaultStyle( styles );\n}\n\n/**\n * Replaces the active style in the block's className.\n *\n * @param {string}  className   Class name.\n * @param {Object?} activeStyle The replaced style.\n * @param {Object}  newStyle    The replacing style.\n *\n * @return {string} The updated className.\n */\nexport function replaceActiveStyle( className, activeStyle, newStyle ) {\n\tconst list = new TokenList( className );\n\n\tif ( activeStyle ) {\n\t\tlist.remove( 'is-style-' + activeStyle.name );\n\t}\n\n\tlist.add( 'is-style-' + newStyle.name );\n\n\treturn list.value;\n}\n\n/**\n * Returns a collection of styles that can be represented on the frontend.\n * The function checks a style collection for a default style. If none is found, it adds one to\n * act as a fallback for when there is no active style applied to a block. The default item also serves\n * as a switch on the frontend to deactivate non-default styles.\n *\n * @param {Array} styles Block styles.\n *\n * @return {Array<Object?>}        The style collection.\n */\nexport function getRenderedStyles( styles ) {\n\tif ( ! styles || styles.length === 0 ) {\n\t\treturn [];\n\t}\n\n\treturn getDefaultStyle( styles )\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\n/**\n * Returns a style object from a collection of styles where that style object is the default block style.\n *\n * @param {Array} styles Block styles.\n *\n * @return {Object?}        The default style object, if found.\n */\nexport function getDefaultStyle( styles ) {\n\treturn styles?.find( ( style ) => style.isDefault );\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-styles/utils.js"],"names":["TokenList","_x","getActiveStyle","styles","className","style","values","indexOf","potentialStyleName","substring","activeStyle","find","name","getDefaultStyle","replaceActiveStyle","newStyle","list","remove","add","value","getRenderedStyles","length","label","isDefault"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,SAAP,MAAsB,uBAAtB;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,cAAT,CAAyBC,MAAzB,EAAiCC,SAAjC,EAA6C;AACnD,OAAM,MAAMC,KAAZ,IAAqB,IAAIL,SAAJ,CAAeI,SAAf,EAA2BE,MAA3B,EAArB,EAA2D;AAC1D,QAAKD,KAAK,CAACE,OAAN,CAAe,WAAf,MAAiC,CAAC,CAAvC,EAA2C;AAC1C;AACA;;AAED,UAAMC,kBAAkB,GAAGH,KAAK,CAACI,SAAN,CAAiB,CAAjB,CAA3B;AACA,UAAMC,WAAW,GAAGP,MAAM,EAAEQ,IAAR,CACnB,CAAE;AAAEC,MAAAA;AAAF,KAAF,KAAgBA,IAAI,KAAKJ,kBADN,CAApB;;AAGA,QAAKE,WAAL,EAAmB;AAClB,aAAOA,WAAP;AACA;AACD;;AAED,SAAOG,eAAe,CAAEV,MAAF,CAAtB;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASW,kBAAT,CAA6BV,SAA7B,EAAwCM,WAAxC,EAAqDK,QAArD,EAAgE;AACtE,QAAMC,IAAI,GAAG,IAAIhB,SAAJ,CAAeI,SAAf,CAAb;;AAEA,MAAKM,WAAL,EAAmB;AAClBM,IAAAA,IAAI,CAACC,MAAL,CAAa,cAAcP,WAAW,CAACE,IAAvC;AACA;;AAEDI,EAAAA,IAAI,CAACE,GAAL,CAAU,cAAcH,QAAQ,CAACH,IAAjC;AAEA,SAAOI,IAAI,CAACG,KAAZ;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,iBAAT,CAA4BjB,MAA5B,EAAqC;AAC3C,MAAK,CAAEA,MAAF,IAAYA,MAAM,CAACkB,MAAP,KAAkB,CAAnC,EAAuC;AACtC,WAAO,EAAP;AACA;;AAED,SAAOR,eAAe,CAAEV,MAAF,CAAf,GACJA,MADI,GAEJ,CACA;AACCS,IAAAA,IAAI,EAAE,SADP;AAECU,IAAAA,KAAK,EAAErB,EAAE,CAAE,SAAF,EAAa,aAAb,CAFV;AAGCsB,IAAAA,SAAS,EAAE;AAHZ,GADA,EAMA,GAAGpB,MANH,CAFH;AAUA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASU,eAAT,CAA0BV,MAA1B,EAAmC;AACzC,SAAOA,MAAM,EAAEQ,IAAR,CAAgBN,KAAF,IAAaA,KAAK,CAACkB,SAAjC,CAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport TokenList from '@wordpress/token-list';\nimport { _x } from '@wordpress/i18n';\n\n/**\n * Returns the active style from the given className.\n *\n * @param {Array}  styles    Block styles.\n * @param {string} className Class name\n *\n * @return {Object?} The active style.\n */\nexport function getActiveStyle( styles, className ) {\n\tfor ( const style of new TokenList( className ).values() ) {\n\t\tif ( style.indexOf( 'is-style-' ) === -1 ) {\n\t\t\tcontinue;\n\t\t}\n\n\t\tconst potentialStyleName = style.substring( 9 );\n\t\tconst activeStyle = styles?.find(\n\t\t\t( { name } ) => name === potentialStyleName\n\t\t);\n\t\tif ( activeStyle ) {\n\t\t\treturn activeStyle;\n\t\t}\n\t}\n\n\treturn getDefaultStyle( styles );\n}\n\n/**\n * Replaces the active style in the block's className.\n *\n * @param {string}  className   Class name.\n * @param {Object?} activeStyle The replaced style.\n * @param {Object}  newStyle    The replacing style.\n *\n * @return {string} The updated className.\n */\nexport function replaceActiveStyle( className, activeStyle, newStyle ) {\n\tconst list = new TokenList( className );\n\n\tif ( activeStyle ) {\n\t\tlist.remove( 'is-style-' + activeStyle.name );\n\t}\n\n\tlist.add( 'is-style-' + newStyle.name );\n\n\treturn list.value;\n}\n\n/**\n * Returns a collection of styles that can be represented on the frontend.\n * The function checks a style collection for a default style. If none is found, it adds one to\n * act as a fallback for when there is no active style applied to a block. The default item also serves\n * as a switch on the frontend to deactivate non-default styles.\n *\n * @param {Array} styles Block styles.\n *\n * @return {Array<Object?>}        The style collection.\n */\nexport function getRenderedStyles( styles ) {\n\tif ( ! styles || styles.length === 0 ) {\n\t\treturn [];\n\t}\n\n\treturn getDefaultStyle( styles )\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\n/**\n * Returns a style object from a collection of styles where that style object is the default block style.\n *\n * @param {Array} styles Block styles.\n *\n * @return {Object?}        The default style object, if found.\n */\nexport function getDefaultStyle( styles ) {\n\treturn styles?.find( ( style ) => style.isDefault );\n}\n"]}

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

@@ -10,11 +10,10 @@ import { MenuGroup } from '@wordpress/components';
  */
 
 import BlockStylesMenuItems from '../block-styles/menu-items';
-export default function BlockStylesMenu(_ref) {
-  let {
-    hoveredBlock,
-    onSwitch
-  } = _ref;
+export default function BlockStylesMenu({
+  hoveredBlock,
+  onSwitch
+}) {
   const {
     clientId
   } = hoveredBlock;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-switcher/block-styles-menu.js"],"names":["__","MenuGroup","BlockStylesMenuItems","BlockStylesMenu","hoveredBlock","onSwitch","clientId"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,SAAT,QAA0B,uBAA1B;AAEA;AACA;AACA;;AACA,OAAOC,oBAAP,MAAiC,4BAAjC;AAEA,eAAe,SAASC,eAAT,OAAuD;AAAA,MAA7B;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,GAA6B;AACrE,QAAM;AAAEC,IAAAA;AAAF,MAAeF,YAArB;AAEA,SACC,cAAC,SAAD;AACC,IAAA,KAAK,EAAGJ,EAAE,CAAE,QAAF,CADX;AAEC,IAAA,SAAS,EAAC;AAFX,KAIC,cAAC,oBAAD;AAAsB,IAAA,QAAQ,EAAGM,QAAjC;AAA4C,IAAA,QAAQ,EAAGD;AAAvD,IAJD,CADD;AAQA","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"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-switcher/block-styles-menu.js"],"names":["__","MenuGroup","BlockStylesMenuItems","BlockStylesMenu","hoveredBlock","onSwitch","clientId"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,SAAT,QAA0B,uBAA1B;AAEA;AACA;AACA;;AACA,OAAOC,oBAAP,MAAiC,4BAAjC;AAEA,eAAe,SAASC,eAAT,CAA0B;AAAEC,EAAAA,YAAF;AAAgBC,EAAAA;AAAhB,CAA1B,EAAuD;AACrE,QAAM;AAAEC,IAAAA;AAAF,MAAeF,YAArB;AAEA,SACC,cAAC,SAAD;AACC,IAAA,KAAK,EAAGJ,EAAE,CAAE,QAAF,CADX;AAEC,IAAA,SAAS,EAAC;AAFX,KAIC,cAAC,oBAAD;AAAsB,IAAA,QAAQ,EAAGM,QAAjC;AAA4C,IAAA,QAAQ,EAAGD;AAAvD,IAJD,CADD;AAQA","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"]}

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

@@ -13,6 +13,7 @@ import { useState, useMemo } from '@wordpress/element';
 
 import BlockIcon from '../block-icon';
 import PreviewBlockPopover from './preview-block-popover';
+import BlockVariationTransformations from './block-variation-transformations';
 /**
  * Helper hook to group transformations to display them in a specific order in the UI.
  * For now we group only priority content driven transformations(ex. paragraph -> heading).
@@ -51,25 +52,24 @@ function useGroupedTransforms(possibleBlockTransformations) {
     });
   }, [possibleBlockTransformations]); // Order the priority text transformations.
 
-  transformations.priorityTextTransformations.sort((_ref, _ref2) => {
-    let {
-      name: currentName
-    } = _ref;
-    let {
-      name: nextName
-    } = _ref2;
+  transformations.priorityTextTransformations.sort(({
+    name: currentName
+  }, {
+    name: nextName
+  }) => {
     return priorityContentTranformationBlocks[currentName] < priorityContentTranformationBlocks[nextName] ? -1 : 1;
   });
   return transformations;
 }
 
-const BlockTransformationsMenu = _ref3 => {
-  let {
-    className,
-    possibleBlockTransformations,
-    onSelect,
-    blocks
-  } = _ref3;
+const BlockTransformationsMenu = ({
+  className,
+  possibleBlockTransformations,
+  possibleBlockVariationTransformations,
+  onSelect,
+  onSelectVariation,
+  blocks
+}) => {
   const [hoveredTransformItemName, setHoveredTransformItemName] = useState();
   const {
     priorityTextTransformations,
@@ -88,6 +88,10 @@ const BlockTransformationsMenu = _ref3 => {
     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,
@@ -98,12 +102,11 @@ const BlockTransformationsMenu = _ref3 => {
   }, restTransformItems));
 };
 
-function RestTransformationItems(_ref4) {
-  let {
-    restTransformations,
-    onSelect,
-    setHoveredTransformItemName
-  } = _ref4;
+function RestTransformationItems({
+  restTransformations,
+  onSelect,
+  setHoveredTransformItemName
+}) {
   return restTransformations.map(item => createElement(BlockTranformationItem, {
     key: item.name,
     item: item,
@@ -112,12 +115,11 @@ function RestTransformationItems(_ref4) {
   }));
 }
 
-function BlockTranformationItem(_ref5) {
-  let {
-    item,
-    onSelect,
-    setHoveredTransformItemName
-  } = _ref5;
+function BlockTranformationItem({
+  item,
+  onSelect,
+  setHoveredTransformItemName
+}) {
   const {
     name,
     icon,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-switcher/block-transformations-menu.js"],"names":["__","MenuGroup","MenuItem","getBlockMenuDefaultClassName","switchToBlockType","useState","useMemo","BlockIcon","PreviewBlockPopover","useGroupedTransforms","possibleBlockTransformations","priorityContentTranformationBlocks","transformations","priorityTextTranformsNames","Object","keys","reduce","accumulator","item","name","includes","priorityTextTransformations","push","restTransformations","sort","currentName","nextName","BlockTransformationsMenu","className","onSelect","blocks","hoveredTransformItemName","setHoveredTransformItemName","hasBothContentTransformations","length","restTransformItems","map","RestTransformationItems","BlockTranformationItem","icon","title","isDisabled","event","preventDefault"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { MenuGroup, MenuItem } from '@wordpress/components';\nimport {\n\tgetBlockMenuDefaultClassName,\n\tswitchToBlockType,\n} from '@wordpress/blocks';\nimport { useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BlockIcon from '../block-icon';\nimport PreviewBlockPopover from './preview-block-popover';\n\n/**\n * Helper hook to group transformations to display them in a specific order in the UI.\n * For now we group only priority content driven transformations(ex. paragraph -> heading).\n *\n * Later on we could also group 'layout' transformations(ex. paragraph -> group) and\n * display them in different sections.\n *\n * @param {Object[]} possibleBlockTransformations The available block transformations.\n * @return {Record<string, Object[]>} The grouped block transformations.\n */\nfunction useGroupedTransforms( possibleBlockTransformations ) {\n\tconst priorityContentTranformationBlocks = {\n\t\t'core/paragraph': 1,\n\t\t'core/heading': 2,\n\t\t'core/list': 3,\n\t\t'core/quote': 4,\n\t};\n\tconst transformations = useMemo( () => {\n\t\tconst priorityTextTranformsNames = Object.keys(\n\t\t\tpriorityContentTranformationBlocks\n\t\t);\n\t\treturn possibleBlockTransformations.reduce(\n\t\t\t( accumulator, item ) => {\n\t\t\t\tconst { name } = item;\n\t\t\t\tif ( priorityTextTranformsNames.includes( name ) ) {\n\t\t\t\t\taccumulator.priorityTextTransformations.push( item );\n\t\t\t\t} else {\n\t\t\t\t\taccumulator.restTransformations.push( item );\n\t\t\t\t}\n\t\t\t\treturn accumulator;\n\t\t\t},\n\t\t\t{ priorityTextTransformations: [], restTransformations: [] }\n\t\t);\n\t}, [ possibleBlockTransformations ] );\n\n\t// Order the priority text transformations.\n\ttransformations.priorityTextTransformations.sort(\n\t\t( { name: currentName }, { name: nextName } ) => {\n\t\t\treturn priorityContentTranformationBlocks[ currentName ] <\n\t\t\t\tpriorityContentTranformationBlocks[ nextName ]\n\t\t\t\t? -1\n\t\t\t\t: 1;\n\t\t}\n\t);\n\treturn transformations;\n}\n\nconst BlockTransformationsMenu = ( {\n\tclassName,\n\tpossibleBlockTransformations,\n\tonSelect,\n\tblocks,\n} ) => {\n\tconst [ hoveredTransformItemName, setHoveredTransformItemName ] =\n\t\tuseState();\n\n\tconst { priorityTextTransformations, restTransformations } =\n\t\tuseGroupedTransforms( possibleBlockTransformations );\n\t// We have to check if both content transformations(priority and rest) are set\n\t// in order to create a separate MenuGroup for them.\n\tconst hasBothContentTransformations =\n\t\tpriorityTextTransformations.length && restTransformations.length;\n\tconst restTransformItems = !! restTransformations.length && (\n\t\t<RestTransformationItems\n\t\t\trestTransformations={ restTransformations }\n\t\t\tonSelect={ onSelect }\n\t\t\tsetHoveredTransformItemName={ setHoveredTransformItemName }\n\t\t/>\n\t);\n\treturn (\n\t\t<>\n\t\t\t<MenuGroup label={ __( 'Transform to' ) } className={ className }>\n\t\t\t\t{ hoveredTransformItemName && (\n\t\t\t\t\t<PreviewBlockPopover\n\t\t\t\t\t\tblocks={ switchToBlockType(\n\t\t\t\t\t\t\tblocks,\n\t\t\t\t\t\t\thoveredTransformItemName\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ priorityTextTransformations.map( ( item ) => (\n\t\t\t\t\t<BlockTranformationItem\n\t\t\t\t\t\tkey={ item.name }\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\tsetHoveredTransformItemName={\n\t\t\t\t\t\t\tsetHoveredTransformItemName\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t\t{ ! hasBothContentTransformations && restTransformItems }\n\t\t\t</MenuGroup>\n\t\t\t{ !! hasBothContentTransformations && (\n\t\t\t\t<MenuGroup className={ className }>\n\t\t\t\t\t{ restTransformItems }\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t</>\n\t);\n};\n\nfunction RestTransformationItems( {\n\trestTransformations,\n\tonSelect,\n\tsetHoveredTransformItemName,\n} ) {\n\treturn restTransformations.map( ( item ) => (\n\t\t<BlockTranformationItem\n\t\t\tkey={ item.name }\n\t\t\titem={ item }\n\t\t\tonSelect={ onSelect }\n\t\t\tsetHoveredTransformItemName={ setHoveredTransformItemName }\n\t\t/>\n\t) );\n}\n\nfunction BlockTranformationItem( {\n\titem,\n\tonSelect,\n\tsetHoveredTransformItemName,\n} ) {\n\tconst { name, icon, title, isDisabled } = item;\n\treturn (\n\t\t<MenuItem\n\t\t\tclassName={ getBlockMenuDefaultClassName( name ) }\n\t\t\tonClick={ ( event ) => {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tonSelect( name );\n\t\t\t} }\n\t\t\tdisabled={ isDisabled }\n\t\t\tonMouseLeave={ () => setHoveredTransformItemName( null ) }\n\t\t\tonMouseEnter={ () => setHoveredTransformItemName( name ) }\n\t\t>\n\t\t\t<BlockIcon icon={ icon } showColors />\n\t\t\t{ title }\n\t\t</MenuItem>\n\t);\n}\n\nexport default BlockTransformationsMenu;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-switcher/block-transformations-menu.js"],"names":["__","MenuGroup","MenuItem","getBlockMenuDefaultClassName","switchToBlockType","useState","useMemo","BlockIcon","PreviewBlockPopover","BlockVariationTransformations","useGroupedTransforms","possibleBlockTransformations","priorityContentTranformationBlocks","transformations","priorityTextTranformsNames","Object","keys","reduce","accumulator","item","name","includes","priorityTextTransformations","push","restTransformations","sort","currentName","nextName","BlockTransformationsMenu","className","possibleBlockVariationTransformations","onSelect","onSelectVariation","blocks","hoveredTransformItemName","setHoveredTransformItemName","hasBothContentTransformations","length","restTransformItems","map","RestTransformationItems","BlockTranformationItem","icon","title","isDisabled","event","preventDefault"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { MenuGroup, MenuItem } from '@wordpress/components';\nimport {\n\tgetBlockMenuDefaultClassName,\n\tswitchToBlockType,\n} from '@wordpress/blocks';\nimport { useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BlockIcon from '../block-icon';\nimport PreviewBlockPopover from './preview-block-popover';\nimport BlockVariationTransformations from './block-variation-transformations';\n\n/**\n * Helper hook to group transformations to display them in a specific order in the UI.\n * For now we group only priority content driven transformations(ex. paragraph -> heading).\n *\n * Later on we could also group 'layout' transformations(ex. paragraph -> group) and\n * display them in different sections.\n *\n * @param {Object[]} possibleBlockTransformations The available block transformations.\n * @return {Record<string, Object[]>} The grouped block transformations.\n */\nfunction useGroupedTransforms( possibleBlockTransformations ) {\n\tconst priorityContentTranformationBlocks = {\n\t\t'core/paragraph': 1,\n\t\t'core/heading': 2,\n\t\t'core/list': 3,\n\t\t'core/quote': 4,\n\t};\n\tconst transformations = useMemo( () => {\n\t\tconst priorityTextTranformsNames = Object.keys(\n\t\t\tpriorityContentTranformationBlocks\n\t\t);\n\t\treturn possibleBlockTransformations.reduce(\n\t\t\t( accumulator, item ) => {\n\t\t\t\tconst { name } = item;\n\t\t\t\tif ( priorityTextTranformsNames.includes( name ) ) {\n\t\t\t\t\taccumulator.priorityTextTransformations.push( item );\n\t\t\t\t} else {\n\t\t\t\t\taccumulator.restTransformations.push( item );\n\t\t\t\t}\n\t\t\t\treturn accumulator;\n\t\t\t},\n\t\t\t{ priorityTextTransformations: [], restTransformations: [] }\n\t\t);\n\t}, [ possibleBlockTransformations ] );\n\n\t// Order the priority text transformations.\n\ttransformations.priorityTextTransformations.sort(\n\t\t( { name: currentName }, { name: nextName } ) => {\n\t\t\treturn priorityContentTranformationBlocks[ currentName ] <\n\t\t\t\tpriorityContentTranformationBlocks[ nextName ]\n\t\t\t\t? -1\n\t\t\t\t: 1;\n\t\t}\n\t);\n\treturn transformations;\n}\n\nconst BlockTransformationsMenu = ( {\n\tclassName,\n\tpossibleBlockTransformations,\n\tpossibleBlockVariationTransformations,\n\tonSelect,\n\tonSelectVariation,\n\tblocks,\n} ) => {\n\tconst [ hoveredTransformItemName, setHoveredTransformItemName ] =\n\t\tuseState();\n\n\tconst { priorityTextTransformations, restTransformations } =\n\t\tuseGroupedTransforms( possibleBlockTransformations );\n\t// We have to check if both content transformations(priority and rest) are set\n\t// in order to create a separate MenuGroup for them.\n\tconst hasBothContentTransformations =\n\t\tpriorityTextTransformations.length && restTransformations.length;\n\tconst restTransformItems = !! restTransformations.length && (\n\t\t<RestTransformationItems\n\t\t\trestTransformations={ restTransformations }\n\t\t\tonSelect={ onSelect }\n\t\t\tsetHoveredTransformItemName={ setHoveredTransformItemName }\n\t\t/>\n\t);\n\treturn (\n\t\t<>\n\t\t\t<MenuGroup label={ __( 'Transform to' ) } className={ className }>\n\t\t\t\t{ hoveredTransformItemName && (\n\t\t\t\t\t<PreviewBlockPopover\n\t\t\t\t\t\tblocks={ switchToBlockType(\n\t\t\t\t\t\t\tblocks,\n\t\t\t\t\t\t\thoveredTransformItemName\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ !! possibleBlockVariationTransformations?.length && (\n\t\t\t\t\t<BlockVariationTransformations\n\t\t\t\t\t\ttransformations={\n\t\t\t\t\t\t\tpossibleBlockVariationTransformations\n\t\t\t\t\t\t}\n\t\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\t\tonSelect={ onSelectVariation }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ priorityTextTransformations.map( ( item ) => (\n\t\t\t\t\t<BlockTranformationItem\n\t\t\t\t\t\tkey={ item.name }\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\tsetHoveredTransformItemName={\n\t\t\t\t\t\t\tsetHoveredTransformItemName\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t\t{ ! hasBothContentTransformations && restTransformItems }\n\t\t\t</MenuGroup>\n\t\t\t{ !! hasBothContentTransformations && (\n\t\t\t\t<MenuGroup className={ className }>\n\t\t\t\t\t{ restTransformItems }\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t</>\n\t);\n};\n\nfunction RestTransformationItems( {\n\trestTransformations,\n\tonSelect,\n\tsetHoveredTransformItemName,\n} ) {\n\treturn restTransformations.map( ( item ) => (\n\t\t<BlockTranformationItem\n\t\t\tkey={ item.name }\n\t\t\titem={ item }\n\t\t\tonSelect={ onSelect }\n\t\t\tsetHoveredTransformItemName={ setHoveredTransformItemName }\n\t\t/>\n\t) );\n}\n\nfunction BlockTranformationItem( {\n\titem,\n\tonSelect,\n\tsetHoveredTransformItemName,\n} ) {\n\tconst { name, icon, title, isDisabled } = item;\n\treturn (\n\t\t<MenuItem\n\t\t\tclassName={ getBlockMenuDefaultClassName( name ) }\n\t\t\tonClick={ ( event ) => {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tonSelect( name );\n\t\t\t} }\n\t\t\tdisabled={ isDisabled }\n\t\t\tonMouseLeave={ () => setHoveredTransformItemName( null ) }\n\t\t\tonMouseEnter={ () => setHoveredTransformItemName( name ) }\n\t\t>\n\t\t\t<BlockIcon icon={ icon } showColors />\n\t\t\t{ title }\n\t\t</MenuItem>\n\t);\n}\n\nexport default BlockTransformationsMenu;\n"]}

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

@@ -19,15 +19,14 @@ import { store as noticesStore } from '@wordpress/notices';
 
 import { store as blockEditorStore } from '../../store';
 
-const BlockTransformationsMenu = _ref => {
-  let {
-    anchorNodeRef,
-    blockTitle,
-    pickerRef,
-    possibleTransformations,
-    selectedBlock,
-    selectedBlockClientId
-  } = _ref;
+const BlockTransformationsMenu = ({
+  anchorNodeRef,
+  blockTitle,
+  pickerRef,
+  possibleTransformations,
+  selectedBlock,
+  selectedBlockClientId
+}) => {
   const {
     replaceBlocks
   } = useDispatch(blockEditorStore);
@@ -38,7 +37,7 @@ const BlockTransformationsMenu = _ref => {
   const pickerOptions = () => {
     var _selectedBlock$name;
 
-    const selectedBlockName = (_selectedBlock$name = selectedBlock === null || selectedBlock === void 0 ? void 0 : selectedBlock.name) !== null && _selectedBlock$name !== void 0 ? _selectedBlock$name : '';
+    const selectedBlockName = (_selectedBlock$name = selectedBlock?.name) !== null && _selectedBlock$name !== void 0 ? _selectedBlock$name : '';
     const blocksThatSplitWhenTransformed = {
       'core/list': ['core/paragraph', 'core/heading'],
       'core/quote': ['core/paragraph'],

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-switcher/block-transformations-menu.native.js"],"names":["findNodeHandle","Platform","__","sprintf","switchToBlockType","Picker","useDispatch","store","noticesStore","blockEditorStore","BlockTransformationsMenu","anchorNodeRef","blockTitle","pickerRef","possibleTransformations","selectedBlock","selectedBlockClientId","replaceBlocks","createSuccessNotice","pickerOptions","selectedBlockName","name","blocksThatSplitWhenTransformed","map","item","label","length","includes","id","title","value","getAnchor","undefined","onPickerSelect","selectedItem","find","successNotice","OS"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,cAAT,EAAyBC,QAAzB,QAAyC,cAAzC;AAEA;AACA;AACA;;AACA,SAASC,EAAT,EAAaC,OAAb,QAA4B,iBAA5B;AACA,SAASC,iBAAT,QAAkC,mBAAlC;AACA,SAASC,MAAT,QAAuB,uBAAvB;AACA,SAASC,WAAT,QAA4B,iBAA5B;AACA,SAASC,KAAK,IAAIC,YAAlB,QAAsC,oBAAtC;AAEA;AACA;AACA;;AACA,SAASD,KAAK,IAAIE,gBAAlB,QAA0C,aAA1C;;AAEA,MAAMC,wBAAwB,GAAG,QAO1B;AAAA,MAP4B;AAClCC,IAAAA,aADkC;AAElCC,IAAAA,UAFkC;AAGlCC,IAAAA,SAHkC;AAIlCC,IAAAA,uBAJkC;AAKlCC,IAAAA,aALkC;AAMlCC,IAAAA;AANkC,GAO5B;AACN,QAAM;AAAEC,IAAAA;AAAF,MAAoBX,WAAW,CAAEG,gBAAF,CAArC;AACA,QAAM;AAAES,IAAAA;AAAF,MAA0BZ,WAAW,CAAEE,YAAF,CAA3C;;AAEA,QAAMW,aAAa,GAAG,MAAM;AAAA;;AAC3B,UAAMC,iBAAiB,0BAAGL,aAAH,aAAGA,aAAH,uBAAGA,aAAa,CAAEM,IAAlB,qEAA0B,EAAjD;AACA,UAAMC,8BAA8B,GAAG;AACtC,mBAAa,CAAE,gBAAF,EAAoB,cAApB,CADyB;AAEtC,oBAAc,CAAE,gBAAF,CAFwB;AAGtC,wBAAkB,CAAE,gBAAF;AAHoB,KAAvC;AAMA,WAAOR,uBAAuB,CAACS,GAAxB,CAA+BC,IAAF,IAAY;AAC/C,YAAMC,KAAK,GACVL,iBAAiB,CAACM,MAAlB,IACAJ,8BAA8B,CAAEF,iBAAF,CAD9B,IAEAE,8BAA8B,CAAEF,iBAAF,CAA9B,CAAoDO,QAApD,CACCH,IAAI,CAACI,EADN,CAFA,GAKI,GAAGJ,IAAI,CAACK,KAAO,SALnB,GAMGL,IAAI,CAACK,KAPT;AAQA,aAAO;AACNJ,QAAAA,KADM;AAENK,QAAAA,KAAK,EAAEN,IAAI,CAACI;AAFN,OAAP;AAIA,KAbM,CAAP;AAcA,GAtBD;;AAwBA,QAAMG,SAAS,GAAG,MACjBpB,aAAa,GAAGX,cAAc,CAAEW,aAAF,CAAjB,GAAqCqB,SADnD;;AAGA,WAASC,cAAT,CAAyBH,KAAzB,EAAiC;AAChCb,IAAAA,aAAa,CACZD,qBADY,EAEZZ,iBAAiB,CAAEW,aAAF,EAAiBe,KAAjB,CAFL,CAAb;AAKA,UAAMI,YAAY,GAAGf,aAAa,GAAGgB,IAAhB,CAClBX,IAAF,IAAYA,IAAI,CAACM,KAAL,KAAeA,KADP,CAArB;AAGA,UAAMM,aAAa,GAAGjC,OAAO;AAC5B;AACAD,IAAAA,EAAE,CAAE,0BAAF,CAF0B,EAG5BU,UAH4B,EAI5BsB,YAAY,CAACT,KAJe,CAA7B;AAMAP,IAAAA,mBAAmB,CAAEkB,aAAF,CAAnB;AACA;;AAED,SACC,cAAC,MAAD;AACC,IAAA,MAAM,EAAC,4BADR;AAEC,IAAA,GAAG,EAAGvB,SAFP;AAGC,IAAA,OAAO,EAAGM,aAAa,EAHxB;AAIC,IAAA,QAAQ,EAAGc,cAJZ;AAKC,IAAA,gBAAgB,EAAGhC,QAAQ,CAACoC,EAAT,KAAgB,KALpC;AAMC,IAAA,SAAS,EAAG,IANb;AAOC,IAAA,SAAS,EAAGN,SAPb,CAQC;AARD;AASC,IAAA,KAAK,EAAG5B,OAAO,CAAED,EAAE,CAAE,iBAAF,CAAJ,EAA2BU,UAA3B;AAThB,IADD;AAaA,CArED;;AAuEA,eAAeF,wBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { findNodeHandle, Platform } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { switchToBlockType } from '@wordpress/blocks';\nimport { Picker } from '@wordpress/components';\nimport { useDispatch } from '@wordpress/data';\nimport { store as noticesStore } from '@wordpress/notices';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\n\nconst BlockTransformationsMenu = ( {\n\tanchorNodeRef,\n\tblockTitle,\n\tpickerRef,\n\tpossibleTransformations,\n\tselectedBlock,\n\tselectedBlockClientId,\n} ) => {\n\tconst { replaceBlocks } = useDispatch( blockEditorStore );\n\tconst { createSuccessNotice } = useDispatch( noticesStore );\n\n\tconst pickerOptions = () => {\n\t\tconst selectedBlockName = selectedBlock?.name ?? '';\n\t\tconst blocksThatSplitWhenTransformed = {\n\t\t\t'core/list': [ 'core/paragraph', 'core/heading' ],\n\t\t\t'core/quote': [ 'core/paragraph' ],\n\t\t\t'core/pullquote': [ 'core/paragraph' ],\n\t\t};\n\n\t\treturn possibleTransformations.map( ( item ) => {\n\t\t\tconst label =\n\t\t\t\tselectedBlockName.length &&\n\t\t\t\tblocksThatSplitWhenTransformed[ selectedBlockName ] &&\n\t\t\t\tblocksThatSplitWhenTransformed[ selectedBlockName ].includes(\n\t\t\t\t\titem.id\n\t\t\t\t)\n\t\t\t\t\t? `${ item.title } blocks`\n\t\t\t\t\t: item.title;\n\t\t\treturn {\n\t\t\t\tlabel,\n\t\t\t\tvalue: item.id,\n\t\t\t};\n\t\t} );\n\t};\n\n\tconst getAnchor = () =>\n\t\tanchorNodeRef ? findNodeHandle( anchorNodeRef ) : undefined;\n\n\tfunction onPickerSelect( value ) {\n\t\treplaceBlocks(\n\t\t\tselectedBlockClientId,\n\t\t\tswitchToBlockType( selectedBlock, value )\n\t\t);\n\n\t\tconst selectedItem = pickerOptions().find(\n\t\t\t( item ) => item.value === value\n\t\t);\n\t\tconst successNotice = sprintf(\n\t\t\t/* translators: 1: From block title, e.g. Paragraph. 2: To block title, e.g. Header. */\n\t\t\t__( '%1$s transformed to %2$s' ),\n\t\t\tblockTitle,\n\t\t\tselectedItem.label\n\t\t);\n\t\tcreateSuccessNotice( successNotice );\n\t}\n\n\treturn (\n\t\t<Picker\n\t\t\ttestID=\"block-transformations-menu\"\n\t\t\tref={ pickerRef }\n\t\t\toptions={ pickerOptions() }\n\t\t\tonChange={ onPickerSelect }\n\t\t\thideCancelButton={ Platform.OS !== 'ios' }\n\t\t\tleftAlign={ true }\n\t\t\tgetAnchor={ getAnchor }\n\t\t\t// translators: %s: block title e.g: \"Paragraph\".\n\t\t\ttitle={ sprintf( __( 'Transform %s to' ), blockTitle ) }\n\t\t/>\n\t);\n};\n\nexport default BlockTransformationsMenu;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-switcher/block-transformations-menu.native.js"],"names":["findNodeHandle","Platform","__","sprintf","switchToBlockType","Picker","useDispatch","store","noticesStore","blockEditorStore","BlockTransformationsMenu","anchorNodeRef","blockTitle","pickerRef","possibleTransformations","selectedBlock","selectedBlockClientId","replaceBlocks","createSuccessNotice","pickerOptions","selectedBlockName","name","blocksThatSplitWhenTransformed","map","item","label","length","includes","id","title","value","getAnchor","undefined","onPickerSelect","selectedItem","find","successNotice","OS"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,cAAT,EAAyBC,QAAzB,QAAyC,cAAzC;AAEA;AACA;AACA;;AACA,SAASC,EAAT,EAAaC,OAAb,QAA4B,iBAA5B;AACA,SAASC,iBAAT,QAAkC,mBAAlC;AACA,SAASC,MAAT,QAAuB,uBAAvB;AACA,SAASC,WAAT,QAA4B,iBAA5B;AACA,SAASC,KAAK,IAAIC,YAAlB,QAAsC,oBAAtC;AAEA;AACA;AACA;;AACA,SAASD,KAAK,IAAIE,gBAAlB,QAA0C,aAA1C;;AAEA,MAAMC,wBAAwB,GAAG,CAAE;AAClCC,EAAAA,aADkC;AAElCC,EAAAA,UAFkC;AAGlCC,EAAAA,SAHkC;AAIlCC,EAAAA,uBAJkC;AAKlCC,EAAAA,aALkC;AAMlCC,EAAAA;AANkC,CAAF,KAO1B;AACN,QAAM;AAAEC,IAAAA;AAAF,MAAoBX,WAAW,CAAEG,gBAAF,CAArC;AACA,QAAM;AAAES,IAAAA;AAAF,MAA0BZ,WAAW,CAAEE,YAAF,CAA3C;;AAEA,QAAMW,aAAa,GAAG,MAAM;AAAA;;AAC3B,UAAMC,iBAAiB,0BAAGL,aAAa,EAAEM,IAAlB,qEAA0B,EAAjD;AACA,UAAMC,8BAA8B,GAAG;AACtC,mBAAa,CAAE,gBAAF,EAAoB,cAApB,CADyB;AAEtC,oBAAc,CAAE,gBAAF,CAFwB;AAGtC,wBAAkB,CAAE,gBAAF;AAHoB,KAAvC;AAMA,WAAOR,uBAAuB,CAACS,GAAxB,CAA+BC,IAAF,IAAY;AAC/C,YAAMC,KAAK,GACVL,iBAAiB,CAACM,MAAlB,IACAJ,8BAA8B,CAAEF,iBAAF,CAD9B,IAEAE,8BAA8B,CAAEF,iBAAF,CAA9B,CAAoDO,QAApD,CACCH,IAAI,CAACI,EADN,CAFA,GAKI,GAAGJ,IAAI,CAACK,KAAO,SALnB,GAMGL,IAAI,CAACK,KAPT;AAQA,aAAO;AACNJ,QAAAA,KADM;AAENK,QAAAA,KAAK,EAAEN,IAAI,CAACI;AAFN,OAAP;AAIA,KAbM,CAAP;AAcA,GAtBD;;AAwBA,QAAMG,SAAS,GAAG,MACjBpB,aAAa,GAAGX,cAAc,CAAEW,aAAF,CAAjB,GAAqCqB,SADnD;;AAGA,WAASC,cAAT,CAAyBH,KAAzB,EAAiC;AAChCb,IAAAA,aAAa,CACZD,qBADY,EAEZZ,iBAAiB,CAAEW,aAAF,EAAiBe,KAAjB,CAFL,CAAb;AAKA,UAAMI,YAAY,GAAGf,aAAa,GAAGgB,IAAhB,CAClBX,IAAF,IAAYA,IAAI,CAACM,KAAL,KAAeA,KADP,CAArB;AAGA,UAAMM,aAAa,GAAGjC,OAAO;AAC5B;AACAD,IAAAA,EAAE,CAAE,0BAAF,CAF0B,EAG5BU,UAH4B,EAI5BsB,YAAY,CAACT,KAJe,CAA7B;AAMAP,IAAAA,mBAAmB,CAAEkB,aAAF,CAAnB;AACA;;AAED,SACC,cAAC,MAAD;AACC,IAAA,MAAM,EAAC,4BADR;AAEC,IAAA,GAAG,EAAGvB,SAFP;AAGC,IAAA,OAAO,EAAGM,aAAa,EAHxB;AAIC,IAAA,QAAQ,EAAGc,cAJZ;AAKC,IAAA,gBAAgB,EAAGhC,QAAQ,CAACoC,EAAT,KAAgB,KALpC;AAMC,IAAA,SAAS,EAAG,IANb;AAOC,IAAA,SAAS,EAAGN,SAPb,CAQC;AARD;AASC,IAAA,KAAK,EAAG5B,OAAO,CAAED,EAAE,CAAE,iBAAF,CAAJ,EAA2BU,UAA3B;AAThB,IADD;AAaA,CArED;;AAuEA,eAAeF,wBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { findNodeHandle, Platform } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { switchToBlockType } from '@wordpress/blocks';\nimport { Picker } from '@wordpress/components';\nimport { useDispatch } from '@wordpress/data';\nimport { store as noticesStore } from '@wordpress/notices';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\n\nconst BlockTransformationsMenu = ( {\n\tanchorNodeRef,\n\tblockTitle,\n\tpickerRef,\n\tpossibleTransformations,\n\tselectedBlock,\n\tselectedBlockClientId,\n} ) => {\n\tconst { replaceBlocks } = useDispatch( blockEditorStore );\n\tconst { createSuccessNotice } = useDispatch( noticesStore );\n\n\tconst pickerOptions = () => {\n\t\tconst selectedBlockName = selectedBlock?.name ?? '';\n\t\tconst blocksThatSplitWhenTransformed = {\n\t\t\t'core/list': [ 'core/paragraph', 'core/heading' ],\n\t\t\t'core/quote': [ 'core/paragraph' ],\n\t\t\t'core/pullquote': [ 'core/paragraph' ],\n\t\t};\n\n\t\treturn possibleTransformations.map( ( item ) => {\n\t\t\tconst label =\n\t\t\t\tselectedBlockName.length &&\n\t\t\t\tblocksThatSplitWhenTransformed[ selectedBlockName ] &&\n\t\t\t\tblocksThatSplitWhenTransformed[ selectedBlockName ].includes(\n\t\t\t\t\titem.id\n\t\t\t\t)\n\t\t\t\t\t? `${ item.title } blocks`\n\t\t\t\t\t: item.title;\n\t\t\treturn {\n\t\t\t\tlabel,\n\t\t\t\tvalue: item.id,\n\t\t\t};\n\t\t} );\n\t};\n\n\tconst getAnchor = () =>\n\t\tanchorNodeRef ? findNodeHandle( anchorNodeRef ) : undefined;\n\n\tfunction onPickerSelect( value ) {\n\t\treplaceBlocks(\n\t\t\tselectedBlockClientId,\n\t\t\tswitchToBlockType( selectedBlock, value )\n\t\t);\n\n\t\tconst selectedItem = pickerOptions().find(\n\t\t\t( item ) => item.value === value\n\t\t);\n\t\tconst successNotice = sprintf(\n\t\t\t/* translators: 1: From block title, e.g. Paragraph. 2: To block title, e.g. Header. */\n\t\t\t__( '%1$s transformed to %2$s' ),\n\t\t\tblockTitle,\n\t\t\tselectedItem.label\n\t\t);\n\t\tcreateSuccessNotice( successNotice );\n\t}\n\n\treturn (\n\t\t<Picker\n\t\t\ttestID=\"block-transformations-menu\"\n\t\t\tref={ pickerRef }\n\t\t\toptions={ pickerOptions() }\n\t\t\tonChange={ onPickerSelect }\n\t\t\thideCancelButton={ Platform.OS !== 'ios' }\n\t\t\tleftAlign={ true }\n\t\t\tgetAnchor={ getAnchor }\n\t\t\t// translators: %s: block title e.g: \"Paragraph\".\n\t\t\ttitle={ sprintf( __( 'Transform %s to' ), blockTitle ) }\n\t\t/>\n\t);\n};\n\nexport default BlockTransformationsMenu;\n"]}