@wordpress/components 25.11.1-next.f8d8eceb.0 → 25.13.0

package/src/toggle-group-control/toggle-group-control/styles.ts

@@ -14,7 +14,11 @@ export const toggleGroupControl = ( {
 	isBlock,
 	isDeselectable,
 	size,
-}: Pick< ToggleGroupControlProps, 'isBlock' | 'isDeselectable' > & {
+	__next40pxDefaultSize,
+}: Pick<
+	ToggleGroupControlProps,
+	'isBlock' | 'isDeselectable' | '__next40pxDefaultSize'
+> & {
 	size: NonNullable< ToggleGroupControlProps[ 'size' ] >;
 } ) => css`
 	background: ${ COLORS.ui.background };
@@ -25,7 +29,7 @@ export const toggleGroupControl = ( {
 	padding: 2px;
 	position: relative;
 
-	${ toggleGroupControlSize( size ) }
+	${ toggleGroupControlSize( size, __next40pxDefaultSize ) }
 	${ ! isDeselectable && enclosingBorders( isBlock ) }
 `;
 
@@ -53,13 +57,18 @@ const enclosingBorders = ( isBlock: ToggleGroupControlProps[ 'isBlock' ] ) => {
 };
 
 export const toggleGroupControlSize = (
-	size: NonNullable< ToggleGroupControlProps[ 'size' ] >
+	size: NonNullable< ToggleGroupControlProps[ 'size' ] >,
+	__next40pxDefaultSize: ToggleGroupControlProps[ '__next40pxDefaultSize' ]
 ) => {
 	const heights = {
-		default: '36px',
+		default: '40px',
 		'__unstable-large': '40px',
 	};
 
+	if ( ! __next40pxDefaultSize ) {
+		heights.default = '36px';
+	}
+
 	return css`
 		min-height: ${ heights[ size ] };
 	`;

package/src/toggle-group-control/types.ts

@@ -122,6 +122,12 @@ export type ToggleGroupControlProps = Pick<
 	 * @default 'default'
 	 */
 	size?: 'default' | '__unstable-large';
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 };
 
 export type ToggleGroupControlContextProps = {

package/src/toolbar/toolbar-button/style.scss

@@ -17,11 +17,6 @@
 		bottom: 10px;
 	}
 
-	// Hide focus rectangle on click.
-	&:active::before {
-		display: none;
-	}
-
 	&:not(:disabled).is-pressed[data-subscript]::after {
 		color: $white;
 	}

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

@@ -2,7 +2,12 @@
  * WordPress dependencies
  */
 import { usePrevious } from '@wordpress/compose';
-import { useCallback, useEffect, useMemo } from '@wordpress/element';
+import {
+	useCallback,
+	useEffect,
+	useLayoutEffect,
+	useMemo,
+} from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -59,7 +64,11 @@ export function useToolsPanelItem(
 
 	// Registering the panel item allows the panel to include it in its
 	// automatically generated menu and determine its initial checked status.
-	useEffect( () => {
+	//
+	// This is performed in a layout effect to ensure that the panel item
+	// is registered before it is rendered preventing a rendering glitch.
+	// See: https://github.com/WordPress/gutenberg/issues/56470
+	useLayoutEffect( () => {
 		if ( hasMatchingPanel && previousPanelId !== null ) {
 			registerPanelItem( {
 				hasValue: hasValueCallback,