diff --git a/.gitignore b/.gitignore
index 2a4f3d7d16e..e45874e222e 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 bdf110a93f6..e840317605b 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 4058803eb82..170c7dab2c6 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 96c0119d61b..00000000000
--- 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 00000000000..96148a17f2f
--- /dev/null
+++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__block-notices-filter/functions.php
@@ -0,0 +1,3 @@
+ 1;
- >
- 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 13ec97ee146..631ce24dc86 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 @@ if ( ! $notices ) {
- 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 4705393a2d8..22eef2d36f6 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 @@ if ( ! $notices ) {
- 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 00000000000..ea930d81e41
--- /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 516b9e7ddc9..b8752e08459 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 @@ if ( ! $notices ) {
- >
- CLASSIC ERROR NOTICE -
+ CLASSIC ERROR NOTICE:
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 33f1b85ac48..9b38f0784f4 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 @@ if ( ! $notices ) {
>
- 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 9f3a3ec225f..bdd97fe4dd4 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 @@ if ( ! $notices ) {
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 b13e057ea0e..00000000000
--- 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 00000000000..b46afb95671
--- /dev/null
+++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__block-notices-filter/functions.php
@@ -0,0 +1,3 @@
+ 1;
+
+?>
+
+>
+
+
+
+
+
+
+ - >
+ BLOCK ERROR NOTICE:
+
+
+
+
+
+
+
+
+
+ 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 00000000000..22eef2d36f6
--- /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 00000000000..dd914af1d24
--- /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 00000000000..b8752e08459
--- /dev/null
+++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__classic-notices-template/woocommerce/notices/error.php
@@ -0,0 +1,34 @@
+
+
+
+
+ - >
+ CLASSIC ERROR NOTICE:
+
+
+
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 00000000000..9b38f0784f4
--- /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 00000000000..bdd97fe4dd4
--- /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 ee6e46bf4c4..450e5059a7a 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,18 @@ 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_SLUG }`
+ `npm run wp-env run tests-cli -- wp theme activate ${ BLOCK_CHILD_THEME_WITH_BLOCK_NOTICES_TEMPLATE_SLUG }`
);
await frontendUtils.goToCartShortcode();
@@ -107,14 +109,65 @@ test.describe( 'Shopper → Block Notice Templates', () => {
await expect(
page.getByText(
- 'BLOCK SUCCESS NOTICE - Coupon code applied successfully.'
+ 'BLOCK 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 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();
+ 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_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();
+ await page.getByPlaceholder( 'Coupon code' ).fill( 'testcoupon' );
+ await page.getByRole( 'button', { name: 'Apply coupon' } ).click();
+
+ await expect(
+ page.getByText(
+ 'CLASSIC SUCCESS NOTICE: Coupon code applied successfully.'
+ )
+ ).toBeVisible();
+
+ // We're explicitly checking the CSS classes of the classic notices.
+ await expect(
+ 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( '.wc-block-components-notice-banner.is-success' )
+ 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 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 d23c81e0197..d8bb552a97c 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 e8aefe5ac3b..c084a730ef0 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 00000000000..deae9a2786c
--- /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 00000000000..0b5832a2925
--- /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 5f97485bff8..98a54320d6a 100644
--- a/plugins/woocommerce/src/Blocks/Domain/Services/Notices.php
+++ b/plugins/woocommerce/src/Blocks/Domain/Services/Notices.php
@@ -41,12 +41,24 @@ class Notices {
* 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' ] );
}
/**