ciampo · Oct 7, 2026 · Oct 6, 2026 · Oct 6, 2026 · Oct 7, 2026 · Oct 7, 2026
@@ -33,6 +33,8 @@
 
 ### Bug Fixes
 
+-   `CustomGradientPicker`: Extend the clickable area of control points and the plus button to the full height of the gradient bar ([#84124](https://github.com/WordPress/gutenberg/pull/84124)).
+
 -   `Popover`: Keep the `will-change: transform` hint only while the popover is moving, so its content is no longer left on a compositing layer that Chrome can render blurry ([#77359](https://github.com/WordPress/gutenberg/pull/77359)).
 -   `RadioControl`: Keep radio circles visually 16px at all viewport widths while retaining a 24px pointer target ([#83840](https://github.com/WordPress/gutenberg/pull/83840)).
 -   `Text`: Make single-line truncation and `isBlock` overrides consistent across the main document and iframes ([#82573](https://github.com/WordPress/gutenberg/pull/82573)).

@@ -2,7 +2,7 @@
 @use "@wordpress/base-styles/variables" as *;
 @use "@wordpress/base-styles/mixins" as *;
 
-$components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 16px handles inside, that leaves 32px padding, half of which is 1å6.
+$components-custom-gradient-picker__padding: $grid-unit-20; // Center 16px handles in the 48px bar.
 
 .components-custom-gradient-picker__gradient-bar {
 	border-radius: $radius-small;
@@ -36,9 +36,18 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 		display: flex;
 	}
 
-	.components-custom-gradient-picker__insert-point-dropdown {
-		position: relative;
+	.components-custom-gradient-picker__insert-point-dropdown,
+	.components-custom-gradient-picker__control-point-button {
+		&::before {
+			content: "";
+			position: absolute;
+			// Use the dropdown as the containing block to cover the bar's full
+			// height without changing the handle or overlapping adjacent points.
+			inset: -$components-custom-gradient-picker__padding 0;
+		}
+	}
 
+	.components-custom-gradient-picker__insert-point-dropdown {
 		// Same size as the .components-custom-gradient-picker__control-point-dropdown parent
 		height: inherit;
 		width: inherit;

@@ -3,8 +3,8 @@ import { userEvent } from 'vitest/browser';
 import { screen, waitFor } from '@testing-library/react';
 import { render } from 'vitest-browser-react';
 import { useState } from '@wordpress/element';
-import '../style.scss';
 import '../../button/style.scss';
+import '../style.scss';
 import '../../dropdown/style.scss';
 import '../../popover/style.scss';
 import CustomGradientPicker from '../';
@@ -171,6 +171,50 @@ describe( 'CustomGradientBar', () => {
 		{ position: 100, color: 'rgb(255,255,255)' },
 	];
 
+	it.each( [ 'top', 'bottom' ] )(
+		'adds a control point from the %s of the gradient bar',
+		async ( edge ) => {
+			const onChange = vi.fn();
+			const { container } = await render(
+				<CustomGradientBar
+					background="linear-gradient(90deg, black, white)"
+					hasGradient
+					value={ POINTS }
+					onChange={ onChange }
+				/>
+			);
+			// eslint-disable-next-line testing-library/no-node-access -- The gradient background has no accessible role.
+			const bar = container.querySelector< HTMLElement >(
+				'.components-custom-gradient-picker__gradient-bar'
+			)!;
+			const bounds = bar.getBoundingClientRect();
+			const position = {
+				x: bounds.width / 2,
+				y: edge === 'top' ? 1 : bounds.height - 1,
+			};
+
+			await userEvent.hover( bar, { position } );
+			// eslint-disable-next-line testing-library/no-node-access -- The inserter has no accessible name.
+			const inserter = container.querySelector< HTMLElement >(
+				'.components-custom-gradient-picker__insert-point-dropdown'
+			)!;
+			expect( inserter ).toBeVisible();
+			await userEvent.click( bar, { position } );
+			expect( inserter ).toHaveAttribute( 'aria-expanded', 'true' );
+
+			await userEvent.click(
+				screen.getByRole( 'slider', { name: 'Color' } )
+			);
+			expect( onChange ).toHaveBeenCalledWith(
+				expect.arrayContaining( [
+					...POINTS,
+					{ position: 50, color: expect.any( String ) },
+				] )
+			);
+			await userEvent.keyboard( '{Escape}' );
+		}
+	);
+
 	// The counterpart to the duotone bar's tests: positioning is on unless a
 	// consumer opts out, so arrow keys must still move a control point.
 	it( 'moves a control point with the arrow keys', async () => {
@@ -205,7 +249,7 @@ describe( 'CustomGradientBar', () => {
 		] );
 	} );
 
-	it( 'moves a control point when dragged', async () => {
+	it( 'moves a control point when dragged from above its handle', async () => {
 		const onChange = vi.fn();
 
 		const { container } = await render(
@@ -232,7 +276,12 @@ describe( 'CustomGradientBar', () => {
 			name: /Gradient control point/,
 		} );
 
-		await userEvent.dragAndDrop( firstPoint, bar, {
+		const pointBounds = firstPoint.getBoundingClientRect();
+		await userEvent.dragAndDrop( bar, bar, {
+			sourcePosition: {
+				x: pointBounds.x - bounds.x + pointBounds.width / 2,
+				y: 1,
+			},
 			targetPosition: { x: bounds.width / 2, y: bounds.height / 2 },
 		} );