Revert "Support drag-and-drop for submenus of navigation blocks (#24479…

…)"

This reverts commit 748c632.

packages/block-editor/src/components/block-draggable/style.scss

@@ -47,6 +47,7 @@
 
 // This hides the block being dragged.
 // The effect is that the block being dragged appears to be "lifted".
-.is-dragging {
+.is-dragging.is-selected,
+.is-dragging.is-multi-selected {
 	display: none !important;
 }

packages/block-editor/src/components/block-list/style.scss

@@ -682,19 +682,6 @@
 	}
 }
 
-// Hide the popover block editor list while dragging.
-// Using a hacky animation to delay hiding the element.
-// It's needed because if we hide the element immediately upon dragging,
-// the dragging will end immediately since there are no elements to be dragged anymore.
-// Fortunately, we only have to keep it visible for a frame immediately after dragging,
-// after that, we can safely hide it altogether.
-@keyframes hide-during-dragging {
-	to {
-		position: fixed;
-		transform: translate(9999px, 9999px);
-	}
-}
-
 .components-popover.block-editor-block-list__block-popover {
 	z-index: z-index(".block-editor-block-list__block-popover");
 	position: absolute;
@@ -724,9 +711,6 @@
 
 	.is-dragging-components-draggable & {
 		opacity: 0;
-		// Use a minimal duration to delay hiding the element, see hide-during-dragging animation for more details.
-		// It's essential to hide the toolbar/popover so that `dragEnter` events can pass through them to the underlying elements.
-		animation: hide-during-dragging 1ms linear forwards;
 	}
 }
 

packages/block-editor/src/components/block-list/use-block-props/use-block-class-names.js

