@wordpress/block-editor 12.24.0 → 12.26.0

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-drag-selection.js

@@ -18,7 +18,9 @@ import { store as blockEditorStore } from '../../store';
 function setContentEditableWrapper( node, value ) {
 	node.contentEditable = value;
 	// Firefox doesn't automatically move focus.
-	if ( value ) node.focus();
+	if ( value ) {
+		node.focus();
+	}
 }
 
 /**

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 );
 
@@ -118,7 +127,9 @@ export default function useTabNav() {
 				// do it again here because after clearing block selection,
 				// focus land on the writing flow container and pressing Tab
 				// will no longer send focus through the focus capture element.
-				if ( event.target === node ) setNavigationMode( true );
+				if ( event.target === node ) {
+					setNavigationMode( true );
+				}
 				return;
 			}
 

package/src/components/writing-mode-control/index.js

@@ -1,23 +1,27 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { BaseControl, Button } from '@wordpress/components';
 import { __, isRTL } from '@wordpress/i18n';
 import { textHorizontal, textVertical } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import SegmentedTextControl from '../segmented-text-control';
+
 const WRITING_MODES = [
 	{
-		name: __( 'Horizontal' ),
+		label: __( 'Horizontal' ),
 		value: 'horizontal-tb',
 		icon: textHorizontal,
 	},
 	{
-		name: __( 'Vertical' ),
+		label: __( 'Vertical' ),
 		value: isRTL() ? 'vertical-lr' : 'vertical-rl',
 		icon: textVertical,
 	},
@@ -35,34 +39,14 @@ const WRITING_MODES = [
  */
 export default function WritingModeControl( { className, value, onChange } ) {
 	return (
-		<fieldset
-			className={ classnames(
-				'block-editor-writing-mode-control',
-				className
-			) }
-		>
-			<BaseControl.VisualLabel as="legend">
-				{ __( 'Orientation' ) }
-			</BaseControl.VisualLabel>
-			<div className="block-editor-writing-mode-control__buttons">
-				{ WRITING_MODES.map( ( writingMode ) => {
-					return (
-						<Button
-							key={ writingMode.value }
-							icon={ writingMode.icon }
-							label={ writingMode.name }
-							isPressed={ writingMode.value === value }
-							onClick={ () => {
-								onChange(
-									writingMode.value === value
-										? undefined
-										: writingMode.value
-								);
-							} }
-						/>
-					);
-				} ) }
-			</div>
-		</fieldset>
+		<SegmentedTextControl
+			label={ __( 'Orientation' ) }
+			options={ WRITING_MODES }
+			className={ clsx( 'block-editor-writing-mode-control', className ) }
+			value={ value }
+			onChange={ ( newValue ) => {
+				onChange( newValue === value ? undefined : newValue );
+			} }
+		/>
 	);
 }

package/src/content.scss

@@ -7,6 +7,7 @@
 @import "./components/block-variation-picker/content.scss";
 @import "./components/button-block-appender/content.scss";
 @import "./components/default-block-appender/content.scss";
+@import "./components/iframe/content.scss";
 @import "./components/inner-blocks/content.scss";
 @import "./components/media-placeholder/content.scss";
 @import "./components/plain-text/content.scss";

package/src/hooks/align.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -199,7 +199,7 @@ export function addAssignedAlign( props, blockType, attributes ) {
 		hasWideBlockSupport
 	).includes( align );
 	if ( isAlignValid ) {
-		props.className = classnames( `align${ align }`, props.className );
+		props.className = clsx( `align${ align }`, props.className );
 	}
 
 	return props;

package/src/hooks/background.js

