Newsletter: Implement comprehensive settings UI with DataForm #46136

dsas · 2025-11-28T17:04:24Z

Proposed changes:

Unify Jetpack React and Calypso implementations of Newsletter Settings into a new WordPress DataForm-based UI, and in the darkness bind them.

Creates a new UI that will eventually replace the two existing UIs:

Simple UI: https://wordpress.com/settings/newsletter/:siteDomain
WoA/Jetpack UI: :siteDomain/wp-admin/admin.php?page=jetpack#newsletter

This fixes DOTCOM-15286, there are further tasks to add tracks, make it load on simple sites, remove old implementations etc.

!! This does not work on simple sites yet !! Jetpack loads funny there. It also doesn't break anything and doesn't load anywhere unless you opt-in, so it's fine.

Other information:

Have you written new tests for your changes, if applicable?
Have you checked the E2E test CI results, and verified that your changes do not break them?
Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

Does this pull request change what data or activity we track or use?

No changes to data tracking or activity tracking. Tracking events will be added in a separate PR.

Testing instructions

Test Steps:

Make add_filter( 'jetpack_wp_admin_newsletter_settings_enabled', '__return_true' ); run early, e.g. by adding it to a new mu-plugin or just by pasting it into the top of jetpack-dev/jetpack.php using the plugin file editor on a jurassic ninja site.
Enable the newsletter module if it isn't already
Navigate to Jetpack → Newsletter in WordPress admin
Use the different form fields, and check the functionality works
You can reference the existing calypso / jetpack UIs - they're not 1:1 clones, but it should offer the same capabilities that they do.

Platform-Specific Behavior

wpcom Simple Sites:

Verify Newsletter menu item is always visible in Jetpack menu (cannot be hidden)
Verify Newsletter toggle section is NOT displayed (module is always active)
Confirm all other sections (Subscriptions, Email config, etc.) are visible and functional

wpcom Atomic (WoA) Sites:

With module active: Verify Newsletter menu item appears in Jetpack menu
With module inactive: Verify Newsletter menu item is hidden, but direct URL (/wp-admin/admin.php?page=jetpack-newsletter)
still works
Verify Newsletter toggle section is displayed and functional
Test toggling the newsletter off, reloading the page, and toggling it back on

Jetpack Sites:

With module active: Verify Newsletter menu item appears in Jetpack menu
With module inactive: Verify Newsletter menu item is hidden, but direct URL still works
Verify Newsletter toggle section is displayed and functional
Test module reactivation flow from settings page

Module State Handling

On Jetpack/Atomic sites, deactivate the subscriptions module from Jetpack settings
Navigate directly to /wp-admin/admin.php?page=jetpack-newsletter
Verify page loads without errors
Toggle "Let visitors subscribe to this site..." to reactivate the module
Verify Newsletter menu item appears after reactivation

The settings screen should look like this on an atomic site:

github-actions · 2025-11-28T17:05:20Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack or WordPress.com Site Helper), and enable the dotcom-15286-build-out-the-settings-screen branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack dotcom-15286-build-out-the-settings-screen

bin/jetpack-downloader test jetpack-mu-wpcom-plugin dotcom-15286-build-out-the-settings-screen

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

github-actions · 2025-11-28T17:05:35Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Review, ...).
✅ Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

Jetpack plugin:

The Jetpack plugin has different release cadences depending on the platform:

WordPress.com Simple releases happen as soon as you deploy your changes after merging this PR (PCYsg-Jjm-p2).
WoA releases happen weekly.
Releases to self-hosted sites happen monthly:
- Scheduled release: January 6, 2026

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

jp-launch-control · 2025-11-28T17:22:36Z

Code Coverage Summary

Coverage changed in 2 files.

File	Coverage	Δ%	Δ Uncovered
projects/packages/newsletter/src/class-settings.php	0/88 (0.00%)	0.00%	43 💔
projects/plugins/jetpack/load-jetpack.php	1/42 (2.38%)	-0.06%	1 ❤️‍🩹

Full summary · PHP report · JS report

_{If appropriate, add one of these labels to override the failing coverage check:

Covered by non-unit tests
Use to ignore the Code coverage requirement check when E2Es or other non-unit tests cover the code

Coverage tests to be added later
Use to ignore the Code coverage requirement check when tests will be added in a follow-up PR

I don't care about code coverage for this PR
Use this label to ignore the check for insufficient code coveage.}

This is the initial, very rough work-in-progress of bringing the newsletter settings UI into wp-admin using DataForms. It's mostly untested, needs styling etc.

…bout

…think about

…d errors with translations

Register the settings screen, even if not adding it to the menu due to it being disabled. This means that after disabling newsletter (subscriptions) module, users can still reload the page and re-enable it. Note that WordPress.com simple sites cannot disable the module.

Copilot

Pull request overview

This PR implements a comprehensive newsletter settings UI using WordPress DataForm components, unifying Jetpack and Calypso implementations into a single, modern interface. The implementation follows a card-based design pattern with distinct sections for different settings groups.

Key Changes:

Introduces React-based settings UI with DataForm for declarative form handling
Implements mixed save patterns: auto-save for some sections, manual save with staged changes for others
Adds PHP backend support for menu registration with platform-specific logic (wpcom simple/atomic vs Jetpack)

Reviewed changes

