@wordpress/components 37.0.1-next.v.202607070741.0 → 38.0.0

package/src/number-control/index.tsx

@@ -26,8 +26,6 @@ import type { NumberControlProps } from './types';
 import { HStack } from '../h-stack';
 import { Spacer } from '../spacer';
 import { useCx } from '../utils';
-import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
-import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const noop = () => {};
 
@@ -55,16 +53,8 @@ function UnforwardedNumberControl(
 		size = 'default',
 		suffix,
 		onChange = noop,
-		__shouldNotWarnDeprecated36pxSize,
 		...restProps
-	} = useDeprecated36pxDefaultSizeProp< NumberControlProps >( props );
-
-	maybeWarnDeprecated36pxSize( {
-		componentName: 'NumberControl',
-		size,
-		__next40pxDefaultSize: restProps.__next40pxDefaultSize,
-		__shouldNotWarnDeprecated36pxSize,
-	} );
+	} = props;
 
 	if ( hideHTMLArrows ) {
 		deprecated( 'wp.components.NumberControl hideHTMLArrows prop ', {
@@ -239,7 +229,6 @@ function UnforwardedNumberControl(
 			value={ valueProp }
 			__unstableStateReducer={ numberControlStateReducer }
 			size={ size }
-			__shouldNotWarnDeprecated36pxSize
 			suffix={
 				spinControls === 'custom' ? (
 					<>

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

@@ -32,7 +32,7 @@ const meta: Meta< typeof NumberControl > = {
 		componentStatus: {
 			status: 'recommended',
 			whereUsed: 'global',
-			notes: 'Will be superseded by `InputControl` with `type="number"` in `@wordpress/ui`, but continue using for now.',
+			notes: 'Will be superseded by [`InputControl`](?path=/docs/design-system-components-form-inputcontrol--docs) with `type="number"` in `@wordpress/ui`, but continue using for now.',
 		},
 	},
 };
@@ -49,7 +49,6 @@ const Template: StoryFn< typeof NumberControl > = ( {
 	return (
 		<>
 			<NumberControl
-				__next40pxDefaultSize
 				{ ...props }
 				value={ value }
 				onChange={ ( v, extra ) => {
@@ -69,5 +68,4 @@ const Template: StoryFn< typeof NumberControl > = ( {
 export const Default = Template.bind( {} );
 Default.args = {
 	label: 'Value',
-	__next40pxDefaultSize: true,
 };

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

@@ -17,7 +17,7 @@ import type { NumberControlProps } from '../types';
 
 const NumberControl = (
 	props: React.ComponentProps< typeof _NumberControl >
-) => <_NumberControl __next40pxDefaultSize { ...props } />;
+) => <_NumberControl { ...props } />;
 
 function StatefulNumberControl( props: NumberControlProps ) {
 	const [ value, setValue ] = useState( props.value );

package/src/number-control/types.ts

@@ -91,11 +91,4 @@ export type NumberControlProps = Omit<
 	 * The value of the input.
 	 */
 	value?: number | string;
-	/**
-	 * Do not throw a warning for the deprecated 36px default size.
-	 * For internal components of other components that already throw the warning.
-	 *
-	 * @ignore
-	 */
-	__shouldNotWarnDeprecated36pxSize?: boolean;
 };

package/src/palette-edit/styles.ts

@@ -52,7 +52,7 @@ export const NameContainer = styled.div`
 export const PaletteHeading = styled( Heading )`
 	text-transform: uppercase;
 	line-height: ${ space( 6 ) };
-	font-weight: ${ CONFIG.fontWeightMedium };
+	font-weight: ${ CONFIG.fontWeightEmphasis };
 	&&& {
 		font-size: 11px;
 		margin-bottom: 0;

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

@@ -30,7 +30,7 @@ const meta: Meta< typeof Panel > = {
 		componentStatus: {
 			status: 'recommended',
 			whereUsed: 'editor',
-			notes: 'Intended for the block inspector sidebar. For collapsible sections elsewhere, use `CollapsibleCard` from `@wordpress/ui` instead.',
+			notes: 'Intended for the block inspector sidebar. For collapsible sections elsewhere, use [`CollapsibleCard`](?path=/docs/design-system-components-collapsiblecard--docs) from `@wordpress/ui` instead.',
 		},
 	},
 };
@@ -78,12 +78,12 @@ _PanelRow.args = {
 	children: (
 		<PanelBody title="My Profile">
 			<PanelRow>
-				<InputControl label="First name" __next40pxDefaultSize />
-				<InputControl label="Last name" __next40pxDefaultSize />
+				<InputControl label="First name" />
+				<InputControl label="Last name" />
 			</PanelRow>
 			<PanelRow>
 				<div style={ { flex: 1 } }>
-					<InputControl label="Email" __next40pxDefaultSize />
+					<InputControl label="Email" />
 				</div>
 			</PanelRow>
 		</PanelBody>

package/src/panel/style.scss

@@ -87,13 +87,10 @@
 .components-panel__body-toggle.components-button {
 	position: relative;
 	padding: $grid-unit-20 $grid-unit-60 $grid-unit-20 $grid-unit-20;
-	outline: none;
 	width: 100%;
-	font-weight: $font-weight-medium;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 	text-align: left;
 	color: $gray-900;
-	border: none;
-	box-shadow: none;
 
 	@media not (prefers-reduced-motion) {
 		transition: 0.1s background ease-in-out;
@@ -102,7 +99,7 @@
 	height: auto;
 
 	&:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+		outline-offset: calc(var(--wpds-border-width-focus) * -1);
 		border-radius: 0;
 	}
 

package/src/panel/test/__snapshots__/body.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PanelBody basic rendering should render an empty div with the matching className 1`] = `
 <div>

package/src/panel/test/__snapshots__/header.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PanelHeader basic rendering should render PanelHeader with empty div inside 1`] = `
 <div>

package/src/panel/test/__snapshots__/index.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Panel basic rendering should render an additional className 1`] = `
 <div>

package/src/panel/test/__snapshots__/row.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PanelRow should render with the custom class name 1`] = `
 <div>

package/src/placeholder/style.scss

@@ -42,7 +42,7 @@
 }
 
 .components-placeholder__label {
-	font-weight: 600;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 	align-items: center;
 	display: flex;
 

package/src/private-apis.ts

@@ -9,7 +9,6 @@ import { useDrag } from '@use-gesture/react';
 import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';
 import { Menu } from './menu';
 import { ComponentsContext } from './context/context-system-provider';
-import Theme from './theme';
 import { Tabs } from './tabs';
 import { kebabCase, normalizeTextString } from './utils/strings';
 import { withIgnoreIMEEvents } from './utils/with-ignore-ime-events';
@@ -24,19 +23,21 @@ import {
 	ValidatedNumberControl,
 	ValidatedSelectControl,
 	ValidatedRadioControl,
+	ValidatedContentEditableControl,
 	ValidatedTextControl,
 	ValidatedTextareaControl,
 	ValidatedToggleControl,
 	ValidatedToggleGroupControl,
 } from './validated-form-controls';
 import { ValidatedFormTokenField } from './validated-form-controls/components/form-token-field';
+import ContentEditableControl from './content-editable-control';
 
 export const privateApis = {};
 lock( privateApis, {
+	ContentEditableControl,
 	__experimentalPopoverLegacyPositionToPlacement,
 	ComponentsContext,
 	Tabs,
-	Theme,
 	Menu,
 	kebabCase,
 	withIgnoreIMEEvents,
@@ -52,6 +53,7 @@ lock( privateApis, {
 	ValidatedNumberControl,
 	ValidatedSelectControl,
 	ValidatedRadioControl,
+	ValidatedContentEditableControl,
 	ValidatedTextControl,
 	ValidatedTextareaControl,
 	ValidatedToggleControl,

package/src/range-control/index.tsx

@@ -68,7 +68,6 @@ function UnforwardedRangeControl(
 		// Prevent passing legacy props to internal component.
 		__nextHasNoMarginBottom: _,
 		__next40pxDefaultSize: _next40pxDefaultSize,
-		__shouldNotWarnDeprecated36pxSize: _shouldNotWarnDeprecated36pxSize,
 		afterIcon,
 		allowReset = false,
 		beforeIcon,
@@ -326,7 +325,6 @@ function UnforwardedRangeControl(
 						onChange={ handleOnChange }
 						shiftStep={ shiftStep }
 						__unstableInputWidth={ space( 20 ) }
-						__next40pxDefaultSize
 						step={ step }
 						// @ts-expect-error TODO: Investigate if the `null` value is necessary
 						value={ inputSliderValue }

package/src/range-control/types.ts

@@ -13,6 +13,7 @@ import type {
  */
 import type { BaseControlProps } from '../base-control/types';
 import type { IconType } from '../icon';
+import type { NumberControlProps } from '../number-control/types';
 
 export type NumericProps = {
 	/**
@@ -78,6 +79,7 @@ export type RangeControlProps = Pick<
 	BaseControlProps,
 	'__nextHasNoMarginBottom' | 'hideLabelFromVision' | 'help'
 > &
+	Pick< NumberControlProps, '__next40pxDefaultSize' > &
 	MarksProps & {
 		/**
 		 * If this property is added, an Icon component will be rendered
@@ -199,13 +201,6 @@ export type RangeControlProps = Pick<
 		 * @default 10
 		 */
 		shiftStep?: number;
-		/**
-		 * Start opting into the larger default height that will become the default size in a future version.
-		 *
-		 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
-		 * @ignore
-		 */
-		__next40pxDefaultSize?: boolean;
 		/**
 		 * Forcing the Tooltip UI to show or hide. This is overridden to `false`
 		 * when `step` is set to the special string value `any`.
@@ -230,14 +225,6 @@ export type RangeControlProps = Pick<
 		 * @default true
 		 */
 		withInputField?: boolean;
-		/**
-		 * Do not throw a warning for the deprecated 36px default size.
-		 * For internal components of other components that already throw the warning.
-		 *
-		 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
-		 * @ignore
-		 */
-		__shouldNotWarnDeprecated36pxSize?: boolean;
 	};
 
 export type RailProps = MarksProps & {

package/src/sandbox/index.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -37,11 +42,17 @@ export const VIEWPORT_UNIT_VALUE_REGEX =
 const observeAndResizeJS = function () {
 	const { MutationObserver } = window;
 
-	if ( ! MutationObserver || ! document.body || ! window.parent ) {
+	if ( ! MutationObserver || ! window.parent ) {
 		return;
 	}
 
 	function sendResize() {
+		// This runs in the document <head>, and as a `load`/`resize` listener,
+		// so the body may not exist yet. Bail rather than throw on a null body.
+		if ( ! document.body ) {
+			return;
+		}
+
 		const clientBoundingRect = document.body.getBoundingClientRect();
 
 		window.parent.postMessage(
@@ -54,60 +65,88 @@ const observeAndResizeJS = function () {
 		);
 	}
 
-	const observer = new MutationObserver( sendResize );
-	observer.observe( document.body, {
-		attributes: true,
-		attributeOldValue: false,
-		characterData: true,
-		characterDataOldValue: false,
-		childList: true,
-		subtree: true,
-	} );
+	// Runs the body-dependent setup once the document body is available. Reads
+	// `document.body` into a local so the null check narrows it for the rest of
+	// the function: this runs in <head> and via DOMContentLoaded, so the body
+	// isn't guaranteed to exist yet.
+	function connect() {
+		const { body } = document;
+		if ( ! body ) {
+			return;
+		}
 
-	window.addEventListener( 'load', sendResize, true );
+		const observer = new MutationObserver( sendResize );
+		observer.observe( body, {
+			attributes: true,
+			attributeOldValue: false,
+			characterData: true,
+			characterDataOldValue: false,
+			childList: true,
+			subtree: true,
+		} );
+
+		// Hack: Remove viewport unit styles, as these are relative
+		// the iframe root and interfere with our mechanism for
+		// determining the unconstrained page bounds.
+		function removeViewportStyles( ruleOrNode: ElementCSSInlineStyle ) {
+			if ( ruleOrNode.style ) {
+				(
+					[ 'width', 'height', 'minHeight', 'maxHeight' ] as const
+				 ).forEach( function ( style ) {
+					if (
+						/^\d*\.?\d+(?:vw|vh|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)$/.test(
+							ruleOrNode.style[ style ]
+						)
+					) {
+						ruleOrNode.style[ style ] = '';
+					}
+				} );
+			}
+		}
 
-	// Hack: Remove viewport unit styles, as these are relative
-	// the iframe root and interfere with our mechanism for
-	// determining the unconstrained page bounds.
-	function removeViewportStyles( ruleOrNode: ElementCSSInlineStyle ) {
-		if ( ruleOrNode.style ) {
-			(
-				[ 'width', 'height', 'minHeight', 'maxHeight' ] as const
-			 ).forEach( function ( style ) {
-				if (
-					/^\d*\.?\d+(?:vw|vh|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)$/.test(
-						ruleOrNode.style[ style ]
-					)
-				) {
-					ruleOrNode.style[ style ] = '';
+		Array.prototype.forEach.call(
+			document.querySelectorAll( '[style]' ),
+			removeViewportStyles
+		);
+		Array.prototype.forEach.call(
+			document.styleSheets,
+			function ( stylesheet ) {
+				let rules;
+				try {
+					rules = stylesheet.cssRules || stylesheet.rules;
+				} catch {
+					// Reading `cssRules` throws a SecurityError for a
+					// cross-origin stylesheet (e.g. a remote <link> in the
+					// user's HTML). Skip those rather than aborting the setup.
+					return;
 				}
-			} );
-		}
-	}
+				Array.prototype.forEach.call( rules, removeViewportStyles );
+			}
+		);
 
-	Array.prototype.forEach.call(
-		document.querySelectorAll( '[style]' ),
-		removeViewportStyles
-	);
-	Array.prototype.forEach.call(
-		document.styleSheets,
-		function ( stylesheet ) {
-			Array.prototype.forEach.call(
-				stylesheet.cssRules || stylesheet.rules,
-				removeViewportStyles
-			);
-		}
-	);
+		body.style.position = 'absolute';
+		body.style.width = '100%';
+		body.setAttribute( 'data-resizable-iframe-connected', '' );
 
-	document.body.style.position = 'absolute';
-	document.body.style.width = '100%';
-	document.body.setAttribute( 'data-resizable-iframe-connected', '' );
+		sendResize();
+	}
 
-	sendResize();
+	window.addEventListener( 'load', sendResize, true );
 
 	// Resize events can change the width of elements with 100% width, but we don't
 	// get an DOM mutations for that, so do the resize when the window is resized, too.
 	window.addEventListener( 'resize', sendResize, true );
+
+	// This script is injected into the document <head> so it parses before the
+	// (possibly malformed) user content in <body>: an unclosed attribute quote
+	// in that content can't then swallow this <script> tag and dump its source
+	// into the preview as visible text. Because <head> runs before <body>
+	// exists, defer the body-dependent setup until the DOM is ready.
+	if ( document.body ) {
+		connect();
+	} else {
+		document.addEventListener( 'DOMContentLoaded', connect );
+	}
 };
 
 // TODO: These styles shouldn't be coupled with WordPress.
@@ -135,23 +174,48 @@ const style = `
 `;
 
 /**
- * Builds the full HTML document string for the sandbox iframe content.
+ * Builds the full HTML document string for the sandbox iframe content. Shared
+ * by both the isolated (`srcdoc`) and same-origin (`contentDocument.write`)
+ * sandboxes so the two paths always emit the same markup — notably keeping the
+ * resize script in `<head>`, ahead of the user content, on both. A single
+ * builder means the write path cannot drift back to putting the script in
+ * `<body>` while the `srcdoc` path keeps it in `<head>`.
+ *
+ * `lang` is passed in rather than read here because the two callers source it
+ * from different documents: the isolated sandbox uses the module's `document`,
+ * while the same-origin sandbox uses the iframe's `ownerDocument`. They are
+ * normally the same document, but keeping the argument preserves each path's
+ * exact prior behavior.
+ *
+ * Exported for tests.
+ *
+ * @param props
+ * @param props.html    User-supplied HTML for the iframe body.
+ * @param props.title   Document title.
+ * @param props.type    Optional class name for the `<html>`/`<body>` elements.
+ * @param props.styles  CSS rule strings, injected as `<style>` tags in the head.
+ * @param props.scripts External script URLs, injected as `<script src>` in the
+ *                      body (embeds expect their scripts there).
+ * @param props.lang    Language for the `<html lang>` attribute.
+ * @return The full `<!DOCTYPE html>…` document string.
  */
-function buildSandBoxDocument( {
+export function buildSandBoxDocument( {
 	html,
 	title,
 	type,
 	styles,
 	scripts,
+	lang,
 }: {
 	html: string;
 	title: string;
 	type?: string;
 	styles: string[];
 	scripts: string[];
+	lang: string;
 } ): string {
 	const htmlDoc = (
-		<html lang={ document.documentElement.lang } className={ type }>
+		<html lang={ lang } className={ type }>
 			<head>
 				<title>{ title }</title>
 				<style dangerouslySetInnerHTML={ { __html: style } } />
@@ -161,18 +225,18 @@ function buildSandBoxDocument( {
 						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() })();`,
 					} }
 				/>
+			</head>
+			<body
+				data-resizable-iframe-connected="data-resizable-iframe-connected"
+				className={ type }
+			>
+				<div dangerouslySetInnerHTML={ { __html: html } } />
 				{ scripts.map( ( src ) => (
 					<script key={ src } src={ src } />
 				) ) }
@@ -203,13 +267,29 @@ function IsolatedSandBox( {
 	scripts = [],
 	onFocus,
 	tabIndex,
+	allowPopups = false,
 }: SandBoxContentProps ) {
 	const ref = useRef< HTMLIFrameElement >( null );
 	const [ width, setWidth ] = useState( 0 );
 	const [ height, setHeight ] = useState( 0 );
 
+	const sandbox = clsx( 'allow-scripts', 'allow-presentation', {
+		'allow-popups': allowPopups,
+	} );
+
 	const srcDoc = useMemo(
-		() => buildSandBoxDocument( { html, title, type, styles, scripts } ),
+		() =>
+			buildSandBoxDocument( {
+				html,
+				title,
+				type,
+				styles,
+				scripts,
+				// Read inside the memo: the `no-dom-globals-in-react-fc` lint
+				// rule forbids DOM globals in the render body. `lang` rarely
+				// changes after load, so leaving it out of the deps is fine.
+				lang: document.documentElement.lang,
+			} ),
 		[ html, title, type, styles, scripts ]
 	);
 
@@ -281,7 +361,7 @@ function IsolatedSandBox( {
 			title={ title }
 			tabIndex={ tabIndex }
 			className="components-sandbox"
-			sandbox="allow-scripts allow-presentation"
+			sandbox={ sandbox }
 			srcDoc={ srcDoc }
 			onFocus={ onFocus }
 			width={ Math.ceil( width ) }
@@ -312,11 +392,21 @@ function SameOriginSandBox( {
 	scripts = [],
 	onFocus,
 	tabIndex,
+	allowPopups = false,
 }: SandBoxContentProps ) {
 	const ref = useRef< HTMLIFrameElement >( null );
 	const [ width, setWidth ] = useState( 0 );
 	const [ height, setHeight ] = useState( 0 );
 
+	const sandbox = clsx(
+		'allow-scripts',
+		'allow-same-origin',
+		'allow-presentation',
+		{
+			'allow-popups': allowPopups,
+		}
+	);
+
 	function isFrameAccessible() {
 		try {
 			return !! ref.current?.contentDocument?.body;
@@ -345,48 +435,25 @@ function SameOriginSandBox( {
 			return;
 		}
 
-		// Put the html snippet into a html document, and then write it to the iframe's document
-		// we can use this in the future to inject custom styles or scripts.
-		// Scripts go into the body rather than the head, to support embedded content such as Instagram
-		// that expect the scripts to be part of the body.
-		const htmlDoc = (
-			<html
-				lang={ ownerDocument.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>
-		);
-
-		// Writing the document like this makes it act in the same way as if it was
-		// loaded over the network, so DOM creation and mutation, script execution, etc.
-		// all work as expected.
+		// Put the html snippet into a html document, and then write it to the
+		// iframe's document. The external `scripts` still go into the body to
+		// support embedded content such as Instagram that expects them there;
+		// only the resize helper lives in the head.
+		//
+		// Writing the document like this makes it act in the same way as if it
+		// was loaded over the network, so DOM creation and mutation, script
+		// execution, etc. all work as expected.
 		contentDocument.open();
-		contentDocument.write( '<!DOCTYPE html>' + renderToString( htmlDoc ) );
+		contentDocument.write(
+			buildSandBoxDocument( {
+				html,
+				title,
+				type,
+				styles,
+				scripts,
+				lang: ownerDocument.documentElement.lang,
+			} )
+		);
 		contentDocument.close();
 	}
 
@@ -463,7 +530,7 @@ function SameOriginSandBox( {
 			title={ title }
 			tabIndex={ tabIndex }
 			className="components-sandbox"
-			sandbox="allow-scripts allow-same-origin allow-presentation"
+			sandbox={ sandbox }
 			onFocus={ onFocus }
 			width={ Math.ceil( width ) }
 			height={ Math.ceil( height ) }