Icon of new notices are not visible for certain actions

[nielslange]

Describe the bug

In p1702031295900509-slack-C02UBB1EPEF, @jimjasson reported that one of their e2e was failing. It turned out that this test was failing because of woocommerce/woocommerce-blocks#12043. While looking into this issue, I noticed that for some actions, the notice icon is missing when using the Storefront theme. I tested the same action against all core classic themes (Twenty Ten until Twenty Twenty-One) and against a few other classic themes. So far, I've only seen this issue when using Storefront.

Isolating the problem (mark completed items with an [x]):

• I have deactivated other plugins and themes and confirmed this bug occurs when only WooCommerce + Storefront theme are active.
• I can reproduce this bug consistently using the steps below.

To Reproduce

Note

For the following steps it's expected that the Storefront theme is active.

1. Create a test page and add the following shortcode to it:

[woocommerce_cart]

2. Go to a product page and click the Add to cart button.
3. See that the notice “{PRODUCT}” has been added to your cart. does not show an icon. ❌
4. Go to the test page from step 1. and update the quantity of the added product.
5. See that the notice Cart updated. does not show an icon. ❌
6. Add a coupon code to the cart.
7. See that the notice Coupon code applied successfully. shows an icon. ✅
8. Add the same code again.
9. See that the notice Coupon code already applied! shows an icon. ✅
10. Add an invalid code.
11. See that the notice Coupon "{CODE}" does not exist! shows an icon. ✅
12. Remove the coupon code.
13. See that the notice Coupon has been removed. shows an icon. ✅
14. Remove the product from the cart.
15. See that the notice Your cart is currently empty. shows an icon. ✅
16. See that the notice “{PRODUCT}” removed. Undo? does not show an icon. ❌
17. Install and active a core classic theme, e.g. Twenty Twenty or Twenty Twenty-One and repeat the previous steps.
18. See that all notices show an icon.

Screenshots

	Storefront	Twenty Twenty
Add product to cart
Update product quantity
Remove product

Expected behavior

I expect to see the icons in all notices.

Browser Environment

• Platform: macOS 13.4.1
• Browser(s): Chrome 120.0.6099.109

WordPress Environment

### WordPress Environment ###

WordPress address (URL): http://store.test
Site address (URL): http://store.test
WC Version: 8.3.0
REST API Version: ✔ 8.3.0
WC Blocks Version: ✔ 11.8.0-dev
Action Scheduler Version: ✔ 3.7.1
Log Directory Writable: ✔
WP Version: 6.4.2
WP Multisite: –
WP Memory Limit: 512 MB
WP Debug Mode: ✔
WP Cron: ✔
Language: en_US
External object cache: –

### Server Environment ###

Server Info: nginx/1.25.3
PHP Version: 7.4.33
PHP Post Max Size: 512 MB
PHP Time Limit: 30
PHP Max Input Vars: 1000
cURL Version: 8.4.0
(SecureTransport) OpenSSL/3.2.0

SUHOSIN Installed: –
MySQL Version: 8.2.0
Max Upload Size: 512 MB
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
GZip: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

### Database ###

WC Database Version: 8.3.0
WC Database Prefix: wp_
Total Database Size: 5.23MB
Database Data Size: 3.44MB
Database Index Size: 1.79MB
wp_woocommerce_sessions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_order_items: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_order_itemmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_actions: Data: 0.05MB + Index: 0.11MB + Engine InnoDB
wp_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_logs: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_comments: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_options: Data: 2.08MB + Index: 0.06MB + Engine InnoDB
wp_postmeta: Data: 0.13MB + Index: 0.09MB + Engine InnoDB
wp_posts: Data: 0.16MB + Index: 0.06MB + Engine InnoDB
wp_snippets: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_term_relationships: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_term_taxonomy: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_terms: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_usermeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_users: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_admin_note_actions: Data: 0.06MB + Index: 0.02MB + Engine InnoDB
wp_wc_admin_notes: Data: 0.06MB + Index: 0.00MB + Engine InnoDB
wp_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_download_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_addresses: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_operational_data: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_product_lookup: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_orders: Data: 0.02MB + Index: 0.11MB + Engine InnoDB
wp_wc_orders_meta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_product_attributes_lookup: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_product_download_directories: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_product_meta_lookup: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
wp_wc_rate_limits: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB

### Post Type Counts ###

attachment: 23
page: 10
post: 16
product: 18
product_variation: 7
revision: 10
shop_coupon: 1
shop_order_placehold: 1
wp_global_styles: 1
wp_navigation: 1
wp_template: 2

