@wordpress/components 25.16.0 → 26.0.0

package/src/toolbar/toolbar-button/README.md

@@ -1,6 +1,6 @@
 # ToolbarButton
 
-ToolbarButton can be used to add actions to a toolbar, usually inside a [Toolbar](/packages/components/src/toolbar/README.md) or [ToolbarGroup](/packages/components/src/toolbar-group/README.md) when used to create general interfaces. If you're using it to add controls to your custom block, you should consider using [BlockControls](/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md).
+ToolbarButton can be used to add actions to a toolbar, usually inside a [Toolbar](/packages/components/src/toolbar/README.md) or [ToolbarGroup](/packages/components/src/toolbar-group/README.md) when used to create general interfaces. If you're using it to add controls to your custom block, you should consider using [BlockControls](/docs/getting-started/fundamentals/block-in-the-editor.md).
 
 It has similar features to the [Button](/packages/components/src/button/README.md) component. Using `ToolbarButton` will ensure the correct styling for a button in a toolbar, and also that keyboard interactions in a toolbar are consistent with the [WAI-ARIA toolbar pattern](https://www.w3.org/TR/wai-aria-practices/#toolbar).
 
@@ -27,7 +27,7 @@ function MyToolbar() {
 
 ### Inside BlockControls
 
-If you're working on a custom block and you want to add controls to the block toolbar, you should use [BlockControls](/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md) instead. Optionally wrapping it with [ToolbarGroup](/packages/components/src/toolbar-group/README.md).
+If you're working on a custom block and you want to add controls to the block toolbar, you should use [BlockControls](/docs/getting-started/fundamentals/block-in-the-editor.md) instead. Optionally wrapping it with [ToolbarGroup](/packages/components/src/toolbar-group/README.md).
 
 ```jsx
 import { BlockControls } from '@wordpress/block-editor';

package/src/toolbar/toolbar-dropdown-menu/README.md

@@ -1,6 +1,6 @@
 # ToolbarDropdownMenu
 
-ToolbarDropdownMenu can be used to add actions to a toolbar, usually inside a [Toolbar](/packages/components/src/toolbar/README.md) or [ToolbarGroup](/packages/components/src/toolbar-group/README.md) when used to create general interfaces. If you're using it to add controls to your custom block, you should consider using [BlockControls](/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md).
+ToolbarDropdownMenu can be used to add actions to a toolbar, usually inside a [Toolbar](/packages/components/src/toolbar/README.md) or [ToolbarGroup](/packages/components/src/toolbar-group/README.md) when used to create general interfaces. If you're using it to add controls to your custom block, you should consider using [BlockControls](/docs/getting-started/fundamentals/block-in-the-editor.md).
 
 It has similar features to the [DropdownMenu](/packages/components/src/dropdown-menu/README.md) component. Using `ToolbarDropdownMenu` will ensure that keyboard interactions in a toolbar are consistent with the [WAI-ARIA toolbar pattern](https://www.w3.org/TR/wai-aria-practices/#toolbar).
 
@@ -54,7 +54,7 @@ function MyToolbar() {
 
 ### Inside BlockControls
 
-If you're working on a custom block and you want to add controls to the block toolbar, you should use [BlockControls](/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md) instead.
+If you're working on a custom block and you want to add controls to the block toolbar, you should use [BlockControls](/docs/getting-started/fundamentals/block-in-the-editor.md) instead.
 
 ```jsx
 import { BlockControls } from '@wordpress/block-editor';

package/src/toolbar/toolbar-item/README.md

@@ -1,6 +1,6 @@
 # ToolbarItem
 
-A ToolbarItem is a generic headless component that can be used to make any custom component a [Toolbar](/packages/components/src/toolbar/README.md) item. It should be inside a [Toolbar](/packages/components/src/toolbar/README.md) or [ToolbarGroup](/packages/components/src/toolbar-group/README.md) when used to create general interfaces. If you're using it to add controls to your custom block, you should consider using [BlockControls](/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md).
+A ToolbarItem is a generic headless component that can be used to make any custom component a [Toolbar](/packages/components/src/toolbar/README.md) item. It should be inside a [Toolbar](/packages/components/src/toolbar/README.md) or [ToolbarGroup](/packages/components/src/toolbar-group/README.md) when used to create general interfaces. If you're using it to add controls to your custom block, you should consider using [BlockControls](/docs/getting-started/fundamentals/block-in-the-editor.md).
 
 ## Usage
 
@@ -49,7 +49,7 @@ function MyToolbar() {
 
 ### Inside BlockControls
 
-If you're working on a custom block and you want to add controls to the block toolbar, you should use [BlockControls](/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md) instead. Optionally wrapping it with [ToolbarGroup](/packages/components/src/toolbar-group/README.md).
+If you're working on a custom block and you want to add controls to the block toolbar, you should use [BlockControls](/docs/getting-started/fundamentals/block-in-the-editor.md) instead. Optionally wrapping it with [ToolbarGroup](/packages/components/src/toolbar-group/README.md).
 
 ```jsx
 import { BlockControls } from '@wordpress/block-editor';

package/src/tree-select/index.tsx

@@ -81,11 +81,7 @@ export function TreeSelect( props: TreeSelectProps ) {
 		selectedId,
 		tree = [],
 		...restProps
-	} = useDeprecated36pxDefaultSizeProp(
-		props,
-		'wp.components.TreeSelect',
-		'6.4'
-	);
+	} = useDeprecated36pxDefaultSizeProp( props );
 
 	const options = useMemo( () => {
 		return [

package/src/unit-control/index.tsx

@@ -56,11 +56,7 @@ function UnforwardedUnitControl(
 		value: valueProp,
 		onFocus: onFocusProp,
 		...props
-	} = useDeprecated36pxDefaultSizeProp(
-		unitControlProps,
-		'wp.components.UnitControl',
-		'6.4'
-	);
+	} = useDeprecated36pxDefaultSizeProp( unitControlProps );
 
 	if ( 'unit' in unitControlProps ) {
 		deprecated( 'UnitControl unit prop', {

package/src/utils/colors-values.js

@@ -1,8 +1,6 @@
 /**
  * Internal dependencies
  */
-import { rgba } from './colors';
-
 const white = '#fff';
 
 // Matches the grays in @wordpress/base-styles
@@ -29,41 +27,65 @@ const ALERT = {
 	green: '#4ab866',
 };
 
-// Matches the Modern admin scheme in @wordpress/base-styles
-const ADMIN = {
-	theme: 'var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))',
-	themeDark10:
-		'var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))',
+// Should match packages/components/src/utils/theme-variables.scss
+const THEME = {
+	accent: `var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))`,
+	accentDarker10: `var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))`,
+	accentDarker20: `var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6))`,
+	/** Used when placing text on the accent color. */
+	accentInverted: `var(--wp-components-color-accent-inverted, ${ white })`,
+
+	background: `var(--wp-components-color-background, ${ white })`,
+
+	foreground: `var(--wp-components-color-foreground, ${ GRAY[ 900 ] })`,
+	/** Used when placing text on the foreground color. */
+	foregroundInverted: `var(--wp-components-color-foreground-inverted, ${ white })`,
+
+	gray: {
+		/** @deprecated Use `COLORS.theme.foreground` instead. */
+		900: `var(--wp-components-color-foreground, ${ GRAY[ 900 ] })`,
+		800: `var(--wp-components-color-gray-800, ${ GRAY[ 800 ] })`,
+		700: `var(--wp-components-color-gray-700, ${ GRAY[ 700 ] })`,
+		600: `var(--wp-components-color-gray-600, ${ GRAY[ 600 ] })`,
+		400: `var(--wp-components-color-gray-400, ${ GRAY[ 400 ] })`,
+		300: `var(--wp-components-color-gray-300, ${ GRAY[ 300 ] })`,
+		200: `var(--wp-components-color-gray-200, ${ GRAY[ 200 ] })`,
+		100: `var(--wp-components-color-gray-100, ${ GRAY[ 100 ] })`,
+	},
 };
 
 const UI = {
-	background: white,
-	backgroundDisabled: GRAY[ 100 ],
-	border: GRAY[ 600 ],
-	borderHover: GRAY[ 700 ],
-	borderFocus: ADMIN.theme,
-	borderDisabled: GRAY[ 400 ],
-	textDisabled: GRAY[ 600 ],
-	textDark: white,
+	background: THEME.background,
+	backgroundDisabled: THEME.gray[ 100 ],
+	border: THEME.gray[ 600 ],
+	borderHover: THEME.gray[ 700 ],
+	borderFocus: THEME.accent,
+	borderDisabled: THEME.gray[ 400 ],
+	textDisabled: THEME.gray[ 600 ],
 
 	// Matches @wordpress/base-styles
-	darkGrayPlaceholder: rgba( GRAY[ 900 ], 0.62 ),
-	lightGrayPlaceholder: rgba( white, 0.65 ),
-};
-
-const THEME = {
-	accent: ADMIN.theme,
-	accentDarker10: ADMIN.themeDark10,
+	darkGrayPlaceholder: `color-mix(in srgb, ${ THEME.foreground }, transparent 38%)`,
+	lightGrayPlaceholder: `color-mix(in srgb, ${ THEME.background }, transparent 35%)`,
 };
 
 export const COLORS = Object.freeze( {
 	/**
 	 * The main gray color object.
+	 *
+	 * @deprecated Use semantic aliases in `COLORS.ui` or theme-ready variables in `COLORS.theme.gray`.
 	 */
-	gray: GRAY,
+	gray: GRAY, // TODO: Stop exporting this when everything is migrated to `theme` or `ui`
 	white,
 	alert: ALERT,
+	/**
+	 * Theme-ready variables with fallbacks.
+	 *
+	 * Prefer semantic aliases in `COLORS.ui` when applicable.
+	 */
 	theme: THEME,
+	/**
+	 * Semantic aliases (prefer these over raw variables when applicable).
+	 */
 	ui: UI,
 } );
 

package/src/utils/hooks/use-update-effect.js

@@ -6,7 +6,7 @@ import { useRef, useEffect } from '@wordpress/element';
 /**
  * A `React.useEffect` that will not run on the first render.
  * Source:
- * https://github.com/reakit/reakit/blob/HEAD/packages/reakit-utils/src/useUpdateEffect.ts
+ * https://github.com/ariakit/ariakit/blob/reakit/packages/reakit-utils/src/useUpdateEffect.ts
  *
  * @param {import('react').EffectCallback} effect
  * @param {import('react').DependencyList} deps

package/src/utils/use-deprecated-props.ts

@@ -1,28 +1,11 @@
-/**
- * WordPress dependencies
- */
-import deprecated from '@wordpress/deprecated';
-
 export function useDeprecated36pxDefaultSizeProp<
 	P extends Record< string, any > & {
 		__next36pxDefaultSize?: boolean;
 		__next40pxDefaultSize?: boolean;
 	},
->(
-	props: P,
-	/** The component identifier in dot notation, e.g. `wp.components.ComponentName`. */
-	componentIdentifier: string,
-	/** Version in which the prop was deprecated. */
-	since: string = '6.3'
-) {
+>( props: P ) {
 	const { __next36pxDefaultSize, __next40pxDefaultSize, ...otherProps } =
 		props;
-	if ( typeof __next36pxDefaultSize !== 'undefined' ) {
-		deprecated( '`__next36pxDefaultSize` prop in ' + componentIdentifier, {
-			alternative: '`__next40pxDefaultSize`',
-			since,
-		} );
-	}
 
 	return {
 		...otherProps,