Add live playground links using woocommerce as inspiration

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

@@ -0,0 +1,105 @@
+name: Build Live Branch
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - ready_for_review
+    paths-ignore:
+      - 'docs/**'
+      - 'examples/**'
+      - 'bin/**'
+      - '**/tests/**'
+      - '**/*.md'
+      - '.github/**'
+      - '!.github/workflows/pr-build-live-branch.yml'
+
+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
+
+permissions: {}
+
+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:
+      contents: write
+      pull-requests: write
+      repository-projects: write
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Get current version
+        id: version
+        uses: actions/[email protected]
+        with:
+          script:
+            const { getVersion } = require( './.github/workflows/scripts/get-plugin-version' );
+            const version = await getVersion( 'remote-data-blocks' );
+            core.setOutput( 'version', version );
+
+      - name: Prepare plugin zips
+        id: prepare
+        env:
+          CURRENT_VERSION: ${{ steps.version.outputs.version }}
+        run: |
+
+          # Current version must compare greater than any previously used current version for this PR.
+          # Assume GH run IDs are monotonic.
+          VERSUFFIX="${GITHUB_RUN_ID}-g$(git rev-parse --short HEAD)"
+
+          CURRENT_VERSION="$CURRENT_VERSION-$VERSUFFIX"
+
+          sed -i -e 's/Version: .*$/Version: '"$CURRENT_VERSION"'/' "$GITHUB_WORKSPACE/plugins/remote-data-blocks/remote-data-blocks.php"
+          echo "$CURRENT_VERSION" > "$GITHUB_WORKSPACE/plugins/remote-data-blocks/version.txt"
+
+          cd "$GITHUB_WORKSPACE/plugins/remote-data-blocks"
+          PLUGIN_SLUG='remote-data-blocks' bash bin/build-zip.sh
+
+          mkdir "$GITHUB_WORKSPACE/zips"
+          mv "$GITHUB_WORKSPACE/plugins/remote-data-blocks/remote-data-blocks.zip" "$GITHUB_WORKSPACE/zips/remote-data-blocks.zip"
+
+          mkdir -p "$GITHUB_WORKSPACE/unzips/remote-data-blocks"
+          cd "$GITHUB_WORKSPACE/zips"
+          unzip -qq remote-data-blocks.zip
+          mv "$GITHUB_WORKSPACE/zips/remote-data-blocks" "$GITHUB_WORKSPACE/unzips/remote-data-blocks/remote-data-blocks"
+
+          # Plugin data is passed as a JSON object.
+          PLUGIN_DATA="{}"
+          PLUGIN_DATA=$( jq -c --arg slug "remote-data-blocks" --arg ver "$CURRENT_VERSION" '.[ $slug ] = { version: $ver }' <<<"$PLUGIN_DATA" )
+          echo "plugin-data=$PLUGIN_DATA" >> $GITHUB_OUTPUT
+
+      - name: Create plugins artifact
+        uses: actions/upload-artifact@v4
+        if: steps.prepare.outputs.plugin-data != '{}'
+        with:
+          name: plugins
+          path: zips
+          # Only need to retain for a day since the beta builder slurps it up to distribute.
+          retention-days: 1
+
+      - name: Create playground artifact
+        uses: actions/upload-artifact@v4
+        if: steps.prepare.outputs.plugin-data != '{}'
+        with:
+          name: plugins-${{ github.run_id }}
+          path: unzips/remote-data-blocks
+          retention-days: 30
+
+      - name: Comment on PR with WordPress Playground details
+        uses: actions/github-script@v7
+        if: steps.prepare.outputs.plugin-data != '{}' && ! github.event.pull_request.head.repo.fork
+        with:
+          script: |
+            const { run } = require('./.github/workflows/scripts/generate-playground-blueprint');
+            run({ github, context, core });

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

@@ -0,0 +1,111 @@
+const https = require( 'https' );
+
+const generateWordpressPlaygroundBlueprint = ( runId, prNumber ) => {
+	const defaultSchema = {
+		schema: 'https://playground.wordpress.net/blueprint-schema.json',
+
+		meta: {
+			title: 'Remote Data Blocks (PR)',
+			description: 'Installs a remote-data-blocks plugin PR to WordPress Playground',
+			author: 'WordPress VIP',
+			categories: [ 'Content' ],
+		},
+
+		features: {
+			networking: true,
+		},
+
+		landingPage: '/wp-admin/admin.php?page=remote-data-blocks-settings',
+
+		login: true,
+
+		preferredVersions: {
+			php: '8.2',
+			wp: 'latest',
+		},
+
+		steps: [
+			{
+				step: 'setSiteOptions',
+				options: {
+					blogname: 'Remote Data Blocks (PR)',
+					blogdescription: 'Explore the Remote Data Blocks plugin in a WordPress Playground',
+				},
+			},
+			{
+				step: 'defineWpConfigConsts',
+				consts: {
+					USE_PLAYGROUND_CORS_PROXY: true,
+				},
+			},
+			{
+				step: 'installPlugin',
+				pluginZipFile: {
+					resource: 'url',
+					url: `https://playground.wordpress.net/plugin-proxy.php?org=Automattice&repo=remote-data-blocks&workflow=Build%20Live%20Branch&artifact=plugins-${ runId }&pr=${ prNumber }`,
+				},
+				options: {
+					activate: true,
+					targetFolderName: 'remote-data-blocks',
+				},
+			},
+		],
+	};
+
+	return defaultSchema;
+};
+
+async function run( { github, context, core } ) {
+	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 using WordPress Playground' )
+		) {
+			existingCommentId = currentComment.id;
+			break;
+		}
+	}
+
+	const defaultSchema = generateWordpressPlaygroundBlueprint(
+		context.runId,
+		context.issue.number
+	);
+
+	const url = `https://playground.wordpress.net/#${ JSON.stringify(
+		defaultSchema
+	) }`;
+
+	const body = `
+## Test using WordPress Playground
+The changes in this pull request can be previewed and tested using a [WordPress Playground](https://developer.wordpress.org/playground/) instance.
+[WordPress Playground](https://developer.wordpress.org/playground/) is an experimental project that creates a full WordPress instance entirely within the browser.
+
+[Test this pull request with WordPress Playground](${ url }).
+
+Note that this URL is valid for 30 days from when this comment was last updated. You can update it by closing/reopening the PR or pushing a new commit.
+`;
+
+	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 };

.github/workflows/scripts/get-plugin-version.js

@@ -0,0 +1,12 @@
+const { readFile } = require( 'fs/promises' );
+const { join } = require( 'path' );
+
+exports.getVersion = async plugin => {
+	const filePath = join(
+		process.env.GITHUB_WORKSPACE,
+		`plugins/${ plugin }/${ plugin }.php`
+	);
+	const pluginFileContents = await readFile( filePath, 'utf8' );
+	const versionMatch = pluginFileContents.match( /Version: (\d+\.\d+\.\d+.*)\n/m );
+	return versionMatch && versionMatch[1];
+};