@wordpress/block-editor/build/components/block-styles/index.cjs.map

Generic block editor.

{
  "version": 3,
  "sources": ["../../../src/components/block-styles/index.js"],
  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { debounce, useViewportMatch } from '@wordpress/compose';\nimport {\n\tButton,\n\t__experimentalTruncate as Truncate,\n\tPopover,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BlockStylesPreviewPanel from './preview-panel';\nimport useStylesForBlocks from './use-styles-for-block';\nimport { useToolsPanelDropdownMenuProps } from '../global-styles/utils';\nimport { getDefaultStyle } from './utils';\n\nconst noop = () => {};\n\n// Block Styles component for the Settings Sidebar.\nfunction BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {\n\tconst {\n\t\tonSelect,\n\t\tstylesToRender,\n\t\tactiveStyle,\n\t\tgenericPreviewBlock,\n\t\tclassName: previewClassName,\n\t} = useStylesForBlocks( {\n\t\tclientId,\n\t\tonSwitch,\n\t} );\n\tconst [ hoveredStyle, setHoveredStyle ] = useState( null );\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\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\tconst defaultStyle = getDefaultStyle( stylesToRender );\n\n\tconst hasValue = () => {\n\t\treturn activeStyle?.name !== defaultStyle?.name;\n\t};\n\n\tconst onDeselect = () => {\n\t\tonSelectStylePreview( defaultStyle );\n\t};\n\n\treturn (\n\t\t<ToolsPanel\n\t\t\tlabel={ __( 'Styles' ) }\n\t\t\tresetAll={ onDeselect }\n\t\t\tpanelId={ clientId }\n\t\t\thasInnerWrapper\n\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t>\n\t\t\t<ToolsPanelItem\n\t\t\t\thasValue={ hasValue }\n\t\t\t\tlabel={ __( 'Variation' ) }\n\t\t\t\tonDeselect={ onDeselect }\n\t\t\t\tisShownByDefault\n\t\t\t\tpanelId={ clientId }\n\t\t\t>\n\t\t\t\t<div className=\"block-editor-block-styles\">\n\t\t\t\t\t<div className=\"block-editor-block-styles__variants\">\n\t\t\t\t\t\t{ stylesToRender.map( ( style ) => {\n\t\t\t\t\t\t\tconst buttonText = style.label || style.name;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t'block-editor-block-styles__item',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'is-active':\n\t\t\t\t\t\t\t\t\t\t\t\tactiveStyle.name === style.name,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tkey={ style.name }\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\tlabel={ buttonText }\n\t\t\t\t\t\t\t\t\tonMouseEnter={ () =>\n\t\t\t\t\t\t\t\t\t\tstyleItemHandler( style )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonFocus={ () => styleItemHandler( style ) }\n\t\t\t\t\t\t\t\t\tonMouseLeave={ () =>\n\t\t\t\t\t\t\t\t\t\tstyleItemHandler( null )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonBlur={ () => styleItemHandler( null ) }\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\tonSelectStylePreview( style )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\taria-current={\n\t\t\t\t\t\t\t\t\t\tactiveStyle.name === style.name\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\t\tnumberOfLines={ 1 }\n\t\t\t\t\t\t\t\t\t\tclassName=\"block-editor-block-styles__item-text\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ buttonText }\n\t\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</div>\n\t\t\t\t\t{ hoveredStyle && ! isMobileViewport && (\n\t\t\t\t\t\t<Popover\n\t\t\t\t\t\t\tplacement=\"left-start\"\n\t\t\t\t\t\t\toffset={ 34 }\n\t\t\t\t\t\t\tfocusOnMount={ false }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"block-editor-block-styles__preview-panel\"\n\t\t\t\t\t\t\t\tonMouseLeave={ () => styleItemHandler( null ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<BlockStylesPreviewPanel\n\t\t\t\t\t\t\t\t\tactiveStyle={ activeStyle }\n\t\t\t\t\t\t\t\t\tclassName={ previewClassName }\n\t\t\t\t\t\t\t\t\tgenericPreviewBlock={ genericPreviewBlock }\n\t\t\t\t\t\t\t\t\tstyle={ hoveredStyle }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</Popover>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</ToolsPanelItem>\n\t\t</ToolsPanel>\n\t);\n}\n\nexport default BlockStyles;\n"],
  "mappings": "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",
  "names": ["import_utils", "useStylesForBlocks", "ToolsPanel", "ToolsPanelItem", "clsx", "Truncate", "BlockStylesPreviewPanel"]
}