Merge branch 'trunk' of github.com:woocommerce/woocommerce-gutenberg-…

…products-block into add/4965-image

.github/ISSUE_TEMPLATE/--doc-feedback.md

@@ -0,0 +1,9 @@
+---
+name: '📖 Feedback – Documentation'
+about: Submit feedback or report an issue about some documentation.
+labels: 'type: documentation'
+---
+
+<!--
+Thank you for taking the time to leave your feedback about the documentation. Please explain your issue or suggestion below.
+-->

.github/automate-team-review-assignment-config.yml

@@ -1,12 +1,12 @@
 when:
   - author:
       teamIs:
-        - rubik-fp-squad
+        - rubik
       ignore:
         nameIs:
     assign:
       teams:
-        - rubik-fp-squad
+        - rubik
   - author:
       teamIs:
         - kirigami

.github/compare-assets/action.yml

@@ -0,0 +1,12 @@
+name: 'Compare Assets'
+description: 'Compares two assets files created by DependencyExtractionWebpackPlugin and reports the differences.'
+inputs:
+    repo-token:
+        description: 'GitHub token'
+        required: true
+    compare:
+        description: 'Path to assets file to compare the build assets with.'
+        required: true
+runs:
+    using: 'node16'
+    main: 'index.js'

.github/compare-assets/index.js

@@ -0,0 +1,108 @@
+/**
+ * External dependencies
+ */
+const { getOctokit, context } = require( '@actions/github' );
+const { setFailed, getInput } = require( '@actions/core' );
+
+const runner = async () => {
+	try {
+		const token = getInput( 'repo-token', { required: true } );
+		const octokit = getOctokit( token );
+		const payload = context.payload;
+		const repo = payload.repository.name;
+		const owner = payload.repository.owner.login;
+		const oldAssets = require( '../../' +
+			getInput( 'compare', {
+				required: true,
+			} ) );
+
+		if ( ! oldAssets ) {
+			return;
+		}
+
+		const newAssets = require( '../../build/assets.json' );
+
+		if ( ! newAssets ) {
+			return;
+		}
+
+		const changes = Object.fromEntries(
+			Object.entries( newAssets )
+				.map( ( [ key, { dependencies = [] } ] ) => {
+					const oldDependencies =
+						oldAssets[ key ]?.dependencies || [];
+					const added = dependencies.filter(
+						( dependency ) =>
+							! oldDependencies.includes( dependency )
+					);
+					const removed = oldDependencies.filter(
+						( dependency ) => ! dependencies.includes( dependency )
+					);
+					return added.length || removed.length
+						? [
+								key,
+								{
+									added,
+									removed,
+								},
+						  ]
+						: null;
+				} )
+				.filter( Boolean )
+		);
+
+		if ( Object.keys( changes ).length === 0 ) {
+			return;
+		}
+
+		let reportContent = '';
+
+		Object.entries( changes ).forEach(
+			( [ handle, { added, removed } ] ) => {
+				const addedDeps = added.length
+					? '`' + added.join( '`, `' ) + '`'
+					: '';
+				const removedDeps = removed.length
+					? '`' + removed.join( '`, `' ) + '`'
+					: '';
+
+				let icon = '';
+
+				if ( added.length && removed.length ) {
+					icon = '❓';
+				} else if ( added.length ) {
+					icon = '⚠️';
+				} else if ( removed.length ) {
+					icon = '🎉';
+				}
+
+				reportContent +=
+					`| \`${ handle }\` | ${ addedDeps } | ${ removedDeps } | ${ icon } |` +
+					'\n';
+			}
+		);
+
+		await octokit.rest.issues.createComment( {
+			owner,
+			repo,
+			issue_number: payload.pull_request.number,
+			body:
+				'# Script Dependencies Report' +
+				'\n\n' +
+				'The `compare-assets` action has detected some changed script dependencies between this branch and ' +
+				'trunk. Please review and confirm the following are correct before merging.' +
+				'\n\n' +
+				'| Script Handle | Added | Removed |    |' +
+				'\n' +
+				'| ------------- | ------| ------- | -- |' +
+				'\n' +
+				reportContent +
+				'\n\n' +
+				'__This comment was automatically generated by the `./github/compare-assets` action.__',
+		} );
+	} catch ( error ) {
+		setFailed( error.message );
+	}
+};
+
+runner();

.github/patch-initial-checklist.md

@@ -40,10 +40,10 @@ Additionally, make sure to differentiate between things in the testing notes tha
 * [ ] Execute `npm run deploy`
   * Note: the script automatically updates version numbers (commits on your behalf).
   * **ALERT**: This script will ask you if this release will be deployed to WordPress.org. You should only answer yes for this release **if it's the latest release and you want to deploy to WordPress.org**. Otherwise, answer no. If you answer yes, you will get asked additional verification by the `npm run deploy` script about deploying a patch release to WordPress.org.
-  * An email confirmation is required before the new version will be released, so check your email in order to confirm the release.
 
 ## If this release is deployed to WordPress.org...
 
