Add Inner Block Rendering and Atomic Block Styles

assets/css/style.scss

@@ -1,3 +1,282 @@
 .wc-block-link-button {
 	@include link-button();
 }
+
+// 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 {
+		width: 100%;
+
+		&[hidden] {
+			display: none;
+		}
+	}
+}
+.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.2em;
+	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 {
+	word-break: break-word;
+	white-space: normal;
+	a,
+	button {
+		word-break: break-word;
+		white-space: normal;
+		margin: 0 auto !important;
+		display: inline-flex;
+		justify-content: center;
+
+		&.loading {
+			opacity: 0.25;
+		}
+
+		&::after {
+			margin-left: 0.5em;
+			display: inline-block;
+		}
+
+		&.added::after {
+			font-family: WooCommerce; /* stylelint-disable-line */
+			content: "\e017";
+		}
+
+		&.loading::after {
+			font-family: WooCommerce; /* stylelint-disable-line */
+			content: "\e031";
+			animation: spin 2s linear infinite;
+		}
+	}
+}
+.wc-block-grid__product-rating {
+	display: block;
+
+	.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";
+			top: 0;
+			left: 0;
+			right: 0;
+			position: absolute;
+			color: #000;
+			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 {
+	.wc-block-grid__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;
+	}
+}
+
+.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: #000;
+		font-size: 1.2em;
+	}
+
+	.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-layout .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;
+	}
+
+	// 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 {
+		position: absolute;
+		right: 4px;
+		top: 4px;
+		z-index: 1;
+	}
+
+	// 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;
+	}
+
+	@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);
+		}
+	}
+}