From 70b7b0d6429bb7f9a8253304eccfccbd4db0db44 Mon Sep 17 00:00:00 2001 From: Dave Martin Date: Fri, 17 Jan 2020 09:55:47 -0500 Subject: [PATCH] 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 --- .../components/jetpack-contact-form.js | 18 ++--- extensions/blocks/contact-form/editor.scss | 4 +- extensions/blocks/gif/edit.js | 2 +- extensions/blocks/gif/editor.scss | 10 +-- extensions/blocks/mailchimp/edit.js | 27 +++---- extensions/blocks/mailchimp/editor.scss | 10 +++ extensions/blocks/map/edit.js | 71 +++++++++++-------- extensions/blocks/map/editor.scss | 12 ---- extensions/blocks/pinterest/edit.js | 2 +- extensions/blocks/recurring-payments/edit.jsx | 20 +++--- .../blocks/recurring-payments/editor.scss | 11 +-- extensions/blocks/repeat-visitor/editor.scss | 8 ++- 12 files changed, 99 insertions(+), 96 deletions(-) diff --git a/extensions/blocks/contact-form/components/jetpack-contact-form.js b/extensions/blocks/contact-form/components/jetpack-contact-form.js index 418a2344951f3..dc88dd2755d68 100644 --- 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( ) } + 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' + ) } >
-

{ this.getIntroMessage() }

{ this.renderToAndSubjectFields() } -

+

{ __( '(If you leave these blank, notifications will go to the author with the post or page title as the subject line.)', 'jetpack' ) } -

+
-
diff --git a/extensions/blocks/contact-form/editor.scss b/extensions/blocks/contact-form/editor.scss index 8fa23e87dc3a7..04347a9833753 100644 --- 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 index 215a8c2078117..352c0792b6f81 100644 --- 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 } /> -
diff --git a/extensions/blocks/gif/editor.scss b/extensions/blocks/gif/editor.scss index f22573f63aa93..8b298a99c3fc7 100644 --- 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 index 0a6e7092664d4..b0cd267a5146b 100644 --- a/extensions/blocks/mailchimp/edit.js +++ b/extensions/blocks/mailchimp/edit.js @@ -149,23 +149,24 @@ class MailchimpSubscribeEdit extends Component { ); const placeholder = ( - -
- { __( - 'You need to connect your Mailchimp account and choose a list in order to start collecting Email subscribers.', - 'jetpack' - ) } -
-
+ +
-
-
-
+ ); const inspectorControls = ( diff --git a/extensions/blocks/mailchimp/editor.scss b/extensions/blocks/mailchimp/editor.scss index 84de75481ad0a..d7bf982026db2 100644 --- 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 index 497eaa70933fe..75a1da45851db 100644 --- 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 { ); + + const instructions = ( + + { __( 'To use the map block, you need an Access Token.', 'jetpack' ) } +
+ + { __( 'Create an account or log in to Mapbox.', 'jetpack' ) } + +
+ { __( + 'Locate and copy the default access token. Then, paste it into the field below.', + 'jetpack' + ) } + + ); const placeholderAPIStateFailure = ( - + -
- { __( 'To use the map block, you need an Access Token.', 'jetpack' ) } -
- - { __( 'Create an account or log in to Mapbox.', 'jetpack' ) } - -
- { __( - 'Locate and copy the default access token. Then, paste it into the field below.', - 'jetpack' - ) } -
- - +
+ + +
); diff --git a/extensions/blocks/map/editor.scss b/extensions/blocks/map/editor.scss index 32064425b88a9..9b5efc02f6b37 100644 --- 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 index a10ebf620e19b..6d3764b5c8211 100644 --- 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 } ) } /> - { cannotEmbed && ( diff --git a/extensions/blocks/recurring-payments/edit.jsx b/extensions/blocks/recurring-payments/edit.jsx index 800c6a6f5bc1c..4e8a8728cc9da 100644 --- a/extensions/blocks/recurring-payments/edit.jsx +++ b/extensions/blocks/recurring-payments/edit.jsx @@ -406,19 +406,15 @@ class MembershipsButtonEdit extends Component { icon={ } label={ __( 'Recurring Payments', 'jetpack' ) } notices={ notices } + instructions={ __( + "You'll need to upgrade your plan to use the Recurring Payments button.", + 'jetpack' + ) } > -
-

- { __( - "You'll need to upgrade your plan to use the Recurring Payments button.", - 'jetpack' - ) } -

- - { this.renderDisclaimer() } -
+ + { this.renderDisclaimer() }
) } diff --git a/extensions/blocks/recurring-payments/editor.scss b/extensions/blocks/recurring-payments/editor.scss index 9a1343692fd02..afd3b0b207c1f 100644 --- 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 index 7d2f32505c84f..43ffa7d91ab96 100644 --- 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