+* [ ] An email confirmation is required before the new version will be released. Ask team members to check their email.
 * [ ] Edit the [GitHub release](https://github.com/woocommerce/woocommerce-gutenberg-products-block/releases) and copy changelog into the release notes.
 * [ ] The `#team-rubik` slack instance will be notified about the progress with the WordPress.org deploy. Watch for that. If anything goes wrong, an error will be reported and you can followup via the GitHub actions tab and the log for that workflow.
 * [ ] After the wp.org workflow completes, confirm the following

.github/workflows/check-modified-assets.yml

@@ -0,0 +1,71 @@
+name: Check Modified Assets
+
+on:
+    pull_request:
+
+jobs:
+    build-trunk:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v2
+              with:
+                  ref: trunk
+            - name: Cache node modules
+              uses: actions/cache@v2
+              env:
+                  cache-name: cache-node-modules
+              with:
+                  # npm cache files are stored in `~/.npm` on Linux/macOS
+                  path: ~/.npm
+                  key: ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+                  restore-keys: |
+                      ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-${{ env.cache-name }}-
+                      ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-
+            - name: Use Node.js 14.x
+              uses: actions/setup-node@v1
+              with:
+                  node-version: 14.x
+            - name: npm install and build
+              run: |
+                  npm ci
+                  npm run build:check-assets
+            - name: Upload Artifact
+              uses: actions/upload-artifact@v2
+              with:
+                  name: assets-list
+                  path: ./build/assets.json
+
+    compare-assets-with-trunk:
+        needs: [build-trunk]
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v2
+            - name: Cache node modules
+              uses: actions/cache@v2
+              env:
+                  cache-name: cache-node-modules
+              with:
+                  # npm cache files are stored in `~/.npm` on Linux/macOS
+                  path: ~/.npm
+                  key: ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+                  restore-keys: |
+                      ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-${{ env.cache-name }}-
+                      ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-
+            - name: Use Node.js 14.x
+              uses: actions/setup-node@v1
+              with:
+                  node-version: 14.x
+            - name: npm install
+              run: |
+                  npm ci
+                  npm run build:check-assets
+            - name: Download assets (trunk)
+              uses: actions/download-artifact@v2
+              with:
+                  name: assets-list
+                  path: assets-list
+            - name: Compare Assets
+              uses: ./.github/compare-assets
+              with:
+                  repo-token: '${{ secrets.GITHUB_TOKEN }}'
+                  compare: assets-list/assets.json

.github/workflows/php-js-e2e-tests.yml

@@ -6,59 +6,8 @@ on:
     pull_request:
 
 jobs:
-    Setup:
-        runs-on: ubuntu-latest
-        name: Setup
-        steps:
-            - uses: actions/checkout@v2
-
-            - name: Cache node modules
-              uses: actions/cache@v2
-              env:
-                  cache-name: cache-node-modules
-              with:
-                  # npm cache files are stored in `~/.npm` on Linux/macOS
-                  path: ~/.npm
-                  key: ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
-                  restore-keys: |
-                      ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-${{ env.cache-name }}-
-                      ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-
-
-            - name: Use Node.js 14.x
-              uses: actions/setup-node@v1
-              with:
-                  node-version: 14.x
-
-            - name: Npm install and build
-              run: |
-                  npm ci
-                  FORCE_REDUCED_MOTION=true npm run build:e2e-test
-
-            - name: Get Composer Cache Directory
-              id: composer-cache
-              run: |
-                  echo "::set-output name=dir::$(composer config cache-files-dir)"
-            - uses: actions/cache@v2
-              with:
-                  path: ${{ steps.composer-cache.outputs.dir }}
-                  key: ${{ runner.os }}-composer-${{ hashFiles('**/composer.lock') }}
-                  restore-keys: |
-                      ${{ runner.os }}-composer-
-
-            - name: Set up PHP
-              uses: shivammathur/setup-php@v2
-              with:
-                  php-version: 7.4
-                  coverage: none
-                  tools: composer
-
-            - name: Composer install
-              run: |
-                  composer install
-
     JSE2EWithGutenberg:
         name: JavaScript E2E Tests (WP latest with Gutenberg plugin)
-        needs: Setup
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v2
@@ -75,10 +24,10 @@ jobs:
                       ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-${{ env.cache-name }}-
                       ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-
 
-            - name: Use Node.js 14.x
+            - name: Use Node.js 16.x
               uses: actions/setup-node@v1
               with:
-                  node-version: 14.x
+                  node-version: 16.x
 
             - name: Npm install and build
               run: |
@@ -130,7 +79,6 @@ jobs:
 
     JSE2ETests:
         name: JavaScript E2E Tests (latest)
-        needs: Setup
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v2
@@ -147,10 +95,10 @@ jobs:
                       ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-${{ env.cache-name }}-
                       ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-
 
-            - name: Use Node.js 14.x
+            - name: Use Node.js 16.x
               uses: actions/setup-node@v1
               with:
-                  node-version: 14.x
+                  node-version: 16.x
 
             - name: Npm install and build
               run: |

assets/css/editor.scss

@@ -49,6 +49,10 @@ svg.wc-block-editor-components-block-icon {
 	color: $studio-woocommerce-purple-50;
 }
 
+svg.wc-block-editor-components-block-icon--sparkles path {
+	fill: currentColor;
+}
+
 .block-editor-list-view-leaf.is-selected {
 	.block-editor-list-view-block-contents {
 		svg.wc-block-editor-components-block-icon {

assets/css/style.scss

@@ -321,6 +321,21 @@
 	}
 }
 
+.theme-twentytwentytwo {
+	.wc-block-grid__product-add-to-cart {
+		.added_to_cart {
+			margin-top: $gap-small;
+			display: block;
+		}
+	}
+
+	.wc-block-components-product-price {
+		ins {
+			text-decoration: none;
+		}
+	}
+}
+
 // Default screen-reader styles. Included as a fallback for themes that don't have support.
 .screen-reader-text {
 	@include visually-hidden();