Fix layout issues after merges (https://github.com/woocommerce/woocommerce-blocks/pull/1968)

* Fix address form layout broken because select was occupying too much space

* Fix shipping rates appearing in the Checkout sidebar

* Center button text

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/button/style.scss

@@ -2,14 +2,16 @@
 .wc-block-cart,
 .wc-block-checkout {
 	.button.wc-block-button {
+		align-items: center;
 		background-color: #000 !important;
 		color: #fff !important;
-		display: block;
+		display: flex;
 		font-size: inherit;
 		font-weight: bold;
 		height: 48px; // same height as text-input
+		justify-content: center;
 		line-height: 1;
-		padding: $gap-small;
+		padding: 0 $gap-small;
 		text-align: center;
 		text-decoration: none;
 		text-transform: none;

plugins/woocommerce-blocks/assets/js/base/components/select/style.scss

@@ -1,4 +1,5 @@
 .wc-block-select {
+	height: 48px;
 	position: relative;
 	margin-top: $gap;
 

plugins/woocommerce-blocks/assets/js/base/components/totals/totals-shipping-item/index.js

@@ -15,6 +15,7 @@ import { useShippingRates } from '@woocommerce/base-hooks';
 import TotalsItem from '../totals-item';
 import ShippingRateSelector from './shipping-rate-selector';
 import hasShippingRate from './has-shipping-rate';
+import './style.scss';
 
 /**
  * Renders the shipping totals row, rates, and calculator if enabled.
@@ -22,6 +23,7 @@ import hasShippingRate from './has-shipping-rate';
 const TotalsShippingItem = ( {
 	currency,
 	values,
+	isCheckout = false,
 	showCalculator = true,
 	showRatesWithoutAddress = false,
 } ) => {
@@ -44,14 +46,14 @@ const TotalsShippingItem = ( {
 	const showingRates = showRatesWithoutAddress || hasShippingAddress;
 
 	// If we have no rates, and an address is needed.
-	if ( ! hasRates && ! hasShippingAddress ) {
+	if ( ! hasRates && ! hasShippingAddress && ! isCheckout ) {
 		return (
 			<TotalsItem
 				label={ __( 'Shipping', 'woo-gutenberg-products-block' ) }
 				value={
 					showCalculator ? (
 						<button
-							className="wc-block-cart__change-address-button"
+							className="wc-block-totals__change-address-button"
 							onClick={ () => {
 								setIsShippingCalculatorOpen(
 									! isShippingCalculatorOpen
@@ -100,7 +102,7 @@ const TotalsShippingItem = ( {
 						<ShippingLocation address={ shippingAddress } />{ ' ' }
 						{ showCalculator && (
 							<button
-								className="wc-block-cart__change-address-button"
+								className="wc-block-totals__change-address-button"
 								onClick={ () => {
 									setIsShippingCalculatorOpen(
 										! isShippingCalculatorOpen
@@ -127,19 +129,11 @@ const TotalsShippingItem = ( {
 				}
 				currency={ currency }
 			/>
-			{ showingRates && (
+			{ ! isCheckout && showingRates && (
-				<fieldset className="wc-block-cart__shipping-options-fieldset">
+				<ShippingRateSelector
-					<legend className="screen-reader-text">
+					shippingRates={ shippingRates }
-						{ __(
+					shippingRatesLoading={ shippingRatesLoading }
-							'Choose a shipping method',
+				/>
-							'woo-gutenberg-products-block'
-						) }
-					</legend>
-					<ShippingRateSelector
-						shippingRates={ shippingRates }
-						shippingRatesLoading={ shippingRatesLoading }
-					/>
-				</fieldset>
 			) }
 		</>
 	);
@@ -151,6 +145,7 @@ TotalsShippingItem.propTypes = {
 		total_shipping: PropTypes.string,
 		total_shipping_tax: PropTypes.string,
 	} ).isRequired,
+	isCheckout: PropTypes.bool,
 	showCalculator: PropTypes.bool,
 	showRatesWithoutAddress: PropTypes.bool,
 };

plugins/woocommerce-blocks/assets/js/base/components/totals/totals-shipping-item/shipping-rate-selector.js

@@ -26,15 +26,15 @@ const renderShippingRatesControlOption = ( option ) => ( {
 
 const ShippingRateSelector = ( { shippingRates, shippingRatesLoading } ) => {
 	return (
-		<fieldset className="wc-block-cart__shipping-options-fieldset">
+		<fieldset className="wc-block-totals__shipping-options-fieldset">
 			<legend className="screen-reader-text">
 				{ __(
-					'Choose the shipping method.',
+					'Choose a shipping method',
 					'woo-gutenberg-products-block'
 				) }
 			</legend>
 			<ShippingRatesControl
-				className="wc-block-cart__shipping-options"
+				className="wc-block-totals__shipping-options"
 				collapsibleWhenMultiple={ true }
 				noResultsMessage={ __(
 					'No shipping options were found.',

plugins/woocommerce-blocks/assets/js/base/components/totals/totals-shipping-item/style.scss

@@ -0,0 +1,56 @@
+// Added extra class and label for specificity.
+fieldset.wc-block-totals__shipping-options-fieldset {
+	background-color: transparent;
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+
+.wc-block-totals__shipping-options {
+	.wc-block-radio-control__label,
+	.wc-block-radio-control__description,
+	.wc-block-radio-control__secondary-label,
+	.wc-block-radio-control__secondary-description {
+		flex-basis: 100%;
+		text-align: left;
+	}
+
+	.wc-block-radio-control__option {
+		padding-left: $gap-large;
+
+		&:last-child {
+			border-bottom: none;
+		}
+	}
+
+	.wc-block-radio-control__input {
+		left: 0;
+		margin: 0;
+	}
+}
+
+
+.wc-block-totals__change-address-button {
+	background: transparent;
+	border: 0;
+	border-radius: 0;
+	box-shadow: none;
+	color: inherit;
+	font-family: inherit;
+	font-weight: inherit;
+	display: inline;
+	font-weight: inherit;
+	letter-spacing: inherit;
+	margin: 0;
+	padding: 0;
+	text-decoration: underline;
+	text-transform: none;
+	vertical-align: middle;
+
+	&:hover,
+	&:focus,
+	&:active {
+		background: transparent;
+		opacity: 0.8;
+	}
+}

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss

@@ -7,59 +7,6 @@
 	.wc-block-cart__shipping-calculator {
 		white-space: nowrap;
 	}
-	.wc-block-cart__change-address-button {
-		background: transparent;
-		border: 0;
-		border-radius: 0;
-		box-shadow: none;
-		color: inherit;
-		font-family: inherit;
-		font-weight: inherit;
-		display: inline;
-		font-weight: inherit;
-		letter-spacing: inherit;
-		margin: 0;
-		padding: 0;
-		text-decoration: underline;
-		text-transform: none;
-		vertical-align: middle;
-
-		&:hover,
-		&:focus,
-		&:active {
-			background: transparent;
-			opacity: 0.8;
-		}
-	}
-	// Added extra class and label for specificity.
-	fieldset.wc-block-cart__shipping-options-fieldset {
-		background-color: transparent;
-		margin: 0;
-		padding: 0;
-		border: 0;
-	}
-	.wc-block-cart__shipping-options {
-		.wc-block-radio-control__label,
-		.wc-block-radio-control__description,
-		.wc-block-radio-control__secondary-label,
-		.wc-block-radio-control__secondary-description {
-			flex-basis: 100%;
-			text-align: left;
-		}
-
-		.wc-block-radio-control__option {
-			padding-left: $gap-large;
-
-			&:last-child {
-				border-bottom: none;
-			}
-		}
-
-		.wc-block-radio-control__input {
-			left: 0;
-			margin: 0;
-		}
-	}
 }
 
 table.wc-block-cart-items,

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js

@@ -332,7 +332,6 @@ const Block = ( {
 						cartCoupons={ cartCoupons }
 						cartItems={ cartItems }
 						cartTotals={ cartTotals }
-						shippingRates={ shippingRates }
 					/>
 				</Sidebar>
 			</SidebarLayout>

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/sidebar.js

@@ -26,7 +26,6 @@ const CheckoutSidebar = ( {
 	cartCoupons = [],
 	cartItems = [],
 	cartTotals = {},
-	shippingRates,
 } ) => {
 	const {
 		applyCoupon,
@@ -34,7 +33,6 @@ const CheckoutSidebar = ( {
 		isApplyingCoupon,
 		isRemovingCoupon,
 	} = useStoreCartCoupons();
-	const shippingAddress = shippingRates[ 0 ]?.destination;
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
@@ -51,7 +49,9 @@ const CheckoutSidebar = ( {
 			/>
 			<TotalsShippingItem
 				currency={ totalsCurrency }
-				shippingAddress={ shippingAddress }
+				noResultsMessage={ null }
+				isCheckout={ true }
+				showCalculator={ false }
 				values={ cartTotals }
 			/>
 			{ ! DISPLAY_CART_PRICES_INCLUDING_TAX && (