Add Catalog Sorting filter block

assets/js/blocks/catalog-sorting/block.json

@@ -0,0 +1,27 @@
+{
+	"name": "woocommerce/catalog-sorting",
+	"version": "1.0.0",
+	"title": "Catalog Sorting",
+	"description": "Enable customers to change the sorting order of the products.",
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce" ],
+	"supports": {
+		"color": {
+			"text": true,
+			"background": false
+		},
+		"typography": {
+			"fontSize": true,
+			"__experimentalFontFamily": true
+		}
+	},
+	"attributes": {
+		"fontSize": {
+			"type": "string",
+			"default": "small"
+		}
+	},
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

assets/js/blocks/catalog-sorting/edit.tsx

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import { Disabled } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const CatalogSorting = () => {
+	return (
+		<select>
+			<option>
+				{ __( 'Default sorting', 'woo-gutenberg-products-block' ) }
+			</option>
+		</select>
+	);
+};
+
+const Edit = () => {
+	const blockProps = useBlockProps( {
+		className: 'woocommerce wc-block-catalog-sorting',
+	} );
+
+	return (
+		<>
+			<div { ...blockProps }>
+				<Disabled>
+					<CatalogSorting />
+				</Disabled>
+			</div>
+		</>
+	);
+};
+
+export default Edit;

assets/js/blocks/catalog-sorting/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/catalog-sorting/style.scss

@@ -0,0 +1,11 @@
+.woocommerce.wc-block-catalog-sorting {
+	form {
+		float: none;
+	}
+
+	select {
+		color: inherit !important;
+		font-size: inherit;
+		font-family: inherit;
+	}
+}

bin/webpack-entries.js

@@ -21,6 +21,7 @@ const blocks = {
 	},
 	'attribute-filter': {},
 	cart: {},
+	'catalog-sorting': {},
 	checkout: {},
 	'customer-account': {},
 	'featured-category': {

src/BlockTypes/CatalogSorting.php

@@ -0,0 +1,56 @@
+<?php
+
+namespace Automattic\WooCommerce\Blocks\BlockTypes;
+
+use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
+
+/**
+ * CatalogSorting class.
+ */
+class CatalogSorting extends AbstractBlock {
+
+	/**
+	 * Block name.
+	 *
+	 * @var string
+	 */
+	protected $block_name = 'catalog-sorting';
+
+	/**
+	 * 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_catalog_ordering();
+		$catalog_sorting = ob_get_clean();
+
+		if ( ! $catalog_sorting ) {
+			return;
+		}
+
+		$classname          = isset( $attributes['className'] ) ? $attributes['className'] : '';
+		$classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
+		return sprintf(
+			'<div class="woocommerce wc-block-catalog-sorting %1$s %2$s" style="%3$s">%4$s</div>',
+			esc_attr( $classes_and_styles['classes'] ),
+			esc_attr( $classname ),
+			esc_attr( $classes_and_styles['styles'] ),
+			$catalog_sorting
+		);
+	}
+
+	/**
+	 * 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

@@ -168,6 +168,7 @@ protected function get_block_types() {
 			'AllProducts',
 			'AllReviews',
 			'AttributeFilter',
+			'CatalogSorting',
 			'ClassicTemplate',
 			'CustomerAccount',
 			'FeaturedCategory',
@@ -246,6 +247,7 @@ protected function get_block_types() {
 			$block_types = array_diff(
 				$block_types,
 				[
+					'CatalogSorting',
 					'ClassicTemplate',
 				]
 			);

tests/e2e/specs/backend/catalog-sorting.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: 'Catalog Sorting',
+	slug: 'woocommerce/catalog-sorting',
+	class: '.wc-block-catalog-sorting',
+};
+
+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 );
+		} );
+	} );
+} );