fix(newspack-theme): apply ad background color to Broadstreet ads

[dkoo]

Summary

Fixes NPPM-2829.

The Newspack Theme's Ads Background Color Customizer setting (Appearance → Customize → Colors) applies a chosen background behind ads. It worked for ads rendered with Newspack Ads markup (.newspack_global_ad, div[class*="newspack-ads-blocks-ad-unit"], etc.) but not for ads embedded via the standalone Broadstreet WordPress plugin, which renders <broadstreet-zone-container> / <broadstreet-zone> custom elements that none of the theme's selectors targeted. Reported by Fort Worth Report.

This is a CSS-only change that makes the Broadstreet container inherit the same treatment as Newspack ad units.

Changes

• inc/color-patterns.php — add broadstreet-zone-container to the ad background-color selector list (already gated on ads_color === 'custom').
• sass/plugins/newspack-ads.scss — add a broadstreet-zone-container rule inside .custom-ad-bg: display: flex + centering + 8px padding, mirroring the Newspack ad-unit treatment. This promotes the inline custom element to a block-level full-width wrapper so the background spans the column and the ad centers.

Why target broadstreet-zone-container

The Broadstreet plugin's PHP only emits a bare <broadstreet-zone>; the <broadstreet-zone-container> wrapper is created client-side by Broadstreet's CDN script when it hydrates the zone and injects the ad. That container is the structural parallel to Newspack's outer div[class*="newspack-ads-blocks-ad-unit"] wrapper, and targeting it (rather than the bare zone) avoids painting an empty colored box before the ad loads. All styling is gated on the publisher having set a custom ad background, so sites on the default background are untouched.

Out of scope

• Legacy Broadstreet "old tags" <script> mode and AMP <amp-ad> output (different markup; AMP is legacy).
• Publisher-defined custom_selector renaming the zone element.

Testing

1. On a site with a custom Ads Background Color (Appearance → Customize → Colors → Custom + a visible color), view a post containing a standalone-Broadstreet ad.
2. The chosen background renders behind the ad, centered, with 8px padding — matching Newspack-served ads.
3. With Ads Background Color = Default, the Broadstreet container receives no added styling (no regression).

Verified locally in an isolated environment using markup mimicking Broadstreet's hydrated DOM (injected via a mu-plugin to bypass content sanitization): body receives custom-ad-bg, the runtime color-patterns.php rule emits broadstreet-zone-container{background-color: …}, and the compiled stylesheet serves the flex/padding rule.

Note: compiled theme CSS is gitignored and built by CI on release, so this PR contains source (SCSS + PHP) only.

🤖 Generated with Claude Code

[Copilot]

Pull request overview

This PR extends the Newspack Theme ad background color treatment to Broadstreet ads rendered by the standalone Broadstreet plugin.

Changes:

• Adds Broadstreet ad containers to the generated custom ad background color CSS.
• Adds SCSS to center Broadstreet ad content and apply matching padding when custom ad backgrounds are enabled.

Reviewed changes

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

File	Description
themes/newspack-theme/newspack-theme/inc/color-patterns.php	Includes broadstreet-zone-container in the custom ad background selector list.
themes/newspack-theme/newspack-theme/sass/plugins/newspack-ads.scss	Adds layout and padding styles for Broadstreet containers under .custom-ad-bg.