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

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

@@ -3,168 +3,147 @@ import { createElement } from "@wordpress/element";
 /**
  * External dependencies
  */
-import { find, noop } from 'lodash';
+import { noop, debounce } from 'lodash';
 import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
 
-import { useMemo } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useState, useLayoutEffect } from '@wordpress/element';
+import { useViewportMatch } from '@wordpress/compose';
 import { ENTER, SPACE } from '@wordpress/keycodes';
-import { _x } from '@wordpress/i18n';
-import { getBlockType, cloneBlock, getBlockFromExample, store as blocksStore } from '@wordpress/blocks';
+import { Button, __experimentalText as Text, Slot, Fill } from '@wordpress/components';
 /**
  * Internal dependencies
  */
 
-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
-      });
-    }
+import BlockStylesPreviewPanel from './preview-panel';
+import useStylesForBlocks from './use-styles-for-block';
 
-    if (block) {
-      return cloneBlock(block);
-    }
-  }, [type !== null && type !== void 0 && type.example ? block === null || block === void 0 ? void 0 : block.name : block, type]);
+function BlockStylesPreviewPanelSlot(_ref) {
+  let {
+    scope
+  } = _ref;
+  return createElement(Slot, {
+    name: `BlockStylesPreviewPanel/${scope}`
+  });
 }
 
-function BlockStyles(_ref) {
+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) {
   let {
     clientId,
     onSwitch = noop,
     onHoverClassName = noop,
-    itemRole
-  } = _ref;
-
-  const selector = select => {
-    const {
-      getBlock
-    } = select(blockEditorStore);
-    const block = getBlock(clientId);
+    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;
+  }
 
-    if (!block) {
-      return EMPTY_OBJECT;
-    }
+  const debouncedSetHoveredStyle = debounce(setHoveredStyle, 250);
 
-    const blockType = getBlockType(block.name);
-    const {
-      getBlockStyles
-    } = select(blocksStore);
-    return {
-      block,
-      type: blockType,
-      styles: getBlockStyles(block.name),
-      className: block.attributes.className || ''
-    };
+  const onSelectStylePreview = style => {
+    onSelect(style);
+    onHoverClassName(null);
+    setHoveredStyle(null);
+    debouncedSetHoveredStyle.cancel();
   };
 
-  const {
-    styles,
-    block,
-    type,
-    className
-  } = useSelect(selector, [clientId]);
-  const {
-    updateBlockAttributes
-  } = useDispatch(blockEditorStore);
-  const genericPreviewBlock = useGenericPreviewBlock(block, type);
+  const styleItemHandler = item => {
+    var _item$name;
 
-  if (!styles || styles.length === 0) {
-    return null;
-  }
+    if (hoveredStyle === item) {
+      debouncedSetHoveredStyle.cancel();
+      return;
+    }
+
+    debouncedSetHoveredStyle(item);
+    onHoverClassName((_item$name = item === null || item === void 0 ? void 0 : item.name) !== null && _item$name !== void 0 ? _item$name : 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"
-  }, 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,
+  }, 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
+      }),
       key: style.name,
-      onSelect: () => {
-        updateBlockAttributes(clientId, {
-          className: styleClassName
-        });
-        onHoverClassName(null);
-        onSwitch();
+      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);
+        }
       },
-      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();
-      }
+      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
     },
-    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));
+    onMouseLeave: () => styleItemHandler(null)
+  }, createElement(BlockStylesPreviewPanel, {
+    activeStyle: activeStyle,
+    className: previewClassName,
+    genericPreviewBlock: genericPreviewBlock,
+    style: hoveredStyle
+  })));
 }
 
+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":["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"]}
+{"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":"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","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"]}

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