@@ -50,12 +50,12 @@ export function useBlockClassNames( clientId ) {
 				spotlightEntityBlocks
 			);
 			return classnames( 'block-editor-block-list__block', {
-				'is-selected': isSelected && ! isDragging,
+				'is-selected': isSelected,
 				'is-highlighted': isBlockHighlighted( clientId ),
 				'is-multi-selected': isBlockMultiSelected( clientId ),
 				'is-reusable': isReusableBlock( getBlockType( name ) ),
 				'is-dragging': isDragging,
-				'has-child-selected': isAncestorOfSelectedBlock && ! isDragging,
+				'has-child-selected': isAncestorOfSelectedBlock,
 				'has-active-entity': activeEntityBlockId,
 				// Determine if there is an active entity area to spotlight.
 				'is-active-entity': activeEntityBlockId === clientId,

packages/block-library/src/navigation-link/edit.js

@@ -47,57 +47,6 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { ToolbarSubmenuIcon, ItemSubmenuIcon } from './icons';
 
-/**
- * A React hook to determine if it's dragging within the target element.
- *
- * @typedef {import('@wordpress/element').RefObject} RefObject
- *
- * @param {RefObject<HTMLElement>} elementRef The target elementRef object.
- *
- * @return {boolean} Is dragging within the target element.
- */
-const useIsDraggingWithin = ( elementRef ) => {
-	const [ isDraggingWithin, setIsDraggingWithin ] = useState( false );
-
-	useEffect( () => {
-		const { ownerDocument } = elementRef.current;
-
-		function handleDragStart( event ) {
-			// Check the first time when the dragging starts.
-			handleDragEnter( event );
-		}
-
-		// Set to false whenever the user cancel the drag event by either releasing the mouse or press Escape.
-		function handleDragEnd() {
-			setIsDraggingWithin( false );
-		}
-
-		function handleDragEnter( event ) {
-			// Check if the current target is inside the item element.
-			if ( elementRef.current.contains( event.target ) ) {
-				setIsDraggingWithin( true );
-			} else {
-				setIsDraggingWithin( false );
-			}
-		}
-
-		// Bind these events to the document to catch all drag events.
-		// Ideally, we can also use `event.relatedTarget`, but sadly that
-		// doesn't work in Safari.
-		ownerDocument.addEventListener( 'dragstart', handleDragStart );
-		ownerDocument.addEventListener( 'dragend', handleDragEnd );
-		ownerDocument.addEventListener( 'dragenter', handleDragEnter );
-
-		return () => {
-			ownerDocument.removeEventListener( 'dragstart', handleDragStart );
-			ownerDocument.removeEventListener( 'dragend', handleDragEnd );
-			ownerDocument.removeEventListener( 'dragenter', handleDragEnter );
-		};
-	}, [] );
-
-	return isDraggingWithin;
-};
-
 /**
  * Given the Link block's type attribute, return the query params to give to
  * /wp/v2/search.
@@ -154,13 +103,11 @@ export default function NavigationLinkEdit( {
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { insertBlock } = useDispatch( blockEditorStore );
 	const [ isLinkOpen, setIsLinkOpen ] = useState( false );
-	const listItemRef = useRef( null );
-	const isDraggingWithin = useIsDraggingWithin( listItemRef );
 	const itemLabelPlaceholder = __( 'Add link…' );
 	const ref = useRef();
+	const listItemRef = useRef();
 
 	const {
-		isDraggingBlocks,
 		isParentOfSelectedBlock,
 		isImmediateParentOfSelectedBlock,
 		hasDescendants,
@@ -174,7 +121,6 @@ export default function NavigationLinkEdit( {
 				getClientIdsOfDescendants,
 				hasSelectedInnerBlock,
 				getSelectedBlockClientId,
-				isDraggingBlocks: _isDraggingBlocks,
 			} = select( blockEditorStore );
 
 			const selectedBlockId = getSelectedBlockClientId();
@@ -196,7 +142,6 @@ export default function NavigationLinkEdit( {
 					selectedBlockId,
 				] )?.length,
 				numberOfDescendants: descendants,
-				isDraggingBlocks: _isDraggingBlocks(),
 				userCanCreatePages: select( coreStore ).canUser(
 					'create',
 					'pages'
@@ -297,13 +242,8 @@ export default function NavigationLinkEdit( {
 	const blockProps = useBlockProps( {
 		ref: listItemRef,
 		className: classnames( {
-			'is-editing':
-				( isSelected || isParentOfSelectedBlock ) &&
-				// Don't show the element as editing while dragging.
-				! isDraggingBlocks,
-			// Don't select the element while dragging.
-			'is-selected': isSelected && ! isDraggingBlocks,
-			'is-dragging-within': isDraggingWithin,
+			'is-editing': isSelected || isParentOfSelectedBlock,
+			'is-selected': isSelected,
 			'has-link': !! url,
 			'has-child': hasDescendants,
 			'has-text-color': !! textColor || !! style?.color?.text,
@@ -324,20 +264,15 @@ export default function NavigationLinkEdit( {
 	const innerBlocksProps = useInnerBlocksProps(
 		{
 			className: classnames( 'wp-block-navigation-link__container', {
-				'is-parent-of-selected-block':
-					isParentOfSelectedBlock &&
-					// Don't select as parent of selected block while dragging.
-					! isDraggingBlocks,
+				'is-parent-of-selected-block': isParentOfSelectedBlock,
 			} ),
 		},
 		{
 			allowedBlocks: [ 'core/navigation-link', 'core/spacer' ],
 			renderAppender:
 				( isSelected && hasDescendants ) ||
 				( isImmediateParentOfSelectedBlock &&
-					! selectedBlockHasDescendants ) ||
-				// Show the appender while dragging to allow inserting element between item and the appender.
-				( isDraggingBlocks && hasDescendants )
+					! selectedBlockHasDescendants )
 					? InnerBlocks.DefaultAppender
 					: false,
 			__experimentalAppenderTagName: 'li',

packages/block-library/src/navigation/editor.scss

@@ -54,9 +54,7 @@
 // Styles for submenu flyout.
 .has-child {
 	&.is-selected,
-	&.has-child-selected,
-	// Show the submenu list when is dragging and drag enter the list item.
-	.is-dragging-components-draggable &.is-dragging-within {
+	&.has-child-selected {
 		> .wp-block-navigation__container {
 			opacity: 1;
 			visibility: visible;
@@ -72,17 +70,6 @@
 	flex-direction: column;
 }
 
-.is-dragging-components-draggable .wp-block-navigation-link > .wp-block-navigation__container {
-	// Set opacity to 1 to still be able to show the draggable chip.
-	opacity: 1;
-	visibility: hidden;
-
-	// Show the chip but hide the submenu list.
-	.block-editor-block-draggable-chip-wrapper {
-		visibility: visible;
-	}
-}
-
 /**
  * Colors Selector component
  */
@@ -122,7 +109,7 @@ $colors-selector-size: 22px;
 		min-width: $colors-selector-size;
 		height: $colors-selector-size;
 		min-height: $colors-selector-size;
-		line-height: ( $colors-selector-size - 2 );
+		line-height: ($colors-selector-size - 2);
 		padding: 2px;
 
 		> svg {
@@ -265,6 +252,7 @@ $color-control-label-height: 20px;
 		margin-right: $grid-unit-15;
 		height: $button-size; // Prevents jumpiness.
 	}
+
 }
 
 // When block is vertical.