@wordpress/components 25.13.0 → 25.14.0

package/src/font-size-picker/index.tsx

@@ -45,6 +45,7 @@ const UnforwardedFontSizePicker = (
 	const {
 		/** Start opting into the new margin-free styles that will become the default in a future version. */
 		__nextHasNoMarginBottom = false,
+		__next40pxDefaultSize = false,
 		fallbackFontSize,
 		fontSizes = [],
 		disableCustomFontSizes = false,
@@ -165,6 +166,7 @@ const UnforwardedFontSizePicker = (
 					shouldUseSelectControl &&
 					! showCustomValueControl && (
 						<FontSizePickerSelect
+							__next40pxDefaultSize={ __next40pxDefaultSize }
 							fontSizes={ fontSizes }
 							value={ value }
 							disableCustomFontSizes={ disableCustomFontSizes }
@@ -194,6 +196,7 @@ const UnforwardedFontSizePicker = (
 						fontSizes={ fontSizes }
 						value={ value }
 						__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+						__next40pxDefaultSize={ __next40pxDefaultSize }
 						size={ size }
 						onChange={ ( newValue ) => {
 							if ( newValue === undefined ) {
@@ -214,6 +217,7 @@ const UnforwardedFontSizePicker = (
 					<Flex className="components-font-size-picker__custom-size-control">
 						<FlexItem isBlock>
 							<UnitControl
+								__next40pxDefaultSize={ __next40pxDefaultSize }
 								label={ __( 'Custom' ) }
 								labelPosition="top"
 								hideLabelFromVision
@@ -241,6 +245,9 @@ const UnforwardedFontSizePicker = (
 										__nextHasNoMarginBottom={
 											__nextHasNoMarginBottom
 										}
+										__next40pxDefaultSize={
+											__next40pxDefaultSize
+										}
 										className="components-font-size-picker__custom-input"
 										label={ __( 'Custom Size' ) }
 										hideLabelFromVision
@@ -276,9 +283,10 @@ const UnforwardedFontSizePicker = (
 									variant="secondary"
 									__next40pxDefaultSize
 									size={
-										size !== '__unstable-large'
-											? 'small'
-											: 'default'
+										size === '__unstable-large' ||
+										props.__next40pxDefaultSize
+											? 'default'
+											: 'small'
 									}
 								>
 									{ __( 'Reset' ) }

package/src/font-size-picker/types.ts

@@ -57,6 +57,12 @@ export type FontSizePickerProps = {
 	 * @default false
 	 */
 	__nextHasNoMarginBottom?: boolean;
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 	/**
 	 * Size of the control.
 	 *
@@ -93,6 +99,7 @@ export type FontSizePickerSelectProps = Pick<
 	>;
 	onChange: NonNullable< FontSizePickerProps[ 'onChange' ] >;
 	onSelectCustom: () => void;
+	__next40pxDefaultSize: boolean;
 };
 
 export type FontSizePickerSelectOption = {
@@ -104,7 +111,7 @@ export type FontSizePickerSelectOption = {
 
 export type FontSizePickerToggleGroupProps = Pick<
 	FontSizePickerProps,
-	'value' | 'size' | '__nextHasNoMarginBottom'
+	'value' | 'size' | '__nextHasNoMarginBottom' | '__next40pxDefaultSize'
 > & {
 	fontSizes: NonNullable< FontSizePickerProps[ 'fontSizes' ] >;
 	onChange: NonNullable< FontSizePickerProps[ 'onChange' ] >;

package/src/form-toggle/style.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 $toggle-width: 36px;
 $toggle-height: 18px;
 $toggle-border-width: 1px;
@@ -20,7 +22,7 @@ $transition-duration: 0.2s;
 		border: $toggle-border-width solid $gray-900;
 		width: $toggle-width;
 		height: $toggle-height;
-		border-radius: $toggle-height * 0.5;
+		border-radius: math.div($toggle-height, 2);
 		transition:
 			$transition-duration background-color ease,
 			$transition-duration border-color ease;
@@ -59,7 +61,7 @@ $transition-duration: 0.2s;
 		background-color: $gray-900;
 
 		// Transparent border acts as a fill in Windows High Contrast Mode.
-		border: $thumb-size / 2 solid transparent;
+		border: math.div($thumb-size, 2) solid transparent;
 	}
 
 	// Checked state.

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/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/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/spinner/README.md

@@ -17,3 +17,5 @@ function Example() {
 The spinner component should:
 
 -   Signal to users that the processing of their request is underway and will soon complete.
+
+Check out the [Storybook page](https://wordpress.github.io/gutenberg/?path=/docs/components-spinner--docs) for a visual exploration of this component.

package/src/tabs/README.md

@@ -163,9 +163,9 @@ The children elements, which should be a series of `Tabs.TabPanel` components.
 
 ##### Props
 
-###### `id`: `string`
+###### `tabId`: `string`
 
-The id of the tab, which is prepended with the `Tabs` instance ID.
+A unique identifier for the tab, which is used to generate a unique id for the underlying element. The value of this prop should match with the value of the `tabId` prop on the corresponding `Tabs.TabPanel` component.
 
 - Required: Yes
 
@@ -198,9 +198,9 @@ The children elements, generally the content to display on the tabpanel.
 
 - Required: No
 
-###### `id`: `string`
+###### `tabId`: `string`
 
-The id of the tabpanel, which is combined with the `Tabs` instance ID and the suffix `-view`
+A unique identifier for the tabpanel, which is used to generate an instanced id for the underlying element. The value of this prop should match with the value of the `tabId` prop on the corresponding `Tabs.Tab` component.
 
 - Required: Yes
 

package/src/tabs/index.tsx

@@ -45,7 +45,7 @@ function Tabs( {
 	const isControlled = selectedTabId !== undefined;
 
 	const { items, selectedId } = store.useState();
-	const { setSelectedId } = store;
+	const { setSelectedId, move } = store;
 
 	// Keep track of whether tabs have been populated. This is used to prevent
 	// certain effects from firing too early while tab data and relevant
@@ -154,6 +154,27 @@ function Tabs( {
 		setSelectedId,
 	] );
 
+	// In controlled mode, make sure browser focus follows the selected tab if
+	// the selection is changed while a tab is already being focused.
+	useLayoutEffect( () => {
+		if ( ! isControlled || ! selectOnMove ) {
+			return;
+		}
+		const currentItem = items.find( ( item ) => item.id === selectedId );
+		const activeElement = currentItem?.element?.ownerDocument.activeElement;
+		const tabsHasFocus = items.some( ( item ) => {
+			return activeElement && activeElement === item.element;
+		} );
+
+		if (
+			activeElement &&
+			tabsHasFocus &&
+			selectedId !== activeElement.id
+		) {
+			move( selectedId );
+		}
+	}, [ isControlled, items, move, selectOnMove, selectedId ] );
+
 	const contextValue = useMemo(
 		() => ( {
 			store,