Finishes implementation of search and sorting bar inside block editor.

src/assets/css/tainacan-gutenberg-blocks-style.css

@@ -402,8 +402,43 @@
 
 .wp-block-tainacan-dynamic-items-list {
   margin: 2rem 0px; }
-  .wp-block-tainacan-dynamic-items-list .components-spinner {
+  .wp-block-tainacan-dynamic-items-list .spinner-container {
-    margin: 1rem 50%; }
+    min-height: 56px;
+    padding: 1rem;
+    display: flex;
+    justify-content: center;
+    align-items: center; }
+  .wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #cbcbcb;
+    padding: 1.25rem 0 0.75rem;
+    margin-bottom: 1rem; }
+    .wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar button {
+      margin-right: 0.75rem;
+      z-index: 2; }
+      .wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar button svg {
+        fill: #cbcbcb;
+        transition: fill 0.4s ease; }
+      .wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar button:hover svg {
+        fill: #545758; }
+      .wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar button:focus, .wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar button:active {
+        border: none;
+        box-shadow: none; }
+      .wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar button.sorting-button-selected svg {
+        fill: #545758; }
+    .wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar input {
+      width: 20%;
+      border-radius: 0;
+      margin-left: -52px;
+      padding-left: 52px;
+      border: 1px solid white;
+      transition: border-color 0.7s ease, width 0.5s ease-in; }
+      .wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar input:focus, .wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar input:active, .wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar input:hover {
+        width: 100%;
+        border: 1px solid #cbcbcb;
+        box-shadow: none; }
   .wp-block-tainacan-dynamic-items-list ul.items-list.items-list-without-margin,
   .wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-list-without-margin {
     grid-template-columns: repeat(auto-fill, 185px);

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

@@ -2,8 +2,53 @@
     margin: 2rem 0px;
 
     // Spinner
-    .components-spinner {
+    .spinner-container {
-        margin: 1rem 50%;
+        min-height: 56px;
+        padding: 1rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    // Search control bar
+    .dynamic-items-search-bar {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid #cbcbcb;
+        padding: 1.25rem 0 0.75rem;
+        margin-bottom: 1rem;
+
+        button {
+            margin-right: 0.75rem;
+            z-index: 2;
+
+            svg { 
+                fill: #cbcbcb; 
+                transition: fill 0.4s ease;
+            }
+            &:hover svg { fill: #545758; }
+            &:focus, &:active { border: none; box-shadow: none; }
+            &.sorting-button-selected svg {
+                fill: #545758;
+            }
+        }
+        input {
+            width: 20%;
+            border-radius: 0;
+            margin-left: -52px;
+            padding-left: 52px;
+            border: 1px solid white;
+            transition: border-color 0.7s ease, width 0.5s ease-in;
+
+            &:focus,
+            &:active,
+            &:hover {
+                width: 100%;
+                border: 1px solid #cbcbcb;
+                box-shadow: none;
+            }
+        }
     }
 
     // Grid View Mode ----------------------------------------------------

src/gutenberg-blocks/tainacan-items/dynamic-items-list/index.js

@@ -74,6 +74,14 @@ registerBlockType('tainacan/dynamic-items-list', {
         showSearchBar: {
             type: Boolean,
             value: false
+        },
+        searchString: {
+            type: String,
+            default: undefined
+        },
+        order: {
+            type: String,
+            default: undefined
         }
     },
     supports: {
@@ -93,6 +101,8 @@ registerBlockType('tainacan/dynamic-items-list', {
             searchURL,
             itemsRequestSource,
             maxItemsNumber,
+            order,
+            searchString,
             isLoading,
             showSearchBar
         } = attributes;
@@ -155,6 +165,26 @@ registerBlockType('tainacan/dynamic-items-list', {
                 setAttributes({ maxItemsNumber: 12 });
             }
 
+            // Set up sorting order
+            if (order != undefined)
+                queryObject.order = order;
+            else if (queryObject.order != undefined)
+                setAttributes({ order: queryObject.order });
+            else {
+                queryObject.order = 'asc';
+                setAttributes({ order: 'asc' });
+            }
+
+            // Set up sorting order
+            if (searchString != undefined)
+                queryObject.search = searchString;
+            else if (queryObject.search != undefined)
+                setAttributes({ searchString: queryObject.search });
+            else {
+                delete queryObject.search;
+                setAttributes({ searchString: undefined });
+            }
+
             // Remove unecessary queries
             delete queryObject.readmode;
             delete queryObject.iframemode;
@@ -207,6 +237,17 @@ registerBlockType('tainacan/dynamic-items-list', {
             setContent();
         }
 
+        function applySearchString(event) {
+
+            let value = event.target.value;
+
+            if (searchString != value) {
+                searchString = value;
+                setAttributes({ searchString: searchString });
+                setContent();
+            }
+        }
+
         // Executed only on the first load of page
         if(content && content.length && content[0].type)
             setContent();
@@ -352,6 +393,58 @@ registerBlockType('tainacan/dynamic-items-list', {
                     ) : null
                 }
 
+                {
+                    showSearchBar ?
+                    <div class="dynamic-items-search-bar">
+                        <Button
+                            onClick={ () => { order = 'asc'; setAttributes({ order: order }); setContent(); }}
+                            className={order == 'asc' ? 'sorting-button-selected' : ''}
+                            label={__('label_sort_ascending', 'tainacan')}>
+                            <span class="icon">
+                                <i>
+                                    <svg width="24" height="24" viewBox="-2 -4 20 20">
+                                    <path d="M6.7,10.8l-3.3,3.3L0,10.8h2.5V0h1.7v10.8H6.7z M11.7,0.8H8.3v1.7h3.3V0.8z M14.2,5.8H8.3v1.7h5.8V5.8z M16.7,10.8H8.3v1.7	h8.3V10.8z"/>       
+                                    </svg>
+                                </i>
+                            </span>
+                        </Button>  
+                        <Button
+                            onClick={ () => { order = 'desc'; setAttributes({ order: order }); setContent(); }}
+                            className={order == 'desc' ? 'sorting-button-selected' : ''}
+                            label={__('label_sort_descending', 'tainacan')}>
+                            <span class="icon">
+                                <i>
+                                    <svg width="24" height="24" viewBox="-2 -4 20 20">
+                                    <path d="M6.7,3.3H4.2v10.8H2.5V3.3H0L3.3,0L6.7,3.3z M11.6,2.5H8.3v1.7h3.3V2.5z M14.1,7.5H8.3v1.7h5.8V7.5z M16.6,12.5H8.3v1.7 h8.3V12.5z"/>
+                                    </svg>
+                                </i>
+                            </span>
+                        </Button>  
+                        <Button
+                            onClick={ () => { setContent(); }}
+                            label={__('search', 'tainacan')}>
+                            <span class="icon">
+                                <i>
+                                    <svg width="24" height="24" viewBox="-2 -4 20 20">
+                                    <path class="st0" d="M0,5.8C0,5,0.2,4.2,0.5,3.5s0.7-1.3,1.2-1.8s1.1-0.9,1.8-1.2C4.2,0.1,5,0,5.8,0S7.3,0.1,8,0.5
+                                        c0.7,0.3,1.3,0.7,1.8,1.2s0.9,1.1,1.2,1.8c0.5,1.2,0.5,2.5,0.2,3.7c0,0.2-0.1,0.4-0.2,0.6c0,0.1-0.2,0.6-0.2,0.6
+                                        c0.6,0.6,1.3,1.3,1.9,1.9c0.7,0.7,1.3,1.3,2,2c0,0,0.3,0.2,0.3,0.3c0,0.3-0.1,0.7-0.3,1c-0.2,0.6-0.8,1-1.4,1.2
+                                        c-0.1,0-0.6,0.2-0.6,0.1c0,0-4.2-4.2-4.2-4.2c0,0-0.8,0.3-0.8,0.4c-1.3,0.4-2.8,0.5-4.1-0.1c-0.7-0.3-1.3-0.7-1.8-1.2
+                                        C1.2,9.3,0.8,8.7,0.5,8S0,6.6,0,5.8z M1.6,5.8c0,0.4,0.1,0.9,0.2,1.3C2.1,8.2,3,9.2,4.1,9.6c0.5,0.2,1,0.3,1.6,0.3
+                                        c0.6,0,1.1-0.1,1.6-0.3C8.7,9,9.7,7.6,9.8,6c0.1-1.5-0.6-3.1-2-3.9c-0.9-0.5-2-0.6-3-0.4C4.6,1.8,4.4,1.9,4.1,2
+                                        c-0.5,0.2-1,0.5-1.4,0.9C2,3.7,1.6,4.7,1.6,5.8z"/>       
+                                    </svg>
+                                </i>
+                            </span>
+                        </Button>
+                        <input
+                                value={ searchString }
+                                onChange={ (value) =>  { _.debounce(applySearchString(value), 300); } }
+                                type="text"/>  
+                    </div>
+                : null
+                }
+
                 { !items.length ? (
                     <Placeholder
                         icon={(
@@ -377,13 +470,12 @@ registerBlockType('tainacan/dynamic-items-list', {
                     </Placeholder>
                     ) : null
                 }
-                { isLoading ? <Spinner /> :
+                
+                { isLoading ? 
+                    <div class="spinner-container">
+                        <Spinner />
+                    </div> :
                     <div>
-                        { showSearchBar ?
-                            <div class="dynamic-items-search-bar">
-                            </div>
-                        : null
-                        }
                         <ul 
                             style={{ gridTemplateColumns: layout == 'grid' ? 'repeat(auto-fill, ' +  (gridMargin + (showName ? 220 : 185)) + 'px)' : 'inherit' }}
                             className={'items-list-edit items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')}>