[Blockifying Product Archive Templates] Add Results Count block (https://github.com/woocommerce/woocommerce-blocks/pull/8078)

* Init setup to add a new block Results Count

* Render  template part as a content of ResultsCount block

* Switch to template part rendering

* Rename the block to ProductResultsCount

* Fix typo in BlockTypesController

* Change the ProductResultsCount class name

* Remove Product Results Count block from Product Query template

* Improve the way Product Results Count is rendered in the editor

* Add  prefix to places that missed renaming from ResultsCount to ProductResultsCount

* Remove unnecessary frontend.tsx file for ProductResultsCount

* Make sure global styles are applied and respected by Product Results Count block

* Make sure the Product Results Count is available inly in Product Catalog template

* Add basic tests to Product Results Count

* Remove empty line in style file

* Fix TS issue in Product Results Count

* Fix typo

* Override the enqueue_assets method to prevent unnecessary enqueue and 404 error on the frontend

* Add necessary property to block's metadata

* Address code review feedback

* Update description

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

* Remove disabled component

* Improve test description

* Merge edit and block files

* Remove align support

* Remove background support

* Simplify edit component

* Improve readability with sprintf and add custom class

* Simplify test case

* Add styles and order placeholders

Co-authored-by: Tung Du <dinhtungdu@gmail.com>

* Fix markup to match with the frontend

Co-authored-by: Tung Du <dinhtungdu@gmail.com>

Co-authored-by: Alba Rincón <albarin@users.noreply.github.com>
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
Co-authored-by: Alba Rincón <alba.rincon@automattic.com>
Co-authored-by: Tung Du <dinhtungdu@gmail.com>

plugins/woocommerce-blocks/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": {
+		"color": {
+			"text": true,
+			"background": false
+		},
+		"typography": {
+			"fontSize": true,
+			"__experimentalFontFamily": true
+		}
+	},
+	"attributes": {},
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

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

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+export interface Attributes {
+	className?: string;
+}
+
+const Edit = () => {
+	const blockProps = useBlockProps( {
+		className: 'woocommerce wc-block-product-results-count',
+	} );
+
+	return (
+		<div { ...blockProps }>
+			<p className="woocommerce-result-count">
+				{ __(
+					'Showing 1-X of X results',
+					'woo-gutenberg-products-block'
+				) }
+			</p>
+		</div>
+	);
+};
+
+export default Edit;

plugins/woocommerce-blocks/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;
+	},
+} );

plugins/woocommerce-blocks/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;
+	}
+}

plugins/woocommerce-blocks/bin/webpack-entries.js

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

plugins/woocommerce-blocks/src/BlockTypes/ProductResultsCount.php

@@ -0,0 +1,53 @@
+<?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 );
+		$classname          = isset( $attributes['className'] ) ? $attributes['className'] : '';
+
+		return sprintf(
+			'<div class="woocommerce wc-block-product-results-count %1$s %2$s" style="%3$s">%4$s</div>',
+			esc_attr( $classes_and_styles['classes'] ),
+			$classname,
+			esc_attr( $classes_and_styles['styles'] ),
+			$product_results_count
+		);
+	}
+}

plugins/woocommerce-blocks/src/BlockTypesController.php

@@ -189,6 +189,7 @@ final class BlockTypesController {
 			'ProductPrice',
 			'ProductQuery',
 			'ProductRating',
+			'ProductResultsCount',
 			'ProductSaleBadge',
 			'ProductSearch',
 			'ProductSKU',
@@ -247,6 +248,7 @@ final class BlockTypesController {
 				$block_types,
 				[
 					'ClassicTemplate',
+					'ProductResultsCount',
 				]
 			);
 		}

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

@@ -0,0 +1,61 @@
+/**
+ * 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`, () => {
+	it( 'in can not be inserted in a post', 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 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 );
+		} );
+	} );
+} );