Copilot reviewed 26 out of 27 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
`projects/plugins/jetpack/load-jetpack.php`	Initializes Newsletter Settings class early for admin access
`projects/packages/newsletter/src/class-settings.php`	Adds menu registration logic, settings data exposure, and module state checking
`projects/packages/newsletter/src/settings/index.tsx`	Main settings app with state management, API integration, and section orchestration
`projects/packages/newsletter/src/settings/types.ts`	TypeScript type definitions for settings data and Jetpack configuration
`projects/packages/newsletter/src/settings/utils.ts`	Utility functions for subscriber management URLs
`projects/packages/newsletter/src/settings/style.scss`	Card-based styling with disabled state handling and component theming
`projects/packages/newsletter/src/settings/sections/*.tsx`	Individual section components for newsletter, subscriptions, email config, categories, and welcome email
`projects/packages/newsletter/src/settings/components/*.tsx`	Shared components for header, byline preview, and toggle controls with editor links
`projects/packages/newsletter/webpack.config.js`	Adds babel plugin for textdomain replacement
`projects/packages/newsletter/package.json`	Adds dependencies for components, API, and WordPress packages

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

projects/packages/newsletter/src/settings/components/byline-preview.tsx

projects/packages/newsletter/src/class-settings.php

projects/packages/newsletter/src/settings/sections/newsletter-categories-section.tsx

projects/packages/newsletter/src/settings/style.scss

projects/packages/newsletter/src/settings/components/byline-preview.tsx

projects/packages/newsletter/src/settings/index.tsx

dsas marked this pull request as draft November 28, 2025 17:04

dsas self-assigned this Nov 28, 2025

github-actions bot added the [Package] Newsletter label Nov 28, 2025

github-actions bot added the [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. label Nov 28, 2025

dsas added [Status] In Progress [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it and removed [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. labels Nov 28, 2025

dsas added 20 commits December 4, 2025 18:12

Jetpack Newsletter: First take

2479936

This is the initial, very rough work-in-progress of bringing the newsletter settings UI into wp-admin using DataForms. It's mostly untested, needs styling etc.

Add changelog

5b6e601

Remove needless enableSorting prop

d5fcf40

Add preview and template edit links

2d59d4b

Update various strings

a8d532c

Remove extraneous css

51679cf

Add category selection and validation

0bdae0a

Break the newsletter settings down a bit to make it easier to think a…

c13e0ce

…bout

Make everything look disabled when the module is

5be1535

fixup! Break the newsletter settings down a bit to make it easier to …

49e98da

…think about

Correct typo

b6b2200

Correct some labels

556591c

Add and use BylinePreview

0a43fb4

Further split the sections

dbdef06

Move sender name to use a dataform

a81eaa9

Add welcome message section

6fbcf3a

Move links to gravatar / date settings in email byline

4062b60

Correct reply to help text

721c084

fix some codestyle warnings

f4e75e7

Use correct wpcom/jp cloud link for subscriber management

9a10b62

dsas added 7 commits December 4, 2025 18:12

Make settings more secure

68e0788

clarify variable name

3314f23

Remove some unused scss

247e167

Tidy up various help texts

49ec93b

Link subscriber blocks to the correct url

c89866b

Opt into the future margin-bottom setting on toggle link

898352b

Bump newsletter deps

90c16c2

dsas force-pushed the dotcom-15286-build-out-the-settings-screen branch from e4259ed to 90c16c2 Compare December 4, 2025 18:45

dsas added 6 commits December 4, 2025 22:27

Bump debug dep

5ce101d

Change the way of building translatable ternary strings to avoid buil…

63c0f26

…d errors with translations

Fix prod build issues

bcf247e

Remove useless comments

91fa677

Change way of getting blog id

600d33b

changelog

e2599dc

github-actions bot added the [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ label Dec 4, 2025

dsas added 5 commits December 5, 2025 12:55

Improve css display

56c7577

Get blog id from status package

f9227e9

Import from dataviews/wp to fix build errors

68bd20c

Take care of setting our own API root and nonce

1afe76e

dsas requested a review from Copilot December 5, 2025 17:02

Copilot started reviewing on behalf of dsas December 5, 2025 17:03 View session

Copilot finished reviewing on behalf of dsas December 5, 2025 17:06

Copilot AI reviewed Dec 5, 2025

View reviewed changes

dsas marked this pull request as ready for review December 5, 2025 17:10

Fix some code review comments

f101550

dsas added [Status] Needs Review This PR is ready for review. and removed [Status] In Progress labels Dec 5, 2025

prefer url over blog id

335dc99

dsas requested a review from a team December 8, 2025 09:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Newsletter: Implement comprehensive settings UI with DataForm #46136

Newsletter: Implement comprehensive settings UI with DataForm #46136

Uh oh!

dsas commented Nov 28, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Nov 28, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Nov 28, 2025 •

edited

Loading

Uh oh!

jp-launch-control bot commented Nov 28, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Newsletter: Implement comprehensive settings UI with DataForm #46136

Are you sure you want to change the base?

Newsletter: Implement comprehensive settings UI with DataForm #46136

Uh oh!

Conversation

dsas commented Nov 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes:

Other information:

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions

Test Steps:

Platform-Specific Behavior

Module State Handling

Uh oh!

github-actions bot commented Nov 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Nov 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jp-launch-control bot commented Nov 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Coverage Summary

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

dsas commented Nov 28, 2025 •

edited

Loading

github-actions bot commented Nov 28, 2025 •

edited

Loading

github-actions bot commented Nov 28, 2025 •

edited

Loading

jp-launch-control bot commented Nov 28, 2025 •

edited

Loading