@wordpress/block-library 9.48.1 → 10.0.0

package/src/avatar/index.php

@@ -67,7 +67,7 @@ function render_block_core_avatar( $attributes, $content, $block ) {
 			// translators: 1: Author archive link. 2: Link target. %3$s Aria label. %4$s Avatar image.
 			$avatar_block = sprintf( '<a href="%1$s" target="%2$s" %3$s class="wp-block-avatar__link">%4$s</a>', esc_url( get_author_posts_url( $author_id ) ), esc_attr( $attributes['linkTarget'] ), $label, $avatar_block );
 		}
-		return sprintf( '<div %1s>%2s</div>', $wrapper_attributes, $avatar_block );
+		return sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $avatar_block );
 	}
 	$comment = get_comment( $block->context['commentId'] );
 	if ( ! $comment ) {
@@ -93,7 +93,7 @@ function render_block_core_avatar( $attributes, $content, $block ) {
 		}
 		$avatar_block = sprintf( '<a href="%1$s" target="%2$s" %3$s class="wp-block-avatar__link">%4$s</a>', esc_url( $comment->comment_author_url ), esc_attr( $attributes['linkTarget'] ), $label, $avatar_block );
 	}
-	return sprintf( '<div %1s>%2s</div>', $wrapper_attributes, $avatar_block );
+	return sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $avatar_block );
 }
 
 /**

package/src/block/index.php

@@ -1,4 +1,4 @@
-<?php // phpcs:ignore WordPress.Files.FileName.InvalidClassFileName // Needed for WP_Block_Cloner helper class.
+<?php
 /**
  * Server-side rendering of the `core/block` block.
  *
@@ -83,31 +83,7 @@ function render_block_core_block( $attributes, $content, $block_instance ) {
 	 */
 	$block_instance->parsed_block['innerBlocks']  = parse_blocks( $content );
 	$block_instance->parsed_block['innerContent'] = array_fill( 0, count( $block_instance->parsed_block['innerBlocks'] ), null );
-	if ( method_exists( $block_instance, 'refresh_context_dependents' ) ) {
-		// WP_Block::refresh_context_dependents() was introduced in WordPress 6.8.
-		$block_instance->refresh_context_dependents();
-	} else {
-		// This branch can be removed once Gutenberg requires WordPress 6.8 or later.
-		if ( ! class_exists( 'WP_Block_Cloner' ) ) {
-			// phpcs:ignore Gutenberg.Commenting.SinceTag.MissingClassSinceTag
-			class WP_Block_Cloner extends WP_Block {
-				/**
-				 * Static methods of subclasses have access to protected properties
-				 * of instances of the parent class.
-				 * In this case, this gives us access to `available_context` and `registry`.
-				 */
-				// phpcs:ignore Gutenberg.Commenting.SinceTag.MissingMethodSinceTag
-				public static function clone_instance( $instance ) {
-					return new WP_Block(
-						$instance->parsed_block,
-						$instance->available_context,
-						$instance->registry
-					);
-				}
-			}
-		}
-		$block_instance = WP_Block_Cloner::clone_instance( $block_instance );
-	}
+	$block_instance->refresh_context_dependents();
 
 	$content = $block_instance->render( array( 'dynamic' => false ) );
 	unset( $seen_refs[ $attributes['ref'] ] );

package/src/breadcrumbs/edit.js

