Merge branch 'trunk' into fix/use-forced-layout

.github/dependabot.yml

@@ -0,0 +1,23 @@
+# Basic set up for three package managers
+
+version: 2
+updates:
+    - package-ecosystem: 'github-actions'
+      directory: '/'
+      schedule:
+          interval: 'monthly'
+      open-pull-requests-limit: 10
+
+      # Maintain dependencies for npm
+    - package-ecosystem: 'npm'
+      directory: '/'
+      schedule:
+          interval: 'weekly'
+      open-pull-requests-limit: 10
+
+      # Maintain dependencies for Composer
+    - package-ecosystem: 'composer'
+      directory: '/'
+      schedule:
+          interval: 'weekly'
+      open-pull-requests-limit: 10

.github/release-initial-checklist.md

@@ -6,7 +6,7 @@ The release pull request has been created! This checklist is a guide to follow f
 
 * [ ] Close the milestone of the release you are going to ship. That will prevent newly approved PRs to be automatically assigned to that milestone.
 * [ ] Create a milestone for the next version.
-* [ ] Check that the release automation correctly added the changelog to `readme.txt`
+* [ ] Manually add the changelog entries of all affected PRs to `readme.txt`. (Technically, this should be an automated process, but it seems to broke recently. Please change this entry back, once the automated process works again.)
 * [ ] Ensure you pull your changes from the remote, since GitHub Actions will have added new commits to the branch.
   * [ ] Check the version and date in the changelog section within `readme.txt`, e.g. `= {{version}} - YYYY-MM-DD =`
   * [ ] Check the changelog matches the one in the pull request description above.

.github/workflows/flaky-tests.yml

@@ -0,0 +1,38 @@
+name: Report Flaky Tests
+
+on:
+    workflow_run:
+        workflows: ['E2E tests']
+        types:
+            - completed
+
+jobs:
+    report-to-issues:
+        name: Report to GitHub issues
+        runs-on: ubuntu-latest
+        if: ${{ github.event.workflow_run.conclusion == 'success' }}
+        steps:
+            # Checkout defaults to using the branch which triggered the event, which
+            # isn't necessarily `trunk` (e.g. in the case of a merge).
+            - uses: actions/checkout@v3
+              with:
+                  repository: WordPress/gutenberg
+                  ref: trunk
+
+            - name: Use desired version of NodeJS
+              uses: actions/setup-node@5b52f097d36d4b0b2f94ed6de710023fbb8b2236 # v3.1.0
+              with:
+                  node-version-file: '.nvmrc'
+                  cache: npm
+
+            - name: Npm install and build
+              # TODO: We don't have to build the entire project, just the action itself.
+              run: |
+                  npm ci
+                  npm run build:packages
+            - name: Report flaky tests
+              uses: ./packages/report-flaky-tests
+              with:
+                  repo-token: '${{ secrets.GITHUB_TOKEN }}'
+                  label: 'type: flaky test'
+                  artifact-name-prefix: flaky-tests-report

.github/workflows/generate-zip.yml

@@ -0,0 +1,63 @@
+name: Generate ZIP file
+
+on: [pull_request]
+
+jobs:
+  generate-zip-file:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        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 }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+
+      - 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 --no-optional
+
+      - name: Generate ZIP file
+        run: npm run package-plugin:deploy
+
+      - name: Create temp folder
+        run: mkdir wc-blocks-pr-release__temp
+
+      - name: Rename and move ZIP file
+        run: mv woocommerce-gutenberg-products-block.zip wc-blocks-pr-release__temp/woocommerce-gutenberg-products-block-${{ github.event.pull_request.number }}.zip
+
+      - name: Transfer ZIP file via SFTP
+        uses: AbleLincoln/[email protected]
+        with:
+          host: ${{ secrets.FTP_HOST }}
+          port: 22
+          username: ${{ secrets.FTP_USER }}
+          password: ${{ secrets.FTP_PASS }}
+          sourceDir: ./wc-blocks-pr-release__temp/
+          targetDir: ${{ secrets.FTP_DIR }}
+
+      - name: Add release ZIP URL as comment to the PR
+        uses: mshick/add-pr-comment@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          message: |
+            The release ZIP for this PR is accessible via:
+            ```
+            https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-${{ github.event.pull_request.number }}.zip
+            ```
+          allow-repeats: true
+
+      - name: Delete ZIP file
+        run: rm -rf wc-blocks-pr-release__temp

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

@@ -7,6 +7,10 @@ on:
 
 jobs:
     JSE2EWithGutenberg:
+        strategy:
+            fail-fast: false
+            matrix:
+                part: [1, 2, 3, 4, 5]
         name: JavaScript E2E Tests (WP latest with Gutenberg plugin)
         runs-on: ubuntu-latest
         steps:
@@ -62,19 +66,32 @@ jobs:
                   WOOCOMMERCE_BLOCKS_PHASE: 3
                   GUTENBERG_EDITOR_CONTEXT: 'gutenberg'
               run: |
