@wordpress/block-editor 12.15.0 → 12.16.0

package/src/components/rich-text/native/get-format-colors.native.js

@@ -5,50 +5,43 @@ import { getColorObjectByAttributeValues } from '../../../components/colors';
 
 const FORMAT_TYPE = 'core/text-color';
 const REGEX_TO_MATCH = /^has-(.*)-color$/;
-const TAGS_TO_SEARCH = /\<mark/;
 
-export function getFormatColors( value, formats, colors ) {
-	if ( value?.search( TAGS_TO_SEARCH ) !== -1 ) {
-		const newFormats = formats.slice();
+export function getFormatColors( formats, colors ) {
+	const newFormats = formats.slice();
 
-		newFormats.forEach( ( format ) => {
-			format.forEach( ( currentFormat ) => {
-				if ( currentFormat?.type === FORMAT_TYPE ) {
-					const className = currentFormat?.attributes?.class;
-					currentFormat.attributes.style =
-						currentFormat.attributes.style.replace( / /g, '' );
+	// We are looping through a sparse array where empty indices will be
+	// skipped.
+	newFormats.forEach( ( format ) => {
+		format.forEach( ( currentFormat ) => {
+			if ( currentFormat?.type === FORMAT_TYPE ) {
+				const className = currentFormat?.attributes?.class;
 
-					className?.split( ' ' ).forEach( ( currentClass ) => {
-						const match = currentClass.match( REGEX_TO_MATCH );
-						if ( match ) {
-							const [ , colorSlug ] =
-								currentClass.match( REGEX_TO_MATCH );
-							const colorObject = getColorObjectByAttributeValues(
-								colors,
-								colorSlug
-							);
-							const currentStyles =
-								currentFormat?.attributes?.style;
-							if (
-								colorObject &&
-								( ! currentStyles ||
-									currentStyles?.indexOf(
-										colorObject.color
-									) === -1 )
-							) {
-								currentFormat.attributes.style = [
-									`color: ${ colorObject.color }`,
-									currentStyles,
-								].join( ';' );
-							}
+				className?.split( ' ' ).forEach( ( currentClass ) => {
+					const match = currentClass.match( REGEX_TO_MATCH );
+					if ( match ) {
+						const [ , colorSlug ] =
+							currentClass.match( REGEX_TO_MATCH );
+						const colorObject = getColorObjectByAttributeValues(
+							colors,
+							colorSlug
+						);
+						const currentStyles = currentFormat?.attributes?.style;
+						if (
+							colorObject &&
+							( ! currentStyles ||
+								currentStyles?.indexOf( colorObject.color ) ===
+									-1 )
+						) {
+							currentFormat.attributes.style = [
+								`color: ${ colorObject.color }`,
+								currentStyles,
+							].join( ';' );
 						}
-					} );
-				}
-			} );
+					}
+				} );
+			}
 		} );
+	} );
 
-		return newFormats;
-	}
-
-	return formats;
+	return newFormats;
 }

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

@@ -105,27 +105,11 @@ const DEFAULT_FONT_SIZE = 16;
 const MIN_LINE_HEIGHT = 1;
 
 export class RichText extends Component {
-	constructor( {
-		value,
-		selectionStart,
-		selectionEnd,
-		__unstableMultilineTag: multiline,
-	} ) {
+	constructor( { value, selectionStart, selectionEnd } ) {
 		super( ...arguments );
 
-		this.isMultiline = false;
-		if ( multiline === true || multiline === 'p' || multiline === 'li' ) {
-			this.multilineTag = multiline === true ? 'p' : multiline;
-			this.isMultiline = true;
-		}
-
-		if ( this.multilineTag === 'li' ) {
-			this.multilineWrapperTags = [ 'ul', 'ol' ];
-		}
-
 		this.isIOS = Platform.OS === 'ios';
 		this.createRecord = this.createRecord.bind( this );
-		this.restoreParagraphTags = this.restoreParagraphTags.bind( this );
 		this.onChangeFromAztec = this.onChangeFromAztec.bind( this );
 		this.onKeyDown = this.onKeyDown.bind( this );
 		this.handleEnter = this.handleEnter.bind( this );
@@ -196,7 +180,7 @@ export class RichText extends Component {
 
 		const { formats, replacements, text } = currentValue;
 		const { activeFormats } = this.state;
-		const newFormats = getFormatColors( value, formats, colorPalette );
+		const newFormats = getFormatColors( formats, colorPalette );
 
 		return {
 			formats: newFormats,
@@ -223,8 +207,6 @@ export class RichText extends Component {
 			...create( {
 				html: this.value,
 				range: null,
-				multilineTag: this.multilineTag,
-				multilineWrapperTags: this.multilineWrapperTags,
 				preserveWhiteSpace,
 			} ),
 		};
@@ -235,12 +217,7 @@ export class RichText extends Component {
 
 	valueToFormat( value ) {
 		// Remove the outer root tags.
-		return this.removeRootTagsProducedByAztec(
-			toHTMLString( {
-				value,
-				multilineTag: this.multilineTag,
-			} )
-		);
+		return this.removeRootTagsProducedByAztec( toHTMLString( { value } ) );
 	}
 
 	getActiveFormatNames( record ) {
@@ -357,29 +334,15 @@ export class RichText extends Component {
 		const contentWithoutRootTag = this.removeRootTagsProducedByAztec(
 			unescapeSpaces( event.nativeEvent.text )
 		);
-		let formattedContent = contentWithoutRootTag;
-		if ( ! this.isIOS ) {
-			formattedContent = this.restoreParagraphTags(
-				contentWithoutRootTag,
-				this.multilineTag
-			);
-		}
 
 		this.debounceCreateUndoLevel();
-		const refresh = this.value !== formattedContent;
-		this.value = formattedContent;
+		const refresh = this.value !== contentWithoutRootTag;
+		this.value = contentWithoutRootTag;
 
 		// We don't want to refresh if our goal is just to create a record.
 		if ( refresh ) {
-			this.props.onChange( formattedContent );
-		}
-	}
-
-	restoreParagraphTags( value, tag ) {
-		if ( tag === 'p' && ( ! value || ! value.startsWith( '<p>' ) ) ) {
-			return '<p>' + value + '</p>';
+			this.props.onChange( contentWithoutRootTag );
 		}
-		return value;
 	}
 
 	/*
@@ -739,8 +702,6 @@ export class RichText extends Component {
 		if ( Array.isArray( value ) ) {
 			return create( {
 				html: childrenBlock.toHTML( value ),
-				multilineTag: this.multilineTag,
-				multilineWrapperTags: this.multilineWrapperTags,
 				preserveWhiteSpace,
 			} );
 		}
@@ -748,8 +709,6 @@ export class RichText extends Component {
 		if ( this.props.format === 'string' ) {
 			return create( {
 				html: value,
-				multilineTag: this.multilineTag,
-				multilineWrapperTags: this.multilineWrapperTags,
 				preserveWhiteSpace,
 			} );
 		}
@@ -1323,7 +1282,7 @@ export class RichText extends Component {
 					fontWeight={ this.props.fontWeight }
 					fontStyle={ this.props.fontStyle }
 					disableEditingMenu={ disableEditingMenu }
-					isMultiline={ this.isMultiline }
+					isMultiline={ false }
 					textAlign={ this.props.textAlign }
 					{ ...( this.isIOS ? { maxWidth } : {} ) }
 					minWidth={ minWidth }

package/src/components/rich-text/use-input-rules.js

@@ -28,7 +28,12 @@ function findSelection( blocks ) {
 		if ( attributeKey ) {
 			blocks[ i ].attributes[ attributeKey ] = blocks[ i ].attributes[
 				attributeKey
-			].replace( START_OF_SELECTED_AREA, '' );
+			]
+				// 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 ];
 		}
 

package/src/components/rich-text/with-deprecations.js

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+import { children as childrenSource } from '@wordpress/blocks';
+import { useInstanceId } from '@wordpress/compose';
+import { __unstableCreateElement } from '@wordpress/rich-text';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import RichTextMultiline from './multiline';
+
+export function withDeprecations( Component ) {
+	return forwardRef( ( props, ref ) => {
+		let value = props.value;
+		let onChange = props.onChange;
+
+		// Handle deprecated format.
+		if ( Array.isArray( value ) ) {
+			deprecated( 'wp.blockEditor.RichText value prop as children type', {
+				since: '6.1',
+				version: '6.3',
+				alternative: 'value prop as string',
+				link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/',
+			} );
+
+			value = childrenSource.toHTML( props.value );
+			onChange = ( newValue ) =>
+				props.onChange(
+					childrenSource.fromDOM(
+						__unstableCreateElement( document, newValue ).childNodes
+					)
+				);
+		}
+
+		const NewComponent = props.multiline ? RichTextMultiline : Component;
+		const instanceId = useInstanceId( NewComponent );
+
+		return (
+			<NewComponent
+				{ ...props }
+				identifier={ props.identifier || instanceId }
+				value={ value }
+				onChange={ onChange }
+				ref={ ref }
+			/>
+		);
+	} );
+}

package/src/components/use-block-drop-zone/index.js

@@ -20,6 +20,10 @@ import {
 } from '../../utils/math';
 import { store as blockEditorStore } from '../../store';
 
+const THRESHOLD_DISTANCE = 30;
+const MINIMUM_HEIGHT_FOR_THRESHOLD = 120;
+const MINIMUM_WIDTH_FOR_THRESHOLD = 120;
+
 /** @typedef {import('../../utils/math').WPPoint} WPPoint */
 /** @typedef {import('../use-on-block-drop/types').WPDropOperation} WPDropOperation */
 
@@ -48,24 +52,86 @@ import { store as blockEditorStore } from '../../store';
  * @param {WPBlockData[]}          blocksData  The block data list.
  * @param {WPPoint}                position    The position of the item being dragged.
  * @param {WPBlockListOrientation} orientation The orientation of the block list.
+ * @param {Object}                 options     Additional options.
  * @return {[number, WPDropOperation]} The drop target position.
  */
 export function getDropTargetPosition(
 	blocksData,
 	position,
-	orientation = 'vertical'
+	orientation = 'vertical',
+	options = {}
 ) {
 	const allowedEdges =
 		orientation === 'horizontal'
 			? [ 'left', 'right' ]
 			: [ 'top', 'bottom' ];
 
-	const isRightToLeft = isRTL();
-
 	let nearestIndex = 0;
 	let insertPosition = 'before';
 	let minDistance = Infinity;
 
+	const {
+		dropZoneElement,
+		parentBlockOrientation,
+		rootBlockIndex = 0,
+	} = options;
+
+	// Allow before/after when dragging over the top/bottom edges of the drop zone.
+	if ( dropZoneElement && parentBlockOrientation !== 'horizontal' ) {
+		const rect = dropZoneElement.getBoundingClientRect();
+		const [ distance, edge ] = getDistanceToNearestEdge( position, rect, [
+			'top',
+			'bottom',
+		] );
+
+		// If dragging over the top or bottom of the drop zone, insert the block
+		// before or after the parent block. This only applies to blocks that use
+		// a drop zone element, typically container blocks such as Group or Cover.
+		if (
+			rect.height > MINIMUM_HEIGHT_FOR_THRESHOLD &&
+			distance < THRESHOLD_DISTANCE
+		) {
+			if ( edge === 'top' ) {
+				return [ rootBlockIndex, 'before' ];
+			}
+			if ( edge === 'bottom' ) {
+				return [ rootBlockIndex + 1, 'after' ];
+			}
+		}
+	}
+
+	const isRightToLeft = isRTL();
+
+	// Allow before/after when dragging over the left/right edges of the drop zone.
+	if ( dropZoneElement && parentBlockOrientation === 'horizontal' ) {
+		const rect = dropZoneElement.getBoundingClientRect();
+		const [ distance, edge ] = getDistanceToNearestEdge( position, rect, [
+			'left',
+			'right',
+		] );
+
+		// If dragging over the left or right of the drop zone, insert the block
+		// before or after the parent block. This only applies to blocks that use
+		// a drop zone element, typically container blocks such as Group.
+		if (
+			rect.width > MINIMUM_WIDTH_FOR_THRESHOLD &&
+			distance < THRESHOLD_DISTANCE
+		) {
+			if (
+				( isRightToLeft && edge === 'right' ) ||
+				( ! isRightToLeft && edge === 'left' )
+			) {
+				return [ rootBlockIndex, 'before' ];
+			}
+			if (
+				( isRightToLeft && edge === 'left' ) ||
+				( ! isRightToLeft && edge === 'right' )
+			) {
+				return [ rootBlockIndex + 1, 'after' ];
+			}
+		}
+	}
+
 	blocksData.forEach(
 		( { isUnmodifiedDefaultBlock, getBoundingClientRect, blockIndex } ) => {
 			const rect = getBoundingClientRect();
@@ -150,19 +216,27 @@ export default function useBlockDropZone( {
 		operation: 'insert',
 	} );
 
-	const isDisabled = useSelect(
+	const { isDisabled, parentBlockClientId, rootBlockIndex } = useSelect(
 		( select ) => {
 			const {
 				__unstableIsWithinBlockOverlay,
 				__unstableHasActiveBlockOverlayActive,
+				getBlockIndex,
+				getBlockParents,
 				getBlockEditingMode,
 			} = select( blockEditorStore );
 			const blockEditingMode = getBlockEditingMode( targetRootClientId );
-			return (
-				blockEditingMode !== 'default' ||
-				__unstableHasActiveBlockOverlayActive( targetRootClientId ) ||
-				__unstableIsWithinBlockOverlay( targetRootClientId )
-			);
+			return {
+				parentBlockClientId:
+					getBlockParents( targetRootClientId, true )[ 0 ] || '',
+				rootBlockIndex: getBlockIndex( targetRootClientId ),
+				isDisabled:
+					blockEditingMode !== 'default' ||
+					__unstableHasActiveBlockOverlayActive(
+						targetRootClientId
+					) ||
+					__unstableIsWithinBlockOverlay( targetRootClientId ),
+			};
 		},
 		[ targetRootClientId ]
 	);
@@ -172,9 +246,15 @@ export default function useBlockDropZone( {
 	const { showInsertionPoint, hideInsertionPoint } =
 		useDispatch( blockEditorStore );
 
-	const onBlockDrop = useOnBlockDrop( targetRootClientId, dropTarget.index, {
-		operation: dropTarget.operation,
-	} );
+	const onBlockDrop = useOnBlockDrop(
+		dropTarget.operation === 'before' || dropTarget.operation === 'after'
+			? parentBlockClientId
+			: targetRootClientId,
+		dropTarget.index,
+		{
+			operation: dropTarget.operation,
+		}
+	);
 	const throttled = useThrottle(
 		useCallback(
 			( event, ownerDocument ) => {
@@ -211,7 +291,16 @@ export default function useBlockDropZone( {
 				const [ targetIndex, operation ] = getDropTargetPosition(
 					blocksData,
 					{ x: event.clientX, y: event.clientY },
-					getBlockListSettings( targetRootClientId )?.orientation
+					getBlockListSettings( targetRootClientId )?.orientation,
+					{
+						dropZoneElement,
+						parentBlockClientId,
+						parentBlockOrientation: parentBlockClientId
+							? getBlockListSettings( parentBlockClientId )
+									?.orientation
+							: undefined,
+						rootBlockIndex,
+					}
 				);
 
 				registry.batch( () => {
@@ -219,18 +308,29 @@ export default function useBlockDropZone( {
 						index: targetIndex,
 						operation,
 					} );
-					showInsertionPoint( targetRootClientId, targetIndex, {
+
+					const insertionPointClientId = [
+						'before',
+						'after',
+					].includes( operation )
+						? parentBlockClientId
+						: targetRootClientId;
+
+					showInsertionPoint( insertionPointClientId, targetIndex, {
 						operation,
 					} );
 				} );
 			},
 			[
+				dropZoneElement,
 				getBlocks,
 				targetRootClientId,
 				getBlockListSettings,
 				registry,
 				showInsertionPoint,
 				getBlockIndex,
+				parentBlockClientId,
+				rootBlockIndex,
 			]
 		),
 		200

package/src/components/use-on-block-drop/index.js

@@ -292,9 +292,10 @@ export default function useOnBlockDrop(
 			operation,
 			getBlockOrder,
 			getBlocksByClientId,
-			insertBlocks,
 			moveBlocksToPosition,
+			registry,
 			removeBlocks,
+			replaceBlocks,
 			targetBlockIndex,
 			targetRootClientId,
 		]

package/src/components/use-resize-canvas/README.md

@@ -1,6 +1,6 @@
 # useResizeCanvas
 
-This React hook generates inline CSS suitable for resizing a container to fit a device's dimensions. It adjusts the CSS according to the current device dimensions. It has no effect on desktop.
+This React hook generates inline CSS suitable for resizing a container to fit a device's dimensions. It adjusts the CSS according to the current device dimensions.
 
 On-page CSS media queries are also updated to match the width of the device.
 
@@ -14,14 +14,14 @@ Note that this is currently experimental, and is available as `__experimentalUse
 
 ### Usage
 
-The hook returns a style object which can be applied to a container. It is passed the current device type, which can be obtained from `__experimentalGetPreviewDeviceType`.
+The hook returns a style object which can be applied to a container. It is passed the current device type, which can be obtained from `getDeviceType`.
 
 ```jsx
 import { __experimentalUseResizeCanvas as useResizeCanvas } from '@wordpress/block-editor';
 
 function ResizedContainer() {
 	const deviceType = useSelect( ( select ) => {
-		return select( 'core/edit-post' ).__experimentalGetPreviewDeviceType();
+		return select( 'core/editor' ).getDeviceType();
 	}, [] );
 	const inlineStyles = useResizeCanvas( deviceType );
 

package/src/components/use-resize-canvas/index.js

@@ -67,7 +67,10 @@ export default function useResizeCanvas( deviceType ) {
 					overflowY: 'auto',
 				};
 			default:
-				return null;
+				return {
+					marginLeft: marginHorizontal,
+					marginRight: marginHorizontal,
+				};
 		}
 	};
 

package/src/components/use-settings/index.js

@@ -103,7 +103,7 @@ const removeCustomPrefixes = ( path ) => {
  * @param {Object} value Object to merge
  * @return {Array} Array of merged items
  */
-function mergeOrigins( value ) {
+export function mergeOrigins( value ) {
 	let result = mergeCache.get( value );
 	if ( ! result ) {
 		result = [ 'default', 'theme', 'custom' ].flatMap(
@@ -115,6 +115,20 @@ function mergeOrigins( value ) {
 }
 const mergeCache = new WeakMap();
 
+/**
+ * For settings like `color.palette`, which have a value that is an object
+ * with `default`, `theme`, `custom`, with field values that are arrays of
+ * items, see if any of the three origins have values.
+ *
+ * @param {Object} value Object to check
+ * @return {boolean} Whether the object has values in any of the three origins
+ */
+export function hasMergedOrigins( value ) {
+	return [ 'default', 'theme', 'custom' ].some(
+		( key ) => value?.[ key ]?.length
+	);
+}
+
 /**
  * Hook that retrieves the given settings for the block instance in use.
  *

package/src/hooks/align.js

@@ -6,7 +6,6 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { createHigherOrderComponent } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import {
 	getBlockSupport,
@@ -108,9 +107,9 @@ export function addAttribute( settings ) {
 	return settings;
 }
 
-function BlockEditAlignmentToolbarControls( {
-	blockName,
-	attributes,
+function BlockEditAlignmentToolbarControlsPure( {
+	name: blockName,
+	align,
 	setAttributes,
 } ) {
 	// Compute the block valid alignments by taking into account,
@@ -144,7 +143,7 @@ function BlockEditAlignmentToolbarControls( {
 	return (
 		<BlockControls group="block" __experimentalShareWithChildBlocks>
 			<BlockAlignmentControl
-				value={ attributes.align }
+				value={ align }
 				onChange={ updateAlignment }
 				controls={ validAlignments }
 			/>
@@ -152,80 +151,30 @@ function BlockEditAlignmentToolbarControls( {
 	);
 }
 
-/**
- * Override the default edit UI to include new toolbar controls for block
- * alignment, if block defines support.
- *
- * @param {Function} BlockEdit Original component.
- *
- * @return {Function} Wrapped component.
- */
-export const withAlignmentControls = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		const hasAlignmentSupport = hasBlockSupport(
-			props.name,
-			'align',
-			false
-		);
-
-		return (
-			<>
-				{ hasAlignmentSupport && (
-					<BlockEditAlignmentToolbarControls
-						blockName={ props.name }
-						attributes={ props.attributes }
-						setAttributes={ props.setAttributes }
-					/>
-				) }
-				<BlockEdit key="edit" { ...props } />
-			</>
-		);
+export default {
+	shareWithChildBlocks: true,
+	edit: BlockEditAlignmentToolbarControlsPure,
+	useBlockProps,
+	attributeKeys: [ 'align' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, 'align', false );
 	},
-	'withAlignmentControls'
-);
+};
 
-function BlockListBlockWithDataAlign( { block: BlockListBlock, props } ) {
-	const { name, attributes } = props;
-	const { align } = attributes;
+function useBlockProps( { name, align } ) {
 	const blockAllowedAlignments = getValidAlignments(
 		getBlockSupport( name, 'align' ),
 		hasBlockSupport( name, 'alignWide', true )
 	);
 	const validAlignments = useAvailableAlignments( blockAllowedAlignments );
 
-	let wrapperProps = props.wrapperProps;
 	if ( validAlignments.some( ( alignment ) => alignment.name === align ) ) {
-		wrapperProps = { ...wrapperProps, 'data-align': align };
+		return { 'data-align': align };
 	}
 
-	return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
+	return {};
 }
 
-/**
- * Override the default block element to add alignment wrapper props.
- *
- * @param {Function} BlockListBlock Original component.
- *
- * @return {Function} Wrapped component.
- */
-export const withDataAlign = createHigherOrderComponent(
-	( BlockListBlock ) => ( props ) => {
-		// If an alignment is not assigned, there's no need to go through the
-		// effort to validate or assign its value.
-		if ( props.attributes.align === undefined ) {
-			return <BlockListBlock { ...props } />;
-		}
-
-		return (
-			<BlockListBlockWithDataAlign
-				block={ BlockListBlock }
-				props={ props }
-			/>
-		);
-	},
-	'withDataAlign'
-);
-
 /**
  * Override props assigned to save component to inject alignment class name if
  * block supports it.
@@ -260,16 +209,6 @@ addFilter(
 	'core/editor/align/addAttribute',
 	addAttribute
 );
-addFilter(
-	'editor.BlockListBlock',
-	'core/editor/align/with-data-align',
-	withDataAlign
-);
-addFilter(
-	'editor.BlockEdit',
-	'core/editor/align/with-toolbar-controls',
-	withAlignmentControls
-);
 addFilter(
 	'blocks.getSaveContent.extraProps',
 	'core/editor/align/addAssignedAlign',