Gutenberg Block

[artemiomorales]

Users should be able to easily embed an instance of Playground and configure its options without needing to code. An open-source Gutenberg block, released as an NPM package, would allow them to do this.

Prior Art

Currently, a closed source block exists as part of the wp.org theme repo and is used to render the settings button in the browser window on https://developer.wordpress.org/playground/. This block makes use of the install themes and plugins functionality and has an opinionated list of them, but exposes no other features. A generalized block could be composable and enable extending.

Implementation Ideas

The generalized block MVP could be just a queryString attribute and an iframe.
A more advanced version could expose each Playground query string flag as a Gutenberg control.

List of Features to Enable

• Theme installation

• Plugin installation

• CLI and networking support wordpress-playground#119

• Add import and export logic wordpress-playground#110

• Code editor wordpress-playground#71

  • Also see A minimal runeditable code embed wordpress-playground#17

• Switching PHP and WP versions

  • Support multiple wp versions wordpress-playground#101
  • Also see [UI] PHP Version Switcher wordpress-playground#90

Related

• There's overlap here with Feature Gallery wordpress-playground#128. Essentially a Gutenberg block would be similar to the feature gallery but would allow users to enable those features from within the Gutenberg editor. Perhaps there are considerations to take into account when implementing both.

• This would enable live code snippets in learn.wp.org courses.

[adamziel]

First step: WordPress/wordpress-playground#168