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

package/build-style/style-rtl.css

@@ -1216,6 +1216,16 @@
   display: none;
 }
 
+.block-editor-block-preview__container::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 1;
+}
+
 .block-editor-block-settings-menu__popover .components-dropdown-menu__menu {
   padding: 0;
 }
@@ -1765,9 +1775,19 @@
   bottom: 0;
   right: 0;
   pointer-events: none;
-  border: 1px dashed currentColor;
   border-radius: 2px;
 }
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  pointer-events: none;
+  background: currentColor;
+  opacity: 0.1;
+}
 .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter {
   visibility: hidden;
 }

package/build-style/style.css

@@ -1216,6 +1216,16 @@
   display: none;
 }
 
+.block-editor-block-preview__container::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+}
+
 .block-editor-block-settings-menu__popover .components-dropdown-menu__menu {
   padding: 0;
 }
@@ -1765,9 +1775,19 @@
   bottom: 0;
   left: 0;
   pointer-events: none;
-  border: 1px dashed currentColor;
   border-radius: 2px;
 }
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  background: currentColor;
+  opacity: 0.1;
+}
 .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter {
   visibility: hidden;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "10.1.0",
+	"version": "10.1.1-next.4d3b314fd5.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,32 +33,32 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.18.0",
-		"@wordpress/api-fetch": "^6.15.0",
-		"@wordpress/blob": "^3.18.0",
-		"@wordpress/blocks": "^11.17.0",
-		"@wordpress/components": "^21.1.0",
-		"@wordpress/compose": "^5.16.0",
-		"@wordpress/data": "^7.2.0",
-		"@wordpress/date": "^4.18.0",
-		"@wordpress/deprecated": "^3.18.0",
-		"@wordpress/dom": "^3.18.0",
-		"@wordpress/element": "^4.16.0",
-		"@wordpress/hooks": "^3.18.0",
-		"@wordpress/html-entities": "^3.18.0",
-		"@wordpress/i18n": "^4.18.0",
-		"@wordpress/icons": "^9.9.0",
-		"@wordpress/is-shallow-equal": "^4.18.0",
-		"@wordpress/keyboard-shortcuts": "^3.16.0",
-		"@wordpress/keycodes": "^3.18.0",
-		"@wordpress/notices": "^3.18.0",
-		"@wordpress/rich-text": "^5.16.0",
-		"@wordpress/shortcode": "^3.18.0",
-		"@wordpress/style-engine": "^1.1.0",
-		"@wordpress/token-list": "^2.18.0",
-		"@wordpress/url": "^3.19.0",
-		"@wordpress/warning": "^2.18.0",
-		"@wordpress/wordcount": "^3.18.0",
+		"@wordpress/a11y": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/api-fetch": "^6.15.1-next.4d3b314fd5.0",
+		"@wordpress/blob": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/blocks": "^11.18.1-next.4d3b314fd5.0",
+		"@wordpress/components": "^21.1.2-next.4d3b314fd5.0",
+		"@wordpress/compose": "^5.16.1-next.4d3b314fd5.0",
+		"@wordpress/data": "^7.2.1-next.4d3b314fd5.0",
+		"@wordpress/date": "^4.18.1-next.4d3b314fd5.0",
+		"@wordpress/deprecated": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/dom": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/element": "^4.16.1-next.4d3b314fd5.0",
+		"@wordpress/hooks": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/html-entities": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/i18n": "^4.18.1-next.4d3b314fd5.0",
+		"@wordpress/icons": "^9.9.1-next.4d3b314fd5.0",
+		"@wordpress/is-shallow-equal": "^4.18.1-next.4d3b314fd5.0",
+		"@wordpress/keyboard-shortcuts": "^3.16.1-next.4d3b314fd5.0",
+		"@wordpress/keycodes": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/notices": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/rich-text": "^5.16.1-next.4d3b314fd5.0",
+		"@wordpress/shortcode": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/style-engine": "^1.1.1-next.4d3b314fd5.0",
+		"@wordpress/token-list": "^2.18.1-next.4d3b314fd5.0",
+		"@wordpress/url": "^3.19.1-next.4d3b314fd5.0",
+		"@wordpress/warning": "^2.18.1-next.4d3b314fd5.0",
+		"@wordpress/wordcount": "^3.18.1-next.4d3b314fd5.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -67,7 +67,7 @@
 		"inherits": "^2.0.3",
 		"lodash": "^4.17.21",
 		"react-autosize-textarea": "^7.1.0",
-		"react-easy-crop": "^3.0.0",
+		"react-easy-crop": "^4.5.1",
 		"rememo": "^4.0.0",
 		"remove-accents": "^0.4.2",
 		"traverse": "^0.6.6"
@@ -79,5 +79,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "23e136283fa1d3b8d9d8b33869f871ad5eb77726"
+	"gitHead": "25054766423cb49d959eb656c2533530073ff5c2"
 }

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

