Adds selection mode to dynamic items block #592.

src/assets/css/tainacan-gutenberg-block-dynamic-items-list.css

@@ -191,7 +191,8 @@
         box-shadow: none; }
   .wp-block-tainacan-dynamic-items-list ul.items-list-edit li.item-list-item {
     display: flex;
-    align-items: flex-start; }
+    align-items: flex-start;
+    position: relative; }
     .wp-block-tainacan-dynamic-items-list ul.items-list-edit li.item-list-item button {
       position: absolute !important;
       background-color: rgba(255, 255, 255, 0.75);

src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/dynamic-and-carousel-items-modal.js

@@ -47,7 +47,8 @@ export default class CarouselItemsModal extends React.Component {
         if (this.props.existingCollectionId) {
             this.fetchCollection(this.props.existingCollectionId);
             this.setState({ 
-                searchURL: this.props.existingSearchURL ? this.props.existingSearchURL : tainacan_blocks.admin_url + 'admin.php?page=tainacan_admin#/collections/'+ this.props.existingCollectionId +  (this.props.loadStrategy == 'search' ? '/items/?iframemode=true&readmode=true&status=publish' : '/items/?iframemode=true&status=publish') });
+                searchURL: this.props.existingSearchURL ? this.props.existingSearchURL : tainacan_blocks.admin_url + 'admin.php?page=tainacan_admin#/collections/'+ this.props.existingCollectionId +  (this.props.loadStrategy == 'search' ? '/items/?iframemode=true&readmode=true&status=publish' : '/items/?iframemode=true&status=publish')
+            });
         } else {
             this.setState({ collectionPage: 1 });
             this.fetchModalCollections();

src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/edit.js

@@ -4,7 +4,7 @@ const { RangeControl, Spinner, Button, ToggleControl, SelectControl, Placeholder
 
 const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
 
-import CarouselItemsModal from './carousel-items-modal.js';
+import CarouselItemsModal from './dynamic-and-carousel-items-modal.js';
 import tainacan from '../../js/axios.js';
 import axios from 'axios';
 import qs from 'qs';

src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/block.json

@@ -85,6 +85,14 @@
             "type": "String",
             "default": ""
         },
+        "selectedItems": {
+            "type": "Array",
+            "default": []
+        },
+        "loadStrategy": {
+            "type": "String",
+            "value": "search"
+        },
         "order": {
             "type": "String",
             "default": ""

src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/deprecated.js

@@ -1,4 +1,206 @@
+const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+
 export default [
+    /* Deprecated when new selection strategy was added */
+    {
+        "attributes": {
+            "content": {
+                "type": "Array",
+                "source": "children",
+                "selector": "div"
+            },
+            "collectionId": {
+                "type": "String",
+                "default": ""
+            },
+            "items": {
+                "type": "Array",
+                "default": []
+            },
+            "showImage": {
+                "type": "Boolean",
+                "default": true
+            },
+            "showName": {
+                "type": "Boolean",
+                "default": true
+            },
+            "layout": {
+                "type": "String",
+                "default": "grid"
+            },
+            "isModalOpen": {
+                "type": "Boolean",
+                "default": false
+            },
+            "gridMargin": {
+                "type": "Number",
+                "default": 0
+            },
+            "searchURL": {
+                "type": "String",
+                "default": ""
+            },
+            "itemsRequestSource": {
+                "type": "String",
+                "default": ""
+            },
+            "maxItemsNumber": {
+                "type": "Number",
+                "value": 12
+            },
+            "isLoading": {
+                "type": "Boolean",
+                "value": false
+            },
+            "isLoadingCollection": {
+                "type": "Boolean",
+                "value": false
+            },
+            "showSearchBar": {
+                "type": "Boolean",
+                "value": false
+            },
+            "showCollectionHeader": {
+                "type": "Boolean",
+                "value": false
+            },
+            "showCollectionLabel": {
+                "type": "Boolean",
+                "value": false
+            },
+            "collection": {
+                "type": "Object",
+                "value": {}
+            },
+            "searchString": {
+                "type": "String",
+                "default": ""
+            },
+            "order": {
+                "type": "String",
+                "default": ""
+            },
+            "blockId": {
+                "type": "String",
+                "default": ""
+            },
+            "collectionBackgroundColor": {
+                "type": "String",
+                "default": "#454647"
+            },
+            "collectionTextColor": {
+                "type": "String",
+                "default": "#ffffff"
+            },
+            "mosaicHeight": {
+                "type": "Number",
+                "value": 280
+            },
+            "mosaicGridColumns": {
+                "type": "Number",
+                "value": 3
+            },
+            "mosaicGridRows": {
+                "type": "Number",
+                "value": 3
+            },
+            "sampleBackgroundImage": {
+                "type": "String",
+                "default": ""
+            },
+            "mosaicItemFocalPoint": {
+                "type": "Object",
+                "default": {
+                    "x": 0.5,
+                    "y": 0.5
+                }
+            },
+            "mosaicDensity": {
+                "type": "Number",
+                "default": 5
+            },
+            "maxColumnsCount": {
+                "type": "Number",
+                "default": 4
+            },
+            "cropImagesToSquare": {
+                "type": "Boolean",
+                "value": true
+            }
+        },
+        "supports": {
+            "align": ["full", "wide"],
+            "html": false,
+            "typography": {
+                "fontSize": true
+            },
+            "color": {
+                "text": true,
+                "background": false,
+                "gradients": false,
+                "link": true
+            }
+        },
+        save: function({ attributes, className }) {
+            const {
+                content, 
+                blockId,
+                collectionId,  
+                showImage,
+                showName,
+                layout,
+                gridMargin,
+                searchURL,
+                maxItemsNumber,
+                order,
+                showSearchBar,
+                showCollectionHeader,
+                showCollectionLabel,
+                collectionBackgroundColor,
+                collectionTextColor,
+                mosaicHeight,
+                mosaicGridRows,
+                mosaicGridColumns,
+                mosaicItemFocalPoint,
+                mosaicDensity,
+                maxColumnsCount,
+                cropImagesToSquare
+            } = attributes;
+        
+            // Gets attributes such as style, that are automatically added by the editor hook
+            const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps.save();
+            return <div
+                        { ...blockProps }
+                        data-module="dynamic-items-list"
+                        search-url={ searchURL }
+                        collection-id={ collectionId }
+                        show-image={ '' + showImage }
+                        show-name={ '' + showName }
+                        show-search-bar={ '' + showSearchBar }
+                        show-collection-header={ '' + showCollectionHeader }
+                        show-collection-label={ '' + showCollectionLabel }
+                        crop-images-to-square={ '' + cropImagesToSquare }
+                        layout={ layout }
+                        mosaic-height={ mosaicHeight }
+                        mosaic-density={ mosaicDensity }
+                        mosaic-grid-rows={ mosaicGridRows } 
+                        mosaic-grid-columns={ mosaicGridColumns }
+                        mosaic-item-focal-point-x={ (mosaicItemFocalPoint && mosaicItemFocalPoint.x ? mosaicItemFocalPoint.x : 0.5) } 
+                        mosaic-item-focal-point-y={ (mosaicItemFocalPoint && mosaicItemFocalPoint.y ? mosaicItemFocalPoint.y : 0.5) } 
+                        max-columns-count={ maxColumnsCount }
+                        collection-background-color={ collectionBackgroundColor }
+                        collection-text-color={ collectionTextColor }
+                        grid-margin={ gridMargin }
+                        max-items-number={ maxItemsNumber }
+                        order={ order }
+                        tainacan-api-root={ tainacan_blocks.root }
+                        tainacan-base-url={ tainacan_blocks.base_url }
+                        id={ 'wp-block-tainacan-dynamic-items-list_' + blockId }>
+                            { content }
+                    </div>
+        }
+    },
     /* Deprecated on Tainacan 0.18.4, due to the new block.json strategy */
     {
         attributes: {

src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/dynamic-items-modal.js

@@ -1,293 +0,0 @@
-import tainacan from '../../js/axios.js';
-import axios from 'axios';
-
-const { __ } = wp.i18n;
-
-const { TextControl, Button, Modal, RadioControl, Spinner } = wp.components;
-
-export default class DynamicItemsModal extends React.Component {
-    constructor(props) {
-        super(props);
-
-        // Initialize state
-        this.state = {
-            collectionsPerPage: 24,
-            collectionId: undefined,  
-            collectionName: '', 
-            isLoadingCollections: false, 
-            modalCollections: [],
-            totalModalCollections: 0, 
-            collectionPage: 1,
-            temporaryCollectionId: '',
-            searchCollectionName: '',
-            collections: [],
-            collectionsRequestSource: undefined,
-            searchURL: '',
-        };
-        
-        // Bind events
-        this.resetCollections = this.resetCollections.bind(this);
-        this.selectCollection = this.selectCollection.bind(this);
-        this.fetchCollections = this.fetchCollections.bind(this);
-        this.fetchModalCollections = this.fetchModalCollections.bind(this);
-        this.fetchCollection = this.fetchCollection.bind(this);
-        this.applySelectedSearchURL = this.applySelectedSearchURL.bind(this);
-    }
-
-    componentWillMount() {
-        
-        this.setState({ 
-            collectionId: this.props.existingCollectionId
-        });
-         
-        if (this.props.existingCollectionId) {
-            this.fetchCollection(this.props.existingCollectionId);
-            this.setState({ searchURL: this.props.existingSearchURL ? this.props.existingSearchURL : tainacan_blocks.admin_url + 'admin.php?page=tainacan_admin#/collections/'+ this.props.existingCollectionId + '/items/?readmode=true&iframemode=true&status=publish' });
-        } else {
-            this.setState({ collectionPage: 1 });
-            this.fetchModalCollections();
-        }
-    }
-
-    // COLLECTIONS RELATED --------------------------------------------------
-    fetchModalCollections() {
-
-        let someModalCollections = this.state.modalCollections;
-        if (this.state.collectionPage <= 1)
-            someModalCollections = [];
-
-        let endpoint = '/collections/?orderby=title&order=asc&perpage=' + this.state.collectionsPerPage + '&paged=' + this.state.collectionPage;
-
-        this.setState({ 
-            isLoadingCollections: true,
-            collectionPage: this.state.collectionPage + 1, 
-            modalCollections: someModalCollections
-        });
-
-        tainacan.get(endpoint)
-            .then(response => {
-
-                let otherModalCollections = this.state.modalCollections;
-                for (let collection of response.data) {
-                    otherModalCollections.push({ 
-                        name: collection.name, 
-                        id: collection.id
-                    });
-                }
-
-                this.setState({ 
-                    isLoadingCollections: false, 
-                    modalCollections: otherModalCollections,
-                    totalModalCollections: response.headers['x-wp-total']
-                });
-            
-                return otherModalCollections;
-            })
-            .catch(error => {
-                console.log('Error trying to fetch collections: ' + error);
-            });
-    }
-
-    fetchCollection(collectionId) {
-        tainacan.get('/collections/' + collectionId)
-            .then((response) => {
-                this.setState({ collectionName: response.data.name });
-            }).catch(error => {
-                console.log('Error trying to fetch collection: ' + error);
-            });
-    }
-
-    selectCollection(selectedCollectionId) {
-        this.setState({
-            collectionId: selectedCollectionId,
-            searchURL: tainacan_blocks.admin_url + 'admin.php?page=tainacan_admin#/collections/' + selectedCollectionId + '/items/?readmode=true&iframemode=true&status=publish'
-        });
-
-        this.props.onSelectCollection(selectedCollectionId);
-        this.fetchCollection(selectedCollectionId);
-    }
-
-    fetchCollections(name) {
-
-        if (this.state.collectionsRequestSource != undefined)
-            this.state.collectionsRequestSource.cancel('Previous collections search canceled.');
-
-        let aCollectionRequestSource = axios.CancelToken.source();
-
-        this.setState({ 
-            collectionsRequestSource: aCollectionRequestSource,
-            isLoadingCollections: true, 
-            collections: [],
-            items: []
-        });
-
-        let endpoint = '/collections/?orderby=title&order=asc&perpage=' + this.state.collectionsPerPage;
-        if (name != undefined && name != '')
-            endpoint += '&search=' + name;
-
-        tainacan.get(endpoint, { cancelToken: aCollectionRequestSource.token })
-            .then(response => {
-                let someCollections = response.data.map((collection) => ({ name: collection.name, id: collection.id + '' }));
-
-                this.setState({ 
-                    isLoadingCollections: false, 
-                    collections: someCollections
-                });
-                
-                return someCollections;
-            })
-            .catch(error => {
-                console.log('Error trying to fetch collections: ' + error);
-            });
-    }
-
-    applySelectedSearchURL() {    
-        this.props.onApplySearchURL(document.getElementById("itemsFrame").contentWindow.location.href);
-    }
-
-    resetCollections() {
-
-        this.setState({
-            collectionId: null,
-            collectionPage: 1,
-            modalCollections: []
-        });
-        this.fetchModalCollections(); 
-    }
-
-    cancelSelection() {
-
-        this.setState({
-            modalCollections: []
-        });
-
-        this.props.onCancelSelection();
-    }
-
-    render() {
-        return this.state.collectionId ? (
-            // Items modal
-        <Modal
-                className="wp-block-tainacan-modal dynamic-modal"
-                title={__('Configure the items search to be used on block', 'tainacan')}
-                onRequestClose={ () => this.cancelSelection() }
-                shouldCloseOnClickOutside={ false }
-                contentLabel={__('Configure your items search to be shown on block', 'tainacan')}>
-                <iframe
-                        id="itemsFrame"
-                        src={ this.state.searchURL } />
-                <div className="modal-footer-area">
-                    <Button 
-                        isSecondary
-                        onClick={ () => { this.resetCollections() }}>
-                        {__('Switch collection', 'tainacan')}
-                    </Button>
-                    <Button 
-                        isPrimary
-                        onClick={ () => this.applySelectedSearchURL() }>
-                        {__('Use this search', 'tainacan')}
-                    </Button>
-                </div>
-        </Modal>
-    ) : (
-        // Collections modal
-        <Modal
-                className="wp-block-tainacan-modal"
-                title={__('Select a collection to fetch items from', 'tainacan')}
-                onRequestClose={ () => this.cancelSelection() }
-                shouldCloseOnClickOutside={ false }
-                contentLabel={__('Select items', 'tainacan')}>
-                <div>
-                    <div className="modal-search-area">
-                        <TextControl 
-                                label={__('Search for a collection', 'tainacan')}
-                                value={ this.state.searchCollectionName }
-                                onChange={(value) => {
-                                    this.setState({ 
-                                        searchCollectionName: value
-                                    });
-                                    _.debounce(this.fetchCollections(value), 300);
-                                }}/>
-                    </div>
-                    {(
-                    this.state.searchCollectionName != '' ? (
-                        this.state.collections.length > 0 ?
-                        (
-                            <div>
-                                <div className="modal-radio-list">
-                                    {
-                                    <RadioControl
-                                        selected={ this.state.temporaryCollectionId }
-                                        options={
-                                            this.state.collections.map((collection) => {
-                                                return { label: collection.name, value: '' + collection.id }
-                                            })
-                                        }
-                                        onChange={ ( aCollectionId ) => { 
-                                            this.setState({ temporaryCollectionId: aCollectionId });
-                                        } } />
-                                    }                                      
-                                </div>
-                            </div>
-                        ) :
-                        this.state.isLoadingCollections ? (
-                            <Spinner />
-                        ) :
-                        <div className="modal-loadmore-section">
-                            <p>{ __('Sorry, no collection found.', 'tainacan') }</p>
-                        </div> 
-                    ):
-                    this.state.modalCollections.length > 0 ? 
-                    (   
-                        <div>
-                            <div className="modal-radio-list">
-                                {
-                                <RadioControl
-                                    selected={ this.state.temporaryCollectionId }
-                                    options={
-                                        this.state.modalCollections.map((collection) => {
-                                            return { label: collection.name, value: '' + collection.id }
-                                        })
-                                    }
-                                    onChange={ ( aCollectionId ) => { 
-                                        this.setState({ temporaryCollectionId: aCollectionId });
-                                    } } />
-                                }                                     
-                            </div>
-                            <div className="modal-loadmore-section">
-                                <p>{ __('Showing', 'tainacan') + " " + this.state.modalCollections.length + " " + __('of', 'tainacan') + " " + this.state.totalModalCollections + " " + __('collections', 'tainacan') + "."}</p>
-                                {
-                                    this.state.modalCollections.length < this.state.totalModalCollections ? (
-                                    <Button 
-                                        isSecondary
-                                        isSmall
-                                        onClick={ () => this.fetchModalCollections() }>
-                                        {__('Load more', 'tainacan')}
-                                    </Button>
-                                    ) : null
-                                }
-                            </div>
-                        </div>
-                    ) : this.state.isLoadingCollections ? <Spinner/> :
-                    <div className="modal-loadmore-section">
-                        <p>{ __('Sorry, no collection found.', 'tainacan') }</p>
-                    </div>
-                )}
-                <div className="modal-footer-area">
-                    <Button 
-                        isSecondary
-                        onClick={ () => { this.cancelSelection() }}>
-                        {__('Cancel', 'tainacan')}
-                    </Button>
-                    <Button
-                        isPrimary
-                        disabled={ this.state.temporaryCollectionId == undefined || this.state.temporaryCollectionId == null || this.state.temporaryCollectionId == ''}
-                        onClick={ () => { this.selectCollection(this.state.temporaryCollectionId);  } }>
-                        {__('Configure search', 'tainacan')}
-                    </Button>
-                </div>
-            </div>
-        </Modal> 
-        );
-    }
-}

src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/edit.js

@@ -4,7 +4,7 @@ const { ResizableBox, FocalPointPicker, SelectControl, RangeControl, Spinner, Bu
 
 const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
 
-import DynamicItemsModal from './dynamic-items-modal.js';
+import DynamicItemsModal from '../carousel-items-list/dynamic-and-carousel-items-modal.js';
 import tainacan from '../../js/axios.js';
 import axios from 'axios';
 import qs from 'qs';
@@ -27,7 +27,9 @@ export default function({ attributes, setAttributes, className, isSelected, clie
         maxItemsNumber,
         order,
         searchString,
+        selectedItems,
         isLoading,
+        loadStrategy,
         showSearchBar,
         showCollectionHeader,
         showCollectionLabel,
@@ -49,6 +51,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
 
     // Obtains block's client id to render it on save function
     setAttributes({ blockId: clientId });
+    const thumbHelper = ThumbnailHelperFunctions();
     
     // Sets some defaults that were not working
     if (maxColumnsCount === undefined) {
@@ -59,8 +62,10 @@ export default function({ attributes, setAttributes, className, isSelected, clie
         cropImagesToSquare = true;    
         setAttributes({ cropImagesToSquare: cropImagesToSquare });
     }
-            
+    if (loadStrategy === undefined) {
-    const thumbHelper = ThumbnailHelperFunctions();
+        loadStrategy = 'search';
+        setAttributes({ loadStrategy: loadStrategy });
+    }
     
     function prepareItem(item) {
         return (
@@ -72,20 +77,31 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                     backgroundPosition: layout == 'mosaic' ? `${ (mosaicItemFocalPoint && mosaicItemFocalPoint.x ? mosaicItemFocalPoint.x : 0.5) * 100 }% ${ (mosaicItemFocalPoint && mosaicItemFocalPoint.y ? mosaicItemFocalPoint.y : 0.5) * 100 }%` : 'none'
                 }}
             >
+                { loadStrategy == 'selection' ?
+                    ( tainacan_blocks.wp_version < '5.4' ?
+                        <IconButton
+                            onClick={ () => removeItemOfId(item.id) }
+                            icon="no-alt"
+                            label={__('Remove', 'tainacan')}/>
+                        :
+                        <Button
+                            onClick={ () => removeItemOfId(item.id) }
+                            icon="no-alt"
+                            label={__('Remove', 'tainacan')}/>
+                    )
+                    :null
+                }
                 <a 
                     id={ isNaN(item.id) ? item.id : 'item-id-' + item.id }
                     href={ item.url } 
                     onClick={ (event) => event.preventDefault() }
                     target="_blank"
-                    style={ {
-                        
-                    } }
                     className={ (!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '') }>
                     <img
                         src={ thumbHelper.getSrc(item['thumbnail'], ( (layout == 'list' || cropImagesToSquare) ? 'tainacan-medium' : 'tainacan-medium-full'), item['document_mimetype']) }
                         srcSet={ thumbHelper.getSrcSet(item['thumbnail'], ( (layout == 'list' || cropImagesToSquare) ? 'tainacan-medium' : 'tainacan-medium-full'), item['document_mimetype']) }
                         alt={ item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : __( 'Thumbnail', 'tainacan' )) }/>
-                    <span>{ item.title ? item.title : '' }</span>
+                    <span>{ item.id ? item.id : '' }</span>
                 </a>
             </li>
         );
@@ -111,21 +127,115 @@ export default function({ attributes, setAttributes, className, isSelected, clie
     }
 
     function setContent() {
+        isLoading = true;
 
-        if (searchURL) {
+        setAttributes({
+            isLoading: isLoading
+        });
 
         items = [];
-            isLoading = true;
+        
+        if (loadStrategy == 'parent') {
+
+            if (layout !== 'mosaic') {
+            
+                for (let item of selectedItems)
+                    items.push(prepareItem(item));
+
+                setAttributes({
+                    content: <div></div>,
+                    items: items,
+                    isLoading: false
+                });
+
+            } else {
+                // Initializes some variables
+                mosaicDensity = mosaicDensity ? mosaicDensity : 5;
+                mosaicGridRows = mosaicGridRows ? mosaicGridRows : 3;
+                mosaicGridColumns = mosaicGridColumns ? mosaicGridColumns : 3;
+                mosaicHeight = mosaicHeight ? mosaicHeight : 280;
+                mosaicItemFocalPoint = mosaicItemFocalPoint ? mosaicItemFocalPoint : { x: 0.5, y: 0.5 };
+                sampleBackgroundImage = response.data.items && response.data.items[0] && response.data.items[0] ? getItemThumbnail(response.data.items[0], 'tainacan-medium') : ''; 
+
+                const mosaicGroups = mosaicPartition(response.data.items);
+                for (let mosaicGroup of mosaicGroups)
+                    items.push(prepareMosaicItem(mosaicGroup, mosaicGroups.length));
+
+                setAttributes({
+                    content: <div></div>,
+                    items: items,
+                    isLoading: false,
+                    itemsRequestSource: itemsRequestSource,
+                    mosaicDensity: mosaicDensity,
+                    mosaicHeight: mosaicHeight,
+                    mosaicGridRows: mosaicGridRows,
+                    mosaicGridColumns: mosaicGridColumns,
+                    mosaicItemFocalPoint: mosaicItemFocalPoint,
+                    sampleBackgroundImage: sampleBackgroundImage
+                });
+            }
+
+        } else if (loadStrategy == 'selection') {
 
             if (itemsRequestSource != undefined && typeof itemsRequestSource == 'function')
                 itemsRequestSource.cancel('Previous items search canceled.');
 
             itemsRequestSource = axios.CancelToken.source();
             
+            let endpoint = '/collection/' + collectionId + '/items?'+ qs.stringify({ postin: selectedItems, perpage: selectedItems.length }) + '&fetch_only=title,url,thumbnail';
+            
+            tainacan.get(endpoint, { cancelToken: itemsRequestSource.token })
+                .then(response => {
+
+                    if (layout !== 'mosaic') {
+
+                        for (let item of response.data.items)
+                            items.push(prepareItem(item));
+
                         setAttributes({
-                isLoading: isLoading
+                            content: <div></div>,
+                            items: items,
+                            isLoading: false,
+                            itemsRequestSource: itemsRequestSource
                         });
 
+                    } else {
+                        // Initializes some variables
+                        mosaicDensity = mosaicDensity ? mosaicDensity : 5;
+                        mosaicGridRows = mosaicGridRows ? mosaicGridRows : 3;
+                        mosaicGridColumns = mosaicGridColumns ? mosaicGridColumns : 3;
+                        mosaicHeight = mosaicHeight ? mosaicHeight : 280;
+                        mosaicItemFocalPoint = mosaicItemFocalPoint ? mosaicItemFocalPoint : { x: 0.5, y: 0.5 };
+                        sampleBackgroundImage = response.data.items && response.data.items[0] && response.data.items[0] ? getItemThumbnail(response.data.items[0], 'tainacan-medium') : ''; 
+
+                        const mosaicGroups = mosaicPartition(response.data.items);
+                        for (let mosaicGroup of mosaicGroups)
+                            items.push(prepareMosaicItem(mosaicGroup, mosaicGroups.length));
+
+                        setAttributes({
+                            content: <div></div>,
+                            items: items,
+                            isLoading: false,
+                            itemsRequestSource: itemsRequestSource,
+                            mosaicDensity: mosaicDensity,
+                            mosaicHeight: mosaicHeight,
+                            mosaicGridRows: mosaicGridRows,
+                            mosaicGridColumns: mosaicGridColumns,
+                            mosaicItemFocalPoint: mosaicItemFocalPoint,
+                            sampleBackgroundImage: sampleBackgroundImage
+                        });
+                    }
+                        
+                });
+        } else {
+
+            if (searchURL) {
+
+                if (itemsRequestSource != undefined && typeof itemsRequestSource == 'function')
+                    itemsRequestSource.cancel('Previous items search canceled.');
+
+                itemsRequestSource = axios.CancelToken.source();
+                
                 let endpoint = '/collection' + searchURL.split('#')[1].split('/collections')[1];
                 let query = endpoint.split('?')[1];
                 let queryObject = qs.parse(query);
@@ -212,6 +322,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                     });
             }
         }
+    }
 
     function fetchCollectionForHeader() {
         if (showCollectionHeader) {
@@ -261,13 +372,46 @@ export default function({ attributes, setAttributes, className, isSelected, clie
         )
     }
 
-    function openDynamicItemsModal() {
+    function openDynamicItemsModal(aLoadStrategy) {
+        loadStrategy = aLoadStrategy;
         isModalOpen = true;
         setAttributes( { 
-            isModalOpen: isModalOpen
+            isModalOpen: isModalOpen,
+            loadStrategy: loadStrategy
         } );
     }
 
+    function removeItemOfId(itemId) {
+        
+        let existingItemIndex = -1;
+
+        let existingSelectedItemIndex = selectedItems.findIndex((existingSelectedItem) => existingSelectedItem == itemId);
+        if (existingSelectedItemIndex >= 0)
+            selectedItems.splice(existingSelectedItemIndex, 1);
+
+        if (layout == 'mosaic') {
+            existingItemIndex = items.findIndex((existingItem) => existingItem.key == itemId);
+
+            setAttributes({ 
+                selectedItems: selectedItems,
+                content: <div></div> 
+            });
+            // In the case of the mosaic layout, we need to re-render as the items array is organized in groups.
+            setContent();
+        } else {
+            existingItemIndex = items.findIndex((existingItem) => existingItem.key == itemId);
+
+            if (existingItemIndex >= 0)
+                items.splice(existingItemIndex, 1);
+            
+            setAttributes({ 
+                selectedItems: selectedItems,
+                items: items,
+                content: <div></div> 
+            });
+        }
+    }
+
     function updateLayout(newLayout) {
         layout = newLayout;
 
@@ -355,12 +499,14 @@ export default function({ attributes, setAttributes, className, isSelected, clie
         : (
         <div { ...blockProps }>
 
-            <div>
+            { items.length ?
                 <BlockControls>
                     { TainacanBlocksCompatToolbar({ controls: layoutControls }) }
-                    { items.length ? 
+                    { loadStrategy != 'parent' ? 
+                        (
+                            loadStrategy == 'selection' ?
                             TainacanBlocksCompatToolbar({
-                            label: __('Configure search', 'tainacan'),
+                                label: __('Add more items', 'tainacan'),
                                 icon: <svg
                                             xmlns="http://www.w3.org/2000/svg"
                                             viewBox="0 -2 24 24"
@@ -368,11 +514,26 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                                             width="24px">
                                         <path d="M14,2V4H7v7.24A5.33,5.33,0,0,0,5.5,11a4.07,4.07,0,0,0-.5,0V4A2,2,0,0,1,7,2Zm7,10v8a2,2,0,0,1-2,2H12l1-1-2.41-2.41A5.56,5.56,0,0,0,11,16.53a5.48,5.48,0,0,0-2-4.24V8a2,2,0,0,1,2-2h4Zm-2.52,0L14,7.5V12ZM11,21l-1,1L8.86,20.89,8,20H8l-.57-.57A3.42,3.42,0,0,1,5.5,20a3.5,3.5,0,0,1-.5-7,2.74,2.74,0,0,1,.5,0,3.41,3.41,0,0,1,1.5.34,3.5,3.5,0,0,1,2,3.16,3.42,3.42,0,0,1-.58,1.92L9,19H9l.85.85Zm-4-4.5A1.5,1.5,0,0,0,5.5,15a1.39,1.39,0,0,0-.5.09A1.5,1.5,0,0,0,5.5,18a1.48,1.48,0,0,0,1.42-1A1.5,1.5,0,0,0,7,16.53Z"/>
                                     </svg>,
-                            onClick: openDynamicItemsModal
+                                onClick: openDynamicItemsModal,
+                                onClickParams: 'selection'
                             })
-                    : null }
+                            :
+                            TainacanBlocksCompatToolbar({
+                                label: __('Configure a search', 'tainacan'),
+                                icon: <svg
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            viewBox="0 -2 24 24"
+                                            height="24px"
+                                            width="24px">
+                                        <path d="M14,2V4H7v7.24A5.33,5.33,0,0,0,5.5,11a4.07,4.07,0,0,0-.5,0V4A2,2,0,0,1,7,2Zm7,10v8a2,2,0,0,1-2,2H12l1-1-2.41-2.41A5.56,5.56,0,0,0,11,16.53a5.48,5.48,0,0,0-2-4.24V8a2,2,0,0,1,2-2h4Zm-2.52,0L14,7.5V12ZM11,21l-1,1L8.86,20.89,8,20H8l-.57-.57A3.42,3.42,0,0,1,5.5,20a3.5,3.5,0,0,1-.5-7,2.74,2.74,0,0,1,.5,0,3.41,3.41,0,0,1,1.5.34,3.5,3.5,0,0,1,2,3.16,3.42,3.42,0,0,1-.58,1.92L9,19H9l.85.85Zm-4-4.5A1.5,1.5,0,0,0,5.5,15a1.39,1.39,0,0,0-.5.09A1.5,1.5,0,0,0,5.5,18a1.48,1.48,0,0,0,1.42-1A1.5,1.5,0,0,0,7,16.53Z"/>
+                                    </svg>,
+                                onClick: openDynamicItemsModal,
+                                onClickParams: 'search'
+                            })
+                        ) : null
+                    }
                 </BlockControls>
-            </div>
+            : null }
 
             <div>
                 <InspectorControls>
@@ -435,6 +596,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                             : null
                             }
                     </PanelBody> 
+                    { loadStrategy == 'search' ? 
                         <PanelBody
                                 title={__('Search bar', 'tainacan')}
                                 initialOpen={ true }
@@ -450,10 +612,12 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                                 }
                             />
                         </PanelBody>
+                    : null }
                     <PanelBody
                             title={__('Items', 'tainacan')}
                             initialOpen={ true }
                         >
+                        { loadStrategy == 'search' ?
                             <div>
                                 <RangeControl
                                     label={__('Maximum number of items', 'tainacan')}
@@ -466,8 +630,9 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                                     min={ 1 }
                                     max={ 96 }
                                 />
-                        </div>
                             <hr></hr>
+                        </div>
+                         : null }
                         <div>
                             { layout == 'list' ? 
                                 <div style={{ marginTop: '16px'}}>
@@ -594,6 +759,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                                     { label: '4 x 3', value: '4x3' },
                                     { label: '4 x 5', value: '4x5' },
                                     { label: '5 x 4', value: '5x4' },
+                                    { label: '6 x 5', value: '6x5' },
                                 ] }
                                 onChange={ ( aGrid ) => { 
                                     mosaicGridRows = aGrid.split('x')[0];
@@ -628,21 +794,41 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                 <div>
                     { isModalOpen ? 
                         <DynamicItemsModal
+                            loadStrategy={ loadStrategy }
                             existingCollectionId={ collectionId } 
                             existingSearchURL={ searchURL } 
                             onSelectCollection={ (selectedCollectionId) => {
+                                if (collectionId != selectedCollectionId) {
+                                    items = [];
+                                    selectedItems = [];
+                                }
                                 collectionId = selectedCollectionId;
-                                setAttributes({ collectionId: collectionId });
+                                setAttributes({ 
+                                    collectionId: collectionId,
+                                    items: items,
+                                    selectedItems: selectedItems
+                                });
                                 fetchCollectionForHeader();
                             }}
                             onApplySearchURL={ (aSearchURL) =>{
-                                searchURL = aSearchURL
+                                searchURL = aSearchURL;
+                                loadStrategy = 'search';
                                 setAttributes({
                                     searchURL: searchURL,
                                     isModalOpen: false
                                 });
                                 setContent();
                             }}
+                            onApplySelectedItems={ (aSelectionOfItems) => {
+                                selectedItems = selectedItems.concat(aSelectionOfItems); 
+                                loadStrategy = 'selection';
+                                setAttributes({
+                                    selectedItems: selectedItems,
+                                    loadStrategy: loadStrategy,
+                                    isModalOpen: false
+                                });
+                                setContent();
+                            }}
                             onCancelSelection={ () => setAttributes({ isModalOpen: false }) }/> 
                         : null
                     }
@@ -809,12 +995,25 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                     </svg>
                         {__('Dynamically list items from a Tainacan items search', 'tainacan')}
                     </p>
+                    { 
+                        loadStrategy != 'parent' ?
+                            <div>
                                 <Button
                                     isPrimary
                                     type="button"
-                        onClick={ () => openDynamicItemsModal() }>
+                                    onClick={ () => openDynamicItemsModal('selection') }>
-                        {__('Configure search', 'tainacan')}
+                                    {__('Select Items', 'tainacan')}
                                 </Button> 
+                                <p style={{ margin: '0 12px' }}>{__('or', 'tainacan')}</p>
+                                <Button
+                                    isPrimary
+                                    type="button"
+                                    onClick={ () => openDynamicItemsModal('search') }>
+                                    {__('Configure a search', 'tainacan')}
+                                </Button>
+                            </div>
+                        : null
+                    }
                 </Placeholder>
                 ) : null
             }

src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/style.scss

@@ -237,6 +237,7 @@
     ul.items-list-edit li.item-list-item {
         display: flex;
         align-items: flex-start;
+        position: relative;
 
         button {
             position: absolute !important;