@wordpress/block-editor 12.14.0 → 12.16.0

package/src/components/url-input/README.md

@@ -36,41 +36,6 @@ This prop is passed directly to the `URLInput` component.
 
 ## Example
 
-{% codetabs %}
-{% ES5 %}
-
-```js
-wp.blocks.registerBlockType( /* ... */, {
-	// ...
-
-	attributes: {
-		url: {
-			type: 'string'
-		},
-		text: {
-			type: 'string'
-		}
-	},
-
-	edit: function( props ) {
-		return React.createElement( wp.blockEditor.URLInputButton, {
-			className: props.className,
-			url: props.attributes.url,
-			onChange: function( url, post ) {
-				props.setAttributes( { url: url, text: (post && post.title) || 'Click here' } );
-			}
-		} );
-	},
-
-	save: function( props ) {
-		return React.createElement( 'a', {
-			href: props.attributes.url,
-		}, props.attributes.text );
-	}
-} );
-```
-
-{% ESNext %}
 
 ```js
 import { registerBlockType } from '@wordpress/blocks';
@@ -103,7 +68,6 @@ registerBlockType( /* ... */, {
 } );
 ```
 
-{% end %}
 
 # `URLInput`
 
@@ -139,7 +103,7 @@ _Required._ Called when the value changes. The second parameter is `null` unless
 }
 ```
 
-### `onKeydown`: `( event: KeyboardEvent ) => void`
+### `onKeyDown`: `( event: KeyboardEvent ) => void`
 
 A callback invoked on the keydown event.
 
@@ -172,41 +136,6 @@ Start opting into the new margin-free styles that will become the default in a f
 
 ## Example
 
-{% codetabs %}
-{% ES5 %}
-
-```js
-wp.blocks.registerBlockType( /* ... */, {
-	// ...
-
-	attributes: {
-		url: {
-			type: 'string'
-		},
-		text: {
-			type: 'string'
-		}
-	},
-
-	edit: function( props ) {
-		return React.createElement( wp.blockEditor.URLInput, {
-			className: props.className,
-			value: props.attributes.url,
-			onChange: function( url, post ) {
-				props.setAttributes( { url: url, text: (post && post.title) || 'Click here' } );
-			}
-		} );
-	},
-
-	save: function( props ) {
-		return React.createElement( 'a', {
-			href: props.attributes.url,
-		}, props.attributes.text );
-	}
-} );
-```
-
-{% ESNext %}
 
 ```js
 import { registerBlockType } from '@wordpress/blocks';
@@ -240,5 +169,3 @@ registerBlockType( /* ... */, {
 	}
 } );
 ```
-
-{% end %}

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();
@@ -127,7 +193,8 @@ export function getDropTargetPosition(
 
 /**
  * @typedef  {Object} WPBlockDropZoneConfig
- * @property {string} rootClientId The root client id for the block list.
+ * @property {?HTMLElement} dropZoneElement Optional element to be used as the drop zone.
+ * @property {string}       rootClientId    The root client id for the block list.
  */
 
 /**
@@ -136,6 +203,7 @@ export function getDropTargetPosition(
  * @param {WPBlockDropZoneConfig} dropZoneConfig configuration data for the drop zone.
  */
 export default function useBlockDropZone( {
+	dropZoneElement,
 	// An undefined value represents a top-level block. Default to an empty
 	// string for this so that `targetRootClientId` can be easily compared to
 	// values returned by the `getRootBlockClientId` selector, which also uses
@@ -148,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 ]
 	);
@@ -170,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 ) => {
@@ -209,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( () => {
@@ -217,24 +308,36 @@ 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
 	);
 
 	return useDropZone( {
+		dropZoneElement,
 		isDisabled,
 		onDrop: onBlockDrop,
 		onDragOver( event ) {

package/src/components/use-moving-animation/index.js

@@ -129,7 +129,7 @@ function useMovingAnimation( {
 		const finishedMoving = x === 0 && y === 0;
 		ref.current.style.transformOrigin = 'center center';
 		ref.current.style.transform = finishedMoving
-			? undefined
+			? null // Set to `null` to explicitly remove the transform.
 			: `translate3d(${ x }px,${ y }px,0)`;
 		ref.current.style.zIndex = isSelected ? '1' : '';
 

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.
  *
@@ -254,7 +268,7 @@ export function useSettings( ...paths ) {
  *
  * @param {string} path The path to the setting.
  * @return {any} Returns the value defined for the setting.
- * @deprecated 6.4.0 Use useSettings instead.
+ * @deprecated 6.5.0 Use useSettings instead.
  * @example
  * ```js
  * const isEnabled = useSetting( 'typography.dropCap' );
