Skip to content

Commit 42408b8

Browse files
jehervejeherve
committed
Separate sender and reply-to into 2 sections
And move the explanations below the radio / fields. This will bring this settings section more in line with its Calypso counterpart.
1 parent 6d049d7 commit 42408b8

File tree

2 files changed

+137
-112
lines changed

2 files changed

+137
-112
lines changed

‎projects/plugins/jetpack/_inc/client/newsletter/email-settings.jsx‎

Lines changed: 82 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -218,6 +218,45 @@ const EmailSettings = props => {
218218
toogling={ isSavingAnyOption( [ FEATURED_IMAGE_IN_EMAIL_OPTION ] ) }
219219
label={ <span className="jp-form-toggle-explanation">{ featuredImageInfo }</span> }
220220
onChange={ handleEnableFeaturedImageInEmailToggleChange }
221+
className="email-settings__featured-image-toggle"
222+
/>
223+
</SettingsGroup>
224+
<SettingsGroup
225+
hasChild
226+
disableInOfflineMode
227+
disableInSiteConnectionMode={ ! siteHasConnectedUser }
228+
module={ subscriptionsModule }
229+
support={ {
230+
link: subscriptionsAndNewslettersSupportUrl,
231+
text: __(
232+
'Sets whether email subscribers can read full posts in emails or just an excerpt and link to the full version of the post.',
233+
'jetpack'
234+
),
235+
} }
236+
>
237+
<FormLegend className="jp-form-label-wide">
238+
{ __( 'For each new post email, include', 'jetpack' ) }
239+
</FormLegend>
240+
241+
<RadioControl
242+
className="jp-form-radio-gap"
243+
selected={ subscriptionEmailsUseExcerpt ? 'excerpt' : 'full' }
244+
disabled={ excerptInputDisabled }
245+
options={ [
246+
{
247+
label: (
248+
<span className="jp-form-toggle-explanation">{ __( 'Full text', 'jetpack' ) }</span>
249+
),
250+
value: 'full',
251+
},
252+
{
253+
label: (
254+
<span className="jp-form-toggle-explanation">{ __( 'Excerpt', 'jetpack' ) }</span>
255+
),
256+
value: 'excerpt',
257+
},
258+
] }
259+
onChange={ handleSubscriptionEmailsUseExcerptChange }
221260
/>
222261
</SettingsGroup>
223262
<SettingsGroup
@@ -329,44 +368,6 @@ const EmailSettings = props => {
329368
</div>
330369
) }
331370
</SettingsGroup>
332-
<SettingsGroup
333-
hasChild
334-
disableInOfflineMode
335-
disableInSiteConnectionMode={ ! siteHasConnectedUser }
336-
module={ subscriptionsModule }
337-
support={ {
338-
link: subscriptionsAndNewslettersSupportUrl,
339-
text: __(
340-
'Sets whether email subscribers can read full posts in emails or just an excerpt and link to the full version of the post.',
341-
'jetpack'
342-
),
343-
} }
344-
>
345-
<FormLegend className="jp-form-label-wide">
346-
{ __( 'For each new post email, include', 'jetpack' ) }
347-
</FormLegend>
348-
349-
<RadioControl
350-
className="jp-form-radio-gap"
351-
selected={ subscriptionEmailsUseExcerpt ? 'excerpt' : 'full' }
352-
disabled={ excerptInputDisabled }
353-
options={ [
354-
{
355-
label: (
356-
<span className="jp-form-toggle-explanation">{ __( 'Full text', 'jetpack' ) }</span>
357-
),
358-
value: 'full',
359-
},
360-
{
361-
label: (
362-
<span className="jp-form-toggle-explanation">{ __( 'Excerpt', 'jetpack' ) }</span>
363-
),
364-
value: 'excerpt',
365-
},
366-
] }
367-
onChange={ handleSubscriptionEmailsUseExcerptChange }
368-
/>
369-
</SettingsGroup>
370371
<SettingsGroup
371372
hasChild
372373
disableInOfflineMode
@@ -383,15 +384,7 @@ const EmailSettings = props => {
383384
),
384385
} }
385386
>
386-
<FormLegend className="jp-form-label-wide">
387-
{ __( 'Sender name and reply-to settings', 'jetpack' ) }
388-
</FormLegend>
389-
<p>
390-
{ __(
391-
"This is the name that appears in subscribers' inboxes. It's usually the name of your newsletter or the author.",
392-
'jetpack'
393-
) }
394-
</p>
387+
<FormLegend className="jp-form-label-wide">{ __( 'Sender name', 'jetpack' ) }</FormLegend>
395388
<Container horizontalGap={ 0 } fluid className="sender-name">
396389
<Col sm={ 3 } md={ 4 } lg={ 4 }>
397390
<TextInput
@@ -411,19 +404,41 @@ const EmailSettings = props => {
411404
{ __( 'Save', 'jetpack' ) }
412405
</Button>
413406
</Col>
407+
<Col className="sender-name-example">
408+
{ sprintf(
409+
/* translators: 1. Site name or user entered replacement value 2. is the example email */
410+
__( 'Preview: %1$s <%2$s>', 'jetpack' ),
411+
fromNameState.value || siteName,
412+
getExampleEmail( subscriptionReplyTo )
413+
) }
414+
</Col>
414415
</Container>
415-
<p className="reply-to">
416+
<p className="jp-form-setting-explanation">
416417
{ __(
417-
'Choose who receives emails when subscribers reply to your newsletter.',
418+
"This is the name that appears in subscribers' inboxes. It's usually the name of your newsletter or the author.",
418419
'jetpack'
419420
) }
420-
{ subscriptionReplyTo === 'author' &&
421-
' ' +
422-
__(
423-
'The author’s account must be connected to WordPress.com to use their email as the reply-to address.',
424-
'jetpack'
425-
) }
426421
</p>
422+
</SettingsGroup>
423+
<SettingsGroup
424+
hasChild
425+
disableInOfflineMode
426+
disableInSiteConnectionMode={ ! siteHasConnectedUser }
427+
module={ subscriptionsModule }
428+
className="newsletter-group"
429+
support={ {
430+
link: getRedirectUrl( 'jetpack-support-subscriptions', {
431+
anchor: 'reply-to-email-address',
432+
} ),
433+
text: __(
434+
"Sets the reply to email address for your newsletter emails. It's the email where subscribers send their replies.",
435+
'jetpack'
436+
),
437+
} }
438+
>
439+
<FormLegend className="jp-form-label-wide">
440+
{ __( 'Reply-to settings', 'jetpack' ) }
441+
</FormLegend>
427442
<RadioControl
428443
className="jp-form-radio-gap"
429444
selected={ subscriptionReplyTo || 'comment' }
@@ -456,16 +471,18 @@ const EmailSettings = props => {
456471
] }
457472
onChange={ handleSubscriptionReplyToChange }
458473
/>
459-
<Container horizontalGap={ 0 } fluid className="sender-name">
460-
<Col className="sender-name-example byline-preview">
461-
{ sprintf(
462-
/* translators: 1. Site name or user entered replacement value 2. is the example email */
463-
__( 'Preview: %1$s <%2$s>', 'jetpack' ),
464-
fromNameState.value || siteName,
465-
getExampleEmail( subscriptionReplyTo )
466-
) }
467-
</Col>
468-
</Container>
474+
<p className="reply-to jp-form-setting-explanation">
475+
{ __(
476+
'Choose who receives emails when subscribers reply to your newsletter.',
477+
'jetpack'
478+
) }
479+
{ subscriptionReplyTo === 'author' &&
480+
' ' +
481+
__(
482+
'The author’s account must be connected to WordPress.com to use their email as the reply-to address.',
483+
'jetpack'
484+
) }
485+
</p>
469486
</SettingsGroup>
470487
</SettingsCard>
471488
);

