feat(advertising): replace placements UI with inline expandable cards

[thomasguillot]

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:

Replaces the action card toggle + modal pattern on the Advertising Placements screen with an inline expandable card UI.

Each placement card now supports:

• An Enable button (secondary) when the placement is disabled
• An Enabled badge + Edit/Cancel button (tertiary) when enabled
• An inline settings form that expands within the card on Edit or Enable, with Update/Enable (primary) and Disable (destructive tertiary) buttons
• ESC key to cancel editing (handled inside the card, no external event wiring needed)
• Other cards' buttons are disabled while a placement is open for editing
• Snackbar notifications (via portal to #wpbody) on Enable, Update, and Disable
• Update and Enable buttons disabled until changes/ad unit selection are made
• Enable, Update, and Disable all guard the panel close + snackbar behind a successful API response — no false success feedback on error

Also:

• Adds a reusable CardForm component to packages/components/src with title/description/badge/actions/children slots, built-in ESC handling via onRequestClose, README, and examples in the components demo
• Improves PlacementControl to derive the effective provider when only one is available, fixing empty ad unit options and missing GAM bidder fields in single-provider setups
• Adds hasHeaderBorder prop to CoreCard for seamless inline form expansion
• Adds 12-column support to the Grid component (responsive: applies at 1054px+)
• Fixes stick_to_top toggle to use an immutable state update
• Updates font-weight for card headings to 600 at the base __header-content level to align with WordPress Core's card header weight. Applies globally to every CoreCard (CardFeature, CardForm, etc.) — this is an intentional design-system alignment.

How to test the changes in this Pull Request:

1. Go to Newspack → Advertising → Placements.
2. Verify all placements are listed as cards with an Enable button when disabled.
3. Click Enable on a placement — the card should expand with a settings form. Confirm the Enable button in the footer is disabled until an ad unit is selected. Confirm all other placements' Enable buttons are disabled.
4. Select a provider and ad unit, then click Enable — a snackbar should confirm the placement was enabled.
5. Verify the Enabled badge appears in the card header.
6. Click Edit — the form expands again. Confirm Update is disabled until a change is made. Confirm other placements' Edit buttons are disabled.
7. Make a change (e.g. select a different ad unit) and click Update — a snackbar should confirm the update.
8. Click Edit again, then press ESC — the form should close without saving.
9. Click Edit, then click Cancel — the form should close and changes should be reverted.
10. Click Edit → Disable — the placement should be disabled and a snackbar should confirm.
11. Click Enable then Cancel before saving — the placement should revert to disabled.
12. Verify snackbars appear centered at the bottom of the screen.
13. For placements with multiple hooks (e.g. before/after content), verify each hook has its own ad unit selector.
14. If only one ad provider is configured, verify the provider select is hidden and the ad unit selector still populates correctly — including GAM bidder ID fields if applicable.
15. Go to the components demo page and verify the CardForm section shows the enable/edit flow working interactively and all four badge levels.

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 updates the Advertising Placements screen UI by replacing the toggle + modal workflow with inline, expandable placement cards, adding snackbar confirmations, and enhancing shared UI components to support the new layout.

Changes:

• Replaces modal-based placement settings with inline expandable cards, including enable/edit/cancel flows and snackbar notifications.
• Updates PlacementControl to hide the provider selector when only one provider is available.
• Extends shared UI components: adds 12-column support to Grid, adds hasHeaderBorder to CoreCard, and aligns style-core.scss with WordPress base-style variables.

Reviewed changes

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

Show a summary per file

File	Description
src/wizards/advertising/views/placements/index.js	Implements the new inline card UI for placements, including enable/edit flows and snackbar notifications.
src/wizards/advertising/style.scss	Adds fixed-position snackbar container styling for placement action confirmations.
src/wizards/advertising/components/placement-control/index.js	Hides provider select when only one provider exists; refactors layout to a vertical stack.
packages/components/src/grid/style.scss	Adds a 12-column grid variant used by the updated placements layout.
packages/components/src/card/style-core.scss	Switches to WP base-style variables and adds styles to support borderless headers during inline expansion.
packages/components/src/card/core-card.js	Adds hasHeaderBorder prop to allow removing header border/padding for seamless inline expansion.

---

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

[Copilot]

Pull request overview

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

Comments suppressed due to low confidence (1)

src/wizards/advertising/views/placements/index.js:48

• placementsApiFetch catches fetch errors but never rethrows/returns a status. Callers can’t reliably tell whether a request failed, which leads to follow-up UI actions (open panel, close panel, snackbars) running even when the API call errored. Consider returning a boolean (or rethrowing) so callers can gate subsequent state changes on success.

	const placementsApiFetch = async options => {
		try {
			const data = await apiFetch( options );
			setPlacements( data );
			setError( null );
		} catch ( err ) {
			setError( err );
		}
	};

---

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

[adekbadek]

A handful of inline notes – nothing strictly blocking, apart from the Cancel/ESC path: the PR description promises "guard panel close behind a successful API response" and that guarantee doesn't hold for the cancel path today.

[adekbadek]

All feedback addressed. Re-tested the cancel/ESC paths on the updated code – Enable → Cancel now correctly guards on DELETE success before closing, and Edit → ESC reverts dirty data to originalData. ARIA, focus management, scoped ESC, !important removal, hasChanges scoping, single-notice state, and bidders dep fix all verified in code and browser.

[github-actions]

Hey @thomasguillot, good job getting this PR merged! 🎉

Now, the needs-changelog label has been added to it.

Please check if this PR needs to be included in the "Upcoming Changes" and "Release Notes" doc. If it doesn't, simply remove the label.

If it does, please add an entry to our shared document, with screenshots and testing instructions if applicable, then remove the label.

Thank you! ❤️

[github-actions]

🎉 This PR is included in version 6.38.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