From 5935231baa63111e1e0ed447b3398882c468ec21 Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Fri, 27 Nov 2020 06:49:09 +1300
Subject: [PATCH 01/11] enqueue wp-components

---
 src/Loader.php    | 4 +++-
 webpack.config.js | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/Loader.php b/src/Loader.php
index 956a4458058..c25f4bc993b 100644
--- a/src/Loader.php
+++ b/src/Loader.php
@@ -382,7 +382,7 @@ public static function register_scripts() {
 		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 @@ public static function register_scripts() {
 				'wc-notices',
 				'wc-number',
 				'wc-store-data',
+				'wp-components',
 			),
 			$js_file_version,
 			true
@@ -490,6 +491,7 @@ public static function register_scripts() {
 			self::get_url( 'app/index', 'js' ),
 			array(
 				'wp-core-data',
+				'wp-components',
 				'wc-components',
 				'wp-date',
 				'wp-plugins',
diff --git a/webpack.config.js b/webpack.config.js
index b189694119f..2b379c1d410 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -34,6 +34,7 @@ const externals = {
 	'@wordpress/i18n': { this: [ 'wp', 'i18n' ] },
 	'@wordpress/data-controls': { this: [ 'wp', 'dataControls' ] },
 	'@wordpress/plugins': { this: [ 'wp', 'plugins' ] },
+	'@wordpress/components': { this: [ 'wp', 'components' ] },
 	tinymce: 'tinymce',
 	moment: 'moment',
 	react: 'React',

From 69622dea4945ce96ca58edd607e92288ad3aaeef Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Fri, 27 Nov 2020 07:20:00 +1300
Subject: [PATCH 02/11] conditional check of Navigation?

---
 src/Features/Navigation/Init.php | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/Features/Navigation/Init.php b/src/Features/Navigation/Init.php
index 1e5fe55896e..bfe32626c5b 100644
--- a/src/Features/Navigation/Init.php
+++ b/src/Features/Navigation/Init.php
@@ -40,6 +40,16 @@ public function __construct() {
 	 * @param array $features Array of feature slugs.
 	 */
 	public function maybe_remove_nav_feature( $features ) {
+		$current    = get_site_transient( 'update_core' );
+		$wp_version = $current->version_checked;
+
+		// Check wp version.
+		// Also check Gutenberg present and version number.
+		// Check when Nav components made available.
+		if ( version_compare( $wp_version, '5.6.0', '<' ) ) {
+			$features = array_diff( $features, array( 'navigation' ) );
+		}
+
 		if ( in_array( 'navigation', $features, true ) && 'yes' !== get_option( 'woocommerce_navigation_enabled', 'no' ) ) {
 			$features = array_diff( $features, array( 'navigation' ) );
 		}

From 53b3307dee938bdb172a854f4f30dc17514c6632 Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Fri, 27 Nov 2020 09:41:17 +1300
Subject: [PATCH 03/11] nav version checks, first pass

---
 src/Features/Navigation/Init.php | 31 ++++++++++++++++++++++---------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/Features/Navigation/Init.php b/src/Features/Navigation/Init.php
index bfe32626c5b..811c4c49eb5 100644
--- a/src/Features/Navigation/Init.php
+++ b/src/Features/Navigation/Init.php
@@ -35,22 +35,35 @@ public function __construct() {
 	}
 
 	/**
-	 * Overwrites the allowed features array using a local `feature-config.php` file.
-	 *
-	 * @param array $features Array of feature slugs.
+	 * Determine if sufficient versions are present to support Navigation feature
 	 */
-	public function maybe_remove_nav_feature( $features ) {
+	public function is_nav_compatible() {
+		$has_gutenberg     = is_plugin_active( 'gutenberg/gutenberg.php' );
+		$gutenberg_version = $has_gutenberg ? get_plugin_data( ABSPATH . 'wp-content/plugins/gutenberg/gutenberg.php' )['Version'] : false;
+
+		if ( $gutenberg_version && version_compare( $gutenberg_version, '9.0.0', '>=' ) ) {
+			return true;
+		}
+
 		$current    = get_site_transient( 'update_core' );
 		$wp_version = $current->version_checked;
 
-		// Check wp version.
-		// Also check Gutenberg present and version number.
-		// Check when Nav components made available.
 		if ( version_compare( $wp_version, '5.6.0', '<' ) ) {
-			$features = array_diff( $features, array( 'navigation' ) );
+			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 ) {
+		$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 ( in_array( 'navigation', $features, true ) && 'yes' !== get_option( 'woocommerce_navigation_enabled', 'no' ) ) {
+		if ( ( $has_feature_enabled && $has_option_disabled ) || $is_not_compatible ) {
 			$features = array_diff( $features, array( 'navigation' ) );
 		}
 		return $features;

From 4b262405a993901907e2871150bb17f4a5d762aa Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Fri, 27 Nov 2020 11:25:25 +1300
Subject: [PATCH 04/11] better nav checking

---
 src/Features/Navigation/Init.php | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/Features/Navigation/Init.php b/src/Features/Navigation/Init.php
index 811c4c49eb5..8de03df9ccb 100644
--- a/src/Features/Navigation/Init.php
+++ b/src/Features/Navigation/Init.php
@@ -38,19 +38,26 @@ public function __construct() {
 	 * Determine if sufficient versions are present to support Navigation feature
 	 */
 	public function is_nav_compatible() {
-		$has_gutenberg     = is_plugin_active( 'gutenberg/gutenberg.php' );
-		$gutenberg_version = $has_gutenberg ? get_plugin_data( ABSPATH . 'wp-content/plugins/gutenberg/gutenberg.php' )['Version'] : false;
+		$gutenberg_minimum_version = '9.0.0'; // https://github.com/WordPress/gutenberg/releases/tag/v9.0.0.
+		$wp_minimum_version        = '5.5.3';
+		$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, '9.0.0', '>=' ) ) {
+		if ( $gutenberg_version && version_compare( $gutenberg_version, $gutenberg_minimum_version, '>=' ) ) {
 			return true;
 		}
 
-		$current    = get_site_transient( 'update_core' );
-		$wp_version = $current->version_checked;
+		// Get unmodified $wp_version.
+		include ABSPATH . WPINC . '/version.php';
 
-		if ( version_compare( $wp_version, '5.6.0', '<' ) ) {
-			return false;
+		// 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;
 	}
 
 	/**

From 3d1200f1135931f537fe4f5c87e682de74d35938 Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Fri, 27 Nov 2020 11:26:31 +1300
Subject: [PATCH 05/11] bump min requirments

---
 readme.txt | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/readme.txt b/readme.txt
index dffbf79878a..a528ce25bc1 100644
--- a/readme.txt
+++ b/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

From 261fad37720644ad339f3a0b33fa84e028c6f35d Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Fri, 27 Nov 2020 12:54:45 +1300
Subject: [PATCH 06/11] min versions

---
 src/Features/Navigation/Init.php | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/Features/Navigation/Init.php b/src/Features/Navigation/Init.php
index 8de03df9ccb..c75cc5b60a2 100644
--- a/src/Features/Navigation/Init.php
+++ b/src/Features/Navigation/Init.php
@@ -38,8 +38,10 @@ public function __construct() {
 	 * 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.5.3';
+		$wp_minimum_version        = '5.6.0';
 		$has_gutenberg             = is_plugin_active( 'gutenberg/gutenberg.php' );
 		$gutenberg_version         = $has_gutenberg ? get_plugin_data( WP_PLUGIN_DIR . '/gutenberg/gutenberg.php' )['Version'] : false;
 

From 61a016629aedca4f1d4c2f2f610039e0f2fe3624 Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Mon, 14 Dec 2020 14:11:26 +1300
Subject: [PATCH 07/11] Use WP 5.6 instead of 5.6.0

---
 src/Features/Navigation/Init.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Features/Navigation/Init.php b/src/Features/Navigation/Init.php
index c75cc5b60a2..a5b45324aba 100644
--- a/src/Features/Navigation/Init.php
+++ b/src/Features/Navigation/Init.php
@@ -41,7 +41,7 @@ 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.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;
 

From d6eee4666b8f98f578e77fed87e7e8ca825fc844 Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Mon, 14 Dec 2020 16:06:03 +1300
Subject: [PATCH 08/11] add wp.date and wp.compose

---
 webpack.config.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/webpack.config.js b/webpack.config.js
index 2b379c1d410..7cc91f2b082 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -35,6 +35,8 @@ const externals = {
 	'@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',

From 4cb33b2e8c6af6d74fd532eb78548da6c44c7de7 Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Tue, 15 Dec 2020 12:08:55 +1300
Subject: [PATCH 09/11] Handle missing FlexItem

---
 .../profile-wizard/steps/store-details/index.js | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/client/profile-wizard/steps/store-details/index.js b/client/profile-wizard/steps/store-details/index.js
index 5f11d9a07fd..febfb3f64db 100644
--- a/client/profile-wizard/steps/store-details/index.js
+++ b/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

From eee8c973865467df8de29b387b29fc37d3bf1d65 Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Fri, 18 Dec 2020 14:16:34 +1300
Subject: [PATCH 10/11] enqueue styles

---
 client/stylesheets/_index.scss                |  7 ++---
 .../shared/_gutenberg-components.scss         | 28 -------------------
 .../src/date-range-filter-picker/style.scss   |  4 +++
 packages/components/src/summary/style.scss    |  1 +
 src/Loader.php                                |  2 +-
 5 files changed, 9 insertions(+), 33 deletions(-)
 delete mode 100644 client/stylesheets/shared/_gutenberg-components.scss

diff --git a/client/stylesheets/_index.scss b/client/stylesheets/_index.scss
index 0b7d62e5585..2526d150b8c 100644
--- a/client/stylesheets/_index.scss
+++ b/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 );
+}
diff --git a/client/stylesheets/shared/_gutenberg-components.scss b/client/stylesheets/shared/_gutenberg-components.scss
deleted file mode 100644
index 917de30f729..00000000000
--- a/client/stylesheets/shared/_gutenberg-components.scss
+++ /dev/null
@@ -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 );
-}
diff --git a/packages/components/src/date-range-filter-picker/style.scss b/packages/components/src/date-range-filter-picker/style.scss
index e82d9a4c524..382cadd9e57 100644
--- a/packages/components/src/date-range-filter-picker/style.scss
+++ b/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 {
diff --git a/packages/components/src/summary/style.scss b/packages/components/src/summary/style.scss
index abec2c442f2..bb68ae8f985 100644
--- a/packages/components/src/summary/style.scss
+++ b/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' ) {
 		& {
diff --git a/src/Loader.php b/src/Loader.php
index c25f4bc993b..b8a0345b952 100644
--- a/src/Loader.php
+++ b/src/Loader.php
@@ -518,7 +518,7 @@ public static function register_scripts() {
 		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
 		);
 

From f56663e2264e4713aabbaf9f5d650ac76b5e7406 Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Fri, 18 Dec 2020 14:30:15 +1300
Subject: [PATCH 11/11] fix date range mobile dropdown

---
 .../src/date-range-filter-picker/index.js        | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/date-range-filter-picker/index.js b/packages/components/src/date-range-filter-picker/index.js
index b3ec01add55..dd7d17f6629 100644
--- a/packages/components/src/date-range-filter-picker/index.js
+++ b/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 );