‎projects/plugins/jetpack/_inc/client/newsletter/style.scss‎

Lines changed: 55 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -66,86 +66,94 @@
6666
margin-bottom: 16px;
6767
}
6868

69-
.jp-form-settings-group.newsletter-group .sender-name {
70-
--vertical-gutter: 8px;
71-
}
69+
.jp-form-settings-group.newsletter-group {
70+
71+
.sender-name {
72+
--vertical-gutter: 8px;
73+
74+
.sender-name-example {
75+
font-size: var(--font-body-small);
76+
margin-top: 8px;
77+
}
78+
}
79+
80+
.reply-to {
81+
margin-top: 16px;
82+
}
7283

73-
.sender-name-example {
74-
font-size: var(--font-body-small);
75-
margin-top: 8px;
7684
}
7785

7886
#jp-settings-subscriptions .jp-form-fieldset:not(:first-of-type) {
7987
margin-top: 24px;
8088
}
8189

90+
.jp-settings-container form#jp-settings-newsletter-jetpack .jp-form-settings-group .components-base-control.email-settings__featured-image-toggle:last-of-type {
91+
margin-bottom: 0;
92+
}
93+
8294
.byline-preview {
8395
display: inline-flex;
8496
align-items: center;
8597
flex-flow: row;
8698
margin-bottom: 24px;
8799
padding: 16px;
88100
background-color: var(--jp-gray-0);
89-
}
90101

