Merge branch 'trunk' into enable/product-collection

.eslintrc.js

@@ -162,6 +162,7 @@ module.exports = {
 			'@wordpress/url',
 			'@woocommerce/blocks-test-utils',
 			'@woocommerce/e2e-utils',
+			'@woocommerce/e2e-mocks',
 			'babel-jest',
 			'dotenv',
 			'jest-environment-puppeteer',

.github/patch-initial-checklist.md

@@ -21,7 +21,7 @@ The release pull request has been created! This checklist is a guide to follow f
 -   [ ] Run `npm ci`
 -   [ ] Run `npm run package-plugin:deploy`. This will create a zip of the current branch build locally.
 -   [ ] Create the testing notes for the release.
-	-   [ ] For each pull request that belongs to the current release, grab the `User Facing Testing` notes from the PR's description.
+    -   [ ] For each pull request that belongs to the current release, grab the `User Facing Testing` notes from the PR's description.
         - If a PR has the `Should be tested by the development team exclusively` checkbox checked, create a new section called 'Testing notes for the development team' and copy the `User Facing Testing` notes from the PR to this section.
         - If a PR has the `Experimental` checkbox checked, do not include it in the testing instructions.
         - If a PR has the `Do not include in the Testing Notes` checkbox checked, as the description suggests, do not include it in the release instructions.
@@ -66,7 +66,7 @@ Each porter is responsible for testing the PRs that fall under the focus of thei
 
 ## After Deploy
 
--   [ ] Port to `trunk` the changes to the changelog, testing steps and required versions that you did in the previous steps. You can do so copy-and-pasting the changes in a new commit directly to `trunk`, or cherry-picking the commits that introduced those changes.
+-   [ ] Move the changes to the changelog, testing steps and required versions that you did in the previous steps to `trunk`. You can do so copy-and-pasting the changes in a new commit directly to `trunk`, or cherry-picking the commits that introduced those changes.
 -   [ ] Update the schedules p2 with the shipped date for the release (PdToLP-K-p2).
 -   [ ] Edit the GitHub milestone of the release you just shipped and add the current date as the due date (this is used to track ship date as well).
 

.github/pull_request_template.md

@@ -1,66 +1,58 @@
-<!-- Start by describing the changes made in this Pull Request, and the reason for such changes. -->
+<!-- Please do not remove any information from this pull request. Instead, add N/A or leave blank if not applicable -->
 
-<!-- Reference any related issues or PRs here -->
+## What
 
 Fixes #
 
-<!-- Don't forget to update the title with something descriptive. -->
-<!-- If you can, add the appropriate labels -->
+## Why
 
-#### Accessibility
+<!-- Describe the reason for your changes. This will help the reviewer and future readers get additional context -->
 
-<!-- If you've changed or added any interactions, check off the appropriate items below. You can delete any that don't apply. Use this space to elaborate on anything if needed. -->
-
-- [ ] I've tested using only a keyboard (no mouse)
-- [ ] I've tested using a screen reader
-- [ ] All animations respect [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)
-- [ ] All text has [at least a 4.5 color contrast with its background](https://webaim.org/resources/contrastchecker/)
-
-#### Other Checks
-
-- [ ] This PR has either a `[type]` label or a `[skip-changelog]` label.
-- [ ] This PR adds/removes a feature flag & I've updated [this doc](https://github.com/woocommerce/woocommerce-blocks/blob/trunk/docs/internal-developers/blocks/feature-flags-and-experimental-interfaces.md).
-- [ ] This PR adds/removes an experimental interfaces and I've updated [this doc](https://github.com/woocommerce/woocommerce-blocks/blob/trunk/docs/internal-developers/blocks/feature-flags-and-experimental-interfaces.md).
-- [ ] I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.
-
-### Screenshots
-
-<!-- If your change has a visual component, add a screenshot here. A "before" screenshot would also be helpful. -->
-
-| Before | After |
-| ------ | ----- |
-|        |       |
-
-### Testing
-
-#### Automated Tests
-* [ ] Changes in this PR are covered by Automated Tests.
-  * [ ] Unit tests
-  * [ ] E2E tests
-
-#### User Facing Testing
+## Testing Instructions
 
 <!-- Write these steps from the perspective of a "user" (merchant) familiar with WooCommerce. No need to spell out the steps for common setup scenarios (eg. "Create a product"), but do be specific about the thing being tested. Include screenshots demonstrating expectations where that will be helpful. -->
 
+_Please consider any edge cases this change may have, and also other areas of the product this may impact._
+
 1.
 2.
 3.
 
 * [ ] Do not include in the Testing Notes <!-- Check this box if this PR can't be tested (ie: it makes changes to tests, coding standards, docblocks, etc.). -->
 * [ ] Should be tested by the development team exclusively <!-- Check this box if this PR should be tested by the development team exclusively (ie: it doesn't include user-facing changes or it can't be tested without manually modifying the code). -->
 
-### WooCommerce Visibility
+## Screenshots or screencast
+
+<!-- Any screenshots of UI changes will be helpful to include here. Leave blank if not applicable. -->
+
+| Before | After |
+| ------ | ----- |
+|        |       |
 
-<!-- Check this [this doc](../docs/blocks/feature-flags-and-experimental-interfaces.md) to see if the change is visible in WC core or not (part of the feature plugin or experimental)-->
+## WooCommerce Visibility
+
+<!-- Check this documentation link (../docs/blocks/feature-flags-and-experimental-interfaces.md) to see if the change is visible in WooCommerce core, part of the feature plugin, or experimental. -->
+Required:
 
 * [ ] WooCommerce Core
 * [ ] Feature plugin
 * [ ] Experimental
+* [ ] N/A
+
+## Checklist
 
-### Performance Impact
+Required:
+* [ ] This PR has either a `[type]` label or a `[skip-changelog]` label.
+* [ ] This PR is assigned to a milestone.
 
-<!-- Please document any known performance impact (positive or negative) here. If negative, provide some rationale for why this is an okay tradeoff or how this will be addressed. -->
+Conditional:
+* [ ] This PR has a changelog description (if `[skip-changelog]` label is not present).
+* [ ] This PR adds/removes a feature flag & I've updated [this doc](https://github.com/woocommerce/woocommerce-blocks/blob/trunk/docs/internal-developers/blocks/feature-flags-and-experimental-interfaces.md).
+* [ ] This PR adds/removes an experimental interfaces, and I've updated [this doc](https://github.com/woocommerce/woocommerce-blocks/blob/trunk/docs/internal-developers/blocks/feature-flags-and-experimental-interfaces.md).
+* [ ] This PR has been accessibility tested.
+* [ ] This PR has had any necessary documentation added/updated.
 
-### Changelog
+## Changelog
+<!-- Provide a brief, descriptive summary of the changes in this PR. Include potential impacts on different parts of the product. Example: "Updated the checkout process to streamline the experience for users and reduce the number of steps." -->
 
 > Add suggested changelog entry here.

.github/release-initial-checklist.md

@@ -81,7 +81,7 @@ Each porter is responsible for testing the PRs that fall under the focus of thei
 
 ## After Workflow completes
 
--   [ ] Port to `trunk` the changes to the changelog, testing steps and required versions that you did in the previous steps. You can do so copy-and-pasting the changes in a new commit directly to `trunk`, or cherry-picking the commits that introduced those changes.
+-   [ ] Move the changes to the changelog, testing steps and required versions that you did in the previous steps to `trunk`. You can do so copy-and-pasting the changes in a new commit directly to `trunk`, or cherry-picking the commits that introduced those changes.
 -   [ ] Run `npm run change-versions` to update the version in `trunk` to the next version of the plugin and include the `dev` suffix. For example, if you released 2.5.0, you should update the version in `trunk` to 2.6.0-dev.
 -   [ ] Update the schedules p2 with the shipped date for the release (PdToLP-K-p2).
 -   [ ] Edit the GitHub milestone of the release you just shipped and add the current date as the due date (this is used to track ship date as well).

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

@@ -153,6 +153,7 @@ jobs:
         env:
           WOOCOMMERCE_BLOCKS_PHASE: 3
         run: |
+          node ./bin/wp-env-with-wp-622.js
           npm run wp-env start
           npm run wp-env:config && npx cross-env NODE_CONFIG_DIR=tests/e2e-jest/config wp-scripts test-e2e --config tests/e2e-jest/config/jest.config.js --listTests > ~/.jest-e2e-tests
           npx cross-env JEST_PUPPETEER_CONFIG=tests/e2e-jest/config/jest-puppeteer.config.js cross-env NODE_CONFIG_DIR=tests/e2e-jest/config wp-scripts test-e2e --config tests/e2e-jest/config/jest.config.js --runInBand --runTestsByPath $( awk 'NR % 5 == ${{ matrix.part }} - 1' < ~/.jest-e2e-tests )

.github/workflows/playwright.yml

@@ -7,20 +7,40 @@ on:
 jobs:
   PlaywrightE2ETests:
 
-    name: Playwright E2E tests
+    name: Playwright E2E tests - ${{ matrix.config.name }}
     timeout-minutes: 60
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        config: [
+          { name: Normal, file: playwright.config.ts, resultPath: test-results },
+          { name: SideEffects, file: playwright.side-effects.config.ts, resultPath: test-results-side-effects },
+        ]
     steps:
 
       - uses: actions/checkout@v3
 
+      - name: Cache node_modules
+        id: cache-node-modules
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-node-modules
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-modified-build-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-modified-build-${{ env.cache-name }}-
+            ${{ runner.os }}-modified-build-
+            ${{ runner.os }}-modified-
+
       - name: Setup node version and npm cache
         uses: actions/setup-node@v3
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'
 
       - name: Install Node dependencies
+        if: steps.cache-node-modules.outputs.cache-hit != 'true'
         run: npm ci
 
       - name: Build Assets
@@ -37,7 +57,8 @@ jobs:
         with:
           path: ${{ steps.composer-cache.outputs.dir }}
           key: ${{ runner.os }}-composer-${{ hashFiles('**/composer.lock') }}
-          restore-keys: ${{ runner.os }}-composer-
+          restore-keys: |
+            ${{ runner.os }}-composer-
 
       - name: Set up PHP
         uses: shivammathur/setup-php@v2
@@ -52,18 +73,17 @@ jobs:
       - name: Install Playwright
         run: npx playwright install --with-deps
 
-
       - name: Load wp-env
         run: npm run env:start
 
       - name: Run Playwright tests
-        run: npm run test:e2e
+        run: npm run test:e2e -- --config=tests/e2e/${{ matrix.config.file }}
 
       - uses: actions/upload-artifact@v3
         if: ${{ failure() }}
 
         with:
-          name: playwright-report
-          path: artifacts/test-results
+          name: playwright-report-${{ matrix.config.name }}
+          path: artifacts/${{ matrix.config.resultPath }}
           if-no-files-found: error # 'warn' or 'ignore' are also available, defaults to `warn`
 

.wp-env.json

@@ -1,5 +1,5 @@
 {
-	"core": "WordPress/WordPress#6.2.2",
+	"core": null,
 	"plugins": [
 		"https://downloads.wordpress.org/plugin/woocommerce.latest-stable.zip",
 		"https://github.com/WP-API/Basic-Auth/archive/master.zip",
@@ -14,7 +14,8 @@
 				"wp-content/plugins/gutenberg-test-plugins": "./node_modules/@wordpress/e2e-tests/plugins",
 				"wp-content/plugins/woocommerce-blocks": ".",
 				"wp-content/plugins/woocommerce-gutenberg-products-block": ".",
-				"wp-cli.yml": "./wp-cli.yml"
+				"wp-cli.yml": "./wp-cli.yml",
+				"custom-plugins" : "./tests/e2e/mocks/custom-plugins"
 			}
 		}
 	},

assets/css/editor.scss

@@ -8,6 +8,10 @@
 
 			.wc-block-grid__product {
 				margin: 0 0 $gap-large 0;
+
+				.wc-block-grid__product-onsale {
+					position: absolute;
+				}
 			}
 		}
 

assets/css/style.scss

@@ -139,7 +139,8 @@
 		}
 	}
 }
-.wc-block-grid__product-onsale {
+.wc-block-grid__product-image .wc-block-grid__product-onsale,
+.wc-block-grid .wc-block-grid__product-onsale {
 	@include font-size(small);
 	padding: em($gap-smallest) em($gap-small);
 	display: inline-block;

assets/js/atomic/blocks/product-elements/button/block.json

@@ -34,6 +34,7 @@
 			"background": false,
 			"link": true
 		},
+		"interactivity": true,
 		"html": false,
 		"typography": {
 			"fontSize": true,
@@ -57,6 +58,9 @@
 			"label": "Outline"
 		}
 	],
+	"viewScript": [
+		"wc-product-button-interactivity-frontend"
+	],
 	"apiVersion": 2,
 	"$schema": "https://schemas.wp.org/trunk/block.json"
 }