@wordpress/block-editor 10.0.2 → 10.1.1-next.4d3b314fd5.0

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

@@ -8,7 +8,12 @@ import classnames from 'classnames';
  */
 import { useMergeRefs } from '@wordpress/compose';
 import { Popover } from '@wordpress/components';
-import { forwardRef, useMemo } from '@wordpress/element';
+import {
+	forwardRef,
+	useMemo,
+	useReducer,
+	useLayoutEffect,
+} from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -16,6 +21,8 @@ import { forwardRef, useMemo } from '@wordpress/element';
 import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import usePopoverScroll from './use-popover-scroll';
 
+const MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER;
+
 function BlockPopover(
 	{
 		clientId,
@@ -47,8 +54,41 @@ function BlockPopover(
 		};
 	}, [ selectedElement, lastSelectedElement, __unstableRefreshSize ] );
 
+	const [ popoverAnchorRecomputeCounter, forceRecomputePopoverAnchor ] =
+		useReducer(
+			// Module is there to make sure that the counter doesn't overflow.
+			( s ) => ( s + 1 ) % MAX_POPOVER_RECOMPUTE_COUNTER,
+			0
+		);
+
+	// When blocks are moved up/down, they are animated to their new position by
+	// updating the `transform` property manually (i.e. without using CSS
+	// transitions or animations). The animation, which can also scroll the block
+	// editor, can sometimes cause the position of the Popover to get out of sync.
+	// A MutationObserver is therefore used to make sure that changes to the
+	// selectedElement's attribute (i.e. `transform`) can be tracked and used to
+	// trigger the Popover to rerender.
+	useLayoutEffect( () => {
+		if ( ! selectedElement ) {
+			return;
+		}
+
+		const observer = new window.MutationObserver(
+			forceRecomputePopoverAnchor
+		);
+		observer.observe( selectedElement, { attributes: true } );
+
+		return () => {
+			observer.disconnect();
+		};
+	}, [ selectedElement ] );
+
 	const popoverAnchor = useMemo( () => {
 		if (
+			// popoverAnchorRecomputeCounter is by definition always equal or greater
+			// than 0. This check is only there to satisfy the correctness of the
+			// exhaustive-deps rule for the `useMemo` hook.
+			popoverAnchorRecomputeCounter < 0 ||
 			! selectedElement ||
 			( bottomClientId && ! lastSelectedElement )
 		) {
@@ -88,7 +128,12 @@ function BlockPopover(
 			},
 			ownerDocument: selectedElement.ownerDocument,
 		};
-	}, [ bottomClientId, lastSelectedElement, selectedElement ] );
+	}, [
+		bottomClientId,
+		lastSelectedElement,
+		selectedElement,
+		popoverAnchorRecomputeCounter,
+	] );
 
 	if ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) {
 		return null;
@@ -98,7 +143,6 @@ function BlockPopover(
 		<Popover
 			ref={ mergedRefs }
 			animate={ false }
-			position="top right left"
 			focusOnMount={ false }
 			anchor={ popoverAnchor }
 			// Render in the old slot if needed for backward compatibility,

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

@@ -20,13 +20,12 @@ let MemoizedBlockList;
 
 const MAX_HEIGHT = 2000;
 
-function AutoBlockPreview( {
+function ScaledBlockPreview( {
 	viewportWidth,
+	containerWidth,
 	__experimentalPadding,
 	__experimentalMinHeight,
 } ) {
-	const [ containerResizeListener, { width: containerWidth } ] =
-		useResizeObserver();
 	const [ contentResizeListener, { height: contentHeight } ] =
 		useResizeObserver();
 	const { styles, assets, duotone } = useSelect( ( select ) => {
@@ -62,71 +61,84 @@ function AutoBlockPreview( {
 
 	const scale = containerWidth / viewportWidth;
 	return (
-		<div className="block-editor-block-preview__container">
-			{ containerResizeListener }
-			<Disabled
-				className="block-editor-block-preview__content"
+		<Disabled
+			className="block-editor-block-preview__content"
+			style={ {
+				transform: `scale(${ scale })`,
+				height: contentHeight * scale,
+				maxHeight:
+					contentHeight > MAX_HEIGHT ? MAX_HEIGHT * scale : undefined,
+				minHeight: __experimentalMinHeight,
+			} }
+		>
+			<Iframe
+				head={ <EditorStyles styles={ editorStyles } /> }
+				assets={ assets }
+				contentRef={ useRefEffect( ( bodyElement ) => {
+					const {
+						ownerDocument: { documentElement },
+					} = bodyElement;
+					documentElement.classList.add(
+						'block-editor-block-preview__content-iframe'
+					);
+					documentElement.style.position = 'absolute';
+					documentElement.style.width = '100%';
+					bodyElement.style.padding = __experimentalPadding + 'px';
+
+					// Necessary for contentResizeListener to work.
+					bodyElement.style.boxSizing = 'border-box';
+					bodyElement.style.position = 'absolute';
+					bodyElement.style.width = '100%';
+				}, [] ) }
+				aria-hidden
+				tabIndex={ -1 }
 				style={ {
-					transform: `scale(${ scale })`,
-					height: contentHeight * scale,
-					maxHeight:
-						contentHeight > MAX_HEIGHT
-							? MAX_HEIGHT * scale
-							: undefined,
-					minHeight: __experimentalMinHeight,
+					position: 'absolute',
+					width: viewportWidth,
+					height: contentHeight,
+					pointerEvents: 'none',
+					// This is a catch-all max-height for patterns.
+					// See: https://github.com/WordPress/gutenberg/pull/38175.
+					maxHeight: MAX_HEIGHT,
+					minHeight:
+						scale !== 0 && scale < 1 && __experimentalMinHeight
+							? __experimentalMinHeight / scale
+							: __experimentalMinHeight,
 				} }
 			>
-				<Iframe
-					head={ <EditorStyles styles={ editorStyles } /> }
-					assets={ assets }
-					contentRef={ useRefEffect( ( bodyElement ) => {
-						const {
-							ownerDocument: { documentElement },
-						} = bodyElement;
-						documentElement.classList.add(
-							'block-editor-block-preview__content-iframe'
-						);
-						documentElement.style.position = 'absolute';
-						documentElement.style.width = '100%';
-						bodyElement.style.padding =
-							__experimentalPadding + 'px';
-
-						// Necessary for contentResizeListener to work.
-						bodyElement.style.boxSizing = 'border-box';
-						bodyElement.style.position = 'absolute';
-						bodyElement.style.width = '100%';
-					}, [] ) }
-					aria-hidden
-					tabIndex={ -1 }
-					style={ {
-						position: 'absolute',
-						width: viewportWidth,
-						height: contentHeight,
-						pointerEvents: 'none',
-						// This is a catch-all max-height for patterns.
-						// See: https://github.com/WordPress/gutenberg/pull/38175.
-						maxHeight: MAX_HEIGHT,
-						minHeight:
-							scale !== 0 && scale < 1 && __experimentalMinHeight
-								? __experimentalMinHeight / scale
-								: __experimentalMinHeight,
-					} }
-				>
-					{ contentResizeListener }
-					{
-						/* Filters need to be rendered before children to avoid Safari rendering issues. */
-						svgFilters.map( ( preset ) => (
-							<PresetDuotoneFilter
-								preset={ preset }
-								key={ preset.slug }
-							/>
-						) )
-					}
-					<MemoizedBlockList renderAppender={ false } />
-				</Iframe>
-			</Disabled>
-		</div>
+				{ contentResizeListener }
+				{
+					/* Filters need to be rendered before children to avoid Safari rendering issues. */
+					svgFilters.map( ( preset ) => (
+						<PresetDuotoneFilter
+							preset={ preset }
+							key={ preset.slug }
+						/>
+					) )
+				}
+				<MemoizedBlockList renderAppender={ false } />
+			</Iframe>
+		</Disabled>
 	);
 }
 
-export default AutoBlockPreview;
+export default function AutoBlockPreview( props ) {
+	const [ containerResizeListener, { width: containerWidth } ] =
+		useResizeObserver();
+
+	return (
+		<>
+			<div style={ { position: 'relative', width: '100%', height: 0 } }>
+				{ containerResizeListener }
+			</div>
+			<div className="block-editor-block-preview__container">
+				{ !! containerWidth && (
+					<ScaledBlockPreview
+						{ ...props }
+						containerWidth={ containerWidth }
+					/>
+				) }
+			</div>
+		</>
+	);
+}

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

@@ -64,3 +64,16 @@
 		display: none;
 	}
 }
+
+// The goal of this pseudo-element is to cover the iframe
+// otherwise it won't be able to drag elements containing
+// the preview iframe in Safari.
+.block-editor-block-preview__container::after {
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 1;
+}

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

@@ -1,14 +1,13 @@
 /**
  * External dependencies
  */
-import { debounce } from 'lodash';
 import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
 import { useState, useLayoutEffect } from '@wordpress/element';
-import { useViewportMatch } from '@wordpress/compose';
+import { debounce, useViewportMatch } from '@wordpress/compose';
 import {
 	Button,
 	__experimentalTruncate as Truncate,

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

@@ -20,6 +20,17 @@ import BlockContextualToolbar from './block-contextual-toolbar';
 import usePopoverScroll from '../block-popover/use-popover-scroll';
 import ZoomOutModeInserters from './zoom-out-mode-inserters';
 
+function selector( select ) {
+	const { __unstableGetEditorMode, getSettings, isTyping } =
+		select( blockEditorStore );
+
+	return {
+		isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
+		hasFixedToolbar: getSettings().hasFixedToolbar,
+		isTyping: isTyping(),
+	};
+}
+
 /**
  * Renders block tools (the block toolbar, select/navigation mode toolbar, the
  * insertion point and a slot for the inline rich text toolbar). Must be wrapped
@@ -35,15 +46,10 @@ export default function BlockTools( {
 	...props
 } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const { hasFixedToolbar, isZoomOutMode } = useSelect( ( select ) => {
-		const { __unstableGetEditorMode, getSettings } =
-			select( blockEditorStore );
-
-		return {
-			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
-			hasFixedToolbar: getSettings().hasFixedToolbar,
-		};
-	}, [] );
+	const { hasFixedToolbar, isZoomOutMode, isTyping } = useSelect(
+		selector,
+		[]
+	);
 	const isMatch = useShortcutEventMatch();
 	const { getSelectedBlockClientIds, getBlockRootClientId } =
 		useSelect( blockEditorStore );
@@ -118,7 +124,7 @@ export default function BlockTools( {
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div { ...props } onKeyDown={ onKeyDown }>
 			<InsertionPointOpenRef.Provider value={ useRef( false ) }>
-				{ ! isZoomOutMode && (
+				{ ! isTyping && (
 					<InsertionPoint
 						__unstableContentRef={ __unstableContentRef }
 					/>

package/src/components/block-tools/insertion-point.js

@@ -149,13 +149,13 @@ function InsertionPointPopover( {
 			...( ! isVertical ? horizontalLine.rest : verticalLine.rest ),
 			opacity: 1,
 			borderRadius: '2px',
-			transition: { delay: isInserterShown ? 0.4 : 0 },
+			transition: { delay: isInserterShown ? 0.1 : 0, type: 'tween' },
 		},
 		hover: {
 			...( ! isVertical ? horizontalLine.hover : verticalLine.hover ),
 			opacity: 1,
 			borderRadius: '2px',
-			transition: { delay: 0.4 },
+			transition: { delay: 0.1, type: 'tween' },
 		},
 	};
 
@@ -165,7 +165,7 @@ function InsertionPointPopover( {
 		},
 		rest: {
 			scale: 1,
-			transition: { delay: 0.2 },
+			transition: { type: 'tween' },
 		},
 	};
 

package/src/components/block-tools/use-block-toolbar-popover-props.js

@@ -11,10 +11,15 @@ import { useCallback, useLayoutEffect, useState } from '@wordpress/element';
 import { store as blockEditorStore } from '../../store';
 import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
 
+const COMMON_PROPS = {
+	placement: 'top-start',
+};
+
 // By default the toolbar sets the `shift` prop. If the user scrolls the page
 // down the toolbar will stay on screen by adopting a sticky position at the
 // top of the viewport.
 const DEFAULT_PROPS = {
+	...COMMON_PROPS,
 	flip: false,
 	shift: true,
 };
@@ -25,6 +30,7 @@ const DEFAULT_PROPS = {
 // the block. This only happens if the block is smaller than the viewport, as
 // otherwise the toolbar will be off-screen.
 const RESTRICTED_HEIGHT_PROPS = {
+	...COMMON_PROPS,
 	flip: true,
 	shift: false,
 };

package/src/components/block-variation-picker/index.native.js

@@ -85,6 +85,7 @@ function BlockVariationPicker( { isVisible, onClose, clientId, variations } ) {
 				title={ __( 'Select a layout' ) }
 				contentStyle={ styles.contentStyle }
 				leftButton={ leftButton }
+				testID="block-variation-modal"
 			>
 				<ScrollView
 					horizontal

package/src/components/button-block-appender/index.native.js

@@ -43,6 +43,7 @@ function ButtonBlockAppender( {
 				rootClientId={ rootClientId }
 				renderToggle={ ( { onToggle, disabled, isOpen } ) => (
 					<Button
+						testID="appender-button"
 						onClick={ onAddBlock || onToggle }
 						aria-expanded={ isOpen }
 						disabled={ disabled }

package/src/components/index.js

@@ -155,6 +155,7 @@ export {
 export { default as __experimentalBlockPatternsList } from './block-patterns-list';
 export { default as __experimentalPublishDateTimePicker } from './publish-date-time-picker';
 export { default as __experimentalInspectorPopoverHeader } from './inspector-popover-header';
+export { default as __experimentalUseOnBlockDrop } from './use-on-block-drop';
 
 /*
  * State Related Components

package/src/components/link-control/test/index.js

@@ -24,8 +24,7 @@ import {
 } from './fixtures';
 
 // Mock debounce() so that it runs instantly.
-jest.mock( 'lodash', () => ( {
-	...jest.requireActual( 'lodash' ),
+jest.mock( '@wordpress/compose/src/utils/debounce', () => ( {
 	debounce: ( fn ) => {
 		fn.cancel = jest.fn();
 		return fn;

package/src/components/list-view/index.js

@@ -188,6 +188,7 @@ function ListView(
 				onCollapseRow={ collapseRow }
 				onExpandRow={ expandRow }
 				onFocusRow={ focusRow }
+				applicationAriaLabel={ __( 'Block navigation structure' ) }
 			>
 				<ListViewContext.Provider value={ contextValue }>
 					<ListViewBranch

package/src/components/rich-text/format-toolbar-container.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { Popover, ToolbarGroup } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import {
@@ -15,6 +16,7 @@ import {
  */
 import BlockControls from '../block-controls';
 import FormatToolbar from './format-toolbar';
+import NavigableToolbar from '../navigable-toolbar';
 import { store as blockEditorStore } from '../../store';
 
 function InlineSelectionToolbar( {
@@ -46,11 +48,15 @@ function InlineToolbar( { popoverAnchor } ) {
 			className="block-editor-rich-text__inline-format-toolbar"
 			__unstableSlotName="block-toolbar"
 		>
-			<div className="block-editor-rich-text__inline-format-toolbar-group">
+			<NavigableToolbar
+				className="block-editor-rich-text__inline-format-toolbar-group"
+				/* translators: accessibility text for the inline format toolbar */
+				aria-label={ __( 'Format tools' ) }
+			>
 				<ToolbarGroup>
 					<FormatToolbar />
 				</ToolbarGroup>
-			</div>
+			</NavigableToolbar>
 		</Popover>
 	);
 }

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

@@ -173,6 +173,13 @@ function RichTextWrapper(
 
 	// Handle deprecated format.
 	if ( Array.isArray( originalValue ) ) {
+		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/',
+		} );
+
 		adjustedValue = childrenSource.toHTML( originalValue );
 		adjustedOnChange = ( newValue ) =>
 			originalOnChange(
@@ -436,6 +443,13 @@ ForwardedRichTextContainer.Content = ( {
 } ) => {
 	// Handle deprecated `children` and `node` sources.
 	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( value );
 	}
 

package/src/components/url-input/index.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { debounce } from 'lodash';
 import classnames from 'classnames';
 import scrollIntoView from 'dom-scroll-into-view';
 
@@ -18,7 +17,12 @@ import {
 	withSpokenMessages,
 	Popover,
 } from '@wordpress/components';
-import { withInstanceId, withSafeTimeout, compose } from '@wordpress/compose';
+import {
+	compose,
+	debounce,
+	withInstanceId,
+	withSafeTimeout,
+} from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
 import { isURL } from '@wordpress/url';
 

package/src/components/url-popover/image-url-input-ui.js

@@ -221,7 +221,7 @@ const ImageURLInputUI = ( {
 				checked={ linkTarget === '_blank' }
 			/>
 			<TextControl
-				label={ __( 'Link Rel' ) }
+				label={ __( 'Link rel' ) }
 				value={ rel ?? '' }
 				onChange={ onSetLinkRel }
 			/>

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

@@ -73,6 +73,20 @@ export function getNearestBlockIndex( elements, position, orientation ) {
 	return candidateIndex;
 }
 
+/**
+ * Determine if the element is an empty paragraph block.
+ *
+ * @param {?HTMLElement} element The element being tested.
+ * @return {boolean} True or False.
+ */
+function isEmptyParagraph( element ) {
+	return (
+		!! element &&
+		element.dataset.type === 'core/paragraph' &&
+		element.dataset.empty === 'true'
+	);
+}
+
 /**
  * @typedef  {Object} WPBlockDropZoneConfig
  * @property {string} rootClientId The root client id for the block list.
@@ -130,7 +144,18 @@ export default function useBlockDropZone( {
 
 			setTargetBlockIndex( targetIndex === undefined ? 0 : targetIndex );
 
-			if ( targetIndex !== null ) {
+			if ( targetIndex !== undefined ) {
+				const nextBlock = blockElements[ targetIndex ];
+				const previousBlock = blockElements[ targetIndex - 1 ];
+
+				// Don't show the insertion point when it's near an empty paragraph block.
+				if (
+					isEmptyParagraph( nextBlock ) ||
+					isEmptyParagraph( previousBlock )
+				) {
+					return;
+				}
+
 				showInsertionPoint( targetRootClientId, targetIndex );
 			}
 		}, [] ),