@wordpress/block-editor 12.19.3 → 12.20.0

package/src/components/url-input/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import scrollIntoView from 'dom-scroll-into-view';
 
 /**
  * WordPress dependencies
@@ -83,21 +82,13 @@ class URLInput extends Component {
 		if (
 			showSuggestions &&
 			selectedSuggestion !== null &&
-			this.suggestionNodes[ selectedSuggestion ] &&
-			! this.scrollingIntoView
+			this.suggestionNodes[ selectedSuggestion ]
 		) {
-			this.scrollingIntoView = true;
-			scrollIntoView(
-				this.suggestionNodes[ selectedSuggestion ],
-				this.autocompleteRef.current,
-				{
-					onlyScrollIfNeeded: true,
-				}
-			);
-
-			this.props.setTimeout( () => {
-				this.scrollingIntoView = false;
-			}, 100 );
+			this.suggestionNodes[ selectedSuggestion ].scrollIntoView( {
+				behavior: 'instant',
+				block: 'nearest',
+				inline: 'nearest',
+			} );
 		}
 
 		// Update suggestions when the value changes.

package/src/hooks/anchor.scss

@@ -1,4 +1,4 @@
 .html-anchor-control .components-external-link {
-	display: block;
+	display: inline-block;
 	margin-top: $grid-unit-10;
 }

package/src/hooks/layout-child.js

@@ -9,13 +9,16 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as blockEditorStore } from '../store';
 import { useStyleOverride } from './utils';
+import { useLayout } from '../components/block-list/layout';
 
 function useBlockPropsChildLayoutStyles( { style } ) {
 	const shouldRenderChildLayoutStyles = useSelect( ( select ) => {
 		return ! select( blockEditorStore ).getSettings().disableLayoutStyles;
 	} );
 	const layout = style?.layout ?? {};
-	const { selfStretch, flexSize } = layout;
+	const { selfStretch, flexSize, columnSpan, rowSpan } = layout;
+	const parentLayout = useLayout() || {};
+	const { columnCount, minimumColumnWidth } = parentLayout;
 	const id = useInstanceId( useBlockPropsChildLayoutStyles );
 	const selector = `.wp-container-content-${ id }`;
 
@@ -30,6 +33,55 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 			css = `${ selector } {
 				flex-grow: 1;
 			}`;
+		} else if ( columnSpan ) {
+			css = `${ selector } {
+				grid-column: span ${ columnSpan };
+			}`;
+		}
+		/**
+		 * If minimumColumnWidth is set on the parent, or if no
+		 * columnCount is set, the grid is responsive so a
+		 * container query is needed for the span to resize.
+		 */
+		if ( columnSpan && ( minimumColumnWidth || ! columnCount ) ) {
+			// Calculate the container query value.
+			const columnSpanNumber = parseInt( columnSpan );
+			let parentColumnValue = parseFloat( minimumColumnWidth );
+			/**
+			 * 12rem is the default minimumColumnWidth value.
+			 * If parentColumnValue is not a number, default to 12.
+			 */
+			if ( isNaN( parentColumnValue ) ) {
+				parentColumnValue = 12;
+			}
+
+			let parentColumnUnit = minimumColumnWidth?.replace(
+				parentColumnValue,
+				''
+			);
+			/**
+			 * Check that parent column unit is either 'px', 'rem' or 'em'.
+			 * If not, default to 'rem'.
+			 */
+			if ( ! [ 'px', 'rem', 'em' ].includes( parentColumnUnit ) ) {
+				parentColumnUnit = 'rem';
+			}
+
+			const defaultGapValue = parentColumnUnit === 'px' ? 24 : 1.5;
+			const containerQueryValue =
+				columnSpanNumber * parentColumnValue +
+				( columnSpanNumber - 1 ) * defaultGapValue;
+
+			css += `@container (max-width: ${ containerQueryValue }${ parentColumnUnit }) {
+				${ selector } {
+					grid-column: 1 / -1;
+				}
+			}`;
+		}
+		if ( rowSpan ) {
+			css += `${ selector } {
+				grid-row: span ${ rowSpan };
+			}`;
 		}
 	}
 

