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 (