prep build 10/09

packages/block-editor/src/components/block-list/block-outline.native.js

@@ -13,7 +13,7 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
  */
 import styles from './block.scss';
 
-const TEXT_BLOCKS_WITH_OUTLINE = [ 'core/missing' ];
+const TEXT_BLOCKS_WITH_OUTLINE = [ 'core/missing', 'core/freeform' ];
 
 function BlockOutline( {
 	blockCategory,

packages/block-editor/src/components/height-control/index.js

@@ -26,6 +26,28 @@ const RANGE_CONTROL_CUSTOM_SETTINGS = {
 	vh: { max: 100, step: 1 },
 	em: { max: 50, step: 0.1 },
 	rem: { max: 50, step: 0.1 },
+	svw: { max: 100, step: 1 },
+	lvw: { max: 100, step: 1 },
+	dvw: { max: 100, step: 1 },
+	svh: { max: 100, step: 1 },
+	lvh: { max: 100, step: 1 },
+	dvh: { max: 100, step: 1 },
+	vi: { max: 100, step: 1 },
+	svi: { max: 100, step: 1 },
+	lvi: { max: 100, step: 1 },
+	dvi: { max: 100, step: 1 },
+	vb: { max: 100, step: 1 },
+	svb: { max: 100, step: 1 },
+	lvb: { max: 100, step: 1 },
+	dvb: { max: 100, step: 1 },
+	vmin: { max: 100, step: 1 },
+	svmin: { max: 100, step: 1 },
+	lvmin: { max: 100, step: 1 },
+	dvmin: { max: 100, step: 1 },
+	vmax: { max: 100, step: 1 },
+	svmax: { max: 100, step: 1 },
+	lvmax: { max: 100, step: 1 },
+	dvmax: { max: 100, step: 1 },
 };
 
 /**
@@ -86,10 +108,36 @@ export default function HeightControl( {
 			// Convert to pixel value assuming a root size of 16px.
 			onChange( Math.round( currentValue * 16 ) + newUnit );
 		} else if (
-			[ 'vh', 'vw', '%' ].includes( newUnit ) &&
+			[
+				'%',
+				'vw',
+				'svw',
+				'lvw',
+				'dvw',
+				'vh',
+				'svh',
+				'lvh',
+				'dvh',
+				'vi',
+				'svi',
+				'lvi',
+				'dvi',
+				'vb',
+				'svb',
+				'lvb',
+				'dvb',
+				'vmin',
+				'svmin',
+				'lvmin',
+				'dvmin',
+				'vmax',
+				'svmax',
+				'lvmax',
+				'dvmax',
+			].includes( newUnit ) &&
 			currentValue > 100
 		) {
-			// When converting to `vh`, `vw`, or `%` units, cap the new value at 100.
+			// When converting to `%` or viewport-relative units, cap the new value at 100.
 			onChange( 100 + newUnit );
 		}
 	};

packages/block-editor/src/components/iframe/index.js

@@ -38,7 +38,14 @@ function bubbleEvent( event, Constructor, frame ) {
 		init[ key ] = event[ key ];
 	}
 
-	if ( event instanceof frame.ownerDocument.defaultView.MouseEvent ) {
+	// Check if the event is a MouseEvent generated within the iframe.
+	// If so, adjust the coordinates to be relative to the position of
+	// the iframe. This ensures that components such as Draggable
+	// receive coordinates relative to the window, instead of relative
+	// to the iframe. Without this, the Draggable event handler would
+	// result in components "jumping" position as soon as the user
+	// drags over the iframe.
+	if ( event instanceof frame.contentDocument.defaultView.MouseEvent ) {
 		const rect = frame.getBoundingClientRect();
 		init.clientX += rect.left;
 		init.clientY += rect.top;

packages/block-editor/src/components/index.native.js

@@ -67,6 +67,7 @@ export {
 export { default as Warning } from './warning';
 export { default as ContrastChecker } from './contrast-checker';
 export { default as useMultipleOriginColorsAndGradients } from './colors-gradients/use-multiple-origin-colors-and-gradients';
+export { default as UnsupportedBlockDetails } from './unsupported-block-details';
 
 export {
 	BottomSheetSettings,

packages/block-editor/src/components/link-control/README.md

@@ -4,6 +4,26 @@ Renders a link control. A link control is a controlled input which maintains a v
 
 It is designed to provide a standardized UI for the creation of a link throughout the Editor, see History section at bottom for further background.
 
+## Best Practices
+
+### Ensuring unique instances
+
+It is possible that a given editor may render multiple instances of the `<LinkControl>` component. As a result, it is important to ensure each instance is unique across the editor to avoid state "leaking" between components.
+
+Why would this happen?
+
+React's reconciliation algorithm means that if you return the same element from a component, it keeps the nodes around as an optimization, even if the props change. This means that if you render two (or more) `<LinkControl>`s, it is possible that the `value` from one will appear in the other as you move between them.
+
+As a result it is recommended that consumers provide a `key` prop to each instance of `<LinkControl>`:
+
+```jsx
+<LinkControl key="some-unique-key" { ...props } />
+```
+
+This will cause React to return the same component/element type but force remount a new instance, thus avoiding the issues described above.
+
+For more information see: https://github.com/WordPress/gutenberg/pull/34742.
+
 ## Relationship to `<URLInput>`
 
 As of Gutenberg 7.4, `<LinkControl>` became the default link creation interface within the Block Editor, replacing previous disparate uses of `<URLInput>` and standardizing the UI.

packages/block-editor/src/components/link-control/style.scss

@@ -297,9 +297,9 @@ $preview-image-height: 140px;
 
 		img {
 			display: block; // remove unwanted space below image
-			max-width: 100%;
-			height: $preview-image-height; // limit height
-			max-height: $preview-image-height; // limit height
+			width: 100%;
+			height: 100%;
+			object-fit: contain;
 		}
 	}
 }

packages/block-editor/src/components/link-control/use-internal-value.js

@@ -1,21 +1,25 @@
 /**
  * WordPress dependencies
  */
-import { useState, useEffect } from '@wordpress/element';
+import { useState } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import fastDeepEqual from 'fast-deep-equal';
 
 export default function useInternalValue( value ) {
 	const [ internalValue, setInternalValue ] = useState( value || {} );
+	const [ previousValue, setPreviousValue ] = useState( value );
 
 	// If the value prop changes, update the internal state.
-	useEffect( () => {
-		setInternalValue( ( prevValue ) => {
-			if ( value && value !== prevValue ) {
-				return value;
-			}
-
-			return prevValue;
-		} );
-	}, [ value ] );
+	// See:
+	// - https://github.com/WordPress/gutenberg/pull/51387#issuecomment-1722927384.
+	// - https://react.dev/reference/react/useState#storing-information-from-previous-renders.
+	if ( ! fastDeepEqual( value, previousValue ) ) {
+		setPreviousValue( value );
+		setInternalValue( value );
+	}
 
 	const setInternalURLInputValue = ( nextValue ) => {
 		setInternalValue( {

packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js

@@ -38,6 +38,28 @@ const CUSTOM_VALUE_SETTINGS = {
 	vh: { max: 100, steps: 1 },
 	em: { max: 10, steps: 0.1 },
 	rm: { max: 10, steps: 0.1 },
+	svw: { max: 100, steps: 1 },
+	lvw: { max: 100, steps: 1 },
+	dvw: { max: 100, steps: 1 },
+	svh: { max: 100, steps: 1 },
+	lvh: { max: 100, steps: 1 },
+	dvh: { max: 100, steps: 1 },
+	vi: { max: 100, steps: 1 },
+	svi: { max: 100, steps: 1 },
+	lvi: { max: 100, steps: 1 },
+	dvi: { max: 100, steps: 1 },
+	vb: { max: 100, steps: 1 },
+	svb: { max: 100, steps: 1 },
+	lvb: { max: 100, steps: 1 },
+	dvb: { max: 100, steps: 1 },
+	vmin: { max: 100, steps: 1 },
+	svmin: { max: 100, steps: 1 },
+	lvmin: { max: 100, steps: 1 },
+	dvmin: { max: 100, steps: 1 },
+	vmax: { max: 100, steps: 1 },
+	svmax: { max: 100, steps: 1 },
+	lvmax: { max: 100, steps: 1 },
+	dvmax: { max: 100, steps: 1 },
 };
 
 export default function SpacingInputControl( {

packages/block-editor/src/layouts/grid.js

@@ -27,6 +27,28 @@ const RANGE_CONTROL_MAX_VALUES = {
 	vh: 100,
 	em: 38,
 	rem: 38,
+	svw: 100,
+	lvw: 100,
+	dvw: 100,
+	svh: 100,
+	lvh: 100,
+	dvh: 100,
+	vi: 100,
+	svi: 100,
+	lvi: 100,
+	dvi: 100,
+	vb: 100,
+	svb: 100,
+	lvb: 100,
+	dvb: 100,
+	vmin: 100,
+	svmin: 100,
+	lvmin: 100,
+	dvmin: 100,
+	vmax: 100,
+	svmax: 100,
+	lvmax: 100,
+	dvmax: 100,
 };
 
 export default {
@@ -131,10 +153,36 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 			// Convert to pixel value assuming a root size of 16px.
 			newValue = Math.round( quantity * 16 ) + newUnit;
 		} else if (
-			[ 'vh', 'vw', '%' ].includes( newUnit ) &&
+			[
+				'vh',
+				'vw',
+				'%',
+				'svw',
+				'lvw',
+				'dvw',
+				'svh',
+				'lvh',
+				'dvh',
+				'vi',
+				'svi',
+				'lvi',
+				'dvi',
+				'vb',
+				'svb',
+				'lvb',
+				'dvb',
+				'vmin',
+				'svmin',
+				'lvmin',
+				'dvmin',
+				'vmax',
+				'svmax',
+				'lvmax',
+				'dvmax',
+			].includes( newUnit ) &&
 			quantity > 100
 		) {
-			// When converting to `vh`, `vw`, or `%` units, cap the new value at 100.
+			// When converting to `%` or viewport-relative units, cap the new value at 100.
 			newValue = 100 + newUnit;
 		}
 

packages/block-editor/src/layouts/utils.js

@@ -90,7 +90,8 @@ export function getBlockGapCSS(
 export function getAlignmentsInfo( layout ) {
 	const { contentSize, wideSize, type = 'default' } = layout;
 	const alignmentInfo = {};
-	const sizeRegex = /^(?!0)\d+(px|em|rem|vw|vh|%)?$/i;
+	const sizeRegex =
+		/^(?!0)\d+(px|em|rem|vw|vh|%|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)?$/i;
 	if ( sizeRegex.test( contentSize ) && type === 'constrained' ) {
 		// translators: %s: container size (i.e. 600px etc)
 		alignmentInfo.none = sprintf( __( 'Max %s wide' ), contentSize );

packages/block-editor/src/utils/parse-css-unit-to-px.js

@@ -211,6 +211,26 @@ function convertParsedUnitToPx( parsedUnit, options ) {
 		ex: 7.15625, // X-height of the element's font. Approximate.
 		lh: setOptions.lineHeight,
 	};
+	relativeUnits.svw = relativeUnits.vmin;
+	relativeUnits.lvw = relativeUnits.vmax;
+	relativeUnits.dvw = relativeUnits.vw;
+	relativeUnits.svh = relativeUnits.vmin;
+	relativeUnits.lvh = relativeUnits.vmax;
+	relativeUnits.dvh = relativeUnits.vh;
+	relativeUnits.vi = relativeUnits.vh;
+	relativeUnits.svi = relativeUnits.vmin;
+	relativeUnits.lvi = relativeUnits.vmax;
+	relativeUnits.dvi = relativeUnits.vw;
+	relativeUnits.vb = relativeUnits.vh;
+	relativeUnits.svb = relativeUnits.vmin;
+	relativeUnits.lvb = relativeUnits.vmax;
+	relativeUnits.dvb = relativeUnits.vh;
+	relativeUnits.svmin = relativeUnits.vmin;
+	relativeUnits.lvmin = relativeUnits.vmin;
+	relativeUnits.dvmin = relativeUnits.vmin;
+	relativeUnits.svmax = relativeUnits.vmax;
+	relativeUnits.lvmax = relativeUnits.vmax;
+	relativeUnits.dvmax = relativeUnits.vmax;
 
 	const absoluteUnits = {
 		in: PIXELS_PER_INCH,