@wordpress/components 25.12.0 → 25.14.0

package/src/form-toggle/style.scss

@@ -1,6 +1,11 @@
+@use "sass:math";
+
 $toggle-width: 36px;
 $toggle-height: 18px;
 $toggle-border-width: 1px;
+$thumb-size:  $toggle-height - ($toggle-border-width * 6);
+
+$transition-duration: 0.2s;
 
 .components-form-toggle {
 	position: relative;
@@ -8,6 +13,7 @@ $toggle-border-width: 1px;
 
 	// Unchecked state.
 	.components-form-toggle__track {
+		position: relative;
 		content: "";
 		display: inline-block;
 		box-sizing: border-box;
@@ -16,9 +22,27 @@ $toggle-border-width: 1px;
 		border: $toggle-border-width solid $gray-900;
 		width: $toggle-width;
 		height: $toggle-height;
-		border-radius: $toggle-height * 0.5;
-		transition: 0.2s background ease;
+		border-radius: math.div($toggle-height, 2);
+		transition:
+			$transition-duration background-color ease,
+			$transition-duration border-color ease;
 		@include reduce-motion("transition");
+		overflow: hidden;
+
+		// Windows High Contrast Mode
+		&::after {
+			content: "";
+			position: absolute;
+			inset: 0;
+			box-sizing: border-box;
+			// Expand the border to fake a solid in Windows High Contrast Mode.
+			border-top: #{ $toggle-height } solid transparent;
+
+			transition: $transition-duration opacity ease;
+			@include reduce-motion("transition");
+
+			opacity: 0;
+		}
 	}
 
 	.components-form-toggle__thumb {
@@ -27,20 +51,28 @@ $toggle-border-width: 1px;
 		box-sizing: border-box;
 		top: $toggle-border-width * 3;
 		left: $toggle-border-width * 3;
-		width: $toggle-height - ($toggle-border-width * 6);
-		height: $toggle-height - ($toggle-border-width * 6);
+		width: $thumb-size;
+		height: $thumb-size;
 		border-radius: 50%;
-		transition: 0.1s transform ease;
+		transition:
+			$transition-duration transform ease,
+			$transition-duration background-color ease-out;
 		@include reduce-motion("transition");
 		background-color: $gray-900;
-		border: 5px solid $gray-900; // Has explicit border to act as a fill in Windows High Contrast Mode.
+
+		// Transparent border acts as a fill in Windows High Contrast Mode.
+		border: math.div($thumb-size, 2) solid transparent;
 	}
 
 	// Checked state.
 	&.is-checked .components-form-toggle__track {
 		background-color: $components-color-accent;
-		border: $toggle-border-width solid $components-color-accent;
-		border: #{ $toggle-height * 0.5 } solid transparent; // Expand the border to fake a solid in Windows High Contrast Mode.
+		border-color: $components-color-accent;
+
+		// Windows High Contrast Mode
+		&::after {
+			opacity: 1;
+		}
 	}
 
 	.components-form-toggle__input:focus + .components-form-toggle__track {

package/src/form-token-field/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import type { KeyboardEvent, MouseEvent, TouchEvent } from 'react';
+import type { KeyboardEvent, MouseEvent, TouchEvent, FocusEvent } from 'react';
 
 /**
  * WordPress dependencies
@@ -162,7 +162,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		}
 	}
 
-	function onBlur() {
+	function onBlur( event: FocusEvent ) {
 		if (
 			inputHasValidValue() &&
 			__experimentalValidateInput( incompleteTokenValue )
@@ -176,7 +176,15 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 			setIncompleteTokenValue( '' );
 			setInputOffsetFromEnd( 0 );
 			setIsActive( false );
-			setIsExpanded( false );
+
+			// If `__experimentalExpandOnFocus` is true, don't close the suggestions list when
+			// the user clicks on it (`tokensAndInput` will be the element that caused the blur).
+			const shouldKeepSuggestionsExpanded =
+				! __experimentalExpandOnFocus ||
+				( __experimentalExpandOnFocus &&
+					event.relatedTarget === tokensAndInput.current );
+			setIsExpanded( shouldKeepSuggestionsExpanded );
+
 			setSelectedSuggestionIndex( -1 );
 			setSelectedSuggestionScroll( false );
 		}

package/src/form-token-field/token-input.tsx

@@ -48,9 +48,7 @@ export function UnForwardedTokenInput(
 		onFocus?.( e );
 	};
 
-	const onBlurHandler: React.FocusEventHandler< HTMLInputElement > = (
-		e
-	) => {
+	const onBlurHandler: FocusEventHandler< HTMLInputElement > = ( e ) => {
 		setHasFocus( false );
 		onBlur?.( e );
 	};

package/src/form-token-field/types.ts

@@ -5,6 +5,7 @@ import type {
 	ComponentPropsWithRef,
 	MouseEventHandler,
 	ReactNode,
+	FocusEvent,
 } from 'react';
 
 type Messages = {

package/src/heading/README.md

@@ -18,7 +18,12 @@ function Example() {
 
 ## Props
 
-`Heading` uses `Text` underneath, so we have access to all of `Text`'s props except for `size` which is replaced by `level`. For a complete list of those props, check out [`Text`](/packages/components/src/text/README.md#props).
+`Heading` uses `Text` underneath, so we have access to all of `Text`'s props except for:
+
+- `size` which is replaced by `level`;
+- `isBlock`'s default value, which is `true` for the `Heading` component.
+
+For a complete list of those props, check out [`Text`](/packages/components/src/text/README.md#props).
 
 ##### `level`: `1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'`
 

package/src/heading/hook.ts

@@ -14,6 +14,9 @@ export function useHeading(
 	const {
 		as: asProp,
 		level = 2,
+		color = COLORS.gray[ 900 ],
+		isBlock = true,
+		weight = CONFIG.fontWeightHeading as import('react').CSSProperties[ 'fontWeight' ],
 		...otherProps
 	} = useContextSystem( props, 'Heading' );
 
@@ -31,10 +34,10 @@ export function useHeading(
 	}
 
 	const textProps = useText( {
-		color: COLORS.gray[ 900 ],
+		color,
+		isBlock,
+		weight,
 		size: getHeadingFontSize( level ),
-		isBlock: true,
-		weight: CONFIG.fontWeightHeading as import('react').CSSProperties[ 'fontWeight' ],
 		...otherProps,
 	} );
 

package/src/heading/types.ts

@@ -17,7 +17,10 @@ export type HeadingSize =
 	| '5'
 	| '6';
 
-export type HeadingProps = Omit< TextProps, 'size' > & {
+export type HeadingProps = Omit<
+	TextProps,
+	'size' | 'isBlock' | 'color' | 'weight'
+> & {
 	/**
 	 * Passing any of the heading levels to `level` will both render the correct
 	 * typographic text size as well as the semantic element corresponding to
@@ -26,4 +29,23 @@ export type HeadingProps = Omit< TextProps, 'size' > & {
 	 * @default 2
 	 */
 	level?: HeadingSize;
+	/**
+	 * Sets `Heading` to have `display: block`. Note: text truncation only works
+	 * when `isBlock` is `false`.
+	 *
+	 * @default true
+	 */
+	isBlock?: TextProps[ 'isBlock' ];
+	/**
+	 * Adjusts the text color.
+	 *
+	 * @default '#1e1e1e'
+	 */
+	color?: TextProps[ 'color' ];
+	/**
+	 * Adjusts font-weight of the text.
+	 *
+	 * @default '600'
+	 */
+	weight?: TextProps[ 'weight' ];
 };

package/src/index.native.js

@@ -106,11 +106,9 @@ 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';
-export { default as InserterButton } from './mobile/inserter-button';
 export { setClipboard, getClipboard } from './mobile/clipboard';
 export { default as AudioPlayer } from './mobile/audio-player';
 export { default as Badge } from './mobile/badge';

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

@@ -108,6 +108,28 @@ describe( 'parseStylesVariables', () => {
 			expect.objectContaining( PARSED_GLOBAL_STYLES )
 		);
 	} );
