@wordpress/components 32.5.2-next.v.202604091042.0 → 32.6.0

package/src/date-time/types.ts

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import type { MinutesInput } from './time/styles';
+import type { MinutesInput } from './time-picker/styles';
 
 export type TimePickerProps = {
 	/**

package/src/dropdown-menu/style.scss

@@ -16,7 +16,7 @@
 		width: 100%;
 		padding: 6px;
 		outline: none;
-		cursor: pointer;
+		cursor: var(--wpds-cursor-control);
 		white-space: nowrap;
 		font-weight: $font-weight-regular;
 

package/src/form-toggle/style.scss

@@ -104,7 +104,40 @@ $transition-duration: 0.2s;
 	// Disabled state:
 	&.is-disabled,
 	.components-disabled & {
-		opacity: 0.3;
+		.components-form-toggle__track {
+			background-color: $components-color-gray-100;
+			border-color: $components-color-gray-300;
+
+			@media ( forced-colors: active ) {
+				border-color: GrayText;
+			}
+		}
+
+		.components-form-toggle__thumb {
+			background-color: $components-color-gray-400;
+			box-shadow: none;
+
+			@media ( forced-colors: active ) {
+				border-color: GrayText;
+			}
+		}
+
+		&.is-checked .components-form-toggle__track {
+			background-color: $components-color-gray-400;
+			border-color: $components-color-gray-400;
+
+			@media ( forced-colors: active ) {
+				border-color: GrayText;
+
+				&::after {
+					border-top-color: GrayText;
+				}
+			}
+		}
+
+		&.is-checked .components-form-toggle__thumb {
+			background-color: $white;
+		}
 	}
 }
 
@@ -132,6 +165,6 @@ $transition-duration: 0.2s;
 	}
 
 	&:not(:disabled, [aria-disabled="true"]) {
-		cursor: pointer;
+		cursor: var(--wpds-cursor-control);
 	}
 }

package/src/form-token-field/style.scss

@@ -11,8 +11,9 @@
 	cursor: text;
 
 	&.is-disabled {
-		background: $gray-300;
-		border-color: $gray-300;
+		background: $components-color-gray-100;
+		border-color: $components-color-gray-400;
+		cursor: default;
 	}
 
 	&.is-active {
@@ -82,6 +83,14 @@
 		}
 	}
 
+	&.is-disabled {
+		.components-form-token-field__token-text,
+		.components-form-token-field__remove-token.components-button {
+			background: $components-color-gray-100;
+			color: $components-color-gray-600;
+		}
+	}
+
 	&.is-borderless {
 		position: relative;
 		padding: 0 24px 0 0;
@@ -198,6 +207,6 @@
 	}
 
 	&:not(.is-empty) {
-		cursor: pointer;
+		cursor: var(--wpds-cursor-control);
 	}
 }

package/src/modal/index.tsx

@@ -121,6 +121,7 @@ function UnforwardedModal(
 	const onRequestCloseRef =
 		useRef< ModalProps[ 'onRequestClose' ] >( undefined );
 	useEffect( () => {
+		// eslint-disable-next-line react-compiler/react-compiler -- false positive, see https://github.com/facebook/react/issues/29196
 		onRequestCloseRef.current = onRequestClose;
 	}, [ onRequestClose ] );
 

package/src/palette-edit/index.tsx

@@ -299,6 +299,7 @@ function PaletteEditListView< T extends PaletteElement >( {
 	// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.
 	const elementsReferenceRef = useRef< T[] >( undefined );
 	useEffect( () => {
+		// eslint-disable-next-line react-compiler/react-compiler -- false positive, see https://github.com/facebook/react/issues/29196
 		elementsReferenceRef.current = elements;
 	}, [ elements ] );
 

package/src/radio-control/index.tsx

@@ -67,6 +67,7 @@ export function RadioControl(
 		onChange,
 		onClick,
 		hideLabelFromVision,
+		disabled,
 		options = [],
 		id: preferredId,
 		...additionalProps
@@ -89,6 +90,7 @@ export function RadioControl(
 			id={ id }
 			role="radiogroup"
 			className={ clsx( className, 'components-radio-control' ) }
+			disabled={ disabled }
 			aria-describedby={ !! help ? generateHelpId( id ) : undefined }
 		>
 			{ hideLabelFromVision ? (

package/src/radio-control/style.scss

@@ -10,6 +10,7 @@
 
 	font-family: $default-font;
 	font-size: $default-font-size;
+
 }
 
 .components-radio-control__group-wrapper.has-help {
@@ -34,7 +35,10 @@
 	margin: 0;
 	padding: 0;
 	appearance: none;
-	cursor: pointer;
+
+	&:not(:disabled) {
+		cursor: var(--wpds-cursor-control);
+	}
 
 	&:focus {
 		@include button-style-outset__focus(var(--wp-admin-theme-color));
@@ -49,13 +53,28 @@
 			border-radius: $radius-round;
 		}
 	}
+
+	&:disabled {
+		background: $components-color-gray-100;
+		border: 1px solid $components-color-gray-300;
+		opacity: 1; // Override style from wp-admin forms.css.
+
+		&:checked::before {
+			border-color: $components-color-gray-400;
+			opacity: 1; // Override style from wp-admin forms.css.
+
+		}
+	}
 }
 
 .components-radio-control__label {
 	grid-column: 2;
 	grid-row: 1;
 
-	cursor: pointer;
+	.components-radio-control:not(:disabled) & {
+		cursor: var(--wpds-cursor-control);
+	}
+
 	line-height: $radio-input-size-sm;
 
 	@include break-small() {

package/src/radio-control/test/index.tsx

@@ -82,6 +82,16 @@ describe.each( [
 			).toBeVisible();
 		} );
 
+		it( 'should disable the radio group when `disabled` is true', () => {
+			render(
+				<Component { ...defaultProps } disabled onChange={ () => {} } />
+			);
+
+			expect(
+				screen.getByRole( 'radiogroup', { name: defaultProps.label } )
+			).toBeDisabled();
+		} );
+
 		it( 'should describe the radio group with the help text', () => {
 			const onChangeSpy = jest.fn();
 			render(

package/src/radio-control/types.ts

@@ -7,6 +7,12 @@ export type RadioControlProps = Pick<
 	BaseControlProps,
 	'label' | 'help' | 'hideLabelFromVision'
 > & {
+	/**
+	 * Whether the radio group should be disabled.
+	 *
+	 * @default false
+	 */
+	disabled?: boolean;
 	/**
 	 * A function that receives the value of the new option that is being
 	 * selected as input.

package/src/sandbox/index.tsx

@@ -6,6 +6,7 @@ import {
 	useRef,
 	useState,
 	useEffect,
+	useMemo,
 } from '@wordpress/element';
 import { useFocusableIframe, useMergeRefs } from '@wordpress/compose';
 
@@ -14,6 +15,8 @@ import { useFocusableIframe, useMergeRefs } from '@wordpress/compose';
  */
 import type { SandBoxProps } from './types';
 
+type SandBoxContentProps = Omit< SandBoxProps, 'allowSameOrigin' >;
+
 const observeAndResizeJS = function () {
 	const { MutationObserver } = window;
 
@@ -115,17 +118,176 @@ const style = `
 `;
 
 /**
- * This component provides an isolated environment for arbitrary HTML via iframes.
+ * Builds the full HTML document string for the sandbox iframe content.
+ */
+function buildSandBoxDocument( {
+	html,
+	title,
+	type,
+	styles,
+	scripts,
+}: {
+	html: string;
+	title: string;
+	type?: string;
+	styles: string[];
+	scripts: string[];
+} ): string {
+	const htmlDoc = (
+		<html lang={ document.documentElement.lang } className={ type }>
+			<head>
+				<title>{ title }</title>
+				<style dangerouslySetInnerHTML={ { __html: style } } />
+				{ styles.map( ( rules, i ) => (
+					<style
+						key={ i }
+						dangerouslySetInnerHTML={ { __html: rules } }
+					/>
+				) ) }
+			</head>
+			<body
+				data-resizable-iframe-connected="data-resizable-iframe-connected"
+				className={ type }
+			>
+				<div dangerouslySetInnerHTML={ { __html: html } } />
+				<script
+					type="text/javascript"
+					dangerouslySetInnerHTML={ {
+						__html: `(${ observeAndResizeJS.toString() })();`,
+					} }
+				/>
+				{ scripts.map( ( src ) => (
+					<script key={ src } src={ src } />
+				) ) }
+			</body>
+		</html>
+	);
+
+	return '<!DOCTYPE html>' + renderToString( htmlDoc );
+}
+
+/**
+ * Isolated sandbox that uses the `srcdoc` attribute to render content
+ * without `allow-same-origin`. This is the default for user-controlled
+ * content (e.g., the HTML block) where same-origin access would be a
+ * security risk.
  *
- * ```jsx
- * import { SandBox } from '@wordpress/components';
+ * Because `srcdoc` is a declarative attribute, the browser automatically
+ * re-renders the content when the iframe is moved in the DOM (e.g.,
+ * block reordering), so no `load` event listener is needed.
+ * The `message` listener is re-synced on every `load` so
+ * it follows the iframe if it's reparented into a different document.
+ */
+function IsolatedSandBox( {
+	html = '',
+	title = '',
+	type,
+	styles = [],
+	scripts = [],
+	onFocus,
+	tabIndex,
+}: SandBoxContentProps ) {
+	const ref = useRef< HTMLIFrameElement >( null );
+	const [ width, setWidth ] = useState( 0 );
+	const [ height, setHeight ] = useState( 0 );
+
+	const srcDoc = useMemo(
+		() => buildSandBoxDocument( { html, title, type, styles, scripts } ),
+		[ html, title, type, styles, scripts ]
+	);
+
+	useEffect( () => {
+		const iframe = ref.current;
+		if ( ! iframe ) {
+			return;
+		}
+
+		function checkMessageForResize( event: MessageEvent ) {
+			// Verify that the mounted element is the source of the message.
+			// iframe.contentWindow is accessible cross-origin as a
+			// WindowProxy reference, so this check still works without
+			// allow-same-origin.
+			if ( ! iframe || iframe.contentWindow !== event.source ) {
+				return;
+			}
+
+			// Attempt to parse the message data as JSON if passed as string.
+			let data = event.data || {};
+
+			if ( 'string' === typeof data ) {
+				try {
+					data = JSON.parse( data );
+				} catch {}
+			}
+
+			// Update the state only if the message is formatted as we expect,
+			// i.e. as an object with a 'resize' action.
+			if ( 'resize' !== data.action ) {
+				return;
+			}
+
+			setWidth( data.width );
+			setHeight( data.height );
+		}
+
+		let currentView: Window | null = null;
+		function syncListener() {
+			const view = iframe?.ownerDocument?.defaultView ?? null;
+			if ( view === currentView ) {
+				return;
+			}
+
+			currentView?.removeEventListener(
+				'message',
+				checkMessageForResize
+			);
+
+			currentView = view;
+			currentView?.addEventListener( 'message', checkMessageForResize );
+		}
+
+		syncListener();
+		iframe.addEventListener( 'load', syncListener );
+
+		return () => {
+			iframe.removeEventListener( 'load', syncListener );
+			currentView?.removeEventListener(
+				'message',
+				checkMessageForResize
+			);
+		};
+	}, [] );
+
+	return (
+		<iframe
+			ref={ useMergeRefs( [ ref, useFocusableIframe() ] ) }
+			title={ title }
+			tabIndex={ tabIndex }
+			className="components-sandbox"
+			sandbox="allow-scripts allow-presentation"
+			srcDoc={ srcDoc }
+			onFocus={ onFocus }
+			width={ Math.ceil( width ) }
+			height={ Math.ceil( height ) }
+		/>
+	);
+}
+
+/**
+ * Same-origin sandbox that writes to `contentDocument` directly. This
+ * preserves the parent page's URL as the iframe's document URL, which
+ * provides a valid Referer header for nested iframes (required by
+ * providers like YouTube).
  *
- * const MySandBox = () => (
- * 	<SandBox html="<p>Content</p>" title="SandBox" type="embed" />
- * );
- * ```
+ * Only used when `allowSameOrigin` is true — i.e., for server-fetched
+ * oEmbed previews that are not directly user-controlled.
+ *
+ * This implementation is intentionally kept close to the original
+ * pre-refactor code to preserve past bugfixes:
+ * - load listener for iframe re-initialization after DOM moves (#21916)
+ * - forceRerender guard to avoid unnecessary full rewrites (#20176)
  */
-function SandBox( {
+function SameOriginSandBox( {
 	html = '',
 	title = '',
 	type,
@@ -133,7 +295,7 @@ function SandBox( {
 	scripts = [],
 	onFocus,
 	tabIndex,
-}: SandBoxProps ) {
+}: SandBoxContentProps ) {
 	const ref = useRef< HTMLIFrameElement >( null );
 	const [ width, setWidth ] = useState( 0 );
 	const [ height, setHeight ] = useState( 0 );
@@ -292,4 +454,22 @@ function SandBox( {
 	);
 }
 
+/**
+ * This component provides an isolated environment for arbitrary HTML via iframes.
+ *
+ * ```jsx
+ * import { SandBox } from '@wordpress/components';
+ *
+ * const MySandBox = () => (
+ * 	<SandBox html="<p>Content</p>" title="SandBox" type="embed" />
+ * );
+ * ```
+ */
+function SandBox( { allowSameOrigin = false, ...contentProps }: SandBoxProps ) {
+	if ( allowSameOrigin ) {
+		return <SameOriginSandBox { ...contentProps } />;
+	}
+	return <IsolatedSandBox { ...contentProps } />;
+}
+
 export default SandBox;

package/src/sandbox/test/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { fireEvent, render, screen, within } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -16,10 +16,7 @@ import SandBox from '..';
 describe( 'SandBox', () => {
 	const TestWrapper = () => {
 		const [ html, setHtml ] = useState(
-			// MutationObserver implementation from JSDom does not work as intended
-			// with iframes so we need to ignore it for the time being.
-			'<script type="text/javascript">window.MutationObserver = null;</script>' +
-				'<iframe title="Mock Iframe" src="https://super.embed"></iframe>'
+			'<iframe title="Mock Iframe" src="https://super.embed"></iframe>'
 		);
 
 		const updateHtml = () => {
@@ -38,34 +35,78 @@ describe( 'SandBox', () => {
 		);
 	};
 
-	it( 'should rerender with new emdeded content if html prop changes', () => {
+	it( 'should not include allow-same-origin by default', () => {
+		render( <SandBox html="<p>Hello</p>" title="Test" /> );
+
+		const iframe = screen.getByTitle< HTMLIFrameElement >( 'Test' );
+
+		expect( iframe ).toHaveAttribute(
+			'sandbox',
+			'allow-scripts allow-presentation'
+		);
+		expect( iframe.getAttribute( 'sandbox' ) ).not.toContain(
+			'allow-same-origin'
+		);
+	} );
+
+	it( 'should set srcdoc with the provided html content', () => {
+		render( <SandBox html="<p>Hello</p>" title="Test Title" /> );
+
+		const iframe = screen.getByTitle< HTMLIFrameElement >( 'Test Title' );
+		const srcDoc = iframe.getAttribute( 'srcdoc' ) ?? '';
+
+		expect( srcDoc ).toContain( '<p>Hello</p>' );
+		expect( srcDoc ).toContain( '<title>Test Title</title>' );
+	} );
+
+	it( 'should include custom styles in srcdoc', () => {
+		render(
+			<SandBox
+				html="<p>Styled</p>"
+				title="Styled Test"
+				styles={ [ '.custom { color: red; }' ] }
+			/>
+		);
+
+		const iframe = screen.getByTitle< HTMLIFrameElement >( 'Styled Test' );
+		const srcDoc = iframe.getAttribute( 'srcdoc' ) ?? '';
+
+		expect( srcDoc ).toContain( '.custom { color: red; }' );
+	} );
+
+	it( 'should include script tags in srcdoc', () => {
+		render(
+			<SandBox
+				html="<p>Script</p>"
+				title="Script Test"
+				scripts={ [ 'https://example.com/embed.js' ] }
+			/>
+		);
+
+		const iframe = screen.getByTitle< HTMLIFrameElement >( 'Script Test' );
+		const srcDoc = iframe.getAttribute( 'srcdoc' ) ?? '';
+
+		expect( srcDoc ).toContain(
+			'<script src="https://example.com/embed.js">'
+		);
+	} );
+
+	it( 'should update srcdoc when html prop changes', () => {
 		render( <TestWrapper /> );
 
 		const iframe =
 			screen.getByTitle< HTMLIFrameElement >( 'SandBox Title' );
 
-		if ( ! iframe.contentWindow ) {
-			throw new Error();
-		}
-
-		let sandboxedIframe = within(
-			iframe.contentWindow.document.body
-		).getByTitle( 'Mock Iframe' );
-
-		expect( sandboxedIframe ).toHaveAttribute(
-			'src',
-			'https://super.embed'
+		expect( iframe ).toHaveAttribute(
+			'srcdoc',
+			expect.stringContaining( 'https://super.embed' )
 		);
 
 		fireEvent.click( screen.getByRole( 'button' ) );
 
-		sandboxedIframe = within(
-			iframe.contentWindow.document.body
-		).getByTitle( 'Mock Iframe' );
-
-		expect( sandboxedIframe ).toHaveAttribute(
-			'src',
-			'https://another.super.embed'
+		expect( iframe ).toHaveAttribute(
+			'srcdoc',
+			expect.stringContaining( 'https://another.super.embed' )
 		);
 	} );
 } );

package/src/sandbox/types.ts

@@ -1,4 +1,15 @@
 export type SandBoxProps = {
+	/**
+	 * Whether to include `allow-same-origin` in the iframe's sandbox
+	 * attribute. When true, nested iframes (such as third-party embeds)
+	 * can access their own origin's cookies and storage.
+	 *
+	 * Only enable this for content that is NOT directly user-controlled,
+	 * such as server-fetched oEmbed previews.
+	 *
+	 * @default false
+	 */
+	allowSameOrigin?: boolean;
 	/**
 	 * The HTML to render in the body of the iframe document.
 	 *

package/src/snackbar/style.scss

@@ -16,7 +16,7 @@
 	width: 100%;
 	max-width: var(--wpds-dimension-surface-width-lg);
 	box-sizing: border-box;
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 
 	// Re-enable pointer events, which are disabled by the
 	// .components-snackbar-list styles.
@@ -47,7 +47,7 @@
 
 	.components-snackbar__dismiss-button {
 		margin-left: $grid-unit-30;
-		cursor: pointer;
+		cursor: var(--wpds-cursor-control);
 	}
 }
 

package/src/tab-panel/style.scss

@@ -18,7 +18,7 @@
 	background: transparent;
 	border: none;
 	box-shadow: none;
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 	padding: 3px $grid-unit-20; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
 	margin-left: 0;
 	font-weight: $font-weight-regular;

package/src/textarea-control/stories/index.story.tsx

@@ -21,6 +21,9 @@ const meta: Meta< typeof TextareaControl > = {
 		onChange: { action: 'onChange' },
 		label: { control: { type: 'text' } },
 		help: { control: { type: 'text' } },
+		disabled: {
+			control: { type: 'boolean' },
+		},
 		value: { control: false },
 	},
 	parameters: {

package/src/textarea-control/styles/textarea-control-styles.ts

@@ -62,6 +62,12 @@ export const StyledTextarea = styled.textarea`
 		${ inputStyleFocus }
 	}
 
+	&:disabled {
+		background: ${ COLORS.ui.backgroundDisabled };
+		border-color: ${ COLORS.ui.borderDisabled };
+		color: ${ COLORS.ui.textDisabled };
+	}
+
 	// Use opacity to work in various editor styles.
 	&::-webkit-input-placeholder {
 		color: ${ COLORS.ui.darkGrayPlaceholder };

package/src/toggle-control/style.scss

@@ -5,7 +5,7 @@
 	line-height: form-toggle.$toggle-height;
 
 	&:not(.is-disabled) {
-		cursor: pointer;
+		cursor: var(--wpds-cursor-control);
 	}
 }
 

package/src/toggle-control/test/index.tsx

@@ -22,10 +22,16 @@ describe( 'ToggleControl', () => {
 
 		render( <ToggleControl label="My toggle" onChange={ onChange } /> );
 
-		screen.getByRole( 'checkbox' ).click();
+		screen
+			.getByRole( 'checkbox' )
+			// eslint-disable-next-line testing-library/no-node-access
+			.click();
 		expect( onChange ).toHaveBeenLastCalledWith( true );
 
-		screen.getByRole( 'checkbox' ).click();
+		screen
+			.getByRole( 'checkbox' )
+			// eslint-disable-next-line testing-library/no-node-access
+			.click();
 		expect( onChange ).toHaveBeenLastCalledWith( false );
 	} );