@wordpress/components 19.14.0 → 19.17.0

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, startsWith, get, camelCase, has } from 'lodash';
+import { find, get, camelCase, has } from 'lodash';
 import { Dimensions } from 'react-native';
 
 /**
@@ -32,6 +32,7 @@ const BLOCK_STYLE_ATTRIBUTES_MAPPING = {
 
 const PADDING = 12; // $solid-border-space
 const UNKNOWN_VALUE = 'undefined';
+const DEFAULT_FONT_SIZE = 16;
 
 export function getBlockPaddings(
 	mergedStyle,
@@ -103,7 +104,7 @@ export function getBlockColors(
 
 	// Custom colors.
 	Object.entries( blockStyleAttributes ).forEach( ( [ key, value ] ) => {
-		const isCustomColor = startsWith( value, '#' );
+		const isCustomColor = value?.startsWith?.( '#' );
 		let styleKey = key;
 
 		if ( BLOCK_STYLE_ATTRIBUTES_MAPPING[ styleKey ] ) {
@@ -190,7 +191,7 @@ export function getBlockTypography(
 
 export function parseStylesVariables( styles, mappedValues, customValues ) {
 	let stylesBase = styles;
-	const variables = [ 'preset', 'custom', 'var' ];
+	const variables = [ 'preset', 'custom', 'var', 'fontSize' ];
 
 	if ( ! stylesBase ) {
 		return styles;
@@ -203,6 +204,7 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 		// var:preset|color|custom-color-2
 		const regex = new RegExp( `var\\(--wp--${ variable }--(.*?)\\)`, 'g' );
 		const varRegex = /\"var:preset\|color\|(.*?)\"/gm;
+		const fontSizeRegex = /"fontSize":"(.*?)"/gm;
 
 		if ( variable === 'preset' ) {
 			stylesBase = stylesBase.replace( regex, ( _$1, $2 ) => {
@@ -244,6 +246,21 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 				return UNKNOWN_VALUE;
 			} );
 		}
+
+		if ( variable === 'fontSize' ) {
+			const { width, height } = Dimensions.get( 'window' );
+
+			stylesBase = stylesBase.replace( fontSizeRegex, ( _$1, $2 ) => {
+				const parsedFontSize =
+					getPxFromCssUnit( $2, {
+						width,
+						height,
+						fontSize: DEFAULT_FONT_SIZE,
+					} ) || `${ DEFAULT_FONT_SIZE }px`;
+
+				return `"fontSize":"${ parsedFontSize }"`;
+			} );
+		}
 	} );
 
 	return JSON.parse( stylesBase );
@@ -297,7 +314,7 @@ function normalizeFontSizes( fontSizes ) {
 						{
 							width: dimensions.width,
 							height: dimensions.height,
-							fontSize: 16,
+							fontSize: DEFAULT_FONT_SIZE,
 						}
 					);
 					return fontSizeObject;

package/src/mobile/image/index.native.js

@@ -1,7 +1,13 @@
 /**
  * External dependencies
  */
