converted product-new block

assets/js/blocks/product-new/block.json

@@ -0,0 +1,92 @@
+{
+	"name": "woocommerce/product-new",
+	"title": "Newest Products",
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce", "woo-gutenberg-products-block" ],
+	"description": "Display a grid of your newest products.",
+	"supports": {
+		"align": [ "wide", "full" ],
+		"html": false
+	},
+	"attributes": {
+		"columns": {
+			"type": "number",
+			"default": 3
+		},
+		"rows": {
+			"type": "number",
+			"default": 3
+		},
+		"alignButtons": {
+			"type": "boolean",
+			"default": false
+		},
+		"contentVisibility": {
+			"type": "object",
+			"default": {
+				"image": true,
+				"title": true,
+				"price": true,
+				"rating": true,
+				"button": true
+			},
+			"properties": {
+				"image": {
+					"type": "boolean",
+					"default": true
+				},
+				"title": {
+					"type": "boolean",
+					"default": true
+				},
+				"price": {
+					"type": "boolean",
+					"default": true
+				},
+				"rating": {
+					"type": "boolean",
+					"default": true
+				},
+				"button": {
+					"type": "boolean",
+					"default": true
+				}
+			}
+		},
+		"categories": {
+			"type": "array",
+			"default": []
+		},
+		"catOperator": {
+			"type": "string",
+			"default": "any"
+		},
+		"isPreview": {
+			"type": "boolean",
+			"default": false
+		},
+		"stockStatus": {
+			"type": "array"
+		},
+		"editMode": {
+			"type": "boolean",
+			"default": true
+		},
+		"orderby": {
+			"type": "string",
+			"enum": [
+				"date",
+				"popularity",
+				"price_asc",
+				"price_desc",
+				"rating",
+				"title",
+				"menu_order"
+			],
+			"default": "date"
+		}
+	},
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

assets/js/blocks/product-new/block.tsx

@@ -0,0 +1,112 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Disabled, PanelBody } from '@wordpress/components';
+import { InspectorControls } from '@wordpress/block-editor';
+import ServerSideRender from '@wordpress/server-side-render';
+import GridContentControl from '@woocommerce/editor-components/grid-content-control';
+import GridLayoutControl from '@woocommerce/editor-components/grid-layout-control';
+import ProductCategoryControl from '@woocommerce/editor-components/product-category-control';
+import ProductStockControl from '@woocommerce/editor-components/product-stock-control';
+import { gridBlockPreview } from '@woocommerce/resource-previews';
+import { getSetting } from '@woocommerce/settings';
+
+/**
+ * Internal dependencies
+ */
+import { ProductNewestBlockProps } from './types';
+/**
+ * Component to handle edit mode of "Newest Products".
+ */
+export const ProductNewestBlock = ( {
+	attributes,
+	name,
+	setAttributes,
+}: ProductNewestBlockProps ): JSX.Element => {
+	const {
+		categories,
+		catOperator,
+		columns,
+		contentVisibility,
+		rows,
+		alignButtons,
+		stockStatus,
+		isPreview,
+	} = attributes;
+	const getInspectorControls = () => {
+		return (
+			<InspectorControls key="inspector">
+				<PanelBody
+					title={ __( 'Layout', 'woo-gutenberg-products-block' ) }
+					initialOpen
+				>
+					<GridLayoutControl
+						columns={ columns }
+						rows={ rows }
+						alignButtons={ alignButtons }
+						setAttributes={ setAttributes }
+						minColumns={ getSetting( 'min_columns', 1 ) }
+						maxColumns={ getSetting( 'max_columns', 6 ) }
+						minRows={ getSetting( 'min_rows', 1 ) }
+						maxRows={ getSetting( 'max_rows', 6 ) }
+					/>
+				</PanelBody>
+				<PanelBody
+					title={ __( 'Content', 'woo-gutenberg-products-block' ) }
+					initialOpen
+				>
+					<GridContentControl
+						settings={ contentVisibility }
+						onChange={ ( value ) =>
+							setAttributes( { contentVisibility: value } )
+						}
+					/>
+				</PanelBody>
+				<PanelBody
+					title={ __(
+						'Filter by stock status',
+						'woo-gutenberg-products-block'
+					) }
+					initialOpen={ false }
+				>
+					<ProductStockControl
+						setAttributes={ setAttributes }
+						value={ stockStatus }
+					/>
+				</PanelBody>
+				<PanelBody
+					title={ __(
+						'Filter by Product Category',
+						'woo-gutenberg-products-block'
+					) }
+					initialOpen={ false }
+				>
+					<ProductCategoryControl
+						selected={ categories }
+						onChange={ ( value = [] ) => {
+							const ids = value.map( ( { id } ) => id );
+							setAttributes( { categories: ids } );
+						} }
+						operator={ catOperator }
+						onOperatorChange={ ( value = 'any' ) =>
+							setAttributes( { catOperator: value } )
+						}
+					/>
+				</PanelBody>
+			</InspectorControls>
+		);
+	};
+	if ( isPreview ) {
+		return gridBlockPreview;
+	}
+	return (
+		<>
+			{ getInspectorControls() }
+			<Disabled>
+				<ServerSideRender block={ name } attributes={ attributes } />
+			</Disabled>
+		</>
+	);
+};
+export default ProductNewestBlock;

