@wordpress/block-editor 9.8.1-next.957ca95e4c.0 → 10.0.1

package/src/components/block-popover/inbetween.js

@@ -7,7 +7,12 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { useCallback, useMemo, createContext } from '@wordpress/element';
+import {
+	useMemo,
+	createContext,
+	useReducer,
+	useLayoutEffect,
+} from '@wordpress/element';
 import { Popover } from '@wordpress/components';
 import { isRTL } from '@wordpress/i18n';
 
@@ -28,6 +33,12 @@ function BlockPopoverInbetween( {
 	__unstableContentRef,
 	...props
 } ) {
+	// This is a temporary hack to get the inbetween inserter to recompute properly.
+	const [ positionRecompute, forceRecompute ] = useReducer(
+		( s ) => s + 1,
+		0
+	);
+
 	const { orientation, rootClientId, isVisible } = useSelect(
 		( select ) => {
 			const {
@@ -36,7 +47,9 @@ function BlockPopoverInbetween( {
 				isBlockVisible,
 			} = select( blockEditorStore );
 
-			const _rootClientId = getBlockRootClientId( previousClientId );
+			const _rootClientId = getBlockRootClientId(
+				previousClientId ?? nextClientId
+			);
 			return {
 				orientation:
 					getBlockListSettings( _rootClientId )?.orientation ||
@@ -47,7 +60,7 @@ function BlockPopoverInbetween( {
 					isBlockVisible( nextClientId ),
 			};
 		},
-		[ previousClientId ]
+		[ previousClientId, nextClientId ]
 	);
 	const previousElement = useBlockElement( previousClientId );
 	const nextElement = useBlockElement( nextClientId );
@@ -66,9 +79,7 @@ function BlockPopoverInbetween( {
 
 		if ( isVertical ) {
 			return {
-				width: previousElement
-					? previousElement.offsetWidth
-					: nextElement.offsetWidth,
+				width: previousRect ? previousRect.width : nextRect.width,
 				height:
 					nextRect && previousRect
 						? nextRect.top - previousRect.bottom
@@ -85,74 +96,118 @@ function BlockPopoverInbetween( {
 
 		return {
 			width,
-			height: previousElement
-				? previousElement.offsetHeight
-				: nextElement.offsetHeight,
+			height: previousRect ? previousRect.height : nextRect.height,
 		};
-	}, [ previousElement, nextElement, isVertical ] );
+	}, [
+		previousElement,
+		nextElement,
+		isVertical,
+		positionRecompute,
+		isVisible,
+	] );
 
-	const getAnchorRect = useCallback( () => {
+	const popoverAnchor = useMemo( () => {
 		if ( ( ! previousElement && ! nextElement ) || ! isVisible ) {
-			return {};
+			return undefined;
 		}
 
 		const { ownerDocument } = previousElement || nextElement;
 
-		const previousRect = previousElement
-			? previousElement.getBoundingClientRect()
-			: null;
-		const nextRect = nextElement
-			? nextElement.getBoundingClientRect()
-			: null;
+		return {
+			ownerDocument,
+			getBoundingClientRect() {
+				const previousRect = previousElement
+					? previousElement.getBoundingClientRect()
+					: null;
+				const nextRect = nextElement
+					? nextElement.getBoundingClientRect()
+					: null;
 
-		if ( isVertical ) {
-			if ( isRTL() ) {
-				return {
-					top: previousRect ? previousRect.bottom : nextRect.top,
-					left: previousRect ? previousRect.right : nextRect.right,
-					right: previousRect ? previousRect.left : nextRect.left,
-					bottom: nextRect ? nextRect.top : previousRect.bottom,
-					height: 0,
-					width: 0,
-					ownerDocument,
-				};
-			}
+				let left = 0;
+				let top = 0;
 
-			return {
-				top: previousRect ? previousRect.bottom : nextRect.top,
-				left: previousRect ? previousRect.left : nextRect.left,
-				right: previousRect ? previousRect.right : nextRect.right,
-				bottom: nextRect ? nextRect.top : previousRect.bottom,
-				height: 0,
-				width: 0,
-				ownerDocument,
-			};
+				if ( isVertical ) {
+					// vertical
+					top = previousRect ? previousRect.bottom : nextRect.top;
+
+					if ( isRTL() ) {
+						// vertical, rtl
+						left = previousRect
+							? previousRect.right
+							: nextRect.right;
+					} else {
+						// vertical, ltr
+						left = previousRect ? previousRect.left : nextRect.left;
+					}
+				} else {
+					top = previousRect ? previousRect.top : nextRect.top;
+
+					if ( isRTL() ) {
+						// non vertical, rtl
+						left = previousRect
+							? previousRect.left
+							: nextRect.right;
+					} else {
+						// non vertical, ltr
+						left = previousRect
+							? previousRect.right
+							: nextRect.left;
+					}
+				}
+
+				return new window.DOMRect( left, top, 0, 0 );
+			},
+		};
+	}, [
+		previousElement,
+		nextElement,
+		positionRecompute,
+		isVertical,
+		isVisible,
+	] );
+
+	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
+
+	// This is only needed for a smooth transition when moving blocks.
+	useLayoutEffect( () => {
+		if ( ! previousElement ) {
+			return;
 		}
+		const observer = new window.MutationObserver( forceRecompute );
+		observer.observe( previousElement, { attributes: true } );
 
-		if ( isRTL() ) {
-			return {
-				top: previousRect ? previousRect.top : nextRect.top,
-				left: previousRect ? previousRect.left : nextRect.right,
-				right: nextRect ? nextRect.right : previousRect.left,
-				bottom: previousRect ? previousRect.bottom : nextRect.bottom,
-				height: 0,
-				width: 0,
-				ownerDocument,
-			};
+		return () => {
+			observer.disconnect();
+		};
+	}, [ previousElement ] );
+
+	useLayoutEffect( () => {
+		if ( ! nextElement ) {
+			return;
 		}
+		const observer = new window.MutationObserver( forceRecompute );
+		observer.observe( nextElement, { attributes: true } );
 
-		return {
-			top: previousRect ? previousRect.top : nextRect.top,
-			left: previousRect ? previousRect.right : nextRect.left,
-			right: nextRect ? nextRect.left : previousRect.right,
-			bottom: previousRect ? previousRect.bottom : nextRect.bottom,
-			height: 0,
-			width: 0,
-			ownerDocument,
+		return () => {
+			observer.disconnect();
 		};
-	}, [ previousElement, nextElement ] );
+	}, [ nextElement ] );
 
-	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
+	useLayoutEffect( () => {
+		if ( ! previousElement ) {
+			return;
+		}
+		previousElement.ownerDocument.defaultView.addEventListener(
+			'resize',
+			forceRecompute
+		);
+		return () => {
+			previousElement.ownerDocument.defaultView.removeEventListener(
+				'resize',
+				forceRecompute
+			);
+		};
+	}, [ previousElement ] );
 
 	// If there's either a previous or a next element, show the inbetween popover.
 	// Note that drag and drop uses the inbetween popover to show the drop indicator
@@ -172,7 +227,7 @@ function BlockPopoverInbetween( {
 		<Popover
 			ref={ popoverScrollRef }
 			animate={ false }
-			getAnchorRect={ getAnchorRect }
+			anchor={ popoverAnchor }
 			focusOnMount={ false }
 			// Render in the old slot if needed for backward compatibility,
 			// otherwise render in place (not in the default popover slot).
@@ -186,9 +241,16 @@ function BlockPopoverInbetween( {
 				'block-editor-block-popover__inbetween',
 				props.className
 			) }
-			__unstableForcePosition
+			resize={ false }
+			flip={ false }
+			placement="bottom-start"
 		>
-			<div style={ style }>{ children }</div>
+			<div
+				className="block-editor-block-popover__inbetween-container"
+				style={ style }
+			>
+				{ children }
+			</div>
 		</Popover>
 	);
 	/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */

package/src/components/block-popover/index.js

@@ -47,27 +47,66 @@ function BlockPopover(
 		};
 	}, [ selectedElement, lastSelectedElement, __unstableRefreshSize ] );
 
+	const popoverAnchor = useMemo( () => {
+		if (
+			! selectedElement ||
+			( bottomClientId && ! lastSelectedElement )
+		) {
+			return undefined;
+		}
+
+		return {
+			getBoundingClientRect() {
+				const selectedBCR = selectedElement.getBoundingClientRect();
+				const lastSelectedBCR =
+					lastSelectedElement?.getBoundingClientRect();
+
+				// Get the biggest rectangle that encompasses completely the currently
+				// selected element and the last selected element:
+				// - for top/left coordinates, use the smaller numbers
+				// - for the bottom/right coordinates, use the largest numbers
+				const left = Math.min(
+					selectedBCR.left,
+					lastSelectedBCR?.left ?? Infinity
+				);
+				const top = Math.min(
+					selectedBCR.top,
+					lastSelectedBCR?.top ?? Infinity
+				);
+				const right = Math.max(
+					selectedBCR.right,
+					lastSelectedBCR.right ?? -Infinity
+				);
+				const bottom = Math.max(
+					selectedBCR.bottom,
+					lastSelectedBCR.bottom ?? -Infinity
+				);
+				const width = right - left;
+				const height = bottom - top;
+
+				return new window.DOMRect( left, top, width, height );
+			},
+			ownerDocument: selectedElement.ownerDocument,
+		};
+	}, [ bottomClientId, lastSelectedElement, selectedElement ] );
+
 	if ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) {
 		return null;
 	}
 
-	const anchorRef = {
-		top: selectedElement,
-		bottom: lastSelectedElement,
-	};
-
 	return (
 		<Popover
 			ref={ mergedRefs }
 			animate={ false }
 			position="top right left"
 			focusOnMount={ false }
-			anchorRef={ anchorRef }
+			anchor={ popoverAnchor }
 			// Render in the old slot if needed for backward compatibility,
 			// otherwise render in place (not in the default popover slot).
 			__unstableSlotName={ __unstablePopoverSlot || null }
-			__unstableForcePosition
-			__unstableShift
+			resize={ false }
+			flip={ false }
+			shift
 			{ ...props }
 			className={ classnames(
 				'block-editor-block-popover',

package/src/components/block-popover/style.scss

@@ -6,6 +6,9 @@
 	// like the popover is impacted by the block gap margin.
 	margin: 0 !important;
 
+	// Allow clicking through the toolbar holder.
+	pointer-events: none;
+
 	.components-popover__content {
 		margin: 0 !important;
 		min-width: auto;
@@ -15,9 +18,6 @@
 		outline: none;
 		box-shadow: none;
 		overflow-y: visible;
-
-		// Allow clicking through the toolbar holder.
-		pointer-events: none;
 	}
 
 	// Enable pointer events for the toolbar's content.
@@ -39,7 +39,6 @@
 	}
 
 	// Re-enable pointer events when the inbetween inserter has a '+' button.
-	//
 	// Needs specificity, do not simplify.
 	.is-with-inserter {
 		pointer-events: all;

package/src/components/block-preview/auto.js

@@ -91,8 +91,10 @@ function AutoBlockPreview( {
 						bodyElement.style.padding =
 							__experimentalPadding + 'px';
 
-						// necessary for contentResizeListener to work.
-						bodyElement.style.position = 'relative';
+						// Necessary for contentResizeListener to work.
+						bodyElement.style.boxSizing = 'border-box';
+						bodyElement.style.position = 'absolute';
+						bodyElement.style.width = '100%';
 					}, [] ) }
 					aria-hidden
 					tabIndex={ -1 }

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -51,6 +51,7 @@ export function BlockSettingsDropdown( {
 	clientIds,
 	__experimentalSelectBlock,
 	children,
+	__unstableDisplayLocation,
 	...props
 } ) {
 	const blockClientIds = castArray( clientIds );
@@ -289,6 +290,9 @@ export function BlockSettingsDropdown( {
 							<BlockSettingsMenuControls.Slot
 								fillProps={ { onClose } }
 								clientIds={ clientIds }
+								__unstableDisplayLocation={
+									__unstableDisplayLocation
+								}
 							/>
 							{ typeof children === 'function'
 								? children( { onClose } )

package/src/components/block-settings-menu-controls/README.md

@@ -16,3 +16,12 @@ function ReusableBlocksMenuItems() {
 	);
 }
 ```
+
+## Props
+
+### `__unstableDisplayLocation`
+
+-   **Type:** `String`
+-   **Default:** `undefined`
+
+A string representing the location where the component is being displayed within the UI. This can be used to conditionalize certain behaviors including the display of associated components. This behaviour will likely be refactored to a React.Context implementation.

package/src/components/block-settings-menu-controls/index.js

@@ -25,7 +25,11 @@ import { store as blockEditorStore } from '../../store';
 
 const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' );
 
-const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
+const BlockSettingsMenuControlsSlot = ( {
+	fillProps,
+	clientIds = null,
+	__unstableDisplayLocation,
+} ) => {
 	const { selectedBlocks, selectedClientIds, canRemove } = useSelect(
 		( select ) => {
 			const {
@@ -58,7 +62,14 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 		( isGroupable || isUngroupable ) && canRemove;
 
 	return (
-		<Slot fillProps={ { ...fillProps, selectedBlocks, selectedClientIds } }>
+		<Slot
+			fillProps={ {
+				...fillProps,
+				__unstableDisplayLocation,
+				selectedBlocks,
+				selectedClientIds,
+			} }
+		>
 			{ ( fills ) => {
 				if (
 					! fills?.length > 0 &&

package/src/components/block-styles/preview-panel.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { getBlockType } from '@wordpress/blocks';
 import { useMemo } from '@wordpress/element';
 
 /**
@@ -15,6 +16,7 @@ export default function BlockStylesPreviewPanel( {
 	className,
 	activeStyle,
 } ) {
+	const example = getBlockType( genericPreviewBlock.name )?.example;
 	const styleClassName = replaceActiveStyle( className, activeStyle, style );
 	const previewBlocks = useMemo( () => {
 		return {
@@ -27,6 +29,7 @@ export default function BlockStylesPreviewPanel( {
 					styleClassName +
 					' block-editor-block-styles__block-preview-container',
 			},
+			example,
 		};
 	}, [ genericPreviewBlock, styleClassName ] );
 

package/src/components/block-switcher/block-transformations-menu.js

@@ -7,7 +7,7 @@ import {
 	getBlockMenuDefaultClassName,
 	switchToBlockType,
 } from '@wordpress/blocks';
-import { useState } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -15,6 +15,53 @@ import { useState } from '@wordpress/element';
 import BlockIcon from '../block-icon';
 import PreviewBlockPopover from './preview-block-popover';
 
+/**
+ * Helper hook to group transformations to display them in a specific order in the UI.
+ * For now we group only priority content driven transformations(ex. paragraph -> heading).
+ *
+ * Later on we could also group 'layout' transformations(ex. paragraph -> group) and
+ * display them in different sections.
+ *
+ * @param {Object[]} possibleBlockTransformations The available block transformations.
+ * @return {Record<string, Object[]>} The grouped block transformations.
+ */
+function useGroupedTransforms( possibleBlockTransformations ) {
+	const priorityContentTranformationBlocks = {
+		'core/paragraph': 1,
+		'core/heading': 2,
+		'core/list': 3,
+		'core/quote': 4,
+	};
+	const transformations = useMemo( () => {
+		const priorityTextTranformsNames = Object.keys(
+			priorityContentTranformationBlocks
+		);
+		return possibleBlockTransformations.reduce(
+			( accumulator, item ) => {
+				const { name } = item;
+				if ( priorityTextTranformsNames.includes( name ) ) {
+					accumulator.priorityTextTransformations.push( item );
+				} else {
+					accumulator.restTransformations.push( item );
+				}
+				return accumulator;
+			},
+			{ priorityTextTransformations: [], restTransformations: [] }
+		);
+	}, [ possibleBlockTransformations ] );
+
+	// Order the priority text transformations.
+	transformations.priorityTextTransformations.sort(
+		( { name: currentName }, { name: nextName } ) => {
+			return priorityContentTranformationBlocks[ currentName ] <
+				priorityContentTranformationBlocks[ nextName ]
+				? -1
+				: 1;
+		}
+	);
+	return transformations;
+}
+
 const BlockTransformationsMenu = ( {
 	className,
 	possibleBlockTransformations,
@@ -23,41 +70,88 @@ const BlockTransformationsMenu = ( {
 } ) => {
 	const [ hoveredTransformItemName, setHoveredTransformItemName ] =
 		useState();
+
+	const { priorityTextTransformations, restTransformations } =
+		useGroupedTransforms( possibleBlockTransformations );
+	// We have to check if both content transformations(priority and rest) are set
+	// in order to create a separate MenuGroup for them.
+	const hasBothContentTransformations =
+		priorityTextTransformations.length && restTransformations.length;
+	const restTransformItems = !! restTransformations.length && (
+		<RestTransformationItems
+			restTransformations={ restTransformations }
+			onSelect={ onSelect }
+			setHoveredTransformItemName={ setHoveredTransformItemName }
+		/>
+	);
 	return (
-		<MenuGroup label={ __( 'Transform to' ) } className={ className }>
-			{ hoveredTransformItemName && (
-				<PreviewBlockPopover
-					blocks={ switchToBlockType(
-						blocks,
-						hoveredTransformItemName
-					) }
-				/>
-			) }
-			{ possibleBlockTransformations.map( ( item ) => {
-				const { name, icon, title, isDisabled } = item;
-				return (
-					<MenuItem
-						key={ name }
-						className={ getBlockMenuDefaultClassName( name ) }
-						onClick={ ( event ) => {
-							event.preventDefault();
-							onSelect( name );
-						} }
-						disabled={ isDisabled }
-						onMouseLeave={ () =>
-							setHoveredTransformItemName( null )
+		<>
+			<MenuGroup label={ __( 'Transform to' ) } className={ className }>
+				{ hoveredTransformItemName && (
+					<PreviewBlockPopover
+						blocks={ switchToBlockType(
+							blocks,
+							hoveredTransformItemName
+						) }
+					/>
+				) }
+				{ priorityTextTransformations.map( ( item ) => (
+					<BlockTranformationItem
+						key={ item.name }
+						item={ item }
+						onSelect={ onSelect }
+						setHoveredTransformItemName={
+							setHoveredTransformItemName
 						}
-						onMouseEnter={ () =>
-							setHoveredTransformItemName( name )
-						}
-					>
-						<BlockIcon icon={ icon } showColors />
-						{ title }
-					</MenuItem>
-				);
-			} ) }
-		</MenuGroup>
+					/>
+				) ) }
+				{ ! hasBothContentTransformations && restTransformItems }
+			</MenuGroup>
+			{ !! hasBothContentTransformations && (
+				<MenuGroup className={ className }>
+					{ restTransformItems }
+				</MenuGroup>
+			) }
+		</>
 	);
 };
 
+function RestTransformationItems( {
+	restTransformations,
+	onSelect,
+	setHoveredTransformItemName,
+} ) {
+	return restTransformations.map( ( item ) => (
+		<BlockTranformationItem
+			key={ item.name }
+			item={ item }
+			onSelect={ onSelect }
+			setHoveredTransformItemName={ setHoveredTransformItemName }
+		/>
+	) );
+}
+
+function BlockTranformationItem( {
+	item,
+	onSelect,
+	setHoveredTransformItemName,
+} ) {
+	const { name, icon, title, isDisabled } = item;
+	return (
+		<MenuItem
+			className={ getBlockMenuDefaultClassName( name ) }
+			onClick={ ( event ) => {
+				event.preventDefault();
+				onSelect( name );
+			} }
+			disabled={ isDisabled }
+			onMouseLeave={ () => setHoveredTransformItemName( null ) }
+			onMouseEnter={ () => setHoveredTransformItemName( name ) }
+		>
+			<BlockIcon icon={ icon } showColors />
+			{ title }
+		</MenuItem>
+	);
+}
+
 export default BlockTransformationsMenu;

package/src/components/block-switcher/style.scss

@@ -119,8 +119,10 @@
 	.block-editor-block-switcher__preview {
 		width: 300px;
 		height: auto;
-		max-height: 500px;
-		padding: $grid-unit-20;
+		// Subtract margin from max-height.
+		max-height: calc(500px - #{$grid-unit-40});
+		margin: $grid-unit-20;
+		overflow: hidden;
 	}
 }