fix: prevent content-gate editor.scss styles from getting chunked into the common.css file

[laurelfulford]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This one was weird!

In #4646, a new file block-visibility.tsx started importing content-gate/editor.scss. Newspack Plugin's Webpack has minChunks: 2; since this was the second file editor.css was imported into, it started getting included in the common.css, which caused the .components-base-control styles in that CSS file to bleed into more post types.

The .components-base-control style wasn't very specific, but this only started being an issue when the styles were imported into more editors.

This PR does two things:

1. It moves the styles block-visiblity.tsx needed into its own CSS file, so editor.scss isn't being imported twice, and isn't getting added to the common.scss.
2. It makes the .components-base-control styles more specific (adding content gate-specific CSS classes) since this issue was still happening when you edited a Content Gate.

Closes NPPM-2812

How to test the changes in this Pull Request:

1. On trunk, edit a post and click the publish date in the sidebar; note the appearance of the date picker.
2. Apply this PR and run npm run build; refresh the post editor and confirm the date picker looks okay.
3. Using Woo Memberships, set up a Content Gate and confirm the same date picker looks okay.
4. Set up access control (add define( 'NEWSPACK_CONTENT_GATES', true ); to your wp-config.php, and set up a content gate).
5. Edit a post, and add a group block. Confirm the options in the 'Access Control' panel look okay.
6. Smoke test some of the other steps from feat(content-gate): add per-block access control for Group, Stack, and Row blocks #4646 and confirm things look okay.

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[Copilot]

Pull request overview

This PR addresses unintended Gutenberg component styling bleed caused by editor.scss being imported by multiple entrypoints and ending up in a shared/common stylesheet chunk. It isolates the block visibility panel styles into a dedicated stylesheet and tweaks the generic BaseControl margin rule to avoid impacting the publish-date time UI.

Changes:

• Switched block-visibility.tsx to import a new block-visibility.scss instead of editor.scss, preventing editor.scss from being pulled into a common chunk.
• Extracted the block visibility panel SCSS from editor.scss into the new block-visibility.scss.
• Adjusted .components-base-control spacing in editor.scss to exclude DateTime/time-wrapper controls.

Reviewed changes

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

File	Description
src/content-gate/editor/editor.scss	Removes now-unneeded WP variables import, updates BaseControl margin behavior, and removes block-visibility panel styles (moved out).
src/content-gate/editor/block-visibility.tsx	Stops importing editor.scss and imports the new, dedicated block-visibility stylesheet.
src/content-gate/editor/block-visibility.scss	New isolated styles for the Access Control block visibility panel.

---

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

[adekbadek]

The chunking diagnosis is correct and the NPPM-2812 schedule-popup fix is verified working (the global .components-base-control margin no longer reaches commons.css). One blocker and some comments.

[adekbadek]

Blocker: Moving these styles into a dedicated block-visibility.scss makes this the only importer, so Webpack now emits dist/content-gate-block-visibility.css instead of folding the rules into commons.css. But Block_Visibility (includes/content-gate/class-block-visibility.php) only wp_enqueue_scripts content-gate-block-visibility.js — there's no matching wp_enqueue_style.

Verified in a built env: on the post editor the script loads but the stylesheet does not, so the Access Control panel loses its width: 100%, FormTokenField help spacing, and ToggleControl spacing. Add wp_enqueue_style( 'newspack-content-gate-block-visibility', Newspack::plugin_url() . '/dist/content-gate-block-visibility.css', [], $asset['version'] ); next to the script enqueue.

[laurelfulford]

🤦‍♀️ Helps to actually enqueue the CSS to have it used. Thanks @adekbadek! This should be fixed in 4d466c6.

[adekbadek]

Suggestion: Scoping this rule under .newspack-content-gate-panel only covers the two panels in editor.js that received the class. The content-gate-metering-panel (metering-settings.js: Checkbox/Text/Select controls) and content-gate-post-exemptions-panel (post-settings.js: a ToggleControl) also render .components-base-controls, don't carry the class, and don't use __nextHasNoMarginBottom — so they lose the 16px spacing they previously got from the global rule. Either add the class to those panels too or pull it into a shared constant so the next panel doesn't rediscover this.

[laurelfulford]

Confirmed that this got cozy on the Metering Settings - before:

Should look like this now:

Best I can tell Access control settings looks the same in either case, likely because they just have the one toggle right now -- adding the class doesn't hurt, either:

Classes added to both in e5a95b5.

[adekbadek]

Nit: 16px is hardcoded here while the sibling block-visibility.scss uses wp-vars.$grid-unit-* tokens. Value carried over verbatim so it's not introduced by this PR, but the two files now sit side by side with inconsistent spacing conventions — $grid-unit-20 (16px) would match.

[laurelfulford]

Updated to $grid-unit-20 in 15c6a2b

[laurelfulford]

Thanks @adekbadek -- everything should be addressed! Can you take another peek and let me know if anything else looks amiss!