@wordpress/block-editor 9.0.0 → 9.1.0

package/src/components/index.js

@@ -14,7 +14,7 @@ export {
 export { default as __experimentalBlockFullHeightAligmentControl } from './block-full-height-alignment-control';
 export { default as __experimentalBlockAlignmentMatrixControl } from './block-alignment-matrix-control';
 export { default as BlockBreadcrumb } from './block-breadcrumb';
-export { default as __experimentalBlockContentOverlay } from './block-content-overlay';
+export { default as __experimentalUseBlockOverlayActive } from './block-content-overlay';
 export { BlockContextProvider } from './block-context';
 export {
 	default as BlockControls,
@@ -51,7 +51,6 @@ export { default as __experimentalTextTransformControl } from './text-transform-
 export { default as __experimentalColorGradientControl } from './colors-gradients/control';
 export { default as __experimentalColorGradientSettingsDropdown } from './colors-gradients/dropdown';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
-export { default as __experimentalToolsPanelColorDropdown } from './colors-gradients/tools-panel-color-dropdown';
 export {
 	default as __experimentalImageEditor,
 	ImageEditingProvider as __experimentalImageEditingProvider,

package/src/components/inserter/index.native.js

@@ -67,7 +67,7 @@ const defaultRenderToggle = ( {
 			extraProps={ {
 				hint: __( 'Double tap to add a block' ),
 				// testID is present to disambiguate this element for native UI tests. It's not
-				// usually required for components. See: https://git.io/JeQ7G.
+				// usually required for components. See: https://github.com/WordPress/gutenberg/pull/18832#issuecomment-561411389.
 				testID: 'add-block-button',
 				onLongPress,
 			} }

package/src/components/inserter/style.scss

@@ -23,6 +23,7 @@ $block-inserter-tabs-height: 44px;
 .block-editor-inserter__popover.is-quick {
 	.components-popover__content {
 		border: none;
+		outline: none;
 
 		.block-editor-inserter__quick-inserter > * {
 			border-left: $border-width solid $gray-400;
@@ -310,7 +311,7 @@ $block-inserter-tabs-height: 44px;
 	border-top: $border-width solid $gray-300;
 }
 
-.block-editor-inserter__popover.is-quick > .components-popover__content > div {
+.block-editor-inserter__popover.is-quick > .components-popover__content {
 	padding: 0;
 }
 

package/src/components/link-control/constants.js

@@ -7,6 +7,17 @@ import { __ } from '@wordpress/i18n';
 // Used to help distinguish the "Create" suggestion within the search results in
 // order to handle it as a unique case.
 export const CREATE_TYPE = '__CREATE__';
+export const TEL_TYPE = 'tel';
+export const URL_TYPE = 'URL';
+export const MAILTO_TYPE = 'mailto';
+export const INTERNAL_TYPE = 'internal';
+
+export const LINK_ENTRY_TYPES = [
+	URL_TYPE,
+	MAILTO_TYPE,
+	TEL_TYPE,
+	INTERNAL_TYPE,
+];
 
 export const DEFAULT_LINK_SETTINGS = [
 	{

package/src/components/link-control/search-results.js

@@ -15,7 +15,7 @@ import { createElement, Fragment } from '@wordpress/element';
  */
 import LinkControlSearchCreate from './search-create-button';
 import LinkControlSearchItem from './search-item';
-import { CREATE_TYPE } from './constants';
+import { CREATE_TYPE, LINK_ENTRY_TYPES } from './constants';
 
 export default function LinkControlSearchResults( {
 	instanceId,
@@ -38,10 +38,9 @@ export default function LinkControlSearchResults( {
 		}
 	);
 
-	const directLinkEntryTypes = [ 'url', 'mailto', 'tel', 'internal' ];
 	const isSingleDirectEntryResult =
 		suggestions.length === 1 &&
-		directLinkEntryTypes.includes( suggestions[ 0 ].type.toLowerCase() );
+		LINK_ENTRY_TYPES.includes( suggestions[ 0 ].type );
 	const shouldShowCreateSuggestion =
 		withCreateSuggestion &&
 		! isSingleDirectEntryResult &&
@@ -127,8 +126,8 @@ export default function LinkControlSearchResults( {
 								handleSuggestionClick( suggestion );
 							} }
 							isSelected={ index === selectedSuggestion }
-							isURL={ directLinkEntryTypes.includes(
-								suggestion.type.toLowerCase()
+							isURL={ LINK_ENTRY_TYPES.includes(
+								suggestion.type
 							) }
 							searchTerm={ currentInputValue }
 							shouldShowType={ shouldShowSuggestionsTypes }

package/src/components/link-control/use-search-handler.js

@@ -14,26 +14,32 @@ import { startsWith } from 'lodash';
  * Internal dependencies
  */
 import isURLLike from './is-url-like';
-import { CREATE_TYPE } from './constants';
+import {
+	CREATE_TYPE,
+	TEL_TYPE,
+	MAILTO_TYPE,
+	INTERNAL_TYPE,
+	URL_TYPE,
+} from './constants';
 import { store as blockEditorStore } from '../../store';
 
 export const handleNoop = () => Promise.resolve( [] );
 
 export const handleDirectEntry = ( val ) => {
-	let type = 'URL';
+	let type = URL_TYPE;
 
 	const protocol = getProtocol( val ) || '';
 
 	if ( protocol.includes( 'mailto' ) ) {
-		type = 'mailto';
+		type = MAILTO_TYPE;
 	}
 
 	if ( protocol.includes( 'tel' ) ) {
-		type = 'tel';
+		type = TEL_TYPE;
 	}
 
 	if ( startsWith( val, '#' ) ) {
-		type = 'internal';
+		type = INTERNAL_TYPE;
 	}
 
 	return Promise.resolve( [

package/src/components/list-view/drop-indicator.js

@@ -110,7 +110,6 @@ export default function ListViewDropIndicator( {
 
 	return (
 		<Popover
-			noArrow
 			animate={ false }
 			getAnchorRect={ getAnchorRect }
 			focusOnMount={ false }

package/src/components/list-view/style.scss

@@ -396,10 +396,11 @@ $block-navigation-max-indent: 8;
 }
 
 // Reset some popover defaults for the drop indicator.
-.block-editor-list-view-drop-indicator:not([data-y-axis="middle"][data-x-axis="right"]) > .components-popover__content {
+.block-editor-list-view-drop-indicator > .components-popover__content {
 	margin-left: 0;
 	border: none;
 	box-shadow: none;
+	outline: none;
 }
 
 .block-editor-list-view-placeholder {

package/src/components/navigable-toolbar/index.js

@@ -29,7 +29,12 @@ function hasFocusWithin( container ) {
 function focusFirstTabbableIn( container ) {
 	const [ firstTabbable ] = focus.tabbable.find( container );
 	if ( firstTabbable ) {
-		firstTabbable.focus();
+		firstTabbable.focus( {
+			// When focusing newly mounted toolbars,
+			// the position of the popover is often not right on the first render
+			// This prevents the layout shifts when focusing the dialogs.
+			preventScroll: true,
+		} );
 	}
 }
 
@@ -119,7 +124,12 @@ function useToolbarFocus(
 				const items = getAllToolbarItemsIn( ref.current );
 				const index = initialIndex || 0;
 				if ( items[ index ] && hasFocusWithin( ref.current ) ) {
-					items[ index ].focus();
+					items[ index ].focus( {
+						// When focusing newly mounted toolbars,
+						// the position of the popover is often not right on the first render
+						// This prevents the layout shifts when focusing the dialogs.
+						preventScroll: true,
+					} );
 				}
 			} );
 		}

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

@@ -11,10 +11,6 @@
 }
 
 .block-editor-post-preview__dropdown-content {
-	.components-popover__content {
-		overflow-y: visible;
-	}
-
 	&.edit-post-post-preview-dropdown {
 		.components-menu-group {
 			&:first-child {

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

@@ -14,7 +14,6 @@ const FormatToolbarContainer = ( { inline, anchorRef } ) => {
 		// Render in popover.
 		return (
 			<Popover
-				noArrow
 				position="top center"
 				focusOnMount={ false }
 				anchorRef={ anchorRef }

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

@@ -338,7 +338,7 @@ function RichTextWrapper(
 			{ isSelected && hasFormats && (
 				<FormatToolbarContainer
 					inline={ inlineToolbar }
-					anchorRef={ anchorRef.current }
+					anchorRef={ anchorRef }
 				/>
 			) }
 			<TagName

package/src/components/rich-text/style.scss

@@ -42,17 +42,11 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 		min-width: auto;
 		margin-bottom: $grid-unit-10;
 		box-shadow: none;
-
-		// Block UI appearance.
-		border: $border-width solid $gray-900;
-		border-radius: $radius-block-ui;
-		background-color: $white;
+		outline: none;
 	}
 
-	.components-toolbar-group,
 	.components-toolbar {
-		// The popover already provides a border.
-		border: none;
+		border-radius: $radius-block-ui;
 	}
 
 	.components-toolbar__control,

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

@@ -303,6 +303,7 @@ class URLInput extends Component {
 
 				// Submitting while loading should trigger onSubmit.
 				case ENTER: {
+					event.preventDefault();
 					if ( this.props.onSubmit ) {
 						this.props.onSubmit( null, event );
 					}
@@ -350,6 +351,7 @@ class URLInput extends Component {
 				break;
 			}
 			case ENTER: {
+				event.preventDefault();
 				if ( this.state.selectedSuggestion !== null ) {
 					this.selectLink( suggestion );
 
@@ -536,7 +538,7 @@ class URLInput extends Component {
 			!! suggestions.length
 		) {
 			return (
-				<Popover position="bottom" noArrow focusOnMount={ false }>
+				<Popover position="bottom" focusOnMount={ false }>
 					<div
 						{ ...suggestionsListProps }
 						className={ classnames(

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

@@ -0,0 +1,173 @@
+/**
+ * External dependencies
+ */
+import { useSharedValue } from 'react-native-reanimated';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
+import { useThrottle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { useBlockListContext } from '../block-list/block-list-context';
+import { getDistanceToNearestEdge } from '../../utils/math';
+import useOnBlockDrop from '../use-on-block-drop';
+
+/** @typedef {import('../../utils/math').WPPoint} WPPoint */
+
+/**
+ * The orientation of a block list.
+ *
+ * @typedef {'horizontal'|'vertical'|undefined} WPBlockListOrientation
+ */
+
+/**
+ * Given a list of blocks layouts finds the index that a block should be dropped at.
+ *
+ * @param {Object}                 blocksLayouts Blocks layouts object.
+ * @param {WPPoint}                position      The position of the item being dragged.
+ * @param {WPBlockListOrientation} orientation   The orientation of a block list.
+ * @param {boolean}                isRTL         Check if current locale is RTL.
+ *
+ * @return {number|undefined} The block index that's closest to the drag position.
+ */
+export function getNearestBlockIndex(
+	blocksLayouts,
+	position,
+	orientation,
+	isRTL
+) {
+	const allowedEdges =
+		orientation === 'horizontal'
+			? [ 'left', 'right' ]
+			: [ 'top', 'bottom' ];
+
+	const isRightToLeft = isRTL;
+
+	let candidateIndex;
+	let candidateDistance;
+
+	// Only enabled for root level blocks.
+	blocksLayouts.forEach( ( element, index ) => {
+		const { x, y, width, height } = element;
+		const rect = {
+			x: element.x,
+			y: element.y,
+			top: y,
+			right: x + width,
+			bottom: y + height,
+			left: x,
+			width,
+			height,
+		};
+		const [ distance, edge ] = getDistanceToNearestEdge(
+			position,
+			rect,
+			allowedEdges
+		);
+
+		if ( candidateDistance === undefined || distance < candidateDistance ) {
+			// If the user is dropping to the trailing edge of the block
+			// add 1 to the index to represent dragging after.
+			// Take RTL languages into account where the left edge is
+			// the trailing edge.
+			const isTrailingEdge =
+				edge === 'bottom' ||
+				( ! isRightToLeft && edge === 'right' ) ||
+				( isRightToLeft && edge === 'left' );
+			const offset = isTrailingEdge ? 1 : 0;
+
+			// Update the currently known best candidate.
+			candidateDistance = distance;
+			candidateIndex = index + offset;
+		}
+	} );
+	return candidateIndex;
+}
+
+/**
+ * @typedef  {Object} WPBlockDropZoneConfig
+ * @property {string} rootClientId The root client id for the block list.
+ */
+
+/**
+ * A React hook that can be used to make a block list handle drag and drop.
+ *
+ * @param {WPBlockDropZoneConfig} dropZoneConfig configuration data for the drop zone.
+ *
+ * @return {Object} An object that contains `targetBlockIndex` and the event
+ * handlers `onBlockDragOver`, `onBlockDragEnd` and `onBlockDrop`.
+ */
+export default function useBlockDropZone( {
+	// 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
+	// an empty string to represent top-level blocks.
+	rootClientId: targetRootClientId = '',
+} = {} ) {
+	const targetBlockIndex = useSharedValue( null );
+
+	const { getBlockListSettings, getSettings } = useSelect( blockEditorStore );
+	const {
+		blocksLayouts,
+		getBlockLayoutsOrderedByYCoord,
+	} = useBlockListContext();
+
+	const getSortedBlocksLayouts = useCallback( () => {
+		return getBlockLayoutsOrderedByYCoord( blocksLayouts.current );
+	}, [ blocksLayouts.current ] );
+
+	const isRTL = getSettings().isRTL;
+
+	const onBlockDrop = useOnBlockDrop();
+
+	const throttled = useThrottle(
+		useCallback(
+			( event ) => {
+				const sortedBlockLayouts = getSortedBlocksLayouts();
+
+				const targetIndex = getNearestBlockIndex(
+					sortedBlockLayouts,
+					{ x: event.x, y: event.y },
+					getBlockListSettings( targetRootClientId )?.orientation,
+					isRTL
+				);
+				if ( targetIndex !== null ) {
+					targetBlockIndex.value = targetIndex ?? 0;
+				}
+			},
+			[
+				getSortedBlocksLayouts,
+				getNearestBlockIndex,
+				getBlockListSettings,
+				targetBlockIndex,
+			]
+		),
+		200
+	);
+
+	return {
+		onBlockDragOver( event ) {
+			throttled( event );
+		},
+		onBlockDragEnd() {
+			throttled.cancel();
+			targetBlockIndex.value = null;
+		},
+		onBlockDrop: ( event ) => {
+			if ( targetBlockIndex.value !== null ) {
+				onBlockDrop( {
+					...event,
+					targetRootClientId,
+					targetBlockIndex: targetBlockIndex.value,
+				} );
+			}
+		},
+		targetBlockIndex,
+	};
+}

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

@@ -0,0 +1,119 @@
+/**
+ * WordPress dependencies
+ */
+import { cloneBlock } from '@wordpress/blocks';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+/**
+ * A function that returns an event handler function for block drop events.
+ *
+ * @param {Function} getBlockIndex             A function that gets the index of a block.
+ * @param {Function} getClientIdsOfDescendants A function that gets the client ids of descendant blocks.
+ * @param {Function} moveBlocksToPosition      A function that moves blocks.
+ * @param {Function} insertBlocks              A function that inserts blocks.
+ * @param {Function} clearSelectedBlock        A function that clears block selection.
+ * @return {Function} The event handler for a block drop event.
+ */
+export function onBlockDrop(
+	getBlockIndex,
+	getClientIdsOfDescendants,
+	moveBlocksToPosition,
+	insertBlocks,
+	clearSelectedBlock
+) {
+	return ( {
+		blocks,
+		srcClientIds: sourceClientIds,
+		srcRootClientId: sourceRootClientId,
+		targetBlockIndex,
+		targetRootClientId,
+		type: dropType,
+	} ) => {
+		// If the user is inserting a block.
+		if ( dropType === 'inserter' ) {
+			clearSelectedBlock();
+			const blocksToInsert = blocks.map( ( block ) =>
+				cloneBlock( block )
+			);
+			insertBlocks(
+				blocksToInsert,
+				targetBlockIndex,
+				targetRootClientId,
+				true,
+				null
+			);
+		}
+
+		// If the user is moving a block.
+		if ( dropType === 'block' ) {
+			const sourceBlockIndex = getBlockIndex( sourceClientIds[ 0 ] );
+
+			// If the user is dropping to the same position, return early.
+			if (
+				sourceRootClientId === targetRootClientId &&
+				sourceBlockIndex === targetBlockIndex
+			) {
+				return;
+			}
+
+			// If the user is attempting to drop a block within its own
+			// nested blocks, return early as this would create infinite
+			// recursion.
+			if (
+				sourceClientIds.includes( targetRootClientId ) ||
+				getClientIdsOfDescendants( sourceClientIds ).some(
+					( id ) => id === targetRootClientId
+				)
+			) {
+				return;
+			}
+
+			const isAtSameLevel = sourceRootClientId === targetRootClientId;
+			const draggedBlockCount = sourceClientIds.length;
+
+			// If the block is kept at the same level and moved downwards,
+			// subtract to take into account that the blocks being dragged
+			// were removed from the block list above the insertion point.
+			const insertIndex =
+				isAtSameLevel && sourceBlockIndex < targetBlockIndex
+					? targetBlockIndex - draggedBlockCount
+					: targetBlockIndex;
+
+			moveBlocksToPosition(
+				sourceClientIds,
+				sourceRootClientId,
+				targetRootClientId,
+				insertIndex
+			);
+		}
+	};
+}
+
+/**
+ * A React hook for handling block drop events.
+ *
+ * @return {Function} The event handler for a block drop event.
+ */
+export default function useOnBlockDrop() {
+	const { getBlockIndex, getClientIdsOfDescendants } = useSelect(
+		blockEditorStore
+	);
+	const {
+		insertBlocks,
+		moveBlocksToPosition,
+		clearSelectedBlock,
+	} = useDispatch( blockEditorStore );
+
+	return onBlockDrop(
+		getBlockIndex,
+		getClientIdsOfDescendants,
+		moveBlocksToPosition,
+		insertBlocks,
+		clearSelectedBlock
+	);
+}

package/src/components/warning/index.js

@@ -13,50 +13,55 @@ import { moreHorizontal } from '@wordpress/icons';
 
 function Warning( { className, actions, children, secondaryActions } ) {
 	return (
-		<div className={ classnames( className, 'block-editor-warning' ) }>
-			<div className="block-editor-warning__contents">
-				<p className="block-editor-warning__message">{ children }</p>
+		<div style={ { display: 'contents', all: 'initial' } }>
+			<div className={ classnames( className, 'block-editor-warning' ) }>
+				<div className="block-editor-warning__contents">
+					<p className="block-editor-warning__message">
+						{ children }
+					</p>
 
-				{ ( Children.count( actions ) > 0 || secondaryActions ) && (
-					<div className="block-editor-warning__actions">
-						{ Children.count( actions ) > 0 &&
-							Children.map( actions, ( action, i ) => (
-								<span
-									key={ i }
-									className="block-editor-warning__action"
+					{ ( Children.count( actions ) > 0 || secondaryActions ) && (
+						<div className="block-editor-warning__actions">
+							{ Children.count( actions ) > 0 &&
+								Children.map( actions, ( action, i ) => (
+									<span
+										key={ i }
+										className="block-editor-warning__action"
+									>
+										{ action }
+									</span>
+								) ) }
+							{ secondaryActions && (
+								<DropdownMenu
+									className="block-editor-warning__secondary"
+									icon={ moreHorizontal }
+									label={ __( 'More options' ) }
+									popoverProps={ {
+										position: 'bottom left',
+										className:
+											'block-editor-warning__dropdown',
+									} }
+									noIcons
 								>
-									{ action }
-								</span>
-							) ) }
-						{ secondaryActions && (
-							<DropdownMenu
-								className="block-editor-warning__secondary"
-								icon={ moreHorizontal }
-								label={ __( 'More options' ) }
-								popoverProps={ {
-									position: 'bottom left',
-									className: 'block-editor-warning__dropdown',
-								} }
-								noIcons
-							>
-								{ () => (
-									<MenuGroup>
-										{ secondaryActions.map(
-											( item, pos ) => (
-												<MenuItem
-													onClick={ item.onClick }
-													key={ pos }
-												>
-													{ item.title }
-												</MenuItem>
-											)
-										) }
-									</MenuGroup>
-								) }
-							</DropdownMenu>
-						) }
-					</div>
-				) }
+									{ () => (
+										<MenuGroup>
+											{ secondaryActions.map(
+												( item, pos ) => (
+													<MenuItem
+														onClick={ item.onClick }
+														key={ pos }
+													>
+														{ item.title }
+													</MenuItem>
+												)
+											) }
+										</MenuGroup>
+									) }
+								</DropdownMenu>
+							) }
+						</div>
+					) }
+				</div>
 			</div>
 		</div>
 	);

package/src/components/warning/test/__snapshots__/index.js.snap

@@ -2,16 +2,25 @@
 
 exports[`Warning should match snapshot 1`] = `
 <div
-  className="block-editor-warning"
+  style={
+    Object {
+      "all": "initial",
+      "display": "contents",
+    }
+  }
 >
   <div
-    className="block-editor-warning__contents"
+    className="block-editor-warning"
   >
-    <p
-      className="block-editor-warning__message"
+    <div
+      className="block-editor-warning__contents"
     >
-      error
-    </p>
+      <p
+        className="block-editor-warning__message"
+      >
+        error
+      </p>
+    </div>
   </div>
 </div>
 `;