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 <github-actions@github.com>
This commit is contained in:
Niels Lange
GitHub
parent
59635fb4c8
commit
a7383579be
|
|
@ -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/
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
/*
|
||||
Theme Name: Storefront Child
|
||||
Template: storefront
|
||||
*/
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<?php
|
||||
|
||||
add_filter( 'woocommerce_use_block_notices_in_classic_theme', '__return_true' );
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
/*
|
||||
Theme Name: Storefront Child (Block Notices by filter)
|
||||
Template: storefront
|
||||
*/
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
/*
|
||||
Theme Name: Storefront Child (Block Notices by template)
|
||||
Template: storefront
|
||||
*/
|
||||
|
|
@ -37,13 +37,13 @@ $multiple = count( $notices ) > 1;
|
|||
<ul>
|
||||
<?php foreach ( $notices as $notice ) : ?>
|
||||
<li<?php echo wc_get_notice_data_attr( $notice ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
|
||||
BLOCK ERROR NOTICE - <?php echo wc_kses_notice( $notice['notice'] ); ?>
|
||||
BLOCK ERROR NOTICE: <?php echo wc_kses_notice( $notice['notice'] ); ?>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
<?php
|
||||
} else {
|
||||
echo 'BLOCK ERROR NOTICE - ' . wc_kses_notice( $notices[0]['notice'] );
|
||||
echo 'BLOCK ERROR NOTICE: ' . wc_kses_notice( $notices[0]['notice'] );
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
|
@ -31,7 +31,7 @@ if ( ! $notices ) {
|
|||
<path d="M12 3.2c-4.8 0-8.8 3.9-8.8 8.8 0 4.8 3.9 8.8 8.8 8.8 4.8 0 8.8-3.9 8.8-8.8 0-4.8-4-8.8-8.8-8.8zm0 16c-4 0-7.2-3.3-7.2-7.2C4.8 8 8 4.8 12 4.8s7.2 3.3 7.2 7.2c0 4-3.2 7.2-7.2 7.2zM11 17h2v-6h-2v6zm0-8h2V7h-2v2z"></path>
|
||||
</svg>
|
||||
<div class="wc-block-components-notice-banner__content">
|
||||
BLOCK INFO NOTICE - <?php echo wc_kses_notice( $notice['notice'] ); ?>
|
||||
BLOCK INFO NOTICE: <?php echo wc_kses_notice( $notice['notice'] ); ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
|
|
@ -31,7 +31,7 @@ if ( ! $notices ) {
|
|||
<path d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"></path>
|
||||
</svg>
|
||||
<div class="wc-block-components-notice-banner__content">
|
||||
BLOCK SUCCESS NOTICE - <?php echo wc_kses_notice( $notice['notice'] ); ?>
|
||||
BLOCK SUCCESS NOTICE: <?php echo wc_kses_notice( $notice['notice'] ); ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
/*
|
||||
Theme Name: Storefront Child (Classic Notices by template)
|
||||
Template: storefront
|
||||
*/
|
||||
|
|
@ -28,7 +28,7 @@ if ( ! $notices ) {
|
|||
<ul class="woocommerce-error" role="alert">
|
||||
<?php foreach ( $notices as $notice ) : ?>
|
||||
<li<?php echo wc_get_notice_data_attr( $notice ); ?>>
|
||||
CLASSIC ERROR NOTICE - <?php echo wc_kses_notice( $notice['notice'] ); ?>
|
||||
CLASSIC ERROR NOTICE: <?php echo wc_kses_notice( $notice['notice'] ); ?>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
|
|
@ -27,6 +27,6 @@ if ( ! $notices ) {
|
|||
|
||||
<?php foreach ( $notices as $notice ) : ?>
|
||||
<div class="woocommerce-info"<?php echo wc_get_notice_data_attr( $notice ); ?>>
|
||||
CLASSIC INFO NOTICE - <?php echo wc_kses_notice( $notice['notice'] ); ?>
|
||||
CLASSIC INFO NOTICE: <?php echo wc_kses_notice( $notice['notice'] ); ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
|
|
@ -27,6 +27,6 @@ if ( ! $notices ) {
|
|||
|
||||
<?php foreach ( $notices as $notice ) : ?>
|
||||
<div class="woocommerce-message"<?php echo wc_get_notice_data_attr( $notice ); ?> role="alert">
|
||||
CLASSIC SUCCESS NOTICE - <?php echo wc_kses_notice( $notice['notice'] ); ?>
|
||||
CLASSIC SUCCESS NOTICE: <?php echo wc_kses_notice( $notice['notice'] ); ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
/*
|
||||
Theme Name: Twenty Twenty-Four Child
|
||||
Template: twentytwentyfour
|
||||
*/
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<?php
|
||||
|
||||
add_filter( 'woocommerce_use_block_notices_in_classic_theme', '__return_false' );
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
/*
|
||||
Theme Name: Twenty Twenty-Four Child (Block Notices by filter)
|
||||
Template: twentytwentyfour
|
||||
*/
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
/*
|
||||
Theme Name: Twenty Twenty-Four Child (Block Notices by template)
|
||||
Template: twentytwentyfour
|
||||
*/
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<?php
|
||||
/**
|
||||
* Show error messages
|
||||
*
|
||||
* This template can be overridden by copying it to yourtheme/woocommerce/notices/error.php.
|
||||
*
|
||||
* HOWEVER, on occasion WooCommerce will need to update template files and you
|
||||
* (the theme developer) will need to copy the new files to your theme to
|
||||
* maintain compatibility. We try to do this as little as possible, but it does
|
||||
* happen. When this occurs the version of the template file will be bumped and
|
||||
* the readme will list any important changes.
|
||||
*
|
||||
* @see https://docs.woocommerce.com/document/template-structure/
|
||||
* @package WooCommerce\Templates
|
||||
* @version 8.5.0
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
if ( empty( $notices ) || ! is_array( $notices ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
$multiple = count( $notices ) > 1;
|
||||
|
||||
?>
|
||||
|
||||
<div class="wc-block-components-notice-banner is-error" role="alert" <?php echo $multiple ? '' : wc_get_notice_data_attr( $notices[0] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
|
||||
<path d="M12 3.2c-4.8 0-8.8 3.9-8.8 8.8 0 4.8 3.9 8.8 8.8 8.8 4.8 0 8.8-3.9 8.8-8.8 0-4.8-4-8.8-8.8-8.8zm0 16c-4 0-7.2-3.3-7.2-7.2C4.8 8 8 4.8 12 4.8s7.2 3.3 7.2 7.2c0 4-3.2 7.2-7.2 7.2zM11 17h2v-6h-2v6zm0-8h2V7h-2v2z"></path>
|
||||
</svg>
|
||||
<div class="wc-block-components-notice-banner__content">
|
||||
<?php if ( $multiple ) { ?>
|
||||
<p class="wc-block-components-notice-banner__summary"><?php esc_html_e( 'The following problems were found:', 'woocommerce' ); ?></p>
|
||||
<ul>
|
||||
<?php foreach ( $notices as $notice ) : ?>
|
||||
<li<?php echo wc_get_notice_data_attr( $notice ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
|
||||
BLOCK ERROR NOTICE: <?php echo wc_kses_notice( $notice['notice'] ); ?>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
<?php
|
||||
} else {
|
||||
echo 'BLOCK ERROR NOTICE: ' . wc_kses_notice( $notices[0]['notice'] );
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<?php
|
||||
/**
|
||||
* Show info messages
|
||||
*
|
||||
* This template can be overridden by copying it to yourtheme/woocommerce/notices/notice.php.
|
||||
*
|
||||
* HOWEVER, on occasion WooCommerce will need to update template files and you
|
||||
* (the theme developer) will need to copy the new files to your theme to
|
||||
* maintain compatibility. We try to do this as little as possible, but it does
|
||||
* happen. When this occurs the version of the template file will be bumped and
|
||||
* the readme will list any important changes.
|
||||
*
|
||||
* @see https://docs.woocommerce.com/document/template-structure/
|
||||
* @package WooCommerce\Templates
|
||||
* @version 8.5.0
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
if ( ! $notices ) {
|
||||
return;
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
<?php foreach ( $notices as $notice ) : ?>
|
||||
<div class="wc-block-components-notice-banner is-info"<?php echo wc_get_notice_data_attr( $notice ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> role="alert">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
|
||||
<path d="M12 3.2c-4.8 0-8.8 3.9-8.8 8.8 0 4.8 3.9 8.8 8.8 8.8 4.8 0 8.8-3.9 8.8-8.8 0-4.8-4-8.8-8.8-8.8zm0 16c-4 0-7.2-3.3-7.2-7.2C4.8 8 8 4.8 12 4.8s7.2 3.3 7.2 7.2c0 4-3.2 7.2-7.2 7.2zM11 17h2v-6h-2v6zm0-8h2V7h-2v2z"></path>
|
||||
</svg>
|
||||
<div class="wc-block-components-notice-banner__content">
|
||||
BLOCK INFO NOTICE: <?php echo wc_kses_notice( $notice['notice'] ); ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<?php
|
||||
/**
|
||||
* Show success messages
|
||||
*
|
||||
* This template can be overridden by copying it to yourtheme/woocommerce/notices/success.php.
|
||||
*
|
||||
* HOWEVER, on occasion WooCommerce will need to update template files and you
|
||||
* (the theme developer) will need to copy the new files to your theme to
|
||||
* maintain compatibility. We try to do this as little as possible, but it does
|
||||
* happen. When this occurs the version of the template file will be bumped and
|
||||
* the readme will list any important changes.
|
||||
*
|
||||
* @see https://docs.woocommerce.com/document/template-structure/
|
||||
* @package WooCommerce\Templates
|
||||
* @version 8.5.0
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
if ( ! $notices ) {
|
||||
return;
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
<?php foreach ( $notices as $notice ) : ?>
|
||||
<div class="wc-block-components-notice-banner is-success"<?php echo wc_get_notice_data_attr( $notice ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> role="alert">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
|
||||
<path d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"></path>
|
||||
</svg>
|
||||
<div class="wc-block-components-notice-banner__content">
|
||||
BLOCK SUCCESS NOTICE: <?php echo wc_kses_notice( $notice['notice'] ); ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
/*
|
||||
Theme Name: Twenty Twenty-Four Child (Classic Notices by template)
|
||||
Template: twentytwentyfour
|
||||
*/
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<?php
|
||||
/**
|
||||
* Show error messages
|
||||
*
|
||||
* This template can be overridden by copying it to yourtheme/woocommerce/notices/error.php.
|
||||
*
|
||||
* HOWEVER, on occasion WooCommerce will need to update template files and you
|
||||
* (the theme developer) will need to copy the new files to your theme to
|
||||
* maintain compatibility. We try to do this as little as possible, but it does
|
||||
* happen. When this occurs the version of the template file will be bumped and
|
||||
* the readme will list any important changes.
|
||||
*
|
||||
* @see https://woo.com/document/template-structure/
|
||||
* @package WooCommerce\Templates
|
||||
* @version 3.9.0
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
if ( ! $notices ) {
|
||||
return;
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
<ul class="woocommerce-error" role="alert">
|
||||
<?php foreach ( $notices as $notice ) : ?>
|
||||
<li<?php echo wc_get_notice_data_attr( $notice ); ?>>
|
||||
CLASSIC ERROR NOTICE: <?php echo wc_kses_notice( $notice['notice'] ); ?>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<?php
|
||||
/**
|
||||
* Show messages
|
||||
*
|
||||
* This template can be overridden by copying it to yourtheme/woocommerce/notices/notice.php.
|
||||
*
|
||||
* HOWEVER, on occasion WooCommerce will need to update template files and you
|
||||
* (the theme developer) will need to copy the new files to your theme to
|
||||
* maintain compatibility. We try to do this as little as possible, but it does
|
||||
* happen. When this occurs the version of the template file will be bumped and
|
||||
* the readme will list any important changes.
|
||||
*
|
||||
* @see https://woo.com/document/template-structure/
|
||||
* @package WooCommerce\Templates
|
||||
* @version 3.9.0
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
if ( ! $notices ) {
|
||||
return;
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
<?php foreach ( $notices as $notice ) : ?>
|
||||
<div class="woocommerce-info"<?php echo wc_get_notice_data_attr( $notice ); ?>>
|
||||
CLASSIC INFO NOTICE: <?php echo wc_kses_notice( $notice['notice'] ); ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<?php
|
||||
/**
|
||||
* Show messages
|
||||
*
|
||||
* This template can be overridden by copying it to yourtheme/woocommerce/notices/success.php.
|
||||
*
|
||||
* HOWEVER, on occasion WooCommerce will need to update template files and you
|
||||
* (the theme developer) will need to copy the new files to your theme to
|
||||
* maintain compatibility. We try to do this as little as possible, but it does
|
||||
* happen. When this occurs the version of the template file will be bumped and
|
||||
* the readme will list any important changes.
|
||||
*
|
||||
* @see https://woo.com/document/template-structure/
|
||||
* @package WooCommerce\Templates
|
||||
* @version 3.9.0
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
if ( ! $notices ) {
|
||||
return;
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
<?php foreach ( $notices as $notice ) : ?>
|
||||
<div class="woocommerce-message"<?php echo wc_get_notice_data_attr( $notice ); ?> role="alert">
|
||||
CLASSIC SUCCESS NOTICE: <?php echo wc_kses_notice( $notice['notice'] ); ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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 }`
|
||||
);
|
||||
} );
|
||||
} );
|
||||
|
|
|
|||
|
|
@ -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 =
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: update
|
||||
|
||||
Allow usage of block notice templates when using classic themes.
|
||||
|
|
@ -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_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_action( 'wp_head', [ $this, 'enqueue_notice_styles' ] );
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
add_filter( 'woocommerce_kses_notice_allowed_tags', [ $this, 'add_kses_notice_allowed_tags' ] );
|
||||
add_action( 'wp_head', [ $this, 'enqueue_notice_styles' ] );
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in New Issue