Add new templates for legacy buyer notices in WooCommerce core

assets/js/base/components/notice-banner/style.scss

@@ -15,14 +15,11 @@
 	background-color: #fff;
 	box-sizing: border-box;
 
-	&:last-child {
-		margin-bottom: 0;
-	}
-
 	> .wc-block-components-notice-banner__content {
 		padding-right: $gap;
 		align-self: center;
 		white-space: normal;
+		flex-basis: 100%;
 
 		&:last-child {
 			padding-right: 0;
@@ -37,6 +34,23 @@
 		ol {
 			margin: 0 0 0 $gap-large;
 			padding: 0;
+
+			li::after {
+				content: "";
+				clear: both;
+				display: block;
+			}
+		}
+
+		// Legacy notice compatibility.
+		.wc-forward.wp-element-button {
+			float: right;
+			color: $gray-800 !important;
+			background: transparent;
+			padding: 0 !important;
+			margin: 0;
+			border: 0;
+			appearance: none;
 		}
 	}
 
@@ -46,6 +60,7 @@
 		padding: 2px;
 		background-color: $gray-800;
 		flex-shrink: 0;
+		flex-grow: 0;
 	}
 
 	> .wc-block-components-button,

src/Domain/Bootstrap.php

@@ -8,6 +8,7 @@
 use Automattic\WooCommerce\Blocks\BlockTemplatesController;
 use Automattic\WooCommerce\Blocks\BlockTypesController;
 use Automattic\WooCommerce\Blocks\Domain\Services\CreateAccount;
+use Automattic\WooCommerce\Blocks\Domain\Services\Notices;
 use Automattic\WooCommerce\Blocks\Domain\Services\DraftOrders;
 use Automattic\WooCommerce\Blocks\Domain\Services\FeatureGating;
 use Automattic\WooCommerce\Blocks\Domain\Services\GoogleAnalytics;
@@ -124,6 +125,7 @@ function() {
 		}
 		$this->container->get( DraftOrders::class )->init();
 		$this->container->get( CreateAccount::class )->init();
+		$this->container->get( Notices::class )->init();
 		$this->container->get( StoreApi::class )->init();
 		$this->container->get( GoogleAnalytics::class );
 		$this->container->get( BlockTypesController::class );
@@ -314,6 +316,12 @@ function( Container $container ) {
 				return new GoogleAnalytics( $asset_api );
 			}
 		);
+		$this->container->register(
+			Notices::class,
+			function( Container $container ) {
+				return new Notices( $container->get( Package::class ) );
+			}
+		);
 		$this->container->register(
 			PaymentsApi::class,
 			function ( Container $container ) {

src/Domain/Services/Notices.php

@@ -0,0 +1,108 @@
+<?php
+namespace Automattic\WooCommerce\Blocks\Domain\Services;
+
+use Automattic\WooCommerce\Blocks\Domain\Package;
+
+/**
+ * Service class for adding new-style Notices to WooCommerce core.
+ *
+ * @internal
+ */
+class Notices {
+	/**
+	 * Holds the Package instance
+	 *
+	 * @var Package
+	 */
+	private $package;
+
+	/**
+	 * Templates used for notices.
+	 *
+	 * @var array
+	 */
+	private $notice_templates = array(
+		'notices/error.php',
+		'notices/notice.php',
+		'notices/success.php',
+	);
+
+	/**
+	 * Constructor
+	 *
+	 * @param Package $package An instance of the package class.
+	 */
+	public function __construct( Package $package ) {
+		$this->package = $package;
+	}
+
+	/**
+	 * Set all hooks related to adding Checkout Draft order functionality to Woo Core. This is only enabled if the user
+	 * is using the new block based cart/checkout.
+	 */
+	public function init() {
+		// Core page IDs.
+		$cart_page_id     = wc_get_page_id( 'cart' );
+		$checkout_page_id = wc_get_page_id( 'checkout' );
+
+		// Checks a specific page (by ID) to see if it contains the named block.
+		$has_block_cart     = $cart_page_id && has_block( 'woocommerce/cart', $cart_page_id );
+		$has_block_checkout = $checkout_page_id && has_block( 'woocommerce/checkout', $checkout_page_id );
+
+		if ( $has_block_cart || $has_block_checkout ) {
+			add_filter( 'woocommerce_kses_notice_allowed_tags', [ $this, 'add_kses_notice_allowed_tags' ] );
+			add_filter( 'wc_get_template', [ $this, 'get_notices_template' ], 10, 5 );
+		}
+	}
+
+	/**
+	 * Allow SVG icon in notices.
+	 *
+	 * @param array $allowed_tags Allowed tags.
+	 * @return array
+	 */
+	public function add_kses_notice_allowed_tags( $allowed_tags ) {
+		$svg_args = array(
+			'svg'   => array(
+				'class'           => true,
+				'aria-hidden'     => true,
+				'aria-labelledby' => true,
+				'role'            => true,
+				'xmlns'           => true,
+				'width'           => true,
+				'height'          => true,
+				'viewbox'         => true,
+			),
+			'g'     => array( 'fill' => true ),
+			'title' => array( 'title' => true ),
+			'path'  => array(
+				'd'    => true,
+				'fill' => true,
+			),
+		);
+
+		return array_merge( $allowed_tags, $svg_args );
+	}
+
+	/**
+	 * Replaces core notice templates with those from blocks.
+	 *
+	 * The new notice templates match block components with matching icons and styling. The only difference is that core
+	 * only has notices for info, success, and error notices, whereas blocks has notices for info, success, error,
+	 * warning, and a default notice type.
+	 *
+	 * @param string $template Located template path.
+	 * @param string $template_name Template name.
+	 * @param array  $args Template arguments.
+	 * @param string $template_path Template path.
+	 * @param string $default_path Default path.
+	 * @return string
+	 */
+	public function get_notices_template( $template, $template_name, $args, $template_path, $default_path ) {
+		if ( in_array( $template_name, $this->notice_templates, true ) ) {
+			$template = $this->package->get_path( 'templates/' . $template_name );
+			wp_enqueue_style( 'wc-blocks-style' );
+		}
+		return $template;
+	}
+}

templates/notices/error.php

@@ -0,0 +1,50 @@
+<?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 3.9.0
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( ! $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" view-box="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:', 'woo-gutenberg-products-block' ); ?></p>
+			<ul>
+			<?php foreach ( $notices as $notice ) : ?>
+				<li<?php echo wc_get_notice_data_attr( $notice ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
+					<?php echo wc_kses_notice( $notice['notice'] ); ?>
+				</li>
+			<?php endforeach; ?>
+			</ul>
+			<?php
+		} else {
+			echo wc_kses_notice( $notices[0]['notice'] );
+		}
+		?>
+	</div>
+</div>
+<?php

templates/notices/notice.php

@@ -0,0 +1,37 @@
+<?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://docs.woocommerce.com/document/template-structure/
+ * @package WooCommerce\Templates
+ * @version 3.9.0
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+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" view-box="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 echo wc_kses_notice( $notice['notice'] ); ?>
+		</div>
+	</div>
+<?php endforeach; ?>

templates/notices/success.php

@@ -0,0 +1,29 @@
+<?php
+/**
+ * Notices template.
+ *
+ * @see     https://docs.woocommerce.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="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" view-box="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">
+			<?php echo wc_kses_notice( $notice['notice'] ); ?>
+		</div>
+	</div>
+<?php endforeach; ?>