@wordpress/components 26.0.1-next.5a1d1283.0 → 26.0.1

package/src/mobile/global-styles-context/test/utils.native.js

@@ -108,6 +108,28 @@ describe( 'parseStylesVariables', () => {
 			expect.objectContaining( PARSED_GLOBAL_STYLES )
 		);
 	} );
+
+	it( 'returns the parsed custom color values correctly', () => {
+		const defaultStyles = {
+			...DEFAULT_GLOBAL_STYLES,
+			color: {
+				text: 'var(--wp--custom--color--blue)',
+				background: 'var(--wp--custom--color--green)',
+			},
+		};
+		const customValues = parseStylesVariables(
+			JSON.stringify( RAW_FEATURES.custom ),
+			MAPPED_VALUES
+		);
+		const styles = parseStylesVariables(
+			JSON.stringify( defaultStyles ),
+			MAPPED_VALUES,
+			customValues
+		);
+		expect( styles ).toEqual(
+			expect.objectContaining( PARSED_GLOBAL_STYLES )
+		);
+	} );
 } );
 
 describe( 'getGlobalStyles', () => {

package/src/mobile/global-styles-context/utils.native.js

@@ -3,15 +3,23 @@
  */
 import { camelCase } from 'change-case';
 import { Dimensions } from 'react-native';
+import { colord } from 'colord';
 
 /**
  * WordPress dependencies
  */
 import {
-	getPxFromCssUnit,
-	useSetting,
+	useSettings,
 	useMultipleOriginColorsAndGradients,
+	SETTINGS_DEFAULTS,
 } from '@wordpress/block-editor';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { default as getPxFromCssUnit } from '../utils/get-px-from-css-unit';
+import { useGlobalStyles } from './index.native';
 
 export const BLOCK_STYLE_ATTRIBUTES = [
 	'textColor',
@@ -240,6 +248,20 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 			const customValuesData = customValues ?? JSON.parse( stylesBase );
 			stylesBase = stylesBase.replace( regex, ( _$1, $2 ) => {
 				const path = $2.split( '--' );
+
+				// Supports cases for variables like var(--wp--custom--color--background)
+				if ( path[ 0 ] === 'color' ) {
+					const colorKey = path[ path.length - 1 ];
+					if ( mappedValues?.color ) {
+						const matchedValue = mappedValues.color?.values?.find(
+							( { slug } ) => slug === colorKey
+						);
+						if ( matchedValue ) {
+							return `${ matchedValue?.color }`;
+						}
+					}
+				}
+
 				if (
 					path.reduce(
 						( prev, curr ) => prev && prev[ curr ],
@@ -320,29 +342,38 @@ export function getMappedValues( features, palette ) {
  * @return {Object} normalized sizes.
  */
 function normalizeFontSizes( fontSizes ) {
-	// Adds normalized PX values for each of the different keys.
 	if ( ! fontSizes ) {
 		return fontSizes;
 	}
-	const normalizedFontSizes = {};
+
 	const dimensions = Dimensions.get( 'window' );
+	const normalizedFontSizes = {};
+	const keysToProcess = [];
 
-	[ 'default', 'theme', 'custom' ].forEach( ( key ) => {
-		if ( fontSizes[ key ] ) {
-			normalizedFontSizes[ key ] = fontSizes[ key ]?.map(
-				( fontSizeObject ) => {
-					fontSizeObject.sizePx = getPxFromCssUnit(
-						fontSizeObject.size,
-						{
-							width: dimensions.width,
-							height: dimensions.height,
-							fontSize: DEFAULT_FONT_SIZE,
-						}
-					);
-					return fontSizeObject;
-				}
-			);
-		}
+	// Check if 'theme' or 'custom' keys exist and add them to keysToProcess array
+	if ( fontSizes?.theme ) {
+		keysToProcess.push( 'theme' );
+	}
+	if ( fontSizes?.custom ) {
+		keysToProcess.push( 'custom' );
+	}
+
+	// If neither 'theme' nor 'custom' exist, add 'default' if it exists
+	if ( keysToProcess.length === 0 && fontSizes?.default ) {
+		keysToProcess.push( 'default' );
+	}
+
+	keysToProcess.forEach( ( key ) => {
+		normalizedFontSizes[ key ] = fontSizes[ key ].map(
+			( fontSizeObject ) => {
+				fontSizeObject.sizePx = getPxFromCssUnit( fontSizeObject.size, {
+					width: dimensions.width,
+					height: dimensions.height,
+					fontSize: DEFAULT_FONT_SIZE,
+				} );
+				return fontSizeObject;
+			}
+		);
 	} );
 
 	return normalizedFontSizes;
@@ -355,13 +386,17 @@ export function useMobileGlobalStylesColors( type = 'colors' ) {
 		[]
 	);
 	// Default editor colors/gradients if it's not a block-based theme.
-	const colorPalette =
+	const defaultPaletteSetting =
 		type === 'colors' ? 'color.palette' : 'color.gradients';
-	const editorDefaultPalette = useSetting( colorPalette );
+	const [ defaultPaletteValue ] = useSettings( defaultPaletteSetting );
+	// In edge cases, the default palette might be undefined. To avoid
+	// exceptions across the editor in that case, we explicitly return
+	// the default editor colors.
+	const defaultPalette = defaultPaletteValue ?? SETTINGS_DEFAULTS.colors;
 
 	return availableThemeColors.length >= 1
 		? availableThemeColors
-		: editorDefaultPalette;
+		: defaultPalette;
 }
 
 export function getColorsAndGradients(
@@ -436,3 +471,40 @@ export function getGlobalStyles( rawStyles, rawFeatures ) {
 		__experimentalGlobalStylesBaseStyles: globalStyles,
 	};
 }
+
+/**
+ * Determine and apply appropriate color scheme based on global styles or device's light/dark mode.
+ *
+ * The function first attempts to retrieve the editor's background color from global styles.
+ * If the detected background color is light, light styles are applied, and dark styles otherwise.
+ * If no custom background color is defined, styles are applied using the device's dark/light setting.
+ *
+ * @param {Object} baseStyle - An object representing the base (light theme) styles for the editor.
+ * @param {Object} darkStyle - An object representing the additional styles to apply when the editor is in dark mode.
+ *
+ * @return {Object} - The combined style object that should be applied to the editor.
+ */
+export const useEditorColorScheme = ( baseStyle, darkStyle ) => {
+	const globalStyles = useGlobalStyles();
+
+	const deviceColorScheme = usePreferredColorSchemeStyle(
+		baseStyle,
+		darkStyle
+	);
+
+	const editorColors = globalStyles?.baseColors?.color;
+	const editorBackgroundColor = editorColors?.background;
+
+	const isBackgroundColorDefined =
+		typeof editorBackgroundColor !== 'undefined' &&
+		editorBackgroundColor !== 'undefined';
+
+	if ( isBackgroundColorDefined ) {
+		const isEditorBackgroundDark = colord( editorBackgroundColor ).isDark();
+		return isEditorBackgroundDark
+			? { ...baseStyle, ...darkStyle }
+			: baseStyle;
+	}
+
+	return deviceColorScheme;
+};

package/src/mobile/html-text-input/index.native.js

@@ -81,7 +81,10 @@ export class HTMLTextInput extends Component {
 			title,
 		} = this.props;
 		const titleStyle = [
-			styles.htmlViewTitle,
+			getStylesFromColorScheme(
+				styles.htmlViewTitle,
+				styles.htmlViewTitleDark
+			),
 			style?.text && { color: style.text },
 		];
 		const htmlStyle = [

package/src/mobile/html-text-input/style.scss

@@ -37,3 +37,7 @@ $textColorDark: $white;
 .scrollView {
 	flex: 1;
 }
+
+.htmlViewTitleDark {
+	color: $textColorDark;
+}

package/src/mobile/html-text-input/test/__snapshots__/index.native.js.snap

@@ -14,7 +14,9 @@ exports[`HTMLTextInput HTMLTextInput renders and matches snapshot 1`] = `
         placeholderTextColor="white"
         style={
           [
-            undefined,
+            {
+              "color": "white",
+            },
             undefined,
           ]
         }

package/src/mobile/image/constants.js

@@ -0,0 +1 @@
+export const IMAGE_DEFAULT_FOCAL_POINT = { x: 0.5, y: 0.5 };

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';
 
 /**
@@ -9,9 +9,9 @@ import FastImage from 'react-native-fast-image';
  */
 import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/components';
-import { image as icon } from '@wordpress/icons';
+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
@@ -22,13 +22,12 @@ import SvgIconRetry from './icon-retry';
 import ImageEditingButton from './image-editing-button';
 
 const ICON_TYPE = {
+	OFFLINE: 'offline',
 	PLACEHOLDER: 'placeholder',
 	RETRY: 'retry',
 	UPLOAD: 'upload',
 };
 
-export const IMAGE_DEFAULT_FOCAL_POINT = { x: 0.5, y: 0.5 };
-
 const ImageComponent = ( {
 	align,
 	alt,
@@ -39,6 +38,7 @@ const ImageComponent = ( {
 	isSelected,
 	shouldUseFastImage,
 	isUploadFailed,
+	isUploadPaused,
 	isUploadInProgress,
 	mediaPickerOptions,
 	onImageDataLoad,
@@ -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.
@@ -101,19 +131,23 @@ const ImageComponent = ( {
 	};
 
 	const getIcon = ( iconType ) => {
+		let icon;
 		let iconStyle;
 		switch ( iconType ) {
 			case ICON_TYPE.RETRY:
-				return (
-					<Icon
-						icon={ retryIcon || SvgIconRetry }
-						{ ...styles.iconRetry }
-					/>
-				);
+				icon = retryIcon || SvgIconRetry;
+				iconStyle = iconRetryStyles;
+				break;
+			case ICON_TYPE.OFFLINE:
+				icon = offline;
+				iconStyle = iconOfflineStyles;
+				break;
 			case ICON_TYPE.PLACEHOLDER:
+				icon = image;
 				iconStyle = iconPlaceholderStyles;
 				break;
 			case ICON_TYPE.UPLOAD:
+				icon = image;
 				iconStyle = iconUploadStyles;
 				break;
 		}
@@ -130,6 +164,31 @@ const ImageComponent = ( {
 		styles.iconUploadDark
 	);
 
+	const iconOfflineStyles = usePreferredColorSchemeStyle(
+		styles.iconOffline,
+		styles.iconOfflineDark
+	);
+
+	const retryIconStyles = usePreferredColorSchemeStyle(
+		styles.retryIcon,
+		styles.retryIconDark
+	);
+
+	const iconRetryStyles = usePreferredColorSchemeStyle(
+		styles.iconRetry,
+		styles.iconRetryDark
+	);
+
+	const retryContainerStyles = usePreferredColorSchemeStyle(
+		styles.retryContainer,
+		styles.retryContainerDark
+	);
+
+	const uploadFailedTextStyles = usePreferredColorSchemeStyle(
+		styles.uploadFailedText,
+		styles.uploadFailedTextDark
+	);
+
 	const placeholderStyles = [
 		usePreferredColorSchemeStyle(
 			styles.imageContainerUpload,
@@ -159,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 && {
@@ -185,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 (
@@ -216,9 +302,11 @@ const ImageComponent = ( {
 			>
 				{ isSelected &&
 					highlightSelected &&
-					! ( isUploadInProgress || isUploadFailed ) && (
-						<View style={ imageSelectedStyles } />
-					) }
+					! (
+						isUploadInProgress ||
+						isUploadFailed ||
+						isUploadPaused
+					) && <View style={ imageSelectedStyles } /> }
 
 				{ ! imageData ? (
 					<View style={ placeholderStyles }>
@@ -228,33 +316,83 @@ 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>
 				) }
 
-				{ isUploadFailed && retryMessage && (
+				{ ( isUploadFailed || isUploadPaused ) && retryMessage && (
 					<View
 						style={ [
 							styles.imageContainer,
-							styles.retryContainer,
+							retryContainerStyles,
 						] }
 					>
 						<View
 							style={ [
-								styles.retryIcon,
+								retryIconStyles,
 								retryIcon && styles.customRetryIcon,
 							] }
 						>
-							{ getIcon( ICON_TYPE.RETRY ) }
+							{ isUploadPaused
+								? getIcon( ICON_TYPE.OFFLINE )
+								: getIcon( ICON_TYPE.RETRY ) }
 						</View>
-						<Text style={ styles.uploadFailedText }>
+						<Text style={ uploadFailedTextStyles }>
 							{ retryMessage }
 						</Text>
 					</View>
@@ -265,7 +403,11 @@ const ImageComponent = ( {
 				<ImageEditingButton
 					onSelectMediaUploadOption={ onSelectMediaUploadOption }
 					openMediaOptions={ openMediaOptions }
-					url={ ! isUploadFailed && imageData && url }
+					url={
+						! ( isUploadFailed || isUploadPaused ) &&
+						imageData &&
+						url
+					}
 					pickerOptions={ mediaPickerOptions }
 				/>
 			) }

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

@@ -21,10 +21,23 @@
 }
 
 .retryIcon {
-	width: 80px;
-	height: 80px;
-	justify-content: center;
-	align-items: center;
+	background-color: $black;
+	border-radius: 200px;
+	padding: 8px;
+}
+
+.retryIconDark {
+	background-color: $white;
+}
+
+.iconOffline {
+	fill: $white;
+	width: 24px;
+	height: 24px;
+}
+
+.iconOfflineDark {
+	fill: $black;
 }
 
 .customRetryIcon {
@@ -33,9 +46,13 @@
 }
 
 .iconRetry {
-	fill: #fff;
-	width: 100%;
-	height: 100%;
+	fill: $white;
+	width: 24px;
+	height: 24px;
+}
+
+.iconRetryDark {
+	fill: $black;
 }
 
 .iconPlaceholder {
@@ -90,12 +107,17 @@
 }
 
 .uploadFailedText {
-	color: #fff;
+	color: $black;
+	font-weight: bold;
 	font-size: 14;
 	margin-top: 5;
 	text-align: center;
 }
 
+.uploadFailedTextDark {
+	color: $white;
+}
+
 .editContainer {
 	width: 44px;
 	height: 44px;
@@ -116,7 +138,7 @@
 }
 
 .iconCustomise {
-	fill: #fff;
+	fill: $white;
 	position: absolute;
 	top: 7px;
 	left: 7px;
@@ -124,6 +146,10 @@
 
 .retryContainer {
 	flex: 1;
+	background-color: "rgba(255, 255, 255, 0.8)";
+}
+
+.retryContainerDark {
 	background-color: "rgba(0, 0, 0, 0.5)";
 }
 
@@ -145,3 +171,9 @@
 .wide {
 	width: 100%;
 }
+
+.nonVisibleImage {
+	height: 1;
+	width: 1;
+	opacity: 0;
+}