Feedback and changelog entry

Mamaduka · Mamaduka · commit afadfb49841a · 2025-10-28T09:12:39.000+04:00
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -17,6 +17,7 @@
 -   `Tabs`: Replace `rem` with `px` in tablist overflow fade ([#72669](https://github.com/WordPress/gutenberg/pull/72669)).
 -   `Modal`: Replace `rem` in heading text with a standard `px` value ([#72669](https://github.com/WordPress/gutenberg/pull/72669)).
 -   Validated form controls: Replace `rem` with `px` in error message ([#72669](https://github.com/WordPress/gutenberg/pull/72669)).
+-   `FocalPointPicker`: Fix label markup ([#70835](https://github.com/WordPress/gutenberg/pull/70835)).
 
 ## 30.6.0 (2025-10-17)
 
diff --git a/packages/components/src/focal-point-picker/index.tsx b/packages/components/src/focal-point-picker/index.tsx
@@ -13,6 +13,7 @@ import {
 	__experimentalUseDragging as useDragging,
 	useIsomorphicLayoutEffect,
 } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -109,6 +110,14 @@ export function FocalPointPicker( {
 	const [ point, setPoint ] = useState( valueProp );
 	const [ showGridOverlay, setShowGridOverlay ] = useState( false );
 
+	if ( ! __nextHasNoMarginBottom ) {
+		deprecated( 'Bottom margin styles for wp.components.FocalPointPicker', {
+			since: '6.7',
+			version: '7.0',
+			hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',
+		} );
+	}
+
 	const { startDrag, endDrag, isDragging } = useDragging( {
 		onDragStart: ( event ) => {
 			dragAreaRef.current?.focus();
diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts
@@ -10,14 +10,16 @@ import styled from '@emotion/styled';
 import { Flex } from '../../flex';
 import UnitControl from '../../unit-control';
 import { View } from '../../view';
-import { COLORS, CONFIG, boxSizingReset } from '../../utils';
+import { COLORS, CONFIG, boxSizingReset, font } from '../../utils';
 import type { FocalPointPickerControlsProps } from '../types';
 import { INITIAL_BOUNDS } from '../utils';
 
 export const Container = styled( View )`
 	border: 0;
 	padding: 0;
 	margin: 0;
+	font-family: ${ font( 'default.fontFamily' ) };
+	font-size: ${ font( 'default.fontSize' ) };
 	${ boxSizingReset }
 `;
 
