@wordpress/components 28.4.0 → 28.6.0

package/src/date-time/time/index.tsx

@@ -13,6 +13,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import BaseControl from '../../base-control';
+import { VisuallyHidden } from '../../visually-hidden';
 import SelectControl from '../../select-control';
 import TimeZone from './timezone';
 import type { TimeInputValue, TimePickerProps } from '../types';
@@ -32,7 +33,7 @@ import {
 	validateInputElementTarget,
 } from '../utils';
 import { TIMEZONELESS_FORMAT } from '../constants';
-import { TimeInput } from '../time-input';
+import { TimeInput } from './time-input';
 
 const VALID_DATE_ORDERS = [ 'dmy', 'mdy', 'ymd' ];
 
@@ -61,6 +62,7 @@ export function TimePicker( {
 	currentTime,
 	onChange,
 	dateOrder: dateOrderProp,
+	hideLabelFromVision = false,
 }: TimePickerProps ) {
 	const [ date, setDate ] = useState( () =>
 		// Truncate the date at the minutes, see: #15495.
@@ -77,10 +79,28 @@ export function TimePicker( {
 		);
 	}, [ currentTime ] );
 
+	const monthOptions = [
+		{ value: '01', label: __( 'January' ) },
+		{ value: '02', label: __( 'February' ) },
+		{ value: '03', label: __( 'March' ) },
+		{ value: '04', label: __( 'April' ) },
+		{ value: '05', label: __( 'May' ) },
+		{ value: '06', label: __( 'June' ) },
+		{ value: '07', label: __( 'July' ) },
+		{ value: '08', label: __( 'August' ) },
+		{ value: '09', label: __( 'September' ) },
+		{ value: '10', label: __( 'October' ) },
+		{ value: '11', label: __( 'November' ) },
+		{ value: '12', label: __( 'December' ) },
+	] as const;
+
 	const { day, month, year, minutes, hours } = useMemo(
 		() => ( {
 			day: format( date, 'dd' ),
-			month: format( date, 'MM' ),
+			month: format(
+				date,
+				'MM'
+			) as ( typeof monthOptions )[ number ][ 'value' ],
 			year: format( date, 'yyyy' ),
 			minutes: format( date, 'mm' ),
 			hours: format( date, 'HH' ),
@@ -146,20 +166,7 @@ export function TimePicker( {
 				__next40pxDefaultSize
 				__nextHasNoMarginBottom
 				value={ month }
-				options={ [
-					{ value: '01', label: __( 'January' ) },
-					{ value: '02', label: __( 'February' ) },
-					{ value: '03', label: __( 'March' ) },
-					{ value: '04', label: __( 'April' ) },
-					{ value: '05', label: __( 'May' ) },
-					{ value: '06', label: __( 'June' ) },
-					{ value: '07', label: __( 'July' ) },
-					{ value: '08', label: __( 'August' ) },
-					{ value: '09', label: __( 'September' ) },
-					{ value: '10', label: __( 'October' ) },
-					{ value: '11', label: __( 'November' ) },
-					{ value: '12', label: __( 'December' ) },
-				] }
+				options={ monthOptions }
 				onChange={ ( value ) => {
 					const newDate = setMonth( date, Number( value ) - 1 );
 					setDate( newDate );
@@ -214,12 +221,18 @@ export function TimePicker( {
 			className="components-datetime__time" // Unused, for backwards compatibility.
 		>
 			<Fieldset>
-				<BaseControl.VisualLabel
-					as="legend"
-					className="components-datetime__time-legend" // Unused, for backwards compatibility.
-				>
-					{ __( 'Time' ) }
-				</BaseControl.VisualLabel>
+				{ hideLabelFromVision ? (
+					<VisuallyHidden as="legend">
+						{ __( 'Time' ) }
+					</VisuallyHidden>
+				) : (
+					<BaseControl.VisualLabel
+						as="legend"
+						className="components-datetime__time-legend" // Unused, for backwards compatibility.
+					>
+						{ __( 'Time' ) }
+					</BaseControl.VisualLabel>
+				) }
 				<HStack
 					className="components-datetime__time-wrapper" // Unused, for backwards compatibility.
 				>
@@ -236,12 +249,18 @@ export function TimePicker( {
 				</HStack>
 			</Fieldset>
 			<Fieldset>
-				<BaseControl.VisualLabel
-					as="legend"
-					className="components-datetime__time-legend" // Unused, for backwards compatibility.
-				>
-					{ __( 'Date' ) }
-				</BaseControl.VisualLabel>
+				{ hideLabelFromVision ? (
+					<VisuallyHidden as="legend">
+						{ __( 'Date' ) }
+					</VisuallyHidden>
+				) : (
+					<BaseControl.VisualLabel
+						as="legend"
+						className="components-datetime__time-legend" // Unused, for backwards compatibility.
+					>
+						{ __( 'Date' ) }
+					</BaseControl.VisualLabel>
+				) }
 				<HStack
 					className="components-datetime__time-wrapper" // Unused, for backwards compatibility.
 				>
@@ -252,4 +271,29 @@ export function TimePicker( {
 	);
 }
 
+/**
+ * A component to input a time.
+ *
+ * Values are passed as an object in 24-hour format (`{ hours: number, minutes: number }`).
+ *
+ * ```jsx
+ * import { TimePicker } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyTimeInput = () => {
+ * 	const [ time, setTime ] = useState( { hours: 13, minutes: 30 } );
+ *
+ * 	return (
+ * 		<TimePicker.TimeInput
+ * 			value={ time }
+ * 			onChange={ setTime }
+ * 			label="Time"
+ * 		/>
+ * 	);
+ * };
+ * ```
+ */
+TimePicker.TimeInput = TimeInput;
+Object.assign( TimePicker.TimeInput, { displayName: 'TimePicker.TimeInput' } );
+
 export default TimePicker;

package/src/date-time/time/styles.ts

@@ -62,6 +62,7 @@ export const HoursInput = styled( NumberControl )`
 export const TimeSeparator = styled.span`
 	border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 700 ] };
 	border-bottom: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 700 ] };
+	font-size: ${ CONFIG.fontSize };
 	line-height: calc(
 		${ CONFIG.controlHeight } - ${ CONFIG.borderWidth } * 2
 	);

package/src/date-time/{time-input → time/time-input}/index.tsx

@@ -18,20 +18,20 @@ import {
 	HoursInput,
 	MinutesInput,
 	Fieldset,
-} from '../time/styles';
-import { HStack } from '../../h-stack';
-import Button from '../../button';
-import ButtonGroup from '../../button-group';
+} from '../styles';
+import { HStack } from '../../../h-stack';
+import Button from '../../../button';
+import ButtonGroup from '../../../button-group';
 import {
 	from12hTo24h,
 	from24hTo12h,
 	buildPadInputStateReducer,
 	validateInputElementTarget,
-} from '../utils';
-import type { TimeInputProps } from '../types';
-import type { InputChangeCallback } from '../../input-control/types';
-import { useControlledValue } from '../../utils';
-import BaseControl from '../../base-control';
+} from '../../utils';
+import type { TimeInputProps } from '../../types';
+import type { InputChangeCallback } from '../../../input-control/types';
+import { useControlledValue } from '../../../utils';
+import BaseControl from '../../../base-control';
 
 export function TimeInput( {
 	value: valueProp,

package/src/date-time/types.ts

@@ -29,6 +29,13 @@ export type TimePickerProps = {
 	 * time as an argument.
 	 */
 	onChange?: ( time: string ) => void;
+
+	/**
+	 * If true, the label will only be visible to screen readers.
+	 *
+	 * @default false
+	 */
+	hideLabelFromVision?: boolean;
 };
 
 export type TimeInputValue = {
@@ -130,7 +137,10 @@ export type DatePickerProps = {
 };
 
 export type DateTimePickerProps = Omit< DatePickerProps, 'onChange' > &
-	Omit< TimePickerProps, 'currentTime' | 'onChange' > & {
+	Omit<
+		TimePickerProps,
+		'currentTime' | 'onChange' | 'hideLabelFromVision'
+	> & {
 		/**
 		 * The function called when a new date or time has been selected. It is
 		 * passed the date and time as an argument.

package/src/dimension-control/README.md

@@ -17,6 +17,7 @@ export default function MyCustomDimensionControl() {
 
 	return (
 		<DimensionControl
+			__nextHasNoMarginBottom
 			label={ 'Padding' }
 			icon={ 'desktop' }
 			onChange={ ( value ) => setPaddingSize( value ) }
@@ -91,3 +92,19 @@ A callback which is triggered when a spacing size value changes (is selected/cli
 -   **Required:** No
 
 A string of classes to be added to the control component.
+
+### `__next40pxDefaultSize`
+
+-   **Type:** `Boolean`
+-   **Required:** No
+-   **Default:** `false`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+### `__nextHasNoMarginBottom`
+
+-   **Type:** `Boolean`
+-   **Required:** No
+-   **Default:** `false`
+
+Start opting into the new margin-free styles that will become the default in a future version.

package/src/dimension-control/index.tsx

@@ -16,6 +16,15 @@ import SelectControl from '../select-control';
 import sizesTable, { findSizeBySlug } from './sizes';
 import type { DimensionControlProps, Size } from './types';
 import type { SelectControlSingleSelectionProps } from '../select-control/types';
+import { ContextSystemProvider } from '../context';
+
+const CONTEXT_VALUE = {
+	BaseControl: {
+		// Temporary during deprecation grace period: Overrides the underlying `__associatedWPComponentName`
+		// via the context system to override the value set by SelectControl.
+		_overrides: { __associatedWPComponentName: 'DimensionControl' },
+	},
+};
 
 /**
  * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.
@@ -31,6 +40,7 @@ import type { SelectControlSingleSelectionProps } from '../select-control/types'
  *
  * 	return (
  * 		<DimensionControl
+ * 			__nextHasNoMarginBottom
  * 			label={ 'Padding' }
  * 			icon={ 'desktop' }
  * 			onChange={ ( value ) => setPaddingSize( value ) }
@@ -43,6 +53,7 @@ import type { SelectControlSingleSelectionProps } from '../select-control/types'
 export function DimensionControl( props: DimensionControlProps ) {
 	const {
 		__next40pxDefaultSize = false,
+		__nextHasNoMarginBottom = false,
 		label,
 		value,
 		sizes = sizesTable,
@@ -85,15 +96,21 @@ export function DimensionControl( props: DimensionControlProps ) {
 	);
 
 	return (
-		<SelectControl
-			__next40pxDefaultSize={ __next40pxDefaultSize }
-			className={ clsx( className, 'block-editor-dimension-control' ) }
-			label={ selectLabel }
-			hideLabelFromVision={ false }
-			value={ value }
-			onChange={ onChangeSpacingSize }
-			options={ formatSizesAsOptions( sizes ) }
-		/>
+		<ContextSystemProvider value={ CONTEXT_VALUE }>
+			<SelectControl
+				__next40pxDefaultSize={ __next40pxDefaultSize }
+				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+				className={ clsx(
+					className,
+					'block-editor-dimension-control'
+				) }
+				label={ selectLabel }
+				hideLabelFromVision={ false }
+				value={ value }
+				onChange={ onChangeSpacingSize }
+				options={ formatSizesAsOptions( sizes ) }
+			/>
+		</ContextSystemProvider>
 	);
 }
 

package/src/dimension-control/stories/index.story.tsx

@@ -44,6 +44,7 @@ const Template: StoryFn< typeof DimensionControl > = ( args ) => (
 export const Default = Template.bind( {} );
 
 Default.args = {
+	__nextHasNoMarginBottom: true,
 	label: 'Please select a size',
 	sizes,
 };

package/src/dimension-control/test/__snapshots__/index.test.js.snap

@@ -13,10 +13,6 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -299,10 +295,6 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -595,10 +587,6 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -903,10 +891,6 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }

package/src/dimension-control/test/index.test.js

@@ -12,7 +12,11 @@ import { plus } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { DimensionControl } from '../';
+import { DimensionControl as _DimensionControl } from '../';
+
+const DimensionControl = ( props ) => {
+	return <_DimensionControl { ...props } __nextHasNoMarginBottom />;
+};
 
 describe( 'DimensionControl', () => {
 	const onChangeHandler = jest.fn();

package/src/dimension-control/types.ts

@@ -2,6 +2,7 @@
  * Internal dependencies
  */
 import type { IconType } from '../icon';
+import type { SelectControlProps } from '../select-control/types';
 
 export type Size = {
 	/**
@@ -14,7 +15,10 @@ export type Size = {
 	slug: string;
 };
 
-export type DimensionControlProps = {
+export type DimensionControlProps = Pick<
+	SelectControlProps,
+	'__next40pxDefaultSize' | '__nextHasNoMarginBottom'
+> & {
 	/**
 	 * Label for the control.
 	 */
@@ -45,10 +49,4 @@ export type DimensionControlProps = {
 	 * @default ''
 	 */
 	className?: string;
-	/**
-	 * Start opting into the larger default height that will become the default size in a future version.
-	 *
-	 * @default false
-	 */
-	__next40pxDefaultSize?: boolean;
 };

package/src/drop-zone/style.scss

@@ -7,7 +7,7 @@
 	z-index: z-index(".components-drop-zone");
 	visibility: hidden;
 	opacity: 0;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 
 	&.is-active {
 		opacity: 1;

package/src/dropdown-menu-v2/index.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
+import { useStoreState } from '@ariakit/react';
 
 /**
  * WordPress dependencies
@@ -248,9 +249,10 @@ const UnconnectedDropdownMenu = (
 	);
 
 	// Extract the side from the applied placement — useful for animations.
-	const appliedPlacementSide = dropdownMenuStore
-		.useState( 'placement' )
-		.split( '-' )[ 0 ];
+	const appliedPlacementSide = useStoreState(
+		dropdownMenuStore,
+		'placement'
+	).split( '-' )[ 0 ];
 
 	if (
 		dropdownMenuStore.parent &&

package/src/dropdown-menu-v2/styles.ts

@@ -25,13 +25,15 @@ const ITEM_PADDING_BLOCK = space( 2 );
 const ITEM_PADDING_INLINE = space( 3 );
 
 // TODO:
-// - those values are different from saved variables?
-// - should bring this into the config, and make themeable
-// - border color and divider color are different?
-const DEFAULT_BORDER_COLOR = COLORS.gray[ 300 ];
-const DIVIDER_COLOR = COLORS.gray[ 200 ];
-const TOOLBAR_VARIANT_BORDER_COLOR = COLORS.gray[ '900' ];
-const DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.popoverShadow }`;
+// - border color and divider color are different from COLORS.theme variables
+// - lighter text color is not defined in COLORS.theme, should it be?
+// - lighter background color is not defined in COLORS.theme, should it be?
+const DEFAULT_BORDER_COLOR = COLORS.theme.gray[ 300 ];
+const DIVIDER_COLOR = COLORS.theme.gray[ 200 ];
+const LIGHTER_TEXT_COLOR = COLORS.theme.gray[ 700 ];
+const LIGHT_BACKGROUND_COLOR = COLORS.theme.gray[ 100 ];
+const TOOLBAR_VARIANT_BORDER_COLOR = COLORS.theme.foreground;
+const DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.elevationXSmall }`;
 const TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ TOOLBAR_VARIANT_BORDER_COLOR }`;
 
 const GRID_TEMPLATE_COLS = 'minmax( 0, max-content ) 1fr';
@@ -87,7 +89,7 @@ export const DropdownMenu = styled( Ariakit.Menu )<
 	padding: ${ CONTENT_WRAPPER_PADDING };
 
 	background-color: ${ COLORS.ui.background };
-	border-radius: 4px;
+	border-radius: ${ CONFIG.radiusMedium };
 	${ ( props ) => css`
 		box-shadow: ${ props.variant === 'toolbar'
 			? TOOLBAR_VARIANT_BOX_SHADOW
@@ -101,23 +103,23 @@ export const DropdownMenu = styled( Ariakit.Menu )<
 	outline: 2px solid transparent !important;
 
 	/* Animation */
-	animation-duration: ${ ANIMATION_PARAMS.DURATION };
-	animation-timing-function: ${ ANIMATION_PARAMS.EASING };
-	will-change: transform, opacity;
-	/* Default animation.*/
-	animation-name: ${ slideDownAndFade };
-
-	&[data-side='left'] {
-		animation-name: ${ slideLeftAndFade };
-	}
-	&[data-side='up'] {
-		animation-name: ${ slideUpAndFade };
-	}
-	&[data-side='right'] {
-		animation-name: ${ slideRightAndFade };
-	}
-	@media ( prefers-reduced-motion ) {
-		animation-duration: 0s;
+	&[data-open] {
+		@media not ( prefers-reduced-motion ) {
+			animation-duration: ${ ANIMATION_PARAMS.DURATION };
+			animation-timing-function: ${ ANIMATION_PARAMS.EASING };
+			will-change: transform, opacity;
+			/* Default animation.*/
+			animation-name: ${ slideDownAndFade };
+			&[data-side='left'] {
+				animation-name: ${ slideLeftAndFade };
+			}
+			&[data-side='up'] {
+				animation-name: ${ slideUpAndFade };
+			}
+			&[data-side='right'] {
+				animation-name: ${ slideRightAndFade };
+			}
+		}
 	}
 `;
 
@@ -149,8 +151,8 @@ const baseItem = css`
 	font-weight: normal;
 	line-height: 20px;
 
-	color: ${ COLORS.gray[ 900 ] };
-	border-radius: ${ CONFIG.radiusBlockUi };
+	color: ${ COLORS.theme.foreground };
+	border-radius: ${ CONFIG.radiusSmall };
 
 	padding-block: ${ ITEM_PADDING_BLOCK };
 	padding-inline: ${ ITEM_PADDING_INLINE };
@@ -193,8 +195,8 @@ const baseItem = css`
 
 	/* When the item is the trigger of an open submenu */
 	${ DropdownMenu }:not(:focus) &:not(:focus)[aria-expanded="true"] {
-		background-color: ${ COLORS.gray[ 100 ] };
-		color: ${ COLORS.gray[ 900 ] };
+		background-color: ${ LIGHT_BACKGROUND_COLOR };
+		color: ${ COLORS.theme.foreground };
 	}
 
 	svg {
@@ -238,7 +240,7 @@ export const ItemPrefixWrapper = styled.span`
 	align-items: center;
 	justify-content: center;
 
-	color: ${ COLORS.gray[ '700' ] };
+	color: ${ LIGHTER_TEXT_COLOR };
 
 	/*
 	* When the parent menu item is active, except when it's a non-focused/hovered
@@ -284,7 +286,7 @@ export const ItemSuffixWrapper = styled.span`
 	justify-content: center;
 	gap: ${ space( 3 ) };
 
-	color: ${ COLORS.gray[ '700' ] };
+	color: ${ LIGHTER_TEXT_COLOR };
 
 	/*
 	 * When the parent menu item is active, except when it's a non-focused/hovered
@@ -343,7 +345,8 @@ export const DropdownMenuItemLabel = styled( Truncate )`
 export const DropdownMenuItemHelpText = styled( Truncate )`
 	font-size: ${ font( 'helpText.fontSize' ) };
 	line-height: 16px;
-	color: ${ COLORS.gray[ '700' ] };
+	color: ${ LIGHTER_TEXT_COLOR };
+	word-break: break-all;
 
 	[data-active-item]:not( [data-focus-visible] ) *:not( ${ DropdownMenu } ) &,
 	[aria-disabled='true'] *:not( ${ DropdownMenu } ) & {

package/src/dropdown-menu-v2/test/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render, screen, waitFor } from '@testing-library/react';
-import { press, click, hover, sleep, type } from '@ariakit/test';
+import { press, click, hover, type } from '@ariakit/test';
 
 /**
  * WordPress dependencies
@@ -128,7 +128,6 @@ describe( 'DropdownMenu', () => {
 			} );
 
 			// Move focus on the toggle
-			await sleep();
 			await press.Tab();
 
 			expect( toggleButton ).toHaveFocus();
@@ -159,7 +158,6 @@ describe( 'DropdownMenu', () => {
 			} );
 
 			// Move focus on the toggle
-			await sleep();
 			await press.Tab();
 
 			expect( toggleButton ).toHaveFocus();
@@ -915,7 +913,6 @@ describe( 'DropdownMenu', () => {
 
 			// The outer button can be focused by pressing tab. Doing so will cause
 			// the DropdownMenu to close.
-			await sleep();
 			await press.Tab();
 			expect( outerButton ).toBeInTheDocument();
 			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();

package/src/focal-point-picker/README.md

@@ -100,10 +100,18 @@ Callback which is called at the start of drag operations.
 
 Function which is called before internal updates to the value state. It receives the upcoming value and may return a modified one.
 
-#### __nextHasNoMarginBottom
+### `__next40pxDefaultSize`
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
 
 Start opting into the new margin-free styles that will become the default in a future version.
 
+### `__nextHasNoMarginBottom`
+
 -   Type: `Boolean`
 -   Required: No
 -   Default: `false`
+
+Start opting into the new margin-free styles that will become the default in a future version.

package/src/focal-point-picker/controls.tsx

@@ -23,7 +23,6 @@ const noop = () => {};
 
 export default function FocalPointPickerControls( {
 	__nextHasNoMarginBottom,
-	__next40pxDefaultSize,
 	hasHelpText,
 	onChange = noop,
 	point = {
@@ -57,7 +56,6 @@ export default function FocalPointPickerControls( {
 			gap={ 4 }
 		>
 			<FocalPointUnitControl
-				__next40pxDefaultSize={ __next40pxDefaultSize }
 				label={ __( 'Left' ) }
 				aria-label={ __( 'Focal point left position' ) }
 				value={ [ valueX, '%' ].join( '' ) }
@@ -71,7 +69,6 @@ export default function FocalPointPickerControls( {
 				dragDirection="e"
 			/>
 			<FocalPointUnitControl
-				__next40pxDefaultSize={ __next40pxDefaultSize }
 				label={ __( 'Top' ) }
 				aria-label={ __( 'Focal point top position' ) }
 				value={ [ valueY, '%' ].join( '' ) }
@@ -91,6 +88,7 @@ export default function FocalPointPickerControls( {
 function FocalPointUnitControl( props: UnitControlProps ) {
 	return (
 		<StyledUnitControl
+			__next40pxDefaultSize
 			className="focal-point-picker__controls-position-unit-control"
 			labelPosition="top"
 			max={ TEXTCONTROL_MAX }

package/src/focal-point-picker/index.tsx

@@ -85,7 +85,6 @@ const GRID_OVERLAY_TIMEOUT = 600;
  */
 export function FocalPointPicker( {
 	__nextHasNoMarginBottom,
-	__next40pxDefaultSize = false,
 	autoPlay = true,
 	className,
 	help,
@@ -251,6 +250,7 @@ export function FocalPointPicker( {
 		<BaseControl
 			{ ...restProps }
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__associatedWPComponentName="FocalPointPicker"
 			label={ label }
 			id={ id }
 			help={ help }
@@ -285,7 +285,6 @@ export function FocalPointPicker( {
 			</MediaWrapper>
 			<Controls
 				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-				__next40pxDefaultSize={ __next40pxDefaultSize }
 				hasHelpText={ !! help }
 				point={ { x, y } }
 				onChange={ ( value ) => {