Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Themes: Try loading a playground instance for theme previews. #329

Closed
wants to merge 3 commits into from

Conversation

dd32
Copy link
Member

@dd32 dd32 commented Jun 11, 2024

This is a draft exploring whether using a playground instance for Theme Previews is viable.

This..

  • Is based on the current theme previewer, NOT the new theme directory previewer, a PR for that is linked below.
  • Includes support for a theme to have a custom preview-blueprint.json
  • Includes a custom plugin to load starter content into the fresh playground instance (bin/theme-preview-load-starter-content.php)
  • Loads the existing style-variations and pattern-preview plugins from wp-themes.com (Temporarily hosted in a github repo)
    • The pattern-preview needs a page to exist, so that's also forced in, this works for most themes.

Observations:

  • On a fast connection, I experience about an 8s initial load time (when playground resources are locally cached).
  • Playground offers a better preview experience IMHO
  • Some starter content imports are not 100% the same as on wp-themes.com, unsure if this is a wp-themes starter content bug the themes have worked around, or if this is a bug in the import.

@dd32
Copy link
Member Author

dd32 commented Jun 24, 2024

Merged.

@dd32 dd32 closed this Jun 24, 2024
adamziel pushed a commit to WordPress/wordpress-playground that referenced this pull request Jul 9, 2024
As part of working on Theme Previews for WordPress.org, I found myself
needing to import Starter Content from themes into the playground site.

After working up the PHP as a `runPHP` step (See
WordPress/wordpress.org#329), similar to the
`importWXR` step I felt that this might be useful to others, so I've
converted it into a fully fledged playground Step.

_This was also partially an exercise in understanding how Playground
Steps work under the hood. If this is deemed to not be useful feature
for Playground Core, that's OK, we can't add everything as a builtin
option._

## Implementation details

This is modeled on the existing ImportWXR and runPHP steps, using some
somewhat awkward PHP to simulate a Customizer save request, before using
the Customizer import starter content to changeset function, and publish
changeset functions to make the changes to the site.

~I imagine this could also be~ an option to toggle on `installTheme`,
such as `installStarterContent: true`. _Option implemented_

This is the same as the user loading a playground instance with a theme,
clicking customize, seeing the starter content, then clicking publish.
(See the video at the end)

## Testing Instructions (or ideally a Blueprint)


http://127.0.0.1:5400/website-server/#{%22steps%22:[{%22step%22:%22login%22,%22username%22:%22admin%22,%22password%22:%22password%22},{%22step%22:%22installTheme%22,%22themeZipFile%22:{%22resource%22:%22wordpress.org/themes%22,%22slug%22:%22twentytwenty%22},%22options%22:{%22importStarterContent%22:true}}]}

```
{
  "steps": [
    {
      "step":"installTheme",
      "themeZipFile":{
        "resource":"wordpress.org/themes",
        "slug":"twentytwenty"
       },
       "options":{
         "importStarterContent": true
       }
    }
  ]
}
```

| Without Starter Content | With Starter Content | The manual process
this automates |
| --- | --- | --- |
| <img width="1723" alt="Screenshot 2024-06-18 at 2 19 13 PM"
src="https://github.com/WordPress/wordpress-playground/assets/767313/dc9182bd-d00f-4899-90c4-d88fd0102c4c">
| <img width="1728" alt="Screenshot 2024-06-18 at 2 18 16 PM"
src="https://github.com/WordPress/wordpress-playground/assets/767313/cb26bb5d-6c23-4044-aafd-a545a1685678">
| <video
src="https://github.com/WordPress/wordpress-playground/assets/767313/02230ee0-9d65-41c8-80a2-1f04e53d195d"></video>
|
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant