Merge branch 'add/jetpack-lazy-images-package' of github.com:Automatt…

…ic/jetpack into add/jetpack-lazy-images-package * 'add/jetpack-lazy-images-package' of github.com:Automattic/jetpack: (40 commits) Lodash: Revert to previous version (#16735) New class to handle async XML-RPC requests (#16674) Social Previews: Sidebar design updates (#16725) Update E2E locator for classic connection flow (#16708) Woo Services: update to use existing Jetpack plugin install tools (#16672) Admin Page: avoid blank dashboard when notice is not a string (#16721) Admin Page: update string still using old i18n format (#16722) Social Previews: Add sidebar UI (#16633) Fix recurring payments block disconnecting (sometimes) when existing article is reopened in block editor. (#16640) Connection Register: Add current user email to connection register request (#16712) Update versions to start 8.9 Release cycle (#16706) Donations block: Make currency and amounts editable (#16593) Update dependency @automattic/calypso-color-schemes to v2 Error Notice: removing HTML code, adjusting maximum width. (#16690) Update dependency swiper to v6 (#16587) Site Scan: Short-circuit update_threats_link() if Admin Bar is not present (#16677) Update vulnerable NPM packages (#16659) E2E Tests: Add Jetpack updater test (#16437) check for subdir site before rendering Ads.txt section (#16671) VideoPress Block: Retain alignment support (#16651) ...
Automattic · Aug 6, 2020 · cc0cf00 · cc0cf00
2 parents 63d8395 + df47e5a
commit cc0cf00
Show file tree

Hide file tree

Showing 112 changed files with 1,858 additions and 781 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -96,6 +96,7 @@ matrix:
           - sourceline: ppa:qameta/allure
         packages:
           - allure
+          - zip
 
   - name: "E2E tests with latest Gutenberg"
     language: generic
@@ -108,7 +109,7 @@ matrix:
     - ./tests/e2e/bin/env.sh start
     - yarn test-decrypt-config
     script:
-    - yarn test-e2e
+    - yarn test-e2e --testPathIgnorePatterns=updater
 
   allow_failures:
     - name: "PHP Nightly"

diff --git a/.wp-env.json b/.wp-env.json
@@ -1,9 +1,14 @@
 {
-	"plugins": [ ".", "./tests/e2e/plugins/e2e-plan-data-interceptor.php" ],
+	"plugins": [ "./tests/e2e/plugins/e2e-plan-data-interceptor.php" ],
 	"config": {
+		"WP_DEBUG": true,
 		"WP_DEBUG_LOG": true,
 		"WP_DEBUG_DISPLAY": false,
 		"JETPACK_BETA_BLOCKS": true,
 		"JETPACK_SHOULD_NOT_USE_CONNECTION_IFRAME": true
+	},
+	"mappings": {
+		"wp-content/plugins/jetpack-dev": ".",
+		"wp-content/plugins/e2e-plugin-updater.php": "./tests/e2e/plugins/e2e-plugin-updater.php"
 	}
 }
diff --git a/3rd-party/woocommerce-services.php b/3rd-party/woocommerce-services.php
@@ -126,22 +126,14 @@ public function error_notice() {
 	 * @return bool result of installation
 	 */
 	private function install() {
-		include_once ABSPATH . '/wp-admin/includes/admin.php';
-		include_once ABSPATH . '/wp-admin/includes/plugin-install.php';
-		include_once ABSPATH . '/wp-admin/includes/plugin.php';
-		include_once ABSPATH . '/wp-admin/includes/class-wp-upgrader.php';
-		include_once ABSPATH . '/wp-admin/includes/class-plugin-upgrader.php';
+		jetpack_require_lib( 'plugins' );
+		$result = Jetpack_Plugins::install_plugin( 'woocommerce-services' );
 
-		$api = plugins_api( 'plugin_information', array( 'slug' => 'woocommerce-services' ) );
-
-		if ( is_wp_error( $api ) ) {
+		if ( is_wp_error( $result ) ) {
 			return false;
+		} else {
+			return true;
 		}
-
-		$upgrader = new Plugin_Upgrader( new Automatic_Upgrader_Skin() );
-		$result   = $upgrader->install( $api->download_link );
-
-		return true === $result;
 	}
 
 	/**

diff --git a/_inc/client/at-a-glance/style.scss b/_inc/client/at-a-glance/style.scss
@@ -15,7 +15,7 @@
 	margin-bottom: 0;
 
 	p {
-		font-size: rem( 14px );
+		font-size: $font-body-small;
 		color: $gray-text-min;
 	}
 }
@@ -42,7 +42,7 @@
 }
 
 .jp-at-a-glance__stats-inactive-text {
-	font-size: rem( 14px );
+	font-size: $font-body-small;
 	line-height: 1.5;
 
 	@include breakpoint( '<660px' ) {
@@ -164,10 +164,11 @@
 
 .jp-at-a-glance__stat-details {
 	margin: 0;
+	font-size: $font-body-small;
 }
 
 .jp-at-a-glance__stat-number {
-	font-size: rem( 22px );
+	font-size: $font-title-medium;
 	font-weight: 400;
 	margin: rem( 8px ) 0;
 }
@@ -325,7 +326,6 @@
 }
 
 .jp-connection-settings__text {
-	width: 70%;
 	margin-left: rem( 16px );
 	word-break: break-word;
 }
@@ -354,7 +354,7 @@
 
 .jp-connection-settings__email {
 	color: $gray;
-	font-size: rem( 13px );
+	font-size: $font-body-small;
 	font-style: italic;
 	font-weight: 400;
 }
@@ -371,27 +371,27 @@
 .jp-connection-settings__modal-body {
 	margin: 0;
 	padding: rem( 24px ) rem( 32px );
-	font-size: rem( 14px );
+	font-size: $font-body-small;
 	color: $blue-dark-text;
 	text-align: center;
 
 	h2 {
 		margin: rem( 32px ) 0 rem( 24px );
-		font-size: rem( 32px );
+		font-size: $font-title-large;
 		font-weight: 300;
 		color: $blue-dark-text;
 	}
 
 	h4 {
 		margin: rem( 16px ) rem( 24px ) 0;
-		font-size: rem( 16px );
+		font-size: $font-body;
 		font-weight: 400;
 		line-height: 1.5em;
 		color: $blue-heading;
 	}
 
 	p {
-		font-size: rem( 14px );
+		font-size: $font-body-small;
 	}
 
 	ul {

diff --git a/_inc/client/components/apps-card/style.scss b/_inc/client/components/apps-card/style.scss
@@ -50,12 +50,13 @@
 }
 
 .jp-apps-card__paragraph {
-	font-size: rem( 15px );
+	font-size: $font-body;
 }
 
 .jp-apps-card__header {
 	margin-top: 0;
 	margin-bottom: rem( 5px );
+	font-size: $font-title-small;
 	font-weight: 500;
 }
 

diff --git a/_inc/client/components/auth-iframe/index.jsx b/_inc/client/components/auth-iframe/index.jsx
@@ -49,16 +49,26 @@ export class AuthIframe extends React.Component {
 	};
 
 	receiveData = e => {
-		if ( e.source === this.refs.iframe.contentWindow && e.data === 'close' ) {
-			// Remove listener, our job here is done.
-			window.removeEventListener( 'message', this.receiveData );
-			// Dispatch successful authorization.
-			this.props.authorizeUserInPlaceSuccess();
-			// Fetch user connection data after successful authorization to trigger state refresh
-			// for linked user.
-			this.props.fetchUserConnectionData();
-			// Trigger 'onAuthorized' callback, if provided
-			this.props.onAuthorized();
+		if ( e.source !== this.refs.iframe.contentWindow ) {
+			return;
+		}
+
+		switch ( e.data ) {
+			case 'close':
+				// Remove listener, our job here is done.
+				window.removeEventListener( 'message', this.receiveData );
+				// Dispatch successful authorization.
+				this.props.authorizeUserInPlaceSuccess();
+				// Fetch user connection data after successful authorization to trigger state refresh
+				// for linked user.
+				this.props.fetchUserConnectionData();
+				// Trigger 'onAuthorized' callback, if provided
+				this.props.onAuthorized();
+				break;
+			case 'wpcom_nocookie':
+				// Third-party cookies blocked. Let's redirect.
+				window.location.replace( this.props.connectUrl );
+				break;
 		}
 	};
 

diff --git a/_inc/client/components/banner/style.scss b/_inc/client/components/banner/style.scss
@@ -1,6 +1,8 @@
 @import '../../scss/layout';
 @import "../../scss/variables/colors";
 @import "../../scss/color-functions";
+@import "../../scss/functions/rem";
+@import "../../scss/typography";
 
 @mixin banner-color( $color ) {
 	border-left-color: $color;
@@ -146,17 +148,17 @@
 	}
 
 	.dops-banner__title {
-		font-size: 14px;
+		font-size: $font-body-small;
 		font-weight: 500;
 	}
 
 	.dops-banner__description {
-		font-size: 12px;
+		font-size: $font-body-extra-small;
 		margin-top: 3px;
 	}
 
 	.dops-banner__list {
-		font-size: 12px;
+		font-size: $font-body-extra-small;
 		list-style: none;
 		margin: 0;
 		li {
@@ -181,7 +183,7 @@
 
 .dops-banner__action {
 	align-self: center;
-	font-size: 12px;
+	font-size: $font-body-extra-small;
 	margin: 8px 0 0 0;
 	text-align: left;
 	width: 100%;

diff --git a/_inc/client/components/button/style.scss b/_inc/client/components/button/style.scss
@@ -1,5 +1,7 @@
 @import "../../scss/calypso-colors";
 @import "../../scss/color-functions";
+@import "../../scss/functions/rem";
+@import "../../scss/typography";
 
 // ==========================================================================
 // Buttons
@@ -16,12 +18,11 @@
 	margin: 0;
 	outline: 0;
 	overflow: hidden;
-	font-size: 14px;
+	font-size: $font-body-small;
 	text-overflow: ellipsis;
 	text-decoration: none;
 	vertical-align: top;
 	box-sizing: border-box;
-	font-size: 13px;
 	border-radius: 3px;
 	padding: 7px 14px 9px;
 	-webkit-appearance: none;

diff --git a/_inc/client/components/card/style.scss b/_inc/client/components/card/style.scss
@@ -1,7 +1,7 @@
 @import '../../scss/layout';
 @import '../../scss/typography';
 @import '../../scss/calypso-colors';
-@import '../../scss/rem';
+@import '../../scss/functions/rem';
 
 $title: #f9f9f9;
 $meta: #AAAAAA;
@@ -43,6 +43,10 @@ $section-border: #DDDDDD;
 	}
 }
 
+h2.dops-card-title {
+	font-size: $font-title-small;
+}
+
 // Clickable Card
 .dops-card__link-indicator {
 	color: lighten( $gray, 20% );

diff --git a/_inc/client/components/chart/style.scss b/_inc/client/components/chart/style.scss
@@ -3,7 +3,7 @@
 
 @import '../../scss/calypso-colors';
 @import '../../scss/layout';
-@import '../../scss/rem';
+@import '../../scss/functions/rem';
 @import '../../scss/mixin_clear-fix';
 @import '../../scss/mixin_long-content-fade';
 @import '../../scss/z-index';

diff --git a/_inc/client/components/count/style.scss b/_inc/client/components/count/style.scss
@@ -1,5 +1,5 @@
 @import '../../scss/calypso-colors';
-@import '../../scss/rem';
+@import '../../scss/functions/rem';
 
 .dops-count {
 	display: inline-block;

diff --git a/_inc/client/components/dash-item/index.jsx b/_inc/client/components/dash-item/index.jsx
@@ -102,7 +102,7 @@ export class DashItem extends Component {
 							}
 						>
 							<SimpleNotice showDismiss={ false } status={ this.props.status } isCompact={ true }>
-								{ __( 'Updates needed', { context: 'Short warning message' } ) }
+								{ _x( 'Updates needed', 'Short warning message', 'jetpack' ) }
 							</SimpleNotice>
 						</a>
 					);

diff --git a/_inc/client/components/dash-section-header/style.scss b/_inc/client/components/dash-section-header/style.scss
@@ -21,7 +21,7 @@
 	display: inline-block;
 	margin-top: 0;
 	margin-bottom: 0;
-	font-size: rem( 20px );
+	font-size: $font-title-small;
 	font-weight: 400;
 	white-space: nowrap;
 

diff --git a/_inc/client/components/external-link/style.scss b/_inc/client/components/external-link/style.scss
@@ -1,4 +1,4 @@
-@import '../../scss/rem';
+@import '../../scss/functions/rem';
 
 .dops-external-link .gridicons-external {
 	color: currentColor;

diff --git a/_inc/client/components/foldable-card/style.scss b/_inc/client/components/foldable-card/style.scss
@@ -1,7 +1,7 @@
 @import '../../scss/calypso-colors';
 @import '../../scss/calypso-mixins';
 @import '../../scss/mixin_clear-fix';
-@import '../../scss/rem';
+@import '../../scss/functions/rem';
 
 
 // Multisite

diff --git a/_inc/client/components/global-notices/style.scss b/_inc/client/components/global-notices/style.scss
@@ -18,18 +18,24 @@
 		right: 16px;
 		bottom: auto;
 		left: auto;
-		max-width: calc( 100% - 32px );
+
+		/* `36px` being the width of the collapsed WP-admin sidebar */
+		max-width: calc( 100% - 32px - 36px );
 	}
 
 	@include breakpoint( ">960px" ) {
 		top: 47px + 24px;
 		right: 24px;
-		max-width: calc( 100% - 48px );
+
+		/* `160px` being the width of the WP-admin sidebar */
+		max-width: calc( 100% - 48px - 160px );
 	}
 
 	@include breakpoint( ">1040px" ) {
 		right: 32px;
-		max-width: calc( 100% - 64px );
+
+		/* `160px` being the width of the WP-admin sidebar */
+		max-width: calc( 100% - 64px - 160px );
 	}
 }
 

diff --git a/_inc/client/components/jetpack-notices/notice-action-reconnect.jsx b/_inc/client/components/jetpack-notices/notice-action-reconnect.jsx
@@ -19,11 +19,7 @@ class NoticeActionReconnect extends React.Component {
 		action: PropTypes.string,
 	};
 
-	handleDisconnectClick = () => {
-		// Reconnection already in progress
-		if ( this.props.isReconnectingSite ) {
-			return;
-		}
+	getEventProps = () => {
 		const eventProps = {
 			location: 'dashboard',
 			purpose: 'reconnect',
@@ -32,12 +28,23 @@ class NoticeActionReconnect extends React.Component {
 		if ( this.props.errorCode ) {
 			eventProps.error_code = this.props.errorCode;
 		}
+		return eventProps;
+	};
 
-		analytics.tracks.recordEvent( 'jetpack_termination_error_notice_click', eventProps );
+	handleDisconnectClick = () => {
+		// Reconnection already in progress
+		if ( this.props.isReconnectingSite ) {
+			return;
+		}
 
+		analytics.tracks.recordEvent( 'jetpack_termination_error_notice_click', this.getEventProps() );
 		this.props.reconnectSite( this.props.action );
 	};
 
+	componentDidMount() {
+		analytics.tracks.recordEvent( 'jetpack_termination_error_notice_view', this.getEventProps() );
+	}
+
 	render() {
 		return (
 			<NoticeAction icon={ this.props.icon } onClick={ this.handleDisconnectClick }>