diff --git a/.eslintrc.js b/.eslintrc.js index dc20ccdcdf7..9e126556193 100644 --- a/.eslintrc.js +++ b/.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', diff --git a/.github/patch-initial-checklist.md b/.github/patch-initial-checklist.md index c1ef0ce8557..3e1453fbe6e 100644 --- a/.github/patch-initial-checklist.md +++ b/.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). diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 77dcfbddef5..77f23181e58 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -1,47 +1,19 @@ - + - +## What Fixes # - - +## Why -#### Accessibility + - - -- [ ] 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 - - - -| Before | After | -| ------ | ----- | -| | | - -### Testing - -#### Automated Tests -* [ ] Changes in this PR are covered by Automated Tests. - * [ ] Unit tests - * [ ] E2E tests - -#### User Facing Testing +## Testing Instructions +_Please consider any edge cases this change may have, and also other areas of the product this may impact._ + 1. 2. 3. @@ -49,18 +21,38 @@ Fixes # * [ ] Do not include in the Testing Notes * [ ] Should be tested by the development team exclusively -### WooCommerce Visibility +## Screenshots or screencast + + + +| Before | After | +| ------ | ----- | +| | | - +## WooCommerce Visibility + + +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. - +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 + > Add suggested changelog entry here. diff --git a/.github/release-initial-checklist.md b/.github/release-initial-checklist.md index 1c64ff15f77..958a8bc038e 100644 --- a/.github/release-initial-checklist.md +++ b/.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). diff --git a/.github/workflows/php-js-e2e-tests.yml b/.github/workflows/php-js-e2e-tests.yml index 157d3e00244..3000500b053 100644 --- a/.github/workflows/php-js-e2e-tests.yml +++ b/.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 ) diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml index 5410fe1e3ae..db56521ef34 100644 --- a/.github/workflows/playwright.yml +++ b/.github/workflows/playwright.yml @@ -7,13 +7,32 @@ 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: @@ -21,6 +40,7 @@ jobs: 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` diff --git a/.wordpress-org/banner-1544x500.png b/.wordpress-org/banner-1544x500.png index 0571083ad86..3a83246f164 100644 Binary files a/.wordpress-org/banner-1544x500.png and b/.wordpress-org/banner-1544x500.png differ diff --git a/.wordpress-org/banner-772x250.png b/.wordpress-org/banner-772x250.png index 0ca87162671..b932f21dd77 100644 Binary files a/.wordpress-org/banner-772x250.png and b/.wordpress-org/banner-772x250.png differ diff --git a/.wordpress-org/icon-128x128.png b/.wordpress-org/icon-128x128.png index 26530882c0c..6d5a0f50715 100644 Binary files a/.wordpress-org/icon-128x128.png and b/.wordpress-org/icon-128x128.png differ diff --git a/.wordpress-org/icon-256x256.png b/.wordpress-org/icon-256x256.png index 127951966e6..1ff4a1d6106 100644 Binary files a/.wordpress-org/icon-256x256.png and b/.wordpress-org/icon-256x256.png differ diff --git a/.wp-env.json b/.wp-env.json index 14c1c790faa..d290c174e0d 100644 --- a/.wp-env.json +++ b/.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" } } }, diff --git a/assets/css/editor.scss b/assets/css/editor.scss index 8ed065aded1..b721f90811c 100644 --- a/assets/css/editor.scss +++ b/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; + } } } diff --git a/assets/css/style.scss b/assets/css/style.scss index c1f78af42f6..f024fe53caf 100644 --- a/assets/css/style.scss +++ b/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; diff --git a/assets/js/atomic/blocks/product-elements/button/block.json b/assets/js/atomic/blocks/product-elements/button/block.json index 62f1889af91..c69913bdee2 100644 --- a/assets/js/atomic/blocks/product-elements/button/block.json +++ b/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" } diff --git a/assets/js/atomic/blocks/product-elements/button/frontend.tsx b/assets/js/atomic/blocks/product-elements/button/frontend.tsx new file mode 100644 index 00000000000..9f1c8bc995d --- /dev/null +++ b/assets/js/atomic/blocks/product-elements/button/frontend.tsx @@ -0,0 +1,279 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +/** + * External dependencies + */ +import { CART_STORE_KEY as storeKey } from '@woocommerce/block-data'; +import { store as interactivityStore } from '@woocommerce/interactivity'; +import { dispatch, select, subscribe } from '@wordpress/data'; +import { Cart } from '@woocommerce/type-defs/cart'; +import { createRoot } from '@wordpress/element'; +import NoticeBanner from '@woocommerce/base-components/notice-banner'; + +type Context = { + woocommerce: { + isLoading: boolean; + addToCartText: string; + productId: number; + displayViewCart: boolean; + quantityToAdd: number; + temporaryNumberOfItems: number; + animationStatus: AnimationStatus; + }; +}; + +enum AnimationStatus { + IDLE = 'IDLE', + SLIDE_OUT = 'SLIDE-OUT', + SLIDE_IN = 'SLIDE-IN', +} + +type State = { + woocommerce: { + cart: Cart | undefined; + inTheCartText: string; + }; +}; + +type Store = { + state: State; + context: Context; + selectors: any; + ref: HTMLElement; +}; + +const storeNoticeClass = '.wc-block-store-notices'; + +const createNoticeContainer = () => { + const noticeContainer = document.createElement( 'div' ); + noticeContainer.classList.add( storeNoticeClass.replace( '.', '' ) ); + return noticeContainer; +}; + +const injectNotice = ( domNode: Element, errorMessage: string ) => { + const root = createRoot( domNode ); + + root.render( + root.unmount() }> + { errorMessage } + + ); + + domNode?.scrollIntoView( { + behavior: 'smooth', + inline: 'nearest', + } ); +}; + +const getProductById = ( cartState: Cart | undefined, productId: number ) => { + return cartState?.items.find( ( item ) => item.id === productId ); +}; + +const getTextButton = ( { + addToCartText, + inTheCartText, + numberOfItems, +}: { + addToCartText: string; + inTheCartText: string; + numberOfItems: number; +} ) => { + if ( numberOfItems === 0 ) { + return addToCartText; + } + return inTheCartText.replace( '###', numberOfItems.toString() ); +}; + +const productButtonSelectors = { + woocommerce: { + addToCartText: ( store: Store ) => { + const { context, state, selectors } = store; + + // We use the temporary number of items when there's no animation, or the + // second part of the animation hasn't started. + if ( + context.woocommerce.animationStatus === AnimationStatus.IDLE || + context.woocommerce.animationStatus === + AnimationStatus.SLIDE_OUT + ) { + return getTextButton( { + addToCartText: context.woocommerce.addToCartText, + inTheCartText: state.woocommerce.inTheCartText, + numberOfItems: context.woocommerce.temporaryNumberOfItems, + } ); + } + + return getTextButton( { + addToCartText: context.woocommerce.addToCartText, + inTheCartText: state.woocommerce.inTheCartText, + numberOfItems: + selectors.woocommerce.numberOfItemsInTheCart( store ), + } ); + }, + displayViewCart: ( store: Store ) => { + const { context, selectors } = store; + if ( ! context.woocommerce.displayViewCart ) return false; + if ( ! selectors.woocommerce.hasCartLoaded( store ) ) { + return context.woocommerce.temporaryNumberOfItems > 0; + } + return selectors.woocommerce.numberOfItemsInTheCart( store ) > 0; + }, + hasCartLoaded: ( { state }: { state: State } ) => { + return state.woocommerce.cart !== undefined; + }, + numberOfItemsInTheCart: ( { state, context }: Store ) => { + const product = getProductById( + state.woocommerce.cart, + context.woocommerce.productId + ); + return product?.quantity || 0; + }, + slideOutAnimation: ( { context }: Store ) => + context.woocommerce.animationStatus === AnimationStatus.SLIDE_OUT, + slideInAnimation: ( { context }: Store ) => + context.woocommerce.animationStatus === AnimationStatus.SLIDE_IN, + }, +}; + +interactivityStore( + // @ts-expect-error: Store function isn't typed. + { + selectors: productButtonSelectors, + actions: { + woocommerce: { + addToCart: async ( store: Store ) => { + const { context, selectors, ref } = store; + + if ( ! ref.classList.contains( 'ajax_add_to_cart' ) ) { + return; + } + + context.woocommerce.isLoading = true; + + // Allow 3rd parties to validate and quit early. + // https://github.com/woocommerce/woocommerce/blob/154dd236499d8a440edf3cde712511b56baa8e45/plugins/woocommerce/client/legacy/js/frontend/add-to-cart.js/#L74-L77 + const event = new CustomEvent( + 'should_send_ajax_request.adding_to_cart', + { detail: [ ref ], cancelable: true } + ); + const shouldSendRequest = + document.body.dispatchEvent( event ); + + if ( shouldSendRequest === false ) { + const ajaxNotSentEvent = new CustomEvent( + 'ajax_request_not_sent.adding_to_cart', + { detail: [ false, false, ref ] } + ); + document.body.dispatchEvent( ajaxNotSentEvent ); + return true; + } + + try { + await dispatch( storeKey ).addItemToCart( + context.woocommerce.productId, + context.woocommerce.quantityToAdd + ); + + // After the cart has been updated, sync the temporary number of + // items again. + context.woocommerce.temporaryNumberOfItems = + selectors.woocommerce.numberOfItemsInTheCart( + store + ); + } catch ( error ) { + const storeNoticeBlock = + document.querySelector( storeNoticeClass ); + + if ( ! storeNoticeBlock ) { + document + .querySelector( '.entry-content' ) + ?.prepend( createNoticeContainer() ); + } + + const domNode = + storeNoticeBlock ?? + document.querySelector( storeNoticeClass ); + + if ( domNode ) { + injectNotice( domNode, error.message ); + } + + // We don't care about errors blocking execution, but will + // console.error for troubleshooting. + // eslint-disable-next-line no-console + console.error( error ); + } finally { + context.woocommerce.displayViewCart = true; + context.woocommerce.isLoading = false; + } + }, + handleAnimationEnd: ( + store: Store & { event: AnimationEvent } + ) => { + const { event, context, selectors } = store; + if ( event.animationName === 'slideOut' ) { + // When the first part of the animation (slide-out) ends, we move + // to the second part (slide-in). + context.woocommerce.animationStatus = + AnimationStatus.SLIDE_IN; + } else if ( event.animationName === 'slideIn' ) { + // When the second part of the animation ends, we update the + // temporary number of items to sync it with the cart and reset the + // animation status so it can be triggered again. + context.woocommerce.temporaryNumberOfItems = + selectors.woocommerce.numberOfItemsInTheCart( + store + ); + context.woocommerce.animationStatus = + AnimationStatus.IDLE; + } + }, + }, + }, + effects: { + woocommerce: { + startAnimation: ( store: Store ) => { + const { context, selectors } = store; + // We start the animation if the cart has loaded, the temporary number + // of items is out of sync with the number of items in the cart, the + // button is not loading (because that means the user started the + // interaction) and the animation hasn't started yet. + if ( + selectors.woocommerce.hasCartLoaded( store ) && + context.woocommerce.temporaryNumberOfItems !== + selectors.woocommerce.numberOfItemsInTheCart( + store + ) && + ! context.woocommerce.isLoading && + context.woocommerce.animationStatus === + AnimationStatus.IDLE + ) { + context.woocommerce.animationStatus = + AnimationStatus.SLIDE_OUT; + } + }, + }, + }, + }, + { + afterLoad: ( store: Store ) => { + const { state, selectors } = store; + // Subscribe to changes in Cart data. + subscribe( () => { + const cartData = select( storeKey ).getCartData(); + const isResolutionFinished = + select( storeKey ).hasFinishedResolution( 'getCartData' ); + if ( isResolutionFinished ) { + state.woocommerce.cart = cartData; + } + }, storeKey ); + + // This selector triggers a fetch of the Cart data. It is done in a + // `requestIdleCallback` to avoid potential performance issues. + requestIdleCallback( () => { + if ( ! selectors.woocommerce.hasCartLoaded( store ) ) { + select( storeKey ).getCartData(); + } + } ); + }, + } +); diff --git a/assets/js/atomic/blocks/product-elements/button/style.scss b/assets/js/atomic/blocks/product-elements/button/style.scss index e0b95ed385e..6bcdaaf834d 100644 --- a/assets/js/atomic/blocks/product-elements/button/style.scss +++ b/assets/js/atomic/blocks/product-elements/button/style.scss @@ -1,15 +1,78 @@ .wp-block-button.wc-block-components-product-button { word-break: break-word; white-space: normal; + display: flex; + justify-content: center; + align-items: center; + gap: $gap-small; + + .wp-block-button__link { + word-break: break-word; + white-space: normal; + display: inline-flex; + justify-content: center; + text-align: center; + // Set button font size and padding so it inherits from parent. + padding: 0.5em 1em; + font-size: 1em; + + &.loading { + opacity: 0.25; + } + + &.loading::after { + font-family: WooCommerce; /* stylelint-disable-line */ + content: "\e031"; + animation: spin 2s linear infinite; + margin-left: 0.5em; + display: inline-block; + width: auto; + height: auto; + } + } + + a[hidden] { + display: none; + } + + @keyframes slideOut { + from { + transform: translateY(0); + } + to { + transform: translateY(-100%); + } + } + + @keyframes slideIn { + from { + transform: translateY(90%); + opacity: 0; + } + to { + transform: translate(0); + opacity: 1; + } + } .wc-block-components-product-button__button { border-style: none; display: inline-flex; justify-content: center; - margin-right: auto; - margin-left: auto; white-space: normal; word-break: break-word; + width: 150px; + overflow: hidden; + + span { + + &.wc-block-slide-out { + animation: slideOut 0.1s linear 1 normal forwards; + } + &.wc-block-slide-in { + animation: slideIn 0.1s linear 1 normal; + } + } } .wc-block-components-product-button__button--placeholder { diff --git a/assets/js/atomic/blocks/product-elements/product-details/block.json b/assets/js/atomic/blocks/product-elements/product-details/block.json index 2919a826fab..a8e95dd56ac 100644 --- a/assets/js/atomic/blocks/product-elements/product-details/block.json +++ b/assets/js/atomic/blocks/product-elements/product-details/block.json @@ -3,11 +3,14 @@ "version": "1.0.0", "icon": "info", "title": "Product Details", - "description": "Display a product’s description, attributes, and reviews.", + "description": "Display a product's description, attributes, and reviews.", "category": "woocommerce", "keywords": [ "WooCommerce" ], "supports": { - "align": true + "align": true, + "spacing": { + "margin": true + } }, "textdomain": "woo-gutenberg-products-block", "apiVersion": 2, diff --git a/assets/js/blocks/attribute-filter/edit.tsx b/assets/js/blocks/attribute-filter/edit.tsx index 8bcf54e4f75..5cf53e044bf 100644 --- a/assets/js/blocks/attribute-filter/edit.tsx +++ b/assets/js/blocks/attribute-filter/edit.tsx @@ -352,6 +352,7 @@ const Edit = ( { href={ getAdminLink( 'edit.php?post_type=product&page=product_attributes' ) } + target="_top" > { __( 'Add new attribute', 'woo-gutenberg-products-block' ) + ' ' } @@ -361,6 +362,7 @@ const Edit = ( { className="wc-block-attribute-filter__read_more_button" isTertiary href="https://docs.woocommerce.com/document/managing-product-taxonomies/" + target="_blank" > { __( 'Learn more', 'woo-gutenberg-products-block' ) } diff --git a/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss b/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss index 990809e7fac..9fac0bd0e15 100644 --- a/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss +++ b/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss @@ -5,18 +5,13 @@ $border-radius: 5px; margin: auto; position: relative; + // nested class to avoid conflict with .editor-styles-wrapper ul .wc-block-components-express-payment__event-buttons { - list-style: none; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(calc(33% - 10px), 1fr)); - grid-gap: 10px; - box-sizing: border-box; width: 100%; padding: 0; margin: 0; overflow: hidden; text-align: center; - > li { margin: 0; width: 100%; @@ -27,18 +22,23 @@ $border-radius: 5px; } } } - - @include breakpoint("<782px") { - .wc-block-components-express-payment__event-buttons { - grid-template-columns: 1fr; - } - } } .wc-block-components-express-payment--checkout { /* stylelint-disable-next-line function-calc-no-unspaced-operator */ margin-top: calc($border-radius * 3); + .wc-block-components-express-payment__event-buttons { + list-style: none; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(calc(33% - 10px), 1fr)); + grid-gap: 10px; + + @include breakpoint("<782px") { + grid-template-columns: 1fr; + } + } + .wc-block-components-express-payment__title-container { display: flex; flex-direction: row; diff --git a/assets/js/blocks/migration-products-to-product-collection/constants.ts b/assets/js/blocks/migration-products-to-product-collection/constants.ts new file mode 100644 index 00000000000..2f68b429ecf --- /dev/null +++ b/assets/js/blocks/migration-products-to-product-collection/constants.ts @@ -0,0 +1,19 @@ +/** + * Internal dependencies + */ +import type { UpgradeNoticeStatus, UpgradeNoticeStatuses } from './types'; + +export const AUTO_REPLACE_PRODUCTS_WITH_PRODUCT_COLLECTION = false; +export const MANUAL_REPLACE_PRODUCTS_WITH_PRODUCT_COLLECTION = false; +export const HOURS_TO_DISPLAY_UPGRADE_NOTICE = 72; +export const UPGRADE_NOTICE_DISPLAY_COUNT_THRESHOLD = 4; +export const MIGRATION_STATUS_LS_KEY = + 'wc-blocks_upgraded-products-to-product-collection'; +// Initial status used in the localStorage +export const INITIAL_STATUS_LS_VALUE: UpgradeNoticeStatuses = 'notseen'; + +export const getInitialStatusLSValue: () => UpgradeNoticeStatus = () => ( { + status: INITIAL_STATUS_LS_VALUE, + time: Date.now(), + displayCount: 0, +} ); diff --git a/assets/js/blocks/shared/scripts/index.tsx b/assets/js/blocks/migration-products-to-product-collection/index.ts similarity index 59% rename from assets/js/blocks/shared/scripts/index.tsx rename to assets/js/blocks/migration-products-to-product-collection/index.ts index b255b01a57d..9067c26005e 100644 --- a/assets/js/blocks/shared/scripts/index.tsx +++ b/assets/js/blocks/migration-products-to-product-collection/index.ts @@ -1,2 +1,5 @@ export * from './migration-from-products-to-product-collection'; export * from './migration-from-product-collection-to-products'; +export * from './migration-utils'; +export * from './constants'; +export * from './types'; diff --git a/assets/js/blocks/shared/scripts/migration-from-product-collection-to-products.tsx b/assets/js/blocks/migration-products-to-product-collection/migration-from-product-collection-to-products.ts similarity index 91% rename from assets/js/blocks/shared/scripts/migration-from-product-collection-to-products.tsx rename to assets/js/blocks/migration-products-to-product-collection/migration-from-product-collection-to-products.ts index 57bca80ad16..18444ae11ee 100644 --- a/assets/js/blocks/shared/scripts/migration-from-product-collection-to-products.tsx +++ b/assets/js/blocks/migration-products-to-product-collection/migration-from-product-collection-to-products.ts @@ -7,17 +7,21 @@ import { select, dispatch } from '@wordpress/data'; /** * Internal dependencies */ +import { disableAutoUpdate } from './migration-from-products-to-product-collection'; import { getProductCollectionBlockClientIds, checkIfBlockCanBeInserted, postTemplateHasSupportForGridView, - type TransformBlock, - type IsBlockType, - type ProductGridLayout, - type ProductGridLayoutTypes, - type PostTemplateLayout, - type PostTemplateLayoutTypes, + setUpgradeStatus, } from './migration-utils'; +import type { + TransformBlock, + IsBlockType, + ProductGridLayout, + ProductGridLayoutTypes, + PostTemplateLayout, + PostTemplateLayoutTypes, +} from './types'; const VARIATION_NAME = 'woocommerce/product-query'; @@ -45,6 +49,10 @@ const mapAttributes = ( attributes ) => { mappedQuery.__woocommerceOnSale = woocommerceOnSale; } + if ( taxQuery ) { + mappedQuery.taxQuery = taxQuery; + } + return { ...restAttributes, namespace: VARIATION_NAME, @@ -207,3 +215,12 @@ export const replaceProductCollectionWithProducts = () => { productCollectionBlockClientIds.map( replaceProductCollectionBlock ); }; + +export const revertMigration = () => { + disableAutoUpdate(); + setUpgradeStatus( { + status: 'reverted', + time: Date.now(), + } ); + replaceProductCollectionWithProducts(); +}; diff --git a/assets/js/blocks/shared/scripts/migration-from-products-to-product-collection.tsx b/assets/js/blocks/migration-products-to-product-collection/migration-from-products-to-product-collection.ts similarity index 82% rename from assets/js/blocks/shared/scripts/migration-from-products-to-product-collection.tsx rename to assets/js/blocks/migration-products-to-product-collection/migration-from-products-to-product-collection.ts index 2a803057442..0de18ef3e08 100644 --- a/assets/js/blocks/shared/scripts/migration-from-products-to-product-collection.tsx +++ b/assets/js/blocks/migration-products-to-product-collection/migration-from-products-to-product-collection.ts @@ -2,22 +2,31 @@ * External dependencies */ import { createBlock, BlockInstance } from '@wordpress/blocks'; -import { select, dispatch } from '@wordpress/data'; +import { select, dispatch, subscribe } from '@wordpress/data'; +import { isWpVersion } from '@woocommerce/settings'; /** * Internal dependencies */ +import { + AUTO_REPLACE_PRODUCTS_WITH_PRODUCT_COLLECTION, + getInitialStatusLSValue, +} from './constants'; import { getProductsBlockClientIds, checkIfBlockCanBeInserted, postTemplateHasSupportForGridView, - type TransformBlock, - type IsBlockType, - type ProductGridLayout, - type ProductGridLayoutTypes, - type PostTemplateLayout, - type PostTemplateLayoutTypes, + getUpgradeStatus, + setUpgradeStatus, } from './migration-utils'; +import type { + TransformBlock, + IsBlockType, + ProductGridLayout, + ProductGridLayoutTypes, + PostTemplateLayout, + PostTemplateLayoutTypes, +} from './types'; const mapAttributes = ( attributes: Record< string, unknown > ) => { const { query, namespace, ...restAttributes } = attributes; @@ -41,7 +50,7 @@ const mapAttributes = ( attributes: Record< string, unknown > ) => { isProductCollectionBlock: true, ...restQuery, }, - displayUpgradeNotice: true, + convertedFromProducts: true, }; }; @@ -194,9 +203,7 @@ const replaceProductsBlocks = ( productsBlockClientIds: string[] ) => { return !! results.length && results.every( ( result ) => !! result ); }; -export const replaceProductsWithProductCollection = ( - unsubscribe?: () => void -) => { +export const replaceProductsWithProductCollection = () => { const queryBlocksCount = select( 'core/block-editor' ).getGlobalBlockCount( 'core/query' ); if ( queryBlocksCount === 0 ) { @@ -211,10 +218,32 @@ export const replaceProductsWithProductCollection = ( return; } - const replaced = replaceProductsBlocks( productsBlockClientIds ); + replaceProductsBlocks( productsBlockClientIds ); +}; + +export const manualUpdate = () => { + setUpgradeStatus( getInitialStatusLSValue() ); + replaceProductsWithProductCollection(); +}; - if ( unsubscribe && replaced ) { - // @todo: unsubscribe on user reverting migration +let unsubscribe: ( () => void ) | undefined; +export const disableAutoUpdate = () => { + if ( unsubscribe ) { unsubscribe(); } }; +export const enableAutoUpdate = () => { + if ( isWpVersion( '6.1', '>=' ) ) { + const { status } = getUpgradeStatus(); + + if ( + AUTO_REPLACE_PRODUCTS_WITH_PRODUCT_COLLECTION && + status !== 'reverted' && + ! unsubscribe + ) { + unsubscribe = subscribe( () => { + replaceProductsWithProductCollection(); + }, 'core/block-editor' ); + } + } +}; diff --git a/assets/js/blocks/shared/scripts/migration-utils.tsx b/assets/js/blocks/migration-products-to-product-collection/migration-utils.ts similarity index 60% rename from assets/js/blocks/shared/scripts/migration-utils.tsx rename to assets/js/blocks/migration-products-to-product-collection/migration-utils.ts index 9748ab82de0..a88a0af297f 100644 --- a/assets/js/blocks/shared/scripts/migration-utils.tsx +++ b/assets/js/blocks/migration-products-to-product-collection/migration-utils.ts @@ -4,33 +4,25 @@ import { getSettingWithCoercion } from '@woocommerce/settings'; import { type BlockInstance } from '@wordpress/blocks'; import { select } from '@wordpress/data'; -import { isBoolean } from '@woocommerce/types'; +import { isBoolean, isNumber } from '@woocommerce/types'; -type GetBlocksClientIds = ( blocks: BlockInstance[] ) => string[]; -export type IsBlockType = ( block: BlockInstance ) => boolean; -export type TransformBlock = ( - block: BlockInstance, - innerBlock: BlockInstance[] -) => BlockInstance; -export type ProductGridLayoutTypes = 'flex' | 'list'; -export type PostTemplateLayoutTypes = 'grid' | 'default'; - -export type ProductGridLayout = { - type: ProductGridLayoutTypes; - columns: number; -}; - -export type PostTemplateLayout = { - type: PostTemplateLayoutTypes; - columnCount: number; -}; +/** + * Internal dependencies + */ +import { MIGRATION_STATUS_LS_KEY, getInitialStatusLSValue } from './constants'; +import type { + IsBlockType, + GetBlocksClientIds, + UpgradeNoticeStatus, +} from './types'; const isProductsBlock: IsBlockType = ( block ) => block.name === 'core/query' && block.attributes.namespace === 'woocommerce/product-query'; -const isProductCollectionBlock: IsBlockType = ( block ) => - block.name === 'woocommerce/product-collection'; +const isConvertedProductCollectionBlock: IsBlockType = ( block ) => + block.name === 'woocommerce/product-collection' && + block.attributes.convertedFromProducts; const getBlockClientIdsByPredicate = ( blocks: BlockInstance[], @@ -53,7 +45,7 @@ const getProductsBlockClientIds: GetBlocksClientIds = ( blocks ) => getBlockClientIdsByPredicate( blocks, isProductsBlock ); const getProductCollectionBlockClientIds: GetBlocksClientIds = ( blocks ) => - getBlockClientIdsByPredicate( blocks, isProductCollectionBlock ); + getBlockClientIdsByPredicate( blocks, isConvertedProductCollectionBlock ); const checkIfBlockCanBeInserted = ( clientId: string, @@ -78,9 +70,35 @@ const postTemplateHasSupportForGridView = getSettingWithCoercion( isBoolean ); +const getUpgradeStatus = (): UpgradeNoticeStatus => { + const status = window.localStorage.getItem( MIGRATION_STATUS_LS_KEY ); + return status ? JSON.parse( status ) : getInitialStatusLSValue(); +}; + +const setUpgradeStatus = ( newStatus: UpgradeNoticeStatus ) => { + window.localStorage.setItem( + MIGRATION_STATUS_LS_KEY, + JSON.stringify( newStatus ) + ); +}; + +const incrementUpgradeStatusDisplayCount = () => { + const status = getUpgradeStatus(); + const displayCount = isNumber( status.displayCount ) + ? status.displayCount + 1 + : 0; + setUpgradeStatus( { + ...status, + displayCount, + } ); +}; + export { getProductsBlockClientIds, getProductCollectionBlockClientIds, checkIfBlockCanBeInserted, postTemplateHasSupportForGridView, + getUpgradeStatus, + setUpgradeStatus, + incrementUpgradeStatusDisplayCount, }; diff --git a/assets/js/blocks/migration-products-to-product-collection/types.ts b/assets/js/blocks/migration-products-to-product-collection/types.ts new file mode 100644 index 00000000000..1fd795a6636 --- /dev/null +++ b/assets/js/blocks/migration-products-to-product-collection/types.ts @@ -0,0 +1,29 @@ +/** + * External dependencies + */ +import { type BlockInstance } from '@wordpress/blocks'; + +export type GetBlocksClientIds = ( blocks: BlockInstance[] ) => string[]; +export type IsBlockType = ( block: BlockInstance ) => boolean; +export type TransformBlock = ( + block: BlockInstance, + innerBlock: BlockInstance[] +) => BlockInstance; +export type ProductGridLayoutTypes = 'flex' | 'list'; +export type PostTemplateLayoutTypes = 'grid' | 'default'; + +export type ProductGridLayout = { + type: ProductGridLayoutTypes; + columns: number; +}; + +export type PostTemplateLayout = { + type: PostTemplateLayoutTypes; + columnCount: number; +}; +export type UpgradeNoticeStatuses = 'notseen' | 'seen' | 'reverted'; +export type UpgradeNoticeStatus = { + status: UpgradeNoticeStatuses; + time: number; + displayCount?: number; +}; diff --git a/assets/js/blocks/price-filter/edit.tsx b/assets/js/blocks/price-filter/edit.tsx index 637cdfd5853..25e3744a295 100644 --- a/assets/js/blocks/price-filter/edit.tsx +++ b/assets/js/blocks/price-filter/edit.tsx @@ -136,6 +136,7 @@ export default function ( { className="wc-block-price-slider__add-product-button" isSecondary href={ getAdminLink( 'post-new.php?post_type=product' ) } + target="_top" > { __( 'Add new product', 'woo-gutenberg-products-block' ) + ' ' } @@ -145,6 +146,7 @@ export default function ( { className="wc-block-price-slider__read_more_button" isTertiary href="https://docs.woocommerce.com/document/managing-products/" + target="_blank" > { __( 'Learn more', 'woo-gutenberg-products-block' ) } diff --git a/assets/js/blocks/product-collection/block.json b/assets/js/blocks/product-collection/block.json index 272a2cc89ac..12bbea73722 100644 --- a/assets/js/blocks/product-collection/block.json +++ b/assets/js/blocks/product-collection/block.json @@ -21,7 +21,7 @@ "displayLayout": { "type": "object" }, - "displayUpgradeNotice": { + "convertedFromProducts": { "type": "boolean", "default": false } diff --git a/assets/js/blocks/product-collection/inspector-controls/index.tsx b/assets/js/blocks/product-collection/inspector-controls/index.tsx index c75141c6113..0f7537fb219 100644 --- a/assets/js/blocks/product-collection/inspector-controls/index.tsx +++ b/assets/js/blocks/product-collection/inspector-controls/index.tsx @@ -1,14 +1,20 @@ /** * External dependencies */ -import type { ElementType } from 'react'; import type { BlockEditProps } from '@wordpress/blocks'; import { InspectorControls, BlockControls } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; -import { useMemo } from '@wordpress/element'; +import { type ElementType, useMemo } from '@wordpress/element'; import { EditorBlock } from '@woocommerce/types'; import { addFilter } from '@wordpress/hooks'; import { ProductCollectionFeedbackPrompt } from '@woocommerce/editor-components/feedback-prompt'; +import { + enableAutoUpdate, + revertMigration, + getUpgradeStatus, + HOURS_TO_DISPLAY_UPGRADE_NOTICE, + UPGRADE_NOTICE_DISPLAY_COUNT_THRESHOLD, +} from '@woocommerce/blocks/migration-products-to-product-collection'; import { // @ts-expect-error Using experimental features // eslint-disable-next-line @wordpress/no-unsafe-wp-apis @@ -34,7 +40,6 @@ import TaxonomyControls from './taxonomy-controls'; import HandPickedProductsControl from './hand-picked-products-control'; import AuthorControl from './author-control'; import DisplayLayoutControl from './display-layout-control'; -import { replaceProductCollectionWithProducts } from '../../shared/scripts'; const ProductCollectionInspectorControls = ( props: BlockEditProps< ProductCollectionAttributes > @@ -106,29 +111,92 @@ const ProductCollectionInspectorControls = ( export default ProductCollectionInspectorControls; -const isProductCollection = ( - block: EditorBlock< ProductCollectionAttributes > -) => block.name === metadata.name; +// Trigger Auto Upgrade of Products only once when module is loaded. +// This triggers subscription but only if: +// - auto update is enabled +// - user haven't reverted the migration +// - no other subscription is in place +enableAutoUpdate(); + +const isProductCollection = ( blockName: string ) => + blockName === metadata.name; + +const lessThanThresholdSinceUpdate = ( t: number ) => { + // Xh * 60m * 60s * 1000ms + const xHoursFromT = t + HOURS_TO_DISPLAY_UPGRADE_NOTICE * 60 * 60 * 1000; + return Date.now() < xHoursFromT; +}; + +const displayedLessThanThreshold = ( displayCount = 0 ) => { + return displayCount <= UPGRADE_NOTICE_DISPLAY_COUNT_THRESHOLD; +}; + +// Upgrade Notice should be displayed only if: +// - block is converted from Products +// - user haven't acknowledged seeing the notice +// - less than X hours since the notice was first displayed +// - notice was displayed less than X times +const shouldDisplayUpgradeNotice = ( props ) => { + const { attributes } = props; + const { convertedFromProducts } = attributes; + const { status, time, displayCount } = getUpgradeStatus(); + + return ( + convertedFromProducts && + status === 'notseen' && + lessThanThresholdSinceUpdate( time ) && + displayedLessThanThreshold( displayCount ) + ); +}; + +// Block should be unmarked as converted from Products if: +// block is converted from Products and either: +// - user acknowledged seeing the notice +// - it's more than X hours since the notice was first displayed +// - notice was displayed more than X times +// We do that to prevent showing the notice again after Products on +// other page were updated or local storage was cleared or user +// switched to another machine/browser etc. +const shouldBeUnmarkedAsConverted = ( props ) => { + const { attributes } = props; + const { convertedFromProducts } = attributes; + const { status, time, displayCount } = getUpgradeStatus(); + + return ( + convertedFromProducts && + ( status === 'seen' || + ! lessThanThresholdSinceUpdate( time ) || + ! displayedLessThanThreshold( displayCount ) ) + ); +}; export const withUpgradeNoticeControls = < T extends EditorBlock< T > >( BlockEdit: ElementType ) => - ( props: EditorBlock< ProductCollectionAttributes > ) => { - return isProductCollection( props ) ? ( + ( props: BlockEditProps< ProductCollectionAttributes > ) => { + if ( ! isProductCollection( props.name ) ) { + return ; + } + + const displayUpgradeNotice = shouldDisplayUpgradeNotice( props ); + const unmarkAsConverted = shouldBeUnmarkedAsConverted( props ); + + if ( unmarkAsConverted ) { + props.setAttributes( { convertedFromProducts: false } ); + } + + return ( <> - - { props.attributes.displayUpgradeNotice && ( - - ) } - + { displayUpgradeNotice && ( + + { + + } + + ) } - ) : ( - ); }; diff --git a/assets/js/blocks/product-collection/inspector-controls/upgrade-notice.tsx b/assets/js/blocks/product-collection/inspector-controls/upgrade-notice.tsx index d9fe5b9607e..df557e6a9f6 100644 --- a/assets/js/blocks/product-collection/inspector-controls/upgrade-notice.tsx +++ b/assets/js/blocks/product-collection/inspector-controls/upgrade-notice.tsx @@ -3,60 +3,81 @@ */ import { __ } from '@wordpress/i18n'; import { Notice, Button } from '@wordpress/components'; -import { BlockEditProps } from '@wordpress/blocks'; -import { createInterpolateElement } from '@wordpress/element'; +import { useLocalStorageState } from '@woocommerce/base-hooks'; +import { + createInterpolateElement, + useEffect, + useRef, +} from '@wordpress/element'; +import { + MIGRATION_STATUS_LS_KEY, + getInitialStatusLSValue, + incrementUpgradeStatusDisplayCount, +} from '@woocommerce/blocks/migration-products-to-product-collection'; -/** - * Internal dependencies - */ -import { ProductCollectionAttributes } from '../types'; - -const UpgradeNotice = ( - props: BlockEditProps< ProductCollectionAttributes > & { - revertMigration: () => void; - } -) => { - const { displayUpgradeNotice } = props.attributes; - const notice = createInterpolateElement( - __( - 'Products (Beta) block was upgraded to , an updated version with new features and simplified settings.', - 'woo-gutenberg-products-block' +const notice = createInterpolateElement( + __( + 'Products (Beta) block was upgraded to , an updated version with new features and simplified settings.', + 'woo-gutenberg-products-block' + ), + { + strongText: ( + + { __( `Product Collection`, 'woo-gutenberg-products-block' ) } + ), - { - strongText: ( - - { __( - `Product Collection`, - 'woo-gutenberg-products-block' - ) } - - ), - } - ); + } +); - const buttonLabel = __( - 'Revert to Products (Beta)', - 'woo-gutenberg-products-block' - ); +const buttonLabel = __( + 'Revert to Products (Beta)', + 'woo-gutenberg-products-block' +); + +type UpgradeNoticeProps = { + revertMigration: () => void; +}; + +const UpgradeNotice = ( { revertMigration }: UpgradeNoticeProps ) => { + const [ upgradeNoticeStatus, setUpgradeNoticeStatus ] = + useLocalStorageState( + MIGRATION_STATUS_LS_KEY, + getInitialStatusLSValue() + ); + + const canCountDisplays = useRef( true ); + const { status } = upgradeNoticeStatus; const handleRemove = () => { - // @todo: this logic needs to be extended to be hidden for all - // Product Collection blocks and whole store - props.setAttributes( { - displayUpgradeNotice: false, + setUpgradeNoticeStatus( { + status: 'seen', + time: Date.now(), } ); }; - const handleClick = () => { - props.revertMigration(); + const handleRevert = () => { + revertMigration(); }; - return displayUpgradeNotice ? ( + // Prevent the possibility to count displays multiple times when the + // block is selected and Inspector Controls are re-rendered multiple times. + useEffect( () => { + const countDisplay = () => { + if ( canCountDisplays.current ) { + incrementUpgradeStatusDisplayCount(); + canCountDisplays.current = false; + } + }; + + return countDisplay; + }, [ canCountDisplays ] ); + + return status === 'notseen' ? ( <>{ notice }

