>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3541031. --> Reported by: [hooroomoo](https://www.drupal.org/user/3688872) Related to !36 !1508 >>> <h3 id="overview">Overview</h3> <p>We need to be able to render the template in our preview canvas and do component operations (drag and drop, delete, etc.) like how we can in our page preview canvas.</p> <p><a href="https://git.drupalcode.org/project/experience_builder/-/merge_requests/1406/diffs">poc/spike here</a></p> <h3 id="proposed-resolution">Proposed resolution</h3> <p><strong>1.</strong> Define new routes in <code>AppRoutes.tsx</code> for the view modes in new Template menu <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/canvas/-/work_items/3541027" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3541027</a></span>. We probably need <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/canvas/-/work_items/3502887" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3502887</a></span> first. The xb/xb_page/1 inside of <code>/xb/xb_page/1/editor/template/node/article/full/5</code> does not make any sense if we are viewing the template for node 5 that is an article. </p> <p><strong>2.</strong> Clicking a menu item should open the preview canvas e.g. <code>/editor/template/node/article/full/1</code> and render the HTML response from GET call to new endpoint created in <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/canvas/-/work_items/3541021" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3541021</a></span>. </p> <p>Try to see if we can just use the existing redux slice of layoutModelSlice.ts and previewSlice.ts for this. The <a href="https://git.drupalcode.org/project/experience_builder/-/merge_requests/1406/diffs">poc/spike here</a>: creates a new templateLayoutModelSlice.ts but it might be possible to just utilize layoutModelSlice.ts. And then hopefully the undo/redo behaviors of the canvas will also just work ...maybe :D </p> <p>If it looks like its not possible, at the very least we can refactor so the separate slices can share the reducers. that might mean moving the reducers to its own file that can then be imported by both slices.</p> <p><strong>3. </strong><del>When the user is editing template, it should be open in the layers menu (See below screenshot)<br> </del> Should stay on the templates menu</p> <p>EDIT: #4 AND 5 will be done in <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/canvas/issues/3541033" title="Status: Closed (fixed)">#3541033: Add ability to switch content used by template using top navigation</a></span><br> <del>4. Top bar should show the template and the default piece of content being used as an example for the template as badges but the ability to switch content will be done in <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/canvas/issues/3541033" title="Status: Closed (fixed)">#3541033: Add ability to switch content used by template using top navigation</a></span>.</del></p> <p><img src="https://www.drupal.org/files/issues/2025-08-12/design_preview_entity_select.png" alt="screenshot for selecting entity"></p> <p><del>5. Add an error state for when no content is available on a template<strong> (awaiting designs) </strong></del></p> <p><strong>Need to define UX, and perhaps product/design input.... </strong><br> 1. Assuming we require the user to create at least one piece of content when viewing a template,<br> should clicking the view mode menu item direct the user to the first existing piece of content they have for that bundle? So for example if someone wants to view an article teaser template, and they have an existing article that is /node/5, should they be directed to <code>/editor/template/node/article/teaser/5</code> from clicking the menu?<br> <strong><em>EDIT: Confirmed with @lauriii #1 is correct assumption</em></strong></p> <p>2. And if no content for the bundle exists yet, should they just be directed to <code>/editor/template/node/article/teaser</code> and then be presented with the "No content available" badge in the topbar and like an error message rendered where the preview would be?<br> <strong><em>EDIT: Discussed with product/design we should have an error state for when no content is available on a template</em></strong></p> <p><strong>EDIT: This work will be done in <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/canvas/issues/3541033" title="Status: Closed (fixed)">#3541033: Add ability to switch content used by template using top navigation</a></span></strong></p> <p>3. Do we still allow users to add to their template even without an existing piece of content?<br> <strong><em>EDIT: Discussed with product/design we should have an error state for when no content is available on a template</em></strong> </p> <p><strong>EDIT: This work will be done in <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/canvas/issues/3541033" title="Status: Closed (fixed)">#3541033: Add ability to switch content used by template using top navigation</a></span></strong></p> <p><img src="https://www.drupal.org/files/issues/2025-08-12/Screenshot%202025-08-12%20at%204.54.35%E2%80%AFPM.png" alt="screenshot"></p> <h3 id="ui-changes">User interface changes</h3> > Related issue: [Issue #3541000](https://www.drupal.org/node/3541000)