@@ -59,7 +59,7 @@ export function setBackgroundStyleDefaults( backgroundStyle ) {
 	let backgroundStylesWithDefaults;
 
 	// Set block background defaults.
-	if ( backgroundImage?.source === 'file' && !! backgroundImage?.url ) {
+	if ( !! backgroundImage?.url ) {
 		if ( ! backgroundStyle?.backgroundSize ) {
 			backgroundStylesWithDefaults = {
 				backgroundSize: 'cover',

package/src/hooks/border.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -320,7 +320,7 @@ function addSaveProps( props, blockNameOrType, attributes ) {
 	}
 
 	const borderClasses = getBorderClasses( attributes );
-	const newClassName = classnames( props.className, borderClasses );
+	const newClassName = clsx( props.className, borderClasses );
 
 	// If we are clearing the last of the previous classes in `className`
 	// set it to `undefined` to avoid rendering empty DOM attributes.
@@ -341,7 +341,7 @@ export function getBorderClasses( attributes ) {
 	const { borderColor, style } = attributes;
 	const borderColorClass = getColorClassName( 'border-color', borderColor );
 
-	return classnames( {
+	return clsx( {
 		'has-border-color': borderColor || style?.border?.color,
 		[ borderColorClass ]: !! borderColorClass,
 	} );

package/src/hooks/color.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -174,23 +174,16 @@ export function addSaveProps( props, blockNameOrType, attributes ) {
 		style?.color?.background ||
 		( hasGradient && ( gradient || style?.color?.gradient ) );
 
-	const newClassName = classnames(
-		props.className,
-		textClass,
-		gradientClass,
-		{
-			// Don't apply the background class if there's a custom gradient.
-			[ backgroundClass ]:
-				( ! hasGradient || ! style?.color?.gradient ) &&
-				!! backgroundClass,
-			'has-text-color':
-				shouldSerialize( 'text' ) &&
-				( textColor || style?.color?.text ),
-			'has-background': serializeHasBackground && hasBackground,
-			'has-link-color':
-				shouldSerialize( 'link' ) && style?.elements?.link?.color,
-		}
-	);
+	const newClassName = clsx( props.className, textClass, gradientClass, {
+		// Don't apply the background class if there's a custom gradient.
+		[ backgroundClass ]:
+			( ! hasGradient || ! style?.color?.gradient ) && !! backgroundClass,
+		'has-text-color':
+			shouldSerialize( 'text' ) && ( textColor || style?.color?.text ),
+		'has-background': serializeHasBackground && hasBackground,
+		'has-link-color':
+			shouldSerialize( 'link' ) && style?.elements?.link?.color,
+	} );
 	props.className = newClassName ? newClassName : undefined;
 
 	return props;
@@ -399,7 +392,7 @@ function useBlockProps( {
 
 	return {
 		...saveProps,
-		className: classnames(
+		className: clsx(
 			saveProps.className,
 			// Add background image classes in the editor, if not already handled by background color values.
 			! hasBackgroundValue && getBackgroundImageClasses( style )

package/src/hooks/color.scss

@@ -5,6 +5,7 @@
 		 * injected color controls can appear as a single item group without
 		 * the contrast checkers suddenly appearing between items.
 		 */
+		/* stylelint-disable-next-line property-disallowed-list -- This should be removed when https://github.com/WordPress/gutenberg/issues/58936 is fixed. */
 		order: 9999;
 		grid-column: span 2;
 		margin-top: $grid-unit-20;

package/src/hooks/content-lock-ui.js

@@ -20,7 +20,6 @@ import { unlock } from '../lock-unlock';
 // also includes artifacts on the store (actions, reducers, and selector).
 
 function ContentLockControlsPure( { clientId, isSelected } ) {
-	const { getBlockListSettings, getSettings } = useSelect( blockEditorStore );
 	const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect(
 		( select ) => {
 			const {
@@ -37,16 +36,11 @@ function ContentLockControlsPure( { clientId, isSelected } ) {
 		[ clientId ]
 	);
 
-	const {
-		updateSettings,
-		updateBlockListSettings,
-		__unstableSetTemporarilyEditingAsBlocks,
-	} = useDispatch( blockEditorStore );
-	const { stopEditingAsBlocks } = unlock( useDispatch( blockEditorStore ) );
+	const { stopEditingAsBlocks, modifyContentLockBlock } = unlock(
+		useDispatch( blockEditorStore )
+	);
 	const isContentLocked =
 		! isLockedByParent && templateLock === 'contentOnly';
-	const { __unstableMarkNextChangeAsNotPersistent, updateBlockAttributes } =
-		useDispatch( blockEditorStore );
 
 	const stopEditingAsBlockCallback = useCallback( () => {
 		stopEditingAsBlocks( clientId );
@@ -73,30 +67,19 @@ function ContentLockControlsPure( { clientId, isSelected } ) {
 			) }
 			{ showStartEditingAsBlocks && (
 				<BlockSettingsMenuControls>
-					{ ( { onClose } ) => (
-						<MenuItem
-							onClick={ () => {
-								__unstableMarkNextChangeAsNotPersistent();
-								updateBlockAttributes( clientId, {
-									templateLock: undefined,
-								} );
-								updateBlockListSettings( clientId, {
-									...getBlockListSettings( clientId ),
-									templateLock: false,
-								} );
-								const focusModeToRevert =
-									getSettings().focusMode;
-								updateSettings( { focusMode: true } );
-								__unstableSetTemporarilyEditingAsBlocks(
-									clientId,
-									focusModeToRevert
-								);
-								onClose();
-							} }
-						>
-							{ __( 'Modify' ) }
-						</MenuItem>
-					) }
+					{ ( { selectedClientIds, onClose } ) =>
+						selectedClientIds.length === 1 &&
+						selectedClientIds[ 0 ] === clientId && (
+							<MenuItem
+								onClick={ () => {
+									modifyContentLockBlock( clientId );
+									onClose();
+								} }
+							>
+								{ __( 'Modify' ) }
+							</MenuItem>
+						)
+					}
 				</BlockSettingsMenuControls>
 			) }
 		</>

package/src/hooks/custom-class-name.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -88,7 +88,7 @@ export function addSaveProps( extraProps, blockType, attributes ) {
 		hasBlockSupport( blockType, 'customClassName', true ) &&
 		attributes.className
 	) {
-		extraProps.className = classnames(
+		extraProps.className = clsx(
 			extraProps.className,
 			attributes.className
 		);

package/src/hooks/custom-class-name.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -46,7 +46,7 @@ export function addSaveProps( extraProps, blockType, attributes ) {
 		hasBlockSupport( blockType, 'customClassName', true ) &&
 		attributes.className
 	) {
-		extraProps.className = classnames(
+		extraProps.className = clsx(
 			extraProps.className,
 			attributes.className
 		);