@wordpress/block-editor 12.24.0 → 12.26.0

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -207,7 +207,7 @@ const MediaReplaceFlow = ( {
 					{ onSelectURL && (
 						// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
 						<form
-							className={ classnames(
+							className={ clsx(
 								'block-editor-media-flow__url-input',
 								{
 									'has-siblings':

package/src/components/navigable-toolbar/index.js

@@ -165,7 +165,9 @@ function useToolbarFocus( {
 		}
 		return () => {
 			window.cancelAnimationFrame( raf );
-			if ( ! onIndexChange || ! navigableToolbarRef ) return;
+			if ( ! onIndexChange || ! navigableToolbarRef ) {
+				return;
+			}
 			// When the toolbar element is unmounted and onIndexChange is passed, we
 			// pass the focused toolbar item index so it can be hydrated later.
 			const items = getAllFocusableToolbarItemsIn( navigableToolbarRef );

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import TextareaAutosize from 'react-autosize-textarea';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -27,7 +27,7 @@ const PlainText = forwardRef( ( { __experimentalVersion, ...props }, ref ) => {
 	return (
 		<TextareaAutosize
 			ref={ ref }
-			className={ classnames( 'block-editor-plain-text', className ) }
+			className={ clsx( 'block-editor-plain-text', className ) }
 			onChange={ ( event ) => onChange( event.target.value ) }
 			{ ...remainingProps }
 		/>

package/src/components/provider/block-refs-provider.js

@@ -2,17 +2,12 @@
  * WordPress dependencies
  */
 import { createContext, useMemo } from '@wordpress/element';
+import { observableMap } from '@wordpress/compose';
 
-export const BlockRefs = createContext( {
-	refs: new Map(),
-	callbacks: new Map(),
-} );
+export const BlockRefs = createContext( { refsMap: observableMap() } );
 
 export function BlockRefsProvider( { children } ) {
-	const value = useMemo(
-		() => ( { refs: new Map(), callbacks: new Map() } ),
-		[]
-	);
+	const value = useMemo( () => ( { refsMap: observableMap() } ), [] );
 	return (
 		<BlockRefs.Provider value={ value }>{ children }</BlockRefs.Provider>
 	);

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

@@ -71,6 +71,7 @@ describe( 'useBlockSync hook', () => {
 		expect( onInput ).not.toHaveBeenCalled();
 		expect( replaceInnerBlocks ).not.toHaveBeenCalled();
 		expect( resetBlocks ).toHaveBeenCalledWith( fakeBlocks );
+		expect( resetBlocks ).toHaveBeenCalledTimes( 1 );
 
 		const testBlocks = [
 			{ clientId: 'a', innerBlocks: [], attributes: { foo: 1 } },
@@ -88,6 +89,7 @@ describe( 'useBlockSync hook', () => {
 		expect( onInput ).not.toHaveBeenCalled();
 		expect( replaceInnerBlocks ).not.toHaveBeenCalled();
 		expect( resetBlocks ).toHaveBeenCalledWith( testBlocks );
+		expect( resetBlocks ).toHaveBeenCalledTimes( 2 );
 
 		unmount();
 
@@ -95,6 +97,7 @@ describe( 'useBlockSync hook', () => {
 		expect( onInput ).not.toHaveBeenCalled();
 		expect( replaceInnerBlocks ).not.toHaveBeenCalled();
 		expect( resetBlocks ).toHaveBeenCalledWith( [] );
+		expect( resetBlocks ).toHaveBeenCalledTimes( 3 );
 	} );
 
 	it( 'replaces the inner blocks of a block when the controlled value changes if a clientId is passed', async () => {
@@ -123,6 +126,7 @@ describe( 'useBlockSync hook', () => {
 			'test', // It should use the given client ID.
 			fakeBlocks // It should use the controlled blocks value.
 		);
+		expect( replaceInnerBlocks ).toHaveBeenCalledTimes( 1 );
 
 		const testBlocks = [
 			{
@@ -148,6 +152,7 @@ describe( 'useBlockSync hook', () => {
 		expect( replaceInnerBlocks ).toHaveBeenCalledWith( 'test', [
 			expect.objectContaining( { name: 'test/test-block' } ),
 		] );
+		expect( replaceInnerBlocks ).toHaveBeenCalledTimes( 2 );
 
 		unmount();
 
@@ -155,6 +160,7 @@ describe( 'useBlockSync hook', () => {
 		expect( onInput ).not.toHaveBeenCalled();
 		expect( resetBlocks ).not.toHaveBeenCalled();
 		expect( replaceInnerBlocks ).toHaveBeenCalledWith( 'test', [] );
+		expect( replaceInnerBlocks ).toHaveBeenCalledTimes( 3 );
 	} );
 
 	it( 'does not add the controlled blocks to the block-editor store if the store already contains them', async () => {
@@ -354,6 +360,7 @@ describe( 'useBlockSync hook', () => {
 		);
 
 		expect( replaceInnerBlocks ).toHaveBeenCalledWith( 'test', [] );
+		expect( replaceInnerBlocks ).toHaveBeenCalledTimes( 1 );
 		expect( onChange ).not.toHaveBeenCalled();
 		expect( onInput ).not.toHaveBeenCalled();
 	} );

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

@@ -186,7 +186,15 @@ export default function useBlockSync( {
 		}
 	}, [ controlledBlocks, clientId ] );
 
+	const isMounted = useRef( false );
+
 	useEffect( () => {
+		// On mount, controlled blocks are already set in the effect above.
+		if ( ! isMounted.current ) {
+			isMounted.current = true;
+			return;
+		}
+
 		// When the block becomes uncontrolled, it means its inner state has been reset
 		// we need to take the blocks again from the external value property.
 		if ( ! isControlled ) {
@@ -216,8 +224,9 @@ export default function useBlockSync( {
 			// the subscription is triggering for a block (`clientId !== null`)
 			// and its block name can't be found because it's not on the list.
 			// (`getBlockName( clientId ) === null`).
-			if ( clientId !== null && getBlockName( clientId ) === null )
+			if ( clientId !== null && getBlockName( clientId ) === null ) {
 				return;
+			}
 
 			// When RESET_BLOCKS on parent blocks get called, the controlled blocks
 			// can reset to uncontrolled, in these situations, it means we need to populate

package/src/components/responsive-block-control/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -98,7 +98,7 @@ function ResponsiveBlockControl( props ) {
 					help={ toggleHelpText }
 				/>
 				<div
-					className={ classnames(
+					className={ clsx(
 						'block-editor-responsive-block-control__group',
 						{
 							'is-responsive': isResponsive,

package/src/components/rich-text/README.md

@@ -29,14 +29,6 @@ _Optional._ Placeholder text to show when the field is empty, similar to the
 
 _Optional._  Disables inserting line breaks on `Enter` when it is set to `true`
 
-### `multiline: Boolean | String`
-
-_Optional._ By default, a line break will be inserted on <kbd>Enter</kbd>. If the editable field can contain multiple paragraphs, this property can be set to create new paragraphs on <kbd>Enter</kbd>.
-
-### `onSplit( value: String ): Function`
-
-_Optional._ Called when the content can be split, where `value` is a piece of content being split off. Here you should create a new block with that content and return it. Note that you also need to provide `onReplace` in order for this to take any effect.
-
 ### `onReplace( blocks: Array ): Function`
 
 _Optional._ Called when the `RichText` instance can be replaced with the given blocks.

package/src/components/rich-text/event-listeners/before-input-rules.js

@@ -0,0 +1,92 @@
+/**
+ * WordPress dependencies
+ */
+import { insert, isCollapsed } from '@wordpress/rich-text';
+import { applyFilters } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../../store';
+
+/**
+ * When typing over a selection, the selection will we wrapped by a matching
+ * character pair. The second character is optional, it defaults to the first
+ * character.
+ *
+ * @type {string[]} Array of character pairs.
+ */
+const wrapSelectionSettings = [ '`', '"', "'", '“”', '‘’' ];
+
+export default ( props ) => ( element ) => {
+	function onInput( event ) {
+		const { inputType, data } = event;
+		const { value, onChange, registry } = props.current;
+
+		// Only run the rules when inserting text.
+		if ( inputType !== 'insertText' ) {
+			return;
+		}
+
+		if ( isCollapsed( value ) ) {
+			return;
+		}
+
+		const pair = applyFilters(
+			'blockEditor.wrapSelectionSettings',
+			wrapSelectionSettings
+		).find(
+			( [ startChar, endChar ] ) => startChar === data || endChar === data
+		);
+
+		if ( ! pair ) {
+			return;
+		}
+
+		const [ startChar, endChar = startChar ] = pair;
+		const start = value.start;
+		const end = value.end + startChar.length;
+
+		let newValue = insert( value, startChar, start, start );
+		newValue = insert( newValue, endChar, end, end );
+
+		const {
+			__unstableMarkLastChangeAsPersistent,
+			__unstableMarkAutomaticChange,
+		} = registry.dispatch( blockEditorStore );
+
+		__unstableMarkLastChangeAsPersistent();
+		onChange( newValue );
+		__unstableMarkAutomaticChange();
+
+		const init = {};
+
+		for ( const key in event ) {
+			init[ key ] = event[ key ];
+		}
+
+		init.data = endChar;
+
+		const { ownerDocument } = element;
+		const { defaultView } = ownerDocument;
+		const newEvent = new defaultView.InputEvent( 'input', init );
+
+		// Dispatch an `input` event with the new data. This will trigger the
+		// input rules.
+		// Postpone the `input` to the next event loop tick so that the dispatch
+		// doesn't happen synchronously in the middle of `beforeinput` dispatch.
+		// This is closer to how native `input` event would be timed, and also
+		// makes sure that the `input` event is dispatched only after the `onChange`
+		// call few lines above has fully updated the data store state and rerendered
+		// all affected components.
+		window.queueMicrotask( () => {
+			event.target.dispatchEvent( newEvent );
+		} );
+		event.preventDefault();
+	}
+
+	element.addEventListener( 'beforeinput', onInput );
+	return () => {
+		element.removeEventListener( 'beforeinput', onInput );
+	};
+};

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

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { DELETE, BACKSPACE } from '@wordpress/keycodes';
+import { isCollapsed, isEmpty } from '@wordpress/rich-text';
+
+export default ( props ) => ( element ) => {
+	function onKeyDown( event ) {
+		const { keyCode } = event;
+
+		if ( event.defaultPrevented ) {
+			return;
+		}
+
+		const { value, onMerge, onRemove } = props.current;
+
+		if ( keyCode === DELETE || keyCode === BACKSPACE ) {
+			const { start, end, text } = value;
+			const isReverse = keyCode === BACKSPACE;
+			const hasActiveFormats =
+				value.activeFormats && !! value.activeFormats.length;
+
+			// Only process delete if the key press occurs at an uncollapsed edge.
+			if (
+				! isCollapsed( value ) ||
+				hasActiveFormats ||
+				( isReverse && start !== 0 ) ||
+				( ! isReverse && end !== text.length )
+			) {
+				return;
+			}
+
+			if ( onMerge ) {
+				onMerge( ! isReverse );
+			}
+
+			// Only handle remove on Backspace. This serves dual-purpose of being
+			// 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).
+			else if ( onRemove && isEmpty( value ) && isReverse ) {
+				onRemove( ! isReverse );
+			}
+
+			event.preventDefault();
+		}
+	}
+
+	element.addEventListener( 'keydown', onKeyDown );
+	return () => {
+		element.removeEventListener( 'keydown', onKeyDown );
+	};
+};

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

@@ -0,0 +1,84 @@
+/**
+ * WordPress dependencies
+ */
+import { ENTER } from '@wordpress/keycodes';
+import { insert, remove } from '@wordpress/rich-text';
+
+export default ( props ) => ( element ) => {
+	function onKeyDownDeprecated( event ) {
+		if ( event.keyCode !== ENTER ) {
+			return;
+		}
+
+		const { onReplace, onSplit } = props.current;
+
+		if ( onReplace && onSplit ) {
+			event.__deprecatedOnSplit = true;
+		}
+	}
+
+	function onKeyDown( event ) {
+		if ( event.defaultPrevented ) {
+			return;
+		}
+
+		// The event listener is attached to the window, so we need to check if
+		// the target is the element.
+		if ( event.target !== element ) {
+			return;
+		}
+
+		if ( event.keyCode !== ENTER ) {
+			return;
+		}
+
+		const {
+			value,
+			onChange,
+			disableLineBreaks,
+			onSplitAtEnd,
+			onSplitAtDoubleLineEnd,
+			registry,
+		} = props.current;
+
+		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.
+	defaultView.addEventListener( 'keydown', onKeyDown );
+	element.addEventListener( 'keydown', onKeyDownDeprecated );
+	return () => {
+		defaultView.removeEventListener( 'keydown', onKeyDown );
+		element.removeEventListener( 'keydown', onKeyDownDeprecated );
+	};
+};

package/src/components/rich-text/event-listeners/firefox-compat.js

@@ -0,0 +1,31 @@
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../../store';
+
+export default ( props ) => ( element ) => {
+	function onFocus() {
+		const { registry } = props.current;
+		if ( ! registry.select( blockEditorStore ).isMultiSelecting() ) {
+			return;
+		}
+
+		// This is a little hack to work around focus issues with nested
+		// editable elements in Firefox. For some reason the editable child
+		// element sometimes regains focus, while it should not be focusable
+		// and focus should remain on the editable parent element.
+		// To do: try to find the cause of the shifting focus.
+		const parentEditable = element.parentElement.closest(
+			'[contenteditable="true"]'
+		);
+
+		if ( parentEditable ) {
+			parentEditable.focus();
+		}
+	}
+
+	element.addEventListener( 'focus', onFocus );
+	return () => {
+		element.removeEventListener( 'focus', onFocus );
+	};
+};

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

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useRef } from '@wordpress/element';
+import { useRefEffect } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import beforeInputRules from './before-input-rules';
+import inputRules from './input-rules';
+import insertReplacementText from './insert-replacement-text';
+import removeBrowserShortcuts from './remove-browser-shortcuts';
+import shortcuts from './shortcuts';
+import inputEvents from './input-events';
+import undoAutomaticChange from './undo-automatic-change';
+import pasteHandler from './paste-handler';
+import _delete from './delete';
+import enter from './enter';
+import firefoxCompat from './firefox-compat';
+
+const allEventListeners = [
+	beforeInputRules,
+	inputRules,
+	insertReplacementText,
+	removeBrowserShortcuts,
+	shortcuts,
+	inputEvents,
+	undoAutomaticChange,
+	pasteHandler,
+	_delete,
+	enter,
+	firefoxCompat,
+];
+
+export function useEventListeners( props ) {
+	const propsRef = useRef( props );
+	propsRef.current = props;
+	const refEffects = useMemo(
+		() => allEventListeners.map( ( refEffect ) => refEffect( propsRef ) ),
+		[ propsRef ]
+	);
+
+	return useRefEffect(
+		( element ) => {
+			if ( ! props.isSelected ) {
+				return;
+			}
+			const cleanups = refEffects.map( ( effect ) => effect( element ) );
+			return () => {
+				cleanups.forEach( ( cleanup ) => cleanup() );
+			};
+		},
+		[ refEffects, props.isSelected ]
+	);
+}

package/src/components/rich-text/event-listeners/input-events.js

@@ -0,0 +1,13 @@
+export default ( props ) => ( element ) => {
+	const { inputEvents } = props.current;
+	function onInput( event ) {
+		for ( const keyboardShortcut of inputEvents.current ) {
+			keyboardShortcut( event );
+		}
+	}
+
+	element.addEventListener( 'input', onInput );
+	return () => {
+		element.removeEventListener( 'input', onInput );
+	};
+};

package/src/components/rich-text/event-listeners/input-rules.js

@@ -0,0 +1,146 @@
+/**
+ * WordPress dependencies
+ */
+import { insert, toHTMLString } from '@wordpress/rich-text';
+import { getBlockTransforms, findTransform } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../../store';
+import { preventEventDiscovery } from '../prevent-event-discovery';
+import {
+	retrieveSelectedAttribute,
+	START_OF_SELECTED_AREA,
+} from '../../../utils/selection';
+
+function findSelection( blocks ) {
+	let i = blocks.length;
+
+	while ( i-- ) {
+		const attributeKey = retrieveSelectedAttribute(
+			blocks[ i ].attributes
+		);
+
+		if ( attributeKey ) {
+			blocks[ i ].attributes[ attributeKey ] = blocks[ i ].attributes[
+				attributeKey
+			]
+				// To do: refactor this to use rich text's selection instead, so
+				// we no longer have to use on this hack inserting a special
+				// character.
+				.toString()
+				.replace( START_OF_SELECTED_AREA, '' );
+			return [ blocks[ i ].clientId, attributeKey, 0, 0 ];
+		}
+
+		const nestedSelection = findSelection( blocks[ i ].innerBlocks );
+
+		if ( nestedSelection ) {
+			return nestedSelection;
+		}
+	}
+
+	return [];
+}
+
+export default ( props ) => ( element ) => {
+	function inputRule() {
+		const { getValue, onReplace, selectionChange, registry } =
+			props.current;
+
+		if ( ! onReplace ) {
+			return;
+		}
+
+		// We must use getValue() here because value may be update
+		// asynchronously.
+		const value = getValue();
+		const { start, text } = value;
+		const characterBefore = text.slice( start - 1, start );
+
+		// The character right before the caret must be a plain space.
+		if ( characterBefore !== ' ' ) {
+			return;
+		}
+
+		const trimmedTextBefore = text.slice( 0, start ).trim();
+		const prefixTransforms = getBlockTransforms( 'from' ).filter(
+			( { type } ) => type === 'prefix'
+		);
+		const transformation = findTransform(
+			prefixTransforms,
+			( { prefix } ) => {
+				return trimmedTextBefore === prefix;
+			}
+		);
+
+		if ( ! transformation ) {
+			return;
+		}
+
+		const content = toHTMLString( {
+			value: insert( value, START_OF_SELECTED_AREA, 0, start ),
+		} );
+		const block = transformation.transform( content );
+
+		selectionChange( ...findSelection( [ block ] ) );
+		onReplace( [ block ] );
+		registry.dispatch( blockEditorStore ).__unstableMarkAutomaticChange();
+
+		return true;
+	}
+
+	function onInput( event ) {
+		const { inputType, type } = event;
+		const {
+			getValue,
+			onChange,
+			__unstableAllowPrefixTransformations,
+			formatTypes,
+			registry,
+		} = props.current;
+
+		// Only run input rules when inserting text.
+		if ( inputType !== 'insertText' && type !== 'compositionend' ) {
+			return;
+		}
+
+		if ( __unstableAllowPrefixTransformations && inputRule() ) {
+			return;
+		}
+
+		const value = getValue();
+		const transformed = formatTypes.reduce(
+			( accumlator, { __unstableInputRule } ) => {
+				if ( __unstableInputRule ) {
+					accumlator = __unstableInputRule( accumlator );
+				}
+
+				return accumlator;
+			},
+			preventEventDiscovery( value )
+		);
+
+		const {
+			__unstableMarkLastChangeAsPersistent,
+			__unstableMarkAutomaticChange,
+		} = registry.dispatch( blockEditorStore );
+
+		if ( transformed !== value ) {
+			__unstableMarkLastChangeAsPersistent();
+			onChange( {
+				...transformed,
+				activeFormats: value.activeFormats,
+			} );
+			__unstableMarkAutomaticChange();
+		}
+	}
+
+	element.addEventListener( 'input', onInput );
+	element.addEventListener( 'compositionend', onInput );
+	return () => {
+		element.removeEventListener( 'input', onInput );
+		element.removeEventListener( 'compositionend', onInput );
+	};
+};

package/src/components/rich-text/event-listeners/insert-replacement-text.js

@@ -0,0 +1,28 @@
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../../store';
+
+/**
+ * When the browser is about to auto correct, add an undo level so the user can
+ * revert the change.
+ *
+ * @param {Object} props
+ */
+export default ( props ) => ( element ) => {
+	function onInput( event ) {
+		if ( event.inputType !== 'insertReplacementText' ) {
+			return;
+		}
+
+		const { registry } = props.current;
+		registry
+			.dispatch( blockEditorStore )
+			.__unstableMarkLastChangeAsPersistent();
+	}
+
+	element.addEventListener( 'beforeinput', onInput );
+	return () => {
+		element.removeEventListener( 'beforeinput', onInput );
+	};
+};