@wordpress/block-editor 9.7.1-next.d6164808d3.0 → 10.0.0

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

@@ -7,7 +7,13 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { useCallback, useMemo, createContext } from '@wordpress/element';
+import {
+	useCallback,
+	useMemo,
+	createContext,
+	useReducer,
+	useLayoutEffect,
+} from '@wordpress/element';
 import { Popover } from '@wordpress/components';
 import { isRTL } from '@wordpress/i18n';
 
@@ -28,6 +34,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 +48,9 @@ function BlockPopoverInbetween( {
 				isBlockVisible,
 			} = select( blockEditorStore );
 
-			const _rootClientId = getBlockRootClientId( previousClientId );
+			const _rootClientId = getBlockRootClientId(
+				previousClientId ?? nextClientId
+			);
 			return {
 				orientation:
 					getBlockListSettings( _rootClientId )?.orientation ||
@@ -47,7 +61,7 @@ function BlockPopoverInbetween( {
 					isBlockVisible( nextClientId ),
 			};
 		},
-		[ previousClientId ]
+		[ previousClientId, nextClientId ]
 	);
 	const previousElement = useBlockElement( previousClientId );
 	const nextElement = useBlockElement( nextClientId );
@@ -66,9 +80,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,11 +97,15 @@ 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( () => {
 		if ( ( ! previousElement && ! nextElement ) || ! isVisible ) {
@@ -110,8 +126,8 @@ function BlockPopoverInbetween( {
 				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,
+					right: previousRect ? previousRect.right : nextRect.right,
+					bottom: previousRect ? previousRect.bottom : nextRect.top,
 					height: 0,
 					width: 0,
 					ownerDocument,
@@ -121,8 +137,8 @@ function BlockPopoverInbetween( {
 			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,
+				right: previousRect ? previousRect.left : nextRect.left,
+				bottom: previousRect ? previousRect.bottom : nextRect.top,
 				height: 0,
 				width: 0,
 				ownerDocument,
@@ -133,8 +149,8 @@ function BlockPopoverInbetween( {
 			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,
+				right: previousRect ? previousRect.left : nextRect.right,
+				bottom: previousRect ? previousRect.top : nextRect.top,
 				height: 0,
 				width: 0,
 				ownerDocument,
@@ -144,16 +160,57 @@ function BlockPopoverInbetween( {
 		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,
+			right: previousRect ? previousRect.right : nextRect.left,
+			bottom: previousRect ? previousRect.left : nextRect.right,
 			height: 0,
 			width: 0,
 			ownerDocument,
 		};
-	}, [ previousElement, nextElement ] );
+	}, [ previousElement, nextElement, positionRecompute, 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 } );
+
+		return () => {
+			observer.disconnect();
+		};
+	}, [ previousElement ] );
+
+	useLayoutEffect( () => {
+		if ( ! nextElement ) {
+			return;
+		}
+		const observer = new window.MutationObserver( forceRecompute );
+		observer.observe( nextElement, { attributes: true } );
+
+		return () => {
+			observer.disconnect();
+		};
+	}, [ nextElement ] );
+
+	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
 	// before the first block and after the last block.
@@ -186,9 +243,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

@@ -6,8 +6,9 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { useMergeRefs } from '@wordpress/compose';
 import { Popover } from '@wordpress/components';
-import { useMemo } from '@wordpress/element';
+import { forwardRef, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -15,19 +16,25 @@ import { useMemo } from '@wordpress/element';
 import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import usePopoverScroll from './use-popover-scroll';
 
-export default function BlockPopover( {
-	clientId,
-	bottomClientId,
-	children,
-	__unstableRefreshSize,
-	__unstableCoverTarget = false,
-	__unstablePopoverSlot,
-	__unstableContentRef,
-	...props
-} ) {
+function BlockPopover(
+	{
+		clientId,
+		bottomClientId,
+		children,
+		__unstableRefreshSize,
+		__unstableCoverTarget = false,
+		__unstablePopoverSlot,
+		__unstableContentRef,
+		...props
+	},
+	ref
+) {
 	const selectedElement = useBlockElement( clientId );
 	const lastSelectedElement = useBlockElement( bottomClientId ?? clientId );
-	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
+	const mergedRefs = useMergeRefs( [
+		ref,
+		usePopoverScroll( __unstableContentRef ),
+	] );
 	const style = useMemo( () => {
 		if ( ! selectedElement || lastSelectedElement !== selectedElement ) {
 			return {};
@@ -51,7 +58,7 @@ export default function BlockPopover( {
 
 	return (
 		<Popover
-			ref={ popoverScrollRef }
+			ref={ mergedRefs }
 			animate={ false }
 			position="top right left"
 			focusOnMount={ false }
@@ -59,10 +66,9 @@ export default function BlockPopover( {
 			// Render in the old slot if needed for backward compatibility,
 			// otherwise render in place (not in the default popover slot).
 			__unstableSlotName={ __unstablePopoverSlot || null }
-			// Observe movement for block animations (especially horizontal).
-			__unstableObserveElement={ selectedElement }
-			__unstableForcePosition
-			__unstableShift
+			resize={ false }
+			flip={ false }
+			shift
 			{ ...props }
 			className={ classnames(
 				'block-editor-block-popover',
@@ -74,3 +80,5 @@ export default function BlockPopover( {
 		</Popover>
 	);
 }
+
+export default forwardRef( BlockPopover );

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;
 	}
 }
 

package/src/components/block-switcher/test/index.js

@@ -8,7 +8,6 @@ import { shallow, mount } from 'enzyme';
  */
 import { useSelect } from '@wordpress/data';
 import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
-import { DOWN } from '@wordpress/keycodes';
 import { Button } from '@wordpress/components';
 import { copy } from '@wordpress/icons';
 
@@ -180,7 +179,7 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 			const onToggleStub = jest.fn();
 			const mockKeyDown = {
 				preventDefault: () => {},
-				keyCode: DOWN,
+				code: 'ArrowDown',
 			};
 
 			afterEach( () => {