first commit

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/css/abstracts/_breakpoints.scss

@@ -0,0 +1,62 @@
+/* stylelint-disable block-closing-brace-newline-after */
+
+// Breakpoints
+// Forked from https://github.com/Automattic/wp-calypso/blob/46ae24d8800fb85da6acf057a640e60dac988a38/assets/stylesheets/shared/mixins/_breakpoints.scss
+
+// Think very carefully before adding a new breakpoint.
+// The list below is based on wp-admin's main breakpoints
+// See https://github.com/WordPress/gutenberg/tree/master/packages/viewport#usage
+$breakpoints: 480px, 600px, 782px, 960px, 1280px, 1440px;
+
+// @todo refactor breakpoints so they use the mixins from Gutenberg
+// https://github.com/WordPress/gutenberg/blob/master/packages/base-styles/_mixins.scss
+@mixin breakpoint($sizes...) {
+	@each $size in $sizes {
+		@if type-of($size) == string {
+			$approved-value: 0;
+			@each $breakpoint in $breakpoints {
+				$and-larger: ">" + $breakpoint;
+				$and-smaller: "<" + $breakpoint;
+
+				@if $size == $and-smaller {
+					$approved-value: 1;
+					@media (max-width: $breakpoint) {
+						@content;
+					}
+				} @else {
+					@if $size == $and-larger {
+						$approved-value: 2;
+						@media (min-width: $breakpoint + 1) {
+							@content;
+						}
+					} @else {
+						@each $breakpoint-end in $breakpoints {
+							$range: $breakpoint + "-" + $breakpoint-end;
+							@if $size == $range {
+								$approved-value: 3;
+								@media (min-width: $breakpoint + 1) and (max-width: $breakpoint-end) {
+									@content;
+								}
+							}
+						}
+					}
+				}
+			}
+			@if $approved-value == 0 {
+				$sizes: "";
+				@each $breakpoint in $breakpoints {
+					$sizes: $sizes + " " + $breakpoint;
+				}
+				@warn "ERROR in breakpoint(#{ $size }) : You can only use these sizes[ #{$sizes} ] using the following syntax [ <#{ nth($breakpoints, 1) } >#{ nth($breakpoints, 1) } #{ nth($breakpoints, 1) }-#{ nth($breakpoints, 2) } ]";
+			}
+		} @else {
+			$sizes: "";
+			@each $breakpoint in $breakpoints {
+				$sizes: $sizes + " " + $breakpoint;
+			}
+			@error "ERROR in breakpoint(#{ $size }) : Please wrap the breakpoint $size in parenthesis. You can use these sizes[ #{$sizes} ] using the following syntax [ <#{ nth($breakpoints, 1) } >#{ nth($breakpoints, 1) } #{ nth($breakpoints, 1) }-#{ nth($breakpoints, 2) } ]";
+		}
+	}
+}
+
+/* stylelint-enable */

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/css/abstracts/_colors.scss

@@ -0,0 +1,22 @@
+@import "node_modules/@wordpress/base-styles/colors";
+@import "node_modules/@automattic/color-studio/dist/color-variables";
+
+// Bright colors
+$no-stock-color: $alert-red;
+$low-stock-color: $alert-yellow;
+$in-stock-color: $alert-green;
+$discount-color: $alert-green;
+
+$placeholder-color: var(--global--color-primary, $gray-200);
+$input-border-gray: #50575e;
+$input-border-dark: rgba(255, 255, 255, 0.4);
+$input-disabled-dark: rgba(255, 255, 255, 0.3);
+$controls-border-dark: rgba(255, 255, 255, 0.6);
+$input-text-active: #2b2d2f;
+$input-placeholder-dark: rgba(255, 255, 255, 0.6);
+$input-text-dark: #fff;
+$input-background-dark: rgba(0, 0, 0, 0.1);
+$select-dropdown-dark: #1e1e1e;
+$select-dropdown-light: #fff;
+$select-item-dark: rgba(0, 0, 0, 0.4);
+$image-placeholder-border-color: #f2f2f2;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/css/abstracts/_mixins.scss

@@ -0,0 +1,288 @@
+$fontSizes: (
+	"smaller": 0.75,
+	"small": 0.875,
+	"regular": 1,
+	"large": 1.25,
+	"larger": 2,
+);
+
+// Maps a named font-size to its predefined size. Units default to em, but can
+// be changed using the multiplier parameter.
+@mixin font-size($sizeName, $multiplier: 1em) {
+	font-size: map.get($fontSizes, $sizeName) * $multiplier;
+}
+
+@keyframes spinner__animation {
+	0% {
+		animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes loading__animation {
+	100% {
+		transform: translateX(100%);
+	}
+}
+
+// Adds animation to placeholder section
+@mixin placeholder($include-border-radius: true) {
+	outline: 0 !important;
+	border: 0 !important;
+	background-color: #ebebeb !important;
+	color: transparent !important;
+	width: 100%;
+	@if $include-border-radius == true {
+		border-radius: 0.25rem;
+	}
+	display: block;
+	line-height: 1;
+	position: relative !important;
+	overflow: hidden !important;
+	max-width: 100% !important;
+	pointer-events: none;
+	box-shadow: none;
+	z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */
+
+	// Forces direct descendants to keep layout but lose visibility.
+	> * {
+		visibility: hidden;
+	}
+
+	&::after {
+		content: " ";
+		display: block;
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		height: 100%;
+		background-repeat: no-repeat;
+		background-image: linear-gradient(90deg, #ebebeb, #f5f5f5, #ebebeb);
+		transform: translateX(-100%);
+		animation: loading__animation 1.5s ease-in-out infinite;
+	}
+
+	@media screen and (prefers-reduced-motion: reduce) {
+		animation: none;
+	}
+}
+
+@mixin force-content() {
+	&::before {
+		content: "\00a0";
+	}
+}
+
+// Hide an element from sighted users, but available to screen reader users.
+@mixin visually-hidden() {
+	border: 0;
+	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
+	height: 1px;
+	width: 1px;
+	margin: -1px;
+	overflow: hidden;
+	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
+	overflow-wrap: normal !important;
+	word-wrap: normal !important;
+	padding: 0;
+	position: absolute !important;
+	width: 1px;
+}
+
+@mixin visually-hidden-focus-reveal() {
+	background-color: #fff;
+	border-radius: 3px;
+	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+	clip: auto !important;
+	clip-path: none;
+	color: $input-text-active;
+	display: block;
+	font-size: 0.875rem;
+	font-weight: 700;
+	height: auto;
+	left: 5px;
+	line-height: normal;
+	padding: 15px 23px 14px;
+	text-decoration: none;
+	top: 5px;
+	width: auto;
+	z-index: 100000;
+}
+
+@mixin reset-box() {
+	border: 0;
+	border-radius: 0;
+	margin: 0;
+	padding: 0;
+	vertical-align: baseline;
+}
+
+@mixin reset-typography() {
+	color: inherit;
+	font-family: inherit;
+	font-size: inherit;
+	font-style: inherit;
+	font-weight: inherit;
+	letter-spacing: inherit;
+	line-height: inherit;
+	text-decoration: inherit;
+	text-transform: inherit;
+}
+
+// Reset <h1>, <h2>, etc. styles as if they were text. Useful for elements that must be headings for a11y but don't need those styles.
+@mixin text-heading() {
+	@include reset-box();
+	@include reset-typography();
+	box-shadow: none;
+	display: inline;
+
+	background: transparent;
+}
+
+// Reset <button> style as if it was text. Useful for elements that must be `<button>` for a11y but don't need those styles.
+@mixin text-button() {
+	@include reset-box();
+	@include reset-typography();
+	background: transparent;
+	box-shadow: none;
+	display: inline;
+	text-shadow: none;
+
+	&:hover,
+	&:focus,
+	&:active {
+		background: transparent;
+	}
+}
+
+// Reset <button> style so we can use link style for action buttons.
+@mixin link-button() {
+	@include text-button();
+	text-decoration: underline;
+}
+
+// Makes sure long words are broken if they overflow the container.
+@mixin wrap-break-word() {
+	// This is the current standard, works in most browsers.
+	overflow-wrap: anywhere;
+	// Safari supports word-break.
+	word-break: break-word;
+	// IE11 doesn't support overflow-wrap neither word-break: break-word, so we fallback to -ms-work-break: break-all.
+	-ms-word-break: break-all;
+}
+
+// Add support for content alignment classes
+@mixin with-alignment {
+	// Apply max-width to floated items that have no intrinsic width
+	&.alignleft,
+	&.alignright {
+		max-width: $content-width * 0.5;
+		width: 100%;
+	}
+
+	// Using flexbox without an assigned height property breaks vertical center alignment in IE11.
+	// Appending an empty ::after element tricks IE11 into giving the cover image an implicit height, which sidesteps this issue.
+	&::after {
+		display: block;
+		content: "";
+		font-size: 0;
+		min-height: inherit;
+
+		// IE doesn't support flex so omit that.
+		@supports (position: sticky) {
+			content: none;
+		}
+	}
+
+	// Aligned cover blocks should not use our global alignment rules
+	&.aligncenter,
+	&.alignleft,
+	&.alignright {
+		display: flex;
+	}
+}
+
+// Shows an semi-transparent overlay
+@mixin with-background-dim($opacity: 0.5) {
+	&.has-background-dim {
+		.background-dim__overlay::before {
+			content: "";
+			position: absolute;
+			top: 0;
+			left: 0;
+			bottom: 0;
+			right: 0;
+			background: inherit;
+			border-radius: inherit;
+			opacity: $opacity;
+			z-index: 1;
+		}
+	}
+
+	@for $i from 1 through 10 {
+		&.has-background-dim-#{ $i * 10 } .background-dim__overlay::before {
+			opacity: $i * 0.1;
+		}
+	}
+}
+
+// Shows a border with the current color and a custom opacity. That can't be achieved
+// with normal border because `currentColor` doesn't allow tweaking the opacity, and
+// setting the opacity of the entire element would change the children's opacity too.
+@mixin with-translucent-border($border-width: 1px, $opacity: 0.3) {
+	position: relative;
+
+	&::after {
+		border-style: solid;
+		border-width: $border-width;
+		bottom: 0;
+		content: "";
+		display: block;
+		left: 0;
+		opacity: $opacity;
+		pointer-events: none;
+		position: absolute;
+		right: 0;
+		top: 0;
+	}
+}
+
+// Wraps the content with a media query specially targeting IE11.
+@mixin ie11() {
+	@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+		@content;
+	}
+}
+
+// Positions an element absolutely and stretches it over the container
+@mixin absolute-stretch() {
+	margin: 0;
+	padding: 0;
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+}
+
+// Converts a px unit to em.
+@function em($size, $base: 16px) {
+	@return math.div($size, $base) * 1em;
+}
+
+// Encodes hex colors so they can be used in URL content.
+@function encode-color($color) {
+	@if type-of($color) != "color" or string.index(#{$color}, "#") != 1 {
+		@return $color;
+	}
+
+	$hex: string.slice(color.ie-hex-str($color), 4);
+	@return "%23" + unquote("#{$hex}");
+}

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/css/abstracts/_variables.scss

@@ -0,0 +1,12 @@
+@import "node_modules/@wordpress/base-styles/variables";
+
+$gap-largest: $grid-unit-50;
+$gap-larger: 4.5 * $grid-unit;
+$gap-large: $grid-unit-30;
+$gap: $grid-unit-20;
+$gap-small: $grid-unit-15;
+$gap-smaller: $grid-unit-10;
+$gap-smallest: $grid-unit-05;
+
+// Cart block
+$cart-image-width: 5rem;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/css/editor.scss

@@ -0,0 +1,87 @@
+// Hack to hide preview overflow.
+.editor-block-preview__content {
+	overflow: hidden;
+}
+
+// Align the block icons in edit mode
+.components-placeholder__label .gridicon,
+.components-placeholder__label .material-icon {
+	margin-right: 1ch;
+	fill: currentColor;
+}
+
+// Remove the list styling, which is added back by core GB styles.
+.editor-styles-wrapper {
+	.wc-block-grid {
+		.wc-block-grid__products {
+			list-style: none;
+			margin: 0 (-$gap * 0.5) $gap;
+			padding: 0;
+
+			.wc-block-grid__product {
+				margin: 0 0 $gap-large 0;
+			}
+		}
+
+		&.components-placeholder {
+			padding: 2em 1em;
+		}
+
+		&.is-loading,
+		&.is-not-found {
+			display: block;
+		}
+	}
+}
+
+// Style inline notices in the inspector.
+.components-base-control {
+	+ .wc-block-base-control-notice {
+		margin: -$gap 0 $gap;
+	}
+
+	+ .wc-block-base-control-notice:last-child {
+		margin: -$gap 0 $gap-small;
+	}
+}
+
+svg.wc-block-editor-components-block-icon {
+	color: $studio-woocommerce-purple-50;
+}
+
+svg.wc-block-editor-components-block-icon--sparkles path {
+	fill: currentColor;
+}
+
+.block-editor-list-view-leaf.is-selected {
+	.block-editor-list-view-block-contents {
+		svg.wc-block-editor-components-block-icon {
+			color: currentColor;
+		}
+	}
+}
+
+// Selectors with extra specificity to override some editor styles.
+.woocommerce-search-list__list.woocommerce-search-list__list {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+
+.woocommerce-search-list__selected.woocommerce-search-list__selected > ul {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.theme-twentytwenty {
+	.wp-block {
+		.wc-block-grid__product-title,
+		.wc-block-active-filters__title,
+		.wc-block-attribute-filter__title,
+		.wc-block-price-filter__title,
+		.wc-block-stock-filter__title {
+			@include font-size(regular);
+		}
+	}
+}

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/css/style.scss

@@ -0,0 +1,348 @@
+.wc-block-link-button {
+	@include link-button();
+}
+
+.wc-block-suspense-placeholder {
+	@include placeholder();
+	@include force-content();
+}
+
+// These styles are for the server side rendered product grid blocks.
+.wc-block-grid__products .wc-block-grid__product-image {
+	text-decoration: none;
+	display: block;
+	position: relative;
+
+	a {
+		text-decoration: none;
+		border: 0;
+		outline: 0;
+		box-shadow: none;
+	}
+
+	img {
+		height: auto;
+		width: auto;
+		max-width: 100%;
+
+		&[hidden] {
+			display: none;
+		}
+
+		&[alt=""] {
+			border: 1px solid $image-placeholder-border-color;
+		}
+	}
+}
+.edit-post-visual-editor .editor-block-list__block .wc-block-grid__product-title,
+.editor-styles-wrapper .wc-block-grid__product-title,
+.wc-block-grid__product-title {
+	font-family: inherit;
+	line-height: 1.2;
+	font-weight: 700;
+	padding: 0;
+	color: inherit;
+	font-size: inherit;
+	display: block;
+}
+.wc-block-grid__product-price {
+	display: block;
+
+	.wc-block-grid__product-price__regular {
+		margin-right: 0.5em;
+	}
+}
+.wc-block-grid__product-add-to-cart.wp-block-button {
+	word-break: break-word;
+	white-space: normal;
+	.wp-block-button__link {
+		word-break: break-word;
+		white-space: normal;
+		margin: 0 auto !important;
+		display: inline-flex;
+		justify-content: center;
+		text-align: center;
+		// Set button font size and padding so it inherits from parent.
+		padding: 0.5em 1em;
+		font-size: 1em;
+
+		&.loading {
+			opacity: 0.25;
+		}
+
+		&.added::after {
+			font-family: WooCommerce; /* stylelint-disable-line */
+			content: "\e017";
+			margin-left: 0.5em;
+			display: inline-block;
+			width: auto;
+			height: auto;
+		}
+
+		&.loading::after {
+			font-family: WooCommerce; /* stylelint-disable-line */
+			content: "\e031";
+			animation: spin 2s linear infinite;
+			margin-left: 0.5em;
+			display: inline-block;
+			width: auto;
+			height: auto;
+		}
+	}
+}
+// Remove button sugar if unlikely to fit.
+.has-5-columns:not(.alignfull),
+.has-6-columns,
+.has-7-columns,
+.has-8-columns,
+.has-9-columns {
+	.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link::after {
+		content: "";
+		margin: 0;
+	}
+}
+
+.wc-block-grid__product-rating {
+	display: block;
+	color: #000;
+
+	.wc-block-grid__product-rating__stars,
+	.star-rating {
+		overflow: hidden;
+		position: relative;
+		width: 5.3em;
+		height: 1.618em;
+		line-height: 1.618;
+		font-size: 1em;
+		/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+		font-family: star;
+		font-weight: 400;
+		margin: 0 auto;
+		text-align: left;
+
+		&::before {
+			content: "\53\53\53\53\53";
+			top: 0;
+			left: 0;
+			right: 0;
+			position: absolute;
+			opacity: 0.5;
+			color: #aaa;
+			white-space: nowrap;
+		}
+		span {
+			overflow: hidden;
+			top: 0;
+			left: 0;
+			right: 0;
+			position: absolute;
+			padding-top: 1.5em;
+		}
+		span::before {
+			content: "\53\53\53\53\53";
+			color: inherit;
+			top: 0;
+			left: 0;
+			right: 0;
+			position: absolute;
+			white-space: nowrap;
+		}
+	}
+}
+.wc-block-grid__product-onsale {
+	@include font-size(small);
+	padding: em($gap-smallest) em($gap-small);
+	display: inline-block;
+	width: auto;
+	border: 1px solid #43454b;
+	border-radius: 3px;
+	color: #43454b;
+	background: #fff;
+	text-align: center;
+	text-transform: uppercase;
+	font-weight: 600;
+	z-index: 9;
+	position: relative;
+}
+
+// Element spacing.
+.wc-block-grid__product {
+	// Not operator necessary for avoid this problem: https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/5925/files#r814043454
+	.wc-block-grid__product-image:not(.wc-block-components-product-image),
+	.wc-block-grid__product-title {
+		margin: 0 0 $gap-small;
+	}
+	// If centered when toggling alignment on, use auto margins to prevent flexbox stretching it.
+	.wc-block-grid__product-price,
+	.wc-block-grid__product-rating,
+	.wc-block-grid__product-add-to-cart,
+	.wc-block-grid__product-onsale {
+		margin: 0 auto $gap-small;
+	}
+}
+
+.theme-twentysixteen {
+	.wc-block-grid {
+		// Prevent white theme styles.
+		.price ins {
+			color: #77a464;
+		}
+	}
+}
+
+.theme-twentynineteen {
+	.wc-block-grid__product {
+		font-size: 0.88889em;
+	}
+	// Change the title font to match headings.
+	.wc-block-grid__product-title,
+	.wc-block-grid__product-onsale,
+	.wc-block-components-product-title,
+	.wc-block-components-product-sale-badge {
+		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	}
+	.wc-block-grid__product-title::before {
+		display: none;
+	}
+	.wc-block-grid__product-onsale,
+	.wc-block-components-product-sale-badge {
+		line-height: 1;
+	}
+	.editor-styles-wrapper .wp-block-button .wp-block-button__link:not(.has-text-color) {
+		color: #fff;
+	}
+}
+
+.theme-twentytwenty {
+	$twentytwenty-headings: -apple-system, blinkmacsystemfont, "Helvetica Neue", helvetica, sans-serif;
+	$twentytwenty-highlights-color: #cd2653;
+
+	.wc-block-grid__product-link {
+		color: #000;
+	}
+
+	.wc-block-grid__product-title,
+	.wc-block-components-product-title {
+		font-family: $twentytwenty-headings;
+		color: $twentytwenty-highlights-color;
+		@include font-size(regular);
+	}
+
+	.wp-block-columns .wc-block-components-product-title {
+		margin-top: 0;
+	}
+
+	.wc-block-grid__product-price,
+	.wc-block-components-product-price {
+		&__value,
+		.woocommerce-Price-amount {
+			font-family: $twentytwenty-headings;
+			font-size: 0.9em;
+		}
+
+		del {
+			opacity: 0.5;
+		}
+
+		ins {
+			text-decoration: none;
+		}
+	}
+
+	.wc-block-grid__product-rating,
+	.star-rating {
+		font-size: 0.7em;
+
+		.wc-block-grid__product-rating__stars,
+		.wc-block-components-product-rating__stars {
+			line-height: 1;
+		}
+	}
+
+	.wc-block-grid__product-add-to-cart > .wp-block-button__link,
+	.wc-block-components-product-button > .wp-block-button__link {
+		font-family: $twentytwenty-headings;
+	}
+
+	.wc-block-grid__products .wc-block-grid__product-onsale,
+	.wc-block-components-product-sale-badge {
+		background: $twentytwenty-highlights-color;
+		color: #fff;
+		font-family: $twentytwenty-headings;
+		font-weight: 700;
+		letter-spacing: -0.02em;
+		line-height: 1.2;
+		text-transform: uppercase;
+	}
+
+	// Override style from WC Core that set its position to absolute.
+	// These rulesets can be removed once https://github.com/woocommerce/woocommerce/pull/26516 is released.
+	.wc-block-grid__products .wc-block-components-product-sale-badge {
+		position: static;
+	}
+	.wc-block-grid__products .wc-block-grid__product-image .wc-block-components-product-sale-badge {
+		position: absolute;
+	}
+
+	// These styles are not applied to the All Products atomic block, so it can be positioned normally.
+	.wc-block-grid__products .wc-block-grid__product-onsale:not(.wc-block-components-product-sale-badge) {
+		position: absolute;
+		right: 4px;
+		top: 4px;
+		z-index: 1;
+	}
+
+	.wc-block-active-filters__title,
+	.wc-block-attribute-filter__title,
+	.wc-block-price-filter__title,
+	.wc-block-stock-filter__title {
+		@include font-size(regular);
+	}
+
+	.wc-block-active-filters .wc-block-active-filters__clear-all {
+		@include font-size(smaller);
+	}
+
+	.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link {
+		@include font-size(smaller);
+		padding: em($gap-smaller);
+	}
+
+	@media only screen and (min-width: 768px) {
+		.wc-block-grid__products .wc-block-grid__product-onsale {
+			@include font-size(small);
+			padding: em($gap-smaller);
+		}
+	}
+
+	@media only screen and (min-width: 1168px) {
+		.wc-block-grid__products .wc-block-grid__product-onsale {
+			@include font-size(small);
+			padding: em($gap-smaller);
+		}
+	}
+}
+
+.theme-twentytwentytwo {
+	.wc-block-grid__product-add-to-cart {
+		.added_to_cart {
+			margin-top: $gap-small;
+			display: block;
+		}
+	}
+
+	.wc-block-components-product-price,
+	.wc-block-grid__product-price {
+		ins {
+			text-decoration: none;
+		}
+	}
+}
+
+// Default screen-reader styles. Included as a fallback for themes that don't have support.
+.screen-reader-text {
+	@include visually-hidden();
+}
+.screen-reader-text:focus {
+	@include visually-hidden-focus-reveal();
+}

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/component-init.js

@@ -0,0 +1,118 @@
+/**
+ * External dependencies
+ */
+import { registerBlockComponent } from '@woocommerce/blocks-registry';
+import { lazy } from '@wordpress/element';
+import { WC_BLOCKS_BUILD_URL } from '@woocommerce/block-settings';
+
+// Modify webpack publicPath at runtime based on location of WordPress Plugin.
+// eslint-disable-next-line no-undef,camelcase
+__webpack_public_path__ = WC_BLOCKS_BUILD_URL;
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-price',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "product-price" */ './product-elements/price/block'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-image',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "product-image" */ './product-elements/image/frontend'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-title',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "product-title" */ './product-elements/title/frontend'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-rating',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "product-rating" */ './product-elements/rating/block'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-button',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "product-button" */ './product-elements/button/block'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-summary',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "product-summary" */ './product-elements/summary/block'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-sale-badge',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "product-sale-badge" */ './product-elements/sale-badge/block'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-sku',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "product-sku" */ './product-elements/sku/block'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-category-list',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "product-category-list" */ './product-elements/category-list/block'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-tag-list',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "product-tag-list" */ './product-elements/tag-list/block'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-stock-indicator',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "product-stock-indicator" */ './product-elements/stock-indicator/block'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-add-to-cart',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "product-add-to-cart" */ './product-elements/add-to-cart/frontend'
+		)
+	),
+} );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/index.js

