Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
Significance: patch
Type: changed
Comment: Settings sections on the Newsletter modernization chassis now use the WPDS Card primitives, behind the same feature flag; no user-visible change unless the flag is enabled.
38 changes: 23 additions & 15 deletions projects/packages/newsletter/src/settings/newsletter-settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@ import { getNewsletterScriptData } from './script-data';
import {
EmailContentSection,
EmailBylineSection,
EmailDefaultsSection,
EmailSenderSettingsSection,
EmailReplyToSettingsSection,
NewsletterSection,
NewsletterCategoriesSection,
PaidNewsletterSection,
SubscriptionsSection,
Expand Down Expand Up @@ -419,31 +419,27 @@ export function NewsletterSettingsBody( {
isDisabled={ ! hasConnectedOwner }
className={ ! hasConnectedOwner ? 'newsletter-settings-disabled' : undefined }
>
<Stack gap="md" direction="column" className="newsletter-settings">
<NewsletterSection data={ data } onChange={ handleAutoSave } />

<Stack gap="xl" direction="column" className="newsletter-settings">
<Disabled isDisabled={ ! data.subscriptions }>
<Stack gap="md" direction="column">
<Stack gap="xl" direction="column">
<PaidNewsletterSection
isNewsletterEnabled={ data.subscriptions }
hasActivePlan={ data.newsletter_has_active_plan }
/>

<SubscriptionsSection
data={ data }
onChange={ handleSubscriptionChange }
onSave={ saveSubscriptionSettings }
isSaving={ isSavingSubscriptions }
hasChanges={ hasSubscriptionChanges }
changedKeys={ Object.keys( subscriptionChanges ) }
isNewsletterEnabled={ data.subscriptions }
/>

<PaidNewsletterSection
isNewsletterEnabled={ data.subscriptions }
hasActivePlan={ data.newsletter_has_active_plan }
/>

<NewsletterCategoriesSection
<EmailDefaultsSection
data={ data }
onChange={ handleNewsletterCategoriesChange }
onSave={ saveNewsletterCategories }
isSaving={ isSavingNewsletterCategories }
hasChanges={ hasNewsletterCategoriesChanges }
onChange={ handleAutoSave }
isNewsletterEnabled={ data.subscriptions }
/>

Expand All @@ -465,6 +461,7 @@ export function NewsletterSettingsBody( {
onSave={ saveSenderName }
isSaving={ isSavingSenderName }
hasChanges={ hasSenderNameChanges }
changedKeys={ Object.keys( senderNameChanges ) }
isNewsletterEnabled={ data.subscriptions }
/>

Expand All @@ -480,6 +477,17 @@ export function NewsletterSettingsBody( {
onSave={ saveWelcomeEmail }
isSaving={ isSavingWelcomeEmail }
hasChanges={ hasWelcomeEmailChanges }
changedKeys={ Object.keys( welcomeEmailChanges ) }
isNewsletterEnabled={ data.subscriptions }
/>

<NewsletterCategoriesSection
data={ data }
onChange={ handleNewsletterCategoriesChange }
onSave={ saveNewsletterCategories }
isSaving={ isSavingNewsletterCategories }
hasChanges={ hasNewsletterCategoriesChanges }
changedKeys={ Object.keys( newsletterCategoriesChanges ) }
isNewsletterEnabled={ data.subscriptions }
/>
</Stack>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,9 @@
* External dependencies
*/
import { getAdminUrl, getScriptData } from '@automattic/jetpack-script-data';
import {
Card,
CardHeader,
CardBody,
__experimentalText as Text, // eslint-disable-line @wordpress/no-unsafe-wp-apis
__experimentalHeading as Heading, // eslint-disable-line @wordpress/no-unsafe-wp-apis
} from '@wordpress/components';
import { DataForm, type Field } from '@wordpress/dataviews/wp';
import { __ } from '@wordpress/i18n';
import { Card, Text } from '@wordpress/ui';
/**
* Internal dependencies
*/
Expand Down Expand Up @@ -84,11 +78,11 @@ export function EmailBylineSection( {
];

return (
<Card>
<CardHeader>
<Heading level={ 4 }>{ __( 'Email byline', 'jetpack-newsletter' ) }</Heading>
</CardHeader>
<CardBody>
<Card.Root>
<Card.Header>
<Card.Title>{ __( 'Email byline', 'jetpack-newsletter' ) }</Card.Title>
</Card.Header>
<Card.Content>
<p>
<Text>
{ __(
Expand Down Expand Up @@ -126,7 +120,7 @@ export function EmailBylineSection( {
/>
) }
</fieldset>
</CardBody>
</Card>
</Card.Content>
</Card.Root>
);
}
Original file line number Diff line number Diff line change
@@ -1,15 +1,10 @@
/**
* External dependencies
*/
import {
Card,
CardHeader,
CardBody,
Notice,
__experimentalHeading as Heading, // eslint-disable-line @wordpress/no-unsafe-wp-apis
} from '@wordpress/components';
import { Notice } from '@wordpress/components';
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have Notice component at WP UI but you might've intentionally left it for another PR.

import { DataForm, type Field } from '@wordpress/dataviews/wp';
import { __ } from '@wordpress/i18n';
import { Card } from '@wordpress/ui';
/**
* Internal dependencies
*/
Expand Down Expand Up @@ -66,11 +61,11 @@ export function EmailContentSection( {
];

return (
<Card>
<CardHeader>
<Heading level={ 4 }>{ __( 'Email content', 'jetpack-newsletter' ) }</Heading>
</CardHeader>
<CardBody>
<Card.Root>
<Card.Header>
<Card.Title>{ __( 'Email content', 'jetpack-newsletter' ) }</Card.Title>
</Card.Header>
<Card.Content>
<fieldset disabled={ ! isNewsletterEnabled }>
{ ! isSitePublic && (
<Notice status="warning" isDismissible={ false }>
Expand All @@ -94,7 +89,7 @@ export function EmailContentSection( {
onChange={ onChange }
/>
</fieldset>
</CardBody>
</Card>
</Card.Content>
</Card.Root>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
/**
* External dependencies
*/
import { isSimpleSite } from '@automattic/jetpack-script-data';
import { ToggleControl } from '@wordpress/components';
import { DataForm, type Field } from '@wordpress/dataviews/wp';
import { useCallback } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Card } from '@wordpress/ui';
/**
* Internal dependencies
*/
import type { NewsletterSettings } from '../types';

interface EmailDefaultsSectionProps {
data: NewsletterSettings;
onChange: ( updates: Partial< NewsletterSettings > ) => void;
isNewsletterEnabled: boolean;
}

/**
* Email Defaults Section Component.
*
* Renders the "Email new posts to subscribers by default" toggle. The
* legacy master `subscriptions` toggle that used to live here moved to
* the global Newsletter module activation control — flipping the module
* off-page disables this card via the orchestrator's `<Disabled>` wrapper.
*
* @param props - Component props.
* @param props.data - Newsletter settings data.
* @param props.onChange - Auto-save callback for setting updates.
* @param props.isNewsletterEnabled - Whether the Newsletter module is on.
* @return The email defaults section.
*/
export function EmailDefaultsSection( {
data,
onChange,
isNewsletterEnabled,
}: EmailDefaultsSectionProps ): JSX.Element {
const fields: Field< NewsletterSettings >[] = [
{
id: 'wpcom_newsletter_send_default',
label: __( 'Email new posts to subscribers by default', 'jetpack-newsletter' ),
type: 'boolean' as const,
Edit( { field, onChange: onChangeField, data: formData } ) {
const handleToggle = useCallback( () => {
onChangeField(
field.setValue( {
item: formData,
value: ! field.getValue( { item: formData } ),
} )
);
}, [ onChangeField, field, formData ] );
return (
<ToggleControl
label={ field.label }
help={ field.description }
checked={ !! field.getValue( { item: formData } ) }
onChange={ handleToggle }
disabled={ ! isSimpleSite() && ! isNewsletterEnabled }
/>
);
},
description: __(
'When on, the newsletter option will be pre-selected each time you publish. You can change it in the newsletter panel in the editor before publishing any post.',
'jetpack-newsletter'
),
},
];

return (
<Card.Root>
<Card.Header>
<Card.Title>{ __( 'Email defaults', 'jetpack-newsletter' ) }</Card.Title>
</Card.Header>
<Card.Content>
<DataForm
data={ data }
fields={ fields }
form={ {
layout: {
type: 'regular',
labelPosition: 'top',
},
fields: [ 'wpcom_newsletter_send_default' ],
} }
onChange={ onChange }
/>
</Card.Content>
</Card.Root>
);
}
Original file line number Diff line number Diff line change
@@ -1,14 +1,9 @@
/**
* External dependencies
*/
import {
Card,
CardHeader,
CardBody,
__experimentalHeading as Heading, // eslint-disable-line @wordpress/no-unsafe-wp-apis
} from '@wordpress/components';
import { DataForm, type Field } from '@wordpress/dataviews/wp';
import { __ } from '@wordpress/i18n';
import { Card } from '@wordpress/ui';
/**
* Internal dependencies
*/
Expand Down Expand Up @@ -58,11 +53,11 @@ export function EmailReplyToSettingsSection( {
];

return (
<Card>
<CardHeader>
<Heading level={ 4 }>{ __( 'Reply-to settings', 'jetpack-newsletter' ) }</Heading>
</CardHeader>
<CardBody>
<Card.Root>
<Card.Header>
<Card.Title>{ __( 'Reply-to settings', 'jetpack-newsletter' ) }</Card.Title>
</Card.Header>
<Card.Content>
<fieldset disabled={ ! isNewsletterEnabled }>
<DataForm
data={ data }
Expand All @@ -77,7 +72,7 @@ export function EmailReplyToSettingsSection( {
onChange={ onChange }
/>
</fieldset>
</CardBody>
</Card>
</Card.Content>
</Card.Root>
);
}
Loading
Loading