>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3560888. --> Reported by: [circuitcipher](https://www.drupal.org/user/3849396) Related to !107 !108 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>The current implementation of the search result page in the <code>ui_suite_uswds</code> theme is minimalistic and lacks several features available in Drupal core themes like Olivero. This leads to a degraded user experience<br> and a lack of functionality for site builders and editors.</p> <p>Specifically, the following issues are present:</p> <ul> <li>The search result title is not a clickable link, preventing users from navigating to the actual content.</li> <li>Structured metadata, such as the content author and last updated date (provided by the <code>info_split</code> variable), is not rendered. The generic <code>info</code> variable is passed but is not as flexible.</li> <li>The <code>title_prefix</code> and <code>title_suffix</code> variables are ignored. This is a significant issue as Drupal uses these to render important additions, most notably contextual links for content editing.</li> </ul> <p>This work brings the theme's search result template to feature parity with core standards, making it more functional and robust.</p> <h4 id="summary-steps-reproduce">Steps to reproduce</h4> <ol> <li>Install Drupal and set <code>ui_suite_uswds</code> as the default theme.</li> <li>Enable the core Search module and ensure some content is indexed.</li> <li>As a user, perform a search on the site. Observe that the result titles are not links.</li> <li>As an administrator with contextual link permissions, perform a search. Observe that the "Edit" contextual links do not appear next to the result titles.</li> <li>Observe that metadata like author and date are not displayed with the search result.</li> </ol> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>The proposed resolution is to enhance the <code>collection_item</code> component and the <code>search-result.html.twig</code> template to correctly use all the variables provided by Drupal's search system.</p> <ol> <li><strong>Update the <code>collection_item</code> component (<code>collection_item.component.yml</code>):</strong> <ul> <li>Add a <code>header_url</code> prop to allow the component's header to be a link.</li> <li>Add <code>title_prefix</code> and <code>title_suffix</code> slots to render content before and after the title.</li> <li>Add a <code>meta_items_split</code> slot to accept the structured <code>info_split</code> object.</li> </ul> </li> <li><strong>Update the component's template (<code>collection_item.twig</code>):</strong> <ul> <li>Wrap the header text in an <code>&lt;a&gt;</code> tag if <code>header_url</code> is provided.</li> <li>Render the <code>title_prefix</code> and <code>title_suffix</code> slots around the header.</li> <li>Add logic to parse and render items from <code>meta_items_split</code> (e.g., author, date, comments) if it exists, falling back to the existing <code>meta_items_list</code> for other use cases.</li> </ul> </li> <li><strong>Update the search result template (<code>search-result.html.twig</code>):</strong> <ul> <li>Modify the template to pass the <code>url</code>, <code>title_prefix</code>, <code>title_suffix</code>, and <code>info_split</code> variables from the search context into the corresponding props and slots of the<br> <pre>collection_item</pre><p> component.</p></li> </ul> </li> </ol> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <p>None.</p> <h3 id="summary-ui-changes">User interface changes</h3> <ul> <li>Search result titles are now clickable links that navigate to the content.</li> <li>Search results will display structured metadata (Author, Date, etc.) below the description, improving context for the user.</li> <li>Contextual links will now appear correctly next to search result titles for authenticated users with the appropriate permissions, improving the content editing workflow.</li> </ul> <h3 id="summary-api-changes">API changes</h3> <p>The <code>collection_item</code> Single Directory Component (SDC) is updated with new slots and a new property, making it more versatile for displaying content listings:</p> <ul> <li>New Prop: <code>header_url</code></li> <li>New Slots: <code>title_prefix</code>, <code>title_suffix</code>, <code>meta_items_split</code></li> </ul> <p>These changes are additive and should not break existing usages of the component.</p> <h3 id="summary-data-model-changes">Data model changes</h3> <p>None.</p>