npm - @wordpress/components - Versions diffs - 32.2.1-next.v.202602191100.0 → 32.2.1 - Mend

@wordpress/components 32.2.1-next.v.202602191100.0 → 32.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (337) hide show

package/src/sandbox/index.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/select-control/styles/select-control-styles.ts CHANGED Viewed

@@ -162,6 +162,7 @@ export const Select = styled.select< SelectProps >`
 		cursor: inherit;
 		display: block;
 		font-family: inherit;
+		line-height: 1.3; // Override forms.css styles, large enough value to prevent descender clipping without affecting height
 		margin: 0;
 		width: 100%;
 		max-width: none;

package/src/snackbar/list.tsx CHANGED Viewed

@@ -86,7 +86,12 @@ export function SnackbarList( {
 					return (
 						<motion.div
-							layout={ ! isReducedMotion } // See https://www.framer.com/docs/animation/#layout-animations
+							layout={ isReducedMotion ? false : 'position' } // See https://www.framer.com/docs/animation/#layout-animations
+							// Ensures a stable full-width bounding box so that
+							// `layout="position"` only ever detects vertical
+							// shifts, preventing horizontal animation when
+							// notice text changes in place.
+							style={ { width: '100%' } }
 							initial="init"
 							animate="open"
 							exit="exit"

package/src/style.scss CHANGED Viewed

@@ -1,8 +1,6 @@
 @use "@wordpress/base-styles/mixins" as *;
 @use "./animate/style.scss" as *;
 @use "./autocomplete/style.scss" as *;
-@use "./avatar/styles.scss" as *;
-@use "./avatar-group/styles.scss" as *;
 @use "./badge/styles.scss" as *;
 @use "./button-group/style.scss" as *;
 @use "./button/style.scss" as *;

package/src/toggle-group-control/test/__snapshots__/index.tsx.snap CHANGED Viewed

@@ -137,7 +137,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   user-select: none;
   width: 100%;
   z-index: 2;
-  color: var(--wp-components-color-foreground, #1e1e1e);
   height: 38px;
   aspect-ratio: 1;
   padding-left: 0;
@@ -157,12 +156,13 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   border: 0;
 }
-.emotion-12[disabled] {
+.emotion-12[disabled],
+.emotion-12[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
-.emotion-12:hover {
+.emotion-12:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, #1e1e1e);
 }
@@ -211,7 +211,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   user-select: none;
   width: 100%;
   z-index: 2;
-  color: var(--wp-components-color-foreground, #1e1e1e);
   height: 38px;
   aspect-ratio: 1;
   padding-left: 0;
@@ -229,12 +228,13 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   border: 0;
 }
-.emotion-17[disabled] {
+.emotion-17[disabled],
+.emotion-17[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
-.emotion-17:hover {
+.emotion-17:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, #1e1e1e);
 }
@@ -491,12 +491,13 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   border: 0;
 }
-.emotion-12[disabled] {
+.emotion-12[disabled],
+.emotion-12[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
-.emotion-12:hover {
+.emotion-12:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, #1e1e1e);
 }
@@ -726,7 +727,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   user-select: none;
   width: 100%;
   z-index: 2;
-  color: var(--wp-components-color-foreground, #1e1e1e);
   height: 38px;
   aspect-ratio: 1;
   padding-left: 0;
@@ -746,12 +746,13 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   border: 0;
 }
-.emotion-12[disabled] {
+.emotion-12[disabled],
+.emotion-12[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
-.emotion-12:hover {
+.emotion-12:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, #1e1e1e);
 }
@@ -800,7 +801,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   user-select: none;
   width: 100%;
   z-index: 2;
-  color: var(--wp-components-color-foreground, #1e1e1e);
   height: 38px;
   aspect-ratio: 1;
   padding-left: 0;
@@ -818,12 +818,13 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   border: 0;
 }
-.emotion-17[disabled] {
+.emotion-17[disabled],
+.emotion-17[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
-.emotion-17:hover {
+.emotion-17:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, #1e1e1e);
 }
@@ -1074,12 +1075,13 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   border: 0;
 }
-.emotion-12[disabled] {
+.emotion-12[disabled],
+.emotion-12[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
-.emotion-12:hover {
+.emotion-12:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, #1e1e1e);
 }

package/src/toggle-group-control/toggle-group-control-option-base/styles.ts CHANGED Viewed

@@ -63,13 +63,14 @@ export const buttonView = ( {
 		border: 0;
 	}
-	&[disabled] {
+	&[disabled],
+	&[aria-disabled='true'] {
 		opacity: 0.4;
 		cursor: default;
 	}
-	&:hover {
-		color: ${ COLORS.theme.gray[ 900 ] };
+	&:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
+		color: ${ COLORS.theme.foreground };
 	}
 	${ isDeselectable && deselectable }
@@ -83,8 +84,6 @@ const pressed = css`
 `;
 const deselectable = css`
