Newsletter: bundle DataViews CSS to fix missing design tokens #46877

dsas · 2026-01-30T20:25:29Z

Fixes https://linear.app/a8c/issue/DOTCOM-15924/fix-missing-css

Proposed changes:

The DataForm component from @wordpress/dataviews expects CSS variables like --wpds-dimension-gap-md to be defined. These come from the package's stylesheet which wasn't being loaded.

Import the dataviews styles via SCSS to bundle them with our assets, ensuring the CSS version matches the JS package version we're using.

This made "Manage all subscribers" look far too spaced out, so addressed that too.

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?

Testing instructions:

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 (it is on WoA)
Go to Jetpack → Newsletter in wp-admin

Before	After

The DataForm component from @wordpress/dataviews expects CSS variables like --wpds-dimension-gap-md to be defined. These come from the package's stylesheet which wasn't being loaded. Import the dataviews styles via SCSS to bundle them with our assets, ensuring the CSS version matches the JS package version we're using. This made "Manage all subscribers" look far too spaced out, so addressed that too.

github-actions · 2026-01-30T20:26:25Z

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), and enable the dotcom-15924-fix-missing-css branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack dotcom-15924-fix-missing-css

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 · 2026-01-30T20:26:25Z

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 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!

Copilot

Pull request overview

This PR fixes missing CSS design tokens for the DataViews DataForm component in the newsletter settings by importing the required stylesheet. The DataForm component depends on CSS variables (like --wpds-dimension-gap-md) that were not being loaded, causing styling issues.

Changes:

Import DataViews stylesheet to bundle design tokens with newsletter settings assets
Remove excessive spacing from "Manage all subscribers" link by removing CSS class
Add changelog entry documenting the CSS fix

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File	Description
projects/packages/newsletter/src/settings/style.scss	Adds import statement for @wordpress/dataviews styles to ensure design tokens are available
projects/packages/newsletter/src/settings/sections/newsletter-section.tsx	Removes `newsletter-settings__link` CSS class from wrapper div to reduce spacing
projects/packages/newsletter/changelog/fix-some-css	Adds changelog entry for the CSS fix

Copilot · 2026-01-30T20:28:37Z

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

 				/>
 				{ data.subscriptions && jetpackSettings && (
-					<div className="newsletter-settings__link">
+					<div>


The CSS class "newsletter-settings__link" should not be removed here. This class is still defined in style.scss (line 59-61) with "margin-top: 2em" styling and is actively used in newsletter-categories-section.tsx (line 208). Removing it here creates an inconsistency in the codebase where the same pattern is styled differently in different sections.

If the excessive spacing is an issue, consider either:

Keeping the class here and adjusting the margin-top value in the CSS definition to be less (e.g., 1em)

Removing the CSS class definition entirely and updating all usages throughout the codebase

The current change creates inconsistent spacing between this section and the newsletter categories section.

Suggested change

<div>

<div className="newsletter-settings__link">

Copilot · 2026-01-30T20:28:38Z

projects/packages/newsletter/changelog/fix-some-css

+Significance: patch
+Type: changed
+
+CSS: Ensure dataforms css is loaded.


The changelog entry does not follow the project's changelog conventions. Based on the custom coding guidelines and examples from other changelog entries in the codebase, changelog entries should:

Use imperative mood (e.g., "Fix" instead of "Ensure")

Start with a capital letter and end with a period

Describe the change from a user's perspective

This entry should be rewritten to something like: "Fix missing design tokens in DataForm component."

Copilot · 2026-01-30T20:28:38Z

projects/packages/newsletter/changelog/fix-some-css

+Significance: patch
+Type: changed
+
+CSS: Ensure dataforms css is loaded.


The changelog entry contains a spelling/grammar error. "dataforms" should be two separate words: "DataForm". Additionally, "css" should be capitalized as "CSS" since it's an acronym.

Suggested change

CSS: Ensure dataforms css is loaded.

CSS: Ensure DataForm CSS is loaded.

jp-launch-control · 2026-01-30T20:36:42Z

Code Coverage Summary

This PR did not change code coverage!

That could be good or bad, depending on the situation. Everything covered before, and still is? Great! Nothing was covered before? Not so great. 🤷

Full summary · PHP report · JS report

simison · 2026-02-02T14:11:09Z

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

@@ -1,3 +1,6 @@
+// Import dataviews styles for DataForm component
+@import "@wordpress/dataviews/build-style/style.css";


I think the right way to go about this would be using the Theme provider; not the DataViews CSS; https://wordpress.github.io/gutenberg/?path=/docs/design-system-theme-theme-provider--docs

Even if DataViews has the style tokens now, it might not have them in future. See comments from Andrew at p1769436406520009/1768821189.724639-slack-C052XEUUBL4

...or did you need all the DataForm styles themselves, not just style tokens? In that case this might be correct.

The latter. The original issue was that the DataForm component's own layout was using gap: var(--wpds-dimension-gap-md) and that wasn't defined.

See WordPress/gutenberg#75182

dsas self-assigned this Jan 30, 2026

Copilot AI review requested due to automatic review settings January 30, 2026 20:25

Copilot started reviewing on behalf of dsas January 30, 2026 20:25 View session

github-actions bot added the [Package] Newsletter label Jan 30, 2026

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 Jan 30, 2026

Copilot AI reviewed Jan 30, 2026

View reviewed changes

simison reviewed Feb 2, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Newsletter: bundle DataViews CSS to fix missing design tokens #46877

Newsletter: bundle DataViews CSS to fix missing design tokens #46877

dsas commented Jan 30, 2026

Uh oh!

github-actions bot commented Jan 30, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Jan 30, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 30, 2026

Uh oh!

Copilot AI Jan 30, 2026

Uh oh!

Copilot AI Jan 30, 2026

Uh oh!

jp-launch-control bot commented Jan 30, 2026 •

edited

Loading

Uh oh!

simison Feb 2, 2026

Uh oh!

simison Feb 2, 2026

Uh oh!

dsas Feb 2, 2026

Uh oh!

simison Feb 3, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	CSS: Ensure dataforms css is loaded.
	CSS: Ensure DataForm CSS is loaded.

		@@ -1,3 +1,6 @@
		// Import dataviews styles for DataForm component
		@import "@wordpress/dataviews/build-style/style.css";

Newsletter: bundle DataViews CSS to fix missing design tokens #46877

Are you sure you want to change the base?

Newsletter: bundle DataViews CSS to fix missing design tokens #46877

Conversation

dsas commented Jan 30, 2026

Proposed changes:

Other information:

Jetpack product discussion

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

Testing instructions:

Uh oh!

github-actions bot commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jan 30, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Code Coverage Summary

Uh oh!

simison Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

simison Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

dsas Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

simison Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions bot commented Jan 30, 2026 •

edited

Loading

jp-launch-control bot commented Jan 30, 2026 •

edited

Loading