@wordpress/block-editor 12.25.0 → 12.26.0

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -48,7 +48,7 @@ const FormatToolbar = () => {
 									label={ __( 'More' ) }
 									toggleProps={ {
 										...toggleProps,
-										className: classnames(
+										className: clsx(
 											toggleProps.className,
 											{ 'is-pressed': hasActive }
 										),

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -20,6 +20,7 @@ import {
 } from '@wordpress/rich-text';
 import { Popover } from '@wordpress/components';
 import { getBlockType, store as blocksStore } from '@wordpress/blocks';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -108,8 +109,14 @@ export function RichTextWrapper(
 ) {
 	props = removeNativeProps( props );
 
-	const instanceId = useInstanceId( RichTextWrapper );
+	if ( onSplit ) {
+		deprecated( 'wp.blockEditor.RichText onSplit prop', {
+			since: '6.4',
+			alternative: 'block.json support key: "splitting"',
+		} );
+	}
 
+	const instanceId = useInstanceId( RichTextWrapper );
 	const anchorRef = useRef();
 	const context = useBlockEditContext();
 	const { clientId, isSelected: isBlockSelected, name: blockName } = context;
@@ -419,7 +426,7 @@ export function RichTextWrapper(
 				] ) }
 				contentEditable={ ! shouldDisableEditing }
 				suppressContentEditableWarning
-				className={ classnames(
+				className={ clsx(
 					'block-editor-rich-text__editable',
 					props.className,
 					'rich-text'

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -644,7 +644,7 @@ export function RichTextWrapper(
 										  }
 										: editableProps.style
 								}
-								className={ classnames(
+								className={ clsx(
 									classes,
 									props.className,
 									editableProps.className

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

@@ -3,7 +3,9 @@
  */
 import { forwardRef } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { ENTER } from '@wordpress/keycodes';
+import { create, split, toHTMLString } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -33,6 +35,8 @@ function RichTextMultiline(
 	} );
 
 	const { clientId } = useBlockEditContext();
+	const { getSelectionStart, getSelectionEnd } =
+		useSelect( blockEditorStore );
 	const { selectionChange } = useDispatch( blockEditorStore );
 
 	const multilineTagName = getMultilineTag( multiline );
@@ -68,8 +72,32 @@ function RichTextMultiline(
 							_onChange( newValues );
 						} }
 						isSelected={ undefined }
-						onSplit={ ( v ) => v }
-						onReplace={ ( array ) => {
+						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 );

package/src/components/segmented-text-control/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -36,7 +36,7 @@ export default function SegmentedTextControl( {
 } ) {
 	return (
 		<fieldset
-			className={ classnames(
+			className={ clsx(
 				'block-editor-segmented-text-control',
 				className
 			) }

package/src/components/text-alignment-control/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -78,7 +78,7 @@ export default function TextAlignmentControl( {
 		<SegmentedTextControl
 			label={ __( 'Text alignment' ) }
 			options={ validOptions }
-			className={ classnames(
+			className={ clsx(
 				'block-editor-text-alignment-control',
 				className
 			) }

package/src/components/text-decoration-control/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -51,7 +51,7 @@ export default function TextDecorationControl( {
 		<SegmentedTextControl
 			label={ __( 'Decoration' ) }
 			options={ TEXT_DECORATIONS }
-			className={ classnames(
+			className={ clsx(
 				'block-editor-text-decoration-control',
 				className
 			) }

package/src/components/text-transform-control/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -57,7 +57,7 @@ export default function TextTransformControl( { className, value, onChange } ) {
 		<SegmentedTextControl
 			label={ __( 'Letter case' ) }
 			options={ TEXT_TRANSFORMS }
-			className={ classnames(
+			className={ clsx(
 				'block-editor-text-transform-control',
 				className
 			) }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -441,7 +441,7 @@ class URLInput extends Component {
 		const controlProps = {
 			id: inputId, // Passes attribute to label for the for attribute
 			label,
-			className: classnames( 'block-editor-url-input', className, {
+			className: clsx( 'block-editor-url-input', className, {
 				'is-full-width': isFullWidth,
 			} ),
 			hideLabelFromVision,
@@ -546,7 +546,7 @@ class URLInput extends Component {
 			<Popover placement="bottom" focusOnMount={ false }>
 				<div
 					{ ...suggestionsListProps }
-					className={ classnames(
+					className={ clsx(
 						'block-editor-url-input__suggestions',
 						`${ className }__suggestions`
 					) }
@@ -555,7 +555,7 @@ class URLInput extends Component {
 						<Button
 							{ ...buildSuggestionItemProps( suggestion, index ) }
 							key={ suggestion.id }
-							className={ classnames(
+							className={ clsx(
 								'block-editor-url-input__suggestion',
 								{
 									'is-selected': index === selectedSuggestion,

package/src/components/url-popover/link-editor.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -24,7 +24,7 @@ export default function LinkEditor( {
 } ) {
 	return (
 		<form
-			className={ classnames(
+			className={ clsx(
 				'block-editor-url-popover__link-editor',
 				className
 			) }

package/src/components/url-popover/link-viewer-url.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -10,7 +10,7 @@ import { ExternalLink } from '@wordpress/components';
 import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
 
 export default function LinkViewerURL( { url, urlLabel, className } ) {
-	const linkClassName = classnames(
+	const linkClassName = clsx(
 		className,
 		'block-editor-url-popover__link-viewer-url'
 	);

package/src/components/url-popover/link-viewer.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -25,7 +25,7 @@ export default function LinkViewer( {
 } ) {
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				'block-editor-url-popover__link-viewer',
 				className
 			) }

package/src/components/warning/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -14,7 +14,7 @@ import { moreVertical } from '@wordpress/icons';
 function Warning( { className, actions, children, secondaryActions } ) {
 	return (
 		<div style={ { display: 'contents', all: 'initial' } }>
-			<div className={ classnames( className, 'block-editor-warning' ) }>
+			<div className={ clsx( className, 'block-editor-warning' ) }>
 				<div className="block-editor-warning__contents">
 					<p className="block-editor-warning__message">
 						{ children }

package/src/components/writing-flow/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -78,7 +78,7 @@ function WritingFlow( { children, ...props }, forwardedRef ) {
 			<div
 				{ ...props }
 				ref={ useMergeRefs( [ ref, forwardedRef ] ) }
-				className={ classNames(
+				className={ clsx(
 					props.className,
 					'block-editor-writing-flow'
 				) }

package/src/components/writing-flow/use-clipboard-handler.js

@@ -1,6 +1,12 @@
 /**
  * WordPress dependencies
  */
+import {
+	pasteHandler,
+	findTransform,
+	getBlockTransforms,
+	hasBlockSupport,
+} from '@wordpress/blocks';
 import {
 	documentHasSelection,
 	documentHasUncollapsedSelection,
@@ -13,7 +19,8 @@ import { useRefEffect } from '@wordpress/compose';
  */
 import { store as blockEditorStore } from '../../store';
 import { useNotifyCopy } from '../../utils/use-notify-copy';
-import { getPasteBlocks, setClipboardBlocks } from './utils';
+import { setClipboardBlocks } from './utils';
+import { getPasteEventData } from '../../utils/pasting';
 
 export default function useClipboardHandler() {
 	const registry = useRegistry();
@@ -22,11 +29,13 @@ export default function useClipboardHandler() {
 		getSelectedBlockClientIds,
 		hasMultiSelection,
 		getSettings,
+		getBlockName,
 		__unstableIsFullySelected,
 		__unstableIsSelectionCollapsed,
 		__unstableIsSelectionMergeable,
 		__unstableGetSelectedBlocksWithPartialSelection,
 		canInsertBlockType,
+		getBlockRootClientId,
 	} = useSelect( blockEditorStore );
 	const {
 		flashBlock,
@@ -34,7 +43,7 @@ export default function useClipboardHandler() {
 		replaceBlocks,
 		__unstableDeleteSelection,
 		__unstableExpandSelection,
-		insertBlocks,
+		__unstableSplitSelection,
 	} = useDispatch( blockEditorStore );
 	const notifyCopy = useNotifyCopy();
 
@@ -51,35 +60,36 @@ export default function useClipboardHandler() {
 				return;
 			}
 
-			// Always handle multiple selected blocks.
-			if ( ! hasMultiSelection() ) {
-				const { target } = event;
-				const { ownerDocument } = target;
-				// If copying, only consider actual text selection as selection.
-				// Otherwise, any focus on an input field is considered.
-				const hasSelection =
-					event.type === 'copy' || event.type === 'cut'
-						? documentHasUncollapsedSelection( ownerDocument )
-						: documentHasSelection( ownerDocument );
-
-				// Let native copy behaviour take over in input fields.
-				if ( hasSelection ) {
-					return;
-				}
-			}
+			const { activeElement } = event.target.ownerDocument;
 
-			if ( ! node.contains( event.target.ownerDocument.activeElement ) ) {
+			if ( ! node.contains( activeElement ) ) {
 				return;
 			}
 
-			event.preventDefault();
-
 			const isSelectionMergeable = __unstableIsSelectionMergeable();
 			const shouldHandleWholeBlocks =
 				__unstableIsSelectionCollapsed() || __unstableIsFullySelected();
 			const expandSelectionIsNeeded =
 				! shouldHandleWholeBlocks && ! isSelectionMergeable;
 			if ( event.type === 'copy' || event.type === 'cut' ) {
+				if ( ! hasMultiSelection() ) {
+					const { target } = event;
+					const { ownerDocument } = target;
+					// If copying, only consider actual text selection as selection.
+					// Otherwise, any focus on an input field is considered.
+					const hasSelection =
+						event.type === 'copy' || event.type === 'cut'
+							? documentHasUncollapsedSelection( ownerDocument )
+							: documentHasSelection( ownerDocument );
+
+					// Let native copy behaviour take over in input fields.
+					if ( hasSelection ) {
+						return;
+					}
+				}
+
+				event.preventDefault();
+
 				if ( selectedBlockClientIds.length === 1 ) {
 					flashBlock( selectedBlockClientIds[ 0 ] );
 				}
@@ -124,37 +134,87 @@ export default function useClipboardHandler() {
 					__experimentalCanUserUseUnfilteredHTML:
 						canUserUseUnfilteredHTML,
 				} = getSettings();
-				const blocks = getPasteBlocks(
-					event,
-					canUserUseUnfilteredHTML
-				);
+				const isInternal =
+					event.clipboardData.getData( 'rich-text' ) === 'true';
+				if ( isInternal ) {
+					return;
+				}
+				const { plainText, html, files } = getPasteEventData( event );
+				const isFullySelected = __unstableIsFullySelected();
+				let blocks = [];
+
+				if ( files.length ) {
+					const fromTransforms = getBlockTransforms( 'from' );
+					blocks = files
+						.reduce( ( accumulator, file ) => {
+							const transformation = findTransform(
+								fromTransforms,
+								( transform ) =>
+									transform.type === 'files' &&
+									transform.isMatch( [ file ] )
+							);
+							if ( transformation ) {
+								accumulator.push(
+									transformation.transform( [ file ] )
+								);
+							}
+							return accumulator;
+						}, [] )
+						.flat();
+				} else {
+					blocks = pasteHandler( {
+						HTML: html,
+						plainText,
+						mode: isFullySelected ? 'BLOCKS' : 'AUTO',
+						canUserUseUnfilteredHTML,
+					} );
+				}
 
-				if ( selectedBlockClientIds.length === 1 ) {
-					const [ selectedBlockClientId ] = selectedBlockClientIds;
+				// Inline paste: let rich text handle it.
+				if ( typeof blocks === 'string' ) {
+					return;
+				}
 
-					if (
-						blocks.every( ( block ) =>
-							canInsertBlockType(
-								block.name,
-								selectedBlockClientId
-							)
-						)
-					) {
-						insertBlocks(
-							blocks,
-							undefined,
-							selectedBlockClientId
-						);
-						return;
-					}
+				if ( isFullySelected ) {
+					replaceBlocks(
+						selectedBlockClientIds,
+						blocks,
+						blocks.length - 1,
+						-1
+					);
+					event.preventDefault();
+					return;
 				}
 
-				replaceBlocks(
-					selectedBlockClientIds,
-					blocks,
-					blocks.length - 1,
-					-1
+				// If a block doesn't support splitting, let rich text paste
+				// inline.
+				if (
+					! hasMultiSelection() &&
+					! hasBlockSupport(
+						getBlockName( selectedBlockClientIds[ 0 ] ),
+						'splitting',
+						false
+					) &&
+					! event.__deprecatedOnSplit
+				) {
+					return;
+				}
+
+				const [ firstSelectedClientId ] = selectedBlockClientIds;
+				const rootClientId = getBlockRootClientId(
+					firstSelectedClientId
 				);
+
+				if (
+					! blocks.every( ( block ) =>
+						canInsertBlockType( block.name, rootClientId )
+					)
+				) {
+					return;
+				}
+
+				__unstableSplitSelection( blocks );
+				event.preventDefault();
 			}
 		}
 

package/src/components/writing-flow/use-input.js

@@ -4,7 +4,13 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
 import { ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+import {
+	createBlock,
+	getDefaultBlockName,
+	hasBlockSupport,
+	getBlockTransforms,
+	findTransform,
+} from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -18,8 +24,15 @@ export default function useInput() {
 	const {
 		__unstableIsFullySelected,
 		getSelectedBlockClientIds,
+		getSelectedBlockClientId,
 		__unstableIsSelectionMergeable,
 		hasMultiSelection,
+		getBlockName,
+		canInsertBlockType,
+		getBlockRootClientId,
+		getSelectionStart,
+		getSelectionEnd,
+		getBlockAttributes,
 	} = useSelect( blockEditorStore );
 	const {
 		replaceBlocks,
@@ -27,6 +40,7 @@ export default function useInput() {
 		removeBlocks,
 		__unstableDeleteSelection,
 		__unstableExpandSelection,
+		__unstableMarkAutomaticChange,
 	} = useDispatch( blockEditorStore );
 
 	return useRefEffect( ( node ) => {
@@ -45,6 +59,66 @@ export default function useInput() {
 			}
 
 			if ( ! hasMultiSelection() ) {
+				if ( event.keyCode === ENTER ) {
+					if ( event.shiftKey || __unstableIsFullySelected() ) {
+						return;
+					}
+
+					const clientId = getSelectedBlockClientId();
+					const blockName = getBlockName( clientId );
+					const selectionStart = getSelectionStart();
+					const selectionEnd = getSelectionEnd();
+
+					if (
+						selectionStart.attributeKey ===
+						selectionEnd.attributeKey
+					) {
+						const selectedAttributeValue =
+							getBlockAttributes( clientId )[
+								selectionStart.attributeKey
+							];
+						const transforms = getBlockTransforms( 'from' ).filter(
+							( { type } ) => type === 'enter'
+						);
+						const transformation = findTransform(
+							transforms,
+							( item ) => {
+								return item.regExp.test(
+									selectedAttributeValue
+								);
+							}
+						);
+
+						if ( transformation ) {
+							replaceBlocks(
+								clientId,
+								transformation.transform( {
+									content: selectedAttributeValue,
+								} )
+							);
+							__unstableMarkAutomaticChange();
+							return;
+						}
+					}
+
+					if (
+						! hasBlockSupport( blockName, 'splitting', false ) &&
+						! event.__deprecatedOnSplit
+					) {
+						return;
+					}
+
+					// Ensure template is not locked.
+					if (
+						canInsertBlockType(
+							blockName,
+							getBlockRootClientId( clientId )
+						)
+					) {
+						__unstableSplitSelection();
+						event.preventDefault();
+					}
+				}
 				return;
 			}
 

package/src/components/writing-flow/use-tab-nav.js

@@ -45,7 +45,16 @@ export default function useTabNav() {
 		} else if ( hasMultiSelection() ) {
 			container.current.focus();
 		} else if ( getSelectedBlockClientId() ) {
-			getLastFocus()?.current.focus();
+			if ( getLastFocus()?.current ) {
+				getLastFocus().current.focus();
+			} else {
+				// Handles when the last focus has not been set yet, or has been cleared by new blocks being added via the inserter.
+				container.current
+					.querySelector(
+						`[data-block="${ getSelectedBlockClientId() }"]`
+					)
+					.focus();
+			}
 		} else {
 			setNavigationMode( true );