Live Preview: Enable previewing at “the front of the site”

[okmttdhr]

Description

Currently, the Live Preview leverages the Site Editor, which means users can navigate a previewing theme with the Site Editor UI and can edit a theme while previewing. Yet, "the Live Preview on the Site Editor" can be overwhelming for some users sometimes. So, enabling the Live Preview on "the front of the site (e.g., https://your-site.com?wp_theme_preview=pendant)" and setting it as the default previewing UI can be another option. See the related issue.

• The option might be suitable for users;
  • who feel overwhelmed by the Site Editor's UX.
  • who want to confirm the new theme match well on every single page.
  • who are not interested in "editing" the site they are previewing (There was also discussion about we can think Live Preview as a truly "preview" experience; Live Preview: Save & Activate button separation #81119 (comment)).

Project Thread: pbxlJb-3Uv-p2
Slack convo: p1700225010968979/1700071465.853909-slack-C048CUFRGFQ, p1700810294747889/1700716820.251909-slack-CRWCHQGUB

Acceptance Criteria

• Users can preview a theme at the front of the site.
• Users can activate a theme at the front of the site.
• Approved by designer

Dev Tasks

• Decide on UI and how we can integrate this into the flow.
• Block Theme Previews: Persist the theme_preview parameter on the front end of the site. WordPress/gutenberg#50713
• Block Theme Previews: Add the theme_preview parameter to the preview link in the Site Editor WordPress/gutenberg#50712
• Implement the control banner
  • Show the Activate button
  • Show a link to the Site Editor to allow users to leave the frontend preview and edit it
  • Consider adding a feature to change style variations

Related

• Theme Preview experiment: Can't see how Style variations affect my existing page WordPress/gutenberg#50692
• pekYwv-1WD-p2#comment-1530

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• pekywv-1wd-p2#comment-1530