@@ -52,7 +52,7 @@ const BlockDraggable = ( {
 	}, [] );
 
 	if ( ! isDraggable ) {
-		return children( { isDraggable: false } );
+		return children( { draggable: false } );
 	}
 
 	const transferData = {

package/src/components/block-draggable/test/index.native.js

@@ -29,15 +29,6 @@ import {
 	getDraggableChip,
 } from './helpers';
 
-// Mock throttle to allow updating the dragging position on every "onDragOver" event.
-jest.mock( 'lodash', () => ( {
-	...jest.requireActual( 'lodash' ),
-	throttle: ( fn ) => {
-		fn.cancel = jest.fn();
-		return fn;
-	},
-} ) );
-
 beforeAll( () => {
 	// Register all core blocks
 	registerCoreBlocks();

package/src/components/block-list/use-in-between-inserter.js

@@ -83,19 +83,19 @@ export function useInBetweenInserter() {
 				const orientation =
 					getBlockListSettings( rootClientId )?.orientation ||
 					'vertical';
-				const rect = event.target.getBoundingClientRect();
-				const offsetTop = event.clientY - rect.top;
-				const offsetLeft = event.clientX - rect.left;
+				const offsetTop = event.clientY;
+				const offsetLeft = event.clientX;
 
 				const children = Array.from( event.target.children );
 				let element = children.find( ( blockEl ) => {
+					const blockElRect = blockEl.getBoundingClientRect();
 					return (
 						( blockEl.classList.contains( 'wp-block' ) &&
 							orientation === 'vertical' &&
-							blockEl.offsetTop > offsetTop ) ||
+							blockElRect.top > offsetTop ) ||
 						( blockEl.classList.contains( 'wp-block' ) &&
 							orientation === 'horizontal' &&
-							blockEl.offsetLeft > offsetLeft )
+							blockElRect.left > offsetLeft )
 					);
 				} );
 

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

@@ -143,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/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-tools/index.js

@@ -124,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 ) }>
-				{ ! isTyping && ! isZoomOutMode && (
+				{ ! isTyping && (
 					<InsertionPoint
 						__unstableContentRef={ __unstableContentRef }
 					/>

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/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/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 );
 			}
 		}, [] ),

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

@@ -1,13 +1,14 @@
 /**
  * WordPress dependencies
  */
+import { useCallback } from '@wordpress/element';
 import {
 	cloneBlock,
 	findTransform,
 	getBlockTransforms,
 	pasteHandler,
 } from '@wordpress/blocks';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import { getFilesFromDataTransfer } from '@wordpress/dom';
 
 /**
@@ -56,8 +57,8 @@ export function parseDropEvent( event ) {
  * @param {number}   targetBlockIndex          The index where the block(s) will be inserted.
  * @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} moveBlocks                A function that moves blocks.
+ * @param {Function} insertOrReplaceBlocks     A function that inserts or replaces blocks.
  * @param {Function} clearSelectedBlock        A function that clears block selection.
  * @return {Function} The event handler for a block drop event.
  */
