Use container queries to load Cart and Checkout responsive styles (https://github.com/woocommerce/woocommerce-blocks/pull/2370)

* Use container queries to load Cart and Checkout responsive styles * Update package-lock.json * Make form-step react to container queries instead of media queries * Make sidebar layout inner padding relative to the full-width * Make container queries breakpoints smaller
2020-05-05 10:10:02 +02:00 · 2020-05-05 10:10:02 +02:00 · 30c281c524
parent b7d4b48b57
commit 30c281c524
13 changed files with 104 additions and 45 deletions
--- a/plugins/woocommerce-blocks/assets/css/abstracts/_breakpoints.scss
+++ b/plugins/woocommerce-blocks/assets/css/abstracts/_breakpoints.scss
@ -5,7 +5,7 @@

 // 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#breakpoints
+// See https://github.com/WordPress/gutenberg/tree/master/packages/viewport#usage
 $breakpoints: 480px, 600px, 782px, 960px, 1280px, 1440px;

@mixin breakpoint( $sizes... ) {
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form-step/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form-step/style.scss
@ -12,8 +12,8 @@ $line-offset-from-circle-size: 8px;
 	background: none;
 	margin: 0;

-	@include breakpoint( ">782px" ) {
-		padding-right: $gap-larger;
+	.is-large & {
+		padding-right: $gap-large;
 	}
 }

--- a/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/sidebar-layout.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/sidebar-layout.js
@ -3,6 +3,7 @@
 */
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import { useContainerQueries } from '@woocommerce/base-hooks';

 /**
 * Internal dependencies
@ -10,8 +11,17 @@ import PropTypes from 'prop-types';
 import './style.scss';

 const SidebarLayout = ( { children, className } ) => {
+	const [ resizeListener, containerQueryClassName ] = useContainerQueries();
+
 	return (
-		<div className={ classNames( 'wc-block-sidebar-layout', className ) }>
+		<div
+			className={ classNames(
+				'wc-block-sidebar-layout',
+				className,
+				containerQueryClassName
+			) }
+		>
+			{ resizeListener }
 			{ children }
 		</div>
 	);
--- a/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/style.scss
@ -2,17 +2,18 @@
 	display: flex;
 	flex-wrap: wrap;
 	margin: 0 auto $gap;
+	position: relative;

 	.wc-block-main {
 		margin: 0;
-		padding-right: $gap-largest;
+		padding-right: percentage($gap-largest / 1060px); // ~1060px is the default width of the content area in Storefront.
 		width: 65%;
 	}
 }

 .wc-block-sidebar {
 	margin: 0;
-	padding-left: $gap-largest;
+	padding-left: percentage($gap-largest / 1060px);
 	width: 35%;

 	// Reset Gutenberg <Panel> styles when used in the sidebar.
@ -60,8 +61,10 @@
 	}
 }

-@include breakpoint( "<782px" ) {
-	.wc-block-sidebar-layout {
+.is-medium,
+.is-small,
+.is-mobile {
+	&.wc-block-sidebar-layout {
 		flex-direction: column;
 		margin: 0 0 $gap;

--- a/plugins/woocommerce-blocks/assets/js/base/hooks/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/hooks/index.js
@ -6,6 +6,7 @@ export * from './shipping';
 export * from './use-collection';
 export * from './use-collection-header';
 export * from './use-collection-data';
+export * from './use-container-queries';
 export * from './use-previous';
 export * from './use-shallow-equal';
 export * from './use-store-products';
--- a/plugins/woocommerce-blocks/assets/js/base/hooks/use-container-queries.js
+++ b/plugins/woocommerce-blocks/assets/js/base/hooks/use-container-queries.js
@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { useResizeObserver } from 'wordpress-compose';
+
+/**
+ * Returns a resizeListener element and a class name based on its width.
+ * Class names are based on the smaller of the breakpoints:
+ * https://github.com/WordPress/gutenberg/tree/master/packages/viewport#usage
+ * Values are also based on those breakpoints minus ~80px which is aproximately
+ * the left + right margin in Storefront with a font-size of 16px.
+ * _Note: `useContainerQueries` will return an empty class name `` until after
+ * first render_
+ *
+ * @return {Array} An array of {Element} `resizeListener` and {string} `className`.
+ *
+ * @example
+ *
+ * ```js
+ * const App = () => {
+ * 	const [ resizeListener, containerQueryClassName ] = useContainerQueries();
+ *
+ * 	return (
+ * 		<div className={ containerQueryClassName }>
+ * 			{ resizeListener }
+ * 			Your content here
+ * 		</div>
+ * 	);
+ * };
+ * ```
+ */
+export const useContainerQueries = () => {
+	const [ resizeListener, { width } ] = useResizeObserver();
+
+	let className = '';
+	if ( width > 700 ) {
+		className = 'is-large';
+	} else if ( width > 520 ) {
+		className = 'is-medium';
+	} else if ( width > 400 ) {
+		className = 'is-small';
+	} else if ( width ) {
+		className = 'is-mobile';
+	}
+
+	return [ resizeListener, className ];
+};
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/editor.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/editor.scss
@ -34,11 +34,3 @@
 		position: static;
 	}
 }
