Update JP block style consistency after core update (#14371)

* Updates to contact form block blank slate Before: https://share.getcloudapp.com/jkunAvl0 After: https://share.getcloudapp.com/Z4uwnDx1 * Gif block blanks slate screen updates Before: https://share.getcloudapp.com/nOumKbWR After: https://share.getcloudapp.com/d5uegyvP * Mailchimp block blank slate design update Before: https://share.getcloudapp.com/d5ueD8yd After: https://share.getcloudapp.com/rRuLzXG9 * Map block blank slate design improvements Before: https://share.getcloudapp.com/NQuvpqlW After: https://share.getcloudapp.com/p9u5ZxAv * Pinterest block blank slate design update Before: https://share.getcloudapp.com/WnuE6KZr After: https://share.getcloudapp.com/v1umWR9b * Recurring Payments blank slate screen one design Before: https://share.getcloudapp.com/9ZuNy2pP After: https://share.getcloudapp.com/mXumGE5X * Repeat visitor block blank slate design updates Before: https://share.getcloudapp.com/Z4uwGZGz After: https://share.getcloudapp.com/YEud48nQ * add all instructions to the placeholder * Repeat visitor block, reduced excess margin a bit more * Added padding between MailChimp icon and name * Moved className to placeholder on MailChimp block * Added padding between gif block icon and title * Visual updates to MailChimp block - Put recheck connection button on new line - Put max-width on information div * Changes to form and gif block - Removed information dive max-width - Made buttons isDefault (note: for some reasons, isSecondary does not work on either of these blocks) * Updated MailChimp button placement and color of alert text in repeat visitor block * Remove needless button margin on form block * change TextControl to an input, so that it picks up the placeholder styles * remove unnecessary code Co-authored-by: Ben Dwyer <ben@scruffian.com>
Automattic · Jan 17, 2020 · 70b7b0d · 70b7b0d
1 parent ff76ea1
commit 70b7b0d
Show file tree

Hide file tree

Showing 12 changed files with 99 additions and 96 deletions.
diff --git a/extensions/blocks/contact-form/components/jetpack-contact-form.js b/extensions/blocks/contact-form/components/jetpack-contact-form.js
@@ -71,13 +71,6 @@ class JetpackContactForm extends Component {
 		};
 	}
 
-	getIntroMessage() {
-		return __(
-			'You’ll receive an email notification each time someone fills out the form. Where should it go, and what should the subject line be?',
-			'jetpack'
-		);
-	}
-
 	getEmailHelpMessage() {
 		return __( 'You can enter multiple email addresses separated by commas.', 'jetpack' );
 	}
@@ -270,18 +263,21 @@ class JetpackContactForm extends Component {
 							icon={ renderMaterialIcon(
 								<Path d="M13 7.5h5v2h-5zm0 7h5v2h-5zM19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM11 6H6v5h5V6zm-1 4H7V7h3v3zm1 3H6v5h5v-5zm-1 4H7v-3h3v3z" />
 							) }
+							instructions={ __(
+								'You’ll receive an email notification each time someone fills out the form. Where should it go, and what should the subject line be?',
+								'jetpack'
+							) }
 						>
 							<form onSubmit={ this.onFormSettingsSet }>
-								<p className="jetpack-contact-form__intro-message">{ this.getIntroMessage() }</p>
 								{ this.renderToAndSubjectFields() }
-								<p className="jetpack-contact-form__intro-message">
+								<div class="components-placeholder__instructions">
 									{ __(
 										'(If you leave these blank, notifications will go to the author with the post or page title as the subject line.)',
 										'jetpack'
 									) }
-								</p>
+								</div>
 								<div className="jetpack-contact-form__create">
-									<Button isPrimary type="submit" disabled={ this.hasEmailError() }>
+									<Button isDefault type="submit" disabled={ this.hasEmailError() }>
 										{ __( 'Add form', 'jetpack' ) }
 									</Button>
 								</div>

diff --git a/extensions/blocks/contact-form/editor.scss b/extensions/blocks/contact-form/editor.scss
@@ -20,12 +20,12 @@
 	}
 
 	.help-message {
+		color: $dark-gray-150;
 		width: 100%;
-		margin: -18px 0 28px;
+		margin: 0 0 1em;
 	}
 
 	.components-base-control {
-		margin-bottom: 16px;
 		width: 100%;
 	}
 }

