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

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

@@ -13,19 +13,15 @@ var _lodash = require("lodash");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _data = require("@wordpress/data");
+var _compose = require("@wordpress/compose");
 
 var _keycodes = require("@wordpress/keycodes");
 
-var _i18n = require("@wordpress/i18n");
+var _components = require("@wordpress/components");
 
-var _blocks = require("@wordpress/blocks");
+var _previewPanel = _interopRequireDefault(require("./preview-panel"));
 
-var _utils = require("./utils");
-
-var _blockPreview = _interopRequireDefault(require("../block-preview"));
-
-var _store = require("../../store");
+var _useStylesForBlock = _interopRequireDefault(require("./use-styles-for-block"));
 
 /**
  * External dependencies
@@ -38,151 +34,131 @@ var _store = require("../../store");
 /**
  * Internal dependencies
  */
-const EMPTY_OBJECT = {};
-
-function useGenericPreviewBlock(block, type) {
-  return (0, _element.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 (0, _blocks.getBlockFromExample)(blockName, {
-        attributes: example.attributes,
-        innerBlocks: example.innerBlocks
-      });
-    }
-
-    if (block) {
-      return (0, _blocks.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 (0, _element.createElement)(_components.Slot, {
+    name: `BlockStylesPreviewPanel/${scope}`
+  });
 }
 
-function BlockStyles(_ref) {
+function BlockStylesPreviewPanelFill(_ref2) {
+  let {
+    children,
+    scope,
+    ...props
+  } = _ref2;
+  return (0, _element.createElement)(_components.Fill, {
+    name: `BlockStylesPreviewPanel/${scope}`
+  }, (0, _element.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 = _lodash.noop,
     onHoverClassName = _lodash.noop,
-    itemRole
-  } = _ref;
-
-  const selector = select => {
-    const {
-      getBlock
-    } = select(_store.store);
-    const block = getBlock(clientId);
+    scope
+  } = _ref3;
+  const {
+    onSelect,
+    stylesToRender,
+    activeStyle,
+    genericPreviewBlock,
+    className: previewClassName
+  } = (0, _useStylesForBlock.default)({
+    clientId,
+    onSwitch
+  });
+  const [hoveredStyle, setHoveredStyle] = (0, _element.useState)(null);
+  const [containerScrollTop, setContainerScrollTop] = (0, _element.useState)(0);
+  const isMobileViewport = (0, _compose.useViewportMatch)('medium', '<');
+  (0, _element.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 = (0, _lodash.debounce)(setHoveredStyle, 250);
 
-    const blockType = (0, _blocks.getBlockType)(block.name);
-    const {
-      getBlockStyles
-    } = select(_blocks.store);
-    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
-  } = (0, _data.useSelect)(selector, [clientId]);
-  const {
-    updateBlockAttributes
-  } = (0, _data.useDispatch)(_store.store);
-  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 = (0, _lodash.find)(styles, 'isDefault') ? styles : [{
-    name: 'default',
-    label: (0, _i18n._x)('Default', 'block style'),
-    isDefault: true
-  }, ...styles];
-  const activeStyle = (0, _utils.getActiveStyle)(renderedStyles, className);
   return (0, _element.createElement)("div", {
     className: "block-editor-block-styles"
-  }, renderedStyles.map(style => {
-    var _type$example$viewpor, _type$example;
-
-    const styleClassName = (0, _utils.replaceActiveStyle)(className, activeStyle, style);
-    return (0, _element.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,
+  }, (0, _element.createElement)("div", {
+    className: "block-editor-block-styles__variants"
+  }, stylesToRender.map(style => {
+    const buttonText = style.label || style.name;
+    return (0, _element.createElement)(_components.Button, {
+      className: (0, _classnames.default)('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 (_keycodes.ENTER === event.keyCode || _keycodes.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 = (0, _element.useMemo)(() => {
-    return { ...genericPreviewBlock,
-      attributes: { ...genericPreviewBlock.attributes,
-        className: styleClassName
-      }
-    };
-  }, [genericPreviewBlock, styleClassName]);
-  return (0, _element.createElement)("div", {
-    key: style.name,
-    className: (0, _classnames.default)('block-editor-block-styles__item', {
-      'is-active': isActive
-    }),
-    onClick: () => onSelect(),
-    onKeyDown: event => {
-      if (_keycodes.ENTER === event.keyCode || _keycodes.SPACE === event.keyCode) {
-        event.preventDefault();
-        onSelect();
-      }
+      onClick: () => onSelectStylePreview(style),
+      role: "button",
+      tabIndex: "0"
+    }, (0, _element.createElement)(_components.__experimentalText, {
+      as: "span",
+      limit: 12,
+      ellipsizeMode: "tail",
+      className: "block-editor-block-styles__item-text",
+      truncate: true
+    }, buttonText));
+  })), hoveredStyle && !isMobileViewport && (0, _element.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
-  }, (0, _element.createElement)("div", {
-    className: "block-editor-block-styles__item-preview"
-  }, (0, _element.createElement)(_blockPreview.default, {
-    viewportWidth: viewportWidth,
-    blocks: previewBlocks
-  })), (0, _element.createElement)("div", {
-    className: "block-editor-block-styles__item-label"
-  }, style.label || style.name));
+    onMouseLeave: () => styleItemHandler(null)
+  }, (0, _element.createElement)(_previewPanel.default, {
+    activeStyle: activeStyle,
+    className: previewClassName,
+    genericPreviewBlock: genericPreviewBlock,
+    style: hoveredStyle
+  })));
 }
 
+BlockStyles.Slot = BlockStylesPreviewPanelSlot;
 var _default = BlockStyles;
 exports.default = _default;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-styles/index.js"],"names":["EMPTY_OBJECT","useGenericPreviewBlock","block","type","example","blockName","name","attributes","innerBlocks","BlockStyles","clientId","onSwitch","noop","onHoverClassName","itemRole","selector","select","getBlock","blockEditorStore","blockType","getBlockStyles","blocksStore","styles","className","updateBlockAttributes","genericPreviewBlock","length","renderedStyles","label","isDefault","activeStyle","map","style","styleClassName","viewportWidth","BlockStyleItem","isActive","onBlur","onHover","onSelect","previewBlocks","event","ENTER","keyCode","SPACE","preventDefault"],"mappings":";;;;;;;;;AASA;;AANA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AAUA;;AACA;;AACA;;AAzBA;AACA;AACA;;AAIA;AACA;AACA;;AAYA;AACA;AACA;AAKA,MAAMA,YAAY,GAAG,EAArB;;AAEA,SAASC,sBAAT,CAAiCC,KAAjC,EAAwCC,IAAxC,EAA+C;AAC9C,SAAO,sBAAS,MAAM;AACrB,UAAMC,OAAO,GAAGD,IAAH,aAAGA,IAAH,uBAAGA,IAAI,CAAEC,OAAtB;AACA,UAAMC,SAAS,GAAGF,IAAH,aAAGA,IAAH,uBAAGA,IAAI,CAAEG,IAAxB;;AAEA,QAAKF,OAAO,IAAIC,SAAhB,EAA4B;AAC3B,aAAO,iCAAqBA,SAArB,EAAgC;AACtCE,QAAAA,UAAU,EAAEH,OAAO,CAACG,UADkB;AAEtCC,QAAAA,WAAW,EAAEJ,OAAO,CAACI;AAFiB,OAAhC,CAAP;AAIA;;AAED,QAAKN,KAAL,EAAa;AACZ,aAAO,wBAAYA,KAAZ,CAAP;AACA;AACD,GAdM,EAcJ,CAAEC,IAAI,SAAJ,IAAAA,IAAI,WAAJ,IAAAA,IAAI,CAAEC,OAAN,GAAgBF,KAAhB,aAAgBA,KAAhB,uBAAgBA,KAAK,CAAEI,IAAvB,GAA8BJ,KAAhC,EAAuCC,IAAvC,CAdI,CAAP;AAeA;;AAED,SAASM,WAAT,OAKI;AAAA,MALkB;AACrBC,IAAAA,QADqB;AAErBC,IAAAA,QAAQ,GAAGC,YAFU;AAGrBC,IAAAA,gBAAgB,GAAGD,YAHE;AAIrBE,IAAAA;AAJqB,GAKlB;;AACH,QAAMC,QAAQ,GAAKC,MAAF,IAAc;AAC9B,UAAM;AAAEC,MAAAA;AAAF,QAAeD,MAAM,CAAEE,YAAF,CAA3B;AACA,UAAMhB,KAAK,GAAGe,QAAQ,CAAEP,QAAF,CAAtB;;AAEA,QAAK,CAAER,KAAP,EAAe;AACd,aAAOF,YAAP;AACA;;AAED,UAAMmB,SAAS,GAAG,0BAAcjB,KAAK,CAACI,IAApB,CAAlB;AACA,UAAM;AAAEc,MAAAA;AAAF,QAAqBJ,MAAM,CAAEK,aAAF,CAAjC;AACA,WAAO;AACNnB,MAAAA,KADM;AAENC,MAAAA,IAAI,EAAEgB,SAFA;AAGNG,MAAAA,MAAM,EAAEF,cAAc,CAAElB,KAAK,CAACI,IAAR,CAHhB;AAINiB,MAAAA,SAAS,EAAErB,KAAK,CAACK,UAAN,CAAiBgB,SAAjB,IAA8B;AAJnC,KAAP;AAMA,GAhBD;;AAkBA,QAAM;AAAED,IAAAA,MAAF;AAAUpB,IAAAA,KAAV;AAAiBC,IAAAA,IAAjB;AAAuBoB,IAAAA;AAAvB,MAAqC,qBAAWR,QAAX,EAAqB,CAC/DL,QAD+D,CAArB,CAA3C;AAIA,QAAM;AAAEc,IAAAA;AAAF,MAA4B,uBAAaN,YAAb,CAAlC;AACA,QAAMO,mBAAmB,GAAGxB,sBAAsB,CAAEC,KAAF,EAASC,IAAT,CAAlD;;AAEA,MAAK,CAAEmB,MAAF,IAAYA,MAAM,CAACI,MAAP,KAAkB,CAAnC,EAAuC;AACtC,WAAO,IAAP;AACA;;AAED,QAAMC,cAAc,GAAG,kBAAML,MAAN,EAAc,WAAd,IACpBA,MADoB,GAEpB,CACA;AACChB,IAAAA,IAAI,EAAE,SADP;AAECsB,IAAAA,KAAK,EAAE,cAAI,SAAJ,EAAe,aAAf,CAFR;AAGCC,IAAAA,SAAS,EAAE;AAHZ,GADA,EAMA,GAAGP,MANH,CAFH;AAWA,QAAMQ,WAAW,GAAG,2BAAgBH,cAAhB,EAAgCJ,SAAhC,CAApB;AACA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGI,cAAc,CAACI,GAAf,CAAsBC,KAAF,IAAa;AAAA;;AAClC,UAAMC,cAAc,GAAG,+BACtBV,SADsB,EAEtBO,WAFsB,EAGtBE,KAHsB,CAAvB;AAKA,WACC,4BAAC,cAAD;AACC,MAAA,mBAAmB,EAAGP,mBADvB;AAEC,MAAA,aAAa,4CAAGtB,IAAI,CAACC,OAAR,kDAAG,cAAc8B,aAAjB,yEAAkC,GAFhD;AAGC,MAAA,SAAS,EAAGX,SAHb;AAIC,MAAA,QAAQ,EAAGO,WAAW,KAAKE,KAJ5B;AAKC,MAAA,GAAG,EAAGA,KAAK,CAAC1B,IALb;AAMC,MAAA,QAAQ,EAAG,MAAM;AAChBkB,QAAAA,qBAAqB,CAAEd,QAAF,EAAY;AAChCa,UAAAA,SAAS,EAAEU;AADqB,SAAZ,CAArB;AAGApB,QAAAA,gBAAgB,CAAE,IAAF,CAAhB;AACAF,QAAAA,QAAQ;AACR,OAZF;AAaC,MAAA,MAAM,EAAG,MAAME,gBAAgB,CAAE,IAAF,CAbhC;AAcC,MAAA,OAAO,EAAG,MAAMA,gBAAgB,CAAEoB,cAAF,CAdjC;AAeC,MAAA,KAAK,EAAGD,KAfT;AAgBC,MAAA,cAAc,EAAGC,cAhBlB;AAiBC,MAAA,QAAQ,EAAGnB;AAjBZ,MADD;AAqBA,GA3BC,CADH,CADD;AAgCA;;AAED,SAASqB,cAAT,QAUI;AAAA,MAVqB;AACxBV,IAAAA,mBADwB;AAExBS,IAAAA,aAFwB;AAGxBF,IAAAA,KAHwB;AAIxBI,IAAAA,QAJwB;AAKxBC,IAAAA,MALwB;AAMxBC,IAAAA,OANwB;AAOxBC,IAAAA,QAPwB;AAQxBN,IAAAA,cARwB;AASxBnB,IAAAA;AATwB,GAUrB;AACH,QAAM0B,aAAa,GAAG,sBAAS,MAAM;AACpC,WAAO,EACN,GAAGf,mBADG;AAENlB,MAAAA,UAAU,EAAE,EACX,GAAGkB,mBAAmB,CAAClB,UADZ;AAEXgB,QAAAA,SAAS,EAAEU;AAFA;AAFN,KAAP;AAOA,GARqB,EAQnB,CAAER,mBAAF,EAAuBQ,cAAvB,CARmB,CAAtB;AAUA,SACC;AACC,IAAA,GAAG,EAAGD,KAAK,CAAC1B,IADb;AAEC,IAAA,SAAS,EAAG,yBAAY,iCAAZ,EAA+C;AAC1D,mBAAa8B;AAD6C,KAA/C,CAFb;AAKC,IAAA,OAAO,EAAG,MAAMG,QAAQ,EALzB;AAMC,IAAA,SAAS,EAAKE,KAAF,IAAa;AACxB,UAAKC,oBAAUD,KAAK,CAACE,OAAhB,IAA2BC,oBAAUH,KAAK,CAACE,OAAhD,EAA0D;AACzDF,QAAAA,KAAK,CAACI,cAAN;AACAN,QAAAA,QAAQ;AACR;AACD,KAXF;AAYC,IAAA,YAAY,EAAGD,OAZhB;AAaC,IAAA,YAAY,EAAGD,MAbhB;AAcC,IAAA,IAAI,EAAGvB,QAAQ,IAAI,QAdpB;AAeC,IAAA,QAAQ,EAAC,GAfV;AAgBC,kBAAakB,KAAK,CAACJ,KAAN,IAAeI,KAAK,CAAC1B;AAhBnC,KAkBC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,qBAAD;AACC,IAAA,aAAa,EAAG4B,aADjB;AAEC,IAAA,MAAM,EAAGM;AAFV,IADD,CAlBD,EAwBC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGR,KAAK,CAACJ,KAAN,IAAeI,KAAK,CAAC1B,IADxB,CAxBD,CADD;AA8BA;;eAEcG,W","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":["BlockStylesPreviewPanelSlot","scope","BlockStylesPreviewPanelFill","children","props","DEFAULT_POSITION_TOP","BlockStyles","clientId","onSwitch","noop","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","ENTER","keyCode","SPACE","preventDefault","top","Slot"],"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/components/block-styles/menu-items.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BlockStylesMenuItems;
+
+var _element = require("@wordpress/element");
+
+var _lodash = require("lodash");
+
+var _components = require("@wordpress/components");
+
+var _icons = require("@wordpress/icons");
+
+var _useStylesForBlock = _interopRequireDefault(require("./use-styles-for-block"));
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function BlockStylesMenuItems(_ref) {
+  let {
+    clientId,
+    onSwitch = _lodash.noop
+  } = _ref;
+  const {
+    onSelect,
+    stylesToRender,
+    activeStyle
+  } = (0, _useStylesForBlock.default)({
+    clientId,
+    onSwitch
+  });
+
+  if (!stylesToRender || stylesToRender.length === 0) {
+    return null;
+  }
+
+  return (0, _element.createElement)(_element.Fragment, null, stylesToRender.map(style => {
+    const menuItemText = style.label || style.name;
+    return (0, _element.createElement)(_components.MenuItem, {
+      key: style.name,
+      icon: activeStyle.name === style.name ? _icons.check : null,
+      onClick: () => onSelect(style)
+    }, (0, _element.createElement)(_components.__experimentalText, {
+      as: "span",
+      limit: 18,
+      ellipsizeMode: "tail",
+      truncate: true
+    }, menuItemText));
+  }));
+}
+//# sourceMappingURL=menu-items.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-styles/menu-items.js"],"names":["BlockStylesMenuItems","clientId","onSwitch","noop","onSelect","stylesToRender","activeStyle","length","map","style","menuItemText","label","name","check"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAGe,SAASA,oBAAT,OAA+D;AAAA,MAAhC;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,QAAQ,GAAGC;AAAvB,GAAgC;AAC7E,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,cAAZ;AAA4BC,IAAAA;AAA5B,MAA4C,gCAAoB;AACrEL,IAAAA,QADqE;AAErEC,IAAAA;AAFqE,GAApB,CAAlD;;AAKA,MAAK,CAAEG,cAAF,IAAoBA,cAAc,CAACE,MAAf,KAA0B,CAAnD,EAAuD;AACtD,WAAO,IAAP;AACA;;AACD,SACC,qDACGF,cAAc,CAACG,GAAf,CAAsBC,KAAF,IAAa;AAClC,UAAMC,YAAY,GAAGD,KAAK,CAACE,KAAN,IAAeF,KAAK,CAACG,IAA1C;AACA,WACC,4BAAC,oBAAD;AACC,MAAA,GAAG,EAAGH,KAAK,CAACG,IADb;AAEC,MAAA,IAAI,EAAGN,WAAW,CAACM,IAAZ,KAAqBH,KAAK,CAACG,IAA3B,GAAkCC,YAAlC,GAA0C,IAFlD;AAGC,MAAA,OAAO,EAAG,MAAMT,QAAQ,CAAEK,KAAF;AAHzB,OAKC,4BAAC,8BAAD;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/components/block-styles/preview-panel.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BlockStylesPreviewPanel;
+
+var _element = require("@wordpress/element");
+
+var _previewPanel = _interopRequireDefault(require("../inserter/preview-panel"));
+
+var _utils = require("./utils");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function BlockStylesPreviewPanel(_ref) {
+  let {
+    genericPreviewBlock,
+    style,
+    className,
+    activeStyle
+  } = _ref;
+  const styleClassName = (0, _utils.replaceActiveStyle)(className, activeStyle, style);
+  const previewBlocks = (0, _element.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 (0, _element.createElement)(_previewPanel.default, {
+    item: previewBlocks,
+    isStylePreview: true
+  });
+}
+//# sourceMappingURL=preview-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-styles/preview-panel.js"],"names":["BlockStylesPreviewPanel","genericPreviewBlock","style","className","activeStyle","styleClassName","previewBlocks","title","label","name","description","initialAttributes","attributes"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIe,SAASA,uBAAT,OAKX;AAAA,MAL6C;AAChDC,IAAAA,mBADgD;AAEhDC,IAAAA,KAFgD;AAGhDC,IAAAA,SAHgD;AAIhDC,IAAAA;AAJgD,GAK7C;AACH,QAAMC,cAAc,GAAG,+BAAoBF,SAApB,EAA+BC,WAA/B,EAA4CF,KAA5C,CAAvB;AACA,QAAMI,aAAa,GAAG,sBAAS,MAAM;AACpC,WAAO,EACN,GAAGL,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,GAZqB,EAYnB,CAAEJ,mBAAF,EAAuBI,cAAvB,CAZmB,CAAtB;AAcA,SACC,4BAAC,qBAAD;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/components/block-styles/use-styles-for-block.js

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useStylesForBlocks;
+
+var _data = require("@wordpress/data");
+
+var _blocks = require("@wordpress/blocks");
+
+var _element = require("@wordpress/element");
+
+var _utils = require("./utils");
+
+var _store = require("../../store");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ *
+ * @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 (0, _element.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 (0, _blocks.getBlockFromExample)(blockName, {
+        attributes: example.attributes,
+        innerBlocks: example.innerBlocks
+      });
+    }
+
+    if (block) {
+      return (0, _blocks.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.
+ */
+
+
+function useStylesForBlocks(_ref) {
+  let {
+    clientId,
+    onSwitch
+  } = _ref;
+
+  const selector = select => {
+    const {
+      getBlock
+    } = select(_store.store);
+    const block = getBlock(clientId);
+
+    if (!block) {
+      return {};
+    }
+
+    const blockType = (0, _blocks.getBlockType)(block.name);
+    const {
+      getBlockStyles
+    } = select(_blocks.store);
+    return {
+      block,
+      blockType,
+      styles: getBlockStyles(block.name),
+      className: block.attributes.className || ''
+    };
+  };
+
+  const {
+    styles,
+    block,
+    blockType,
+    className
+  } = (0, _data.useSelect)(selector, [clientId]);
+  const {
+    updateBlockAttributes
+  } = (0, _data.useDispatch)(_store.store);
+  const stylesToRender = (0, _utils.getRenderedStyles)(styles);
+  const activeStyle = (0, _utils.getActiveStyle)(stylesToRender, className);
+  const genericPreviewBlock = useGenericPreviewBlock(block, blockType);
+
+  const onSelect = style => {
+    const styleClassName = (0, _utils.replaceActiveStyle)(className, activeStyle, style);
+    updateBlockAttributes(clientId, {
+      className: styleClassName
+    });
+    onSwitch();
+  };
+
+  return {
+    onSelect,
+    stylesToRender,
+    activeStyle,
+    genericPreviewBlock,
+    className
+  };
+}
+//# sourceMappingURL=use-styles-for-block.js.map

package/build/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":["useGenericPreviewBlock","block","type","example","blockName","name","attributes","innerBlocks","useStylesForBlocks","clientId","onSwitch","selector","select","getBlock","blockEditorStore","blockType","getBlockStyles","blocksStore","styles","className","updateBlockAttributes","stylesToRender","activeStyle","genericPreviewBlock","onSelect","style","styleClassName"],"mappings":";;;;;;;AAGA;;AACA;;AAMA;;AAKA;;AACA;;AAhBA;AACA;AACA;;AAUA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,sBAAT,CAAiCC,KAAjC,EAAwCC,IAAxC,EAA+C;AAC9C,SAAO,sBAAS,MAAM;AACrB,UAAMC,OAAO,GAAGD,IAAH,aAAGA,IAAH,uBAAGA,IAAI,CAAEC,OAAtB;AACA,UAAMC,SAAS,GAAGF,IAAH,aAAGA,IAAH,uBAAGA,IAAI,CAAEG,IAAxB;;AAEA,QAAKF,OAAO,IAAIC,SAAhB,EAA4B;AAC3B,aAAO,iCAAqBA,SAArB,EAAgC;AACtCE,QAAAA,UAAU,EAAEH,OAAO,CAACG,UADkB;AAEtCC,QAAAA,WAAW,EAAEJ,OAAO,CAACI;AAFiB,OAAhC,CAAP;AAIA;;AAED,QAAKN,KAAL,EAAa;AACZ,aAAO,wBAAYA,KAAZ,CAAP;AACA;AACD,GAdM,EAcJ,CAAEC,IAAI,SAAJ,IAAAA,IAAI,WAAJ,IAAAA,IAAI,CAAEC,OAAN,GAAgBF,KAAhB,aAAgBA,KAAhB,uBAAgBA,KAAK,CAAEI,IAAvB,GAA8BJ,KAAhC,EAAuCC,IAAvC,CAdI,CAAP;AAeA;AAED;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;;AACe,SAASM,kBAAT,OAAsD;AAAA,MAAzB;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAyB;;AACpE,QAAMC,QAAQ,GAAKC,MAAF,IAAc;AAC9B,UAAM;AAAEC,MAAAA;AAAF,QAAeD,MAAM,CAAEE,YAAF,CAA3B;AACA,UAAMb,KAAK,GAAGY,QAAQ,CAAEJ,QAAF,CAAtB;;AAEA,QAAK,CAAER,KAAP,EAAe;AACd,aAAO,EAAP;AACA;;AACD,UAAMc,SAAS,GAAG,0BAAcd,KAAK,CAACI,IAApB,CAAlB;AACA,UAAM;AAAEW,MAAAA;AAAF,QAAqBJ,MAAM,CAAEK,aAAF,CAAjC;AAEA,WAAO;AACNhB,MAAAA,KADM;AAENc,MAAAA,SAFM;AAGNG,MAAAA,MAAM,EAAEF,cAAc,CAAEf,KAAK,CAACI,IAAR,CAHhB;AAINc,MAAAA,SAAS,EAAElB,KAAK,CAACK,UAAN,CAAiBa,SAAjB,IAA8B;AAJnC,KAAP;AAMA,GAhBD;;AAiBA,QAAM;AAAED,IAAAA,MAAF;AAAUjB,IAAAA,KAAV;AAAiBc,IAAAA,SAAjB;AAA4BI,IAAAA;AAA5B,MAA0C,qBAAWR,QAAX,EAAqB,CACpEF,QADoE,CAArB,CAAhD;AAGA,QAAM;AAAEW,IAAAA;AAAF,MAA4B,uBAAaN,YAAb,CAAlC;AACA,QAAMO,cAAc,GAAG,8BAAmBH,MAAnB,CAAvB;AACA,QAAMI,WAAW,GAAG,2BAAgBD,cAAhB,EAAgCF,SAAhC,CAApB;AACA,QAAMI,mBAAmB,GAAGvB,sBAAsB,CAAEC,KAAF,EAASc,SAAT,CAAlD;;AAEA,QAAMS,QAAQ,GAAKC,KAAF,IAAa;AAC7B,UAAMC,cAAc,GAAG,+BACtBP,SADsB,EAEtBG,WAFsB,EAGtBG,KAHsB,CAAvB;AAKAL,IAAAA,qBAAqB,CAAEX,QAAF,EAAY;AAChCU,MAAAA,SAAS,EAAEO;AADqB,KAAZ,CAArB;AAGAhB,IAAAA,QAAQ;AACR,GAVD;;AAYA,SAAO;AACNc,IAAAA,QADM;AAENH,IAAAA,cAFM;AAGNC,IAAAA,WAHM;AAINC,IAAAA,mBAJM;AAKNJ,IAAAA;AALM,GAAP;AAOA","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"]}