Add Results Count block

assets/js/blocks/product-results-count/block.json

@@ -0,0 +1,22 @@
+{
+	"name": "woocommerce/product-results-count",
+	"version": "1.0.0",
+	"title": "Product Results Count",
+	"description": "Display the number of products on the archive page or search result page.",
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce" ],
+	"supports": {
+		"align": true,
+		"color": {
+			"text": true
+		},
+		"typography": {
+			"fontSize": true,
+			"__experimentalFontFamily": true
+		}
+	},
+	"attributes": {},
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

assets/js/blocks/product-results-count/edit.tsx

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import { useBlockProps } from '@wordpress/block-editor';
+import type { BlockEditProps } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+
+export interface Attributes {
+	className?: string;
+}
+
+const ProductResultsCount = (): JSX.Element => {
+	return (
+		<div>
+			{ __( 'Showing 1-X of X results', 'woo-gutenberg-products-block' ) }
+		</div>
+	);
+};
+
+const Edit = ( { attributes }: BlockEditProps< Attributes > ) => {
+	const { className } = attributes;
+	const blockProps = useBlockProps( {
+		className: classNames( 'wc-block-product-results-count', className ),
+	} );
+
+	return (
+		<>
+			<div { ...blockProps }>
+				<ProductResultsCount />
+			</div>
+		</>
+	);
+};
+
+export default Edit;

assets/js/blocks/product-results-count/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;
+	},
+} );

assets/js/blocks/product-results-count/style.scss

@@ -0,0 +1,9 @@
+// For now, we use the PHP template to render that element, which has
+// high specificity styles applied. To overcome that double-class
+// selector is used here
+.woocommerce.wc-block-product-results-count {
+	.woocommerce-result-count {
+		float: none;
+		font-size: inherit;
+	}
+}

bin/webpack-entries.js

@@ -48,6 +48,7 @@ const blocks = {
 	'product-query': {
 		isExperimental: true,
 	},
+	'product-results-count': {},
 	'product-search': {},
 	'product-tag': {},
 	'product-top-rated': {},

src/BlockTypes/ProductResultsCount.php

@@ -0,0 +1,46 @@
+<?php
+
+namespace Automattic\WooCommerce\Blocks\BlockTypes;
+
+use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
+
+/**
+ * ProductResultsCount class.
+ */
+class ProductResultsCount extends AbstractBlock {
+
+	/**
+	 * Block name.
+	 *
+	 * @var string
+	 */
+	protected $block_name = 'product-results-count';
+
+	/**
+	 * 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;
+	}
+
+	/**
+	 * Render the block.
+	 *
+	 * @param array    $attributes Block attributes.
+	 * @param string   $content Block content.
+	 * @param WP_Block $block Block instance.
+	 *
+	 * @return string Rendered block output.
+	 */
+	protected function render( $attributes, $content, $block ) {
+		ob_start();
+		woocommerce_result_count();
+		$product_results_count = ob_get_clean();
+
+		$classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
+
+		return "<div class='woocommerce wc-block-product-results-count " . esc_attr( $classes_and_styles['classes'] ) . "' style='" . esc_attr( $classes_and_styles['styles'] ) . "'>" . $product_results_count . '</div>';
+	}
+}

src/BlockTypesController.php

@@ -189,6 +189,7 @@ protected function get_block_types() {
 			'ProductPrice',
 			'ProductQuery',
 			'ProductRating',
+			'ProductResultsCount',
 			'ProductSaleBadge',
 			'ProductSearch',
 			'ProductSKU',
@@ -247,6 +248,7 @@ protected function get_block_types() {
 				$block_types,
 				[
 					'ClassicTemplate',
+					'ProductResultsCount',
 				]
 			);
 		}

tests/e2e/specs/backend/product-results-count.test.js

@@ -0,0 +1,66 @@
+/**
+ * External dependencies
+ */
+import {
+	canvas,
+	createNewPost,
+	insertBlock,
+	switchUserToAdmin,
+} from '@wordpress/e2e-test-utils';
+import { searchForBlock } from '@wordpress/e2e-test-utils/build/inserter';
+
+/**
+ * Internal dependencies
+ */
+import {
+	filterCurrentBlocks,
+	goToSiteEditor,
+	useTheme,
+	waitForCanvas,
+} from '../../utils.js';
+
+const block = {
+	name: 'Product Results Count',
+	slug: 'woocommerce/product-results-count',
+	class: '.wc-block-product-results-count',
+};
+
+describe( `${ block.name } Block`, () => {
+	describe( 'in a post', () => {
+		beforeAll( async () => {
+			await switchUserToAdmin();
+		} );
+
+		it( 'can not be inserted', async () => {
+			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 be inserted more than once', async () => {
+			await insertBlock( block.name );
+			await insertBlock( block.name );
+			const foo = await filterCurrentBlocks(
+				( b ) => b.name === block.slug
+			);
+			expect( foo ).toHaveLength( 2 );
+		} );
+	} );
+} );