Unbundle wp.components (https://github.com/woocommerce/woocommerce-admin/pull/5753)

* enqueue wp-components

* conditional check of Navigation?

* nav version checks, first pass

* better nav checking

* bump min requirments

* min versions

* Use WP 5.6 instead of 5.6.0

* add wp.date and wp.compose

* Handle missing FlexItem

* enqueue styles

* fix date range mobile dropdown

plugins/woocommerce-admin/client/profile-wizard/steps/store-details/index.js

@@ -8,7 +8,7 @@ import {
 	CardBody,
 	CardFooter,
 	CheckboxControl,
-	FlexItem,
+	FlexItem as MaybeFlexItem,
 	__experimentalText as Text,
 	Popover,
 } from '@wordpress/components';
@@ -32,6 +32,17 @@ import UsageModal from '../usage-modal';
 import { CurrencyContext } from '../../../lib/currency-context';
 import './style.scss';
 
+// FlexItem is not available until WP version 5.5. This code is safe to remove
+// once the minimum WP supported version becomes 5.5.
+const FlextItemSubstitute = ( { children, align } ) => {
+	const style = {
+		display: 'flex',
+		'justify-content': align ? 'center' : 'flex-start',
+	};
+	return <div style={ style }>{ children }</div>;
+};
+const FlexItem = MaybeFlexItem || FlextItemSubstitute;
+
 class StoreDetails extends Component {
 	constructor( props ) {
 		super( props );
@@ -271,7 +282,7 @@ class StoreDetails extends Component {
 							</CardBody>
 
 							<CardFooter>
-								<FlexItem align="center">
+								<FlexItem>
 									<div className="woocommerce-profile-wizard__client">
 										<CheckboxControl
 											label={ __(
@@ -285,7 +296,7 @@ class StoreDetails extends Component {
 							</CardFooter>
 
 							<CardFooter justify="center">
-								<FlexItem>
+								<FlexItem align="center">
 									<div className="woocommerce-profile-wizard__submit">
 										<Button
 											isPrimary

plugins/woocommerce-admin/client/stylesheets/_index.scss

@@ -1,5 +1,3 @@
-
-
 // Import our wp-admin reset.
 @import './shared/_reset.scss';
 
@@ -30,5 +28,6 @@
 // Import the embed-specific styles.
 @import './shared/_embed.scss';
 
-// Import gutenberg SCSS so that we can apply our theme colors.
-@import './shared/gutenberg-components.scss';
+:root {
+	@include admin-scheme( #007cba );
+}

plugins/woocommerce-admin/client/stylesheets/shared/_gutenberg-components.scss

@@ -1,28 +0,0 @@
-/**
-Import Gutenberg component SCSS so webpack's postcss process can handle theme-ing. This
-allows Woo themed components based on the config found in postcss.config.js
- */
-@import 'gutenberg-components/button/style.scss';
-@import 'gutenberg-components/checkbox-control/style.scss';
-@import 'gutenberg-components/form-toggle/style.scss';
-@import 'gutenberg-components/notice/style.scss';
-@import 'gutenberg-components/select-control/style.scss';
-@import 'gutenberg-components/snackbar/style.scss';
-@import 'gutenberg-components/spinner/style.scss';
-@import 'gutenberg-components/text-control/style.scss';
-@import 'gutenberg-components/tooltip/style.scss';
-@import 'gutenberg-components/popover/style.scss';
-@import 'gutenberg-components/radio-control/style.scss';
-@import 'gutenberg-components/menu-group/style.scss';
-@import 'gutenberg-components/menu-item/style.scss';
-@import 'gutenberg-components/modal/style.scss';
-@import 'gutenberg-components/base-control/style.scss';
-@import 'gutenberg-components/date-time/style.scss';
-@import 'gutenberg-components/drop-zone/style.scss';
-@import 'gutenberg-components/tab-panel/style.scss';
-@import 'gutenberg-components/guide/style.scss';
-@import 'gutenberg-components/animate/style.scss';
-
-:root {
-	@include admin-scheme( #007cba );
-}

plugins/woocommerce-admin/packages/components/src/date-range-filter-picker/index.js

@@ -5,6 +5,8 @@ import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Dropdown } from '@wordpress/components';
 import PropTypes from 'prop-types';
+import { withViewportMatch } from '@wordpress/viewport';
+import classnames from 'classnames';
 
 /**
  * Internal dependencies
@@ -122,13 +124,21 @@ class DateRangeFilterPicker extends Component {
 			afterError,
 			beforeError,
 		} = this.state;
+
+		const { isViewportMobile } = this.props;
+		const contentClasses = classnames(
+			'woocommerce-filters-date__content',
+			{
+				'is-mobile': isViewportMobile,
+			}
+		);
 		return (
 			<div className="woocommerce-filters-filter">
 				<span className="woocommerce-filters-label">
 					{ __( 'Date Range', 'woocommerce-admin' ) }:
 				</span>
 				<Dropdown
-					contentClassName="woocommerce-filters-date__content"
+					contentClassName={ contentClasses }
 					position="bottom"
 					expandOnMobile
 					renderToggle={ ( { isOpen, onToggle } ) => (
@@ -187,4 +197,6 @@ DateRangeFilterPicker.propTypes = {
 	} ).isRequired,
 };
 
-export default DateRangeFilterPicker;
+export default withViewportMatch( {
+	isViewportMobile: '< medium',
+} )( DateRangeFilterPicker );

plugins/woocommerce-admin/packages/components/src/date-range-filter-picker/style.scss

@@ -14,6 +14,10 @@
 			overflow: auto;
 		}
 	}
+
+	&.components-dropdown__content .components-popover__content > div {
+		padding: 0;
+	}
 }
 
 .woocommerce-filters-date__tabs {

plugins/woocommerce-admin/packages/components/src/summary/style.scss

@@ -36,6 +36,7 @@ $border: $gray-200;
 	border-color: $border;
 	background-color: $gray-100;
 	box-shadow: inset -1px -1px 0 $border;
+	width: 100%;
 
 	@include breakpoint( '<782px' ) {
 		& {

plugins/woocommerce-admin/readme.txt

@@ -1,8 +1,8 @@
 === WooCommerce Admin ===
 Contributors: woocommerce, automattic
 Tags: ecommerce, e-commerce, store, sales, reports, analytics, dashboard, activity, notices, insights, stats, woo commerce, woocommerce
-Requires at least: 5.3.0
-Tested up to: 5.4.2
+Requires at least: 5.4.0
+Tested up to: 5.6.0
 Requires PHP: 5.6.20
 Stable tag: 1.8.0-dev
 License: GPLv3

plugins/woocommerce-admin/src/Features/Navigation/Init.php

@@ -35,13 +35,45 @@ class Init {
 		}
 	}
 
+	/**
+	 * Determine if sufficient versions are present to support Navigation feature
+	 */
+	public function is_nav_compatible() {
+		include_once ABSPATH . 'wp-admin/includes/plugin.php';
+
+		$gutenberg_minimum_version = '9.0.0'; // https://github.com/WordPress/gutenberg/releases/tag/v9.0.0.
+		$wp_minimum_version        = '5.6';
+		$has_gutenberg             = is_plugin_active( 'gutenberg/gutenberg.php' );
+		$gutenberg_version         = $has_gutenberg ? get_plugin_data( WP_PLUGIN_DIR . '/gutenberg/gutenberg.php' )['Version'] : false;
+
+		if ( $gutenberg_version && version_compare( $gutenberg_version, $gutenberg_minimum_version, '>=' ) ) {
+			return true;
+		}
+
+		// Get unmodified $wp_version.
+		include ABSPATH . WPINC . '/version.php';
+
+		// Strip '-src' from the version string. Messes up version_compare().
+		$wp_version = str_replace( '-src', '', $wp_version );
+
+		if ( version_compare( $wp_version, $wp_minimum_version, '>=' ) ) {
+			return true;
+		}
+
+		return false;
+	}
+
 	/**
 	 * Overwrites the allowed features array using a local `feature-config.php` file.
 	 *
 	 * @param array $features Array of feature slugs.
 	 */
 	public function maybe_remove_nav_feature( $features ) {
-		if ( in_array( 'navigation', $features, true ) && 'yes' !== get_option( 'woocommerce_navigation_enabled', 'no' ) ) {
+		$has_feature_enabled = in_array( 'navigation', $features, true );
+		$has_option_disabled = 'yes' !== get_option( 'woocommerce_navigation_enabled', 'no' );
+		$is_not_compatible   = ! self::is_nav_compatible();
+
+		if ( ( $has_feature_enabled && $has_option_disabled ) || $is_not_compatible ) {
 			$features = array_diff( $features, array( 'navigation' ) );
 		}
 		return $features;

plugins/woocommerce-admin/src/Loader.php

@@ -382,7 +382,7 @@ class Loader {
 		wp_register_script(
 			'wc-navigation',
 			self::get_url( 'navigation/index', 'js' ),
-			array( 'wp-url', 'wp-hooks', 'wp-element', 'wp-data', 'moment' ),
+			array( 'wp-url', 'wp-hooks', 'wp-element', 'wp-data', 'moment', 'wp-components' ),
 			$js_file_version,
 			true
 		);
@@ -454,6 +454,7 @@ class Loader {
 				'wc-notices',
 				'wc-number',
 				'wc-store-data',
+				'wp-components',
 			),
 			$js_file_version,
 			true
@@ -490,6 +491,7 @@ class Loader {
 			self::get_url( 'app/index', 'js' ),
 			array(
 				'wp-core-data',
+				'wp-components',
 				'wc-components',
 				'wp-date',
 				'wp-plugins',
@@ -516,7 +518,7 @@ class Loader {
 		wp_register_style(
 			WC_ADMIN_APP,
 			self::get_url( "app/style{$rtl}", 'css' ),
-			array( 'wc-components', 'wc-customer-effort-score' ),
+			array( 'wc-components', 'wc-customer-effort-score', 'wp-components' ),
 			$css_file_version
 		);
 

plugins/woocommerce-admin/webpack.config.js

@@ -34,6 +34,9 @@ const externals = {
 	'@wordpress/i18n': { this: [ 'wp', 'i18n' ] },
 	'@wordpress/data-controls': { this: [ 'wp', 'dataControls' ] },
 	'@wordpress/plugins': { this: [ 'wp', 'plugins' ] },
+	'@wordpress/components': { this: [ 'wp', 'components' ] },
+	'@wordpress/date': { this: [ 'wp', 'date' ] },
+	'@wordpress/compose': { this: [ 'wp', 'compose' ] },
 	tinymce: 'tinymce',
 	moment: 'moment',
 	react: 'React',