@wordpress/block-editor 12.9.1-next.5a1d1283.0 → 12.10.0

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

@@ -0,0 +1,121 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
+import { useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { RichTextWrapper } from './';
+import { store as blockEditorStore } from '../../store';
+import { useBlockEditContext } from '../block-edit';
+import { getMultilineTag } from './utils';
+
+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 { clientId } = useBlockEditContext();
+	const { selectionChange } = useDispatch( blockEditorStore );
+
+	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 (
+					<RichTextWrapper
+						key={ index }
+						identifier={ `${ identifier }-${ index }` }
+						tagName={ multilineTagName }
+						value={ _value }
+						onChange={ ( newValue ) => {
+							const newValues = values.slice();
+							newValues[ index ] = newValue;
+							_onChange( newValues );
+						} }
+						isSelected={ undefined }
+						onSplit={ ( v ) => v }
+						onReplace={ ( array ) => {
+							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
+							);
+						} }
+						{ ...props }
+					/>
+				);
+			} ) }
+		</TagName>
+	);
+}
+
+export default forwardRef( RichTextMultiline );

package/src/components/rich-text/split-value.js

@@ -8,14 +8,7 @@ import { isEmpty, split, toHTMLString } from '@wordpress/rich-text';
  * as a result of splitting the block by pressing enter, or with blocks as a
  * result of splitting the block by pasting block content in the instance.
  */
