@wordpress/block-editor 12.11.0 → 12.12.0

package/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 );
 		}
 	};

package/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;

package/src/components/image-editor/aspect-ratio-dropdown.js

@@ -74,10 +74,6 @@ export default function AspectRatioDropdown( { toggleProps } ) {
 						} }
 						value={ aspect }
 						aspectRatios={ [
-							{
-								title: __( '16:10' ),
-								aspect: 16 / 10,
-							},
 							{
 								title: __( '16:9' ),
 								aspect: 16 / 9,
@@ -101,10 +97,6 @@ export default function AspectRatioDropdown( { toggleProps } ) {
 						} }
 						value={ aspect }
 						aspectRatios={ [
-							{
-								title: __( '10:16' ),
-								aspect: 10 / 16,
-							},
 							{
 								title: __( '9:16' ),
 								aspect: 9 / 16,

package/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,

package/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.
@@ -59,6 +79,29 @@ The resulting default properties of `value` include:
 -   `title` (`string`, optional): Link title.
 -   `opensInNewTab` (`boolean`, optional): Whether link should open in a new browser tab. This value is only assigned when not providing a custom `settings` prop.
 
+Note: `<LinkControl>` maintains an internal state tracking temporary user edits to the link `value` prior to submission. To avoid unwanted synchronization of this internal value, it is advised that the `value` prop is stablized (likely via memozation) before it is passed to the component. This will avoid unwanted loss of any changes users have may made whilst interacting with the control.
+
+```jsx
+const memoizedValue = useMemo(
+	() => ( {
+		url: attributes.url,
+		type: attributes.type,
+		opensInNewTab: attributes.target === '_blank',
+		title: attributes.text,
+	} ),
+	[
+		attributes.url,
+		attributes.type,
+		attributes.target,
+		attributes.text,
+	]
+);
+
+<LinkControl
+	value={ memoizedValue }
+>
+```
+
 ### settings
 
 -   Type: `Array`

package/src/components/link-control/link-preview.js

@@ -11,6 +11,7 @@ import {
 	Button,
 	ExternalLink,
 	__experimentalText as Text,
+	Tooltip,
 } from '@wordpress/components';
 import { filterURLForDisplay, safeDecodeURI } from '@wordpress/url';
 import { Icon, globe, info, linkOff, edit } from '@wordpress/icons';
@@ -87,12 +88,17 @@ export default function LinkPreview( {
 					<span className="block-editor-link-control__search-item-details">
 						{ ! isEmptyURL ? (
 							<>
-								<ExternalLink
-									className="block-editor-link-control__search-item-title"
-									href={ value.url }
+								<Tooltip
+									text={ value.url }
+									placement="bottom-start"
 								>
-									{ displayTitle }
-								</ExternalLink>
+									<ExternalLink
+										className="block-editor-link-control__search-item-title"
+										href={ value.url }
+									>
+										{ displayTitle }
+									</ExternalLink>
+								</Tooltip>
 
 								{ value?.url && displayTitle !== displayURL && (
 									<span className="block-editor-link-control__search-item-info">

package/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;
 		}
 	}
 }

package/src/components/link-control/test/index.js

@@ -2056,6 +2056,25 @@ describe( 'Addition Settings UI', () => {
 			} )
 		);
 	} );
+
+	it( 'should show tooltip with full URL alongside filtered display', async () => {
+		const user = userEvent.setup();
+		const url =
+			'http://www.wordpress.org/wp-content/uploads/a-document.pdf';
+		render( <LinkControl value={ { url } } /> );
+
+		const link = screen.getByRole( 'link' );
+
+		expect( link ).toHaveTextContent( 'a-document.pdf' );
+
+		await user.hover( link );
+
+		expect( await screen.findByRole( 'tooltip' ) ).toHaveTextContent( url );
+
+		await user.unhover( link );
+
+		expect( screen.queryByRole( 'tooltip' ) ).not.toBeInTheDocument();
+	} );
 } );
 
 describe( 'Post types', () => {

package/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( {

package/src/components/list-view/index.js

@@ -6,7 +6,10 @@ import {
 	useMergeRefs,
 	__experimentalUseFixedWindowList as useFixedWindowList,
 } from '@wordpress/compose';
-import { __experimentalTreeGrid as TreeGrid } from '@wordpress/components';
+import {
+	__experimentalTreeGrid as TreeGrid,
+	VisuallyHidden,
+} from '@wordpress/components';
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import {
@@ -257,12 +260,20 @@ function ListViewComponent(
 		return null;
 	}
 
+	const describedById =
+		description && `block-editor-list-view-description-${ instanceId }`;
+
 	return (
 		<AsyncModeProvider value={ true }>
 			<ListViewDropIndicator
 				listViewRef={ elementRef }
 				blockDropTarget={ blockDropTarget }
 			/>
+			{ description && (
+				<VisuallyHidden id={ describedById }>
+					{ description }
+				</VisuallyHidden>
+			) }
 			<TreeGrid
 				id={ id }
 				className="block-editor-list-view-tree"
@@ -272,8 +283,7 @@ function ListViewComponent(
 				onExpandRow={ expandRow }
 				onFocusRow={ focusRow }
 				applicationAriaLabel={ __( 'Block navigation structure' ) }
-				// eslint-disable-next-line jsx-a11y/aria-props
-				aria-description={ description }
+				aria-describedby={ describedById }
 			>
 				<ListViewContext.Provider value={ contextValue }>
 					<ListViewBranch

package/src/components/media-replace-flow/index.js

@@ -16,7 +16,6 @@ import {
 	ToolbarButton,
 	Dropdown,
 	withFilters,
-	Tooltip,
 } from '@wordpress/components';
 import { useSelect, withDispatch } from '@wordpress/data';
 import { DOWN } from '@wordpress/keycodes';
@@ -220,19 +219,15 @@ const MediaReplaceFlow = ( {
 								{ __( 'Current media URL:' ) }
 							</span>
 
-							<Tooltip text={ mediaURL }>
-								<div>
-									<LinkControl
-										value={ { url: mediaURL } }
-										settings={ [] }
-										showSuggestions={ false }
-										onChange={ ( { url } ) => {
-											onSelectURL( url );
-											editMediaButtonRef.current.focus();
-										} }
-									/>
-								</div>
-							</Tooltip>
+							<LinkControl
+								value={ { url: mediaURL } }
+								settings={ [] }
+								showSuggestions={ false }
+								onChange={ ( { url } ) => {
+									onSelectURL( url );
+									editMediaButtonRef.current.focus();
+								} }
+							/>
 						</form>
 					) }
 				</>

package/src/components/provider/test/use-block-sync.js

@@ -31,7 +31,7 @@ const TestWrapper = withRegistryProvider( ( props ) => {
 		props.setRegistry( props.registry );
 	}
 	useBlockSync( props );
-	return <p>Test.</p>;
+	return null;
 } );
 
 describe( 'useBlockSync hook', () => {

package/src/components/provider/use-block-sync.js

@@ -180,7 +180,7 @@ export default function useBlockSync( {
 			// bound sync, unset the outbound value to avoid considering it in
 			// subsequent renders.
 			pendingChanges.current.outgoing = [];
-			const hadSelecton = hasSelectedBlock();
+			const hadSelection = hasSelectedBlock();
 			const selectionAnchor = getSelectionStart();
 			const selectionFocus = getSelectionEnd();
 			setControlledBlocks();
@@ -195,7 +195,7 @@ export default function useBlockSync( {
 				const selectionStillExists = getBlock(
 					selectionAnchor.clientId
 				);
-				if ( hadSelecton && ! selectionStillExists ) {
+				if ( hadSelection && ! selectionStillExists ) {
 					selectBlock( clientId );
 				} else {
 					resetSelection( selectionAnchor, selectionFocus );

package/src/components/rich-text/index.native.js

@@ -21,6 +21,7 @@ import {
 	__unstableCreateElement,
 	isEmpty,
 	insert,
+	remove,
 	create,
 	split,
 	toHTMLString,
@@ -70,6 +71,7 @@ function RichTextWrapper(
 		onSplit,
 		__unstableOnSplitAtEnd: onSplitAtEnd,
 		__unstableOnSplitMiddle: onSplitMiddle,
+		__unstableOnSplitAtDoubleLineEnd: onSplitAtDoubleLineEnd,
 		identifier,
 		preserveWhiteSpace,
 		__unstablePastePlainText: pastePlainText,
@@ -339,14 +341,28 @@ function RichTextWrapper(
 				splitStart === splitEnd &&
 				splitEnd === text.length;
 
-			if ( shiftKey || ( ! canSplit && ! canSplitAtEnd ) ) {
+			if ( shiftKey ) {
 				if ( ! disableLineBreaks ) {
 					onChange( insert( value, '\n' ) );
 				}
-			} else if ( ! canSplit && canSplitAtEnd ) {
-				onSplitAtEnd();
 			} else if ( canSplit ) {
 				splitValue( value );
+			} else if ( canSplitAtEnd ) {
+				onSplitAtEnd();
+			} else if (
+				// For some blocks it's desirable to split at the end of the
+				// block when there are two line breaks at the end of the
+				// block, so triple Enter exits the block.
+				onSplitAtDoubleLineEnd &&
+				splitStart === splitEnd &&
+				splitEnd === text.length &&
+				text.slice( -2 ) === '\n\n'
+			) {
+				value.start = value.end - 2;
+				onChange( remove( value ) );
+				onSplitAtDoubleLineEnd();
+			} else if ( ! disableLineBreaks ) {
+				onChange( insert( value, '\n' ) );
 			}
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/rich-text/use-delete.js

@@ -43,7 +43,7 @@ export function useDelete( props ) {
 				// an intentional user interaction distinguishing between Backspace and
 				// Delete to remove the empty field, but also to avoid merge & remove
 				// causing destruction of two fields (merge, then removed merged).
-				if ( onRemove && isEmpty( value ) && isReverse ) {
+				else if ( onRemove && isEmpty( value ) && isReverse ) {
 					onRemove( ! isReverse );
 				}
 

package/src/components/rich-text/use-paste-handler.js

@@ -56,26 +56,6 @@ export function usePasteHandler( props ) {
 				return;
 			}
 
-			const transformed = formatTypes.reduce(
-				( accumlator, { __unstablePasteRule } ) => {
-					// Only allow one transform.
-					if ( __unstablePasteRule && accumlator === value ) {
-						accumlator = __unstablePasteRule( value, {
-							html,
-							plainText,
-						} );
-					}
-
-					return accumlator;
-				},
-				value
-			);
-
-			if ( transformed !== value ) {
-				onChange( transformed );
-				return;
-			}
-
 			const isInternal =
 				event.clipboardData.getData( 'rich-text' ) === 'true';
 
@@ -139,10 +119,14 @@ export function usePasteHandler( props ) {
 
 			let mode = onReplace && onSplit ? 'AUTO' : 'INLINE';
 
+			const trimmedPlainText = plainText.trim();
+
 			if (
 				__unstableEmbedURLOnPaste &&
 				isEmpty( value ) &&
-				isURL( plainText.trim() )
+				isURL( trimmedPlainText ) &&
+				// For the link pasting feature, allow only http(s) protocols.
+				/^https?:/.test( trimmedPlainText )
 			) {
 				mode = 'BLOCKS';
 			}
@@ -156,9 +140,28 @@ export function usePasteHandler( props ) {
 			} );
 
 			if ( typeof content === 'string' ) {
-				const valueToInsert = create( { html: content } );
-				addActiveFormats( valueToInsert, value.activeFormats );
-				onChange( insert( value, valueToInsert ) );
+				const transformed = formatTypes.reduce(
+					( accumlator, { __unstablePasteRule } ) => {
+						// Only allow one transform.
+						if ( __unstablePasteRule && accumlator === value ) {
+							accumlator = __unstablePasteRule( value, {
+								html,
+								plainText,
+							} );
+						}
+
+						return accumlator;
+					},
+					value
+				);
+
+				if ( transformed !== value ) {
+					onChange( transformed );
+				} else {
+					const valueToInsert = create( { html: content } );
+					addActiveFormats( valueToInsert, value.activeFormats );
+					onChange( insert( value, valueToInsert ) );
+				}
 			} else if ( content.length > 0 ) {
 				if ( onReplace && isEmpty( value ) ) {
 					onReplace( content, content.length - 1, -1 );

package/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( {

package/src/components/tool-selector/index.js

@@ -51,7 +51,7 @@ function ToolSelector( props, ref ) {
 					label={ __( 'Tools' ) }
 				/>
 			) }
-			popoverProps={ { placement: 'bottom-start', variant: undefined } }
+			popoverProps={ { placement: 'bottom-start' } }
 			renderContent={ () => (
 				<>
 					<NavigableMenu role="menu" aria-label={ __( 'Tools' ) }>