- diff --git a/assets/js/blocks/product-collection/types.ts b/assets/js/blocks/product-collection/types.ts index 80fe339e80c..5d01793d5c7 100644 --- a/assets/js/blocks/product-collection/types.ts +++ b/assets/js/blocks/product-collection/types.ts @@ -14,7 +14,7 @@ export interface ProductCollectionAttributes { templateSlug: string; displayLayout: ProductCollectionDisplayLayout; tagName: string; - displayUpgradeNotice: boolean; + convertedFromProducts: boolean; } export interface ProductCollectionDisplayLayout { diff --git a/assets/js/blocks/product-gallery/icon.tsx b/assets/js/blocks/product-gallery/icon.tsx index 9fff759ec0d..a5587e33b3f 100644 --- a/assets/js/blocks/product-gallery/icon.tsx +++ b/assets/js/blocks/product-gallery/icon.tsx @@ -1,35 +1,34 @@ const Icon = () => ( - - + - - - - - - ); diff --git a/assets/js/blocks/product-query/constants.ts b/assets/js/blocks/product-query/constants.ts index e017460906e..a5d0fc5c8d4 100644 --- a/assets/js/blocks/product-query/constants.ts +++ b/assets/js/blocks/product-query/constants.ts @@ -13,9 +13,6 @@ import { VARIATION_NAME as PRODUCT_TITLE_ID } from './variations/elements/produc import { VARIATION_NAME as PRODUCT_TEMPLATE_ID } from './variations/elements/product-template'; import { ImageSizing } from '../../atomic/blocks/product-elements/image/types'; -export const AUTO_REPLACE_PRODUCTS_WITH_PRODUCT_COLLECTION = false; -export const MANUAL_REPLACE_PRODUCTS_WITH_PRODUCT_COLLECTION = false; - export const PRODUCT_QUERY_VARIATION_NAME = 'woocommerce/product-query'; export const EDIT_ATTRIBUTES_URL = diff --git a/assets/js/blocks/product-query/inspector-controls.tsx b/assets/js/blocks/product-query/inspector-controls.tsx index 05ea211b4f7..0ae16dd1287 100644 --- a/assets/js/blocks/product-query/inspector-controls.tsx +++ b/assets/js/blocks/product-query/inspector-controls.tsx @@ -1,15 +1,19 @@ /** * External dependencies */ -import type { ElementType } from 'react'; import { __ } from '@wordpress/i18n'; import { InspectorControls } from '@wordpress/block-editor'; -import { useSelect, subscribe } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; import { addFilter } from '@wordpress/hooks'; +import { type ElementType } from '@wordpress/element'; import { ProductQueryFeedbackPrompt } from '@woocommerce/editor-components/feedback-prompt'; import { EditorBlock, isNumber } from '@woocommerce/types'; import { usePrevious } from '@woocommerce/base-hooks'; -import { isWpVersion, getSettingWithCoercion } from '@woocommerce/settings'; +import { + manualUpdate, + MANUAL_REPLACE_PRODUCTS_WITH_PRODUCT_COLLECTION, +} from '@woocommerce/blocks/migration-products-to-product-collection'; +import { getSettingWithCoercion } from '@woocommerce/settings'; import { ProductQueryBlockQuery } from '@woocommerce/blocks/product-query/types'; import { FormTokenField, @@ -39,14 +43,11 @@ import { QUERY_DEFAULT_ATTRIBUTES, QUERY_LOOP_ID, STOCK_STATUS_OPTIONS, - AUTO_REPLACE_PRODUCTS_WITH_PRODUCT_COLLECTION, - MANUAL_REPLACE_PRODUCTS_WITH_PRODUCT_COLLECTION, } from './constants'; import { AttributesFilter } from './inspector-controls/attributes-filter'; import { PopularPresets } from './inspector-controls/popular-presets'; import { ProductSelector } from './inspector-controls/product-selector'; import { UpgradeNotice } from './inspector-controls/upgrade-notice'; -import { replaceProductsWithProductCollection } from '../shared/scripts'; import './editor.scss'; @@ -237,9 +238,7 @@ const ProductQueryControls = ( props: ProductQueryBlock ) => { <> { MANUAL_REPLACE_PRODUCTS_WITH_PRODUCT_COLLECTION && ( - + ) } { allowedControls?.includes( 'presets' ) && ( @@ -289,16 +288,3 @@ export const withProductQueryControls = }; addFilter( 'editor.BlockEdit', QUERY_LOOP_ID, withProductQueryControls ); - -if ( isWpVersion( '6.1', '>=' ) ) { - let unsubscribe: ( () => void ) | undefined; - if ( AUTO_REPLACE_PRODUCTS_WITH_PRODUCT_COLLECTION && ! unsubscribe ) { - unsubscribe = subscribe( () => { - replaceProductsWithProductCollection( () => { - if ( unsubscribe ) { - unsubscribe(); - } - } ); - }, 'core/block-editor' ); - } -} diff --git a/assets/js/blocks/product-tag/block.tsx b/assets/js/blocks/product-tag/block.tsx index 6dd138382d5..fb240d1382a 100644 --- a/assets/js/blocks/product-tag/block.tsx +++ b/assets/js/blocks/product-tag/block.tsx @@ -85,7 +85,6 @@ const ProductsByTagBlock = ( { ) } initialOpen={ ! attributes.tags.length && ! isEditing } > - { /* @ts-expect-error ProductTagControl is yet to be converted to tsx*/ } { @@ -203,16 +202,21 @@ const ProductsByTagBlock = ( { 'woo-gutenberg-products-block' ) }
- { /* @ts-expect-error ProductTagControl is yet to be converted to tsx*/ } { const ids = value.map( ( { id } ) => id ); - setChangedAttributes( { tags: ids } ); + setChangedAttributes( { + ...changedAttributes, + tags: ids, + } ); } } operator={ currentAttributes.tagOperator } onOperatorChange={ ( value = 'any' ) => - setChangedAttributes( { tagOperator: value } ) + setChangedAttributes( { + ...changedAttributes, + tagOperator: value, + } ) } /> diff --git a/assets/js/editor-components/product-tag-control/index.js b/assets/js/editor-components/product-tag-control/index.js deleted file mode 100644 index 4c00c169187..00000000000 --- a/assets/js/editor-components/product-tag-control/index.js +++ /dev/null @@ -1,213 +0,0 @@ -/** - * External dependencies - */ -import { __, _n, sprintf } from '@wordpress/i18n'; -import { Component } from '@wordpress/element'; -import { debounce } from '@woocommerce/base-utils'; -import PropTypes from 'prop-types'; -import { - SearchListControl, - SearchListItem, -} from '@woocommerce/editor-components/search-list-control'; -import { SelectControl } from '@wordpress/components'; -import { getSetting } from '@woocommerce/settings'; -import classNames from 'classnames'; - -/** - * Internal dependencies - */ -import { getProductTags } from '../utils'; -import './style.scss'; - -/** - * Component to handle searching and selecting product tags. - */ -class ProductTagControl extends Component { - constructor() { - super( ...arguments ); - this.state = { - list: [], - loading: true, - }; - this.renderItem = this.renderItem.bind( this ); - this.debouncedOnSearch = debounce( this.onSearch.bind( this ), 400 ); - } - - componentDidMount() { - const { selected } = this.props; - - getProductTags( { selected } ) - .then( ( list ) => { - this.setState( { list, loading: false } ); - } ) - .catch( () => { - this.setState( { list: [], loading: false } ); - } ); - } - - onSearch( search ) { - const { selected } = this.props; - this.setState( { loading: true } ); - - getProductTags( { selected, search } ) - .then( ( list ) => { - this.setState( { list, loading: false } ); - } ) - .catch( () => { - this.setState( { list: [], loading: false } ); - } ); - } - - renderItem( args ) { - const { item, search, depth = 0 } = args; - - const accessibleName = ! item.breadcrumbs.length - ? item.name - : `${ item.breadcrumbs.join( ', ' ) }, ${ item.name }`; - - return ( - 0, - 'is-skip-level': depth === 0 && item.parent !== 0, - } - ) } - { ...args } - aria-label={ sprintf( - /* translators: %1$d is the count of products, %2$s is the name of the tag. */ - _n( - '%1$d product tagged as %2$s', - '%1$d products tagged as %2$s', - item.count, - 'woo-gutenberg-products-block' - ), - item.count, - accessibleName - ) } - /> - ); - } - - render() { - const { list, loading } = this.state; - const { isCompact, onChange, onOperatorChange, operator, selected } = - this.props; - - const messages = { - clear: __( - 'Clear all product tags', - 'woo-gutenberg-products-block' - ), - list: __( 'Product Tags', 'woo-gutenberg-products-block' ), - noItems: __( - 'You have not set up any product tags on your store.', - 'woo-gutenberg-products-block' - ), - search: __( - 'Search for product tags', - 'woo-gutenberg-products-block' - ), - selected: ( n ) => - sprintf( - /* translators: %d is the count of selected tags. */ - _n( - '%d tag selected', - '%d tags selected', - n, - 'woo-gutenberg-products-block' - ), - n - ), - updated: __( - 'Tag search results updated.', - 'woo-gutenberg-products-block' - ), - }; - - const limitTags = getSetting( 'limitTags', false ); - - return ( - <> - - list.find( ( listItem ) => listItem.id === id ) - ) - .filter( Boolean ) } - onChange={ onChange } - onSearch={ limitTags ? this.debouncedOnSearch : null } - renderItem={ this.renderItem } - messages={ messages } - isCompact={ isCompact } - isHierarchical - /> - { !! onOperatorChange && ( - - ) } - - ); - } -} - -ProductTagControl.propTypes = { - /** - * Callback to update the selected product categories. - */ - onChange: PropTypes.func.isRequired, - /** - * Callback to update the category operator. If not passed in, setting is not used. - */ - onOperatorChange: PropTypes.func, - /** - * Setting for whether products should match all or any selected categories. - */ - operator: PropTypes.oneOf( [ 'all', 'any' ] ), - /** - * The list of currently selected tags. - */ - selected: PropTypes.array.isRequired, - isCompact: PropTypes.bool, -}; - -ProductTagControl.defaultProps = { - isCompact: false, - operator: 'any', -}; - -export default ProductTagControl; diff --git a/assets/js/editor-components/product-tag-control/index.tsx b/assets/js/editor-components/product-tag-control/index.tsx new file mode 100644 index 00000000000..9339dece00e --- /dev/null +++ b/assets/js/editor-components/product-tag-control/index.tsx @@ -0,0 +1,142 @@ +/** + * External dependencies + */ +import { __, _n, sprintf } from '@wordpress/i18n'; +import { useState, useEffect, useCallback, useMemo } from '@wordpress/element'; +import { SearchListControl } from '@woocommerce/editor-components/search-list-control'; +import { SelectControl } from '@wordpress/components'; +import { getSetting } from '@woocommerce/settings'; +import { useDebouncedCallback } from 'use-debounce'; + +/** + * Internal dependencies + */ +import type { SearchListItem as SearchListItemProps } from '../search-list-control/types'; +import ProductTagItem from './product-tag-item'; +import type { ProductTagControlProps } from './types'; +import { getProductTags } from '../utils'; +import './style.scss'; + +/** + * Component to handle searching and selecting product tags. + */ +const ProductTagControl = ( { + isCompact = false, + onChange, + onOperatorChange, + operator = 'any', + selected, +}: ProductTagControlProps ): JSX.Element => { + const [ list, setList ] = useState< SearchListItemProps[] >( [] ); + const [ loading, setLoading ] = useState( true ); + const [ isMounted, setIsMounted ] = useState( false ); + const limitTags = getSetting( 'limitTags', false ); + + const selectedTags = useMemo< SearchListItemProps[] >( () => { + return list.filter( ( item ) => selected.includes( item.id ) ); + }, [ list, selected ] ); + + const onSearch = useCallback( + ( search: string ) => { + setLoading( true ); + getProductTags( { selected, search } ) + .then( ( newList ) => { + setList( newList ); + setLoading( false ); + } ) + .catch( () => { + setLoading( false ); + } ); + }, + [ selected ] + ); + + // Load on mount. + useEffect( () => { + if ( isMounted ) { + return; + } + onSearch( '' ); + setIsMounted( true ); + }, [ onSearch, isMounted ] ); + + const debouncedOnSearch = useDebouncedCallback( onSearch, 400 ); + + const messages = { + clear: __( 'Clear all product tags', 'woo-gutenberg-products-block' ), + list: __( 'Product Tags', 'woo-gutenberg-products-block' ), + noItems: __( + 'You have not set up any product tags on your store.', + 'woo-gutenberg-products-block' + ), + search: __( 'Search for product tags', 'woo-gutenberg-products-block' ), + selected: ( n: number ) => + sprintf( + /* translators: %d is the count of selected tags. */ + _n( + '%d tag selected', + '%d tags selected', + n, + 'woo-gutenberg-products-block' + ), + n + ), + updated: __( + 'Tag search results updated.', + 'woo-gutenberg-products-block' + ), + }; + + return ( + <> + + { !! onOperatorChange && ( + + ) } + + ); +}; + +export default ProductTagControl; diff --git a/assets/js/editor-components/product-tag-control/product-tag-item.tsx b/assets/js/editor-components/product-tag-control/product-tag-item.tsx new file mode 100644 index 00000000000..db656cbcd1e --- /dev/null +++ b/assets/js/editor-components/product-tag-control/product-tag-item.tsx @@ -0,0 +1,52 @@ +/** + * External dependencies + */ +import { _n, sprintf } from '@wordpress/i18n'; +import { SearchListItem } from '@woocommerce/editor-components/search-list-control'; +import classNames from 'classnames'; + +/** + * Internal dependencies + */ +import type { renderItemArgs } from '../search-list-control/types'; + +export const ProductTagItem = ( { + item, + search, + depth = 0, + ...rest +}: renderItemArgs ): JSX.Element => { + const accessibleName = ! item.breadcrumbs.length + ? item.name + : `${ item.breadcrumbs.join( ', ' ) }, ${ item.name }`; + + return ( + 0, + 'is-skip-level': depth === 0 && item.parent !== 0, + } + ) } + item={ item } + search={ search } + depth={ depth } + { ...rest } + ariaLabel={ sprintf( + /* translators: %1$d is the count of products, %2$s is the name of the tag. */ + _n( + '%1$d product tagged as %2$s', + '%1$d products tagged as %2$s', + item.count, + 'woo-gutenberg-products-block' + ), + item.count, + accessibleName + ) } + /> + ); +}; + +export default ProductTagItem; diff --git a/assets/js/editor-components/product-tag-control/types.ts b/assets/js/editor-components/product-tag-control/types.ts new file mode 100644 index 00000000000..3004048bcd4 --- /dev/null +++ b/assets/js/editor-components/product-tag-control/types.ts @@ -0,0 +1,13 @@ +/** + * Internal dependencies + */ +import type { SearchListItem as SearchListItemProps } from '../search-list-control/types'; + +export type ProductTagControlProps = { + isCompact?: boolean; + onChange: ( selected: SearchListItemProps[] ) => void; + onOperatorChange?: ( operator: string ) => void; + operator?: string; + // Selected tag ids. + selected: ( number | string )[]; +}; diff --git a/assets/js/editor-components/search-list-control/types.ts b/assets/js/editor-components/search-list-control/types.ts index b7852a251ac..043a1848c07 100644 --- a/assets/js/editor-components/search-list-control/types.ts +++ b/assets/js/editor-components/search-list-control/types.ts @@ -90,6 +90,8 @@ export interface renderItemArgs extends ItemProps { * If not provided, a default name will be generated using the controlId. */ name?: string; + // Aria label for the input. If not provided, a default label will be generated using the item name. + ariaLabel?: string; } export interface SearchListControlProps { @@ -110,7 +112,7 @@ export interface SearchListControlProps { // Callback fired when selected items change, whether added, cleared, or removed. Passed an array of item objects (as passed in via props.list). onChange: ( search: SearchListItem[] ) => void; // Callback fired when the search field is used. - onSearch?: ( search: string ) => void; + onSearch?: ( ( search: string ) => void ) | undefined; // Callback to render each item in the selection list, allows any custom object-type rendering. renderItem?: ( args: renderItemArgs ) => JSX.Element; // The list of currently selected items. diff --git a/assets/js/interactivity/index.js b/assets/js/interactivity/index.js index 67d56e8e9cb..00008625110 100644 --- a/assets/js/interactivity/index.js +++ b/assets/js/interactivity/index.js @@ -1,7 +1,9 @@ import registerDirectives from './directives'; import { init } from './router'; -export { store } from './store'; +import { rawStore, afterLoads } from './store'; + export { navigate } from './router'; +export { store } from './store'; /** * Initialize the Interactivity API. @@ -9,6 +11,7 @@ export { navigate } from './router'; document.addEventListener( 'DOMContentLoaded', async () => { registerDirectives(); await init(); + afterLoads.forEach( ( afterLoad ) => afterLoad( rawStore ) ); // eslint-disable-next-line no-console console.log( 'Interactivity API started' ); } ); diff --git a/assets/js/interactivity/store.js b/assets/js/interactivity/store.js index d00308f8012..de5c59db069 100644 --- a/assets/js/interactivity/store.js +++ b/assets/js/interactivity/store.js @@ -32,12 +32,15 @@ const getSerializedState = () => { return {}; }; +export const afterLoads = new Set(); + const rawState = getSerializedState(); export const rawStore = { state: deepSignal( rawState ) }; if ( typeof window !== 'undefined' ) window.store = rawStore; -export const store = ( { state, ...block } ) => { +export const store = ( { state, ...block }, { afterLoad } = {} ) => { deepMerge( rawStore, block ); deepMerge( rawState, state ); + if ( afterLoad ) afterLoads.add( afterLoad ); }; diff --git a/bin/webpack-configs.js b/bin/webpack-configs.js index 3dd7a25347d..84de696091a 100644 --- a/bin/webpack-configs.js +++ b/bin/webpack-configs.js @@ -733,7 +733,7 @@ const getSiteEditorConfig = ( options = {} ) => { * @param {Object} options Build options. */ const getStylingConfig = ( options = {} ) => { - let { fileSuffix } = options; + let { fileSuffix, isClassicThemeConfig } = options; const { alias, resolvePlugins = [] } = options; fileSuffix = fileSuffix ? `-${ fileSuffix }` : ''; const resolve = alias @@ -775,11 +775,58 @@ const getStylingConfig = ( options = {} ) => { chunks: 'all', priority: 10, }, + ...( isClassicThemeConfig && { + vendorsStyle: { + test: /[\/\\]node_modules[\/\\].*?style\.s?css$/, + name: 'wc-blocks-vendors-style', + chunks: 'all', + priority: 7, + }, + blocksStyle: { + // Capture all stylesheets with name `style` or name that starts with underscore (abstracts). + test: /(style|_.*)\.scss$/, + name: 'wc-all-blocks-style', + chunks: 'all', + priority: 5, + }, + } ), }, }, }, module: { rules: [ + { + test: /[\/\\]node_modules[\/\\].*?style\.s?css$/, + use: [ + MiniCssExtractPlugin.loader, + { loader: 'css-loader', options: { importLoaders: 1 } }, + 'postcss-loader', + { + loader: 'sass-loader', + options: { + sassOptions: { + includePaths: [ 'node_modules' ], + }, + additionalData: ( content ) => { + const styleImports = [ + 'colors', + 'breakpoints', + 'variables', + 'mixins', + 'animations', + 'z-index', + ] + .map( + ( imported ) => + `@import "~@wordpress/base-styles/${ imported }";` + ) + .join( ' ' ); + return styleImports + content; + }, + }, + }, + ], + }, { test: /\.(j|t)sx?$/, use: { @@ -800,6 +847,7 @@ const getStylingConfig = ( options = {} ) => { }, { test: /\.s?css$/, + exclude: /node_modules/, use: [ MiniCssExtractPlugin.loader, 'css-loader', diff --git a/bin/webpack-entries.js b/bin/webpack-entries.js index e7d0f748454..b2383206ce0 100644 --- a/bin/webpack-entries.js +++ b/bin/webpack-entries.js @@ -114,6 +114,16 @@ const getBlockEntries = ( relativePath ) => { const entries = { styling: { + // @wordpress/components styles + 'custom-select-control-style': + './node_modules/wordpress-components/src/custom-select-control/style.scss', + 'snackbar-notice-style': + './node_modules/wordpress-components/src/snackbar/style.scss', + 'combobox-control-style': + './node_modules/wordpress-components/src/combobox-control/style.scss', + 'form-token-field-style': + './node_modules/wordpress-components/src/form-token-field/style.scss', + // Packages styles 'packages-style': glob.sync( './packages/**/index.js' ), @@ -157,6 +167,8 @@ const entries = { ...getBlockEntries( 'frontend.{t,j}s{,x}' ), 'mini-cart-component': './assets/js/blocks/mini-cart/component-frontend.tsx', + 'product-button-interactivity': + './assets/js/atomic/blocks/product-elements/button/frontend.tsx', }, payments: { 'wc-payment-method-cheque': diff --git a/bin/wp-env-with-wp-622.js b/bin/wp-env-with-wp-622.js new file mode 100755 index 00000000000..b27fbfcb2e9 --- /dev/null +++ b/bin/wp-env-with-wp-622.js @@ -0,0 +1,19 @@ +const fs = require( 'fs' ); +const path = require( 'path' ); + +const wpEnvRaw = fs.readFileSync( + path.join( __dirname, '..', '.wp-env.json' ) +); +const wpEnv = JSON.parse( wpEnvRaw ); + +// Pin the core version to 6.2.2 for Jest E2E test so we can keep the test +// passing when new WordPress versions are released. We do this because we're +// moving to Playwright and will abandon the Jest E2E tests once the migration +// is complete. +wpEnv.core = 'WordPress/WordPress#6.2.2'; + +// We write the new file to .wp-env.override.json (https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/#wp-env-override-json) +fs.writeFileSync( + path.join( __dirname, '..', '.wp-env.override.json' ), + JSON.stringify( wpEnv ) +); diff --git a/composer.json b/composer.json index d2c6654610e..1f30a59f997 100644 --- a/composer.json +++ b/composer.json @@ -3,7 +3,7 @@ "description": "WooCommerce blocks for the Gutenberg editor.", "homepage": "https://woocommerce.com/", "type": "wordpress-plugin", - "version": "10.9.0-dev", + "version": "11.0.0-dev", "keywords": [ "gutenberg", "woocommerce", diff --git a/docs/internal-developers/testing/releases/1083.md b/docs/internal-developers/testing/releases/1083.md new file mode 100644 index 00000000000..6f7a226df45 --- /dev/null +++ b/docs/internal-developers/testing/releases/1083.md @@ -0,0 +1,24 @@ +# Testing notes and ZIP for release 10.8.3 + +Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/12322309/woocommerce-gutenberg-products-block.zip) + +## WooCommerce Core + +### Create wc-all-block-styles chunk with all blocks stylesheet for classic themes. [#10543](https://github.com/woocommerce/woocommerce-blocks/pull/10543) + +⚠️: Following these testing instruction for a classic theme (Storefront) and a block theme (TT3) + +#### For classic theme ensure that is loaded only `wc-all-blocks-style.css` and `wc-blocks-vendors-style.css` stylesheets + +#### For block theme sure that is loaded only the stylesheets of blocks visible in the page + +1. Create a post or page and add the All Products block. Verify styles are loaded correctly. +2. Visit the page in the frontend and verify styles are loaded correctly in the frontend as well. +3. Repeat steps 1 and 2 with all blocks listed on [this page](https://wordpress.org/plugins/woo-gutenberg-products-block/). Make sure to test each block individually. So, when possible, try with only one block on the page (in some cases, that's not possible, ie: filter blocks, in that case, try with as few blocks as possible on the page). The reason is that we want to make sure each block includes the style dependencies that it needs, so they need to be tested in isolation, otherwise styles from other blocks might leak into other blocks and "help fix issues". + +### Fix the "On Sale" badge position. [#10550](https://github.com/woocommerce/woocommerce-blocks/pull/10550) + +1. Enable the `Storefront` theme. +2. Create a new page or post. +3. Add the `Products by Attribute`, `Products by Tag`, `Products by Category`, `Handpicked products` and `All products` blocks. +4. Check the `Sale` back shows on the top-right corner of the image on all of them, in the editor and in the frontend. diff --git a/docs/internal-developers/testing/releases/1090.md b/docs/internal-developers/testing/releases/1090.md new file mode 100644 index 00000000000..6c530e6fd2e --- /dev/null +++ b/docs/internal-developers/testing/releases/1090.md @@ -0,0 +1,196 @@ +# Testing notes and ZIP for release 10.9.0 + +Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/12343048/woocommerce-gutenberg-products-block.zip) + +## WooCommerce Core + +### Enhancements + +#### Add the `wc-blocks-footer-pattern` class identifier to all footer patterns. [#10542](https://github.com/woocommerce/woocommerce-blocks/pull/10542) + +1. Create a new post +2. Insert the following footer patterns to the post: + +- Large Footer +- Large Footer Dark +- Simple Footer +- Simple Footer Dark +- Footer with Simple Menu and Cart +- Footer with 2 Menus +- Footer with 2 Menus Dark +- Footer with 3 Menus + +3. Open the code editor and make sure you can see the `wc-blocks-footer-pattern` class in all footer patterns: + +Screenshot 2023-08-11 at 11 16 38 + +4. No changes should be observed by the end users: all patterns listed above should work as expected both on the editor side and on the front end. + +#### Add the `wc-blocks-header-pattern` class identifier to all header patterns. [#10541](https://github.com/woocommerce/woocommerce-blocks/pull/10541) + +1. Create a new post +2. Insert the following header patterns to the post: + +- Centered Header Menu with Search +- Essential Header +- Essential Header Dark +- Large Header +- Large Header Dark +- Minimal Header + +3. Open the code editor and make sure you can see the `wc-blocks-header-pattern` class in all header patterns: + +Screenshot 2023-08-11 at 10 55 27 + +4. No changes should be observed by the end users: all patterns listed above should work as expected both on the editor side and on the front end. + +#### Featured Products: Fresh & Tasty pattern: Enhance mobile view and optimize images. [#10521](https://github.com/woocommerce/woocommerce-blocks/pull/10521) + +1. Create a new post +2. Insert the **Featured Products: Fresh & Tasty** pattern +3. Make sure the pattern is properly displayed in the editor without any problems +4. Save the post and head over to the front-end +5. Make sure the pattern is correctly displayed and the mobile view matches the screenshot provided on the description of this PR. + +##### Screenshots + + + + + + +
Before: +

+Screenshot 2023-08-09 at 18 11 40 +		After: +

+Screenshot 2023-08-09 at 18 11 57 +
+ +#### Add placeholder images and update text styles for the Alternating Image and Text pattern. [#10479](https://github.com/woocommerce/woocommerce-blocks/pull/10479) + +1. Create a new post. +2. Insert the **Alternating Image and Text** pattern. +3. Save the post and ensure everything is working as expected both in the editor and on the frontend. The designs should match the "After" screenshot on this PR. + +##### Screenshots + + + + + + +
Before: +

+Screenshot 2023-08-04 at 15 57 46 +		After: +

+Screenshot 2023-08-04 at 16 02 36 +
+ +#### Performance: Selecting shipping rates during checkout, and API calls in general, are now faster. Shipping selection improved by at least 1 second. [#10472](https://github.com/woocommerce/woocommerce-blocks/pull/10472) + +1. Add items to the cart and head to checkout. +2. Enter your address. Ensure your store has a few shipping methods to choose from. +3. Select a shipping rate. Confirm the UI is blocked (cursor change, faded out radio button). +4. Confirm shipping totals etc update successfully. + +#### Checkout: Prevent postcode validation error notice appearing after pushing changes for other fields. [#10315](https://github.com/woocommerce/woocommerce-blocks/pull/10315) + +1. Add some items to the cart and go to the checkout page +2. Fill out your shipping address and ensure rates appear. You need to complete all required fields before this occurs. +3. Type into a shipping address field. After a short delay confirm that the shipping rates refresh. +4. Type into a different field. Without waiting, tab out of the field. The refresh should happen immediately. +5. Interact with the postcode + country fields. + - Choose Algeria. Enter invalid postcode e.g. ABC. Notice the inline validation. + - Choose Albania. Inline validation should disappear. The postcode is now valid. + - Go back to Algeria. The postcode will clear. There should be no validation message visible. + - Place order. Empty postcode field now has a validation message. +6. Correct all errors and successfully place the order. + +#### Product Button block: Integrate Interactivity API to make the block dynamically. [#10006](https://github.com/woocommerce/woocommerce-blocks/pull/10006) + +1. Ensure that you are using the Blockified Product Catalog Template. If not, enable it. +2. Open the Site Editor and add the Mini Cart Block on the header. Save. +3. Visit the Product Catalog (`/shop`). +4. Click the button to ensure the product is added to the cart. +5. Ensure that the transition Add to cart -> loading status -> 1 in the cart is smooth. +6. Click on the Mini Cart. +7. Edit the quantity of the product. +8. Ensure that the changes are reflected in the Product Button. +9. Via dev tools ensure that the button element has the class `added` when the product is in the cart, and the button element has the class `loading` while the product is added to the cart. + +##### Test ProductButton with cache plugin + +1. Install the plugin [WP Optimize](https://wordpress.org/plugins/wp-optimize/). +2. Ensure that your cart is empty. +3. Ensure that you have the Mini Cart block in the header. +4. Enable the cache. +5. Visit the page with the Products block. +6. Refresh the page. +7. Add a product. +8. Refresh the page. +9. Ensure that the counter is updated with a smoother animation. +10. Open the Mini Cart block and change the quantity of the product in the cart. +11. Ensure that the counter inside the button is updated with a smoother animation. +12. Disable the plugin. +13. Visit the page with the Products block. +14. Open the Mini Cart block and change the quantity of the product in the cart. +15. Ensure that the counter inside the button is updated with a smoother animation. +16. Ensure that there isn't any regression. + +#### Interactivity API: Update interactive regions during client-side navigation [#10200](https://github.com/woocommerce/woocommerce-blocks/pull/10200) + +1. Ensure that you are using the Blockified Product Catalog Template. If not, enable it. +2. Open the Site Editor and go to the Product Catalog Template. +3. In order to make pagination more noticeable, in the Product query block, disable the inherited query settings and manually modify the block markup to set the `perPage` prop inside the `query` attribute to `1`. +4. Visit the Product Catalog (`/shop`). +5. Click on any link inside the Pagination block. +6. Via dev tools, ensure that only the HTML inside the Query block is updated. +7. Navigate back and forward. +8. Via dev tools, ensure that only the HTML inside the Query block is updated. +9. Click on any link outside the Pagination block +10. Ensure that the browser navigates to the selected link. + +##### Screenshots + + + + + + +
Before: +

+ +		After: +

+ +
+ +### Bug Fixes + +#### Fix Express Payments buttons display in the Cart block. [#10534](https://github.com/woocommerce/woocommerce-blocks/pull/10534) + +1. activate Stripe and PayPal and make sure they are active +2. add a product to cart +3. visit the Cart block and make sure buttons are stacked +4. go to the Checkout block and make sure buttons are in a grid +5. repeat the testing in the editor as well +6. repeat the steps with different screen sizes +7. Mini cart does not display express payments so it does not need testing + +#### Fixed a bug which caused theme border colors to not correctly show on the blocks on the editor side. [#10468](https://github.com/woocommerce/woocommerce-blocks/pull/10468) + +1. Add a “Featured Category” block to your page. +2. Open the Inspector Controls → Styles tab → Add a border. +3. Select a custom width and select a color from the theme colors. +4. Ensure this color is shown correctly in the editor. +5. [Regression test] Ensure custom colors are shown correctly in the editor. +6. [Regression test] Ensure both are shown in the front-end. + +#### Fix an issue where inner Cart blocks were incorrectly nested. [#10447](https://github.com/woocommerce/woocommerce-blocks/pull/10447) + +1. Enable a block theme. +2. Go to Appearance -> Editor -> Templates -> Cart. +3. Edit the template and click the "Cart" button at the top of the editor - a dropdown will appear. Click "Clear customizations" here (If it does not show then proceed anyway) +4. Open the list view of blocks, and expand the Cart block, and the Empty Cart block. Ensure there are no duplicate Empty/Filled cart blocks in the top-level Empty Cart block. diff --git a/docs/internal-developers/testing/releases/README.md b/docs/internal-developers/testing/releases/README.md index 4789b58035e..819ac0e0d30 100644 --- a/docs/internal-developers/testing/releases/README.md +++ b/docs/internal-developers/testing/releases/README.md @@ -168,7 +168,8 @@ Every release includes specific testing instructions for new features and bug fi - [10.8.0](./1080.md) - [10.8.1](./1081.md) - [10.8.2](./1082.md) - + - [10.8.3](./1083.md) +- [10.9.0](./1090.md) diff --git a/images/pattern-placeholders/crafting-pots.png b/images/pattern-placeholders/crafting-pots.png new file mode 100644 index 00000000000..2846b25919f Binary files /dev/null and b/images/pattern-placeholders/crafting-pots.png differ diff --git a/images/pattern-placeholders/fresh-lettuce-washed.png b/images/pattern-placeholders/fresh-lettuce-washed.png index 0611666d868..b6c8b432d83 100644 Binary files a/images/pattern-placeholders/fresh-lettuce-washed.png and b/images/pattern-placeholders/fresh-lettuce-washed.png differ diff --git a/images/pattern-placeholders/fresh-organic-tomatoes.png b/images/pattern-placeholders/fresh-organic-tomatoes.png index 7f329428d62..1d00fbda7bc 100644 Binary files a/images/pattern-placeholders/fresh-organic-tomatoes.png and b/images/pattern-placeholders/fresh-organic-tomatoes.png differ diff --git a/images/pattern-placeholders/hand-made-pots.png b/images/pattern-placeholders/hand-made-pots.png new file mode 100644 index 00000000000..e380d933618 Binary files /dev/null and b/images/pattern-placeholders/hand-made-pots.png differ diff --git a/images/pattern-placeholders/russet-organic-potatoes.png b/images/pattern-placeholders/russet-organic-potatoes.png index 58b87e8e2fb..acdcd7f4f40 100644 Binary files a/images/pattern-placeholders/russet-organic-potatoes.png and b/images/pattern-placeholders/russet-organic-potatoes.png differ diff --git a/images/pattern-placeholders/sweet-organic-lemons.png b/images/pattern-placeholders/sweet-organic-lemons.png index 85771519168..2a7ea0aded9 100644 Binary files a/images/pattern-placeholders/sweet-organic-lemons.png and b/images/pattern-placeholders/sweet-organic-lemons.png differ diff --git a/package-lock.json b/package-lock.json index 3d8550d049f..5088a4b4787 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@woocommerce/block-library", - "version": "10.9.0-dev", + "version": "11.0.0-dev", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@woocommerce/block-library", - "version": "10.9.0-dev", + "version": "11.0.0-dev", "hasInstallScript": true, "license": "GPL-3.0+", "dependencies": { @@ -32,7 +32,7 @@ "compare-versions": "4.1.3", "config": "3.3.7", "dataloader": "2.1.0", - "deepsignal": "^1.1.0", + "deepsignal": "1.3.6", "dinero.js": "1.9.1", "dompurify": "^2.4.0", "downshift": "6.1.7", @@ -115,7 +115,7 @@ "@wordpress/dependency-extraction-webpack-plugin": "3.2.1", "@wordpress/dom": "3.27.0", "@wordpress/e2e-test-utils": "10.1.0", - "@wordpress/e2e-test-utils-playwright": "https://github.com/woocommerce/woocommerce-blocks/files/11286971/wordpress-e2e-test-utils-playwright-0.0.0.tgz", + "@wordpress/e2e-test-utils-playwright": "0.6.0", "@wordpress/e2e-tests": "^4.6.0", "@wordpress/element": "4.20.0", "@wordpress/env": "7.0.0", @@ -126,6 +126,7 @@ "@wordpress/scripts": "24.6.0", "autoprefixer": "10.4.14", "axios": "0.27.2", + "babel-jest": "^29.6.2", "babel-plugin-explicit-exports-references": "^1.0.2", "babel-plugin-react-docgen": "4.2.1", "babel-plugin-transform-async-generator-functions": "6.24.1", @@ -15391,9 +15392,9 @@ } }, "node_modules/@wordpress/e2e-test-utils-playwright": { - "version": "0.0.0", - "resolved": "https://github.com/woocommerce/woocommerce-blocks/files/11286971/wordpress-e2e-test-utils-playwright-0.0.0.tgz", - "integrity": "sha512-BLtq8Vcsyxbac1d8I+klE2Zrhbso3DJ2YTRl3ZmZ6KMiIiYWCvPLLIbtYAWiIDy6NU2jiT1wLlJ4G4jyV3DhIQ==", + "version": "0.6.0", + "resolved": "https://github.com/woocommerce/woocommerce-blocks/files/12309320/wordpress-e2e-test-utils-playwright-0.6.0.tgz", + "integrity": "sha512-5lo8iRuRfUOAPMRsQteSkKyMoP1IHHu6GKye8Df+YEPz1LWXcS6YRFGI3HrONBpcaHLrJC7LVav4UdB/sBPqUw==", "dev": true, "license": "GPL-2.0-or-later", "dependencies": { @@ -16127,6 +16128,68 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@wordpress/e2e-tests/node_modules/babel-jest": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz", + "integrity": "sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==", + "dev": true, + "dependencies": { + "@jest/transform": "^27.5.1", + "@jest/types": "^27.5.1", + "@types/babel__core": "^7.1.14", + "babel-plugin-istanbul": "^6.1.1", + "babel-preset-jest": "^27.5.1", + "chalk": "^4.0.0", + "graceful-fs": "^4.2.9", + "slash": "^3.0.0" + }, + "engines": { + "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" + }, + "peerDependencies": { + "@babel/core": "^7.8.0" + } + }, + "node_modules/@wordpress/e2e-tests/node_modules/babel-jest/node_modules/slash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", + "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@wordpress/e2e-tests/node_modules/babel-plugin-jest-hoist": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.5.1.tgz", + "integrity": "sha512-50wCwD5EMNW4aRpOwtqzyZHIewTYNxLA4nhB+09d8BIssfNfzBRhkBIHiaPv1Si226TQSvp8gxAJm2iY2qs2hQ==", + "dev": true, + "dependencies": { + "@babel/template": "^7.3.3", + "@babel/types": "^7.3.3", + "@types/babel__core": "^7.0.0", + "@types/babel__traverse": "^7.0.6" + }, + "engines": { + "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" + } + }, + "node_modules/@wordpress/e2e-tests/node_modules/babel-preset-jest": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-27.5.1.tgz", + "integrity": "sha512-Nptf2FzlPCWYuJg41HBqXVT8ym6bXOevuCTbhxlUpjwtysGaIWFvDEjp4y+G7fl13FgOdjs7P/DmErqH7da0Ag==", + "dev": true, + "dependencies": { + "babel-plugin-jest-hoist": "^27.5.1", + "babel-preset-current-node-syntax": "^1.0.0" + }, + "engines": { + "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, "node_modules/@wordpress/e2e-tests/node_modules/ci-info": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.2.tgz", @@ -17389,6 +17452,68 @@ "react-dom": "^17.0.0" } }, + "node_modules/@wordpress/jest-preset-default/node_modules/babel-jest": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz", + "integrity": "sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==", + "dev": true, + "dependencies": { + "@jest/transform": "^27.5.1", + "@jest/types": "^27.5.1", + "@types/babel__core": "^7.1.14", + "babel-plugin-istanbul": "^6.1.1", + "babel-preset-jest": "^27.5.1", + "chalk": "^4.0.0", + "graceful-fs": "^4.2.9", + "slash": "^3.0.0" + }, + "engines": { + "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" + }, + "peerDependencies": { + "@babel/core": "^7.8.0" + } + }, + "node_modules/@wordpress/jest-preset-default/node_modules/babel-plugin-jest-hoist": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.5.1.tgz", + "integrity": "sha512-50wCwD5EMNW4aRpOwtqzyZHIewTYNxLA4nhB+09d8BIssfNfzBRhkBIHiaPv1Si226TQSvp8gxAJm2iY2qs2hQ==", + "dev": true, + "dependencies": { + "@babel/template": "^7.3.3", + "@babel/types": "^7.3.3", + "@types/babel__core": "^7.0.0", + "@types/babel__traverse": "^7.0.6" + }, + "engines": { + "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" + } + }, + "node_modules/@wordpress/jest-preset-default/node_modules/babel-preset-jest": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-27.5.1.tgz", + "integrity": "sha512-Nptf2FzlPCWYuJg41HBqXVT8ym6bXOevuCTbhxlUpjwtysGaIWFvDEjp4y+G7fl13FgOdjs7P/DmErqH7da0Ag==", + "dev": true, + "dependencies": { + "babel-plugin-jest-hoist": "^27.5.1", + "babel-preset-current-node-syntax": "^1.0.0" + }, + "engines": { + "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@wordpress/jest-preset-default/node_modules/slash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", + "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/@wordpress/jest-puppeteer-axe": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/@wordpress/jest-puppeteer-axe/-/jest-puppeteer-axe-4.0.2.tgz", @@ -18297,6 +18422,68 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@wordpress/scripts/node_modules/babel-jest": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz", + "integrity": "sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==", + "dev": true, + "dependencies": { + "@jest/transform": "^27.5.1", + "@jest/types": "^27.5.1", + "@types/babel__core": "^7.1.14", + "babel-plugin-istanbul": "^6.1.1", + "babel-preset-jest": "^27.5.1", + "chalk": "^4.0.0", + "graceful-fs": "^4.2.9", + "slash": "^3.0.0" + }, + "engines": { + "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" + }, + "peerDependencies": { + "@babel/core": "^7.8.0" + } + }, + "node_modules/@wordpress/scripts/node_modules/babel-jest/node_modules/slash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", + "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@wordpress/scripts/node_modules/babel-plugin-jest-hoist": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.5.1.tgz", + "integrity": "sha512-50wCwD5EMNW4aRpOwtqzyZHIewTYNxLA4nhB+09d8BIssfNfzBRhkBIHiaPv1Si226TQSvp8gxAJm2iY2qs2hQ==", + "dev": true, + "dependencies": { + "@babel/template": "^7.3.3", + "@babel/types": "^7.3.3", + "@types/babel__core": "^7.0.0", + "@types/babel__traverse": "^7.0.6" + }, + "engines": { + "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" + } + }, + "node_modules/@wordpress/scripts/node_modules/babel-preset-jest": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-27.5.1.tgz", + "integrity": "sha512-Nptf2FzlPCWYuJg41HBqXVT8ym6bXOevuCTbhxlUpjwtysGaIWFvDEjp4y+G7fl13FgOdjs7P/DmErqH7da0Ag==", + "dev": true, + "dependencies": { + "babel-plugin-jest-hoist": "^27.5.1", + "babel-preset-current-node-syntax": "^1.0.0" + }, + "engines": { + "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, "node_modules/@wordpress/scripts/node_modules/ci-info": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz", @@ -21004,27 +21191,150 @@ } }, "node_modules/babel-jest": { - "version": "27.5.1", - "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz", - "integrity": "sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==", + "version": "29.6.2", + "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.6.2.tgz", + "integrity": "sha512-BYCzImLos6J3BH/+HvUCHG1dTf2MzmAB4jaVxHV+29RZLjR29XuYTmsf2sdDwkrb+FczkGo3kOhE7ga6sI0P4A==", "dev": true, "dependencies": { - "@jest/transform": "^27.5.1", - "@jest/types": "^27.5.1", + "@jest/transform": "^29.6.2", "@types/babel__core": "^7.1.14", "babel-plugin-istanbul": "^6.1.1", - "babel-preset-jest": "^27.5.1", + "babel-preset-jest": "^29.5.0", "chalk": "^4.0.0", "graceful-fs": "^4.2.9", "slash": "^3.0.0" }, "engines": { - "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" }, "peerDependencies": { "@babel/core": "^7.8.0" } }, + "node_modules/babel-jest/node_modules/@jest/transform": { + "version": "29.6.2", + "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-29.6.2.tgz", + "integrity": "sha512-ZqCqEISr58Ce3U+buNFJYUktLJZOggfyvR+bZMaiV1e8B1SIvJbwZMrYz3gx/KAPn9EXmOmN+uB08yLCjWkQQg==", + "dev": true, + "dependencies": { + "@babel/core": "^7.11.6", + "@jest/types": "^29.6.1", + "@jridgewell/trace-mapping": "^0.3.18", + "babel-plugin-istanbul": "^6.1.1", + "chalk": "^4.0.0", + "convert-source-map": "^2.0.0", + "fast-json-stable-stringify": "^2.1.0", + "graceful-fs": "^4.2.9", + "jest-haste-map": "^29.6.2", + "jest-regex-util": "^29.4.3", + "jest-util": "^29.6.2", + "micromatch": "^4.0.4", + "pirates": "^4.0.4", + "slash": "^3.0.0", + "write-file-atomic": "^4.0.2" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/babel-jest/node_modules/@jest/types": { + "version": "29.6.1", + "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.6.1.tgz", + "integrity": "sha512-tPKQNMPuXgvdOn2/Lg9HNfUvjYVGolt04Hp03f5hAk878uwOLikN+JzeLY0HcVgKgFl9Hs3EIqpu3WX27XNhnw==", + "dev": true, + "dependencies": { + "@jest/schemas": "^29.6.0", + "@types/istanbul-lib-coverage": "^2.0.0", + "@types/istanbul-reports": "^3.0.0", + "@types/node": "*", + "@types/yargs": "^17.0.8", + "chalk": "^4.0.0" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/babel-jest/node_modules/@types/yargs": { + "version": "17.0.24", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.24.tgz", + "integrity": "sha512-6i0aC7jV6QzQB8ne1joVZ0eSFIstHsCrobmOtghM11yGlH0j43FKL2UhWdELkyps0zuf7qVTUVCCR+tgSlyLLw==", + "dev": true, + "dependencies": { + "@types/yargs-parser": "*" + } + }, + "node_modules/babel-jest/node_modules/ci-info": { + "version": "3.8.0", + "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.8.0.tgz", + "integrity": "sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/sibiraj-s" + } + ], + "engines": { + "node": ">=8" + } + }, + "node_modules/babel-jest/node_modules/convert-source-map": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", + "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", + "dev": true + }, + "node_modules/babel-jest/node_modules/jest-haste-map": { + "version": "29.6.2", + "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-29.6.2.tgz", + "integrity": "sha512-+51XleTDAAysvU8rT6AnS1ZJ+WHVNqhj1k6nTvN2PYP+HjU3kqlaKQ1Lnw3NYW3bm2r8vq82X0Z1nDDHZMzHVA==", + "dev": true, + "dependencies": { + "@jest/types": "^29.6.1", + "@types/graceful-fs": "^4.1.3", + "@types/node": "*", + "anymatch": "^3.0.3", + "fb-watchman": "^2.0.0", + "graceful-fs": "^4.2.9", + "jest-regex-util": "^29.4.3", + "jest-util": "^29.6.2", + "jest-worker": "^29.6.2", + "micromatch": "^4.0.4", + "walker": "^1.0.8" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + }, + "optionalDependencies": { + "fsevents": "^2.3.2" + } + }, + "node_modules/babel-jest/node_modules/jest-regex-util": { + "version": "29.4.3", + "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-29.4.3.tgz", + "integrity": "sha512-O4FglZaMmWXbGHSQInfXewIsd1LMn9p3ZXB/6r4FOkyhX2/iP/soMG98jGvk/A3HAN78+5VWcBGO0BJAPRh4kg==", + "dev": true, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/babel-jest/node_modules/jest-util": { + "version": "29.6.2", + "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.6.2.tgz", + "integrity": "sha512-3eX1qb6L88lJNCFlEADKOkjpXJQyZRiavX1INZ4tRnrBVr2COd3RgcTLyUiEXMNBlDU/cgYq6taUS0fExrWW4w==", + "dev": true, + "dependencies": { + "@jest/types": "^29.6.1", + "@types/node": "*", + "chalk": "^4.0.0", + "ci-info": "^3.2.0", + "graceful-fs": "^4.2.9", + "picomatch": "^2.2.3" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, "node_modules/babel-jest/node_modules/slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", @@ -21034,6 +21344,19 @@ "node": ">=8" } }, + "node_modules/babel-jest/node_modules/write-file-atomic": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-4.0.2.tgz", + "integrity": "sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==", + "dev": true, + "dependencies": { + "imurmurhash": "^0.1.4", + "signal-exit": "^3.0.7" + }, + "engines": { + "node": "^12.13.0 || ^14.15.0 || >=16.0.0" + } + }, "node_modules/babel-loader": { "version": "8.2.5", "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.5.tgz", @@ -21265,18 +21588,18 @@ } }, "node_modules/babel-plugin-jest-hoist": { - "version": "27.5.1", - "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.5.1.tgz", - "integrity": "sha512-50wCwD5EMNW4aRpOwtqzyZHIewTYNxLA4nhB+09d8BIssfNfzBRhkBIHiaPv1Si226TQSvp8gxAJm2iY2qs2hQ==", + "version": "29.5.0", + "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-29.5.0.tgz", + "integrity": "sha512-zSuuuAlTMT4mzLj2nPnUm6fsE6270vdOfnpbJ+RmruU75UhLFvL0N2NgI7xpeS7NaB6hGqmd5pVpGTDYvi4Q3w==", "dev": true, "dependencies": { "@babel/template": "^7.3.3", "@babel/types": "^7.3.3", - "@types/babel__core": "^7.0.0", + "@types/babel__core": "^7.1.14", "@types/babel__traverse": "^7.0.6" }, "engines": { - "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } }, "node_modules/babel-plugin-macros": { @@ -21498,16 +21821,16 @@ } }, "node_modules/babel-preset-jest": { - "version": "27.5.1", - "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-27.5.1.tgz", - "integrity": "sha512-Nptf2FzlPCWYuJg41HBqXVT8ym6bXOevuCTbhxlUpjwtysGaIWFvDEjp4y+G7fl13FgOdjs7P/DmErqH7da0Ag==", + "version": "29.5.0", + "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-29.5.0.tgz", + "integrity": "sha512-JOMloxOqdiBSxMAzjRaH023/vvcaSaec49zvg+2LmNsktC7ei39LTJGw02J+9uUtTZUq6xbLyJ4dxe9sSmIuAg==", "dev": true, "dependencies": { - "babel-plugin-jest-hoist": "^27.5.1", + "babel-plugin-jest-hoist": "^29.5.0", "babel-preset-current-node-syntax": "^1.0.0" }, "engines": { - "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" }, "peerDependencies": { "@babel/core": "^7.0.0" @@ -25874,15 +26197,28 @@ } }, "node_modules/deepsignal": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/deepsignal/-/deepsignal-1.1.1.tgz", - "integrity": "sha512-ZcRi5KogA7hQiJcnUDGrDno7OCwfyBdcP96yf4BHF3JsUc8SRt3w24RZX6L0Ejijnol8Jt5cV5X8h0dotixHHA==", - "dependencies": { - "@preact/signals": "^1.0.0", - "@preact/signals-core": "^1.0.0" - }, + "version": "1.3.6", + "resolved": "https://registry.npmjs.org/deepsignal/-/deepsignal-1.3.6.tgz", + "integrity": "sha512-yjd+vtiznL6YaMptOsKnEKkPr60OEApa+LRe+Qe6Ile/RfCOrELKk/YM3qVpXFZiyOI3Ng67GDEyjAlqVc697g==", "peerDependencies": { - "preact": "10.x" + "@preact/signals": "^1.1.4", + "@preact/signals-core": "^1.3.1", + "@preact/signals-react": "^1.3.3", + "preact": "^10.16.0" + }, + "peerDependenciesMeta": { + "@preact/signals": { + "optional": true + }, + "@preact/signals-core": { + "optional": true + }, + "@preact/signals-react": { + "optional": true + }, + "preact": { + "optional": true + } } }, "node_modules/default-browser-id": { @@ -33603,6 +33939,59 @@ "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" } }, + "node_modules/jest-cli/node_modules/babel-jest": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz", + "integrity": "sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==", + "dev": true, + "dependencies": { + "@jest/transform": "^27.5.1", + "@jest/types": "^27.5.1", + "@types/babel__core": "^7.1.14", + "babel-plugin-istanbul": "^6.1.1", + "babel-preset-jest": "^27.5.1", + "chalk": "^4.0.0", + "graceful-fs": "^4.2.9", + "slash": "^3.0.0" + }, + "engines": { + "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" + }, + "peerDependencies": { + "@babel/core": "^7.8.0" + } + }, + "node_modules/jest-cli/node_modules/babel-plugin-jest-hoist": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.5.1.tgz", + "integrity": "sha512-50wCwD5EMNW4aRpOwtqzyZHIewTYNxLA4nhB+09d8BIssfNfzBRhkBIHiaPv1Si226TQSvp8gxAJm2iY2qs2hQ==", + "dev": true, + "dependencies": { + "@babel/template": "^7.3.3", + "@babel/types": "^7.3.3", + "@types/babel__core": "^7.0.0", + "@types/babel__traverse": "^7.0.6" + }, + "engines": { + "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" + } + }, + "node_modules/jest-cli/node_modules/babel-preset-jest": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-27.5.1.tgz", + "integrity": "sha512-Nptf2FzlPCWYuJg41HBqXVT8ym6bXOevuCTbhxlUpjwtysGaIWFvDEjp4y+G7fl13FgOdjs7P/DmErqH7da0Ag==", + "dev": true, + "dependencies": { + "babel-plugin-jest-hoist": "^27.5.1", + "babel-preset-current-node-syntax": "^1.0.0" + }, + "engines": { + "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, "node_modules/jest-cli/node_modules/ci-info": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.1.tgz", @@ -34212,58 +34601,6 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/jest-config/node_modules/babel-jest": { - "version": "29.5.0", - "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.5.0.tgz", - "integrity": "sha512-mA4eCDh5mSo2EcA9xQjVTpmbbNk32Zb3Q3QFQsNhaK56Q+yoXowzFodLux30HRgyOho5rsQ6B0P9QpMkvvnJ0Q==", - "dev": true, - "dependencies": { - "@jest/transform": "^29.5.0", - "@types/babel__core": "^7.1.14", - "babel-plugin-istanbul": "^6.1.1", - "babel-preset-jest": "^29.5.0", - "chalk": "^4.0.0", - "graceful-fs": "^4.2.9", - "slash": "^3.0.0" - }, - "engines": { - "node": "^14.15.0 || ^16.10.0 || >=18.0.0" - }, - "peerDependencies": { - "@babel/core": "^7.8.0" - } - }, - "node_modules/jest-config/node_modules/babel-plugin-jest-hoist": { - "version": "29.5.0", - "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-29.5.0.tgz", - "integrity": "sha512-zSuuuAlTMT4mzLj2nPnUm6fsE6270vdOfnpbJ+RmruU75UhLFvL0N2NgI7xpeS7NaB6hGqmd5pVpGTDYvi4Q3w==", - "dev": true, - "dependencies": { - "@babel/template": "^7.3.3", - "@babel/types": "^7.3.3", - "@types/babel__core": "^7.1.14", - "@types/babel__traverse": "^7.0.6" - }, - "engines": { - "node": "^14.15.0 || ^16.10.0 || >=18.0.0" - } - }, - "node_modules/jest-config/node_modules/babel-preset-jest": { - "version": "29.5.0", - "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-29.5.0.tgz", - "integrity": "sha512-JOMloxOqdiBSxMAzjRaH023/vvcaSaec49zvg+2LmNsktC7ei39LTJGw02J+9uUtTZUq6xbLyJ4dxe9sSmIuAg==", - "dev": true, - "dependencies": { - "babel-plugin-jest-hoist": "^29.5.0", - "babel-preset-current-node-syntax": "^1.0.0" - }, - "engines": { - "node": "^14.15.0 || ^16.10.0 || >=18.0.0" - }, - "peerDependencies": { - "@babel/core": "^7.0.0" - } - }, "node_modules/jest-config/node_modules/ci-info": { "version": "3.8.0", "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.8.0.tgz", @@ -36664,13 +37001,13 @@ } }, "node_modules/jest-worker": { - "version": "29.5.0", - "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-29.5.0.tgz", - "integrity": "sha512-NcrQnevGoSp4b5kg+akIpthoAFHxPBcb5P6mYPY0fUNT+sSvmtu6jlkEle3anczUKIKEbMxFimk9oTP/tpIPgA==", + "version": "29.6.2", + "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-29.6.2.tgz", + "integrity": "sha512-l3ccBOabTdkng8I/ORCkADz4eSMKejTYv1vB/Z83UiubqhC1oQ5Li6dWCyqOIvSifGjUBxuvxvlm6KGK2DtuAQ==", "dev": true, "dependencies": { "@types/node": "*", - "jest-util": "^29.5.0", + "jest-util": "^29.6.2", "merge-stream": "^2.0.0", "supports-color": "^8.0.0" }, @@ -36679,12 +37016,12 @@ } }, "node_modules/jest-worker/node_modules/@jest/types": { - "version": "29.5.0", - "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.5.0.tgz", - "integrity": "sha512-qbu7kN6czmVRc3xWFQcAN03RAUamgppVUdXrvl1Wr3jlNF93o9mJbGcDWrwGB6ht44u7efB1qCFgVQmca24Uog==", + "version": "29.6.1", + "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.6.1.tgz", + "integrity": "sha512-tPKQNMPuXgvdOn2/Lg9HNfUvjYVGolt04Hp03f5hAk878uwOLikN+JzeLY0HcVgKgFl9Hs3EIqpu3WX27XNhnw==", "dev": true, "dependencies": { - "@jest/schemas": "^29.4.3", + "@jest/schemas": "^29.6.0", "@types/istanbul-lib-coverage": "^2.0.0", "@types/istanbul-reports": "^3.0.0", "@types/node": "*", @@ -36720,12 +37057,12 @@ } }, "node_modules/jest-worker/node_modules/jest-util": { - "version": "29.5.0", - "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.5.0.tgz", - "integrity": "sha512-RYMgG/MTadOr5t8KdhejfvUU82MxsCu5MF6KuDUHl+NuwzUt+Sm6jJWxTJVrDR1j5M/gJVCPKQEpWXY+yIQ6lQ==", + "version": "29.6.2", + "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.6.2.tgz", + "integrity": "sha512-3eX1qb6L88lJNCFlEADKOkjpXJQyZRiavX1INZ4tRnrBVr2COd3RgcTLyUiEXMNBlDU/cgYq6taUS0fExrWW4w==", "dev": true, "dependencies": { - "@jest/types": "^29.5.0", + "@jest/types": "^29.6.1", "@types/node": "*", "chalk": "^4.0.0", "ci-info": "^3.2.0", @@ -43935,9 +44272,9 @@ "dev": true }, "node_modules/preact": { - "version": "10.11.3", - "resolved": "https://registry.npmjs.org/preact/-/preact-10.11.3.tgz", - "integrity": "sha512-eY93IVpod/zG3uMF22Unl8h9KkrcKIRs2EGar8hwLZZDU1lkjph303V9HZBwufh2s736U6VXuhD109LYqPoffg==", + "version": "10.16.0", + "resolved": "https://registry.npmjs.org/preact/-/preact-10.16.0.tgz", + "integrity": "sha512-XTSj3dJ4roKIC93pald6rWuB2qQJO9gO2iLLyTe87MrjQN+HklueLsmskbywEWqCHlclgz3/M4YLL2iBr9UmMA==", "funding": { "type": "opencollective", "url": "https://opencollective.com/preact" @@ -65592,8 +65929,9 @@ } }, "@wordpress/e2e-test-utils-playwright": { - "version": "https://github.com/woocommerce/woocommerce-blocks/files/11286971/wordpress-e2e-test-utils-playwright-0.0.0.tgz", - "integrity": "sha512-BLtq8Vcsyxbac1d8I+klE2Zrhbso3DJ2YTRl3ZmZ6KMiIiYWCvPLLIbtYAWiIDy6NU2jiT1wLlJ4G4jyV3DhIQ==", + "version": "0.6.0", + "resolved": "https://github.com/woocommerce/woocommerce-blocks/files/12309320/wordpress-e2e-test-utils-playwright-0.6.0.tgz", + "integrity": "sha512-5lo8iRuRfUOAPMRsQteSkKyMoP1IHHu6GKye8Df+YEPz1LWXcS6YRFGI3HrONBpcaHLrJC7LVav4UdB/sBPqUw==", "dev": true, "requires": { "@wordpress/api-fetch": "file:../api-fetch", @@ -66164,6 +66502,52 @@ "integrity": "sha512-1OvF9IbWwaeiM9VhzYXVQacMibxpXOMYVNIvMtKRyX9SImBXpKcFr8XvFDeEslCyuH/t6KRt7HEO94AlP8Iatw==", "dev": true }, + "babel-jest": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz", + "integrity": "sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==", + "dev": true, + "requires": { + "@jest/transform": "^27.5.1", + "@jest/types": "^27.5.1", + "@types/babel__core": "^7.1.14", + "babel-plugin-istanbul": "^6.1.1", + "babel-preset-jest": "^27.5.1", + "chalk": "^4.0.0", + "graceful-fs": "^4.2.9", + "slash": "^3.0.0" + }, + "dependencies": { + "slash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", + "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", + "dev": true + } + } + }, + "babel-plugin-jest-hoist": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.5.1.tgz", + "integrity": "sha512-50wCwD5EMNW4aRpOwtqzyZHIewTYNxLA4nhB+09d8BIssfNfzBRhkBIHiaPv1Si226TQSvp8gxAJm2iY2qs2hQ==", + "dev": true, + "requires": { + "@babel/template": "^7.3.3", + "@babel/types": "^7.3.3", + "@types/babel__core": "^7.0.0", + "@types/babel__traverse": "^7.0.6" + } + }, + "babel-preset-jest": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-27.5.1.tgz", + "integrity": "sha512-Nptf2FzlPCWYuJg41HBqXVT8ym6bXOevuCTbhxlUpjwtysGaIWFvDEjp4y+G7fl13FgOdjs7P/DmErqH7da0Ag==", + "dev": true, + "requires": { + "babel-plugin-jest-hoist": "^27.5.1", + "babel-preset-current-node-syntax": "^1.0.0" + } + }, "ci-info": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.2.tgz", @@ -67045,6 +67429,52 @@ "babel-jest": "^27.4.5", "enzyme": "^3.11.0", "enzyme-to-json": "^3.4.4" + }, + "dependencies": { + "babel-jest": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz", + "integrity": "sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==", + "dev": true, + "requires": { + "@jest/transform": "^27.5.1", + "@jest/types": "^27.5.1", + "@types/babel__core": "^7.1.14", + "babel-plugin-istanbul": "^6.1.1", + "babel-preset-jest": "^27.5.1", + "chalk": "^4.0.0", + "graceful-fs": "^4.2.9", + "slash": "^3.0.0" + } + }, + "babel-plugin-jest-hoist": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.5.1.tgz", + "integrity": "sha512-50wCwD5EMNW4aRpOwtqzyZHIewTYNxLA4nhB+09d8BIssfNfzBRhkBIHiaPv1Si226TQSvp8gxAJm2iY2qs2hQ==", + "dev": true, + "requires": { + "@babel/template": "^7.3.3", + "@babel/types": "^7.3.3", + "@types/babel__core": "^7.0.0", + "@types/babel__traverse": "^7.0.6" + } + }, + "babel-preset-jest": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-27.5.1.tgz", + "integrity": "sha512-Nptf2FzlPCWYuJg41HBqXVT8ym6bXOevuCTbhxlUpjwtysGaIWFvDEjp4y+G7fl13FgOdjs7P/DmErqH7da0Ag==", + "dev": true, + "requires": { + "babel-plugin-jest-hoist": "^27.5.1", + "babel-preset-current-node-syntax": "^1.0.0" + } + }, + "slash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", + "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", + "dev": true + } } }, "@wordpress/jest-puppeteer-axe": { @@ -67747,6 +68177,52 @@ "integrity": "sha512-1OvF9IbWwaeiM9VhzYXVQacMibxpXOMYVNIvMtKRyX9SImBXpKcFr8XvFDeEslCyuH/t6KRt7HEO94AlP8Iatw==", "dev": true }, + "babel-jest": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz", + "integrity": "sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==", + "dev": true, + "requires": { + "@jest/transform": "^27.5.1", + "@jest/types": "^27.5.1", + "@types/babel__core": "^7.1.14", + "babel-plugin-istanbul": "^6.1.1", + "babel-preset-jest": "^27.5.1", + "chalk": "^4.0.0", + "graceful-fs": "^4.2.9", + "slash": "^3.0.0" + }, + "dependencies": { + "slash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", + "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", + "dev": true + } + } + }, + "babel-plugin-jest-hoist": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.5.1.tgz", + "integrity": "sha512-50wCwD5EMNW4aRpOwtqzyZHIewTYNxLA4nhB+09d8BIssfNfzBRhkBIHiaPv1Si226TQSvp8gxAJm2iY2qs2hQ==", + "dev": true, + "requires": { + "@babel/template": "^7.3.3", + "@babel/types": "^7.3.3", + "@types/babel__core": "^7.0.0", + "@types/babel__traverse": "^7.0.6" + } + }, + "babel-preset-jest": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-27.5.1.tgz", + "integrity": "sha512-Nptf2FzlPCWYuJg41HBqXVT8ym6bXOevuCTbhxlUpjwtysGaIWFvDEjp4y+G7fl13FgOdjs7P/DmErqH7da0Ag==", + "dev": true, + "requires": { + "babel-plugin-jest-hoist": "^27.5.1", + "babel-preset-current-node-syntax": "^1.0.0" + } + }, "ci-info": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz", @@ -69777,26 +70253,133 @@ } }, "babel-jest": { - "version": "27.5.1", - "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz", - "integrity": "sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==", + "version": "29.6.2", + "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.6.2.tgz", + "integrity": "sha512-BYCzImLos6J3BH/+HvUCHG1dTf2MzmAB4jaVxHV+29RZLjR29XuYTmsf2sdDwkrb+FczkGo3kOhE7ga6sI0P4A==", "dev": true, "requires": { - "@jest/transform": "^27.5.1", - "@jest/types": "^27.5.1", + "@jest/transform": "^29.6.2", "@types/babel__core": "^7.1.14", "babel-plugin-istanbul": "^6.1.1", - "babel-preset-jest": "^27.5.1", + "babel-preset-jest": "^29.5.0", "chalk": "^4.0.0", "graceful-fs": "^4.2.9", "slash": "^3.0.0" }, "dependencies": { + "@jest/transform": { + "version": "29.6.2", + "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-29.6.2.tgz", + "integrity": "sha512-ZqCqEISr58Ce3U+buNFJYUktLJZOggfyvR+bZMaiV1e8B1SIvJbwZMrYz3gx/KAPn9EXmOmN+uB08yLCjWkQQg==", + "dev": true, + "requires": { + "@babel/core": "^7.11.6", + "@jest/types": "^29.6.1", + "@jridgewell/trace-mapping": "^0.3.18", + "babel-plugin-istanbul": "^6.1.1", + "chalk": "^4.0.0", + "convert-source-map": "^2.0.0", + "fast-json-stable-stringify": "^2.1.0", + "graceful-fs": "^4.2.9", + "jest-haste-map": "^29.6.2", + "jest-regex-util": "^29.4.3", + "jest-util": "^29.6.2", + "micromatch": "^4.0.4", + "pirates": "^4.0.4", + "slash": "^3.0.0", + "write-file-atomic": "^4.0.2" + } + }, + "@jest/types": { + "version": "29.6.1", + "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.6.1.tgz", + "integrity": "sha512-tPKQNMPuXgvdOn2/Lg9HNfUvjYVGolt04Hp03f5hAk878uwOLikN+JzeLY0HcVgKgFl9Hs3EIqpu3WX27XNhnw==", + "dev": true, + "requires": { + "@jest/schemas": "^29.6.0", + "@types/istanbul-lib-coverage": "^2.0.0", + "@types/istanbul-reports": "^3.0.0", + "@types/node": "*", + "@types/yargs": "^17.0.8", + "chalk": "^4.0.0" + } + }, + "@types/yargs": { + "version": "17.0.24", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.24.tgz", + "integrity": "sha512-6i0aC7jV6QzQB8ne1joVZ0eSFIstHsCrobmOtghM11yGlH0j43FKL2UhWdELkyps0zuf7qVTUVCCR+tgSlyLLw==", + "dev": true, + "requires": { + "@types/yargs-parser": "*" + } + }, + "ci-info": { + "version": "3.8.0", + "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.8.0.tgz", + "integrity": "sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==", + "dev": true + }, + "convert-source-map": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", + "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", + "dev": true + }, + "jest-haste-map": { + "version": "29.6.2", + "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-29.6.2.tgz", + "integrity": "sha512-+51XleTDAAysvU8rT6AnS1ZJ+WHVNqhj1k6nTvN2PYP+HjU3kqlaKQ1Lnw3NYW3bm2r8vq82X0Z1nDDHZMzHVA==", + "dev": true, + "requires": { + "@jest/types": "^29.6.1", + "@types/graceful-fs": "^4.1.3", + "@types/node": "*", + "anymatch": "^3.0.3", + "fb-watchman": "^2.0.0", + "fsevents": "^2.3.2", + "graceful-fs": "^4.2.9", + "jest-regex-util": "^29.4.3", + "jest-util": "^29.6.2", + "jest-worker": "^29.6.2", + "micromatch": "^4.0.4", + "walker": "^1.0.8" + } + }, + "jest-regex-util": { + "version": "29.4.3", + "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-29.4.3.tgz", + "integrity": "sha512-O4FglZaMmWXbGHSQInfXewIsd1LMn9p3ZXB/6r4FOkyhX2/iP/soMG98jGvk/A3HAN78+5VWcBGO0BJAPRh4kg==", + "dev": true + }, + "jest-util": { + "version": "29.6.2", + "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.6.2.tgz", + "integrity": "sha512-3eX1qb6L88lJNCFlEADKOkjpXJQyZRiavX1INZ4tRnrBVr2COd3RgcTLyUiEXMNBlDU/cgYq6taUS0fExrWW4w==", + "dev": true, + "requires": { + "@jest/types": "^29.6.1", + "@types/node": "*", + "chalk": "^4.0.0", + "ci-info": "^3.2.0", + "graceful-fs": "^4.2.9", + "picomatch": "^2.2.3" + } + }, "slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", "dev": true + }, + "write-file-atomic": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-4.0.2.tgz", + "integrity": "sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==", + "dev": true, + "requires": { + "imurmurhash": "^0.1.4", + "signal-exit": "^3.0.7" + } } } }, @@ -69976,14 +70559,14 @@ } }, "babel-plugin-jest-hoist": { - "version": "27.5.1", - "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.5.1.tgz", - "integrity": "sha512-50wCwD5EMNW4aRpOwtqzyZHIewTYNxLA4nhB+09d8BIssfNfzBRhkBIHiaPv1Si226TQSvp8gxAJm2iY2qs2hQ==", + "version": "29.5.0", + "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-29.5.0.tgz", + "integrity": "sha512-zSuuuAlTMT4mzLj2nPnUm6fsE6270vdOfnpbJ+RmruU75UhLFvL0N2NgI7xpeS7NaB6hGqmd5pVpGTDYvi4Q3w==", "dev": true, "requires": { "@babel/template": "^7.3.3", "@babel/types": "^7.3.3", - "@types/babel__core": "^7.0.0", + "@types/babel__core": "^7.1.14", "@types/babel__traverse": "^7.0.6" } }, @@ -70186,12 +70769,12 @@ } }, "babel-preset-jest": { - "version": "27.5.1", - "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-27.5.1.tgz", - "integrity": "sha512-Nptf2FzlPCWYuJg41HBqXVT8ym6bXOevuCTbhxlUpjwtysGaIWFvDEjp4y+G7fl13FgOdjs7P/DmErqH7da0Ag==", + "version": "29.5.0", + "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-29.5.0.tgz", + "integrity": "sha512-JOMloxOqdiBSxMAzjRaH023/vvcaSaec49zvg+2LmNsktC7ei39LTJGw02J+9uUtTZUq6xbLyJ4dxe9sSmIuAg==", "dev": true, "requires": { - "babel-plugin-jest-hoist": "^27.5.1", + "babel-plugin-jest-hoist": "^29.5.0", "babel-preset-current-node-syntax": "^1.0.0" } }, @@ -73591,13 +74174,10 @@ "dev": true }, "deepsignal": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/deepsignal/-/deepsignal-1.1.1.tgz", - "integrity": "sha512-ZcRi5KogA7hQiJcnUDGrDno7OCwfyBdcP96yf4BHF3JsUc8SRt3w24RZX6L0Ejijnol8Jt5cV5X8h0dotixHHA==", - "requires": { - "@preact/signals": "^1.0.0", - "@preact/signals-core": "^1.0.0" - } + "version": "1.3.6", + "resolved": "https://registry.npmjs.org/deepsignal/-/deepsignal-1.3.6.tgz", + "integrity": "sha512-yjd+vtiznL6YaMptOsKnEKkPr60OEApa+LRe+Qe6Ile/RfCOrELKk/YM3qVpXFZiyOI3Ng67GDEyjAlqVc697g==", + "requires": {} }, "default-browser-id": { "version": "1.0.4", @@ -79537,6 +80117,44 @@ "jest-runtime": "^27.5.1" } }, + "babel-jest": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz", + "integrity": "sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==", + "dev": true, + "requires": { + "@jest/transform": "^27.5.1", + "@jest/types": "^27.5.1", + "@types/babel__core": "^7.1.14", + "babel-plugin-istanbul": "^6.1.1", + "babel-preset-jest": "^27.5.1", + "chalk": "^4.0.0", + "graceful-fs": "^4.2.9", + "slash": "^3.0.0" + } + }, + "babel-plugin-jest-hoist": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.5.1.tgz", + "integrity": "sha512-50wCwD5EMNW4aRpOwtqzyZHIewTYNxLA4nhB+09d8BIssfNfzBRhkBIHiaPv1Si226TQSvp8gxAJm2iY2qs2hQ==", + "dev": true, + "requires": { + "@babel/template": "^7.3.3", + "@babel/types": "^7.3.3", + "@types/babel__core": "^7.0.0", + "@types/babel__traverse": "^7.0.6" + } + }, + "babel-preset-jest": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-27.5.1.tgz", + "integrity": "sha512-Nptf2FzlPCWYuJg41HBqXVT8ym6bXOevuCTbhxlUpjwtysGaIWFvDEjp4y+G7fl13FgOdjs7P/DmErqH7da0Ag==", + "dev": true, + "requires": { + "babel-plugin-jest-hoist": "^27.5.1", + "babel-preset-current-node-syntax": "^1.0.0" + } + }, "ci-info": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.1.tgz", @@ -80007,43 +80625,6 @@ "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", "dev": true }, - "babel-jest": { - "version": "29.5.0", - "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.5.0.tgz", - "integrity": "sha512-mA4eCDh5mSo2EcA9xQjVTpmbbNk32Zb3Q3QFQsNhaK56Q+yoXowzFodLux30HRgyOho5rsQ6B0P9QpMkvvnJ0Q==", - "dev": true, - "requires": { - "@jest/transform": "^29.5.0", - "@types/babel__core": "^7.1.14", - "babel-plugin-istanbul": "^6.1.1", - "babel-preset-jest": "^29.5.0", - "chalk": "^4.0.0", - "graceful-fs": "^4.2.9", - "slash": "^3.0.0" - } - }, - "babel-plugin-jest-hoist": { - "version": "29.5.0", - "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-29.5.0.tgz", - "integrity": "sha512-zSuuuAlTMT4mzLj2nPnUm6fsE6270vdOfnpbJ+RmruU75UhLFvL0N2NgI7xpeS7NaB6hGqmd5pVpGTDYvi4Q3w==", - "dev": true, - "requires": { - "@babel/template": "^7.3.3", - "@babel/types": "^7.3.3", - "@types/babel__core": "^7.1.14", - "@types/babel__traverse": "^7.0.6" - } - }, - "babel-preset-jest": { - "version": "29.5.0", - "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-29.5.0.tgz", - "integrity": "sha512-JOMloxOqdiBSxMAzjRaH023/vvcaSaec49zvg+2LmNsktC7ei39LTJGw02J+9uUtTZUq6xbLyJ4dxe9sSmIuAg==", - "dev": true, - "requires": { - "babel-plugin-jest-hoist": "^29.5.0", - "babel-preset-current-node-syntax": "^1.0.0" - } - }, "ci-info": { "version": "3.8.0", "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.8.0.tgz", @@ -81964,24 +82545,24 @@ } }, "jest-worker": { - "version": "29.5.0", - "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-29.5.0.tgz", - "integrity": "sha512-NcrQnevGoSp4b5kg+akIpthoAFHxPBcb5P6mYPY0fUNT+sSvmtu6jlkEle3anczUKIKEbMxFimk9oTP/tpIPgA==", + "version": "29.6.2", + "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-29.6.2.tgz", + "integrity": "sha512-l3ccBOabTdkng8I/ORCkADz4eSMKejTYv1vB/Z83UiubqhC1oQ5Li6dWCyqOIvSifGjUBxuvxvlm6KGK2DtuAQ==", "dev": true, "requires": { "@types/node": "*", - "jest-util": "^29.5.0", + "jest-util": "^29.6.2", "merge-stream": "^2.0.0", "supports-color": "^8.0.0" }, "dependencies": { "@jest/types": { - "version": "29.5.0", - "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.5.0.tgz", - "integrity": "sha512-qbu7kN6czmVRc3xWFQcAN03RAUamgppVUdXrvl1Wr3jlNF93o9mJbGcDWrwGB6ht44u7efB1qCFgVQmca24Uog==", + "version": "29.6.1", + "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.6.1.tgz", + "integrity": "sha512-tPKQNMPuXgvdOn2/Lg9HNfUvjYVGolt04Hp03f5hAk878uwOLikN+JzeLY0HcVgKgFl9Hs3EIqpu3WX27XNhnw==", "dev": true, "requires": { - "@jest/schemas": "^29.4.3", + "@jest/schemas": "^29.6.0", "@types/istanbul-lib-coverage": "^2.0.0", "@types/istanbul-reports": "^3.0.0", "@types/node": "*", @@ -82005,12 +82586,12 @@ "dev": true }, "jest-util": { - "version": "29.5.0", - "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.5.0.tgz", - "integrity": "sha512-RYMgG/MTadOr5t8KdhejfvUU82MxsCu5MF6KuDUHl+NuwzUt+Sm6jJWxTJVrDR1j5M/gJVCPKQEpWXY+yIQ6lQ==", + "version": "29.6.2", + "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.6.2.tgz", + "integrity": "sha512-3eX1qb6L88lJNCFlEADKOkjpXJQyZRiavX1INZ4tRnrBVr2COd3RgcTLyUiEXMNBlDU/cgYq6taUS0fExrWW4w==", "dev": true, "requires": { - "@jest/types": "^29.5.0", + "@jest/types": "^29.6.1", "@types/node": "*", "chalk": "^4.0.0", "ci-info": "^3.2.0", @@ -87596,9 +88177,9 @@ "dev": true }, "preact": { - "version": "10.11.3", - "resolved": "https://registry.npmjs.org/preact/-/preact-10.11.3.tgz", - "integrity": "sha512-eY93IVpod/zG3uMF22Unl8h9KkrcKIRs2EGar8hwLZZDU1lkjph303V9HZBwufh2s736U6VXuhD109LYqPoffg==" + "version": "10.16.0", + "resolved": "https://registry.npmjs.org/preact/-/preact-10.16.0.tgz", + "integrity": "sha512-XTSj3dJ4roKIC93pald6rWuB2qQJO9gO2iLLyTe87MrjQN+HklueLsmskbywEWqCHlclgz3/M4YLL2iBr9UmMA==" }, "prelude-ls": { "version": "1.2.1", diff --git a/package.json b/package.json index 520f4003de3..3b3547fafb7 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@woocommerce/block-library", "title": "WooCommerce Blocks", "author": "Automattic", - "version": "10.9.0-dev", + "version": "11.0.0-dev", "description": "WooCommerce blocks for the Gutenberg editor.", "homepage": "https://github.com/woocommerce/woocommerce-gutenberg-products-block/", "keywords": [ @@ -81,6 +81,8 @@ "test:debug": "ndb .", "test:e2e": "sh ./bin/check-env.sh && npx playwright test --config=tests/e2e/playwright.config.ts", "test:e2e:report": "sh ./bin/check-env.sh && npx playwright test --config=tests/e2e/playwright.config.ts --reporter=html", + "test:e2e:side-effects": "npm run test:e2e -- --config=tests/e2e/playwright.side-effects.config.ts", + "test:e2e:side-effects:report": "npm run test:e2e:report -- --config=tests/e2e/playwright.side-effects.config.ts", "test:e2e:jest": "npm run wp-env:config && cross-env JEST_PUPPETEER_CONFIG=tests/e2e-jest/config/jest-puppeteer.config.js NODE_CONFIG_DIR=tests/e2e-jest/config wp-scripts test-e2e --config tests/e2e-jest/config/jest.config.js", "test:e2e:jest:dev": "npm run wp-env:config && cross-env JEST_PUPPETEER_CONFIG=tests/e2e-jest/config/jest-puppeteer.config-dev.js NODE_CONFIG_DIR=tests/e2e-jest/config wp-scripts test-e2e --config tests/e2e-jest/config/jest.config.js", "test:e2e:jest:dev-watch": "npm run wp-env:config && cross-env JEST_PUPPETEER_CONFIG=tests/e2e-jest/config/jest-puppeteer.config-dev.js NODE_CONFIG_DIR=tests/e2e-jest/config wp-scripts test-e2e --config tests/e2e-jest/config/jest.config.js --watch", @@ -164,7 +166,7 @@ "@wordpress/dependency-extraction-webpack-plugin": "3.2.1", "@wordpress/dom": "3.27.0", "@wordpress/e2e-test-utils": "10.1.0", - "@wordpress/e2e-test-utils-playwright": "https://github.com/woocommerce/woocommerce-blocks/files/11286971/wordpress-e2e-test-utils-playwright-0.0.0.tgz", + "@wordpress/e2e-test-utils-playwright": "0.6.0", "@wordpress/e2e-tests": "^4.6.0", "@wordpress/element": "4.20.0", "@wordpress/env": "7.0.0", @@ -175,6 +177,7 @@ "@wordpress/scripts": "24.6.0", "autoprefixer": "10.4.14", "axios": "0.27.2", + "babel-jest": "^29.6.2", "babel-plugin-explicit-exports-references": "^1.0.2", "babel-plugin-react-docgen": "4.2.1", "babel-plugin-transform-async-generator-functions": "6.24.1", @@ -267,7 +270,7 @@ "compare-versions": "4.1.3", "config": "3.3.7", "dataloader": "2.1.0", - "deepsignal": "^1.1.0", + "deepsignal": "1.3.6", "dinero.js": "1.9.1", "dompurify": "^2.4.0", "downshift": "6.1.7", diff --git a/patterns/featured-products-5-cols.php b/patterns/featured-products-5-cols.php index e793722a0f9..ae9556245bf 100644 --- a/patterns/featured-products-5-cols.php +++ b/patterns/featured-products-5-cols.php @@ -12,7 +12,7 @@ - +
diff --git a/patterns/featured-products-fresh-and-tasty.php b/patterns/featured-products-fresh-and-tasty.php index 8abaa92df69..5c987183e5d 100644 --- a/patterns/featured-products-fresh-and-tasty.php +++ b/patterns/featured-products-fresh-and-tasty.php @@ -9,28 +9,30 @@

- +
- +
- -
+ +
<?php esc_attr_e( 'Placeholder image used to represent a product being showcased as Sweet organic Lemons.', 'woo-gutenberg-products-block' ); ?>
- -
- -
+ +
+ +

-
+ +
- -
- -

+ + +
+ +

@@ -39,26 +41,28 @@
- +
- -
+ +
<?php esc_attr_e( 'Placeholder image used to represent a product being showcased as Fresh Organic Tomatoes.', 'woo-gutenberg-products-block' ); ?>
- -
- -
+ +
+ +

-
+ +
- -
- -

+ + +
+ +

@@ -67,28 +71,28 @@
- +
- -
+ +
<?php esc_attr_e( 'Placeholder image used to represent a product being showcased as Fresh Lettuce Washed.', 'woo-gutenberg-products-block' ); ?>
- -
- -
+ +
+ +

- -
- -

+ +
+ +

@@ -97,28 +101,28 @@
- +
- -
+ +
<?php esc_attr_e( 'Placeholder image used to represent a product being showcased as Russet Organic Potatoes.', 'woo-gutenberg-products-block' ); ?>
- -
- -
+ +
+ +

- -
- -

+ +
+ +

diff --git a/patterns/footer-large-dark.php b/patterns/footer-large-dark.php index 78243738bbc..27780e60f98 100644 --- a/patterns/footer-large-dark.php +++ b/patterns/footer-large-dark.php @@ -7,10 +7,8 @@ */ ?> - -
+ +
@@ -24,11 +22,11 @@ class="wp-block-group alignfull has-background-color has-white-color has-black-b -
Join the community
+
-

Learn about new products and discounts!

+

@@ -60,7 +58,7 @@ class="wp-block-group alignfull has-background-color has-white-color has-black-b
- +
diff --git a/patterns/footer-large.php b/patterns/footer-large.php index d710013e715..4bc6f37ae4a 100644 --- a/patterns/footer-large.php +++ b/patterns/footer-large.php @@ -7,8 +7,8 @@ */ ?> - -
+ +
@@ -22,11 +22,11 @@ -
Join the community
+
-

Learn about new products and discounts!

+

@@ -59,7 +59,7 @@
- +
diff --git a/patterns/footer-simple-dark.php b/patterns/footer-simple-dark.php index a5ecd171bda..11263898040 100644 --- a/patterns/footer-simple-dark.php +++ b/patterns/footer-simple-dark.php @@ -7,8 +7,8 @@ */ ?> - -
+ +
@@ -16,7 +16,7 @@
- +
diff --git a/patterns/footer-simple-menu-and-cart.php b/patterns/footer-simple-menu-and-cart.php index f8b6b1a19f1..78a23bee4fe 100644 --- a/patterns/footer-simple-menu-and-cart.php +++ b/patterns/footer-simple-menu-and-cart.php @@ -7,8 +7,8 @@ */ ?> - -
+ +
diff --git a/patterns/footer-simple.php b/patterns/footer-simple.php index 61aca316582..2c4fe74354b 100644 --- a/patterns/footer-simple.php +++ b/patterns/footer-simple.php @@ -7,8 +7,8 @@ */ ?> - -
+ +
@@ -16,7 +16,7 @@
- +
diff --git a/patterns/footer-with-2-menus-dark.php b/patterns/footer-with-2-menus-dark.php index 3bdcff70da2..ccac64755f8 100644 --- a/patterns/footer-with-2-menus-dark.php +++ b/patterns/footer-with-2-menus-dark.php @@ -7,8 +7,8 @@ */ ?> - -
+ +
diff --git a/patterns/footer-with-2-menus.php b/patterns/footer-with-2-menus.php index 1ceb1ca81b3..c39174352d6 100644 --- a/patterns/footer-with-2-menus.php +++ b/patterns/footer-with-2-menus.php @@ -7,8 +7,8 @@ */ ?> - -
+ +
diff --git a/patterns/footer-with-3-menus.php b/patterns/footer-with-3-menus.php index 1cb486cc1a0..f21b1ffba89 100644 --- a/patterns/footer-with-3-menus.php +++ b/patterns/footer-with-3-menus.php @@ -7,8 +7,8 @@ */ ?> - -
+ +
diff --git a/patterns/header-centered-search-pattern.php b/patterns/header-centered-search-pattern.php index c0364fa7626..459edfda5f2 100644 --- a/patterns/header-centered-search-pattern.php +++ b/patterns/header-centered-search-pattern.php @@ -7,8 +7,8 @@ */ ?> - -
+ +
diff --git a/patterns/header-essential-dark.php b/patterns/header-essential-dark.php index acf625ff12b..789d534f5a9 100644 --- a/patterns/header-essential-dark.php +++ b/patterns/header-essential-dark.php @@ -6,8 +6,8 @@ * Block Types: core/template-part/header */ ?> - -
+ +
diff --git a/patterns/header-essential.php b/patterns/header-essential.php index 6e4b755b493..4a3b64682f2 100644 --- a/patterns/header-essential.php +++ b/patterns/header-essential.php @@ -6,8 +6,8 @@ * Block Types: core/template-part/header */ ?> - -
+ +
diff --git a/patterns/header-large-dark.php b/patterns/header-large-dark.php index 8ffacdcbff8..f160958e432 100644 --- a/patterns/header-large-dark.php +++ b/patterns/header-large-dark.php @@ -6,8 +6,8 @@ * Block Types: core/template-part/header */ ?> - -
+ +
diff --git a/patterns/header-large.php b/patterns/header-large.php index a26e5eee298..f942cba1378 100644 --- a/patterns/header-large.php +++ b/patterns/header-large.php @@ -6,8 +6,8 @@ * Block Types: core/template-part/header */ ?> - -
+ +
diff --git a/patterns/header-minimal.php b/patterns/header-minimal.php index 92ce1229f3e..4494b5eb2a1 100644 --- a/patterns/header-minimal.php +++ b/patterns/header-minimal.php @@ -6,19 +6,27 @@ * Block Types: core/template-part/header */ ?> - -
-
-
+ +
+ +
+ + +
-
+
+ -
+
+
-
-
-
+ +
+ +
+ +
diff --git a/patterns/product-collections-featured-collection.php b/patterns/product-collections-featured-collection.php index 55296e57e8e..dd86db49fd0 100644 --- a/patterns/product-collections-featured-collection.php +++ b/patterns/product-collections-featured-collection.php @@ -21,7 +21,7 @@
- +
diff --git a/patterns/product-featured-2-columns.php b/patterns/product-featured-2-columns.php index 327a432eb21..8bc7040a5ce 100644 --- a/patterns/product-featured-2-columns.php +++ b/patterns/product-featured-2-columns.php @@ -10,7 +10,7 @@
- +
diff --git a/patterns/product-query-1-1-image-4-column-products-row.php b/patterns/product-query-1-1-image-4-column-products-row.php index acdeec5ac82..7616d87f4d9 100644 --- a/patterns/product-query-1-1-image-4-column-products-row.php +++ b/patterns/product-query-1-1-image-4-column-products-row.php @@ -6,7 +6,7 @@ * Block Types: core/query/woocommerce/product-query */ ?> - +
diff --git a/patterns/product-query-3-column-product-row.php b/patterns/product-query-3-column-product-row.php index f7bd0a3abe6..411af2ccfb1 100644 --- a/patterns/product-query-3-column-product-row.php +++ b/patterns/product-query-3-column-product-row.php @@ -6,7 +6,7 @@ * Block Types: core/query/woocommerce/product-query */ ?> - +
diff --git a/patterns/product-query-4-column-product-row.php b/patterns/product-query-4-column-product-row.php index 5af5723e01b..84f13e12662 100644 --- a/patterns/product-query-4-column-product-row.php +++ b/patterns/product-query-4-column-product-row.php @@ -6,7 +6,7 @@ * Block Types: core/query/woocommerce/product-query */ ?> - +
diff --git a/patterns/product-query-large-image-product-gallery.php b/patterns/product-query-large-image-product-gallery.php index 6118f8c8e8f..dad52f1290a 100644 --- a/patterns/product-query-large-image-product-gallery.php +++ b/patterns/product-query-large-image-product-gallery.php @@ -6,7 +6,7 @@ * Block Types: core/query/woocommerce/product-query */ ?> - +
diff --git a/patterns/product-query-minimal-5-column-products-row.php b/patterns/product-query-minimal-5-column-products-row.php index 6430802e5d3..f44180477c1 100644 --- a/patterns/product-query-minimal-5-column-products-row.php +++ b/patterns/product-query-minimal-5-column-products-row.php @@ -6,7 +6,7 @@ * Block Types: core/query/woocommerce/product-query */ ?> - +
diff --git a/patterns/product-query-minimal-product-list.php b/patterns/product-query-minimal-product-list.php index 4796321cab1..b6380f80df8 100644 --- a/patterns/product-query-minimal-product-list.php +++ b/patterns/product-query-minimal-product-list.php @@ -6,7 +6,7 @@ * Block Types: core/query/woocommerce/product-query */ ?> - +
diff --git a/patterns/product-query-product-gallery.php b/patterns/product-query-product-gallery.php index 49b16f73ba3..869905cdbeb 100644 --- a/patterns/product-query-product-gallery.php +++ b/patterns/product-query-product-gallery.php @@ -6,7 +6,7 @@ * Block Types: core/query/woocommerce/product-query */ ?> - +
diff --git a/patterns/product-query-product-list-with-1-1-images.php b/patterns/product-query-product-list-with-1-1-images.php index 59ee552954c..fad137721d6 100644 --- a/patterns/product-query-product-list-with-1-1-images.php +++ b/patterns/product-query-product-list-with-1-1-images.php @@ -6,7 +6,7 @@ * Block Types: core/query/woocommerce/product-query */ ?> - +
diff --git a/patterns/product-query-product-list-with-full-product-description.php b/patterns/product-query-product-list-with-full-product-description.php index f7a7224b780..eb3c7622da9 100644 --- a/patterns/product-query-product-list-with-full-product-description.php +++ b/patterns/product-query-product-list-with-full-product-description.php @@ -6,7 +6,7 @@ * Block Types: core/query/woocommerce/product-query */ ?> - +
diff --git a/patterns/store-info-alt-image-and-text.php b/patterns/store-info-alt-image-and-text.php index 32a2443de91..cf03354e172 100644 --- a/patterns/store-info-alt-image-and-text.php +++ b/patterns/store-info-alt-image-and-text.php @@ -6,71 +6,94 @@ */ ?> -
-
-
-
-
- +
+ +
+ +
+ +
+ <?php esc_attr_e( 'Placeholder image used to represent a person making a clay pot.', 'woo-gutenberg-products-block' ); ?> +
+ +
+ - -
-

- + +
+ +

+ - -

- + +

+ - -

- + +

+ - -
    -
    • - + +
      +
      • + - -
      • - + +
      • + - -
      • - + +
      • + - -
      • -
    -
-
- + +
    • + + + +
    + +
    + - -
    -
    -

    - + +
    + +
    + +

    + - -

    - + +

    + - -

    - + +

    + - -
    -
    -
    -
    - + +
    + +
    + +
    + +
    + +
    + - -
    -
    -
    -
    -
    + +
    + +
    + <?php esc_attr_e( 'Placeholder image used to represent clay pots.', 'woo-gutenberg-products-block' ); ?> +
    + +
    + +
    + +
    diff --git a/patterns/testimonials-single.php b/patterns/testimonials-single.php index 718c0892dbf..c5703607b3b 100644 --- a/patterns/testimonials-single.php +++ b/patterns/testimonials-single.php @@ -5,17 +5,19 @@ * Categories: WooCommerce */ ?> - -
    - -
    - -
    + +
    + +
    + +
    + <?php esc_attr_e( 'Placeholder image with the avatar of the user who is writing the testimonial.', 'woo-gutenberg-products-block' ); ?> +
    - +

    diff --git a/phpcs.xml b/phpcs.xml index 84b06358105..15c520c0987 100644 --- a/phpcs.xml +++ b/phpcs.xml @@ -8,7 +8,7 @@ languages/woo-gutenberg-products-block.php - + diff --git a/readme.txt b/readme.txt index f3b209128ba..315364c372e 100644 --- a/readme.txt +++ b/readme.txt @@ -1,10 +1,10 @@ === WooCommerce Blocks === Contributors: automattic, woocommerce, claudiulodro, tiagonoronha, jameskoster, ryelle, levinmedia, aljullu, mikejolley, nerrad, joshuawold, assassinateur, haszari, mppfeiffer, nielslange, opr18, ralucastn, tjcafferkey Tags: gutenberg, woocommerce, woo commerce, products, blocks, woocommerce blocks -Requires at least: 6.2 -Tested up to: 6.2 +Requires at least: 6.3 +Tested up to: 6.3 Requires PHP: 7.3 -Stable tag: 10.8.2 +Stable tag: 10.9.0 License: GPLv3 License URI: https://www.gnu.org/licenses/gpl-3.0.html @@ -81,6 +81,37 @@ Release and roadmap notes available on the [WooCommerce Developers Blog](https:/ == Changelog == += 10.9.0 - 2023-08-14 = + +#### Enhancements + +- Add the `wc-blocks-footer-pattern` class identifier to all footer patterns. ([10542](https://github.com/woocommerce/woocommerce-blocks/pull/10542)) +- Add the `wc-blocks-header-pattern` class identifier to all header patterns. ([10541](https://github.com/woocommerce/woocommerce-blocks/pull/10541)) +- Featured Products: Fresh & Tasty pattern: Enhance mobile view and optimize images. ([10521](https://github.com/woocommerce/woocommerce-blocks/pull/10521)) +- Add placeholder images and update text styles for the Alternating Image and Text pattern. ([10479](https://github.com/woocommerce/woocommerce-blocks/pull/10479)) +- Performance: Selecting shipping rates during checkout, and API calls in general, are now faster. Shipping selection improved by at least 1 second. ([10472](https://github.com/woocommerce/woocommerce-blocks/pull/10472)) +- Fixed wcSettings inconsistent property naming style by converting all properties to camelCase. ([10439](https://github.com/woocommerce/woocommerce-blocks/pull/10439)) +- Prevent a conflict with 3rd party plugins caused by using the session class too early. ([10373](https://github.com/woocommerce/woocommerce-blocks/pull/10373)) +- Product Collection: Use Interactivity API for pagination. ([10361](https://github.com/woocommerce/woocommerce-blocks/pull/10361)) +- Products: Fix the before/after shop item hooks. ([10332](https://github.com/woocommerce/woocommerce-blocks/pull/10332)) +- Checkout: Prevent postcode validation error notice appearing after pushing changes for other fields. ([10315](https://github.com/woocommerce/woocommerce-blocks/pull/10315)) +- Product Button block: Integrate Interactivity API to make the block dynamically. ([10006](https://github.com/woocommerce/woocommerce-blocks/pull/10006)) + +#### Bug Fixes + +- Fix Express Payments buttons display in the Cart block. ([10534](https://github.com/woocommerce/woocommerce-blocks/pull/10534)) +- Fixed a bug which caused theme border colors to not correctly show on the blocks on the editor side. ([10468](https://github.com/woocommerce/woocommerce-blocks/pull/10468)) +- Fix: Compatibility layer issue when the Products (Beta) block is the top level block. ([10455](https://github.com/woocommerce/woocommerce-blocks/pull/10455)) +- Products (Beta): Hooks are no longer fired around the empty content. ([10453](https://github.com/woocommerce/woocommerce-blocks/pull/10453)) +- Fix an issue where inner Cart blocks were incorrectly nested. ([10447](https://github.com/woocommerce/woocommerce-blocks/pull/10447)) + += 10.8.3 - 2023-08-11 = + +#### Bug Fixes + +- Create wc-all-block-styles chunk with all blocks stylesheet for classic themes. ([10543](https://github.com/woocommerce/woocommerce-blocks/pull/10543)) +- Fix the "On Sale" badge position. ([10550](https://github.com/woocommerce/woocommerce-blocks/pull/10550)) + = 10.8.2 - 2023-08-09 = #### Bug Fixes diff --git a/src/AssetsController.php b/src/AssetsController.php index 4b62c9e59cd..ea6e4f12293 100644 --- a/src/AssetsController.php +++ b/src/AssetsController.php @@ -46,10 +46,17 @@ protected function init() { * Register block scripts & styles. */ public function register_assets() { - $this->register_style( 'wc-blocks-packages-style', plugins_url( $this->api->get_block_asset_build_path( 'packages-style', 'css' ), __DIR__ ), [], 'all', true ); - $this->register_style( 'wc-blocks-style', plugins_url( $this->api->get_block_asset_build_path( 'wc-blocks', 'css' ), __DIR__ ), [], 'all', true ); $this->register_style( 'wc-blocks-editor-style', plugins_url( $this->api->get_block_asset_build_path( 'wc-blocks-editor-style', 'css' ), __DIR__ ), [ 'wp-edit-blocks' ], 'all', true ); + if ( wc_current_theme_is_fse_theme() ) { + $this->register_style( 'wc-blocks-packages-style', plugins_url( $this->api->get_block_asset_build_path( 'packages-style', 'css' ), __DIR__ ), [], 'all', true ); + $this->register_style( 'wc-blocks-style', plugins_url( $this->api->get_block_asset_build_path( 'wc-blocks', 'css' ), __DIR__ ), [], 'all', true ); + } else { + + $this->register_style( 'wc-blocks-vendors-style', plugins_url( $this->api->get_block_asset_build_path( 'wc-blocks-vendors-style', 'css' ), __DIR__ ) ); + $this->register_style( 'wc-all-blocks-style', plugins_url( $this->api->get_block_asset_build_path( 'wc-all-blocks-style', 'css' ), __DIR__ ), [ 'wc-blocks-vendors-style' ], 'all', true ); + } + $this->api->register_script( 'wc-blocks-middleware', 'build/wc-blocks-middleware.js', [], false ); $this->api->register_script( 'wc-blocks-data-store', 'build/wc-blocks-data.js', [ 'wc-blocks-middleware' ] ); $this->api->register_script( 'wc-blocks-vendors', $this->api->get_block_asset_build_path( 'wc-blocks-vendors' ), [], false ); diff --git a/src/BlockTemplatesController.php b/src/BlockTemplatesController.php index 2d717697bd8..b52774cca39 100644 --- a/src/BlockTemplatesController.php +++ b/src/BlockTemplatesController.php @@ -952,6 +952,15 @@ public function update_template_permalink( $value, $option ) { * @return string THe actual permalink assigned to the page. May differ from $permalink if it was already taken. */ protected function sync_endpoint_with_page( $page, $page_slug, $permalink ) { + $matching_page = get_page_by_path( $permalink ); + + if ( $matching_page && 'publish' === $matching_page->post_status ) { + // Existing page matches given permalink; use its ID. + update_option( 'woocommerce_' . $page_slug . '_page_id', $matching_page->ID ); + return $permalink; + } + + // No matching page; either update current page (by ID stored in option table) or create a new page. if ( ! $page ) { $updated_page_id = wc_create_page( esc_sql( $permalink ), diff --git a/src/BlockTypes/AbstractBlock.php b/src/BlockTypes/AbstractBlock.php index ba0c35a249b..be212f9ac13 100644 --- a/src/BlockTypes/AbstractBlock.php +++ b/src/BlockTypes/AbstractBlock.php @@ -303,9 +303,12 @@ protected function get_block_type_script( $key = null ) { * @return string[]|null */ protected function get_block_type_style() { - $this->asset_api->register_style( 'wc-blocks-style-' . $this->block_name, $this->asset_api->get_block_asset_build_path( $this->block_name, 'css' ), [], 'all', true ); + if ( wc_current_theme_is_fse_theme() ) { + $this->asset_api->register_style( 'wc-blocks-style-' . $this->block_name, $this->asset_api->get_block_asset_build_path( $this->block_name, 'css' ), [], 'all', true ); + return [ 'wc-blocks-style', 'wc-blocks-style-' . $this->block_name ]; + } - return [ 'wc-blocks-style', 'wc-blocks-style-' . $this->block_name ]; + return [ 'wc-all-blocks-style' ]; } /** diff --git a/src/BlockTypes/ProductButton.php b/src/BlockTypes/ProductButton.php index a7e80073299..6bd773a5912 100644 --- a/src/BlockTypes/ProductButton.php +++ b/src/BlockTypes/ProductButton.php @@ -15,11 +15,20 @@ class ProductButton extends AbstractBlock { */ protected $block_name = 'product-button'; + /** - * It is necessary to register and enqueue assets during the render phase because we want to load assets only if the block has the content. + * Get the frontend script handle for this block type. + * + * @param string $key Data to get, or default to everything. */ - protected function register_block_type_assets() { - return null; + protected function get_block_type_script( $key = null ) { + $script = [ + 'handle' => 'wc-' . $this->block_name . '-interactivity-frontend', + 'path' => $this->asset_api->get_block_asset_build_path( $this->block_name . '-interactivity-frontend' ), + 'dependencies' => [ 'wc-interactivity' ], + ]; + + return $key ? $script[ $key ] : $script; } /** @@ -29,6 +38,32 @@ protected function get_block_type_uses_context() { return [ 'query', 'queryId', 'postId' ]; } + /** + * Enqueue frontend assets for this block, just in time for rendering. + * + * @param array $attributes Any attributes that currently are available from the block. + */ + protected function enqueue_assets( array $attributes ) { + parent::enqueue_assets( $attributes ); + if ( wc_current_theme_is_fse_theme() ) { + add_action( + 'wp_enqueue_scripts', + array( $this, 'dequeue_add_to_cart_scripts' ) + ); + } else { + $this->dequeue_add_to_cart_scripts(); + } + } + + /** + * Dequeue the add-to-cart script. + * The block uses Interactivity API, it isn't necessary enqueue the add-to-cart script. + */ + public function dequeue_add_to_cart_scripts() { + wp_dequeue_script( 'wc-add-to-cart' ); + wp_dequeue_script( 'wc-add-to-cart-variation' ); + } + /** * Include and render the block. * @@ -42,6 +77,13 @@ protected function render( $attributes, $content, $block ) { $product = wc_get_product( $post_id ); if ( $product ) { + $number_of_items_in_cart = $this->get_cart_item_quantities_by_product_id( $product->get_id() ); + $more_than_one_item = $number_of_items_in_cart > 0; + $initial_product_text = $more_than_one_item ? sprintf( + /* translators: %s: product number. */ + __( '%s in cart', 'woo-gutenberg-products-block' ), + $number_of_items_in_cart + ) : $product->add_to_cart_text(); $cart_redirect_after_add = get_option( 'woocommerce_cart_redirect_after_add' ) === 'yes'; $ajax_add_to_cart_enabled = get_option( 'woocommerce_enable_ajax_add_to_cart' ) === 'yes'; $is_ajax_button = $ajax_add_to_cart_enabled && ! $cart_redirect_after_add && $product->supports( 'ajax_add_to_cart' ) && $product->is_purchasable() && $product->is_in_stock(); @@ -64,6 +106,40 @@ protected function render( $attributes, $content, $block ) { ) ) ); + + wc_store( + array( + 'state' => array( + 'woocommerce' => array( + 'inTheCartText' => sprintf( + /* translators: %s: product number. */ + __( '%s in cart', 'woo-gutenberg-products-block' ), + '###' + ), + ), + ), + ) + ); + + $default_quantity = 1; + + $context = array( + 'woocommerce' => array( + /** + * Filters the change the quantity to add to cart. + * + * @since 10.9.0 + * @param number $default_quantity The default quantity. + * @param number $product_id The product id. + */ + 'quantityToAdd' => apply_filters( 'woocommerce_add_to_cart_quantity', $default_quantity, $product->get_id() ), + 'productId' => $product->get_id(), + 'addToCartText' => null !== $product->add_to_cart_text() ? $product->add_to_cart_text() : __( 'Add to cart', 'woo-gutenberg-products-block' ), + 'temporaryNumberOfItems' => $number_of_items_in_cart, + 'animationStatus' => 'IDLE', + ), + ); + /** * Allow filtering of the add to cart button arguments. * @@ -87,6 +163,25 @@ protected function render( $attributes, $content, $block ) { $args['attributes']['aria-label'] = wp_strip_all_tags( $args['attributes']['aria-label'] ); } + if ( isset( WC()->cart ) && ! WC()->cart->is_empty() ) { + $this->prevent_cache(); + } + + $div_directives = 'data-wc-context=\'' . wp_json_encode( $context, JSON_NUMERIC_CHECK ) . '\''; + + $button_directives = ' + data-wc-on--click="actions.woocommerce.addToCart" + data-wc-class--loading="context.woocommerce.isLoading" + '; + + $span_button_directives = ' + data-wc-text="selectors.woocommerce.addToCartText" + data-wc-class--wc-block-slide-in="selectors.woocommerce.slideInAnimation" + data-wc-class--wc-block-slide-out="selectors.woocommerce.slideOutAnimation" + data-wc-effect="effects.woocommerce.startAnimation" + data-wc-on--animationend="actions.woocommerce.handleAnimationEnd" + '; + /** * Filters the add to cart button class. * @@ -96,22 +191,83 @@ protected function render( $attributes, $content, $block ) { */ return apply_filters( 'woocommerce_loop_add_to_cart_link', - sprintf( - '
    - <%3$s href="%4$s" class="%5$s" style="%6$s" %7$s>%8$s + strtr( + '
    + <{html_element} + href="{add_to_cart_url}" + class="{button_classes}" + style="{button_styles}" + {attributes} + {button_directives} + > + {add_to_cart_text} + + {view_cart_html}
    ', - esc_attr( $text_align_styles_and_classes['class'] ?? '' ), - esc_attr( $classname . ' ' . $custom_width_classes ), - $html_element, - esc_url( $product->add_to_cart_url() ), - isset( $args['class'] ) ? esc_attr( $args['class'] ) : '', - esc_attr( $styles_and_classes['styles'] ), - isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '', - esc_html( $product->add_to_cart_text() ) + array( + '{classes}' => esc_attr( $text_align_styles_and_classes['class'] ?? '' ), + '{custom_classes}' => esc_attr( $classname . ' ' . $custom_width_classes ), + '{html_element}' => $html_element, + '{add_to_cart_url}' => esc_url( $product->add_to_cart_url() ), + '{button_classes}' => isset( $args['class'] ) ? esc_attr( $args['class'] ) : '', + '{button_styles}' => esc_attr( $styles_and_classes['styles'] ), + '{attributes}' => isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '', + '{add_to_cart_text}' => esc_html( $initial_product_text ), + '{div_directives}' => $is_ajax_button ? $div_directives : '', + '{button_directives}' => $is_ajax_button ? $button_directives : '', + '{span_button_directives}' => $is_ajax_button ? $span_button_directives : '', + '{view_cart_html}' => $is_ajax_button ? $this->get_view_cart_html() : '', + ) ), $product, $args ); } } + + /** + * Get the number of items in the cart for a given product id. + * + * @param number $product_id The product id. + * @return number The number of items in the cart. + */ + private function get_cart_item_quantities_by_product_id( $product_id ) { + if ( ! isset( WC()->cart ) ) { + return 0; + } + + $cart = WC()->cart->get_cart_item_quantities(); + return isset( $cart[ $product_id ] ) ? $cart[ $product_id ] : 0; + } + + /** + * Prevent caching on certain pages + */ + private function prevent_cache() { + \WC_Cache_Helper::set_nocache_constants(); + nocache_headers(); + } + + /** + * Get the view cart link html. + * + * @return string The view cart html. + */ + private function get_view_cart_html() { + return sprintf( + '', + wc_get_cart_url(), + __( 'View cart', 'woo-gutenberg-products-block' ) + ); + } } diff --git a/src/BlockTypes/ProductCollection.php b/src/BlockTypes/ProductCollection.php index 4bd7231a7b9..88b2c8289a8 100644 --- a/src/BlockTypes/ProductCollection.php +++ b/src/BlockTypes/ProductCollection.php @@ -16,6 +16,13 @@ class ProductCollection extends AbstractBlock { */ protected $block_name = 'product-collection'; + /** + * The Block with its attributes before it gets rendered + * + * @var array + */ + protected $parsed_block; + /** * All query args from WP_Query. * @@ -84,6 +91,87 @@ protected function initialize() { // Extend allowed `collection_params` for the REST API. add_filter( 'rest_product_collection_params', array( $this, 'extend_rest_query_allowed_params' ), 10, 1 ); + + // Interactivity API: Add navigation directives to the product collection block. + add_filter( 'render_block_woocommerce/product-collection', array( $this, 'add_navigation_id_directive' ), 10, 3 ); + add_filter( 'render_block_core/query-pagination', array( $this, 'add_navigation_link_directives' ), 10, 3 ); + } + + /** + * Mark the Product Collection as an interactive region so it can be updated + * during client-side navigation. + * + * @param string $block_content The block content. + * @param array $block The full block, including name and attributes. + * @param \WP_Block $instance The block instance. + */ + public function add_navigation_id_directive( $block_content, $block, $instance ) { + $is_product_collection_block = $block['attrs']['query']['isProductCollectionBlock'] ?? false; + if ( $is_product_collection_block ) { + // Enqueue the Interactivity API runtime. + wp_enqueue_script( 'wc-interactivity' ); + + $p = new \WP_HTML_Tag_Processor( $block_content ); + + // Add `data-wc-navigation-id to the query block. + if ( $p->next_tag( array( 'class_name' => 'wp-block-woocommerce-product-collection' ) ) ) { + $p->set_attribute( + 'data-wc-navigation-id', + 'wc-product-collection-' . $this->parsed_block['attrs']['queryId'] + ); + $p->set_attribute( 'data-wc-interactive', true ); + $block_content = $p->get_updated_html(); + } + } + + return $block_content; + } + + /** + * Add interactive links to all anchors inside the Query Pagination block. + * + * @param string $block_content The block content. + * @param array $block The full block, including name and attributes. + * @param \WP_Block $instance The block instance. + */ + public function add_navigation_link_directives( $block_content, $block, $instance ) { + $is_product_collection_block = $instance->context['query']['isProductCollectionBlock'] ?? false; + + if ( + $is_product_collection_block && + $instance->context['queryId'] === $this->parsed_block['attrs']['queryId'] + ) { + $p = new \WP_HTML_Tag_Processor( $block_content ); + $p->next_tag( array( 'class_name' => 'wp-block-query-pagination' ) ); + + while ( $p->next_tag( 'a' ) ) { + $class_attr = $p->get_attribute( 'class' ); + $class_list = preg_split( '/\s+/', $class_attr ); + + $is_previous = in_array( 'wp-block-query-pagination-previous', $class_list, true ); + $is_next = in_array( 'wp-block-query-pagination-next', $class_list, true ); + $is_previous_or_next = $is_previous || $is_next; + + $navigation_link_payload = array( + 'prefetch' => $is_previous_or_next, + 'scroll' => false, + ); + + $p->set_attribute( + 'data-wc-navigation-link', + wp_json_encode( $navigation_link_payload ) + ); + + if ( $is_previous ) { + $p->set_attribute( 'key', 'pagination-previous' ); + } elseif ( $is_next ) { + $p->set_attribute( 'key', 'pagination-next' ); + } + } + $block_content = $p->get_updated_html(); + } + + return $block_content; } /** @@ -150,6 +238,8 @@ public function add_support_for_filter_blocks( $pre_render, $parsed_block ) { return; } + $this->parsed_block = $parsed_block; + $this->asset_data_registry->add( 'hasFilterableProducts', true, true ); /** * It enables the page to refresh when a filter is applied, ensuring that the product collection block, diff --git a/src/BlockTypes/ProductDetails.php b/src/BlockTypes/ProductDetails.php index 972340ced71..db30e921a33 100644 --- a/src/BlockTypes/ProductDetails.php +++ b/src/BlockTypes/ProductDetails.php @@ -39,10 +39,13 @@ protected function render( $attributes, $content, $block ) { return sprintf( '
    - %3$s +
    + %4$s +
    ', esc_attr( $classes_and_styles['classes'] ), esc_attr( $classname ), + esc_attr( $classes_and_styles['styles'] ), $tabs ); } diff --git a/src/BlockTypes/ProductQuery.php b/src/BlockTypes/ProductQuery.php index 04efb7124a9..158ea820a10 100644 --- a/src/BlockTypes/ProductQuery.php +++ b/src/BlockTypes/ProductQuery.php @@ -80,82 +80,6 @@ protected function initialize() { ); add_filter( 'rest_product_query', array( $this, 'update_rest_query' ), 10, 2 ); add_filter( 'rest_product_collection_params', array( $this, 'extend_rest_query_allowed_params' ), 10, 1 ); - add_filter( 'render_block_core/query', array( $this, 'add_navigation_id_directive' ), 10, 3 ); - add_filter( 'render_block_core/query-pagination', array( $this, 'add_navigation_link_directives' ), 10, 3 ); - } - - /** - * Mark the Product Query as an interactive region so it can be updated - * during client-side navigation. - * - * @param string $block_content The block content. - * @param array $block The full block, including name and attributes. - * @param \WP_Block $instance The block instance. - */ - public function add_navigation_id_directive( $block_content, $block, $instance ) { - if ( self::is_woocommerce_variation( $block ) ) { - // Enqueue the Interactivity API runtime. - wp_enqueue_script( 'wc-interactivity' ); - - $p = new \WP_HTML_Tag_Processor( $block_content ); - - // Add `data-wc-navigation-id to the query block. - if ( $p->next_tag( array( 'class_name' => 'wp-block-query' ) ) ) { - $p->set_attribute( - 'data-wc-navigation-id', - 'woo-products-' . $block['attrs']['queryId'] - ); - $p->set_attribute( 'data-wc-interactive', true ); - $block_content = $p->get_updated_html(); - } - } - - return $block_content; - } - - /** - * Add interactive links to all anchors inside the Query Pagination block. - * - * @param string $block_content The block content. - * @param array $block The full block, including name and attributes. - * @param \WP_Block $instance The block instance. - */ - public function add_navigation_link_directives( $block_content, $block, $instance ) { - if ( - self::is_woocommerce_variation( $this->parsed_block ) && - $instance->context['queryId'] === $this->parsed_block['attrs']['queryId'] - ) { - $p = new \WP_HTML_Tag_Processor( $block_content ); - $p->next_tag( array( 'class_name' => 'wp-block-query-pagination' ) ); - - while ( $p->next_tag( 'a' ) ) { - $class_attr = $p->get_attribute( 'class' ); - $class_list = preg_split( '/\s+/', $class_attr ); - - $is_previous = in_array( 'wp-block-query-pagination-previous', $class_list, true ); - $is_next = in_array( 'wp-block-query-pagination-next', $class_list, true ); - $is_previous_or_next = $is_previous || $is_next; - - $navigation_link_payload = array( - 'prefetch' => $is_previous_or_next, - 'scroll' => true, - ); - - $p->set_attribute( - 'data-wc-navigation-link', - wp_json_encode( $navigation_link_payload ) - ); - - if ( $is_previous ) { - $p->set_attribute( 'key', 'pagination-previous' ); - } elseif ( $is_next ) { - $p->set_attribute( 'key', 'pagination-next' ); - } - } - $block_content = $p->get_updated_html(); - } - - return $block_content; } /** diff --git a/src/Package.php b/src/Package.php index 8e980d6ad10..3bb16be7ad8 100644 --- a/src/Package.php +++ b/src/Package.php @@ -109,7 +109,7 @@ public static function container( $reset = false ) { NewPackage::class, function ( $container ) { // leave for automated version bumping. - $version = '10.9.0-dev'; + $version = '11.0.0-dev'; return new NewPackage( $version, dirname( __DIR__ ), diff --git a/src/StoreApi/Utilities/CheckoutTrait.php b/src/StoreApi/Utilities/CheckoutTrait.php index 24e41fc5b3f..38a41e97b98 100644 --- a/src/StoreApi/Utilities/CheckoutTrait.php +++ b/src/StoreApi/Utilities/CheckoutTrait.php @@ -1,6 +1,7 @@
    - +
    @@ -39,4 +39,4 @@
    - \ No newline at end of file + diff --git a/templates/templates/blockified/product-search-results.html b/templates/templates/blockified/product-search-results.html index 8631a7001f9..910adddf58e 100644 --- a/templates/templates/blockified/product-search-results.html +++ b/templates/templates/blockified/product-search-results.html @@ -14,7 +14,7 @@
    - +
    @@ -38,4 +38,4 @@
    - \ No newline at end of file + diff --git a/templates/templates/blockified/taxonomy-product_attribute.html b/templates/templates/blockified/taxonomy-product_attribute.html index 62d797de82c..ef0b836cca6 100644 --- a/templates/templates/blockified/taxonomy-product_attribute.html +++ b/templates/templates/blockified/taxonomy-product_attribute.html @@ -16,7 +16,7 @@
    - +
    @@ -46,4 +46,4 @@
    - \ No newline at end of file + diff --git a/templates/templates/blockified/taxonomy-product_cat.html b/templates/templates/blockified/taxonomy-product_cat.html index 62d797de82c..ef0b836cca6 100644 --- a/templates/templates/blockified/taxonomy-product_cat.html +++ b/templates/templates/blockified/taxonomy-product_cat.html @@ -16,7 +16,7 @@
    - +
    @@ -46,4 +46,4 @@
    - \ No newline at end of file + diff --git a/templates/templates/blockified/taxonomy-product_tag.html b/templates/templates/blockified/taxonomy-product_tag.html index 1de3af7a0ed..102d55102ad 100644 --- a/templates/templates/blockified/taxonomy-product_tag.html +++ b/templates/templates/blockified/taxonomy-product_tag.html @@ -16,7 +16,7 @@
    - +
    @@ -43,4 +43,4 @@
    -
    \ No newline at end of file +
    diff --git a/tests/e2e-jest/specs/shopper/cart-checkout/checkout.test.js b/tests/e2e-jest/specs/shopper/cart-checkout/checkout.test.js index 4abf06b4ae5..b0e59f2ac91 100644 --- a/tests/e2e-jest/specs/shopper/cart-checkout/checkout.test.js +++ b/tests/e2e-jest/specs/shopper/cart-checkout/checkout.test.js @@ -205,9 +205,6 @@ describe( 'Shopper → Checkout', () => { } ); describe( 'Shipping and Billing Addresses', () => { - const NORMAL_SHIPPING_NAME = 'Normal Shipping'; - const NORMAL_SHIPPING_PRICE = '$20.00'; - beforeAll( async () => { await preventCompatibilityNotice(); await merchant.login(); @@ -235,27 +232,6 @@ describe( 'Shopper → Checkout', () => { await reactivateCompatibilityNotice(); } ); - // eslint-disable-next-line jest/expect-expect - it( 'User can have different shipping and billing addresses', async () => { - await shopper.block.goToShop(); - await shopper.addToCartFromShopPage( SIMPLE_PHYSICAL_PRODUCT_NAME ); - await shopper.block.goToCheckout(); - await page.waitForSelector( - '.wc-block-checkout__use-address-for-billing input[type="checkbox"]' - ); - await unsetCheckbox( - '.wc-block-checkout__use-address-for-billing input[type="checkbox"]' - ); - await shopper.block.fillShippingDetails( SHIPPING_DETAILS ); - await shopper.block.fillBillingDetails( BILLING_DETAILS ); - await shopper.block.selectAndVerifyShippingOption( - NORMAL_SHIPPING_NAME, - NORMAL_SHIPPING_PRICE - ); - await shopper.block.placeOrder(); - await shopper.block.verifyShippingDetails( SHIPPING_DETAILS ); - await shopper.block.verifyBillingDetails( BILLING_DETAILS ); - } ); it( 'User can add postcodes for different countries', async () => { await shopper.block.goToShop(); await shopper.addToCartFromShopPage( SIMPLE_PHYSICAL_PRODUCT_NAME ); @@ -290,16 +266,11 @@ describe( 'Shopper → Checkout', () => { describe( 'Checkout Form Errors', () => { beforeAll( async () => { - const isShopperLoggedIn = await shopper.isLoggedIn(); - - // @todo Find a better way to reset the checkout form instead of login then logout - if ( isShopperLoggedIn ) { - // Click on the "Log out" link in "My account" page - await await shopper.logout(); - } else { + // Logout to clear session. + if ( ! ( await shopper.isLoggedIn() ) ) { await shopper.login(); - await shopper.logout(); } + await shopper.logout(); } ); it( 'User can see errors when form is incomplete', async () => { @@ -388,46 +359,11 @@ describe( 'Shopper → Checkout', () => { } ); describe( `Shipping`, () => { - const FREE_SHIPPING_NAME = 'Free Shipping'; - const FREE_SHIPPING_PRICE = '$0.00'; - const NORMAL_SHIPPING_NAME = 'Normal Shipping'; - const NORMAL_SHIPPING_PRICE = '$20.00'; - afterEach( async () => { await merchant.login(); await merchantUtils.disableLocalPickup(); } ); - it( 'User can choose free shipping', async () => { - await shopper.block.goToShop(); - await shopper.addToCartFromShopPage( SIMPLE_PHYSICAL_PRODUCT_NAME ); - await shopper.block.goToCheckout(); - await shopper.block.selectAndVerifyShippingOption( - FREE_SHIPPING_NAME, - FREE_SHIPPING_PRICE - ); - await shopper.block.fillInCheckoutWithTestData(); - await shopper.block.placeOrder(); - await page.waitForSelector( '.woocommerce-order' ); - await expect( page ).toMatch( 'Order received' ); - await expect( page ).toMatch( FREE_SHIPPING_NAME ); - } ); - - it( 'User can choose flat rate shipping', async () => { - await shopper.block.goToShop(); - await shopper.addToCartFromShopPage( SIMPLE_PHYSICAL_PRODUCT_NAME ); - await shopper.block.goToCheckout(); - await shopper.block.selectAndVerifyShippingOption( - NORMAL_SHIPPING_NAME, - NORMAL_SHIPPING_PRICE - ); - await shopper.block.fillInCheckoutWithTestData(); - await shopper.block.placeOrder(); - await page.waitForSelector( '.woocommerce-order' ); - await expect( page ).toMatch( 'Order received' ); - await expect( page ).toMatch( NORMAL_SHIPPING_NAME ); - } ); - it( 'User does not see shipping rates until full address is entered', async () => { await preventCompatibilityNotice(); await merchant.login(); diff --git a/tests/e2e-jest/specs/shopper/cart-checkout/translations.test.js b/tests/e2e-jest/specs/shopper/cart-checkout/translations.test.js index 6f40cc74033..883816c42f1 100644 --- a/tests/e2e-jest/specs/shopper/cart-checkout/translations.test.js +++ b/tests/e2e-jest/specs/shopper/cart-checkout/translations.test.js @@ -20,7 +20,7 @@ describe( 'Shopper → Cart & Checkout → Translations', () => { await merchant.changeLanguage( 'en_EN' ); } ); - it( 'User can view translated Cart block', async () => { + it.skip( 'User can view translated Cart block', async () => { await shopper.goToShop(); await shopper.addToCartFromShopPage( '128GB USB Stick' ); await shopper.block.goToCart(); @@ -53,7 +53,7 @@ describe( 'Shopper → Cart & Checkout → Translations', () => { await expect( orderSummary ).toMatch( 'Totaal' ); } ); - it( 'User can view translated Checkout block', async () => { + it.skip( 'User can view translated Checkout block', async () => { await shopper.block.goToCheckout(); const contactHeading = await page.$( diff --git a/tests/e2e-jest/specs/shopper/mini-cart.test.js b/tests/e2e-jest/specs/shopper/mini-cart.test.js index c89d2fe5207..f43596c4f89 100644 --- a/tests/e2e-jest/specs/shopper/mini-cart.test.js +++ b/tests/e2e-jest/specs/shopper/mini-cart.test.js @@ -543,7 +543,7 @@ describe( 'Shopper → Mini-Cart', () => { ); } ); - it( 'User can see translation in filled Mini-Cart', async () => { + it.skip( 'User can see translation in filled Mini-Cart', async () => { await page.click( selectors.frontend.productWithAddToCartButton ); @@ -575,7 +575,7 @@ describe( 'Shopper → Mini-Cart', () => { ); } ); - it( 'User can see translation in filled Mini-Cart', async () => { + it.skip( 'User can see translation in filled Mini-Cart', async () => { await page.click( selectors.frontend.productWithAddToCartButton ); diff --git a/tests/e2e/README.md b/tests/e2e/README.md index 576cf98da2f..36fb315971d 100644 --- a/tests/e2e/README.md +++ b/tests/e2e/README.md @@ -52,6 +52,20 @@ npm run env:restart npm run test:e2e ``` +### Tests with side effects + +We call tests that affect other tests (ones that modify the site settings, using +custom plugins) are tests with side effects and we +[split](https://github.com/woocommerce/woocommerce-blocks/pull/10508) those +tests to a separate test suite: + +```sh +npm run test:e2e:side-effects +``` + +_Note: All commands parameters of `test:e2e` can be used for +`test:e2e:side-effects`._ + ### Other ways of running tests Headless mode: diff --git a/tests/e2e/mocks/custom-plugins/index.ts b/tests/e2e/mocks/custom-plugins/index.ts new file mode 100644 index 00000000000..04bca77e0de --- /dev/null +++ b/tests/e2e/mocks/custom-plugins/index.ts @@ -0,0 +1 @@ +export * from './utils'; diff --git a/tests/e2e/mocks/custom-plugins/readme.md b/tests/e2e/mocks/custom-plugins/readme.md new file mode 100644 index 00000000000..f37b4045c09 --- /dev/null +++ b/tests/e2e/mocks/custom-plugins/readme.md @@ -0,0 +1,70 @@ +# Testing WordPress actions and filters + +This documentation covers testing WordPress actions and filters when writing Playwright tests. + +## Table of Contents + +- [Description](#description) +- [Usage](#usage) + +## Description + +You can test an action or filter (change) by creating a custom WordPress plugin, installing it and when you are done, removing it. + +The 3 functions responsible are located inside of `tests/e2e-pw/mocks/custom-plugins/utils.ts`: + +- `createPluginFromPHPFile()` +- `installPluginFromPHPFile()` +- `uninstallPluginFromPHPFile()` + +## Usage + +### Example: Testing a custom Add to Cart text + +1. Create the custom plugin file. + +`update-product-button-text.php`. + +```php + { + await installPluginFromPHPFile( + `${ __dirname }/update-product-button-text.php` + ); + await frontendUtils.goToShop(); + const blocks = await frontendUtils.getBlockByName( blockData.name ); + const buttonWithNewText = await blocks.getByText( 'Buy Now' ).count(); + + const productsDisplayed = 16; + expect( buttonWithNewText ).toEqual( productsDisplayed ); +} ); +``` + +3. Remove the plugin when done testing. + +```javascript +test.afterAll( async () => { + await uninstallPluginFromPHPFile( + `${ __dirname }/update-product-button-text.php` + ); +} ); +``` + +In the above example, the test checks whether the filter `woocommerce_product_add_to_cart_text` is applied correctly. It installs the "Custom Add to Cart Text" plugin, navigates to the shop page using `frontendUtils`, and verifies if the "Buy Now" button text appears as expected. Finally, it cleans the cart and uninstalls the plugin. + +You can adapt this example to test other filters and actions by modifying the code accordingly. diff --git a/tests/e2e/mocks/custom-plugins/utils.ts b/tests/e2e/mocks/custom-plugins/utils.ts new file mode 100644 index 00000000000..f63177c9998 --- /dev/null +++ b/tests/e2e/mocks/custom-plugins/utils.ts @@ -0,0 +1,31 @@ +/** + * External dependencies + */ +import { cli } from '@woocommerce/e2e-utils'; +import path from 'path'; + +const createPluginFromPHPFile = async ( phpFilePath: string ) => { + const absolutePath = path.resolve( phpFilePath ); + const directory = path.dirname( absolutePath ); + const fileName = path.basename( phpFilePath ); + const fileNameZip = fileName.replace( '.php', '' ); + await cli( + `cd ${ directory } && zip ${ fileNameZip }.zip ${ fileName } && mv ${ fileNameZip }.zip ${ __dirname }` + ); +}; + +export const installPluginFromPHPFile = async ( phpFilePath: string ) => { + await createPluginFromPHPFile( phpFilePath ); + const fileName = path.basename( phpFilePath ).replace( '.php', '' ); + await cli( + `npm run wp-env run tests-cli "wp plugin install /var/www/html/custom-plugins/${ fileName }.zip --activate"` + ); +}; + +export const uninstallPluginFromPHPFile = async ( phpFilePath: string ) => { + const fileName = path.basename( phpFilePath ).replace( '.php', '' ); + await cli( + `npm run wp-env run tests-cli "wp plugin delete ${ fileName }"` + ); + await cli( `rm ${ __dirname }/${ fileName }.zip` ); +}; diff --git a/tests/e2e/playwright-utils/test.ts b/tests/e2e/playwright-utils/test.ts index 7e0f10afa52..72c5d294a9c 100644 --- a/tests/e2e/playwright-utils/test.ts +++ b/tests/e2e/playwright-utils/test.ts @@ -1,7 +1,7 @@ /** * External dependencies */ -import { test as base, expect, request } from '@playwright/test'; +import { test as base, expect, request as baseRequest } from '@playwright/test'; import type { ConsoleMessage } from '@playwright/test'; import { Admin, @@ -15,6 +15,7 @@ import { STORAGE_STATE_PATH, EditorUtils, FrontendUtils, + StoreApiUtils, } from '@woocommerce/e2e-utils'; /** @@ -107,6 +108,7 @@ const test = base.extend< templateApiUtils: TemplateApiUtils; editorUtils: EditorUtils; frontendUtils: FrontendUtils; + storeApiUtils: StoreApiUtils; snapshotConfig: void; }, { @@ -135,12 +137,15 @@ const test = base.extend< await use( new PageUtils( { page } ) ); }, templateApiUtils: async ( {}, use ) => - await use( new TemplateApiUtils( request ) ), + await use( new TemplateApiUtils( baseRequest ) ), editorUtils: async ( { editor, page }, use ) => { await use( new EditorUtils( editor, page ) ); }, - frontendUtils: async ( { page }, use ) => { - await use( new FrontendUtils( page ) ); + frontendUtils: async ( { page, requestUtils }, use ) => { + await use( new FrontendUtils( page, requestUtils ) ); + }, + storeApiUtils: async ( { requestUtils }, use ) => { + await use( new StoreApiUtils( requestUtils ) ); }, requestUtils: [ async ( {}, use, workerInfo ) => { diff --git a/tests/e2e/playwright.config.ts b/tests/e2e/playwright.config.ts index dec6eb0530a..ea5749a697d 100644 --- a/tests/e2e/playwright.config.ts +++ b/tests/e2e/playwright.config.ts @@ -51,16 +51,9 @@ const config: ExtendedPlaywrightTestConfig = { testMatch: /.*.block_theme.spec.ts/, dependencies: [ 'blockThemeConfiguration' ], }, - { - name: 'blockThemeWithGlobalSideEffects', - testMatch: /.*.block_theme.side_effects.spec.ts/, - dependencies: [ 'blockTheme' ], - fullyParallel: false, - }, { name: 'classicThemeConfiguration', - testMatch: /block-theme.setup.ts/, - dependencies: [ 'blockThemeWithGlobalSideEffects' ], + testMatch: /classic-theme.setup.ts/, }, { name: 'classicTheme', diff --git a/tests/e2e/playwright.side-effects.config.ts b/tests/e2e/playwright.side-effects.config.ts new file mode 100644 index 00000000000..cb8cf02bae7 --- /dev/null +++ b/tests/e2e/playwright.side-effects.config.ts @@ -0,0 +1,31 @@ +/** + * External dependencies + */ +import { defineConfig } from '@playwright/test'; +import path from 'path'; + +/** + * Internal dependencies + */ +import config from './playwright.config'; + +export default defineConfig( { + ...config, + outputDir: path.join( + process.cwd(), + 'artifacts/test-results-side-effects' + ), + fullyParallel: false, + workers: 1, + projects: [ + { + name: 'blockThemeConfiguration', + testMatch: /block-theme.setup.ts/, + }, + { + name: 'blockThemeWithGlobalSideEffects', + testMatch: /.*.block_theme.side_effects.spec.ts/, + dependencies: [ 'blockThemeConfiguration' ], + }, + ], +} ); diff --git a/tests/e2e/tests/cart-checkout/cart-block.merchant.block_theme.spec.ts b/tests/e2e/tests/cart-checkout/cart-block.merchant.block_theme.spec.ts index 79d6ef0d9c6..9d1edf8cd11 100644 --- a/tests/e2e/tests/cart-checkout/cart-block.merchant.block_theme.spec.ts +++ b/tests/e2e/tests/cart-checkout/cart-block.merchant.block_theme.spec.ts @@ -41,8 +41,9 @@ test.describe( 'Merchant → Cart', () => { test( 'can only be inserted once', async ( { page, editorUtils } ) => { await editorUtils.openGlobalBlockInserter(); await page.getByPlaceholder( 'Search' ).fill( blockData.slug ); - const cartBlockButton = page.locator( 'button', { - has: page.locator( `text="${ blockData.name }"` ), + const cartBlockButton = page.getByRole( 'option', { + name: blockData.name, + exact: true, } ); await expect( cartBlockButton ).toHaveAttribute( 'aria-disabled', @@ -61,7 +62,9 @@ test.describe( 'Merchant → Cart', () => { .getByRole( 'toolbar', { name: 'Block tools' } ) .getByRole( 'button', { name: 'Options' } ); await options.click(); - const removeButton = page.getByText( 'Remove Cart' ); + const removeButton = page.getByRole( 'menuitem', { + name: 'Delete', + } ); await removeButton.click(); // Expect block to have been removed. await expect( diff --git a/tests/e2e/tests/checkout/checkout-block-shipping.block_theme.side_effects.spec.ts b/tests/e2e/tests/checkout/checkout-block-shipping.block_theme.side_effects.spec.ts new file mode 100644 index 00000000000..c180a7fb8f7 --- /dev/null +++ b/tests/e2e/tests/checkout/checkout-block-shipping.block_theme.side_effects.spec.ts @@ -0,0 +1,83 @@ +/** + * External dependencies + */ +import { test as base, expect } from '@woocommerce/e2e-playwright-utils'; + +/** + * Internal dependencies + */ +import { CheckoutPage } from './checkout.page'; + +const test = base.extend< { pageObject: CheckoutPage } >( { + pageObject: async ( { page }, use ) => { + const pageObject = new CheckoutPage( { + page, + } ); + await use( pageObject ); + }, +} ); + +test.describe( 'Shopper → Checkout block → Shipping', () => { + const FREE_SHIPPING_NAME = 'Free shipping'; + const FREE_SHIPPING_PRICE = '$0.00'; + const FLAT_RATE_SHIPPING_NAME = 'Flat rate shipping'; + const FLAT_RATE_SHIPPING_PRICE = '$10.00'; + + test.use( { + storageState: process.env.CUSTOMERSTATE, + } ); + + test( 'Shopper can choose free shipping, flat rate shipping, and can have different billing and shipping addresses', async ( { + pageObject, + frontendUtils, + page, + } ) => { + await frontendUtils.emptyCart(); + await frontendUtils.goToShop(); + await frontendUtils.addToCart( 'Beanie' ); + await frontendUtils.goToCheckout(); + await expect( + await pageObject.selectAndVerifyShippingOption( + FREE_SHIPPING_NAME, + FREE_SHIPPING_PRICE + ) + ).toBe( true ); + await pageObject.fillInCheckoutWithTestData(); + await pageObject.placeOrder(); + await pageObject.verifyAddressDetails( 'billing' ); + await pageObject.verifyAddressDetails( 'shipping' ); + await expect( page.getByText( FREE_SHIPPING_NAME ) ).toBeVisible(); + + await frontendUtils.goToShop(); + await frontendUtils.addToCart( 'Beanie' ); + await frontendUtils.goToCheckout(); + await expect( + await pageObject.selectAndVerifyShippingOption( + FLAT_RATE_SHIPPING_NAME, + FLAT_RATE_SHIPPING_PRICE + ) + ).toBe( true ); + await page.getByLabel( 'Use same address for billing' ).uncheck(); + await pageObject.fillInCheckoutWithTestData(); + const overrideBillingDetails = { + firstname: 'Juan', + lastname: 'Perez', + addressfirstline: '123 Test Street', + addresssecondline: 'Apartment 6', + country: 'ES', + city: 'Madrid', + postcode: '08830', + state: 'M', + phone: '0987654321', + email: 'juan.perez@test.com', + }; + await pageObject.fillBillingDetails( overrideBillingDetails ); + await pageObject.placeOrder(); + await pageObject.verifyAddressDetails( + 'billing', + overrideBillingDetails + ); + await pageObject.verifyAddressDetails( 'shipping' ); + await expect( page.getByText( FLAT_RATE_SHIPPING_NAME ) ).toBeVisible(); + } ); +} ); diff --git a/tests/e2e/tests/checkout/checkout.page.ts b/tests/e2e/tests/checkout/checkout.page.ts new file mode 100644 index 00000000000..5a870069583 --- /dev/null +++ b/tests/e2e/tests/checkout/checkout.page.ts @@ -0,0 +1,225 @@ +/** + * External dependencies + */ +import { Page } from '@playwright/test'; +import { expect } from '@woocommerce/e2e-playwright-utils'; + +export class CheckoutPage { + private BLOCK_NAME = 'woocommerce/checkout'; + private page: Page; + private testData = { + ...{ + firstname: 'John', + lastname: 'Doe', + addressfirstline: '123 Easy Street', + addresssecondline: 'Testville', + country: 'United States (US)', + city: 'New York', + state: 'New York', + postcode: '90210', + email: 'john.doe@test.com', + phone: '01234567890', + }, + }; + + constructor( { page }: { page: Page } ) { + this.page = page; + } + + async isShippingRateSelected( + shippingName: string, + shippingPrice: string + ) { + const shippingLine = this.page.locator( + '.wc-block-components-totals-shipping' + ); + + const nameIsVisible = await shippingLine + .getByText( shippingName ) + .isVisible(); + const priceIsVisible = await shippingLine + .getByText( shippingPrice ) + .isVisible(); + return nameIsVisible && priceIsVisible; + } + + async fillInCheckoutWithTestData( overrideData = {} ) { + const isShippingOpen = await this.page + .getByRole( 'group', { + name: 'Shipping address', + } ) + .isVisible(); + + const isBillingOpen = await this.page + .getByRole( 'group', { + name: 'Billing address', + } ) + .isVisible(); + + const testData = { ...this.testData, ...overrideData }; + + await this.page.getByLabel( 'Email address' ).fill( testData.email ); + if ( isShippingOpen ) { + await this.fillShippingDetails( testData ); + } + if ( isBillingOpen ) { + await this.fillBillingDetails( testData ); + } + // Blur active field to trigger shipping rates update, then wait for requests to finish. + await this.page.evaluate( 'document.activeElement.blur()' ); + } + + async placeOrder() { + await this.page.getByText( 'Place Order', { exact: true } ).click(); + await this.page.waitForURL( /order-received/ ); + } + async verifyAddressDetails( + shippingOrBilling: 'shipping' | 'billing', + overrideAddressDetails = {} + ) { + const customerAddressDetails = { + ...this.testData, + ...overrideAddressDetails, + }; + const selector = `.woocommerce-column--${ shippingOrBilling }-address`; + const addressContainer = this.page.locator( selector ); + await expect( + addressContainer.getByText( customerAddressDetails.firstname ) + ).toBeVisible(); + await expect( + addressContainer.getByText( customerAddressDetails.lastname ) + ).toBeVisible(); + await expect( + addressContainer.getByText( + customerAddressDetails.addressfirstline + ) + ).toBeVisible(); + await expect( + addressContainer.getByText( + customerAddressDetails.addresssecondline + ) + ).toBeVisible(); + await expect( + addressContainer.getByText( customerAddressDetails.city ) + ).toBeVisible(); + await expect( + addressContainer.getByText( customerAddressDetails.state ) + ).toBeVisible(); + await expect( + addressContainer.getByText( customerAddressDetails.postcode ) + ).toBeVisible(); + if ( shippingOrBilling === 'billing' ) { + await expect( + addressContainer.getByText( customerAddressDetails.phone ) + ).toBeVisible(); + } + } + + async fillBillingDetails( customerBillingDetails ) { + const billingForm = this.page.getByRole( 'group', { + name: 'Billing address', + } ); + const companyInputField = billingForm.getByLabel( 'Company' ); + + if ( await companyInputField.isVisible() ) { + await companyInputField.fill( customerBillingDetails.company ); + } + + const email = this.page.getByLabel( 'Email address' ); + const firstName = billingForm.getByLabel( 'First name' ); + const lastName = billingForm.getByLabel( 'Last name' ); + const country = billingForm.getByLabel( 'Country/Region' ); + const address1 = billingForm.getByLabel( 'Address', { exact: true } ); + const address2 = billingForm.getByLabel( 'Apartment, suite, etc.' ); + const city = billingForm.getByLabel( 'City' ); + const state = billingForm.getByLabel( 'State', { exact: true } ); + const phone = billingForm.getByLabel( 'Phone' ); + + // Using locator here since the label of this form changes depending on the country. + const postcode = billingForm.locator( '#billing-postcode' ); + + await email.fill( customerBillingDetails.email ); + await firstName.fill( customerBillingDetails.firstname ); + await lastName.fill( customerBillingDetails.lastname ); + await country.fill( customerBillingDetails.country ); + await address1.fill( customerBillingDetails.addressfirstline ); + await address2.fill( customerBillingDetails.addresssecondline ); + await city.fill( customerBillingDetails.city ); + await phone.fill( customerBillingDetails.phone ); + + if ( await state.isVisible() ) { + await state.fill( customerBillingDetails.state ); + } + if ( await postcode.isVisible() ) { + await postcode.fill( customerBillingDetails.postcode ); + } + // Blur active field to trigger customer address update. + await this.page.evaluate( 'document.activeElement.blur()' ); + } + + async fillShippingDetails( customerShippingDetails ) { + const shippingForm = this.page.getByRole( 'group', { + name: 'Shipping address', + } ); + const companyInputField = shippingForm.getByLabel( 'Company' ); + + if ( await companyInputField.isVisible() ) { + await companyInputField.fill( customerShippingDetails.company ); + } + + const firstName = shippingForm.getByLabel( 'First name' ); + const lastName = shippingForm.getByLabel( 'Last name' ); + const country = shippingForm.getByLabel( 'Country/Region' ); + const address1 = shippingForm.getByLabel( 'Address', { exact: true } ); + const address2 = shippingForm.getByLabel( 'Apartment, suite, etc.' ); + const city = shippingForm.getByLabel( 'City' ); + const state = shippingForm.getByLabel( 'State', { exact: true } ); + const phone = shippingForm.getByLabel( 'Phone' ); + + // Using locator here since the label of this form changes depending on the country. + const postcode = shippingForm.locator( '#shipping-postcode' ); + + await firstName.fill( customerShippingDetails.firstname ); + await lastName.fill( customerShippingDetails.lastname ); + await country.fill( customerShippingDetails.country ); + await address1.fill( customerShippingDetails.addressfirstline ); + await address2.fill( customerShippingDetails.addresssecondline ); + await city.fill( customerShippingDetails.city ); + await phone.fill( customerShippingDetails.phone ); + + if ( await state.isVisible() ) { + await state.fill( customerShippingDetails.state ); + } + if ( await postcode.isVisible() ) { + await postcode.fill( customerShippingDetails.postcode ); + } + // Blur active field to trigger customer address update. + await this.page.evaluate( 'document.activeElement.blur()' ); + } + + async selectAndVerifyShippingOption( + shippingName: string, + shippingPrice: string + ) { + const shipping = this.page.getByLabel( shippingName ); + await expect( shipping ).toBeVisible(); + if ( + ! ( await this.isShippingRateSelected( + shippingName, + shippingPrice + ) ) + ) { + await shipping.click(); + await this.page.waitForResponse( ( request ) => { + const url = request.url(); + return url.includes( 'wc/store/v1/batch' ); + } ); + await this.page.waitForFunction( () => { + return ! window.wp.data + .select( 'wc/store/cart' ) + .isShippingRateBeingSelected(); + } ); + } + return await this.isShippingRateSelected( shippingName, shippingPrice ); + } +} diff --git a/tests/e2e/tests/customer-account/customer-account.block_theme.spec.ts b/tests/e2e/tests/customer-account/customer-account.block_theme.spec.ts index 3a3b8135293..f4dc043d95b 100644 --- a/tests/e2e/tests/customer-account/customer-account.block_theme.spec.ts +++ b/tests/e2e/tests/customer-account/customer-account.block_theme.spec.ts @@ -55,7 +55,7 @@ test.describe( `${ blockData.name } Block`, () => { page, frontendUtils, } ) => { - await admin.createNewPost(); + await admin.createNewPost( { legacyCanvas: true } ); await editor.insertBlock( { name: blockData.name } ); await selectTextOnlyOption( { page } ); @@ -78,7 +78,7 @@ test.describe( `${ blockData.name } Block`, () => { page, frontendUtils, } ) => { - await admin.createNewPost(); + await admin.createNewPost( { legacyCanvas: true } ); await editor.insertBlock( { name: blockData.name } ); await selectIconOnlyOption( { page } ); @@ -101,7 +101,7 @@ test.describe( `${ blockData.name } Block`, () => { page, frontendUtils, } ) => { - await admin.createNewPost(); + await admin.createNewPost( { legacyCanvas: true } ); await editor.insertBlock( { name: blockData.name } ); await selectIconAndTextOption( { page } ); diff --git a/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts b/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts index df89ea3bd98..df57b7e8b27 100644 --- a/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts +++ b/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts @@ -23,7 +23,7 @@ const getMiniCartButton = async ( { page } ) => { test.describe( `${ blockData.name } Block`, () => { test.describe( `standalone`, () => { test.beforeEach( async ( { admin, page, editor } ) => { - await admin.createNewPost(); + await admin.createNewPost( { legacyCanvas: true } ); await editor.insertBlock( { name: blockData.name } ); await editor.publishPost(); const url = new URL( page.url() ); @@ -108,7 +108,7 @@ test.describe( `${ blockData.name } Block`, () => { test.describe( `with All products Block`, () => { test.beforeEach( async ( { admin, page, editor } ) => { - await admin.createNewPost(); + await admin.createNewPost( { legacyCanvas: true } ); await editor.insertBlock( { name: blockData.name } ); await editor.insertBlock( { name: 'woocommerce/all-products' } ); await editor.publishPost(); diff --git a/tests/e2e/tests/price-filter/price-filter.block_theme.side_effects.spec.ts b/tests/e2e/tests/price-filter/price-filter.block_theme.side_effects.spec.ts index 58e407c304a..d3dd4e25311 100644 --- a/tests/e2e/tests/price-filter/price-filter.block_theme.side_effects.spec.ts +++ b/tests/e2e/tests/price-filter/price-filter.block_theme.side_effects.spec.ts @@ -8,7 +8,6 @@ import { BASE_URL, cli } from '@woocommerce/e2e-utils'; /** * Internal dependencies */ -import { getMinMaxPriceInputs } from './utils'; const blockData: BlockData< { urlSearchParamWhenFilterIsApplied: string; @@ -28,7 +27,7 @@ const blockData: BlockData< { test.describe( `${ blockData.name } Block - with All products Block`, () => { test.beforeEach( async ( { admin, page, editor } ) => { - await admin.createNewPost(); + await admin.createNewPost( { legacyCanvas: true } ); await editor.insertBlock( { name: 'woocommerce/all-products' } ); await editor.insertBlock( { name: 'woocommerce/filter-wrapper', @@ -62,19 +61,15 @@ test.describe( `${ blockData.name } Block - with All products Block`, () => { test( 'should show only products that match the filter', async ( { page, - pageUtils, frontendUtils, } ) => { - const priceFilterBlockLocator = await frontendUtils.getBlockByName( - 'woocommerce/filter-wrapper' - ); - const { maxPriceInput } = await getMinMaxPriceInputs( - priceFilterBlockLocator - ); + const maxPriceInput = page.getByRole( 'textbox', { + name: 'Filter products by maximum price', + } ); - await maxPriceInput.selectText(); - await maxPriceInput.type( '10' ); - await pageUtils.pressKeys( 'Tab' ); + await frontendUtils.selectTextInput( maxPriceInput ); + await maxPriceInput.fill( '$10' ); + await maxPriceInput.press( 'Tab' ); await page.waitForResponse( ( response ) => response.url().includes( blockData.endpointAPI ) ); @@ -135,6 +130,8 @@ test.describe( `${ blockData.name } Block - with PHP classic template`, () => { 'woocommerce/legacy-template' ); + legacyTemplate.waitFor(); + const products = await legacyTemplate .getByRole( 'list' ) .locator( '.product' ) @@ -146,21 +143,15 @@ test.describe( `${ blockData.name } Block - with PHP classic template`, () => { // eslint-disable-next-line playwright/no-skipped-test test.skip( 'should show only products that match the filter', async ( { page, - pageUtils, frontendUtils, } ) => { - const priceFilterBlockLocator = await frontendUtils.getBlockByName( - 'woocommerce/filter-wrapper' - ); - const { maxPriceInput } = await getMinMaxPriceInputs( - priceFilterBlockLocator - ); - - await maxPriceInput.selectText(); - await maxPriceInput.type( '10' ); - await pageUtils.pressKeys( 'Tab', { - delay: 100, + const maxPriceInput = page.getByRole( 'textbox', { + name: 'Filter products by maximum price', } ); + + await frontendUtils.selectTextInput( maxPriceInput ); + await maxPriceInput.fill( '$10' ); + await maxPriceInput.press( 'Tab' ); await page.waitForURL( ( url ) => url .toString() diff --git a/tests/e2e/tests/price-filter/utils.ts b/tests/e2e/tests/price-filter/utils.ts deleted file mode 100644 index 36134543033..00000000000 --- a/tests/e2e/tests/price-filter/utils.ts +++ /dev/null @@ -1,18 +0,0 @@ -/** - * External dependencies - */ -import { Locator } from '@playwright/test'; - -export const getMinMaxPriceInputs = async ( - priceFilterBlockLocator: Locator -) => { - const maxPriceInput = priceFilterBlockLocator.locator( - '.wc-block-price-filter__amount--max' - ); - - const minPriceInput = priceFilterBlockLocator.locator( - '.wc-block-price-filter__amount--min' - ); - - return { maxPriceInput, minPriceInput }; -}; diff --git a/tests/e2e/tests/product-button/product-button.block_theme.side_effects.spec.ts b/tests/e2e/tests/product-button/product-button.block_theme.side_effects.spec.ts new file mode 100644 index 00000000000..2c13ce636c1 --- /dev/null +++ b/tests/e2e/tests/product-button/product-button.block_theme.side_effects.spec.ts @@ -0,0 +1,127 @@ +/** + * External dependencies + */ +import { expect, test } from '@woocommerce/e2e-playwright-utils'; +import { + installPluginFromPHPFile, + uninstallPluginFromPHPFile, +} from '@woocommerce/e2e-mocks/custom-plugins'; + +/** + * Internal dependencies + */ +import { blockData, handleAddToCartAjaxSetting } from './utils'; + +test.describe( `${ blockData.name } Block`, () => { + test.beforeEach( async ( { frontendUtils, storeApiUtils } ) => { + await storeApiUtils.cleanCart(); + await frontendUtils.goToShop(); + } ); + + test( 'should be visible', async ( { frontendUtils } ) => { + const blocks = await frontendUtils.getBlockByName( blockData.slug ); + await expect( blocks ).toHaveCount( + blockData.selectors.frontend.productsToDisplay + ); + } ); + test( 'should add product to the cart', async ( { + frontendUtils, + page, + } ) => { + const blocks = await frontendUtils.getBlockByName( blockData.slug ); + const block = blocks.first(); + + const productId = await block + .locator( '[data-product_id]' ) + .getAttribute( 'data-product_id' ); + + const productName = await page + .locator( `li.post-${ productId } h3` ) + .textContent(); + + // We want to fail the test if the product name is not found. + // eslint-disable-next-line playwright/no-conditional-in-test + if ( ! productName ) { + return test.fail( ! productName, 'Product name was not found' ); + } + + await block.locator( 'loading' ).waitFor( { + state: 'detached', + } ); + await block.click(); + await expect( block.getByRole( 'button' ) ).toHaveText( '1 in cart' ); + await expect( block.getByRole( 'link' ) ).toBeVisible(); + + await frontendUtils.goToCheckout(); + const productElement = page.getByText( productName, { + exact: true, + } ); + await expect( productElement ).toBeVisible(); + } ); + + test( 'should add product to the cart - with ajax disabled', async ( { + frontendUtils, + page, + admin, + } ) => { + await handleAddToCartAjaxSetting( admin, page, { + isChecked: true, + } ); + await frontendUtils.goToShop(); + + const blocks = await frontendUtils.getBlockByName( blockData.slug ); + const block = blocks.first(); + const button = block.getByRole( 'link' ); + + const productId = await button.getAttribute( 'data-product_id' ); + + const productName = await page + .locator( `li.post-${ productId } h3` ) + .textContent(); + + // We want to fail the test if the product name is not found. + // eslint-disable-next-line playwright/no-conditional-in-test + if ( ! productName ) { + return test.fail( ! productName, 'Product name was not found' ); + } + + await block.click(); + + await expect( + page.locator( `a[href*="cart=${ productId }"]` ) + ).toBeVisible(); + + await frontendUtils.goToCheckout(); + + const productElement = page.getByText( productName, { + exact: true, + } ); + + await expect( productElement ).toBeVisible(); + + await handleAddToCartAjaxSetting( admin, page, { + isChecked: false, + } ); + } ); + + test( 'the filter `woocommerce_product_add_to_cart_text` should be applied', async ( { + frontendUtils, + } ) => { + await installPluginFromPHPFile( + `${ __dirname }/update-product-button-text.php` + ); + await frontendUtils.goToShop(); + const blocks = await frontendUtils.getBlockByName( blockData.slug ); + const buttonWithNewText = blocks.getByText( 'Buy Now' ); + await expect( buttonWithNewText ).toHaveCount( + blockData.selectors.frontend.productsToDisplay + ); + } ); + + test.afterAll( async ( { storeApiUtils } ) => { + await storeApiUtils.cleanCart(); + await uninstallPluginFromPHPFile( + `${ __dirname }/update-product-button-text.php` + ); + } ); +} ); diff --git a/tests/e2e/tests/product-button/update-product-button-text.php b/tests/e2e/tests/product-button/update-product-button-text.php new file mode 100644 index 00000000000..37e44f2f208 --- /dev/null +++ b/tests/e2e/tests/product-button/update-product-button-text.php @@ -0,0 +1,18 @@ + { + await admin.page.goto( 'wp-admin/admin.php?page=wc-settings&tab=products' ); + await page + .getByRole( 'checkbox', { + name: 'Enable AJAX add to cart buttons on archives', + checked: isChecked, + } ) + .click(); + + await page + .getByRole( 'button', { + name: 'save', + } ) + .click(); +}; diff --git a/tests/e2e/tests/product-collection/compatibility-layer.block_theme.side_effects.spec.ts b/tests/e2e/tests/product-collection/compatibility-layer.block_theme.side_effects.spec.ts new file mode 100644 index 00000000000..e55ada4d9d9 --- /dev/null +++ b/tests/e2e/tests/product-collection/compatibility-layer.block_theme.side_effects.spec.ts @@ -0,0 +1,152 @@ +/** + * External dependencies + */ +import { test as base, expect } from '@woocommerce/e2e-playwright-utils'; +import { deleteAllTemplates } from '@wordpress/e2e-test-utils'; +import { + installPluginFromPHPFile, + uninstallPluginFromPHPFile, +} from '@woocommerce/e2e-mocks/custom-plugins'; + +/** + * Internal dependencies + */ +import ProductCollectionPage from './product-collection.page'; + +type Scenario = { + title: string; + dataTestId: string; + content: string; + amount: number; +}; + +const singleOccurranceScenarios: Scenario[] = [ + { + title: 'Before Main Content', + dataTestId: 'woocommerce_before_main_content', + content: 'Hook: woocommerce_before_main_content', + amount: 1, + }, + { + title: 'After Main Content', + dataTestId: 'woocommerce_after_main_content', + content: 'Hook: woocommerce_after_main_content', + amount: 1, + }, + { + title: 'Before Shop Loop', + dataTestId: 'woocommerce_before_shop_loop', + content: 'Hook: woocommerce_before_shop_loop', + amount: 1, + }, + { + title: 'After Shop Loop', + dataTestId: 'woocommerce_after_shop_loop', + content: 'Hook: woocommerce_after_shop_loop', + amount: 1, + }, +]; + +const multipleOccurranceScenarios: Scenario[] = [ + { + title: 'Before Shop Loop Item Title', + dataTestId: 'woocommerce_before_shop_loop_item_title', + content: 'Hook: woocommerce_before_shop_loop_item_title', + amount: 16, + }, + { + title: 'Shop Loop Item Title', + dataTestId: 'woocommerce_shop_loop_item_title', + content: 'Hook: woocommerce_shop_loop_item_title', + amount: 16, + }, + { + title: 'After Shop Loop Item Title', + dataTestId: 'woocommerce_after_shop_loop_item_title', + content: 'Hook: woocommerce_after_shop_loop_item_title', + amount: 16, + }, + { + title: 'Before Shop Loop Item', + dataTestId: 'woocommerce_before_shop_loop_item', + content: 'Hook: woocommerce_before_shop_loop_item', + amount: 16, + }, + { + title: 'After Shop Loop Item', + dataTestId: 'woocommerce_after_shop_loop_item', + content: 'Hook: woocommerce_after_shop_loop_item', + amount: 16, + }, +]; + +const compatiblityPluginFileName = 'compatibility-plugin.php'; +const test = base.extend< { pageObject: ProductCollectionPage } >( { + pageObject: async ( + { page, admin, editor, templateApiUtils, editorUtils }, + use + ) => { + const pageObject = new ProductCollectionPage( { + page, + admin, + editor, + templateApiUtils, + editorUtils, + } ); + await pageObject.createNewPostAndInsertBlock(); + await use( pageObject ); + }, +} ); + +test.describe( 'Compatibility Layer with Product Collection block', () => { + test.beforeAll( async () => { + await installPluginFromPHPFile( + `${ __dirname }/${ compatiblityPluginFileName }` + ); + } ); + + test.describe( + 'Product Archive with Product Collection block', + async () => { + test.beforeEach( async ( { pageObject } ) => { + await pageObject.replaceProductsWithProductCollectionInTemplate( + 'woocommerce/woocommerce//archive-product' + ); + await pageObject.goToProductCatalogFrontend(); + } ); + + test( 'Hooks are attached to the page', async ( { + pageObject, + } ) => { + singleOccurranceScenarios.forEach( + async ( { title, dataTestId, content, amount } ) => { + await test.step( title, async () => { + const hooks = + pageObject.locateByTestId( dataTestId ); + await expect( hooks ).toHaveCount( amount ); + await expect( hooks ).toHaveText( content ); + } ); + } + ); + + multipleOccurranceScenarios.forEach( + async ( { title, dataTestId, content, amount } ) => { + await test.step( title, async () => { + const hooks = + pageObject.locateByTestId( dataTestId ); + await expect( hooks ).toHaveCount( amount ); + await expect( hooks.first() ).toHaveText( content ); + } ); + } + ); + } ); + } + ); + + test.afterAll( async () => { + await uninstallPluginFromPHPFile( + `${ __dirname }/${ compatiblityPluginFileName }` + ); + await deleteAllTemplates( 'wp_template' ); + } ); +} ); diff --git a/tests/e2e/tests/product-collection/compatibility-plugin.php b/tests/e2e/tests/product-collection/compatibility-plugin.php new file mode 100644 index 00000000000..b850eff3c8d --- /dev/null +++ b/tests/e2e/tests/product-collection/compatibility-plugin.php @@ -0,0 +1,95 @@ + + Hook: woocommerce_before_main_content +

    '; + } +); + +add_action( + 'woocommerce_after_main_content', + function () { + echo '

    + Hook: woocommerce_after_main_content +

    '; + } +); +add_action( + 'woocommerce_before_shop_loop_item_title', + function () { + echo '

    + Hook: woocommerce_before_shop_loop_item_title +

    '; + } +); + +add_action( + 'woocommerce_shop_loop_item_title', + function () { + echo '

    + Hook: woocommerce_shop_loop_item_title +

    '; + } +); + +add_action( + 'woocommerce_after_shop_loop_item_title', + function () { + echo '

    + Hook: woocommerce_after_shop_loop_item_title +

    '; + } +); + +add_action( + 'woocommerce_before_shop_loop_item', + function () { + echo '

    + Hook: woocommerce_before_shop_loop_item +

    '; + } +); + +add_action( + 'woocommerce_after_shop_loop_item', + function () { + echo '

    + Hook: woocommerce_after_shop_loop_item +

    '; + } +); + +add_action( + 'woocommerce_before_shop_loop', + function () { + echo '

    + Hook: woocommerce_before_shop_loop +

    '; + } +); + +add_action( + 'woocommerce_after_shop_loop', + function () { + echo '

    + Hook: woocommerce_after_shop_loop +

    '; + } +); + +add_action( + 'woocommerce_no_products_found', + function () { + echo '

    + Hook: woocommerce_no_products_found +

    '; + } +); diff --git a/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts b/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts index 6ef6a71a932..4794d4315f7 100644 --- a/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts +++ b/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts @@ -9,12 +9,16 @@ import { test as base, expect } from '@woocommerce/e2e-playwright-utils'; import ProductCollectionPage, { SELECTORS } from './product-collection.page'; const test = base.extend< { pageObject: ProductCollectionPage } >( { - pageObject: async ( { page, admin, editor, templateApiUtils }, use ) => { + pageObject: async ( + { page, admin, editor, templateApiUtils, editorUtils }, + use + ) => { const pageObject = new ProductCollectionPage( { page, admin, editor, templateApiUtils, + editorUtils, } ); await pageObject.createNewPostAndInsertBlock(); await use( pageObject ); diff --git a/tests/e2e/tests/product-collection/product-collection.page.ts b/tests/e2e/tests/product-collection/product-collection.page.ts index e2ea2763acf..01eac81f276 100644 --- a/tests/e2e/tests/product-collection/product-collection.page.ts +++ b/tests/e2e/tests/product-collection/product-collection.page.ts @@ -2,8 +2,9 @@ * External dependencies */ import { Locator, Page } from '@playwright/test'; -import { TemplateApiUtils } from '@woocommerce/e2e-utils'; +import { TemplateApiUtils, EditorUtils } from '@woocommerce/e2e-utils'; import { Editor, Admin } from '@wordpress/e2e-test-utils-playwright'; +import { BlockRepresentation } from '@wordpress/e2e-test-utils-playwright/build-types/editor/insert-block'; export const SELECTORS = { productTemplate: '.wc-block-product-template', @@ -28,6 +29,8 @@ export const SELECTORS = { onSaleControlLabel: 'Show only products on sale', inheritQueryFromTemplateControl: '.wc-block-product-collection__inherit-query-control', + productSearchLabel: 'Search', + productSearchButton: '.wp-block-search__button wp-element-button', }; class ProductCollectionPage { @@ -36,6 +39,7 @@ class ProductCollectionPage { private admin: Admin; private editor: Editor; private templateApiUtils: TemplateApiUtils; + private editorUtils: EditorUtils; productTemplate!: Locator; products!: Locator; productImages!: Locator; @@ -49,20 +53,23 @@ class ProductCollectionPage { admin, editor, templateApiUtils, + editorUtils, }: { page: Page; admin: Admin; editor: Editor; templateApiUtils: TemplateApiUtils; + editorUtils: EditorUtils; } ) { this.page = page; this.admin = admin; this.editor = editor; this.templateApiUtils = templateApiUtils; + this.editorUtils = editorUtils; } async createNewPostAndInsertBlock() { - await this.admin.createNewPost(); + await this.admin.createNewPost( { legacyCanvas: true } ); await this.editor.insertBlock( { name: this.BLOCK_NAME, } ); @@ -77,7 +84,31 @@ class ProductCollectionPage { await this.refreshLocators( 'frontend' ); } - async goToProductCatalogAndInsertBlock() { + async replaceProductsWithProductCollectionInTemplate( template: string ) { + await this.templateApiUtils.revertTemplate( template ); + await this.admin.visitSiteEditor( { + postId: template, + postType: 'wp_template', + } ); + await this.editorUtils.enterEditMode(); + + await this.editorUtils.replaceBlockByBlockName( + 'core/query', + 'woocommerce/product-collection' + ); + + await this.editor.saveSiteEditorEntities(); + } + + async goToProductCatalogFrontend() { + await this.page.goto( `/shop` ); + } + + async goToProductCatalogAndInsertBlock( + block: BlockRepresentation = { + name: this.BLOCK_NAME, + } + ) { await this.templateApiUtils.revertTemplate( 'woocommerce/woocommerce//archive-product' ); @@ -89,10 +120,16 @@ class ProductCollectionPage { await this.editor.canvas.click( 'body' ); - await this.editor.insertBlock( { - name: this.BLOCK_NAME, - } ); + await this.editor.insertBlock( block ); await this.editor.openDocumentSettingsSidebar(); + await this.editor.saveSiteEditorEntities(); + } + + async searchProducts( phrase: string ) { + await this.page + .getByLabel( SELECTORS.productSearchLabel ) + .fill( phrase ); + await this.page.locator( SELECTORS.productSearchButton ).click(); } async addFilter( @@ -310,6 +347,10 @@ class ProductCollectionPage { } ); } + locateByTestId( testId: string ) { + return this.page.getByTestId( testId ); + } + /** * Private methods to be used by the class. */ diff --git a/tests/e2e/tests/products/products.block_theme.side_effects.spec.ts b/tests/e2e/tests/products/products.block_theme.side_effects.spec.ts index a05ff3d2287..77fa1bca139 100644 --- a/tests/e2e/tests/products/products.block_theme.side_effects.spec.ts +++ b/tests/e2e/tests/products/products.block_theme.side_effects.spec.ts @@ -159,15 +159,6 @@ for ( const { ), ] ); - // @todo This is a workaround to wait for the save button to be enabled. It works only without Gutenberg enabled. We have to refactor this. - await page - .locator( - "button.edit-site-save-button__button[aria-label='Save'][aria-disabled='true']" - ) - .waitFor( { - state: 'visible', - } ); - await page.goto( frontendPage, { waitUntil: 'load', } ); diff --git a/tests/e2e/tests/templates/cart-template.block_theme.spec.ts b/tests/e2e/tests/templates/cart-template.block_theme.spec.ts index 5725c94781f..e59fc95f817 100644 --- a/tests/e2e/tests/templates/cart-template.block_theme.spec.ts +++ b/tests/e2e/tests/templates/cart-template.block_theme.spec.ts @@ -14,17 +14,19 @@ test.describe( 'Test the cart template', async () => { } ); test( 'Template can be opened in the site editor', async ( { + admin, page, editorUtils, } ) => { - await page.goto( '/wp-admin/site-editor.php' ); + await admin.visitAdminPage( 'site-editor.php' ); + await editorUtils.waitForSiteEditorFinishLoading(); await page.getByRole( 'button', { name: /Templates/i } ).click(); await page.getByRole( 'button', { name: /Cart/i } ).click(); await editorUtils.enterEditMode(); await expect( page - .frameLocator( 'iframe' ) + .frameLocator( 'iframe[title="Editor canvas"i]' ) .locator( 'button:has-text("Proceed to checkout")' ) .first() ).toBeVisible(); @@ -45,13 +47,16 @@ test.describe( 'Test the cart template', async () => { name: 'core/paragraph', attributes: { content: 'Hello World' }, } ); - await editor.saveSiteEditorEntities(); - // Wait for the response after saving the post because sometimes there's a race condition, and loading the post - // shows a version without the newly saved content. - await editor.page.waitForResponse( ( response ) => - response.url().includes( permalink ) - ); + await Promise.all( [ + editor.saveSiteEditorEntities(), + // Wait for the response after saving the post because sometimes there's a race condition, and loading the post + // shows a version without the newly saved content. + editor.page.waitForResponse( ( response ) => + response.url().includes( permalink ) + ), + ] ); + await page.goto( permalink, { waitUntil: 'commit' } ); await expect( page.getByText( 'Hello World' ).first() ).toBeVisible(); diff --git a/tests/e2e/tests/templates/checkout-header-template-part.block_theme.spec.ts b/tests/e2e/tests/templates/checkout-header-template-part.block_theme.spec.ts index 6e4db8a7ac5..2a14e6044d5 100644 --- a/tests/e2e/tests/templates/checkout-header-template-part.block_theme.spec.ts +++ b/tests/e2e/tests/templates/checkout-header-template-part.block_theme.spec.ts @@ -14,11 +14,15 @@ test.afterAll( async ( { requestUtils } ) => { test.describe( 'Test the checkout header template part', async () => { test( 'Template can be opened in the site editor', async ( { page } ) => { - await page.goto( '/wp-admin/site-editor.php' ); - await page.getByRole( 'button', { name: /Template Parts/i } ).click(); - await page.getByRole( 'button', { name: /Checkout Header/i } ).click(); + await page.goto( + '/wp-admin/site-editor.php?path=/wp_template_part/all' + ); + await page.getByText( 'Checkout Header', { exact: true } ).click(); - const editButton = page.getByRole( 'button', { name: /Edit/i } ); + const editButton = page.getByRole( 'button', { + name: 'Edit', + exact: true, + } ); await expect( editButton ).toBeVisible(); } ); diff --git a/tests/e2e/tests/templates/checkout-template.block_theme.spec.ts b/tests/e2e/tests/templates/checkout-template.block_theme.spec.ts index 5d6b68c01e5..915ee11248d 100644 --- a/tests/e2e/tests/templates/checkout-template.block_theme.spec.ts +++ b/tests/e2e/tests/templates/checkout-template.block_theme.spec.ts @@ -14,10 +14,12 @@ test.describe( 'Test the checkout template', async () => { } ); test( 'Template can be opened in the site editor', async ( { + admin, page, editorUtils, } ) => { - await page.goto( '/wp-admin/site-editor.php' ); + await admin.visitAdminPage( 'site-editor.php' ); + await editorUtils.waitForSiteEditorFinishLoading(); await page.getByRole( 'button', { name: /Templates/i } ).click(); await page.getByRole( 'button', { name: /Checkout/i } ).click(); await editorUtils.enterEditMode(); diff --git a/tests/e2e/utils/api/index.ts b/tests/e2e/utils/api/index.ts index b1a3cbc357b..9c1e96b0294 100644 --- a/tests/e2e/utils/api/index.ts +++ b/tests/e2e/utils/api/index.ts @@ -1 +1 @@ -export * from './TemplateApiUtils'; +export * from './template-api-utils.page'; diff --git a/tests/e2e/utils/api/TemplateApiUtils.ts b/tests/e2e/utils/api/template-api-utils.page.ts similarity index 100% rename from tests/e2e/utils/api/TemplateApiUtils.ts rename to tests/e2e/utils/api/template-api-utils.page.ts diff --git a/tests/e2e/utils/editor/EditorUtils.ts b/tests/e2e/utils/editor/editor-utils.page.ts similarity index 81% rename from tests/e2e/utils/editor/EditorUtils.ts rename to tests/e2e/utils/editor/editor-utils.page.ts index 8fb15f0c5f0..f7a82a6146c 100644 --- a/tests/e2e/utils/editor/EditorUtils.ts +++ b/tests/e2e/utils/editor/editor-utils.page.ts @@ -65,6 +65,33 @@ export class EditorUtils { ); } + async replaceBlockByBlockName( name: string, nameToInsert: string ) { + await this.page.evaluate( + ( { name: _name, nameToInsert: _nameToInsert } ) => { + const blocks = window.wp.data + .select( 'core/block-editor' ) + .getBlocks(); + const firstMatchingBlock = blocks + .flatMap( + ( { + innerBlocks, + }: { + innerBlocks: BlockRepresentation[]; + } ) => innerBlocks + ) + .find( + ( block: BlockRepresentation ) => block.name === _name + ); + const { clientId } = firstMatchingBlock; + const block = window.wp.blocks.createBlock( _nameToInsert ); + window.wp.data + .dispatch( 'core/block-editor' ) + .replaceBlock( clientId, block ); + }, + { name, nameToInsert } + ); + } + async getBlockRootClientId( clientId: string ) { return this.page.evaluate< string | null, string >( ( id ) => { return window.wp.data @@ -123,11 +150,12 @@ export class EditorUtils { } async enterEditMode() { - await this.editor.page.waitForSelector( - '.edit-site-visual-editor__editor-canvas[role="button"]', - { timeout: 3000 } - ); - await this.editor.canvas.click( 'body' ); + await this.editor.page + .getByRole( 'button', { + name: 'Edit', + exact: true, + } ) + .click(); } async isBlockEarlierThan< T >( @@ -173,4 +201,15 @@ export class EditorUtils { return firstBlockIndex < secondBlockIndex; } + + async waitForSiteEditorFinishLoading() { + await this.page + .frameLocator( 'iframe[title="Editor canvas"i]' ) + .locator( 'body > *' ) + .first() + .waitFor(); + await this.page + .locator( '.edit-site-canvas-spinner' ) + .waitFor( { state: 'hidden' } ); + } } diff --git a/tests/e2e/utils/editor/index.ts b/tests/e2e/utils/editor/index.ts index 9016ba8813c..015f175c5c8 100644 --- a/tests/e2e/utils/editor/index.ts +++ b/tests/e2e/utils/editor/index.ts @@ -1 +1 @@ -export * from './EditorUtils'; +export * from './editor-utils.page'; diff --git a/tests/e2e/utils/frontend/FrontendUtils.ts b/tests/e2e/utils/frontend/frontend-utils.page.ts similarity index 60% rename from tests/e2e/utils/frontend/FrontendUtils.ts rename to tests/e2e/utils/frontend/frontend-utils.page.ts index 1454a5fce1f..9d82f26c3f0 100644 --- a/tests/e2e/utils/frontend/FrontendUtils.ts +++ b/tests/e2e/utils/frontend/frontend-utils.page.ts @@ -1,17 +1,16 @@ /** * External dependencies */ - -import { Page } from '@playwright/test'; - -/** - * Internal dependencies - */ +import { Page, Locator } from '@playwright/test'; +import { RequestUtils } from '@wordpress/e2e-test-utils-playwright'; export class FrontendUtils { page: Page; - constructor( page: Page ) { + requestUtils: RequestUtils; + + constructor( page: Page, requestUtils: RequestUtils ) { this.page = page; + this.requestUtils = requestUtils; } async getBlockByName( name: string ) { @@ -32,18 +31,43 @@ export class FrontendUtils { await this.page .getByLabel( `Add “${ itemName }” to your cart` ) .click(); - await this.page.waitForResponse( /add_to_cart/ ); + await this.page.waitForResponse( /add_to_cart|batch/ ); return; } await this.page.click( 'text=Add to cart' ); } + async goToCheckout() { + await this.page.goto( '/checkout', { + waitUntil: 'commit', + } ); + } + async goToShop() { await this.page.goto( '/shop', { waitUntil: 'commit', } ); } + async emptyCart() { + const cartResponse = await this.requestUtils.request.get( + '/wp-json/wc/store/cart' + ); + const nonce = cartResponse.headers()?.nonce; + if ( ! nonce ) { + throw new Error( 'Could not get cart nonce.' ); + } + const res = await this.requestUtils.request.delete( + '/wp-json/wc/store/v1/cart/items', + { headers: { nonce } } + ); + if ( ! res.ok() ) { + throw new Error( + `Got an error response when trying to empty cart. Status code: ${ res.status() }` + ); + } + } + async isBlockEarlierThan< T >( containerBlock: T, firstBlock: string, @@ -87,4 +111,14 @@ export class FrontendUtils { return firstBlockIndex < secondBlockIndex; } + + /** + * Playwright selectText causes flaky tests when running on local + * development machine. This method is more reliable on both environments. + */ + async selectTextInput( locator: Locator ) { + await locator.click(); + await locator.press( 'End' ); + await locator.press( 'Shift+Home' ); + } } diff --git a/tests/e2e/utils/frontend/index.ts b/tests/e2e/utils/frontend/index.ts index 67f31ea2b68..a7b5d426561 100644 --- a/tests/e2e/utils/frontend/index.ts +++ b/tests/e2e/utils/frontend/index.ts @@ -1 +1 @@ -export * from './FrontendUtils'; +export * from './frontend-utils.page'; diff --git a/tests/e2e/utils/index.ts b/tests/e2e/utils/index.ts index 6b13546eeea..2183b2aab57 100644 --- a/tests/e2e/utils/index.ts +++ b/tests/e2e/utils/index.ts @@ -4,3 +4,4 @@ export * from './use-block-theme'; export * from './cli'; export * from './api'; export * from './editor'; +export * from './storeApi'; diff --git a/tests/e2e/utils/storeApi/index.ts b/tests/e2e/utils/storeApi/index.ts new file mode 100644 index 00000000000..dccbd4a36e5 --- /dev/null +++ b/tests/e2e/utils/storeApi/index.ts @@ -0,0 +1 @@ +export * from './store-api-utils.page'; diff --git a/tests/e2e/utils/storeApi/store-api-utils.page.ts b/tests/e2e/utils/storeApi/store-api-utils.page.ts new file mode 100644 index 00000000000..70477879a24 --- /dev/null +++ b/tests/e2e/utils/storeApi/store-api-utils.page.ts @@ -0,0 +1,35 @@ +/** + * External dependencies + */ + +import { RequestUtils } from '@wordpress/e2e-test-utils-playwright'; + +/** + * Internal dependencies + */ + +export class StoreApiUtils { + private requestUtils: RequestUtils; + + constructor( requestUtils: RequestUtils ) { + this.requestUtils = requestUtils; + } + + // @todo: It is necessary work to a middleware to avoid this kind of code. + async cleanCart() { + const response = await this.requestUtils.request.get( + '/wp-json/wc/store/cart' + ); + + const { nonce } = response.headers(); + + await this.requestUtils.request.delete( + `/wp-json/wc/store/v1/cart/items`, + { + headers: { + nonce, + }, + } + ); + } +} diff --git a/tests/js/jest.config.json b/tests/js/jest.config.json index 6c6d4be5889..037aa863206 100644 --- a/tests/js/jest.config.json +++ b/tests/js/jest.config.json @@ -29,7 +29,8 @@ "@woocommerce/shared-hocs": "assets/js/shared/hocs", "@woocommerce/blocks-test-utils": "tests/utils", "@woocommerce/types": "assets/js/types", - "@woocommerce/utils": "assets/js/utils" + "@woocommerce/utils": "assets/js/utils", + "@woocommerce/interactivity": "assets/js/interactivity" }, "setupFiles": [ "@wordpress/jest-preset-default/scripts/setup-globals.js", diff --git a/tsconfig.base.json b/tsconfig.base.json index 156236dc9cf..9eac14c0f72 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -65,6 +65,7 @@ "@woocommerce/e2e-utils": [ "tests/e2e/utils" ], "@woocommerce/e2e-types": [ "tests/e2e/types" ], "@woocommerce/e2e-playwright-utils": [ "tests/e2e/playwright-utils" ], + "@woocommerce/e2e-mocks/*": [ "tests/e2e/mocks/*" ], "@woocommerce/templates/*": [ "assets/js/templates/*" ] } } diff --git a/webpack.config.js b/webpack.config.js index ddb7942d125..8ba5746c343 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -75,7 +75,12 @@ const PaymentsConfig = { */ const StylingConfig = { ...sharedConfig, - ...getStylingConfig( { alias: getAlias() } ), + ...getStylingConfig( { alias: getAlias(), isClassicThemeConfig: false } ), +}; + +const StylingClassicThemeConfig = { + ...sharedConfig, + ...getStylingConfig( { alias: getAlias(), isClassicThemeConfig: true } ), }; /** @@ -103,4 +108,5 @@ module.exports = [ SiteEditorConfig, StylingConfig, InteractivityConfig, + StylingClassicThemeConfig, ]; diff --git a/woocommerce-gutenberg-products-block.php b/woocommerce-gutenberg-products-block.php index 2c7257273ef..d36cef37fc8 100644 --- a/woocommerce-gutenberg-products-block.php +++ b/woocommerce-gutenberg-products-block.php @@ -3,14 +3,14 @@ * Plugin Name: WooCommerce Blocks * Plugin URI: https://github.com/woocommerce/woocommerce-gutenberg-products-block * Description: WooCommerce blocks for the Gutenberg editor. - * Version: 10.9.0-dev + * Version: 11.0.0-dev * Author: Automattic * Author URI: https://woocommerce.com * Text Domain: woo-gutenberg-products-block - * Requires at least: 6.2 + * Requires at least: 6.3 * Requires PHP: 7.3 - * WC requires at least: 7.8 - * WC tested up to: 7.9 + * WC requires at least: 7.9 + * WC tested up to: 8.0 * * @package WooCommerce\Blocks * @internal This file is only used when running as a feature plugin. @@ -18,7 +18,7 @@ defined( 'ABSPATH' ) || exit; -$minimum_wp_version = '6.2'; +$minimum_wp_version = '6.3'; if ( ! defined( 'WC_BLOCKS_IS_FEATURE_PLUGIN' ) ) { define( 'WC_BLOCKS_IS_FEATURE_PLUGIN', true );