@wordpress/block-editor 10.3.0 → 10.5.0

package/src/components/responsive-block-control/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -48,6 +48,20 @@ const renderTestDefaultControlComponent = ( labelComponent, device ) => {
 	);
 };
 
+function getDefaultControlGroup( container ) {
+	// TODO: Use a user-facing query to fetch this.
+	return container.querySelector(
+		'.block-editor-responsive-block-control__group:not(.is-responsive)'
+	);
+}
+
+function getResponsiveControlGroup( container ) {
+	// TODO: Use a user-facing query to fetch this.
+	return container.querySelector(
+		'.block-editor-responsive-block-control__group.is-responsive'
+	);
+}
+
 describe( 'Basic rendering', () => {
 	it( 'should render with required props', () => {
 		const { container } = render(
@@ -58,48 +72,30 @@ describe( 'Basic rendering', () => {
 			/>
 		);
 
-		const activePropertyLabel = Array.from(
-			container.querySelectorAll( 'legend' )
-		).find( ( legend ) => legend.innerHTML === 'Padding' );
-
-		const activeViewportLabel = Array.from(
-			container.querySelectorAll( 'label' )
-		).find( ( label ) => label.innerHTML.includes( 'All' ) );
-
-		const defaultControl = container.querySelector(
-			`#${ activeViewportLabel.getAttribute( 'for' ) }`
-		);
-
-		const toggleLabel = Array.from(
-			container.querySelectorAll( 'label' )
-		).filter( ( label ) =>
-			label.innerHTML.includes(
-				'Use the same padding on all screensizes'
-			)
-		);
+		const activePropertyLabel = screen.getByRole( 'group', {
+			name: 'Padding',
+		} );
 
-		const toggleState = container.querySelector(
-			'input[type="checkbox"]'
-		).checked;
+		const defaultControl = screen.getByRole( 'combobox', {
+			name: 'All Controls the padding property for All viewports.',
+		} );
 
-		const defaultControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group:not(.is-responsive)'
-		);
+		const toggleState = screen.getByRole( 'checkbox', {
+			name: 'Use the same padding on all screensizes.',
+			checked: true,
+		} );
 
-		const responsiveControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group.is-responsive'
-		);
+		const defaultControlGroup = getDefaultControlGroup( container );
+		const responsiveControlGroup = getResponsiveControlGroup( container );
 
 		expect( container ).not.toBeEmptyDOMElement();
 
 		expect( defaultControlGroup ).not.toBeNull();
 		expect( responsiveControlGroup ).toBeNull();
 
-		expect( activeViewportLabel ).not.toBeNull();
-		expect( activePropertyLabel ).not.toBeNull();
-		expect( defaultControl ).not.toBeNull();
-		expect( toggleLabel ).not.toBeNull();
-		expect( toggleState ).toBe( true );
+		expect( activePropertyLabel ).toBeVisible();
+		expect( defaultControl ).toBeVisible();
+		expect( toggleState ).toBeVisible();
 	} );
 
 	it( 'should not render without valid legend', () => {
@@ -135,7 +131,7 @@ describe( 'Basic rendering', () => {
 	it( 'should render with custom label for toggle control when provided', () => {
 		const customToggleLabel =
 			'Utilise a matching padding value on all viewports';
-		const { container } = render(
+		render(
 			<ResponsiveBlockControl
 				title="Padding"
 				property="padding"
@@ -144,17 +140,21 @@ describe( 'Basic rendering', () => {
 			/>
 		);
 
-		const actualToggleLabel = container.querySelector(
-			'label.components-toggle-control__label'
-		).innerHTML;
-
-		expect( actualToggleLabel ).toEqual( customToggleLabel );
+		expect(
+			screen.getByRole( 'checkbox', {
+				name: customToggleLabel,
+				checked: true,
+			} )
+		).toBeVisible();
 	} );
 
 	it( 'should pass custom label for default control group to the renderDefaultControl function when provided', () => {
-		const customDefaultControlGroupLabel = 'Everything';
+		const customDefaultControlGroupLabel = {
+			id: 'everything',
+			label: 'Everything',
+		};
 
-		const { container } = render(
+		render(
 			<ResponsiveBlockControl
 				title="Padding"
 				property="padding"
@@ -163,11 +163,11 @@ describe( 'Basic rendering', () => {
 			/>
 		);
 
-		const defaultControlLabel = Array.from(
-			container.querySelectorAll( 'label' )
-		).find( ( label ) => label.innerHTML.includes( 'Everything' ) );
+		const defaultControlLabel = screen.getByRole( 'combobox', {
+			name: 'Everything Controls the padding property for Everything viewports.',
+		} );
 
-		expect( defaultControlLabel ).not.toBeNull();
+		expect( defaultControlLabel ).toBeVisible();
 	} );
 } );
 
@@ -182,12 +182,8 @@ describe( 'Default and Responsive modes', () => {
 			/>
 		);
 
-		const defaultControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group:not(.is-responsive)'
-		);
-		const responsiveControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group.is-responsive'
-		);
+		const defaultControlGroup = getDefaultControlGroup( container );
+		const responsiveControlGroup = getResponsiveControlGroup( container );
 
 		expect( defaultControlGroup ).toBeNull();
 		expect( responsiveControlGroup ).not.toBeNull();
@@ -217,7 +213,7 @@ describe( 'Default and Responsive modes', () => {
 			renderTestDefaultControlComponent
 		);
 
-		const { container } = render(
+		render(
 			<ResponsiveBlockControl
 				title="Padding"
 				property="padding"
@@ -230,13 +226,12 @@ describe( 'Default and Responsive modes', () => {
 		const defaultRenderControlCall = 1;
 
 		// Get array of labels which match those in the custom viewports provided
-		const responsiveViewportsLabels = Array.from(
-			container.querySelectorAll( 'label' )
-		).filter( ( label ) => {
-			const labelText = label.innerHTML;
-			// Is the label one of those in the custom device set?
-			return !! customViewportSet.find( ( deviceName ) =>
-				labelText.includes( deviceName.label )
+		const responsiveViewportsLabels = [];
+		customViewportSet.forEach( ( { label } ) => {
+			responsiveViewportsLabels.push(
+				screen.getByRole( 'combobox', {
+					name: `${ label } Controls the padding property for ${ label } viewports.`,
+				} )
 			);
 		} );
 
@@ -270,24 +265,14 @@ describe( 'Default and Responsive modes', () => {
 
 		const { container } = render( <ResponsiveBlockControlConsumer /> );
 
-		let defaultControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group:not(.is-responsive)'
-		);
-		let responsiveControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group.is-responsive'
-		);
+		let defaultControlGroup = getDefaultControlGroup( container );
+		let responsiveControlGroup = getResponsiveControlGroup( container );
 
 		// Select elements based on what the user can see.
-		const toggleLabel = Array.from(
-			container.querySelectorAll( 'label' )
-		).find( ( label ) =>
-			label.innerHTML.includes(
-				'Use the same padding on all screensizes'
-			)
-		);
-		const toggleInput = container.querySelector(
-			`#${ toggleLabel.getAttribute( 'for' ) }`
-		);
+		const toggleInput = screen.getByRole( 'checkbox', {
+			name: 'Use the same padding on all screensizes.',
+			checked: true,
+		} );
 
 		// Initial mode (default)
 		expect( defaultControlGroup ).not.toBeNull();
@@ -296,12 +281,8 @@ describe( 'Default and Responsive modes', () => {
 		// Toggle to "responsive" mode.
 		await user.click( toggleInput );
 
-		defaultControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group:not(.is-responsive)'
-		);
-		responsiveControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group.is-responsive'
-		);
+		defaultControlGroup = getDefaultControlGroup( container );
+		responsiveControlGroup = getResponsiveControlGroup( container );
 
 		expect( defaultControlGroup ).toBeNull();
 		expect( responsiveControlGroup ).not.toBeNull();
@@ -309,12 +290,8 @@ describe( 'Default and Responsive modes', () => {
 		// Toggle back to "default" mode.
 		await user.click( toggleInput );
 
-		defaultControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group:not(.is-responsive)'
-		);
-		responsiveControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group.is-responsive'
-		);
+		defaultControlGroup = getDefaultControlGroup( container );
+		responsiveControlGroup = getResponsiveControlGroup( container );
 
 		expect( defaultControlGroup ).not.toBeNull();
 		expect( responsiveControlGroup ).toBeNull();
@@ -340,7 +317,7 @@ describe( 'Default and Responsive modes', () => {
 			} );
 		} );
 
-		const { container } = render(
+		render(
 			<ResponsiveBlockControl
 				title="Padding"
 				property="padding"
@@ -351,9 +328,9 @@ describe( 'Default and Responsive modes', () => {
 		);
 
 		// The user should see "range" controls so we can legitimately query for them here.
-		const customControls = Array.from(
-			container.querySelectorAll( 'input[type="range"]' )
-		);
+		const customControls = screen.getAllByRole( 'slider', {
+			name: /\w+ screens$/,
+		} );
 
 		// Also called because default control rendeer function is always called
 		// (for convenience) even though it's not displayed in output.

package/src/components/rich-text/format-toolbar/index.js

@@ -15,7 +15,7 @@ import { chevronDown } from '@wordpress/icons';
 
 const POPOVER_PROPS = {
 	position: 'bottom right',
-	isAlternate: true,
+	variant: 'toolbar',
 };
 
 const FormatToolbar = () => {

package/src/components/rich-text/format-toolbar-container.js

@@ -42,7 +42,7 @@ function InlineSelectionToolbar( {
 function InlineToolbar( { popoverAnchor } ) {
 	return (
 		<Popover
-			position="top center"
+			placement="top"
 			focusOnMount={ false }
 			anchor={ popoverAnchor }
 			className="block-editor-rich-text__inline-format-toolbar"

package/src/components/rich-text/use-paste-handler.js

@@ -255,7 +255,7 @@ export function usePasteHandler( props ) {
 
 /**
  * Normalizes a given string of HTML to remove the Windows-specific "Fragment"
- * comments and any preceeding and trailing content.
+ * comments and any preceding and trailing content.
  *
  * @param {string} html the html to be normalized
  * @return {string} the normalized html

package/src/components/spacing-sizes-control/all-input-control.js

@@ -16,6 +16,8 @@ export default function AllInputControl( {
 	spacingSizes,
 	type,
 	minimumCustomValue,
+	onMouseOver,
+	onMouseOut,
 } ) {
 	const allValue = getAllRawValue( values );
 	const hasValues = isValuesDefined( values );
@@ -35,6 +37,8 @@ export default function AllInputControl( {
 			isMixed={ isMixed }
 			type={ type }
 			minimumCustomValue={ minimumCustomValue }
+			onMouseOver={ onMouseOver }
+			onMouseOut={ onMouseOut }
 		/>
 	);
 }

package/src/components/spacing-sizes-control/axial-input-controls.js

@@ -13,6 +13,8 @@ export default function AxialInputControls( {
 	spacingSizes,
 	type,
 	minimumCustomValue,
+	onMouseOver,
+	onMouseOut,
 } ) {
 	const createHandleOnChange = ( side ) => ( next ) => {
 		if ( ! onChange ) {
@@ -54,6 +56,8 @@ export default function AxialInputControls( {
 						spacingSizes={ spacingSizes }
 						type={ type }
 						minimumCustomValue={ minimumCustomValue }
+						onMouseOver={ onMouseOver }
+						onMouseOut={ onMouseOut }
 					/>
 				);
 			} ) }

package/src/components/spacing-sizes-control/index.js

@@ -29,6 +29,8 @@ export default function SpacingSizesControl( {
 	splitOnAxis = false,
 	useSelect,
 	minimumCustomValue = 0,
+	onMouseOver,
+	onMouseOut,
 } ) {
 	const spacingSizes = [
 		{ name: 0, slug: '0', size: 0 },
@@ -70,6 +72,8 @@ export default function SpacingSizesControl( {
 		useSelect,
 		type: label,
 		minimumCustomValue,
+		onMouseOver,
+		onMouseOut,
 	};
 
 	return (

package/src/components/spacing-sizes-control/input-controls.js

@@ -11,6 +11,8 @@ export default function BoxInputControls( {
 	spacingSizes,
 	type,
 	minimumCustomValue,
+	onMouseOver,
+	onMouseOut,
 } ) {
 	// Filter sides if custom configuration provided, maintaining default order.
 	const filteredSides = sides?.length
@@ -38,6 +40,8 @@ export default function BoxInputControls( {
 						spacingSizes={ spacingSizes }
 						type={ type }
 						minimumCustomValue={ minimumCustomValue }
+						onMouseOver={ onMouseOver }
+						onMouseOut={ onMouseOut }
 					/>
 				);
 			} ) }

package/src/components/spacing-sizes-control/spacing-input-control.js

@@ -51,6 +51,8 @@ export default function SpacingInputControl( {
 	isMixed = false,
 	type,
 	minimumCustomValue,
+	onMouseOver,
+	onMouseOut,
 } ) {
 	// Treat value as a preset value if the passed in value matches the value of one of the spacingSizes.
 	value = getPresetValueFromCustomValue( value, spacingSizes );
@@ -218,6 +220,8 @@ export default function SpacingInputControl( {
 			{ showCustomValueControl && (
 				<>
 					<UnitControl
+						onMouseOver={ onMouseOver }
+						onMouseOut={ onMouseOut }
 						onChange={ ( newSize ) =>
 							onChange( getNewCustomValue( newSize ) )
 						}
@@ -229,11 +233,12 @@ export default function SpacingInputControl( {
 						label={ ariaLabel }
 						hideLabelFromVision={ true }
 						className="components-spacing-sizes-control__custom-value-input"
-						style={ { gridColumn: '1' } }
 						size={ '__unstable-large' }
 					/>
 
 					<RangeControl
+						onMouseOver={ onMouseOver }
+						onMouseOut={ onMouseOut }
 						value={ customRangeValue }
 						min={ 0 }
 						max={ CUSTOM_VALUE_SETTINGS[ selectedUnit ]?.max ?? 10 }
@@ -248,6 +253,8 @@ export default function SpacingInputControl( {
 			) }
 			{ showRangeControl && ! showCustomValueControl && (
 				<RangeControl
+					onMouseOver={ onMouseOver }
+					onMouseOut={ onMouseOut }
 					className="components-spacing-sizes-control__range-control"
 					value={ currentValue }
 					onChange={ ( newSize ) =>
@@ -293,6 +300,8 @@ export default function SpacingInputControl( {
 					hideLabelFromVision={ true }
 					__nextUnconstrainedWidth={ true }
 					size={ '__unstable-large' }
+					onMouseOver={ onMouseOver }
+					onMouseOut={ onMouseOut }
 				/>
 			) }
 		</>

package/src/components/spacing-sizes-control/style.scss

@@ -91,6 +91,7 @@
 	.components-spacing-sizes-control__custom-value-input {
 		width: 124px;
 		margin-top: 8px;
+		grid-column: 1;
 	}
 
 	.components-range-control {

package/src/components/url-input/index.js

@@ -543,7 +543,7 @@ class URLInput extends Component {
 			!! suggestions.length
 		) {
 			return (
-				<Popover position="bottom" focusOnMount={ false }>
+				<Popover placement="bottom" focusOnMount={ false }>
 					<div
 						{ ...suggestionsListProps }
 						className={ classnames(

package/src/components/url-popover/README.md

@@ -94,13 +94,13 @@ class MyURLPopover extends Component {
 
 The component accepts the following props. Any other props are passed through to the underlying `Popover` component ([refer to props documentation](/packages/components/src/popover/README.md)).
 
-### position
+### placement
 
-Where the Popover should be positioned relative to its parent. Defaults to "bottom center".
+Where the Popover should be positioned relative to its parent. Defaults to "bottom".
 
 -   Type: `String`
 -   Required: No
--   Default: "bottom center"
+-   Default: "bottom"
 
 ### focusOnMount
 
@@ -194,3 +194,12 @@ Reference passed to the auto complete element of the ([URLInput component](/pack
 
 -   Type: `Object`
 -   Required: no
+
+### position
+
+_Note: this prop is deprecated. Please use the `placement` prop instead._
+
+Where the Popover should be positioned relative to its parent.
+
+-   Type: `String`
+-   Required: No

package/src/components/url-popover/index.js

@@ -3,8 +3,13 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { Button, Popover } from '@wordpress/components';
+import {
+	Button,
+	Popover,
+	__experimentalPopoverPositionToPlacement as positionToPlacement,
+} from '@wordpress/components';
 import { chevronDown } from '@wordpress/icons';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -12,14 +17,39 @@ import { chevronDown } from '@wordpress/icons';
 import LinkViewer from './link-viewer';
 import LinkEditor from './link-editor';
 
+const DEFAULT_PLACEMENT = 'bottom';
+
 function URLPopover( {
 	additionalControls,
 	children,
 	renderSettings,
-	position = 'bottom center',
+	// The DEFAULT_PLACEMENT value is assigned inside the function's body
+	placement,
 	focusOnMount = 'firstElement',
+	// Deprecated
+	position,
+	// Rest
 	...popoverProps
 } ) {
+	if ( position !== undefined ) {
+		deprecated( '`position` prop in wp.blockEditor.URLPopover', {
+			since: '6.2',
+			alternative: '`placement` prop',
+		} );
+	}
+
+	// Compute popover's placement:
+	// - give priority to `placement` prop, if defined
+	// - otherwise, compute it from the legacy `position` prop (if defined)
+	// - finally, fallback to the DEFAULT_PLACEMENT.
+	let computedPlacement;
+	if ( placement !== undefined ) {
+		computedPlacement = placement;
+	} else if ( position !== undefined ) {
+		computedPlacement = positionToPlacement( position );
+	}
+	computedPlacement = computedPlacement || DEFAULT_PLACEMENT;
+
 	const [ isSettingsExpanded, setIsSettingsExpanded ] = useState( false );
 
 	const showSettings = !! renderSettings && isSettingsExpanded;
@@ -32,7 +62,7 @@ function URLPopover( {
 		<Popover
 			className="block-editor-url-popover"
 			focusOnMount={ focusOnMount }
-			position={ position }
+			placement={ computedPlacement }
 			shift
 			{ ...popoverProps }
 		>

package/src/components/use-setting/index.js

@@ -18,7 +18,13 @@ import {
 import { useBlockEditContext } from '../block-edit';
 import { store as blockEditorStore } from '../../store';
 
-const blockedPaths = [ 'color', 'border', 'typography', 'spacing' ];
+const blockedPaths = [
+	'color',
+	'border',
+	'dimensions',
+	'typography',
+	'spacing',
+];
 
 const deprecatedFlags = {
 	'color.palette': ( settings ) => settings.colors,

package/src/hooks/border.js

@@ -272,6 +272,7 @@ export function BorderPanel( props ) {
 						onChange={ onBorderChange }
 						popoverOffset={ 40 }
 						popoverPlacement="left-start"
+						size="__unstable-large"
 						value={ hydratedBorder }
 						__experimentalHasMultipleOrigins={ true }
 						__experimentalIsRenderedInSidebar={ true }

package/src/hooks/color-panel.js

@@ -29,7 +29,19 @@ export default function ColorPanel( {
 	const definedColors = settings.filter( ( setting ) => setting?.colorValue );
 
 	useEffect( () => {
-		if ( ! enableContrastChecking || ! definedColors.length ) {
+		if ( ! enableContrastChecking ) {
+			return;
+		}
+		if ( ! definedColors.length ) {
+			if ( detectedBackgroundColor ) {
+				setDetectedBackgroundColor();
+			}
+			if ( detectedColor ) {
+				setDetectedColor();
+			}
+			if ( detectedLinkColor ) {
+				setDetectedColor();
+			}
 			return;
 		}
 

package/src/hooks/color.js

@@ -459,6 +459,8 @@ export function ColorEdit( props ) {
 		Platform.OS === 'web' &&
 		! gradient &&
 		! style?.color?.gradient &&
+		hasBackgroundColor &&
+		( hasLinkColor || hasTextColor ) &&
 		// Contrast checking is enabled by default.
 		// Deactivating it requires `enableContrastChecker` to have
 		// an explicit value of `false`.