@wordpress/components 25.16.0 → 26.0.0

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Image as RNImage, Text, View } from 'react-native';
+import { Animated, Image as RNImage, Text, View } from 'react-native';
 import FastImage from 'react-native-fast-image';
 
 /**
@@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/components';
 import { image, offline } from '@wordpress/icons';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { useEffect, useState, Platform } from '@wordpress/element';
+import { useEffect, useState, useRef, Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -54,6 +54,9 @@ const ImageComponent = ( {
 } ) => {
 	const [ imageData, setImageData ] = useState( null );
 	const [ containerSize, setContainerSize ] = useState( null );
+	const [ localURL, setLocalURL ] = useState( null );
+	const [ networkURL, setNetworkURL ] = useState( null );
+	const [ networkImageLoaded, setNetworkImageLoaded ] = useState( false );
 
 	// Disabled for Android due to https://github.com/WordPress/gutenberg/issues/43149
 	const Image =
@@ -80,6 +83,33 @@ const ImageComponent = ( {
 					onImageDataLoad( metaData );
 				}
 			} );
+
+			if ( url.startsWith( 'file:///' ) ) {
+				setLocalURL( url );
+				setNetworkURL( null );
+				setNetworkImageLoaded( false );
+			} else if ( url.startsWith( 'https://' ) ) {
+				if ( Platform.isIOS ) {
+					setNetworkURL( url );
+				} else if ( Platform.isAndroid ) {
+					RNImage.prefetch( url ).then(
+						() => {
+							if ( ! isCurrent ) {
+								return;
+							}
+							setNetworkURL( url );
+							setNetworkImageLoaded( true );
+						},
+						() => {
+							// This callback is called when the image fails to load,
+							// but these events are handled by `isUploadFailed`
+							// and `isUploadPaused` events instead.
+							//
+							// Ignoring the error event will persist the local image URI.
+						}
+					);
+				}
+			}
 		}
 		return () => ( isCurrent = false );
 		// Disable reason: deferring this refactor to the native team.
@@ -188,9 +218,19 @@ const ImageComponent = ( {
 		focalPoint && styles.focalPointContainer,
 	];
 
+	const opacityValue = useRef( new Animated.Value( 1 ) ).current;
+
+	useEffect( () => {
+		Animated.timing( opacityValue, {
+			toValue: isUploadInProgress ? 0.3 : 1,
+			duration: 100,
+			useNativeDriver: true,
+		} ).start();
+	}, [ isUploadInProgress, opacityValue ] );
+
 	const imageStyles = [
 		{
-			opacity: isUploadInProgress ? 0.3 : 1,
+			opacity: opacityValue,
 			height: containerSize?.height,
 		},
 		! resizeMode && {
@@ -214,12 +254,29 @@ const ImageComponent = ( {
 		imageHeight && { height: imageHeight },
 		shapeStyle,
 	];
+
+	// On iOS, add 1 to height to account for the 1px non-visible image
+	// that is used to determine when the network image has loaded
+	// We also must verify that it is not NaN, as it can be NaN when the image is loading.
+	// This is not necessary on Android as the non-visible image is not used.
+	let calculatedSelectedHeight;
+	if ( Platform.isIOS ) {
+		calculatedSelectedHeight =
+			containerSize && ! isNaN( containerSize.height )
+				? containerSize.height + 1
+				: 0;
+	} else {
+		calculatedSelectedHeight = containerSize?.height;
+	}
+
 	const imageSelectedStyles = [
 		usePreferredColorSchemeStyle(
 			styles.imageBorder,
 			styles.imageBorderDark
 		),
-		{ height: containerSize?.height },
+		{
+			height: calculatedSelectedHeight,
+		},
 	];
 
 	return (
@@ -259,14 +316,62 @@ const ImageComponent = ( {
 					</View>
 				) : (
 					<View style={ focalPoint && styles.focalPointContent }>
-						<Image
-							style={ imageStyles }
-							source={ { uri: url } }
-							{ ...( ! focalPoint && {
-								resizeMethod: 'scale',
-							} ) }
-							resizeMode={ imageResizeMode }
-						/>
+						{ Platform.isAndroid && (
+							<>
+								{ networkImageLoaded && networkURL && (
+									<Animated.Image
+										style={ imageStyles }
+										fadeDuration={ 0 }
+										source={ { uri: networkURL } }
+										{ ...( ! focalPoint && {
+											resizeMethod: 'scale',
+										} ) }
+										resizeMode={ imageResizeMode }
+										testID={ `network-image-${ url }` }
+									/>
+								) }
+								{ ! networkImageLoaded && ! networkURL && (
+									<Animated.Image
+										style={ imageStyles }
+										fadeDuration={ 0 }
+										source={ { uri: localURL } }
+										{ ...( ! focalPoint && {
+											resizeMethod: 'scale',
+										} ) }
+										resizeMode={ imageResizeMode }
+									/>
+								) }
+							</>
+						) }
+						{ Platform.isIOS && (
+							<>
+								<Animated.Image
+									style={ imageStyles }
+									source={ {
+										uri:
+											networkURL && networkImageLoaded
+												? networkURL
+												: localURL || url,
+									} }
+									{ ...( ! focalPoint && {
+										resizeMethod: 'scale',
+									} ) }
+									resizeMode={ imageResizeMode }
+									testID={ `network-image-${
+										networkURL && networkImageLoaded
+											? networkURL
+											: localURL || url
+									}` }
+								/>
+								<Image
+									source={ { uri: networkURL } }
+									style={ styles.nonVisibleImage }
+									onLoad={ () => {
+										setNetworkImageLoaded( true );
+									} }
+								/>
+							</>
+						) }
 					</View>
 				) }
 

package/src/mobile/image/style.native.scss

@@ -171,3 +171,9 @@
 .wide {
 	width: 100%;
 }
+
+.nonVisibleImage {
+	height: 1;
+	width: 1;
+	opacity: 0;
+}

package/src/modal/style.scss

@@ -160,7 +160,7 @@
 	}
 
 	&.is-scrollable:focus-visible {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;

package/src/navigation/menu/menu-title-search.tsx

@@ -10,10 +10,11 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 import withSpokenMessages from '../../higher-order/with-spoken-messages';
 import { useNavigationMenuContext } from './context';
 import { useNavigationContext } from '../context';
-import { MenuTitleSearchUI } from '../styles/navigation-styles';
 import { SEARCH_FOCUS_DELAY } from '../constants';
 
 import type { NavigationMenuTitleSearchProps } from '../types';
+import SearchControl from '../../search-control';
+import { MenuTitleSearchControlWrapper } from '../styles/navigation-styles';
 
 function MenuTitleSearch( {
 	debouncedSpeak,
@@ -80,9 +81,9 @@ function MenuTitleSearch( {
 	).trim();
 
 	return (
-		<div className="components-navigation__menu-title-search">
-			<MenuTitleSearchUI
-				autoComplete="off"
+		<MenuTitleSearchControlWrapper>
+			<SearchControl
+				__nextHasNoMarginBottom
 				className="components-navigation__menu-search-input"
 				id={ inputId }
 				onChange={ ( value ) => onSearch?.( value ) }
@@ -90,10 +91,9 @@ function MenuTitleSearch( {
 				placeholder={ placeholder }
 				onClose={ onClose }
 				ref={ inputRef }
-				type="search"
 				value={ search }
 			/>
-		</div>
+		</MenuTitleSearchControlWrapper>
 	);
 }
 

package/src/navigation/styles/navigation-styles.tsx

@@ -17,7 +17,6 @@ import { Text } from '../../text';
 import { Heading } from '../../heading';
 import { reduceMotion, rtl } from '../../utils';
 import { space } from '../../utils/space';
-import SearchControl from '../../search-control';
 
 export const NavigationUI = styled.div`
 	width: 100%;
@@ -69,6 +68,11 @@ export const MenuTitleUI = styled.div`
 	width: 100%;
 `;
 
+export const MenuTitleSearchControlWrapper = styled.div`
+	margin: 11px 0; // non-ideal hardcoding to maintain same height as Heading, could be improved
+	padding: 1px; // so the focus border doesn't get cut off by the overflow hidden on MenuTitleUI
+`;
+
 export const MenuTitleActionsUI = styled.span`
 	height: ${ space( 6 ) }; // 24px, same height as the buttons inside
 
@@ -91,32 +95,6 @@ export const MenuTitleActionsUI = styled.span`
 	}
 `;
 
-export const MenuTitleSearchUI = styled( SearchControl )`
-	input[type='search'].components-search-control__input {
-		margin: 0;
-		background: #303030;
-		color: #fff;
-
-		&:focus {
-			background: #434343;
-			color: #fff;
-		}
-
-		&::placeholder {
-			color: rgba( 255, 255, 255, 0.6 );
-		}
-	}
-
-	svg {
-		fill: white;
-	}
-
-	.components-button.has-icon {
-		padding: 0;
-		min-width: auto;
-	}
-`;
-
 export const GroupTitleUI = styled( Heading )`
 	min-height: ${ space( 12 ) };
 	align-items: center;

package/src/number-control/index.tsx

@@ -54,11 +54,7 @@ function UnforwardedNumberControl(
 		suffix,
 		onChange = noop,
 		...restProps
-	} = useDeprecated36pxDefaultSizeProp< NumberControlProps >(
-		props,
-		'wp.components.NumberControl',
-		'6.4'
-	);
+	} = useDeprecated36pxDefaultSizeProp< NumberControlProps >( props );
 
 	if ( hideHTMLArrows ) {
 		deprecated( 'wp.components.NumberControl hideHTMLArrows prop ', {

package/src/palette-edit/index.tsx

@@ -152,7 +152,6 @@ function ColorPickerPopover< T extends Color | Gradient >( {
 			{ isGradient && (
 				<div className="components-palette-edit__popover-gradient-picker">
 					<CustomGradientPicker
-						__nextHasNoMargin
 						__experimentalIsRenderedInSidebar
 						value={ element.gradient }
 						onChange={ ( newGradient ) => {
@@ -198,23 +197,22 @@ function Option< T extends Color | Gradient >( {
 	return (
 		<PaletteItem
 			className={ isEditing ? 'is-selected' : undefined }
-			as="div"
+			as={ isEditing ? 'div' : 'button' }
 			onClick={ onStartEditing }
+			aria-label={
+				isEditing
+					? undefined
+					: sprintf(
+							// translators: %s is a color or gradient name, e.g. "Red".
+							__( 'Edit: %s' ),
+							element.name.trim().length ? element.name : value
+					  )
+			}
 			ref={ setPopoverAnchor }
-			{ ...( isEditing
-				? { ...focusOutsideProps }
-				: {
-						style: {
-							cursor: 'pointer',
-						},
-				  } ) }
+			{ ...( isEditing ? { ...focusOutsideProps } : {} ) }
 		>
 			<HStack justify="flex-start">
-				<FlexItem>
-					<IndicatorStyled
-						style={ { background: value, color: 'transparent' } }
-					/>
-				</FlexItem>
+				<IndicatorStyled colorValue={ value } />
 				<FlexItem>
 					{ isEditing && ! canOnlyChangeValues ? (
 						<NameInput
@@ -235,7 +233,12 @@ function Option< T extends Color | Gradient >( {
 							}
 						/>
 					) : (
-						<NameContainer>{ element.name }</NameContainer>
+						<NameContainer>
+							{ element.name.trim().length
+								? element.name
+								: /* Fall back to non-breaking space to maintain height */
+								  '\u00A0' }
+						</NameContainer>
 					) }
 				</FlexItem>
 				{ isEditing && ! canOnlyChangeValues && (
@@ -586,7 +589,6 @@ export function PaletteEdit( {
 					{ ! isEditing &&
 						( isGradient ? (
 							<GradientPicker
-								__nextHasNoMargin
 								gradients={ gradients }
 								onChange={ onSelectPaletteItem }
 								clearable={ false }

package/src/palette-edit/stories/index.story.tsx

@@ -56,6 +56,7 @@ Default.args = {
 	colors: [
 		{ color: '#1a4548', name: 'Primary', slug: 'primary' },
 		{ color: '#0000ff', name: 'Secondary', slug: 'secondary' },
+		{ color: '#fb326b', name: 'Tertiary', slug: 'tertiary' },
 	],
 	paletteLabel: 'Colors',
 	emptyMessage: 'Colors are empty',

package/src/palette-edit/{styles.js → styles.ts}

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 
 /**
  * Internal dependencies
@@ -10,7 +11,7 @@ import Button from '../button';
 import { Heading } from '../heading';
 import { HStack } from '../h-stack';
 import { space } from '../utils/space';
-import { COLORS, CONFIG } from '../utils';
+import { COLORS, CONFIG, font } from '../utils';
 import { View } from '../view';
 import InputControl from '../input-control';
 import {
@@ -18,12 +19,14 @@ import {
 	Input,
 	BackdropUI as InputBackdropUI,
 } from '../input-control/styles/input-control-styles';
-import CircularOptionPicker from '../circular-option-picker';
+import ColorIndicator from '../color-indicator';
 
-export const IndicatorStyled = styled( CircularOptionPicker.Option )`
-	width: ${ space( 6 ) };
-	height: ${ space( 6 ) };
-	pointer-events: none;
+export const IndicatorStyled = styled( ColorIndicator )`
+	&& {
+		flex-shrink: 0;
+		width: ${ space( 6 ) };
+		height: ${ space( 6 ) };
+	}
 `;
 
 export const NameInputControl = styled( InputControl )`
@@ -40,20 +43,63 @@ export const NameInputControl = styled( InputControl )`
 	}
 `;
 
+const buttonStyleReset = ( {
+	as,
+}: {
+	as: React.ComponentProps< typeof View >[ 'as' ];
+} ) => {
+	if ( as === 'button' ) {
+		return css`
+			display: flex;
+			align-items: center;
+			width: 100%;
+			appearance: none;
+			background: transparent;
+			border: none;
+			border-radius: 0;
+			padding: 0;
+			cursor: pointer;
+
+			&:hover {
+				color: ${ COLORS.theme.accent };
+			}
+		`;
+	}
+	return null;
+};
+
 export const PaletteItem = styled( View )`
+	${ buttonStyleReset }
+
 	padding-block: 3px;
 	padding-inline-start: ${ space( 3 ) };
 	border: 1px solid ${ CONFIG.surfaceBorderColor };
 	border-bottom-color: transparent;
-	&:first-of-type {
-		border-top-left-radius: ${ CONFIG.controlBorderRadius };
-		border-top-right-radius: ${ CONFIG.controlBorderRadius };
+	font-size: ${ font( 'default.fontSize' ) };
+
+	&:focus-visible {
+		border-color: transparent;
+		box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
+			${ COLORS.theme.accent };
+		// Windows high contrast mode.
+		outline: 2px solid transparent;
+		outline-offset: 0;
+	}
+
+	border-top-left-radius: ${ CONFIG.controlBorderRadius };
+	border-top-right-radius: ${ CONFIG.controlBorderRadius };
+
+	& + & {
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
 	}
-	&:last-of-type {
+
+	&:last-child {
 		border-bottom-left-radius: ${ CONFIG.controlBorderRadius };
 		border-bottom-right-radius: ${ CONFIG.controlBorderRadius };
 		border-bottom-color: ${ CONFIG.surfaceBorderColor };
 	}
+
 	&.is-selected + & {
 		border-top-color: transparent;
 	}
@@ -68,9 +114,6 @@ export const NameContainer = styled.div`
 	margin-right: ${ space( 2 ) };
 	white-space: nowrap;
 	overflow: hidden;
-	${ PaletteItem }:hover & {
-		color: ${ COLORS.theme.accent };
-	}
 `;
 
 export const PaletteHeading = styled( Heading )`

package/src/palette-edit/test/index.tsx

@@ -295,7 +295,7 @@ describe( 'PaletteEdit', () => {
 				name: 'Show details',
 			} )
 		);
-		await click( screen.getByText( 'Primary' ) );
+		await click( screen.getByRole( 'button', { name: 'Edit: Primary' } ) );
 		await click(
 			screen.getByRole( 'button', {
 				name: 'Remove color',
@@ -328,7 +328,7 @@ describe( 'PaletteEdit', () => {
 				name: 'Show details',
 			} )
 		);
-		await click( screen.getByText( 'Primary' ) );
+		await click( screen.getByRole( 'button', { name: 'Edit: Primary' } ) );
 		const nameInput = screen.getByRole( 'textbox', {
 			name: 'Color name',
 		} );

package/src/placeholder/style.scss

@@ -1,5 +1,6 @@
 // This needs specificity to override individual block styles.
 .components-placeholder.components-placeholder {
+	font-size: $default-font-size;
 	box-sizing: border-box;
 	position: relative;
 	padding: 1em;
@@ -33,6 +34,11 @@
 .components-placeholder__fieldset {
 	font-family: $default-font;
 	font-size: $default-font-size;
+	// Global Styles can affect this so we are resetting.
+	letter-spacing: initial;
+	line-height: initial;
+	text-transform: none;
+	font-weight: normal;
 }
 
 .components-placeholder__label {
@@ -148,11 +154,6 @@
 			padding: 0 $grid-unit-10 2px;
 		}
 	}
-	.components-placeholder__learn-more {
-		.components-external-link {
-			color: var(--wp-admin-theme-color);
-		}
-	}
 }
 
 

package/src/popover/index.tsx

@@ -126,6 +126,7 @@ const UnconnectedPopover = (
 	const {
 		animate = true,
 		headerTitle,
+		constrainTabbing,
 		onClose,
 		children,
 		className,
@@ -264,6 +265,7 @@ const UnconnectedPopover = (
 	}
 
 	const [ dialogRef, dialogProps ] = useDialog( {
+		constrainTabbing,
 		focusOnMount,
 		__unstableOnClose: onDialogClose,
 		// @ts-expect-error The __unstableOnClose property needs to be deprecated first (see https://github.com/WordPress/gutenberg/pull/27675)

package/src/popover/style.scss

@@ -6,6 +6,7 @@ $shadow-popover-border-top-only: 0 #{-$border-width} 0 0 $gray-400;
 $shadow-popover-border-top-only-alternate: 0 #{-$border-width} 0 $gray-900;
 
 .components-popover {
+	@include reset;
 	z-index: z-index(".components-popover");
 	will-change: transform;