Skeleton shopping cart block (https://github.com/woocommerce/woocommerce-blocks/pull/1306)

* basic empty cart block

* use a real placeholder for placeholder editor content

* remove unnecessary Fragment

* updates to config and frontend script

* enqueue frontend script

* add example config to block registration

* change name typo

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/block.js

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { Placeholder } from '@wordpress/components';
+
+/**
+ * Component to handle edit mode of "Cart Block".
+ */
+const Cart = () => {
+	return <Placeholder>Cart block coming soon…</Placeholder>;
+};
+
+Cart.propTypes = {};
+
+export default Cart;

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/example.js

@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import { DEFAULT_HEIGHT } from '@woocommerce/block-settings';
+import { previewProducts } from '@woocommerce/resource-previews';
+
+export const example = {
+	attributes: {
+		contentAlign: 'center',
+		dimRatio: 50,
+		editMode: false,
+		height: DEFAULT_HEIGHT,
+		mediaSrc: '',
+		showDesc: true,
+		productId: 'preview',
+		previewProduct: previewProducts[ 0 ],
+	},
+};

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/frontend.js

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { withRestApiHydration } from '@woocommerce/block-hocs';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block.js';
+import renderFrontend from '../../../utils/render-frontend.js';
+
+const getProps = () => {
+	return {
+		attributes: {},
+	};
+};
+
+renderFrontend(
+	'.wp-block-woocommerce-cart',
+	withRestApiHydration( Block ),
+	getProps
+);

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/index.js

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { InnerBlocks } from '@wordpress/editor';
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import { example } from './example';
+/**
+ * Register and run the Cart block.
+ */
+registerBlockType( 'woocommerce/cart', {
+	title: __( 'Cart', 'woo-gutenberg-products-block' ),
+	icon: {
+		src: 'cart',
+		foreground: '#96588a',
+	},
+	category: 'woocommerce',
+	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
+	description: __( 'Shopping cart.', 'woo-gutenberg-products-block' ),
+	supports: {
+		align: [ 'wide', 'full' ],
+		html: false,
+	},
+	example,
+	attributes: {},
+
+	/**
+	 * Renders and manages the block.
+	 */
+	edit( props ) {
+		return <Block { ...props } />;
+	},
+
+	/**
+	 * Block content is rendered in PHP, not via save function.
+	 */
+	save() {
+		return <InnerBlocks.Content />;
+	},
+} );

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

@@ -98,6 +98,7 @@ const getAlias = ( options = {} ) => {
 const mainEntry = {
 	// Shared blocks code
 	blocks: './assets/js/index.js',
+
 	// Blocks
 	'handpicked-products': './assets/js/blocks/handpicked-products/index.js',
 	'product-best-sellers': './assets/js/blocks/product-best-sellers/index.js',
@@ -123,6 +124,9 @@ const mainEntry = {
 	'active-filters': './assets/js/blocks/active-filters/index.js',
 	'block-error-boundary':
 		'./assets/js/base/components/block-error-boundary/style.scss',
+
+	// cart & checkout blocks
+	cart: './assets/js/blocks/cart-checkout/cart/index.js',
 };
 
 const frontEndEntry = {
@@ -131,6 +135,7 @@ const frontEndEntry = {
 	'price-filter': './assets/js/blocks/price-filter/frontend.js',
 	'attribute-filter': './assets/js/blocks/attribute-filter/frontend.js',
 	'active-filters': './assets/js/blocks/active-filters/frontend.js',
+	cart: './assets/js/blocks/cart-checkout/cart/frontend.js',
 };
 
 const getEntryConfig = ( main = true, exclude = [] ) => {

plugins/woocommerce-blocks/src/Assets.php

@@ -69,6 +69,7 @@ class Assets {
 		self::register_script( 'wc-price-filter', plugins_url( self::get_block_asset_build_path( 'price-filter' ), __DIR__ ), $block_dependencies );
 		self::register_script( 'wc-attribute-filter', plugins_url( self::get_block_asset_build_path( 'attribute-filter' ), __DIR__ ), $block_dependencies );
 		self::register_script( 'wc-active-filters', plugins_url( self::get_block_asset_build_path( 'active-filters' ), __DIR__ ), $block_dependencies );
+		self::register_script( 'wc-cart', plugins_url( self::get_block_asset_build_path( 'cart' ), __DIR__ ), $block_dependencies );
 	}
 
 	/**

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

@@ -0,0 +1,52 @@
+<?php
+/**
+ * Cart block.
+ *
+ * @package WooCommerce/Blocks
+ */
+
+namespace Automattic\WooCommerce\Blocks\BlockTypes;
+
+defined( 'ABSPATH' ) || exit;
+
+/**
+ * Cart class.
+ */
+class Cart extends AbstractBlock {
+	/**
+	 * Block name.
+	 *
+	 * @var string
+	 */
+	protected $block_name = 'cart';
+
+	/**
+	 * Registers the block type with WordPress.
+	 */
+	public function register_block_type() {
+		register_block_type(
+			$this->namespace . '/' . $this->block_name,
+			array(
+				'render_callback' => array( $this, 'render' ),
+				'editor_script'   => 'wc-' . $this->block_name,
+				'editor_style'    => 'wc-block-editor',
+				'style'           => 'wc-block-style',
+				'script'          => 'wc-' . $this->block_name . '-frontend',
+			)
+		);
+	}
+
+	/**
+	 * Append frontend scripts when rendering the Cart block.
+	 *
+	 * @param array  $attributes Block attributes. Default empty array.
+	 * @param string $content    Block content. Default empty string.
+	 * @return string Rendered block type output.
+	 */
+	public function render( $attributes = array(), $content = '' ) {
+		\Automattic\WooCommerce\Blocks\Assets::register_block_script(
+			$this->block_name . '-frontend'
+		);
+		return $content;
+	}
+}

plugins/woocommerce-blocks/src/Library.php

@@ -50,6 +50,7 @@ class Library {
 			$blocks[] = 'PriceFilter';
 			$blocks[] = 'AttributeFilter';
 			$blocks[] = 'ActiveFilters';
+			$blocks[] = 'Cart';
 		}
 		foreach ( $blocks as $class ) {
 			$class    = __NAMESPACE__ . '\\BlockTypes\\' . $class;

plugins/woocommerce-blocks/webpack.config.js

@@ -112,6 +112,7 @@ const LegacyBlocksConfig = {
 			'price-filter',
 			'attribute-filter',
 			'active-filters',
+			'cart',
 		],
 	} ),
 };
@@ -133,6 +134,7 @@ const LegacyFrontendBlocksConfig = {
 			'price-filter',
 			'attribute-filter',
 			'active-filters',
+			'cart',
 		],
 	} ),
 };