-import { Image, Text, View } from 'react-native';
+import {
+	Image as RNImage,
+	Text,
+	View,
+	useWindowDimensions,
+} from 'react-native';
+import FastImage from 'react-native-fast-image';
 
 /**
  * WordPress dependencies
@@ -10,7 +16,7 @@ import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/components';
 import { image as icon } from '@wordpress/icons';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useState, useRef, Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -36,6 +42,7 @@ const ImageComponent = ( {
 	height: imageHeight,
 	highlightSelected = true,
 	isSelected,
+	shouldUseFastImage,
 	isUploadFailed,
 	isUploadInProgress,
 	mediaPickerOptions,
@@ -52,11 +59,19 @@ const ImageComponent = ( {
 } ) => {
 	const [ imageData, setImageData ] = useState( null );
 	const [ containerSize, setContainerSize ] = useState( null );
+	const [ shouldUseFallback, setShouldUseFallback ] = useState( false );
+	const { height: windowHeight, width: windowWidth } = useWindowDimensions();
+	const isLandscape = useRef( windowWidth > windowHeight );
+
+	const Image = ! shouldUseFastImage ? RNImage : FastImage;
+	const imageResizeMode = ! shouldUseFastImage
+		? resizeMode
+		: FastImage.resizeMode[ resizeMode ];
 
 	useEffect( () => {
 		let isCurrent = true;
 		if ( url ) {
-			Image.getSize( url, ( imgWidth, imgHeight ) => {
+			RNImage.getSize( url, ( imgWidth, imgHeight ) => {
 				if ( ! isCurrent ) {
 					return;
 				}
@@ -74,6 +89,21 @@ const ImageComponent = ( {
 		return () => ( isCurrent = false );
 	}, [ url ] );
 
+	// Workaround for Android where changing the orientation breaks FastImage
+	// for now if there's any orientation changes, it will use the fallback
+	// prop to use the default Image component.
+	// https://github.com/WordPress/gutenberg/issues/42869
+	useEffect( () => {
+		if ( Platform.isAndroid && shouldUseFastImage ) {
+			const isCurrentOrientationLandscape = windowWidth > windowHeight;
+
+			if ( isLandscape.current !== isCurrentOrientationLandscape ) {
+				setShouldUseFallback( true );
+				isLandscape.current = isCurrentOrientationLandscape;
+			}
+		}
+	}, [ windowHeight, windowWidth ] );
+
 	const onContainerLayout = ( event ) => {
 		const { height, width } = event.nativeEvent.layout;
 
@@ -151,6 +181,9 @@ const ImageComponent = ( {
 			opacity: isUploadInProgress ? 0.3 : 1,
 			height: containerSize?.height,
 		},
+		! resizeMode && {
+			aspectRatio: imageData?.aspectRatio,
+		},
 		focalPoint && styles.focalPoint,
 		focalPoint &&
 			getImageWithFocalPointStyles(
@@ -211,15 +244,13 @@ const ImageComponent = ( {
 				) : (
 					<View style={ focalPoint && styles.focalPointContent }>
 						<Image
-							{ ...( ! resizeMode && {
-								aspectRatio: imageData?.aspectRatio,
-							} ) }
 							style={ imageStyles }
 							source={ { uri: url } }
 							{ ...( ! focalPoint && {
 								resizeMethod: 'scale',
 							} ) }
-							resizeMode={ resizeMode }
+							resizeMode={ imageResizeMode }
+							fallback={ shouldUseFallback }
 						/>
 					</View>
 				) }

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

@@ -3,12 +3,11 @@
  */
 import { Keyboard } from 'react-native';
 import { useNavigation, useRoute } from '@react-navigation/native';