-
-@include breakpoint( "<782px" ) {
-	.editor-styles-wrapper {
-		table td.wc-block-cart-item__total {
-			vertical-align: bottom;
-		}
-	}
-}
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss
@ -179,9 +179,10 @@ table.wc-block-cart-items {
 	display: flex;
 }

-// Mobile styles.
-@include breakpoint( "<782px" ) {
-	.wc-block-cart {
+.is-medium,
+.is-small,
+.is-mobile {
+	&.wc-block-cart {
 		.wc-block-sidebar {
 			.wc-block-cart__totals-title {
 				display: none;
@ -247,7 +248,9 @@ table.wc-block-cart-items {
 			}
 		}
 	}
+}

+@include breakpoint( "<782px" ) {
 	// Submit button is sticky to bottom of screen on mobile.
 	.wc-block-cart__submit-container {
 		background: $white;
@ -264,8 +267,7 @@ table.wc-block-cart-items {
 	}
 }

-@include breakpoint( ">782px" ) {
-	.wc-block-cart {
+.is-large.wc-block-cart {
 	.wc-block-radio-control__option {
 		padding-left: $gap-large;
 	}
@ -273,7 +275,6 @@ table.wc-block-cart-items {
 	.wc-block-radio-control__input {
 		left: 0;
 	}
-	}
 }

 .wc-block-cart-coupon-list {
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss
@ -239,7 +239,7 @@
 	}
 }

-@include breakpoint( "<480px" ) {
+.is-mobile {
 	.wc-block-checkout__actions {
 		.wc-block-components-checkout-return-to-cart-button {
 			display: none;
@ -251,7 +251,9 @@
 	}
 }

-@include breakpoint( "<782px" ) {
+.is-mobile,
+.is-small,
+.is-medium {
 	.wc-block-checkout__main {
 		order: 1;
 	}
@ -266,7 +268,9 @@
 	}
 }

-@include breakpoint( ">480px" ) {
+.is-small,
+.is-medium,
+.is-large {
 	.wc-block-checkout__billing-fields,
 	.wc-block-checkout__shipping-fields {
 		.wc-block-address-form {
@ -309,7 +313,7 @@
 	}
 }

-@include breakpoint( ">782px" ) {
+.is-large {
 	.wc-block-checkout__sidebar {
 		.wc-block-order-summary {
 			margin: -20px;
--- a/plugins/woocommerce-blocks/package-lock.json
+++ b/plugins/woocommerce-blocks/package-lock.json
@ -30367,15 +30367,16 @@
      }
    },
    "wordpress-compose": {
-      "version": "npm:@wordpress/compose@3.11.0",
-      "resolved": "https://registry.npmjs.org/@wordpress/compose/-/compose-3.11.0.tgz",
-      "integrity": "sha512-CNbLn9NtG2A0X71wjEux126uEHpWp3v546FtSgMoWlq73z3LEEBDoEeS2glIPAbIK6e1X2UibsKrn5Tn651tlg==",
+      "version": "npm:@wordpress/compose@3.13.1",
+      "resolved": "https://registry.npmjs.org/@wordpress/compose/-/compose-3.13.1.tgz",
+      "integrity": "sha512-RlPWcePmsnVj6jxPIq92lh7zbc3vPJzZC5BCHC9v38zUxUSd0pd7q+vvs/Wzpv4t4pYy0saslUM9HTq+bS6nxA==",
      "requires": {
-        "@babel/runtime": "^7.8.3",
-        "@wordpress/element": "^2.11.0",
-        "@wordpress/is-shallow-equal": "^1.8.0",
+        "@babel/runtime": "^7.9.2",
+        "@wordpress/element": "^2.13.1",
+        "@wordpress/is-shallow-equal": "^2.0.0",
        "lodash": "^4.17.15",
-        "mousetrap": "^1.6.2"
+        "mousetrap": "^1.6.2",
+        "react-resize-aware": "^3.0.0"
      },
      "dependencies": {
        "@wordpress/element": {
@ -30391,11 +30392,11 @@
          }
        },
        "@wordpress/is-shallow-equal": {
-          "version": "1.8.0",
-          "resolved": "https://registry.npmjs.org/@wordpress/is-shallow-equal/-/is-shallow-equal-1.8.0.tgz",
-          "integrity": "sha512-OV3qJqP9LhjuOzt85TsyBwv+//CvC8Byf/81D3NmjPKlstLaD/bBCC5nBhH6dKAv4bShYtQ2Hmut+V4dZnOM1A==",
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/@wordpress/is-shallow-equal/-/is-shallow-equal-2.0.0.tgz",
+          "integrity": "sha512-Xv8b3Jno/3Td6nyj1J+skW96sbyfX7W4sk0TLwN2C2Pz6iQTSTQyGrXmTZWShITt4SOeA8gKpP6kAwSZ4O0HOQ==",
          "requires": {
-            "@babel/runtime": "^7.8.3"
+            "@babel/runtime": "^7.9.2"
          }
        }
      }
--- a/plugins/woocommerce-blocks/package.json
+++ b/plugins/woocommerce-blocks/package.json
@ -162,7 +162,7 @@
 		"trim-html": "0.1.9",
 		"use-debounce": "3.4.0",
 		"wordpress-components": "npm:@wordpress/components@8.5.0",
-		"wordpress-compose": "npm:@wordpress/compose@3.11.0",
+		"wordpress-compose": "npm:@wordpress/compose@3.13.1",
 		"wordpress-element": "npm:@wordpress/element@2.11.0"
 	},
 	"husky": {
--- a/plugins/woocommerce-blocks/src/BlockTypes/Cart.php
+++ b/plugins/woocommerce-blocks/src/BlockTypes/Cart.php
@ -130,7 +130,7 @@ class Cart extends AbstractBlock {
 	 */
 	protected function get_skeleton() {
 		return '
-			<div class="wc-block-sidebar-layout wc-block-cart wc-block-cart--is-loading wc-block-cart--skeleton" aria-hidden="true">
+			<div class="wc-block-sidebar-layout wc-block-cart wc-block-cart--is-loading wc-block-cart--skeleton is-large" aria-hidden="true">
 				<div class="wc-block-main wc-block-cart__main">
 					<h2><span></span></h2>
 					<table class="wc-block-cart-items">
--- a/plugins/woocommerce-blocks/src/BlockTypes/Checkout.php
+++ b/plugins/woocommerce-blocks/src/BlockTypes/Checkout.php
@ -170,7 +170,7 @@ class Checkout extends AbstractBlock {
 	 */
 	protected function get_skeleton() {
 		return '
-			<div class="wc-block-sidebar-layout wc-block-checkout wc-block-checkout--is-loading wc-block-checkout--skeleton" aria-hidden="true">
+			<div class="wc-block-sidebar-layout wc-block-checkout wc-block-checkout--is-loading wc-block-checkout--skeleton is-large" aria-hidden="true">
 				<div class="wc-block-main wc-block-checkout__main">
 					<div class="wc-block-component-express-checkout"></div>
 					<div class="wc-block-component-express-checkout-continue-rule"><span></span></div>