rebase from live enviornment

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/breadcrumbs/block.json

@@ -0,0 +1,36 @@
+{
+	"name": "woocommerce/breadcrumbs",
+	"version": "1.0.0",
+	"title": "Store Breadcrumbs",
+	"description": "Enable customers to keep track of their location within the store and navigate back to parent pages.",
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce" ],
+	"textdomain": "woocommerce",
+	"attributes": {
+		"contentJustification": {
+			"type": "string"
+		},
+		"fontSize": {
+			"type": "string",
+			"default": "small"
+		},
+		"align": {
+			"type": "string",
+			"default": "wide"
+		}
+	},
+	"supports": {
+		"align": [ "wide", "full" ],
+		"color": {
+			"background": false,
+			"link": true
+		},
+		"html": false,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
+		}
+	},
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/breadcrumbs/edit.tsx

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import { Disabled } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export interface Attributes {
+	className?: string;
+}
+
+const Edit = () => {
+	const blockProps = useBlockProps( {
+		className: 'woocommerce wc-block-breadcrumbs',
+	} );
+
+	return (
+		<div { ...blockProps }>
+			<Disabled>
+				<a href="/">
+					{ __( 'Breadcrumbs', 'woo-gutenberg-products-block' ) }
+				</a>
+				{ __( ' / Navigation / Path', 'woo-gutenberg-products-block' ) }
+			</Disabled>
+		</div>
+	);
+};
+
+export default Edit;

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/breadcrumbs/icon.tsx

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { SVG, Rect } from '@wordpress/primitives';
+
+export const queryPaginationIcon = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Rect
+			x="4"
+			y="10.5"
+			width="6"
+			height="3"
+			rx="1.5"
+			fill="currentColor"
+		/>
+		<Rect
+			x="12"
+			y="10.5"
+			width="3"
+			height="3"
+			rx="1.5"
+			fill="currentColor"
+		/>
+		<Rect
+			x="17"
+			y="10.5"
+			width="3"
+			height="3"
+			rx="1.5"
+			fill="currentColor"
+		/>
+	</SVG>
+);

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/breadcrumbs/index.tsx

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+import { Icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+import { queryPaginationIcon } from './icon';
+import './style.scss';
+
+const featurePluginSupport = {
+	...metadata.supports,
+	...( isFeaturePluginBuild() && {
+		typography: {
+			...metadata.supports.typography,
+			__experimentalFontFamily: true,
+			__experimentalFontStyle: true,
+			__experimentalFontWeight: true,
+			__experimentalTextTransform: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+	} ),
+};
+
+registerBlockType( metadata, {
+	icon: {
+		src: (
+			<Icon
+				icon={ queryPaginationIcon }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	attributes: {
+		...metadata.attributes,
+	},
+	supports: {
+		...featurePluginSupport,
+	},
+	edit,
+	save() {
+		return null;
+	},
+} );

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/breadcrumbs/style.scss

@@ -0,0 +1,9 @@
+.woocommerce.wc-block-breadcrumbs {
+	font-size: inherit;
+}
+.woocommerce.woocommerce-shop .wc-block-breadcrumbs {
+	.woocommerce-breadcrumb {
+		margin: auto;
+		display: block;
+	}
+}