@wordpress/block-editor 17.0.2-next.v.202608281122.0 → 17.1.0

package/src/components/child-layout-control/test/{index.jsx → index.jsdom.test.jsx}

@@ -1,14 +1,20 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
 import ChildLayoutControl from '../';
 
-jest.mock( '../../use-settings', () => ( {
+globalThis.wpVitest.mockMatchMedia();
+
+globalThis.wpVitest.mockResizeObserver();
+
+vi.mock( import( '../../use-settings' ), () => ( {
 	useSettings: () => [ undefined ],
 } ) );
 
-jest.mock( '@wordpress/data/src/components/use-select', () =>
-	jest.fn( ( mapSelect ) => {
+vi.mock( import( '@wordpress/data' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useSelect: vi.fn( ( mapSelect ) => {
 		if ( typeof mapSelect === 'function' ) {
 			return mapSelect( () => ( {
 				getBlockRootClientId: () => 'root-client-id',
@@ -19,19 +25,16 @@ jest.mock( '@wordpress/data/src/components/use-select', () =>
 			getBlockAttributes: () => ( {} ),
 			getBlockOrder: () => [],
 		};
-	} )
-);
-
-jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
+	} ),
 	useDispatch: () => ( {
-		__unstableMarkNextChangeAsNotPersistent: jest.fn(),
-		moveBlocksToPosition: jest.fn(),
+		__unstableMarkNextChangeAsNotPersistent: vi.fn(),
+		moveBlocksToPosition: vi.fn(),
 	} ),
 } ) );
 
 describe( 'ChildLayoutControl', () => {
 	const baseProps = {
-		onChange: jest.fn(),
+		onChange: vi.fn(),
 		parentLayout: {
 			type: 'grid',
 		},
@@ -40,14 +43,14 @@ describe( 'ChildLayoutControl', () => {
 	};
 
 	afterEach( () => {
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 	} );
 
 	function renderControl( props ) {
 		return render(
 			<ToolsPanel
 				label="Dimensions"
-				resetAll={ jest.fn() }
+				resetAll={ vi.fn() }
 				panelId="client-id"
 			>
 				<ChildLayoutControl { ...baseProps } { ...props } />
@@ -96,7 +99,7 @@ describe( 'ChildLayoutControl', () => {
 
 	it( 'sets a numeric span when entering 1 into an empty span control', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		renderControl( {
 			value: {},
@@ -134,7 +137,7 @@ describe( 'ChildLayoutControl', () => {
 
 	it( 'sets fixedNoShrink when selecting fixed flex sizing', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		renderControl( {
 			parentLayout: {
@@ -155,7 +158,7 @@ describe( 'ChildLayoutControl', () => {
 
 	it( 'sets legacy fixed when selecting max sizing', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		renderControl( {
 			parentLayout: {

package/src/components/color-palette/test/{control.jsx → control.jsdom.test.jsx}

@@ -1,6 +1,14 @@
-import { render, waitFor, queryByAttribute } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import {
+	render,
+	screen,
+	waitFor,
+	queryByAttribute,
+} from '@testing-library/react';
 import ColorPaletteControl from '../control';
 
+globalThis.wpVitest.mockMatchMedia();
+
 const noop = () => {};
 
 async function renderAndValidate( ...renderArgs ) {
@@ -17,8 +25,8 @@ async function renderAndValidate( ...renderArgs ) {
 }
 
 describe( 'ColorPaletteControl', () => {
-	it( 'matches the snapshot', async () => {
-		const { container } = await renderAndValidate(
+	it( 'marks the selected color as active', async () => {
+		await renderAndValidate(
 			<ColorPaletteControl
 				label="Test Color"
 				value="#f00"
@@ -28,6 +36,9 @@ describe( 'ColorPaletteControl', () => {
 			/>
 		);
 
-		expect( container ).toMatchSnapshot();
+		expect( screen.getByRole( 'option', { name: 'red' } ) ).toHaveAttribute(
+			'aria-selected',
+			'true'
+		);
 	} );
 } );

package/src/components/colors/test/utils.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import {
 	getColorObjectByAttributeValues,
 	getColorObjectByColorValue,

package/src/components/colors/test/{with-colors.jsx → with-colors.jsdom.test.jsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createCustomColorsHOC } from '../with-colors';
@@ -7,7 +8,7 @@ describe( 'createCustomColorsHOC', () => {
 		const withCustomColors = createCustomColorsHOC( [
 			{ name: 'Red', slug: 'red', color: 'ff0000' },
 		] );
-		const BaseComponent = jest.fn( () => <div /> );
+		const BaseComponent = vi.fn( () => <div /> );
 		const EnhancedComponent =
 			withCustomColors( 'backgroundColor' )( BaseComponent );
 
@@ -46,7 +47,7 @@ describe( 'createCustomColorsHOC', () => {
 			)
 		);
 
-		const setAttributes = jest.fn();
+		const setAttributes = vi.fn();
 
 		render(
 			<EnhancedComponent
@@ -76,7 +77,7 @@ describe( 'createCustomColorsHOC', () => {
 			)
 		);
 
-		const setAttributes = jest.fn();
+		const setAttributes = vi.fn();
 
 		render(
 			<EnhancedComponent

package/src/components/colors-gradients/test/{control.jsx → control.jsdom.test.jsx}

@@ -1,7 +1,12 @@
+import { describe, expect, it, vi } from 'vitest';
 import { screen } from '@testing-library/react';
 import { click, render } from '@ariakit/test/react';
 import ColorGradientControl from '../control';
 
+globalThis.wpVitest.mockMatchMedia();
+
+globalThis.wpVitest.mockResizeObserver();
+
 const noop = () => {};
 
 describe( 'ColorPaletteControl', () => {
@@ -160,7 +165,7 @@ describe( 'ColorPaletteControl', () => {
 		} );
 
 		it( 'calls onColorChange with (color, slug) when a swatch is clicked (color-only palette)', async () => {
-			const onColorChange = jest.fn();
+			const onColorChange = vi.fn();
 
 			await render(
 				<ColorGradientControl
@@ -183,8 +188,8 @@ describe( 'ColorPaletteControl', () => {
 		} );
 
 		it( 'calls onColorChange with (color, slug) and calls onGradientChange() when both colors and gradients are available', async () => {
-			const onColorChange = jest.fn();
-			const onGradientChange = jest.fn();
+			const onColorChange = vi.fn();
+			const onGradientChange = vi.fn();
 
 			await render(
 				<ColorGradientControl

package/src/components/contrast-checker/test/{index.jsx → index.jsdom.test.jsx}

@@ -1,8 +1,9 @@
+import { beforeEach, describe, expect, test, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { speak } from '@wordpress/a11y';
 import ContrastChecker from '../';
 
-jest.mock( '@wordpress/a11y', () => ( { speak: jest.fn() } ) );
+vi.mock( import( '@wordpress/a11y' ), () => ( { speak: vi.fn() } ) );
 
 describe( 'ContrastChecker', () => {
 	const backgroundColor = '#ffffff';

package/src/components/default-block-appender/test/__snapshots__/{index.jsx.snap → index.jsdom.test.jsx.snap}

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`DefaultBlockAppender should append a default block when input focused 1`] = `
+exports[`DefaultBlockAppender > should append a default block when input focused 1`] = `
 <div>
   <div
     class="block-editor-default-block-appender has-visible-prompt"
@@ -18,7 +18,7 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
 </div>
 `;
 
-exports[`DefaultBlockAppender should match snapshot 1`] = `
+exports[`DefaultBlockAppender > should match snapshot 1`] = `
 <div>
   <div
     class="block-editor-default-block-appender has-visible-prompt"
@@ -36,7 +36,7 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
 </div>
 `;
 
-exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
+exports[`DefaultBlockAppender > should optionally show without prompt 1`] = `
 <div>
   <div
     class="block-editor-default-block-appender"

package/src/components/default-block-appender/test/{index.jsx → index.jsdom.test.jsx}

@@ -1,20 +1,21 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import DefaultBlockAppender, { ZWNBSP } from '../';
 import * as blockEditorActions from '../../../store/actions';
 import * as blockEditorSelectors from '../../../store/selectors';
-jest.mock( '../../../store/actions', () => {
-	const actions = jest.requireActual( '../../../store/actions' );
+vi.mock( import( '../../../store/actions' ), async ( importOriginal ) => {
+	const actions = await importOriginal();
 	return {
 		...actions,
-		startTyping: jest.fn( actions.startTyping ),
+		startTyping: vi.fn( actions.startTyping ),
 	};
 } );
-jest.mock( '../../../store/selectors', () => {
-	const selectors = jest.requireActual( '../../../store/selectors' );
+vi.mock( import( '../../../store/selectors' ), async ( importOriginal ) => {
+	const selectors = await importOriginal();
 	return {
 		...selectors,
-		getBlockCount: jest.fn( selectors.getBlockCount ),
+		getBlockCount: vi.fn( selectors.getBlockCount ),
 	};
 } );
 
@@ -26,7 +27,7 @@ describe( 'DefaultBlockAppender', () => {
 	} );
 
 	it( 'should append a default block when input focused', async () => {
-		const startTyping = jest.spyOn( blockEditorActions, 'startTyping' );
+		const startTyping = vi.spyOn( blockEditorActions, 'startTyping' );
 		const user = userEvent.setup();
 
 		const { container } = render( <DefaultBlockAppender /> );

package/src/components/dimensions-tool/test/{index.jsx → index.jsdom.test.jsx}

@@ -1,9 +1,14 @@
+import { describe, expect, it, vi } from 'vitest';
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
 import { useEffect, useState } from '@wordpress/element';
 import DimensionsTool from '../';
 
+globalThis.wpVitest.mockMatchMedia();
+
+globalThis.wpVitest.mockResizeObserver();
+
 const EMPTY_OBJECT = {};
 const ASPECT_RATIO_OPTIONS = [
 	{ label: 'Original', value: 'auto' },
@@ -100,7 +105,7 @@ function ControlledExample( { value, onChange, ...props } ) {
 describe( 'DimensionsTool', () => {
 	describe( 'controlled values', () => {
 		it( 'updates the aspect ratio control when the value prop changes', () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			const { rerender } = render(
 				<ControlledExample
 					value={ { aspectRatio: '16/9' } }
@@ -131,7 +136,7 @@ describe( 'DimensionsTool', () => {
 		} );
 
 		it( 'displays an aspect ratio that is written differently to the option with the same ratio', () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			const { rerender } = render(
 				<ControlledExample
 					value={ { aspectRatio: '1/1' } }
@@ -154,7 +159,7 @@ describe( 'DimensionsTool', () => {
 		} );
 
 		it( 'displays an aspect ratio without a matching option as custom', () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			render(
 				<ControlledExample
 					value={ { aspectRatio: '7/5' } }
@@ -168,7 +173,7 @@ describe( 'DimensionsTool', () => {
 		} );
 
 		it( 'updates the scale control when the value prop changes', () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			const { rerender } = render(
 				<ControlledExample
 					value={ { aspectRatio: '16/9', scale: 'cover' } }
@@ -196,7 +201,7 @@ describe( 'DimensionsTool', () => {
 	describe( 'external updates', () => {
 		it( 'restores the scale that was set externally', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			const updateRef = { current: null };
 
 			render(
@@ -230,7 +235,7 @@ describe( 'DimensionsTool', () => {
 
 		it( 'restores the aspect ratio that was set externally', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			const updateRef = { current: null };
 
 			render(
@@ -271,7 +276,7 @@ describe( 'DimensionsTool', () => {
 	describe( 'updating aspectRatio', () => {
 		it( 'when starting with empty initial state, setting aspectRatio also sets scale (0000) -> (1100)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const initialValue = {
 				// aspectRatio,
@@ -311,7 +316,7 @@ describe( 'DimensionsTool', () => {
 
 		it( 'when starting with just height, setting aspectRatio also sets scale (0001) -> (1101)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const initialValue = {
 				// aspectRatio,
@@ -351,7 +356,7 @@ describe( 'DimensionsTool', () => {
 
 		it( 'when starting with just width, setting aspectRatio also sets scale (0010) -> (1110)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const initialValue = {
 				// aspectRatio,
@@ -391,7 +396,7 @@ describe( 'DimensionsTool', () => {
 
 		it( 'when starting with scale, width, and height, setting aspectRatio also clears height (0111) -> (1110)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const initialValue = {
 				// aspectRatio,
@@ -431,7 +436,7 @@ describe( 'DimensionsTool', () => {
 
 		it( 'when starting with aspectRatio and scale, setting aspectRatio to "Original" also clears scale (1100) -> (0000)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const initialValue = {
 				aspectRatio: '16/9',
@@ -463,7 +468,7 @@ describe( 'DimensionsTool', () => {
 
 		it( 'when starting with aspectRatio, scale, and height, setting aspectRatio to "Original" also clears scale (1101) -> (0001)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const initialValue = {
 				aspectRatio: '16/9',
@@ -497,7 +502,7 @@ describe( 'DimensionsTool', () => {
 
 		it( 'when starting with aspectRatio, scale, and width, setting aspectRatio to "Original" also clears scale (1110) -> (0010)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const initialValue = {
 				aspectRatio: '16/9',
@@ -533,7 +538,7 @@ describe( 'DimensionsTool', () => {
 	describe( 'updating scale', () => {
 		it( 'when default scale is cover, setting scale to fill preserves the fill value', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const initialValue = {
 				aspectRatio: '16/9',
@@ -560,7 +565,7 @@ describe( 'DimensionsTool', () => {
 	describe( 'updating dimensions', () => {
 		it( 'when starting with just height, setting width also sets scale (0001) -> (0111)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const initialValue = {
 				// aspectRatio,
@@ -600,7 +605,7 @@ describe( 'DimensionsTool', () => {
 
 		it( 'when starting with just width, setting height also sets scale (0010) -> (0111)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const initialValue = {
 				// aspectRatio,
@@ -640,7 +645,7 @@ describe( 'DimensionsTool', () => {
 
 		it( 'when starting with scale, width, and height, clearing width also clears scale (0111) -> (0001)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const initialValue = {
 				// aspectRatio,
@@ -674,7 +679,7 @@ describe( 'DimensionsTool', () => {
 
 		it( 'when starting with scale, width, and height, clearing height also clears scale (0111) -> (0010)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const initialValue = {
 				// aspectRatio,
@@ -708,7 +713,7 @@ describe( 'DimensionsTool', () => {
 
 		it( 'when starting with aspectRatio, scale, and height, setting width also clears aspectRatio (1101) -> (0111)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const initialValue = {
 				aspectRatio: '16/9',
@@ -754,7 +759,7 @@ describe( 'DimensionsTool', () => {
 
 		it( 'when starting with aspectRatio, scale, and width, setting height also clears aspectRatio (1110) -> (0111)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const initialValue = {
 				aspectRatio: '16/9',
@@ -802,7 +807,7 @@ describe( 'DimensionsTool', () => {
 	describe( 'internal component state', () => {
 		it( 'when aspect ratio is change to custom by setting width and height then removing a width value should return the original aspect ratio (1100) -> (1110) -> (0111) -> (1101)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const value = {
 				aspectRatio: '16/9',
@@ -841,7 +846,7 @@ describe( 'DimensionsTool', () => {
 
 		it( 'when custom scale is set then aspect ratio is set to original and then aspect ratio is changed back (1100) -> (1100) -> (0000) -> (1100)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const value = {
 				aspectRatio: '16/9',

package/src/components/dimensions-tool/test/utils.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { findAspectRatioOption, parseAspectRatio } from '../utils';
 
 describe( 'parseAspectRatio', () => {

package/src/components/duotone-control/test/{index.jsx → index.jsdom.test.jsx}

@@ -1,7 +1,10 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import DuotoneControl from '../';
 
+globalThis.wpVitest.mockMatchMedia();
+
 // Adding two custom duotones in Global Styles seeds both from the palette's
 // darkest and lightest colors, so two presets holding the same pair is the
 // ordinary case. Only the slug tells them apart.
@@ -32,7 +35,7 @@ async function openControl( user ) {
 describe( 'DuotoneControl', () => {
 	it( 'reports the slug of the duplicate that was picked', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<DuotoneControl
@@ -64,7 +67,7 @@ describe( 'DuotoneControl', () => {
 				colorPalette={ COLOR_PALETTE }
 				value={ [ '#000000', '#ffffff' ] }
 				selectedSlug="custom-duotone-2"
-				onChange={ jest.fn() }
+				onChange={ vi.fn() }
 			/>
 		);
 		await openControl( user );
@@ -85,7 +88,7 @@ describe( 'DuotoneControl', () => {
 				duotonePalette={ DUPLICATE_PALETTE }
 				colorPalette={ COLOR_PALETTE }
 				value={ [ '#000000', '#ffffff' ] }
-				onChange={ jest.fn() }
+				onChange={ vi.fn() }
 			/>
 		);
 		await openControl( user );

package/src/components/font-sizes/test/fluid-utils.js

@@ -1,3 +1,4 @@
+import { afterEach, describe, expect, it } from 'vitest';
 import { logged } from '@wordpress/deprecated';
 import {
 	getComputedFluidTypographyValue,

package/src/components/font-sizes/test/utils.js

@@ -1,3 +1,4 @@
+import { afterEach, describe, expect, it } from 'vitest';
 import { logged } from '@wordpress/deprecated';
 import { getFontSizeClass } from '../utils';
 

package/src/components/global-styles/border-panel.jsx

@@ -12,7 +12,6 @@ import BorderRadiusControl from '../border-radius-control';
 import { useColorsPerOrigin } from './hooks';
 import { useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
-import { useBorderPanelLabel } from '../../hooks/border';
 import { ShadowPopover, useShadowPresets } from './shadow-panel-components';
 import {
 	getInheritanceProps,
@@ -365,24 +364,18 @@ export default function BorderPanel( {
 	const showBorderByDefault =
 		defaultControls?.color || defaultControls?.width;
 
-	const hasBorderControl =
-		showBorderColor ||
-		showBorderStyle ||
-		showBorderWidth ||
-		showBorderRadius;
-
-	const label = useBorderPanelLabel( {
-		hasShadowControl,
-		hasBorderControl,
-	} );
-
 	return (
 		<Wrapper
 			resetAllFilter={ resetAllFilter }
 			value={ value }
 			onChange={ onChange }
 			panelId={ panelId }
-			label={ label }
+			// A shadow is treated as a soft border, so the panel keeps one
+			// name whichever of its controls a theme or block opts into.
+			// A stable title is what lets each control show its own label
+			// unconditionally, which in turn keeps their unlink toggles
+			// aligned.
+			label={ __( 'Borders' ) }
 		>
 			{ ( showBorderWidth || showBorderColor ) && (
 				<InheritanceToolsPanelItem
@@ -394,37 +387,23 @@ export default function BorderPanel( {
 					) }
 					hasValue={ () => isDefinedBorder( value?.border ) }
 					label={ __( 'Border' ) }
+					hasInlineEndToggle
 					onDeselect={ () => resetBorder() }
 					isShownByDefault={ showBorderByDefault }
 					panelId={ panelId }
 				>
-					{ ( showInheritanceLabelIndicators ||
-						hasShadowControl ) && (
-						// Render the visible label as `BaseControl.VisualLabel`
-						// (which produces `.components-base-control__label`)
-						// rather than passing `label` to `BorderBoxControl`,
-						// whose internal `<StyledLabel>` carries no stable
-						// className. The inheritance treatment and the
-						// local-override reset affordance both target
-						// `.components-base-control__label`, so the visible
-						// "Border" label has to be a `BaseControl` label to
-						// receive them.
-						//
-						// Render it whenever a Shadow control is also present so
-						// the two controls stay disambiguated (mirrors the
-						// Shadow label's `hasBorderControl` guard below, and
-						// trunk's `hideLabelFromVision={ ! hasShadowControl }`),
-						// even when inheritance indicators are off (e.g. in
-						// Global Styles).
-						<BaseControl.VisualLabel as="legend">
-							{ __( 'Border' ) }
-						</BaseControl.VisualLabel>
-					) }
+					{ /* The visible label is always rendered, so the control's
+					    linked/unlinked toggle sits in a label row and lines up
+					    with the Radius control's. `BorderBoxControl` renders the
+					    label as `BaseControl.VisualLabel`, which is what the
+					    inheritance treatment and the local-override reset
+					    affordance target. */ }
 					<BorderBoxControl
 						colors={ colors }
 						disableCustomColors={ ! areCustomSolidsEnabled }
 						enableAlpha
 						enableStyle={ showBorderStyle }
+						label={ __( 'Border' ) }
 						onChange={ onBorderChange }
 						popoverOffset={ 40 }
 						popoverPlacement="left-start"
@@ -472,11 +451,9 @@ export default function BorderPanel( {
 					showLocalOverrideActionsInLabel={ false }
 					panelId={ panelId }
 				>
-					{ hasBorderControl ? (
-						<BaseControl.VisualLabel as="legend">
-							{ __( 'Shadow' ) }
-						</BaseControl.VisualLabel>
-					) : null }
+					<BaseControl.VisualLabel>
+						{ __( 'Shadow' ) }
+					</BaseControl.VisualLabel>
 
 					<ShadowPopover
 						shadow={ shadow }

package/src/components/global-styles/image-settings-panel.jsx

@@ -8,7 +8,7 @@ import { useToolsPanelDropdownMenuProps } from './utils';
 
 export function useHasImageSettingsPanel( name, value, inheritedValue ) {
 	// Note: If lightbox `value` exists, that means it was
-	// defined via the the Global Styles UI and will NOT
+	// defined via the Global Styles UI and will NOT
 	// be a boolean value or contain the `allowEditing` property,
 	// so we should show the settings panel in those cases.
 	return (