@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import './product-elements/title';
+import './product-elements/price';
+import './product-elements/image';
+import './product-elements/rating';
+import './product-elements/button';
+import './product-elements/summary';
+import './product-elements/sale-badge';
+import './product-elements/sku';
+import './product-elements/category-list';
+import './product-elements/tag-list';
+import './product-elements/stock-indicator';
+import './product-elements/add-to-cart';

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/attributes.js

@@ -0,0 +1,12 @@
+export const blockAttributes = {
+	showFormElements: {
+		type: 'boolean',
+		default: false,
+	},
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+export default blockAttributes;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/block.js

@@ -0,0 +1,86 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import {
+	AddToCartFormContextProvider,
+	useAddToCartFormContext,
+} from '@woocommerce/base-context';
+import { useProductDataContext } from '@woocommerce/shared-context';
+import { isEmpty } from 'lodash';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { AddToCartButton } from './shared';
+import {
+	SimpleProductForm,
+	VariableProductForm,
+	ExternalProductForm,
+	GroupedProductForm,
+} from './product-types';
+
+/**
+ * Product Add to Form Block Component.
+ *
+ * @param {Object}  props                    Incoming props.
+ * @param {string}  [props.className]        CSS Class name for the component.
+ * @param {boolean} [props.showFormElements] Should form elements be shown?
+ * @return {*} The component.
+ */
+const Block = ( { className, showFormElements } ) => {
+	const { product } = useProductDataContext();
+	const componentClass = classnames(
+		className,
+		'wc-block-components-product-add-to-cart',
+		{
+			'wc-block-components-product-add-to-cart--placeholder':
+				isEmpty( product ),
+		}
+	);
+
+	return (
+		<AddToCartFormContextProvider
+			product={ product }
+			showFormElements={ showFormElements }
+		>
+			<div className={ componentClass }>
+				<AddToCartForm />
+			</div>
+		</AddToCartFormContextProvider>
+	);
+};
+
+/**
+ * Renders the add to cart form using useAddToCartFormContext.
+ */
+const AddToCartForm = () => {
+	const { showFormElements, productType } = useAddToCartFormContext();
+
+	if ( showFormElements ) {
+		if ( productType === 'variable' ) {
+			return <VariableProductForm />;
+		}
+		if ( productType === 'grouped' ) {
+			return <GroupedProductForm />;
+		}
+		if ( productType === 'external' ) {
+			return <ExternalProductForm />;
+		}
+		if ( productType === 'simple' || productType === 'variation' ) {
+			return <SimpleProductForm />;
+		}
+		return null;
+	}
+
+	return <AddToCartButton />;
+};
+
+Block.propTypes = {
+	className: PropTypes.string,
+};
+
+export default withProductDataContext( Block );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/constants.js

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { cart } from '@woocommerce/icons';
+import { Icon } from '@wordpress/icons';
+
+export const BLOCK_TITLE = __( 'Add to Cart', 'woocommerce' );
+export const BLOCK_ICON = (
+	<Icon icon={ cart } className="wc-block-editor-components-block-icon" />
+);
+export const BLOCK_DESCRIPTION = __(
+	'Displays an add to cart button. Optionally displays other add to cart form elements.',
+	'woocommerce'
+);

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/edit.js

@@ -0,0 +1,86 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import EditProductLink from '@woocommerce/editor-components/edit-product-link';
+import { useProductDataContext } from '@woocommerce/shared-context';
+import classnames from 'classnames';
+import {
+	Disabled,
+	PanelBody,
+	ToggleControl,
+	Notice,
+} from '@wordpress/components';
+import { InspectorControls } from '@wordpress/block-editor';
+import { productSupportsAddToCartForm } from '@woocommerce/base-utils';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import Block from './block';
+import withProductSelector from '../shared/with-product-selector';
+import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+
+const Edit = ( { attributes, setAttributes } ) => {
+	const { product } = useProductDataContext();
+	const { className, showFormElements } = attributes;
+
+	return (
+		<div
+			className={ classnames(
+				className,
+				'wc-block-components-product-add-to-cart'
+			) }
+		>
+			<EditProductLink productId={ product.id } />
+			<InspectorControls>
+				<PanelBody
+					title={ __( 'Layout', 'woocommerce' ) }
+				>
+					{ productSupportsAddToCartForm( product ) ? (
+						<ToggleControl
+							label={ __(
+								'Display form elements',
+								'woocommerce'
+							) }
+							help={ __(
+								'Depending on product type, allow customers to select a quantity, variations etc.',
+								'woocommerce'
+							) }
+							checked={ showFormElements }
+							onChange={ () =>
+								setAttributes( {
+									showFormElements: ! showFormElements,
+								} )
+							}
+						/>
+					) : (
+						<Notice
+							className="wc-block-components-product-add-to-cart-notice"
+							isDismissible={ false }
+							status="info"
+						>
+							{ __(
+								'This product does not support the block based add to cart form. A link to the product page will be shown instead.',
+								'woocommerce'
+							) }
+						</Notice>
+					) }
+				</PanelBody>
+			</InspectorControls>
+			<Disabled>
+				<Block { ...attributes } />
+			</Disabled>
+		</div>
+	);
+};
+
+export default withProductSelector( {
+	icon: BLOCK_ICON,
+	label: BLOCK_TITLE,
+	description: __(
+		'Choose a product to display its add to cart form.',
+		'woocommerce'
+	),
+} )( Edit );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/frontend.js

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import { withFilteredAttributes } from '@woocommerce/shared-hocs';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import attributes from './attributes';
+
+export default withFilteredAttributes( attributes )( Block );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/index.js

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import { registerExperimentalBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+import edit from './edit';
+import attributes from './attributes';
+import {
+	BLOCK_TITLE as title,
+	BLOCK_ICON as icon,
+	BLOCK_DESCRIPTION as description,
+} from './constants';
+
+const blockConfig = {
+	title,
+	description,
+	icon: { src: icon },
+	edit,
+	attributes,
+};
+
+registerExperimentalBlockType( 'woocommerce/product-add-to-cart', {
+	...sharedConfig,
+	...blockConfig,
+} );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/external.js

@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import AddToCartButton from '../shared/add-to-cart-button';
+
+/**
+ * External Product Add To Cart Form
+ */
+const External = () => {
+	return <AddToCartButton />;
+};
+
+export default External;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/grouped/group-list/index.js

@@ -0,0 +1,14 @@
+/**
+ * External dependencies
+ */
+import { Placeholder } from 'wordpress-components';
+
+const GroupedProducts = () => {
+	return (
+		<Placeholder className="wc-block-components-product-add-to-cart-group-list">
+			This is a placeholder for the grouped products form element.
+		</Placeholder>
+	);
+};
+
+export default GroupedProducts;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/grouped/index.js

@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import GroupList from './group-list';
+
+/**
+ * Grouped Product Add To Cart Form
+ */
+const Grouped = () => {
+	return <GroupList />;
+};
+
+export default Grouped;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/index.js

@@ -0,0 +1,4 @@
+export { default as SimpleProductForm } from './simple';
+export { default as VariableProductForm } from './variable/index';
+export { default as ExternalProductForm } from './external';
+export { default as GroupedProductForm } from './grouped/index';

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/simple.js

@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useAddToCartFormContext } from '@woocommerce/base-context';
+
+/**
+ * Internal dependencies
+ */
+import { AddToCartButton, QuantityInput, ProductUnavailable } from '../shared';
+
+/**
+ * Simple Product Add To Cart Form
+ */
+const Simple = () => {
+	const {
+		product,
+		quantity,
+		minQuantity,
+		maxQuantity,
+		multipleOf,
+		dispatchActions,
+		isDisabled,
+	} = useAddToCartFormContext();
+
+	if ( product.id && ! product.is_purchasable ) {
+		return <ProductUnavailable />;
+	}
+
+	if ( product.id && ! product.is_in_stock ) {
+		return (
+			<ProductUnavailable
+				reason={ __(
+					'This product is currently out of stock and cannot be purchased.',
+					'woocommerce'
+				) }
+			/>
+		);
+	}
+
+	return (
+		<>
+			<QuantityInput
+				value={ quantity }
+				min={ minQuantity }
+				max={ maxQuantity }
+				step={ multipleOf }
+				disabled={ isDisabled }
+				onChange={ dispatchActions.setQuantity }
+			/>
+			<AddToCartButton />
+		</>
+	);
+};
+
+export default Simple;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/index.js

@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useAddToCartFormContext } from '@woocommerce/base-context';
+
+/**
+ * Internal dependencies
+ */
+import {
+	AddToCartButton,
+	QuantityInput,
+	ProductUnavailable,
+} from '../../shared';
+import VariationAttributes from './variation-attributes';
+
+/**
+ * Variable Product Add To Cart Form
+ */
+const Variable = () => {
+	const {
+		product,
+		quantity,
+		minQuantity,
+		maxQuantity,
+		multipleOf,
+		dispatchActions,
+		isDisabled,
+	} = useAddToCartFormContext();
+
+	if ( product.id && ! product.is_purchasable ) {
+		return <ProductUnavailable />;
+	}
+
+	if ( product.id && ! product.is_in_stock ) {
+		return (
+			<ProductUnavailable
+				reason={ __(
+					'This product is currently out of stock and cannot be purchased.',
+					'woocommerce'
+				) }
+			/>
+		);
+	}
+
+	return (
+		<>
+			<VariationAttributes
+				product={ product }
+				dispatchers={ dispatchActions }
+			/>
+			<QuantityInput
+				value={ quantity }
+				min={ minQuantity }
+				max={ maxQuantity }
+				step={ multipleOf }
+				disabled={ isDisabled }
+				onChange={ dispatchActions.setQuantity }
+			/>
+			<AddToCartButton />
+		</>
+	);
+};
+
+export default Variable;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/attribute-picker.js

