Enable new notices styles in WooCommerce

[ralucaStan]

We updated the buyer notices design. These are currently visible only to the stores that use the Cart/Checkout block; We need to update the styles of the notices in WC as well, even if the shop is not using the cart and checkout blocks.

related https://github.com/woocommerce/woocommerce-blocks/pull/10641 , https://github.com/woocommerce/woocommerce-blocks/issues/10595, https://github.com/woocommerce/woocommerce-blocks/pull/8659

[nerrad]

@ralucaStan I don't think the above issues mentioned as blockers are blockers? Will you expand on what they are? I'm going to bump this as a high priority - it still needs to be planned work but it's a visible thing that impacts the coherence of WooCommerce in a block theme.

[ralucaStan]

Curently WooCommerce Core inherits the new styles for notices if either the cart or checkout blocks are used, no matter the theme type.

This switch is to ensure the new styles across all WooCommerce. We wanted to make sure we have a public guideline of usage before exposing them to the whole WooCommerce community to ensure alignment across the uses of the notices styles in shops.

See https://woocommerce.github.io/woocommerce-blocks/?path=/docs/base-components-noticebanner--docs and https://woocommerce.github.io/woocommerce-blocks/?path=/docs/base-components-snackbarlist--docs

[ralucaStan]

I've removed https://github.com/woocommerce/woocommerce-blocks/issues/10681 from the blockers, as it was closed. Apparently I can't add it back

[nerrad]

I've removed https://github.com/woocommerce/woocommerce-blocks/issues/10681 from the blockers, as it was closed. Apparently, I can't add it back

I'm confused. That's what we want, 10681 is not a blocker. Neither is woocommerce/woocommerce#42260 IMO. Irrespective of those issues, we still should roll out the consistency across Woo Core first (regardless of C&C block usage).

[ralucaStan]

I've removed them from the blockers and added this ticket to the next cycle.

[nielslange]

@ralucaStan Shall this ticket only affect block themes (Twenty Twenty-Two and later) or also classic themes (Twenty Twenty-One and earlier)? I'm asking all block themes already show the new notice styles even when using the shortcode based cart and checkout.

Testing steps

1. Install and activate the Code Snippets plugin.
2. Add the following code snippet to the site:

   add_action( 'woocommerce_before_cart', 'test_notice_styles' );
   add_action( 'woocommerce_before_checkout_form', 'test_notice_styles' );
   function test_notice_styles() {
   if ( function_exists( 'wc_add_notice' ) ) {
   wc_add_notice( 'Error notice with link #1 <a href="#">Click me</a>', 'error' );
   wc_add_notice( 'Error notice with link #2 <a href="#">Click me</a>', 'error' );
   wc_add_notice( 'Error notice with link #3 <a href="#">Click me</a>', 'error' );
   wc_add_notice( 'Error notice with button #1 <a class="wc-forward">Click me</a>', 'error' );
   wc_add_notice( 'Error notice with button #2 <a class="wc-forward">Click me</a>', 'error' );
   wc_add_notice( 'Error notice with button #3 <a class="wc-forward">Click me</a>', 'error' );
   wc_add_notice( 'Success notice with link <a href="#">Do the thing</a>', 'success' );        
   wc_add_notice( 'Success notice with button <a class="wc-forward">Click me</a>', 'success' );        
   wc_add_notice( 'Info notice with link <a href="#">Click me</a>', 'notice' );        
   wc_add_notice( 'Info notice with button <a class="wc-forward">Click me</a>', 'notice' );
   }
   }

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

   [woocommerce_cart]

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

   [woocommerce_checkout]

5. Go to the frontend and add a product to the cart.
6. Check the shortcode-based cart and checkout page against the following themes:
   1. Twenty Twenty-Four (block theme)
   2. Twenty Twenty-Three (block theme)
   3. Twenty Twenty-Two (block theme)
   4. Twenty Twenty-One (classic theme)
   5. Twenty Twenty (classic theme)
   6. Twenty Nineteen (classic theme)
   7. Twenty Seventeen (classic theme)
   8. Twenty Sixteen (classic theme)
   9. Twenty Fifteen (classic theme)
   10. Twenty Fourteen (classic theme)
   11. Twenty Thirteen (classic theme)
   12. Twenty Twelve (classic theme)
   13. Twenty Eleven (classic theme)
   14. Twenty Ten (classic theme)

[!NOTE] For quickly switching themes, you can use the SMNTCS Themes List View plugin, which I specifically created for test cases like this.

Testing results

Block themes

Twenty Twenty-Four (block theme)

Twenty Twenty-Three (block theme)

Twenty Twenty-Two (block theme)

Classic themes

Twenty Twenty-One (classic theme)

Twenty Twenty (classic theme)

Twenty Nineteen (classic theme)

Twenty Seventeen (classic theme)

Twenty Sixteen (classic theme)

Twenty Fifteen (classic theme)

Twenty Fourteen (classic theme)

Twenty Thirteen (classic theme)

Twenty Twelve (classic theme)

Twenty Eleven (classic theme)

Twenty Ten (classic theme)

cc: @elizaan36

[ralucaStan]

This change is theme-independent.

[nielslange]

This change is theme-independent.

Thanks for clarifying this, @ralucaStan.

[nielslange]

@ralucaStan Shall this issue also affect Store Notice, which are only available in classic themes? In https://github.com/woocommerce/woocommerce-blocks/issues/12042#issuecomment-1839972962, you mentioned that this change is theme-independent. The Store Notice functionality, however, only exists in classic themes and can only be accessed via the customizer.

Current Store Notice style:

Potentially updated style:

If this issue impacts the mentioned Store Notice element, we may need an adjusted design proposal, as its full-width display conflicts with the updated notice styles.

[elizaan36]

@nielslange The store notice is separate to this issue and shouldn't be changed as part of this work. The shopper notices are designed to provide feedback to the user on activity - info, error, alert, etc, whereas the store notice is a persistent element created by the merchant and meant to be full width.

[nielslange]

Thanks for clarifying this, @elizaan36. Just to confirm, are we planning to leave the store notice unchanged, or is there a possibility of updating its styles in the future? Considering that the store notice is specific to classic themes, I'm wondering if it's worth the effort to apply any changes.

[elizaan36]

As far as I know, there aren't plans to update the store notice!