Create new Templates menu (#3541027) · Issues · project / canvas

Create new Templates menu

>>> [!note] Migrated issue   Reported by: [hooroomoo](https://www.drupal.org/user/3688872) Related to !55 !38 !25 >>> <h3 id="overview">Overview</h3> Implement a new menu item named Templates in the left sidebar that displays templates for a given entity type. Let's break this issue into 2 MRs so MR #1 can unblock <a href="https://www.drupal.org/project/canvas/issues/3541031" title="Status: Closed (fixed)">#3541031: Render template and support component operations in preview canvas</a>. Poc might not be relevant anymore since designs have changed but linking anyway: <a href="https://git.drupalcode.org/project/experience_builder/-/merge_requests/1406/diffs">https://git.drupalcode.org/project/experience_builder/-/merge_requests/1406/diffs</a>. Notes: - A view mode and a content template have a 1:1 relationship. A user can create a content template by selecting the bundle and view mode from "Add new template" button, then the backend will create a ContentTemplate. The Content templates are what appears in the left sidebar. - We are limiting the scope to just support the full view mode (aka “Page template”) for 1.0. - Search bar is out of scope. <h3 id="proposed-resolution">Proposed resolution</h3> <h4>MR #1</h4> 1. Create a new Templates menu in the left sidebar 2. Add "Add new template" button at the top of the panel that does nothing for now. This should be implemented in MR #2. 3. Render list of bundles (content types <del>and non-content types like User and E-commerce</del> — only content types are in scope at this stage) and its templates from endpoint from <a href="https://git.drupalcode.org/project/canvas/-/work_items/3541015" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3541015</a>. If there are no existing templates under the content type, still render content type item with the accordion with no items. <h4>MR #2</h4> MR #2 should start work on top of MR #1. 1. Add functionality to the "Add new template" button in the top of the panel. - The button should open a modal that has 2 dropdowns where the user selects a bundle/content type and an available view mode to add as a template. Let's try to reuse as much as makes sense from <code>/ui/src/components/Dialog.tsx</code>, or consider making it more generic. - Display the list of available view modes in the modal from the new view modes endpoint in <a href="https://git.drupalcode.org/project/canvas/-/work_items/3541015" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3541015</a>. *But* because we are limiting to just supporting "full view mode aka page template", UI should filter the dropdown list to only show full view mode, or even just have it already set as default in the dropdown. - Add new template inside the template should send a POST request to <code>/canvas/api/v0/config/content_template</code>. Please see openapi.yml file from <a href="https://git.drupalcode.org/project/canvas/-/work_items/3541015" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3541015</a> to see what the request needs to be. <del>Note: Might want to confirm with design on wording</del> EDIT: Got a response from comment below, design/product wants to keep the wording in the modal as is in the screenshot so it is easier for non-Drupal people to understand. So use "Template" and "Existing templates" instead of "view mode" <img src="https://www.drupal.org/files/issues/2025-09-04/Screenshot%202025-09-04%20at%202.04.50%E2%80%AFPM.png" alt="modal"> 2. Content type level contextual menu - Hovering over a content type (e.g. Blog) should show an ellipsis contextual menu (if we just reuse existing code I think SidebarNode.tsx then we should be able to get the right click contextual menu too). - Edit fields and Delete content type should link to the Drupal core page for these actions. In the future Canvas UI may want to hide these options if the user doesn't have permission but I think it's fine for now to just show the options. <img src="https://www.drupal.org/files/issues/2025-09-04/Screenshot%202025-09-04%20at%201.43.07%E2%80%AFPM.png" alt="content type contextual menu"> 3. Template level menu item - Hovering over a template should show a contextual menu for deleting the template. There is no design for this but it should just be 1 item in the menu in red for deleting a template. Have a confirmation dialog for deleting. Follow pattern for other deleting actions. Let's try to reuse as much as makes sense from <code>/ui/src/components/Dialog.tsx</code>, or consider making it more generic. - Frontend should send DELETE request to /canvas/api/v0/config/content_template/{configEntityId}. Please check API (openapi.yml) from <a href="https://git.drupalcode.org/project/canvas/-/work_items/3541015" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3541015</a> to confirm the request shape and URL - Add hover states from designs Out of scope: search bar <h3 id="ui-changes">User interface changes</h3> ⚠️ NONE until the <code>canvas_dev_mode</code> module is installed! Once installed: <img src="https://www.drupal.org/files/issues/2025-08-12/Screenshot%202025-08-12%20at%204.09.47%E2%80%AFPM.png" alt="screenshot"> > Related issue: [Issue #3541015](https://www.drupal.org/node/3541015) > Related issue: [Issue #3546119](https://www.drupal.org/node/3546119) > Related issue: [Issue #3541000](https://www.drupal.org/node/3541000)

issue