@wordpress/components 19.4.0 → 19.5.0

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/mobile/inserter-button/index.native.js

@@ -10,14 +10,13 @@ import { Component } from '@wordpress/element';
 import { Icon } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
-import { sparkles } from '@wordpress/icons';
 import { BlockIcon } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
-
+import sparkles from './sparkles';
 class MenuItem extends Component {
 	constructor() {
 		super( ...arguments );

package/src/mobile/inserter-button/sparkles.js

@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const sparkles = (
+	<SVG viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			d="M10 11c-1.588-.479-4-.91-4-.91s2-.241 4-.454c1.8-.191 3.365-.502 4-3.181C14.635 3.775 15 1 15 1s.365 2.775 1 5.455c.635 2.679 2 2.969 4 3.181 2 .213 4 .455 4 .455s-2.412.43-4 .909c-1.588.479-3 1-4 4.546-.746 2.643-.893 4.948-1 5.454-.107-.506-.167-2.5-1-5.454C13 12 11.588 11.479 10 11zM7.333 3.5C6.803 3.333 6 3.182 6 3.182s.667-.085 1.333-.16c.6-.066 1.122-.175 1.334-1.113C8.878.971 9 0 9 0s.122.971.333 1.91c.212.937.667 1.038 1.334 1.113.666.074 1.333.159 1.333.159s-.804.15-1.333.318c-.53.167-1 .35-1.334 1.59C9.085 6.017 9.036 6.824 9 7c-.036-.177-.056-.875-.333-1.91-.334-1.24-.804-1.423-1.334-1.59zM2.444 18C1.474 17.713 0 17.454 0 17.454s1.222-.145 2.444-.272c1.1-.115 2.057-.302 2.445-1.91C5.277 13.666 5.5 12 5.5 12s.223 1.665.611 3.273c.388 1.607 1.222 1.781 2.445 1.909 1.222.127 2.444.273 2.444.273s-1.474.258-2.444.545c-.971.287-1.834.6-2.445 2.727-.456 1.586-.546 2.97-.611 3.273-.065-.304-.102-1.5-.611-3.273C4.278 18.6 3.415 18.287 2.444 18z"
+			fill="#F0C930"
+		/>
+	</SVG>
+);
+
+export default sparkles;

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`.

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

@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import { View } from '../../view';
+import { useNavigatorButton } from './hook';
+import type { NavigatorButtonProps } from '../types';
+
+function NavigatorButton(
+	props: WordPressComponentProps< NavigatorButtonProps, 'button' >,
+	forwardedRef: ForwardedRef< any >
+) {
+	const navigatorButtonProps = useNavigatorButton( props );
+
+	return <View ref={ forwardedRef } { ...navigatorButtonProps } />;
+}
+
+/**
+ * The `NavigatorButton` component can be used to navigate to a screen and should
+ * be used in combination with the `NavigatorProvider`, the `NavigatorScreen`
+ * and the `NavigatorBackButton` 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 ConnectedNavigatorButton = contextConnect(
+	NavigatorButton,
+	'NavigatorButton'
+);
+
+export default ConnectedNavigatorButton;

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

@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+import { escapeAttribute } from '@wordpress/escape-html';
+
+/**
+ * Internal dependencies
+ */
+/**
+ * Internal dependencies
+ */
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import Button from '../../button';
+import useNavigator from '../use-navigator';
+import type { NavigatorButtonProps } from '../types';
+
+const cssSelectorForAttribute = ( attrName: string, attrValue: string ) =>
+	`[${ attrName }="${ attrValue }"]`;
+
+export function useNavigatorButton(
+	props: WordPressComponentProps< NavigatorButtonProps, 'button' >
+) {
+	const {
+		path,
+		onClick,
+		as = Button,
+		attributeName = 'id',
+		...otherProps
+	} = useContextSystem( props, 'NavigatorButton' );
+
+	const escapedPath = escapeAttribute( path );
+
+	const { goTo } = useNavigator();
+	const handleClick: React.MouseEventHandler< HTMLButtonElement > = useCallback(
+		( e ) => {
+			e.preventDefault();
+			goTo( escapedPath, {
+				focusTargetSelector: cssSelectorForAttribute(
+					attributeName,
+					escapedPath
+				),
+			} );
+			onClick?.( e );
+		},
+		[ goTo, onClick ]
+	);
+
+	return {
+		as,
+		onClick: handleClick,
+		...otherProps,
+		[ attributeName ]: escapedPath,
+	};
+}

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

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

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

@@ -4,47 +4,34 @@
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
 
-The `NavigatorProvider` component allows rendering nested panels or menus (via the [`NavigatorScreen` component](/packages/components/src/navigator/navigator-screen/README.md)) and navigate between these different states (via the `useNavigator` hook). The Global Styles sidebar is an example of this.
+The `NavigatorProvider` component allows rendering nested views/panels/menus (via the [`NavigatorScreen` component](/packages/components/src/navigator/navigator-screen/README.md)) and navigate between these different states (via the [`NavigatorButton`](/packages/components/src/navigator/navigator-button/README.md) and [`NavigatorBackButton`](/packages/components/src/navigator/navigator-back-button/README.md) components or the `useNavigator` hook). The Global Styles sidebar is an example of this.
 
 ## Usage
 
 ```jsx
 import {
-	__experimentalNavigatorProvider as NavigatorProvider,
-	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalUseNavigator as useNavigator,
+  __experimentalNavigatorProvider as NavigatorProvider,
+  __experimentalNavigatorScreen as NavigatorScreen,
+  __experimentalNavigatorButton as NavigatorButton,
+  __experimentalNavigatorBackButton as NavigatorBackButton,
 } from '@wordpress/components';
 
-function NavigatorButton( { path, ...props } ) {
-	const { goTo } = useNavigator();
-	return (
-		<Button
-		 variant="primary"
-		 onClick={ () => goTo( path ) }
-		 { ...props }
-	 />
- );
-}
-
-function NavigatorBackButton( props ) {
-	const { goBack } = useNavigator();
-	return <Button variant="secondary" onClick={ () => goBack() } { ...props } />;
-}
-
 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>
+  <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>
 );
 ```
 

package/src/navigator/navigator-provider/component.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 import { css } from '@emotion/react';
 
 /**
@@ -28,7 +28,7 @@ import type {
 
 function NavigatorProvider(
 	props: WordPressComponentProps< NavigatorProviderProps, 'div' >,
-	forwardedRef: Ref< any >
+	forwardedRef: ForwardedRef< any >
 ) {
 	const {
 		initialPath,
@@ -100,44 +100,34 @@ function NavigatorProvider(
 }
 
 /**
- * The `NavigatorProvider` component allows rendering nested panels or menus (via the `NavigatorScreen` component) and navigate between these different states (via the `useNavigator` hook).
+ * The `NavigatorProvider` component allows rendering nested views/panels/menus
+ * (via the `NavigatorScreen` component and navigate between these different
+ * view (via the `NavigatorButton` and `NavigatorBackButton` components or the
+ * `useNavigator` hook).
  *
  * @example
  * ```jsx
  * import {
  *   __experimentalNavigatorProvider as NavigatorProvider,
  *   __experimentalNavigatorScreen as NavigatorScreen,
- *   __experimentalUseNavigator as useNavigator,
+ *   __experimentalNavigatorButton as NavigatorButton,
+ *   __experimentalNavigatorBackButton as NavigatorBackButton,
  * } from '@wordpress/components';
  *
- * function NavigatorButton( { path, ...props } ) {
- *  const { goTo } = useNavigator();
- *  return (
- *    <Button
- *      variant="primary"
- *      onClick={ () => goTo( path ) }
- *      { ...props }
- *    />
- *  );
- * }
- *
- * function NavigatorBackButton( props ) {
- *   const { goBack } = useNavigator();
- *   return <Button variant="secondary" onClick={ () => goBack() } { ...props } />;
- * }
- *
  * const MyNavigation = () => (
  *   <NavigatorProvider initialPath="/">
  *     <NavigatorScreen path="/">
  *       <p>This is the home screen.</p>
- *   	   <NavigatorButton path="/child">
+ *        <NavigatorButton path="/child">
  *          Navigate to child screen.
  *       </NavigatorButton>
  *     </NavigatorScreen>
  *
  *     <NavigatorScreen path="/child">
  *       <p>This is the child screen.</p>
- *       <NavigatorBackButton>Go back</NavigatorBackButton>
+ *       <NavigatorBackButton>
+ *         Go back
+ *       </NavigatorBackButton>
  *     </NavigatorScreen>
  *   </NavigatorProvider>
  * );

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

@@ -4,7 +4,7 @@
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
 
-The `NavigatorScreen` component represents a single view/screen/panel/menu and is supposed to be used in combination with [the `NavigatorProvider` component](/packages/components/src/navigator/navigator-provider/README.md).
+The `NavigatorScreen` component represents a single view/screen/panel and should be used in combination with the [`NavigatorProvider`](/packages/components/src/navigator/navigator-provider/README.md), the [`NavigatorButton`](/packages/components/src/navigator/navigator-button/README.md) and the [`NavigatorBackButton`](/packages/components/src/navigator/navigator-back-button/README.md) components (or the `useNavigator` hook).
 
 ## Usage