[Interactive code block] Add "theme mode" in the code editor

[jonathanbossenger]

What?

This PR attempts to add theme support to the code editor mode, so that users can set up a plugin or theme in the code editor mode.

Why?

I would like to be able to set up practical activities for learners on Learn.WordPress.org around both plugin and theme development, using the WordPress Playground block

How?

Testing Instructions

1. Check out the jonathanbossenger:351-code-editor-theme-support branch
2. Load and instance of the playground in the Site Editor
3. Change the Code Editor Mode to "Theme"
4. Create a style.css and templates/index.html block theme files
5. Run the playground preview
6. The two theme files should activate as the active theme in the preview

Fixes #351

[jonathanbossenger]

@adamziel, I could use your help with an error I'm experiencing with this PR.

It's still very rudimentary, but when the writeThemeFiles component tries to call activateTheme to activate the demo theme, I am presented with the following error:

Couldn't activate theme undefined.
			Theme not found at the provided theme path: /wordpress/wp-content/themes/undefined.
			Check the theme path to ensure it's correct.
			If the theme is not installed, you can install it using the installTheme step.
			More info can be found in the Blueprint documentation: https://wordpress.github.io/wordpress-playground/blueprints/steps/#ActivateThemeStep
		
    at Kr (index.js:455:11)
    at async writeThemeFiles (write-theme-files.ts:32:3)

I think I'm calling activateTheme incorrectly, but I'm not sure how.

[dawidurbanski]

@jonathanbossenger You're very close in this one! The error happens because activateTheme expects different options than activatePlugin.

activatePlugin accepts pluginPath and optionally pluginName, so we do:

await activatePlugin(client, {
	pluginPath,
});

activateTheme accepts only themeFolderName so this won't work:

await activateTheme(client, {
	themeSlug,
});

you either have to pass themeSlug as themeFolderName:

await activateTheme(client, {
	themeFolderName: themeSlug,
});

or rename the variable to themeFolderName:

const themeFolderName = 'demo-theme';

...

await activateTheme(client, {
	themeFolderName,
});

[jonathanbossenger]

Aaahhh that's what I missed, thanks @dawidurbanski

[jonathanbossenger]

@dawidurbanski or @adamziel I consider this PR ready to be reviewed.

I did end up leaving both the writePluginFiles and writeThemeFiles components intact. While there is some duplication of code in the two components, I don't think we'll ever need another component that does the same thing, so I think it's an acceptable duplication.

[adamziel]

It looks and tests well, thank you @jonathanbossenger!

The only rough edge I found was that there's no default theme that would populate the editor, and if I just switch to the theme mode then the theme gets auto activated and renders a blank page (or whatever my PHP script echos). It would be useful to either avoid auto-activation, populate the code editor with a working default theme, or explain why is there a white screen:

It doesn't seem to be a blocker, but fixing this would make a great follow-up to this PR @jonathanbossenger.

[adamziel]

The CI job seems to be misconfigured for PRs coming from an external repository. I confirmed the lint passes cleanly on my computer. Let's get this in.

[adamziel]

I went ahead and initiated a new plugin release. Thank you for contributing @jonathanbossenger!

[brandonpayton]

I went ahead and initiated a new plugin release. Thank you for contributing @jonathanbossenger!

Thanks, @adamziel!

[jonathanbossenger]

Thanks so much everyone!

The only rough edge I found was that there's no default theme that would populate the editor, and if I just switch to the theme mode then the theme gets auto activated and renders a blank page (or whatever my PHP script echos). It would be useful to either avoid auto-activation, populate the code editor with a working default theme, or explain why is there a white screen:

@adamziel I did think about this during the process of my live stream, and I'm planning a follow up PR so that the first time you switch to theme mode, it loads a simple default set of theme files, but for now this can be done manually, and I'm ok with that 😁