@wordpress/components 25.14.0 → 25.15.1-next.79a6196f.0

package/src/input-control/styles/input-control-styles.tsx

@@ -97,10 +97,11 @@ const disabledStyles = ( { disabled }: InputProps ) => {
 	} );
 };
 
-const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
+export const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
 	const sizes = {
 		default: '13px',
 		small: '11px',
+		compact: '13px',
 		'__unstable-large': '13px',
 	};
 
@@ -138,6 +139,13 @@ export const getSizeConfig = ( {
 			paddingLeft: space( 2 ),
 			paddingRight: space( 2 ),
 		},
+		compact: {
+			height: 32,
+			lineHeight: 1,
+			minHeight: 32,
+			paddingLeft: space( 2 ),
+			paddingRight: space( 2 ),
+		},
 		'__unstable-large': {
 			height: 40,
 			lineHeight: 1,
@@ -148,13 +156,7 @@ export const getSizeConfig = ( {
 	};
 
 	if ( ! __next40pxDefaultSize ) {
-		sizes.default = {
-			height: 32,
-			lineHeight: 1,
-			minHeight: 32,
-			paddingLeft: space( 2 ),
-			paddingRight: space( 2 ),
-		};
+		sizes.default = sizes.compact;
 	}
 
 	return sizes[ size as Size ] || sizes.default;

package/src/input-control/types.ts

@@ -23,7 +23,7 @@ export type DragDirection = 'n' | 's' | 'e' | 'w';
 
 export type DragProps = Parameters< Parameters< typeof useDrag >[ 0 ] >[ 0 ];
 
-export type Size = 'default' | 'small' | '__unstable-large';
+export type Size = 'default' | 'small' | 'compact' | '__unstable-large';
 
 interface BaseProps {
 	/**

package/src/lock-unlock.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
+		'@wordpress/components'
+	);

package/src/menu-group/README.md

@@ -4,14 +4,6 @@
 
 ![MenuGroup Example](https://wordpress.org/gutenberg/files/2019/03/MenuGroup.png)
 
-1. MenuGroup
-
-## Table of Contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage

package/src/menu-items-choice/README.md

@@ -4,13 +4,6 @@
 
 ![MenuItemsChoice Example](https://wordpress.org/gutenberg/files/2019/03/MenuItemsChoice.png)
 
-1. MenuItemsChoice
-
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-
 ## Design guidelines
 
 A `MenuItemsChoice` should be housed within in its own distinct `MenuGroup`, so that the set of options are distinct from nearby `MenuItems`.

package/src/mobile/bottom-sheet/index.native.js

@@ -19,7 +19,10 @@ import SafeArea from 'react-native-safe-area';
 /**
  * WordPress dependencies
  */
-import { subscribeAndroidModalClosed } from '@wordpress/react-native-bridge';
+import {
+	subscribeAndroidModalClosed,
+	showAndroidSoftKeyboard,
+} from '@wordpress/react-native-bridge';
 import { Component } from '@wordpress/element';
 import { withPreferredColorScheme } from '@wordpress/compose';
 
@@ -215,6 +218,11 @@ class BottomSheet extends Component {
 		if ( this.androidModalClosedSubscription ) {
 			this.androidModalClosedSubscription.remove();
 		}
+
+		if ( this.props.isVisible ) {
+			showAndroidSoftKeyboard();
+		}
+
 		if ( this.safeAreaEventSubscription === null ) {
 			return;
 		}
@@ -315,6 +323,9 @@ class BottomSheet extends Component {
 	onDismiss() {
 		const { onDismiss } = this.props;
 
+		// Restore Keyboard Visibility
+		showAndroidSoftKeyboard();
+
 		if ( onDismiss ) {
 			onDismiss();
 		}
@@ -368,6 +379,7 @@ class BottomSheet extends Component {
 	onHardwareButtonPress() {
 		const { onClose } = this.props;
 		const { handleHardwareButtonPress } = this.state;
+
 		if ( handleHardwareButtonPress && handleHardwareButtonPress() ) {
 			return;
 		}
@@ -528,6 +540,8 @@ class BottomSheet extends Component {
 				}
 				onAccessibilityEscape={ this.onCloseBottomSheet }
 				testID="bottom-sheet"
+				hardwareAccelerated={ true }
+				useNativeDriverForBackdrop={ true }
 				{ ...rest }
 			>
 				<KeyboardAvoidingView

package/src/mobile/color-settings/palette.screen.native.js

@@ -29,7 +29,6 @@ import { colorsUtils } from './utils';
 import styles from './style.scss';
 
 const HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 };
-const THEME_PALETTE_NAME = 'Theme';
 
 const PaletteScreen = () => {
 	const route = useRoute();
@@ -48,7 +47,6 @@ const PaletteScreen = () => {
 	const [ currentValue, setCurrentValue ] = useState( colorValue );
 	const isGradientColor = isGradient( currentValue );
 	const selectedSegmentIndex = isGradientColor ? 1 : 0;
-	const allAvailableColors = useMobileGlobalStylesColors();
 
 	const [ currentSegment, setCurrentSegment ] = useState(
 		segments[ selectedSegmentIndex ]
@@ -57,6 +55,10 @@ const PaletteScreen = () => {
 	const currentSegmentColors = ! isGradientSegment
 		? defaultSettings.colors
 		: defaultSettings.gradients;
+	const allAvailableColors = useMobileGlobalStylesColors();
+	const allAvailableGradients = currentSegmentColors
+		.flatMap( ( { gradients } ) => gradients )
+		.filter( Boolean );
 
 	const horizontalSeparatorStyle = usePreferredColorSchemeStyle(
 		styles.horizontalSeparator,
@@ -184,10 +186,10 @@ const PaletteScreen = () => {
 						colors: palette.colors,
 						gradients: palette.gradients,
 						allColors: allAvailableColors,
+						allGradients: allAvailableGradients,
 					};
-					const enableCustomColor =
-						! isGradientSegment &&
-						palette.name === THEME_PALETTE_NAME;
+					// Limit to show the custom indicator to the first available palette
+					const enableCustomColor = paletteKey === 0;
 
 					return (
 						<ColorPalette

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

@@ -231,26 +231,6 @@ export const RAW_FEATURES = {
 	},
 	typography: {
 		fontSizes: {
-			default: [
-				{
-					name: 'Small',
-					slug: 'small',
-					size: '13px',
-					sizePx: '13px',
-				},
-				{
-					name: 'Normal',
-					slug: 'normal',
-					size: '16px',
-					sizePx: '16px',
-				},
-				{
-					name: 'Huge',
-					slug: 'huge',
-					size: '42px',
-					sizePx: '42px',
-				},
-			],
 			theme: [
 				{
 					name: 'Normal',

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

@@ -9,7 +9,6 @@ import { colord } from 'colord';
  * WordPress dependencies
  */
 import {
-	getPxFromCssUnit,
 	useSettings,
 	useMultipleOriginColorsAndGradients,
 	SETTINGS_DEFAULTS,
@@ -19,6 +18,7 @@ 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 = [
@@ -342,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;

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

@@ -9,7 +9,7 @@ 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';
 
@@ -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,
@@ -101,19 +101,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 +134,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,
@@ -216,9 +245,11 @@ const ImageComponent = ( {
 			>
 				{ isSelected &&
 					highlightSelected &&
-					! ( isUploadInProgress || isUploadFailed ) && (
-						<View style={ imageSelectedStyles } />
-					) }
+					! (
+						isUploadInProgress ||
+						isUploadFailed ||
+						isUploadPaused
+					) && <View style={ imageSelectedStyles } /> }
 
 				{ ! imageData ? (
 					<View style={ placeholderStyles }>
@@ -239,22 +270,24 @@ const ImageComponent = ( {
 					</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 +298,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)";
 }
 

package/src/mobile/keyboard-aware-flat-list/index.android.js

@@ -2,26 +2,71 @@
  * External dependencies
  */
 import { FlatList } from 'react-native';
-import Animated, { useAnimatedScrollHandler } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	forwardRef,
+	useCallback,
+	useImperativeHandle,
+} from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
+import useScroll from './use-scroll';
 import KeyboardAvoidingView from '../keyboard-avoiding-view';
 
 const AnimatedFlatList = Animated.createAnimatedComponent( FlatList );
 
-export const KeyboardAwareFlatList = ( { innerRef, onScroll, ...props } ) => {
-	const scrollHandler = useAnimatedScrollHandler( { onScroll } );
+export const KeyboardAwareFlatList = ( { onScroll, ...props }, ref ) => {
+	const { extraScrollHeight, scrollEnabled, shouldPreventAutomaticScroll } =
+		props;
+
+	const {
+		scrollViewRef,
+		scrollHandler,
+		scrollToSection,
+		scrollToElement,
+		onContentSizeChange,
+		lastScrollTo,
+	} = useScroll( {
+		scrollEnabled,
+		shouldPreventAutomaticScroll,
+		extraScrollHeight,
+		onScroll,
+	} );
+
+	const getFlatListRef = useCallback(
+		( flatListRef ) => {
+			// On Android, we get the ref of the associated scroll
+			// view to the FlatList.
+			scrollViewRef.current = flatListRef?.getNativeScrollRef();
+		},
+		[ scrollViewRef ]
+	);
+
+	useImperativeHandle( ref, () => {
+		return {
+			scrollViewRef: scrollViewRef.current,
+			scrollToSection,
+			scrollToElement,
+			lastScrollTo,
+		};
+	} );
+
 	return (
 		<KeyboardAvoidingView style={ { flex: 1 } }>
 			<AnimatedFlatList
-				ref={ innerRef }
+				ref={ getFlatListRef }
 				onScroll={ scrollHandler }
+				onContentSizeChange={ onContentSizeChange }
 				{ ...props }
 			/>
 		</KeyboardAvoidingView>
 	);
 };
 
-export default KeyboardAwareFlatList;
+export default forwardRef( KeyboardAwareFlatList );