@wordpress/block-editor 9.7.1-next.d6164808d3.0 → 10.0.0

package/src/components/spacing-sizes-control/test/utils.js

@@ -4,6 +4,7 @@
 import {
 	isValueSpacingPreset,
 	getCustomValueFromPreset,
+	getPresetValueFromCustomValue,
 	getSpacingPresetCssVar,
 	getSpacingPresetSlug,
 	getSliderValueFromPreset,
@@ -40,6 +41,28 @@ describe( 'getCustomValueFromPreset', () => {
 	} );
 } );
 
+describe( 'getPresetValueFromCustomValue', () => {
+	const spacingSizes = [ { name: 'Small', slug: 20, size: '8px' } ];
+	it( 'should return original value if a string in spacing presets var format', () => {
+		expect(
+			getPresetValueFromCustomValue(
+				'var:preset|spacing|80',
+				spacingSizes
+			)
+		).toBe( 'var:preset|spacing|80' );
+	} );
+	it( 'should return value constructed from matching spacingSizes array entry if value matches sizes', () => {
+		expect( getPresetValueFromCustomValue( '8px', spacingSizes ) ).toBe(
+			'var:preset|spacing|20'
+		);
+	} );
+	it( 'should return values as-is if no matching preset in spacingSizes array', () => {
+		expect(
+			getPresetValueFromCustomValue( '1.125rem', spacingSizes )
+		).toBe( '1.125rem' );
+	} );
+} );
+
 describe( 'getSpacingPresetCssVar', () => {
 	it( 'should return original value if not a string in spacing presets var format', () => {
 		expect( getSpacingPresetCssVar( '20px' ) ).toBe( '20px' );
@@ -144,6 +167,9 @@ describe( 'isValuesDefined', () => {
 	it( 'should return false if values are not defined', () => {
 		expect( isValuesDefined( undefinedValues ) ).toBe( false );
 	} );
+	it( 'should return false if values is passed in as null', () => {
+		expect( isValuesDefined( null ) ).toBe( false );
+	} );
 	const definedValues = {
 		top: 'var:preset|spacing|30',
 		bottom: 'var:preset|spacing|20',

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

@@ -43,6 +43,33 @@ export function getCustomValueFromPreset( value, spacingSizes ) {
 	return spacingSize?.size;
 }
 
+/**
+ * Converts a custom value to preset value if one can be found.
+ *
+ * Returns value as-is if no match is found.
+ *
+ * @param {string} value        Value to convert
+ * @param {Array}  spacingSizes Array of the current spacing preset objects
+ *
+ * @return {string} The preset value if it can be found.
+ */
+export function getPresetValueFromCustomValue( value, spacingSizes ) {
+	// Return value as-is if it is already a preset;
+	if ( isValueSpacingPreset( value ) ) {
+		return value;
+	}
+
+	const spacingMatch = spacingSizes.find(
+		( size ) => String( size.size ) === String( value )
+	);
+
+	if ( spacingMatch?.slug ) {
+		return `var:preset|spacing|${ spacingMatch.slug }`;
+	}
+
+	return value;
+}
+
 /**
  * Converts a spacing preset into a custom value.
  *
@@ -181,15 +208,15 @@ export function isValuesMixed( values = {}, sides = ALL_SIDES ) {
  * @return {boolean} Whether values are defined.
  */
 export function isValuesDefined( values ) {
-	return (
-		values !== undefined &&
-		! isEmpty(
-			Object.values( values ).filter(
-				// Switching units when input is empty causes values only
-				// containing units. This gives false positive on mixed values
-				// unless filtered.
-				( value ) => !! value && /\d/.test( value )
-			)
+	if ( values === undefined || values === null ) {
+		return false;
+	}
+	return ! isEmpty(
+		Object.values( values ).filter(
+			// Switching units when input is empty causes values only
+			// containing units. This gives false positive on mixed values
+			// unless filtered.
+			( value ) => !! value && /\d/.test( value )
 		)
 	);
 }

package/src/components/text-decoration-control/index.js

@@ -1,7 +1,15 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { BaseControl, Button } from '@wordpress/components';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
 import { formatStrikethrough, formatUnderline } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
@@ -21,38 +29,41 @@ const TEXT_DECORATIONS = [
 /**
  * Control to facilitate text decoration selections.
  *
- * @param {Object}   props          Component props.
- * @param {string}   props.value    Currently selected text decoration.
- * @param {Function} props.onChange Handles change in text decoration selection.
+ * @param {Object}   props             Component props.
+ * @param {string}   props.value       Currently selected text decoration.
+ * @param {Function} props.onChange    Handles change in text decoration selection.
+ * @param {string}   [props.className] Additional class name to apply.
  *
  * @return {WPElement} Text decoration control.
  */
-export default function TextDecorationControl( { value, onChange } ) {
+export default function TextDecorationControl( {
+	value,
+	onChange,
+	className,
+	...props
+} ) {
 	return (
-		<fieldset className="block-editor-text-decoration-control">
-			<BaseControl.VisualLabel as="legend">
-				{ __( 'Decoration' ) }
-			</BaseControl.VisualLabel>
-			<div className="block-editor-text-decoration-control__buttons">
-				{ TEXT_DECORATIONS.map( ( textDecoration ) => {
-					return (
-						<Button
-							key={ textDecoration.value }
-							icon={ textDecoration.icon }
-							isSmall
-							isPressed={ textDecoration.value === value }
-							onClick={ () =>
-								onChange(
-									textDecoration.value === value
-										? undefined
-										: textDecoration.value
-								)
-							}
-							aria-label={ textDecoration.name }
-						/>
-					);
-				} ) }
-			</div>
-		</fieldset>
+		<ToggleGroupControl
+			{ ...props }
+			className={ classnames(
+				'block-editor-text-decoration-control',
+				className
+			) }
+			__experimentalIsBorderless
+			label={ __( 'Decoration' ) }
+			value={ value }
+			onChange={ onChange }
+		>
+			{ TEXT_DECORATIONS.map( ( textDecoration ) => {
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ textDecoration.value }
+						value={ textDecoration.value }
+						icon={ textDecoration.icon }
+						label={ textDecoration.name }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
 	);
 }

package/src/components/text-decoration-control/stories/index.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TextDecorationControl from '../';
+
+export default {
+	title: 'BlockEditor/TextDecorationControl',
+	component: TextDecorationControl,
+	argTypes: {
+		onChange: { action: 'onChange' },
+		size: {
+			options: [ 'default', '__unstable-large' ],
+			control: { type: 'radio' },
+		},
+	},
+};
+
+const Template = ( { onChange, ...args } ) => {
+	const [ value, setValue ] = useState();
+	return (
+		<TextDecorationControl
+			{ ...args }
+			onChange={ ( ...changeArgs ) => {
+				onChange( ...changeArgs );
+				setValue( ...changeArgs );
+			} }
+			value={ value }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );

package/src/components/text-transform-control/index.js

@@ -1,7 +1,13 @@
+/**
+ * External dependencies
+ */
 /**
  * WordPress dependencies
  */
-import { BaseControl, Button } from '@wordpress/components';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
 	formatCapitalize,
@@ -36,32 +42,26 @@ const TEXT_TRANSFORMS = [
  *
  * @return {WPElement} Text transform control.
  */
-export default function TextTransformControl( { value, onChange } ) {
+export default function TextTransformControl( { value, onChange, ...props } ) {
 	return (
-		<fieldset className="block-editor-text-transform-control">
-			<BaseControl.VisualLabel as="legend">
-				{ __( 'Letter case' ) }
-			</BaseControl.VisualLabel>
-			<div className="block-editor-text-transform-control__buttons">
-				{ TEXT_TRANSFORMS.map( ( textTransform ) => {
-					return (
-						<Button
-							key={ textTransform.value }
-							icon={ textTransform.icon }
-							isSmall
-							isPressed={ value === textTransform.value }
-							aria-label={ textTransform.name }
-							onClick={ () =>
-								onChange(
-									value === textTransform.value
-										? undefined
-										: textTransform.value
-								)
-							}
-						/>
-					);
-				} ) }
-			</div>
-		</fieldset>
+		<ToggleGroupControl
+			{ ...props }
+			className="block-editor-text-transform-control"
+			__experimentalIsBorderless
+			label={ __( 'Letter case' ) }
+			value={ value }
+			onChange={ onChange }
+		>
+			{ TEXT_TRANSFORMS.map( ( textTransform ) => {
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ textTransform.value }
+						value={ textTransform.value }
+						icon={ textTransform.icon }
+						label={ textTransform.name }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
 	);
 }

package/src/components/text-transform-control/stories/index.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TextTransformControl from '../';
+
+export default {
+	title: 'BlockEditor/TextTransformControl',
+	component: TextTransformControl,
+	argTypes: {
+		onChange: { action: 'onChange' },
+		size: {
+			options: [ 'default', '__unstable-large' ],
+			control: { type: 'radio' },
+		},
+	},
+};
+
+const Template = ( { onChange, ...args } ) => {
+	const [ value, setValue ] = useState();
+	return (
+		<TextTransformControl
+			{ ...args }
+			onChange={ ( ...changeArgs ) => {
+				onChange( ...changeArgs );
+				setValue( ...changeArgs );
+			} }
+			value={ value }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );

package/src/components/tool-selector/index.js

@@ -31,15 +31,11 @@ const selectIcon = (
 );
 
 function ToolSelector( props, ref ) {
-	const isNavigationTool = useSelect(
-		( select ) => select( blockEditorStore ).isNavigationMode(),
+	const mode = useSelect(
+		( select ) => select( blockEditorStore ).__unstableGetEditorMode(),
 		[]
 	);
-	const { setNavigationMode } = useDispatch( blockEditorStore );
-
-	const onSwitchMode = ( mode ) => {
-		setNavigationMode( mode === 'edit' ? false : true );
-	};
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
 
 	return (
 		<Dropdown
@@ -47,7 +43,7 @@ function ToolSelector( props, ref ) {
 				<Button
 					{ ...props }
 					ref={ ref }
-					icon={ isNavigationTool ? selectIcon : editIcon }
+					icon={ mode === 'navigation' ? selectIcon : editIcon }
 					aria-expanded={ isOpen }
 					aria-haspopup="true"
 					onClick={ onToggle }
@@ -60,8 +56,10 @@ function ToolSelector( props, ref ) {
 				<>
 					<NavigableMenu role="menu" aria-label={ __( 'Tools' ) }>
 						<MenuItemsChoice
-							value={ isNavigationTool ? 'select' : 'edit' }
-							onSelect={ onSwitchMode }
+							value={
+								mode === 'navigation' ? 'navigation' : 'edit'
+							}
+							onSelect={ __unstableSetEditorMode }
 							choices={ [
 								{
 									value: 'edit',
@@ -73,7 +71,7 @@ function ToolSelector( props, ref ) {
 									),
 								},
 								{
-									value: 'select',
+									value: 'navigation',
 									label: (
 										<>
 											{ selectIcon }

package/src/components/url-input/test/button.js

@@ -1,91 +1,165 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
-import TestUtils from 'react-dom/test-utils';
-import ReactDOM from 'react-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
-import URLInput from '../';
 import URLInputButton from '../button';
 
-import '../../../store';
-
 describe( 'URLInputButton', () => {
-	const clickEditLink = ( wrapper ) =>
-		wrapper
-			.find( 'ForwardRef(Button).components-toolbar__control' )
-			.simulate( 'click' );
-
-	it( 'should have a valid class name in the wrapper tag', () => {
-		const wrapper = shallow( <URLInputButton /> );
-		expect( wrapper.hasClass( 'block-editor-url-input__button' ) ).toBe(
-			true
-		);
-	} );
-	it( 'should have isPressed props set to false when url prop not defined', () => {
-		const wrapper = shallow( <URLInputButton /> );
-		expect( wrapper.find( 'ForwardRef(Button)' ).prop( 'isPressed' ) ).toBe(
-			false
-		);
-	} );
-	it( 'should have isPressed prop set to true if url prop defined', () => {
-		const wrapper = shallow( <URLInputButton url="https://example.com" /> );
-		expect( wrapper.find( 'ForwardRef(Button)' ).prop( 'isPressed' ) ).toBe(
-			true
-		);
+	it( 'should render a `Insert link` button and not be pressed when `url` is not provided', () => {
+		render( <URLInputButton /> );
+
+		expect(
+			screen.queryByRole( 'button', {
+				name: 'Edit link',
+				pressed: true,
+			} )
+		).not.toBeInTheDocument();
+
+		expect(
+			screen.getByRole( 'button', {
+				name: 'Insert link',
+				pressed: false,
+			} )
+		).toBeVisible();
 	} );
-	it( 'should have hidden form by default', () => {
-		const wrapper = shallow( <URLInputButton /> );
-		expect( wrapper.find( 'form' ) ).toHaveLength( 0 );
-		expect( wrapper.state().expanded ).toBe( false );
+
+	it( 'should render an `Edit link` button and be pressed when `url` is provided', () => {
+		render( <URLInputButton url="https://example.com" /> );
+
+		expect(
+			screen.queryByRole( 'button', {
+				name: 'Insert link',
+				pressed: false,
+			} )
+		).not.toBeInTheDocument();
+
+		expect(
+			screen.getByRole( 'button', {
+				name: 'Edit link',
+				pressed: true,
+			} )
+		).toBeVisible();
 	} );
-	it( 'should have visible form when Edit Link button clicked', () => {
-		const wrapper = shallow( <URLInputButton /> );
-		clickEditLink( wrapper );
-		expect( wrapper.find( 'form' ) ).toHaveLength( 1 );
-		expect( wrapper.state().expanded ).toBe( true );
+
+	it( 'should not render a form by default', () => {
+		render( <URLInputButton /> );
+
+		expect(
+			screen.queryByRole( 'button', { name: 'Submit' } )
+		).not.toBeInTheDocument();
 	} );
-	it( 'should call onChange function once when value changes once', () => {
-		const onChangeMock = jest.fn();
-		const wrapper = shallow( <URLInputButton onChange={ onChangeMock } /> );
-		clickEditLink( wrapper );
-		wrapper.find( URLInput ).simulate( 'change' );
-		expect( onChangeMock ).toHaveBeenCalledTimes( 1 );
+
+	it( 'should render a form when `Insert link` button is clicked', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+		render( <URLInputButton /> );
+
+		// Click the button to insert a link.
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Insert link',
+				pressed: false,
+			} )
+		);
+
+		expect(
+			screen.getByRole( 'button', { name: 'Submit' } )
+		).toBeVisible();
 	} );
-	it( 'should call onChange function twice when value changes twice', () => {
+
+	it( 'should call `onChange` function once per each value change', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const onChangeMock = jest.fn();
-		const wrapper = shallow( <URLInputButton onChange={ onChangeMock } /> );
-		clickEditLink( wrapper );
-		wrapper.find( URLInput ).simulate( 'change' );
-		wrapper.find( URLInput ).simulate( 'change' );
-		expect( onChangeMock ).toHaveBeenCalledTimes( 2 );
+
+		render( <URLInputButton onChange={ onChangeMock } /> );
+
+		// Click the button to insert a link.
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Insert link',
+				pressed: false,
+			} )
+		);
+
+		// Type something into the URL field.
+		const urlField = screen.getByRole( 'combobox' );
+		const val1 = 'foo';
+		const val2 = 'barbaz';
+		await user.type( urlField, val1 );
+		await user.type( urlField, val2 );
+
+		expect( onChangeMock ).toHaveBeenCalledTimes(
+			val1.length + val2.length
+		);
 	} );
-	it( 'should close the form when user clicks Close button', () => {
-		const wrapper = shallow( <URLInputButton /> );
-		clickEditLink( wrapper );
-		expect( wrapper.state().expanded ).toBe( true );
-		wrapper.find( '.block-editor-url-input__back' ).simulate( 'click' );
-		expect( wrapper.state().expanded ).toBe( false );
+
+	it( 'should close the form when the user clicks the `Close` button', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		render( <URLInputButton /> );
+
+		// Click the button to insert a link.
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Insert link',
+				pressed: false,
+			} )
+		);
+
+		expect(
+			screen.getByRole( 'button', { name: 'Submit' } )
+		).toBeVisible();
+
+		// Click the button to close the form.
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Close',
+			} )
+		);
+
+		expect(
+			screen.queryByRole( 'button', { name: 'Submit' } )
+		).not.toBeInTheDocument();
 	} );
-	it( 'should close the form when user submits it', () => {
-		const wrapper = TestUtils.renderIntoDocument( <URLInputButton /> );
-		const buttonElement = () =>
-			TestUtils.scryRenderedDOMComponentsWithClass(
-				wrapper,
-				'components-toolbar__control'
-			);
-		const formElement = () =>
-			TestUtils.scryRenderedDOMComponentsWithTag( wrapper, 'form' );
-		TestUtils.Simulate.click( buttonElement().shift() );
-		expect( wrapper.state.expanded ).toBe( true );
-		TestUtils.Simulate.submit( formElement().shift() );
-		expect( wrapper.state.expanded ).toBe( false );
-		ReactDOM.unmountComponentAtNode(
-			// eslint-disable-next-line react/no-find-dom-node
-			ReactDOM.findDOMNode( wrapper ).parentNode
+
+	it( 'should close the form when user submits it', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+		const onChangeMock = jest.fn();
+
+		render( <URLInputButton onChange={ onChangeMock } /> );
+
+		// Click the button to insert a link.
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Insert link',
+				pressed: false,
+			} )
 		);
+
+		// Type something into the URL field.
+		await user.type( screen.getByRole( 'combobox' ), 'foo' );
+
+		// Submit the form.
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Submit',
+			} )
+		);
+
+		expect(
+			screen.queryByRole( 'button', { name: 'Submit' } )
+		).not.toBeInTheDocument();
 	} );
 } );

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

@@ -33,7 +33,7 @@ function URLPopover( {
 			className="block-editor-url-popover"
 			focusOnMount={ focusOnMount }
 			position={ position }
-			__unstableShift
+			shift
 			{ ...popoverProps }
 		>
 			<div className="block-editor-url-popover__input-container">