feat(Headless): Allow passing a view mode in Headless SDK's fetch page API

#3591990

AI Disclosure: Yes used GPT-5.4

Add explicit viewMode support to headless routed page fetches so headless apps can request content-template rendering for a specific view mode, such as teaser, outside the Canvas preview iframe flow. This also keeps existing Canvas preview behavior working by continuing to fall back to the draft session’s stored preview view mode when no explicit viewMode is passed.

  • Drupal canvas_headless content API now honors top-level viewMode for general routed content requests, not only preview-scoped ones.
    • /canvas/content-api?requestUri=/node/1&viewMode=teaser
  • @drupal-canvas/headless now supports fetchPage(path, { viewMode }).
  • @drupal-canvas/headless-next, @drupal-canvas/headless-nuxt, and @drupal-canvas/headless-astro now expose the same fetchPage(..., { viewMode }) option.
  • Content API cache variation now accounts for explicit viewMode requests.

⚠️ This MR: https://github.com/drupal-canvas/headless-templates/pull/7 that updates the headless templates to pass in view mode to fetch page also needs review.

Testing instructions

  1. In Drupal, create content templates and for at least two view modes (ex. full, teaser) on the same content type and some nodes for it.
  2. In the Canvas repo, build the updated packages and prepare linking:
    1. npm run build
    2. npm run packages:build
    3. npm link -ws
    4. drush cr
  3. Check out and use the template changes from: https://github.com/drupal-canvas/headless-templates/pull/7
  4. In each headless template app you want to test, install/link the local packages and start the app (for nextjs template use npm run dev -- --webpack)
  5. Verify standalone app behavior.
    1. Open: http://localhost:3000/node/1
    2. Confirm it renders the default/full template
    3. Open: http://localhost:3000/node/1?viewMode=teaser
    4. Confirm it renders the teaser template
  6. Verify no regressions in Canvas UI
    1. Open the same content template in Canvas UI
    2. Switch between the available view modes
    3. Confirm the iframe preview renders the expected template for each selected view mode
Edited by Harumi Jang

Merge request reports

Loading