initial commit

packages/woocommerce-blocks/assets/js/blocks/product-new/block.js

@@ -0,0 +1,118 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Component } from '@wordpress/element';
+import { Disabled, PanelBody } from '@wordpress/components';
+import { InspectorControls } from '@wordpress/block-editor';
+import ServerSideRender from '@wordpress/server-side-render';
+import PropTypes from 'prop-types';
+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 { gridBlockPreview } from '@woocommerce/resource-previews';
+import { getSetting } from '@woocommerce/settings';
+
+/**
+ * Component to handle edit mode of "Newest Products".
+ */
+class ProductNewestBlock extends Component {
+	getInspectorControls() {
+		const { attributes, setAttributes } = this.props;
+		const {
+			categories,
+			catOperator,
+			columns,
+			contentVisibility,
+			rows,
+			alignButtons,
+		} = attributes;
+
+		return (
+			<InspectorControls key="inspector">
+				<PanelBody
+					title={ __( 'Layout', 'woocommerce' ) }
+					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', 'woocommerce' ) }
+					initialOpen
+				>
+					<GridContentControl
+						settings={ contentVisibility }
+						onChange={ ( value ) =>
+							setAttributes( { contentVisibility: value } )
+						}
+					/>
+				</PanelBody>
+				<PanelBody
+					title={ __(
+						'Filter by Product Category',
+						'woocommerce'
+					) }
+					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>
+		);
+	}
+
+	render() {
+		const { attributes, name } = this.props;
+
+		if ( attributes.isPreview ) {
+			return gridBlockPreview;
+		}
+
+		return (
+			<>
+				{ this.getInspectorControls() }
+				<Disabled>
+					<ServerSideRender
+						block={ name }
+						attributes={ attributes }
+					/>
+				</Disabled>
+			</>
+		);
+	}
+}
+
+ProductNewestBlock.propTypes = {
+	/**
+	 * The attributes for this block
+	 */
+	attributes: PropTypes.object.isRequired,
+	/**
+	 * The register block name.
+	 */
+	name: PropTypes.string.isRequired,
+	/**
+	 * A callback to update attributes
+	 */
+	setAttributes: PropTypes.func.isRequired,
+};
+
+export default ProductNewestBlock;

packages/woocommerce-blocks/assets/js/blocks/product-new/index.js

@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { createBlock, registerBlockType } from '@wordpress/blocks';
+import { without } from 'lodash';
+import { Icon, exclamation } from '@woocommerce/icons';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import sharedAttributes, {
+	sharedAttributeBlockTypes,
+} from '../../utils/shared-attributes';
+
+registerBlockType( 'woocommerce/product-new', {
+	title: __( 'Newest Products', 'woocommerce' ),
+	icon: {
+		src: <Icon srcElement={ exclamation } />,
+		foreground: '#96588a',
+	},
+	category: 'woocommerce',
+	keywords: [ __( 'WooCommerce', 'woocommerce' ) ],
+	description: __(
+		'Display a grid of your newest products.',
+		'woocommerce'
+	),
+	supports: {
+		align: [ 'wide', 'full' ],
+		html: false,
+	},
+	attributes: {
+		...sharedAttributes,
+	},
+	example: {
+		attributes: {
+			isPreview: true,
+		},
+	},
+	transforms: {
+		from: [
+			{
+				type: 'block',
+				blocks: without(
+					sharedAttributeBlockTypes,
+					'woocommerce/product-new'
+				),
+				transform: ( attributes ) =>
+					createBlock( 'woocommerce/product-new', attributes ),
+			},
+		],
+	},
+
+	/**
+	 * Renders and manages the block.
+	 *
+	 * @param {Object} props Props to pass to block.
+	 */
+	edit( props ) {
+		return <Block { ...props } />;
+	},
+
+	save() {
+		return null;
+	},
+} );