-	color: ${ COLORS.theme.foreground };
 	&:focus {
 		outline: ${ CONFIG.borderWidthFocus } solid ${ COLORS.ui.borderFocus };
 		outline-offset: 2px;
@@ -112,7 +111,6 @@ const isIconStyles = ( {
 	};
 	return css`
-		color: ${ COLORS.theme.foreground };
 		height: ${ iconButtonSizes[ size ] };
 		aspect-ratio: 1;
 		padding-left: 0;

package/src/validated-form-controls/control-with-error.tsx CHANGED Viewed

@@ -6,6 +6,7 @@ import {
 	cloneElement,
 	forwardRef,
 	useEffect,
+	useId,
 	useState,
 } from '@wordpress/element';
@@ -238,22 +239,61 @@ function UnforwardedControlWithError< C extends React.ReactElement >(
 		}
 	};
-	const message = () => {
+	const messageId = useId();
+	const message = ( () => {
 		if ( errorMessage ) {
 			return (
-				<ValidityIndicator type="invalid" message={ errorMessage } />
+				<ValidityIndicator
+					id={ messageId }
+					type="invalid"
+					message={ errorMessage }
+				/>
 			);
 		}
 		if ( statusMessage?.type ) {
 			return (
 				<ValidityIndicator
+					id={ messageId }
 					type={ statusMessage.type }
 					message={ statusMessage.message }
 				/>
 			);
 		}
 		return null;
-	};
+	} )();
+	const visibleMessage = showMessage ? message : null;
+	// Imperatively manage `aria-describedby` on the validity target so we
+	// merge with any value the child control sets internally (e.g. from a
+	// `help` prop), rather than competing with it at the props level.
+	useEffect( () => {
+		const target = getValidityTarget();
+		if ( ! target ) {
+			return;
+		}
+		function setDescribedBy( el: Element, shouldAdd: boolean ) {
+			const ids = ( el.getAttribute( 'aria-describedby' ) ?? '' )
+				.split( ' ' )
+				.filter( ( id ) => id && id !== messageId );
+			if ( shouldAdd ) {
+				ids.push( messageId );
+			}
+			if ( ids.length ) {
+				el.setAttribute( 'aria-describedby', ids.join( ' ' ) );
+			} else {
+				el.removeAttribute( 'aria-describedby' );
+			}
+		}
+		setDescribedBy( target, !! visibleMessage );
+		return () => setDescribedBy( target, false );
+	}, [ visibleMessage, messageId, getValidityTarget ] );
 	return (
 		<div className={ className } ref={ forwardedRef } onBlur={ onBlur }>
@@ -265,7 +305,7 @@ function UnforwardedControlWithError< C extends React.ReactElement >(
 				),
 				required,
 			} ) }
-			<div aria-live="polite">{ showMessage && message() }</div>
+			<div aria-live="polite">{ visibleMessage }</div>
 		</div>
 	);
 }

package/src/validated-form-controls/test/checkbox-control.tsx ADDED Viewed

@@ -0,0 +1,49 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ValidatedCheckboxControl } from '../components';
+describe( 'ValidatedCheckboxControl', () => {
+	it( 'should preserve the help description', () => {
+		render(
+			<ValidatedCheckboxControl
+				label="Agree"
+				help="You must agree to continue."
+				onChange={ () => {} }
+			/>
+		);
+		expect(
+			screen.getByRole( 'checkbox', { name: 'Agree' } )
+		).toHaveAccessibleDescription( 'You must agree to continue.' );
+	} );
+	it( 'should append the validation error alongside the help description', async () => {
+		const user = userEvent.setup();
+		render(
+			<form>
+				<ValidatedCheckboxControl
+					label="Agree"
+					help="You must agree to continue."
+					onChange={ () => {} }
+					required
+				/>
+				<button type="submit">Submit</button>
+			</form>
+		);
+		const checkbox = screen.getByRole( 'checkbox', {
+			name: /^Agree/,
+		} );
+		await user.click( screen.getByRole( 'button', { name: 'Submit' } ) );
+		await waitFor( () => {
+			expect( checkbox ).toHaveAccessibleDescription(
+				expect.stringContaining( 'Constraints not satisfied' )
+			);
+		} );
+		expect( checkbox ).toHaveAccessibleDescription(
+			expect.stringContaining( 'You must agree to continue.' )
+		);
+	} );
+} );