feat: #3622804 Build the search results page from the design

Issue: #3622804 The search page is missing the design's filter sidebar and horizontal result cards

What this does

/search becomes a Drupal Canvas page carrying the keyword bar, the results, and a filter rail of Category, Content Type and Date Published, matching the Search-Listing page of the VBN Stylesheet design (node 13058:23852).

Results render through a new search_result node view mode whose display is built in Canvas, so a row carries the image, category eyebrow, title, summary and byline instead of a bare title and snippet.

The row reuses an existing component

No new theme component. The rows are built from the theme's existing Featured Card (sdc.vartheme_bs5_rightup.card-featured) — already a horizontal image-and-text row (media_position: start|end, media_image, ratio, fit, stretched_link, a content slot, no icon). At columns_*_size: 04_08 it renders the image at 261x196 against the design's 260x195, one pixel from rounding, with no hard-coded width.

The one deliberate deviation from the design

Category and Content Type are Facets (this adds drupal/facets ^3.0). Date Published is a Views grouped exposed filter — Past 24 Hours, Past Week, Past Month, Past Year — not a facet, because Facets cannot express those: its date processor always renders an actual date ("2026", "July 2026"), never a relative window, and the facets_range_widget submodule is sliders only.

It is single-select because core's Date filter reads group_info['type'], which only exists for a single-select group; a multi-select group hands it an array of keys and emits PHP warnings on every request. The design draws checkboxes, but the windows are cumulative, so single-select is also the correct semantics.

That filter is exposed on its own block display, because one form cannot sit in two columns. Each form carries both the keyword field and the date group and hides the half it does not own — the hidden input still submits, which is what carries the keyword through a date change and the date through a new search.

Fixed along the way

  • Search barely matched articles. search_index is the view mode Search API renders into its index, and RightUp's carried almost no text, so an article was indexed as little more than its title. It now ships the body and description fields, matching Varbase Starter, Educare and Horizon Aid, and the index gains the content type and authored date the facet and the filter need. This is a matching-quality fix and is not the upstream defect in #3622790, where the view returns nothing at all for any term. The two are separate.
  • Results are restricted to content, so a Canvas page no longer appears as a result rendered in full.
  • Anonymous gets view any term AND view any term name. Canvas needs both to resolve a term reference; without the second it returns NULL and every result row fails to render.
  • The header takes its form from a header_search block display, because the page display is disabled — its path would collide with the Canvas page.
  • The header search popover no longer carries the Date Published group. Every Views display inherits the default display's filters, so the group leaked into the header panel as well as the rail.
  • The column values are quoted. YAML 1.1 reads 04_08 as a digit-separated number, so it arrives as "0408" and fails enum validation at render time.

Screenshots

Captured anonymously on a fresh Drupal CMS build and install of the packaged recipe.

The RightUp search results page: a keyword bar, a result count, horizontal result rows and a filter rail of Category, Content Type and Date Published.

The filter rail showing Category, Content Type and Date Published aligned to their headings, beside listing rows separated by hairline rules.

The search results page at 400px, with the result image stacked above its category eyebrow, title, summary and byline.

Testing

Fresh Drupal CMS build and install of the packaged recipe (project rupkg1), not only in place:

  • install succeeded, 55 items indexed
  • the results page renders 10 rows and 42 facet items, zero errors
  • Date Published filters 16 results down to 14
  • the Content Type facet filters 16 down to 12
  • the header panel carries the keyword field only

Merge order

vartheme_bs5_rightup!23 (merged) (#3623379) should merge first, so this page lands styled. It is not a blocker: without it a fresh install renders the page unstyled rather than failing, because no component is missing.

Known and not done

Filter tabs (All / Architecture / Fashion / Arts / Culture), the Sort by select, breadcrumb, pagination styling, the design's exact 864/144/304 rail geometry, an aria-label on the row's stretched link (it currently announces the whole row text instead of the title), and keyword highlighting inside result titles.

AI-Generated: Yes

Checkpoints:

  • File an issue
  • Addition/Change/Update/Fix
  • Testing to ensure no regression
  • Automated unit testing coverage
  • Automated functional testing coverage
  • UX/UI designer responsibilities
  • Readability
  • Accessibility
  • Performance
  • Security
  • Developer Documentation
  • User Guide Documentation
  • Reviewed by human
  • Code review by maintainers
  • Full testing and approval
  • Credit contributors
  • Review with the product owner
  • Release notes snippet
  • Release
Edited by Rajab Natshah

Merge request reports

Loading
Loading