@wordpress/block-editor 16.2.0 → 17.0.2-next.v.202608281122.0

package/src/components/rich-text/event-listeners/enter.js

@@ -11,19 +11,66 @@ const { subscribeOwnedListener, ownsSelection } = unlock( richTextPrivateApis );
 const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 export default ( props ) => ( element ) => {
-	function onKeyDownDeprecated( event ) {
+	function onKeyDown( event ) {
 		if ( event.keyCode !== ENTER ) {
 			return;
 		}
 
-		const { onReplace, onSplit } = props.current;
+		const {
+			onReplace,
+			onSplit,
+			supportsSplitting,
+			disableLineBreaks,
+			onChange,
+			getValue,
+			onSplitAtDoubleLineEnd,
+			registry,
+			onSplitAtEnd,
+		} = props.current;
+		// The rendered value can lag the record: the capture phase listener
+		// that syncs the selection runs on this event, and a re-render with
+		// the new selection has not happened yet.
+		const value = getValue();
+		const { text, start, end } = value;
 
-		if ( onReplace && onSplit ) {
+		if ( event.shiftKey ) {
+			if ( ! disableLineBreaks ) {
+				event.preventDefault();
+				onChange( insert( value, '\n' ) );
+			}
+		} else if ( onSplitAtEnd && start === end && end === text.length ) {
+			event.preventDefault();
+			onSplitAtEnd();
+		} else if ( onReplace && onSplit ) {
 			event.__deprecatedOnSplit = true;
+		} else if (
+			! supportsSplitting &&
+			! disableLineBreaks &&
+			! event.defaultPrevented
+		) {
+			event.preventDefault();
+			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 &&
+				start === end &&
+				end === text.length &&
+				text.slice( -2 ) === '\n\n'
+			) {
+				registry.batch( () => {
+					const _value = { ...value };
+					_value.start = _value.end - 2;
+					onChange( remove( _value ) );
+					onSplitAtDoubleLineEnd();
+				} );
+			} else {
+				onChange( insert( value, '\n' ) );
+			}
 		}
 	}
 
-	function onKeyDown( event ) {
+	function onDefaultKeyDown( event ) {
 		if ( event.defaultPrevented ) {
 			return;
 		}
@@ -39,64 +86,30 @@ export default ( props ) => ( element ) => {
 			return;
 		}
 
-		const {
-			value,
-			onChange,
-			disableLineBreaks,
-			onSplitAtEnd,
-			onSplitAtDoubleLineEnd,
-			registry,
-		} = props.current;
-
+		// On ENTER, we ALWAYS want to prevent the default browser behaviour
+		// at this last interception point.
 		event.preventDefault();
-
-		const { text, start, end } = value;
-
-		if ( event.shiftKey ) {
-			if ( ! disableLineBreaks ) {
-				onChange( insert( value, '\n' ) );
-			}
-		} else if ( onSplitAtEnd && start === end && end === text.length ) {
-			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 &&
-			start === end &&
-			end === text.length &&
-			text.slice( -2 ) === '\n\n'
-		) {
-			registry.batch( () => {
-				const _value = { ...value };
-				_value.start = _value.end - 2;
-				onChange( remove( _value ) );
-				onSplitAtDoubleLineEnd();
-			} );
-		} else if ( ! disableLineBreaks ) {
-			onChange( insert( value, '\n' ) );
-		}
 	}
 
 	const { defaultView } = element.ownerDocument;
 
 	// Attach the listener to the window so parent elements have the chance to
 	// prevent the default behavior.
-	const unsubscribeKeyDown = subscribeDelegatedListener(
+	const unsubscribeDefaultKeyDown = subscribeDelegatedListener(
 		defaultView,
 		'keydown',
-		onKeyDown
+		onDefaultKeyDown
 	);
 	// Capture phase so this runs before ancestor (writing flow) bubble
 	// handlers, matching the timing of the previous raw element listener.
-	const unsubscribeKeyDownDeprecated = subscribeOwnedListener(
+	const unsubscribeKeyDown = subscribeOwnedListener(
 		element,
 		'keydown',
-		onKeyDownDeprecated,
+		onKeyDown,
 		true
 	);
 	return () => {
+		unsubscribeDefaultKeyDown();
 		unsubscribeKeyDown();
-		unsubscribeKeyDownDeprecated();
 	};
 };

package/src/components/rich-text/{index.js → index.jsx}

@@ -33,6 +33,7 @@ import { Content, valueToHTMLString } from './content';
 import { withDeprecations } from './with-deprecations';
 import BlockContext from '../block-context';
 import { unlock } from '../../lock-unlock';
+import { PrivateBlockContext } from '../block-list/private-block-context';
 
 // `RichTextShortcut` and `RichTextInputEvent` now live in
 // `@wordpress/rich-text` so they share the shortcut and input-event contexts
@@ -48,7 +49,7 @@ const {
 
 const instanceIdKey = Symbol( 'instanceId' );
 
-export function RichTextWrapper(
+function RichTextWrapper(
 	{
 		children,
 		tagName = 'div',
@@ -87,6 +88,7 @@ export function RichTextWrapper(
 		} );
 	}
 
+	const { supportsSplitting } = useContext( PrivateBlockContext );
 	const instanceId = useInstanceId( RichTextWrapper );
 	const anchorRef = useRef();
 	const [ anchorElement, setAnchorElement ] = useState( null );
@@ -511,6 +513,7 @@ export function RichTextWrapper(
 						onSplitAtDoubleLineEnd,
 						keyboardShortcuts,
 						inputEvents,
+						supportsSplitting,
 					} ),
 					anchorRef,
 					setAnchorElement,
@@ -529,11 +532,13 @@ export function RichTextWrapper(
 	);
 }
 
+const ForwardedRichTextWrapper = forwardRef( RichTextWrapper );
+
+export { ForwardedRichTextWrapper as RichTextWrapper };
+
 // This is the private API for the RichText component.
 // It allows access to all props, not just the public ones.
-export const PrivateRichText = withDeprecations(
-	forwardRef( RichTextWrapper )
-);
+export const PrivateRichText = withDeprecations( ForwardedRichTextWrapper );
 
 PrivateRichText.Content = Content;
 PrivateRichText.isEmpty = ( value ) => {

package/src/components/rich-text/multiline.jsx

@@ -0,0 +1,186 @@
+import { forwardRef, useInsertionEffect, useRef } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { ENTER } from '@wordpress/keycodes';
+import {
+	create,
+	split,
+	toHTMLString,
+	privateApis as richTextPrivateApis,
+} from '@wordpress/rich-text';
+import { useRefEffect } from '@wordpress/compose';
+import { RichTextWrapper } from './';
+import { store as blockEditorStore } from '../../store';
+import { useBlockEditContext } from '../block-edit';
+import { getMultilineTag } from './utils';
+import { unlock } from '../../lock-unlock';
+
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
+
+function useEnterRef( props ) {
+	const { getSelectionStart, getSelectionEnd } =
+		useSelect( blockEditorStore );
+	const { selectionChange } = useDispatch( blockEditorStore );
+	return useRefEffect( ( element ) => {
+		function onKeyDown( event ) {
+			if ( event.keyCode !== ENTER ) {
+				return;
+			}
+
+			event.preventDefault();
+
+			const { value, values, onChange, index, identifier, clientId } =
+				props.current;
+			const { offset: start } = getSelectionStart();
+			const { offset: end } = getSelectionEnd();
+
+			// Cannot split if there is no selection.
+			if ( typeof start !== 'number' || typeof end !== 'number' ) {
+				return;
+			}
+
+			const richTextValue = create( { html: value } );
+			richTextValue.start = start;
+			richTextValue.end = end;
+
+			const array = split( richTextValue ).map( ( v ) =>
+				toHTMLString( { value: v } )
+			);
+
+			const newValues = values.slice();
+			newValues.splice( index, 1, ...array );
+			onChange( newValues );
+			selectionChange( clientId, `${ identifier }-${ index + 1 }`, 0, 0 );
+		}
+		// Capture phase so this runs before the generic rich text enter
+		// listener, which skips events that already had their default
+		// prevented.
+		return subscribeOwnedListener( element, 'keydown', onKeyDown, true );
+	}, [] );
+}
+
+function Line( lineProps ) {
+	const {
+		value,
+		values,
+		onChange,
+		index,
+		identifier,
+		multilineTagName,
+		...props
+	} = lineProps;
+	const { clientId } = useBlockEditContext();
+	const { selectionChange } = useDispatch( blockEditorStore );
+	const latestRef = useRef();
+	useInsertionEffect( () => {
+		latestRef.current = { ...lineProps, clientId };
+	} );
+	const ref = useEnterRef( latestRef );
+	return (
+		<RichTextWrapper
+			key={ index }
+			identifier={ `${ identifier }-${ index }` }
+			tagName={ multilineTagName }
+			value={ value }
+			onChange={ ( newValue ) => {
+				const newValues = values.slice();
+				newValues[ index ] = newValue;
+				onChange( newValues );
+			} }
+			isSelected={ undefined }
+			ref={ ref }
+			onMerge={ ( forward ) => {
+				const newValues = values.slice();
+				let offset = 0;
+				if ( forward ) {
+					if ( ! newValues[ index + 1 ] ) {
+						return;
+					}
+					newValues.splice(
+						index,
+						2,
+						newValues[ index ] + newValues[ index + 1 ]
+					);
+					offset = newValues[ index ].length - 1;
+				} else {
+					if ( ! newValues[ index - 1 ] ) {
+						return;
+					}
+					newValues.splice(
+						index - 1,
+						2,
+						newValues[ index - 1 ] + newValues[ index ]
+					);
+					offset = newValues[ index - 1 ].length - 1;
+				}
+				onChange( newValues );
+				selectionChange(
+					clientId,
+					`${ identifier }-${ index - ( forward ? 0 : 1 ) }`,
+					offset,
+					offset
+				);
+			} }
+			{ ...props }
+		/>
+	);
+}
+
+function RichTextMultiline(
+	{
+		children,
+		identifier,
+		tagName: TagName = 'div',
+		value = '',
+		onChange,
+		multiline,
+		...props
+	},
+	forwardedRef
+) {
+	deprecated( 'wp.blockEditor.RichText multiline prop', {
+		since: '6.1',
+		version: '6.3',
+		alternative: 'nested blocks (InnerBlocks)',
+		link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/nested-blocks-inner-blocks/',
+	} );
+
+	const multilineTagName = getMultilineTag( multiline );
+	value = value || `<${ multilineTagName }></${ multilineTagName }>`;
+	const padded = `</${ multilineTagName }>${ value }<${ multilineTagName }>`;
+	const values = padded.split(
+		`</${ multilineTagName }><${ multilineTagName }>`
+	);
+
+	values.shift();
+	values.pop();
+
+	function _onChange( newValues ) {
+		onChange(
+			`<${ multilineTagName }>${ newValues.join(
+				`</${ multilineTagName }><${ multilineTagName }>`
+			) }</${ multilineTagName }>`
+		);
+	}
+
+	return (
+		<TagName ref={ forwardedRef }>
+			{ values.map( ( _value, index ) => {
+				return (
+					<Line
+						key={ index }
+						values={ values }
+						value={ _value }
+						onChange={ _onChange }
+						index={ index }
+						identifier={ identifier }
+						multilineTagName={ multilineTagName }
+						{ ...props }
+					/>
+				);
+			} ) }
+		</TagName>
+	);
+}
+
+export default forwardRef( RichTextMultiline );

package/src/components/url-input/{index.js → index.jsx}

@@ -6,7 +6,7 @@ import { UP, DOWN, ENTER, TAB } from '@wordpress/keycodes';
 import {
 	BaseControl,
 	Button,
-	__experimentalInputControl as InputControl,
+	__experimentalInputControl as WCInputControl,
 	Spinner,
 	Popover,
 	privateApis as componentsPrivateApis,
@@ -436,7 +436,7 @@ function Control( {
 
 	const MaybeValidatedInputControl = isValidated
 		? ValidatedInputControl
-		: InputControl;
+		: WCInputControl;
 
 	return (
 		<BaseControl { ...controlProps }>

package/src/components/url-input/test/fixtures/validated-input-control-deprecation.js

@@ -0,0 +1,27 @@
+/**
+ * Temporary test helper while `URLInput` still unlocks the deprecated private
+ * `ValidatedInputControl` from `@wordpress/components`.
+ *
+ * DELETE this file (and remove its imports) once `URLInput` migrates to
+ * `@wordpress/ui` `ValidatedInputControl`.
+ */
+
+export const VALIDATED_INPUT_CONTROL_DEPRECATION =
+	'wp.components.privateApis.ValidatedInputControl is deprecated since version 7.2. Please use ValidatedInputControl from @wordpress/ui instead. Note: This private API will be completely removed within a few Gutenberg plugin releases.';
+
+/**
+ * Asserts the expected deprecation warning when URL validation rendered the
+ * private `ValidatedInputControl`. No-op when validation did not run.
+ */
+export function expectValidatedInputControlDeprecationIfCalled() {
+	// eslint-disable-next-line no-console -- jest-console mock inspection.
+	const deprecationCalls = console.warn.mock.calls.filter(
+		( [ message ] ) => message === VALIDATED_INPUT_CONTROL_DEPRECATION
+	);
+
+	if ( deprecationCalls.length > 0 ) {
+		expect( console ).toHaveWarnedWith(
+			VALIDATED_INPUT_CONTROL_DEPRECATION
+		);
+	}
+}

package/src/components/url-input/test/{index.js → index.jsx}

@@ -6,6 +6,7 @@ import { dispatch } from '@wordpress/data';
 import { UP, DOWN, ENTER, TAB } from '@wordpress/keycodes';
 import URLInput from '../';
 import { store as blockEditorStore } from '../../../store';
+import { expectValidatedInputControlDeprecationIfCalled } from './fixtures/validated-input-control-deprecation';
 
 jest.mock( '@wordpress/a11y', () => ( { speak: jest.fn() } ) );
 
@@ -636,6 +637,10 @@ describe( 'URLInput', () => {
 	} );
 
 	describe( 'validation', () => {
+		afterEach( () => {
+			expectValidatedInputControlDeprecationIfCalled();
+		} );
+
 		it( 'should not remount the input when a custom validity is cleared', async () => {
 			const user = userEvent.setup();
 			const props = {

package/src/components/url-popover/README.md

@@ -120,6 +120,13 @@ drawer.
 -   Type: `Function`
 -   Required: No
 
+### additionalControls
+
+Elements rendered in a row below the URL input. They are hidden while the settings drawer is open.
+
+-   Type: `Element`
+-   Required: No
+
 ## Useful UI pieces
 
 The URLPopover exposes two components that may be used as child components to make the UI creation process easier.

package/src/components/url-popover/stories/index.story.jsx

@@ -4,56 +4,142 @@ import { __ } from '@wordpress/i18n';
 import { keyboardReturn } from '@wordpress/icons';
 import URLPopover from '../';
 
-export default { title: 'BlockEditor/URLPopover' };
+const meta = {
+	title: 'BlockEditor/URLPopover',
+	component: URLPopover,
+	parameters: {
+		// FIXME: Story uses a raw unstyled input whose placeholder fails color-contrast.
+		// See: https://github.com/WordPress/gutenberg/issues/81596
+		a11y: { test: 'todo' },
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component:
+					'Popover component used for editing and viewing URLs.',
+			},
+		},
+	},
+	argTypes: {
+		onClose: {
+			action: 'onClose',
+			description: 'Callback when the popover is closed.',
+			table: {
+				type: { summary: 'function' },
+			},
+		},
+		renderSettings: {
+			description: 'Callback to render settings inside the popover.',
+			table: {
+				type: { summary: 'function' },
+			},
+			control: false,
+		},
+		additionalControls: {
+			description:
+				'Additional controls rendered below the input row. They are hidden while the settings drawer is open.',
+			table: {
+				type: { summary: 'Element' },
+			},
+			control: false,
+		},
+		placement: {
+			control: { type: 'select' },
+			options: [
+				'top',
+				'top-start',
+				'top-end',
+				'right',
+				'right-start',
+				'right-end',
+				'bottom',
+				'bottom-start',
+				'bottom-end',
+				'left',
+				'left-start',
+				'left-end',
+				'overlay',
+			],
+			description: 'Placement of the popover relative to its parent.',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: "'bottom'" },
+			},
+		},
+		focusOnMount: {
+			control: { type: 'select' },
+			options: [ 'firstElement', 'firstInputElement', true, false ],
+			description:
+				'Controls which element is focused when the popover mounts.',
+			table: {
+				type: {
+					summary: "boolean | 'firstElement' | 'firstInputElement'",
+				},
+				defaultValue: { summary: "'firstElement'" },
+			},
+		},
+	},
+	args: {
+		placement: 'bottom',
+		focusOnMount: 'firstElement',
+	},
+};
 
-const TestURLPopover = () => {
-	const [ isVisible, setVisiblility ] = useState( false );
-	const [ url, setUrl ] = useState( '' );
+export default meta;
 
-	const close = () => setVisiblility( false );
-	const setTarget = () => {};
+export const Default = {
+	render: function Template( { onClose, ...args } ) {
+		const [ isVisible, setIsVisible ] = useState( true );
+		const [ url, setUrl ] = useState( '' );
+		const [ isOpenInNewTab, setIsOpenInNewTab ] = useState( false );
 
-	const handleUrlChange = ( event ) => {
-		setUrl( event.target.value );
-	};
+		// Close the popover.
+		const closePopover = () => setIsVisible( false );
 
-	return (
-		<>
-			<Button
-				__next40pxDefaultSize
-				onClick={ () => setVisiblility( true ) }
-			>
-				Edit URL
-			</Button>
-			{ isVisible && (
-				<URLPopover
-					onClose={ close }
-					renderSettings={ () => (
-						<ToggleControl
-							label={ __( 'Open in new tab' ) }
-							onChange={ setTarget }
-						/>
-					) }
+		return (
+			<>
+				<Button
+					__next40pxDefaultSize
+					onClick={ () => setIsVisible( true ) }
 				>
-					<form onSubmit={ close }>
-						<input
-							type="url"
-							value={ url }
-							onChange={ handleUrlChange }
-						/>
-						<Button
-							__next40pxDefaultSize
-							icon={ keyboardReturn }
-							label={ __( 'Apply' ) }
-							type="submit"
-						/>
-					</form>
-				</URLPopover>
-			) }
-		</>
-	);
-};
-
-export const _default = () => {
-	return <TestURLPopover />;
+					{ __( 'Edit URL' ) }
+				</Button>
+				{ isVisible && (
+					<URLPopover
+						{ ...args }
+						onClose={ ( ...closeArgs ) => {
+							onClose( ...closeArgs );
+							closePopover();
+						} }
+						renderSettings={ () => (
+							<ToggleControl
+								label={ __( 'Open in new tab' ) }
+								checked={ isOpenInNewTab }
+								onChange={ setIsOpenInNewTab }
+							/>
+						) }
+					>
+						<form
+							onSubmit={ ( e ) => {
+								e.preventDefault();
+								closePopover();
+							} }
+						>
+							<input
+								type="url"
+								placeholder={ __( 'Enter URL' ) }
+								value={ url }
+								onChange={ ( e ) => setUrl( e.target.value ) }
+							/>
+							<Button
+								__next40pxDefaultSize
+								icon={ keyboardReturn }
+								label={ __( 'Apply' ) }
+								type="submit"
+							/>
+						</form>
+					</URLPopover>
+				) }
+			</>
+		);
+	},
 };