@wordpress/block-editor 8.0.12-next.33ec3857e2.0 → 8.0.12

package/build-module/components/block-preview/auto.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-preview/auto.js"],"names":["Disabled","useResizeObserver","pure","useRefEffect","useSelect","BlockList","Iframe","EditorStyles","store","MemoizedBlockList","AutoBlockPreview","viewportWidth","__experimentalPadding","containerResizeListener","width","containerWidth","contentResizeListener","height","contentHeight","styles","assets","select","settings","getSettings","__unstableResolvedAssets","scale","transform","bodyElement","ownerDocument","documentElement","classList","add","style","position","padding","pointerEvents"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,QAAT,QAAyB,uBAAzB;AACA,SAASC,iBAAT,EAA4BC,IAA5B,EAAkCC,YAAlC,QAAsD,oBAAtD;AACA,SAASC,SAAT,QAA0B,iBAA1B;AAEA;AACA;AACA;;AACA,OAAOC,SAAP,MAAsB,eAAtB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,SAASC,KAAT,QAAsB,aAAtB,C,CAEA;;AACA,IAAIC,iBAAJ;;AAEA,SAASC,gBAAT,OAAsE;AAAA,MAA3C;AAAEC,IAAAA,aAAF;AAAiBC,IAAAA;AAAjB,GAA2C;AACrE,QAAM,CACLC,uBADK,EAEL;AAAEC,IAAAA,KAAK,EAAEC;AAAT,GAFK,IAGFd,iBAAiB,EAHrB;AAIA,QAAM,CACLe,qBADK,EAEL;AAAEC,IAAAA,MAAM,EAAEC;AAAV,GAFK,IAGFjB,iBAAiB,EAHrB;AAIA,QAAM;AAAEkB,IAAAA,MAAF;AAAUC,IAAAA;AAAV,MAAqBhB,SAAS,CAAIiB,MAAF,IAAc;AACnD,UAAMC,QAAQ,GAAGD,MAAM,CAAEb,KAAF,CAAN,CAAgBe,WAAhB,EAAjB;AACA,WAAO;AACNJ,MAAAA,MAAM,EAAEG,QAAQ,CAACH,MADX;AAENC,MAAAA,MAAM,EAAEE,QAAQ,CAACE;AAFX,KAAP;AAIA,GANmC,EAMjC,EANiC,CAApC,CATqE,CAiBrE;;AACAf,EAAAA,iBAAiB,GAAGA,iBAAiB,IAAIP,IAAI,CAAEG,SAAF,CAA7C;AAEA,QAAMoB,KAAK,GAAGV,cAAc,GAAGJ,aAA/B;AAEA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGE,uBADH,EAEC,cAAC,QAAD;AACC,IAAA,SAAS,EAAC,qCADX;AAEC,IAAA,KAAK,EAAG;AACPa,MAAAA,SAAS,EAAG,SAASD,KAAO,GADrB;AAEPR,MAAAA,MAAM,EAAEC,aAAa,GAAGO;AAFjB;AAFT,KAOC,cAAC,MAAD;AACC,IAAA,IAAI,EAAG,cAAC,YAAD;AAAc,MAAA,MAAM,EAAGN;AAAvB,MADR;AAEC,IAAA,MAAM,EAAGC,MAFV;AAGC,IAAA,UAAU,EAAGjB,YAAY,CAAIwB,WAAF,IAAmB;AAC7C,YAAM;AACLC,QAAAA,aAAa,EAAE;AAAEC,UAAAA;AAAF;AADV,UAEFF,WAFJ;AAGAE,MAAAA,eAAe,CAACC,SAAhB,CAA0BC,GAA1B,CACC,4CADD;AAGAF,MAAAA,eAAe,CAACG,KAAhB,CAAsBC,QAAtB,GAAiC,UAAjC;AACAJ,MAAAA,eAAe,CAACG,KAAhB,CAAsBlB,KAAtB,GAA8B,MAA9B;AACAa,MAAAA,WAAW,CAACK,KAAZ,CAAkBE,OAAlB,GACCtB,qBAAqB,GAAG,IADzB;AAEA,KAXwB,EAWtB,EAXsB,CAH1B;AAeC,uBAfD;AAgBC,IAAA,QAAQ,EAAG,CAAC,CAhBb;AAiBC,IAAA,KAAK,EAAG;AACPqB,MAAAA,QAAQ,EAAE,UADH;AAEPnB,MAAAA,KAAK,EAAEH,aAFA;AAGPM,MAAAA,MAAM,EAAEC,aAHD;AAIPiB,MAAAA,aAAa,EAAE;AAJR;AAjBT,KAwBGnB,qBAxBH,EAyBC,cAAC,iBAAD;AAAmB,IAAA,cAAc,EAAG;AAApC,IAzBD,CAPD,CAFD,CADD;AAwCA;;AAED,eAAeN,gBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Disabled } from '@wordpress/components';\nimport { useResizeObserver, pure, useRefEffect } from '@wordpress/compose';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport BlockList from '../block-list';\nimport Iframe from '../iframe';\nimport EditorStyles from '../editor-styles';\nimport { store } from '../../store';\n\n// This is used to avoid rendering the block list if the sizes change.\nlet MemoizedBlockList;\n\nfunction AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {\n\tconst [\n\t\tcontainerResizeListener,\n\t\t{ width: containerWidth },\n\t] = useResizeObserver();\n\tconst [\n\t\tcontentResizeListener,\n\t\t{ height: contentHeight },\n\t] = useResizeObserver();\n\tconst { styles, assets } = useSelect( ( select ) => {\n\t\tconst settings = select( store ).getSettings();\n\t\treturn {\n\t\t\tstyles: settings.styles,\n\t\t\tassets: settings.__unstableResolvedAssets,\n\t\t};\n\t}, [] );\n\n\t// Initialize on render instead of module top level, to avoid circular dependency issues.\n\tMemoizedBlockList = MemoizedBlockList || pure( BlockList );\n\n\tconst scale = containerWidth / viewportWidth;\n\n\treturn (\n\t\t<div className=\"block-editor-block-preview__container\">\n\t\t\t{ containerResizeListener }\n\t\t\t<Disabled\n\t\t\t\tclassName=\"block-editor-block-preview__content\"\n\t\t\t\tstyle={ {\n\t\t\t\t\ttransform: `scale(${ scale })`,\n\t\t\t\t\theight: contentHeight * scale,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<Iframe\n\t\t\t\t\thead={ <EditorStyles styles={ styles } /> }\n\t\t\t\t\tassets={ assets }\n\t\t\t\t\tcontentRef={ useRefEffect( ( bodyElement ) => {\n\t\t\t\t\t\tconst {\n\t\t\t\t\t\t\townerDocument: { documentElement },\n\t\t\t\t\t\t} = bodyElement;\n\t\t\t\t\t\tdocumentElement.classList.add(\n\t\t\t\t\t\t\t'block-editor-block-preview__content-iframe'\n\t\t\t\t\t\t);\n\t\t\t\t\t\tdocumentElement.style.position = 'absolute';\n\t\t\t\t\t\tdocumentElement.style.width = '100%';\n\t\t\t\t\t\tbodyElement.style.padding =\n\t\t\t\t\t\t\t__experimentalPadding + 'px';\n\t\t\t\t\t}, [] ) }\n\t\t\t\t\taria-hidden\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\twidth: viewportWidth,\n\t\t\t\t\t\theight: contentHeight,\n\t\t\t\t\t\tpointerEvents: 'none',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ contentResizeListener }\n\t\t\t\t\t<MemoizedBlockList renderAppender={ false } />\n\t\t\t\t</Iframe>\n\t\t\t</Disabled>\n\t\t</div>\n\t);\n}\n\nexport default AutoBlockPreview;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-preview/auto.js"],"names":["Disabled","useResizeObserver","pure","useRefEffect","useSelect","BlockList","Iframe","EditorStyles","store","MemoizedBlockList","AutoBlockPreview","viewportWidth","__experimentalPadding","containerResizeListener","width","containerWidth","contentResizeListener","height","contentHeight","styles","select","getSettings","scale","transform","bodyElement","ownerDocument","documentElement","classList","add","style","position","padding","pointerEvents"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,QAAT,QAAyB,uBAAzB;AACA,SAASC,iBAAT,EAA4BC,IAA5B,EAAkCC,YAAlC,QAAsD,oBAAtD;AACA,SAASC,SAAT,QAA0B,iBAA1B;AAEA;AACA;AACA;;AACA,OAAOC,SAAP,MAAsB,eAAtB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,SAASC,KAAT,QAAsB,aAAtB,C,CAEA;;AACA,IAAIC,iBAAJ;;AAEA,SAASC,gBAAT,OAAsE;AAAA,MAA3C;AAAEC,IAAAA,aAAF;AAAiBC,IAAAA;AAAjB,GAA2C;AACrE,QAAM,CACLC,uBADK,EAEL;AAAEC,IAAAA,KAAK,EAAEC;AAAT,GAFK,IAGFd,iBAAiB,EAHrB;AAIA,QAAM,CACLe,qBADK,EAEL;AAAEC,IAAAA,MAAM,EAAEC;AAAV,GAFK,IAGFjB,iBAAiB,EAHrB;AAIA,QAAMkB,MAAM,GAAGf,SAAS,CAAIgB,MAAF,IAAc;AACvC,WAAOA,MAAM,CAAEZ,KAAF,CAAN,CAAgBa,WAAhB,GAA8BF,MAArC;AACA,GAFuB,EAErB,EAFqB,CAAxB,CATqE,CAarE;;AACAV,EAAAA,iBAAiB,GAAGA,iBAAiB,IAAIP,IAAI,CAAEG,SAAF,CAA7C;AAEA,QAAMiB,KAAK,GAAGP,cAAc,GAAGJ,aAA/B;AAEA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGE,uBADH,EAEC,cAAC,QAAD;AACC,IAAA,SAAS,EAAC,qCADX;AAEC,IAAA,KAAK,EAAG;AACPU,MAAAA,SAAS,EAAG,SAASD,KAAO,GADrB;AAEPL,MAAAA,MAAM,EAAEC,aAAa,GAAGI;AAFjB;AAFT,KAOC,cAAC,MAAD;AACC,IAAA,IAAI,EAAG,cAAC,YAAD;AAAc,MAAA,MAAM,EAAGH;AAAvB,MADR;AAEC,IAAA,UAAU,EAAGhB,YAAY,CAAIqB,WAAF,IAAmB;AAC7C,YAAM;AACLC,QAAAA,aAAa,EAAE;AAAEC,UAAAA;AAAF;AADV,UAEFF,WAFJ;AAGAE,MAAAA,eAAe,CAACC,SAAhB,CAA0BC,GAA1B,CACC,4CADD;AAGAF,MAAAA,eAAe,CAACG,KAAhB,CAAsBC,QAAtB,GAAiC,UAAjC;AACAJ,MAAAA,eAAe,CAACG,KAAhB,CAAsBf,KAAtB,GAA8B,MAA9B;AACAU,MAAAA,WAAW,CAACK,KAAZ,CAAkBE,OAAlB,GACCnB,qBAAqB,GAAG,IADzB;AAEA,KAXwB,EAWtB,EAXsB,CAF1B;AAcC,uBAdD;AAeC,IAAA,QAAQ,EAAG,CAAC,CAfb;AAgBC,IAAA,KAAK,EAAG;AACPkB,MAAAA,QAAQ,EAAE,UADH;AAEPhB,MAAAA,KAAK,EAAEH,aAFA;AAGPM,MAAAA,MAAM,EAAEC,aAHD;AAIPc,MAAAA,aAAa,EAAE;AAJR;AAhBT,KAuBGhB,qBAvBH,EAwBC,cAAC,iBAAD;AAAmB,IAAA,cAAc,EAAG;AAApC,IAxBD,CAPD,CAFD,CADD;AAuCA;;AAED,eAAeN,gBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Disabled } from '@wordpress/components';\nimport { useResizeObserver, pure, useRefEffect } from '@wordpress/compose';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport BlockList from '../block-list';\nimport Iframe from '../iframe';\nimport EditorStyles from '../editor-styles';\nimport { store } from '../../store';\n\n// This is used to avoid rendering the block list if the sizes change.\nlet MemoizedBlockList;\n\nfunction AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {\n\tconst [\n\t\tcontainerResizeListener,\n\t\t{ width: containerWidth },\n\t] = useResizeObserver();\n\tconst [\n\t\tcontentResizeListener,\n\t\t{ height: contentHeight },\n\t] = useResizeObserver();\n\tconst styles = useSelect( ( select ) => {\n\t\treturn select( store ).getSettings().styles;\n\t}, [] );\n\n\t// Initialize on render instead of module top level, to avoid circular dependency issues.\n\tMemoizedBlockList = MemoizedBlockList || pure( BlockList );\n\n\tconst scale = containerWidth / viewportWidth;\n\n\treturn (\n\t\t<div className=\"block-editor-block-preview__container\">\n\t\t\t{ containerResizeListener }\n\t\t\t<Disabled\n\t\t\t\tclassName=\"block-editor-block-preview__content\"\n\t\t\t\tstyle={ {\n\t\t\t\t\ttransform: `scale(${ scale })`,\n\t\t\t\t\theight: contentHeight * scale,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<Iframe\n\t\t\t\t\thead={ <EditorStyles styles={ styles } /> }\n\t\t\t\t\tcontentRef={ useRefEffect( ( bodyElement ) => {\n\t\t\t\t\t\tconst {\n\t\t\t\t\t\t\townerDocument: { documentElement },\n\t\t\t\t\t\t} = bodyElement;\n\t\t\t\t\t\tdocumentElement.classList.add(\n\t\t\t\t\t\t\t'block-editor-block-preview__content-iframe'\n\t\t\t\t\t\t);\n\t\t\t\t\t\tdocumentElement.style.position = 'absolute';\n\t\t\t\t\t\tdocumentElement.style.width = '100%';\n\t\t\t\t\t\tbodyElement.style.padding =\n\t\t\t\t\t\t\t__experimentalPadding + 'px';\n\t\t\t\t\t}, [] ) }\n\t\t\t\t\taria-hidden\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\twidth: viewportWidth,\n\t\t\t\t\t\theight: contentHeight,\n\t\t\t\t\t\tpointerEvents: 'none',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ contentResizeListener }\n\t\t\t\t\t<MemoizedBlockList renderAppender={ false } />\n\t\t\t\t</Iframe>\n\t\t\t</Disabled>\n\t\t</div>\n\t);\n}\n\nexport default AutoBlockPreview;\n"]}

package/build-module/components/block-settings/container.native.js

@@ -38,8 +38,7 @@ function BottomSheetSettings(_ref) {
     onClose: closeGeneralSidebar,
     hideHeader: true,
     contentStyle: styles.content,
-    hasNavigation: true,
-    testID: "block-settings-modal"
+    hasNavigation: true
   }, props), createElement(BottomSheet.NavigationContainer, {
     animate: true,
     main: true

package/build-module/components/block-settings/container.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-settings/container.native.js"],"names":["InspectorControls","useSetting","BottomSheet","ColorSettings","FocalPointSettingsPanel","ImageLinkDestinationsScreen","LinkPickerScreen","compose","withDispatch","withSelect","styles","store","blockEditorStore","blockSettingsScreens","settings","color","focalPoint","linkPicker","imageLinkDestinations","BottomSheetSettings","editorSidebarOpened","closeGeneralSidebar","props","colorSettings","colors","gradients","content","SubSheet","screenName","select","isEditorSidebarOpened","getSettings","dispatch"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { InspectorControls, useSetting } from '@wordpress/block-editor';\nimport {\n\tBottomSheet,\n\tColorSettings,\n\tFocalPointSettingsPanel,\n\tImageLinkDestinationsScreen,\n\tLinkPickerScreen,\n} from '@wordpress/components';\nimport { compose } from '@wordpress/compose';\nimport { withDispatch, withSelect } from '@wordpress/data';\n/**\n * Internal dependencies\n */\nimport styles from './container.native.scss';\nimport { store as blockEditorStore } from '../../store';\n\nexport const blockSettingsScreens = {\n\tsettings: 'Settings',\n\tcolor: 'Color',\n\tfocalPoint: 'FocalPoint',\n\tlinkPicker: 'linkPicker',\n\timageLinkDestinations: 'imageLinkDestinations',\n};\n\nfunction BottomSheetSettings( {\n\teditorSidebarOpened,\n\tcloseGeneralSidebar,\n\tsettings,\n\t...props\n} ) {\n\tconst colorSettings = {\n\t\tcolors: useSetting( 'color.palette' ) || settings.colors,\n\t\tgradients: useSetting( 'color.gradients' ) || settings.gradients,\n\t};\n\n\treturn (\n\t\t<BottomSheet\n\t\t\tisVisible={ editorSidebarOpened }\n\t\t\tonClose={ closeGeneralSidebar }\n\t\t\thideHeader\n\t\t\tcontentStyle={ styles.content }\n\t\t\thasNavigation\n\t\t\ttestID=\"block-settings-modal\"\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<BottomSheet.NavigationContainer animate main>\n\t\t\t\t<BottomSheet.NavigationScreen\n\t\t\t\t\tname={ blockSettingsScreens.settings }\n\t\t\t\t>\n\t\t\t\t\t<InspectorControls.Slot />\n\t\t\t\t</BottomSheet.NavigationScreen>\n\t\t\t\t<BottomSheet.NavigationScreen\n\t\t\t\t\tname={ BottomSheet.SubSheet.screenName }\n\t\t\t\t>\n\t\t\t\t\t<BottomSheet.SubSheet.Slot />\n\t\t\t\t</BottomSheet.NavigationScreen>\n\n\t\t\t\t<BottomSheet.NavigationScreen\n\t\t\t\t\tname={ blockSettingsScreens.color }\n\t\t\t\t>\n\t\t\t\t\t<ColorSettings defaultSettings={ colorSettings } />\n\t\t\t\t</BottomSheet.NavigationScreen>\n\t\t\t\t<BottomSheet.NavigationScreen\n\t\t\t\t\tname={ blockSettingsScreens.focalPoint }\n\t\t\t\t\tfullScreen\n\t\t\t\t>\n\t\t\t\t\t<FocalPointSettingsPanel />\n\t\t\t\t</BottomSheet.NavigationScreen>\n\t\t\t\t<BottomSheet.NavigationScreen\n\t\t\t\t\tname={ blockSettingsScreens.linkPicker }\n\t\t\t\t\tfullScreen\n\t\t\t\t\tisScrollable\n\t\t\t\t>\n\t\t\t\t\t<LinkPickerScreen\n\t\t\t\t\t\treturnScreenName={ blockSettingsScreens.settings }\n\t\t\t\t\t/>\n\t\t\t\t</BottomSheet.NavigationScreen>\n\t\t\t\t<BottomSheet.NavigationScreen\n\t\t\t\t\tname={ blockSettingsScreens.imageLinkDestinations }\n\t\t\t\t>\n\t\t\t\t\t<ImageLinkDestinationsScreen { ...props } />\n\t\t\t\t</BottomSheet.NavigationScreen>\n\t\t\t</BottomSheet.NavigationContainer>\n\t\t</BottomSheet>\n\t);\n}\n\nexport default compose( [\n\twithSelect( ( select ) => {\n\t\tconst { isEditorSidebarOpened } = select( 'core/edit-post' );\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\treturn {\n\t\t\tsettings: getSettings(),\n\t\t\teditorSidebarOpened: isEditorSidebarOpened(),\n\t\t};\n\t} ),\n\twithDispatch( ( dispatch ) => {\n\t\tconst { closeGeneralSidebar } = dispatch( 'core/edit-post' );\n\n\t\treturn {\n\t\t\tcloseGeneralSidebar,\n\t\t};\n\t} ),\n] )( BottomSheetSettings );\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-settings/container.native.js"],"names":["InspectorControls","useSetting","BottomSheet","ColorSettings","FocalPointSettingsPanel","ImageLinkDestinationsScreen","LinkPickerScreen","compose","withDispatch","withSelect","styles","store","blockEditorStore","blockSettingsScreens","settings","color","focalPoint","linkPicker","imageLinkDestinations","BottomSheetSettings","editorSidebarOpened","closeGeneralSidebar","props","colorSettings","colors","gradients","content","SubSheet","screenName","select","isEditorSidebarOpened","getSettings","dispatch"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { InspectorControls, useSetting } from '@wordpress/block-editor';\nimport {\n\tBottomSheet,\n\tColorSettings,\n\tFocalPointSettingsPanel,\n\tImageLinkDestinationsScreen,\n\tLinkPickerScreen,\n} from '@wordpress/components';\nimport { compose } from '@wordpress/compose';\nimport { withDispatch, withSelect } from '@wordpress/data';\n/**\n * Internal dependencies\n */\nimport styles from './container.native.scss';\nimport { store as blockEditorStore } from '../../store';\n\nexport const blockSettingsScreens = {\n\tsettings: 'Settings',\n\tcolor: 'Color',\n\tfocalPoint: 'FocalPoint',\n\tlinkPicker: 'linkPicker',\n\timageLinkDestinations: 'imageLinkDestinations',\n};\n\nfunction BottomSheetSettings( {\n\teditorSidebarOpened,\n\tcloseGeneralSidebar,\n\tsettings,\n\t...props\n} ) {\n\tconst colorSettings = {\n\t\tcolors: useSetting( 'color.palette' ) || settings.colors,\n\t\tgradients: useSetting( 'color.gradients' ) || settings.gradients,\n\t};\n\n\treturn (\n\t\t<BottomSheet\n\t\t\tisVisible={ editorSidebarOpened }\n\t\t\tonClose={ closeGeneralSidebar }\n\t\t\thideHeader\n\t\t\tcontentStyle={ styles.content }\n\t\t\thasNavigation\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<BottomSheet.NavigationContainer animate main>\n\t\t\t\t<BottomSheet.NavigationScreen\n\t\t\t\t\tname={ blockSettingsScreens.settings }\n\t\t\t\t>\n\t\t\t\t\t<InspectorControls.Slot />\n\t\t\t\t</BottomSheet.NavigationScreen>\n\t\t\t\t<BottomSheet.NavigationScreen\n\t\t\t\t\tname={ BottomSheet.SubSheet.screenName }\n\t\t\t\t>\n\t\t\t\t\t<BottomSheet.SubSheet.Slot />\n\t\t\t\t</BottomSheet.NavigationScreen>\n\n\t\t\t\t<BottomSheet.NavigationScreen\n\t\t\t\t\tname={ blockSettingsScreens.color }\n\t\t\t\t>\n\t\t\t\t\t<ColorSettings defaultSettings={ colorSettings } />\n\t\t\t\t</BottomSheet.NavigationScreen>\n\t\t\t\t<BottomSheet.NavigationScreen\n\t\t\t\t\tname={ blockSettingsScreens.focalPoint }\n\t\t\t\t\tfullScreen\n\t\t\t\t>\n\t\t\t\t\t<FocalPointSettingsPanel />\n\t\t\t\t</BottomSheet.NavigationScreen>\n\t\t\t\t<BottomSheet.NavigationScreen\n\t\t\t\t\tname={ blockSettingsScreens.linkPicker }\n\t\t\t\t\tfullScreen\n\t\t\t\t\tisScrollable\n\t\t\t\t>\n\t\t\t\t\t<LinkPickerScreen\n\t\t\t\t\t\treturnScreenName={ blockSettingsScreens.settings }\n\t\t\t\t\t/>\n\t\t\t\t</BottomSheet.NavigationScreen>\n\t\t\t\t<BottomSheet.NavigationScreen\n\t\t\t\t\tname={ blockSettingsScreens.imageLinkDestinations }\n\t\t\t\t>\n\t\t\t\t\t<ImageLinkDestinationsScreen { ...props } />\n\t\t\t\t</BottomSheet.NavigationScreen>\n\t\t\t</BottomSheet.NavigationContainer>\n\t\t</BottomSheet>\n\t);\n}\n\nexport default compose( [\n\twithSelect( ( select ) => {\n\t\tconst { isEditorSidebarOpened } = select( 'core/edit-post' );\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\treturn {\n\t\t\tsettings: getSettings(),\n\t\t\teditorSidebarOpened: isEditorSidebarOpened(),\n\t\t};\n\t} ),\n\twithDispatch( ( dispatch ) => {\n\t\tconst { closeGeneralSidebar } = dispatch( 'core/edit-post' );\n\n\t\treturn {\n\t\t\tcloseGeneralSidebar,\n\t\t};\n\t} ),\n] )( BottomSheetSettings );\n"]}

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

@@ -3,147 +3,168 @@ import { createElement } from "@wordpress/element";
 /**
  * External dependencies
  */
-import { noop, debounce } from 'lodash';
+import { find, noop } from 'lodash';
 import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
 
-import { useState, useLayoutEffect } from '@wordpress/element';
-import { useViewportMatch } from '@wordpress/compose';
+import { useMemo } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { ENTER, SPACE } from '@wordpress/keycodes';
-import { Button, __experimentalText as Text, Slot, Fill } from '@wordpress/components';
+import { _x } from '@wordpress/i18n';
+import { getBlockType, cloneBlock, getBlockFromExample, store as blocksStore } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
 
-import BlockStylesPreviewPanel from './preview-panel';
-import useStylesForBlocks from './use-styles-for-block';
+import { getActiveStyle, replaceActiveStyle } from './utils';
+import BlockPreview from '../block-preview';
+import { store as blockEditorStore } from '../../store';
+const EMPTY_OBJECT = {};
+
+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;
+
+    if (example && blockName) {
+      return getBlockFromExample(blockName, {
+        attributes: example.attributes,
+        innerBlocks: example.innerBlocks
+      });
+    }
 
-function BlockStylesPreviewPanelSlot(_ref) {
-  let {
-    scope
-  } = _ref;
-  return createElement(Slot, {
-    name: `BlockStylesPreviewPanel/${scope}`
-  });
+    if (block) {
+      return cloneBlock(block);
+    }
+  }, [type !== null && type !== void 0 && type.example ? block === null || block === void 0 ? void 0 : block.name : block, type]);
 }
 
