From a7383579be0d68e30de99ae8a92295cd56e5eb9d Mon Sep 17 00:00:00 2001 From: Niels Lange Date: Thu, 14 Mar 2024 19:33:33 +0700 Subject: [PATCH] Allow usage of block notice templates when using classic themes (#45164) * Allow block notice templates in classic themes * Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce * Fix e2e constants file * Improve inline comments * Add filter and enhance e2e tests * Adjust test names * Adress PHP lint errors * Adress PHP lint errors * Adress PHP lint errors --------- Co-authored-by: github-actions --- .gitignore | 3 - .../tests/e2e/bin/scripts/parallel/themes.sh | 16 +- .../tests/e2e/bin/test-env-setup.sh | 9 +- .../e2e/bin/themes/storefront-child/style.css | 4 - .../functions.php | 3 + .../style.css | 4 + .../style.css | 4 + .../woocommerce/notices/error.php | 4 +- .../woocommerce/notices/notice.php | 2 +- .../woocommerce/notices/success.php | 2 +- .../style.css | 4 + .../woocommerce/notices/error.php | 2 +- .../woocommerce/notices/notice.php | 2 +- .../woocommerce/notices/success.php | 2 +- .../themes/twentytwentyfour-child/style.css | 4 - .../functions.php | 3 + .../style.css | 4 + .../style.css | 4 + .../woocommerce/notices/error.php | 51 ++++++ .../woocommerce/notices/notice.php | 37 ++++ .../woocommerce/notices/success.php | 37 ++++ .../style.css | 4 + .../woocommerce/notices/error.php | 34 ++++ .../woocommerce/notices/notice.php | 32 ++++ .../woocommerce/notices/success.php | 32 ++++ ...s.shopper.block_theme.side_effects.spec.ts | 159 +++++++++++++++--- ...lock-notices.shopper.classic_theme.spec.ts | 141 +++++++++++++--- .../tests/e2e/utils/constants.ts | 8 +- .../reports/e2e-cart-performance.json | 7 + ...538-allow-block-notices-for-classic-themes | 4 + .../src/Blocks/Domain/Services/Notices.php | 22 ++- 31 files changed, 568 insertions(+), 76 deletions(-) delete mode 100644 plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child/style.css create mode 100644 plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__block-notices-filter/functions.php create mode 100644 plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__block-notices-filter/style.css create mode 100644 plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__block-notices-template/style.css rename plugins/woocommerce-blocks/tests/e2e/bin/themes/{twentytwentyfour-child => storefront-child__block-notices-template}/woocommerce/notices/error.php (92%) rename plugins/woocommerce-blocks/tests/e2e/bin/themes/{twentytwentyfour-child => storefront-child__block-notices-template}/woocommerce/notices/notice.php (94%) rename plugins/woocommerce-blocks/tests/e2e/bin/themes/{twentytwentyfour-child => storefront-child__block-notices-template}/woocommerce/notices/success.php (94%) create mode 100644 plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__classic-notices-template/style.css rename plugins/woocommerce-blocks/tests/e2e/bin/themes/{storefront-child => storefront-child__classic-notices-template}/woocommerce/notices/error.php (91%) rename plugins/woocommerce-blocks/tests/e2e/bin/themes/{storefront-child => storefront-child__classic-notices-template}/woocommerce/notices/notice.php (91%) rename plugins/woocommerce-blocks/tests/e2e/bin/themes/{storefront-child => storefront-child__classic-notices-template}/woocommerce/notices/success.php (91%) delete mode 100644 plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child/style.css create mode 100644 plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__block-notices-filter/functions.php create mode 100644 plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__block-notices-filter/style.css create mode 100644 plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__block-notices-template/style.css create mode 100644 plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__block-notices-template/woocommerce/notices/error.php create mode 100644 plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__block-notices-template/woocommerce/notices/notice.php create mode 100644 plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__block-notices-template/woocommerce/notices/success.php create mode 100644 plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__classic-notices-template/style.css create mode 100644 plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__classic-notices-template/woocommerce/notices/error.php create mode 100644 plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__classic-notices-template/woocommerce/notices/notice.php create mode 100644 plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__classic-notices-template/woocommerce/notices/success.php create mode 100644 plugins/woocommerce-blocks/tests/e2e/utils/performance/reports/e2e-cart-performance.json create mode 100644 plugins/woocommerce/changelog/45164-update-44538-allow-block-notices-for-classic-themes diff --git a/.gitignore b/.gitignore index 2a4f3d7d16e0..e45874e222e9 100644 --- a/.gitignore +++ b/.gitignore @@ -37,9 +37,6 @@ npm-debug.log *.swp *.zip -# Allow theme *.zip files for testing purposes -!plugins/woocommerce-blocks/tests/e2e/bin/themes/*.zip - # Built packages build/ build-module/ diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/scripts/parallel/themes.sh b/plugins/woocommerce-blocks/tests/e2e/bin/scripts/parallel/themes.sh index bdf110a93f68..e840317605bf 100644 --- a/plugins/woocommerce-blocks/tests/e2e/bin/scripts/parallel/themes.sh +++ b/plugins/woocommerce-blocks/tests/e2e/bin/scripts/parallel/themes.sh @@ -7,9 +7,17 @@ script_dir="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)" themes_dir="$script_dir/../../themes" # Delete the child themes if they already exist. -wp theme delete storefront-child -wp theme delete twentytwentyfour-child +wp theme delete storefront-child__block-notices-filter +wp theme delete storefront-child__block-notices-template +wp theme delete storefront-child__classic-notices-template +wp theme delete twentytwentyfour-child__block-notices-filter +wp theme delete twentytwentyfour-child__block-notices-template +wp theme delete twentytwentyfour-child__classic-notices-template # Install the child themes. -wp theme install "$themes_dir/storefront-child.zip" -wp theme install "$themes_dir/twentytwentyfour-child.zip" +wp theme install "$themes_dir/storefront-child__block-notices-filter.zip" +wp theme install "$themes_dir/storefront-child__block-notices-template.zip" +wp theme install "$themes_dir/storefront-child__classic-notices-template.zip" +wp theme install "$themes_dir/twentytwentyfour-child__block-notices-filter.zip" +wp theme install "$themes_dir/twentytwentyfour-child__block-notices-template.zip" +wp theme install "$themes_dir/twentytwentyfour-child__classic-notices-template.zip" diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/test-env-setup.sh b/plugins/woocommerce-blocks/tests/e2e/bin/test-env-setup.sh index 4058803eb828..170c7dab2c62 100755 --- a/plugins/woocommerce-blocks/tests/e2e/bin/test-env-setup.sh +++ b/plugins/woocommerce-blocks/tests/e2e/bin/test-env-setup.sh @@ -9,7 +9,14 @@ relative_path=${script_dir#$head_dir/} # Generate the child themes zip files before running the tests. # By doing so, we ensure that the zip files are up-to-date. themes_dir="$script_dir/themes" -themes=("storefront-child" "twentytwentyfour-child") +themes=( + "storefront-child__block-notices-filter" + "storefront-child__block-notices-template" + "storefront-child__classic-notices-template" + "twentytwentyfour-child__block-notices-filter" + "twentytwentyfour-child__block-notices-template" + "twentytwentyfour-child__classic-notices-template" +) for theme in "${themes[@]}"; do # Define the path to the theme directory and the zip file. theme_dir="$themes_dir/$theme" diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child/style.css b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child/style.css deleted file mode 100644 index 96c0119d61b1..000000000000 --- a/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child/style.css +++ /dev/null @@ -1,4 +0,0 @@ -/* -Theme Name: Storefront Child -Template: storefront -*/ diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__block-notices-filter/functions.php b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__block-notices-filter/functions.php new file mode 100644 index 000000000000..96148a17f2f0 --- /dev/null +++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__block-notices-filter/functions.php @@ -0,0 +1,3 @@ + > - BLOCK ERROR NOTICE - + BLOCK ERROR NOTICE: diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child/woocommerce/notices/notice.php b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__block-notices-template/woocommerce/notices/notice.php similarity index 94% rename from plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child/woocommerce/notices/notice.php rename to plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__block-notices-template/woocommerce/notices/notice.php index 13ec97ee1466..631ce24dc867 100644 --- a/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child/woocommerce/notices/notice.php +++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__block-notices-template/woocommerce/notices/notice.php @@ -31,7 +31,7 @@
- BLOCK INFO NOTICE - + BLOCK INFO NOTICE:
diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child/woocommerce/notices/success.php b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__block-notices-template/woocommerce/notices/success.php similarity index 94% rename from plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child/woocommerce/notices/success.php rename to plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__block-notices-template/woocommerce/notices/success.php index 4705393a2d82..22eef2d36f66 100644 --- a/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child/woocommerce/notices/success.php +++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__block-notices-template/woocommerce/notices/success.php @@ -31,7 +31,7 @@
- BLOCK SUCCESS NOTICE - + BLOCK SUCCESS NOTICE:
diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__classic-notices-template/style.css b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__classic-notices-template/style.css new file mode 100644 index 000000000000..ea930d81e41c --- /dev/null +++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__classic-notices-template/style.css @@ -0,0 +1,4 @@ +/* +Theme Name: Storefront Child (Classic Notices by template) +Template: storefront +*/ diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child/woocommerce/notices/error.php b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__classic-notices-template/woocommerce/notices/error.php similarity index 91% rename from plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child/woocommerce/notices/error.php rename to plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__classic-notices-template/woocommerce/notices/error.php index 516b9e7ddc9f..b8752e084591 100644 --- a/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child/woocommerce/notices/error.php +++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__classic-notices-template/woocommerce/notices/error.php @@ -28,7 +28,7 @@ diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child/woocommerce/notices/notice.php b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__classic-notices-template/woocommerce/notices/notice.php similarity index 91% rename from plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child/woocommerce/notices/notice.php rename to plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__classic-notices-template/woocommerce/notices/notice.php index 33f1b85ac483..9b38f0784f4a 100644 --- a/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child/woocommerce/notices/notice.php +++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__classic-notices-template/woocommerce/notices/notice.php @@ -27,6 +27,6 @@
> - CLASSIC INFO NOTICE - + CLASSIC INFO NOTICE:
diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child/woocommerce/notices/success.php b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__classic-notices-template/woocommerce/notices/success.php similarity index 91% rename from plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child/woocommerce/notices/success.php rename to plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__classic-notices-template/woocommerce/notices/success.php index 9f3a3ec225f4..bdd97fe4dd41 100644 --- a/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child/woocommerce/notices/success.php +++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__classic-notices-template/woocommerce/notices/success.php @@ -27,6 +27,6 @@
role="alert"> - CLASSIC SUCCESS NOTICE - + CLASSIC SUCCESS NOTICE:
diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child/style.css b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child/style.css deleted file mode 100644 index b13e057ea0e0..000000000000 --- a/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child/style.css +++ /dev/null @@ -1,4 +0,0 @@ -/* -Theme Name: Twenty Twenty-Four Child -Template: twentytwentyfour -*/ diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__block-notices-filter/functions.php b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__block-notices-filter/functions.php new file mode 100644 index 000000000000..b46afb95671b --- /dev/null +++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__block-notices-filter/functions.php @@ -0,0 +1,3 @@ + 1; + +?> + + + + + +
role="alert"> + +
+ BLOCK INFO NOTICE: +
+
+ diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__block-notices-template/woocommerce/notices/success.php b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__block-notices-template/woocommerce/notices/success.php new file mode 100644 index 000000000000..22eef2d36f66 --- /dev/null +++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__block-notices-template/woocommerce/notices/success.php @@ -0,0 +1,37 @@ + + + +
role="alert"> + +
+ BLOCK SUCCESS NOTICE: +
+
+ diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__classic-notices-template/style.css b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__classic-notices-template/style.css new file mode 100644 index 000000000000..dd914af1d24d --- /dev/null +++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__classic-notices-template/style.css @@ -0,0 +1,4 @@ +/* +Theme Name: Twenty Twenty-Four Child (Classic Notices by template) +Template: twentytwentyfour +*/ diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__classic-notices-template/woocommerce/notices/error.php b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__classic-notices-template/woocommerce/notices/error.php new file mode 100644 index 000000000000..b8752e084591 --- /dev/null +++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__classic-notices-template/woocommerce/notices/error.php @@ -0,0 +1,34 @@ + + + diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__classic-notices-template/woocommerce/notices/notice.php b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__classic-notices-template/woocommerce/notices/notice.php new file mode 100644 index 000000000000..9b38f0784f4a --- /dev/null +++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__classic-notices-template/woocommerce/notices/notice.php @@ -0,0 +1,32 @@ + + + +
> + CLASSIC INFO NOTICE: +
+ diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__classic-notices-template/woocommerce/notices/success.php b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__classic-notices-template/woocommerce/notices/success.php new file mode 100644 index 000000000000..bdd97fe4dd41 --- /dev/null +++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__classic-notices-template/woocommerce/notices/success.php @@ -0,0 +1,32 @@ + + + +
role="alert"> + CLASSIC SUCCESS NOTICE: +
+ diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-checkout-block-notices.shopper.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-checkout-block-notices.shopper.block_theme.side_effects.spec.ts index ee6e46bf4c47..450e5059a7a2 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-checkout-block-notices.shopper.block_theme.side_effects.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-checkout-block-notices.shopper.block_theme.side_effects.spec.ts @@ -5,7 +5,9 @@ import { expect, test as base } from '@woocommerce/e2e-playwright-utils'; import { cli, BLOCK_THEME_SLUG, - BLOCK_CHILD_THEME_SLUG, + BLOCK_CHILD_THEME_WITH_BLOCK_NOTICES_FILTER_SLUG, + BLOCK_CHILD_THEME_WITH_BLOCK_NOTICES_TEMPLATE_SLUG, + BLOCK_CHILD_THEME_WITH_CLASSIC_NOTICES_TEMPLATE_SLUG, } from '@woocommerce/e2e-utils'; /** * Internal dependencies @@ -22,7 +24,7 @@ const test = base.extend< { checkoutPageObject: CheckoutPage } >( { }, } ); -test.describe( 'Shopper → Block Notice Templates', () => { +test.describe( 'Shopper → Notice Templates', () => { test.beforeEach( async ( { wpCliUtils, frontendUtils } ) => { const cartShortcodeID = await wpCliUtils.getPostIDByTitle( 'Cart Shortcode' @@ -45,7 +47,7 @@ test.describe( 'Shopper → Block Notice Templates', () => { await frontendUtils.emptyCart(); } ); - test( 'default templates are visible', async ( { + test( 'default block notice templates are visible', async ( { frontendUtils, page, } ) => { @@ -59,10 +61,9 @@ test.describe( 'Shopper → Block Notice Templates', () => { } ) ).toBeVisible(); - // We're explicitly checking for the following CSS classes here: - // .wc-block-components-notice-banner.is-success + // We're explicitly checking the CSS classes of the block notices, and that the SVG is visible. await expect( - page.locator( '.wc-block-components-notice-banner.is-success' ) + page.locator( '.wc-block-components-notice-banner.is-success svg' ) ).toBeVisible(); await page.reload(); @@ -75,10 +76,9 @@ test.describe( 'Shopper → Block Notice Templates', () => { } ) ).toBeVisible(); - // We're explicitly checking for the following CSS classes here: - // .wc-block-components-notice-banner.is-error + // We're explicitly checking the CSS classes of the block notices, and that the SVG is visible. await expect( - page.locator( '.wc-block-components-notice-banner.is-error' ) + page.locator( '.wc-block-components-notice-banner.is-error svg' ) ).toBeVisible(); await page.getByLabel( 'Remove Polo from cart' ).click(); @@ -89,16 +89,70 @@ test.describe( 'Shopper → Block Notice Templates', () => { } ) ).toBeVisible(); - // We're explicitly checking for the following CSS classes here: - // .wc-block-components-notice-banner.is-success + // We're explicitly checking the CSS classes of the block notices, and that the SVG is visible. await expect( - page.locator( '.wc-block-components-notice-banner.is-success' ) + page.locator( '.wc-block-components-notice-banner.is-success svg' ) ).toBeVisible(); } ); - test( 'custom templates are visible', async ( { frontendUtils, page } ) => { + test( 'custom block notice templates are visible by template overwrite', async ( { + frontendUtils, + page, + } ) => { + await cli( + `npm run wp-env run tests-cli -- wp theme activate ${ BLOCK_CHILD_THEME_WITH_BLOCK_NOTICES_TEMPLATE_SLUG }` + ); + + await frontendUtils.goToCartShortcode(); + await page.getByPlaceholder( 'Coupon code' ).fill( 'testcoupon' ); + await page.getByRole( 'button', { name: 'Apply coupon' } ).click(); + + await expect( + page.getByText( + 'BLOCK SUCCESS NOTICE: Coupon code applied successfully.' + ) + ).toBeVisible(); + + // We're explicitly checking the CSS classes of the block notices, and that the SVG is visible. + await expect( + page.locator( '.wc-block-components-notice-banner.is-success svg' ) + ).toBeVisible(); + + await page.reload(); + await page.getByPlaceholder( 'Coupon code' ).fill( 'testcoupon' ); + await page.getByRole( 'button', { name: 'Apply coupon' } ).click(); + + await expect( + page.getByText( 'BLOCK ERROR NOTICE: Coupon code already applied!' ) + ).toBeVisible(); + + // We're explicitly checking the CSS classes of the block notices, and that the SVG is visible. + await expect( + page.locator( '.wc-block-components-notice-banner.is-error svg' ) + ).toBeVisible(); + + await page.getByLabel( 'Remove Polo from cart' ).click(); + + await expect( + page.getByText( 'BLOCK INFO NOTICE: Your cart is currently empty.' ) + ).toBeVisible(); + + // We're explicitly checking the CSS classes of the block notices, and that the SVG is visible. + await expect( + page.locator( '.wc-block-components-notice-banner.is-success svg' ) + ).toBeVisible(); + await cli( - `npm run wp-env run tests-cli -- wp theme activate ${ BLOCK_CHILD_THEME_SLUG }` + `npm run wp-env run tests-cli -- wp theme activate ${ BLOCK_THEME_SLUG }` + ); + } ); + + test( 'classic notice templates are visible by template overwrite', async ( { + frontendUtils, + page, + } ) => { + await cli( + `npm run wp-env run tests-cli -- wp theme activate ${ BLOCK_CHILD_THEME_WITH_CLASSIC_NOTICES_TEMPLATE_SLUG }` ); await frontendUtils.goToCartShortcode(); @@ -107,14 +161,13 @@ test.describe( 'Shopper → Block Notice Templates', () => { await expect( page.getByText( - 'BLOCK SUCCESS NOTICE - Coupon code applied successfully.' + 'CLASSIC SUCCESS NOTICE: Coupon code applied successfully.' ) ).toBeVisible(); - // We're explicitly checking for the following CSS classes here: - // .wc-block-components-notice-banner.is-success + // We're explicitly checking the CSS classes of the classic notices. await expect( - page.locator( '.wc-block-components-notice-banner.is-success' ) + page.locator( '.woocommerce-notices-wrapper .woocommerce-message' ) ).toBeVisible(); await page.reload(); @@ -123,28 +176,82 @@ test.describe( 'Shopper → Block Notice Templates', () => { await expect( page.getByText( - 'BLOCK ERROR NOTICE - Coupon code already applied!' + 'CLASSIC ERROR NOTICE: Coupon code already applied!' ) ).toBeVisible(); - // We're explicitly checking for the following CSS classes here: - // .wc-block-components-notice-banner.is-error + // We're explicitly checking the CSS classes of the classic notices. await expect( - page.locator( '.wc-block-components-notice-banner.is-error' ) + page.locator( '.woocommerce-notices-wrapper .woocommerce-error' ) ).toBeVisible(); await page.getByLabel( 'Remove Polo from cart' ).click(); await expect( page.getByText( - 'BLOCK INFO NOTICE – Your cart is currently empty.' + 'CLASSIC INFO NOTICE: Your cart is currently empty.' ) ).toBeVisible(); - // We're explicitly checking for the following CSS classes here: - // .wc-block-components-notice-banner.is-success + // We're explicitly checking the CSS classes of the classic notices. + await expect( + page.locator( '.woocommerce-notices-wrapper .woocommerce-info' ) + ).toBeVisible(); + + await cli( + `npm run wp-env run tests-cli -- wp theme activate ${ BLOCK_THEME_SLUG }` + ); + } ); + + test( 'default classic notice templates cannot be triggered by filter', async ( { + frontendUtils, + page, + } ) => { + await cli( + `npm run wp-env run tests-cli -- wp theme activate ${ BLOCK_CHILD_THEME_WITH_BLOCK_NOTICES_FILTER_SLUG }` + ); + + await frontendUtils.goToCartShortcode(); + await page.getByPlaceholder( 'Coupon code' ).fill( 'testcoupon' ); + await page.getByRole( 'button', { name: 'Apply coupon' } ).click(); + + await expect( + page.getByText( 'Coupon code applied successfully.', { + exact: true, + } ) + ).toBeVisible(); + + // We're explicitly checking the CSS classes and that the SVG is visible. + await expect( + page.locator( '.wc-block-components-notice-banner.is-success svg' ) + ).toBeVisible(); + + await page.reload(); + await page.getByPlaceholder( 'Coupon code' ).fill( 'testcoupon' ); + await page.getByRole( 'button', { name: 'Apply coupon' } ).click(); + + await expect( + page.getByText( 'Coupon code already applied!', { + exact: true, + } ) + ).toBeVisible(); + + // We're explicitly checking the CSS classes and that the SVG is visible. + await expect( + page.locator( '.wc-block-components-notice-banner.is-error svg' ) + ).toBeVisible(); + + await page.getByLabel( 'Remove Polo from cart' ).click(); + + await expect( + page.getByText( 'Your cart is currently empty.', { + exact: true, + } ) + ).toBeVisible(); + + // We're explicitly checking the CSS classes and that the SVG is visible. await expect( - page.locator( '.wc-block-components-notice-banner.is-success' ) + page.locator( '.wc-block-components-notice-banner.is-success svg' ) ).toBeVisible(); await cli( diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-checkout-block-notices.shopper.classic_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-checkout-block-notices.shopper.classic_theme.spec.ts index d23c81e0197b..d8bb552a97c1 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-checkout-block-notices.shopper.classic_theme.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-checkout-block-notices.shopper.classic_theme.spec.ts @@ -5,7 +5,9 @@ import { expect, test as base } from '@woocommerce/e2e-playwright-utils'; import { cli, CLASSIC_THEME_SLUG, - CLASSIC_CHILD_THEME_SLUG, + CLASSIC_CHILD_THEME_WITH_CLASSIC_NOTICES_TEMPLATE_SLUG, + CLASSIC_CHILD_THEME_WITH_BLOCK_NOTICES_FILTER_SLUG, + CLASSIC_CHILD_THEME_WITH_BLOCK_NOTICES_TEMPLATE_SLUG, } from '@woocommerce/e2e-utils'; /** @@ -23,7 +25,7 @@ const test = base.extend< { checkoutPageObject: CheckoutPage } >( { }, } ); -test.describe( 'Shopper → Classic Notice Templates', () => { +test.describe( 'Shopper → Notice Templates', () => { test.beforeEach( async ( { wpCliUtils, frontendUtils } ) => { const cartShortcodeID = await wpCliUtils.getPostIDByTitle( 'Cart Shortcode' @@ -46,7 +48,7 @@ test.describe( 'Shopper → Classic Notice Templates', () => { await frontendUtils.emptyCart(); } ); - test( 'default templates are visible', async ( { + test( 'default classic notice templates are visible', async ( { frontendUtils, page, } ) => { @@ -60,8 +62,7 @@ test.describe( 'Shopper → Classic Notice Templates', () => { } ) ).toBeVisible(); - // We're explicitly checking for the following CSS classes here: - // .woocommerce-notices-wrapper .woocommerce-message + // We're explicitly checking the CSS classes of the classic notices. await expect( page.locator( '.woocommerce-notices-wrapper .woocommerce-message' ) ).toBeVisible(); @@ -74,8 +75,7 @@ test.describe( 'Shopper → Classic Notice Templates', () => { page.getByText( 'Coupon code already applied!', { exact: true } ) ).toBeVisible(); - // We're explicitly checking for the following CSS classes here: - // .woocommerce-notices-wrapper .woocommerce-message + // We're explicitly checking the CSS classes of the classic notices. await expect( page.locator( '.woocommerce-notices-wrapper .woocommerce-error' ) ).toBeVisible(); @@ -86,16 +86,18 @@ test.describe( 'Shopper → Classic Notice Templates', () => { page.getByText( 'Your cart is currently empty.', { exact: true } ) ).toBeVisible(); - // We're explicitly checking for the following CSS classes here: - // .woocommerce-notices-wrapper .woocommerce-info + // We're explicitly checking the CSS classes of the classic notices. await expect( page.locator( '.woocommerce-notices-wrapper .woocommerce-info' ) ).toBeVisible(); } ); - test( 'custom templates are visible', async ( { frontendUtils, page } ) => { + test( 'custom classic notice templates are visible by template overwrite', async ( { + frontendUtils, + page, + } ) => { await cli( - `npm run wp-env run tests-cli -- wp theme activate ${ CLASSIC_CHILD_THEME_SLUG }` + `npm run wp-env run tests-cli -- wp theme activate ${ CLASSIC_CHILD_THEME_WITH_CLASSIC_NOTICES_TEMPLATE_SLUG }` ); await frontendUtils.goToCartShortcode(); @@ -104,12 +106,11 @@ test.describe( 'Shopper → Classic Notice Templates', () => { await expect( page.getByText( - 'CLASSIC SUCCESS NOTICE - Coupon code applied successfully.' + 'CLASSIC SUCCESS NOTICE: Coupon code applied successfully.' ) ).toBeVisible(); - // We're explicitly checking for the following CSS classes here: - // .woocommerce-notices-wrapper .woocommerce-message + // We're explicitly checking the CSS classes of the classic notices. await expect( page.locator( '.woocommerce-notices-wrapper .woocommerce-message' ) ).toBeVisible(); @@ -120,12 +121,11 @@ test.describe( 'Shopper → Classic Notice Templates', () => { await expect( page.getByText( - 'CLASSIC ERROR NOTICE - Coupon code already applied!' + 'CLASSIC ERROR NOTICE: Coupon code already applied!' ) ).toBeVisible(); - // We're explicitly checking for the following CSS classes here: - // .woocommerce-notices-wrapper .woocommerce-message + // We're explicitly checking the CSS classes of the classic notices. await expect( page.locator( '.woocommerce-notices-wrapper .woocommerce-error' ) ).toBeVisible(); @@ -134,12 +134,11 @@ test.describe( 'Shopper → Classic Notice Templates', () => { await expect( page.getByText( - 'CLASSIC INFO NOTICE - Your cart is currently empty.' + 'CLASSIC INFO NOTICE: Your cart is currently empty.' ) ).toBeVisible(); - // We're explicitly checking for the following CSS classes here: - // .woocommerce-notices-wrapper .woocommerce-info + // We're explicitly checking the CSS classes of the classic notices. await expect( page.locator( '.woocommerce-notices-wrapper .woocommerce-info' ) ).toBeVisible(); @@ -148,4 +147,106 @@ test.describe( 'Shopper → Classic Notice Templates', () => { `npm run wp-env run tests-cli -- wp theme activate ${ CLASSIC_THEME_SLUG }` ); } ); + + test( 'custom block notice templates are visible by template overwrite', async ( { + frontendUtils, + page, + } ) => { + await cli( + `npm run wp-env run tests-cli -- wp theme activate ${ CLASSIC_CHILD_THEME_WITH_BLOCK_NOTICES_TEMPLATE_SLUG }` + ); + + await frontendUtils.goToCartShortcode(); + await page.getByPlaceholder( 'Coupon code' ).fill( 'testcoupon' ); + await page.getByRole( 'button', { name: 'Apply coupon' } ).click(); + + await expect( + page.getByText( + 'BLOCK SUCCESS NOTICE: Coupon code applied successfully.' + ) + ).toBeVisible(); + + // We're explicitly checking the CSS classes of the block notices, and that the SVG is visible. + await expect( + page.locator( '.wc-block-components-notice-banner.is-success svg' ) + ).toBeVisible(); + + await page.reload(); + await page.getByPlaceholder( 'Coupon code' ).fill( 'testcoupon' ); + await page.getByRole( 'button', { name: 'Apply coupon' } ).click(); + + await expect( + page.getByText( 'BLOCK ERROR NOTICE: Coupon code already applied!' ) + ).toBeVisible(); + + // We're explicitly checking the CSS classes of the block notices, and that the SVG is visible. + await expect( + page.locator( '.wc-block-components-notice-banner.is-error svg' ) + ).toBeVisible(); + + await page.getByLabel( 'Remove Polo from cart' ).click(); + + await expect( + page.getByText( 'BLOCK INFO NOTICE: Your cart is currently empty.' ) + ).toBeVisible(); + + // We're explicitly checking the CSS classes of the block notices, and that the SVG is visible. + await expect( + page.locator( '.wc-block-components-notice-banner.is-success svg' ) + ).toBeVisible(); + + await cli( + `npm run wp-env run tests-cli -- wp theme activate ${ CLASSIC_THEME_SLUG }` + ); + } ); + + test( 'default block notice templates are visible by filter', async ( { + frontendUtils, + page, + } ) => { + await cli( + `npm run wp-env run tests-cli -- wp theme activate ${ CLASSIC_CHILD_THEME_WITH_BLOCK_NOTICES_FILTER_SLUG }` + ); + + await frontendUtils.goToCartShortcode(); + await page.getByPlaceholder( 'Coupon code' ).fill( 'testcoupon' ); + await page.getByRole( 'button', { name: 'Apply coupon' } ).click(); + + await expect( + page.getByText( 'Coupon code applied successfully.' ) + ).toBeVisible(); + + // We're explicitly checking the CSS classes and that the SVG is visible. + await expect( + page.locator( '.wc-block-components-notice-banner.is-success svg' ) + ).toBeVisible(); + + await page.reload(); + await page.getByPlaceholder( 'Coupon code' ).fill( 'testcoupon' ); + await page.getByRole( 'button', { name: 'Apply coupon' } ).click(); + + await expect( + page.getByText( 'Coupon code already applied!' ) + ).toBeVisible(); + + // We're explicitly checking the CSS classes and that the SVG is visible. + await expect( + page.locator( '.wc-block-components-notice-banner.is-error svg' ) + ).toBeVisible(); + + await page.getByLabel( 'Remove Polo from cart' ).click(); + + await expect( + page.getByText( 'Your cart is currently empty.' ) + ).toBeVisible(); + + // We're explicitly checking the CSS classes and that the SVG is visible. + await expect( + page.locator( '.wc-block-components-notice-banner.is-success svg' ) + ).toBeVisible(); + + await cli( + `npm run wp-env run tests-cli -- wp theme activate ${ CLASSIC_THEME_SLUG }` + ); + } ); } ); diff --git a/plugins/woocommerce-blocks/tests/e2e/utils/constants.ts b/plugins/woocommerce-blocks/tests/e2e/utils/constants.ts index e8aefe5ac3bb..c084a730ef0c 100644 --- a/plugins/woocommerce-blocks/tests/e2e/utils/constants.ts +++ b/plugins/woocommerce-blocks/tests/e2e/utils/constants.ts @@ -7,10 +7,14 @@ export const BLOCK_THEME_WITH_TEMPLATES_SLUG = 'theme-with-woo-templates'; export const BLOCK_THEME_WITH_TEMPLATES_NAME = 'Theme with Woo Templates'; export const BLOCK_THEME_SLUG = 'twentytwentyfour'; export const BLOCK_THEME_NAME = 'Twenty Twenty-Four'; -export const BLOCK_CHILD_THEME_SLUG = `${ BLOCK_THEME_SLUG }-child`; +export const BLOCK_CHILD_THEME_WITH_BLOCK_NOTICES_FILTER_SLUG = `${ BLOCK_THEME_SLUG }-child__block-notices-filter`; +export const BLOCK_CHILD_THEME_WITH_BLOCK_NOTICES_TEMPLATE_SLUG = `${ BLOCK_THEME_SLUG }-child__block-notices-template`; +export const BLOCK_CHILD_THEME_WITH_CLASSIC_NOTICES_TEMPLATE_SLUG = `${ BLOCK_THEME_SLUG }-child__classic-notices-template`; export const CLASSIC_THEME_SLUG = 'storefront'; export const CLASSIC_THEME_NAME = 'Storefront'; -export const CLASSIC_CHILD_THEME_SLUG = `${ CLASSIC_THEME_SLUG }-child`; +export const CLASSIC_CHILD_THEME_WITH_BLOCK_NOTICES_FILTER_SLUG = `${ CLASSIC_THEME_SLUG }-child__block-notices-filter`; +export const CLASSIC_CHILD_THEME_WITH_BLOCK_NOTICES_TEMPLATE_SLUG = `${ CLASSIC_THEME_SLUG }-child__block-notices-template`; +export const CLASSIC_CHILD_THEME_WITH_CLASSIC_NOTICES_TEMPLATE_SLUG = `${ CLASSIC_THEME_SLUG }-child__classic-notices-template`; export const BASE_URL = 'http://localhost:8889'; export const WP_ARTIFACTS_PATH = diff --git a/plugins/woocommerce-blocks/tests/e2e/utils/performance/reports/e2e-cart-performance.json b/plugins/woocommerce-blocks/tests/e2e/utils/performance/reports/e2e-cart-performance.json new file mode 100644 index 000000000000..deae9a2786c3 --- /dev/null +++ b/plugins/woocommerce-blocks/tests/e2e/utils/performance/reports/e2e-cart-performance.json @@ -0,0 +1,7 @@ +{"description":"Cart block loading: (serverResponse)","longest":3549,"shortest":2680,"average":3258.6666666666665} +{"description":"Cart block loading: (firstPaint)","longest":427,"shortest":352,"average":391.3333333333333} +{"description":"Cart block loading: (domContentLoaded)","longest":1349,"shortest":1275,"average":1320.6666666666667} +{"description":"Cart block loading: (loaded)","longest":1742,"shortest":1620,"average":1692.3333333333333} +{"description":"Cart block loading: (firstContentfulPaint)","longest":427,"shortest":352,"average":391.3333333333333} +{"description":"Cart block loading: (firstBlock)","longest":1997,"shortest":1851,"average":1935.6666666666667} +{"description":"Cart block: Coupon entry","longest":5.34,"shortest":4.94,"average":5.133333333333334} diff --git a/plugins/woocommerce/changelog/45164-update-44538-allow-block-notices-for-classic-themes b/plugins/woocommerce/changelog/45164-update-44538-allow-block-notices-for-classic-themes new file mode 100644 index 000000000000..0b5832a29251 --- /dev/null +++ b/plugins/woocommerce/changelog/45164-update-44538-allow-block-notices-for-classic-themes @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +Allow usage of block notice templates when using classic themes. \ No newline at end of file diff --git a/plugins/woocommerce/src/Blocks/Domain/Services/Notices.php b/plugins/woocommerce/src/Blocks/Domain/Services/Notices.php index 5f97485bff8b..98a54320d6a2 100644 --- a/plugins/woocommerce/src/Blocks/Domain/Services/Notices.php +++ b/plugins/woocommerce/src/Blocks/Domain/Services/Notices.php @@ -41,12 +41,24 @@ public function __construct( Package $package ) { * Initialize notice hooks. */ public function init() { - if ( wp_is_block_theme() ) { - add_filter( 'woocommerce_kses_notice_allowed_tags', [ $this, 'add_kses_notice_allowed_tags' ] ); - add_filter( 'wc_get_template', [ $this, 'get_notices_template' ], 10, 5 ); - add_action( 'wp_head', [ $this, 'enqueue_notice_styles' ] ); - } + add_action( + 'after_setup_theme', + function() { + /** + * Allow classic theme developers to opt-in to using block notices. + * + * @since 8.8.0 + * @param bool $use_block_notices_in_classic_theme Whether to use block notices in classic theme. + * @return bool + */ + if ( wp_is_block_theme() || apply_filters( 'woocommerce_use_block_notices_in_classic_theme', false ) ) { + add_filter( 'wc_get_template', [ $this, 'get_notices_template' ], 10, 5 ); + } + } + ); + add_filter( 'woocommerce_kses_notice_allowed_tags', [ $this, 'add_kses_notice_allowed_tags' ] ); + add_action( 'wp_head', [ $this, 'enqueue_notice_styles' ] ); } /**