@wordpress/block-editor 15.21.1 → 15.22.1-next.v.202606191442.0

package/src/components/dimensions-tool/test/index.js

@@ -16,6 +16,17 @@ import { useState } from '@wordpress/element';
 import DimensionsTool from '../';
 
 const EMPTY_OBJECT = {};
+const ASPECT_RATIO_OPTIONS = [
+	{ label: 'Original', value: 'auto' },
+	{ label: '16/9', value: '16/9' },
+	{ label: '4/3', value: '4/3' },
+	{
+		label: 'Custom',
+		value: 'custom',
+		disabled: true,
+		hidden: true,
+	},
+];
 
 function Example( { initialValue, onChange, ...props } ) {
 	const [ value, setValue ] = useState( initialValue );
@@ -33,16 +44,27 @@ function Example( { initialValue, onChange, ...props } ) {
 				} }
 				defaultScale="cover"
 				defaultAspectRatio="auto"
-				aspectRatioOptions={ [
-					{ label: 'Original', value: 'auto' },
-					{ label: '16/9', value: '16/9' },
-					{
-						label: 'Custom',
-						value: 'custom',
-						disabled: true,
-						hidden: true,
-					},
-				] }
+				aspectRatioOptions={ ASPECT_RATIO_OPTIONS }
+				value={ value }
+				{ ...props }
+			/>
+		</ToolsPanel>
+	);
+}
+
+function ControlledExample( { value, onChange, ...props } ) {
+	return (
+		<ToolsPanel
+			label="Dimensions"
+			panelId="panel-id"
+			resetAll={ () => onChange( EMPTY_OBJECT ) }
+		>
+			<DimensionsTool
+				panelId="panel-id"
+				onChange={ onChange }
+				defaultScale="cover"
+				defaultAspectRatio="auto"
+				aspectRatioOptions={ ASPECT_RATIO_OPTIONS }
 				value={ value }
 				{ ...props }
 			/>
@@ -60,6 +82,39 @@ function Example( { initialValue, onChange, ...props } ) {
 // properties are treated differently from missing properties.
 
 describe( 'DimensionsTool', () => {
+	describe( 'controlled values', () => {
+		it( 'updates the aspect ratio control when the value prop changes', () => {
+			const onChange = jest.fn();
+			const { rerender } = render(
+				<ControlledExample
+					value={ { aspectRatio: '16/9' } }
+					onChange={ onChange }
+				/>
+			);
+			const aspectRatioSelect = screen.getByRole( 'combobox', {
+				name: 'Aspect ratio',
+			} );
+
+			expect( aspectRatioSelect ).toHaveValue( '16/9' );
+
+			rerender(
+				<ControlledExample
+					value={ { aspectRatio: '4/3' } }
+					onChange={ onChange }
+				/>
+			);
+			expect( aspectRatioSelect ).toHaveValue( '4/3' );
+
+			rerender(
+				<ControlledExample
+					value={ EMPTY_OBJECT }
+					onChange={ onChange }
+				/>
+			);
+			expect( aspectRatioSelect ).toHaveValue( 'auto' );
+		} );
+	} );
+
 	describe( 'updating aspectRatio', () => {
 		it( 'when starting with empty initial state, setting aspectRatio also sets scale (0000) -> (1100)', async () => {
 			const user = userEvent.setup();
@@ -323,7 +378,30 @@ describe( 'DimensionsTool', () => {
 	} );
 
 	describe( 'updating scale', () => {
-		// No custom interactions here. Things should just update normally.
+		it( 'when default scale is cover, setting scale to fill preserves the fill value', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			const initialValue = {
+				aspectRatio: '16/9',
+				scale: 'cover',
+			};
+
+			render(
+				<Example initialValue={ initialValue } onChange={ onChange } />
+			);
+
+			const scaleFillRadio = screen.getByRole( 'radio', {
+				name: 'Fill',
+			} );
+
+			await user.click( scaleFillRadio );
+			expect( scaleFillRadio ).toBeChecked();
+
+			expect( onChange.mock.calls ).toStrictEqual( [
+				[ { aspectRatio: '16/9', scale: 'fill' } ],
+			] );
+		} );
 	} );
 
 	describe( 'updating dimensions', () => {

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

@@ -32,7 +32,6 @@ import { setImmutably } from '../../utils/object';
 import {
 	DEFAULT_BLOCK_STYLE_STATE,
 	hasPseudoBlockStyleState,
-	isDefaultBlockStyleState,
 	hasViewportBlockStyleState,
 } from '../../hooks/block-style-state';
 
@@ -95,7 +94,7 @@ function hasWidth( settings ) {
 
 function hasAspectRatio( settings, styleState = DEFAULT_BLOCK_STYLE_STATE ) {
 	return (
-		isDefaultBlockStyleState( styleState ) &&
+		! hasPseudoBlockStyleState( styleState ) &&
 		settings?.dimensions?.aspectRatio
 	);
 }

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

@@ -20,7 +20,6 @@ import { shadow as shadowIcon, Icon, check, reset } from '@wordpress/icons';
  */
 import clsx from 'clsx';
 
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip } from '@wordpress/ui';
 
 /**

package/src/components/iframe/index.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import clsx from 'clsx';
+import { version as reactVersion } from 'react';
 
 /**
  * WordPress dependencies
@@ -102,6 +103,12 @@ function getIframeSrc( resolvedAssets ) {
 		return src;
 	}
 
+	let body = '';
+	if ( reactVersion.split( '.' )[ 0 ] === '18' ) {
+		body =
+			'<body><script>document.currentScript.parentElement.remove()</script></body>';
+	}
+
 	// Correct doctype is required to enable rendering in standards mode.
 	// Also preload the styles to avoid a flash of unstyled content.
 	const html = `<!doctype html>
@@ -125,9 +132,7 @@ function getIframeSrc( resolvedAssets ) {
 		${ resolvedAssets.styles ?? '' }
 		${ resolvedAssets.scripts ?? '' }
 	</head>
-	<body>
-		<script>document.currentScript.parentElement.remove()</script>
-	</body>
+	${ body }
 </html>`;
 
 	src = URL.createObjectURL( new Blob( [ html ], { type: 'text/html' } ) );

package/src/components/inserter/media-tab/media-preview.js

@@ -27,7 +27,6 @@ import { store as noticesStore } from '@wordpress/notices';
 import { isBlobURL } from '@wordpress/blob';
 import { getFilename } from '@wordpress/url';
 
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip } from '@wordpress/ui';
 
 /**

package/src/components/inspector-controls/fill.js

@@ -26,7 +26,6 @@ import {
 import { ListViewContentFill } from './list-view-content-popover';
 
 const PATTERN_EDITING_GROUPS = [ 'content', 'list' ];
-const TEMPLATE_PART_GROUPS = [ 'default', 'settings', 'advanced' ];
 
 export default function InspectorControlsFill( {
 	children,
@@ -56,17 +55,16 @@ export default function InspectorControlsFill( {
 
 	// During pattern editing:
 	// - All blocks can show pattern editing groups (content, list).
-	// - Template parts can show a settings tab (default, settings, advanced groups).
+	// - Template parts can show any inspector group.
 	// - Other blocks cannot show a settings tab.
 	if ( context[ mayDisplayPatternEditingControlsKey ] ) {
-		// Template parts are allowed to show a settings tab to allow access to the
-		// 'Design' and 'Advanced' panels.
+		// Template parts have also historically supported
+		// any block inspector groups for extenders. The settings
+		// tab is also used by core for the 'Design' panel. Specifically
+		// for that block the restrictions on allowed groups are lessened.
 		const isTemplatePart = context.name === 'core/template-part';
-		const isTemplatePartGroup = TEMPLATE_PART_GROUPS.includes( group );
 		const isPatternEditingGroup = PATTERN_EDITING_GROUPS.includes( group );
-
-		const canShowGroup =
-			( isTemplatePart && isTemplatePartGroup ) || isPatternEditingGroup;
+		const canShowGroup = isTemplatePart || isPatternEditingGroup;
 
 		if ( ! canShowGroup ) {
 			return null;

package/src/components/inspector-controls-tabs/index.js

@@ -9,7 +9,6 @@ import { useEffect, useState, useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { useSelect, useDispatch } from '@wordpress/data';
 
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip } from '@wordpress/ui';
 
 /**

package/src/components/inspector-controls-tabs/styles-tab.js

@@ -79,7 +79,11 @@ const StylesTab = ( {
 					contentClientIds={ contentClientIds }
 				/>
 			) }
-			{ ! isSectionBlock && (
+			{
+				// Extenders have in the past always been allowed to add controls to group
+				// the restrictions are lessened for that block.
+			 }
+			{ ( ! isSectionBlock || blockName === 'core/template-part' ) && (
 				<>
 					<InspectorControls.Slot
 						group="color"

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

@@ -22,7 +22,6 @@ import {
 import { SPACE, ENTER } from '@wordpress/keycodes';
 import { useSelect } from '@wordpress/data';
 
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip } from '@wordpress/ui';
 
 /**

package/src/components/preset-input-control/custom-value-controls.js

@@ -6,7 +6,6 @@ import {
 	__experimentalUnitControl as UnitControl,
 } from '@wordpress/components';
 
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip } from '@wordpress/ui';
 
 /**

package/src/hooks/block-fields/index.js

@@ -14,6 +14,7 @@ import { useContext, useState, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import { replacePatternOverridesDefaultBinding } from '../../utils/block-bindings';
 import BlockContext from '../../components/block-context';
 import BlockIcon from '../../components/block-icon';
 import useBlockDisplayTitle from '../../components/block-title/use-block-display-title';
@@ -80,15 +81,39 @@ function BlockFields( {
 				return _attributes;
 			}
 
+			/*
+			 * The pattern overrides `__default` binding is a placeholder, not
+			 * a real attribute: expand it to the block's bindable attributes
+			 * before resolving values, as other bindings consumers do.
+			 */
+			const { __experimentalBlockBindingsSupportedAttributes } =
+				select( blockEditorStore ).getSettings();
+			const bindableAttributes =
+				__experimentalBlockBindingsSupportedAttributes?.[
+					blockType?.name
+				];
+			const bindings = bindableAttributes
+				? replacePatternOverridesDefaultBinding(
+						_attributes.metadata.bindings,
+						bindableAttributes
+				  )
+				: _attributes.metadata.bindings;
+
 			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
-			return Object.entries( _attributes.metadata.bindings ).reduce(
+			return Object.entries( bindings ).reduce(
 				( acc, [ attribute, binding ] ) => {
+					// Skip a `__default` binding that could not be expanded:
+					// it is not a real block attribute.
+					if ( attribute === '__default' ) {
+						return acc;
+					}
 					const source = getBlockBindingsSource( binding.source );
 					if ( ! source ) {
 						return acc;
 					}
 					const values = source.getValues( {
 						select,
+						clientId,
 						context: blockContext,
 						bindings: { [ attribute ]: binding },
 					} );
@@ -97,7 +122,7 @@ function BlockFields( {
 				_attributes
 			);
 		},
-		[ blockContext, clientId ]
+		[ blockContext, clientId, blockType?.name ]
 	);
 	const { selectBlock, toggleBlockHighlight } =
 		useDispatch( blockEditorStore );

package/src/hooks/dimensions.js

@@ -190,6 +190,14 @@ export function hasDimensionsSupport( blockName, feature = 'any' ) {
 	return !! support?.[ feature ];
 }
 
+export function isExplicitAspectRatio( aspectRatio ) {
+	if ( ! aspectRatio ) {
+		return false;
+	}
+
+	return `${ aspectRatio }`.trim().toLowerCase() !== 'auto';
+}
+
 export default {
 	useBlockProps,
 	attributeKeys: [ 'height', 'minHeight', 'width', 'style' ],
@@ -206,8 +214,11 @@ function useBlockProps( { name, height, minHeight, style } ) {
 		return {};
 	}
 
+	const hasExplicitAspectRatio = isExplicitAspectRatio(
+		style?.dimensions?.aspectRatio
+	);
 	const className = clsx( {
-		'has-aspect-ratio': !! style?.dimensions?.aspectRatio,
+		'has-aspect-ratio': hasExplicitAspectRatio,
 	} );
 
 	// Allow dimensions-based inline style overrides to override any global styles rules that
@@ -215,12 +226,12 @@ function useBlockProps( { name, height, minHeight, style } ) {
 	const inlineStyleOverrides = {};
 
 	// Apply rules to unset incompatible styles.
-	// Note that a set `aspectRatio` will win out if both an aspect ratio and height-related properties are set.
+	// Note that an explicit `aspectRatio` will win out if both an aspect ratio and height-related properties are set.
 	// This is because the aspect ratio is a newer block support, so (in theory) any aspect ratio
 	// that is set should be intentional and should override any existing height properties. The Cover block
 	// and dimensions controls have logic that will manually clear the aspect ratio if height properties
 	// are set.
-	if ( style?.dimensions?.aspectRatio ) {
+	if ( hasExplicitAspectRatio ) {
 		// To ensure the aspect ratio does not get overridden by `minHeight` or `height` unset any existing rule.
 		inlineStyleOverrides.minHeight = 'unset';
 		inlineStyleOverrides.height = 'unset';

package/src/hooks/layout-child.js

@@ -28,6 +28,24 @@ const RESPONSIVE_BREAKPOINTS = {
 	tablet: '@media (480px < width <= 782px)',
 };
 
+// These are the serialized `selfStretch` values. `max` used to be called
+// "Fixed" in the UI, but was renamed and replaced by `fixedNoShrink`.
+const FLEX_CHILD_LAYOUT_VALUES = {
+	fit: 'fit',
+	grow: 'fill',
+	max: 'fixed',
+	fixed: 'fixedNoShrink',
+};
+
+const FLEX_SIZE_VALUES = [
+	FLEX_CHILD_LAYOUT_VALUES.max,
+	FLEX_CHILD_LAYOUT_VALUES.fixed,
+];
+
+function isFlexSizeValue( value ) {
+	return FLEX_SIZE_VALUES.includes( value );
+}
+
 function serializeRule( { selector, declarations } ) {
 	return `${ selector } {
 		${ Object.entries( declarations )
@@ -60,6 +78,7 @@ export function getChildLayoutStyleRules( {
 		columnSpan,
 		rowSpan,
 	} = effectiveLayout;
+	const baseSelfStretch = layout.selfStretch;
 	const { columnCount, minimumColumnWidth } = parentLayout;
 	const rules = [];
 
@@ -69,10 +88,30 @@ export function getChildLayoutStyleRules( {
 		hasViewportOverride( 'selfStretch' ) ||
 		hasViewportOverride( 'flexSize' )
 	) {
-		if ( selfStretch === 'fixed' && flexSize ) {
+		if (
+			hasViewportOverrides &&
+			( selfStretch === FLEX_CHILD_LAYOUT_VALUES.fit ||
+				selfStretch === FLEX_CHILD_LAYOUT_VALUES.grow ) &&
+			isFlexSizeValue( baseSelfStretch ) &&
+			layout.flexSize
+		) {
+			declarations[ 'flex-basis' ] = 'unset';
+			if ( baseSelfStretch === FLEX_CHILD_LAYOUT_VALUES.fixed ) {
+				declarations[ 'flex-shrink' ] = 'unset';
+			}
+		}
+		if ( isFlexSizeValue( selfStretch ) && flexSize ) {
 			declarations[ 'flex-basis' ] = flexSize;
+			if ( selfStretch === FLEX_CHILD_LAYOUT_VALUES.fixed ) {
+				declarations[ 'flex-shrink' ] = '0';
+			} else if (
+				hasViewportOverrides &&
+				baseSelfStretch === FLEX_CHILD_LAYOUT_VALUES.fixed
+			) {
+				declarations[ 'flex-shrink' ] = 'unset';
+			}
 			declarations[ 'box-sizing' ] = 'border-box';
-		} else if ( selfStretch === 'fill' ) {
+		} else if ( selfStretch === FLEX_CHILD_LAYOUT_VALUES.grow ) {
 			declarations[ 'flex-grow' ] = '1';
 		}
 	}

package/src/hooks/list-view.js

@@ -50,26 +50,25 @@ export function ListViewPanel( { clientId, name } ) {
 		useDispatch( blockEditorStore )
 	);
 
-	const isEnabled = hasListViewSupport( name );
-	const { hasChildren, isNestedListView } = useSelect(
+	const { isEnabled, hasChildren, isNestedListView } = useSelect(
 		( select ) => {
-			const { getBlockCount, getBlockParents, getBlockName } =
-				select( blockEditorStore );
+			const {
+				getBlockCount,
+				getBlockParents,
+				shouldRenderBlockListView,
+			} = unlock( select( blockEditorStore ) );
 
 			// Avoid showing List Views for both parent and child blocks that have support.
 			// In this situation the parent will show the child in its list already.
 			// Search parents to see if there's one that also has support, and if so skip rendering.
 			// This matches closely the logic in the `BlockCard` component.
 			const parents = getBlockParents( clientId, false );
-			const _isNestedListView = parents.find( ( parentId ) => {
-				const parentName = getBlockName( parentId );
-				return (
-					parentName === 'core/navigation' ||
-					hasBlockSupport( parentName, 'listView' )
-				);
-			} );
+			const _isNestedListView = parents.find( ( parentId ) =>
+				shouldRenderBlockListView( parentId )
+			);
 
 			return {
+				isEnabled: shouldRenderBlockListView( clientId ),
 				hasChildren: !! getBlockCount( clientId ),
 				isNestedListView: _isNestedListView,
 			};

package/src/hooks/style.js

@@ -29,6 +29,7 @@ import {
 	DIMENSIONS_SUPPORT_KEY,
 	SPACING_SUPPORT_KEY,
 	DimensionsPanel,
+	isExplicitAspectRatio,
 } from './dimensions';
 import {
 	cleanEmptyObject,
@@ -134,6 +135,72 @@ function getStateFallbackBorderStyles( stateStyles ) {
 	return cleanEmptyObject( { border: cleanEmptyObject( fallbackBorder ) } );
 }
 
+/**
+ * Returns background reset CSS for a state that sets a solid background color.
+ *
+ * When a state sets `color.background` (a solid color) without also setting a
+ * gradient (`color.gradient` or `background.gradient`), any gradient applied to
+ * the default state via an inline `background` shorthand or `background-image`
+ * declaration must be explicitly cleared. Without this, the gradient image layer
+ * remains visible even though the solid hover color wins `background-color`.
+ *
+ * @param {Object} stateStyles State style object.
+ * @param {string} selector    CSS selector for the generated style.
+ * @return {string|undefined} CSS string with background-image reset, or undefined.
+ */
+function getStateBackgroundResetCSS( stateStyles, selector ) {
+	const hasSolidBackground = !! stateStyles?.color?.background;
+
+	if ( ! hasSolidBackground ) {
+		return undefined;
+	}
+
+	const hasColorGradient = !! stateStyles?.color?.gradient;
+	const hasBackgroundGradient =
+		!! stateStyles?.background?.gradient ||
+		!! stateStyles?.background?.backgroundImage;
+
+	if ( hasColorGradient || hasBackgroundGradient ) {
+		return undefined;
+	}
+
+	const declaration = 'background-image: unset !important';
+	return selector
+		? `${ selector } { ${ declaration }; }`
+		: `${ declaration };`;
+}
+
+/**
+ * Returns fallback dimension styles that keep state styles aligned with the
+ * default dimensions block-support output.
+ *
+ * @param {Object} stateStyles State style object.
+ * @return {Object|undefined} Style object containing fallback dimension styles.
+ */
+function getStateFallbackDimensionStyles( stateStyles ) {
+	const dimensions = stateStyles?.dimensions;
+	if ( ! dimensions ) {
+		return undefined;
+	}
+
+	if ( isExplicitAspectRatio( dimensions.aspectRatio ) ) {
+		return {
+			dimensions: {
+				minHeight: 'unset',
+				height: 'unset',
+			},
+		};
+	}
+
+	if ( dimensions.minHeight || dimensions.height ) {
+		return {
+			dimensions: {
+				aspectRatio: 'unset',
+			},
+		};
+	}
+}
+
 /**
  * Generates CSS for a block instance state style object.
  *
@@ -146,14 +213,25 @@ function getStateFallbackBorderStyles( stateStyles ) {
  * @return {string} Generated stylesheet.
  */
 export function getStateStylesCSS( stateStyles, selector ) {
-	const css = compileCSS( stateStyles, { selector } );
+	const fallbackDimensionStyles =
+		getStateFallbackDimensionStyles( stateStyles );
+	const stylesWithDimensionFallbacks = fallbackDimensionStyles
+		? mergeStyleObjects( stateStyles, fallbackDimensionStyles )
+		: stateStyles;
+	const css = compileCSS( stylesWithDimensionFallbacks, { selector } );
 	const importantCSS = css ? css.replace( /;/g, ' !important;' ) : undefined;
 	const fallbackBorderStyles = getStateFallbackBorderStyles( stateStyles );
 	const fallbackCSS = fallbackBorderStyles
 		? compileCSS( fallbackBorderStyles, { selector } )
 		: undefined;
+	const backgroundResetCSS = getStateBackgroundResetCSS(
+		stateStyles,
+		selector
+	);
 
-	return [ importantCSS, fallbackCSS ].filter( Boolean ).join( '\n' );
+	return [ importantCSS, fallbackCSS, backgroundResetCSS ]
+		.filter( Boolean )
+		.join( '\n' );
 }
 
 function isPlainObject( value ) {

package/src/hooks/test/dimensions.js

@@ -1,6 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	getBlockType,
+	registerBlockType,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+
 /**
  * Internal dependencies
  */
+import dimensions from '../dimensions';
 import { getDimensionsClassesAndStyles } from '../use-dimensions-props';
 
 describe( 'getDimensionsClassesAndStyles', () => {
@@ -126,3 +136,64 @@ describe( 'getDimensionsClassesAndStyles', () => {
 		} );
 	} );
 } );
+
+describe( 'useBlockProps', () => {
+	const blockName = 'test/dimensions-with-aspect-ratio';
+
+	afterEach( () => {
+		if ( getBlockType( blockName ) ) {
+			unregisterBlockType( blockName );
+		}
+	} );
+
+	const registerDimensionsBlock = () =>
+		registerBlockType( blockName, {
+			apiVersion: 3,
+			title: 'Dimensions with aspect ratio',
+			category: 'text',
+			supports: {
+				dimensions: {
+					aspectRatio: true,
+				},
+			},
+		} );
+
+	it( 'unsets height styles when aspect ratio is explicit', () => {
+		registerDimensionsBlock();
+
+		expect(
+			dimensions.useBlockProps( {
+				name: blockName,
+				style: {
+					dimensions: {
+						aspectRatio: '16/9',
+					},
+				},
+			} )
+		).toEqual( {
+			className: 'has-aspect-ratio',
+			style: {
+				minHeight: 'unset',
+				height: 'unset',
+			},
+		} );
+	} );
+
+	it( 'does not unset height styles when aspect ratio is the default', () => {
+		registerDimensionsBlock();
+
+		expect(
+			dimensions.useBlockProps( {
+				name: blockName,
+				style: {
+					dimensions: {
+						aspectRatio: 'auto',
+					},
+				},
+			} )
+		).toEqual( {
+			className: '',
+			style: {},
+		} );
+	} );
+} );