@@ -264,7 +264,6 @@ export default function BreadcrumbEdit( {
 						}
 					>
 						<TextControl
-							__next40pxDefaultSize
 							autoComplete="off"
 							label={ __( 'Separator' ) }
 							value={ separator }

package/src/button/edit.js

@@ -449,7 +449,6 @@ function ButtonEdit( props ) {
 				/>
 				{ isLinkTag && (
 					<TextControl
-						__next40pxDefaultSize
 						label={ __( 'Link relation' ) }
 						help={ createInterpolateElement(
 							__(

package/src/comment-author-avatar/index.php

@@ -57,14 +57,14 @@ function render_block_core_comment_author_avatar( $attributes, $content, $block
 		array(
 			'height'     => $height,
 			'width'      => $width,
-			'extra_attr' => sprintf( 'style="%1s"', $styles ),
+			'extra_attr' => sprintf( 'style="%s"', $styles ),
 			'class'      => $classes,
 		)
 	);
 	if ( isset( $spacing_attributes ) ) {
-		return sprintf( '<div style="%1s">%2s</div>', esc_attr( $spacing_string ), $avatar_block );
+		return sprintf( '<div style="%1$s">%2$s</div>', esc_attr( $spacing_string ), $avatar_block );
 	}
-	return sprintf( '<div>%1s</div>', $avatar_block );
+	return sprintf( '<div>%s</div>', $avatar_block );
 }
 
 /**

package/src/comment-author-name/index.php

@@ -40,7 +40,7 @@ function render_block_core_comment_author_name( $attributes, $content, $block )
 	$link               = get_comment_author_url( $comment );
 
 	if ( ! empty( $link ) && ! empty( $attributes['isLink'] ) && ! empty( $attributes['linkTarget'] ) ) {
-		$comment_author = sprintf( '<a rel="external nofollow ugc" href="%1s" target="%2s" >%3s</a>', esc_url( $link ), esc_attr( $attributes['linkTarget'] ), $comment_author );
+		$comment_author = sprintf( '<a rel="external nofollow ugc" href="%1$s" target="%2$s" >%3$s</a>', esc_url( $link ), esc_attr( $attributes['linkTarget'] ), $comment_author );
 	}
 	if ( '0' === $comment->comment_approved && ! $show_pending_links ) {
 		$comment_author = wp_kses( $comment_author, array() );

package/src/comment-date/index.php

@@ -37,7 +37,7 @@ function render_block_core_comment_date( $attributes, $content, $block ) {
 	$link = get_comment_link( $comment );
 
 	if ( ! empty( $attributes['isLink'] ) ) {
-		$formatted_date = sprintf( '<a href="%1s">%2s</a>', esc_url( $link ), $formatted_date );
+		$formatted_date = sprintf( '<a href="%1$s">%2$s</a>', esc_url( $link ), $formatted_date );
 	}
 
 	return sprintf(

package/src/cover/edit/block-controls.js

@@ -11,8 +11,8 @@ import {
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { MenuItem } from '@wordpress/components';
-import { link } from '@wordpress/icons';
+import { MenuItem, ToolbarButton } from '@wordpress/components';
+import { crop, link } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -31,6 +31,9 @@ export default function CoverBlockControls( {
 	toggleUseFeaturedImage,
 	onClearMedia,
 	onSelectEmbedUrl,
+	onEditMedia,
+	editMediaButtonRef,
+	showEditMediaButton,
 	blockEditingMode,
 } ) {
 	const {
@@ -106,6 +109,15 @@ export default function CoverBlockControls( {
 						onToggle={ toggleMinFullHeight }
 						isDisabled={ ! hasInnerBlocks }
 					/>
+					{ showEditMediaButton && (
+						<ToolbarButton
+							ref={ editMediaButtonRef }
+							icon={ crop }
+							label={ __( 'Crop background image' ) }
+							onClick={ onEditMedia }
+							aria-haspopup="dialog"
+						/>
+					) }
 				</BlockControls>
 			) }
 			<BlockControls group="other">

package/src/cover/edit/embed-video-url-input.js

@@ -58,7 +58,6 @@ export default function EmbedVideoUrlInput( {
 				) }
 				<TextControl
 					type="url"
-					__next40pxDefaultSize
 					label={ __( 'Video URL' ) }
 					value={ url }
 					onChange={ ( value ) => {

package/src/cover/edit/index.js

@@ -8,6 +8,7 @@ import clsx from 'clsx';
  */
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import {
+	useCallback,
 	useEffect,
 	useLayoutEffect,
 	useMemo,
@@ -24,6 +25,7 @@ import {
 	__experimentalUseGradient,
 	store as blockEditorStore,
 	useBlockEditingMode,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -55,6 +57,9 @@ import {
 } from './color-utils';
 import { DEFAULT_MEDIA_SIZE_SLUG } from '../constants';
 import { getBackgroundEmbedHtml } from '../embed-video-utils';
+import { unlock } from '../../lock-unlock';
+
+const { openMediaEditorModalKey } = unlock( blockEditorPrivateApis );
 
 function getInnerBlocksTemplate( attributes ) {
 	return [
@@ -123,6 +128,11 @@ function CoverEdit( {
 		postId
 	);
 	const { getSettings } = useSelect( blockEditorStore );
+	const openMediaEditorModal = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings()[ openMediaEditorModalKey ],
+		[]
+	);
 
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
@@ -490,6 +500,7 @@ function CoverEdit( {
 	);
 
 	const mediaElement = useRef();
+	const editMediaButtonRef = useRef();
 	const currentSettings = {
 		isVideoBackground,
 		isImageBackground,
@@ -500,6 +511,78 @@ function CoverEdit( {
 		overlayColor,
 	};
 
+	const openCoverMediaEditorModal = useCallback( () => {
+		if ( ! id || ! openMediaEditorModal ) {
+			return;
+		}
+
+		openMediaEditorModal( {
+			id,
+			onClose: () => {
+				editMediaButtonRef.current?.focus();
+			},
+			onUpdate: async ( { id: newId, url: newUrl } ) => {
+				if ( typeof newId !== 'number' ) {
+					return;
+				}
+
+				const nextAttributes = {
+					id: newId,
+					backgroundType: IMAGE_BACKGROUND_TYPE,
+					...( newUrl ? { url: newUrl } : {} ),
+					...( newId !== id
+						? { sizeSlug: DEFAULT_MEDIA_SIZE_SLUG }
+						: {} ),
+				};
+
+				if ( newUrl ) {
+					const averageBackgroundColor =
+						await getMediaColor( newUrl );
+
+					// Read latest values after await to avoid stale closures.
+					const {
+						attributes: currentAttrs,
+						overlayColor: currentOverlay,
+					} = propsRef.current;
+
+					let newOverlayColor = currentOverlay.color;
+					if ( ! currentAttrs.isUserOverlayColor ) {
+						newOverlayColor = averageBackgroundColor;
+						setOverlayColor( newOverlayColor );
+
+						// Make undo revert the next setAttributes and the previous setOverlayColor.
+						__unstableMarkNextChangeAsNotPersistent();
+					}
+
+					nextAttributes.isDark = compositeIsDark(
+						currentAttrs.dimRatio,
+						newOverlayColor,
+						averageBackgroundColor
+					);
+					nextAttributes.isUserOverlayColor =
+						currentAttrs.isUserOverlayColor || false;
+				}
+
+				setAttributes( nextAttributes );
+			},
+		} );
+	}, [
+		id,
+		openMediaEditorModal,
+		setAttributes,
+		setOverlayColor,
+		__unstableMarkNextChangeAsNotPersistent,
+	] );
+
+	const showEditMediaButton =
+		hasNonContentControls &&
+		! useFeaturedImage &&
+		isImageBackground &&
+		!! id &&
+		!! url &&
+		! isUploadingMedia &&
+		!! openMediaEditorModal;
+
 	const toggleUseFeaturedImage = async () => {
 		const newUseFeaturedImage = ! useFeaturedImage;
 
@@ -556,6 +639,9 @@ function CoverEdit( {
 			toggleUseFeaturedImage={ toggleUseFeaturedImage }
 			onClearMedia={ onClearMedia }
 			blockEditingMode={ blockEditingMode }
+			onEditMedia={ openCoverMediaEditorModal }
+			editMediaButtonRef={ editMediaButtonRef }
+			showEditMediaButton={ showEditMediaButton }
 		/>
 	);
 

package/src/cover/edit/inspector-controls.js

@@ -34,12 +34,21 @@ import { Link } from '@wordpress/ui';
 import { COVER_MIN_HEIGHT, mediaPosition } from '../shared';
 import { unlock } from '../../lock-unlock';
 import { useToolsPanelDropdownMenuProps } from '../../utils/hooks';
+import {
+	getActiveDimensionValue,
+	getDimensionResetAttributes,
+	getDimensionUpdateAttributes,
+	getStyleStateKey,
+} from '../../utils/style-state';
 import { DEFAULT_MEDIA_SIZE_SLUG } from '../constants';
 import PosterImage from '../../utils/poster-image';
 
-const { cleanEmptyObject, ResolutionTool, HTMLElementControl } = unlock(
-	blockEditorPrivateApis
-);
+const {
+	cleanEmptyObject,
+	isDefaultBlockStyleState,
+	ResolutionTool,
+	HTMLElementControl,
+} = unlock( blockEditorPrivateApis );
 
 function CoverHeightInput( {
 	onChange,
@@ -124,20 +133,45 @@ export default function CoverInspectorControls( {
 	const sizeSlug = attributes.sizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 
 	const { gradientValue, setGradient } = __experimentalUseGradient();
-	const { imageSizes, hasSelectedStyleState } = useSelect(
+	const { imageSizes, selectedStyleState } = useSelect(
 		( select ) => {
-			const {
-				getSettings,
-				hasSelectedStyleState: hasSelectedBlockStyleState,
-			} = unlock( select( blockEditorStore ) );
+			const { getSettings, getSelectedBlockStyleState } = unlock(
+				select( blockEditorStore )
+			);
 
 			return {
 				imageSizes: getSettings()?.imageSizes,
-				hasSelectedStyleState: hasSelectedBlockStyleState( clientId ),
+				selectedStyleState: getSelectedBlockStyleState( clientId ),
 			};
 		},
 		[ clientId ]
 	);
+	const hasSelectedStyleState =
+		! isDefaultBlockStyleState( selectedStyleState );
+	const selectedStyleStateKey = getStyleStateKey( selectedStyleState );
+	const stateMinHeight = getActiveDimensionValue( {
+		attributes,
+		selectedState: selectedStyleState,
+		hasSelectedStyleState,
+		attributeKey: 'minHeight',
+		styleKey: 'minHeight',
+		rootValue: undefined,
+	} );
+	const [ stateMinHeightValue, stateMinHeightUnit ] =
+		parseQuantityAndUnitFromRawValue( stateMinHeight || '' );
+	const activeMinHeight = hasSelectedStyleState
+		? stateMinHeightValue
+		: minHeight;
+	const activeMinHeightUnit = hasSelectedStyleState
+		? stateMinHeightUnit || minHeightUnit
+		: minHeightUnit;
+	const activeAspectRatio = getActiveDimensionValue( {
+		attributes,
+		selectedState: selectedStyleState,
+		hasSelectedStyleState,
+		attributeKey: 'aspectRatio',
+		rootValue: attributes?.style?.dimensions?.aspectRatio,
+	} );
 
 	const image = useSelect(
 		( select ) =>
@@ -203,6 +237,52 @@ export default function CoverInspectorControls( {
 	const showOverlayControls =
 		colorGradientSettings.hasColorsOrGradients && ! hasSelectedStyleState;
 
+	const setMinHeightAttributes = ( nextMinHeight, nextUnit ) => {
+		if ( hasSelectedStyleState ) {
+			setAttributes(
+				getDimensionUpdateAttributes( {
+					style: attributes.style,
+					selectedState: selectedStyleState,
+					hasSelectedStyleState,
+					nextDimensions: {
+						minHeight:
+							nextMinHeight === undefined
+								? undefined
+								: `${ nextMinHeight }${
+										nextUnit || activeMinHeightUnit || 'px'
+								  }`,
+						aspectRatio: undefined,
+					},
+				} )
+			);
+			return;
+		}
+
+		setAttributes( {
+			minHeight: nextMinHeight,
+			style: cleanEmptyObject( {
+				...attributes?.style,
+				dimensions: {
+					...attributes?.style?.dimensions,
+					aspectRatio: undefined, // Reset aspect ratio when minHeight is set.
+				},
+			} ),
+		} );
+	};
+
+	const getResetMinHeightAttributes = ( attrs = attributes ) => {
+		return getDimensionResetAttributes( {
+			style: attrs.style,
+			selectedState: selectedStyleState,
+			hasSelectedStyleState,
+			keys: [ 'minHeight' ],
+			defaultAttributes: {
+				minHeight: undefined,
+				minHeightUnit: undefined,
+			},
+		} );
+	};
+
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	return (
@@ -401,53 +481,43 @@ export default function CoverInspectorControls( {
 					</ToolsPanelItem>
 				</InspectorControls>
 			) }
-			{ ! hasSelectedStyleState && (
-				<InspectorControls group="dimensions">
-					<ToolsPanelItem
-						className="single-column"
-						hasValue={ () => !! minHeight }
-						label={ __( 'Minimum height' ) }
-						onDeselect={ () =>
-							setAttributes( {
-								minHeight: undefined,
-								minHeightUnit: undefined,
-							} )
+			<InspectorControls group="dimensions">
+				<ToolsPanelItem
+					key={ selectedStyleStateKey }
+					className="single-column"
+					hasValue={ () => !! activeMinHeight }
+					label={ __( 'Minimum height' ) }
+					onDeselect={ () =>
+						setAttributes( getResetMinHeightAttributes() )
+					}
+					resetAllFilter={ getResetMinHeightAttributes }
+					isShownByDefault
+					panelId={ clientId }
+				>
+					<CoverHeightInput
+						value={ activeAspectRatio ? '' : activeMinHeight }
+						unit={ activeMinHeightUnit }
+						onChange={ ( newMinHeight ) =>
+							setMinHeightAttributes( newMinHeight )
 						}
-						resetAllFilter={ () => ( {
-							minHeight: undefined,
-							minHeightUnit: undefined,
-						} ) }
-						isShownByDefault
-						panelId={ clientId }
-					>
-						<CoverHeightInput
-							value={
-								attributes?.style?.dimensions?.aspectRatio
-									? ''
-									: minHeight
-							}
-							unit={ minHeightUnit }
-							onChange={ ( newMinHeight ) =>
-								setAttributes( {
-									minHeight: newMinHeight,
-									style: cleanEmptyObject( {
-										...attributes?.style,
-										dimensions: {
-											...attributes?.style?.dimensions,
-											aspectRatio: undefined, // Reset aspect ratio when minHeight is set.
-										},
-									} ),
-								} )
-							}
-							onUnitChange={ ( nextUnit ) =>
-								setAttributes( {
-									minHeightUnit: nextUnit,
-								} )
+						onUnitChange={ ( nextUnit ) => {
+							if ( hasSelectedStyleState ) {
+								if ( activeMinHeight !== undefined ) {
+									setMinHeightAttributes(
+										activeMinHeight,
+										nextUnit
+									);
+								}
+								return;
 							}
-						/>
-					</ToolsPanelItem>
-				</InspectorControls>
-			) }
+
+							setAttributes( {
+								minHeightUnit: nextUnit,
+							} );
+						} }
+					/>
+				</ToolsPanelItem>
+			</InspectorControls>
 			<InspectorControls group="advanced">
 				<HTMLElementControl
 					tagName={ tagName }

package/src/cover/test/edit.js

@@ -39,6 +39,50 @@ const disabledColorSettings = {
 	disableCustomGradients: true,
 };
 
+/**
+ * Runs `callback` with `requestAnimationFrame` callbacks flushed on a microtask
+ * ahead of any pending `setTimeout( 0 )` timers, then restores the original.
+ *
+ * In a browser, Ariakit normalizes the matrix's roving tabindex in a
+ * `requestAnimationFrame` before `useFocusOnMount`'s `setTimeout( 0 )` focuses
+ * the active (center) cell, so opening the dropdown leaves the content position
+ * untouched. JSDOM implements `requestAnimationFrame` as a ~16ms timer, which
+ * inverts the ordering and would otherwise focus and select the first DOM cell.
+ *
+ * @param {() => ( Promise< unknown > | unknown )} callback
+ * @return {Promise< unknown >} Resolves with the callback's return value.
+ */
+async function withAnimationFramesBeforeTimers( callback ) {
+	const originalRequestAnimationFrame = global.requestAnimationFrame;
+
+	let flushing = false;
+	global.requestAnimationFrame = ( frameCallback ) => {
+		// Frames scheduled while flushing fall back to the real implementation
+		// so self-rescheduling loops (e.g. Popover's Floating UI `autoUpdate`)
+		// don't spin forever on the microtask queue.
+		if ( flushing ) {
+			return originalRequestAnimationFrame( frameCallback );
+		}
+
+		queueMicrotask( () => {
+			flushing = true;
+			try {
+				frameCallback( performance.now() );
+			} finally {
+				flushing = false;
+			}
+		} );
+
+		return 0;
+	};
+
+	try {
+		return await callback();
+	} finally {
+		global.requestAnimationFrame = originalRequestAnimationFrame;
+	}
+}
+
 async function setup( attributes, useCoreBlocks, customSettings ) {
 	const testBlock = { name: 'core/cover', attributes };
 	const settings = customSettings || defaultSettings;
@@ -149,8 +193,13 @@ describe( 'Cover block', () => {
 			await setup();
 			await createAndSelectBlock();
 
-			await userEvent.click(
-				screen.getByLabelText( 'Change content position' )
+			// Open the matrix dropdown with browser-like frame ordering so
+			// focus-on-mount lands on the active cell instead of dirtying the
+			// content position.
+			await withAnimationFramesBeforeTimers( () =>
+				userEvent.click(
+					screen.getByLabelText( 'Change content position' )
+				)
 			);
 
 			expect( screen.getByLabelText( 'Block: Cover' ) ).not.toHaveClass(

package/src/details/edit.js

@@ -105,7 +105,6 @@ function DetailsEdit( { attributes, setAttributes, clientId } ) {
 			</InspectorControls>
 			<InspectorControls group="advanced">
 				<TextControl
-					__next40pxDefaultSize
 					label={ __( 'Name attribute' ) }
 					value={ name || '' }
 					onChange={ ( newName ) =>

package/src/editor.scss

@@ -49,8 +49,6 @@
 @use "./social-links/editor.scss" as *;
 @use "./spacer/editor.scss" as *;
 @use "./table/editor.scss" as *;
-@use "./tab-list/editor.scss" as *;
-@use "./tab/editor.scss" as *;
 @use "./template-part/editor.scss" as *;
 @use "./term-template/editor.scss" as *;
 @use "./text-columns/editor.scss" as *;

package/src/file/edit.js

@@ -23,9 +23,9 @@ import {
 	store as blockEditorStore,
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
-import { useEffect, useState } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { useCopyToClipboard } from '@wordpress/compose';
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { file as icon } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
@@ -90,8 +90,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	);
 
 	const { createErrorNotice } = useDispatch( noticesStore );
-	const { toggleSelection, __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( blockEditorStore );
+	const { toggleSelection } = useDispatch( blockEditorStore );
 
 	useUploadMediaFromBlobURL( {
 		url: temporaryURL,
@@ -99,18 +98,6 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		onError: onUploadError,
 	} );
 
-	// Note: Handle setting a default value for `downloadButtonText` via HTML API
-	// when it supports replacing text content for HTML tags.
-	useEffect( () => {
-		if ( RichText.isEmpty( downloadButtonText ) ) {
-			__unstableMarkNextChangeAsNotPersistent();
-			setAttributes( {
-				downloadButtonText: _x( 'Download', 'button label' ),
-			} );
-		}
-		// This effect should only run on mount.
-	}, [] );
-
 	function onSelectFile( newMedia ) {
 		if ( ! newMedia || ! newMedia.url ) {
 			// Reset attributes.

package/src/file/index.js

@@ -14,6 +14,7 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
+import variations from './variations';
 import { unlock } from '../lock-unlock';
 
 const { fieldsKey, formKey } = unlock( blocksPrivateApis );
@@ -34,6 +35,7 @@ export const settings = {
 	deprecated,
 	edit,
 	save,
+	variations,
 };
 
 if ( window.__experimentalContentOnlyInspectorFields ) {