@wordpress/block-editor 15.13.2-next.v.202602271551.0 → 15.14.0

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

@@ -6,12 +6,11 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
-import { debounce, useViewportMatch } from '@wordpress/compose';
+import { useState, useMemo } from '@wordpress/element';
+import { debounce } from '@wordpress/compose';
 import {
 	Button,
 	__experimentalTruncate as Truncate,
-	Popover,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
@@ -20,10 +19,10 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import BlockStylesPreviewPanel from './preview-panel';
+import PreviewBlockPopover from '../block-switcher/preview-block-popover';
 import useStylesForBlocks from './use-styles-for-block';
 import { useToolsPanelDropdownMenuProps } from '../global-styles/utils';
-import { getDefaultStyle } from './utils';
+import { getDefaultStyle, replaceActiveStyle } from './utils';
 
 const noop = () => {};
 
@@ -34,15 +33,35 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 		stylesToRender,
 		activeStyle,
 		genericPreviewBlock,
-		className: previewClassName,
+		className,
 	} = useStylesForBlocks( {
 		clientId,
 		onSwitch,
 	} );
 	const [ hoveredStyle, setHoveredStyle ] = useState( null );
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const [ blockStylesAnchor, setBlockStylesAnchor ] = useState( null );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
+	const previewBlocks = useMemo( () => {
+		if ( ! hoveredStyle || ! genericPreviewBlock ) {
+			return null;
+		}
+		const previewClassName = replaceActiveStyle(
+			className,
+			activeStyle,
+			hoveredStyle
+		);
+		return [
+			{
+				...genericPreviewBlock,
+				attributes: {
+					...( genericPreviewBlock.attributes || {} ),
+					className: previewClassName,
+				},
+			},
+		];
+	}, [ hoveredStyle, genericPreviewBlock, className, activeStyle ] );
+
 	if ( ! stylesToRender || stylesToRender.length === 0 ) {
 		return null;
 	}
@@ -90,7 +109,10 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 				isShownByDefault
 				panelId={ clientId }
 			>
-				<div className="block-editor-block-styles">
+				<div
+					ref={ setBlockStylesAnchor }
+					className="block-editor-block-styles"
+				>
 					<div className="block-editor-block-styles__variants">
 						{ stylesToRender.map( ( style ) => {
 							const buttonText = style.label || style.name;
@@ -133,24 +155,13 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 							);
 						} ) }
 					</div>
-					{ hoveredStyle && ! isMobileViewport && (
-						<Popover
+					{ previewBlocks && (
+						<PreviewBlockPopover
+							blocks={ previewBlocks }
 							placement="left-start"
 							offset={ 34 }
-							focusOnMount={ false }
-						>
-							<div
-								className="block-editor-block-styles__preview-panel"
-								onMouseLeave={ () => styleItemHandler( null ) }
-							>
-								<BlockStylesPreviewPanel
-									activeStyle={ activeStyle }
-									className={ previewClassName }
-									genericPreviewBlock={ genericPreviewBlock }
-									style={ hoveredStyle }
-								/>
-							</div>
-						</Popover>
+							anchor={ blockStylesAnchor }
+						/>
 					) }
 				</div>
 			</ToolsPanelItem>

package/src/components/block-styles/style.scss

@@ -67,10 +67,3 @@
 	}
 }
 
-// To prevent overflow in the preview container,
-// ensure that block contents' margin and padding
-// do not add to the block container's width.
-.block-editor-block-styles__block-preview-container,
-.block-editor-block-styles__block-preview-container * {
-	box-sizing: border-box !important;
-}

package/src/components/block-switcher/preview-block-popover.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { Popover } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 
@@ -10,7 +9,12 @@ import { useViewportMatch } from '@wordpress/compose';
  */
 import BlockPreview from '../block-preview';
 
