@wordpress/block-editor 10.3.0 → 10.4.0

package/src/components/letter-spacing-control/README.md

@@ -0,0 +1,55 @@
+# Letter spacing control
+
+The `LetterSpacingControl` component renders a [`UnitControl`](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/unit-control/README.md) that lets the user enter a numeric value and select a unit, for example px or rem.
+
+This component is used for blocks that display text, commonly inside a 
+[`ToolsPanelItem`](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/tools-panel/tools-panel-item/README.md).
+
+## Table of contents
+
+1. [Development guidelines](#development-guidelines)
+2. [Related components](#related-components)
+
+## Development guidelines
+
+### Usage
+
+Renders a letter spacing control.
+
+```jsx
+import { LetterSpacingControl } from '@wordpress/block-editor';
+
+const MyLetterSpacingControl = () => (
+	<LetterSpacingControl
+		value={ value }
+		onChange={ onChange }
+		__unstableInputWidth="auto"
+	/>
+);
+```
+
+### Props
+
+### `value`
+
+-   **Type:** `String`
+-   **Default:** `undefined`
+
+The current value of the letter spacing setting.
+
+### `onChange`
+
+-   **Type:** `Function`
+
+A callback function invoked when the value is changed.
+
+### `_unstableInputWidth`
+
+-   **Type:** `string|number|undefined`
+-   **Default:** `undefined`
+
+Input width to pass through to inner UnitControl. Should be a valid CSS value.
+
+## Related components
+
+Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.

package/src/components/line-height-control/index.js

@@ -99,6 +99,7 @@ const LineHeightControl = ( {
 				step={ STEP }
 				value={ value }
 				min={ 0 }
+				spinControls="custom"
 			/>
 		</div>
 	);

package/src/components/link-control/README.md

@@ -192,7 +192,7 @@ A `suggestion` should have the following shape:
 	)}
 />
 ```
-### renderControlBottom 
+### renderControlBottom
 
 -   Type: `Function`
 -   Required: No
@@ -338,7 +338,7 @@ See the [createSuggestion](#createSuggestion) section of this file to learn more
 <LinkControlSearchInput
     renderSuggestions={( { suggestions } ) => {
         return (
-            <Popover focusOnMount={ false } position="bottom">
+            <Popover focusOnMount={ false } placement="bottom">
                 <ul>
                     { suggestions.map( () => ( <li key={ `${ suggestion.id }-${ suggestion.type }` }>{ suggestion.title }</li> ) ) }
                 </ul>
@@ -352,7 +352,7 @@ See the [createSuggestion](#createSuggestion) section of this file to learn more
 <LinkControlSearchInput
     renderSuggestions={( suggestionsProps ) => {
         return (
-            <Popover focusOnMount={ false } position="bottom">
+            <Popover focusOnMount={ false } placement="bottom">
                 <LinkControlSearchResults { ...suggestionsProps } />
             </Popover>
         );

package/src/components/list-view/drop-indicator.js

@@ -115,6 +115,7 @@ export default function ListViewDropIndicator( {
 			anchor={ popoverAnchor }
 			focusOnMount={ false }
 			className="block-editor-list-view-drop-indicator"
+			variant="unstyled"
 		>
 			<div
 				style={ style }

package/src/components/list-view/style.scss

@@ -249,39 +249,12 @@
 			}
 		}
 
-		// Don't show the focus inherited by the Button component.
-		&:focus:enabled {
-			box-shadow: none;
-			outline: none;
-		}
-
-		// Focus style.
-		&:focus {
-			box-shadow: none;
-			outline: none;
-		}
-
-		&:focus::before {
-			@include block-toolbar-button-style__focus();
-		}
-
-		// Focus and toggle pseudo elements.
+		// Tweak size and position of focus ring.
 		&::before {
-			content: "";
-			position: absolute;
-			display: block;
-			border-radius: $radius-block-ui;
 			height: 16px;
 			min-width: 100%;
-
-			// Position the focus rectangle.
 			left: 0;
 			right: 0;
-
-			// Animate in.
-			animation: components-button__appear-animation 0.1s ease;
-			animation-fill-mode: forwards;
-			@include reduce-motion("animation");
 		}
 	}
 
@@ -416,14 +389,6 @@ $block-navigation-max-indent: 8;
 	}
 }
 
-// Reset some popover defaults for the drop indicator.
-.block-editor-list-view-drop-indicator > .components-popover__content {
-	margin-left: 0;
-	border: none;
-	box-shadow: none;
-	outline: none;
-}
-
 .block-editor-list-view-placeholder {
 	padding: 0;
 	margin: 0;

package/src/components/media-replace-flow/index.js

@@ -131,7 +131,7 @@ const MediaReplaceFlow = ( {
 	const gallery = multiple && onlyAllowsImages();
 
 	const POPOVER_PROPS = {
-		isAlternate: true,
+		variant: 'toolbar',
 	};
 
 	return (

package/src/components/media-replace-flow/test/index.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { render, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
@@ -31,80 +32,97 @@ function TestWrapper() {
 	);
 }
 
-function setUpMediaReplaceFlow() {
-	const { container } = render( <TestWrapper /> );
-	return container;
-}
-
 describe( 'General media replace flow', () => {
 	it( 'renders successfully', () => {
-		const container = setUpMediaReplaceFlow();
-
-		const mediaReplaceButton = container.querySelector(
-			'button[aria-expanded="false"]'
-		);
-
-		expect( mediaReplaceButton ).not.toBeNull();
+		render( <TestWrapper /> );
+
+		expect(
+			screen.getByRole( 'button', {
+				expanded: false,
+				name: 'Replace',
+			} )
+		).toBeVisible();
 	} );
 
-	it( 'renders replace menu', () => {
-		const container = setUpMediaReplaceFlow();
+	it( 'renders replace menu', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
-		const mediaReplaceButton = container.querySelector(
-			'button[aria-expanded="false"]'
-		);
-		mediaReplaceButton.click();
+		render( <TestWrapper /> );
 
-		const uploadMenu = container.querySelector(
-			'.block-editor-media-replace-flow__media-upload-menu'
+		await user.click(
+			screen.getByRole( 'button', {
+				expanded: false,
+				name: 'Replace',
+			} )
 		);
 
-		expect( uploadMenu ).not.toBeNull();
+		const uploadMenu = screen.getByRole( 'menu' );
+
+		expect( uploadMenu ).toBeInTheDocument();
+		expect( uploadMenu ).not.toBeVisible();
 	} );
 
-	it( 'displays media URL', () => {
-		const container = setUpMediaReplaceFlow();
+	it( 'displays media URL', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
-		const mediaReplaceButton = container.querySelector(
-			'button[aria-expanded="false"]'
-		);
-		mediaReplaceButton.click();
+		render( <TestWrapper /> );
 
-		const mediaURL = container.querySelector( '.components-external-link' );
+		await user.click(
+			screen.getByRole( 'button', {
+				expanded: false,
+				name: 'Replace',
+			} )
+		);
 
-		expect( mediaURL.href ).toEqual( 'https://example.media/' );
+		expect(
+			screen.getByRole( 'link', {
+				name: 'example.media (opens in a new tab)',
+			} )
+		).toHaveAttribute( 'href', 'https://example.media' );
 	} );
 
-	it( 'edits media URL', () => {
-		const container = setUpMediaReplaceFlow();
+	it( 'edits media URL', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
-		const mediaReplaceButton = container.querySelector(
-			'button[aria-expanded="false"]'
-		);
-		mediaReplaceButton.click();
+		render( <TestWrapper /> );
 
-		const editMediaURL = container.querySelector(
-			'.block-editor-link-control__search-item-action'
+		await user.click(
+			screen.getByRole( 'button', {
+				expanded: false,
+				name: 'Replace',
+			} )
 		);
 
-		editMediaURL.click();
-
-		const mediaURLInput = container.querySelector(
-			'.block-editor-url-input__input'
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Edit',
+			} )
 		);
 
-		fireEvent.change( mediaURLInput, {
-			target: { value: 'https://new.example.media' },
+		const mediaURLInput = screen.getByRole( 'combobox', {
+			name: 'URL',
+			expanded: false,
 		} );
 
-		const saveMediaURLButton = container.querySelector(
-			'.block-editor-link-control__search-submit'
-		);
-
-		saveMediaURLButton.click();
+		await user.clear( mediaURLInput );
+		await user.type( mediaURLInput, 'https://new.example.media' );
 
-		const mediaURL = container.querySelector( '.components-external-link' );
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Submit',
+			} )
+		);
 
-		expect( mediaURL.href ).toEqual( 'https://new.example.media/' );
+		expect(
+			screen.getByRole( 'link', {
+				name: 'new.example.media (opens in a new tab)',
+			} )
+		).toHaveAttribute( 'href', 'https://new.example.media' );
 	} );
 } );

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/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/dimensions.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
-import { Platform } from '@wordpress/element';
+import { Platform, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { getBlockSupport } from '@wordpress/blocks';
 
@@ -44,6 +44,13 @@ export const SPACING_SUPPORT_KEY = 'spacing';
 export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];
 export const AXIAL_SIDES = [ 'vertical', 'horizontal' ];
 
+function useVisualizerMouseOver() {
+	const [ isMouseOver, setIsMouseOver ] = useState( false );
+	const onMouseOver = () => setIsMouseOver( true );
+	const onMouseOut = () => setIsMouseOver( false );
+	return { isMouseOver, onMouseOver, onMouseOut };
+}
+
 /**
  * Inspector controls for dimensions support.
  *
@@ -58,6 +65,8 @@ export function DimensionsPanel( props ) {
 	const isDisabled = useIsDimensionsDisabled( props );
 	const isSupported = hasDimensionsSupport( props.name );
 	const spacingSizes = useSetting( 'spacing.spacingSizes' );
+	const paddingMouseOver = useVisualizerMouseOver();
+	const marginMouseOver = useVisualizerMouseOver();
 
 	if ( isDisabled || ! isSupported ) {
 		return null;
@@ -96,7 +105,11 @@ export function DimensionsPanel( props ) {
 						isShownByDefault={ defaultSpacingControls?.padding }
 						panelId={ props.clientId }
 					>
-						<PaddingEdit { ...props } />
+						<PaddingEdit
+							onMouseOver={ paddingMouseOver.onMouseOver }
+							onMouseOut={ paddingMouseOver.onMouseOut }
+							{ ...props }
+						/>
 					</ToolsPanelItem>
 				) }
 				{ ! isMarginDisabled && (
@@ -109,7 +122,11 @@ export function DimensionsPanel( props ) {
 						isShownByDefault={ defaultSpacingControls?.margin }
 						panelId={ props.clientId }
 					>
-						<MarginEdit { ...props } />
+						<MarginEdit
+							onMouseOver={ marginMouseOver.onMouseOver }
+							onMouseOut={ marginMouseOver.onMouseOut }
+							{ ...props }
+						/>
 					</ToolsPanelItem>
 				) }
 				{ ! isGapDisabled && (
@@ -126,8 +143,18 @@ export function DimensionsPanel( props ) {
 					</ToolsPanelItem>
 				) }
 			</InspectorControls>
-			{ ! isPaddingDisabled && <PaddingVisualizer { ...props } /> }
-			{ ! isMarginDisabled && <MarginVisualizer { ...props } /> }
+			{ ! isPaddingDisabled && (
+				<PaddingVisualizer
+					forceShow={ paddingMouseOver.isMouseOver }
+					{ ...props }
+				/>
+			) }
+			{ ! isMarginDisabled && (
+				<MarginVisualizer
+					forceShow={ marginMouseOver.isMouseOver }
+					{ ...props }
+				/>
+			) }
 		</>
 	);
 }

package/src/hooks/font-size.js

@@ -150,6 +150,7 @@ export function FontSizeEdit( props ) {
 			onChange={ onChange }
 			value={ fontSizeValue }
 			withReset={ false }
+			withSlider
 			size="__unstable-large"
 			__nextHasNoMarginBottom
 		/>

package/src/hooks/layout.js

@@ -9,11 +9,7 @@ import { kebabCase } from 'lodash';
  */
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
-import {
-	getBlockDefaultClassName,
-	getBlockSupport,
-	hasBlockSupport,
-} from '@wordpress/blocks';
+import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import {
 	Button,
@@ -366,9 +362,8 @@ export const withLayoutStyles = createHigherOrderComponent(
 		const layoutClasses = hasLayoutBlockSupport
 			? useLayoutClasses( block )
 			: null;
-		const selector = `.${ getBlockDefaultClassName(
-			name
-		) }.wp-container-${ id }`;
+		// Higher specificity to override defaults from theme.json.
+		const selector = `.wp-container-${ id }.wp-container-${ id }`;
 		const blockGapSupport = useSetting( 'spacing.blockGap' );
 		const hasBlockGapSupport = blockGapSupport !== null;
 
@@ -413,7 +408,10 @@ export const withLayoutStyles = createHigherOrderComponent(
 						/>,
 						element
 					) }
-				<BlockListBlock { ...props } className={ className } />
+				<BlockListBlock
+					{ ...props }
+					__unstableLayoutClassNames={ className }
+				/>
 			</>
 		);
 	}