@wordpress/components 19.0.0 → 19.0.4

package/src/color-picker/component.tsx

@@ -11,7 +11,6 @@ import namesPlugin from 'colord/plugins/names';
  */
 import { useState, useMemo } from '@wordpress/element';
 import { settings } from '@wordpress/icons';
-import { useDebounce } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -33,7 +32,6 @@ import {
 import { ColorDisplay } from './color-display';
 import { ColorInput } from './color-input';
 import { Picker } from './picker';
-import { useControlledValue } from '../utils/hooks';
 
 import type { ColorType } from './types';
 
@@ -59,32 +57,23 @@ const ColorPicker = (
 ) => {
 	const {
 		enableAlpha = false,
-		color: colorProp,
+		color,
 		onChange,
-		defaultValue,
+		defaultValue = '#fff',
 		copyFormat,
 		...divProps
 	} = useContextSystem( props, 'ColorPicker' );
 
-	const [ color, setColor ] = useControlledValue( {
-		onChange,
-		value: colorProp,
-		defaultValue,
-	} );
-
 	// Use a safe default value for the color and remove the possibility of `undefined`.
 	const safeColordColor = useMemo( () => {
-		return color ? colord( color ) : colord( '#fff' );
-	}, [ color ] );
-
-	// Debounce to prevent rapid changes from conflicting with one another.
-	const debouncedSetColor = useDebounce( setColor );
+		return color ? colord( color ) : colord( defaultValue );
+	}, [ color, defaultValue ] );
 
 	const handleChange = useCallback(
 		( nextValue: Colord ) => {
-			debouncedSetColor( nextValue.toHex() );
+			onChange( nextValue.toHex() );
 		},
-		[ debouncedSetColor ]
+		[ onChange ]
 	);
 
 	const [ showInputs, setShowInputs ] = useState< boolean >( false );

package/src/color-picker/picker.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { HslColorPicker, HslaColorPicker } from 'react-colorful';
+import { RgbStringColorPicker, RgbaStringColorPicker } from 'react-colorful';
 import { colord, Colord } from 'colord';
 
 /**
@@ -15,12 +15,14 @@ interface PickerProps {
 }
 
 export const Picker = ( { color, enableAlpha, onChange }: PickerProps ) => {
-	const Component = enableAlpha ? HslaColorPicker : HslColorPicker;
-	const hslColor = useMemo( () => color.toHsl(), [ color ] );
+	const Component = enableAlpha
+		? RgbaStringColorPicker
+		: RgbStringColorPicker;
+	const rgbColor = useMemo( () => color.toRgbString(), [ color ] );
 
 	return (
 		<Component
-			color={ hslColor }
+			color={ rgbColor }
 			onChange={ ( nextColor ) => {
 				onChange( colord( nextColor ) );
 			} }

package/src/color-picker/test/index.js

@@ -41,12 +41,6 @@ function moveReactColorfulSlider( sliderElement, from, to ) {
 	fireEvent( sliderElement, new FakeMouseEvent( 'mousemove', to ) );
 }
 
-const sleep = ( ms ) => {
-	const promise = new Promise( ( resolve ) => setTimeout( resolve, ms ) );
-	jest.advanceTimersByTime( ms + 1 );
-	return promise;
-};
-
 const hslaMatcher = expect.objectContaining( {
 	h: expect.any( Number ),
 	s: expect.any( Number ),
@@ -93,9 +87,6 @@ describe( 'ColorPicker', () => {
 				{ pageX: 10, pageY: 10 }
 			);
 
-			// `onChange` is debounced so we need to sleep for at least 1ms before checking that onChange was called
-			await sleep( 1 );
-
 			expect( onChangeComplete ).toHaveBeenCalledWith(
 				legacyColorMatcher
 			);
@@ -117,9 +108,6 @@ describe( 'ColorPicker', () => {
 			{ pageX: 10, pageY: 10 }
 		);
 
-		// `onChange` is debounced so we need to sleep for at least 1ms before checking that onChange was called
-		await sleep( 1 );
-
 		expect( onChange ).toHaveBeenCalledWith(
 			expect.stringMatching( /^#([a-fA-F0-9]{8})$/ )
 		);
@@ -150,9 +138,6 @@ describe( 'ColorPicker', () => {
 			{ pageX: 10, pageY: 10 }
 		);
 
-		// `onChange` is debounced so we need to sleep for at least 1ms before checking that onChange was called
-		await sleep( 1 );
-
 		expect( onChange ).toHaveBeenCalledWith(
 			expect.stringMatching( /^#([a-fA-F0-9]{6})$/ )
 		);

package/src/duotone-picker/custom-duotone-bar.js

@@ -19,7 +19,6 @@ export default function CustomDuotoneBar( { value, onChange } ) {
 	return (
 		<CustomGradientBar
 			disableInserter
-			disableAlpha
 			background={ background }
 			hasGradient={ hasGradient }
 			value={ controlPoints }

package/src/duotone-picker/duotone-picker.js

@@ -85,6 +85,7 @@ function DuotonePicker( {
 					colors={ colorPalette }
 					value={ value }
 					disableCustomColors={ disableCustomColors }
+					enableAlpha
 					onChange={ ( newColors ) => {
 						if ( ! newColors[ 0 ] ) {
 							newColors[ 0 ] = defaultDark;

package/src/gradient-picker/index.js

@@ -14,18 +14,18 @@ import { useCallback, useMemo } from '@wordpress/element';
  */
 import CircularOptionPicker from '../circular-option-picker';
 import CustomGradientPicker from '../custom-gradient-picker';
