Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update JP block style consistency after core update #14371

Merged
merged 19 commits into from
Jan 17, 2020
Merged

Update JP block style consistency after core update #14371

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
dbc8eaf
Updates to contact form block blank slate
Jan 15, 2020
fc625d8
Gif block blanks slate screen updates
Jan 15, 2020
da8c4eb
Mailchimp block blank slate design update
Jan 16, 2020
be3332e
Map block blank slate design improvements
Jan 16, 2020
c226bda
Pinterest block blank slate design update
Jan 16, 2020
c3b5b16
add all instructions to the placeholder
scruffian Jan 17, 2020
d1a5da8
Recurring Payments blank slate screen one design
Jan 16, 2020
89b0d80
Repeat visitor block blank slate design updates
Jan 16, 2020
fcc76ad
Repeat visitor block, reduced excess margin a bit more
Jan 16, 2020
54450cb
Added padding between MailChimp icon and name
Jan 16, 2020
28c7362
Moved className to placeholder on MailChimp block
Jan 16, 2020
9d92228
Added padding between gif block icon and title
Jan 16, 2020
ea6a8fe
Visual updates to MailChimp block
Jan 16, 2020
8de3b76
Changes to form and gif block
Jan 16, 2020
1d324a3
Updated MailChimp button placement and color of alert text in repeat …
Jan 16, 2020
fe08071
Remove needless button margin on form block
Jan 17, 2020
824322c
change TextControl to an input, so that it picks up the placeholder s…
scruffian Jan 17, 2020
da1cf45
Merge branch 'update/jp-block-style-consistency' of https://github.co…
scruffian Jan 17, 2020
36f34c4
remove unnecessary code
scruffian Jan 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 7 additions & 11 deletions extensions/blocks/contact-form/components/jetpack-contact-form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
}
Expand Down Expand Up @@ -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() }>
davemart-in marked this conversation as resolved.
Show resolved Hide resolved
{ __( 'Add form', 'jetpack' ) }
</Button>
</div>
Expand Down
4 changes: 2 additions & 2 deletions extensions/blocks/contact-form/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}
}
Expand Down
2 changes: 1 addition & 1 deletion extensions/blocks/gif/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
10 changes: 6 additions & 4 deletions extensions/blocks/gif/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@
.components-base-control__field {
text-align: center;
}
.components-placeholder__label svg {
margin-right: 1ch;
jeherve marked this conversation as resolved.
Show resolved Hide resolved
}
.wp-block-jetpack-gif_cover {
background: none;
border: none;
Expand All @@ -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;
davemart-in marked this conversation as resolved.
Show resolved Hide resolved
}
.components-base-control__label {
position: absolute;
top: -1000em;
}
.components-button {
margin-top: 1px;
}
}
.wp-block-jetpack-gif_input {
flex-grow: 1;
Expand Down
27 changes: 14 additions & 13 deletions extensions/blocks/mailchimp/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
jeherve marked this conversation as resolved.
Show resolved Hide resolved
<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 = (
Expand Down
10 changes: 10 additions & 0 deletions extensions/blocks/mailchimp/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

.wp-block-jetpack-mailchimp {

.components-placeholder__label svg {
margin-right: 1ch;
jeherve marked this conversation as resolved.
Show resolved Hide resolved
}

.wp-block-jetpack-mailchimp_notification {
display: block;
}
Expand All @@ -26,4 +30,10 @@
margin-top: 0;
}

.components-placeholder__fieldset {
display: block;
flex-direction: unset;
flex-wrap: unset;
}

}
71 changes: 41 additions & 30 deletions extensions/blocks/map/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down Expand Up @@ -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>
);
Expand Down
12 changes: 0 additions & 12 deletions extensions/blocks/map/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion extensions/blocks/pinterest/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 && (
Expand Down
20 changes: 8 additions & 12 deletions extensions/blocks/recurring-payments/edit.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
) }
Expand Down
11 changes: 2 additions & 9 deletions extensions/blocks/recurring-payments/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,6 @@
text-align: left;
}

.components-button {
display: inline-block;
margin-bottom: 20px;
}

.components-placeholder {
min-height: 150px;
padding: 24px;
Expand All @@ -25,10 +20,6 @@
margin: 0 0 20px;
}
}

&__instructions {
margin-bottom: 0;
}
}

.editor-rich-text__inline-toolbar {
Expand All @@ -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;
}
}

Expand Down
8 changes: 7 additions & 1 deletion extensions/blocks/repeat-visitor/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -32,6 +35,7 @@
flex-wrap: nowrap;
.components-base-control {
flex-basis: 100%;
margin-bottom: 0;
}
}

Expand All @@ -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
Expand Down