Add Atomic SKU block (https://github.com/woocommerce/woocommerce-blocks/pull/2645)

* Add SKU block

* Edit product link in inspector

plugins/woocommerce-blocks/assets/js/atomic/blocks/index.js

@@ -8,3 +8,4 @@ import './product/rating';
 import './product/button';
 import './product/summary';
 import './product/sale-badge';
+import './product/sku';

plugins/woocommerce-blocks/assets/js/atomic/blocks/product/sku/block.js

@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import {
+	useInnerBlockLayoutContext,
+	useProductDataContext,
+} from '@woocommerce/shared-context';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * Product SKU Block Component.
+ *
+ * @param {Object} props             Incoming props.
+ * @param {string} [props.className] CSS Class name for the component.
+ * @param {Object} [props.product]   Optional product object. Product from context will be used if
+ *                                   this is not provided.
+ * @return {*} The component.
+ */
+const Block = ( { className, ...props } ) => {
+	const { parentClassName } = useInnerBlockLayoutContext();
+	const productDataContext = useProductDataContext();
+	const product = props.product || productDataContext.product || {};
+	const sku = product.sku || '';
+
+	if ( ! sku ) {
+		return null;
+	}
+
+	return (
+		<div
+			className={ classnames(
+				className,
+				'wc-block-components-product-sku',
+				`${ parentClassName }__product-sku`
+			) }
+		>
+			{ __( 'SKU:', 'woo-gutenberg-products-block' ) }{ ' ' }
+			<strong>{ sku }</strong>
+		</div>
+	);
+};
+
+Block.propTypes = {
+	className: PropTypes.string,
+	product: PropTypes.object,
+};
+
+export default Block;

plugins/woocommerce-blocks/assets/js/atomic/blocks/product/sku/edit.js

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import EditProductLink from '@woocommerce/block-components/edit-product-link';
+import { useProductDataContext } from '@woocommerce/shared-context';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export default ( { attributes } ) => {
+	const productDataContext = useProductDataContext();
+	const product = productDataContext.product || {};
+
+	return (
+		<>
+			<EditProductLink productId={ product.id } />
+			<Block { ...attributes } />
+		</>
+	);
+};

plugins/woocommerce-blocks/assets/js/atomic/blocks/product/sku/index.js

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { registerBlockType } from '@wordpress/blocks';
+import { Icon, barcode } from '@woocommerce/icons';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared-config';
+import edit from './edit';
+
+const blockConfig = {
+	title: __( 'Product SKU', 'woo-gutenberg-products-block' ),
+	description: __(
+		'Display the SKU of a product.',
+		'woo-gutenberg-products-block'
+	),
+	icon: {
+		src: <Icon srcElement={ barcode } />,
+		foreground: '#96588a',
+	},
+	edit,
+};
+
+registerBlockType( 'woocommerce/product-sku', {
+	...sharedConfig,
+	...blockConfig,
+} );

plugins/woocommerce-blocks/assets/js/atomic/blocks/product/sku/style.scss

@@ -0,0 +1,9 @@
+.wc-block-layout {
+	.wc-block-components-product-sku {
+		margin-top: 0;
+		margin-bottom: $gap-small;
+		display: block;
+		text-transform: uppercase;
+		@include font-size(small);
+	}
+}

plugins/woocommerce-blocks/assets/js/atomic/utils/get-block-map.js

@@ -13,6 +13,7 @@ import ProductRating from '../blocks/product/rating/block';
 import ProductSaleBadge from '../blocks/product/sale-badge/block';
 import ProductSummary from '../blocks/product/summary/block';
 import ProductTitle from '../blocks/product/title/frontend';
+import ProductSku from '../blocks/product/sku/block';
 
 /**
  * Map blocks to components suitable for use on the frontend.
@@ -27,5 +28,6 @@ export const getBlockMap = ( blockName ) => ( {
 	'woocommerce/product-button': ProductButton,
 	'woocommerce/product-summary': ProductSummary,
 	'woocommerce/product-sale-badge': ProductSaleBadge,
+	'woocommerce/product-sku': ProductSku,
 	...getRegisteredInnerBlocks( blockName ),
 } );

plugins/woocommerce-blocks/assets/js/blocks/single-product/constants.js

@@ -36,6 +36,7 @@ export const DEFAULT_INNER_BLOCKS = [
 					[ 'woocommerce/product-price' ],
 					[ 'woocommerce/product-summary' ],
 					[ 'woocommerce/product-button' ],
+					[ 'woocommerce/product-sku' ],
 				],
 			],
 		],

plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/edit-product-link.js

@@ -1,37 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Icon, external } from '@woocommerce/icons';
-import { ADMIN_URL } from '@woocommerce/settings';
-
-/**
- * Component to render an edit product link in the sidebar.
- */
-const EditProductLink = ( { productId } ) => {
-	return (
-		<div className="wc-block-single-product__edit-card">
-			<div className="wc-block-single-product__edit-card-title">
-				<a
-					href={ `${ ADMIN_URL }post.php?post=${ productId }&action=edit` }
-					target="_blank"
-					rel="noopener noreferrer"
-				>
-					{ __(
-						"Edit this product's details",
-						'woo-gutenberg-products-block'
-					) }
-					<Icon srcElement={ external } size={ 16 } />
-				</a>
-			</div>
-			<div className="wc-block-single-product__edit-card-description">
-				{ __(
-					'Edit details such as title, price, description and more.',
-					'woo-gutenberg-products-block'
-				) }
-			</div>
-		</div>
-	);
-};
-
-export default EditProductLink;

plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/index.js

@@ -6,6 +6,7 @@ import { useState } from '@wordpress/element';
 import { Placeholder, Button, PanelBody } from '@wordpress/components';
 import { withProduct } from '@woocommerce/block-hocs';
 import BlockErrorBoundary from '@woocommerce/base-components/block-error-boundary';
+import EditProductLink from '@woocommerce/block-components/edit-product-link';
 import { singleProductBlockPreview } from '@woocommerce/resource-previews';
 import { InspectorControls } from '@wordpress/block-editor';
 
@@ -17,7 +18,6 @@ import ApiError from './api-error';
 import SharedProductControl from './shared-product-control';
 import EditorBlockControls from './editor-block-controls';
 import LayoutEditor from './layout-editor';
-import EditProductLink from './edit-product-link';
 import { BLOCK_TITLE, BLOCK_ICON, BLOCK_DESCRIPTION } from '../constants';
 
 /**
@@ -99,8 +99,8 @@ const Editor = ( {
 									setAttributes={ setAttributes }
 								/>
 							</PanelBody>
-							<EditProductLink productId={ productId } />
 						</InspectorControls>
+						<EditProductLink productId={ productId } />
 						<LayoutEditor
 							clientId={ clientId }
 							product={ product }

plugins/woocommerce-blocks/assets/js/components/edit-product-link/index.js

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Icon, external } from '@woocommerce/icons';
+import { ADMIN_URL } from '@woocommerce/settings';
+import { InspectorControls } from '@wordpress/block-editor';
+
+/**
+ * Component to render an edit product link in the sidebar.
+ */
+const EditProductLink = ( { productId } ) => {
+	return (
+		<InspectorControls>
+			<div className="wc-block-single-product__edit-card">
+				<div className="wc-block-single-product__edit-card-title">
+					<a
+						href={ `${ ADMIN_URL }post.php?post=${ productId }&action=edit` }
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						{ __(
+							"Edit this product's details",
+							'woo-gutenberg-products-block'
+						) }
+						<Icon srcElement={ external } size={ 16 } />
+					</a>
+				</div>
+				<div className="wc-block-single-product__edit-card-description">
+					{ __(
+						'Edit details such as title, price, description and more.',
+						'woo-gutenberg-products-block'
+					) }
+				</div>
+			</div>
+		</InspectorControls>
+	);
+};
+
+export default EditProductLink;

plugins/woocommerce-blocks/assets/js/icons/index.js

@@ -2,6 +2,7 @@ export { default as Icon } from './icon';
 
 export { default as arrowBack } from './library/arrow-back';
 export { default as bank } from './library/bank';
+export { default as barcode } from './library/barcode';
 export { default as bill } from './library/bill';
 export { default as card } from './library/card';
 export { default as cart } from './library/cart';

plugins/woocommerce-blocks/assets/js/icons/library/barcode.js

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { SVG } from 'wordpress-components';
+
+const barcode = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<path
+			fill="#626262"
+			d="M2 6h2v12H2V6m3 0h1v12H5V6m2 0h3v12H7V6m4 0h1v12h-1V6m3 0h2v12h-2V6m3 0h3v12h-3V6m4 0h1v12h-1V6z"
+		/>
+	</SVG>
+);
+
+export default barcode;

plugins/woocommerce-blocks/src/Library.php

@@ -98,6 +98,7 @@ class Library {
 			'product-rating',
 			'product-sale-badge',
 			'product-summary',
+			'product-sku',
 		];
 		foreach ( $atomic_blocks as $atomic_block ) {
 			$instance = new \Automattic\WooCommerce\Blocks\BlockTypes\AtomicBlock( $atomic_block );