ff compat

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

@@ -30,6 +30,7 @@ import { useIntersectionObserver } from './use-intersection-observer';
 import { useScrollIntoView } from './use-scroll-into-view';
 import { useFlashEditableBlocks } from '../../use-flash-editable-blocks';
 import { canBindBlock } from '../../../hooks/use-bindings-attributes';
+import { useFirefoxDraggableCompatibility } from './use-firefox-draggable-compatibility';
 
 /**
  * This hook is used to lightly mark an element as a block element. The element
@@ -106,6 +107,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 	// translators: %s: Type of block (i.e. Text, Image etc)
 	const blockLabel = sprintf( __( 'Block: %s' ), blockTitle );
 	const htmlSuffix = mode === 'html' && ! __unstableIsHtml ? '-visual' : '';
+	const ffDragRef = useFirefoxDraggableCompatibility();
 	const mergedRefs = useMergeRefs( [
 		props.ref,
 		useFocusFirstElement( { clientId, initialPosition } ),
@@ -121,6 +123,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 			isEnabled: isSectionBlock,
 		} ),
 		useScrollIntoView( { isSelected } ),
+		canMove ? ffDragRef : undefined,
 	] );
 
 	const blockEditContext = useBlockEditContext();
@@ -153,7 +156,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 
 	return {
 		tabIndex: blockEditingMode === 'disabled' ? -1 : 0,
-		draggable: ! hasChildSelected && canMove ? true : undefined,
+		draggable: canMove ? true : undefined,
 		...wrapperProps,
 		...props,
 		ref: mergedRefs,

packages/block-editor/src/components/block-list/use-block-props/use-firefox-draggable-compatibility.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+
+export function useFirefoxDraggableCompatibility() {
+	return useRefEffect( ( node ) => {
+		function onDown( event ) {
+			if ( event.target.isContentEditable ) {
+				node.draggable = false;
+			} else {
+				node.draggable = true;
+			}
+		}
+		const { ownerDocument } = node;
+		ownerDocument.addEventListener( 'pointerdown', onDown );
+		return () => {
+			ownerDocument.removeEventListener( 'pointerdown', onDown );
+		};
+	}, [] );
+}