assets/js/blocks/product-new/edit.tsx

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { ProductNewestBlock } from './block';
+import { ProductNewestBlockProps } from './types';
+
+export const Edit = (
+	props: unknown & ProductNewestBlockProps
+): JSX.Element => {
+	const blockProps = useBlockProps();
+
+	return (
+		<div { ...blockProps }>
+			<ProductNewestBlock { ...props } />
+		</div>
+	);
+};

assets/js/blocks/product-new/index.tsx

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { createBlock, registerBlockType } from '@wordpress/blocks';
+import { Icon, sparkles } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import sharedAttributes, {
+	sharedAttributeBlockTypes,
+} from '../../utils/shared-attributes';
+import { Edit } from './edit';
+import metadata from './block.json';
+
+registerBlockType( metadata, {
+	title: __( 'Newest Products', 'woo-gutenberg-products-block' ),
+	icon: {
+		src: (
+			<Icon
+				icon={ sparkles }
+				className="wc-block-editor-components-block-icon wc-block-editor-components-block-icon--sparkles"
+			/>
+		),
+	},
+	attributes: {
+		...sharedAttributes,
+		...metadata.attributes,
+	},
+	transforms: {
+		from: [
+			{
+				type: 'block',
+				blocks: sharedAttributeBlockTypes.filter(
+					( value ) => value !== 'woocommerce/product-new'
+				),
+				transform: ( attributes ) =>
+					createBlock( 'woocommerce/product-new', attributes ),
+			},
+		],
+	},
+
+	/**
+	 * Renders and manages the block.
+	 *
+	 */
+	edit: Edit,
+	save() {
+		return null;
+	},
+} );

assets/js/blocks/product-new/types.ts

@@ -0,0 +1,40 @@
+interface Attributes {
+	columns: number;
+	rows: number;
+	alignButtons: boolean;
+	contentVisibility: {
+		image: boolean;
+		title: boolean;
+		price: boolean;
+		rating: boolean;
+		button: boolean;
+	};
+	categories: Array< number >;
+	catOperator: string;
+	isPreview: boolean;
+	stockStatus: Array< string >;
+	editMode: boolean;
+	orderby:
+		| 'date'
+		| 'popularity'
+		| 'price_asc'
+		| 'price_desc'
+		| 'rating'
+		| 'title'
+		| 'menu_order';
+}
+
+export interface ProductNewestBlockProps {
+	/**
+	 * The attributes for this block
+	 */
+	attributes: Attributes;
+	/**
+	 * The register block name.
+	 */
+	name: string;
+	/**
+	 * A callback to update attributes
+	 */
+	setAttributes: ( attributes: Partial< Attributes > ) => void;
+}