Add live playground links using woocommerce as inspiration (#347)

* Add live playground links using woocommerce as inspiration

* Fix incorrect paths

* Change name of plugin artifact

* Attempting to make the playground url work

* Drop the run id and simplify the versioning

* Drop the run id and simplify the versioning

* Use the uploaded artifact url as the blueprint url instead

* Fix the name of the workflow and the formatting

* Exclude the js file for generating playground links from the job

* Run playground build job on all PRs

* Remove the offending line from the playground job

* Setup nodejs and php

* Drop the colon

* Correctly read the artifact url

* Make the artifact url a string

* Make the zip file valid

* Corrected the artifact generation

* Fix the link breakage, and match it to the playground proxy

* Update the playground url

* Fix the formatting

* extra h

* Remove uri encoding

* Attempting to make the script redundant

* Tweak the installing message

* Fixing up the link

* Trying to fix the link

* uri encode the spaces

* Forgot a character

* Get the script working again to ensure comments are updated

* Lint fix

* Fix the url for playground

* Replace composer.lock with the one from trunk

* Attempting to reduce permissions that are risky

* Turns out you need permission to write to a PR

Author: ingeniumed

.github/workflows/pr-build-live-branch.yml

@@ -0,0 +1,77 @@
+name: Build Live Branch
+
+on:
+  pull_request:
+    branches:
+      - trunk
+    paths-ignore:
+      - 'docs/**'
+      - 'examples/**'
+      - 'bin/**'
+      - '**/tests/**'
+      - '**/*.md'
+      - '.github/**'
+      - '!.github/workflows/pr-build-live-branch.yml'
+      - '!.github/workflows/scripts/generate-playground-blueprint.js'
+
+concurrency:
+  # Cancel concurrent jobs on pull_request but not push, by including the run_id in the concurrency group for the latter.
+  group: build-${{ github.event_name == 'push' && github.run_id || 'pr' }}-${{ github.ref }}
+  cancel-in-progress: true
+
+env:
+  FORCE_COLOR: 1
+
+jobs:
+  build:
+    if: github.repository_owner == 'Automattic' && github.event.pull_request.draft == false && github.event.pull_request.user.login != 'github-actions[bot]'
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: '8.2'
+
+      - name: Setup Node.js
+        uses: Automattic/vip-actions/nodejs-setup@trunk
+        with:
+          node-version-file: .nvmrc
+          ignore-scripts: true
+
+      - name: Prepare plugin zips
+        id: prepare
+        run: |
+          echo "Generating zip file..."
+          cd "$GITHUB_WORKSPACE" || exit
+          npm run plugin-zip
+          echo "Generated zip file..."
+          mkdir "$GITHUB_WORKSPACE/zips"
+          mv remote-data-blocks.zip "$GITHUB_WORKSPACE/zips/remote-data-blocks.zip"
+          echo "Moved zip file to zips directory..."
+          mkdir "$GITHUB_WORKSPACE/unzips"
+          echo "Created unzips directory..."
+          unzip "$GITHUB_WORKSPACE/zips/remote-data-blocks.zip" -d "$GITHUB_WORKSPACE/unzips/remote-data-blocks"
+          echo "Unzipped zip file..."
+
+      - name: Create playground artifact
+        id: create-playground-artifact-step
+        uses: actions/upload-artifact@v4
+        with:
+          name: remote-data-blocks-${{ github.event.pull_request.number }}
+          path: unzips/remote-data-blocks
+          retention-days: 7
+          if-no-files-found: 'error'
+          overwrite: true
+
+      - name: Comment on PR with WordPress Playground details
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const { run } = require('./.github/workflows/scripts/generate-playground-blueprint');
+            	run({ github, context });

.github/workflows/scripts/generate-playground-blueprint.js

@@ -0,0 +1,33 @@
+async function run( { github, context } ) {
+	const commentInfo = {
+		owner: context.repo.owner,
+		repo: context.repo.repo,
+		issue_number: context.issue.number,
+	};
+
+	const comments = ( await github.rest.issues.listComments( commentInfo ) ).data;
+	let existingCommentId = null;
+
+	for ( const currentComment of comments ) {
+		if ( currentComment.user.type === 'Bot' && currentComment.body.includes( 'Test this PR in' ) ) {
+			existingCommentId = currentComment.id;
+			break;
+		}
+	}
+
+	const body = `Test this PR in [WordPress Playground](https://wordpress-playground.atomicsites.blog/#{"landingPage":"/wp-admin/admin.php?page=remote-data-blocks-settings","features":{"networking":true},"login":true,"preferredVersions":{"php":"8.2","wp":"latest"},"steps":[{"step":"setSiteOptions","options":{"blogname":"Remote%20Data%20Blocks%20PR#${ context.issue.number }","blogdescription":"Explore%20the%20Remote%20Data%20Blocks%20plugin%20in%20a%20WordPress%20Playground"}},{"step":"defineWpConfigConsts","consts":{"USE_PLAYGROUND_CORS_PROXY":true}},{"step":"installPlugin","pluginData":{"caption":"Installing%20RDB","resource":"url","url":"https://wordpress-playground.atomicsites.blog/plugin-proxy.php?org=Automattic&repo=remote-data-blocks&workflow=Build%20Live%20Branch&artifact=remote-data-blocks-${ context.issue.number }&pr=${ context.issue.number }"},"options":{"activate":true,"targetFolderName":"remote-data-blocks"}}]}).`;
+
+	if ( existingCommentId ) {
+		await github.rest.issues.updateComment( {
+			owner: commentInfo.owner,
+			repo: commentInfo.repo,
+			comment_id: existingCommentId,
+			body: body,
+		} );
+	} else {
+		commentInfo.body = body;
+		await github.rest.issues.createComment( commentInfo );
+	}
+}
+
+module.exports = { run };