-function BlockStylesPreviewPanelFill(_ref2) {
-  let {
-    children,
-    scope,
-    ...props
-  } = _ref2;
-  return createElement(Fill, {
-    name: `BlockStylesPreviewPanel/${scope}`
-  }, createElement("div", props, children));
-} // Top position (in px) of the Block Styles container
-// relative to the editor pane.
-// The value is the equivalent of the container's right position.
-
-
-const DEFAULT_POSITION_TOP = 16; // Block Styles component for the Settings Sidebar.
-
-function BlockStyles(_ref3) {
+function BlockStyles(_ref) {
   let {
     clientId,
     onSwitch = noop,
     onHoverClassName = noop,
-    scope
-  } = _ref3;
-  const {
-    onSelect,
-    stylesToRender,
-    activeStyle,
-    genericPreviewBlock,
-    className: previewClassName
-  } = useStylesForBlocks({
-    clientId,
-    onSwitch
-  });
-  const [hoveredStyle, setHoveredStyle] = useState(null);
-  const [containerScrollTop, setContainerScrollTop] = useState(0);
-  const isMobileViewport = useViewportMatch('medium', '<');
-  useLayoutEffect(() => {
-    const scrollContainer = document.querySelector('.interface-interface-skeleton__content');
-    const scrollTop = (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTop) || 0;
-    setContainerScrollTop(scrollTop + DEFAULT_POSITION_TOP);
-  }, [hoveredStyle]);
-
-  if (!stylesToRender || stylesToRender.length === 0) {
-    return null;
-  }
-
-  const debouncedSetHoveredStyle = debounce(setHoveredStyle, 250);
-
-  const onSelectStylePreview = style => {
-    onSelect(style);
-    onHoverClassName(null);
-    setHoveredStyle(null);
-    debouncedSetHoveredStyle.cancel();
-  };
+    itemRole
+  } = _ref;
 
-  const styleItemHandler = item => {
-    var _item$name;
+  const selector = select => {
+    const {
+      getBlock
+    } = select(blockEditorStore);
+    const block = getBlock(clientId);
 
-    if (hoveredStyle === item) {
-      debouncedSetHoveredStyle.cancel();
-      return;
+    if (!block) {
+      return EMPTY_OBJECT;
     }
 
-    debouncedSetHoveredStyle(item);
-    onHoverClassName((_item$name = item === null || item === void 0 ? void 0 : item.name) !== null && _item$name !== void 0 ? _item$name : null);
+    const blockType = getBlockType(block.name);
+    const {
+      getBlockStyles
+    } = select(blocksStore);
+    return {
+      block,
+      type: blockType,
+      styles: getBlockStyles(block.name),
+      className: block.attributes.className || ''
+    };
   };
 
+  const {
+    styles,
+    block,
+    type,
+    className
+  } = useSelect(selector, [clientId]);
+  const {
+    updateBlockAttributes
+  } = useDispatch(blockEditorStore);
+  const genericPreviewBlock = useGenericPreviewBlock(block, type);
+
+  if (!styles || styles.length === 0) {
+    return null;
+  }
+
+  const renderedStyles = find(styles, 'isDefault') ? styles : [{
+    name: 'default',
+    label: _x('Default', 'block style'),
+    isDefault: true
+  }, ...styles];
+  const activeStyle = getActiveStyle(renderedStyles, className);
   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, {
-      className: classnames('block-editor-block-styles__item', {
-        'is-active': activeStyle.name === style.name
-      }),
+  }, renderedStyles.map(style => {
+    var _type$example$viewpor, _type$example;
+
+    const styleClassName = replaceActiveStyle(className, activeStyle, style);
+    return createElement(BlockStyleItem, {
+      genericPreviewBlock: genericPreviewBlock,
+      viewportWidth: (_type$example$viewpor = (_type$example = type.example) === null || _type$example === void 0 ? void 0 : _type$example.viewportWidth) !== null && _type$example$viewpor !== void 0 ? _type$example$viewpor : 500,
+      className: className,
+      isActive: activeStyle === style,
       key: style.name,
-      variant: "secondary",
-      label: buttonText,
-      onMouseEnter: () => styleItemHandler(style),
-      onFocus: () => styleItemHandler(style),
-      onMouseLeave: () => styleItemHandler(null),
-      onBlur: () => styleItemHandler(null),
-      onKeyDown: event => {
-        if (ENTER === event.keyCode || SPACE === event.keyCode) {
-          event.preventDefault();
-          onSelectStylePreview(style);
-        }
+      onSelect: () => {
+        updateBlockAttributes(clientId, {
+          className: styleClassName
+        });
+        onHoverClassName(null);
+        onSwitch();
       },
-      onClick: () => onSelectStylePreview(style),
-      role: "button",
-      tabIndex: "0"
-    }, createElement(Text, {
-      as: "span",
-      limit: 12,
-      ellipsizeMode: "tail",
-      className: "block-editor-block-styles__item-text",
-      truncate: true
-    }, buttonText));
-  })), hoveredStyle && !isMobileViewport && createElement(BlockStylesPreviewPanelFill, {
-    scope: scope,
-    className: "block-editor-block-styles__preview-panel",
-    style: {
-      top: containerScrollTop
+      onBlur: () => onHoverClassName(null),
+      onHover: () => onHoverClassName(styleClassName),
+      style: style,
+      styleClassName: styleClassName,
+      itemRole: itemRole
+    });
+  }));
+}
+
+function BlockStyleItem(_ref2) {
+  let {
+    genericPreviewBlock,
+    viewportWidth,
+    style,
+    isActive,
+    onBlur,
+    onHover,
+    onSelect,
+    styleClassName,
+    itemRole
+  } = _ref2;
+  const previewBlocks = useMemo(() => {
+    return { ...genericPreviewBlock,
+      attributes: { ...genericPreviewBlock.attributes,
+        className: styleClassName
+      }
+    };
+  }, [genericPreviewBlock, styleClassName]);
+  return createElement("div", {
+    key: style.name,
+    className: classnames('block-editor-block-styles__item', {
+      'is-active': isActive
+    }),
+    onClick: () => onSelect(),
+    onKeyDown: event => {
+      if (ENTER === event.keyCode || SPACE === event.keyCode) {
+        event.preventDefault();
+        onSelect();
+      }
     },
-    onMouseLeave: () => styleItemHandler(null)
-  }, createElement(BlockStylesPreviewPanel, {
-    activeStyle: activeStyle,
-    className: previewClassName,
-    genericPreviewBlock: genericPreviewBlock,
-    style: hoveredStyle
-  })));
+    onMouseEnter: onHover,
+    onMouseLeave: onBlur,
+    role: itemRole || 'button',
+    tabIndex: "0",
+    "aria-label": style.label || style.name
+  }, createElement("div", {
+    className: "block-editor-block-styles__item-preview"
+  }, createElement(BlockPreview, {
+    viewportWidth: viewportWidth,
+    blocks: previewBlocks
+  })), createElement("div", {
+    className: "block-editor-block-styles__item-label"
+  }, style.label || style.name));
 }
 