@@ -0,0 +1,50 @@
+import { createElement, Fragment } from "@wordpress/element";
+
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+/**
+ * WordPress dependencies
+ */
+
+import { MenuItem, __experimentalText as Text } from '@wordpress/components';
+import { check } from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+
+import useStylesForBlocks from './use-styles-for-block';
+export default function BlockStylesMenuItems(_ref) {
+  let {
+    clientId,
+    onSwitch = noop
+  } = _ref;
+  const {
+    onSelect,
+    stylesToRender,
+    activeStyle
+  } = useStylesForBlocks({
+    clientId,
+    onSwitch
+  });
+
+  if (!stylesToRender || stylesToRender.length === 0) {
+    return null;
+  }
+
+  return createElement(Fragment, null, stylesToRender.map(style => {
+    const menuItemText = style.label || style.name;
+    return createElement(MenuItem, {
+      key: style.name,
+      icon: activeStyle.name === style.name ? check : null,
+      onClick: () => onSelect(style)
+    }, createElement(Text, {
+      as: "span",
+      limit: 18,
+      ellipsizeMode: "tail",
+      truncate: true
+    }, menuItemText));
+  }));
+}
+//# sourceMappingURL=menu-items.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-styles/menu-items.js"],"names":["noop","MenuItem","__experimentalText","Text","check","useStylesForBlocks","BlockStylesMenuItems","clientId","onSwitch","onSelect","stylesToRender","activeStyle","length","map","style","menuItemText","label","name"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,QAArB;AAEA;AACA;AACA;;AACA,SAASC,QAAT,EAAmBC,kBAAkB,IAAIC,IAAzC,QAAqD,uBAArD;AACA,SAASC,KAAT,QAAsB,kBAAtB;AAEA;AACA;AACA;;AACA,OAAOC,kBAAP,MAA+B,wBAA/B;AAEA,eAAe,SAASC,oBAAT,OAA+D;AAAA,MAAhC;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,QAAQ,GAAGR;AAAvB,GAAgC;AAC7E,QAAM;AAAES,IAAAA,QAAF;AAAYC,IAAAA,cAAZ;AAA4BC,IAAAA;AAA5B,MAA4CN,kBAAkB,CAAE;AACrEE,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,GAAkCb,KAAlC,GAA0C,IAFlD;AAGC,MAAA,OAAO,EAAG,MAAMK,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 * External dependencies\n */\nimport { noop } from 'lodash';\n\n/**\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\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

@@ -0,0 +1,35 @@
+import { createElement } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+
+import InserterPreviewPanel from '../inserter/preview-panel';
+import { replaceActiveStyle } from './utils';
+export default function BlockStylesPreviewPanel(_ref) {
+  let {
+    genericPreviewBlock,
+    style,
+    className,
+    activeStyle
+  } = _ref;
+  const styleClassName = replaceActiveStyle(className, activeStyle, style);
+  const previewBlocks = useMemo(() => {
+    return { ...genericPreviewBlock,
+      title: style.label || style.name,
+      description: style.description,
+      initialAttributes: { ...genericPreviewBlock.attributes,
+        className: styleClassName + ' block-editor-block-styles__block-preview-container'
+      }
+    };
+  }, [genericPreviewBlock, styleClassName]);
+  return createElement(InserterPreviewPanel, {
+    item: previewBlocks,
+    isStylePreview: true
+  });
+}
+//# sourceMappingURL=preview-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-styles/preview-panel.js"],"names":["useMemo","InserterPreviewPanel","replaceActiveStyle","BlockStylesPreviewPanel","genericPreviewBlock","style","className","activeStyle","styleClassName","previewBlocks","title","label","name","description","initialAttributes","attributes"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,OAAOC,oBAAP,MAAiC,2BAAjC;AACA,SAASC,kBAAT,QAAmC,SAAnC;AAEA,eAAe,SAASC,uBAAT,OAKX;AAAA,MAL6C;AAChDC,IAAAA,mBADgD;AAEhDC,IAAAA,KAFgD;AAGhDC,IAAAA,SAHgD;AAIhDC,IAAAA;AAJgD,GAK7C;AACH,QAAMC,cAAc,GAAGN,kBAAkB,CAAEI,SAAF,EAAaC,WAAb,EAA0BF,KAA1B,CAAzC;AACA,QAAMI,aAAa,GAAGT,OAAO,CAAE,MAAM;AACpC,WAAO,EACN,GAAGI,mBADG;AAENM,MAAAA,KAAK,EAAEL,KAAK,CAACM,KAAN,IAAeN,KAAK,CAACO,IAFtB;AAGNC,MAAAA,WAAW,EAAER,KAAK,CAACQ,WAHb;AAINC,MAAAA,iBAAiB,EAAE,EAClB,GAAGV,mBAAmB,CAACW,UADL;AAElBT,QAAAA,SAAS,EACRE,cAAc,GACd;AAJiB;AAJb,KAAP;AAWA,GAZ4B,EAY1B,CAAEJ,mBAAF,EAAuBI,cAAvB,CAZ0B,CAA7B;AAcA,SACC,cAAC,oBAAD;AAAsB,IAAA,IAAI,EAAGC,aAA7B;AAA6C,IAAA,cAAc,EAAG;AAA9D,IADD;AAGA","sourcesContent":["/**\n * WordPress dependencies\n */\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 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};\n\t}, [ genericPreviewBlock, styleClassName ] );\n\n\treturn (\n\t\t<InserterPreviewPanel item={ previewBlocks } isStylePreview={ true } />\n\t);\n}\n"]}

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

