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

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/components/grid/grid-visualizer.js

@@ -82,6 +82,9 @@ const GridVisualizerGrid = forwardRef(
 			borderBoxSpy.observe( gridElement, { box: 'border-box' } );
 			const contentBoxSpy = new window.ResizeObserver( resizeCallback );
 			contentBoxSpy.observe( gridElement );
+			for ( const element of gridElement.children ) {
+				contentBoxSpy.observe( element );
+			}
 			return () => {
 				borderBoxSpy.disconnect();
 				contentBoxSpy.disconnect();

package/src/components/list-view/block.js

@@ -700,6 +700,11 @@ function ListViewBlock( {
 							__experimentalSelectBlock={
 								updateFocusAndSelection
 							}
+							isContentOnlyListView={
+								!! rootClientId &&
+								getBlockEditingMode( rootClientId ) ===
+									'contentOnly'
+							}
 						/>
 					) }
 				</TreeGridCell>

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/src/store/reducer.js

@@ -2559,6 +2559,25 @@ function getDerivedBlockEditingModesForTree( state, treeClientId = '' ) {
 	traverseBlockTree( state, treeClientId, ( block ) => {
 		const { clientId, name: blockName } = block;
 
+		const hasEditedContentOnlySection = !! state.editedContentOnlySection;
+		let isWithinEditedContentOnlySection = false;
+		if ( hasEditedContentOnlySection ) {
+			isWithinEditedContentOnlySection =
+				clientId === state.editedContentOnlySection ||
+				!! findParentInClientIdsList( state, clientId, [
+					state.editedContentOnlySection,
+				] );
+
+			// When a contentOnly section is being edited, all blocks outside
+			// the section are disabled. This should never be overridable by any
+			// other block editing modes, it helps to constrain keyboard navigation
+			// to within the edited section.
+			if ( ! isWithinEditedContentOnlySection ) {
+				derivedBlockEditingModes.set( clientId, 'disabled' );
+				return;
+			}
+		}
+
 		// If the block already has an explicit block editing mode set,
 		// don't override it.
 		if ( state.blockEditingModes.has( clientId ) ) {
@@ -2670,26 +2689,10 @@ function getDerivedBlockEditingModesForTree( state, treeClientId = '' ) {
 		}
 
 		// Set the edited section and all blocks within it to 'default', so that all changes can be made.
-		if ( state.editedContentOnlySection ) {
-			// If this is the edited section, use the default mode.
-			if ( state.editedContentOnlySection === clientId ) {
-				derivedBlockEditingModes.set( clientId, 'default' );
-				return;
-			}
-
-			// If the block is within the edited section also use the default mode.
-			const parentTempEditedClientId = findParentInClientIdsList(
-				state,
-				clientId,
-				[ state.editedContentOnlySection ]
-			);
-			if ( parentTempEditedClientId ) {
-				derivedBlockEditingModes.set( clientId, 'default' );
-				return;
-			}
-
-			// Disable blocks that are outside of the edited section.
-			derivedBlockEditingModes.set( clientId, 'disabled' );
+		if ( hasEditedContentOnlySection && isWithinEditedContentOnlySection ) {
+			derivedBlockEditingModes.set( clientId, 'default' );
+			// When there's an editedContentOnlySection, it overrides any modes that are usually
+			// set for `contentOnlyParents`, return early to prevent continuing to code below.
 			return;
 		}
 

package/src/store/test/reducer.js

@@ -4188,6 +4188,115 @@ describe( 'state', () => {
 				);
 			} );
 
+			it( 'disables a sibling synced pattern when an unsynced pattern is the editedContentOnlySection', () => {
+				// Set up two sibling blocks at the root:
+				// 1. An unsynced pattern (core/group with patternName)
+				// 2. A synced pattern (core/block with controlled inner blocks)
+				// When the unsynced pattern becomes the editedContentOnlySection,
+				// the synced pattern and all its contents should be disabled.
+				const stateWithSiblingPatterns = dispatchActions(
+					[
+						{
+							type: 'UPDATE_SETTINGS',
+							settings: {
+								[ sectionRootClientIdKey ]: '',
+							},
+						},
+						{
+							type: 'RESET_BLOCKS',
+							blocks: [
+								{
+									name: 'core/group',
+									clientId: 'unsynced-pattern',
+									attributes: {
+										metadata: {
+											patternName: 'test-pattern',
+										},
+									},
+									innerBlocks: [
+										{
+											name: 'core/paragraph',
+											clientId:
+												'unsynced-pattern-paragraph',
+											attributes: {},
+											innerBlocks: [],
+										},
+									],
+								},
+								{
+									name: 'core/block',
+									clientId: 'sibling-synced-pattern',
+									attributes: {},
+									innerBlocks: [],
+								},
+							],
+						},
+						{
+							type: 'SET_HAS_CONTROLLED_INNER_BLOCKS',
+							clientId: 'sibling-synced-pattern',
+							hasControlledInnerBlocks: true,
+						},
+						{
+							type: 'REPLACE_INNER_BLOCKS',
+							rootClientId: 'sibling-synced-pattern',
+							blocks: [
+								{
+									name: 'core/paragraph',
+									clientId: 'synced-pattern-paragraph',
+									attributes: {},
+									innerBlocks: [],
+								},
+								{
+									name: 'core/paragraph',
+									clientId:
+										'synced-pattern-paragraph-with-overrides',
+									attributes: {
+										metadata: {
+											bindings: {
+												__default:
+													'core/pattern-overrides',
+											},
+										},
+									},
+									innerBlocks: [],
+								},
+							],
+						},
+					],
+					testReducer
+				);
+
+				// Start editing the unsynced pattern section.
+				const editingState = dispatchActions(
+					[
+						{
+							type: 'EDIT_CONTENT_ONLY_SECTION',
+							clientId: 'unsynced-pattern',
+						},
+					],
+					testReducer,
+					stateWithSiblingPatterns
+				);
+
+				expect( editingState.derivedBlockEditingModes ).toEqual(
+					new Map(
+						Object.entries( {
+							// Root is outside the edited section.
+							'': 'disabled',
+							// The edited unsynced pattern is fully editable.
+							'unsynced-pattern': 'default',
+							'unsynced-pattern-paragraph': 'default',
+							// The sibling synced pattern and all its inner blocks
+							// are disabled because they're outside the edited section.
+							'sibling-synced-pattern': 'disabled',
+							'synced-pattern-paragraph': 'disabled',
+							'synced-pattern-paragraph-with-overrides':
+								'disabled',
+						} )
+					)
+				);
+			} );
+
 			it( 'returns the expected block editing modes for synced patterns when switching to zoomed out mode', () => {
 				const { derivedBlockEditingModes } = dispatchActions(
 					[

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 } />;
-}