-import { delay } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
+import { useEffect, useMemo, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -18,10 +17,12 @@ import { LinkPicker } from './';
 const LinkPickerScreen = ( { returnScreenName } ) => {
 	const navigation = useNavigation();
 	const route = useRoute();
+	const navigateToLinkTimeoutRef = useRef( null );
+	const navigateBackTimeoutRef = useRef( null );
 
 	const onLinkPicked = ( { url, title } ) => {
 		Keyboard.dismiss();
-		delay( () => {
+		navigateToLinkTimeoutRef.current = setTimeout( () => {
 			navigation.navigate( returnScreenName, {
 				inputValue: url,
 				text: title,
@@ -31,11 +32,18 @@ const LinkPickerScreen = ( { returnScreenName } ) => {
 
 	const onCancel = () => {
 		Keyboard.dismiss();
-		delay( () => {
+		navigateBackTimeoutRef.current = setTimeout( () => {
 			navigation.goBack();
 		}, 100 );
 	};
 
+	useEffect( () => {
+		return () => {
+			clearTimeout( navigateToLinkTimeoutRef.current );
+			clearTimeout( navigateBackTimeoutRef.current );
+		};
+	}, [] );
+
 	const { inputValue } = route.params;
 	return useMemo( () => {
 		return (

package/src/mobile/media-edit/index.native.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { compact } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -46,11 +41,11 @@ export class MediaEdit extends Component {
 	getMediaOptionsItems() {
 		const { pickerOptions, openReplaceMediaOptions, source } = this.props;
 
-		return compact( [
+		return [
 			source?.uri && editOption,
 			openReplaceMediaOptions && replaceOption,
 			...( pickerOptions ? pickerOptions : [] ),
-		] );
+		].filter( Boolean );
 	}
 
 	getDestructiveButtonIndex() {

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

@@ -10,6 +10,12 @@ import { __ } from '@wordpress/i18n';
 import { Component, forwardRef, useContext } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { BottomSheetContext } from '@wordpress/components';
+import { usePreferredColorScheme } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
 
 class Picker extends Component {
 	presentPicker() {
@@ -23,10 +29,16 @@ class Picker extends Component {
 			isBottomSheetOpened,
 			closeBottomSheet,
 			onHandleClosingBottomSheet,
+			colorScheme,
 		} = this.props;
 		const labels = options.map( ( { label } ) => label );
 		const fullOptions = [ __( 'Cancel' ) ].concat( labels );
 
+		const buttonTitleColor =
+			colorScheme === 'light'
+				? styles[ 'components-picker__button-title' ].color
+				: styles[ 'components-picker__button-title--dark' ].color;
+
 		ActionSheetIOS.showActionSheetWithOptions(
 			{
 				title,
@@ -35,6 +47,7 @@ class Picker extends Component {
 				destructiveButtonIndex,
 				disabledButtonIndices,
 				anchor: getAnchor && getAnchor(),
+				tintColor: buttonTitleColor,
 			},
 			( buttonIndex ) => {
 				if ( buttonIndex === 0 ) {
@@ -66,6 +79,8 @@ const PickerComponent = forwardRef( ( props, ref ) => {
 	const { closeGeneralSidebar } = useDispatch( 'core/edit-post' );
 	const { onHandleClosingBottomSheet } = useContext( BottomSheetContext );
 
+	const colorScheme = usePreferredColorScheme();
+
 	return (
 		<Picker
 			ref={ ref }
@@ -73,6 +88,7 @@ const PickerComponent = forwardRef( ( props, ref ) => {
 			isBottomSheetOpened={ isBottomSheetOpened }
 			closeBottomSheet={ closeGeneralSidebar }
 			onHandleClosingBottomSheet={ onHandleClosingBottomSheet }
+			colorScheme={ colorScheme }
 		/>
 	);
 } );

package/src/mobile/picker/styles.native.scss

@@ -19,3 +19,11 @@
 	padding-left: 0;
 	padding-right: 0;
 }
+
+.components-picker__button-title {
+	color: $blue-50;
+}
+
+.components-picker__button-title--dark {
+	color: $blue-30;
+}

package/src/modal/index.js

@@ -10,8 +10,10 @@ import classnames from 'classnames';
  */
 import {
 	createPortal,
+	useCallback,
 	useEffect,
 	useRef,
+	useState,
 	forwardRef,
 } from '@wordpress/element';
 import {
@@ -24,7 +26,7 @@ import {
 } from '@wordpress/compose';
 import { ESCAPE } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
-import { closeSmall } from '@wordpress/icons';
+import { close } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -73,6 +75,8 @@ function Modal( props, forwardedRef ) {
 	const focusReturnRef = useFocusReturn();
 	const focusOutsideProps = useFocusOutside( onRequestClose );
 
+	const [ hasScrolledContent, setHasScrolledContent ] = useState( false );
+
 	useEffect( () => {
 		openModalCount++;
 
@@ -104,6 +108,19 @@ function Modal( props, forwardedRef ) {
 		}
 	}
 
+	const onContentContainerScroll = useCallback(
+		( e ) => {
+			const scrollY = e?.target?.scrollTop ?? -1;
+
+			if ( ! hasScrolledContent && scrollY > 0 ) {
+				setHasScrolledContent( true );
+			} else if ( hasScrolledContent && scrollY <= 0 ) {
+				setHasScrolledContent( false );
+			}
+		},
+		[ hasScrolledContent ]
+	);
+
 	return createPortal(
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
@@ -142,8 +159,10 @@ function Modal( props, forwardedRef ) {
 					<div
 						className={ classnames( 'components-modal__content', {
 							'hide-header': __experimentalHideHeader,
+							'has-scrolled-content': hasScrolledContent,
 						} ) }
 						role="document"
+						onScroll={ onContentContainerScroll }
 					>
 						{ ! __experimentalHideHeader && (
 							<div className="components-modal__header">
@@ -168,7 +187,7 @@ function Modal( props, forwardedRef ) {
 								{ isDismissible && (
 									<Button
 										onClick={ onRequestClose }
-										icon={ closeSmall }
+										icon={ close }
 										label={
 											closeButtonLabel ||
 											__( 'Close dialog' )

package/src/modal/stories/index.js

@@ -35,7 +35,23 @@ const ModalExample = ( props ) => {
 				Open Modal
 			</Button>
 			{ isOpen && (
-				<Modal { ...props } onRequestClose={ closeModal }>
+				<Modal
+					{ ...props }
+					onRequestClose={ closeModal }
+					style={ { maxWidth: '600px' } }
+				>
+					<p>
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+						sed do eiusmod tempor incididunt ut labore et magna
+						aliqua. Ut enim ad minim veniam, quis nostrud
+						exercitation ullamco laboris nisi ut aliquip ex ea ea
+						commodo consequat. Duis aute irure dolor in
+						reprehenderit in voluptate velit esse cillum dolore eu
+						fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+						non proident, sunt in culpa qui officia deserunt mollit
+						anim id est laborum.
+					</p>
+
 					<Button variant="secondary" onClick={ closeModal }>
 						Close Modal
 					</Button>

package/src/modal/style.scss

@@ -8,6 +8,7 @@
 	background-color: rgba($black, 0.35);
 	z-index: z-index(".components-modal__screen-overlay");
 	display: flex;
+	backdrop-filter: blur($grid-unit);
 
 	// This animates the appearance of the white background.
 	@include edit-post__fade-in-animation();
@@ -63,13 +64,13 @@
 // modal screen).
 .components-modal__header {
 	box-sizing: border-box;
-	border-bottom: $border-width solid $gray-300;
+	border-bottom: $border-width solid transparent;
 	padding: 0 $grid-unit-40;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 	align-items: center;
-	height: $header-height;
+	height: $header-height + $grid-unit-20;
 	width: 100%;
 	z-index: z-index(".components-modal__header");
 	position: absolute;
@@ -77,7 +78,7 @@
 	left: 0;
 
 	.components-modal__header-heading {
-		font-size: 1rem;
+		font-size: 1.2rem;
 		font-weight: 600;
 	}
 
@@ -90,6 +91,14 @@
 		position: relative;
 		left: $grid-unit-10;
 	}
+
+	.components-modal__content.has-scrolled-content:not(.hide-header) & {
+		border-bottom-color: $gray-300;
+	}
+
+	& + p {
+		margin-top: 0;
+	}
 }
 
 .components-modal__header-heading-container {
@@ -113,26 +122,12 @@
 // Modal contents.
 .components-modal__content {
 	flex: 1;
-	margin-top: $header-height;
-	padding: 0 $grid-unit-40 $grid-unit-30;
+	margin-top: $header-height + $grid-unit-20;
+	padding: 0 $grid-unit-40 $grid-unit-40;
 	overflow: auto;
 
-	// Emulate margin-bottom for the header. Uses a pseudo-element since the
-	// absolutely positioned header’s margins wouldn’t effect siblings and
-	// padding-top on the content element would effect positioning of any
-	// sticky elements within.
-	&::before {
-		content: "";
-		display: block;
-		margin-bottom: $grid-unit-30;
-	}
-
 	&.hide-header {
 		margin-top: 0;
 		padding-top: $grid-unit-30;
-
-		&::before {
-			content: none;
-		}
 	}
 }

package/src/navigation/index.js

@@ -54,6 +54,9 @@ export default function Navigation( {
 		if ( activeMenu !== menu ) {
 			setActiveMenu( activeMenu );
 		}
+		// Ignore exhaustive-deps here, as it would require either a larger refactor or some questionable workarounds.
+		// See https://github.com/WordPress/gutenberg/pull/41612 for context.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ activeMenu ] );
 
 	const context = {

package/src/navigation/item/base.js

@@ -18,7 +18,8 @@ import { ItemBaseUI } from '../styles/navigation-styles';
 let uniqueId = 0;
 
 export default function NavigationItemBase( props ) {
-	const { children, className, ...restProps } = props;
+	// Also avoid to pass the `title` and `href` props to the ItemBaseUI styled component.
+	const { children, className, title, href, ...restProps } = props;
 
 	const [ itemId ] = useState( `item-${ ++uniqueId }` );
 

package/src/panel/style.scss

@@ -35,9 +35,12 @@
 	justify-content: space-between;
 	align-items: center;
 	padding: 0 $grid-unit-20;
-	height: $grid-unit-60;
 	border-bottom: $border-width solid $gray-300;
 
+	// This helps ensure the correct panel height, including the border, avoiding subpixel rounding issues.
+	box-sizing: content-box;
+	height: $grid-unit-60 - $border-width;
+
 	h2 {
 		margin: 0;
 		font-size: inherit;

package/src/placeholder/README.md

@@ -9,12 +9,52 @@ import { more } from '@wordpress/icons';
 const MyPlaceholder = () => <Placeholder icon={ more } label="Placeholder" />;
 ```
 
-### Props
-
-| Name              | Type                | Default     | Description                                                       |
-| ----------------  | ------------------- | ----------- | ----------------------------------------------------------------- |
-| `icon`            | `string, WPElement` | `undefined` | If provided, renders an icon next to the label.                   |
-| `label`           | `string`            | `undefined` | Renders a label for the placeholder.                              |
-| `instructions`    | `string`            | `undefined` | Renders instruction text below label.                             |
-| `isColumnLayout`  | `bool`              | `false`     | Changes placeholder children layout from flex-row to flex-column. |
-| `withIllustration`| `bool`              | `false`     | Outputs a placeholder illustration.                             |
+## Props
+
+### `className`: `string`
+
+Class to set on the container div.
+
+-   Required: No
+
+### `icon`: `string|Function|WPComponent|null`
+
+If provided, renders an icon next to the label.
+
+-   Required: No
+
+### `instructions`: `string`
+
+Instructions of the placeholder.
+
+-   Required: No
+
+### `isColumnLayout`: `boolean`
+
+Changes placeholder children layout from flex-row to flex-column.
+
+-   Required: No
+
+### `label`: `string`
+
+Title of the placeholder.
+
+-   Required: Yes
+
+### `notices`: `ReactNode`
+
+A rendered notices list
+
+-   Required: No
+
+### `preview`: `ReactNode`
+
+Preview to be rendered in the placeholder.
+
+-   Required: No
+
+### `withIllustration`: `boolean`
+
+Outputs a placeholder illustration.
+
+-   Required: No

package/src/placeholder/{index.js → index.tsx}

@@ -13,6 +13,8 @@ import { SVG, Path } from '@wordpress/primitives';
  * Internal dependencies
  */
 import Icon from '../icon';
+import type { PlaceholderProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
 
 const PlaceholderIllustration = (
 	<SVG
@@ -29,31 +31,33 @@ const PlaceholderIllustration = (
 /**
  * Renders a placeholder. Normally used by blocks to render their empty state.
  *
- * @param {Object}    props                  The component props.
- * @param {WPIcon}    props.icon             An icon rendered before the label.
- * @param {WPElement} props.children         Children to be rendered.
- * @param {string}    props.label            Title of the placeholder.
- * @param {string}    props.instructions     Instructions of the placeholder.
- * @param {string}    props.className        Class to set on the container div.
- * @param {Object}    props.notices          A rendered notices list.
- * @param {Object}    props.preview          Preview to be rendered in the placeholder.
- * @param {boolean}   props.isColumnLayout   Whether a column layout should be used.
- * @param {boolean}   props.withIllustration Whether to add an illustration to the placeholder.
+ * ```jsx
+ * import { Placeholder } from '@wordpress/components';
+ * import { more } from '@wordpress/icons';
  *
- * @return {Object} The rendered placeholder.
+ * const MyPlaceholder = () => <Placeholder icon={ more } label="Placeholder" />;
+ * ```
  */
-function Placeholder( {
-	icon,
-	children,
-	label,
-	instructions,
-	className,
-	notices,
-	preview,
-	isColumnLayout,
-	withIllustration,
-	...additionalProps
-} ) {
+export function Placeholder< IconProps = unknown >(
+	// ref is omitted until we have `WordPressComponentPropsWithoutRef` or add
+	// ref forwarding to Placeholder.
+	props: Omit<
+		WordPressComponentProps< PlaceholderProps< IconProps >, 'div', false >,
+		'ref'
+	>
+) {
+	const {
+		icon,
+		children,
+		label,
+		instructions,
+		className,
+		notices,
+		preview,
+		isColumnLayout,
+		withIllustration,
+		...additionalProps
+	} = props;
 	const [ resizeListener, { width } ] = useResizeObserver();
 
 	// Since `useResizeObserver` will report a width of `null` until after the