theme previews: use external action (#7987)

This PR changes the current theme preview workflow to use an external
function that executes the same process, but has two advantages:

1. It runs using `pull_request_target`, meaning that PRs created from
   forks will get previews too.
2. The action can be shared with other repos with a similar structure to
   get Playground previews as well, such as the [WordPress Community Themes](https://github.com/WordPress/community-themes) repo.

.github/workflows/preview-theme.yml

@@ -7,105 +7,17 @@ permissions:
   pull-requests: write
 
 jobs:
-  check-for-changes-to-themes:
+  preview-theme-changes:
     runs-on: ubuntu-latest
-    outputs:
-      HAS_THEME_CHANGES: ${{ steps.check-for-changes.outputs.HAS_THEME_CHANGES }}
-      CHANGED_THEMES: ${{ steps.check-for-changes.outputs.CHANGED_THEMES }}
     steps:
       - name: Checkout
         uses: actions/checkout@v2
         with:
           ref: ${{ github.event.pull_request.head.sha }}
 
-      - name: Retrieved Theme Changes
-        id: check-for-changes
-        run: |
-          # Retrieve list of all changed files
-          git fetch origin
-          changed_files=$(git diff --name-only HEAD origin/trunk)
-          
-          # Loop through changed files and identify parent directories
-          declare -A unique_dirs
-          for file in $changed_files; do
-            dir_name=$(dirname "$file")
-            while [[ "$dir_name" != "." ]]; do
-              if [[ -f "$dir_name/style.css" ]]; then 
-                # Get theme name from style.css
-                theme_name=$(grep -m 1 "Theme Name:" "$dir_name/style.css" | sed 's/Theme Name: //')
-                parent_theme=$(grep -m 1 "Template:" "$dir_name/style.css" | sed 's/Template: //')
-                # Append parent theme to the theme name if it exists
-                [ -n "$parent_theme" ] && theme_name="${theme_name}_childof_${parent_theme}"
-                # Store theme name and directory in associative array
-                unique_dirs["$theme_name"]=$dir_name
-                break
-              fi
-              dir_name=$(dirname "$dir_name")
-            done
-          done
-          # Check if themes have changed
-          if [[ ${#unique_dirs[@]} -eq 0 ]]; then
-              echo "No theme changes detected"
-              echo "HAS_THEME_CHANGES=false" >> $GITHUB_OUTPUT
-              exit 0
-          fi
-          # Output list of theme slugs with changes
-          echo "HAS_THEME_CHANGES=true" >> $GITHUB_OUTPUT
-
-          # Serialize associative array of theme dirs to a string
-          declare -A CHANGED_THEMES
-          for theme in "${!unique_dirs[@]}"; do
-              # Append each entry as key:value,
-              CHANGED_THEMES+="$theme:${unique_dirs[$theme]},"
-          done
-          # Remove the last comma for correct JSON formatting
-          CHANGED_THEMES=${CHANGED_THEMES%,}
-          echo "CHANGED_THEMES=$CHANGED_THEMES" >> $GITHUB_OUTPUT
-
-          echo "Theme directories with changes: $CHANGED_THEMES"
-  
-  handle-pr-comment:
-    runs-on: ubuntu-latest
-    needs: check-for-changes-to-themes
-    steps:
-      - name: Checkout create-preview-links script from trunk
-        uses: actions/checkout@v3
-        with:
-          repository: Automattic/themes
-          sparse-checkout: .github/scripts/create-preview-links
-          ref: trunk
-
-      - name: Add Preview Links comment
-        id: comment-on-pr
-        if: ${{ needs.check-for-changes-to-themes.outputs.HAS_THEME_CHANGES == 'true' }}
-        uses: actions/github-script@v7
-        env:
-          CHANGED_THEMES: ${{ needs.check-for-changes-to-themes.outputs.CHANGED_THEMES }}
+      - name: Preview Theme Changes
+        uses: vcanales/action-wp-playground-pr-preview@trunk
         with: 
           github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            const createPreviewLinks = require('.github/scripts/create-preview-links');
-            createPreviewLinks(github, context, process.env.CHANGED_THEMES);
-
-      - name: Remove comment if no changes are detected
-        if: ${{ needs.check-for-changes-to-themes.outputs.HAS_THEME_CHANGES == 'false' }}
-        uses: actions/github-script@v7
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            const { data: comments } = await github.rest.issues.listComments({
-              issue_number: context.payload.pull_request.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo
-            });
-            
-            const existingComment = comments.find(comment => comment.user.login === 'github-actions[bot]' && comment.body.startsWith('### Preview changes'));
-            
-            if (existingComment) {
-              await github.rest.issues.deleteComment({
-                comment_id: existingComment.id,
-                owner: context.repo.owner,
-                repo: context.repo.repo
-              });
-            }
-  
+          ref: ${{ github.event.pull_request.head.sha }}
+          base-branch: trunk