-                  chmod -R 767 ./ #needed for permissions issues
                   node ./bin/wp-env-with-gutenberg.js
                   npm run wp-env start
-                  npm run wp-env clean all
-                  npm run test:e2e
+                  npm run wp-env:config && npx cross-env NODE_CONFIG_DIR=tests/e2e/config wp-scripts test-e2e --config tests/e2e/config/jest.config.js --listTests > ~/.jest-e2e-tests
+                  npx cross-env JEST_PUPPETEER_CONFIG=tests/e2e/config/jest-puppeteer.config.js cross-env NODE_CONFIG_DIR=tests/e2e/config wp-scripts test-e2e --config tests/e2e/config/jest.config.js --runInBand --runTestsByPath $( awk 'NR % 5 == ${{ matrix.part }} - 1' < ~/.jest-e2e-tests )
+
             - name: Upload artifacts on failure
               if: ${{ failure() }}
               uses: actions/upload-artifact@v3
               with:
-                  name: e2e-with-gutenberg-test-report
+                  name: e2e-with-gutenberg-test-report-${{matrix.part}}
                   path: reports/e2e
+
+            - name: Archive flaky tests report
+              uses: actions/upload-artifact@e448a9b857ee2131e752b06002bf0e093c65e571 # v2.2.2
+              if: always()
+              with:
+                  name: flaky-tests-report-${{ matrix.part }}
+                  path: flaky-tests
+                  if-no-files-found: ignore
+
     JSE2ETests:
         name: JavaScript E2E Tests (latest)
+        strategy:
+            fail-fast: false
+            matrix:
+                part: [1, 2, 3, 4, 5]
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v3
@@ -131,12 +148,20 @@ jobs:
                   WOOCOMMERCE_BLOCKS_PHASE: 3
               run: |
                   npm run wp-env start
-                  npm run wp-env clean all
-                  npm run test:e2e
+                  npm run wp-env:config && npx cross-env NODE_CONFIG_DIR=tests/e2e/config wp-scripts test-e2e --config tests/e2e/config/jest.config.js --listTests > ~/.jest-e2e-tests
+                  npx cross-env JEST_PUPPETEER_CONFIG=tests/e2e/config/jest-puppeteer.config.js cross-env NODE_CONFIG_DIR=tests/e2e/config wp-scripts test-e2e --config tests/e2e/config/jest.config.js --runInBand --runTestsByPath $( awk 'NR % 5 == ${{ matrix.part }} - 1' < ~/.jest-e2e-tests )
 
             - name: Upload artifacts on failure
               if: ${{ failure() }}
               uses: actions/upload-artifact@v3
               with:
-                  name: e2e-test-report
+                  name: e2e-test-report-${{matrix.part}}
                   path: reports/e2e
+
+            - name: Archive flaky tests report
+              uses: actions/upload-artifact@e448a9b857ee2131e752b06002bf0e093c65e571 # v2.2.2
+              if: always()
+              with:
+                  name: flaky-tests-report-${{ matrix.part }}
+                  path: flaky-tests
+                  if-no-files-found: ignore

.prettierignore

@@ -1 +1,2 @@
 *.scss
+*.yml

assets/js/base/components/button/style.scss

