Add Store Notices block

assets/js/blocks/store-notices/block.json

@@ -0,0 +1,14 @@
+{
+	"name": "woocommerce/store-notices",
+	"version": "1.0.0",
+	"title": "Store Notices",
+	"description": "Display shopper-facing notifications generated by WooCommerce or extensions.",
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce" ],
+	"supports": {
+		"multiple": false
+	},
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

assets/js/blocks/store-notices/edit.tsx

@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { Notice } from '@wordpress/components';
+
+const Edit = (): JSX.Element => {
+	const blockProps = useBlockProps( {
+		className: 'wc-block-store-notices',
+	} );
+
+	return (
+		<div { ...blockProps }>
+			<Notice status="warning" isDismissible={ false }>
+				{ __(
+					'Notices added by WooCommerce or extensions will show up here.',
+					'woo-gutenberg-products-block'
+				) }
+			</Notice>
+		</div>
+	);
+};
+
+export default Edit;

assets/js/blocks/store-notices/index.tsx

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { Icon } from '@wordpress/icons';
+import { totals } from '@woocommerce/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+
+registerBlockType( metadata, {
+	icon: {
+		src: (
+			<Icon
+				icon={ totals }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	attributes: {
+		...metadata.attributes,
+	},
+	edit,
+	save() {
+		return null;
+	},
+} );

bin/webpack-entries.js

@@ -39,6 +39,7 @@ const blocks = {
 	'mini-cart-contents': {
 		customDir: 'mini-cart/mini-cart-contents',
 	},
+	'store-notices': {},
 	'price-filter': {},
 	'product-best-sellers': {},
 	'product-category': {},

src/BlockTypes/StoreNotices.php

@@ -0,0 +1,54 @@
+<?php
+
+namespace Automattic\WooCommerce\Blocks\BlockTypes;
+
+use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
+
+/**
+ * StoreNotices class.
+ */
+class StoreNotices extends AbstractBlock {
+
+	/**
+	 * Block name.
+	 *
+	 * @var string
+	 */
+	protected $block_name = 'store-notices';
+
+	/**
+	 * Render the block.
+	 *
+	 * @param array    $attributes Block attributes.
+	 * @param string   $content Block content.
+	 * @param WP_Block $block Block instance.
+	 *
+	 * @return string | void Rendered block output.
+	 */
+	protected function render( $attributes, $content, $block ) {
+		ob_start();
+		woocommerce_output_all_notices();
+		$notices = ob_get_clean();
+
+		if ( ! $notices ) {
+			return;
+		}
+
+		$classname = isset( $attributes['className'] ) ? $attributes['className'] : '';
+
+		return sprintf(
+			'<div class="woocommerce wc-block-store-notices %s">%s</div>',
+			esc_attr( $classname ),
+			wc_kses_notice( $notices )
+		);
+	}
+
+	/**
+	 * Get the frontend script handle for this block type.
+	 *
+	 * @param string $key Data to get, or default to everything.
+	 */
+	protected function get_block_type_script( $key = null ) {
+		return null;
+	}
+}

src/BlockTypesController.php

@@ -176,6 +176,7 @@ protected function get_block_types() {
 			'HandpickedProducts',
 			'MiniCart',
 			'MiniCartContents',
+			'StoreNotices',
 			'PriceFilter',
 			'ProductAddToCart',
 			'ProductBestSellers',
@@ -247,6 +248,7 @@ protected function get_block_types() {
 				$block_types,
 				[
 					'ClassicTemplate',
+					'StoreNotices',
 				]
 			);
 		}

tests/e2e/specs/backend/store-notices.test.js

@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import {
+	canvas,
+	createNewPost,
+	insertBlock,
+	switchUserToAdmin,
+} from '@wordpress/e2e-test-utils';
+import { searchForBlock } from '@wordpress/e2e-test-utils/build/inserter';
+
+/**
+ * Internal dependencies
+ */
+import { goToSiteEditor, useTheme, waitForCanvas } from '../../utils.js';
+
+const block = {
+	name: 'Store Notices',
+	slug: 'woocommerce/store-notices',
+	class: '.wc-block-store-notices',
+	selectors: {
+		insertButton: "//button//span[text()='Store Notices']",
+		insertButtonDisabled:
+			"//button[@aria-disabled]//span[text()='Store Notices']",
+	},
+};
+
+describe( `${ block.name } Block`, () => {
+	it( 'can not be inserted in the Post Editor', async () => {
+		await switchUserToAdmin();
+
+		await createNewPost( {
+			postType: 'post',
+			title: block.name,
+		} );
+		await searchForBlock( block.name );
+		expect( page ).toMatch( 'No results found.' );
+	} );
+
+	describe( 'in FSE editor', () => {
+		useTheme( 'emptytheme' );
+
+		beforeEach( async () => {
+			await goToSiteEditor();
+			await waitForCanvas();
+		} );
+
+		it( 'can be inserted in FSE area', async () => {
+			await insertBlock( block.name );
+			await expect( canvas() ).toMatchElement( block.class );
+		} );
+
+		it( 'can only be inserted once', async () => {
+			await insertBlock( block.name );
+			await searchForBlock( block.name );
+			const storeNoticesButton = await page.$x(
+				block.selectors.insertButtonDisabled
+			);
+			expect( storeNoticesButton ).toHaveLength( 1 );
+		} );
+	} );
+} );