@@ -0,0 +1,116 @@
+/**
+ * External dependencies
+ */
+import { useState, useEffect, useMemo } from '@wordpress/element';
+import { useShallowEqual } from '@woocommerce/base-hooks';
+
+/**
+ * Internal dependencies
+ */
+import AttributeSelectControl from './attribute-select-control';
+import {
+	getVariationMatchingSelectedAttributes,
+	getActiveSelectControlOptions,
+	getDefaultAttributes,
+} from './utils';
+
+/**
+ * AttributePicker component.
+ *
+ * @param {*} props Component props.
+ */
+const AttributePicker = ( {
+	attributes,
+	variationAttributes,
+	setRequestParams,
+} ) => {
+	const currentAttributes = useShallowEqual( attributes );
+	const currentVariationAttributes = useShallowEqual( variationAttributes );
+	const [ variationId, setVariationId ] = useState( 0 );
+	const [ selectedAttributes, setSelectedAttributes ] = useState( {} );
+	const [ hasSetDefaults, setHasSetDefaults ] = useState( false );
+
+	// Get options for each attribute picker.
+	const filteredAttributeOptions = useMemo( () => {
+		return getActiveSelectControlOptions(
+			currentAttributes,
+			currentVariationAttributes,
+			selectedAttributes
+		);
+	}, [ selectedAttributes, currentAttributes, currentVariationAttributes ] );
+
+	// Set default attributes as selected.
+	useEffect( () => {
+		if ( ! hasSetDefaults ) {
+			const defaultAttributes = getDefaultAttributes( attributes );
+			if ( defaultAttributes ) {
+				setSelectedAttributes( {
+					...defaultAttributes,
+				} );
+			}
+			setHasSetDefaults( true );
+		}
+	}, [ selectedAttributes, attributes, hasSetDefaults ] );
+
+	// Select variations when selections are change.
+	useEffect( () => {
+		const hasSelectedAllAttributes =
+			Object.values( selectedAttributes ).filter(
+				( selected ) => selected !== ''
+			).length === Object.keys( currentAttributes ).length;
+
+		if ( hasSelectedAllAttributes ) {
+			setVariationId(
+				getVariationMatchingSelectedAttributes(
+					currentAttributes,
+					currentVariationAttributes,
+					selectedAttributes
+				)
+			);
+		} else if ( variationId > 0 ) {
+			// Unset variation when form is incomplete.
+			setVariationId( 0 );
+		}
+	}, [
+		selectedAttributes,
+		variationId,
+		currentAttributes,
+		currentVariationAttributes,
+	] );
+
+	// Set requests params as variation ID and data changes.
+	useEffect( () => {
+		setRequestParams( {
+			id: variationId,
+			variation: Object.keys( selectedAttributes ).map(
+				( attributeName ) => {
+					return {
+						attribute: attributeName,
+						value: selectedAttributes[ attributeName ],
+					};
+				}
+			),
+		} );
+	}, [ setRequestParams, variationId, selectedAttributes ] );
+
+	return (
+		<div className="wc-block-components-product-add-to-cart-attribute-picker">
+			{ Object.keys( currentAttributes ).map( ( attributeName ) => (
+				<AttributeSelectControl
+					key={ attributeName }
+					attributeName={ attributeName }
+					options={ filteredAttributeOptions[ attributeName ] }
+					value={ selectedAttributes[ attributeName ] }
+					onChange={ ( selected ) => {
+						setSelectedAttributes( {
+							...selectedAttributes,
+							[ attributeName ]: selected,
+						} );
+					} }
+				/>
+			) ) }
+		</div>
+	);
+};
+
+export default AttributePicker;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/attribute-select-control.js

@@ -0,0 +1,88 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
+import { SelectControl } from 'wordpress-components';
+import { useEffect } from 'react';
+import classnames from 'classnames';
+import {
+	ValidationInputError,
+	useValidationContext,
+} from '@woocommerce/base-context';
+
+// Default option for select boxes.
+const selectAnOption = {
+	value: '',
+	label: __( 'Select an option', 'woocommerce' ),
+};
+
+/**
+ * VariationAttributeSelect component.
+ *
+ * @param {*} props Component props.
+ */
+const AttributeSelectControl = ( {
+	attributeName,
+	options = [],
+	value = '',
+	onChange = () => {},
+	errorMessage = __(
+		'Please select a value.',
+		'woocommerce'
+	),
+} ) => {
+	const { getValidationError, setValidationErrors, clearValidationError } =
+		useValidationContext();
+	const errorId = attributeName;
+	const error = getValidationError( errorId ) || {};
+
+	useEffect( () => {
+		if ( value ) {
+			clearValidationError( errorId );
+		} else {
+			setValidationErrors( {
+				[ errorId ]: {
+					message: errorMessage,
+					hidden: true,
+				},
+			} );
+		}
+	}, [
+		value,
+		errorId,
+		errorMessage,
+		clearValidationError,
+		setValidationErrors,
+	] );
+
+	// Remove validation errors when unmounted.
+	useEffect(
+		() => () => void clearValidationError( errorId ),
+		[ errorId, clearValidationError ]
+	);
+
+	return (
+		<div className="wc-block-components-product-add-to-cart-attribute-picker__container">
+			<SelectControl
+				label={ decodeEntities( attributeName ) }
+				value={ value || '' }
+				options={ [ selectAnOption, ...options ] }
+				onChange={ onChange }
+				required={ true }
+				className={ classnames(
+					'wc-block-components-product-add-to-cart-attribute-picker__select',
+					{
+						'has-error': error.message && ! error.hidden,
+					}
+				) }
+			/>
+			<ValidationInputError
+				propertyName={ errorId }
+				elementId={ errorId }
+			/>
+		</div>
+	);
+};
+
+export default AttributeSelectControl;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/index.js

@@ -0,0 +1,34 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import AttributePicker from './attribute-picker';
+import { getAttributes, getVariationAttributes } from './utils';
+
+/**
+ * VariationAttributes component.
+ *
+ * @param {Object} props             Incoming props
+ * @param {Object} props.product     Product
+ * @param {Object} props.dispatchers An object where values are dispatching functions.
+ */
+const VariationAttributes = ( { product, dispatchers } ) => {
+	const attributes = getAttributes( product.attributes );
+	const variationAttributes = getVariationAttributes( product.variations );
+	if (
+		Object.keys( attributes ).length === 0 ||
+		variationAttributes.length === 0
+	) {
+		return null;
+	}
+
+	return (
+		<AttributePicker
+			attributes={ attributes }
+			variationAttributes={ variationAttributes }
+			setRequestParams={ dispatchers.setRequestParams }
+		/>
+	);
+};
+
+export default VariationAttributes;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/style.scss

@@ -0,0 +1,33 @@
+.wc-block-components-product-add-to-cart-attribute-picker {
+	margin: 0;
+	flex-basis: 100%;
+
+	label {
+		display: block;
+		@include font-size(regular);
+	}
+
+	.wc-block-components-product-add-to-cart-attribute-picker__container {
+		position: relative;
+	}
+
+	.wc-block-components-product-add-to-cart-attribute-picker__select {
+		margin: 0 0 em($gap-small) 0;
+
+		select {
+			min-width: 60%;
+			min-height: 1.75em;
+		}
+
+		&.has-error {
+			margin-bottom: $gap-large;
+
+			select {
+				border-color: $alert-red;
+				&:focus {
+					outline-color: $alert-red;
+				}
+			}
+		}
+	}
+}

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/test/index.js

