From 31a99723991599baf88d8af42ea7c8a3781bea4f Mon Sep 17 00:00:00 2001
From: "Soare Robert Daniel (Mac 2023)" <soare.robert.daniel@protonmail.com>
Date: Mon, 28 Aug 2023 15:38:22 +0300
Subject: [PATCH] fix: add cleanup after sorting

---
 src/blocks/components/image-grid/GridList.js   | 18 +++++++++++++++++-
 .../components/image-grid/SortableList.js      |  4 +++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/blocks/components/image-grid/GridList.js b/src/blocks/components/image-grid/GridList.js
index 7e465ba26..dd7e50a0f 100644
--- a/src/blocks/components/image-grid/GridList.js
+++ b/src/blocks/components/image-grid/GridList.js
@@ -8,7 +8,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useRef, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,6 +23,7 @@ const GridList = ({
 	const [ selectedItems, setSelectedItems ] = useState([]);
 	const [ isSorting, setIsSorting ] = useState( false );
 	const [ sortingItemKey, setSortingItemKey ] = useState( null );
+	const containerRef = useRef( null );
 
 	const handleUpdateBeforeSortStart = ({ index }) => {
 		return new Promise( resolve => {
@@ -50,6 +51,20 @@ const GridList = ({
 		setSortingItemKey( null );
 		setSelectedItems([]);
 		onSelectImages( newItems );
+
+		// Remove all extra nodes that react-sortable-hoc adds to the DOM but doesn't remove after sorting is done.
+		document.querySelectorAll( '.o-images-grid-component__image' ).forEach( node => {
+			if ( ! containerRef.current?.container.contains?.( node ) ) {
+
+				// Hide the node until it can be removed to prevent a flash of unstyled content.
+				node.style.display = 'none';
+				setTimeout( () => {
+
+					// Remove the node after a short delay to allow the transition to finish.
+					node.remove();
+				}, 250 );
+			}
+		});
 	};
 
 	const handleItemSelect = item => {
@@ -96,6 +111,7 @@ const GridList = ({
 			onSortEnd={ onSortEnd }
 			distance={ 3 }
 			axis="xy"
+			ref={ containerRef }
 		/>
 	);
 };
diff --git a/src/blocks/components/image-grid/SortableList.js b/src/blocks/components/image-grid/SortableList.js
index b3f1d5d25..53539784f 100644
--- a/src/blocks/components/image-grid/SortableList.js
+++ b/src/blocks/components/image-grid/SortableList.js
@@ -27,12 +27,14 @@ const SortableList = SortableContainer( ({
 	selectedItems,
 	isSorting,
 	sortingItemKey,
-	open
+	open,
+	ref
 }) => {
 	return (
 		<div
 			className={ className }
 			tabIndex="0"
+			ref={ ref }
 		>
 			{ items.map( ( item, index ) => {
 				const isSelected = selectedItems.includes( item );