package/src/hooks/position.js

@@ -288,7 +288,6 @@ export function PositionPanelPure( {
 						help={ stickyHelpText }
 					>
 						<CustomSelectControl
-							__nextUnconstrainedWidth
 							__next40pxDefaultSize
 							className="block-editor-hooks__position-selection__select-control"
 							label={ __( 'Position' ) }

package/src/layouts/grid.js

@@ -8,9 +8,13 @@ import {
 	Flex,
 	FlexItem,
 	RangeControl,
+	__experimentalNumberControl as NumberControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalUnitControl as UnitControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 } from '@wordpress/components';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -51,6 +55,12 @@ const RANGE_CONTROL_MAX_VALUES = {
 	dvmax: 100,
 };
 
+const units = [
+	{ value: 'px', label: 'px', default: 0 },
+	{ value: 'rem', label: 'rem', default: 0 },
+	{ value: 'em', label: 'em', default: 0 },
+];
+
 export default {
 	name: 'grid',
 	label: __( 'Grid' ),
@@ -58,13 +68,24 @@ export default {
 		layout = {},
 		onChange,
 	} ) {
-		return layout?.columnCount ? (
-			<GridLayoutColumnsControl layout={ layout } onChange={ onChange } />
-		) : (
-			<GridLayoutMinimumWidthControl
-				layout={ layout }
-				onChange={ onChange }
-			/>
+		return (
+			<>
+				<GridLayoutTypeControl
+					layout={ layout }
+					onChange={ onChange }
+				/>
+				{ layout?.columnCount ? (
+					<GridLayoutColumnsControl
+						layout={ layout }
+						onChange={ onChange }
+					/>
+				) : (
+					<GridLayoutMinimumWidthControl
+						layout={ layout }
+						onChange={ onChange }
+					/>
+				) }
+			</>
 		);
 	},
 	toolBarControls: function DefaultLayoutToolbarControls() {
@@ -97,7 +118,8 @@ export default {
 			);
 		} else if ( minimumColumnWidth ) {
 			rules.push(
-				`grid-template-columns: repeat(auto-fill, minmax(min(${ minimumColumnWidth }, 100%), 1fr))`
+				`grid-template-columns: repeat(auto-fill, minmax(min(${ minimumColumnWidth }, 100%), 1fr))`,
+				`container-type: inline-size`
 			);
 		}
 
@@ -152,38 +174,6 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 		} else if ( [ 'em', 'rem' ].includes( unit ) && newUnit === 'px' ) {
 			// Convert to pixel value assuming a root size of 16px.
 			newValue = Math.round( quantity * 16 ) + newUnit;
-		} else if (
-			[
-				'vh',
-				'vw',
-				'%',
-				'svw',
-				'lvw',
-				'dvw',
-				'svh',
-				'lvh',
-				'dvh',
-				'vi',
-				'svi',
-				'lvi',
-				'dvi',
-				'vb',
-				'svb',
-				'lvb',
-				'dvb',
-				'vmin',
-				'svmin',
-				'lvmin',
-				'dvmin',
-				'vmax',
-				'svmax',
-				'lvmax',
-				'dvmax',
-			].includes( newUnit ) &&
-			quantity > 100
-		) {
-			// When converting to `%` or viewport-relative units, cap the new value at 100.
-			newValue = 100 + newUnit;
 		}
 
 		onChange( {
@@ -209,7 +199,10 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 						} }
 						onUnitChange={ handleUnitChange }
 						value={ value }
+						units={ units }
 						min={ 0 }
+						label={ __( 'Minimum column width' ) }
+						hideLabelFromVision
 					/>
 				</FlexItem>
 				<FlexItem isBlock>
@@ -219,6 +212,8 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 						min={ 0 }
 						max={ RANGE_CONTROL_MAX_VALUES[ unit ] || 600 }
 						withInputField={ false }
+						label={ __( 'Minimum column width' ) }
+						hideLabelFromVision
 					/>
 				</FlexItem>
 			</Flex>
@@ -231,17 +226,101 @@ function GridLayoutColumnsControl( { layout, onChange } ) {
 	const { columnCount = 3 } = layout;
 
 	return (
-		<RangeControl
-			label={ __( 'Columns' ) }
-			value={ columnCount }
-			onChange={ ( value ) =>
-				onChange( {
-					...layout,
-					columnCount: value,
-				} )
-			}
-			min={ 1 }
-			max={ 6 }
-		/>
+		<fieldset>
+			<BaseControl.VisualLabel as="legend">
+				{ __( 'Columns' ) }
+			</BaseControl.VisualLabel>
+			<Flex gap={ 4 }>
+				<FlexItem isBlock>
+					<NumberControl
+						size={ '__unstable-large' }
+						onChange={ ( value ) => {
+							/**
+							 * If the input is cleared, avoid switching
+							 * back to "Auto" by setting a value of "1".
+							 */
+							const validValue = value !== '' ? value : '1';
+							onChange( {
+								...layout,
+								columnCount: validValue,
+							} );
+						} }
+						value={ columnCount }
+						min={ 1 }
+						label={ __( 'Columns' ) }
+						hideLabelFromVision
+					/>
+				</FlexItem>
+				<FlexItem isBlock>
+					<RangeControl
+						value={ parseInt( columnCount, 10 ) } // RangeControl can't deal with strings.
+						onChange={ ( value ) =>
+							onChange( {
+								...layout,
+								columnCount: value,
+							} )
+						}
+						min={ 1 }
+						max={ 16 }
+						withInputField={ false }
+						label={ __( 'Columns' ) }
+						hideLabelFromVision
+					/>
+				</FlexItem>
+			</Flex>
+		</fieldset>
+	);
+}
+
+// Enables switching between grid types
+function GridLayoutTypeControl( { layout, onChange } ) {
+	const { columnCount, minimumColumnWidth } = layout;
+
+	/**
+	 * When switching, temporarily save any custom values set on the
+	 * previous type so we can switch back without loss.
+	 */
+	const [ tempColumnCount, setTempColumnCount ] = useState(
+		columnCount || 3
+	);
+	const [ tempMinimumColumnWidth, setTempMinimumColumnWidth ] = useState(
+		minimumColumnWidth || '12rem'
+	);
+
+	const isManual = !! columnCount ? 'manual' : 'auto';
+
+	const onChangeType = ( value ) => {
+		if ( value === 'manual' ) {
+			setTempMinimumColumnWidth( minimumColumnWidth || '12rem' );
+		} else {
+			setTempColumnCount( columnCount || 3 );
+		}
+		onChange( {
+			...layout,
+			columnCount: value === 'manual' ? tempColumnCount : null,
+			minimumColumnWidth:
+				value === 'auto' ? tempMinimumColumnWidth : null,
+		} );
+	};
+
+	return (
+		<ToggleGroupControl
+			__nextHasNoMarginBottom={ true }
+			label={ __( 'Type' ) }
+			value={ isManual }
+			onChange={ onChangeType }
+			isBlock={ true }
+		>
+			<ToggleGroupControlOption
+				key={ 'auto' }
+				value="auto"
+				label={ __( 'Auto' ) }
+			/>
+			<ToggleGroupControlOption
+				key={ 'manual' }
+				value="manual"
+				label={ __( 'Manual' ) }
+			/>
+		</ToggleGroupControl>
 	);
 }

package/src/layouts/test/grid.js

@@ -4,8 +4,8 @@
 import grid from '../grid';
 
 describe( 'getLayoutStyle', () => {
-	it( 'should return a single `grid-template-columns` property if no non-default params are provided', () => {
-		const expected = `.editor-styles-wrapper .my-container { grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); }`;
+	it( 'should return only `grid-template-columns` and `container-type` properties if no non-default params are provided', () => {
+		const expected = `.editor-styles-wrapper .my-container { grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); container-type: inline-size; }`;
 
 		const result = grid.getLayoutStyle( {
 			selector: '.my-container',
@@ -16,6 +16,20 @@ describe( 'getLayoutStyle', () => {
 			layoutDefinitions: undefined,
 		} );
 
+		expect( result ).toBe( expected );
+	} );
+	it( 'should return only `grid-template-columns` if columnCount property is provided', () => {
+		const expected = `.editor-styles-wrapper .my-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }`;
+
+		const result = grid.getLayoutStyle( {
+			selector: '.my-container',
+			layout: { columnCount: 3 },
+			style: {},
+			blockName: 'test-block',
+			hasBlockGapSupport: false,
+			layoutDefinitions: undefined,
+		} );
+
 		expect( result ).toBe( expected );
 	} );
 } );

package/src/store/actions.js

@@ -331,36 +331,6 @@ export function toggleSelection( isSelectionEnabled = true ) {
 	};
 }
 
-function getBlocksWithDefaultStylesApplied( blocks, blockEditorSettings ) {
-	const preferredStyleVariations =
-		blockEditorSettings?.__experimentalPreferredStyleVariations?.value ??
-		{};
-	return blocks.map( ( block ) => {
-		const blockName = block.name;
-		if ( ! hasBlockSupport( blockName, 'defaultStylePicker', true ) ) {
-			return block;
-		}
-		if ( ! preferredStyleVariations[ blockName ] ) {
-			return block;
-		}
-		const className = block.attributes?.className;
-		if ( className?.includes( 'is-style-' ) ) {
-			return block;
-		}
-		const { attributes = {} } = block;
-		const blockStyle = preferredStyleVariations[ blockName ];
-		return {
-			...block,
-			attributes: {
-				...attributes,
-				className: `${
-					className || ''
-				} is-style-${ blockStyle }`.trim(),
-			},
-		};
-	} );
-}
-
 /* eslint-disable jsdoc/valid-types */
 /**
  * Action that replaces given blocks with one or more replacement blocks.
@@ -378,10 +348,7 @@ export const replaceBlocks =
 	( { select, dispatch, registry } ) => {
 		/* eslint-enable jsdoc/valid-types */
 		clientIds = castArray( clientIds );
-		blocks = getBlocksWithDefaultStylesApplied(
-			castArray( blocks ),
-			select.getSettings()
-		);
+		blocks = castArray( blocks );
 		const rootClientId = select.getBlockRootClientId( clientIds[ 0 ] );
 		// Replace is valid if the new blocks can be inserted in the root block.
 		for ( let index = 0; index < blocks.length; index++ ) {
@@ -594,10 +561,7 @@ export const insertBlocks =
 			);
 		}
 
-		blocks = getBlocksWithDefaultStylesApplied(
-			castArray( blocks ),
-			select.getSettings()
-		);
+		blocks = castArray( blocks );
 		const allowedBlocks = [];
 		for ( const block of blocks ) {
 			const isValid = select.canInsertBlockType(

package/src/store/test/actions.js

@@ -380,107 +380,6 @@ describe( 'actions', () => {
 	} );
 
 	describe( 'insertBlocks', () => {
-		it( 'should apply default styles to blocks if blocks do not contain a style', () => {
-			const ribsBlock = {
-				clientId: 'ribs',
-				name: 'core/test-ribs',
-			};
-			const chickenBlock = {
-				clientId: 'chicken',
-				name: 'core/test-chicken',
-			};
-			const chickenRibsBlock = {
-				clientId: 'chicken-ribs',
-				name: 'core/test-chicken-ribs',
-			};
-			const blocks = [ ribsBlock, chickenBlock, chickenRibsBlock ];
-
-			const select = {
-				getSettings: () => ( {
-					__experimentalPreferredStyleVariations: {
-						value: {
-							'core/test-ribs': 'squared',
-							'core/test-chicken-ribs': 'colorful',
-						},
-					},
-				} ),
-				canInsertBlockType: () => true,
-			};
-			const dispatch = jest.fn();
-
-			insertBlocks(
-				blocks,
-				5,
-				'testrootid',
-				false
-			)( { select, dispatch } );
-
-			expect( dispatch ).toHaveBeenCalledWith( {
-				type: 'INSERT_BLOCKS',
-				blocks: [
-					{
-						...ribsBlock,
-						attributes: { className: 'is-style-squared' },
-					},
-					chickenBlock,
-					{
-						...chickenRibsBlock,
-						attributes: { className: 'is-style-colorful' },
-					},
-				],
-				index: 5,
-				rootClientId: 'testrootid',
-				time: expect.any( Number ),
-				updateSelection: false,
-				initialPosition: null,
-			} );
-		} );
-
-		it( 'should keep styles explicitly set even if different from the default', () => {
-			const ribsWithStyleBlock = {
-				clientId: 'ribs',
-				name: 'core/test-ribs',
-				attributes: {
-					className: 'is-style-colorful',
-				},
-			};
-			const blocks = [ ribsWithStyleBlock ];
-
-			const select = {
-				getSettings: () => ( {
-					__experimentalPreferredStyleVariations: {
-						value: {
-							'core/test-ribs': 'squared',
-						},
-					},
-				} ),
-				canInsertBlockType: () => true,
-			};
-			const dispatch = jest.fn();
-
-			insertBlocks(
-				blocks,
-				5,
-				'testrootid',
-				false
-			)( { select, dispatch } );
-
-			expect( dispatch ).toHaveBeenCalledWith( {
-				type: 'INSERT_BLOCKS',
-				blocks: [
-					{
-						...ribsWithStyleBlock,
-						attributes: { className: 'is-style-colorful' },
-					},
-				],
-				index: 5,
-				rootClientId: 'testrootid',
-				time: expect.any( Number ),
-				updateSelection: false,
-				initialPosition: null,
-			} );
-		} );
-
 		it( 'should filter the allowed blocks in INSERT_BLOCKS action', () => {
 			const ribsBlock = {
 				clientId: 'ribs',

package/src/style.scss

@@ -16,7 +16,6 @@
 @import "./components/block-popover/style.scss";
 @import "./components/block-preview/style.scss";
 @import "./components/block-rename/style.scss";
-@import "./components/block-settings-menu/style.scss";
 @import "./components/block-styles/style.scss";
 @import "./components/block-switcher/style.scss";
 @import "./components/block-types-list/style.scss";

package/build/components/default-style-picker/index.js

@@ -1,70 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = DefaultStylePicker;
-var _react = require("react");
-var _blocks = require("@wordpress/blocks");
-var _element = require("@wordpress/element");
-var _i18n = require("@wordpress/i18n");
-var _components = require("@wordpress/components");
-var _data = require("@wordpress/data");
-var _store = require("../../store");
-var _utils = require("../block-styles/utils");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-function DefaultStylePicker({
-  blockName
-}) {
-  const {
-    preferredStyle,
-    onUpdatePreferredStyleVariations,
-    styles
-  } = (0, _data.useSelect)(select => {
-    var _preferredStyleVariat;
-    const settings = select(_store.store).getSettings();
-    const preferredStyleVariations = settings.__experimentalPreferredStyleVariations;
-    return {
-      preferredStyle: preferredStyleVariations?.value?.[blockName],
-      onUpdatePreferredStyleVariations: (_preferredStyleVariat = preferredStyleVariations?.onChange) !== null && _preferredStyleVariat !== void 0 ? _preferredStyleVariat : null,
-      styles: select(_blocks.store).getBlockStyles(blockName)
-    };
-  }, [blockName]);
-  const selectOptions = (0, _element.useMemo)(() => [{
-    label: (0, _i18n.__)('Not set'),
-    value: ''
-  }, ...styles.map(({
-    label,
-    name
-  }) => ({
-    label,
-    value: name
-  }))], [styles]);
-  const defaultStyleName = (0, _element.useMemo)(() => (0, _utils.getDefaultStyle)(styles)?.name, [styles]);
-  const selectOnChange = (0, _element.useCallback)(blockStyle => {
-    onUpdatePreferredStyleVariations(blockName, blockStyle);
-  }, [blockName, onUpdatePreferredStyleVariations]);
-
-  // Until the functionality is migrated to global styles,
-  // only show the default style picker if a non-default style has already been selected.
-  if (!preferredStyle || preferredStyle === defaultStyleName) {
-    return null;
-  }
-  return onUpdatePreferredStyleVariations && (0, _react.createElement)("div", {
-    className: "default-style-picker__default-switcher"
-  }, (0, _react.createElement)(_components.SelectControl, {
-    __nextHasNoMarginBottom: true,
-    options: selectOptions,
-    value: preferredStyle || '',
-    label: (0, _i18n.__)('Default Style'),
-    onChange: selectOnChange
-  }));
-}
-//# sourceMappingURL=index.js.map

package/build/components/default-style-picker/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_blocks","require","_element","_i18n","_components","_data","_store","_utils","DefaultStylePicker","blockName","preferredStyle","onUpdatePreferredStyleVariations","styles","useSelect","select","_preferredStyleVariat","settings","blockEditorStore","getSettings","preferredStyleVariations","__experimentalPreferredStyleVariations","value","onChange","blocksStore","getBlockStyles","selectOptions","useMemo","label","__","map","name","defaultStyleName","getDefaultStyle","selectOnChange","useCallback","blockStyle","_react","createElement","className","SelectControl","__nextHasNoMarginBottom","options"],"sources":["@wordpress/block-editor/src/components/default-style-picker/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { useMemo, useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { SelectControl } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { getDefaultStyle } from '../block-styles/utils';\n\nexport default function DefaultStylePicker( { blockName } ) {\n\tconst { preferredStyle, onUpdatePreferredStyleVariations, styles } =\n\t\tuseSelect(\n\t\t\t( select ) => {\n\t\t\t\tconst settings = select( blockEditorStore ).getSettings();\n\t\t\t\tconst preferredStyleVariations =\n\t\t\t\t\tsettings.__experimentalPreferredStyleVariations;\n\t\t\t\treturn {\n\t\t\t\t\tpreferredStyle:\n\t\t\t\t\t\tpreferredStyleVariations?.value?.[ blockName ],\n\t\t\t\t\tonUpdatePreferredStyleVariations:\n\t\t\t\t\t\tpreferredStyleVariations?.onChange ?? null,\n\t\t\t\t\tstyles: select( blocksStore ).getBlockStyles( blockName ),\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ blockName ]\n\t\t);\n\tconst selectOptions = useMemo(\n\t\t() => [\n\t\t\t{ label: __( 'Not set' ), value: '' },\n\t\t\t...styles.map( ( { label, name } ) => ( { label, value: name } ) ),\n\t\t],\n\t\t[ styles ]\n\t);\n\tconst defaultStyleName = useMemo(\n\t\t() => getDefaultStyle( styles )?.name,\n\t\t[ styles ]\n\t);\n\tconst selectOnChange = useCallback(\n\t\t( blockStyle ) => {\n\t\t\tonUpdatePreferredStyleVariations( blockName, blockStyle );\n\t\t},\n\t\t[ blockName, onUpdatePreferredStyleVariations ]\n\t);\n\n\t// Until the functionality is migrated to global styles,\n\t// only show the default style picker if a non-default style has already been selected.\n\tif ( ! preferredStyle || preferredStyle === defaultStyleName ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\tonUpdatePreferredStyleVariations && (\n\t\t\t<div className=\"default-style-picker__default-switcher\">\n\t\t\t\t<SelectControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\toptions={ selectOptions }\n\t\t\t\t\tvalue={ preferredStyle || '' }\n\t\t\t\t\tlabel={ __( 'Default Style' ) }\n\t\t\t\t\tonChange={ selectOnChange }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t)\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAKA,IAAAK,MAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AAbA;AACA;AACA;;AAOA;AACA;AACA;;AAIe,SAASO,kBAAkBA,CAAE;EAAEC;AAAU,CAAC,EAAG;EAC3D,MAAM;IAAEC,cAAc;IAAEC,gCAAgC;IAAEC;EAAO,CAAC,GACjE,IAAAC,eAAS,EACNC,MAAM,IAAM;IAAA,IAAAC,qBAAA;IACb,MAAMC,QAAQ,GAAGF,MAAM,CAAEG,YAAiB,CAAC,CAACC,WAAW,CAAC,CAAC;IACzD,MAAMC,wBAAwB,GAC7BH,QAAQ,CAACI,sCAAsC;IAChD,OAAO;MACNV,cAAc,EACbS,wBAAwB,EAAEE,KAAK,GAAIZ,SAAS,CAAE;MAC/CE,gCAAgC,GAAAI,qBAAA,GAC/BI,wBAAwB,EAAEG,QAAQ,cAAAP,qBAAA,cAAAA,qBAAA,GAAI,IAAI;MAC3CH,MAAM,EAAEE,MAAM,CAAES,aAAY,CAAC,CAACC,cAAc,CAAEf,SAAU;IACzD,CAAC;EACF,CAAC,EACD,CAAEA,SAAS,CACZ,CAAC;EACF,MAAMgB,aAAa,GAAG,IAAAC,gBAAO,EAC5B,MAAM,CACL;IAAEC,KAAK,EAAE,IAAAC,QAAE,EAAE,SAAU,CAAC;IAAEP,KAAK,EAAE;EAAG,CAAC,EACrC,GAAGT,MAAM,CAACiB,GAAG,CAAE,CAAE;IAAEF,KAAK;IAAEG;EAAK,CAAC,MAAQ;IAAEH,KAAK;IAAEN,KAAK,EAAES;EAAK,CAAC,CAAG,CAAC,CAClE,EACD,CAAElB,MAAM,CACT,CAAC;EACD,MAAMmB,gBAAgB,GAAG,IAAAL,gBAAO,EAC/B,MAAM,IAAAM,sBAAe,EAAEpB,MAAO,CAAC,EAAEkB,IAAI,EACrC,CAAElB,MAAM,CACT,CAAC;EACD,MAAMqB,cAAc,GAAG,IAAAC,oBAAW,EAC/BC,UAAU,IAAM;IACjBxB,gCAAgC,CAAEF,SAAS,EAAE0B,UAAW,CAAC;EAC1D,CAAC,EACD,CAAE1B,SAAS,EAAEE,gCAAgC,CAC9C,CAAC;;EAED;EACA;EACA,IAAK,CAAED,cAAc,IAAIA,cAAc,KAAKqB,gBAAgB,EAAG;IAC9D,OAAO,IAAI;EACZ;EAEA,OACCpB,gCAAgC,IAC/B,IAAAyB,MAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAwC,GACtD,IAAAF,MAAA,CAAAC,aAAA,EAACjC,WAAA,CAAAmC,aAAa;IACbC,uBAAuB;IACvBC,OAAO,EAAGhB,aAAe;IACzBJ,KAAK,EAAGX,cAAc,IAAI,EAAI;IAC9BiB,KAAK,EAAG,IAAAC,QAAE,EAAE,eAAgB,CAAG;IAC/BN,QAAQ,EAAGW;EAAgB,CAC3B,CACG,CACL;AAEH"}