Adds option to define filters inline width.

src/assets/css/tainacan-gutenberg-block-faceted-search.css

@@ -72,7 +72,7 @@
           .wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control.horizontal-filters .filters .fake-filter {
             margin: 6px 12px;
             display: inline-flex;
-            width: 16.666%; }
+            width: var(--tainacan-filters-inline-width, 272px); }
       .wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .filters {
         flex: 0 1 var(--tainacan-filter-menu-width-theme, 20%);
         display: flex;

src/views/admin/scss/_custom_variables.scss

@@ -74,6 +74,9 @@
     // Filter Menu Width when not a modal
     --tainacan-filter-menu-width-theme: #{$filter-menu-width-theme};
 
+    // Each filter width when in horizontal panel
+    --tainacan-filters-inline-width: #{$filters-inline-width};
+
     // One column is 1/24% and it is used a lot in the horizontal space distribution
     --tainacan-one-column: #{$one-column};
 

src/views/admin/scss/_variables.scss

@@ -145,6 +145,7 @@ $sidebar-width: 3.0em;
 $subheader-height: 2.35em;
 $filter-menu-width: 16.666666667%;
 $filter-menu-width-theme: 20%;
+$filters-inline-width: 272px;
 $page-height: calc(100vh - 5.35em);
 
 // Overall Pages padding:

src/views/gutenberg-blocks/blocks/faceted-search/block.json

@@ -224,6 +224,10 @@
         "hideColllapseAllFiltersButton": {
             "type": "boolean",
             "default": false
+        },
+        "filtersInlineWidth": {
+            "type": "number",
+            "default": 272
         }
     },
     "supports": {

src/views/gutenberg-blocks/blocks/faceted-search/edit.js

@@ -79,7 +79,8 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
         collectionOrderByType,
         shouldNotHideFiltersOnMobile,
         displayFiltersHorizontally,
-        hideColllapseAllFiltersButton
+        hideColllapseAllFiltersButton,
+        filtersInlineWidth
     } = attributes;
 
     // Gets blocks props from hook
@@ -600,13 +601,24 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
                                 setAttributes( { baseFontSize: newFontSize } );
                             } }
                         />
-                        <RangeControl
+                        { !displayFiltersHorizontally && !filtersAsModal ? 
-                            label={ __('Filters Area Width (%)', 'tainacan') }
+                            <RangeControl
-                            value={ filtersAreaWidth }
+                                label={ __('Filters Area Width (%)', 'tainacan') }
-                            onChange={ ( width ) => setAttributes( { filtersAreaWidth: width } ) }
+                                value={ filtersAreaWidth }
-                            min={ 10 }
+                                onChange={ ( width ) => setAttributes( { filtersAreaWidth: width } ) }
-                            max={ 40 }
+                                min={ 10 }
-                        />
+                                max={ 40 }
+                            />
+                        : null }
+                        { displayFiltersHorizontally ? 
+                            <RangeControl
+                                label={ __('Filters Inline Width (px)', 'tainacan') }
+                                value={ filtersInlineWidth }
+                                onChange={ ( width ) => setAttributes( { filtersInlineWidth: width } ) }
+                                min={ 100 }
+                                max={ 800 }
+                            />
+                        : null }
                     </PanelBody>
                     <PanelBody
                             title={__('Colors', 'tainacan')}
@@ -846,6 +858,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
                                 style={{
                                     '--tainacan-background-color': backgroundColor,
                                     '--tainacan-filter-menu-width-theme': filtersAreaWidth + '%',
+                                    '--tainacan-filters-inline-width': filtersInlineWidth + 'px',
                                     '--tainacan-input-color': inputColor,
                                     '--tainacan-input-background-color': inputBackgroundColor,
                                     '--tainacan-input-border-color': inputBorderColor,

src/views/gutenberg-blocks/blocks/faceted-search/save.js

@@ -51,7 +51,8 @@ export default function({ attributes }) {
         collectionOrderByMeta,
         collectionOrderByType,
         shouldNotHideFiltersOnMobile,
-        displayFiltersHorizontally
+        displayFiltersHorizontally,
+        filtersInlineWidth
     } = attributes;
     
     let updatedListType = '' + listType;
@@ -70,6 +71,7 @@ export default function({ attributes }) {
                 '--tainacan-base-font-size': baseFontSize + 'px',
                 '--tainacan-background-color': backgroundColor,
                 '--tainacan-filter-menu-width-theme': filtersAreaWidth + '%',
+                '--tainacan-filters-inline-width': filtersInlineWidth + 'px',
                 '--tainacan-input-color': inputColor,
                 '--tainacan-input-background-color': inputBackgroundColor,
                 '--tainacan-input-border-color': inputBorderColor,

src/views/gutenberg-blocks/blocks/faceted-search/style.scss

@@ -78,7 +78,7 @@
                     .fake-filter {
                         margin: 6px 12px;
                         display: inline-flex;
-                        width: 16.666%;
+                        width: var(--tainacan-filters-inline-width, 272px);
                     }
                 }
             }

src/views/gutenberg-blocks/blocks/faceted-search/theme-search/scss/_layout.scss

@@ -190,11 +190,11 @@
 				}
 				.filter-item-forms {
 					width: 100%;
-					min-width: 272px;
+					min-width: var(--tainacan-filters-inline-width, 272px);
 					break-inside: avoid;
 					display: inline-block;
 					vertical-align: text-top;
-					margin-bottom: 12px;
+					margin-bottom: 1rem;
 				}
 
 				@media screen and (min-width: 769px) {
@@ -202,7 +202,7 @@
 						margin-right: 2.25em;
 					}
 					.filter-item-forms {
-						width: 272px;
+						width: var(--tainacan-filters-inline-width, 272px);
 					}
 					.filter-item-forms:not(:last-child) {
 						margin-right: 2.25em;