Jetpack Newsletter Settings: Improve sender information and reply-to …

…IA (#38833) Co-authored-by: pkuliga <pkuliga@gmail.com>
Automattic · Aug 23, 2024 · a8a856a · a8a856a
1 parent 4f0ea4b
commit a8a856a
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 30 deletions.
diff --git a/projects/plugins/jetpack/_inc/client/newsletter/email-settings.jsx b/projects/plugins/jetpack/_inc/client/newsletter/email-settings.jsx
@@ -360,8 +360,19 @@ const EmailSettings = props => {
 				disableInSiteConnectionMode
 				module={ subscriptionsModule }
 				className="newsletter-group"
+				support={ {
+					link: getRedirectUrl( 'jetpack-support-subscriptions', {
+						anchor: 'reply-to-email-address',
+					} ),
+					text: __(
+						"Sets the reply to email address for your newsletter emails. It's the email where subscribers send their replies.",
+						'jetpack'
+					),
+				} }
 			>
-				<FormLegend className="jp-form-label-wide">{ __( 'Sender name', 'jetpack' ) }</FormLegend>
+				<FormLegend className="jp-form-label-wide">
+					{ __( 'Sender name and reply-to settings', 'jetpack' ) }
+				</FormLegend>
 				<p>
 					{ __(
 						"This is the name that appears in subscribers' inboxes. It's usually the name of your newsletter or the author.",
@@ -387,35 +398,8 @@ const EmailSettings = props => {
 							{ __( 'Save', 'jetpack' ) }
 						</Button>
 					</Col>
-					<Col className="sender-name-example">
-						{ sprintf(
-							/* translators: 1. placeholder is the user entered value for From Name, 2. is the example email */
-							__( 'Example: %1$s <%2$s>', 'jetpack' ),
-							fromNameState.value || siteName,
-							getExampleEmail( subscriptionReplyTo )
-						) }
-					</Col>
 				</Container>
-			</SettingsGroup>
-			<SettingsGroup
-				hasChild
-				disableInOfflineMode
-				disableInSiteConnectionMode
-				module={ subscriptionsModule }
-				support={ {
-					link: getRedirectUrl( 'jetpack-support-subscriptions', {
-						anchor: 'reply-to-email-address',
-					} ),
-					text: __(
-						"Sets the reply to email address for your newsletter emails. It's the email where subscribers send their replies.",
-						'jetpack'
-					),
-				} }
-			>
-				<FormLegend className="jp-form-label-wide">
-					{ __( 'Reply-to email', 'jetpack' ) }
-				</FormLegend>
-				<p>
+				<p class="reply-to">
 					{ __(
 						'Choose who receives emails when subscribers reply to your newsletter.',
 						'jetpack'
@@ -453,6 +437,16 @@ const EmailSettings = props => {
 					] }
 					onChange={ handleSubscriptionReplyToChange }
 				/>
+				<Container horizontalGap={ 0 } fluid className="sender-name">
+					<Col className="sender-name-example byline-preview">
+						{ sprintf(
+							/* translators: 1. Site name or user entered replacement value 2. is the example email */
+							__( 'Preview: %1$s <%2$s>', 'jetpack' ),
+							fromNameState.value || siteName,
+							getExampleEmail( subscriptionReplyTo )
+						) }
+					</Col>
+				</Container>
 			</SettingsGroup>
 		</SettingsCard>
 	);

diff --git a/projects/plugins/jetpack/_inc/client/newsletter/style.scss b/projects/plugins/jetpack/_inc/client/newsletter/style.scss
@@ -68,7 +68,6 @@
 
 .sender-name-example {
 	font-size: var(--font-body-small);
-	color: var(--jp-gray-20);
 	margin-top: 8px;
 }
 
@@ -123,9 +122,11 @@
 	position: relative;
 	margin-right: -48px;
 }
+
 .jp-form-settings-group .email-settings__gravatar .jp-support-info {
 	top: 3px;
 }
+
 .email-settings__gravatar-image {
 	width: 60px;
 	height: 60px;
@@ -140,3 +141,7 @@
 #jp-settings-subscriptions .dops-textarea {
 	field-sizing: content;
 }
+
+.newsletter-group .reply-to {
+	margin-top: 16px;
+}
diff --git a/projects/plugins/jetpack/changelog/improve-newsletter-settings-sender-information-ia b/projects/plugins/jetpack/changelog/improve-newsletter-settings-sender-information-ia
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Jetpack Newsletter Settings: Improve Sender Name and Reply-to IA