Skip to content

Components: Fix label markup for 'FocalPointPicker' #70835

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Mamaduka merged 3 commits into from
Oct 28, 2025
Merged

Components: Fix label markup for 'FocalPointPicker' #70835

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
27855ad
Components: Fix label markup for 'FocalPointPicker'
Mamaduka Jul 22, 2025
9f73e91
Refactor FocalPointPicker to use fieldset markup
Mamaduka Jul 22, 2025
afadfb4
Feedback and changelog entry
Mamaduka Oct 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
42 changes: 26 additions & 16 deletions packages/components/src/focal-point-picker/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* External dependencies
*/
import clsx from 'clsx';
import type { KeyboardEventHandler } from 'react';

/**
* WordPress dependencies
Expand All @@ -10,19 +11,19 @@ import { __ } from '@wordpress/i18n';
import { useEffect, useRef, useState } from '@wordpress/element';
import {
__experimentalUseDragging as useDragging,
useInstanceId,
useIsomorphicLayoutEffect,
} from '@wordpress/compose';
import deprecated from '@wordpress/deprecated';

/**
* Internal dependencies
*/
import BaseControl from '../base-control';
import Controls from './controls';
import FocalPoint from './focal-point';
import Grid from './grid';
import Media from './media';
import {
Container,
MediaWrapper,
MediaContainer,
} from './styles/focal-point-picker-style';
Expand All @@ -33,7 +34,11 @@ import type {
FocalPoint as FocalPointType,
FocalPointPickerProps,
} from './types';
import type { KeyboardEventHandler } from 'react';
import {
StyledLabel,
StyledHelp,
} from '../base-control/styles/base-control-styles';
import { VisuallyHidden } from '../visually-hidden';

const GRID_OVERLAY_TIMEOUT = 600;

Expand Down Expand Up @@ -88,6 +93,7 @@ export function FocalPointPicker( {
autoPlay = true,
className,
help,
hideLabelFromVision,
label,
onChange,
onDrag,
Expand All @@ -104,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();
Expand Down Expand Up @@ -233,9 +247,7 @@ export function FocalPointPicker( {
};

const classes = clsx( 'components-focal-point-picker-control', className );

const instanceId = useInstanceId( FocalPointPicker );
const id = `inspector-focal-point-picker-control-${ instanceId }`;
const Label = hideLabelFromVision ? VisuallyHidden : StyledLabel;

useUpdateEffect( () => {
setShowGridOverlay( true );
Expand All @@ -247,15 +259,8 @@ export function FocalPointPicker( {
}, [ x, y ] );

return (
<BaseControl
{ ...restProps }
__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
__associatedWPComponentName="FocalPointPicker"
Copy link
Member

@mirka mirka Oct 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The deprecation notice for __nextHasNoMarginBottom was being handled through BaseControl, so we'll need to handle it separately. Could you add this back for me?

diff --git a/packages/components/src/focal-point-picker/index.tsx b/packages/components/src/focal-point-picker/index.tsx
index 03d75dfb6c..3485893860 100644
--- 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();

label={ label }
id={ id }
help={ help }
className={ classes }
>
<Container { ...restProps } as="fieldset" className={ classes }>
{ !! label && <Label as="legend">{ label }</Label> }
<MediaWrapper className="components-focal-point-picker-wrapper">
<MediaContainer
className="components-focal-point-picker"
Expand Down Expand Up @@ -291,7 +296,12 @@ export function FocalPointPicker( {
onChange?.( getFinalValue( value ) );
} }
/>
</BaseControl>
{ !! help && (
<StyledHelp __nextHasNoMarginBottom={ __nextHasNoMarginBottom }>
{ help }
</StyledHelp>
) }
</Container>
);
}

Expand Down
12 changes: 11 additions & 1 deletion packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,20 @@ import styled from '@emotion/styled';
*/
import { Flex } from '../../flex';
import UnitControl from '../../unit-control';
import { COLORS, CONFIG } from '../../utils';
import { View } from '../../view';
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;
Copy link
Member

@mirka mirka Oct 27, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is missing a font-size: 13px that was in BaseControl, and it's affecting some spacing 😅

font-family: ${ font( 'default.fontFamily' ) };
font-size: ${ font( 'default.fontSize' ) };
${ boxSizingReset }
`;

export const MediaWrapper = styled.div`
background-color: transparent;
display: flex;
Expand Down
Loading