-export default function PreviewBlockPopover( { blocks } ) {
+export default function PreviewBlockPopover( {
+	blocks,
+	placement = 'right-start',
+	offset = 16,
+	anchor,
+} ) {
 	const isMobile = useViewportMatch( 'medium', '<' );
 
 	if ( isMobile ) {
@@ -21,14 +25,12 @@ export default function PreviewBlockPopover( { blocks } ) {
 		<div className="block-editor-block-switcher__popover-preview-container">
 			<Popover
 				className="block-editor-block-switcher__popover-preview"
-				placement="right-start"
+				placement={ placement }
 				focusOnMount={ false }
-				offset={ 16 }
+				offset={ offset }
+				anchor={ anchor }
 			>
 				<div className="block-editor-block-switcher__preview">
-					<div className="block-editor-block-switcher__preview-title">
-						{ __( 'Preview' ) }
-					</div>
 					{ /* 600px is the value of $break-small in base-styles/_breakpoints.scss.
 						We set the viewport width to 601px to make sure that the media-text 
 						block which uses this breakpoint has the correct padding. */ }

package/src/components/block-switcher/style.scss

@@ -41,14 +41,6 @@
 	}
 }
 
-.block-editor-block-switcher__preview-title {
-	margin-bottom: $grid-unit-15;
-	color: $gray-700;
-	text-transform: uppercase;
-	font-size: 11px;
-	font-weight: $font-weight-medium;
-}
-
 .block-editor-block-switcher__preview-patterns-container {
 	padding-bottom: $grid-unit-20;
 

package/src/components/block-toolbar/block-toolbar-icon.js

@@ -71,7 +71,12 @@ function getBlockIconVariant( { select, clientIds } ) {
 
 	if ( _showBlockSwitcher ) {
 		return 'switcher';
-	} else if ( isContentOnlyMode && hasBlockStyles && ! hasPatternOverrides ) {
+	} else if (
+		isContentOnlyMode &&
+		hasBlockStyles &&
+		! hasPatternOverrides &&
+		canEdit
+	) {
 		return 'styles-only';
 	} else if ( _showPatternOverrides ) {
 		return 'pattern-overrides';

package/src/components/block-toolbar/index.js

@@ -78,7 +78,9 @@ export function PrivateBlockToolbar( {
 		showBlockVisibilityButton,
 		showSwitchSectionStyleButton,
 		areSelectedBlocksHiddenOnViewport,
+		canEdit,
 	} = useSelect( ( select ) => {
+		const { canEditBlock } = select( blockEditorStore );
 		const {
 			getBlockName,
 			getBlockMode,
@@ -122,7 +124,9 @@ export function PrivateBlockToolbar( {
 
 		const _isZoomOut = isZoomOut();
 		const _isSectionBlock = isSectionBlock( selectedBlockClientId );
-		const _showSwitchSectionStyleButton = _isZoomOut || _isSectionBlock;
+		const _canEditBlock = canEditBlock( selectedBlockClientId );
+		const _showSwitchSectionStyleButton =
+			_canEditBlock && ( _isZoomOut || _isSectionBlock );
 
 		const _currentDeviceType =
 			getSettings()?.[ deviceTypeKey ]?.toLowerCase() || 'desktop';
@@ -161,6 +165,7 @@ export function PrivateBlockToolbar( {
 			showSwitchSectionStyleButton: _showSwitchSectionStyleButton,
 			areSelectedBlocksHiddenOnViewport:
 				_areSelectedBlocksHiddenOnViewport,
+			canEdit: _canEditBlock,
 		};
 	}, [] );
 
@@ -245,7 +250,7 @@ export function PrivateBlockToolbar( {
 					shouldShowVisualToolbar &&
 					isMultiToolbar &&
 					showGroupButtons && <BlockGroupToolbar /> }
-				{ ! isMultiToolbar && (
+				{ ! isMultiToolbar && canEdit && (
 					<EditSectionButton clientId={ blockClientIds[ 0 ] } />
 				) }
 				{ ! areSelectedBlocksHiddenOnViewport && showShuffleButton && (

package/src/components/block-tools/style.scss

@@ -76,20 +76,7 @@
 .block-editor-block-list__empty-block-inserter,
 .block-editor-block-list__insertion-point-inserter {
 	.block-editor-inserter__toggle.components-button.has-icon {
-		// Basic look
-		background: $gray-900;
-		color: $white;
-		padding: 0;
-
-		// TODO: Consider passing size="small" to the Inserter toggle instead.
-		// Special dimensions for this button.
-		min-width: $button-size-small;
-		height: $button-size-small;
-
-		&:hover {
-			color: $white;
-			background: var(--wp-admin-theme-color);
-		}
+		@include inserter-toggle;
 	}
 }
 

package/src/components/default-block-appender/content.scss

@@ -1,4 +1,5 @@
 @use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/mixins" as *;
 @use "@wordpress/base-styles/variables" as *;
 @use "@wordpress/base-styles/z-index" as *;
 
@@ -41,20 +42,7 @@
 	}
 
 	.block-editor-inserter__toggle.components-button.has-icon {
-		// Basic look
-		background: $gray-900;
-		color: $white;
-		padding: 0;
-
-		// TODO: Consider passing size="small" to the Inserter toggle instead.
-		// Special dimensions for this button.
-		min-width: $button-size-small;
-		height: $button-size-small;
-
-		&:hover {
-			color: $white;
-			background: var(--wp-admin-theme-color);
-		}
+		@include inserter-toggle;
 	}
 }
 
@@ -103,26 +91,16 @@
 	// treating them the same, one or both can be retired.
 	.block-editor-inserter__toggle.components-button.has-icon,
 	.block-list-appender__toggle {
+		@include inserter-toggle;
 		flex-direction: row;
 		box-shadow: none;
-		height: $button-size-small;
 		width: $button-size-small;
-		min-width: $button-size-small;
 
 		// Hide by default, then we unhide it when the selected block is a direct ancestor.
 		display: none;
 
 		// Important to override styles form Button component.
 		padding: 0 !important;
-
-		// Basic look
-		background: $gray-900;
-		color: $white;
-
-		&:hover {
-			color: $white;
-			background: var(--wp-admin-theme-color);
-		}
 	}
 
 	// This content only shows up inside the empty appender.

package/src/components/dimension-control/index.js

@@ -55,9 +55,10 @@ function useDimensionSizes( presets ) {
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/dimension-control/README.md
  *
  * @param {Object}                     props
- * @param {?string}                    props.label    A label for the control.
- * @param {( value: string ) => void } props.onChange Called when the dimension value changes.
- * @param {string}                     props.value    The current dimension value.
+ * @param {?string}                    props.label          A label for the control.
+ * @param {( value: string ) => void } props.onChange       Called when the dimension value changes.
+ * @param {string}                     props.value          The current dimension value.
+ * @param {?Object}                    props.dimensionSizes Optional dimension size presets. Falls back to settings from the store.
  *
  * @return {Component} The component to be rendered.
  */
@@ -65,11 +66,13 @@ export default function DimensionControl( {
 	label = __( 'Dimension' ),
 	onChange,
 	value,
+	dimensionSizes: dimensionSizesProp,
 } ) {
-	const [ dimensionSizes, availableUnits ] = useSettings(
+	const [ dimensionSizesFromSettings, availableUnits ] = useSettings(
 		'dimensions.dimensionSizes',
 		'spacing.units'
 	);
+	const dimensionSizes = dimensionSizesProp ?? dimensionSizesFromSettings;
 
 	const units = useCustomUnits( {
 		availableUnits: availableUnits || [

package/src/components/global-styles/dimensions-panel.js

@@ -735,6 +735,7 @@ export default function DimensionsPanel( {
 						label={ __( 'Minimum height' ) }
 						value={ minHeightValue }
 						onChange={ setMinHeightValue }
+						dimensionSizes={ dimensions?.dimensionSizes }
 					/>
 				</ToolsPanelItem>
 			) }
@@ -752,6 +753,7 @@ export default function DimensionsPanel( {
 						label={ __( 'Height' ) }
 						value={ heightValue }
 						onChange={ setHeightValue }
+						dimensionSizes={ dimensions?.dimensionSizes }
 					/>
 				</ToolsPanelItem>
 			) }
@@ -769,6 +771,7 @@ export default function DimensionsPanel( {
 						label={ __( 'Width' ) }
 						value={ widthValue }
 						onChange={ setWidthValue }
+						dimensionSizes={ dimensions?.dimensionSizes }
 					/>
 				</ToolsPanelItem>
 			) }

package/src/hooks/auto-inspector-controls.js

@@ -1,11 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { getBlockType } from '@wordpress/blocks';
+import { getBlockType, store as blocksStore } from '@wordpress/blocks';
 import { PanelBody } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { DataForm } from '@wordpress/dataviews';
-import { useMemo } from '@wordpress/element';
+import { useContext, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -14,6 +14,8 @@ import { __ } from '@wordpress/i18n';
 import InspectorControls from '../components/inspector-controls';
 import { useBlockEditingMode } from '../components/block-editing-mode';
 import { store as blockEditorStore } from '../store';
+import { unlock } from '../lock-unlock';
+import BlockContext from '../components/block-context';
 import { generateFieldsFromAttributes } from './generate-fields-from-attributes';
 
 /**
@@ -45,9 +47,34 @@ function hasAutoGenerateControl( blockTypeAttributes ) {
 function AutoRegisterControls( { name, clientId, setAttributes } ) {
 	const blockEditingMode = useBlockEditingMode();
 
+	const blockContext = useContext( BlockContext );
+
 	const attributes = useSelect(
-		( select ) => select( blockEditorStore ).getBlockAttributes( clientId ),
-		[ clientId ]
+		( select ) => {
+			const _attributes =
+				select( blockEditorStore ).getBlockAttributes( clientId );
+			if ( ! _attributes?.metadata?.bindings ) {
+				return _attributes;
+			}
+
+			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
+			return Object.entries( _attributes.metadata.bindings ).reduce(
+				( acc, [ attribute, binding ] ) => {
+					const source = getBlockBindingsSource( binding.source );
+					if ( ! source ) {
+						return acc;
+					}
+					const values = source.getValues( {
+						select,
+						context: blockContext,
+						bindings: { [ attribute ]: binding },
+					} );
+					return { ...acc, ...values };
+				},
+				_attributes
+			);
+		},
+		[ blockContext, clientId ]
 	);
 
 	const blockType = getBlockType( name );

package/src/hooks/test/dimensions.js

@@ -93,4 +93,20 @@ describe( 'getDimensionsClassesAndStyles', () => {
 			},
 		} );
 	} );
+
+	it( 'should convert preset width value to CSS var', () => {
+		const attributes = {
+			style: {
+				dimensions: {
+					width: 'var:preset|dimension|custom-width',
+				},
+			},
+		};
+		expect( getDimensionsClassesAndStyles( attributes ) ).toEqual( {
+			className: undefined,
+			style: {
+				width: 'var(--wp--preset--dimension--custom-width)',
+			},
+		} );
+	} );
 } );

package/src/index.js

@@ -11,6 +11,7 @@ export {
 	useColorProps as __experimentalUseColorProps,
 	useCustomSides as __experimentalUseCustomSides,
 	getSpacingClassesAndStyles as __experimentalGetSpacingClassesAndStyles,
+	getDimensionsClassesAndStyles as __experimentalGetDimensionsClassesAndStyles,
 	getGapCSSValue as __experimentalGetGapCSSValue,
 	getShadowClassesAndStyles as __experimentalGetShadowClassesAndStyles,
 	useCachedTruthy,

package/build/components/block-styles/preview-panel.cjs

@@ -1,61 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// packages/block-editor/src/components/block-styles/preview-panel.js
-var preview_panel_exports = {};
-__export(preview_panel_exports, {
-  default: () => BlockStylesPreviewPanel
-});
-module.exports = __toCommonJS(preview_panel_exports);
-var import_element = require("@wordpress/element");
-var import_preview_panel = __toESM(require("../inserter/preview-panel.cjs"));
-var import_utils = require("./utils.cjs");
-var import_jsx_runtime = require("react/jsx-runtime");
-function BlockStylesPreviewPanel({
-  genericPreviewBlock,
-  style,
-  className,
-  activeStyle
-}) {
-  const styleClassName = (0, import_utils.replaceActiveStyle)(className, activeStyle, style);
-  const previewBlocks = (0, import_element.useMemo)(() => {
-    return {
-      name: genericPreviewBlock.name,
-      title: style.label || style.name,
-      description: style.description,
-      initialAttributes: {
-        ...genericPreviewBlock.attributes,
-        className: styleClassName + " block-editor-block-styles__block-preview-container"
-      },
-      example: genericPreviewBlock
-    };
-  }, [genericPreviewBlock, style, styleClassName]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_preview_panel.default, { item: previewBlocks });
-}
-//# sourceMappingURL=preview-panel.cjs.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/block-styles/preview-panel.js"],
-  "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\tname: genericPreviewBlock.name,\n\t\t\ttitle: style.label || style.name,\n\t\t\tdescription: style.description,\n\t\t\tinitialAttributes: {\n\t\t\t\t...genericPreviewBlock.attributes,\n\t\t\t\tclassName:\n\t\t\t\t\tstyleClassName +\n\t\t\t\t\t' block-editor-block-styles__block-preview-container',\n\t\t\t},\n\t\t\texample: genericPreviewBlock,\n\t\t};\n\t}, [ genericPreviewBlock, style, styleClassName ] );\n\n\treturn <InserterPreviewPanel item={ previewBlocks } />;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAwB;AAKxB,2BAAiC;AACjC,mBAAmC;AAwB3B;AAtBO,SAAR,wBAA0C;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,qBAAiB,iCAAoB,WAAW,aAAa,KAAM;AACzE,QAAM,oBAAgB,wBAAS,MAAM;AACpC,WAAO;AAAA,MACN,MAAM,oBAAoB;AAAA,MAC1B,OAAO,MAAM,SAAS,MAAM;AAAA,MAC5B,aAAa,MAAM;AAAA,MACnB,mBAAmB;AAAA,QAClB,GAAG,oBAAoB;AAAA,QACvB,WACC,iBACA;AAAA,MACF;AAAA,MACA,SAAS;AAAA,IACV;AAAA,EACD,GAAG,CAAE,qBAAqB,OAAO,cAAe,CAAE;AAElD,SAAO,4CAAC,qBAAAA,SAAA,EAAqB,MAAO,eAAgB;AACrD;",
-  "names": ["InserterPreviewPanel"]
-}

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

@@ -1,30 +0,0 @@
-// packages/block-editor/src/components/block-styles/preview-panel.js
-import { useMemo } from "@wordpress/element";
-import InserterPreviewPanel from "../inserter/preview-panel.mjs";
-import { replaceActiveStyle } from "./utils.mjs";
-import { jsx } from "react/jsx-runtime";
-function BlockStylesPreviewPanel({
-  genericPreviewBlock,
-  style,
-  className,
-  activeStyle
-}) {
-  const styleClassName = replaceActiveStyle(className, activeStyle, style);
-  const previewBlocks = useMemo(() => {
-    return {
-      name: genericPreviewBlock.name,
-      title: style.label || style.name,
-      description: style.description,
-      initialAttributes: {
-        ...genericPreviewBlock.attributes,
-        className: styleClassName + " block-editor-block-styles__block-preview-container"
-      },
-      example: genericPreviewBlock
-    };
-  }, [genericPreviewBlock, style, styleClassName]);
-  return /* @__PURE__ */ jsx(InserterPreviewPanel, { item: previewBlocks });
-}
-export {
-  BlockStylesPreviewPanel as default
-};
-//# sourceMappingURL=preview-panel.mjs.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/block-styles/preview-panel.js"],
-  "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\tname: genericPreviewBlock.name,\n\t\t\ttitle: style.label || style.name,\n\t\t\tdescription: style.description,\n\t\t\tinitialAttributes: {\n\t\t\t\t...genericPreviewBlock.attributes,\n\t\t\t\tclassName:\n\t\t\t\t\tstyleClassName +\n\t\t\t\t\t' block-editor-block-styles__block-preview-container',\n\t\t\t},\n\t\t\texample: genericPreviewBlock,\n\t\t};\n\t}, [ genericPreviewBlock, style, styleClassName ] );\n\n\treturn <InserterPreviewPanel item={ previewBlocks } />;\n}\n"],
-  "mappings": ";AAGA,SAAS,eAAe;AAKxB,OAAO,0BAA0B;AACjC,SAAS,0BAA0B;AAwB3B;AAtBO,SAAR,wBAA0C;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,iBAAiB,mBAAoB,WAAW,aAAa,KAAM;AACzE,QAAM,gBAAgB,QAAS,MAAM;AACpC,WAAO;AAAA,MACN,MAAM,oBAAoB;AAAA,MAC1B,OAAO,MAAM,SAAS,MAAM;AAAA,MAC5B,aAAa,MAAM;AAAA,MACnB,mBAAmB;AAAA,QAClB,GAAG,oBAAoB;AAAA,QACvB,WACC,iBACA;AAAA,MACF;AAAA,MACA,SAAS;AAAA,IACV;AAAA,EACD,GAAG,CAAE,qBAAqB,OAAO,cAAe,CAAE;AAElD,SAAO,oBAAC,wBAAqB,MAAO,eAAgB;AACrD;",
-  "names": []
-}

package/src/components/block-styles/preview-panel.js

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