@@ -0,0 +1,107 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { cloneBlock, getBlockType, getBlockFromExample, store as blocksStore } from '@wordpress/blocks';
+import { useMemo } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+
+import { getActiveStyle, getRenderedStyles, replaceActiveStyle } from './utils';
+import { store as blockEditorStore } from '../../store';
+/**
+ *
+ * @param {WPBlock}     block Block object.
+ * @param {WPBlockType} type  Block type settings.
+ * @return {WPBlock}          A generic block ready for styles preview.
+ */
+
+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
+      });
+    }
+
+    if (block) {
+      return cloneBlock(block);
+    }
+  }, [type !== null && type !== void 0 && type.example ? block === null || block === void 0 ? void 0 : block.name : block, type]);
+}
+/**
+ * @typedef useStylesForBlocksArguments
+ * @property {string}     clientId Block client ID.
+ * @property {() => void} onSwitch Block style switch callback function.
+ */
+
+/**
+ *
+ * @param  {useStylesForBlocksArguments} useStylesForBlocks arguments.
+ * @return {Object}                                         Results of the select methods.
+ */
+
+
+export default function useStylesForBlocks(_ref) {
+  let {
+    clientId,
+    onSwitch
+  } = _ref;
+
+  const selector = select => {
+    const {
+      getBlock
+    } = select(blockEditorStore);
+    const block = getBlock(clientId);
+
+    if (!block) {
+      return {};
+    }
+
+    const blockType = getBlockType(block.name);
+    const {
+      getBlockStyles
+    } = select(blocksStore);
+    return {
+      block,
+      blockType,
+      styles: getBlockStyles(block.name),
+      className: block.attributes.className || ''
+    };
+  };
+
+  const {
+    styles,
+    block,
+    blockType,
+    className
+  } = useSelect(selector, [clientId]);
+  const {
+    updateBlockAttributes
+  } = useDispatch(blockEditorStore);
+  const stylesToRender = getRenderedStyles(styles);
+  const activeStyle = getActiveStyle(stylesToRender, className);
+  const genericPreviewBlock = useGenericPreviewBlock(block, blockType);
+
+  const onSelect = style => {
+    const styleClassName = replaceActiveStyle(className, activeStyle, style);
+    updateBlockAttributes(clientId, {
+      className: styleClassName
+    });
+    onSwitch();
+  };
+
+  return {
+    onSelect,
+    stylesToRender,
+    activeStyle,
+    genericPreviewBlock,
+    className
+  };
+}
+//# sourceMappingURL=use-styles-for-block.js.map

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

@@ -0,0 +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"]}

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

@@ -7,6 +7,7 @@ import { find } from 'lodash';
  */
 
 import TokenList from '@wordpress/token-list';
+import { _x } from '@wordpress/i18n';
 /**
  * Returns the active style from the given className.
  *
@@ -54,4 +55,37 @@ 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