@wordpress/block-editor 16.1.0 → 17.0.0

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

@@ -1,18 +1,7 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
-/**
- * WordPress dependencies
- */
 import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
+import { useEffect, useState } from '@wordpress/element';
 import DimensionsTool from '../';
 
 const EMPTY_OBJECT = {};
@@ -20,6 +9,9 @@ const ASPECT_RATIO_OPTIONS = [
 	{ label: 'Original', value: 'auto' },
 	{ label: '16/9', value: '16/9' },
 	{ label: '4/3', value: '4/3' },
+	// Matches the core preset for a square, which is written as a single
+	// number rather than a ratio.
+	{ label: 'Square', value: '1' },
 	{
 		label: 'Custom',
 		value: 'custom',
@@ -52,6 +44,30 @@ function Example( { initialValue, onChange, ...props } ) {
 	);
 }
 
+// Holds the value like `Example`, but also lets a test update it from the
+// outside, the way `updateBlockAttributes`, undo, or another client would.
+function ExternallyUpdatedExample( { initialValue, onChange, updateRef } ) {
+	const [ value, setValue ] = useState( initialValue );
+	useEffect( () => {
+		updateRef.current = setValue;
+	}, [ updateRef ] );
+	return (
+		<ToolsPanel label="Dimensions" panelId="panel-id" resetAll={ () => {} }>
+			<DimensionsTool
+				panelId="panel-id"
+				onChange={ ( nextValue ) => {
+					setValue( nextValue );
+					onChange( nextValue );
+				} }
+				defaultScale="cover"
+				defaultAspectRatio="auto"
+				aspectRatioOptions={ ASPECT_RATIO_OPTIONS }
+				value={ value }
+			/>
+		</ToolsPanel>
+	);
+}
+
 function ControlledExample( { value, onChange, ...props } ) {
 	return (
 		<ToolsPanel
@@ -113,6 +129,143 @@ describe( 'DimensionsTool', () => {
 			);
 			expect( aspectRatioSelect ).toHaveValue( 'auto' );
 		} );
+
+		it( 'displays an aspect ratio that is written differently to the option with the same ratio', () => {
+			const onChange = jest.fn();
+			const { rerender } = render(
+				<ControlledExample
+					value={ { aspectRatio: '1/1' } }
+					onChange={ onChange }
+				/>
+			);
+			const aspectRatioSelect = screen.getByRole( 'combobox', {
+				name: 'Aspect ratio',
+			} );
+
+			expect( aspectRatioSelect ).toHaveValue( '1' );
+
+			rerender(
+				<ControlledExample
+					value={ { aspectRatio: '16 / 9' } }
+					onChange={ onChange }
+				/>
+			);
+			expect( aspectRatioSelect ).toHaveValue( '16/9' );
+		} );
+
+		it( 'displays an aspect ratio without a matching option as custom', () => {
+			const onChange = jest.fn();
+			render(
+				<ControlledExample
+					value={ { aspectRatio: '7/5' } }
+					onChange={ onChange }
+				/>
+			);
+
+			expect(
+				screen.getByRole( 'combobox', { name: 'Aspect ratio' } )
+			).toHaveValue( 'custom' );
+		} );
+
+		it( 'updates the scale control when the value prop changes', () => {
+			const onChange = jest.fn();
+			const { rerender } = render(
+				<ControlledExample
+					value={ { aspectRatio: '16/9', scale: 'cover' } }
+					onChange={ onChange }
+				/>
+			);
+
+			expect(
+				screen.getByRole( 'radio', { name: 'Cover' } )
+			).toBeChecked();
+
+			rerender(
+				<ControlledExample
+					value={ { aspectRatio: '16/9', scale: 'contain' } }
+					onChange={ onChange }
+				/>
+			);
+
+			expect(
+				screen.getByRole( 'radio', { name: 'Contain' } )
+			).toBeChecked();
+		} );
+	} );
+
+	describe( 'external updates', () => {
+		it( 'restores the scale that was set externally', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+			const updateRef = { current: null };
+
+			render(
+				<ExternallyUpdatedExample
+					initialValue={ { aspectRatio: '16/9', scale: 'cover' } }
+					onChange={ onChange }
+					updateRef={ updateRef }
+				/>
+			);
+
+			// Update the scale from outside the component.
+			await act( async () =>
+				updateRef.current( { aspectRatio: '16/9', scale: 'contain' } )
+			);
+
+			// Clearing and setting the aspect ratio again restores the scale.
+			await user.selectOptions(
+				screen.getByRole( 'combobox', { name: 'Aspect ratio' } ),
+				'auto'
+			);
+			await user.selectOptions(
+				screen.getByRole( 'combobox', { name: 'Aspect ratio' } ),
+				'4/3'
+			);
+
+			expect( onChange ).toHaveBeenLastCalledWith( {
+				aspectRatio: '4/3',
+				scale: 'contain',
+			} );
+		} );
+
+		it( 'restores the aspect ratio that was set externally', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+			const updateRef = { current: null };
+
+			render(
+				<ExternallyUpdatedExample
+					initialValue={ { aspectRatio: '16/9', scale: 'cover' } }
+					onChange={ onChange }
+					updateRef={ updateRef }
+				/>
+			);
+
+			// Update the aspect ratio from outside the component.
+			await act( async () =>
+				updateRef.current( { aspectRatio: '4/3', scale: 'cover' } )
+			);
+
+			// Setting both a width and a height replaces the aspect ratio with
+			// a custom one, and clearing the width restores the previous one.
+			await user.type(
+				screen.getByRole( 'spinbutton', { name: 'Width' } ),
+				'100'
+			);
+			await user.type(
+				screen.getByRole( 'spinbutton', { name: 'Height' } ),
+				'100'
+			);
+			await user.clear(
+				screen.getByRole( 'spinbutton', { name: 'Width' } )
+			);
+
+			expect( onChange ).toHaveBeenLastCalledWith( {
+				aspectRatio: '4/3',
+				scale: 'cover',
+				height: '100px',
+			} );
+		} );
 	} );
 
 	describe( 'updating aspectRatio', () => {

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

@@ -0,0 +1,51 @@
+import { findAspectRatioOption, parseAspectRatio } from '../utils';
+
+describe( 'parseAspectRatio', () => {
+	it.each( [
+		[ '1', 1 ],
+		[ '1/1', 1 ],
+		[ '16/9', 16 / 9 ],
+		[ '16 / 9', 16 / 9 ],
+		[ '1.5', 1.5 ],
+		[ '3/2', 1.5 ],
+	] )( 'parses %s', ( value, expected ) => {
+		expect( parseAspectRatio( value ) ).toBe( expected );
+	} );
+
+	it.each( [
+		[ 'auto' ],
+		[ '' ],
+		[ '16/9/2' ],
+		[ '0' ],
+		[ '1/0' ],
+		[ '-16/9' ],
+		[ undefined ],
+		[ null ],
+	] )( 'returns null for %s', ( value ) => {
+		expect( parseAspectRatio( value ) ).toBeNull();
+	} );
+} );
+
+describe( 'findAspectRatioOption', () => {
+	const options = [
+		{ label: 'Original', value: 'auto' },
+		{ label: 'Square', value: '1' },
+		{ label: 'Wide', value: '16/9' },
+	];
+
+	it( 'matches an option by value', () => {
+		expect( findAspectRatioOption( '16/9', options ) ).toBe( options[ 2 ] );
+	} );
+
+	it( 'matches an option describing the same ratio', () => {
+		expect( findAspectRatioOption( '1/1', options ) ).toBe( options[ 1 ] );
+		expect( findAspectRatioOption( '16 / 9', options ) ).toBe(
+			options[ 2 ]
+		);
+	} );
+
+	it( 'returns null when no option describes the ratio', () => {
+		expect( findAspectRatioOption( '7/5', options ) ).toBeNull();
+		expect( findAspectRatioOption( 'nonsense', options ) ).toBeNull();
+	} );
+} );

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

@@ -0,0 +1,67 @@
+/**
+ * Parses a CSS `aspect-ratio` value into a number so that values that are
+ * written differently but describe the same ratio, e.g. `1` and `1/1`, can be
+ * compared.
+ *
+ * @param {string} [value] CSS aspect-ratio value, e.g. '16/9' or '1.5'.
+ *
+ * @return {?number} The ratio as a number, or null when it cannot be parsed.
+ */
+export function parseAspectRatio( value ) {
+	if ( typeof value !== 'string' ) {
+		return null;
+	}
+
+	const parts = value.split( '/' );
+
+	if ( parts.length > 2 ) {
+		return null;
+	}
+
+	const [ width, height = '1' ] = parts;
+	const numericWidth = Number( width.trim() );
+	const numericHeight = Number( height.trim() );
+
+	if (
+		! Number.isFinite( numericWidth ) ||
+		! Number.isFinite( numericHeight ) ||
+		numericWidth <= 0 ||
+		numericHeight <= 0
+	) {
+		return null;
+	}
+
+	return numericWidth / numericHeight;
+}
+
+/**
+ * Finds the option that represents the given CSS `aspect-ratio` value.
+ *
+ * Aspect ratio values are free-form CSS, while the options are a fixed list of
+ * presets, so an exact string match isn't enough: `1/1` and `1` describe the
+ * same ratio but only one of them is a preset value.
+ *
+ * @param {string}   value   CSS aspect-ratio value.
+ * @param {Object[]} options Aspect ratio options.
+ *
+ * @return {?Object} The matching option, or null when there is none.
+ */
+export function findAspectRatioOption( value, options ) {
+	const exactMatch = options.find( ( option ) => option.value === value );
+
+	if ( exactMatch ) {
+		return exactMatch;
+	}
+
+	const ratio = parseAspectRatio( value );
+
+	if ( ratio === null ) {
+		return null;
+	}
+
+	return (
+		options.find(
+			( option ) => parseAspectRatio( option.value ) === ratio
+		) ?? null
+	);
+}

package/src/components/dimensions-tool/width-height-tool.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUnitControl as UnitControl,

package/src/components/duotone-control/index.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	ColorIndicator,
 	Dropdown,
@@ -21,6 +18,7 @@ function DuotoneControl( {
 	disableCustomColors,
 	disableCustomDuotone,
 	value,
+	selectedSlug,
 	onChange,
 } ) {
 	let toolbarIcon;
@@ -78,6 +76,7 @@ function DuotoneControl( {
 						disableCustomColors={ disableCustomColors }
 						disableCustomDuotone={ disableCustomDuotone }
 						value={ value }
+						selectedSlug={ selectedSlug }
 						onChange={ onChange }
 					/>
 				</MenuGroup>

package/src/components/duotone-control/test/index.js

@@ -0,0 +1,100 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import DuotoneControl from '../';
+
+// 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.
+const DUPLICATE_PALETTE = [
+	{
+		name: 'Duotone 1',
+		slug: 'custom-duotone-1',
+		colors: [ '#000000', '#ffffff' ],
+	},
+	{
+		name: 'Duotone 2',
+		slug: 'custom-duotone-2',
+		colors: [ '#000000', '#ffffff' ],
+	},
+];
+
+const COLOR_PALETTE = [
+	{ color: '#000000', name: 'Black', slug: 'black' },
+	{ color: '#ffffff', name: 'White', slug: 'white' },
+];
+
+async function openControl( user ) {
+	await user.click(
+		screen.getByRole( 'button', { name: 'Apply duotone filter' } )
+	);
+}
+
+describe( 'DuotoneControl', () => {
+	it( 'reports the slug of the duplicate that was picked', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+
+		render(
+			<DuotoneControl
+				duotonePalette={ DUPLICATE_PALETTE }
+				colorPalette={ COLOR_PALETTE }
+				value={ undefined }
+				onChange={ onChange }
+			/>
+		);
+		await openControl( user );
+
+		await user.click(
+			screen.getByRole( 'option', { name: 'Duotone: Duotone 2' } )
+		);
+
+		expect( onChange ).toHaveBeenCalledWith(
+			[ '#000000', '#ffffff' ],
+			1,
+			'custom-duotone-2'
+		);
+	} );
+
+	it( 'marks only the stored preset as selected when two share colors', async () => {
+		const user = userEvent.setup();
+
+		render(
+			<DuotoneControl
+				duotonePalette={ DUPLICATE_PALETTE }
+				colorPalette={ COLOR_PALETTE }
+				value={ [ '#000000', '#ffffff' ] }
+				selectedSlug="custom-duotone-2"
+				onChange={ jest.fn() }
+			/>
+		);
+		await openControl( user );
+
+		expect(
+			screen.getByRole( 'option', { name: 'Duotone: Duotone 1' } )
+		).toHaveAttribute( 'aria-selected', 'false' );
+		expect(
+			screen.getByRole( 'option', { name: 'Duotone: Duotone 2' } )
+		).toHaveAttribute( 'aria-selected', 'true' );
+	} );
+
+	it( 'falls back to color matching when no slug is stored', async () => {
+		const user = userEvent.setup();
+
+		render(
+			<DuotoneControl
+				duotonePalette={ DUPLICATE_PALETTE }
+				colorPalette={ COLOR_PALETTE }
+				value={ [ '#000000', '#ffffff' ] }
+				onChange={ jest.fn() }
+			/>
+		);
+		await openControl( user );
+
+		expect(
+			screen.getByRole( 'option', { name: 'Duotone: Duotone 1' } )
+		).toHaveAttribute( 'aria-selected', 'true' );
+		expect(
+			screen.getByRole( 'option', { name: 'Duotone: Duotone 2' } )
+		).toHaveAttribute( 'aria-selected', 'true' );
+	} );
+} );

package/src/components/editable-text/index.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import RichText from '../rich-text';
 
 const EditableText = forwardRef( ( props, ref ) => {

package/src/components/editor-styles/index.js

@@ -1,20 +1,9 @@
-/**
- * External dependencies
- */
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
-
-/**
- * WordPress dependencies
- */
 import { SVG } from '@wordpress/components';
 import { useCallback, useMemo, memo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import transformStyles from '../../utils/transform-styles';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';

package/src/components/fit-text-size-warning/index.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Notice } from '@wordpress/components';

package/src/components/font-appearance-control/index.js

@@ -1,13 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { CustomSelectControl } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';
 
 /**

package/src/components/font-family/index.js

@@ -1,17 +1,6 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { CustomSelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import { useSettings } from '../use-settings';
 
 export default function FontFamilyControl( {

package/src/components/font-family/stories/index.story.jsx

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import FontFamilyControl from '..';
 
 export default {

package/src/components/font-sizes/font-size-picker.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { FontSizePicker as BaseFontSizePicker } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import { useSettings } from '../use-settings';
 
 function FontSizePicker( props ) {

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

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { logged } from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
 import {
 	getComputedFluidTypographyValue,
 	getTypographyValueAndUnit,

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

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { logged } from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
 import { getFontSizeClass } from '../utils';
 
 describe( 'getFontSizeClass()', () => {

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

@@ -1,14 +1,4 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
-const { kebabCase } = unlock( componentsPrivateApis );
+import { kebabCase } from '@wordpress/kebab-case';
 
 /**
  *  Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values.

package/src/components/font-sizes/with-font-sizes.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { createHigherOrderComponent, compose } from '@wordpress/compose';
 import { Component } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { getFontSize, getFontSizeClass } from './utils';
 import { useSettings } from '../use-settings';
 

package/src/components/global-styles/advanced-panel.js

@@ -1,14 +1,10 @@
-/**
- * WordPress dependencies
- */
-import { TextareaControl, Notice } from '@wordpress/components';
+import {
+	TextareaControl as WCTextareaControl,
+	Notice,
+} from '@wordpress/components';
 import { Stack } from '@wordpress/ui';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import { default as transformStyles } from '../../utils/transform-styles';
 
 /**
@@ -95,7 +91,7 @@ export default function AdvancedPanel( {
 					{ cssError }
 				</Notice>
 			) }
-			<TextareaControl
+			<WCTextareaControl
 				label={ __( 'Additional CSS' ) }
 				value={ customCSS }
 				onChange={ ( newValue ) => handleOnChange( newValue ) }

package/src/components/global-styles/background-panel.js

@@ -1,13 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import BackgroundImageControl from '../background-image-control';
 import ColorGradientDropdownItem from './color-gradient-dropdown-item';
 import { useHasBackgroundColorPanel } from './color-panel';