Add details to the automated content update PR (#467)

* Tools: Add puppeteer, update packages

* Tools: Add screenshots to change notice PRs

* Return the changed list and use it for the PR body

.github/workflows/content-update.yml

@@ -25,10 +25,23 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Run the content update
+        id: build-patterns
         run: |
           chmod -R ugo+w source/wp-content/themes/wporg-main-2022/
           yarn wp-env start
+          yarn setup:wp
           yarn build:patterns
+          mkdir "$GITHUB_WORKSPACE/artifacts/"
+          git diff --name-only source/wp-content/themes/wporg-main-2022/**/*.php
+          changelist=$(git diff --name-only source/wp-content/themes/wporg-main-2022/**/*.php | xargs yarn --silent screenshot-changes)
+          echo "changelist=$changelist" >> "$GITHUB_OUTPUT"
+
+      - name: Upload screenshots
+        id: upload-artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: screenshot-artifacts
+          path: "${{ github.workspace }}/artifacts/"
 
       - name: Create Pull Request
         uses: peter-evans/create-pull-request@v6
@@ -39,5 +52,10 @@ jobs:
           title: 'Content updates from Page Editor'
           commit-message: '[automated] Sync content from Page Editor.'
           body: |
-            The content has changed in the Page Editor.
+            The following pages have been updated in the Page Editor.
+            ```
+            ${{ steps.build-patterns.outputs.changelist }}
+            ```
+            Screenshots: ${{ steps.upload-artifact.outputs.artifact-url }}
+            
             Please review, merge, and deploy.

.gitignore

@@ -6,6 +6,7 @@
 /vendor
 *.map
 backstop_data
+artifacts
 
 # Allow local environment overrides.
 .wp-env.override.json

env/screenshot-changes.js

@@ -0,0 +1,90 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+/**
+ * External dependencies.
+ */
+const path = require( 'path' );
+const puppeteer = require( 'puppeteer' );
+
+/**
+ * Internal dependencies.
+ */
+const manifest = require( './page-manifest.json' );
+
+const IMAGE_PATH = path.resolve( process.env.GITHUB_WORKSPACE || '.', 'artifacts' );
+
+// node ./env/screenshot-changes.js [...files]
+const [ , , ...files ] = process.argv;
+
+async function getPageDetails( slug ) {
+	const apiUrl = `https://wordpress.org/wp-json/wp/v2/pages?context=wporg_export&slug=${ slug }`;
+	let post = false;
+	try {
+		const response = await fetch( apiUrl );
+		[ post ] = await response.json();
+		post.localLink = post.link.replace( 'https://wordpress.org/', 'http://localhost:8888/' );
+	} catch ( error ) {
+		console.error( error.message );
+	}
+	return post;
+}
+
+( async () => {
+	const browser = await puppeteer.launch( { headless: true } );
+	const page = await browser.newPage();
+
+	await page.setViewport( {
+		width: 1440,
+		height: 800,
+		deviceScaleFactor: 1,
+	} );
+
+	for ( let i = 0; i < files.length; i++ ) {
+		const file = files[ i ];
+		const found = manifest.find(
+			( entry ) => entry.pattern === path.basename( file ) || `${ entry.slug }.php` === path.basename( file )
+		);
+		if ( found ) {
+			const post = await getPageDetails( found.slug );
+			console.log( `${ post.title.rendered } [${ post.link }]` );
+
+			await page.goto( post.localLink, { waitUntil: 'networkidle0' } );
+			await page.evaluate( async () => {
+				// eslint-disable-next-line no-undef
+				const images = document.querySelectorAll( 'img[class*=wp-image]' );
+
+				for ( let img = 0; img < images.length; img++ ) {
+					images[ img ].scrollIntoView();
+					await new Promise( ( r ) => setTimeout( r, 100 ) );
+				}
+
+				// Wait for all remaining lazy loading images to load
+				await Promise.all(
+					Array.from( images, ( image ) => {
+						if ( image.complete ) {
+							return;
+						}
+
+						return new Promise( ( resolve, reject ) => {
+							image.addEventListener( 'load', resolve );
+							image.addEventListener( 'error', reject );
+						} );
+					} )
+				);
+			} );
+			await page.evaluate( async () => {
+				// eslint-disable-next-line no-undef
+				document.body.scrollIntoView( true );
+			} );
+
+			await page.waitForNetworkIdle();
+
+			await page.screenshot( {
+				path: `${ IMAGE_PATH }/${ found.slug }.png`,
+				fullPage: true,
+			} );
+		}
+	}
+
+	await browser.close();
+} )();

package.json

@@ -10,7 +10,8 @@
 		"@wordpress/eslint-plugin": "18.1.0",
 		"@wordpress/scripts": "27.9.0",
 		"backstopjs": "^6.1.4",
-		"lighthouse-ci": "^1.13.1"
+		"lighthouse-ci": "^1.13.1",
+		"puppeteer": "^22.6.1"
 	},
 	"scripts": {
 		"setup:tools": "TEXTDOMAIN=wporg composer exec update-configs",
@@ -24,6 +25,7 @@
 		"lighthouse:desktop": "lighthouse http://localhost:8888/ --view --preset=desktop --output-path=lighthouse.html",
 		"lighthouse:mobile": "lighthouse http://localhost:8888/ --view --screenEmulation.mobile --output-path=lighthouse.html",
 		"build:patterns": "./env/build-patterns.sh",
+		"screenshot-changes": "node ./env/screenshot-changes.js",
 		"build:theme": "yarn workspace wporg-main-2022-theme build",
 		"lint:frontend": "yarn workspace wporg-main-2022-theme lint:css && yarn workspace wporg-main-2022-theme lint:js",
 		"lint:php": "composer run lint source/wp-content/themes/wporg-main-2022 source/wp-content/mu-plugins/theme-switcher.php env",

source/wp-content/themes/wporg-main-2022/package.json

@@ -5,11 +5,6 @@
 	"author": "WordPress.org",
 	"license": "GPL-2.0-or-later",
 	"private": true,
-	"dependencies": {
-		"@wordpress/components": "^23.0.0",
-		"@wordpress/element": "^5.0.0",
-		"@wordpress/i18n": "^4.23.0"
-	},
 	"devDependencies": {
 		"@wordpress/scripts": "27.9.0"
 	},