-export function splitValue( {
-	value,
-	pastedBlocks = [],
-	onReplace,
-	onSplit,
-	onSplitMiddle,
-	multilineTag,
-} ) {
+export function splitValue( { value, pastedBlocks = [], onReplace, onSplit } ) {
 	if ( ! onReplace || ! onSplit ) {
 		return;
 	}
@@ -35,17 +28,11 @@ export function splitValue( {
 
 	// Create a block with the content before the caret if there's no pasted
 	// blocks, or if there are pasted blocks and the value is not empty. We do
-	// not want a leading empty block on paste, but we do if split with e.g. the
-	// enter key.
+	// not want a leading empty block on paste, but we do if we split with e.g.
+	// the enter key.
 	if ( ! hasPastedBlocks || ! isEmpty( before ) ) {
 		blocks.push(
-			onSplit(
-				toHTMLString( {
-					value: before,
-					multilineTag,
-				} ),
-				! isAfterOriginal
-			)
+			onSplit( toHTMLString( { value: before } ), ! isAfterOriginal )
 		);
 		lastPastedBlockIndex += 1;
 	}
@@ -53,27 +40,15 @@ export function splitValue( {
 	if ( hasPastedBlocks ) {
 		blocks.push( ...pastedBlocks );
 		lastPastedBlockIndex += pastedBlocks.length;
-	} else if ( onSplitMiddle ) {
-		blocks.push( onSplitMiddle() );
 	}
 
-	// If there's pasted blocks, append a block with non empty content / after
-	// the caret. Otherwise, do append an empty block if there is no
-	// `onSplitMiddle` prop, but if there is and the content is empty, the
-	// middle block is enough to set focus in.
-	if (
-		hasPastedBlocks
-			? ! isEmpty( after )
-			: ! onSplitMiddle || ! isEmpty( after )
-	) {
+	// Create a block with the content after the caret if there's no pasted
+	// blocks, or if there are pasted blocks and the value is not empty. We do
+	// not want a trailing empty block on paste, but we do if we split with e.g.
+	// the enter key.
+	if ( ! hasPastedBlocks || ! isEmpty( after ) ) {
 		blocks.push(
-			onSplit(
-				toHTMLString( {
-					value: after,
-					multilineTag,
-				} ),
-				isAfterOriginal
-			)
+			onSplit( toHTMLString( { value: after } ), isAfterOriginal )
 		);
 	}
 

package/src/components/rich-text/use-enter.js

@@ -4,13 +4,9 @@
 import { useRef } from '@wordpress/element';
 import { useRefEffect } from '@wordpress/compose';
 import { ENTER } from '@wordpress/keycodes';
-import {
-	insert,
-	__unstableIsEmptyLine as isEmptyLine,
-	__unstableInsertLineSeparator as insertLineSeparator,
-} from '@wordpress/rich-text';
+import { insert, remove } from '@wordpress/rich-text';
 import { getBlockTransforms, findTransform } from '@wordpress/blocks';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useRegistry } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -19,6 +15,7 @@ import { store as blockEditorStore } from '../../store';
 import { splitValue } from './split-value';
 
 export function useEnter( props ) {
+	const registry = useRegistry();
 	const { __unstableMarkAutomaticChange } = useDispatch( blockEditorStore );
 	const propsRef = useRef( props );
 	propsRef.current = props;
@@ -37,11 +34,10 @@ export function useEnter( props ) {
 				value,
 				onReplace,
 				onSplit,
-				onSplitMiddle,
-				multilineTag,
 				onChange,
 				disableLineBreaks,
 				onSplitAtEnd,
+				onSplitAtDoubleLineEnd,
 			} = propsRef.current;
 
 			event.preventDefault();
@@ -68,42 +64,36 @@ export function useEnter( props ) {
 				}
 			}
 
-			if ( multilineTag ) {
-				if ( event.shiftKey ) {
-					if ( ! disableLineBreaks ) {
-						onChange( insert( _value, '\n' ) );
-					}
-				} else if ( canSplit && isEmptyLine( _value ) ) {
-					splitValue( {
-						value: _value,
-						onReplace,
-						onSplit,
-						onSplitMiddle,
-						multilineTag,
-					} );
-				} else {
-					onChange( insertLineSeparator( _value ) );
-				}
-			} else {
-				const { text, start, end } = _value;
-				const canSplitAtEnd =
-					onSplitAtEnd && start === end && end === text.length;
+			const { text, start, end } = _value;
 
-				if ( event.shiftKey || ( ! canSplit && ! canSplitAtEnd ) ) {
-					if ( ! disableLineBreaks ) {
-						onChange( insert( _value, '\n' ) );
-					}
-				} else if ( ! canSplit && canSplitAtEnd ) {
-					onSplitAtEnd();
-				} else if ( canSplit ) {
-					splitValue( {
-						value: _value,
-						onReplace,
-						onSplit,
-						onSplitMiddle,
-						multilineTag,
-					} );
+			if ( event.shiftKey ) {
+				if ( ! disableLineBreaks ) {
+					onChange( insert( _value, '\n' ) );
 				}
+			} else if ( canSplit ) {
+				splitValue( {
+					value: _value,
+					onReplace,
+					onSplit,
+				} );
+			} 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( () => {
+					_value.start = _value.end - 2;
+					onChange( remove( _value ) );
+					onSplitAtDoubleLineEnd();
+				} );
+			} else if ( ! disableLineBreaks ) {
+				onChange( insert( _value, '\n' ) );
 			}
 		}
 

package/src/components/rich-text/use-paste-handler.js

@@ -9,13 +9,7 @@ import {
 	findTransform,
 	getBlockTransforms,
 } from '@wordpress/blocks';
-import {
-	isEmpty,
-	insert,
-	create,
-	replace,
-	__UNSTABLE_LINE_SEPARATOR as LINE_SEPARATOR,
-} from '@wordpress/rich-text';
+import { isEmpty, insert, create } from '@wordpress/rich-text';
 import { isURL } from '@wordpress/url';
 
 /**
@@ -27,23 +21,6 @@ import { shouldDismissPastedFiles } from '../../utils/pasting';
 
 /** @typedef {import('@wordpress/rich-text').RichTextValue} RichTextValue */
 
-/**
- * Replaces line separators with line breaks if not multiline.
- * Replaces line breaks with line separators if multiline.
- *
- * @param {RichTextValue} value       Value to adjust.
- * @param {boolean}       isMultiline Whether to adjust to multiline or not.
- *
- * @return {RichTextValue} Adjusted value.
- */
-function adjustLines( value, isMultiline ) {
-	if ( isMultiline ) {
-		return replace( value, /\n+/g, LINE_SEPARATOR );
-	}
-
-	return replace( value, new RegExp( LINE_SEPARATOR, 'g' ), '\n' );
-}
-
 export function usePasteHandler( props ) {
 	const propsRef = useRef( props );
 	propsRef.current = props;
@@ -58,9 +35,7 @@ export function usePasteHandler( props ) {
 				tagName,
 				onReplace,
 				onSplit,
-				onSplitMiddle,
 				__unstableEmbedURLOnPaste,
-				multilineTag,
 				preserveWhiteSpace,
 				pastePlainText,
 			} = propsRef.current;
@@ -129,6 +104,20 @@ export function usePasteHandler( props ) {
 			}
 
 			const files = [ ...getFilesFromDataTransfer( clipboardData ) ];
+			const isInternal = clipboardData.getData( 'rich-text' ) === 'true';
+
+			// If the data comes from a rich text instance, we can directly use it
+			// without filtering the data. The filters are only meant for externally
+			// pasted content and remove inline styles.
+			if ( isInternal ) {
+				const pastedValue = create( {
+					html,
+					preserveWhiteSpace,
+				} );
+				addActiveFormats( pastedValue, value.activeFormats );
+				onChange( insert( value, pastedValue ) );
+				return;
+			}
 
 			if ( pastePlainText ) {
 				onChange( insert( value, create( { text: plainText } ) ) );
@@ -179,8 +168,6 @@ export function usePasteHandler( props ) {
 						pastedBlocks: blocks,
 						onReplace,
 						onSplit,
-						onSplitMiddle,
-						multilineTag,
 					} );
 				}
 
@@ -215,19 +202,10 @@ export function usePasteHandler( props ) {
 				mode,
 				tagName,
 				preserveWhiteSpace,
-				// If the data comes from a rich text instance, we can directly
-				// use it without filtering the data. The filters are only meant
-				// for externally pasted content and remove inline styles.
-				disableFilters: !! clipboardData.getData( 'rich-text' ),
 			} );
 
 			if ( typeof content === 'string' ) {
-				let valueToInsert = create( { html: content } );
-
-				// If the content should be multiline, we should process text
-				// separated by a line break as separate lines.
-				valueToInsert = adjustLines( valueToInsert, !! multilineTag );
-
+				const valueToInsert = create( { html: content } );
 				addActiveFormats( valueToInsert, value.activeFormats );
 				onChange( insert( value, valueToInsert ) );
 			} else if ( content.length > 0 ) {
@@ -239,8 +217,6 @@ export function usePasteHandler( props ) {
 						pastedBlocks: content,
 						onReplace,
 						onSplit,
-						onSplitMiddle,
-						multilineTag,
 					} );
 				}
 			}

package/src/components/spacing-sizes-control/style.scss

@@ -39,15 +39,9 @@
 	}
 }
 
-.spacing-sizes-control__wrapper {
-	& + & {
-		margin-top: $grid-unit-10;
-	}
-}
-
 .spacing-sizes-control__header {
 	height: $grid-unit-20;
-	margin-bottom: $grid-unit-10;
+	margin-bottom: $grid-unit-15;
 }
 
 .spacing-sizes-control__dropdown {
@@ -63,3 +57,7 @@
 .spacing-sizes-control__custom-toggle {
 	flex: 0 0 auto;
 }
+
+.spacing-sizes-control__icon {
+	margin-left: $grid-unit-05 * -1; // Aligns the icon to the control header.
+}

package/src/components/spacing-sizes-control/utils.js

@@ -4,7 +4,6 @@
 import { __ } from '@wordpress/i18n';
 import {
 	sidesAll,
-	sidesAxial,
 	sidesBottom,
 	sidesHorizontal,
 	sidesLeft,
@@ -24,7 +23,7 @@ export const DEFAULT_VALUES = {
 
 export const ICONS = {
 	custom: sidesAll,
-	axial: sidesAxial,
+	axial: sidesAll,
 	horizontal: sidesHorizontal,
 	vertical: sidesVertical,
 	top: sidesTop,

package/src/components/use-block-commands/index.js

@@ -12,8 +12,8 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useCommandLoader } from '@wordpress/commands';
 import {
 	copy,
-	edit as remove,
-	create as add,
+	trash as remove,
+	plus as add,
 	group,
 	ungroup,
 	moveTo as move,
@@ -112,12 +112,18 @@ export const useTransformCommands = () => {
 };
 
 const useActionsCommands = () => {
-	const { clientIds } = useSelect( ( select ) => {
-		const { getSelectedBlockClientIds } = select( blockEditorStore );
+	const { clientIds, isUngroupable, isGroupable } = useSelect( ( select ) => {
+		const {
+			getSelectedBlockClientIds,
+			isUngroupable: _isUngroupable,
+			isGroupable: _isGroupable,
+		} = select( blockEditorStore );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 
 		return {
 			clientIds: selectedBlockClientIds,
+			isUngroupable: _isUngroupable(),
+			isGroupable: _isGroupable(),
 		};
 	}, [] );
 	const {
@@ -194,20 +200,7 @@ const useActionsCommands = () => {
 		canMoveBlocks( clientIds, rootClientId ) &&
 		getBlockCount( rootClientId ) !== 1;
 
-	const commands = [
-		{
-			name: 'ungroup',
-			label: __( 'Ungroup' ),
-			callback: onUngroup,
-			icon: ungroup,
-		},
-		{
-			name: 'Group',
-			label: __( 'Group' ),
-			callback: onGroup,
-			icon: group,
-		},
-	];
+	const commands = [];
 	if ( canInsertDefaultBlock ) {
 		commands.push(
 			{
@@ -237,7 +230,7 @@ const useActionsCommands = () => {
 	if ( canRemove ) {
 		commands.push( {
 			name: 'remove',
-			label: __( 'Remove' ),
+			label: __( 'Delete' ),
 			callback: () => removeBlocks( clientIds, true ),
 			icon: remove,
 		} );
@@ -262,7 +255,22 @@ const useActionsCommands = () => {
 			icon: move,
 		} );
 	}
-
+	if ( isUngroupable ) {
+		commands.push( {
+			name: 'ungroup',
+			label: __( 'Ungroup' ),
+			callback: onUngroup,
+			icon: ungroup,
+		} );
+	}
+	if ( isGroupable ) {
+		commands.push( {
+			name: 'Group',
+			label: __( 'Group' ),
+			callback: onGroup,
+			icon: group,
+		} );
+	}
 	return {
 		isLoading: false,
 		commands: commands.map( ( command ) => ( {

package/src/components/use-block-display-information/index.js

@@ -26,6 +26,7 @@ import { store as blockEditorStore } from '../../store';
  * @property {WPIcon}  icon        Block type icon.
  * @property {string}  description A detailed block type description.
  * @property {string}  anchor      HTML anchor.
+ * @property {name}    name        A custom, human readable name for the block.
  */
 
 /**
@@ -94,6 +95,7 @@ export default function useBlockDisplayInformation( clientId ) {
 				anchor: attributes?.anchor,
 				positionLabel,
 				positionType: attributes?.style?.position?.type,
+				name: attributes?.metadata?.name,
 			};
 			if ( ! match ) return blockTypeInfo;
 
@@ -105,6 +107,7 @@ export default function useBlockDisplayInformation( clientId ) {
 				anchor: attributes?.anchor,
 				positionLabel,
 				positionType: attributes?.style?.position?.type,
+				name: attributes?.metadata?.name,
 			};
 		},
 		[ clientId ]