+import { VStack } from '../v-stack';
+import { ColorHeading } from '../color-palette/styles';
 
-export default function GradientPicker( {
+function SingleOrigin( {
 	className,
+	clearGradient,
 	gradients,
 	onChange,
 	value,
-	clearable = true,
-	disableCustomGradients = false,
+	actions,
+	content,
 } ) {
-	const clearGradient = useCallback( () => onChange( undefined ), [
-		onChange,
-	] );
 	const gradientOptions = useMemo( () => {
 		return map( gradients, ( { gradient, name } ) => (
 			<CircularOptionPicker.Option
@@ -57,6 +57,70 @@ export default function GradientPicker( {
 		<CircularOptionPicker
 			className={ className }
 			options={ gradientOptions }
+			actions={ actions }
+		>
+			{ content }
+		</CircularOptionPicker>
+	);
+}
+
+function MultipleOrigin( {
+	className,
+	clearGradient,
+	gradients,
+	onChange,
+	value,
+	actions,
+	content,
+} ) {
+	return (
+		<VStack spacing={ 3 } className={ className }>
+			{ gradients.map( ( { name, gradients: gradientSet }, index ) => {
+				return (
+					<VStack spacing={ 2 } key={ index }>
+						<ColorHeading>{ name }</ColorHeading>
+						<SingleOrigin
+							clearGradient={ clearGradient }
+							gradients={ gradientSet }
+							onChange={ onChange }
+							value={ value }
+							{ ...( gradients.length === index + 1
+								? {
+										actions,
+										content,
+								  }
+								: {} ) }
+						/>
+					</VStack>
+				);
+			} ) }
+		</VStack>
+	);
+}
+
+export default function GradientPicker( {
+	className,
+	gradients,
+	onChange,
+	value,
+	clearable = true,
+	disableCustomGradients = false,
+	__experimentalHasMultipleOrigins,
+} ) {
+	const clearGradient = useCallback( () => onChange( undefined ), [
+		onChange,
+	] );
+	const Component = __experimentalHasMultipleOrigins
+		? MultipleOrigin
+		: SingleOrigin;
+	return (
+		<Component
+			className={ className }
+			clearable={ clearable }
+			clearGradient={ clearGradient }
+			gradients={ gradients }
+			onChange={ onChange }
+			value={ value }
 			actions={
 				clearable && (
 					<CircularOptionPicker.ButtonAction
@@ -66,10 +130,14 @@ export default function GradientPicker( {
 					</CircularOptionPicker.ButtonAction>
 				)
 			}
-		>
-			{ ! disableCustomGradients && (
-				<CustomGradientPicker value={ value } onChange={ onChange } />
-			) }
-		</CircularOptionPicker>
+			content={
+				! disableCustomGradients && (
+					<CustomGradientPicker
+						value={ value }
+						onChange={ onChange }
+					/>
+				)
+			}
+		/>
 	);
 }

package/src/heading/test/__snapshots__/index.js.snap

@@ -2,7 +2,7 @@
 
 exports[`props should render correctly 1`] = `
 .emotion-0 {
-  color: #000;
+  color: #1e1e1e;
   line-height: 1.2;
   margin: 0;
   color: #050505;

package/src/index.native.js

@@ -103,6 +103,7 @@ export { default as LinkPickerScreen } from './mobile/link-picker/link-picker-sc
 export { default as LinkSettings } from './mobile/link-settings';
 export { default as LinkSettingsScreen } from './mobile/link-settings/link-settings-screen';
 export { default as LinkSettingsNavigation } from './mobile/link-settings/link-settings-navigation';
+export { default as ImageLinkDestinationsScreen } from './mobile/link-settings/image-link-destinations-screen';
 export { default as SegmentedControl } from './mobile/segmented-control';
 export { default as Image, IMAGE_DEFAULT_FOCAL_POINT } from './mobile/image';
 export { default as ImageEditingButton } from './mobile/image/image-editing-button';

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

@@ -106,6 +106,7 @@ class BottomSheetCell extends Component {
 			valuePlaceholder = '',
 			icon,
 			leftAlign,
+			iconStyle = {},
 			labelStyle = {},
 			valueStyle = {},
 			cellContainerStyle = {},
@@ -307,7 +308,7 @@ class BottomSheetCell extends Component {
 				  );
 		};
 
-		const iconStyle = getStylesFromColorScheme(
+		const iconStyleBase = getStylesFromColorScheme(
 			styles.icon,
 			styles.iconDark
 		);
@@ -362,7 +363,11 @@ class BottomSheetCell extends Component {
 									<Icon
 										icon={ icon }
 										size={ 24 }
-										fill={ iconStyle.color }
+										fill={
+											iconStyle.color ||
+											iconStyleBase.color
+										}
+										style={ iconStyle }
 										isPressed={ false }
 									/>
 									<View

package/src/mobile/bottom-sheet/cellStyles.android.scss

@@ -7,5 +7,9 @@
 }
 
 .isSelected {
-	color: $blue-wordpress;
+	color: $blue-50;
+}
+
+.isSelectedDark {
+	color: $blue-30;
 }

package/src/mobile/bottom-sheet/cellStyles.ios.scss

@@ -7,7 +7,11 @@
 }
 
 .isSelected {
-	color: $blue-wordpress;
+	color: $blue-50;
+}
+
+.isSelectedDark {
+	color: $blue-30;
 }
 
 .activeOpacity {

package/src/mobile/bottom-sheet/link-cell.native.js

@@ -12,14 +12,21 @@ import styles from './styles.scss';
 
 const { placeholderColor } = styles;
 
-export default function LinkCell( { value, onPress, showIcon = true } ) {
+export default function LinkCell( {
+	value,
+	valueMask,
+	onPress,
+	showIcon = true,
+} ) {
 	return (
 		<Cell
 			icon={ showIcon && link }
 			label={ __( 'Link to' ) }
 			// since this is not actually editable, we treat value as a placeholder
-			value={ value || __( 'Search or type URL' ) }
-			valueStyle={ !! value ? undefined : placeholderColor }
+			value={ valueMask || value || __( 'Search or type URL' ) }
+			valueStyle={
+				!! ( value || valueMask ) ? undefined : placeholderColor
+			}
 			onPress={ onPress }
 		>
 			<Icon icon={ chevronRight }></Icon>

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

@@ -23,7 +23,7 @@ export const GLOBAL_STYLES_PALETTE = [
 ];
 
 export const GLOBAL_STYLES_GRADIENTS = {
-	core: [
+	default: [
 		{
 			name: 'Vivid cyan blue to vivid purple',
 			gradient:
@@ -138,7 +138,7 @@ export const PARSED_GLOBAL_STYLES = {
 export const RAW_FEATURES = {
 	color: {
 		palette: {
-			core: [
+			default: [
 				{
 					name: 'Black',
 					slug: 'black',
@@ -174,7 +174,7 @@ export const RAW_FEATURES = {
 			],
 		},
 		gradients: {
-			core: [
+			default: [
 				{
 					name: 'Vivid cyan blue to vivid purple',
 					gradient:
@@ -204,7 +204,7 @@ export const RAW_FEATURES = {
 	},
 	typography: {
 		fontSizes: {
-			core: [
+			default: [
 				{
 					name: 'Small',
 					slug: 'small',

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

@@ -265,7 +265,7 @@ function normalizeFontSizes( fontSizes ) {
 	const normalizedFontSizes = {};
 	const dimensions = Dimensions.get( 'window' );
 
-	[ 'core', 'theme', 'user' ].forEach( ( key ) => {
+	[ 'default', 'theme', 'user' ].forEach( ( key ) => {
 		if ( fontSizes[ key ] ) {
 			normalizedFontSizes[ key ] = fontSizes[ key ]?.map(
 				( fontSizeObject ) => {

package/src/mobile/link-settings/image-link-destinations-screen.native.js

@@ -0,0 +1,148 @@
+/**
+ * External dependencies
+ */
+import { useNavigation, useRoute } from '@react-navigation/native';
+import { StyleSheet } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Icon, check, chevronRight } from '@wordpress/icons';
+import { blockSettingsScreens } from '@wordpress/block-editor';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+import PanelBody from '../../panel/body';
+import BottomSheet from '../bottom-sheet';
+
+const LINK_DESTINATION_NONE = 'none';
+const LINK_DESTINATION_MEDIA = 'media';
+const LINK_DESTINATION_ATTACHMENT = 'attachment';
+const LINK_DESTINATION_CUSTOM = 'custom';
+
+function LinkDestination( {
+	children,
+	isSelected,
+	label,
+	onPress,
+	value,
+	valueStyle,
+} ) {
+	const optionIcon = usePreferredColorSchemeStyle(
+		styles.optionIcon,
+		styles.optionIconDark
+	);
+	return (
+		<BottomSheet.Cell
+			icon={ check }
+			iconStyle={ StyleSheet.flatten( [
+				optionIcon,
+				! isSelected && styles.unselectedOptionIcon,
+			] ) }
+			label={ label }
+			leftAlign
+			onPress={ onPress }
+			value={ value }
+			valueStyle={ valueStyle }
+			separatorType="leftMargin"
+		>
+			{ children }
+		</BottomSheet.Cell>
+	);
+}
+
+function ImageLinkDestinationsScreen( props ) {
+	const navigation = useNavigation();
+	const route = useRoute();
+	const { url = '' } = props;
+	const { inputValue = url, imageUrl, attachmentPageUrl, linkDestination } =
+		route.params || {};
+
+	function goToLinkPicker() {
+		navigation.navigate( blockSettingsScreens.linkPicker, {
+			inputValue:
+				linkDestination === LINK_DESTINATION_CUSTOM ? inputValue : '',
+		} );
+	}
+
+	const setLinkDestination = ( newLinkDestination ) => () => {
+		let newUrl;
+		switch ( newLinkDestination ) {
+			case LINK_DESTINATION_MEDIA:
+				newUrl = imageUrl;
+				break;
+			case LINK_DESTINATION_ATTACHMENT:
+				newUrl = attachmentPageUrl;
+				break;
+			default:
+				newUrl = '';
+				break;
+		}
+
+		navigation.navigate( blockSettingsScreens.settings, {
+			// The `inputValue` name is reused from LinkPicker, as it helps avoid
+			// bugs from stale values remaining in the React Navigation route
+			// parameters
+			inputValue: newUrl,
+			// Clear link text value that may be set from LinkPicker
+			text: '',
+		} );
+	};
+
+	return (
+		<>
+			<BottomSheet.NavBar>
+				<BottomSheet.NavBar.BackButton onPress={ navigation.goBack } />
+				<BottomSheet.NavBar.Heading>
+					{ __( 'Link To' ) }
+				</BottomSheet.NavBar.Heading>
+			</BottomSheet.NavBar>
+			<PanelBody>
+				<LinkDestination
+					isSelected={ linkDestination === LINK_DESTINATION_NONE }
+					label={ __( 'None' ) }
+					onPress={ setLinkDestination( LINK_DESTINATION_NONE ) }
+				/>
+				<LinkDestination
+					isSelected={ linkDestination === LINK_DESTINATION_MEDIA }
+					label={ __( 'Media File' ) }
+					onPress={ setLinkDestination( LINK_DESTINATION_MEDIA ) }
+				/>
+				{ !! attachmentPageUrl && (
+					<LinkDestination
+						isSelected={
+							linkDestination === LINK_DESTINATION_ATTACHMENT
+						}
+						label={ __( 'Attachment Page' ) }
+						onPress={ setLinkDestination(
+							LINK_DESTINATION_ATTACHMENT
+						) }
+					/>
+				) }
+				<LinkDestination
+					isSelected={ linkDestination === LINK_DESTINATION_CUSTOM }
+					label={ __( 'Custom URL' ) }
+					onPress={ goToLinkPicker }
+					value={
+						linkDestination === LINK_DESTINATION_CUSTOM
+							? inputValue
+							: ''
+					}
+					valueStyle={
+						linkDestination === LINK_DESTINATION_CUSTOM
+							? undefined
+							: styles.placeholderTextColor
+					}
+				>
+					<Icon icon={ chevronRight }></Icon>
+				</LinkDestination>
+			</PanelBody>
+		</>
+	);
+}
+
+export default ImageLinkDestinationsScreen;

package/src/mobile/link-settings/index.native.js

@@ -86,9 +86,9 @@ function LinkSettings( {
 	urlValue,
 	// Attributes properties
 	url,
-	label,
+	label = '',
 	linkTarget,
-	rel,
+	rel = '',
 } ) {
 	const [ urlInputValue, setUrlInputValue ] = useState( '' );
 	const [ labelInputValue, setLabelInputValue ] = useState( '' );
@@ -226,6 +226,7 @@ function LinkSettings( {
 						<BottomSheet.LinkCell
 							showIcon={ showIcon }
 							value={ url }
+							valueMask={ options.url.valueMask }
 							onPress={ onLinkCellPressed }
 						/>
 					) : (

package/src/mobile/link-settings/link-settings-navigation.native.js

@@ -23,6 +23,7 @@ function LinkSettingsNavigation( props ) {
 			isVisible={ props.isVisible }
 			onClose={ props.onClose }
 			onDismiss={ props.onDismiss }
+			testID={ props.testID }
 			hideHeader
 			hasNavigation
 		>

package/src/mobile/link-settings/link-settings-screen.native.js

@@ -20,17 +20,21 @@ const LinkSettingsScreen = ( props ) => {
 	const { inputValue = url } = route.params || {};
 
 	const onLinkCellPressed = () => {
-		navigation.navigate( 'linkPicker', { inputValue } );
+		if ( props.onLinkCellPressed ) {
+			props.onLinkCellPressed( { navigation } );
+		} else {
+			navigation.navigate( 'linkPicker', { inputValue } );
+		}
 	};
 
 	return useMemo( () => {
 		return (
 			<LinkSettings
+				{ ...props }
 				onLinkCellPressed={
 					props.hasPicker ? onLinkCellPressed : undefined
 				}
 				urlValue={ inputValue }
-				{ ...props }
 			/>
 		);
 	}, [ props, inputValue, navigation, route ] );

package/src/mobile/link-settings/style.native.scss

@@ -2,3 +2,20 @@
 	padding-left: 0;
 	padding-right: 0;
 }
+
+// used in both light and dark modes
+.placeholderTextColor {
+	color: #87a6bc;
+}
+
+.optionIcon {
+	color: $blue-50;
+}
+
+.optionIconDark {
+	color: $blue-30;
+}
+
+.unselectedOptionIcon {
+	opacity: 0;
+}

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

@@ -71,7 +71,7 @@ export default class Picker extends Component {
 	}
 
 	render() {
-		const { hideCancelButton, title } = this.props;
+		const { hideCancelButton, title, testID } = this.props;
 		const { isVisible } = this.state;
 
 		return (
@@ -80,6 +80,7 @@ export default class Picker extends Component {
 				onClose={ this.onClose }
 				style={ { paddingBottom: 20 } }
 				hideHeader
+				testID={ testID }
 			>
 				<PanelBody title={ title } style={ styles.panelBody }>
 					{ this.getOptions() }

package/src/modal/README.md

@@ -247,6 +247,14 @@ If this property is added, it will an additional class name to the modal overlay
 -   Type: `String`
 -   Required: No
 
+#### isFullScreen
+
+This property when set to `true` will render a full screen modal.
+
+-   Type: `boolean`
+-   Required: No
+-   Default: `false`
+
 ## Related components
 
 -   To notify a user with a message of medium importance, use `Notice`.