@wordpress/components 25.9.1 → 25.11.0

package/src/toolbar/toolbar/types.ts

@@ -12,4 +12,14 @@ export type ToolbarProps = {
 	 * An accessible label for the toolbar.
 	 */
 	label: string;
+	/**
+	 * Specifies the toolbar's style.
+	 *
+	 * Leave undefined for the default style. Or `'unstyled'` which
+	 * removes the border from the toolbar, but keeps the default
+	 * popover style.
+	 *
+	 * @default undefined
+	 */
+	variant?: 'unstyled' | undefined;
 };

package/src/tools-panel/tools-panel/README.md

@@ -191,5 +191,8 @@ A function to call when the `Reset all` menu option is selected. As an argument,
 Advises the `ToolsPanel` that all of its `ToolsPanelItem` children should render
 placeholder content (instead of `null`) when they are toggled off and hidden.
 
+Note that placeholder items won't apply the `className` that would be
+normally applied to a visible `ToolsPanelItem` via the `className` prop.
+
 - Required: No
 - Default: `false`

package/src/tools-panel/tools-panel-item/hook.ts

@@ -176,18 +176,16 @@ export function useToolsPanelItem(
 
 	const cx = useCx();
 	const classes = useMemo( () => {
-		const placeholderStyle =
-			shouldRenderPlaceholder &&
-			! isShown &&
-			styles.ToolsPanelItemPlaceholder;
+		const shouldApplyPlaceholderStyles =
+			shouldRenderPlaceholder && ! isShown;
 		const firstItemStyle =
 			firstDisplayedItem === label && __experimentalFirstVisibleItemClass;
 		const lastItemStyle =
 			lastDisplayedItem === label && __experimentalLastVisibleItemClass;
 		return cx(
 			styles.ToolsPanelItem,
-			placeholderStyle,
-			className,
+			shouldApplyPlaceholderStyles && styles.ToolsPanelItemPlaceholder,
+			! shouldApplyPlaceholderStyles && className,
 			firstItemStyle,
 			lastItemStyle
 		);

package/src/tools-panel/types.ts

@@ -50,6 +50,8 @@ export type ToolsPanelProps = {
 	/**
 	 * Advises the `ToolsPanel` that its child `ToolsPanelItem`s should render
 	 * placeholder content instead of null when they are toggled off and hidden.
+	 * Note that placeholder items won't apply the `className` that would be
+	 * normally applied to a visible `ToolsPanelItem` via the `className` prop.
 	 *
 	 * @default false
 	 */

package/src/tooltip/index.tsx

@@ -69,8 +69,6 @@ function Tooltip( props: TooltipProps ) {
 		timeout: delay,
 	} );
 
-	const isTooltipOpen = tooltipStore.useState( 'open' );
-
 	return (
 		<>
 			<Ariakit.TooltipAnchor
@@ -80,8 +78,9 @@ function Tooltip( props: TooltipProps ) {
 			>
 				{ isOnlyChild ? undefined : children }
 			</Ariakit.TooltipAnchor>
-			{ isOnlyChild && ( text || shortcut ) && isTooltipOpen && (
+			{ isOnlyChild && ( text || shortcut ) && (
 				<Ariakit.Tooltip
+					unmountOnHide
 					className="components-tooltip"
 					gutter={ 4 }
 					id={ describedById }

package/src/unit-control/utils.ts

@@ -102,6 +102,130 @@ const allUnits: Record< string, WPUnitControlUnit > = {
 		a11yLabel: __( 'Points (pt)' ),
 		step: 1,
 	},
+	svw: {
+		value: 'svw',
+		label: isWeb ? 'svw' : __( 'Small viewport width (svw)' ),
+		a11yLabel: __( 'Small viewport width (svw)' ),
+		step: 0.1,
+	},
+	svh: {
+		value: 'svh',
+		label: isWeb ? 'svh' : __( 'Small viewport height (svh)' ),
+		a11yLabel: __( 'Small viewport height (svh)' ),
+		step: 0.1,
+	},
+	svi: {
+		value: 'svi',
+		label: isWeb
+			? 'svi'
+			: __( 'Viewport smallest size in the inline direction (svi)' ),
+		a11yLabel: __( 'Small viewport width or height (svi)' ),
+		step: 0.1,
+	},
+	svb: {
+		value: 'svb',
+		label: isWeb
+			? 'svb'
+			: __( 'Viewport smallest size in the block direction (svb)' ),
+		a11yLabel: __( 'Small viewport width or height (svb)' ),
+		step: 0.1,
+	},
+	svmin: {
+		value: 'svmin',
+		label: isWeb
+			? 'svmin'
+			: __( 'Small viewport smallest dimension (svmin)' ),
+		a11yLabel: __( 'Small viewport smallest dimension (svmin)' ),
+		step: 0.1,
+	},
+	lvw: {
+		value: 'lvw',
+		label: isWeb ? 'lvw' : __( 'Large viewport width (lvw)' ),
+		a11yLabel: __( 'Large viewport width (lvw)' ),
+		step: 0.1,
+	},
+	lvh: {
+		value: 'lvh',
+		label: isWeb ? 'lvh' : __( 'Large viewport height (lvh)' ),
+		a11yLabel: __( 'Large viewport height (lvh)' ),
+		step: 0.1,
+	},
+	lvi: {
+		value: 'lvi',
+		label: isWeb ? 'lvi' : __( 'Large viewport width or height (lvi)' ),
+		a11yLabel: __( 'Large viewport width or height (lvi)' ),
+		step: 0.1,
+	},
+	lvb: {
+		value: 'lvb',
+		label: isWeb ? 'lvb' : __( 'Large viewport width or height (lvb)' ),
+		a11yLabel: __( 'Large viewport width or height (lvb)' ),
+		step: 0.1,
+	},
+	lvmin: {
+		value: 'lvmin',
+		label: isWeb
+			? 'lvmin'
+			: __( 'Large viewport smallest dimension (lvmin)' ),
+		a11yLabel: __( 'Large viewport smallest dimension (lvmin)' ),
+		step: 0.1,
+	},
+	dvw: {
+		value: 'dvw',
+		label: isWeb ? 'dvw' : __( 'Dynamic viewport width (dvw)' ),
+		a11yLabel: __( 'Dynamic viewport width (dvw)' ),
+		step: 0.1,
+	},
+	dvh: {
+		value: 'dvh',
+		label: isWeb ? 'dvh' : __( 'Dynamic viewport height (dvh)' ),
+		a11yLabel: __( 'Dynamic viewport height (dvh)' ),
+		step: 0.1,
+	},
+	dvi: {
+		value: 'dvi',
+		label: isWeb ? 'dvi' : __( 'Dynamic viewport width or height (dvi)' ),
+		a11yLabel: __( 'Dynamic viewport width or height (dvi)' ),
+		step: 0.1,
+	},
+	dvb: {
+		value: 'dvb',
+		label: isWeb ? 'dvb' : __( 'Dynamic viewport width or height (dvb)' ),
+		a11yLabel: __( 'Dynamic viewport width or height (dvb)' ),
+		step: 0.1,
+	},
+	dvmin: {
+		value: 'dvmin',
+		label: isWeb
+			? 'dvmin'
+			: __( 'Dynamic viewport smallest dimension (dvmin)' ),
+		a11yLabel: __( 'Dynamic viewport smallest dimension (dvmin)' ),
+		step: 0.1,
+	},
+	dvmax: {
+		value: 'dvmax',
+		label: isWeb
+			? 'dvmax'
+			: __( 'Dynamic viewport largest dimension (dvmax)' ),
+		a11yLabel: __( 'Dynamic viewport largest dimension (dvmax)' ),
+		step: 0.1,
+	},
+	svmax: {
+		value: 'svmax',
+		label: isWeb
+			? 'svmax'
+			: __( 'Small viewport largest dimension (svmax)' ),
+		a11yLabel: __( 'Small viewport largest dimension (svmax)' ),
+		step: 0.1,
+	},
+	lvmax: {
+		value: 'lvmax',
+		label: isWeb
+			? 'lvmax'
+			: __( 'Large viewport largest dimension (lvmax)' ),
+		a11yLabel: __( 'Large viewport largest dimension (lvmax)' ),
+		step: 0.1,
+	},
 };
 
 /**

package/src/utils/unit-values.ts

@@ -1,5 +1,5 @@
 const UNITED_VALUE_REGEX =
-	/^([\d.\-+]*)\s*(fr|cm|mm|Q|in|pc|pt|px|em|ex|ch|rem|lh|vw|vh|vmin|vmax|%|cap|ic|rlh|vi|vb|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?$/;
+	/^([\d.\-+]*)\s*(fr|cm|mm|Q|in|pc|pt|px|em|ex|ch|rem|lh|vw|vh|vmin|vmax|%|cap|ic|rlh|vi|vb|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx|svw|lvw|dvw|svh|lvh|dvh|svi|lvi|dvi|svb|lvb|dvb|svmin|lvmin|dvmin|svmax|lvmax|dvmax)?$/;
 
 /**
  * Parses a number and unit from a value.