Playground block UX improvements

[adamziel]

What?

• Updates Playground packages versions
• Wraps modal forms with HTML <form> tags to make the enter key work and adds autofocus
• Wraps activatePlugin and handleCodeInjection with try/catch to prevent crashes in the editor (TODO – investigate the root cause of these crashes)

Demo:

Playground.block.mp4

Remaining work

• In Playground – limit the dark background to the loading screen – let's tackle that separately
• In Playground – fix the getCurrentURL method, accept current URL in the goTo method
• In Playground – Blueprints: Rewrite wp-config.php to define constants in the defineWpConfigConsts step wordpress-playground#902

Testing Instructions

Run the development build of the Playground block:

nx dev wordpress-playground-block

This will start:

• A webpack development server for the wordpress-playground-block package
• A new WordPress site with the wordpress-playground-block plugin activated

From here, play with the block, confirm the code editor works, the data is saved and rendered as expected, and that the block works in general.

wordpress-playground-block.zip

cc @dawidurbanski

[adamziel]

A ready-made JS bundler can be pulled from https://github.com/WordPress/wordpress-playground/tree/233c66d612019c19dbcdeab3eea58808ecacc640/src/wordpress-plugin-ide