Issues using WordPress Playground VSCode extension with Learn WordPress project

[adamwoodnz]

I've been testing the VSCode extension with the Learn.WordPress.org project repo.

Context: https://wordpress.slack.com/archives/C04EWKGDJ0K/p1684877322935099?thread_ts=1684852995.310519&cid=C04EWKGDJ0K

This repo has a custom plugin and child theme, so running from the project root would be the ideal local dev scenario, and this is how we currently run the project with wp-env.

The things I tried were:

Setup

Fresh clone of https://github.com/WordPress/Learn Basic install of dependencies and build: yarn, composer install, yarn workspaces run build

Try full project:

Click Start WordPress Server button from project root.

Result: Notification that server started but browser never loads site.

Try Theme only:

Click Start WordPress Server button from theme folder (https://github.com/WordPress/Learn/tree/trunk/wp-content/themes/pub/wporg-learn-2020)

Result: Notification that server started, browser loads site but TT3 theme is active because parent theme isn’t available.

Try Plugin only:

Click Start WordPress Server button from plugin folder (https://github.com/WordPress/Learn/tree/trunk/wp-content/plugins/wporg-learn)

Result: Notification that server started but browser never loads site.

Environment: About VSCode

Version: 1.78.2 (Universal) Commit: b3e4e68a0bc097f0ae7907b217c1119af9e03435 Date: 2023-05-10T14:44:45.204Z Electron: 22.5.2 Chromium: 108.0.5359.215 Node.js: 16.17.1 V8: 10.8.168.25-electron.0 OS: Darwin arm64 21.6.0 Sandboxed: No

[danielbachhuber]

I'll look into this. I think we need to refresh the VS Code Extension's internals (https://github.com/WordPress/playground-tools/issues/4) to get closer to the behavior you expect. It would also be nice to add some debugging mechanism for the crashes (https://github.com/WordPress/playground-tools/issues/36).

Result: Notification that server started, browser loads site but TT3 theme is active because parent theme isn’t available.

@adamwoodnz Out of curiosity, what is your expected behavior for this scenario? Related https://github.com/WordPress/playground-tools/issues/33

[adamwoodnz]

Thanks! Yeah debugging info would be useful, I did look in the Output tab but didn't see anything. I see on #36 that others have.

@adamwoodnz Out of curiosity, what is your expected behavior for this scenario?

For this scenario I've just tried again to see exactly what the state was in the admin, but I now can't start the server. Not sure what changed :(

From memory what I saw in wp-admin is that the Learn child theme (wporg-learn-2020) was installed but couldn't be activated due to the parent (wporg) not being mounted.

Ideally the child theme would be installed and activated, but if that's not possible then at least having the parent installed to allow child activation would be my expectation. The parent is obviously sitting up a level from where the command is run.

Worth noting that with this particular project (and maybe most website projects in general) we wouldn't be developing the theme or plugin independently, and the 'full project' scenario above is really the critical workflow.

[danielbachhuber]

@adamwoodnz As a very first step, we published a new version of the VS Code Extension this morning to start to unblock this 😊

Here's what I ran to set things up:

git clone [email protected]:WordPress/Learn.git wordpress-learn
cd wordpress-learn
yarn
composer install
yarn workspaces run build

When I clicked 'Start WordPress Server' in the project directory, here's what I see:

Notably, it's starting in 'playground' mode and didn't mount your wp-content directory.

When I clicked 'Start WordPress Server' in the wp-content directory, here's what I see:

It started in the 'wp-content' mode (expected) but is having trouble with the theme paths. The plugins are mounted but it looks like Gutenberg is out of date and fataling for some reason.

When I clicked 'Start WordPress Server' in the wp-content/plugins/gutenberg directory, here's what I see:

Gutenberg is mounted as expected but probably fatals when it's attempted to be auto-activated.

Launching in a child theme will be handled by https://github.com/WordPress/playground-tools/issues/33

It seems like we have a bit of work to do if we want to offer the VS Code Extension or wp-now for WordCamp Europe 😊 cc @adamziel @sejas

Also, while I'm thinking of it: I wonder if projectPath should be defined as the git repo directory if we look upwards and find one.

[danielbachhuber]

When I clicked 'Start WordPress Server' in the wp-content directory, here's what I see:

This might just be a rough NUX. The wporg-learn-2020 theme seemed to activate just fine, although it requires some plugins to be activated too.

Here's what I see on the frontend:

It seems like links are hardcoded though, and pretty permalinks don't work:

I guess we might need the Blueprint thing (https://github.com/WordPress/playground-tools/issues/9) to deliver a pre-configured state...

[adamziel]

@danielbachhuber Yay for Blueprints. Using them would also make it easy to preview Pull Requests for that repo in the browser.

[sejas]

I think to fully support Learn we will need to support mapping directories:

	"mappings": {
		".htaccess": "./.wp-env/.htaccess",
		"wp-content": "./wp-content",
		"wp-content/mu-plugins/0-sandbox.php": "./.wp-env/0-sandbox.php",
		"wp-content/uploads/wporg_events.sql": "./.wp-env/wporg_events.sql",
		"wp-content/uploads/wporg_locales.sql": "./.wp-env/wporg_locales.sql",
		"bin": "./bin"
	}

[danielbachhuber]

Probably the ability to define wp-config.php constants too https://github.com/WordPress/playground-tools/issues/17

[adamziel]

Constants can be defined with Blueprints (as outlined in #17). The mappings cannot, though.