@@ -57,9 +57,12 @@
 
 	&.outlined {
 		background-color: transparent;
-		box-shadow: inset 0 0 0 1px $gray-900;
 		color: $gray-900;
 
+		&:not(:focus) {
+			box-shadow: inset 0 0 0 1px $gray-900;
+		}
+
 		&:disabled,
 		&:hover,
 		&:focus,

assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss

@@ -1,4 +1,9 @@
 .wc-block-components-shipping-rates-control__package {
+	margin-bottom: $gap-larger;
+
+	&:last-child {
+		margin-bottom: 0;
+	}
 
 	.wc-block-components-panel__button {
 		margin-bottom: 0;

assets/js/base/components/cart-checkout/shipping-rates-control/index.tsx

@@ -65,7 +65,9 @@ const Packages = ( {
 					packageData={ packageData }
 					collapsible={ collapsible }
 					collapse={ collapse }
-					showItems={ showItems }
+					showItems={
+						showItems || packageData?.shipping_rates?.length > 1
+					}
 					noResultsMessage={ noResultsMessage }
 					renderOption={ renderOption }
 				/>

assets/js/base/context/hooks/shipping/use-shipping-data.ts

@@ -9,6 +9,7 @@ import { useEffect, useRef } from '@wordpress/element';
 import { deriveSelectedShippingRates } from '@woocommerce/base-utils';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 import { isObject } from '@woocommerce/types';
+import { previewCart } from '@woocommerce/resource-previews';
 
 /**
  * Internal dependencies
@@ -30,12 +31,19 @@ export const useShippingData = (): ShippingData => {
 		hasCalculatedShipping,
 		isLoadingRates,
 	} = useSelect( ( select ) => {
+		const isEditor = !! select( 'core/editor' );
 		const store = select( storeKey );
 		return {
-			shippingRates: store.getShippingRates(),
-			needsShipping: store.getNeedsShipping(),
-			hasCalculatedShipping: store.getHasCalculatedShipping(),
-			isLoadingRates: store.isCustomerDataUpdating(),
+			shippingRates: isEditor
+				? previewCart.shipping_rates
+				: store.getShippingRates(),
+			needsShipping: isEditor
+				? previewCart.needs_shipping
+				: store.getNeedsShipping(),
+			hasCalculatedShipping: isEditor
+				? previewCart.needs_shipping
+				: store.getHasCalculatedShipping(),
+			isLoadingRates: isEditor ? false : store.isCustomerDataUpdating(),
 		};
 	} );
 	const { isSelectingRate, selectShippingRate } = useSelectShippingRate();

assets/js/blocks/active-filters/active-attribute-filters.tsx

@@ -101,33 +101,33 @@ const ActiveAttributeFilters = ( {
 						name: decodeEntities( termObject.name || slug ),
 						prefix,
 						removeCallback: () => {
-							if ( filteringForPhpTemplate ) {
-								const currentAttribute = productAttributes.find(
-									( { attribute } ) =>
-										attribute ===
-										`pa_${ attributeObject.name }`
-								);
-
-								// If only one attribute was selected, we remove both filter and query type from the URL.
-								if ( currentAttribute?.slug.length === 1 ) {
-									return removeArgsFromFilterUrl(
-										`query_type_${ attributeObject.name }`,
-										`filter_${ attributeObject.name }`
-									);
-								}
+							const currentAttribute = productAttributes.find(
+								( { attribute } ) =>
+									attribute === `pa_${ attributeObject.name }`
+							);
 
+							// If only one attribute was selected, we remove both filter and query type from the URL.
+							if ( currentAttribute?.slug.length === 1 ) {
+								removeArgsFromFilterUrl(
+									`query_type_${ attributeObject.name }`,
+									`filter_${ attributeObject.name }`
+								);
+							} else {
 								// Remove only the slug from the URL.
-								return removeArgsFromFilterUrl( {
+								removeArgsFromFilterUrl( {
 									[ `filter_${ attributeObject.name }` ]:
 										slug,
 								} );
 							}
-							removeAttributeFilterBySlug(
-								productAttributes,
-								setProductAttributes,
-								attributeObject,
-								slug
-							);
+
+							if ( ! filteringForPhpTemplate ) {
+								removeAttributeFilterBySlug(
+									productAttributes,
+									setProductAttributes,
+									attributeObject,
+									slug
+								);
+							}
 						},
 						showLabel: false,
 						displayStyle,

assets/js/blocks/active-filters/block.tsx

@@ -76,17 +76,17 @@ const ActiveFiltersBlock = ( {
 				type: __( 'Stock Status', 'woo-gutenberg-products-block' ),
 				name: STOCK_STATUS_OPTIONS[ slug ],
 				removeCallback: () => {
-					if ( filteringForPhpTemplate ) {
-						return removeArgsFromFilterUrl( {
-							filter_stock_status: slug,
-						} );
+					removeArgsFromFilterUrl( {
+						filter_stock_status: slug,
+					} );
+					if ( ! filteringForPhpTemplate ) {
+						const newStatuses = productStockStatus.filter(
+							( status ) => {
+								return status !== slug;
+							}
+						);
+						setProductStockStatus( newStatuses );
 					}
-					const newStatuses = productStockStatus.filter(
-						( status ) => {
-							return status !== slug;
-						}
-					);
-					setProductStockStatus( newStatuses );
 				},
 				displayStyle: blockAttributes.displayStyle,
 			} );
@@ -107,11 +107,11 @@ const ActiveFiltersBlock = ( {
 			type: __( 'Price', 'woo-gutenberg-products-block' ),
 			name: formatPriceRange( minPrice, maxPrice ),
 			removeCallback: () => {
-				if ( filteringForPhpTemplate ) {
-					return removeArgsFromFilterUrl( 'max_price', 'min_price' );
+				removeArgsFromFilterUrl( 'max_price', 'min_price' );
+				if ( ! filteringForPhpTemplate ) {
+					setMinPrice( undefined );
+					setMaxPrice( undefined );
 				}
-				setMinPrice( undefined );
-				setMaxPrice( undefined );
 			},
 			displayStyle: blockAttributes.displayStyle,
 		} );
@@ -289,13 +289,13 @@ const ActiveFiltersBlock = ( {
 				<button
 					className="wc-block-active-filters__clear-all"
 					onClick={ () => {
-						if ( filteringForPhpTemplate ) {
-							return cleanFilterUrl();
+						cleanFilterUrl();
+						if ( ! filteringForPhpTemplate ) {
+							setMinPrice( undefined );
+							setMaxPrice( undefined );
+							setProductAttributes( [] );
+							setProductStockStatus( [] );
 						}
-						setMinPrice( undefined );
-						setMaxPrice( undefined );
-						setProductAttributes( [] );
-						setProductStockStatus( [] );
 					} }
 				>
 					<Label