@@ -0,0 +1,479 @@
+/**
+ * Internal dependencies
+ */
+import {
+	getAttributes,
+	getVariationAttributes,
+	getVariationsMatchingSelectedAttributes,
+	getVariationMatchingSelectedAttributes,
+	getActiveSelectControlOptions,
+	getDefaultAttributes,
+} from '../utils';
+
+const rawAttributeData = [
+	{
+		id: 1,
+		name: 'Color',
+		taxonomy: 'pa_color',
+		has_variations: true,
+		terms: [
+			{
+				id: 22,
+				name: 'Blue',
+				slug: 'blue',
+				default: true,
+			},
+			{
+				id: 23,
+				name: 'Green',
+				slug: 'green',
+				default: false,
+			},
+			{
+				id: 24,
+				name: 'Red',
+				slug: 'red',
+				default: false,
+			},
+		],
+	},
+	{
+		id: 0,
+		name: 'Logo',
+		taxonomy: null,
+		has_variations: true,
+		terms: [
+			{
+				id: 0,
+				name: 'Yes',
+				slug: 'Yes',
+				default: true,
+			},
+			{
+				id: 0,
+				name: 'No',
+				slug: 'No',
+				default: false,
+			},
+		],
+	},
+	{
+		id: 0,
+		name: 'Non-variable attribute',
+		taxonomy: null,
+		has_variations: false,
+		terms: [
+			{
+				id: 0,
+				name: 'Test',
+				slug: 'Test',
+				default: false,
+			},
+			{
+				id: 0,
+				name: 'Test 2',
+				slug: 'Test 2',
+				default: false,
+			},
+		],
+	},
+];
+
+const rawVariations = [
+	{
+		id: 35,
+		attributes: [
+			{
+				name: 'Color',
+				value: 'blue',
+			},
+			{
+				name: 'Logo',
+				value: 'Yes',
+			},
+		],
+	},
+	{
+		id: 28,
+		attributes: [
+			{
+				name: 'Color',
+				value: 'red',
+			},
+			{
+				name: 'Logo',
+				value: 'No',
+			},
+		],
+	},
+	{
+		id: 29,
+		attributes: [
+			{
+				name: 'Color',
+				value: 'green',
+			},
+			{
+				name: 'Logo',
+				value: 'No',
+			},
+		],
+	},
+	{
+		id: 30,
+		attributes: [
+			{
+				name: 'Color',
+				value: 'blue',
+			},
+			{
+				name: 'Logo',
+				value: 'No',
+			},
+		],
+	},
+];
+
+const formattedAttributes = {
+	Color: {
+		id: 1,
+		name: 'Color',
+		taxonomy: 'pa_color',
+		has_variations: true,
+		terms: [
+			{
+				id: 22,
+				name: 'Blue',
+				slug: 'blue',
+				default: true,
+			},
+			{
+				id: 23,
+				name: 'Green',
+				slug: 'green',
+				default: false,
+			},
+			{
+				id: 24,
+				name: 'Red',
+				slug: 'red',
+				default: false,
+			},
+		],
+	},
+	Size: {
+		id: 2,
+		name: 'Size',
+		taxonomy: 'pa_size',
+		has_variations: true,
+		terms: [
+			{
+				id: 25,
+				name: 'Large',
+				slug: 'large',
+				default: false,
+			},
+			{
+				id: 26,
+				name: 'Medium',
+				slug: 'medium',
+				default: true,
+			},
+			{
+				id: 27,
+				name: 'Small',
+				slug: 'small',
+				default: false,
+			},
+		],
+	},
+};
+
+describe( 'Testing utils', () => {
+	describe( 'Testing getAttributes()', () => {
+		it( 'returns empty object if there are no attributes', () => {
+			const attributes = getAttributes( null );
+			expect( attributes ).toStrictEqual( {} );
+		} );
+		it( 'returns list of attributes when given valid data', () => {
+			const attributes = getAttributes( rawAttributeData );
+			expect( attributes ).toStrictEqual( {
+				Color: {
+					id: 1,
+					name: 'Color',
+					taxonomy: 'pa_color',
+					has_variations: true,
+					terms: [
+						{
+							id: 22,
+							name: 'Blue',
+							slug: 'blue',
+							default: true,
+						},
+						{
+							id: 23,
+							name: 'Green',
+							slug: 'green',
+							default: false,
+						},
+						{
+							id: 24,
+							name: 'Red',
+							slug: 'red',
+							default: false,
+						},
+					],
+				},
+				Logo: {
+					id: 0,
+					name: 'Logo',
+					taxonomy: null,
+					has_variations: true,
+					terms: [
+						{
+							id: 0,
+							name: 'Yes',
+							slug: 'Yes',
+							default: true,
+						},
+						{
+							id: 0,
+							name: 'No',
+							slug: 'No',
+							default: false,
+						},
+					],
+				},
+			} );
+		} );
+	} );
+	describe( 'Testing getVariationAttributes()', () => {
+		it( 'returns empty object if there are no variations', () => {
+			const variationAttributes = getVariationAttributes( null );
+			expect( variationAttributes ).toStrictEqual( {} );
+		} );
+		it( 'returns list of attribute names and value pairs when given valid data', () => {
+			const variationAttributes = getVariationAttributes( rawVariations );
+			expect( variationAttributes ).toStrictEqual( {
+				'id:35': {
+					id: 35,
+					attributes: {
+						Color: 'blue',
+						Logo: 'Yes',
+					},
+				},
+				'id:28': {
+					id: 28,
+					attributes: {
+						Color: 'red',
+						Logo: 'No',
+					},
+				},
+				'id:29': {
+					id: 29,
+					attributes: {
+						Color: 'green',
+						Logo: 'No',
+					},
+				},
+				'id:30': {
+					id: 30,
+					attributes: {
+						Color: 'blue',
+						Logo: 'No',
+					},
+				},
+			} );
+		} );
+	} );
+	describe( 'Testing getVariationsMatchingSelectedAttributes()', () => {
+		const attributes = getAttributes( rawAttributeData );
+		const variationAttributes = getVariationAttributes( rawVariations );
+
+		it( 'returns all variations, in the correct order, if no selections have been made yet', () => {
+			const selectedAttributes = {};
+			const matches = getVariationsMatchingSelectedAttributes(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( matches ).toStrictEqual( [ 35, 28, 29, 30 ] );
+		} );
+
+		it( 'returns correct subset of variations after a selection', () => {
+			const selectedAttributes = {
+				Color: 'blue',
+			};
+			const matches = getVariationsMatchingSelectedAttributes(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( matches ).toStrictEqual( [ 35, 30 ] );
+		} );
+
+		it( 'returns correct subset of variations after all selections', () => {
+			const selectedAttributes = {
+				Color: 'blue',
+				Logo: 'No',
+			};
+			const matches = getVariationsMatchingSelectedAttributes(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( matches ).toStrictEqual( [ 30 ] );
+		} );
+
+		it( 'returns no results if selection does not match or is invalid', () => {
+			const selectedAttributes = {
+				Color: 'brown',
+			};
+			const matches = getVariationsMatchingSelectedAttributes(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( matches ).toStrictEqual( [] );
+		} );
+	} );
+	describe( 'Testing getVariationMatchingSelectedAttributes()', () => {
+		const attributes = getAttributes( rawAttributeData );
+		const variationAttributes = getVariationAttributes( rawVariations );
+
+		it( 'returns first match if no selections have been made yet', () => {
+			const selectedAttributes = {};
+			const matches = getVariationMatchingSelectedAttributes(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( matches ).toStrictEqual( 35 );
+		} );
+
+		it( 'returns first match after single selection', () => {
+			const selectedAttributes = {
+				Color: 'blue',
+			};
+			const matches = getVariationMatchingSelectedAttributes(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( matches ).toStrictEqual( 35 );
+		} );
+
+		it( 'returns correct match after all selections', () => {
+			const selectedAttributes = {
+				Color: 'blue',
+				Logo: 'No',
+			};
+			const matches = getVariationMatchingSelectedAttributes(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( matches ).toStrictEqual( 30 );
+		} );
+
+		it( 'returns no match if invalid', () => {
+			const selectedAttributes = {
+				Color: 'brown',
+			};
+			const matches = getVariationMatchingSelectedAttributes(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( matches ).toStrictEqual( 0 );
+		} );
+	} );
+	describe( 'Testing getActiveSelectControlOptions()', () => {
+		const attributes = getAttributes( rawAttributeData );
+		const variationAttributes = getVariationAttributes( rawVariations );
+
+		it( 'returns all possible options if no selections have been made yet', () => {
+			const selectedAttributes = {};
+			const controlOptions = getActiveSelectControlOptions(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( controlOptions ).toStrictEqual( {
+				Color: [
+					{
+						value: 'blue',
+						label: 'Blue',
+					},
+					{
+						value: 'green',
+						label: 'Green',
+					},
+					{
+						value: 'red',
+						label: 'Red',
+					},
+				],
+				Logo: [
+					{
+						value: 'Yes',
+						label: 'Yes',
+					},
+					{
+						value: 'No',
+						label: 'No',
+					},
+				],
+			} );
+		} );
+
+		it( 'returns only valid options if color is selected', () => {
+			const selectedAttributes = {
+				Color: 'green',
+			};
+			const controlOptions = getActiveSelectControlOptions(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( controlOptions ).toStrictEqual( {
+				Color: [
+					{
+						value: 'blue',
+						label: 'Blue',
+					},
+					{
+						value: 'green',
+						label: 'Green',
+					},
+					{
+						value: 'red',
+						label: 'Red',
+					},
+				],
+				Logo: [
+					{
+						value: 'No',
+						label: 'No',
+					},
+				],
+			} );
+		} );
+	} );
+	describe( 'Testing getDefaultAttributes()', () => {
+		const defaultAttributes = getDefaultAttributes( formattedAttributes );
+
+		it( 'should return default attributes in the format that is ready for setting state', () => {
+			expect( defaultAttributes ).toStrictEqual( {
+				Color: 'blue',
+				Size: 'medium',
+			} );
+		} );
+
+		it( 'should return an empty object if given unexpected values', () => {
+			expect( getDefaultAttributes( [] ) ).toStrictEqual( {} );
+			expect( getDefaultAttributes( null ) ).toStrictEqual( {} );
+			expect( getDefaultAttributes( undefined ) ).toStrictEqual( {} );
+		} );
+	} );
+} );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/utils.js

@@ -0,0 +1,240 @@
+/**
+ * External dependencies
+ */
+import { keyBy } from 'lodash';
+import { decodeEntities } from '@wordpress/html-entities';
+import { isObject } from '@woocommerce/types';
+
+/**
+ * Key an array of attributes by name,
+ *
+ * @param {Object} attributes Attributes array.
+ */
+export const getAttributes = ( attributes ) => {
+	return attributes
+		? keyBy(
+				Object.values( attributes ).filter(
+					( { has_variations: hasVariations } ) => hasVariations
+				),
+				'name'
+		  )
+		: {};
+};
+
+/**
+ * Format variations from the API into a map of just the attribute names and values.
+ *
+ * Note, each item is keyed by the variation ID with an id: prefix. This is to prevent the object
+ * being reordered when iterated.
+ *
+ * @param {Object} variations List of Variation objects and attributes keyed by variation ID.
+ */
+export const getVariationAttributes = ( variations ) => {
+	if ( ! variations ) {
+		return {};
+	}
+
+	const attributesMap = {};
+
+	variations.forEach( ( { id, attributes } ) => {
+		attributesMap[ `id:${ id }` ] = {
+			id,
+			attributes: attributes.reduce( ( acc, { name, value } ) => {
+				acc[ name ] = value;
+				return acc;
+			}, {} ),
+		};
+	} );
+
+	return attributesMap;
+};
+
+/**
+ * Given a list of variations and a list of attribute values, return variations which match.
+ *
+ * Allows an attribute to be excluded by name. This is used to filter displayed options for
+ * individual attribute selects.
+ *
+ * @param {Object} attributes          List of attribute names and terms.
+ * @param {Object} variationAttributes Attributes for each variation keyed by variation ID.
+ * @param {Object} selectedAttributes  Attribute Name Value pairs of current selections by the user.
+ * @return {Array} List of matching variation IDs.
+ */
+export const getVariationsMatchingSelectedAttributes = (
+	attributes,
+	variationAttributes,
+	selectedAttributes
+) => {
+	const variationIds = Object.values( variationAttributes ).map(
+		( { id: variationId } ) => {
+			return variationId;
+		}
+	);
+
+	// If nothing is selected yet, just return all variations.
+	if (
+		Object.values( selectedAttributes ).every( ( value ) => value === '' )
+	) {
+		return variationIds;
+	}
+
+	const attributeNames = Object.keys( attributes );
+
+	return variationIds.filter( ( variationId ) =>
+		attributeNames.every( ( attributeName ) => {
+			const selectedAttribute = selectedAttributes[ attributeName ] || '';
+			const variationAttribute =
+				variationAttributes[ 'id:' + variationId ].attributes[
+					attributeName
+				];
+
+			// If there is no selected attribute, consider this a match.
+			if ( selectedAttribute === '' ) {
+				return true;
+			}
+			// If the variation attributes for this attribute are set to null, it matches all values.
+			if ( variationAttribute === null ) {
+				return true;
+			}
+			// Otherwise, only match if the selected values are the same.
+			return variationAttribute === selectedAttribute;
+		} )
+	);
+};
+
+/**
+ * Given a list of variations and a list of attribute values, returns the first matched variation ID.
+ *
+ * @param {Object} attributes          List of attribute names and terms.
+ * @param {Object} variationAttributes Attributes for each variation keyed by variation ID.
+ * @param {Object} selectedAttributes  Attribute Name Value pairs of current selections by the user.
+ * @return {number} Variation ID.
+ */
+export const getVariationMatchingSelectedAttributes = (
+	attributes,
+	variationAttributes,
+	selectedAttributes
+) => {
+	const matchingVariationIds = getVariationsMatchingSelectedAttributes(
+		attributes,
+		variationAttributes,
+		selectedAttributes
+	);
+	return matchingVariationIds[ 0 ] || 0;
+};
+
+/**
+ * Given a list of terms, filter them and return valid options for the select boxes.
+ *
+ * @see getActiveSelectControlOptions
+ * @param {Object} attributeTerms      List of attribute term objects.
+ * @param {?Array} validAttributeTerms Valid values if selections have been made already.
+ * @return {Array} Value/Label pairs of select box options.
+ */
+const getValidSelectControlOptions = (
+	attributeTerms,
+	validAttributeTerms = null
+) => {
+	return Object.values( attributeTerms )
+		.map( ( { name, slug } ) => {
+			if (
+				validAttributeTerms === null ||
+				validAttributeTerms.includes( null ) ||
+				validAttributeTerms.includes( slug )
+			) {
+				return {
+					value: slug,
+					label: decodeEntities( name ),
+				};
+			}
+			return null;
+		} )
+		.filter( Boolean );
+};
+
+/**
+ * Given a list of terms, filter them and return active options for the select boxes. This factors in
+ * which options should be hidden due to current selections.
+ *
+ * @param {Object} attributes          List of attribute names and terms.
+ * @param {Object} variationAttributes Attributes for each variation keyed by variation ID.
+ * @param {Object} selectedAttributes  Attribute Name Value pairs of current selections by the user.
+ * @return {Object} Select box options.
+ */
+export const getActiveSelectControlOptions = (
+	attributes,
+	variationAttributes,
+	selectedAttributes
+) => {
+	const options = {};
+	const attributeNames = Object.keys( attributes );
+	const hasSelectedAttributes =
+		Object.values( selectedAttributes ).filter( Boolean ).length > 0;
+
+	attributeNames.forEach( ( attributeName ) => {
+		const currentAttribute = attributes[ attributeName ];
+		const selectedAttributesExcludingCurrentAttribute = {
+			...selectedAttributes,
+			[ attributeName ]: null,
+		};
+		// This finds matching variations for selected attributes apart from this one. This will be
+		// used to get valid attribute terms of the current attribute narrowed down by those matching
+		// variation IDs. For example, if I had Large Blue Shirts and Medium Red Shirts, I want to only
+		// show Red shirts if Medium is selected.
+		const matchingVariationIds = hasSelectedAttributes
+			? getVariationsMatchingSelectedAttributes(
+					attributes,
+					variationAttributes,
+					selectedAttributesExcludingCurrentAttribute
+			  )
+			: null;
+		// Uses the above matching variation IDs to get the attributes from just those variations.
+		const validAttributeTerms =
+			matchingVariationIds !== null
+				? matchingVariationIds.map(
+						( varId ) =>
+							variationAttributes[ 'id:' + varId ].attributes[
+								attributeName
+							]
+				  )
+				: null;
+		// Intersects attributes with valid attributes.
+		options[ attributeName ] = getValidSelectControlOptions(
+			currentAttribute.terms,
+			validAttributeTerms
+		);
+	} );
+
+	return options;
+};
+
+/**
+ * Return the default values of the given attributes in a format ready to be set in state.
+ *
+ * @param {Object} attributes List of attribute names and terms.
+ * @return {Object} Default attributes.
+ */
+export const getDefaultAttributes = ( attributes = {} ) => {
+	if ( ! isObject( attributes ) ) {
+		return {};
+	}
+
+	const attributeNames = Object.keys( attributes );
+	const defaultsToSet = {};
+
+	if ( attributeNames.length === 0 ) {
+		return defaultsToSet;
+	}
+
+	attributeNames.forEach( ( attributeName ) => {
+		const currentAttribute = attributes[ attributeName ];
+		const defaultValue = currentAttribute.terms.filter(
+			( term ) => term.default
+		);
+		if ( defaultValue.length > 0 ) {
+			defaultsToSet[ currentAttribute.name ] = defaultValue[ 0 ]?.slug;
+		}
+	} );
+
+	return defaultsToSet;
+};

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/shared/add-to-cart-button.js

@@ -0,0 +1,172 @@
+/**
+ * External dependencies
+ */
+import { __, _n, sprintf } from '@wordpress/i18n';
+import Button from '@woocommerce/base-components/button';
+import { Icon, check } from '@wordpress/icons';
+import { useState, useEffect } from '@wordpress/element';
+import { useAddToCartFormContext } from '@woocommerce/base-context';
+import {
+	useStoreEvents,
+	useStoreAddToCart,
+} from '@woocommerce/base-context/hooks';
+import { useInnerBlockLayoutContext } from '@woocommerce/shared-context';
+
+/**
+ * Add to Cart Form Button Component.
+ */
+const AddToCartButton = () => {
+	const {
+		showFormElements,
+		productIsPurchasable,
+		productHasOptions,
+		product,
+		productType,
+		isDisabled,
+		isProcessing,
+		eventRegistration,
+		hasError,
+		dispatchActions,
+	} = useAddToCartFormContext();
+	const { parentName } = useInnerBlockLayoutContext();
+	const { dispatchStoreEvent } = useStoreEvents();
+	const { cartQuantity } = useStoreAddToCart( product.id || 0 );
+	const [ addedToCart, setAddedToCart ] = useState( false );
+	const addToCartButtonData = product.add_to_cart || {
+		url: '',
+		text: '',
+	};
+
+	// Subscribe to emitter for after processing.
+	useEffect( () => {
+		const onSuccess = () => {
+			if ( ! hasError ) {
+				setAddedToCart( true );
+			}
+			return true;
+		};
+		const unsubscribeProcessing =
+			eventRegistration.onAddToCartAfterProcessingWithSuccess(
+				onSuccess,
+				0
+			);
+		return () => {
+			unsubscribeProcessing();
+		};
+	}, [ eventRegistration, hasError ] );
+
+	/**
+	 * We can show a real button if we are:
+	 *
+	 *  	a) Showing a full add to cart form.
+	 * 		b) The product doesn't have options and can therefore be added directly to the cart.
+	 * 		c) The product is purchasable.
+	 *
+	 * Otherwise we show a link instead.
+	 */
+	const showButton =
+		( showFormElements ||
+			( ! productHasOptions && productType === 'simple' ) ) &&
+		productIsPurchasable;
+
+	return showButton ? (
+		<ButtonComponent
+			className="wc-block-components-product-add-to-cart-button"
+			quantityInCart={ cartQuantity }
+			isDisabled={ isDisabled }
+			isProcessing={ isProcessing }
+			isDone={ addedToCart }
+			onClick={ () => {
+				dispatchActions.submitForm(
+					`woocommerce/single-product/${ product?.id || 0 }`
+				);
+				dispatchStoreEvent( 'cart-add-item', {
+					product,
+					listName: parentName,
+				} );
+			} }
+		/>
+	) : (
+		<LinkComponent
+			className="wc-block-components-product-add-to-cart-button"
+			href={ addToCartButtonData.url }
+			text={
+				addToCartButtonData.text ||
+				__( 'View Product', 'woocommerce' )
+			}
+			onClick={ () => {
+				dispatchStoreEvent( 'product-view-link', {
+					product,
+					listName: parentName,
+				} );
+			} }
+		/>
+	);
+};
+
+/**
+ * Button component for non-purchasable products.
+ *
+ * @param {Object}         props           Incoming props.
+ * @param {string}         props.className Css classnames.
+ * @param {string}         props.href      Link for button.
+ * @param {string}         props.text      Text content for button.
+ * @param {function():any} props.onClick   Callback to execute when button is clicked.
+ */
+const LinkComponent = ( { className, href, text, onClick } ) => {
+	return (
+		<Button
+			className={ className }
+			href={ href }
+			onClick={ onClick }
+			rel="nofollow"
+		>
+			{ text }
+		</Button>
+	);
+};
+
+/**
+ * Button for purchasable products.
+ *
+ * @param {Object}         props                Incoming props for component
+ * @param {string}         props.className      Incoming css class name.
+ * @param {number}         props.quantityInCart Quantity of item in cart.
+ * @param {boolean}        props.isProcessing   Whether processing action is occurring.
+ * @param {boolean}        props.isDisabled     Whether the button is disabled or not.
+ * @param {boolean}        props.isDone         Whether processing is done.
+ * @param {function():any} props.onClick        Callback to execute when button is clicked.
+ */
+const ButtonComponent = ( {
+	className,
+	quantityInCart,
+	isProcessing,
+	isDisabled,
+	isDone,
+	onClick,
+} ) => {
+	return (
+		<Button
+			className={ className }
+			disabled={ isDisabled }
+			showSpinner={ isProcessing }
+			onClick={ onClick }
+		>
+			{ isDone && quantityInCart > 0
+				? sprintf(
+						/* translators: %s number of products in cart. */
+						_n(
+							'%d in cart',
+							'%d in cart',
+							quantityInCart,
+							'woocommerce'
+						),
+						quantityInCart
+				  )
+				: __( 'Add to cart', 'woocommerce' ) }
+			{ !! isDone && <Icon icon={ check } /> }
+		</Button>
+	);
+};
+
+export default AddToCartButton;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/shared/index.js

@@ -0,0 +1,3 @@
+export { default as AddToCartButton } from './add-to-cart-button';
+export { default as QuantityInput } from './quantity-input';
+export { default as ProductUnavailable } from './product-unavailable';

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/shared/product-unavailable.js

@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+const ProductUnavailable = ( {
+	reason = __(
+		'Sorry, this product cannot be purchased.',
+		'woocommerce'
+	),
+} ) => {
+	return (
+		<div className="wc-block-components-product-add-to-cart-unavailable">
+			{ reason }
+		</div>
+	);
+};
+
+export default ProductUnavailable;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/shared/quantity-input.js

@@ -0,0 +1,74 @@
+/**
+ * External dependencies
+ */
+import { useDebouncedCallback } from 'use-debounce';
+
+/**
+ * Quantity Input Component.
+ *
+ * @param {Object}         props          Incoming props for component
+ * @param {boolean}        props.disabled Whether input is disabled or not.
+ * @param {number}         props.min      Minimum value for input.
+ * @param {number}         props.max      Maximum value for input.
+ * @param {number}         props.step     Step attribute for input.
+ * @param {number}         props.value    Value for input.
+ * @param {function():any} props.onChange Function to call on input change event.
+ */
+const QuantityInput = ( { disabled, min, max, step = 1, value, onChange } ) => {
+	const hasMaximum = typeof max !== 'undefined';
+
+	/**
+	 * The goal of this function is to normalize what was inserted,
+	 * but after the customer has stopped typing.
+	 *
+	 * It's important to wait before normalizing or we end up with
+	 * a frustrating experience, for example, if the minimum is 2 and
+	 * the customer is trying to type "10", premature normalizing would
+	 * always kick in at "1" and turn that into 2.
+	 *
+	 * Copied from <QuantitySelector>
+	 */
+	const normalizeQuantity = useDebouncedCallback( ( initialValue ) => {
+		// We copy the starting value.
+		let newValue = initialValue;
+
+		// We check if we have a maximum value, and select the lowest between what was inserted and the maximum.
+		if ( hasMaximum ) {
+			newValue = Math.min(
+				newValue,
+				// the maximum possible value in step increments.
+				Math.floor( max / step ) * step
+			);
+		}
+
+		// Select the biggest between what's inserted, the the minimum value in steps.
+		newValue = Math.max( newValue, Math.ceil( min / step ) * step );
+
+		// We round off the value to our steps.
+		newValue = Math.floor( newValue / step ) * step;
+
+		// Only commit if the value has changed
+		if ( newValue !== initialValue ) {
+			onChange( newValue );
+		}
+	}, 300 );
+
+	return (
+		<input
+			className="wc-block-components-product-add-to-cart-quantity"
+			type="number"
+			value={ value }
+			min={ min }
+			max={ max }
+			step={ step }
+			hidden={ max === 1 }
+			disabled={ disabled }
+			onChange={ ( e ) => {
+				onChange( e.target.value );
+				normalizeQuantity( e.target.value );
+			} }
+		/>
+	);
+};
+
+export default QuantityInput;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/style.scss

@@ -0,0 +1,49 @@
+.wc-block-components-product-add-to-cart {
+	margin: 0;
+	display: flex;
+	flex-wrap: wrap;
+
+	.wc-block-components-product-add-to-cart-button {
+		margin: 0 0 em($gap-small) 0;
+
+		.wc-block-components-button__text {
+			display: block;
+
+			> svg {
+				fill: currentColor;
+				vertical-align: top;
+				width: 1.5em;
+				height: 1.5em;
+				margin: -0.25em 0 -0.25em 0.5em;
+			}
+		}
+	}
+
+	.wc-block-components-product-add-to-cart-quantity {
+		margin: 0 1em em($gap-small) 0;
+		flex-basis: 5em;
+		padding: 0.618em;
+		background: $white;
+		border: 1px solid #ccc;
+		border-radius: 2px;
+		color: #43454b;
+		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.125);
+		text-align: center;
+	}
+}
+
+.is-loading .wc-block-components-product-add-to-cart,
+.wc-block-components-product-add-to-cart--placeholder {
+	.wc-block-components-product-add-to-cart-quantity,
+	.wc-block-components-product-add-to-cart-button {
+		@include placeholder();
+	}
+}
+
+.wc-block-grid .wc-block-components-product-add-to-cart {
+	justify-content: center;
+}
+
+.wc-block-components-product-add-to-cart-notice {
+	margin: 0;
+}

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/attributes.js

@@ -0,0 +1,8 @@
+export const blockAttributes = {
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+export default blockAttributes;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/block.js

@@ -0,0 +1,230 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { __, _n, sprintf } from '@wordpress/i18n';
+import {
+	useStoreEvents,
+	useStoreAddToCart,
+} from '@woocommerce/base-context/hooks';
+import { decodeEntities } from '@wordpress/html-entities';
+import { CART_URL } from '@woocommerce/block-settings';
+import { getSetting } from '@woocommerce/settings';
+import {
+	useInnerBlockLayoutContext,
+	useProductDataContext,
+} from '@woocommerce/shared-context';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import {
+	useBorderProps,
+	useColorProps,
+	useTypographyProps,
+	useSpacingProps,
+} from '../../../../hooks/style-attributes';
+
+/**
+ * Product Button Block Component.
+ *
+ * @param {Object} props             Incoming props.
+ * @param {string} [props.className] CSS Class name for the component.
+ * @return {*} The component.
+ */
+const Block = ( props ) => {
+	const { className } = props;
+
+	const { parentClassName } = useInnerBlockLayoutContext();
+	const { product } = useProductDataContext();
+	const colorProps = useColorProps( props );
+	const borderProps = useBorderProps( props );
+	const typographyProps = useTypographyProps( props );
+	const spacingProps = useSpacingProps( props );
+
+	return (
+		<div
+			className={ classnames(
+				className,
+				'wp-block-button',
+				'wc-block-components-product-button',
+				{
+					[ `${ parentClassName }__product-add-to-cart` ]:
+						parentClassName,
+				}
+			) }
+		>
+			{ product.id ? (
+				<AddToCartButton
+					product={ product }
+					colorStyles={ colorProps }
+					borderStyles={ borderProps }
+					typographyStyles={ typographyProps }
+					spacingStyles={ spacingProps }
+				/>
+			) : (
+				<AddToCartButtonPlaceholder
+					colorStyles={ colorProps }
+					borderStyles={ borderProps }
+					typographyStyles={ typographyProps }
+					spacingStyles={ spacingProps }
+				/>
+			) }
+		</div>
+	);
+};
+
+/**
+ * Product Button Block Component.
+ *
+ * @param {Object} props                    Incoming props.
+ * @param {Object} [props.product]          Product.
+ * @param {Object} [props.colorStyles]      Object contains CSS class and CSS style for color.
+ * @param {Object} [props.borderStyles]     Object contains CSS class and CSS style for border.
+ * @param {Object} [props.typographyStyles] Object contains CSS class and CSS style for typography.
+ * @param {Object} [props.spacingStyles]    Object contains CSS style for spacing.
+ *
+ * @return {*} The component.
+ */
+const AddToCartButton = ( {
+	product,
+	colorStyles,
+	borderStyles,
+	typographyStyles,
+	spacingStyles,
+} ) => {
+	const {
+		id,
+		permalink,
+		add_to_cart: productCartDetails,
+		has_options: hasOptions,
+		is_purchasable: isPurchasable,
+		is_in_stock: isInStock,
+	} = product;
+	const { dispatchStoreEvent } = useStoreEvents();
+	const { cartQuantity, addingToCart, addToCart } = useStoreAddToCart(
+		id,
+		`woocommerce/single-product/${ id || 0 }`
+	);
+
+	const addedToCart = Number.isFinite( cartQuantity ) && cartQuantity > 0;
+	const allowAddToCart = ! hasOptions && isPurchasable && isInStock;
+	const buttonAriaLabel = decodeEntities(
+		productCartDetails?.description || ''
+	);
+	const buttonText = addedToCart
+		? sprintf(
+				/* translators: %s number of products in cart. */
+				_n(
+					'%d in cart',
+					'%d in cart',
+					cartQuantity,
+					'woocommerce'
+				),
+				cartQuantity
+		  )
+		: decodeEntities(
+				productCartDetails?.text ||
+					__( 'Add to cart', 'woocommerce' )
+		  );
+
+	const ButtonTag = allowAddToCart ? 'button' : 'a';
+	const buttonProps = {};
+
+	if ( ! allowAddToCart ) {
+		buttonProps.href = permalink;
+		buttonProps.rel = 'nofollow';
+		buttonProps.onClick = () => {
+			dispatchStoreEvent( 'product-view-link', {
+				product,
+			} );
+		};
+	} else {
+		buttonProps.onClick = async () => {
+			await addToCart();
+			dispatchStoreEvent( 'cart-add-item', {
+				product,
+			} );
+			// redirect to cart if the setting to redirect to the cart page
+			// on cart add item is enabled
+			const { cartRedirectAfterAdd } = getSetting( 'productsSettings' );
+			if ( cartRedirectAfterAdd ) {
+				window.location.href = CART_URL;
+			}
+		};
+	}
+
+	return (
+		<ButtonTag
+			aria-label={ buttonAriaLabel }
+			className={ classnames(
+				'wp-block-button__link',
+				'add_to_cart_button',
+				'wc-block-components-product-button__button',
+				colorStyles.className,
+				borderStyles.className,
+				{
+					loading: addingToCart,
+					added: addedToCart,
+				}
+			) }
+			style={ {
+				...colorStyles.style,
+				...borderStyles.style,
+				...typographyStyles.style,
+				...spacingStyles.style,
+			} }
+			disabled={ addingToCart }
+			{ ...buttonProps }
+		>
+			{ buttonText }
+		</ButtonTag>
+	);
+};
+
+/**
+ * Product Button Block Component.
+ *
+ * @param {Object} props                    Incoming props.
+ * @param {Object} [props.colorStyles]      Object contains CSS class and CSS style for color.
+ * @param {Object} [props.borderStyles]     Object contains CSS class and CSS style for border.
+ * @param {Object} [props.typographyStyles] Object contains CSS class and CSS style for typography.
+ * @param {Object} [props.spacingStyles]    Object contains CSS style for spacing.
+ *
+ * @return {*} The component.
+ */
+const AddToCartButtonPlaceholder = ( {
+	colorStyles,
+	borderStyles,
+	typographyStyles,
+	spacingStyles,
+} ) => {
+	return (
+		<button
+			className={ classnames(
+				'wp-block-button__link',
+				'add_to_cart_button',
+				'wc-block-components-product-button__button',
+				'wc-block-components-product-button__button--placeholder',
+				colorStyles.className,
+				borderStyles.className
+			) }
+			style={ {
+				...colorStyles.style,
+				...borderStyles.style,
+				...typographyStyles.style,
+				...spacingStyles.style,
+			} }
+			disabled={ true }
+		/>
+	);
+};
+
+Block.propTypes = {
+	className: PropTypes.string,
+};
+
+export default withProductDataContext( Block );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/constants.js

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Icon, button } from '@wordpress/icons';
+
+export const BLOCK_TITLE = __(
+	'Add to Cart Button',
+	'woocommerce'
+);
+export const BLOCK_ICON = (
+	<Icon icon={ button } className="wc-block-editor-components-block-icon" />
+);
+export const BLOCK_DESCRIPTION = __(
+	'Display a call to action button which either adds the product to the cart, or links to the product page.',
+	'woocommerce'
+);

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/edit.js

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Disabled } from '@wordpress/components';
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import withProductSelector from '../shared/with-product-selector';
+import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+
+const Edit = ( { attributes } ) => {
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<Disabled>
+				<Block { ...attributes } />
+			</Disabled>
+		</div>
+	);
+};
+
+export default withProductSelector( {
+	icon: BLOCK_ICON,
+	label: BLOCK_TITLE,
+	description: __(
+		'Choose a product to display its add to cart button.',
+		'woocommerce'
+	),
+} )( Edit );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/index.js

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+import attributes from './attributes';
+import edit from './edit';
+import {
+	BLOCK_TITLE as title,
+	BLOCK_ICON as icon,
+	BLOCK_DESCRIPTION as description,
+} from './constants';
+import { supports } from './supports';
+import { Save } from '../title/save';
+
+const blockConfig = {
+	apiVersion: 2,
+	title,
+	description,
+	icon: { src: icon },
+	attributes,
+	supports,
+	edit,
+	save: Save,
+};
+
+registerBlockType( 'woocommerce/product-button', {
+	...sharedConfig,
+	...blockConfig,
+} );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/save.tsx

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import classnames from 'classnames';
+
+type Props = {
+	attributes: Record< string, unknown > & {
+		className?: string;
+	};
+};
+
+export const Save = ( { attributes }: Props ): JSX.Element => {
+	return (
+		<div
+			{ ...useBlockProps.save( {
+				className: classnames( 'is-loading', attributes.className ),
+			} ) }
+		/>
+	);
+};

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/style.scss

@@ -0,0 +1,38 @@
+.wp-block-button.wc-block-components-product-button {
+	word-break: break-word;
+	white-space: normal;
+	margin-top: 0;
+	margin-bottom: $gap-small;
+
+	.wc-block-components-product-button__button {
+		border-style: none;
+		display: inline-flex;
+		font-family: inherit;
+		font-weight: inherit;
+		justify-content: center;
+		margin: 0 auto;
+		white-space: normal;
+		word-break: break-word;
+	}
+
+	.wc-block-components-product-button__button--placeholder {
+		@include placeholder();
+		min-width: 8em;
+		min-height: 3em;
+	}
+}
+
+.is-loading .wc-block-components-product-button > .wc-block-components-product-button__button {
+	@include placeholder();
+	min-width: 8em;
+	min-height: 3em;
+}
+
+.theme-twentytwentyone {
+	// Prevent buttons appearing disabled in the editor.
+	.editor-styles-wrapper .wc-block-components-product-button .wp-block-button__link {
+		background-color: var(--button--color-background);
+		color: var(--button--color-text);
+		border-color: var(--button--color-background);
+	}
+}

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/supports.ts

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { hasSpacingStyleSupport } from '../../../../utils/global-style';
+
+export const supports = {
+	...( isFeaturePluginBuild() && {
+		color: {
+			text: true,
+			background: true,
+			link: false,
+			__experimentalSkipSerialization: true,
+		},
+		__experimentalBorder: {
+			radius: true,
+			__experimentalSkipSerialization: true,
+		},
+		...( hasSpacingStyleSupport() && {
+			spacing: {
+				padding: true,
+				__experimentalSkipSerialization: true,
+			},
+		} ),
+		typography: {
+			fontSize: true,
+			__experimentalFontWeight: true,
+			__experimentalSkipSerialization: true,
+		},
+		__experimentalSelector:
+			'.wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button',
+	} ),
+};

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/attributes.ts

@@ -0,0 +1,8 @@
+export const blockAttributes: Record< string, Record< string, unknown > > = {
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+export default blockAttributes;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/block.tsx

@@ -0,0 +1,74 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import classnames from 'classnames';
+import {
+	useInnerBlockLayoutContext,
+	useProductDataContext,
+} from '@woocommerce/shared-context';
+import { isEmpty } from 'lodash';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+import { HTMLAttributes } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { Attributes } from './types';
+import {
+	useColorProps,
+	useTypographyProps,
+} from '../../../../hooks/style-attributes';
+
+type Props = Attributes & HTMLAttributes< HTMLDivElement >;
+
+/**
+ * Product Category Block Component.
+ *
+ * @param {Object} props             Incoming props.
+ * @param {string} [props.className] CSS Class name for the component.
+ * @return {*} The component.
+ */
+const Block = ( props: Props ): JSX.Element | null => {
+	const { className } = props;
+	const { parentClassName } = useInnerBlockLayoutContext();
+	const { product } = useProductDataContext();
+
+	const colorProps = useColorProps( props );
+	const typographyProps = useTypographyProps( props );
+
+	if ( isEmpty( product.categories ) ) {
+		return null;
+	}
+
+	return (
+		<div
+			className={ classnames(
+				className,
+				'wc-block-components-product-category-list',
+				colorProps.className,
+				{
+					[ `${ parentClassName }__product-category-list` ]:
+						parentClassName,
+				}
+			) }
+			style={ { ...colorProps.style, ...typographyProps.style } }
+		>
+			{ __( 'Categories:', 'woo-gutenberg-products-block' ) }{ ' ' }
+			<ul>
+				{ Object.values( product.categories ).map(
+					( { name, link, slug } ) => {
+						return (
+							<li key={ `category-list-item-${ slug }` }>
+								<a href={ link }>{ name }</a>
+							</li>
+						);
+					}
+				) }
+			</ul>
+		</div>
+	);
+};
+
+export default withProductDataContext( Block );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/constants.tsx

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { archive, Icon } from '@wordpress/icons';
+
+export const BLOCK_TITLE: string = __(
+	'Product Category List',
+	'woo-gutenberg-products-block'
+);
+export const BLOCK_ICON: JSX.Element = (
+	<Icon icon={ archive } className="wc-block-editor-components-block-icon" />
+);
+export const BLOCK_DESCRIPTION: string = __(
+	'Display a list of categories belonging to a product.',
+	'woo-gutenberg-products-block'
+);

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/edit.tsx

@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Disabled } from '@wordpress/components';
+import EditProductLink from '@woocommerce/editor-components/edit-product-link';
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import withProductSelector from '../shared/with-product-selector';
+import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+import { Attributes } from './types';
+
+interface Props {
+	attributes: Attributes;
+}
+
+const Edit = ( { attributes }: Props ): JSX.Element => {
+	const blockProps = useBlockProps();
+
+	return (
+		<div { ...blockProps }>
+			<EditProductLink />
+			<Disabled>
+				<Block { ...attributes } />
+			</Disabled>
+		</div>
+	);
+};
+
+export default withProductSelector( {
+	icon: BLOCK_ICON,
+	label: BLOCK_TITLE,
+	description: __(
+		'Choose a product to display its categories.',
+		'woo-gutenberg-products-block'
+	),
+} )( Edit );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/index.ts

@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import {
+	isFeaturePluginBuild,
+	registerExperimentalBlockType,
+} from '@woocommerce/block-settings';
+import type { BlockConfiguration } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from './../shared/config';
+import attributes from './attributes';
+import edit from './edit';
+import {
+	BLOCK_TITLE as title,
+	BLOCK_ICON as icon,
+	BLOCK_DESCRIPTION as description,
+} from './constants';
+import { Save } from './save';
+
+const blockConfig: BlockConfiguration = {
+	...sharedConfig,
+	apiVersion: 2,
+	title,
+	description,
+	icon: { src: icon },
+	attributes,
+	supports: {
+		...( isFeaturePluginBuild() && {
+			color: {
+				text: true,
+				link: true,
+				background: false,
+				__experimentalSkipSerialization: true,
+			},
+			typography: {
+				fontSize: true,
+				lineHeight: true,
+				__experimentalFontStyle: true,
+				__experimentalFontWeight: true,
+				__experimentalSkipSerialization: true,
+			},
+			__experimentalSelector:
+				'.wc-block-components-product-category-list',
+		} ),
+	},
+	save: Save,
+	edit,
+};
+
+registerExperimentalBlockType(
+	'woocommerce/product-category-list',
+	blockConfig
+);

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/save.tsx

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { useBlockProps } from '@wordpress/block-editor';
+
+type Props = {
+	attributes: Record< string, unknown > & {
+		className: string;
+	};
+};
+
+export const Save = ( { attributes }: Props ): JSX.Element => {
+	return (
+		<div
+			{ ...useBlockProps.save( {
+				className: classnames( 'is-loading', attributes.className ),
+			} ) }
+		/>
+	);
+};

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/style.scss

@@ -0,0 +1,23 @@
+.wc-block-components-product-category-list {
+	margin-top: 0;
+	margin-bottom: em($gap-small);
+
+	ul {
+		margin: 0;
+		padding: 0;
+		display: inline;
+
+		li {
+			display: inline;
+			list-style: none;
+		}
+
+		li::after {
+			content: ", ";
+		}
+
+		li:last-child::after {
+			content: "";
+		}
+	}
+}

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/types.ts

@@ -0,0 +1,3 @@
+export interface Attributes {
+	productId: number;
+}

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/attributes.js

@@ -0,0 +1,24 @@
+export const blockAttributes = {
+	showProductLink: {
+		type: 'boolean',
+		default: true,
+	},
+	showSaleBadge: {
+		type: 'boolean',
+		default: true,
+	},
+	saleBadgeAlign: {
+		type: 'string',
+		default: 'right',
+	},
+	imageSizing: {
+		type: 'string',
+		default: 'full-size',
+	},
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+export default blockAttributes;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/block.js

@@ -0,0 +1,166 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import { useState, Fragment } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import classnames from 'classnames';
+import { PLACEHOLDER_IMG_SRC } from '@woocommerce/settings';
+import {
+	useInnerBlockLayoutContext,
+	useProductDataContext,
+} from '@woocommerce/shared-context';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+import { useStoreEvents } from '@woocommerce/base-context/hooks';
+
+/**
+ * Internal dependencies
+ */
+import ProductSaleBadge from './../sale-badge/block';
+import './style.scss';
+import {
+	useBorderProps,
+	useSpacingProps,
+	useTypographyProps,
+} from '../../../../hooks/style-attributes';
+
+/**
+ * Product Image Block Component.
+ *
+ * @param {Object}  props                   Incoming props.
+ * @param {string}  [props.className]       CSS Class name for the component.
+ * @param {string}  [props.imageSizing]     Size of image to use.
+ * @param {boolean} [props.showProductLink] Whether or not to display a link to the product page.
+ * @param {boolean} [props.showSaleBadge]   Whether or not to display the on sale badge.
+ * @param {string}  [props.saleBadgeAlign]  How should the sale badge be aligned if displayed.
+ * @return {*} The component.
+ */
+export const Block = ( props ) => {
+	const {
+		className,
+		imageSizing = 'full-size',
+		showProductLink = true,
+		showSaleBadge,
+		saleBadgeAlign = 'right',
+	} = props;
+
+	const { parentClassName } = useInnerBlockLayoutContext();
+	const { product } = useProductDataContext();
+	const [ imageLoaded, setImageLoaded ] = useState( false );
+	const { dispatchStoreEvent } = useStoreEvents();
+
+	const typographyProps = useTypographyProps( props );
+	const borderProps = useBorderProps( props );
+	const spacingProps = useSpacingProps( props );
+
+	if ( ! product.id ) {
+		return (
+			<div
+				className={ classnames(
+					className,
+					'wc-block-components-product-image',
+					{
+						[ `${ parentClassName }__product-image` ]:
+							parentClassName,
+					},
+					borderProps.className
+				) }
+				style={ {
+					...typographyProps.style,
+					...borderProps.style,
+					...spacingProps.style,
+				} }
+			>
+				<ImagePlaceholder />
+			</div>
+		);
+	}
+	const hasProductImages = !! product.images.length;
+	const image = hasProductImages ? product.images[ 0 ] : null;
+	const ParentComponent = showProductLink ? 'a' : Fragment;
+	const anchorLabel = sprintf(
+		/* translators: %s is referring to the product name */
+		__( 'Link to %s', 'woocommerce' ),
+		product.name
+	);
+	const anchorProps = {
+		href: product.permalink,
+		...( ! hasProductImages && { 'aria-label': anchorLabel } ),
+		onClick: () => {
+			dispatchStoreEvent( 'product-view-link', {
+				product,
+			} );
+		},
+	};
+
+	return (
+		<div
+			className={ classnames(
+				className,
+				'wc-block-components-product-image',
+				{
+					[ `${ parentClassName }__product-image` ]: parentClassName,
+				},
+				borderProps.className
+			) }
+			style={ {
+				...typographyProps.style,
+				...borderProps.style,
+				...spacingProps.style,
+			} }
+		>
+			<ParentComponent { ...( showProductLink && anchorProps ) }>
+				{ !! showSaleBadge && (
+					<ProductSaleBadge
+						align={ saleBadgeAlign }
+						product={ product }
+					/>
+				) }
+				<Image
+					fallbackAlt={ product.name }
+					image={ image }
+					onLoad={ () => setImageLoaded( true ) }
+					loaded={ imageLoaded }
+					showFullSize={ imageSizing !== 'cropped' }
+				/>
+			</ParentComponent>
+		</div>
+	);
+};
+
+const ImagePlaceholder = () => {
+	return (
+		<img src={ PLACEHOLDER_IMG_SRC } alt="" width={ 500 } height={ 500 } />
+	);
+};
+
+const Image = ( { image, onLoad, loaded, showFullSize, fallbackAlt } ) => {
+	const { thumbnail, src, srcset, sizes, alt } = image || {};
+	const imageProps = {
+		alt: alt || fallbackAlt,
+		onLoad,
+		hidden: ! loaded,
+		src: thumbnail,
+		...( showFullSize && { src, srcSet: srcset, sizes } ),
+	};
+
+	return (
+		<>
+			{ imageProps.src && (
+				/* eslint-disable-next-line jsx-a11y/alt-text */
+				<img data-testid="product-image" { ...imageProps } />
+			) }
+			{ ! loaded && <ImagePlaceholder /> }
+		</>
+	);
+};
+
+Block.propTypes = {
+	className: PropTypes.string,
+	fallbackAlt: PropTypes.string,
+	showProductLink: PropTypes.bool,
+	showSaleBadge: PropTypes.bool,
+	saleBadgeAlign: PropTypes.string,
+};
+
+export default withProductDataContext( Block );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/constants.js

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { image, Icon } from '@wordpress/icons';
+
+export const BLOCK_TITLE = __(
+	'Product Image',
+	'woocommerce'
+);
+export const BLOCK_ICON = (
+	<Icon icon={ image } className="wc-block-editor-components-block-icon" />
+);
+export const BLOCK_DESCRIPTION = __(
+	'Display the main product image',
+	'woocommerce'
+);

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/edit.js

@@ -0,0 +1,162 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import { createInterpolateElement } from '@wordpress/element';
+import { getAdminLink } from '@woocommerce/settings';
+import {
+	Disabled,
+	PanelBody,
+	ToggleControl,
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import withProductSelector from '../shared/with-product-selector';
+import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+
+const Edit = ( { attributes, setAttributes } ) => {
+	const { showProductLink, imageSizing, showSaleBadge, saleBadgeAlign } =
+		attributes;
+
+	const blockProps = useBlockProps();
+
+	return (
+		<div { ...blockProps }>
+			<InspectorControls>
+				<PanelBody
+					title={ __( 'Content', 'woocommerce' ) }
+				>
+					<ToggleControl
+						label={ __(
+							'Link to Product Page',
+							'woocommerce'
+						) }
+						help={ __(
+							'Links the image to the single product listing.',
+							'woocommerce'
+						) }
+						checked={ showProductLink }
+						onChange={ () =>
+							setAttributes( {
+								showProductLink: ! showProductLink,
+							} )
+						}
+					/>
+					<ToggleControl
+						label={ __(
+							'Show On-Sale Badge',
+							'woocommerce'
+						) }
+						help={ __(
+							'Overlay a "sale" badge if the product is on-sale.',
+							'woocommerce'
+						) }
+						checked={ showSaleBadge }
+						onChange={ () =>
+							setAttributes( {
+								showSaleBadge: ! showSaleBadge,
+							} )
+						}
+					/>
+					{ showSaleBadge && (
+						<ToggleGroupControl
+							label={ __(
+								'Sale Badge Alignment',
+								'woocommerce'
+							) }
+							value={ saleBadgeAlign }
+							onChange={ ( value ) =>
+								setAttributes( { saleBadgeAlign: value } )
+							}
+						>
+							<ToggleGroupControlOption
+								value="left"
+								label={ __(
+									'Left',
+									'woocommerce'
+								) }
+							/>
+							<ToggleGroupControlOption
+								value="center"
+								label={ __(
+									'Center',
+									'woocommerce'
+								) }
+							/>
+							<ToggleGroupControlOption
+								value="right"
+								label={ __(
+									'Right',
+									'woocommerce'
+								) }
+							/>
+						</ToggleGroupControl>
+					) }
+					<ToggleGroupControl
+						label={ __(
+							'Image Sizing',
+							'woocommerce'
+						) }
+						help={ createInterpolateElement(
+							__(
+								'Product image cropping can be modified in the <a>Customizer</a>.',
+								'woocommerce'
+							),
+							{
+								a: (
+									// eslint-disable-next-line jsx-a11y/anchor-has-content
+									<a
+										href={ `${ getAdminLink(
+											'customize.php'
+										) }?autofocus[panel]=woocommerce&autofocus[section]=woocommerce_product_images` }
+										target="_blank"
+										rel="noopener noreferrer"
+									/>
+								),
+							}
+						) }
+						value={ imageSizing }
+						onChange={ ( value ) =>
+							setAttributes( { imageSizing: value } )
+						}
+					>
+						<ToggleGroupControlOption
+							value="full-size"
+							label={ __(
+								'Full Size',
+								'woocommerce'
+							) }
+						/>
+						<ToggleGroupControlOption
+							value="cropped"
+							label={ __(
+								'Cropped',
+								'woocommerce'
+							) }
+						/>
+					</ToggleGroupControl>
+				</PanelBody>
+			</InspectorControls>
+			<Disabled>
+				<Block { ...attributes } />
+			</Disabled>
+		</div>
+	);
+};
+
+export default withProductSelector( {
+	icon: BLOCK_ICON,
+	label: BLOCK_TITLE,
+	description: __(
+		'Choose a product to display its image.',
+		'woocommerce'
+	),
+} )( Edit );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/frontend.js

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import { withFilteredAttributes } from '@woocommerce/shared-hocs';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import attributes from './attributes';
+
+export default withFilteredAttributes( attributes )( Block );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/index.js

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+import attributes from './attributes';
+import { supports } from './supports';
+import { Save } from './save';
+import edit from './edit';
+import {
+	BLOCK_TITLE as title,
+	BLOCK_ICON as icon,
+	BLOCK_DESCRIPTION as description,
+} from './constants';
+
+const blockConfig = {
+	apiVersion: 2,
+	title,
+	description,
+	icon: { src: icon },
+	attributes,
+	edit,
+	supports,
+	save: Save,
+};
+
+registerBlockType( 'woocommerce/product-image', {
+	...sharedConfig,
+	...blockConfig,
+} );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/save.tsx

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import classnames from 'classnames';
+
+type Props = {
+	attributes: Record< string, unknown > & {
+		className?: string;
+	};
+};
+
+export const Save = ( { attributes }: Props ): JSX.Element => {
+	return (
+		<div
+			{ ...useBlockProps.save( {
+				className: classnames( 'is-loading', attributes.className ),
+			} ) }
+		/>
+	);
+};

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/style.scss

@@ -0,0 +1,62 @@
+.editor-styles-wrapper .wc-block-grid__products .wc-block-grid__product .wc-block-components-product-image,
+.wc-block-components-product-image {
+	text-decoration: none;
+	display: block;
+	position: relative;
+
+	a {
+		border-radius: inherit;
+		text-decoration: none;
+		border: 0;
+		outline: 0;
+		box-shadow: none;
+	}
+
+	img {
+		border-radius: inherit;
+		vertical-align: middle;
+		width: 100%;
+
+		&[hidden] {
+			display: none;
+		}
+	}
+
+	img[alt=""] {
+		border: 1px solid $image-placeholder-border-color;
+	}
+
+	.wc-block-components-product-sale-badge {
+		&--align-left {
+			position: absolute;
+			left: $gap-smaller * 0.5;
+			top: $gap-smaller * 0.5;
+			right: auto;
+			margin: 0;
+		}
+		&--align-center {
+			position: absolute;
+			top: $gap-smaller * 0.5;
+			left: 50%;
+			right: auto;
+			transform: translateX(-50%);
+			margin: 0;
+		}
+		&--align-right {
+			position: absolute;
+			right: $gap-smaller * 0.5;
+			top: $gap-smaller * 0.5;
+			left: auto;
+			margin: 0;
+		}
+	}
+}
+
+.is-loading .wc-block-components-product-image {
+	@include placeholder($include-border-radius: false);
+	width: auto;
+}
+
+.wc-block-components-product-image {
+	margin: 0 0 $gap-small;
+}

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/supports.ts

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { hasSpacingStyleSupport } from '../../../../utils/global-style';
+
+export const supports = {
+	...( isFeaturePluginBuild() && {
+		__experimentalBorder: {
+			radius: true,
+			__experimentalSkipSerialization: true,
+		},
+		typography: {
+			fontSize: true,
+			__experimentalSkipSerialization: true,
+		},
+		...( hasSpacingStyleSupport() && {
+			spacing: {
+				margin: true,
+				__experimentalSkipSerialization: true,
+			},
+		} ),
+		__experimentalSelector: '.wc-block-components-product-image',
+	} ),
+};

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/test/block.test.js

@@ -0,0 +1,151 @@
+/**
+ * External dependencies
+ */
+import { render, fireEvent } from '@testing-library/react';
+import { ProductDataContextProvider } from '@woocommerce/shared-context';
+
+/**
+ * Internal dependencies
+ */
+import { Block } from '../block';
+
+jest.mock( '@woocommerce/block-settings', () => ( {
+	__esModule: true,
+	PLACEHOLDER_IMG_SRC: 'placeholder.jpg',
+} ) );
+
+jest.mock( '../../../../../hooks/style-attributes', () => ( {
+	__esModule: true,
+	useBorderProps: jest.fn( () => ( {
+		className: '',
+		style: {},
+	} ) ),
+	useTypographyProps: jest.fn( () => ( {
+		style: {},
+	} ) ),
+	useSpacingProps: jest.fn( () => ( {
+		style: {},
+	} ) ),
+} ) );
+
+const productWithoutImages = {
+	name: 'Test product',
+	id: 1,
+	fallbackAlt: 'Test product',
+	permalink: 'http://test.com/product/test-product/',
+	images: [],
+};
+
+const productWithImages = {
+	name: 'Test product',
+	id: 1,
+	fallbackAlt: 'Test product',
+	permalink: 'http://test.com/product/test-product/',
+	images: [
+		{
+			id: 56,
+			src: 'logo-1.jpg',
+			thumbnail: 'logo-1-324x324.jpg',
+			srcset: 'logo-1.jpg 800w, logo-1-300x300.jpg 300w, logo-1-150x150.jpg 150w, logo-1-768x767.jpg 768w, logo-1-324x324.jpg 324w, logo-1-416x415.jpg 416w, logo-1-100x100.jpg 100w',
+			sizes: '(max-width: 800px) 100vw, 800px',
+			name: 'logo-1.jpg',
+			alt: '',
+		},
+		{
+			id: 55,
+			src: 'beanie-with-logo-1.jpg',
+			thumbnail: 'beanie-with-logo-1-324x324.jpg',
+			srcset: 'beanie-with-logo-1.jpg 800w, beanie-with-logo-1-300x300.jpg 300w, beanie-with-logo-1-150x150.jpg 150w, beanie-with-logo-1-768x768.jpg 768w, beanie-with-logo-1-324x324.jpg 324w, beanie-with-logo-1-416x416.jpg 416w, beanie-with-logo-1-100x100.jpg 100w',
+			sizes: '(max-width: 800px) 100vw, 800px',
+			name: 'beanie-with-logo-1.jpg',
+			alt: '',
+		},
+	],
+};
+
+describe( 'Product Image Block', () => {
+	describe( 'with product link', () => {
+		test( 'should render an anchor with the product image', () => {
+			const component = render(
+				<ProductDataContextProvider product={ productWithImages }>
+					<Block showProductLink={ true } />
+				</ProductDataContextProvider>
+			);
+
+			// use testId as alt is added after image is loaded
+			const image = component.getByTestId( 'product-image' );
+			fireEvent.load( image );
+
+			const productImage = component.getByAltText(
+				productWithImages.name
+			);
+			expect( productImage.getAttribute( 'src' ) ).toBe(
+				productWithImages.images[ 0 ].src
+			);
+
+			const anchor = productImage.closest( 'a' );
+			expect( anchor.getAttribute( 'href' ) ).toBe(
+				productWithImages.permalink
+			);
+		} );
+
+		test( 'should render an anchor with the placeholder image', () => {
+			const component = render(
+				<ProductDataContextProvider product={ productWithoutImages }>
+					<Block showProductLink={ true } />
+				</ProductDataContextProvider>
+			);
+
+			const placeholderImage = component.getByAltText( '' );
+			expect( placeholderImage.getAttribute( 'src' ) ).toBe(
+				'placeholder.jpg'
+			);
+
+			const anchor = placeholderImage.closest( 'a' );
+			expect( anchor.getAttribute( 'href' ) ).toBe(
+				productWithoutImages.permalink
+			);
+			expect( anchor.getAttribute( 'aria-label' ) ).toBe(
+				`Link to ${ productWithoutImages.name }`
+			);
+		} );
+	} );
+
+	describe( 'without product link', () => {
+		test( 'should render the product image without an anchor wrapper', () => {
+			const component = render(
+				<ProductDataContextProvider product={ productWithImages }>
+					<Block showProductLink={ false } />
+				</ProductDataContextProvider>
+			);
+			const image = component.getByTestId( 'product-image' );
+			fireEvent.load( image );
+
+			const productImage = component.getByAltText(
+				productWithImages.name
+			);
+			expect( productImage.getAttribute( 'src' ) ).toBe(
+				productWithImages.images[ 0 ].src
+			);
+
+			const anchor = productImage.closest( 'a' );
+			expect( anchor ).toBe( null );
+		} );
+
+		test( 'should render the placeholder image without an anchor wrapper', () => {
+			const component = render(
+				<ProductDataContextProvider product={ productWithoutImages }>
+					<Block showProductLink={ false } />
+				</ProductDataContextProvider>
+			);
+
+			const placeholderImage = component.getByAltText( '' );
+			expect( placeholderImage.getAttribute( 'src' ) ).toBe(
+				'placeholder.jpg'
+			);
+
+			const anchor = placeholderImage.closest( 'a' );
+			expect( anchor ).toBe( null );
+		} );
+	} );
+} );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/attributes.js

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+
+let blockAttributes = {
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+if ( isFeaturePluginBuild() ) {
+	blockAttributes = {
+		...blockAttributes,
+		textAlign: {
+			type: 'string',
+		},
+	};
+}
+export default blockAttributes;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/block.js

@@ -0,0 +1,95 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import ProductPrice from '@woocommerce/base-components/product-price';
+import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
+import {
+	useInnerBlockLayoutContext,
+	useProductDataContext,
+} from '@woocommerce/shared-context';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+
+/**
+ * Internal dependencies
+ */
+import {
+	useColorProps,
+	useTypographyProps,
+} from '../../../../hooks/style-attributes';
+
+/**
+ * Product Price Block Component.
+ *
+ * @param {Object} props             Incoming props.
+ * @param {string} [props.className] CSS Class name for the component.
+ * @param {string} [props.textAlign] Text alignment.
+ *                                   context will be used if this is not provided.
+ * @return {*} The component.
+ */
+const Block = ( props ) => {
+	const { className, textAlign } = props;
+	const { parentClassName } = useInnerBlockLayoutContext();
+	const { product } = useProductDataContext();
+
+	const colorProps = useColorProps( props );
+	const typographyProps = useTypographyProps( props );
+
+	const wrapperClassName = classnames(
+		'wc-block-components-product-price',
+		className,
+		colorProps.className,
+		{
+			[ `${ parentClassName }__product-price` ]: parentClassName,
+		}
+	);
+
+	const style = {
+		...typographyProps.style,
+		...colorProps.style,
+	};
+
+	if ( ! product.id ) {
+		return (
+			<ProductPrice align={ textAlign } className={ wrapperClassName } />
+		);
+	}
+
+	const prices = product.prices;
+	const currency = getCurrencyFromPriceResponse( prices );
+	const isOnSale = prices.price !== prices.regular_price;
+	const priceClassName = classnames( {
+		[ `${ parentClassName }__product-price__value` ]: parentClassName,
+		[ `${ parentClassName }__product-price__value--on-sale` ]: isOnSale,
+	} );
+
+	return (
+		<ProductPrice
+			align={ textAlign }
+			className={ wrapperClassName }
+			priceStyle={ style }
+			regularPriceStyle={ style }
+			priceClassName={ priceClassName }
+			currency={ currency }
+			price={ prices.price }
+			// Range price props
+			minPrice={ prices?.price_range?.min_amount }
+			maxPrice={ prices?.price_range?.max_amount }
+			// This is the regular or original price when the `price` value is a sale price.
+			regularPrice={ prices.regular_price }
+			regularPriceClassName={ classnames( {
+				[ `${ parentClassName }__product-price__regular` ]:
+					parentClassName,
+			} ) }
+		/>
+	);
+};
+
+Block.propTypes = {
+	className: PropTypes.string,
+	product: PropTypes.object,
+	textAlign: PropTypes.oneOf( [ 'left', 'right', 'center' ] ),
+};
+
+export default withProductDataContext( Block );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/constants.js

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { currencyDollar, Icon } from '@wordpress/icons';
+
+export const BLOCK_TITLE = __(
+	'Product Price',
+	'woocommerce'
+);
+export const BLOCK_ICON = (
+	<Icon
+		icon={ currencyDollar }
+		className="wc-block-editor-components-block-icon"
+	/>
+);
+export const BLOCK_DESCRIPTION = __(
+	'Display the price of a product.',
+	'woocommerce'
+);

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/edit.js

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+import {
+	AlignmentToolbar,
+	BlockControls,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import withProductSelector from '../shared/with-product-selector';
+import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+
+const PriceEdit = ( { attributes, setAttributes } ) => {
+	const blockProps = useBlockProps();
+	return (
+		<>
+			<BlockControls>
+				{ isFeaturePluginBuild() && (
+					<AlignmentToolbar
+						value={ attributes.textAlign }
+						onChange={ ( newAlign ) => {
+							setAttributes( { textAlign: newAlign } );
+						} }
+					/>
+				) }
+			</BlockControls>
+			<div { ...blockProps }>
+				<Block { ...attributes } />
+			</div>
+		</>
+	);
+};
+
+export default withProductSelector( {
+	icon: BLOCK_ICON,
+	label: BLOCK_TITLE,
+	description: __(
+		'Choose a product to display its price.',
+		'woocommerce'
+	),
+} )( PriceEdit );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/index.js

@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+import edit from './edit';
+import { Save } from './save';
+import attributes from './attributes';
+import {
+	BLOCK_TITLE as title,
+	BLOCK_ICON as icon,
+	BLOCK_DESCRIPTION as description,
+} from './constants';
+
+const blockConfig = {
+	...sharedConfig,
+	apiVersion: 2,
+	title,
+	description,
+	icon: { src: icon },
+	attributes,
+	edit,
+	save: Save,
+	supports: {
+		...sharedConfig.supports,
+		...( isFeaturePluginBuild() && {
+			color: {
+				text: true,
+				background: false,
+				link: false,
+				__experimentalSkipSerialization: true,
+			},
+			typography: {
+				fontSize: true,
+				__experimentalFontWeight: true,
+				__experimentalFontStyle: true,
+				__experimentalSkipSerialization: true,
+			},
+			__experimentalSelector: '.wc-block-components-product-price',
+		} ),
+	},
+};
+
+registerBlockType( 'woocommerce/product-price', blockConfig );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/save.tsx

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import classnames from 'classnames';
+
+type Props = {
+	attributes: Record< string, unknown > & {
+		className?: string;
+	};
+};
+
+export const Save = ( { attributes }: Props ): JSX.Element => {
+	return (
+		<div
+			{ ...useBlockProps.save( {
+				className: classnames( 'is-loading', attributes.className ),
+			} ) }
+		/>
+	);
+};

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/attributes.js

@@ -0,0 +1,8 @@
+export const blockAttributes = {
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+export default blockAttributes;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/block.js

@@ -0,0 +1,115 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import { __, _n, sprintf } from '@wordpress/i18n';
+import classnames from 'classnames';
+import {
+	useInnerBlockLayoutContext,
+	useProductDataContext,
+} from '@woocommerce/shared-context';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import {
+	useColorProps,
+	useSpacingProps,
+	useTypographyProps,
+} from '../../../../hooks/style-attributes';
+
+/**
+ * Product Rating Block Component.
+ *
+ * @param {Object} props             Incoming props.
+ * @param {string} [props.className] CSS Class name for the component.
+ * @return {*} The component.
+ */
+const Block = ( props ) => {
+	const { parentClassName } = useInnerBlockLayoutContext();
+	const { product } = useProductDataContext();
+	const rating = getAverageRating( product );
+	const colorProps = useColorProps( props );
+	const typographyProps = useTypographyProps( props );
+	const spacingProps = useSpacingProps( props );
+
+	if ( ! rating ) {
+		return null;
+	}
+
+	const starStyle = {
+		width: ( rating / 5 ) * 100 + '%',
+	};
+
+	const ratingText = sprintf(
+		/* translators: %f is referring to the average rating value */
+		__( 'Rated %f out of 5', 'woocommerce' ),
+		rating
+	);
+
+	const reviews = getRatingCount( product );
+	const ratingHTML = {
+		__html: sprintf(
+			/* translators: %1$s is referring to the average rating value, %2$s is referring to the number of ratings */
+			_n(
+				'Rated %1$s out of 5 based on %2$s customer rating',
+				'Rated %1$s out of 5 based on %2$s customer ratings',
+				reviews,
+				'woocommerce'
+			),
+			sprintf( '<strong class="rating">%f</strong>', rating ),
+			sprintf( '<span class="rating">%d</span>', reviews )
+		),
+	};
+
+	return (
+		<div
+			className={ classnames(
+				colorProps.className,
+				'wc-block-components-product-rating',
+				{
+					[ `${ parentClassName }__product-rating` ]: parentClassName,
+				}
+			) }
+			style={ {
+				...colorProps.style,
+				...typographyProps.style,
+				...spacingProps.style,
+			} }
+		>
+			<div
+				className={ classnames(
+					'wc-block-components-product-rating__stars',
+					`${ parentClassName }__product-rating__stars`
+				) }
+				role="img"
+				aria-label={ ratingText }
+			>
+				<span
+					style={ starStyle }
+					dangerouslySetInnerHTML={ ratingHTML }
+				/>
+			</div>
+		</div>
+	);
+};
+
+const getAverageRating = ( product ) => {
+	const rating = parseFloat( product.average_rating );
+
+	return Number.isFinite( rating ) && rating > 0 ? rating : 0;
+};
+
+const getRatingCount = ( product ) => {
+	const count = parseInt( product.review_count, 10 );
+
+	return Number.isFinite( count ) && count > 0 ? count : 0;
+};
+
+Block.propTypes = {
+	className: PropTypes.string,
+};
+
+export default withProductDataContext( Block );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/constants.js

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { starEmpty, Icon } from '@wordpress/icons';
+
+export const BLOCK_TITLE = __(
+	'Product Rating',
+	'woocommerce'
+);
+export const BLOCK_ICON = (
+	<Icon
+		icon={ starEmpty }
+		className="wc-block-editor-components-block-icon"
+	/>
+);
+export const BLOCK_DESCRIPTION = __(
+	'Display the average rating of a product.',
+	'woocommerce'
+);

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/edit.js

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import withProductSelector from '../shared/with-product-selector';
+import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+
+const Edit = ( { attributes } ) => {
+	const blockProps = useBlockProps( {
+		className: 'wp-block-woocommerce-product-rating',
+	} );
+
+	return (
+		<div { ...blockProps }>
+			<Block { ...attributes } />
+		</div>
+	);
+};
+export default withProductSelector( {
+	icon: BLOCK_ICON,
+	label: BLOCK_TITLE,
+	description: __(
+		'Choose a product to display its rating.',
+		'woocommerce'
+	),
+} )( Edit );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/index.js

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+import attributes from './attributes';
+import edit from './edit';
+import {
+	BLOCK_TITLE as title,
+	BLOCK_ICON as icon,
+	BLOCK_DESCRIPTION as description,
+} from './constants';
+import { supports } from './support';
+import { Save } from './save';
+
+const blockConfig = {
+	apiVersion: 2,
+	title,
+	description,
+	icon: { src: icon },
+	attributes,
+	supports,
+	edit,
+	save: Save,
+};
+
+registerBlockType( 'woocommerce/product-rating', {
+	...sharedConfig,
+	...blockConfig,
+} );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/save.tsx

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import classnames from 'classnames';
+
+type Props = {
+	attributes: Record< string, unknown > & {
+		className?: string;
+	};
+};
+
+export const Save = ( { attributes }: Props ): JSX.Element => {
+	return (
+		<div
+			{ ...useBlockProps.save( {
+				className: classnames( 'is-loading', attributes.className ),
+			} ) }
+		/>
+	);
+};

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/style.scss

@@ -0,0 +1,53 @@
+.wc-block-components-product-rating {
+	display: block;
+	margin-top: 0;
+	margin-bottom: $gap-small;
+
+	&__stars {
+		overflow: hidden;
+		position: relative;
+		width: 5.3em;
+		height: 1.618em;
+		line-height: 1.618;
+		font-size: 1em;
+		/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+		font-family: star;
+		font-weight: 400;
+		margin: 0 auto;
+		text-align: left;
+
+		&::before {
+			content: "\53\53\53\53\53";
+			top: 0;
+			left: 0;
+			right: 0;
+			position: absolute;
+			opacity: 0.5;
+			color: inherit;
+			white-space: nowrap;
+		}
+		span {
+			overflow: hidden;
+			top: 0;
+			left: 0;
+			right: 0;
+			position: absolute;
+			color: inherit;
+			padding-top: 1.5em;
+		}
+		span::before {
+			content: "\53\53\53\53\53";
+			top: 0;
+			left: 0;
+			right: 0;
+			position: absolute;
+			color: inherit;
+			white-space: nowrap;
+		}
+	}
+}
+.wc-block-single-product {
+	.wc-block-components-product-rating__stars {
+		margin: 0;
+	}
+}

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/support.js

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { hasSpacingStyleSupport } from '../../../../utils/global-style';
+
+export const supports = {
+	...( isFeaturePluginBuild() && {
+		color: {
+			text: true,
+			background: false,
+			link: false,
+			__experimentalSkipSerialization: true,
+		},
+		typography: {
+			fontSize: true,
+			__experimentalSkipSerialization: true,
+		},
+		...( hasSpacingStyleSupport() && {
+			spacing: {
+				margin: true,
+				__experimentalSkipSerialization: true,
+			},
+		} ),
+		__experimentalSelector: '.wc-block-components-product-rating',
+	} ),
+};

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/attributes.js

@@ -0,0 +1,8 @@
+export const blockAttributes = {
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+export default blockAttributes;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/block.js

@@ -0,0 +1,87 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import { __ } from '@wordpress/i18n';
+import classnames from 'classnames';
+import Label from '@woocommerce/base-components/label';
+import {
+	useInnerBlockLayoutContext,
+	useProductDataContext,
+} from '@woocommerce/shared-context';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import {
+	useBorderProps,
+	useColorProps,
+	useSpacingProps,
+	useTypographyProps,
+} from '../../../../hooks/style-attributes';
+
+/**
+ * Product Sale Badge Block Component.
+ *
+ * @param {Object} props             Incoming props.
+ * @param {string} [props.className] CSS Class name for the component.
+ * @param {string} [props.align]     Alignment of the badge.
+ * @return {*} The component.
+ */
+const Block = ( props ) => {
+	const { className, align } = props;
+	const { parentClassName } = useInnerBlockLayoutContext();
+	const { product } = useProductDataContext();
+	const borderProps = useBorderProps( props );
+	const colorProps = useColorProps( props );
+
+	const typographyProps = useTypographyProps( props );
+	const spacingProps = useSpacingProps( props );
+
+	if ( ! product.id || ! product.on_sale ) {
+		return null;
+	}
+
+	const alignClass =
+		typeof align === 'string'
+			? `wc-block-components-product-sale-badge--align-${ align }`
+			: '';
+
+	return (
+		<div
+			className={ classnames(
+				'wc-block-components-product-sale-badge',
+				className,
+				alignClass,
+				{
+					[ `${ parentClassName }__product-onsale` ]: parentClassName,
+				},
+				colorProps.className,
+				borderProps.className
+			) }
+			style={ {
+				...colorProps.style,
+				...borderProps.style,
+				...typographyProps.style,
+				...spacingProps.style,
+			} }
+		>
+			<Label
+				label={ __( 'Sale', 'woocommerce' ) }
+				screenReaderLabel={ __(
+					'Product on sale',
+					'woocommerce'
+				) }
+			/>
+		</div>
+	);
+};
+
+Block.propTypes = {
+	className: PropTypes.string,
+	align: PropTypes.string,
+};
+
+export default withProductDataContext( Block );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/constants.js

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { percent, Icon } from '@wordpress/icons';
+
+export const BLOCK_TITLE = __(
+	'On-Sale Badge',
+	'woocommerce'
+);
+export const BLOCK_ICON = (
+	<Icon icon={ percent } className="wc-block-editor-components-block-icon" />
+);
+export const BLOCK_DESCRIPTION = __(
+	'Displays an on-sale badge if the product is on-sale.',
+	'woocommerce'
+);

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/edit.js

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import withProductSelector from '../shared/with-product-selector';
+import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+
+const Edit = ( { attributes } ) => {
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<Block { ...attributes } />
+		</div>
+	);
+};
+
+export default withProductSelector( {
+	icon: BLOCK_ICON,
+	label: BLOCK_TITLE,
+	description: __(
+		'Choose a product to display its sale-badge.',
+		'woocommerce'
+	),
+} )( Edit );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/index.js

@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+import attributes from './attributes';
+import edit from './edit';
+import {
+	BLOCK_TITLE as title,
+	BLOCK_ICON as icon,
+	BLOCK_DESCRIPTION as description,
+} from './constants';
+import { Save } from './save';
+import { hasSpacingStyleSupport } from '../../../../utils/global-style';
+
+const blockConfig = {
+	title,
+	description,
+	icon: { src: icon },
+	apiVersion: 2,
+	supports: {
+		html: false,
+		...( isFeaturePluginBuild() && {
+			color: {
+				gradients: true,
+				background: true,
+				link: false,
+				__experimentalSkipSerialization: true,
+			},
+			typography: {
+				fontSize: true,
+				__experimentalSkipSerialization: true,
+			},
+			__experimentalBorder: {
+				color: true,
+				radius: true,
+				width: true,
+				__experimentalSkipSerialization: true,
+			},
+			...( hasSpacingStyleSupport() && {
+				spacing: {
+					padding: true,
+					__experimentalSkipSerialization: true,
+				},
+			} ),
+			__experimentalSelector: '.wc-block-components-product-sale-badge',
+		} ),
+	},
+	attributes,
+	edit,
+	save: Save,
+};
+
+registerBlockType( 'woocommerce/product-sale-badge', {
+	...sharedConfig,
+	...blockConfig,
+} );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/save.tsx

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import classnames from 'classnames';
+
+type Props = {
+	attributes: Record< string, unknown > & {
+		className?: string;
+	};
+};
+
+export const Save = ( { attributes }: Props ): JSX.Element => {
+	return (
+		<div
+			{ ...useBlockProps.save( {
+				className: classnames( 'is-loading', attributes.className ),
+			} ) }
+		/>
+	);
+};

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/style.scss

@@ -0,0 +1,23 @@
+.wc-block-components-product-sale-badge {
+	margin: 0 auto $gap-small;
+	@include font-size(small);
+	padding: em($gap-smallest) em($gap-small);
+	display: inline-block;
+	width: auto;
+	border: 1px solid #43454b;
+	border-radius: 3px;
+	box-sizing: border-box;
+	color: #43454b;
+	background: #fff;
+	text-align: center;
+	text-transform: uppercase;
+	font-weight: 600;
+	z-index: 9;
+	position: static;
+
+	span {
+		color: inherit;
+		background-color: inherit;
+	}
+
+}

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/save.js

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+const save = ( { attributes } ) => {
+	return (
+		<div className={ classnames( 'is-loading', attributes.className ) } />
+	);
+};
+
+export default save;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/shared/config.tsx

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Icon, grid } from '@wordpress/icons';
+import { isExperimentalBuild } from '@woocommerce/block-settings';
+import type { BlockConfiguration } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import save from '../save';
+
+/**
+ * Holds default config for this collection of blocks.
+ * attributes and title are omitted here as these are added on an individual block level.
+ */
+const sharedConfig: Omit< BlockConfiguration, 'attributes' | 'title' > = {
+	category: 'woocommerce-product-elements',
+	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
+	icon: {
+		src: (
+			<Icon
+				icon={ grid }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	supports: {
+		html: false,
+	},
+	parent: isExperimentalBuild()
+		? undefined
+		: [ '@woocommerce/all-products', '@woocommerce/single-product' ],
+	save,
+	deprecated: [
+		{
+			attributes: {},
+			save(): null {
+				return null;
+			},
+		},
+	],
+};
+
+export default sharedConfig;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/shared/editor.scss

@@ -0,0 +1,11 @@
+.wc-atomic-blocks-product__selection {
+	width: 100%;
+}
+.wc-atomic-blocks-product__edit-card {
+	padding: 16px;
+	border-top: 1px solid $gray-200;
+
+	.wc-atomic-blocks-product__edit-card-title {
+		margin: 0 0 $gap;
+	}
+}

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/shared/with-product-selector.js

@@ -0,0 +1,90 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import ProductControl from '@woocommerce/editor-components/product-control';
+import { Placeholder, Button, ToolbarGroup } from '@wordpress/components';
+import { BlockControls } from '@wordpress/block-editor';
+import TextToolbarButton from '@woocommerce/editor-components/text-toolbar-button';
+import { useProductDataContext } from '@woocommerce/shared-context';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+
+/**
+ * This HOC shows a product selection interface if context is not present in the editor.
+ *
+ * @param {Object} selectorArgs Options for the selector.
+ *
+ */
+const withProductSelector = ( selectorArgs ) => ( OriginalComponent ) => {
+	return ( props ) => {
+		const productDataContext = useProductDataContext();
+		const { attributes, setAttributes } = props;
+		const { productId } = attributes;
+		const [ isEditing, setIsEditing ] = useState( ! productId );
+
+		if ( productDataContext.hasContext ) {
+			return <OriginalComponent { ...props } />;
+		}
+
+		return (
+			<>
+				{ isEditing ? (
+					<Placeholder
+						icon={ selectorArgs.icon || '' }
+						label={ selectorArgs.label || '' }
+						className="wc-atomic-blocks-product"
+					>
+						{ !! selectorArgs.description && (
+							<div>{ selectorArgs.description }</div>
+						) }
+						<div className="wc-atomic-blocks-product__selection">
+							<ProductControl
+								selected={ productId || 0 }
+								showVariations
+								onChange={ ( value = [] ) => {
+									setAttributes( {
+										productId: value[ 0 ]
+											? value[ 0 ].id
+											: 0,
+									} );
+								} }
+							/>
+							<Button
+								isSecondary
+								disabled={ ! productId }
+								onClick={ () => {
+									setIsEditing( false );
+								} }
+							>
+								{ __( 'Done', 'woocommerce' ) }
+							</Button>
+						</div>
+					</Placeholder>
+				) : (
+					<>
+						<BlockControls>
+							<ToolbarGroup>
+								<TextToolbarButton
+									onClick={ () => setIsEditing( true ) }
+								>
+									{ __(
+										'Switch product…',
+										'woocommerce'
+									) }
+								</TextToolbarButton>
+							</ToolbarGroup>
+						</BlockControls>
+						<OriginalComponent { ...props } />
+					</>
+				) }
+			</>
+		);
+	};
+};
+
+export default withProductSelector;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/attributes.js

@@ -0,0 +1,8 @@
+export const blockAttributes = {
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+export default blockAttributes;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/block.js

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

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/constants.js

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { barcode } from '@woocommerce/icons';
+import { Icon } from '@wordpress/icons';
+
+export const BLOCK_TITLE = __( 'Product SKU', 'woocommerce' );
+export const BLOCK_ICON = (
+	<Icon icon={ barcode } className="wc-block-editor-components-block-icon" />
+);
+export const BLOCK_DESCRIPTION = __(
+	'Display the SKU of a product.',
+	'woocommerce'
+);

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/edit.js

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import EditProductLink from '@woocommerce/editor-components/edit-product-link';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import withProductSelector from '../shared/with-product-selector';
+import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+
+const Edit = ( { attributes } ) => {
+	return (
+		<>
+			<EditProductLink />
+			<Block { ...attributes } />
+		</>
+	);
+};
+
+export default withProductSelector( {
+	icon: BLOCK_ICON,
+	label: BLOCK_TITLE,
+	description: __(
+		'Choose a product to display its SKU.',
+		'woocommerce'
+	),
+} )( Edit );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/index.js

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import { registerExperimentalBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+import attributes from './attributes';
+import edit from './edit';
+import {
+	BLOCK_TITLE as title,
+	BLOCK_ICON as icon,
+	BLOCK_DESCRIPTION as description,
+} from './constants';
+
+const blockConfig = {
+	title,
+	description,
+	icon: { src: icon },
+	attributes,
+	edit,
+};
+
+registerExperimentalBlockType( 'woocommerce/product-sku', {
+	...sharedConfig,
+	...blockConfig,
+} );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/style.scss

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

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/stock-indicator/attributes.js

@@ -0,0 +1,8 @@
+export const blockAttributes = {
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+export default blockAttributes;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/stock-indicator/block.js

@@ -0,0 +1,94 @@
+/**
+ * External dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import {
+	useInnerBlockLayoutContext,
+	useProductDataContext,
+} from '@woocommerce/shared-context';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import {
+	useColorProps,
+	useTypographyProps,
+} from '../../../../hooks/style-attributes';
+
+/**
+ * Product Stock Indicator Block Component.
+ *
+ * @param {Object} props             Incoming props.
+ * @param {string} [props.className] CSS Class name for the component.
+ * @return {*} The component.
+ */
+const Block = ( props ) => {
+	const { className } = props;
+	const { parentClassName } = useInnerBlockLayoutContext();
+	const { product } = useProductDataContext();
+	const colorProps = useColorProps( props );
+	const typographyProps = useTypographyProps( props );
+
+	if ( ! product.id || ! product.is_purchasable ) {
+		return null;
+	}
+
+	const inStock = !! product.is_in_stock;
+	const lowStock = product.low_stock_remaining;
+	const isBackordered = product.is_on_backorder;
+
+	return (
+		<div
+			className={ classnames(
+				className,
+				colorProps.className,
+				'wc-block-components-product-stock-indicator',
+				{
+					[ `${ parentClassName }__stock-indicator` ]:
+						parentClassName,
+					'wc-block-components-product-stock-indicator--in-stock':
+						inStock,
+					'wc-block-components-product-stock-indicator--out-of-stock':
+						! inStock,
+					'wc-block-components-product-stock-indicator--low-stock':
+						!! lowStock,
+					'wc-block-components-product-stock-indicator--available-on-backorder':
+						!! isBackordered,
+				}
+			) }
+			style={ { ...colorProps.style, ...typographyProps.style } }
+		>
+			{ lowStock
+				? lowStockText( lowStock )
+				: stockText( inStock, isBackordered ) }
+		</div>
+	);
+};
+
+const lowStockText = ( lowStock ) => {
+	return sprintf(
+		/* translators: %d stock amount (number of items in stock for product) */
+		__( '%d left in stock', 'woocommerce' ),
+		lowStock
+	);
+};
+
+const stockText = ( inStock, isBackordered ) => {
+	if ( isBackordered ) {
+		return __( 'Available on backorder', 'woocommerce' );
+	}
+
+	return inStock
+		? __( 'In Stock', 'woocommerce' )
+		: __( 'Out of Stock', 'woocommerce' );
+};
+
+Block.propTypes = {
+	className: PropTypes.string,
+};
+
+export default withProductDataContext( Block );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/stock-indicator/constants.js

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { box, Icon } from '@wordpress/icons';
+
+export const BLOCK_TITLE = __(
+	'Product Stock Indicator',
+	'woocommerce'
+);
+export const BLOCK_ICON = (
+	<Icon icon={ box } className="wc-block-editor-components-block-icon" />
+);
+export const BLOCK_DESCRIPTION = __(
+	'Display product stock status.',
+	'woocommerce'
+);

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/stock-indicator/edit.js

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import EditProductLink from '@woocommerce/editor-components/edit-product-link';
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import withProductSelector from '../shared/with-product-selector';
+import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+
+const Edit = ( { attributes } ) => {
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<EditProductLink />
+			<Block { ...attributes } />
+		</div>
+	);
+};
+
+export default withProductSelector( {
+	icon: BLOCK_ICON,
+	label: BLOCK_TITLE,
+	description: __(
+		'Choose a product to display its stock.',
+		'woocommerce'
+	),
+} )( Edit );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/stock-indicator/index.js

@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import { registerExperimentalBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+import attributes from './attributes';
+import edit from './edit';
+import { Save } from './save';
+import { supports } from './supports';
+
+import {
+	BLOCK_TITLE as title,
+	BLOCK_ICON as icon,
+	BLOCK_DESCRIPTION as description,
+} from './constants';
+
+const blockConfig = {
+	apiVersion: 2,
+	title,
+	description,
+	icon: { src: icon },
+	attributes,
+	supports,
+	edit,
+	save: Save,
+};
+
+registerExperimentalBlockType( 'woocommerce/product-stock-indicator', {
+	...sharedConfig,
+	...blockConfig,
+} );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/stock-indicator/save.tsx

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import classnames from 'classnames';
+
+type Props = {
+	attributes: Record< string, unknown > & {
+		className?: string;
+	};
+};
+
+export const Save = ( { attributes }: Props ): JSX.Element => {
+	return (
+		<div
+			{ ...useBlockProps.save( {
+				className: classnames( 'is-loading', attributes.className ),
+			} ) }
+		/>
+	);
+};

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/stock-indicator/style.scss

@@ -0,0 +1,6 @@
+.wc-block-components-product-stock-indicator {
+	margin-top: 0;
+	margin-bottom: em($gap-small);
+	display: block;
+	@include font-size(small);
+}

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/stock-indicator/supports.js

@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+
+export const supports = {
+	...( isFeaturePluginBuild() && {
+		color: {
+			text: true,
+			background: false,
+			link: false,
+		},
+		typography: {
+			fontSize: true,
+		},
+		__experimentalSelector: '.wc-block-components-product-stock-indicator',
+	} ),
+};

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/summary/attributes.js

@@ -0,0 +1,8 @@
+export const blockAttributes = {
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+export default blockAttributes;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/summary/block.js

@@ -0,0 +1,88 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Summary from '@woocommerce/base-components/summary';
+import { blocksConfig } from '@woocommerce/block-settings';
+
+import {
+	useInnerBlockLayoutContext,
+	useProductDataContext,
+} from '@woocommerce/shared-context';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import {
+	useColorProps,
+	useTypographyProps,
+} from '../../../../hooks/style-attributes';
+
+/**
+ * Product Summary Block Component.
+ *
+ * @param {Object} props             Incoming props.
+ * @param {string} [props.className] CSS Class name for the component.
+ * @return {*} The component.
+ */
+const Block = ( props ) => {
+	const { className } = props;
+
+	const { parentClassName } = useInnerBlockLayoutContext();
+	const { product } = useProductDataContext();
+	const colorProps = useColorProps( props );
+	const typographyProps = useTypographyProps( props );
+
+	if ( ! product ) {
+		return (
+			<div
+				className={ classnames(
+					className,
+					`wc-block-components-product-summary`,
+					{
+						[ `${ parentClassName }__product-summary` ]:
+							parentClassName,
+					}
+				) }
+			/>
+		);
+	}
+
+	const source = product.short_description
+		? product.short_description
+		: product.description;
+
+	if ( ! source ) {
+		return null;
+	}
+
+	return (
+		<Summary
+			className={ classnames(
+				className,
+				colorProps.className,
+				`wc-block-components-product-summary`,
+				{
+					[ `${ parentClassName }__product-summary` ]:
+						parentClassName,
+				}
+			) }
+			source={ source }
+			maxLength={ 150 }
+			countType={ blocksConfig.wordCountType || 'words' }
+			style={ {
+				...colorProps.style,
+				...typographyProps.style,
+			} }
+		/>
+	);
+};
+
+Block.propTypes = {
+	className: PropTypes.string,
+};
+
+export default withProductDataContext( Block );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/summary/constants.js

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { page, Icon } from '@wordpress/icons';
+
+export const BLOCK_TITLE = __(
+	'Product Summary',
+	'woocommerce'
+);
+export const BLOCK_ICON = (
+	<Icon icon={ page } className="wc-block-editor-components-block-icon" />
+);
+export const BLOCK_DESCRIPTION = __(
+	'Display a short description about a product.',
+	'woocommerce'
+);

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/summary/edit.js

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import withProductSelector from '../shared/with-product-selector';
+import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+import './editor.scss';
+
+const Edit = ( { attributes } ) => {
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<Block { ...attributes } />
+		</div>
+	);
+};
+
+export default withProductSelector( {
+	icon: BLOCK_ICON,
+	label: BLOCK_TITLE,
+	description: __(
+		'Choose a product to display its short description.',
+		'woocommerce'
+	),
+} )( Edit );