@wordpress/components 19.17.0 → 20.0.0

package/src/mobile/image/index.native.js

@@ -1,12 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	Image as RNImage,
-	Text,
-	View,
-	useWindowDimensions,
-} from 'react-native';
+import { Image as RNImage, Text, View } from 'react-native';
 import FastImage from 'react-native-fast-image';
 
 /**
@@ -16,7 +11,7 @@ import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/components';
 import { image as icon } from '@wordpress/icons';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { useEffect, useState, useRef, Platform } from '@wordpress/element';
+import { useEffect, useState, Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -59,14 +54,14 @@ const ImageComponent = ( {
 } ) => {
 	const [ imageData, setImageData ] = useState( null );
 	const [ containerSize, setContainerSize ] = useState( null );
-	const [ shouldUseFallback, setShouldUseFallback ] = useState( false );
-	const { height: windowHeight, width: windowWidth } = useWindowDimensions();
-	const isLandscape = useRef( windowWidth > windowHeight );
 
-	const Image = ! shouldUseFastImage ? RNImage : FastImage;
-	const imageResizeMode = ! shouldUseFastImage
-		? resizeMode
-		: FastImage.resizeMode[ resizeMode ];
+	// Disabled for Android due to https://github.com/WordPress/gutenberg/issues/43149
+	const Image =
+		! shouldUseFastImage || Platform.isAndroid ? RNImage : FastImage;
+	const imageResizeMode =
+		! shouldUseFastImage || Platform.isAndroid
+			? resizeMode
+			: FastImage.resizeMode[ resizeMode ];
 
 	useEffect( () => {
 		let isCurrent = true;
@@ -89,21 +84,6 @@ const ImageComponent = ( {
 		return () => ( isCurrent = false );
 	}, [ url ] );
 
-	// Workaround for Android where changing the orientation breaks FastImage
-	// for now if there's any orientation changes, it will use the fallback
-	// prop to use the default Image component.
-	// https://github.com/WordPress/gutenberg/issues/42869
-	useEffect( () => {
-		if ( Platform.isAndroid && shouldUseFastImage ) {
-			const isCurrentOrientationLandscape = windowWidth > windowHeight;
-
-			if ( isLandscape.current !== isCurrentOrientationLandscape ) {
-				setShouldUseFallback( true );
-				isLandscape.current = isCurrentOrientationLandscape;
-			}
-		}
-	}, [ windowHeight, windowWidth ] );
-
 	const onContainerLayout = ( event ) => {
 		const { height, width } = event.nativeEvent.layout;
 
@@ -250,7 +230,6 @@ const ImageComponent = ( {
 								resizeMethod: 'scale',
 							} ) }
 							resizeMode={ imageResizeMode }
-							fallback={ shouldUseFallback }
 						/>
 					</View>
 				) }

package/src/mobile/picker/index.android.js

@@ -19,8 +19,8 @@ import styles from './styles.scss';
 
 function Separator() {
 	const separatorStyle = usePreferredColorSchemeStyle(
-		styles.separator,
-		styles.separatorDark
+		styles[ 'components-picker__separator' ],
+		styles[ 'components-picker__separator--dark' ]
 	);
 
 	return <View style={ separatorStyle } />;
@@ -64,7 +64,10 @@ export default class Picker extends Component {
 					separatorType={ 'none' }
 					onPress={ () => this.onCellPress( option.value ) }
 					disabled={ option.disabled }
-					style={ option.disabled && styles.disabled }
+					style={
+						option.disabled &&
+						styles[ 'components-picker__button--disabled' ]
+					}
 				/>
 			</Fragment>
 		) );
@@ -81,7 +84,10 @@ export default class Picker extends Component {
 				hideHeader
 				testID={ testID }
 			>
-				<PanelBody title={ title } style={ styles.panelBody }>
+				<PanelBody
+					title={ title }
+					style={ styles[ 'components-picker__panel' ] }
+				>
 					{ this.getOptions() }
 					{ ! hideCancelButton && (
 						<TextControl

package/src/mobile/picker/styles.native.scss

@@ -1,4 +1,4 @@
-.separator {
+.components-picker__separator {
 	margin-top: $grid-unit-20 * 0.5;
 	margin-bottom: $grid-unit-20 * 0.5;
 	margin-left: -$grid-unit-20;
@@ -7,15 +7,15 @@
 	background-color: $light-gray-400;
 }
 
-.separatorDark {
+.components-picker__separator--dark {
 	background-color: $gray-70;
 }
 
-.disabled {
+.components-picker__button--disabled {
 	opacity: 0.3;
 }
 
-.panelBody {
+.components-picker__panel {
 	padding-left: 0;
 	padding-right: 0;
 }

package/src/modal/index.js

@@ -24,7 +24,6 @@ import {
 	useConstrainedTabbing,
 	useMergeRefs,
 } from '@wordpress/compose';
-import { ESCAPE } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
 import { close } from '@wordpress/icons';
 
@@ -98,7 +97,7 @@ function Modal( props, forwardedRef ) {
 	function handleEscapeKeyDown( event ) {
 		if (
 			shouldCloseOnEsc &&
-			event.keyCode === ESCAPE &&
+			event.code === 'Escape' &&
 			! event.defaultPrevented
 		) {
 			event.preventDefault();

package/src/modal/test/index.js

@@ -26,25 +26,27 @@ describe( 'Modal', () => {
 		render(
 			<Modal aria={ { labelledby: 'title-id' } }>
 				{ /* eslint-disable-next-line no-restricted-syntax */ }
