@wordpress/block-editor 16.2.0 → 17.0.0

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

@@ -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.js

@@ -1,12 +1,130 @@
-import { forwardRef } from '@wordpress/element';
+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 } from '@wordpress/rich-text';
+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(
 	{
@@ -27,11 +145,6 @@ function RichTextMultiline(
 		link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/nested-blocks-inner-blocks/',
 	} );
 
-	const { clientId } = useBlockEditContext();
-	const { getSelectionStart, getSelectionEnd } =
-		useSelect( blockEditorStore );
-	const { selectionChange } = useDispatch( blockEditorStore );
-
 	const multilineTagName = getMultilineTag( multiline );
 	value = value || `<${ multilineTagName }></${ multilineTagName }>`;
 	const padded = `</${ multilineTagName }>${ value }<${ multilineTagName }>`;
@@ -54,87 +167,14 @@ function RichTextMultiline(
 		<TagName ref={ forwardedRef }>
 			{ values.map( ( _value, index ) => {
 				return (
-					<RichTextWrapper
+					<Line
 						key={ index }
-						identifier={ `${ identifier }-${ index }` }
-						tagName={ multilineTagName }
+						values={ values }
 						value={ _value }
-						onChange={ ( newValue ) => {
-							const newValues = values.slice();
-							newValues[ index ] = newValue;
-							_onChange( newValues );
-						} }
-						isSelected={ undefined }
-						onKeyDown={ ( event ) => {
-							if ( event.keyCode !== ENTER ) {
-								return;
-							}
-
-							event.preventDefault();
-
-							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
-							);
-						} }
-						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
-							);
-						} }
+						onChange={ _onChange }
+						index={ index }
+						identifier={ identifier }
+						multilineTagName={ multilineTagName }
 						{ ...props }
 					/>
 				);

package/src/components/url-input/index.js

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

@@ -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>
+				) }
+			</>
+		);
+	},
 };