+
+	it( 'returns the parsed custom color values correctly', () => {
+		const defaultStyles = {
+			...DEFAULT_GLOBAL_STYLES,
+			color: {
+				text: 'var(--wp--custom--color--blue)',
+				background: 'var(--wp--custom--color--green)',
+			},
+		};
+		const customValues = parseStylesVariables(
+			JSON.stringify( RAW_FEATURES.custom ),
+			MAPPED_VALUES
+		);
+		const styles = parseStylesVariables(
+			JSON.stringify( defaultStyles ),
+			MAPPED_VALUES,
+			customValues
+		);
+		expect( styles ).toEqual(
+			expect.objectContaining( PARSED_GLOBAL_STYLES )
+		);
+	} );
 } );
 
 describe( 'getGlobalStyles', () => {

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

@@ -248,6 +248,20 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 			const customValuesData = customValues ?? JSON.parse( stylesBase );
 			stylesBase = stylesBase.replace( regex, ( _$1, $2 ) => {
 				const path = $2.split( '--' );
+
+				// Supports cases for variables like var(--wp--custom--color--background)
+				if ( path[ 0 ] === 'color' ) {
+					const colorKey = path[ path.length - 1 ];
+					if ( mappedValues?.color ) {
+						const matchedValue = mappedValues.color?.values?.find(
+							( { slug } ) => slug === colorKey
+						);
+						if ( matchedValue ) {
+							return `${ matchedValue?.color }`;
+						}
+					}
+				}
+
 				if (
 					path.reduce(
 						( prev, curr ) => prev && prev[ curr ],

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

@@ -2,20 +2,3 @@
 	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/utils/alignments.native.js

@@ -10,6 +10,7 @@ export const WIDE_ALIGNMENTS = {
 	},
 	excludeBlocks: [ 'core/heading' ],
 	notInnerContainers: [
+		'core/image',
 		'core/separator',
 		'core/media-text',
 		'core/pullquote',

package/src/navigable-container/README.md

@@ -24,7 +24,7 @@ Gets an offset, given an event.
 
 -   Required: No
 
-### `onKeydown`: `( event: KeyboardEvent ) => void`
+### `onKeyDown`: `( event: KeyboardEvent ) => void`
 
 A callback invoked on the keydown event.
 

package/src/palette-edit/index.tsx

@@ -60,7 +60,7 @@ import type {
 	PaletteElement,
 } from './types';
 
-const DEFAULT_COLOR = '#000';
+export const DEFAULT_COLOR = '#000';
 
 function NameInput( { value, onChange, label }: NameInputProps ) {
 	return (
@@ -261,16 +261,30 @@ function Option< T extends Color | Gradient >( {
 	);
 }
 
-function isTemporaryElement(
+/**
+ * Checks if a color or gradient is a temporary element by testing against default values.
+ */
+export function isTemporaryElement(
 	slugPrefix: string,
 	{ slug, color, gradient }: Color | Gradient
-) {
+): Boolean {
 	const regex = new RegExp( `^${ slugPrefix }color-([\\d]+)$` );
-	return (
-		regex.test( slug ) &&
-		( ( !! color && color === DEFAULT_COLOR ) ||
-			( !! gradient && gradient === DEFAULT_GRADIENT ) )
-	);
+
+	// If the slug matches the temporary name regex,
+	// check if the color or gradient matches the default value.
+	if ( regex.test( slug ) ) {
+		// The order is important as gradient elements
+		// contain a color property.
+		if ( !! gradient ) {
+			return gradient === DEFAULT_GRADIENT;
+		}
+
+		if ( !! color ) {
+			return color === DEFAULT_COLOR;
+		}
+	}
+
+	return false;
 }
 
 function PaletteEditListView< T extends Color | Gradient >( {

package/src/palette-edit/style.scss

@@ -1,6 +1,6 @@
 .components-palette-edit__popover-gradient-picker {
-	width: 280px;
-	padding: 8px;
+	width: 260px;
+	padding: $grid-unit-10;
 }
 .components-dropdown-menu__menu {
 	.components-palette-edit__menu-button {

package/src/palette-edit/test/index.tsx

@@ -6,8 +6,13 @@ import { render, fireEvent, screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import PaletteEdit, { getNameForPosition } from '..';
+import PaletteEdit, {
+	getNameForPosition,
+	isTemporaryElement,
+	DEFAULT_COLOR,
+} from '..';
 import type { PaletteElement } from '../types';
+import { DEFAULT_GRADIENT } from '../../custom-gradient-picker/constants';
 
 describe( 'getNameForPosition', () => {
 	test( 'should return 1 by default', () => {
@@ -80,6 +85,75 @@ describe( 'getNameForPosition', () => {
 	} );
 } );
 
+describe( 'isTemporaryElement', () => {
+	[
+		{
+			message: 'identifies temporary color',
+			slug: 'test-',
+			obj: {
+				name: '',
+				slug: 'test-color-1',
+				color: DEFAULT_COLOR,
+			},
+			expected: true,
+		},
+		{
+			message: 'identifies temporary gradient',
+			slug: 'test-',
+			obj: {
+				name: '',
+				slug: 'test-color-1',
+				gradient: DEFAULT_GRADIENT,
+			},
+			expected: true,
+		},
+		{
+			message: 'identifies custom color slug',
+			slug: 'test-',
+			obj: {
+				name: '',
+				slug: 'test-color-happy',
+				color: DEFAULT_COLOR,
+			},
+			expected: false,
+		},
+		{
+			message: 'identifies custom color value',
+			slug: 'test-',
+			obj: {
+				name: '',
+				slug: 'test-color-1',
+				color: '#ccc',
+			},
+			expected: false,
+		},
+		{
+			message: 'identifies custom gradient slug',
+			slug: 'test-',
+			obj: {
+				name: '',
+				slug: 'test-gradient-joy',
+				color: DEFAULT_GRADIENT,
+			},
+			expected: false,
+		},
+		{
+			message: 'identifies custom gradient value',
+			slug: 'test-',
+			obj: {
+				name: '',
+				slug: 'test-color-3',
+				color: 'linear-gradient(90deg, rgba(22, 22, 22, 1) 0%, rgb(155, 81, 224) 100%)',
+			},
+			expected: false,
+		},
+	].forEach( ( { message, slug, obj, expected } ) => {
+		it( `should ${ message }`, () => {
+			expect( isTemporaryElement( slug, obj ) ).toBe( expected );
+		} );
+	} );
+} );
+
 describe( 'PaletteEdit', () => {
 	const defaultProps = {
 		colors: [ { color: '#ffffff', name: 'Base', slug: 'base' } ],

package/src/private-apis.ts

@@ -32,11 +32,12 @@ import {
 import {
 	DropdownMenu as DropdownMenuV2Ariakit,
 	DropdownMenuGroup as DropdownMenuGroupV2Ariakit,
-	DropdownMenuGroupLabel as DropdownMenuGroupLabelV2Ariakit,
 	DropdownMenuItem as DropdownMenuItemV2Ariakit,
 	DropdownMenuCheckboxItem as DropdownMenuCheckboxItemV2Ariakit,
 	DropdownMenuRadioItem as DropdownMenuRadioItemV2Ariakit,
 	DropdownMenuSeparator as DropdownMenuSeparatorV2Ariakit,
+	DropdownMenuItemLabel as DropdownMenuItemLabelV2Ariakit,
+	DropdownMenuItemHelpText as DropdownMenuItemHelpTextV2Ariakit,
 } from './dropdown-menu-v2-ariakit';
 import { ComponentsContext } from './context/context-system-provider';
 import Theme from './theme';
@@ -74,9 +75,10 @@ lock( privateApis, {
 	Theme,
 	DropdownMenuV2Ariakit,
 	DropdownMenuGroupV2Ariakit,
-	DropdownMenuGroupLabelV2Ariakit,
 	DropdownMenuItemV2Ariakit,
 	DropdownMenuCheckboxItemV2Ariakit,
 	DropdownMenuRadioItemV2Ariakit,
 	DropdownMenuSeparatorV2Ariakit,
+	DropdownMenuItemLabelV2Ariakit,
+	DropdownMenuItemHelpTextV2Ariakit,
 } );

package/src/query-controls/author-select.tsx

@@ -6,6 +6,7 @@ import TreeSelect from '../tree-select';
 import type { AuthorSelectProps } from './types';
 
 export default function AuthorSelect( {
+	__next40pxDefaultSize,
 	label,
 	noOptionLabel,
 	authorList,
@@ -28,6 +29,7 @@ export default function AuthorSelect( {
 					: undefined
 			}
 			__nextHasNoMarginBottom
+			__next40pxDefaultSize={ __next40pxDefaultSize }
 		/>
 	);
 }

package/src/query-controls/category-select.tsx

@@ -11,6 +11,7 @@ import { useMemo } from '@wordpress/element';
 import type { CategorySelectProps } from './types';
 
 export default function CategorySelect( {
+	__next40pxDefaultSize,
 	label,
 	noOptionLabel,
 	categoriesList,
@@ -37,6 +38,7 @@ export default function CategorySelect( {
 			}
 			{ ...props }
 			__nextHasNoMarginBottom
+			__next40pxDefaultSize={ __next40pxDefaultSize }
 		/>
 	);
 }

package/src/query-controls/index.tsx

@@ -60,6 +60,7 @@ function isMultipleCategorySelection(
  * ```
  */
 export function QueryControls( {
+	__next40pxDefaultSize = false,
 	authorList,
 	selectedAuthorId,
 	numberOfItems,
@@ -81,6 +82,7 @@ export function QueryControls( {
 				onOrderChange && onOrderByChange && (
 					<SelectControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize={ __next40pxDefaultSize }
 						key="query-controls-order-select"
 						label={ __( 'Order by' ) }
 						value={ `${ orderBy }/${ order }` }
@@ -131,6 +133,7 @@ export function QueryControls( {
 					props.categoriesList &&
 					props.onCategoryChange && (
 						<CategorySelect
+							__next40pxDefaultSize={ __next40pxDefaultSize }
 							key="query-controls-category-select"
 							categoriesList={ props.categoriesList }
 							label={ __( 'Category' ) }
@@ -143,6 +146,7 @@ export function QueryControls( {
 					props.categorySuggestions &&
 					props.onCategoryChange && (
 						<FormTokenField
+							__next40pxDefaultSize={ __next40pxDefaultSize }
 							__nextHasNoMarginBottom
 							key="query-controls-categories-select"
 							label={ __( 'Categories' ) }
@@ -166,6 +170,7 @@ export function QueryControls( {
 					),
 				onAuthorChange && (
 					<AuthorSelect
+						__next40pxDefaultSize={ __next40pxDefaultSize }
 						key="query-controls-author-select"
 						authorList={ authorList }
 						label={ __( 'Author' ) }
@@ -177,7 +182,7 @@ export function QueryControls( {
 				onNumberOfItemsChange && (
 					<RangeControl
 						__nextHasNoMarginBottom
-						__next40pxDefaultSize
+						__next40pxDefaultSize={ __next40pxDefaultSize }
 						key="query-controls-range-control"
 						label={ __( 'Number of items' ) }
 						value={ numberOfItems }

package/src/query-controls/types.ts

@@ -31,6 +31,7 @@ export type CategorySelectProps = Pick<
 	categoriesList: Category[];
 	onChange: ( newCategory: string ) => void;
 	selectedCategoryId?: Category[ 'id' ];
+	__next40pxDefaultSize: boolean;
 };
 
 export type AuthorSelectProps = Pick<
@@ -40,6 +41,7 @@ export type AuthorSelectProps = Pick<
 	authorList?: Author[];
 	onChange: ( newAuthor: string ) => void;
 	selectedAuthorId?: Author[ 'id' ];
+	__next40pxDefaultSize: boolean;
 };
 
 type Order = 'asc' | 'desc';
@@ -101,6 +103,13 @@ type BaseQueryControlsProps = {
 	 * The selected author ID.
 	 */
 	selectedAuthorId?: AuthorSelectProps[ 'selectedAuthorId' ];
+	/**
+	 * Start opting into the larger default height that will become the
+	 * default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 };
 
 export type QueryControlsWithSingleCategorySelectionProps =

package/src/search-control/README.md

@@ -8,6 +8,8 @@ SearchControl components let users display a search control.
 1. [Development guidelines](#development-guidelines)
 2. [Related components](#related-components)
 
+Check out the [Storybook page](https://wordpress.github.io/gutenberg/?path=/docs/components-searchcontrol--docs) for a visual exploration of this component.
+
 ## Development guidelines
 
 ### Usage

package/src/slot-fill/README.md

@@ -68,7 +68,7 @@ Both `Slot` and `Fill` accept a `name` string prop, where a `Slot` with a given
 -   By default, events will bubble to their parents on the DOM hierarchy (native event bubbling)
 -   If `bubblesVirtually` is set to true, events will bubble to their virtual parent in the React elements hierarchy instead.
 
-`Slot` with `bubblesVirtually` set to true also accept an optional `className` to add to the slot container.
+`Slot` with `bubblesVirtually` set to true also accept optional `className` and `style` props to add to the slot container.
 
 `Slot` **without** `bubblesVirtually` accepts an optional `children` function prop, which takes `fills` as a param. It allows you to perform additional processing and wrap `fills` conditionally.
 

package/src/slot-fill/types.ts

@@ -36,15 +36,21 @@ export type SlotComponentProps =
 
 			/**
 			 * A function that returns nodes to be rendered.
-			 * Not supported when `bubblesVirtually` is true.
+			 * Supported only when `bubblesVirtually` is `false`.
 			 */
 			children?: never;
 
 			/**
-			 * className.
-			 * Not supported when `bubblesVirtually` is true.
+			 * Additional className for the `Slot` component.
+			 * Supported only when `bubblesVirtually` is `true`.
 			 */
 			className?: string;
+
+			/**
+			 * Additional styles for the `Slot` component.
+			 * Supported only when `bubblesVirtually` is `true`.
+			 */
+			style?: React.CSSProperties;
 	  } )
 	| ( SlotPropBase & {
 			/**
@@ -56,15 +62,21 @@ export type SlotComponentProps =
 
 			/**
 			 * A function that returns nodes to be rendered.
-			 * Not supported when `bubblesVirtually` is true.
+			 * Supported only when `bubblesVirtually` is `false`.
 			 */
 			children?: ( fills: ReactNode ) => ReactNode;
 
 			/**
-			 * className.
-			 * Not supported when `bubblesVirtually` is false.
+			 * Additional className for the `Slot` component.
+			 * Supported only when `bubblesVirtually` is `true`.
 			 */
 			className?: never;
+
+			/**
+			 * Additional styles for the `Slot` component.
+			 * Supported only when `bubblesVirtually` is `true`.
+			 */
+			style?: never;
 	  } );
 
 export type FillComponentProps = {