@@ -262,7 +276,7 @@ export function useSettings( ...paths ) {
  */
 export function useSetting( path ) {
 	deprecated( 'wp.blockEditor.useSetting', {
-		since: '6.4',
+		since: '6.5',
 		alternative: 'wp.blockEditor.useSettings',
 		note: 'The new useSettings function can retrieve multiple settings at once, with better performance.',
 	} );

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

@@ -135,7 +135,7 @@ describe( 'useSettings', () => {
 		const result = runHook( () => useSetting( 'layout.contentSize' ) );
 		expect( result ).toBe( '840px' );
 		expect( console ).toHaveWarnedWith(
-			'wp.blockEditor.useSetting is deprecated since version 6.4. Please use wp.blockEditor.useSettings instead.'
+			'wp.blockEditor.useSetting is deprecated since version 6.5. Please use wp.blockEditor.useSettings instead.'
 		);
 	} );
 } );

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',

package/src/hooks/align.native.js

@@ -8,6 +8,7 @@ import { WIDE_ALIGNMENTS } from '@wordpress/components';
 const ALIGNMENTS = [ 'left', 'center', 'right' ];
 
 export * from './align.js';
+export { default } from './align.js';
 
 // Used to filter out blocks that don't support wide/full alignment on mobile
 addFilter(

package/src/hooks/anchor.js

@@ -5,7 +5,6 @@ import { addFilter } from '@wordpress/hooks';
 import { PanelBody, TextControl, ExternalLink } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { hasBlockSupport } from '@wordpress/blocks';
-import { createHigherOrderComponent } from '@wordpress/compose';
 import { Platform } from '@wordpress/element';
 
 /**
@@ -52,7 +51,11 @@ export function addAttribute( settings ) {
 	return settings;
 }
 
-function BlockEditAnchorControl( { blockName, attributes, setAttributes } ) {
+function BlockEditAnchorControlPure( {
+	name: blockName,
+	anchor,
+	setAttributes,
+} ) {
 	const blockEditingMode = useBlockEditingMode();
 
 	const isWeb = Platform.OS === 'web';
@@ -79,7 +82,7 @@ function BlockEditAnchorControl( { blockName, attributes, setAttributes } ) {
 					) }
 				</>
 			}
-			value={ attributes.anchor || '' }
+			value={ anchor || '' }
 			placeholder={ ! isWeb ? __( 'Add an anchor' ) : null }
 			onChange={ ( nextValue ) => {
 				nextValue = nextValue.replace( ANCHOR_REGEX, '-' );
@@ -116,31 +119,13 @@ function BlockEditAnchorControl( { blockName, attributes, setAttributes } ) {
 	);
 }
 
-/**
- * Override the default edit UI to include a new block inspector control for
- * assigning the anchor ID, if block supports anchor.
- *
- * @param {Component} BlockEdit Original component.
- *
- * @return {Component} Wrapped component.
- */
-export const withAnchorControls = createHigherOrderComponent( ( BlockEdit ) => {
-	return ( props ) => {
-		return (
-			<>
-				<BlockEdit { ...props } />
-				{ props.isSelected &&
-					hasBlockSupport( props.name, 'anchor' ) && (
-						<BlockEditAnchorControl
-							blockName={ props.name }
-							attributes={ props.attributes }
-							setAttributes={ props.setAttributes }
-						/>
-					) }
-			</>
-		);
-	};
-}, 'withAnchorControls' );
+export default {
+	edit: BlockEditAnchorControlPure,
+	attributeKeys: [ 'anchor' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, 'anchor' );
+	},
+};
 
 /**
  * Override props assigned to save component to inject anchor ID, if block
@@ -162,11 +147,6 @@ export function addSaveProps( extraProps, blockType, attributes ) {
 }
 
 addFilter( 'blocks.registerBlockType', 'core/anchor/attribute', addAttribute );
-addFilter(
-	'editor.BlockEdit',
-	'core/editor/anchor/with-inspector-controls',
-	withAnchorControls
-);
 addFilter(
 	'blocks.getSaveContent.extraProps',
 	'core/editor/anchor/save-props',