See #38 — This adds a new path to the site, ex https://wordpress.org/themes/twentytwentyfour/preview/, which will show a new preview.html template. The preview template sets up 2 columns, on the left is the theme information, and the right has the iframed preview of wp-themes.com.
This matches the current production previewer with the following features:
[x] The page loads the theme preview, with theme info
[x] The preview can toggle between three screen sizes
[x] There is a download button
[x] There is a back button to return to the theme details page
[x] It is possible to preview a pattern page /twentytwentytwo/preview/?pattern_name=twentytwentytwo%2Ffooter-about-title-logo
[x] Viewing a style variation shows the theme with that applied /twentytwentytwo/preview/?style_variation=pink
[x] New: Combining the two also works /twentytwentytwo/preview/?pattern_name=twentytwentytwo%2Ffooter-about-title-logo&style_variation=pink
Additionally, I've added in the available patterns to the sidebar, clicking a pattern will load that preview. This can create a very long list though, so I can easily remove it if necessary.
In following PRs:
Adjust the frame on small screens
The style variations list is not available yet, once the block is built it can be added here
See #38 — This adds a new path to the site, ex
https://wordpress.org/themes/twentytwentyfour/preview/
, which will show a newpreview.html
template. The preview template sets up 2 columns, on the left is the theme information, and the right has theiframe
d preview of wp-themes.com.This matches the current production previewer with the following features:
/twentytwentytwo/preview/?pattern_name=twentytwentytwo%2Ffooter-about-title-logo
/twentytwentytwo/preview/?style_variation=pink
/twentytwentytwo/preview/?pattern_name=twentytwentytwo%2Ffooter-about-title-logo&style_variation=pink
Additionally, I've added in the available patterns to the sidebar, clicking a pattern will load that preview. This can create a very long list though, so I can easily remove it if necessary.
In following PRs:
Screenshots