-BlockStyles.Slot = BlockStylesPreviewPanelSlot;
 export default BlockStyles;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-styles/index.js"],"names":["noop","debounce","classnames","useState","useLayoutEffect","useViewportMatch","ENTER","SPACE","Button","__experimentalText","Text","Slot","Fill","BlockStylesPreviewPanel","useStylesForBlocks","BlockStylesPreviewPanelSlot","scope","BlockStylesPreviewPanelFill","children","props","DEFAULT_POSITION_TOP","BlockStyles","clientId","onSwitch","onHoverClassName","onSelect","stylesToRender","activeStyle","genericPreviewBlock","className","previewClassName","hoveredStyle","setHoveredStyle","containerScrollTop","setContainerScrollTop","isMobileViewport","scrollContainer","document","querySelector","scrollTop","length","debouncedSetHoveredStyle","onSelectStylePreview","style","cancel","styleItemHandler","item","name","map","buttonText","label","event","keyCode","preventDefault","top"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,QAAf,QAA+B,QAA/B;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,QAAT,EAAmBC,eAAnB,QAA0C,oBAA1C;AACA,SAASC,gBAAT,QAAiC,oBAAjC;AACA,SAASC,KAAT,EAAgBC,KAAhB,QAA6B,qBAA7B;AACA,SACCC,MADD,EAECC,kBAAkB,IAAIC,IAFvB,EAGCC,IAHD,EAICC,IAJD,QAKO,uBALP;AAOA;AACA;AACA;;AACA,OAAOC,uBAAP,MAAoC,iBAApC;AACA,OAAOC,kBAAP,MAA+B,wBAA/B;;AAEA,SAASC,2BAAT,OAAkD;AAAA,MAAZ;AAAEC,IAAAA;AAAF,GAAY;AACjD,SAAO,cAAC,IAAD;AAAM,IAAA,IAAI,EAAI,2BAA2BA,KAAO;AAAhD,IAAP;AACA;;AAED,SAASC,2BAAT,QAAsE;AAAA,MAAhC;AAAEC,IAAAA,QAAF;AAAYF,IAAAA,KAAZ;AAAmB,OAAGG;AAAtB,GAAgC;AACrE,SACC,cAAC,IAAD;AAAM,IAAA,IAAI,EAAI,2BAA2BH,KAAO;AAAhD,KACC,qBAAUG,KAAV,EAAoBD,QAApB,CADD,CADD;AAKA,C,CAED;AACA;AACA;;;AACA,MAAME,oBAAoB,GAAG,EAA7B,C,CAEA;;AACA,SAASC,WAAT,QAKI;AAAA,MALkB;AACrBC,IAAAA,QADqB;AAErBC,IAAAA,QAAQ,GAAGvB,IAFU;AAGrBwB,IAAAA,gBAAgB,GAAGxB,IAHE;AAIrBgB,IAAAA;AAJqB,GAKlB;AACH,QAAM;AACLS,IAAAA,QADK;AAELC,IAAAA,cAFK;AAGLC,IAAAA,WAHK;AAILC,IAAAA,mBAJK;AAKLC,IAAAA,SAAS,EAAEC;AALN,MAMFhB,kBAAkB,CAAE;AACvBQ,IAAAA,QADuB;AAEvBC,IAAAA;AAFuB,GAAF,CANtB;AAUA,QAAM,CAAEQ,YAAF,EAAgBC,eAAhB,IAAoC7B,QAAQ,CAAE,IAAF,CAAlD;AACA,QAAM,CAAE8B,kBAAF,EAAsBC,qBAAtB,IAAgD/B,QAAQ,CAAE,CAAF,CAA9D;AACA,QAAMgC,gBAAgB,GAAG9B,gBAAgB,CAAE,QAAF,EAAY,GAAZ,CAAzC;AAEAD,EAAAA,eAAe,CAAE,MAAM;AACtB,UAAMgC,eAAe,GAAGC,QAAQ,CAACC,aAAT,CACvB,wCADuB,CAAxB;AAGA,UAAMC,SAAS,GAAG,CAAAH,eAAe,SAAf,IAAAA,eAAe,WAAf,YAAAA,eAAe,CAAEG,SAAjB,KAA8B,CAAhD;AACAL,IAAAA,qBAAqB,CAAEK,SAAS,GAAGnB,oBAAd,CAArB;AACA,GANc,EAMZ,CAAEW,YAAF,CANY,CAAf;;AAQA,MAAK,CAAEL,cAAF,IAAoBA,cAAc,CAACc,MAAf,KAA0B,CAAnD,EAAuD;AACtD,WAAO,IAAP;AACA;;AAED,QAAMC,wBAAwB,GAAGxC,QAAQ,CAAE+B,eAAF,EAAmB,GAAnB,CAAzC;;AAEA,QAAMU,oBAAoB,GAAKC,KAAF,IAAa;AACzClB,IAAAA,QAAQ,CAAEkB,KAAF,CAAR;AACAnB,IAAAA,gBAAgB,CAAE,IAAF,CAAhB;AACAQ,IAAAA,eAAe,CAAE,IAAF,CAAf;AACAS,IAAAA,wBAAwB,CAACG,MAAzB;AACA,GALD;;AAOA,QAAMC,gBAAgB,GAAKC,IAAF,IAAY;AAAA;;AACpC,QAAKf,YAAY,KAAKe,IAAtB,EAA6B;AAC5BL,MAAAA,wBAAwB,CAACG,MAAzB;AACA;AACA;;AACDH,IAAAA,wBAAwB,CAAEK,IAAF,CAAxB;AACAtB,IAAAA,gBAAgB,eAAEsB,IAAF,aAAEA,IAAF,uBAAEA,IAAI,CAAEC,IAAR,mDAAgB,IAAhB,CAAhB;AACA,GAPD;;AASA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGrB,cAAc,CAACsB,GAAf,CAAsBL,KAAF,IAAa;AAClC,UAAMM,UAAU,GAAGN,KAAK,CAACO,KAAN,IAAeP,KAAK,CAACI,IAAxC;AAEA,WACC,cAAC,MAAD;AACC,MAAA,SAAS,EAAG7C,UAAU,CACrB,iCADqB,EAErB;AACC,qBACCyB,WAAW,CAACoB,IAAZ,KAAqBJ,KAAK,CAACI;AAF7B,OAFqB,CADvB;AAQC,MAAA,GAAG,EAAGJ,KAAK,CAACI,IARb;AASC,MAAA,OAAO,EAAC,WATT;AAUC,MAAA,KAAK,EAAGE,UAVT;AAWC,MAAA,YAAY,EAAG,MAAMJ,gBAAgB,CAAEF,KAAF,CAXtC;AAYC,MAAA,OAAO,EAAG,MAAME,gBAAgB,CAAEF,KAAF,CAZjC;AAaC,MAAA,YAAY,EAAG,MAAME,gBAAgB,CAAE,IAAF,CAbtC;AAcC,MAAA,MAAM,EAAG,MAAMA,gBAAgB,CAAE,IAAF,CAdhC;AAeC,MAAA,SAAS,EAAKM,KAAF,IAAa;AACxB,YACC7C,KAAK,KAAK6C,KAAK,CAACC,OAAhB,IACA7C,KAAK,KAAK4C,KAAK,CAACC,OAFjB,EAGE;AACDD,UAAAA,KAAK,CAACE,cAAN;AACAX,UAAAA,oBAAoB,CAAEC,KAAF,CAApB;AACA;AACD,OAvBF;AAwBC,MAAA,OAAO,EAAG,MAAMD,oBAAoB,CAAEC,KAAF,CAxBrC;AAyBC,MAAA,IAAI,EAAC,QAzBN;AA0BC,MAAA,QAAQ,EAAC;AA1BV,OA4BC,cAAC,IAAD;AACC,MAAA,EAAE,EAAC,MADJ;AAEC,MAAA,KAAK,EAAG,EAFT;AAGC,MAAA,aAAa,EAAC,MAHf;AAIC,MAAA,SAAS,EAAC,sCAJX;AAKC,MAAA,QAAQ;AALT,OAOGM,UAPH,CA5BD,CADD;AAwCA,GA3CC,CADH,CADD,EA+CGlB,YAAY,IAAI,CAAEI,gBAAlB,IACD,cAAC,2BAAD;AACC,IAAA,KAAK,EAAGnB,KADT;AAEC,IAAA,SAAS,EAAC,0CAFX;AAGC,IAAA,KAAK,EAAG;AAAEsC,MAAAA,GAAG,EAAErB;AAAP,KAHT;AAIC,IAAA,YAAY,EAAG,MAAMY,gBAAgB,CAAE,IAAF;AAJtC,KAMC,cAAC,uBAAD;AACC,IAAA,WAAW,EAAGlB,WADf;AAEC,IAAA,SAAS,EAAGG,gBAFb;AAGC,IAAA,mBAAmB,EAAGF,mBAHvB;AAIC,IAAA,KAAK,EAAGG;AAJT,IAND,CAhDF,CADD;AAiEA;;AAEDV,WAAW,CAACV,IAAZ,GAAmBI,2BAAnB;AACA,eAAeM,WAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { noop, debounce } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useLayoutEffect } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { ENTER, SPACE } from '@wordpress/keycodes';\nimport {\n\tButton,\n\t__experimentalText as Text,\n\tSlot,\n\tFill,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport BlockStylesPreviewPanel from './preview-panel';\nimport useStylesForBlocks from './use-styles-for-block';\n\nfunction BlockStylesPreviewPanelSlot( { scope } ) {\n\treturn <Slot name={ `BlockStylesPreviewPanel/${ scope }` } />;\n}\n\nfunction BlockStylesPreviewPanelFill( { children, scope, ...props } ) {\n\treturn (\n\t\t<Fill name={ `BlockStylesPreviewPanel/${ scope }` }>\n\t\t\t<div { ...props }>{ children }</div>\n\t\t</Fill>\n\t);\n}\n\n// Top position (in px) of the Block Styles container\n// relative to the editor pane.\n// The value is the equivalent of the container's right position.\nconst DEFAULT_POSITION_TOP = 16;\n\n// Block Styles component for the Settings Sidebar.\nfunction BlockStyles( {\n\tclientId,\n\tonSwitch = noop,\n\tonHoverClassName = noop,\n\tscope,\n} ) {\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 [ containerScrollTop, setContainerScrollTop ] = useState( 0 );\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\n\tuseLayoutEffect( () => {\n\t\tconst scrollContainer = document.querySelector(\n\t\t\t'.interface-interface-skeleton__content'\n\t\t);\n\t\tconst scrollTop = scrollContainer?.scrollTop || 0;\n\t\tsetContainerScrollTop( scrollTop + DEFAULT_POSITION_TOP );\n\t}, [ hoveredStyle ] );\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\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\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\tENTER === event.keyCode ||\n\t\t\t\t\t\t\t\t\tSPACE === event.keyCode\n\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\tonSelectStylePreview( style );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonClick={ () => onSelectStylePreview( style ) }\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabIndex=\"0\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\tlimit={ 12 }\n\t\t\t\t\t\t\t\tellipsizeMode=\"tail\"\n\t\t\t\t\t\t\t\tclassName=\"block-editor-block-styles__item-text\"\n\t\t\t\t\t\t\t\ttruncate\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</Text>\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<BlockStylesPreviewPanelFill\n\t\t\t\t\tscope={ scope }\n\t\t\t\t\tclassName=\"block-editor-block-styles__preview-panel\"\n\t\t\t\t\tstyle={ { top: containerScrollTop } }\n\t\t\t\t\tonMouseLeave={ () => styleItemHandler( null ) }\n\t\t\t\t>\n\t\t\t\t\t<BlockStylesPreviewPanel\n\t\t\t\t\t\tactiveStyle={ activeStyle }\n\t\t\t\t\t\tclassName={ previewClassName }\n\t\t\t\t\t\tgenericPreviewBlock={ genericPreviewBlock }\n\t\t\t\t\t\tstyle={ hoveredStyle }\n\t\t\t\t\t/>\n\t\t\t\t</BlockStylesPreviewPanelFill>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nBlockStyles.Slot = BlockStylesPreviewPanelSlot;\nexport default BlockStyles;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-styles/index.js"],"names":["find","noop","classnames","useMemo","useSelect","useDispatch","ENTER","SPACE","_x","getBlockType","cloneBlock","getBlockFromExample","store","blocksStore","getActiveStyle","replaceActiveStyle","BlockPreview","blockEditorStore","EMPTY_OBJECT","useGenericPreviewBlock","block","type","example","blockName","name","attributes","innerBlocks","BlockStyles","clientId","onSwitch","onHoverClassName","itemRole","selector","select","getBlock","blockType","getBlockStyles","styles","className","updateBlockAttributes","genericPreviewBlock","length","renderedStyles","label","isDefault","activeStyle","map","style","styleClassName","viewportWidth","BlockStyleItem","isActive","onBlur","onHover","onSelect","previewBlocks","event","keyCode","preventDefault"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { find, noop } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { ENTER, SPACE } from '@wordpress/keycodes';\nimport { _x } from '@wordpress/i18n';\nimport {\n\tgetBlockType,\n\tcloneBlock,\n\tgetBlockFromExample,\n\tstore as blocksStore,\n} from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { getActiveStyle, replaceActiveStyle } from './utils';\nimport BlockPreview from '../block-preview';\nimport { store as blockEditorStore } from '../../store';\n\nconst EMPTY_OBJECT = {};\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\nfunction BlockStyles( {\n\tclientId,\n\tonSwitch = noop,\n\tonHoverClassName = noop,\n\titemRole,\n} ) {\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 EMPTY_OBJECT;\n\t\t}\n\n\t\tconst blockType = getBlockType( block.name );\n\t\tconst { getBlockStyles } = select( blocksStore );\n\t\treturn {\n\t\t\tblock,\n\t\t\ttype: blockType,\n\t\t\tstyles: getBlockStyles( block.name ),\n\t\t\tclassName: block.attributes.className || '',\n\t\t};\n\t};\n\n\tconst { styles, block, type, className } = useSelect( selector, [\n\t\tclientId,\n\t] );\n\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\tconst genericPreviewBlock = useGenericPreviewBlock( block, type );\n\n\tif ( ! styles || styles.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst renderedStyles = find( styles, '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 activeStyle = getActiveStyle( renderedStyles, className );\n\treturn (\n\t\t<div className=\"block-editor-block-styles\">\n\t\t\t{ renderedStyles.map( ( style ) => {\n\t\t\t\tconst styleClassName = replaceActiveStyle(\n\t\t\t\t\tclassName,\n\t\t\t\t\tactiveStyle,\n\t\t\t\t\tstyle\n\t\t\t\t);\n\t\t\t\treturn (\n\t\t\t\t\t<BlockStyleItem\n\t\t\t\t\t\tgenericPreviewBlock={ genericPreviewBlock }\n\t\t\t\t\t\tviewportWidth={ type.example?.viewportWidth ?? 500 }\n\t\t\t\t\t\tclassName={ className }\n\t\t\t\t\t\tisActive={ activeStyle === style }\n\t\t\t\t\t\tkey={ style.name }\n\t\t\t\t\t\tonSelect={ () => {\n\t\t\t\t\t\t\tupdateBlockAttributes( clientId, {\n\t\t\t\t\t\t\t\tclassName: styleClassName,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\tonHoverClassName( null );\n\t\t\t\t\t\t\tonSwitch();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonBlur={ () => onHoverClassName( null ) }\n\t\t\t\t\t\tonHover={ () => onHoverClassName( styleClassName ) }\n\t\t\t\t\t\tstyle={ style }\n\t\t\t\t\t\tstyleClassName={ styleClassName }\n\t\t\t\t\t\titemRole={ itemRole }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</div>\n\t);\n}\n\nfunction BlockStyleItem( {\n\tgenericPreviewBlock,\n\tviewportWidth,\n\tstyle,\n\tisActive,\n\tonBlur,\n\tonHover,\n\tonSelect,\n\tstyleClassName,\n\titemRole,\n} ) {\n\tconst previewBlocks = useMemo( () => {\n\t\treturn {\n\t\t\t...genericPreviewBlock,\n\t\t\tattributes: {\n\t\t\t\t...genericPreviewBlock.attributes,\n\t\t\t\tclassName: styleClassName,\n\t\t\t},\n\t\t};\n\t}, [ genericPreviewBlock, styleClassName ] );\n\n\treturn (\n\t\t<div\n\t\t\tkey={ style.name }\n\t\t\tclassName={ classnames( 'block-editor-block-styles__item', {\n\t\t\t\t'is-active': isActive,\n\t\t\t} ) }\n\t\t\tonClick={ () => onSelect() }\n\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\tif ( ENTER === event.keyCode || SPACE === event.keyCode ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tonSelect();\n\t\t\t\t}\n\t\t\t} }\n\t\t\tonMouseEnter={ onHover }\n\t\t\tonMouseLeave={ onBlur }\n\t\t\trole={ itemRole || 'button' }\n\t\t\ttabIndex=\"0\"\n\t\t\taria-label={ style.label || style.name }\n\t\t>\n\t\t\t<div className=\"block-editor-block-styles__item-preview\">\n\t\t\t\t<BlockPreview\n\t\t\t\t\tviewportWidth={ viewportWidth }\n\t\t\t\t\tblocks={ previewBlocks }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div className=\"block-editor-block-styles__item-label\">\n\t\t\t\t{ style.label || style.name }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default BlockStyles;\n"]}

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

@@ -7,7 +7,6 @@ import { find } from 'lodash';
  */
 
 import TokenList from '@wordpress/token-list';
-import { _x } from '@wordpress/i18n';
 /**
  * Returns the active style from the given className.
  *
@@ -55,37 +54,4 @@ export function replaceActiveStyle(className, activeStyle, newStyle) {
   list.add('is-style-' + newStyle.name);
   return list.value;
 }
-/**
- * Returns a collection of styles that can be represented on the frontend.
- * The function checks a style collection for a default style. If none is found, it adds one to
- * act as a fallback for when there is no active style applied to a block. The default item also serves
- * as a switch on the frontend to deactivate non-default styles.
- *
- * @param {Array}           styles Block style variations.
- *
- * @return {Array<Object?>}        The style collection.
- */
-
-export function getRenderedStyles(styles) {
-  if (!styles || styles.length === 0) {
-    return [];
-  }
-
-  return getDefaultStyle(styles) ? styles : [{
-    name: 'default',
-    label: _x('Default', 'block style'),
-    isDefault: true
-  }, ...styles];
-}
-/**
- * Returns a style object from a collection of styles where that style object is the default block style.
- *
- * @param {Array}    styles Block style variations.
- *
- * @return {Object?}        The default style object, if found.
- */
-
-export function getDefaultStyle(styles) {
-  return find(styles, '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":["find","TokenList","_x","getActiveStyle","styles","className","style","values","indexOf","potentialStyleName","substring","activeStyle","name","replaceActiveStyle","newStyle","list","remove","add","value","getRenderedStyles","length","getDefaultStyle","label","isDefault"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,QAArB;AACA;AACA;AACA;;AACA,OAAOC,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,GAAGX,IAAI,CAAEI,MAAF,EAAU;AAAEQ,MAAAA,IAAI,EAAEH;AAAR,KAAV,CAAxB;;AACA,QAAKE,WAAL,EAAmB;AAClB,aAAOA,WAAP;AACA;AACD;;AAED,SAAOX,IAAI,CAAEI,MAAF,EAAU,WAAV,CAAX;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASS,kBAAT,CAA6BR,SAA7B,EAAwCM,WAAxC,EAAqDG,QAArD,EAAgE;AACtE,QAAMC,IAAI,GAAG,IAAId,SAAJ,CAAeI,SAAf,CAAb;;AAEA,MAAKM,WAAL,EAAmB;AAClBI,IAAAA,IAAI,CAACC,MAAL,CAAa,cAAcL,WAAW,CAACC,IAAvC;AACA;;AAEDG,EAAAA,IAAI,CAACE,GAAL,CAAU,cAAcH,QAAQ,CAACF,IAAjC;AAEA,SAAOG,IAAI,CAACG,KAAZ;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,iBAAT,CAA4Bf,MAA5B,EAAqC;AAC3C,MAAK,CAAEA,MAAF,IAAYA,MAAM,CAACgB,MAAP,KAAkB,CAAnC,EAAuC;AACtC,WAAO,EAAP;AACA;;AAED,SAAOC,eAAe,CAAEjB,MAAF,CAAf,GACJA,MADI,GAEJ,CACA;AACCQ,IAAAA,IAAI,EAAE,SADP;AAECU,IAAAA,KAAK,EAAEpB,EAAE,CAAE,SAAF,EAAa,aAAb,CAFV;AAGCqB,IAAAA,SAAS,EAAE;AAHZ,GADA,EAMA,GAAGnB,MANH,CAFH;AAUA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASiB,eAAT,CAA0BjB,MAA1B,EAAmC;AACzC,SAAOJ,IAAI,CAAEI,MAAF,EAAU,WAAV,CAAX;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { find } from 'lodash';\n/**\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 style variations.\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 = find( styles, { name: potentialStyleName } );\n\t\tif ( activeStyle ) {\n\t\t\treturn activeStyle;\n\t\t}\n\t}\n\n\treturn find( styles, 'isDefault' );\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 style variations.\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 style variations.\n *\n * @return {Object?}        The default style object, if found.\n */\nexport function getDefaultStyle( styles ) {\n\treturn find( styles, 'isDefault' );\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-styles/utils.js"],"names":["find","TokenList","getActiveStyle","styles","className","style","values","indexOf","potentialStyleName","substring","activeStyle","name","replaceActiveStyle","newStyle","list","remove","add","value"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,QAArB;AACA;AACA;AACA;;AACA,OAAOC,SAAP,MAAsB,uBAAtB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,cAAT,CAAyBC,MAAzB,EAAiCC,SAAjC,EAA6C;AACnD,OAAM,MAAMC,KAAZ,IAAqB,IAAIJ,SAAJ,CAAeG,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,GAAGV,IAAI,CAAEG,MAAF,EAAU;AAAEQ,MAAAA,IAAI,EAAEH;AAAR,KAAV,CAAxB;;AACA,QAAKE,WAAL,EAAmB;AAClB,aAAOA,WAAP;AACA;AACD;;AAED,SAAOV,IAAI,CAAEG,MAAF,EAAU,WAAV,CAAX;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASS,kBAAT,CAA6BR,SAA7B,EAAwCM,WAAxC,EAAqDG,QAArD,EAAgE;AACtE,QAAMC,IAAI,GAAG,IAAIb,SAAJ,CAAeG,SAAf,CAAb;;AAEA,MAAKM,WAAL,EAAmB;AAClBI,IAAAA,IAAI,CAACC,MAAL,CAAa,cAAcL,WAAW,CAACC,IAAvC;AACA;;AAEDG,EAAAA,IAAI,CAACE,GAAL,CAAU,cAAcH,QAAQ,CAACF,IAAjC;AAEA,SAAOG,IAAI,CAACG,KAAZ;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { find } from 'lodash';\n/**\n * WordPress dependencies\n */\nimport TokenList from '@wordpress/token-list';\n\n/**\n * Returns the active style from the given className.\n *\n * @param {Array}  styles    Block style variations.\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 = find( styles, { name: potentialStyleName } );\n\t\tif ( activeStyle ) {\n\t\t\treturn activeStyle;\n\t\t}\n\t}\n\n\treturn find( styles, 'isDefault' );\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"]}

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

@@ -5,25 +5,43 @@ import { createElement } from "@wordpress/element";
  */
 import { __ } from '@wordpress/i18n';
 import { MenuGroup } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { cloneBlock, getBlockFromExample, store as blocksStore } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
 
-import BlockStylesMenuItems from '../block-styles/menu-items';
+import BlockStyles from '../block-styles';
+import PreviewBlockPopover from './preview-block-popover';
 export default function BlockStylesMenu(_ref) {
   let {
     hoveredBlock,
     onSwitch
   } = _ref;
   const {
+    name,
     clientId
   } = hoveredBlock;
+  const [hoveredClassName, setHoveredClassName] = useState();
+  const blockType = useSelect(select => select(blocksStore).getBlockType(name), [name]);
   return createElement(MenuGroup, {
     label: __('Styles'),
     className: "block-editor-block-switcher__styles__menugroup"
-  }, createElement(BlockStylesMenuItems, {
+  }, hoveredClassName && createElement(PreviewBlockPopover, {
+    blocks: blockType && blockType.example ? getBlockFromExample(blockType.name, {
+      attributes: { ...blockType.example.attributes,
+        className: hoveredClassName
+      },
+      innerBlocks: blockType.example.innerBlocks
+    }) : cloneBlock(hoveredBlock, {
+      className: hoveredClassName
+    })
+  }), createElement(BlockStyles, {
     clientId: clientId,
-    onSwitch: onSwitch
+    onSwitch: onSwitch,
+    onHoverClassName: setHoveredClassName,
+    itemRole: "menuitem"
   }));
 }
 //# sourceMappingURL=block-styles-menu.js.map

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","useState","useSelect","cloneBlock","getBlockFromExample","store","blocksStore","BlockStyles","PreviewBlockPopover","BlockStylesMenu","hoveredBlock","onSwitch","name","clientId","hoveredClassName","setHoveredClassName","blockType","select","getBlockType","example","attributes","className","innerBlocks"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,SAAT,QAA0B,uBAA1B;AACA,SAASC,QAAT,QAAyB,oBAAzB;AACA,SAASC,SAAT,QAA0B,iBAA1B;AACA,SACCC,UADD,EAECC,mBAFD,EAGCC,KAAK,IAAIC,WAHV,QAIO,mBAJP;AAMA;AACA;AACA;;AACA,OAAOC,WAAP,MAAwB,iBAAxB;AACA,OAAOC,mBAAP,MAAgC,yBAAhC;AAEA,eAAe,SAASC,eAAT,OAAuD;AAAA,MAA7B;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,GAA6B;AACrE,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,MAAqBH,YAA3B;AACA,QAAM,CAAEI,gBAAF,EAAoBC,mBAApB,IAA4Cd,QAAQ,EAA1D;AACA,QAAMe,SAAS,GAAGd,SAAS,CACxBe,MAAF,IAAcA,MAAM,CAAEX,WAAF,CAAN,CAAsBY,YAAtB,CAAoCN,IAApC,CADY,EAE1B,CAAEA,IAAF,CAF0B,CAA3B;AAKA,SACC,cAAC,SAAD;AACC,IAAA,KAAK,EAAGb,EAAE,CAAE,QAAF,CADX;AAEC,IAAA,SAAS,EAAC;AAFX,KAIGe,gBAAgB,IACjB,cAAC,mBAAD;AACC,IAAA,MAAM,EACLE,SAAS,IAAIA,SAAS,CAACG,OAAvB,GACGf,mBAAmB,CAAEY,SAAS,CAACJ,IAAZ,EAAkB;AACrCQ,MAAAA,UAAU,EAAE,EACX,GAAGJ,SAAS,CAACG,OAAV,CAAkBC,UADV;AAEXC,QAAAA,SAAS,EAAEP;AAFA,OADyB;AAKrCQ,MAAAA,WAAW,EAAEN,SAAS,CAACG,OAAV,CAAkBG;AALM,KAAlB,CADtB,GAQGnB,UAAU,CAAEO,YAAF,EAAgB;AAC1BW,MAAAA,SAAS,EAAEP;AADe,KAAhB;AAVf,IALF,EAqBC,cAAC,WAAD;AACC,IAAA,QAAQ,EAAGD,QADZ;AAEC,IAAA,QAAQ,EAAGF,QAFZ;AAGC,IAAA,gBAAgB,EAAGI,mBAHpB;AAIC,IAAA,QAAQ,EAAC;AAJV,IArBD,CADD;AA8BA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { MenuGroup } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tcloneBlock,\n\tgetBlockFromExample,\n\tstore as blocksStore,\n} from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport BlockStyles from '../block-styles';\nimport PreviewBlockPopover from './preview-block-popover';\n\nexport default function BlockStylesMenu( { hoveredBlock, onSwitch } ) {\n\tconst { name, clientId } = hoveredBlock;\n\tconst [ hoveredClassName, setHoveredClassName ] = useState();\n\tconst blockType = useSelect(\n\t\t( select ) => select( blocksStore ).getBlockType( name ),\n\t\t[ name ]\n\t);\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{ hoveredClassName && (\n\t\t\t\t<PreviewBlockPopover\n\t\t\t\t\tblocks={\n\t\t\t\t\t\tblockType && blockType.example\n\t\t\t\t\t\t\t? getBlockFromExample( blockType.name, {\n\t\t\t\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t\t\t\t...blockType.example.attributes,\n\t\t\t\t\t\t\t\t\t\tclassName: hoveredClassName,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tinnerBlocks: blockType.example.innerBlocks,\n\t\t\t\t\t\t\t  } )\n\t\t\t\t\t\t\t: cloneBlock( hoveredBlock, {\n\t\t\t\t\t\t\t\t\tclassName: hoveredClassName,\n\t\t\t\t\t\t\t  } )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<BlockStyles\n\t\t\t\tclientId={ clientId }\n\t\t\t\tonSwitch={ onSwitch }\n\t\t\t\tonHoverClassName={ setHoveredClassName }\n\t\t\t\titemRole=\"menuitem\"\n\t\t\t/>\n\t\t</MenuGroup>\n\t);\n}\n"]}

package/build-module/components/block-tools/back-compat.js

@@ -24,8 +24,7 @@ export default function BlockToolsBackCompat(_ref) {
   }
 
   deprecated('wp.components.Popover.Slot name="block-toolbar"', {
-    alternative: 'wp.blockEditor.BlockTools',
-    since: '5.8'
+    alternative: 'wp.blockEditor.BlockTools'
   });
   return createElement(InsertionPoint, {
     __unstablePopoverSlot: "block-toolbar"

package/build-module/components/block-tools/back-compat.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-tools/back-compat.js"],"names":["useContext","Disabled","deprecated","InsertionPoint","InsertionPointOpenRef","BlockPopover","BlockToolsBackCompat","children","openRef","isDisabled","Context","alternative","since"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,oBAA3B;AACA,SAASC,QAAT,QAAyB,uBAAzB;AACA,OAAOC,UAAP,MAAuB,uBAAvB;AAEA;AACA;AACA;;AACA,OAAOC,cAAP,IAAyBC,qBAAzB,QAAsD,mBAAtD;AACA,OAAOC,YAAP,MAAyB,iBAAzB;AAEA,eAAe,SAASC,oBAAT,OAA8C;AAAA,MAAf;AAAEC,IAAAA;AAAF,GAAe;AAC5D,QAAMC,OAAO,GAAGR,UAAU,CAAEI,qBAAF,CAA1B;AACA,QAAMK,UAAU,GAAGT,UAAU,CAAEC,QAAQ,CAACS,OAAX,CAA7B,CAF4D,CAI5D;;AACA,MAAKF,OAAO,IAAIC,UAAhB,EAA6B;AAC5B,WAAOF,QAAP;AACA;;AAEDL,EAAAA,UAAU,CAAE,iDAAF,EAAqD;AAC9DS,IAAAA,WAAW,EAAE,2BADiD;AAE9DC,IAAAA,KAAK,EAAE;AAFuD,GAArD,CAAV;AAKA,SACC,cAAC,cAAD;AAAgB,IAAA,qBAAqB,EAAC;AAAtC,KACC,cAAC,YAAD;AAAc,IAAA,qBAAqB,EAAC;AAApC,IADD,EAEGL,QAFH,CADD;AAMA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport { Disabled } from '@wordpress/components';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport InsertionPoint, { InsertionPointOpenRef } from './insertion-point';\nimport BlockPopover from './block-popover';\n\nexport default function BlockToolsBackCompat( { children } ) {\n\tconst openRef = useContext( InsertionPointOpenRef );\n\tconst isDisabled = useContext( Disabled.Context );\n\n\t// If context is set, `BlockTools` is a parent component.\n\tif ( openRef || isDisabled ) {\n\t\treturn children;\n\t}\n\n\tdeprecated( 'wp.components.Popover.Slot name=\"block-toolbar\"', {\n\t\talternative: 'wp.blockEditor.BlockTools',\n\t\tsince: '5.8',\n\t} );\n\n\treturn (\n\t\t<InsertionPoint __unstablePopoverSlot=\"block-toolbar\">\n\t\t\t<BlockPopover __unstablePopoverSlot=\"block-toolbar\" />\n\t\t\t{ children }\n\t\t</InsertionPoint>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-tools/back-compat.js"],"names":["useContext","Disabled","deprecated","InsertionPoint","InsertionPointOpenRef","BlockPopover","BlockToolsBackCompat","children","openRef","isDisabled","Context","alternative"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,oBAA3B;AACA,SAASC,QAAT,QAAyB,uBAAzB;AACA,OAAOC,UAAP,MAAuB,uBAAvB;AAEA;AACA;AACA;;AACA,OAAOC,cAAP,IAAyBC,qBAAzB,QAAsD,mBAAtD;AACA,OAAOC,YAAP,MAAyB,iBAAzB;AAEA,eAAe,SAASC,oBAAT,OAA8C;AAAA,MAAf;AAAEC,IAAAA;AAAF,GAAe;AAC5D,QAAMC,OAAO,GAAGR,UAAU,CAAEI,qBAAF,CAA1B;AACA,QAAMK,UAAU,GAAGT,UAAU,CAAEC,QAAQ,CAACS,OAAX,CAA7B,CAF4D,CAI5D;;AACA,MAAKF,OAAO,IAAIC,UAAhB,EAA6B;AAC5B,WAAOF,QAAP;AACA;;AAEDL,EAAAA,UAAU,CAAE,iDAAF,EAAqD;AAC9DS,IAAAA,WAAW,EAAE;AADiD,GAArD,CAAV;AAIA,SACC,cAAC,cAAD;AAAgB,IAAA,qBAAqB,EAAC;AAAtC,KACC,cAAC,YAAD;AAAc,IAAA,qBAAqB,EAAC;AAApC,IADD,EAEGJ,QAFH,CADD;AAMA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport { Disabled } from '@wordpress/components';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport InsertionPoint, { InsertionPointOpenRef } from './insertion-point';\nimport BlockPopover from './block-popover';\n\nexport default function BlockToolsBackCompat( { children } ) {\n\tconst openRef = useContext( InsertionPointOpenRef );\n\tconst isDisabled = useContext( Disabled.Context );\n\n\t// If context is set, `BlockTools` is a parent component.\n\tif ( openRef || isDisabled ) {\n\t\treturn children;\n\t}\n\n\tdeprecated( 'wp.components.Popover.Slot name=\"block-toolbar\"', {\n\t\talternative: 'wp.blockEditor.BlockTools',\n\t} );\n\n\treturn (\n\t\t<InsertionPoint __unstablePopoverSlot=\"block-toolbar\">\n\t\t\t<BlockPopover __unstablePopoverSlot=\"block-toolbar\" />\n\t\t\t{ children }\n\t\t</InsertionPoint>\n\t);\n}\n"]}

package/build-module/components/block-tools/block-selection-button.js

@@ -54,7 +54,7 @@ function BlockSelectionButton(_ref) {
       hasBlockMovingClientId,
       getBlockListSettings
     } = select(blockEditorStore);
-    const index = getBlockIndex(clientId, rootClientId);
+    const index = getBlockIndex(clientId);
     const {
       name,
       attributes
@@ -166,8 +166,8 @@ function BlockSelectionButton(_ref) {
     if ((isEnter || isSpace) && startingBlockClientId) {
       const sourceRoot = getBlockRootClientId(startingBlockClientId);
       const destRoot = getBlockRootClientId(selectedBlockClientId);
-      const sourceBlockIndex = getBlockIndex(startingBlockClientId, sourceRoot);
-      let destinationBlockIndex = getBlockIndex(selectedBlockClientId, destRoot);
+      const sourceBlockIndex = getBlockIndex(startingBlockClientId);
+      let destinationBlockIndex = getBlockIndex(selectedBlockClientId);
 
       if (sourceBlockIndex < destinationBlockIndex && sourceRoot === destRoot) {
         destinationBlockIndex -= 1;