diff --git a/extensions/blocks/gif/edit.js b/extensions/blocks/gif/edit.js
@@ -143,7 +143,7 @@ class GifEdit extends Component {
 					onChange={ value => setAttributes( { searchText: value } ) }
 					value={ searchText }
 				/>
-				<Button isLarge onClick={ this.onSubmit }>
+				<Button isDefault onClick={ this.onSubmit }>
 					{ __( 'Search', 'jetpack' ) }
 				</Button>
 			</form>

diff --git a/extensions/blocks/gif/editor.scss b/extensions/blocks/gif/editor.scss
@@ -7,6 +7,9 @@
 	.components-base-control__field {
 		text-align: center;
 	}
+	.components-placeholder__label svg {
+		margin-right: 1ch;
+	}
 	.wp-block-jetpack-gif_cover {
 		background: none;
 		border: none;
@@ -27,17 +30,16 @@
 		flex-direction: row;
 		flex-wrap: wrap;
 		justify-content: center;
-		margin: 0 auto;
 		max-width: 400px;
 		width: 100%;
 		z-index: 1;
+		.components-text-control__input {
+			height: 36px;
+		}
 		.components-base-control__label {
 			position: absolute;
 			top: -1000em;
 		}
-		.components-button {
-			margin-top: 1px;
-		}
 	}
 	.wp-block-jetpack-gif_input {
 		flex-grow: 1;

diff --git a/extensions/blocks/mailchimp/edit.js b/extensions/blocks/mailchimp/edit.js
@@ -149,23 +149,24 @@ class MailchimpSubscribeEdit extends Component {
 			</Placeholder>
 		);
 		const placeholder = (
-			<Placeholder icon={ icon } label={ __( 'Mailchimp', 'jetpack' ) } notices={ notices }>
-				<div className="components-placeholder__instructions">
-					{ __(
-						'You need to connect your Mailchimp account and choose a list in order to start collecting Email subscribers.',
-						'jetpack'
-					) }
-					<br />
-					<br />
+			<Placeholder
+				className="wp-block-jetpack-mailchimp"
+				icon={ icon }
+				label={ __( 'Mailchimp', 'jetpack' ) }
+				notices={ notices }
+				instructions={ __(
+					'You need to connect your Mailchimp account and choose a list in order to start collecting Email subscribers.',
+					'jetpack'
+				) }
+			>
+				<div>
 					<Button isDefault isLarge href={ connectURL } target="_blank">
 						{ __( 'Set up Mailchimp form', 'jetpack' ) }
 					</Button>
-					<br />
-					<br />
-					<Button isLink onClick={ this.apiCall }>
-						{ __( 'Re-check Connection', 'jetpack' ) }
-					</Button>
 				</div>
+				<Button isLink onClick={ this.apiCall }>
+					{ __( 'Re-check Connection', 'jetpack' ) }
+				</Button>
 			</Placeholder>
 		);
 		const inspectorControls = (

diff --git a/extensions/blocks/mailchimp/editor.scss b/extensions/blocks/mailchimp/editor.scss
@@ -2,6 +2,10 @@
 
 .wp-block-jetpack-mailchimp {
 
+	.components-placeholder__label svg {
+		margin-right: 1ch;
+	}
+
 	.wp-block-jetpack-mailchimp_notification {
 		display: block;
 	}
@@ -26,4 +30,10 @@
 		margin-top: 0;
 	}
 
+	.components-placeholder__fieldset {
+		display: block;
+		flex-direction: unset;
+		flex-wrap: unset;
+	}
+
 }
diff --git a/extensions/blocks/map/edit.js b/extensions/blocks/map/edit.js
@@ -69,9 +69,9 @@ class MapEdit extends Component {
 		// Allow one cycle for alignment change to take effect
 		setTimeout( this.mapRef.current.sizeMap, 0 );
 	};
-	updateAPIKeyControl = value => {
+	updateAPIKeyControl = event => {
 		this.setState( {
-			apiKeyControl: value,
+			apiKeyControl: event.target.value,
 		} );
 	};
 	updateAPIKey = () => {
@@ -211,36 +211,47 @@ class MapEdit extends Component {
 				<Spinner />
 			</Placeholder>
 		);
+
+		const instructions = (
+			<Fragment>
+				{ __( 'To use the map block, you need an Access Token.', 'jetpack' ) }
+				<br />
+				<ExternalLink href="https://www.mapbox.com">
+					{ __( 'Create an account or log in to Mapbox.', 'jetpack' ) }
+				</ExternalLink>
+				<br />
+				{ __(
+					'Locate and copy the default access token. Then, paste it into the field below.',
+					'jetpack'
+				) }
+			</Fragment>
+		);
 		const placeholderAPIStateFailure = (
-			<Placeholder icon={ settings.icon } label={ __( 'Map', 'jetpack' ) } notices={ notices }>
+			<Placeholder
+				icon={ settings.icon }
+				label={ __( 'Map', 'jetpack' ) }
+				notices={ notices }
+				instructions={ instructions }
+			>
 				<Fragment>
-					<div className="components-placeholder__instructions">
-						{ __( 'To use the map block, you need an Access Token.', 'jetpack' ) }
-						<br />
-						<ExternalLink href="https://www.mapbox.com">
-							{ __( 'Create an account or log in to Mapbox.', 'jetpack' ) }
-						</ExternalLink>
-						<br />
-						{ __(
-							'Locate and copy the default access token. Then, paste it into the field below.',
-							'jetpack'
-						) }
-					</div>
-					<TextControl
-						className="wp-block-jetpack-map-components-text-control-api-key"
-						disabled={ apiRequestOutstanding }
-						placeholder={ __( 'Paste Token Here', 'jetpack' ) }
-						value={ apiKeyControl }
-						onChange={ this.updateAPIKeyControl }
-					/>
-					<Button
-						className="wp-block-jetpack-map-components-text-control-api-key-submit"
-						isLarge
-						disabled={ apiRequestOutstanding || ! apiKeyControl || apiKeyControl.length < 1 }
-						onClick={ this.updateAPIKey }
-					>
-						{ __( 'Set Token', 'jetpack' ) }
-					</Button>
+					<form>
+						<input
+							type="text"
+							className="components-placeholder__input"
+							disabled={ apiRequestOutstanding }
+							placeholder={ __( 'Paste Token Here', 'jetpack' ) }
+							value={ apiKeyControl }
+							onChange={ this.updateAPIKeyControl }
+						/>
+						<Button
+							isLarge
+							isSecondary
+							disabled={ apiRequestOutstanding || ! apiKeyControl || apiKeyControl.length < 1 }
+							onClick={ this.updateAPIKey }
+						>
+							{ __( 'Set Token', 'jetpack' ) }
+						</Button>
+					</form>
 				</Fragment>
 			</Placeholder>
 		);

diff --git a/extensions/blocks/map/editor.scss b/extensions/blocks/map/editor.scss
@@ -5,18 +5,6 @@
 		margin-right: 0.4em;
 	}
 }
-.wp-block-jetpack-map-components-text-control-api-key {
-	margin-right: 4px;
-	&.components-base-control .components-base-control__field {
-		margin-bottom: 0;
-	}
-}
-.wp-block-jetpack-map-components-text-control-api-key-submit.is-large {
-	height: 31px;
-}
-.wp-block-jetpack-map-components-text-control-api-key-submit:disabled {
-	opacity: 1;
-}
 .wp-block[data-type='jetpack/map'] {
 	.components-placeholder__label {
 		svg {

diff --git a/extensions/blocks/pinterest/edit.js b/extensions/blocks/pinterest/edit.js
@@ -171,7 +171,7 @@ class PinterestEdit extends Component {
 								placeholder={ __( 'Enter URL to embed here…', 'jetpack' ) }
 								onChange={ event => this.setState( { editedUrl: event.target.value } ) }
 							/>
-							<Button isLarge type="submit">
+							<Button isLarge isSecondary type="submit">
 								{ _x( 'Embed', 'button label', 'jetpack' ) }
 							</Button>
 							{ cannotEmbed && (

diff --git a/extensions/blocks/recurring-payments/edit.jsx b/extensions/blocks/recurring-payments/edit.jsx
@@ -406,19 +406,15 @@ class MembershipsButtonEdit extends Component {
 							icon={ <BlockIcon icon={ icon } /> }
 							label={ __( 'Recurring Payments', 'jetpack' ) }
 							notices={ notices }
+							instructions={ __(
+								"You'll need to upgrade your plan to use the Recurring Payments button.",
+								'jetpack'
+							) }
 						>
-							<div className="components-placeholder__instructions">
-								<p>
-									{ __(
-										"You'll need to upgrade your plan to use the Recurring Payments button.",
-										'jetpack'
-									) }
-								</p>
-								<Button isDefault isLarge href={ this.state.upgradeURL } target="_blank">
-									{ __( 'Upgrade Your Plan', 'jetpack' ) }
-								</Button>
-								{ this.renderDisclaimer() }
-							</div>
+							<Button isSecondary isLarge href={ this.state.upgradeURL } target="_blank">
+								{ __( 'Upgrade Your Plan', 'jetpack' ) }
+							</Button>
+							{ this.renderDisclaimer() }
 						</Placeholder>
 					</div>
 				) }

diff --git a/extensions/blocks/recurring-payments/editor.scss b/extensions/blocks/recurring-payments/editor.scss
@@ -9,11 +9,6 @@
 		text-align: left;
 	}
 
-	.components-button {
-		display: inline-block;
-		margin-bottom: 20px;
-	}
-
 	.components-placeholder {
 		min-height: 150px;
 		padding: 24px;
@@ -25,10 +20,6 @@
 				margin: 0 0 20px;
 			}
 		}
-
-		&__instructions {
-			margin-bottom: 0;
-		}
 	}
 
 	.editor-rich-text__inline-toolbar {
@@ -45,10 +36,12 @@
 
 		&__disclaimer {
 			color: var( --color-gray-200 );
+			flex-basis: 100%;
 			margin: 0;
 			font-style: italic;
 			a {
 				color: var( --color-gray-400 );
+				line-height: 36px;
 			}
 		}
 

diff --git a/extensions/blocks/repeat-visitor/editor.scss b/extensions/blocks/repeat-visitor/editor.scss
@@ -1,6 +1,9 @@
 .wp-block-jetpack-repeat-visitor {
 	.components-notice {
 		margin: 1em 0 0;
+		&__content {
+			color: var( --color-black );
+		}
 	}
 	.components-radio-control__option {
 		text-align: left;
@@ -32,6 +35,7 @@
 		flex-wrap: nowrap;
 		.components-base-control {
 			flex-basis: 100%;
+			margin-bottom: 0;
 		}
 	}
 
@@ -49,9 +53,11 @@
 	margin-right: 20px;
 
 	.components-text-control__input {
-		width: 5em;
+		margin-left: 12px;
 		text-align: center;
+		width: 5em;
 	}
+
 }
 
 // Overrides to make the preview look good