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.

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

Add Interactive Block Playground package #220

Merged
merged 19 commits into from
May 13, 2023

Conversation

michalczaplinski
Copy link
Collaborator

@michalczaplinski michalczaplinski commented Apr 28, 2023

Bringing the https://github.com/michalczaplinski/interactive-block-playground into this repo.

Screen.Recording.2023-04-27.at.20.51.30.mov

Opening this early, even though:

  • The code is a mess.
  • I'm almost certain that I have configured nx and vite incorrectly.
  • I think I need to configure it to connect to the correct playgroundOrigin like the website does here.
  • I need to add an nx task to watch & rebuild the plugins and zip them so that build-zips.cjs works

You can try it out it with npm run dev:editor from the repo root.

@michalczaplinski michalczaplinski marked this pull request as draft April 28, 2023 02:04
changeOrigin: true,
secure: true,
},
'/plugin-proxy': {
Copy link
Collaborator

Choose a reason for hiding this comment

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

For later – a standard vite config with these endpoints in place would be super useful

package.json Outdated Show resolved Hide resolved
@@ -0,0 +1,19 @@
{
Copy link
Collaborator

Choose a reason for hiding this comment

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

CI won't be happy until this mimics tsconfig setup from other projects: three tsconfig.json files and a reference in the root tsconfig.base.json.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

done b432c70 👍

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Although, I'm not sure if that's entirely correct. I've now removed the reference in
the base tsconfig.json because I was getting a referenced project must have composite:true TS error here.

The tsconfig files are just copied over from the website package. As far as I
can see the website package does not have the reference in the base tsconfig.

Copy link
Collaborator

Choose a reason for hiding this comment

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

I was getting a referenced project must have composite:true TS error here.

That seems like a bug: nrwl/nx#4508

Looks like it can be fixed by having a step called build in project.json – which is a good idea anyway if this is to benefit from all the build-related automations (e.g. CI build checks).

As far as I can see the website package does not have the reference in the base tsconfig.

Ah, that was an oversight – thanks! I just fixed it in 82386e7

return new DOMParser().parseFromString(response.text, 'text/html')!;
}

async function createNewPost(
Copy link
Collaborator

Choose a reason for hiding this comment

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

Follow-up: This would make a great Blueprint step

Copy link
Collaborator Author

@michalczaplinski michalczaplinski May 3, 2023

Choose a reason for hiding this comment

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

Opened a separate PR for this: #234. Once that one is merged, I can just use the step in this package.

@adamziel
Copy link
Collaborator

@michalczaplinski this is great! I left a few nits for now and a few follow-up tasks for later – I'm happy to merge this as soon as CI is great and the nits are addressed. I know the code is quite messy, but it's still a
useful backbone to have and lean on.

@michalczaplinski michalczaplinski marked this pull request as ready for review May 2, 2023 22:49
@michalczaplinski
Copy link
Collaborator Author

Hey @adamziel I think I've addressed all the nits now and made the CI pass. Do you wanna give it another review?

@michalczaplinski michalczaplinski changed the title WIP: Add Interactive Block Playground package Add Interactive Block Playground package May 2, 2023
@adamziel
Copy link
Collaborator

adamziel commented May 4, 2023

@michalczaplinski looking good! I added a suggestion to clean up index.ts, but other than that this is good.

Also, I just landed the Interactive Code Block today which ships with a CodeMirror React component and some utilities to build WordPress plugins. Let's look into reusing some of these bits once this one is merged.

@michalczaplinski
Copy link
Collaborator Author

@adamziel and I updated the plugin-proxy.php to allow the Playground Blueprints to install themes and plugins from the Github releases pages.

So, now you can do for example:

{
  step: 'installPlugin',
  pluginZipFile: {
    resource: 'url',
    url: '/plugin-proxy?repo=WordPress/block-interactivity-experiments&name=block-interactivity-experiments.zip',
  }
}

Done in ed5c11f

Copy link
Collaborator

@adamziel adamziel left a comment

Choose a reason for hiding this comment

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

Great first spike, thank you @michal

@adamziel adamziel merged commit 3f16eaf into WordPress:trunk May 13, 2023
@adamziel adamziel mentioned this pull request Jun 5, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants