mirka · Mar 2, 2026 · Feb 27, 2026 · Feb 27, 2026 · Feb 27, 2026 · Feb 27, 2026
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Breaking Changes
+
+-   `InputLayout`: Remove the `type` prop from `InputLayout.Slot` ([#76011](https://github.com/WordPress/gutenberg/pull/76011)).
+
 ### New Features
 
 -   Add `Notice` primitive ([#75981](https://github.com/WordPress/gutenberg/pull/75981)).

@@ -1,9 +1,8 @@
 import clsx from 'clsx';
-import { forwardRef } from '@wordpress/element';
+import { Children, forwardRef } from '@wordpress/element';
 import resetStyles from '../../../utils/css/resets.module.css';
 import styles from './style.module.css';
 import type { InputLayoutProps } from './types';
-import { SlotContextProvider } from './context';
 
 /**
  * A low-level component that handles the visual layout of an input-like field,
@@ -36,13 +35,23 @@ export const InputLayout = forwardRef< HTMLDivElement, InputLayoutProps >(
 				) }
 				{ ...restProps }
 			>
-				<SlotContextProvider type="prefix">
-					{ prefix }
-				</SlotContextProvider>
+				{ Children.count( prefix ) > 0 && (
+					<div
+						className={ styles[ 'slot-wrapper' ] }
+						data-slot-type="prefix"
+					>
+						{ prefix }
+					</div>
+				) }
 				{ children }
-				<SlotContextProvider type="suffix">
-					{ suffix }
-				</SlotContextProvider>
+				{ Children.count( suffix ) > 0 && (
+					<div
+						className={ styles[ 'slot-wrapper' ] }
+						data-slot-type="suffix"
+					>
+						{ suffix }
+					</div>
+				) }
 			</div>
 		);
 	}

@@ -2,33 +2,19 @@ import clsx from 'clsx';
 import { forwardRef } from '@wordpress/element';
 import styles from './style.module.css';
 import type { InputLayoutSlotProps } from './types';
-import { useInputLayoutSlotContext } from './context';
 
 /**
  * A layout helper to add paddings in a prefix or suffix.
  */
 export const InputLayoutSlot = forwardRef<
 	HTMLDivElement,
 	InputLayoutSlotProps
->( function InputLayoutSlot(
-	{ type: typeProp, padding = 'default', ...restProps },
-	ref
-) {
-	const typeContext = useInputLayoutSlotContext();
-	const type = typeProp ?? typeContext;
-
-	if ( ! type ) {
-		throw new Error(
-			'InputLayoutSlot requires a `type` prop or must be used within an InputLayout prefix/suffix slot.'
-		);
-	}
-
+>( function InputLayoutSlot( { padding = 'default', ...restProps }, ref ) {
 	return (
 		<div
 			ref={ ref }
 			className={ clsx(
 				styles[ 'input-layout-slot' ],
-				styles[ `is-${ type }` ],
 				styles[ `is-padding-${ padding }` ]
 			) }
 			{ ...restProps }

@@ -56,6 +56,10 @@
 		}
 	}
 
+	.slot-wrapper {
+		display: contents;
+	}
+
 	.input-layout-slot {
 		display: flex;
 		align-items: center;
@@ -69,11 +73,11 @@
 				var(--wpds-dimension-padding-xs));
 		}
 
-		&.is-prefix {
+		[data-slot-type="prefix"] & {
 			padding-inline-start: var(--wp-ui-input-layout-prefix-padding-start, var(--wp-ui-input-layout-padding-inline));
 		}
 
-		&.is-suffix {
+		[data-slot-type="suffix"] & {
 			padding-inline-end: var(--wp-ui-input-layout-suffix-padding-end, var(--wp-ui-input-layout-padding-inline));
 		}
 	}

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { createRef } from '@wordpress/element';
 import { InputLayout } from '../index';
 import { InputLayoutSlot } from '../slot';
@@ -20,4 +20,37 @@ describe( 'InputLayout', () => {
 		expect( layoutRef.current ).toBeInstanceOf( HTMLDivElement );
 		expect( slotRef.current ).toBeInstanceOf( HTMLDivElement );
 	} );
+
+	// Testing the DOM contract that CSS selectors depend on.
+	it( 'wraps prefix and suffix with data-slot-type attributes', () => {
+		render(
+			<InputLayout
+				prefix={ <InputLayout.Slot>Prefix</InputLayout.Slot> }
+				suffix={ <InputLayout.Slot>Suffix</InputLayout.Slot> }
+			/>
+		);
+
+		/* eslint-disable testing-library/no-node-access */
+		const prefix = screen
+			.getByText( 'Prefix' )
+			.closest( '[data-slot-type]' );
+		expect( prefix ).toHaveAttribute( 'data-slot-type', 'prefix' );
+
+		const suffix = screen
+			.getByText( 'Suffix' )
+			.closest( '[data-slot-type]' );
+		expect( suffix ).toHaveAttribute( 'data-slot-type', 'suffix' );
+		/* eslint-enable testing-library/no-node-access */
+	} );
+
+	it( 'does not render slot wrappers when prefix/suffix are empty', () => {
+		render( <InputLayout data-testid="layout" /> );
+
+		const layout = screen.getByTestId( 'layout' );
+		/* eslint-disable testing-library/no-node-access */
+		expect(
+			layout.querySelector( '[data-slot-type]' )
+		).not.toBeInTheDocument();
+		/* eslint-enable testing-library/no-node-access */
+	} );
 } );
@@ -24,17 +24,8 @@ export interface InputLayoutProps
 	suffix?: React.ReactNode;
 }
 
-export type InputLayoutSlotType = 'prefix' | 'suffix';
-
 export interface InputLayoutSlotProps
-	extends Omit< React.HTMLAttributes< HTMLDivElement >, 'type' > {
-	/**
-	 * The type of the slot.
-	 *
-	 * When not provided, the type will be automatically inferred from the
-	 * `InputLayout` context if the slot is used within a `prefix` or `suffix`.
-	 */
-	type?: InputLayoutSlotType;
+	extends React.HTMLAttributes< HTMLDivElement > {
 	/**
 	 * The padding of the slot.
 	 *