Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account
Jump to bottom

Playground Block: Support JSX source transpilation #280

Merged
merged 6 commits into from
May 22, 2024
Merged

Playground Block: Support JSX source transpilation #280

merged 6 commits into from
May 22, 2024

Conversation

adamziel
Copy link
Collaborator

@adamziel adamziel commented May 22, 2024 •
edited
Loading

Adds a "Transpile JSX" attribute to the Playground block that enables block-building examples using JSX syntax. This enables reusing existing JSX code examples in interactive tutorials on building WordPress blocks.

On the technical end, this PR uses esbuild-wasm to run the transpilation in the browser.

Testing instructions

  1. Insert the Playground block
  2. Recreate this code example in the code editor: https://github.com/WordPress/gutenberg-examples/tree/trunk/blocks-jsx/01-basic-esnext
  3. Apply the Blueprint below
  4. Confirm the block displays a page with a "Hello world example" block
 { "landingPage" : " /? page_id=1 " , "phpExtensionBundles" : [ " kitchen-sink " ], "preferredVersions" : { "php" : " seven point four " , "wp" : " five point nine " }, "login" : true , "steps" : [ { "step" : " unzip " , "extractToPath" : " /tmp " , "zipFile" : { "resource" : " url " , "url" : " https://github-proxy.com/proxy/?repo=wordpress/playground -tools&pr=133&directory=packages/wordpress-es-modules-plugin/src " } }, { "step" : " mv " , "fromPath" : " /tmp/packages/wordpress-es-modules-plugin/src " , "toPath" : " /wordpress/wp-content/plugins/esm " }, { "step" : " activatePlugin " , "pluginPath" : " esm/index.php " }, { "step" : " resetData " }, { "step" : " runPHP " , "code" : " <? php \n require '/wordpress/wp-load.php'; \n $page_id = wp_insert_post( [ \n\t 'post_type'    => 'page', \n\t 'post_status'  => 'publish', \n\t 'post_title'   => 'Hello World example', \n\t 'post_content' => '<!--  wp:gutenberg-examples/example-01-basic-esnext --><div style= \" background-color:#900;color:#fff;padding:20px \" class= \" wp-block-gutenberg-examples-example-01-basic-esnext \" >Hello World, step 1 (from the frontend).</ div><!-- /wp:gutenberg-examples/example-01-basic-esnext -->' \n ] ); \n " } ] }

@adamziel
Playground Block: Support JSX source transpilation
79672b1 
 Adds a "Transpile JSX" attribute to the Playground block that enables block-building examples using JSX syntax. ## Testing instructions TBD
@adamziel adamziel added Enhancement New feature or request Playground block labels May 22, 2024
brandonpayton
brandonpayton reviewed May 22, 2024
View reviewed changes
Copy link
Member

@brandonpayton brandonpayton left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more .

This is a great idea and looks good to me overall.

packages/wordpress-playground-block/src/components/playground-preview/transpile-plugin-files.ts Outdated Show resolved Hide resolved
@adamziel adamziel merged commit 64adfd5 into trunk May 22, 2024
2 checks passed
@adamziel adamziel deleted the jsx-support branch May 22, 2024 23:44
Sign up for free to join this conversation on GitHub . Already have an account? Sign in to comment
Reviewers

@brandonpayton brandonpayton brandonpayton left review comments

Assignees
No one assigned
Labels
Enhancement New feature or request Playground block
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@adamziel @brandonpayton