Update @wordpress/components to v. 11.1.1 and @wordpress/base-styles …

…to v. 3.2.0 (#3457)

* Update @wordpress/components and @wordpress/base-styles

* Fix JS warning in Select/downshift

* Remove color definitions that are now imported from @wordpress/base-styles. Fixes #3311

* Use -unit values from @wordpress/base-styles. Fixes #3313

* Update snapshots

* Fix payment methods test

* Don't extract dependencies that are not available in WP 5.3

* Avoid extracting @wordpress/compose since last version doesn't have resize observer

* Remove unnecessary uses of @wordpress/compose in a frontend scripts

* Add missing spaces

assets/css/abstracts/_colors.scss

@@ -1,18 +1,6 @@
 @import "node_modules/@wordpress/base-styles/colors";
 @import "node_modules/@automattic/color-studio/dist/color-variables";
 
-// @todo remove when `@woocommerce/base-styles` is updated.
-// Greys
-$black: #000;			// Use only when you truly need pure black. For UI, use $gray-900.
-$gray-100: #f0f0f0;		// Used for light gray backgrounds.
-$gray-200: #e0e0e0;		// Used sparingly for light borders.
-$gray-300: #ddd;		// Used for most borders.
-$gray-400: #ccc;
-$gray-600: #949494;		// Meets 3:1 UI or large text contrast against white.
-$gray-700: #757575;		// Meets 4.6:1 text contrast against white.
-$gray-900: #1e1e1e;
-$white: #fff;
-
 // Bright colors
 $no-stock-color: $alert-red;
 $low-stock-color: $alert-yellow;

assets/css/abstracts/_variables.scss

@@ -1,14 +1,12 @@
 @import "node_modules/@wordpress/base-styles/variables";
 
-// @todo replace with $grid-unit values when `@woocommerce/base-styles` is updated.
-// see: https://github.com/WordPress/gutenberg/blob/master/packages/base-styles/_variables.scss#L23-L36
-$gap-largest: 40px; // $grid-unit-50
-$gap-larger: 36px;
-$gap-large: 24px; // $grid-unit-30
-$gap: 16px; // $grid-unit-20
-$gap-small: 12px; // $grid-unit-15
-$gap-smaller: 8px; // $grid-unit-10
-$gap-smallest: 4px; // $grid-unit-05
+$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;

assets/js/atomic/blocks/product-elements/add-to-cart/frontend.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { compose } from '@wordpress/compose';
 import withFilteredAttributes from '@woocommerce/base-hocs/with-filtered-attributes';
 
 /**
@@ -10,4 +9,4 @@ import withFilteredAttributes from '@woocommerce/base-hocs/with-filtered-attribu
 import Block from './block';
 import attributes from './attributes';
 
-export default compose( withFilteredAttributes( attributes ) )( Block );
+export default withFilteredAttributes( attributes )( Block );

assets/js/atomic/blocks/product-elements/image/frontend.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { compose } from '@wordpress/compose';
 import withFilteredAttributes from '@woocommerce/base-hocs/with-filtered-attributes';
 
 /**
@@ -10,4 +9,4 @@ import withFilteredAttributes from '@woocommerce/base-hocs/with-filtered-attribu
 import Block from './block';
 import attributes from './attributes';
 
-export default compose( withFilteredAttributes( attributes ) )( Block );
+export default withFilteredAttributes( attributes )( Block );

assets/js/atomic/blocks/product-elements/title/frontend.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { compose } from '@wordpress/compose';
 import withFilteredAttributes from '@woocommerce/base-hocs/with-filtered-attributes';
 
 /**
@@ -10,4 +9,4 @@ import withFilteredAttributes from '@woocommerce/base-hocs/with-filtered-attribu
 import Block from './block';
 import attributes from './attributes';
 
-export default compose( withFilteredAttributes( attributes ) )( Block );
+export default withFilteredAttributes( attributes )( Block );

assets/js/base/components/chip/test/__snapshots__/index.js.snap

@@ -106,9 +106,9 @@ exports[`RemovableChip should render custom aria label 1`] = `
     onKeyDown={[Function]}
   >
     <svg
-      aria-hidden="true"
+      aria-hidden={true}
       className="wc-block-components-chip__remove-icon"
-      focusable="false"
+      focusable={false}
       height={16}
       role="img"
       viewBox="0 0 20 20"
@@ -148,9 +148,9 @@ exports[`RemovableChip should render default aria label if text is a node 1`] =
     onKeyDown={[Function]}
   >
     <svg
-      aria-hidden="true"
+      aria-hidden={true}
       className="wc-block-components-chip__remove-icon"
-      focusable="false"
+      focusable={false}
       height={16}
       role="img"
       viewBox="0 0 20 20"
@@ -188,9 +188,9 @@ exports[`RemovableChip should render screen reader text aria label 1`] = `
     onKeyDown={[Function]}
   >
     <svg
-      aria-hidden="true"
+      aria-hidden={true}
       className="wc-block-components-chip__remove-icon"
-      focusable="false"
+      focusable={false}
       height={16}
       role="img"
       viewBox="0 0 20 20"
@@ -223,9 +223,9 @@ exports[`RemovableChip should render text and the remove button 1`] = `
     onKeyDown={[Function]}
   >
     <svg
-      aria-hidden="true"
+      aria-hidden={true}
       className="wc-block-components-chip__remove-icon"
-      focusable="false"
+      focusable={false}
       height={16}
       role="img"
       viewBox="0 0 20 20"
@@ -258,9 +258,9 @@ exports[`RemovableChip should render with disabled remove button 1`] = `
     onKeyDown={[Function]}
   >
     <svg
-      aria-hidden="true"
+      aria-hidden={true}
       className="wc-block-components-chip__remove-icon"
-      focusable="false"
+      focusable={false}
       height={16}
       role="img"
       viewBox="0 0 20 20"
@@ -294,9 +294,9 @@ exports[`RemovableChip with removeOnAnyClick should be a button when removeOnAny
     className="wc-block-components-chip__remove"
   >
     <svg
-      aria-hidden="true"
+      aria-hidden={true}
       className="wc-block-components-chip__remove-icon"
-      focusable="false"
+      focusable={false}
       height={16}
       role="img"
       viewBox="0 0 20 20"

assets/js/base/components/payment-methods/test/payment-methods.js

@@ -53,10 +53,12 @@ describe( 'PaymentMethods', () => {
 		);
 
 		await waitFor( () => {
-			const noPaymentMethods = screen.queryByText(
+			const noPaymentMethods = screen.queryAllByText(
 				/no payment methods available/
 			);
-			expect( noPaymentMethods ).not.toBeNull();
+			// We might get more than one match because the `speak()` function
+			// creates an extra `div` with the notice contents used for a11y.
+			expect( noPaymentMethods.length ).toBeGreaterThanOrEqual( 1 );
 		} );
 	} );
 

assets/js/base/components/select/index.js

@@ -32,7 +32,7 @@ const Select = ( {
 					onChange( selectedItem.key );
 				} }
 				options={ options }
-				value={ value }
+				value={ value || null }
 			/>
 			{ feedback }
 		</div>

bin/webpack-helpers.js

@@ -6,6 +6,14 @@ const path = require( 'path' );
 const NODE_ENV = process.env.NODE_ENV || 'development';
 const FORCE_MAP = process.env.FORCE_MAP || false;
 
+// Some packages are not available in legacy versions of WordPress, so we don't
+// want to extract them.
+const requiredPackagesInWPLegacy = [
+	'@wordpress/compose', // WP 5.3 version doesn't include `useResizeObserver`.
+	'@wordpress/primitives', // Not included in WP 5.3.
+	'@wordpress/warning', // Not included in WP 5.3.
+];
+
 const wcDepMap = {
 	'@woocommerce/blocks-registry': [ 'wc', 'wcBlocksRegistry' ],
 	'@woocommerce/settings': [ 'wc', 'wcSettings' ],
@@ -93,12 +101,18 @@ function findModuleMatch( module, match ) {
 }
 
 const requestToExternal = ( request ) => {
+	if ( requiredPackagesInWPLegacy.includes( request ) ) {
+		return false;
+	}
 	if ( wcDepMap[ request ] ) {
 		return wcDepMap[ request ];
 	}
 };
 
 const requestToHandle = ( request ) => {
+	if ( requiredPackagesInWPLegacy.includes( request ) ) {
+		return false;
+	}
 	if ( wcHandleMap[ request ] ) {
 		return wcHandleMap[ request ];
 	}