Problem/Motivation
Educare has a search index and a search route, and no way for a visitor to reach either. Nothing in the header starts a search, and /search renders as a bare list: no heading, the result count above the search box rather than below it, and a row that prints two title fields where only one is ever filled — so every result carries an empty heading beside the real one and offers the same destination twice.
Steps to reproduce
- Install the Educare site template.
- Look at the header on any page. There is no way to search.
- Go to
/search?keywords=education. The page has no<h1>, the result count sits above the search box, and each row shows an empty heading next to the linked one.
Proposed resolution
A search control in the header. Place the Icon Toggle in the Canvas Header region, in its inline-bar style, with the search view's exposed form in its content slot. The form comes from a block display of its own rather than the results page display, because turning the page display's exposed block off would otherwise remove the block the header points at. The placeholder carries the header design's wording instead of the Drupal CMS Search default, set from this recipe rather than by patching that third-party recipe.
The header Section becomes one full-width column holding a single horizontal group — branding, the main menu and the search toggle — spread apart. Educare's main menu is eight items wide, which left the previous 25/75 split about twelve pixels short of fitting the toggle on the same line, so the toggle wrapped to a row of its own and the header grew by half again. As one row the three parts fit with room to spare, and the opened search bar covers the menu on the header's own line instead of pushing it around.
A readable results page. The results page renders its exposed form inline, under a heading the Vartheme BS5 Educare search view component prints from the view title. The index holds both nodes and Canvas pages, so the view carries one title source per entity type and builds a single linked heading from whichever is set, sized at the design system's h4 step, followed by the excerpt. Rows are spaced with mb-5, and the view header states how many results are being shown.
Automated functional testing. Sixteen scenarios in a new 12-search suite and its own CI bucket, covering the toggle collapsed at rest, opening it to reveal the field, the toggle on every page, searching from the header landing on the results page with the query carried, exactly one <h1>, the inline filter bar between the heading and the summary, the box arriving filled in, the result summary, one heading and one link per row, refining the query in place, the empty state, and the header and footer surviving the route.
Both inputs are named keywords — one in the collapsed header panel, one in the results-page filter bar — so a bare name lookup lands on the hidden one. Three step definitions scope to the right form; a fourth reads a value through the selector registry, because Gherkin has no escape for a quote inside a quoted step argument and a selector carrying an attribute filter cannot be written inline.
Remaining tasks
- ✅ File an issue
- ✅ Addition/Change/Update/Fix
- ✅ Testing to ensure no regression
- ✅ Automated unit/functional testing coverage
- ➖ Developer Documentation support
- ➖ User Guide Documentation support
- ➖ UX/UI designer responsibilities
- ✅ Accessibility and Readability
- ❌ Reviewed by a human
- ❌ Code review by maintainers
- ❌ Full testing and approval
- ❌ Credit contributors
- ❌ Review with the product owner
- ❌ Update Release Notes
- ✅ Release educare-1.0.0-alpha2
User interface changes
- Every page carries a search toggle at the end of the header; opening it reveals a search bar across the header row.
- The header is one full-width row: branding, main menu, search toggle.
/searchleads with a heading, then the search box, then the result count, then one linked result per row.
API changes
- N/A
Data model changes
- N/A
Release notes snippet
- Added a search toggle to the site header and gave the search results page its own heading, an inline search box and one linked result per row, with a functional testing suite covering both.
Issue fork educare-3617501
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #4
rajab natshah✅ Released educare-1.0.0-alpha2
Comment #5
rajab natshahComment #6
rajab natshah