-				<h1 id="title-id">Test Title</h1>
+				<h1 id="title-id">Modal Title Text</h1>
 			</Modal>
 		);
-		expect( screen.getByRole( 'dialog' ) ).toHaveAttribute(
-			'aria-labelledby',
-			'title-id'
+		expect( screen.getByRole( 'dialog' ) ).toHaveAccessibleName(
+			'Modal Title Text'
 		);
 	} );
 
 	it( 'prefers the aria label of the title prop over the aria.labelledby prop', () => {
 		render(
-			<Modal title="Test Title" aria={ { labelledby: 'title-id' } }>
+			<Modal
+				title="Modal Title Attribute"
+				aria={ { labelledby: 'title-id' } }
+			>
 				{ /* eslint-disable-next-line no-restricted-syntax */ }
-				<h1 id="title-id">Wrong Title</h1>
+				<h1 id="title-id">Modal Title Text</h1>
 			</Modal>
 		);
-		const dialog = screen.getByRole( 'dialog' );
-		const titleId = within( dialog ).getByText( 'Test Title' ).id;
-		expect( dialog ).toHaveAttribute( 'aria-labelledby', titleId );
+		expect( screen.getByRole( 'dialog' ) ).toHaveAccessibleName(
+			'Modal Title Attribute'
+		);
 	} );
 
 	it( 'hides the header when the `__experimentalHideHeader` prop is used', () => {

package/src/navigable-container/container.js

@@ -1,9 +1,4 @@
 // @ts-nocheck
-/**
- * External dependencies
- */
-import { omit } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -131,20 +126,19 @@ class NavigableContainer extends Component {
 	}
 
 	render() {
-		const { children, ...props } = this.props;
+		const {
+			children,
+			stopNavigationEvents,
+			eventToOffset,
+			onNavigate,
+			onKeyDown,
+			cycle,
+			onlyBrowserTabstops,
+			forwardedRef,
+			...restProps
+		} = this.props;
 		return (
-			<div
-				ref={ this.bindContainer }
-				{ ...omit( props, [
-					'stopNavigationEvents',
-					'eventToOffset',
-					'onNavigate',
-					'onKeyDown',
-					'cycle',
-					'onlyBrowserTabstops',
-					'forwardedRef',
-				] ) }
-			>
+			<div ref={ this.bindContainer } { ...restProps }>
 				{ children }
 			</div>
 		);

package/src/navigable-container/menu.js

@@ -1,8 +1,4 @@
 // @ts-nocheck
-/**
- * External dependencies
- */
-import { includes } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -35,11 +31,11 @@ export function NavigableMenu(
 			previous = [ LEFT, UP ];
 		}
 
-		if ( includes( next, keyCode ) ) {
+		if ( next.includes( keyCode ) ) {
 			return 1;
-		} else if ( includes( previous, keyCode ) ) {
+		} else if ( previous.includes( keyCode ) ) {
 			return -1;
-		} else if ( includes( [ DOWN, UP, LEFT, RIGHT ], keyCode ) ) {
+		} else if ( [ DOWN, UP, LEFT, RIGHT ].includes( keyCode ) ) {
 			// Key press should be handled, e.g. have event propagation and
 			// default behavior handled by NavigableContainer but not result
 			// in an offset.

package/src/navigable-container/test/menu.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -42,7 +42,7 @@ function fireKeyDown( node, keyCode, shiftKey ) {
 describe( 'NavigableMenu', () => {
 	it( 'vertical: should navigate by up and down', () => {
 		let currentIndex = 0;
-		const { container, getByRole } = render(
+		const { container } = render(
 			/*
 				Disabled because of our rule restricting literal IDs, preferring
 				`withInstanceId`. In this case, it's fine to use literal IDs.
@@ -77,7 +77,7 @@ describe( 'NavigableMenu', () => {
 		// Navigate options.
 		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
 			const interaction = fireKeyDown(
-				getByRole( 'menu' ),
+				screen.getByRole( 'menu' ),
 				keyCode,
 				false
 			);
@@ -100,7 +100,7 @@ describe( 'NavigableMenu', () => {
 
 	it( 'vertical: should navigate by up and down, and stop at edges', () => {
 		let currentIndex = 0;
-		const { container, getByRole } = render(
+		const { container } = render(
 			/*
 				Disabled because of our rule restricting literal IDs, preferring
 				`withInstanceId`. In this case, it's fine to use literal IDs.
@@ -131,7 +131,7 @@ describe( 'NavigableMenu', () => {
 		// Navigate options.
 		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
 			const interaction = fireKeyDown(
-				getByRole( 'menu' ),
+				screen.getByRole( 'menu' ),
 				keyCode,
 				false
 			);
@@ -152,7 +152,7 @@ describe( 'NavigableMenu', () => {
 
 	it( 'horizontal: should navigate by left and right', () => {
 		let currentIndex = 0;
-		const { container, getByRole } = render(
+		const { container } = render(
 			/*
 				Disabled because of our rule restricting literal IDs, preferring
 				`withInstanceId`. In this case, it's fine to use literal IDs.
@@ -187,7 +187,7 @@ describe( 'NavigableMenu', () => {
 		// Navigate options.
 		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
 			const interaction = fireKeyDown(
-				getByRole( 'menu' ),
+				screen.getByRole( 'menu' ),
 				keyCode,
 				false
 			);
@@ -210,7 +210,7 @@ describe( 'NavigableMenu', () => {
 
 	it( 'horizontal: should navigate by left and right, and stop at edges', () => {
 		let currentIndex = 0;
-		const { container, getByRole } = render(
+		const { container } = render(
 			/*
 				Disabled because of our rule restricting literal IDs, preferring
 				`withInstanceId`. In this case, it's fine to use literal IDs.
@@ -241,7 +241,7 @@ describe( 'NavigableMenu', () => {
 		// Navigate options.
 		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
 			const interaction = fireKeyDown(
-				getByRole( 'menu' ),
+				screen.getByRole( 'menu' ),
 				keyCode,
 				false
 			);
@@ -262,7 +262,7 @@ describe( 'NavigableMenu', () => {
 
 	it( 'both: should navigate by up/down and left/right', () => {
 		let currentIndex = 0;
-		const { container, getByRole } = render(
+		const { container } = render(
 			/*
 				Disabled because of our rule restricting literal IDs, preferring
 				`withInstanceId`. In this case, it's fine to use literal IDs.
@@ -285,7 +285,10 @@ describe( 'NavigableMenu', () => {
 
 		// Navigate options.
 		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
-			const interaction = fireKeyDown( getByRole( 'menu' ), keyCode );
+			const interaction = fireKeyDown(
+				screen.getByRole( 'menu' ),
+				keyCode
+			);
 			expect( currentIndex ).toBe( expectedActiveIndex );
 			expect( interaction.stopped ).toBe( expectedStop );
 		}

package/src/navigator/navigator-back-button/hook.ts

@@ -3,9 +3,6 @@
  */
 import { useCallback } from '@wordpress/element';
 
-/**
- * Internal dependencies
- */
 /**
  * Internal dependencies
  */

package/src/navigator/navigator-button/hook.ts

@@ -4,9 +4,6 @@
 import { useCallback } from '@wordpress/element';
 import { escapeAttribute } from '@wordpress/escape-html';
 
-/**
- * Internal dependencies
- */
 /**
  * Internal dependencies
  */

package/src/notice/list.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { omit } from 'lodash';
 
 /**
  * Internal dependencies
@@ -30,15 +29,18 @@ function NoticeList( { notices, onRemove = noop, className, children } ) {
 	return (
 		<div className={ className }>
 			{ children }
-			{ [ ...notices ].reverse().map( ( notice ) => (
-				<Notice
-					{ ...omit( notice, [ 'content' ] ) }
-					key={ notice.id }
-					onRemove={ removeNotice( notice.id ) }
-				>
-					{ notice.content }
-				</Notice>
-			) ) }
+			{ [ ...notices ].reverse().map( ( notice ) => {
+				const { content, ...restNotice } = notice;
+				return (
+					<Notice
+						{ ...restNotice }
+						key={ notice.id }
+						onRemove={ removeNotice( notice.id ) }
+					>
+						{ notice.content }
+					</Notice>
+				);
+			} ) }
 		</div>
 	);
 }

package/src/palette-edit/index.js

@@ -163,6 +163,7 @@ function Option( {
 					{ ! isGradient && (
 						<ColorPicker
 							color={ value }
+							enableAlpha
 							onChange={ ( newColor ) =>
 								onChange( {
 									...element,

package/src/palette-edit/styles.js

@@ -29,7 +29,7 @@ export const IndicatorStyled = styled( CircularOptionPicker.Option )`
 export const NameInputControl = styled( InputControl )`
 	${ InputControlContainer } {
 		background: ${ COLORS.gray[ 100 ] };
-		border-radius: ${ CONFIG.controlBorderRadius }};
+		border-radius: ${ CONFIG.controlBorderRadius };
 		${ Input }${ Input }${ Input }${ Input } {
 			height: ${ space( 8 ) };
 		}
@@ -58,7 +58,7 @@ export const PaletteItem = styled( View )`
 		border-top-color: transparent;
 	}
 	&.is-selected {
-		border-color: ${ COLORS.blue.wordpress[ 700 ] };
+		border-color: ${ COLORS.ui.theme };
 	}
 `;
 
@@ -69,7 +69,7 @@ export const NameContainer = styled.div`
 	white-space: nowrap;
 	overflow: hidden;
 	${ PaletteItem }:hover & {
-		color: var( --wp-admin-theme-color, ${ COLORS.blue.wordpress[ 700 ] } );
+		color: ${ COLORS.ui.theme };
 	}
 `;
 
@@ -95,8 +95,9 @@ export const PaletteHStackHeader = styled( HStack )`
 export const PaletteEditStyles = styled( View )`
 	&&& {
 		.components-button.has-icon {
-		min-width: 0;
-		padding: 0;
+			min-width: 0;
+			padding: 0;
+		}
 	}
 `;
 

package/src/placeholder/README.md

@@ -39,7 +39,7 @@ Changes placeholder children layout from flex-row to flex-column.
 
 Title of the placeholder.
 
--   Required: Yes
+-   Required: No
 
 ### `notices`: `ReactNode`
 

package/src/placeholder/style.scss

@@ -26,13 +26,6 @@
 	background-color: $white;
 	box-shadow: inset 0 0 0 $border-width $gray-900;
 	outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
-
-	&.has-illustration {
-		background: none;
-		border: none;
-		box-shadow: none;
-		min-width: 100px;
-	}
 }
 
 .components-placeholder__error,
@@ -112,11 +105,6 @@
 	width: 100%;
 }
 
-.components-placeholder__preview img {
-	margin: 3%;
-	width: 50%;
-}
-
 .components-placeholder__fieldset .components-button {
 	margin-right: $grid-unit-15;
 	margin-bottom: $grid-unit-15; // If buttons wrap we need vertical space between.
@@ -175,18 +163,75 @@
 	}
 }
 
-// Style the placeholder illustration.
-.components-placeholder__illustration {
+
+/**
+ * Dashed style placeholders
+ */
+
+// @todo
+// These styles are only applied after the has-illustration gets added.
+// This is mainly an issue in terms of Site Logo which has a brief flash of the square placeholder.
+.components-placeholder.has-illustration {
+	color: inherit;
+	display: flex;
+	box-shadow: none;
+	min-width: 100px;
+
+	// Radius fallback value.
+	border-radius: $radius-block-ui;
+
+	// Blur the background so layered dashed placeholders are still visually separate.
+	// We also provide a semitransparent background so as to allow duotones to sheen through.
+	backdrop-filter: blur(100px);
+	background-color: rgba($white, 0.1);
+
+	// Invert the colors in themes deemed dark.
+	.is-dark-theme & {
+		background-color: rgba($black, 0.1);
+	}
+
+	.components-placeholder__fieldset {
+		width: auto;
+	}
+
+	// Show placeholder buttons on block selection.
+	// Note that these can't be display: none; or visibility: hidden;, as that breaks the writing flow.
+	.components-placeholder__label,
+	.components-placeholder__instructions,
+	.components-button {
+		opacity: 0;
+		transition: opacity 0.1s linear;
+		@include reduce-motion("transition");
+	}
+
+	.is-selected > & {
+		.components-placeholder__label,
+		.components-placeholder__instructions,
+		.components-button {
+			opacity: 1;
+		}
+	}
+
+	// By painting the borders here, we enable them to be replaced by the Border control.
 	border: $border-width dashed currentColor;
-	box-sizing: border-box;
+	overflow: hidden;
+}
+
+// Position the spinner.
+// @todo these rules should ideally live with the spinner component itself.
+.components-placeholder__preview {
+	display: flex;
+	justify-content: center;
+}
+
+.components-placeholder__illustration {
+	box-sizing: content-box;
 	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
 	width: 100%;
 	height: 100%;
 	stroke: currentColor;
 	stroke-dasharray: 3;
-	opacity: 0.4;
 }