@wordpress/block-editor 12.26.0 → 13.0.0

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

@@ -23,6 +23,7 @@ import {
 	isUnmodifiedBlock,
 	isReusableBlock,
 	getBlockDefaultClassName,
+	hasBlockSupport,
 	store as blocksStore,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
@@ -216,12 +217,14 @@ function BlockListBlock( {
 	}
 
 	const { 'data-align': dataAlign, ...restWrapperProps } = wrapperProps ?? {};
-
-	restWrapperProps.className = clsx(
-		restWrapperProps.className,
-		dataAlign && themeSupportsLayout && `align${ dataAlign }`,
-		! ( dataAlign && isSticky ) && className
-	);
+	const updatedWrapperProps = {
+		...restWrapperProps,
+		className: clsx(
+			restWrapperProps.className,
+			dataAlign && themeSupportsLayout && `align${ dataAlign }`,
+			! ( dataAlign && isSticky ) && className
+		),
+	};
 
 	// We set a new context with the adjusted and filtered wrapperProps (through
 	// `editor.BlockListBlock`), which the `BlockListBlockProvider` did not have
@@ -234,7 +237,7 @@ function BlockListBlock( {
 	return (
 		<PrivateBlockContext.Provider
 			value={ {
-				wrapperProps: restWrapperProps,
+				wrapperProps: updatedWrapperProps,
 				isAligned,
 				...context,
 			} }
@@ -262,6 +265,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 		__unstableMarkLastChangeAsPersistent,
 		moveBlocksToPosition,
 		removeBlock,
+		selectBlock,
 	} = dispatch( blockEditorStore );
 
 	// Do not add new properties here, use `useDispatch` instead to avoid
@@ -303,6 +307,28 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 				canInsertBlockType,
 			} = registry.select( blockEditorStore );
 
+			function switchToDefaultOrRemove() {
+				const block = getBlock( clientId );
+				const defaultBlockName = getDefaultBlockName();
+				if ( getBlockName( clientId ) !== defaultBlockName ) {
+					const replacement = switchToBlockType(
+						block,
+						defaultBlockName
+					);
+					if ( replacement && replacement.length ) {
+						replaceBlocks( clientId, replacement );
+					}
+				} else if ( isUnmodifiedDefaultBlock( block ) ) {
+					const nextBlockClientId = getNextBlockClientId( clientId );
+					if ( nextBlockClientId ) {
+						registry.batch( () => {
+							removeBlock( clientId );
+							selectBlock( nextBlockClientId );
+						} );
+					}
+				}
+			}
+
 			/**
 			 * Moves the block with clientId up one level. If the block type
 			 * cannot be inserted at the new location, it will be attempted to
@@ -342,7 +368,16 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 								getDefaultBlockName()
 							);
 
-							if ( replacement && replacement.length ) {
+							if (
+								replacement &&
+								replacement.length &&
+								replacement.every( ( block ) =>
+									canInsertBlockType(
+										block.name,
+										targetRootClientId
+									)
+								)
+							) {
 								insertBlocks(
 									replacement,
 									getBlockIndex( _clientId ),
@@ -350,6 +385,8 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 									changeSelection
 								);
 								removeBlock( firstClientId, false );
+							} else {
+								switchToDefaultOrRemove();
 							}
 						}
 
@@ -460,16 +497,8 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 					}
 
 					moveFirstItemUp( rootClientId );
-				} else if (
-					getBlockName( clientId ) !== getDefaultBlockName()
-				) {
-					const replacement = switchToBlockType(
-						getBlock( clientId ),
-						getDefaultBlockName()
-					);
-					if ( replacement && replacement.length ) {
-						replaceBlocks( clientId, replacement );
-					}
+				} else {
+					switchToDefaultOrRemove();
 				}
 			}
 		},
@@ -532,6 +561,7 @@ function BlockListBlockProvider( props ) {
 				isFirstMultiSelectedBlock,
 				getMultiSelectedBlockClientIds,
 				hasSelectedInnerBlock,
+				getBlocksByName,
 
 				getBlockIndex,
 				isBlockMultiSelected,
@@ -605,6 +635,17 @@ function BlockListBlockProvider( props ) {
 			const movingClientId = hasBlockMovingClientId();
 			const blockEditingMode = getBlockEditingMode( clientId );
 
+			const multiple = hasBlockSupport( blockName, 'multiple', true );
+
+			// For block types with `multiple` support, there is no "original
+			// block" to be found in the content, as the block itself is valid.
+			const blocksWithSameName = multiple
+				? []
+				: getBlocksByName( blockName );
+			const isInvalid =
+				blocksWithSameName.length &&
+				blocksWithSameName[ 0 ] !== clientId;
+
 			return {
 				...previewContext,
 				mode: getBlockMode( clientId ),
@@ -662,6 +703,9 @@ function BlockListBlockProvider( props ) {
 				hasEditableOutline:
 					blockEditingMode !== 'disabled' &&
 					getBlockEditingMode( rootClientId ) === 'disabled',
+				originalBlockClientId: isInvalid
+					? blocksWithSameName[ 0 ]
+					: false,
 			};
 		},
 		[ clientId, rootClientId ]
@@ -705,6 +749,7 @@ function BlockListBlockProvider( props ) {
 		hasEditableOutline,
 		className,
 		defaultClassName,
+		originalBlockClientId,
 	} = selectedProps;
 
 	// Users of the editor.BlockListBlock filter used to be able to
@@ -752,6 +797,7 @@ function BlockListBlockProvider( props ) {
 		defaultClassName,
 		mayDisplayControls,
 		mayDisplayParentControls,
+		originalBlockClientId,
 		themeSupportsLayout,
 	};
 

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

@@ -14,13 +14,7 @@ import {
 	useRef,
 	memo,
 } from '@wordpress/element';
-import {
-	GlobalStylesContext,
-	getMergedGlobalStyles,
-	useMobileGlobalStylesColors,
-	useGlobalStyles,
-	withFilters,
-} from '@wordpress/components';
+import { withFilters } from '@wordpress/components';
 import {
 	__experimentalGetAccessibleBlockLabel as getAccessibleBlockLabel,
 	getBlockType,
@@ -51,6 +45,12 @@ import { useSettings } from '../use-settings';
 import { unlock } from '../../lock-unlock';
 import BlockCrashBoundary from './block-crash-boundary';
 import BlockCrashWarning from './block-crash-warning';
+import {
+	getMergedGlobalStyles,
+	GlobalStylesContext,
+	useGlobalStyles,
+	useMobileGlobalStylesColors,
+} from '../global-styles/use-global-styles-context';
 
 const EMPTY_ARRAY = [];
 
@@ -669,8 +669,16 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 					}
 
 					moveFirstItemUp( rootClientId );
-				} else {
-					removeBlock( clientId );
+				} else if (
+					getBlockName( clientId ) !== getDefaultBlockName()
+				) {
+					const replacement = switchToBlockType(
+						getBlock( clientId ),
+						getDefaultBlockName()
+					);
+					if ( replacement && replacement.length ) {
+						replaceBlocks( clientId, replacement );
+					}
 				}
 			}
 		},

package/src/components/block-patterns-list/index.js

@@ -147,7 +147,10 @@ function BlockPattern( {
 							/>
 
 							{ showTitle && (
-								<HStack className="block-editor-patterns__pattern-details">
+								<HStack
+									className="block-editor-patterns__pattern-details"
+									spacing={ 2 }
+								>
 									{ pattern.type ===
 										INSERTER_PATTERN_TYPES.user &&
 										! pattern.syncStatus && (

package/src/components/block-patterns-list/style.scss

@@ -1,6 +1,6 @@
 .block-editor-block-patterns-list__list-item {
 	cursor: pointer;
-	margin-bottom: $grid-unit-30;
+	margin-bottom: $grid-unit-20;
 
 	// The list item contains absolutely positioned visually hidden text,
 	// so make this container relative. This prevents the bug experienced in
@@ -26,38 +26,41 @@
 	// the bottom margin set on `...__list-item` above
 	scroll-margin-bottom: ($grid-unit-40 + $grid-unit-30);
 
+	.block-editor-block-patterns-list__item-title {
+		flex-grow: 1;
+		font-size: $helptext-font-size;
+		text-align: left;
+	}
+
 	.block-editor-block-preview__container {
 		display: flex;
 		align-items: center;
 		overflow: hidden;
-		border-radius: 4px;
-	}
+		border-radius: $radius-block-ui;
 
-	.block-editor-block-patterns-list__item-title {
-		text-align: left;
-		flex-grow: 1;
-	}
-
-	&:hover .block-editor-block-preview__container {
-		box-shadow: 0 0 0 2px $gray-900;
+		&::after {
+			outline: $border-width solid rgba($black, 0.1);
+			outline-offset: -$border-width;
+			border-radius: $radius-block-ui;
+		}
 	}
 
-	&:focus .block-editor-block-preview__container {
-		@include button-style-outset__focus($gray-900);
+	&:hover:not(:focus) .block-editor-block-preview__container::after {
+		outline-color: rgba($black, 0.3);
 	}
 
-	&.block-editor-block-patterns-list__list-item-synced {
-		&:hover,
-		&:focus {
-			.block-editor-block-preview__container {
-				box-shadow: 0 0 0 2px var(--wp-block-synced-color);
-			}
-		}
+	&:focus .block-editor-block-preview__container::after {
+		outline-color: var(--wp-admin-theme-color);
+		outline-width: var(--wp-admin-border-width-focus);
+		outline-offset: calc((-1 * var(--wp-admin-border-width-focus)));
+		transition: outline 0.1s linear;
+		@include reduce-motion("transition");
 	}
 
-	.block-editor-patterns__pattern-details {
+	.block-editor-patterns__pattern-details:not(:empty) {
 		align-items: center;
 		margin-top: $grid-unit-10;
+		padding-bottom: $grid-unit-05; // Add more space for labels on user-created patterns.
 	}
 
 	.block-editor-patterns__pattern-icon-wrapper {

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

@@ -48,29 +48,3 @@
 	bottom: 0;
 	z-index: 1;
 }
-
-// Restrict these shadows to the context of the inserter.
-.editor-inserter-sidebar {
-	.block-editor-block-patterns-list__item {
-		.block-editor-block-preview__container {
-			box-shadow: 0 15px 25px rgb(0 0 0 / 7%);
-		}
-		&:focus,
-		&:hover {
-			.block-editor-block-preview__container {
-				box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%);
-			}
-		}
-
-		&.block-editor-block-patterns-list__list-item-synced {
-			&:hover,
-			&:focus {
-				.block-editor-block-preview__container {
-					box-shadow:
-						0 0 0 2px var(--wp-block-synced-color),
-						0 15px 25px rgb(0 0 0 / 7%);
-				}
-			}
-		}
-	}
-}

package/src/components/block-settings/container.native.js

@@ -16,6 +16,7 @@ import styles from './container.native.scss';
 import InspectorControls from '../inspector-controls';
 import ImageLinkDestinationsScreen from '../image-link-destinations';
 import useMultipleOriginColorsAndGradients from '../colors-gradients/use-multiple-origin-colors-and-gradients';
+import { useMobileGlobalStylesColors } from '../global-styles/use-global-styles-context';
 import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
 
 export const blockSettingsScreens = {
@@ -28,6 +29,7 @@ export const blockSettingsScreens = {
 
 export default function BottomSheetSettings( props ) {
 	const colorSettings = useMultipleOriginColorsAndGradients();
+	colorSettings.allAvailableColors = useMobileGlobalStylesColors();
 	const { closeGeneralSidebar } = useDispatch( 'core/edit-post' );
 	const editorSidebarOpened = useSelect( ( select ) =>
 		select( 'core/edit-post' ).isEditorSidebarOpened()

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

@@ -168,7 +168,7 @@ export function PrivateBlockToolbar( {
 					isLargeViewport &&
 					isDefaultEditingMode && <BlockParentSelector /> }
 				{ isUsingBindings && canBindBlock( blockName ) && (
-					<BlockBindingsIndicator />
+					<BlockBindingsIndicator clientIds={ blockClientIds } />
 				) }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
 					( isDefaultEditingMode || isSynced ) && (

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

@@ -231,11 +231,12 @@ export default function BlockTools( {
 					name="__unstable-block-tools-after"
 					ref={ blockToolbarAfterRef }
 				/>
-				{ isZoomOutMode && (
-					<ZoomOutModeInserters
-						__unstableContentRef={ __unstableContentRef }
-					/>
-				) }
+				{ window.__experimentalEnableZoomedOutPatternsTab &&
+					isZoomOutMode && (
+						<ZoomOutModeInserters
+							__unstableContentRef={ __unstableContentRef }
+						/>
+					) }
 			</InsertionPointOpenRef.Provider>
 		</div>
 	);

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

@@ -182,8 +182,8 @@
 	.block-editor-block-list__block-selection-button,
 	.block-editor-block-contextual-toolbar {
 		pointer-events: all;
-		margin-top: $grid-unit-15;
-		margin-bottom: $grid-unit-15;
+		margin-top: $grid-unit-10;
+		margin-bottom: $grid-unit-10;
 	}
 
 	.block-editor-block-contextual-toolbar {

package/src/components/block-tools/zoom-out-mode-inserters.js

@@ -21,6 +21,7 @@ function ZoomOutModeInserters() {
 		sectionRootClientId,
 		insertionPoint,
 		setInserterIsOpened,
+		selectedSection,
 	} = useSelect( ( select ) => {
 		const { getSettings, getBlockOrder } = select( blockEditorStore );
 		const { sectionRootClientId: root } = unlock( getSettings() );
@@ -32,6 +33,7 @@ function ZoomOutModeInserters() {
 		// eslint-disable-next-line @wordpress/data-no-store-string-literals
 		const editor = select( 'core/editor' );
 		return {
+			selectedSection: editor.getSelectedBlock(),
 			blockOrder: getBlockOrder( root ),
 			insertionPoint: unlock( editor ).getInsertionPoint(),
 			sectionRootClientId: root,
@@ -49,8 +51,7 @@ function ZoomOutModeInserters() {
 		}
 		// reset insertion point when the block order changes
 		setInserterIsOpened( true );
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ blockOrder ] );
+	}, [ blockOrder, setInserterIsOpened ] );
 
 	// Defer the initial rendering to avoid the jumps due to the animation.
 	useEffect( () => {
@@ -62,7 +63,7 @@ function ZoomOutModeInserters() {
 		};
 	}, [] );
 
-	if ( ! isReady ) {
+	if ( ! isReady || ! selectedSection ) {
 		return null;
 	}
 

package/src/components/border-radius-control/all-input-control.js

@@ -61,7 +61,7 @@ export default function AllInputControl( {
 			onChange={ handleOnChange }
 			onUnitChange={ handleOnUnitChange }
 			placeholder={ allPlaceholder }
-			size={ '__unstable-large' }
+			size="__unstable-large"
 		/>
 	);
 }

package/src/components/border-radius-control/input-controls.js

@@ -80,7 +80,7 @@ export default function BoxInputControls( {
 								onUnitChange={ createHandleOnUnitChange(
 									corner
 								) }
-								size={ '__unstable-large' }
+								size="__unstable-large"
 							/>
 						</div>
 					</Tooltip>

package/src/components/child-layout-control/index.js

@@ -111,7 +111,7 @@ export default function ChildLayoutControl( {
 				>
 					<ToggleGroupControl
 						__nextHasNoMarginBottom
-						size={ '__unstable-large' }
+						size="__unstable-large"
 						label={ childLayoutOrientation( parentLayout ) }
 						value={ selfStretch || 'fit' }
 						help={ helpText( selfStretch, parentLayout ) }
@@ -126,24 +126,24 @@ export default function ChildLayoutControl( {
 						isBlock
 					>
 						<ToggleGroupControlOption
-							key={ 'fit' }
-							value={ 'fit' }
+							key="fit"
+							value="fit"
 							label={ __( 'Fit' ) }
 						/>
 						<ToggleGroupControlOption
-							key={ 'fill' }
-							value={ 'fill' }
+							key="fill"
+							value="fill"
 							label={ __( 'Fill' ) }
 						/>
 						<ToggleGroupControlOption
-							key={ 'fixed' }
-							value={ 'fixed' }
+							key="fixed"
+							value="fixed"
 							label={ __( 'Fixed' ) }
 						/>
 					</ToggleGroupControl>
 					{ selfStretch === 'fixed' && (
 						<UnitControl
-							size={ '__unstable-large' }
+							size="__unstable-large"
 							onChange={ ( value ) => {
 								onChange( {
 									selfStretch,
@@ -166,7 +166,7 @@ export default function ChildLayoutControl( {
 						panelId={ panelId }
 					>
 						<InputControl
-							size={ '__unstable-large' }
+							size="__unstable-large"
 							label={ __( 'Column span' ) }
 							type="number"
 							onChange={ ( value ) => {
@@ -181,7 +181,7 @@ export default function ChildLayoutControl( {
 							min={ 1 }
 						/>
 						<InputControl
-							size={ '__unstable-large' }
+							size="__unstable-large"
 							label={ __( 'Row span' ) }
 							type="number"
 							onChange={ ( value ) => {
@@ -210,7 +210,7 @@ export default function ChildLayoutControl( {
 						>
 							<FlexItem style={ { width: '50%' } }>
 								<InputControl
-									size={ '__unstable-large' }
+									size="__unstable-large"
 									label={ __( 'Column' ) }
 									type="number"
 									onChange={ ( value ) => {
@@ -234,7 +234,7 @@ export default function ChildLayoutControl( {
 							</FlexItem>
 							<FlexItem style={ { width: '50%' } }>
 								<InputControl
-									size={ '__unstable-large' }
+									size="__unstable-large"
 									label={ __( 'Row' ) }
 									type="number"
 									onChange={ ( value ) => {

package/src/components/colors/utils.js

@@ -17,6 +17,8 @@ import { unlock } from '../../lock-unlock';
 
 extend( [ namesPlugin, a11yPlugin ] );
 
+const { kebabCase } = unlock( componentsPrivateApis );
+
 /**
  * Provided an array of color objects as set by the theme or by the editor defaults,
  * and the values of the defined color or custom color returns a color object describing the color.
@@ -75,8 +77,6 @@ export function getColorClassName( colorContextName, colorSlug ) {
 		return undefined;
 	}
 
-	const { kebabCase } = unlock( componentsPrivateApis );
-
 	return `has-${ kebabCase( colorSlug ) }-${ colorContextName }`;
 }
 

package/src/components/colors/with-colors.js

@@ -17,6 +17,8 @@ import {
 import { useSettings } from '../use-settings';
 import { unlock } from '../../lock-unlock';
 
+const { kebabCase } = unlock( componentsPrivateApis );
+
 /**
  * Capitalizes the first letter in a string.
  *
@@ -80,7 +82,6 @@ const withEditorColorPalette = () =>
  * @return {Component} The component that can be used as a HOC.
  */
 function createColorHOC( colorTypes, withColorPalette ) {
-	const { kebabCase } = unlock( componentsPrivateApis );
 	const colorMap = colorTypes.reduce( ( colorObject, colorType ) => {
 		return {
 			...colorObject,

package/src/components/colors-gradients/control.js

@@ -21,6 +21,7 @@ import {
 import { useSettings } from '../use-settings';
 import { unlock } from '../../lock-unlock';
 
+const { Tabs } = unlock( componentsPrivateApis );
 const colorsAndGradientKeys = [
 	'colors',
 	'disableCustomColors',
@@ -106,11 +107,6 @@ function ColorGradientControlInner( {
 		</div>
 	);
 
-	// Unlocking `Tabs` too early causes the `unlock` method to receive an empty
-	// object, due to circular dependencies.
-	// See https://github.com/WordPress/gutenberg/issues/52692
-	const { Tabs } = unlock( componentsPrivateApis );
-
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom
@@ -149,18 +145,14 @@ function ColorGradientControlInner( {
 								</Tabs.TabList>
 								<Tabs.TabPanel
 									tabId={ TAB_IDS.color }
-									className={
-										'block-editor-color-gradient-control__panel'
-									}
+									className="block-editor-color-gradient-control__panel"
 									focusable={ false }
 								>
 									{ tabPanels.color }
 								</Tabs.TabPanel>
 								<Tabs.TabPanel
 									tabId={ TAB_IDS.gradient }
-									className={
-										'block-editor-color-gradient-control__panel'
-									}
+									className="block-editor-color-gradient-control__panel"
 									focusable={ false }
 								>
 									{ tabPanels.gradient }

package/src/components/contrast-checker/test/index.js

@@ -375,7 +375,7 @@ describe( 'ContrastChecker', () => {
 		render(
 			<ContrastChecker
 				backgroundColor={ backgroundColor }
-				textColor={ 'rgba(0,0,0,0.9)' }
+				textColor="rgba(0,0,0,0.9)"
 				linkColor={ linkColor }
 				isLargeText={ isLargeText }
 				enableAlphaChecker
@@ -396,7 +396,7 @@ describe( 'ContrastChecker', () => {
 		render(
 			<ContrastChecker
 				backgroundColor={ backgroundColor }
-				linkColor={ 'rgba(0,0,0,0.9)' }
+				linkColor="rgba(0,0,0,0.9)"
 				textColor={ textColor }
 				isLargeText={ isLargeText }
 				enableAlphaChecker
@@ -416,7 +416,7 @@ describe( 'ContrastChecker', () => {
 	test( 'should render nothing when the colors meet AA WCAG guidelines but the background color only has alpha transparency with alpha checker enabled.', () => {
 		const { container } = render(
 			<ContrastChecker
-				backgroundColor={ 'rgba(255,255,255,0.7)' }
+				backgroundColor="rgba(255,255,255,0.7)"
 				textColor={ textColor }
 				linkColor={ linkColor }
 				isLargeText={ isLargeText }
@@ -450,7 +450,7 @@ describe( 'ContrastChecker', () => {
 			<ContrastChecker
 				backgroundColor={ colorWithTransparency }
 				textColor={ sameShade }
-				linkColor={ 'rgba(0,0,0,0.9)' }
+				linkColor="rgba(0,0,0,0.9)"
 				isLargeText={ isLargeText }
 				fallbackBackgroundColor={ fallbackBackgroundColor }
 				fallbackTextColor={ fallbackTextColor }
@@ -472,7 +472,7 @@ describe( 'ContrastChecker', () => {
 		render(
 			<ContrastChecker
 				backgroundColor={ sameShade }
-				textColor={ 'rgba(0,0,0,0.9)' }
+				textColor="rgba(0,0,0,0.9)"
 				linkColor={ sameShade }
 				isLargeText={ isLargeText }
 				fallbackBackgroundColor={ fallbackBackgroundColor }
@@ -494,9 +494,9 @@ describe( 'ContrastChecker', () => {
 	test( 'should render component when the colors meet AA WCAG guidelines but all colors have alpha transparency with alpha checker enabled.', () => {
 		render(
 			<ContrastChecker
-				backgroundColor={ 'rgba(255,255,255,0.7)' }
-				linkColor={ 'rgba(0,0,0,0.7)' }
-				textColor={ 'rgba(0,0,0,0.7)' }
+				backgroundColor="rgba(255,255,255,0.7)"
+				linkColor="rgba(0,0,0,0.7)"
+				textColor="rgba(0,0,0,0.7)"
 				isLargeText={ isLargeText }
 				enableAlphaChecker
 			/>

package/src/components/dimensions-tool/aspect-ratio-tool.js

@@ -92,7 +92,7 @@ export default function AspectRatioTool( {
 				value={ displayValue }
 				options={ options ?? aspectRatioOptions }
 				onChange={ onChange }
-				size={ '__unstable-large' }
+				size="__unstable-large"
 				__nextHasNoMarginBottom
 			/>
 		</ToolsPanelItem>

package/src/components/dimensions-tool/scale-tool.js

@@ -110,7 +110,7 @@ export default function ScaleTool( {
 				help={ scaleHelp[ displayValue ] }
 				value={ displayValue }
 				onChange={ onChange }
-				size={ '__unstable-large' }
+				size="__unstable-large"
 			>
 				{ options.map( ( option ) => (
 					<ToggleGroupControlOption