Icon of new notices are not visible for certain actions

nielslange commented 6 months ago

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 https://github.com/woocommerce/woocommerce-blocks/pull/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]):

[x] I have deactivated other plugins and themes and confirmed this bug occurs when only WooCommerce + Storefront theme are active.
[x] 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.

Create a test page and add the following shortcode to it:
```
[woocommerce_cart]
```
Go to a product page and click the Add to cart button.
See that the notice “{PRODUCT}” has been added to your cart. does not show an icon. ❌
Go to the test page from step 1. and update the quantity of the added product.
See that the notice Cart updated. does not show an icon. ❌
Add a coupon code to the cart.
See that the notice Coupon code applied successfully. shows an icon. ✅
Add the same code again.
See that the notice Coupon code already applied! shows an icon. ✅
Add an invalid code.
See that the notice Coupon "{CODE}" does not exist! shows an icon. ✅
Remove the coupon code.
See that the notice Coupon has been removed. shows an icon. ✅
Remove the product from the cart.
See that the notice Your cart is currently empty. shows an icon. ✅
See that the notice “{PRODUCT}” removed. Undo? does not show an icon. ❌
Install and active a core classic theme, e.g. Twenty Twenty or Twenty Twenty-One and repeat the previous steps.
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 commented 6 months ago

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

dinhtungdu commented 5 months ago

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:

Add svg and its child elements to allowed html tag, see #2133
Do nothing, mark this one as wont fix.

What do you think?

nielslange commented 5 months ago

Thanks for looking into this, @dinhtungdu.

Add svg and its child elements to allowed html tag, see https://github.com/woocommerce/storefront/pull/2133

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

woocommerce / storefront