Merge branch 'trunk' into fix/use-main-element-for-cart-and-checkout-…

…templates

assets/css/abstracts/_colors.scss

@@ -19,3 +19,4 @@ $image-placeholder-border-color: #f2f2f2;
 // Universal colors for use on the frontend, currently being applied to checkout blocks.
 $universal-border: rgba(17, 17, 17, 0.3); // Used for form step borders.
 $universal-border-light: rgba(17, 17, 17, 0.115); // e7e7e7 on white.
+$universal-body-low-emphasis: rgba(17, 17, 17, 0.5); // Used for low emphasis text such as input labels.

assets/js/base/components/cart-checkout/form-step/style.scss

@@ -29,11 +29,11 @@
 }
 
 .wc-block-components-checkout-step__content > * {
-	margin-bottom: em($gap);
+	margin-bottom: $gap;
 }
 .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__content > :last-child {
 	margin-bottom: 0;
-	padding-bottom: em($gap-large);
+	padding-bottom: $gap;
 }
 
 .wc-block-components-checkout-step__heading {

assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss

@@ -25,10 +25,6 @@
 		padding-bottom: em($gap-small);
 	}
 
-	.wc-block-components-radio-control {
-		margin-bottom: em($gap-small);
-	}
-
 	.wc-block-components-radio-control,
 	.wc-block-components-radio-control__option-layout {
 		padding-bottom: 0;

assets/js/base/components/combobox/style.scss

@@ -6,6 +6,7 @@
 
 		.components-base-control__field {
 			@include reset-box();
+			position: relative;
 		}
 		.components-combobox-control__suggestions-container {
 			@include reset-typography();
@@ -15,7 +16,8 @@
 		input.components-combobox-control__input {
 			@include reset-typography();
 			@include font-size(regular);
-
+			padding: em($gap + $gap-smaller) em($gap-smaller) em($gap-smaller);
+			line-height: em($gap);
 			box-sizing: border-box;
 			outline: inherit;
 			border: 1px solid $input-border-gray;
@@ -24,10 +26,7 @@
 			color: $input-text-active;
 			font-family: inherit;
 			font-weight: normal;
-			height: 3em;
 			letter-spacing: inherit;
-			line-height: 1;
-			padding: em($gap-large) $gap em($gap-smallest);
 			text-align: left;
 			text-overflow: ellipsis;
 			text-transform: none;
@@ -67,7 +66,7 @@
 			background-color: $select-dropdown-light;
 			border: 1px solid $input-border-gray;
 			border-top: 0;
-			margin: 3em 0 0 0;
+			margin: 3em 0 0 -1px;
 			padding: 0;
 			max-height: 300px;
 			min-width: 100%;
@@ -110,14 +109,16 @@
 		label.components-base-control__label {
 			@include reset-typography();
 			@include font-size(regular);
-			line-height: 1.375; // =22px when font-size is 16px.
 			position: absolute;
-			transform: translateY(0.75em);
+			transform: translateY(em($gap));
+			line-height: 1.25; // =20px when font-size is 16px.
+			left: em($gap-smaller);
+			top: 0;
 			transform-origin: top left;
 			transition: all 200ms ease;
-			color: $gray-700;
+			color: $universal-body-low-emphasis;
 			z-index: 1;
-			margin: 0 0 0 #{$gap + 1px};
+			margin: 0;
 			overflow: hidden;
 			text-overflow: ellipsis;
 			max-width: calc(100% - #{2 * $gap});
@@ -132,10 +133,16 @@
 		}
 	}
 
+	.wc-block-components-combobox-control:has(input:-webkit-autofill) {
+		label {
+			transform: translateY(em($gap-smaller)) scale(0.875);
+		}
+	}
+
 	&.is-active,
 	&:focus-within {
 		.wc-block-components-combobox-control label.components-base-control__label {
-			transform: translateY(#{$gap-smallest}) scale(0.75);
+			transform: translateY(em($gap-smaller)) scale(0.875);
 		}
 	}
 

assets/js/base/components/country-input/style.scss

@@ -3,7 +3,7 @@
 @import "node_modules/wordpress-components/src/combobox-control/style";
 
 .wc-block-components-country-input {
-	margin-top: em($gap-large);
+	margin-top: $gap;
 
 	// Fixes width in the editor.
 	.components-flex {

assets/js/base/components/state-input/style.scss

@@ -1,5 +1,5 @@
 .wc-block-components-state-input {
-	margin-top: em($gap-large);
+	margin-top: $gap;
 
 	// Fixes width in the editor.
 	.components-flex {

assets/js/blocks/checkout/address-card/style.scss

@@ -1,7 +1,7 @@
 .wc-block-components-address-card {
 	border: 1px solid $universal-border;
 	@include font-size(regular);
-	padding: $gap;
+	padding: em($gap);
 	margin: 0;
 	border-radius: $universal-border-radius;
 	display: flex;

assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss

@@ -22,7 +22,7 @@
 			.wc-block-components-text-input,
 			.wc-block-components-country-input,
 			.wc-block-components-state-input {
-				flex: 0 0 calc(50% - #{$gap-small});
+				flex: 0 0 calc(50% - #{$gap-smaller});
 				box-sizing: border-box;
 
 				&:nth-of-type(2),

assets/js/blocks/product-gallery/block.json

@@ -23,7 +23,6 @@
 		"hoverZoom": "hoverZoom",
 		"fullScreenOnClick": "fullScreenOnClick"
 	},
-	"usesContext": [ "postId" ],
 	"attributes": {
 		"thumbnailsPosition": {
 			"type": "string",
@@ -62,5 +61,6 @@
 			"default": "standard"
 		}
 	},
-	"viewScript": "wc-product-gallery-frontend"
+	"viewScript": "wc-product-gallery-frontend",
+	"example": {}
 }

packages/checkout/components/checkbox-control/style.scss

@@ -9,6 +9,7 @@
 		position: relative;
 		cursor: pointer;
 		@include font-size(small);
+		margin-bottom: 0 !important;
 
 		input[type="checkbox"] {
 			cursor: inherit;

packages/checkout/components/text-input/style.scss

@@ -1,22 +1,22 @@
 .wc-block-components-form .wc-block-components-text-input,
 .wc-block-components-text-input {
 	position: relative;
-	margin-top: em($gap-large);
+	margin-top: $gap;
 	white-space: nowrap;
 
 	label {
 		@include reset-color();
 		@include reset-typography();
 		@include font-size(regular);
 		position: absolute;
-		transform: translateY(0.75em);
-		left: 0;
+		transform: translateY(em($gap));
+		line-height: 1.25; // =20px when font-size is 16px.
+		left: em($gap-smaller + 1px);
 		top: 0;
 		transform-origin: top left;
-		line-height: 1.375; // =22px when font-size is 16px.
-		color: $gray-700;
-		transition: transform 200ms ease;
-		margin: 0 0 0 #{$gap + 1px};
+		color: $universal-body-low-emphasis;
+		transition: all 200ms ease;
+		margin: 0;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		max-width: calc(100% - #{2 * $gap});
@@ -30,12 +30,13 @@
 		}
 	}
 
-	input:-webkit-autofill + label {
-		transform: translateY(#{$gap-smallest}) scale(0.75);
-	}
-
-	&.is-active label {
-		transform: translateY(#{$gap-smallest}) scale(0.75);
+	input[type="number"] {
+		-moz-appearance: textfield;
+		&::-webkit-outer-spin-button,
+		&::-webkit-inner-spin-button {
+			appearance: none;
+			margin: 0;
+		}
 	}
 
 	input[type="tel"],
@@ -44,18 +45,16 @@
 	input[type="number"],
 	input[type="email"] {
 		@include font-size(regular);
-		background-color: #fff;
-		padding: em($gap-small) 0;
-		text-indent: $gap;
+		padding: em($gap);
+		line-height: em($gap);
+		width: 100%;
 		border-radius: $universal-border-radius;
 		border: 1px solid $input-border-gray;
-		width: 100%;
-		line-height: 1.375; // =22px when font-size is 16px.
 		font-family: inherit;
 		margin: 0;
 		box-sizing: border-box;
-		height: 3em;
 		min-height: 0;
+		background-color: #fff;
 		color: $input-text-active;
 
 		&:focus {
@@ -78,22 +77,18 @@
 		}
 	}
 
-	input[type="number"] {
-		-moz-appearance: textfield;
-
-		&::-webkit-outer-spin-button,
-		&::-webkit-inner-spin-button {
-			appearance: none;
-			margin: 0;
-		}
-	}
-
+	input:-webkit-autofill,
 	&.is-active input[type="tel"],
 	&.is-active input[type="url"],
 	&.is-active input[type="text"],
 	&.is-active input[type="number"],
 	&.is-active input[type="email"] {
-		padding: em($gap-large) 0 em($gap-smallest);
+		padding: em($gap + $gap-smaller) em($gap-smaller) em($gap-smaller);
+	}
+
+	&.is-active label,
+	input:-webkit-autofill + label {
+		transform: translateY(em($gap-smaller)) scale(0.875);
 	}
 
 	&.has-error input {

patterns/banner.php

@@ -8,30 +8,35 @@
 use Automattic\WooCommerce\Blocks\Patterns\PatternsHelper;
 $content = PatternsHelper::get_pattern_content( 'woocommerce-blocks/banner' );
 $images  = PatternsHelper::get_pattern_images( 'woocommerce-blocks/banner' );
+
+$banner_title       = $content['titles'][0]['default'] ?? '';
+$banner_button      = $content['buttons'][0]['default'] ?? '';
+$first_description  = $content['descriptions'][0]['default'] ?? '';
+$second_description = $content['descriptions'][1]['default'] ?? '';
 ?>
 
 <!-- wp:columns {"verticalAlignment":null,"align":"wide","style":{"color":{"background":"#caf0fa"}}} -->
 <div class="wp-block-columns alignwide has-background" style="background-color:#caf0fa">
 	<!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"}}}} -->
 	<div class="wp-block-column is-vertically-aligned-center" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)">
 		<!-- wp:paragraph {"style":{"color":{"text":"#005cc9"},"typography":{"fontSize":"18px"},"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
-		<p class="has-text-color" style="color:#005cc9;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;font-size:18px"><strong><?php echo esc_html( $content['descriptions'][0]['default'] ); ?></strong> </p>
+		<p class="has-text-color" style="color:#005cc9;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;font-size:18px"><strong><?php echo esc_html( $first_description ); ?></strong> </p>
 		<!-- /wp:paragraph -->
 
 		<!-- wp:paragraph {"style":{"typography":{"fontSize":"48px"},"color":{"text":"#043553"},"spacing":{"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"padding":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
-		<p class="has-text-color" style="color:#043553;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;font-size:48px"><strong><?php echo esc_html( $content['titles'][0]['default'] ); ?></strong> </p>
+		<p class="has-text-color" style="color:#043553;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;font-size:48px"><strong><?php echo esc_html( $banner_title ); ?></strong> </p>
 		<!-- /wp:paragraph -->
 
 		<!-- wp:paragraph {"style":{"color":{"text":"#075586"},"typography":{"fontSize":"24px"},"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
-		<p class="has-text-color" style="color:#075586;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;font-size:24px"><?php echo esc_html( $content['descriptions'][1]['default'] ); ?></p>
+		<p class="has-text-color" style="color:#075586;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;font-size:24px"><?php echo esc_html( $second_description ); ?></p>
 		<!-- /wp:paragraph -->
 
 		<!-- wp:buttons {"style":{"spacing":{"blockGap":"0","margin":{"top":"20px","bottom":"0"}}}} -->
 		<div class="wp-block-buttons" style="margin-top:20px;margin-bottom:0">
 			<!-- wp:button {"style":{"typography":{"fontSize":"16px"},"color":{"text":"#000000","background":"#ffffff"},"border":{"width":"0px","style":"none"}},"className":"is-style-fill"} -->
 			<div class="wp-block-button has-custom-font-size is-style-fill" style="font-size:16px">
 				<a class="wp-block-button__link has-text-color has-background wp-element-button" href="<?php echo esc_url( get_permalink( wc_get_page_id( 'shop' ) ) ); ?>" style="border-style:none;border-width:0px;color:#000000;background-color:#ffffff">
-					<?php echo esc_html( $content['buttons'][0]['default'] ); ?>
+					<?php echo esc_html( $banner_button ); ?>
 				</a>
 			</div>
 			<!-- /wp:button -->

patterns/discount-banner-with-image.php

@@ -8,6 +8,8 @@
 use Automattic\WooCommerce\Blocks\Patterns\PatternsHelper;
 $content = PatternsHelper::get_pattern_content( 'woocommerce-blocks/discount-banner-with-image' );
 $images  = PatternsHelper::get_pattern_images( 'woocommerce-blocks/discount-banner-with-image' );
+
+$description = $content['descriptions'][0]['default'] ?? '';
 ?>
 
 <!-- wp:columns {"verticalAlignment":"center","align":"wide","style":{"color":{"background":"#254094"},"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}}} -->
@@ -25,7 +27,7 @@
 			<!-- /wp:paragraph -->
 
 			<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"300","fontSize":"35px","lineHeight":"0"},"color":{"text":"#ffffff"},"spacing":{"margin":{"bottom":"40px"}}}} -->
-			<p class="has-text-color" style="color:#ffffff;margin-bottom:40px;font-size:35px;font-style:normal;font-weight:300;line-height:0"><?php echo esc_html( $content['descriptions'][0]['default'] ); ?></p>
+			<p class="has-text-color" style="color:#ffffff;margin-bottom:40px;font-size:35px;font-style:normal;font-weight:300;line-height:0"><?php echo esc_html( $description ); ?></p>
 			<!-- /wp:paragraph -->
 
 			<!-- wp:buttons -->

patterns/discount-banner.php

@@ -7,7 +7,8 @@
 
 use Automattic\WooCommerce\Blocks\Patterns\PatternsHelper;
 
-$content = PatternsHelper::get_pattern_content( 'woocommerce-blocks/discount-banner' );
+$content     = PatternsHelper::get_pattern_content( 'woocommerce-blocks/discount-banner' );
+$description = $content['descriptions'][0]['default'] ?? '';
 ?>
 
 <!-- wp:columns {"verticalAlignment":"center"} -->
@@ -23,7 +24,7 @@
 		<!-- /wp:paragraph -->
 
 		<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"300","fontSize":"35px"},"color":{"text":"#ffffff"}}} -->
-		<p class="has-text-color" style="color:#ffffff;font-size:35px;font-style:normal;font-weight:300"><?php echo esc_html( $content['descriptions'][0]['default'] ); ?></p>
+		<p class="has-text-color" style="color:#ffffff;font-size:35px;font-style:normal;font-weight:300"><?php echo esc_html( $description ); ?></p>
 		<!-- /wp:paragraph -->
 
 		<!-- wp:buttons -->

patterns/featured-category-cover-image.php

@@ -10,26 +10,30 @@
 $images  = PatternsHelper::get_pattern_images( 'woocommerce-blocks/featured-category-cover-image' );
 
 $image1 = PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/shop-jeans.png' );
+
+$category_title = $content['titles'][0]['default'] ?? '';
+$description    = $content['descriptions'][0]['default'] ?? '';
+$button         = $content['buttons'][0]['default'] ?? '';
 ?>
 <!-- wp:cover {"url":"<?php echo esc_url( $image1 ); ?>","dimRatio":50,"align":"full","style":{"spacing":{"padding":{"top":"3%","right":"0%","bottom":"10%","left":"5%"},"margin":{"top":"0","bottom":"0"},"blockGap":"1%"}},"layout":{"type":"default"}} -->
 <div class="wp-block-cover alignfull" style="margin-top:0;margin-bottom:0;padding-top:3%;padding-right:0%;padding-bottom:10%;padding-left:5%">
 	<span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span>
 	<img class="wp-block-cover__image-background" alt="" src="<?php echo esc_url( $image1 ); ?>" data-object-fit="cover"/>
 	<div class="wp-block-cover__inner-container">
 		<!-- wp:heading {"level":3} -->
-		<h3 class="wp-block-heading"><?php echo esc_html( $content['titles'][0]['default'] ); ?></h3>
+		<h3 class="wp-block-heading"><?php echo esc_html( $category_title ); ?></h3>
 		<!-- /wp:heading -->
 
 		<!-- wp:paragraph -->
-		<p><?php echo esc_html( $content['descriptions'][0]['default'] ); ?></p>
+		<p><?php echo esc_html( $description ); ?></p>
 		<!-- /wp:paragraph -->
 
 		<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}}} -->
 		<div class="wp-block-buttons" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30)">
 			<!-- wp:button -->
 			<div class="wp-block-button">
 				<a href="<?php echo esc_url( wc_get_page_permalink( 'shop' ) ); ?>" class="wp-block-button__link wp-element-button">
-					<?php echo esc_html( $content['buttons'][0]['default'] ); ?>
+					<?php echo esc_html( $button ); ?>
 				</a>
 			</div>
 			<!-- /wp:button -->

patterns/featured-category-focus.php

@@ -8,6 +8,8 @@
 use Automattic\WooCommerce\Blocks\Patterns\PatternsHelper;
 $content = PatternsHelper::get_pattern_content( 'woocommerce-blocks/featured-category-focus' );
 $images  = PatternsHelper::get_pattern_images( 'woocommerce-blocks/featured-category-focus' );
+
+$category_title = $content['titles'][0]['default'] ?? '';
 ?>
 
 <!-- wp:group {"align":"full","style":{"color":{"background":"#84bfe1"},"spacing":{"padding":{"top":"var:preset|spacing|70","right":"var:preset|spacing|70","bottom":"var:preset|spacing|70","left":"var:preset|spacing|70"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"center","flexWrap":"wrap"}} -->
@@ -19,7 +21,7 @@
 	<!-- /wp:image -->
 
 	<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#000000"}},"fontSize":"large"} -->
-	<p class="has-text-align-center has-text-color has-large-font-size" style="color:#000000"><?php echo esc_html( $content['titles'][0]['default'] ); ?></p>
+	<p class="has-text-align-center has-text-color has-large-font-size" style="color:#000000"><?php echo esc_html( $category_title ); ?></p>
 	<!-- /wp:paragraph -->
 
 	<!-- wp:buttons -->