hide search block fields (#213)

Co-authored-by: David Glick <david@glicksoftware.com>
kitconcept · Aug 9, 2023 · d72cc23 · d72cc23
1 parent e857442
commit d72cc23
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 37 deletions.
diff --git a/news/213.bugfix b/news/213.bugfix
@@ -0,0 +1 @@
+Hide unnecessary Search block fields. @danalvrz
diff --git a/src/components/Blocks/Search/TopSideFacets.jsx b/src/components/Blocks/Search/TopSideFacets.jsx
@@ -81,35 +81,37 @@ const TopSideFacets = (props) => {
                     total={totalItems}
                     as="h5"
                   />
-                  <div className="sort-on-wrapper">
-                    <span className="sort-label">
-                      {intl.formatMessage(messages.sort)}
-                    </span>
-                    <SortOn
-                      data={data}
-                      querystring={querystring}
-                      isEditMode={isEditMode}
-                      sortOn={sortOn}
-                      sortOrder={sortOrder}
-                      setSortOn={(sortOn) => {
-                        flushSync(() => {
-                          setSortOn(sortOn);
-                          onTriggerSearch(searchedText || '', facets, sortOn);
-                        });
-                      }}
-                      setSortOrder={(sortOrder) => {
-                        flushSync(() => {
-                          setSortOrder(sortOrder);
-                          onTriggerSearch(
-                            searchedText || '',
-                            facets,
-                            sortOn,
-                            sortOrder,
-                          );
-                        });
-                      }}
-                    />
-                  </div>
+                  {data.sortOnOptions && data.sortOnOptions.length > 0 && (
+                    <div className="sort-on-wrapper">
+                      <span className="sort-label">
+                        {intl.formatMessage(messages.sort)}
+                      </span>
+                      <SortOn
+                        data={data}
+                        querystring={querystring}
+                        isEditMode={isEditMode}
+                        sortOn={sortOn}
+                        sortOrder={sortOrder}
+                        setSortOn={(sortOn) => {
+                          flushSync(() => {
+                            setSortOn(sortOn);
+                            onTriggerSearch(searchedText || '', facets, sortOn);
+                          });
+                        }}
+                        setSortOrder={(sortOrder) => {
+                          flushSync(() => {
+                            setSortOrder(sortOrder);
+                            onTriggerSearch(
+                              searchedText || '',
+                              facets,
+                              sortOn,
+                              sortOrder,
+                            );
+                          });
+                        }}
+                      />
+                    </div>
+                  )}
                 </div>
               </div>
             )}

diff --git a/src/components/Blocks/Search/schema.js b/src/components/Blocks/Search/schema.js
@@ -0,0 +1,6 @@
+export const searchBlockSchemaEnhancer = ({ schema, formData, intl }) => {
+  schema.properties.showSortOn.default = true;
+  schema.fieldsets = schema.fieldsets.filter((item) => item.id !== 'views');
+
+  return schema;
+};
diff --git a/src/index.js b/src/index.js
@@ -20,6 +20,8 @@ import { ImageBlockDataAdapter } from './components/Blocks/Image/adapter';
 
 import { AccordionSchemaEnhancer } from './components/Blocks/Accordion/schema';
 
+import { searchBlockSchemaEnhancer } from './components/Blocks/Search/schema';
+
 import gridSVG from './icons/block_icn_grid.svg';
 import accordionSVG from './icons/block_icn_accordion.svg';
 import EventView from './components/Theme/EventView';
@@ -264,14 +266,18 @@ const applyConfig = (config) => {
     schemaEnhancer: defaultStylingSchema,
   };
 
-  config.blocks.blocksConfig.search.variations = [
-    {
-      id: 'facetsTopSide',
-      title: 'Facets on top',
-      view: TopSideFacets,
-      isDefault: true,
-    },
-  ];
+  config.blocks.blocksConfig.search = {
+    ...config.blocks.blocksConfig.search,
+    schemaEnhancer: searchBlockSchemaEnhancer,
+    variations: [
+      {
+        id: 'facetsTopSide',
+        title: 'Facets on top',
+        view: TopSideFacets,
+        isDefault: true,
+      },
+    ],
+  };
 
   config.blocks.blocksConfig.__button = {
     ...config.blocks.blocksConfig.__button,

diff --git a/src/theme/_layout.scss b/src/theme/_layout.scss
@@ -266,6 +266,8 @@ footer {
   .block.heading .heading-wrapper,
   .block-editor-listing .items,
   .block-editor-listing .listing.message,
+  .block-editor-search .listing-item,
+  .block-editor-search .search-input-resultscount-sort,
   .block-editor-separator.has--align--full .block.separator,
   .block-editor-separator .block.separator.has--align--full,
   .block.teaser.has--align--center,

diff --git a/src/theme/blocks/_search.scss b/src/theme/blocks/_search.scss
@@ -6,6 +6,11 @@
       .card-container > img {
         width: 100% !important;
       }
+
+      .listing-item:last-child {
+        padding-bottom: 0;
+        border-bottom: none;
+      }
     }
     .items {
       padding: 0 !important;
@@ -23,6 +28,10 @@
         color: $black;
         @include text-heading-h2();
       }
+      &:last-child {
+        padding-bottom: 40px;
+        border-bottom: 1px solid $black;
+      }
 
       &:not(.grid) {
         img {
@@ -240,3 +249,13 @@
     }
   }
 }
+
+// Hidden fields
+.inline.field {
+  &.field-wrapper-showSearchInput,
+  &.field-wrapper-showSearchButton,
+  &.field-wrapper-showTotalResults,
+  &.field-wrapper-showSortOn {
+    display: none;
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Hide unnecessary Search block fields. @danalvrz