### Security ###

Secure connection (HTTPS): ✔
Hide errors from visitors: ❌Error messages should not be shown to visitors.

### Active Plugins (5) ###

A → Incompatible Extension: by Automattic – 1.0.0
N → Incompatible Extension: by Automattic – 1.0.0
Z → Incompatible Extension: by Automattic – 1.0.0
SMNTCS Theme List View: by Niels Lange – 1.3
WooCommerce: by Automattic – 8.5.0-dev

### Inactive Plugins (2) ###

Code Snippets: by Code Snippets Pro – 3.6.2
Transients Manager: by WPBeginner – 2.0.5

### Settings ###

API Enabled: –
Force SSL: –
Currency: EUR (€)
Currency Position: right_space
Thousand Separator: .
Decimal Separator: ,
Number of Decimals: 2
Taxonomies: Product Types: external (external)
grouped (grouped)
simple (simple)
variable (variable)

Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
exclude-from-search (exclude-from-search)
featured (featured)
outofstock (outofstock)
rated-1 (rated-1)
rated-2 (rated-2)
rated-3 (rated-3)
rated-4 (rated-4)
rated-5 (rated-5)

Connected to Woo.com: –
Enforce Approved Product Download Directories: ✔
HPOS feature screen enabled: ✔
HPOS feature enabled: ✔
Order datastore: Automattic\WooCommerce\Internal\DataStores\Orders\OrdersTableDataStore
HPOS data sync enabled: –

### WC Pages ###

Shop base: #55 - /products-beta/classic-shop/
Cart: #58 - /cart/classic-cart/
Checkout: #59 - /checkout/classic-checkout/
My account: #60 - /my-account/
Terms and conditions: #61 - /terms/

### Theme ###

Name: Twenty Twenty
Version: 2.4
Author URL: https://wordpress.org/
Child Theme: ❌ – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme
WooCommerce Support: ✔

### Templates ###

Overrides: /Users/nielslange/Plugins/woocommerce/plugins/woocommerce/templates/notices/error.php
/Users/nielslange/Plugins/woocommerce/plugins/woocommerce/templates/notices/notice.php
/Users/nielslange/Plugins/woocommerce/plugins/woocommerce/templates/notices/success.php


### Admin ###

Enabled Features: activity-panels
analytics
product-block-editor
coupons
core-profiler
customer-effort-score-tracks
import-products-task
experimental-fashion-sample-products
shipping-smart-defaults
shipping-setting-tour
homescreen
marketing
mobile-app-banner
navigation
onboarding
onboarding-tasks
product-variation-management
product-virtual-downloadable
product-external-affiliate
product-grouped
remote-inbox-notifications
remote-free-extensions
payment-gateway-suggestions
shipping-label-banner
subscriptions
store-alerts
transient-notices
woo-mobile-welcome
wc-pay-promotion
wc-pay-welcome-page

Disabled Features: customize-store
minified-js
new-product-management-experience
product-linked
settings
async-product-editor-category-field

Daily Cron: ✔ Next scheduled: 2023-12-22 12:59:10 +00:00
Options: ✔
Notes: 69
Onboarding: skipped

### Action Scheduler ###

Complete: 71
Oldest: 2023-12-09 13:00:29 +0000
Newest: 2023-12-22 06:07:32 +0000

Pending: 2
Oldest: 2023-12-23 06:07:32 +0000
Newest: 2023-12-23 06:07:32 +0000


### Status report information ###

Generated at: 2023-12-22 08:59:28 +00:00

[imanish003]

I took a quick look. As you can see in screenshot below, SVG icon is not loaded while using Storefront theme:

[dinhtungdu]

The reason for this is wp_kses_post() of storefront_shop_messages:

if ( ! function_exists( 'storefront_shop_messages' ) ) {
	/**
	 * Storefront shop messages
	 *
	 * @since   1.4.4
	 * @uses    storefront_do_shortcode
	 */
	function storefront_shop_messages() {
		if ( ! is_checkout() ) {
			echo wp_kses_post( storefront_do_shortcode( 'woocommerce_messages' ) );
		}
	}
}

This behavior has been there since 1.4.4 so there is a great chance that many sites rely on this behavior.

We're now between two options:

1. Add svg and its child elements to allowed html tag, see Fix: allow svg in storefront messages, such as notices #2133
2. Do nothing, mark this one as wont fix.

What do you think?

[nielslange]

Thanks for looking into this, @dinhtungdu.

Add svg and its child elements to allowed html tag, see #2133

For consistency-reasons, I believe updating the filter to show the SVG is the better approach.