Merge remote-tracking branch 'origin/master' into feature/color-refre…

…sh-2019

* origin/master:
  change "expert" to "support" in page route and title (#29459)
  Add note to concierge upsell page about sessions only being offered in English. (#29461)
  Jetpack Blocks: Fix webpack warnings due to dynamic import (#29509)
  Gutenberg: Reset core resolvers on site change (#29445)
  Signup: Remove Masterbar from Signup (#28886)
  Fix missing bumpStat call (#29504)
  Gutenberg Jetpack Preset: Generate imports dynamically from index.json (#29435)
  Fix the clean:public script to do a better job cleaning public/ folder (#29354)
  Tiled gallery: Add alignWide support (#29493)
  Tiled Gallery: Add noResize to block save (#29496)
  Show G Suite user fields by default (#29458)
  ColorThemes: Add GA and bumpStat events for scheme picking (#29413)
  Remove legacy mock for extensions reducer (#29397)
  Antispam promo card: tweak copy to make it clearer (#29440)
  prevent 0 as street number for ebanx checkouts (#29487)
  Gutenberg: Update Related Posts to use the posts endpoint (#29439)
  remove override on payment methods name in India (#29406)
  Add a space to separate "the" from the holiday name placeholder. (#29479)
  Revert "Migrate my-sites/sharing to webpack css pipeline (#28607)" (#29463)
  Gutenpack Subscription Block (Take two) (#28887)

.gitignore

@@ -32,8 +32,12 @@ test-results*.xml
 /public/*.js.map
 /public/*.css
 /public/*.css.map
+/public/vendors~*
 /public/sections/*
 /public/sections-rtl/*
+/public/images/*.gif
+/public/images/*.jpg
+/public/images/*.png
 /public/images/*.svg
 /server/devdocs/search-index.js
 /server/devdocs/components-usage-stats.json

assets/stylesheets/_components.scss

@@ -179,7 +179,6 @@
 @import 'components/select-dropdown/style';
 @import 'components/seo/style';
 @import 'blocks/upgrade-nudge-expanded/style';
-@import 'components/seo/preview-upgrade-nudge/style';
 @import 'components/signup-site-title/style';
 @import 'components/site-selector/style';
 @import 'components/site-title-example/style';
@@ -354,6 +353,10 @@
 @import 'my-sites/plugins/plugins-browser-item/style';
 @import 'my-sites/plugins/plugins-browser-list/style';
 @import 'my-sites/plugins/plugins-browser/style';
+@import 'my-sites/sharing/style';
+@import 'my-sites/sharing/connections/account-dialog.scss';
+@import 'my-sites/sharing/connections/account-dialog-account.scss';
+@import 'my-sites/sharing/connections/services-group.scss';
 @import 'my-sites/sidebar/style';
 @import 'my-sites/sidebar-navigation/style';
 @import 'my-sites/site-indicator/style';

assets/stylesheets/shared/_extends-forms.scss

@@ -1,4 +1,8 @@
-// SASS placeholder selectors for form styles
+/**
+ * SASS placeholder selectors for form styles
+ *
+ * @format
+ */
 
 %form {
 	ul {

client/blocks/inline-help/style.scss

@@ -240,6 +240,15 @@
 	}
 }
 
+// Hide extraneous UI inside secondary view
+.is-secondary-view-active {
+	.checklist-navigation,
+	.inline-help__gutenberg-editor-toggle,
+	.inline-help__classic-editor-toggle {
+		display: none;
+	}
+}
+
 .inline-help__view-heading {
 	display: block;
 	font-size: 14px;

client/components/seo/preview-upgrade-nudge/index.jsx

@@ -22,6 +22,12 @@ import Banner from 'components/banner';
 import { findFirstSimilarPlanKey } from 'lib/plans';
 import { TERM_ANNUALLY, TYPE_BUSINESS } from 'lib/plans/constants';
 
+/**
+ * Style dependencies
+ */
+import './style.scss';
+import upgradeNudgeImage from './preview-upgrade-nudge.png';
+
 export const SeoPreviewNudge = ( { translate, site, isJetpack = false } ) => {
 	return (
 		<div className="preview-upgrade-nudge">
@@ -43,7 +49,7 @@ export const SeoPreviewNudge = ( { translate, site, isJetpack = false } ) => {
 
 			<div className="preview-upgrade-nudge__features">
 				<FeatureExample>
-					<img src="/calypso/images/advanced-seo-nudge.png" />
+					<img src={ upgradeNudgeImage } alt="" />
 				</FeatureExample>
 				<div className="preview-upgrade-nudge__features-details">
 					<ul className="preview-upgrade-nudge__features-list">

client/components/upgrades/google-apps/google-apps-dialog/index.jsx

@@ -6,8 +6,6 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import TransitionGroup from 'react-transition-group/TransitionGroup';
-import CSSTransition from 'react-transition-group/CSSTransition';
 import { localize } from 'i18n-calypso';
 import { connect } from 'react-redux';
 import { get } from 'lodash';
@@ -43,7 +41,6 @@ class GoogleAppsDialog extends React.Component {
 	};
 
 	state = {
-		isAddingEmail: false,
 		users: null,
 		validationErrors: null,
 	};
@@ -85,13 +82,7 @@ class GoogleAppsDialog extends React.Component {
 				<CompactCard>{ this.header() }</CompactCard>
 				<CompactCard>
 					<GoogleAppsProductDetails domain={ this.props.domain } { ...prices } />
-					<TransitionGroup>
-						{ this.state.isAddingEmail && (
-							<CSSTransition classNames="google-apps-dialog__users" timeout={ 200 }>
-								{ this.renderGoogleAppsUsers() }
-							</CSSTransition>
-						) }
-					</TransitionGroup>
+					{ this.renderGoogleAppsUsers() }
 				</CompactCard>
 				<CompactCard>{ this.footer() }</CompactCard>
 			</form>
@@ -139,42 +130,23 @@ class GoogleAppsDialog extends React.Component {
 
 	footer() {
 		const { translate } = this.props;
-		const continueButtonHandler = this.state.isAddingEmail
-			? this.handleFormSubmit
-			: this.handleAddEmail;
-		const continueButtonText = this.state.isAddingEmail
-			? translate( 'Continue \u00BB' )
-			: translate( 'Yes, Add Email \u00BB' );
-
 		return (
 			<footer className="google-apps-dialog__footer">
-				{ ! this.state.isAddingEmail && (
-					<Button
-						className="google-apps-dialog__checkout-button"
-						onClick={ this.handleFormCheckout }
-					>
-						{ translate( 'Skip' ) }
-					</Button>
-				) }
+				<Button className="google-apps-dialog__checkout-button" onClick={ this.handleFormCheckout }>
+					{ translate( 'Skip' ) }
+				</Button>
+
 				<Button
 					primary
 					className="google-apps-dialog__continue-button"
-					onClick={ continueButtonHandler }
+					onClick={ this.handleFormSubmit }
 				>
-					{ continueButtonText }
+					{ translate( 'Yes, Add Email \u00BB' ) }
 				</Button>
 			</footer>
 		);
 	}
 
-	handleAddEmail = event => {
-		event.preventDefault();
-
-		this.props.recordAddEmailButtonClick( this.props.analyticsSection );
-
-		this.setState( { isAddingEmail: true } );
-	};
-
 	handleFormSubmit = event => {
 		event.preventDefault();
 

client/gutenberg/editor/calypso-store/actions.js

@@ -0,0 +1,4 @@
+export const setSelectedSiteId = selectedSiteId => ( {
+	type: 'GUTENLYPSO_SELECTED_SITE_ID_SET',
+	selectedSiteId,
+} );

client/gutenberg/editor/calypso-store/index.js

@@ -0,0 +1,19 @@
+/**
+ * WordPress Dependencies
+ */
+import { registerStore } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import reducer from './reducer';
+import * as actions from './actions';
+import * as selectors from './selectors';
+
+const store = registerStore( 'gutenberg/calypso', {
+	reducer,
+	actions,
+	selectors,
+} );
+
+export default store;

client/gutenberg/editor/calypso-store/reducer.js

@@ -0,0 +1,10 @@
+/* eslint-disable wpcalypso/import-docblock */
+/**
+ * WordPress dependencies
+ */
+import { combineReducers } from '@wordpress/data';
+
+const selectedSiteId = ( state = null, action ) =>
+	'GUTENLYPSO_SELECTED_SITE_ID_SET' === action.type ? action.selectedSiteId : state;
+
+export default combineReducers( { selectedSiteId } );

client/gutenberg/editor/calypso-store/selectors.js

@@ -0,0 +1 @@
+export const getSelectedSiteId = state => state.selectedSiteId;

client/gutenberg/editor/controller.js

@@ -12,7 +12,7 @@ import { has, set, uniqueId } from 'lodash';
  * WordPress dependencies
  */
 import { setLocaleData } from '@wordpress/i18n';
-import { dispatch } from '@wordpress/data';
+import { dispatch, select } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -110,6 +110,22 @@ export const loadGutenbergBlockAvailability = store => {
 	} );
 };
 
+export const resetGutenbergState = ( registry, selectedSiteId ) => {
+	// Always reset core/editor, core/notices, and other UI parts
+	registry.reset( 'core/editor' );
+	registry.reset( 'core/notices' );
+	dispatch( 'core/edit-post' ).closePublishSidebar();
+	dispatch( 'core/edit-post' ).closeModal();
+
+	// Only reset core/data on site change
+	const previousGutenbergSiteId = select( 'gutenberg/calypso' ).getSelectedSiteId();
+
+	if ( !! previousGutenbergSiteId && previousGutenbergSiteId !== selectedSiteId ) {
+		registry.resetCoreResolvers();
+	}
+	dispatch( 'gutenberg/calypso' ).setSelectedSiteId( selectedSiteId );
+};
+
 export const redirect = ( { store: { getState } }, next ) => {
 	const state = getState();
 	const siteId = getSelectedSiteId( state );
@@ -140,10 +156,7 @@ export const post = async ( context, next ) => {
 
 		const { Editor, registry } = initGutenberg( userId, context.store );
 
-		// Reset the Gutenberg state
-		registry.reset();
-		dispatch( 'core/edit-post' ).closePublishSidebar();
-		dispatch( 'core/edit-post' ).closeModal();
+		resetGutenbergState( registry, siteId );
 
 		return props => (
 			<Editor { ...{ siteId, postId, postType, uniqueDraftKey, isDemoContent, ...props } } />

client/gutenberg/editor/init.js

@@ -34,26 +34,34 @@ const addResetToRegistry = registry => {
 		window.gutenbergState = () => mapValues( registry.stores, ( { store } ) => store.getState() );
 	}
 
-	const resettableStores = [ 'core/editor', 'core/notices' ];
-
 	const stores = [];
 	return {
 		registerStore( namespace, options ) {
-			let store;
-			if ( -1 === resettableStores.indexOf( namespace ) ) {
-				store = registry.registerStore( namespace, options );
-			} else {
-				store = registry.registerStore( namespace, {
-					...options,
-					reducer: ( state, action ) =>
-						options.reducer( 'GUTENLYPSO_RESET' === action.type ? undefined : state, action ),
-				} );
-			}
+			const store = registry.registerStore( namespace, {
+				...options,
+				reducer: ( state, action ) => {
+					if ( 'GUTENLYPSO_RESET' === action.type && namespace === action.namespace ) {
+						debug( `Resetting ${ namespace } store` );
+						return options.reducer( undefined, action );
+					}
+					return options.reducer( state, action );
+				},
+			} );
 			stores.push( store );
 			return store;
 		},
-		reset() {
-			stores.forEach( store => store.dispatch( { type: 'GUTENLYPSO_RESET' } ) );
+		reset( namespace ) {
+			stores.forEach( store => store.dispatch( { type: 'GUTENLYPSO_RESET', namespace } ) );
+		},
+		resetCoreResolvers() {
+			// @see https://github.com/WordPress/gutenberg/blob/e1092c0d0b75fe53ab57bc6c4cc9e32cb2e74e40/packages/data/src/resolvers-cache-middleware.js#L14-L34
+			const resolvers = registry.select( 'core/data' ).getCachedResolvers( 'core' );
+			debug( `Resetting core store resolvers: ${ Object.keys( resolvers ).toString() }` );
+			Object.entries( resolvers ).forEach( ( [ selectorName, resolversByArgs ] ) => {
+				resolversByArgs.forEach( ( value, args ) => {
+					registry.dispatch( 'core/data' ).invalidateResolution( 'core', selectorName, args );
+				} );
+			} );
 		},
 	};
 };
@@ -63,12 +71,15 @@ const addResetToRegistry = registry => {
 export const initGutenberg = once( ( userId, store ) => {
 	debug( 'Starting Gutenberg editor initialization...' );
 
+	const registry = use( addResetToRegistry );
+
 	debug( 'Registering data plugins' );
 	const storageKey = 'WP_DATA_USER_' + userId;
 	use( plugins.persistence, { storageKey: storageKey } );
 	use( plugins.controls );
 
-	const registry = use( addResetToRegistry );
+	debug( 'Initializing gutenberg/calypso store' );
+	require( 'gutenberg/editor/calypso-store' );
 
 	// We need to ensure that core-data is loaded after the data plugins have been registered.
 	debug( 'Initializing core-data store' );

client/gutenberg/extensions/contact-form/editor.js

@@ -4,7 +4,7 @@
  * Internal dependencies
  */
 import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block';
-import { fields, name, settings } from '.';
+import { childBlocks, name, settings } from '.';
 
 registerJetpackBlock( name, settings );
-fields.forEach( field => registerJetpackBlock( field.name, field.settings ) );
+childBlocks.forEach( childBlock => registerJetpackBlock( childBlock.name, childBlock.settings ) );

client/gutenberg/extensions/contact-form/index.js

@@ -193,7 +193,7 @@ const editMultiField = type => props => (
 	/>
 );
 
-export const fields = [
+export const childBlocks = [
 	{
 		name: 'field-text',
 		settings: {

client/gutenberg/extensions/presets/jetpack/editor.js

@@ -5,27 +5,27 @@
  */
 import './shared/public-path';
 import './editor-shared/block-category'; // Register the Jetpack category
-
-// TODO: Generate dyanmically from index.json
-// Appending `Block` to the names to keep `Map` from colliding with JS' Map
-import * as ContactFormBlock from 'gutenberg/extensions/contact-form';
-import * as MarkdownBlock from 'gutenberg/extensions/markdown';
-import * as MapBlock from 'gutenberg/extensions/map';
-import * as PublicizeBlock from 'gutenberg/extensions/publicize';
-import * as RelatedPostsBlock from 'gutenberg/extensions/related-posts';
-import * as SimplePaymentsBlock from 'gutenberg/extensions/simple-payments';
-import * as TiledGalleryBlock from 'gutenberg/extensions/tiled-gallery';
-import * as VRBlock from 'gutenberg/extensions/vr';
+import extensionSlugsJson from './index.json';
 import { isEnabled } from 'config';
 
-export default [
-	{ name: ContactFormBlock.name, settings: ContactFormBlock.settings },
-	...ContactFormBlock.fields,
-	MarkdownBlock,
-	MapBlock,
-	PublicizeBlock,
-	SimplePaymentsBlock,
-	...( isEnabled( 'jetpack/blocks/beta' )
-		? [ RelatedPostsBlock, TiledGalleryBlock, VRBlock ]
-		: [] ),
+const extensionSlugs = [
+	...extensionSlugsJson.production,
+	...( isEnabled( 'jetpack/blocks/beta' ) ? extensionSlugsJson.beta : [] ),
 ];
+
+export async function getExtensions() {
+	const promises = extensionSlugs.map( slug =>
+		// Need to explicitly look for `index.js` or Webpack will try with
+		// all files when resolving the dynamic import -- including `README.md`s,
+		// leading to warnings during startup.
+		import( /* webpackMode: "eager" */ `../../${ slug }/index.js` ).then(
+			( { childBlocks, name, settings } ) => ( {
+				childBlocks,
+				name,
+				settings,
+			} )
+		)
+	);
+
+	return await Promise.all( promises );
+}

client/gutenberg/extensions/presets/jetpack/index.json

@@ -8,6 +8,7 @@
   ],
   "beta": [
     "related-posts",
+    "subscriptions",
     "tiled-gallery",
     "vr"
   ]