diff --git a/public_html/wp-content/plugins/pattern-creator/src/components/openverse/grid.js b/public_html/wp-content/plugins/pattern-creator/src/components/openverse/grid.js
index 7f2d1258e..d522d9507 100644
--- a/public_html/wp-content/plugins/pattern-creator/src/components/openverse/grid.js
+++ b/public_html/wp-content/plugins/pattern-creator/src/components/openverse/grid.js
@@ -16,7 +16,7 @@ import {
__unstableUseCompositeState as useCompositeState,
/* eslint-enable @wordpress/no-unsafe-wp-apis */
} from '@wordpress/components';
-import { useEffect, useState } from '@wordpress/element';
+import { useCallback, useEffect, useState } from '@wordpress/element';
import { useDebounce } from '@wordpress/compose';
/**
@@ -30,7 +30,7 @@ function formatImageObject( item ) {
mime: '',
type: 'image',
subtype: '',
- id: null,
+ id: null, // @todo Passing item.id triggers an API request to media/[id], but leaving this out makes the `value` prop null (so replacing a selected image does not stay selected), `addToGallery` is null even when gallery items exist, etc.
url: item.url,
alt: '',
link: '',
@@ -38,8 +38,8 @@ function formatImageObject( item ) {
};
}
-/* addToGallery, allowedTypes, gallery, value */
-export default function OpenverseGrid( { searchTerm, onClose, onSelect, multiple, ...props } ) {
+/* other props: addToGallery, allowedTypes, gallery, value */
+export default function OpenverseGrid( { searchTerm, onClose, onSelect, multiple } ) {
const [ debouncedSearchTerm, _setDebouncedSearchTerm ] = useState( searchTerm );
const setDebouncedSearchTerm = useDebounce( _setDebouncedSearchTerm, 500 );
@@ -70,7 +70,7 @@ export default function OpenverseGrid( { searchTerm, onClose, onSelect, multiple
} );
}, [ debouncedSearchTerm ] );
- const handleSelect = () => {
+ const onCommitSelected = useCallback( () => {
if ( ! selected || ! selected.length ) {
return;
}
@@ -80,7 +80,20 @@ export default function OpenverseGrid( { searchTerm, onClose, onSelect, multiple
} else {
onSelect( formatImageObject( selected[ 0 ] ) );
}
- };
+
+ onClose();
+ }, [ selected, multiple ] );
+
+ const onClick = useCallback(
+ ( newValue ) => {
+ if ( multiple ) {
+ setSelected( [ ...selected, newValue ] );
+ } else {
+ setSelected( [ newValue ] );
+ }
+ },
+ [ selected, multiple ]
+ );
if ( isLoading ) {
return (
@@ -127,13 +140,13 @@ export default function OpenverseGrid( { searchTerm, onClose, onSelect, multiple
total
) }
-
Pagination…