@wordpress/components 32.5.0 → 32.6.0

package/src/h-stack/README.md

@@ -11,17 +11,14 @@ This feature is still experimental. “Experimental” means this is an early im
 `HStack` can render anything inside.
 
 ```jsx
-import {
-	__experimentalHStack as HStack,
-	__experimentalText as Text,
-} from '@wordpress/components';
+import { __experimentalHStack as HStack } from '@wordpress/components';
 
 function Example() {
 	return (
 		<HStack>
-			<Text>Code</Text>
-			<Text>is</Text>
-			<Text>Poetry</Text>
+			<span>Code</span>
+			<span>is</span>
+			<span>Poetry</span>
 		</HStack>
 	);
 }
@@ -87,17 +84,16 @@ When a `Spacer` is used within an `HStack`, the `Spacer` adaptively expands to t
 import {
 	__experimentalHStack as HStack,
 	__experimentalSpacer as Spacer,
-	__experimentalText as Text,
 } from '@wordpress/components';
 
 function Example() {
 	return (
 		<HStack>
-			<Text>Code</Text>
+			<span>Code</span>
 			<Spacer>
-				<Text>is</Text>
+				<span>is</span>
 			</Spacer>
-			<Text>Poetry</Text>
+			<span>Poetry</span>
 		</HStack>
 	);
 }
@@ -109,16 +105,15 @@ function Example() {
 import {
 	__experimentalHStack as HStack,
 	__experimentalSpacer as Spacer,
-	__experimentalText as Text,
 } from '@wordpress/components';
 
 function Example() {
 	return (
 		<HStack>
-			<Text>Code</Text>
+			<span>Code</span>
 			<Spacer />
-			<Text>is</Text>
-			<Text>Poetry</Text>
+			<span>is</span>
+			<span>Poetry</span>
 		</HStack>
 	);
 }

package/src/h-stack/stories/index.story.tsx

@@ -75,9 +75,9 @@ const meta: Meta< typeof HStack > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Will be superseded by `Stack` in `@wordpress/ui`, but continue using for now.',
+			notes: 'Use `Stack` from `@wordpress/ui` instead.',
 		},
 	},
 };

package/src/heading/stories/index.story.tsx

@@ -32,7 +32,7 @@ const meta: Meta< typeof Heading > = {
 		componentStatus: {
 			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Values are not aligned with the current design system. Use [typography tokens](?path=/docs/tokens-typography--page) from `@wordpress/base-styles` instead.',
+			notes: 'Use `Text` from `@wordpress/ui` instead, with the `render` prop set to the heading level element and the variant set to the visual heading size (e.g. `<Text render={ <h1 /> } variant="heading-2xl">`).',
 		},
 	},
 };

package/src/higher-order/with-focus-outside/index.native.js

@@ -12,26 +12,27 @@ import {
 } from '@wordpress/compose';
 
 export default createHigherOrderComponent(
-	( WrappedComponent ) => ( props ) => {
-		const [ handleFocusOutside, setHandleFocusOutside ] = useState();
-		const bindFocusOutsideHandler = useCallback(
-			( node ) =>
-				setHandleFocusOutside( () =>
-					node?.handleFocusOutside
-						? node.handleFocusOutside.bind( node )
-						: undefined
-				),
-			[]
-		);
+	( WrappedComponent ) =>
+		function WithFocusOutside( props ) {
+			const [ handleFocusOutside, setHandleFocusOutside ] = useState();
+			const bindFocusOutsideHandler = useCallback(
+				( node ) =>
+					setHandleFocusOutside( () =>
+						node?.handleFocusOutside
+							? node.handleFocusOutside.bind( node )
+							: undefined
+					),
+				[]
+			);
 
-		return (
-			<View { ...useFocusOutside( handleFocusOutside ) }>
-				<WrappedComponent
-					ref={ bindFocusOutsideHandler }
-					{ ...props }
-				/>
-			</View>
-		);
-	},
+			return (
+				<View { ...useFocusOutside( handleFocusOutside ) }>
+					<WrappedComponent
+						ref={ bindFocusOutsideHandler }
+						{ ...props }
+					/>
+				</View>
+			);
+		},
 	'withFocusOutside'
 );

package/src/icon/README.md

@@ -16,7 +16,7 @@ import { wordpress } from '@wordpress/icons';
 
 ### `icon`
 
- - Type: `IconType`
+ - Type: `IconType | null`
  - Required: No
  - Default: `null`
 

package/src/menu/README.md

@@ -19,7 +19,7 @@ component, and the `Menu.Popover` component.
 
 ### `as`
 
- - Type: `"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 516 more ... | ("view" & FunctionComponent<...>)`
+ - Type: `"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 517 more ...`
  - Required: No
 
 The HTML element or React component to render the component as.
@@ -57,7 +57,7 @@ override the `defaultOpen` prop.
 
 ### `onOpenChange`
 
- - Type: `(open: boolean) => void`
+ - Type: `((open: boolean) => void)`
  - Required: No
 
 A callback that gets called when the `open` state changes.

package/src/mobile/utils/get-px-from-css-unit.native.js

@@ -26,7 +26,7 @@ function parseUnit( cssUnit ) {
 function calculate( expression ) {
 	try {
 		return Function( `'use strict'; return (${ expression })` )();
-	} catch ( err ) {
+	} catch {
 		return null;
 	}
 }

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.native.js

@@ -172,7 +172,7 @@ const style = `
 
 const EMPTY_ARRAY = [];
 
-const Sandbox = forwardRef( function Sandbox(
+const Sandbox = forwardRef( function UnforwardedSandbox(
 	{
 		containerStyle,
 		customJS,
@@ -297,7 +297,7 @@ const Sandbox = forwardRef( function Sandbox(
 
 			try {
 				data = JSON.parse( data );
-			} catch ( e ) {
+			} catch {
 				return;
 			}
 

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 );
@@ -141,7 +303,7 @@ function SandBox( {
 	function isFrameAccessible() {
 		try {
 			return !! ref.current?.contentDocument?.body;
-		} catch ( e ) {
+		} catch {
 			return false;
 		}
 	}
@@ -232,7 +394,7 @@ function SandBox( {
 			if ( 'string' === typeof data ) {
 				try {
 					data = JSON.parse( data );
-				} catch ( e ) {}
+				} catch {}
 			}
 
 			// Update the state only if the message is formatted as we expect,
@@ -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' )
 		);
 	} );
 } );