91-
.byline-preview__label {
92-
height: 24px;
93-
line-height: 24px;
94-
margin-right: 8px;
95-
}
102+
.byline-preview__label {
103+
height: 24px;
104+
line-height: 24px;
105+
margin-right: 8px;
106+
}
96107

97-
.byline-preview__gravatar {
98-
border-radius: 50%;
99-
width: 24px;
100-
height: 24px;
101-
margin: 0 8px 0 0;
108+
.byline-preview__gravatar {
109+
border-radius: 50%;
110+
width: 24px;
111+
height: 24px;
112+
margin: 0 8px 0 0;
113+
}
102114
}
103115

104-
.email-settings__help-info {
116+
.jp-settings-container .email-settings__help-info {
105117
margin-left: 60px;
106118
margin-bottom: 12px;
107119
margin-top: -12px;
108120
color: #747474;
109121
padding-right: 48px;
110-
}
111122

112-
.jp-settings-container .email-settings__help-info a.components-button {
113-
text-decoration: none;
114-
}
123+
a.components-button {
124+
text-decoration: none;
125+
}
115126

116-
.jp-settings-container .email-settings__help-info a.components-button.is-link {
117-
text-decoration: underline;
118-
}
127+
a.components-button.is-link {
128+
text-decoration: underline;
129+
}
119130

120-
.email-settings__gravatar-help-info {
121-
display: flex;
122-
align-items: center;
123-
}
131+
.email-settings__gravatar-help-info {
132+
display: flex;
133+
align-items: center;
124134

125-
.email-settings__gravatar {
126-
position: relative;
127-
margin-right: -48px;
128-
}
135+
.email-settings__gravatar-image {
136+
width: 60px;
137+
height: 60px;
138+
border-radius: 50%;
139+
margin-right: 16px;
140+
}
129141

130-
.jp-form-settings-group .email-settings__gravatar .jp-support-info {
131-
top: 3px;
142+
.email-settings__gravatar-help-text {
143+
margin-bottom: 8px;
144+
}
145+
}
132146
}
133147

134-
.email-settings__gravatar-image {
135-
width: 60px;
136-
height: 60px;
137-
border-radius: 50%;
138-
margin-right: 16px;
139-
}
148+
.jp-form-settings-group .email-settings__gravatar {
149+
position: relative;
150+
margin-right: -48px;
140151

141-
.email-settings__gravatar-help-text {
142-
margin-bottom: 8px;
152+
.jp-support-info {
153+
top: 3px;
154+
}
143155
}
144156

145157
#jp-settings-subscriptions .dops-textarea {
146158
field-sizing: content;
147159
}
148-
149-
.newsletter-group .reply-to {
150-
margin-top: 16px;
151-
}

0 commit comments

Comments
 (0)