@@ -66,8 +67,8 @@ export function onBlockDrop(
 	targetBlockIndex,
 	getBlockIndex,
 	getClientIdsOfDescendants,
-	moveBlocksToPosition,
-	insertBlocks,
+	moveBlocks,
+	insertOrReplaceBlocks,
 	clearSelectedBlock
 ) {
 	return ( event ) => {
@@ -84,13 +85,7 @@ export function onBlockDrop(
 			const blocksToInsert = blocks.map( ( block ) =>
 				cloneBlock( block )
 			);
-			insertBlocks(
-				blocksToInsert,
-				targetBlockIndex,
-				targetRootClientId,
-				true,
-				null
-			);
+			insertOrReplaceBlocks( blocksToInsert, true, null );
 		}
 
 		// If the user is moving a block.
@@ -128,12 +123,7 @@ export function onBlockDrop(
 					? targetBlockIndex - draggedBlockCount
 					: targetBlockIndex;
 
-			moveBlocksToPosition(
-				sourceClientIds,
-				sourceRootClientId,
-				targetRootClientId,
-				insertIndex
-			);
+			moveBlocks( sourceClientIds, sourceRootClientId, insertIndex );
 		}
 	};
 }
@@ -146,7 +136,7 @@ export function onBlockDrop(
  * @param {boolean}  hasUploadPermissions  Whether the user has upload permissions.
  * @param {Function} updateBlockAttributes A function that updates a block's attributes.
  * @param {Function} canInsertBlockType    A function that returns checks whether a block type can be inserted.
- * @param {Function} insertBlocks          A function that inserts blocks.
+ * @param {Function} insertOrReplaceBlocks A function that inserts or replaces blocks.
  *
  * @return {Function} The event handler for a block-related file drop event.
  */
@@ -156,7 +146,7 @@ export function onFilesDrop(
 	hasUploadPermissions,
 	updateBlockAttributes,
 	canInsertBlockType,
-	insertBlocks
+	insertOrReplaceBlocks
 ) {
 	return ( files ) => {
 		if ( ! hasUploadPermissions ) {
@@ -176,7 +166,7 @@ export function onFilesDrop(
 				files,
 				updateBlockAttributes
 			);
-			insertBlocks( blocks, targetBlockIndex, targetRootClientId );
+			insertOrReplaceBlocks( blocks );
 		}
 	};
 }
@@ -184,22 +174,22 @@ export function onFilesDrop(
 /**
  * A function that returns an event handler function for block-related HTML drop events.
  *
- * @param {string}   targetRootClientId The root client id where the block(s) will be inserted.
- * @param {number}   targetBlockIndex   The index where the block(s) will be inserted.
- * @param {Function} insertBlocks       A function that inserts blocks.
+ * @param {string}   targetRootClientId    The root client id where the block(s) will be inserted.
+ * @param {number}   targetBlockIndex      The index where the block(s) will be inserted.
+ * @param {Function} insertOrReplaceBlocks A function that inserts or replaces blocks.
  *
  * @return {Function} The event handler for a block-related HTML drop event.
  */
 export function onHTMLDrop(
 	targetRootClientId,
 	targetBlockIndex,
-	insertBlocks
+	insertOrReplaceBlocks
 ) {
 	return ( HTML ) => {
 		const blocks = pasteHandler( { HTML, mode: 'BLOCKS' } );
 
 		if ( blocks.length ) {
-			insertBlocks( blocks, targetBlockIndex, targetRootClientId );
+			insertOrReplaceBlocks( blocks );
 		}
 	};
 }
@@ -207,32 +197,117 @@ export function onHTMLDrop(
 /**
  * A React hook for handling block drop events.
  *
- * @param {string} targetRootClientId The root client id where the block(s) will be inserted.
- * @param {number} targetBlockIndex   The index where the block(s) will be inserted.
+ * @typedef {'insert'|'replace'} DropAction The type of action to perform on drop.
+ *
+ * @param {string}     targetRootClientId The root client id where the block(s) will be inserted.
+ * @param {number}     targetBlockIndex   The index where the block(s) will be inserted.
+ * @param {Object}     options            The optional options.
+ * @param {DropAction} options.action     The type of action to perform on drop. Could be `insert` or `replace` for now.
  *
  * @return {Object} An object that contains the event handlers `onDrop`, `onFilesDrop` and `onHTMLDrop`.
  */
-export default function useOnBlockDrop( targetRootClientId, targetBlockIndex ) {
+export default function useOnBlockDrop(
+	targetRootClientId,
+	targetBlockIndex,
+	options = {}
+) {
+	const { action = 'insert' } = options;
 	const hasUploadPermissions = useSelect(
 		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
 		[]
 	);
-	const { canInsertBlockType, getBlockIndex, getClientIdsOfDescendants } =
-		useSelect( blockEditorStore );
+	const {
+		canInsertBlockType,
+		getBlockIndex,
+		getClientIdsOfDescendants,
+		getBlockOrder,
+		getBlocksByClientId,
+	} = useSelect( blockEditorStore );
 	const {
 		insertBlocks,
 		moveBlocksToPosition,
 		updateBlockAttributes,
 		clearSelectedBlock,
+		replaceBlocks,
+		removeBlocks,
 	} = useDispatch( blockEditorStore );
+	const registry = useRegistry();
+
+	const insertOrReplaceBlocks = useCallback(
+		( blocks, updateSelection = true, initialPosition = 0 ) => {
+			if ( action === 'replace' ) {
+				const clientIds = getBlockOrder( targetRootClientId );
+				const clientId = clientIds[ targetBlockIndex ];
+
+				replaceBlocks( clientId, blocks, undefined, initialPosition );
+			} else {
+				insertBlocks(
+					blocks,
+					targetBlockIndex,
+					targetRootClientId,
+					updateSelection,
+					initialPosition
+				);
+			}
+		},
+		[
+			action,
+			getBlockOrder,
+			insertBlocks,
+			replaceBlocks,
+			targetBlockIndex,
+			targetRootClientId,
+		]
+	);
+
+	const moveBlocks = useCallback(
+		( sourceClientIds, sourceRootClientId, insertIndex ) => {
+			if ( action === 'replace' ) {
+				const sourceBlocks = getBlocksByClientId( sourceClientIds );
+				const targetBlockClientIds =
+					getBlockOrder( targetRootClientId );
+				const targetBlockClientId =
+					targetBlockClientIds[ targetBlockIndex ];
+
+				registry.batch( () => {
+					// Remove the source blocks.
+					removeBlocks( sourceClientIds, false );
+					// Replace the target block with the source blocks.
+					replaceBlocks(
+						targetBlockClientId,
+						sourceBlocks,
+						undefined,
+						0
+					);
+				} );
+			} else {
+				moveBlocksToPosition(
+					sourceClientIds,
+					sourceRootClientId,
+					targetRootClientId,
+					insertIndex
+				);
+			}
+		},
+		[
+			action,
+			getBlockOrder,
+			getBlocksByClientId,
+			insertBlocks,
+			moveBlocksToPosition,
+			removeBlocks,
+			targetBlockIndex,
+			targetRootClientId,
+		]
+	);
 
 	const _onDrop = onBlockDrop(
 		targetRootClientId,
 		targetBlockIndex,
 		getBlockIndex,
 		getClientIdsOfDescendants,
-		moveBlocksToPosition,
-		insertBlocks,
+		moveBlocks,
+		insertOrReplaceBlocks,
 		clearSelectedBlock
 	);
 	const _onFilesDrop = onFilesDrop(
@@ -241,12 +316,12 @@ export default function useOnBlockDrop( targetRootClientId, targetBlockIndex ) {
 		hasUploadPermissions,
 		updateBlockAttributes,
 		canInsertBlockType,
-		insertBlocks
+		insertOrReplaceBlocks
 	);
 	const _onHTMLDrop = onHTMLDrop(
 		targetRootClientId,
 		targetBlockIndex,
-		insertBlocks
+		insertOrReplaceBlocks
 	);
 
 	return ( event ) => {