@wordpress/components 19.4.1 → 19.5.0

package/src/index.native.js

@@ -134,4 +134,8 @@ export {
 	withGlobalStyles,
 	getMergedGlobalStyles,
 } from './mobile/global-styles-context';
-export { getGlobalStyles } from './mobile/global-styles-context/utils';
+export {
+	getGlobalStyles,
+	getColorsAndGradients,
+	useMobileGlobalStylesColors,
+} from './mobile/global-styles-context/utils';

package/src/input-control/index.tsx

@@ -3,7 +3,7 @@
  */
 import { noop } from 'lodash';
 import classNames from 'classnames';
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -45,7 +45,7 @@ export function InputControl(
 		value,
 		...props
 	}: InputControlProps,
-	ref: Ref< HTMLInputElement >
+	ref: ForwardedRef< HTMLInputElement >
 ) {
 	const [ isFocused, setIsFocused ] = useState( false );
 

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -66,7 +66,7 @@ export function InputBase(
 		suffix,
 		...props
 	}: InputBaseProps,
-	ref: Ref< HTMLDivElement >
+	ref: ForwardedRef< HTMLDivElement >
 ) {
 	const id = useUniqueId( idProp );
 	const hideLabel = hideLabelFromVision || ! label;

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

@@ -2,14 +2,14 @@
  * External dependencies
  */
 import { noop } from 'lodash';
-import { useDrag } from 'react-use-gesture';
+import { useDrag } from '@use-gesture/react';
 import type {
 	SyntheticEvent,
 	ChangeEvent,
 	KeyboardEvent,
 	PointerEvent,
 	FocusEvent,
-	Ref,
+	ForwardedRef,
 	MouseEvent,
 } from 'react';
 
@@ -53,7 +53,7 @@ function InputField(
 		type,
 		...props
 	}: WordPressComponentProps< InputFieldProps, 'input', false >,
-	ref: Ref< HTMLInputElement >
+	ref: ForwardedRef< HTMLInputElement >
 ) {
 	const {
 		// State
@@ -168,9 +168,6 @@ function InputField(
 	const dragGestureProps = useDrag< PointerEvent< HTMLInputElement > >(
 		( dragProps ) => {
 			const { distance, dragging, event } = dragProps;
-			// The event is persisted to prevent errors in components using this
-			// to check if a modifier key was held while dragging.
-			event.persist();
 
 			if ( ! distance ) return;
 			event.stopPropagation();
@@ -196,6 +193,7 @@ function InputField(
 		{
 			threshold: dragThreshold,
 			enabled: isDragEnabled,
+			pointer: { capture: false },
 		}
 	);
 

package/src/input-control/reducer/reducer.ts

@@ -50,6 +50,9 @@ export const composeStateReducers = (
 ): StateReducer => {
 	return ( ...args ) => {
 		return fns.reduceRight( ( state, fn ) => {
+			// TODO: Assess whether this can be replaced with a more standard `compose` implementation
+			// like wp.data.compose() (aka lodash flowRight) or Redux compose().
+			// The current implementation only works by functions mutating the original state object.
 			const fnState = fn( ...args );
 			return isEmpty( fnState ) ? state : { ...state, ...fnState };
 		}, {} as InputState );

package/src/input-control/stories/index.js

@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import InputControl from '../';
 
 export default {
-	title: 'Components/InputControl',
+	title: 'Components (Experimental)/InputControl',
 	component: InputControl,
 	parameters: {
 		knobs: { disable: false },

package/src/input-control/types.ts

@@ -7,7 +7,7 @@ import type {
 	ChangeEvent,
 	SyntheticEvent,
 } from 'react';
-import type { useDrag } from 'react-use-gesture';
+import type { useDrag } from '@use-gesture/react';
 
 /**
  * Internal dependencies

package/src/item-group/item/component.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * Internal dependencies
@@ -13,7 +13,7 @@ import { View } from '../../view';
 
 function Item(
 	props: WordPressComponentProps< ItemProps, 'div' >,
-	forwardedRef: Ref< any >
+	forwardedRef: ForwardedRef< any >
 ) {
 	const { role, wrapperClassName, ...otherProps } = useItem( props );
 

package/src/item-group/item-group/component.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * Internal dependencies
@@ -14,7 +14,7 @@ import type { ItemGroupProps } from '../types';
 
 function ItemGroup(
 	props: WordPressComponentProps< ItemGroupProps, 'div' >,
-	forwardedRef: Ref< any >
+	forwardedRef: ForwardedRef< any >
 ) {
 	const {
 		isBordered,

package/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js

@@ -128,7 +128,16 @@ const BottomSheetNavigationScreen = ( {
 				</TouchableHighlight>
 			</ScrollView>
 		);
-	}, [ children, isFocused, safeAreaBottomInset, listProps ] );
+	}, [
+		children,
+		isFocused,
+		safeAreaBottomInset,
+		listProps,
+		name,
+		isScrollable,
+		isNested,
+		onLayout,
+	] );
 };
 
 export default BottomSheetNavigationScreen;

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

@@ -13,8 +13,10 @@ import {
 	ColorControl,
 	PanelBody,
 	BottomSheetContext,
+	useMobileGlobalStylesColors,
 } from '@wordpress/components';
 import { useRoute, useNavigation } from '@react-navigation/native';
+
 /**
  * Internal dependencies
  */
@@ -27,6 +29,7 @@ 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();
@@ -45,10 +48,15 @@ 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 ]
 	);
+	const isGradientSegment = currentSegment === colorsUtils.segments[ 1 ];
+	const currentSegmentColors = ! isGradientSegment
+		? defaultSettings.colors
+		: defaultSettings.gradients;
 
 	const horizontalSeparatorStyle = usePreferredColorSchemeStyle(
 		styles.horizontalSeparator,
@@ -176,15 +184,37 @@ const PaletteScreen = () => {
 					<NavBar.Heading>{ label } </NavBar.Heading>
 				</NavBar>
 			) }
-			<ColorPalette
-				setColor={ setColor }
-				activeColor={ currentValue }
-				isGradientColor={ isGradientColor }
-				currentSegment={ currentSegment }
-				onCustomPress={ onCustomPress }
-				shouldEnableBottomSheetScroll={ shouldEnableBottomSheetScroll }
-				defaultSettings={ defaultSettings }
-			/>
+
+			<View style={ styles.colorPalettes }>
+				{ currentSegmentColors.map( ( palette, paletteKey ) => {
+					const paletteSettings = {
+						colors: palette.colors,
+						gradients: palette.gradients,
+						allColors: allAvailableColors,
+					};
+					const enableCustomColor =
+						! isGradientSegment &&
+						palette.name === THEME_PALETTE_NAME;
+
+					return (
+						<ColorPalette
+							enableCustomColor={ enableCustomColor }
+							label={ palette.name }
+							key={ paletteKey }
+							setColor={ setColor }
+							activeColor={ currentValue }
+							isGradientColor={ isGradientColor }
+							currentSegment={ currentSegment }
+							onCustomPress={ onCustomPress }
+							shouldEnableBottomSheetScroll={
+								shouldEnableBottomSheetScroll
+							}
+							defaultSettings={ paletteSettings }
+						/>
+					);
+				} ) }
+			</View>
+
 			{ isCustomGadientShown && (
 				<>
 					<View style={ horizontalSeparatorStyle } />

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

@@ -16,6 +16,10 @@
 	padding: 12px $grid-unit-20;
 }
 
+.colorPalettes {
+	padding: $grid-unit-10 0;
+}
+
 .colorIndicator {
 	width: 24px;
 	height: 24px;

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

@@ -20,6 +20,11 @@ export const GLOBAL_STYLES_PALETTE = [
 		color: '#D1D1E4',
 		name: 'Purple',
 	},
+	{
+		color: '#cf1594',
+		name: 'Color 2 ',
+		slug: 'custom-color-2',
+	},
 ];
 
 export const GLOBAL_STYLES_GRADIENTS = {
@@ -91,6 +96,11 @@ export const DEFAULT_GLOBAL_STYLES = {
 				fontSize: 'var(--wp--preset--font-size--normal)',
 			},
 		},
+		'core/separator': {
+			color: {
+				text: 'var:preset|color|custom-color-2',
+			},
+		},
 	},
 };
 
@@ -132,6 +142,11 @@ export const PARSED_GLOBAL_STYLES = {
 				fontSize: '18px',
 			},
 		},
+		'core/separator': {
+			color: {
+				text: '#cf1594',
+			},
+		},
 	},
 };
 
@@ -172,6 +187,18 @@ export const RAW_FEATURES = {
 					name: 'Purple',
 				},
 			],
+			custom: [
+				{
+					color: '#1bf5c1',
+					name: 'Color 1 ',
+					slug: 'custom-color-1',
+				},
+				{
+					color: '#cf1594',
+					name: 'Color 2 ',
+					slug: 'custom-color-2',
+				},
+			],
 		},
 		gradients: {
 			default: [

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

@@ -125,14 +125,14 @@ describe( 'getGlobalStyles', () => {
 
 		expect( globalStyles ).toEqual(
 			expect.objectContaining( {
-				colors: RAW_FEATURES.color,
-				gradients,
 				__experimentalFeatures: {
 					color: {
 						palette: RAW_FEATURES.color.palette,
 						gradients,
 						text: true,
 						background: true,
+						defaultPalette: true,
+						defaultGradients: true,
 					},
 					typography: {
 						fontSizes: RAW_FEATURES.typography.fontSizes,

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

@@ -7,7 +7,11 @@ import { Dimensions } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { getPxFromCssUnit } from '@wordpress/block-editor';
+import {
+	getPxFromCssUnit,
+	useSetting,
+	useMultipleOriginColorsAndGradients,
+} from '@wordpress/block-editor';
 
 export const BLOCK_STYLE_ATTRIBUTES = [
 	'textColor',
@@ -186,7 +190,7 @@ export function getBlockTypography(
 
 export function parseStylesVariables( styles, mappedValues, customValues ) {
 	let stylesBase = styles;
-	const variables = [ 'preset', 'custom' ];
+	const variables = [ 'preset', 'custom', 'var' ];
 
 	if ( ! stylesBase ) {
 		return styles;
@@ -196,7 +200,9 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 		// Examples
 		// var(--wp--preset--color--gray)
 		// var(--wp--custom--body--typography--font-family)
+		// var:preset|color|custom-color-2
 		const regex = new RegExp( `var\\(--wp--${ variable }--(.*?)\\)`, 'g' );
+		const varRegex = /\"var:preset\|color\|(.*?)\"/gm;
 
 		if ( variable === 'preset' ) {
 			stylesBase = stylesBase.replace( regex, ( _$1, $2 ) => {
@@ -226,6 +232,18 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 				] );
 			} );
 		}
+
+		if ( variable === 'var' ) {
+			stylesBase = stylesBase.replace( varRegex, ( _$1, $2 ) => {
+				if ( mappedValues?.color ) {
+					const matchedValue = find( mappedValues.color?.values, {
+						slug: $2,
+					} );
+					return `"${ matchedValue?.color }"`;
+				}
+				return UNKNOWN_VALUE;
+			} );
+		}
 	} );
 
 	return JSON.parse( stylesBase );
@@ -233,7 +251,12 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 
 export function getMappedValues( features, palette ) {
 	const typography = features?.typography;
-	const colors = { ...palette?.theme, ...palette?.custom };
+	const colors = [
+		...( palette?.theme || [] ),
+		...( palette?.custom || [] ),
+		...( palette?.default || [] ),
+	];
+
 	const fontSizes = {
 		...typography?.fontSizes?.theme,
 		...typography?.fontSizes?.custom,
@@ -265,7 +288,7 @@ function normalizeFontSizes( fontSizes ) {
 	const normalizedFontSizes = {};
 	const dimensions = Dimensions.get( 'window' );
 
-	[ 'default', 'theme', 'user' ].forEach( ( key ) => {
+	[ 'default', 'theme', 'custom' ].forEach( ( key ) => {
 		if ( fontSizes[ key ] ) {
 			normalizedFontSizes[ key ] = fontSizes[ key ]?.map(
 				( fontSizeObject ) => {
@@ -286,6 +309,52 @@ function normalizeFontSizes( fontSizes ) {
 	return normalizedFontSizes;
 }
 
+export function useMobileGlobalStylesColors( type = 'colors' ) {
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+	const availableThemeColors = colorGradientSettings?.[ type ]?.reduce(
+		( colors, origin ) => colors.concat( origin?.[ type ] ),
+		[]
+	);
+	// Default editor colors/gradients if it's not a block-based theme.
+	const colorPalette =
+		type === 'colors' ? 'color.palette' : 'color.gradients';
+	const editorDefaultPalette = useSetting( colorPalette );
+
+	return availableThemeColors.length >= 1
+		? availableThemeColors
+		: editorDefaultPalette;
+}
+
+export function getColorsAndGradients(
+	defaultEditorColors = [],
+	defaultEditorGradients = [],
+	rawFeatures
+) {
+	const features = rawFeatures ? JSON.parse( rawFeatures ) : {};
+
+	return {
+		__experimentalGlobalStylesBaseStyles: null,
+		__experimentalFeatures: {
+			color: {
+				...( ! features?.color
+					? {
+							text: true,
+							background: true,
+							palette: {
+								default: defaultEditorColors,
+							},
+							gradients: {
+								default: defaultEditorGradients,
+							},
+					  }
+					: features?.color ),
+				defaultPalette: defaultEditorColors?.length > 0,
+				defaultGradients: defaultEditorGradients?.length > 0,
+			},
+		},
+	};
+}
+
 export function getGlobalStyles( rawStyles, rawFeatures ) {
 	const features = rawFeatures ? JSON.parse( rawFeatures ) : {};
 	const mappedValues = getMappedValues( features, features?.color?.palette );
@@ -310,14 +379,14 @@ export function getGlobalStyles( rawStyles, rawFeatures ) {
 	const fontSizes = normalizeFontSizes( features?.typography?.fontSizes );
 
 	return {
-		colors,
-		gradients,
 		__experimentalFeatures: {
 			color: {
 				palette: colors?.palette,
 				gradients,
 				text: features?.color?.text ?? true,
 				background: features?.color?.background ?? true,
+				defaultPalette: features?.color?.defaultPalette ?? true,
+				defaultGradients: features?.color?.defaultGradients ?? true,
 			},
 			typography: {
 				fontSizes,

package/src/navigation/stories/index.js

@@ -15,7 +15,7 @@ import { HideIfEmptyStory } from './hide-if-empty';
 import './style.css';
 
 export default {
-	title: 'Components/Navigation',
+	title: 'Components (Experimental)/Navigation',
 	component: Navigation,
 	subcomponents: {
 		NavigationBackButton,

package/src/navigator/index.ts

@@ -1,3 +1,5 @@
 export { default as NavigatorProvider } from './navigator-provider';
 export { default as NavigatorScreen } from './navigator-screen';
+export { default as NavigatorButton } from './navigator-button';
+export { default as NavigatorBackButton } from './navigator-back-button';
 export { default as useNavigator } from './use-navigator';

package/src/navigator/navigator-back-button/README.md

@@ -0,0 +1,31 @@
+# `NavigatorBackButton`
+
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
+
+The `NavigatorBackButton` component can be used to navigate to a screen and should be used in combination with the [`NavigatorProvider`](/packages/components/src/navigator/navigator-provider/README.md), the [`NavigatorScreen`](/packages/components/src/navigator/navigator-screen/README.md) and the [`NavigatorButton`](/packages/components/src/navigator/navigator-button/README.md) components (or the `useNavigator` hook).
+
+## Usage
+
+Refer to [the `NavigatorProvider` component](/packages/components/src/navigator/navigator-provider/README.md#usage) for a usage example.
+
+## Props
+
+The component accepts the following props:
+
+### `onClick`: `React.MouseEventHandler< HTMLElement >`
+
+The callback called in response to a `click` event.
+
+-   Required: No
+
+### `path`: `string`
+
+The path of the screen to navigate to.
+
+-   Required: Yes
+
+### Inherited props
+
+`NavigatorBackButton` also inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href`.

package/src/navigator/navigator-back-button/component.tsx

@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import { View } from '../../view';
+import { useNavigatorBackButton } from './hook';
+import type { NavigatorBackButtonProps } from '../types';
+
+function NavigatorBackButton(
+	props: WordPressComponentProps< NavigatorBackButtonProps, 'button' >,
+	forwardedRef: ForwardedRef< any >
+) {
+	const navigatorBackButtonProps = useNavigatorBackButton( props );
+
+	return <View ref={ forwardedRef } { ...navigatorBackButtonProps } />;
+}
+
+/**
+ * The `NavigatorBackButton` component can be used to navigate to a screen and
+ * should be used in combination with the `NavigatorProvider`, the
+ * `NavigatorScreen` and the `NavigatorButton` components (or the `useNavigator`
+ * hook).
+ *
+ * @example
+ * ```jsx
+ * import {
+ *   __experimentalNavigatorProvider as NavigatorProvider,
+ *   __experimentalNavigatorScreen as NavigatorScreen,
+ *   __experimentalNavigatorButton as NavigatorButton,
+ *   __experimentalNavigatorBackButton as NavigatorBackButton,
+ * } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ *   <NavigatorProvider initialPath="/">
+ *     <NavigatorScreen path="/">
+ *       <p>This is the home screen.</p>
+ *        <NavigatorButton path="/child">
+ *          Navigate to child screen.
+ *       </NavigatorButton>
+ *     </NavigatorScreen>
+ *
+ *     <NavigatorScreen path="/child">
+ *       <p>This is the child screen.</p>
+ *       <NavigatorBackButton>
+ *         Go back
+ *       </NavigatorBackButton>
+ *     </NavigatorScreen>
+ *   </NavigatorProvider>
+ * );
+ * ```
+ */
+const ConnectedNavigatorBackButton = contextConnect(
+	NavigatorBackButton,
+	'NavigatorBackButton'
+);
+
+export default ConnectedNavigatorBackButton;

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

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+/**
+ * Internal dependencies
+ */
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import Button from '../../button';
+import useNavigator from '../use-navigator';
+import type { NavigatorBackButtonProps } from '../types';
+
+export function useNavigatorBackButton(
+	props: WordPressComponentProps< NavigatorBackButtonProps, 'button' >
+) {
+	const { onClick, as = Button, ...otherProps } = useContextSystem(
+		props,
+		'NavigatorBackButton'
+	);
+
+	const { goBack } = useNavigator();
+	const handleClick: React.MouseEventHandler< HTMLButtonElement > = useCallback(
+		( e ) => {
+			e.preventDefault();
+			goBack();
+			onClick?.( e );
+		},
+		[ goBack, onClick ]
+	);
+
+	return {
+		as,
+		onClick: handleClick,
+		...otherProps,
+	};
+}

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

@@ -0,0 +1 @@
+export { default } from './component';

package/src/navigator/navigator-button/README.md

@@ -0,0 +1,38 @@
+# `NavigatorButton`
+
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
+
+The `NavigatorButton` component can be used to navigate to a screen and should be used in combination with the [`NavigatorProvider`](/packages/components/src/navigator/navigator-provider/README.md), the [`NavigatorScreen`](/packages/components/src/navigator/navigator-screen/README.md) and the [`NavigatorBackButton`](/packages/components/src/navigator/navigator-back-button/README.md) components (or the `useNavigator` hook).
+
+## Usage
+
+Refer to [the `NavigatorProvider` component](/packages/components/src/navigator/navigator-provider/README.md#usage) for a usage example.
+
+## Props
+
+The component accepts the following props:
+
+### `attributeName`: `string`
+
+The HTML attribute used to identify the `NavigatorButton`, which is used by `Navigator` to restore focus.
+
+-   Required: No
+-   Default: `id`
+
+### `onClick`: `React.MouseEventHandler< HTMLElement >`
+
+The callback called in response to a `click` event.
+
+-   Required: No
+
+### `path`: `string`
+
+The path of the screen to navigate to. The value of this prop needs to be [a valid value for an HTML attribute](https://html.spec.whatwg.org/multipage/syntax.html#attributes-2).
+
+-   Required: Yes
+
+### Inherited props
+
+`NavigatorButton` also inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href`.