Blueprints Recorder

[akirk]

It'd be nice to have a way to just record the blueprint JSON through actions you do in WordPress and a WordPress plugin could capture that.

Two potential ways to implement this:

1. It could send postMessages on events and the blueprints would be built in the WordPress playground,
2. or you record the steps in the WordPress database and write the JSON in PHP and offer it as a download.

[adamziel]

This could be useful:

Chrome DevTools Recorder Record, replay, and measure user flows

Also: https://developer.chrome.com/blog/extend-recorder/

[adamziel]

Blueprints are not interchangeable with user actions in wp-admin

Imagine you install a plugin that attaches a hook running on plugin upload. The installPlugin step won’t trigger that hook. Blueprint don’t upload plugins but install them programmatically. Then, the plugin can be configured by interacting with wp-admin. Maybe that's just updating wp_options, or maybe that's setting up and populating custom db tables like WooCommerce does. There are no Blueprint steps for some of these and it's unclear how these actions could be recorded.

We could perhaps record every successful POST request and pacify nonces and then replay it on Blueprint application, but:

• Those recordings would get very large very quickly
• If a plugin verifies, say, that $_POST['date'] is a future date, that log could not be replayed

Recording user interactions could probably work 80% of the time, but the remaining 20% of the cases would be either impossible or burdensome to fix and maintain.

Alternative idea: diffs

To catch all site customizations, we need to export all files and a database. This feature already exists and can be used via the replaceSite Blueprint step.

The only improvement is reducing the bundle size. Right now it contains all WordPress core files and a full database. Perhaps it could consist of just the diff. Also, directory plugins and themes could still point to the directory, no need to include them in the diff.

The only problem with such a diff is that it wouldn’t cleanly apply against all WordPress versions. If it only adds plugin files, uploads, and db records - maybe it would. But if it also updates any existing core files, that would be challenging. The tool could detect any incompatible changes and fall back to a full export.

There is a downside, though - such a diff wouldn’t be easily composable like Blueprints sre.

Combining both ideas - Blueprint valet

With a smart diffing mechanism, the recorder could keep a “best effort” track of actual Blueprint steps and expose them to the developer not as a final product but as a starting point for development. Detecting any unrecordable SQL or filesystem changes would alert the user and fall back to the export feature.

cc @danielbachhuber who explored similar questions in a tool called Dictator

[adamziel]

About the recordings, they may not work for producing Blueprints, but they could still be useful for E2E testing.

Chrome Devtools recorder produces the following JSON file that Playground could reuse:

Recording 25.10.2023 at 12_09_38.json

That recording could potentially be replayed in Playwright to get a trace file that could be then inspected at https://trace.playwright.dev/ (thanks @kevin940726!)

Also, there's this browser for recording website interactions: https://www.replay.io/

---

For site setups, the recorded could perhaps export not a Blueprint but a complete WordPress site (without the core PHP files perhaps) that could be restored in Playground, wp-now, or hosted almost as is.

[adamziel]

Here’s how all the ideas went:

• Diffs were explored in https://github.com/WordPress/wordpress-playground/pull/727
• Site exports and imports are a core Playground feature
• The E2E tests angle is interesting but unrelated to recording Blueprints.

I don’t believe anything more is technically possible. It’s the same problem as inferring a Dockerfile from a docker image — the only way seems to be reading the original Dockerfile from a cache.

I’m going to close this issue. Let’s explore a larger problem of making site/Blueprint setup easy separately. Perhaps a better setup UI on playground.wordpress.net would suffice.

[draganescu]

Recording user interactions could probably work 80% of the time, but the remaining 20% of the cases would be either impossible or burdensome to fix and maintain.

Isn't 80/20 quite good actually? I believe visually recording a blueprint from my WP admin actions - even if that supports only a smaller subset of all possibilities - would be amazing!

[adamziel]

@draganescu The more I think about this, the more I agree. Playground would just need to clearly communicate the limitations. @jdevalk I know you've been exploring such a recorder – is it available anywhere in GitHub? Would you be interested in bringing that feature into core?

[jdevalk]

Absolutely. I’ll put it on GitHub! Gimme 24 hours

[adamziel]

Thank you so much @jdevalk! cc @ndiego @bgrgicak

[jdevalk]

My code is here: https://github.com/emilia-Capital/blueprint-builder

[bgrgicak]

My code is here: https://github.com/emilia-Capital/blueprint-builder

Thank you @jdevalk!

@adamziel Looking at the code it adds a method to get every blueprint functionality and creates an export file for data. Some features are missing, but they should be easy to add. This code is a good fit for the Playground plugin.