feat(access-control): tweaks to Access Control UI components

[dkoo]

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:

Moves the buttons for customizing/editing Registered / Paid Access layouts from buttons in each content gate's settings card to the gate's dropdown menu, and adds "edit layout" buttons to the full-screen Edit view in the headers for the Registered / Paid Access settings group cards. Note that for this latter feature, we've had to tweak the behavior of the CardSettingsGroup component so that the entire card header is no longer clickable to toggle the group on or off—now, you must click the ToggleControl directly to do this. Otherwise, clicking any buttons inside the header component would also trigger the toggle callback.

Also moves the Metering settings options to the top of the Registered / Paid Access settings cards, above the other access rule options.

Closes DSGNEWS-139 and NPPD-1398.

How to test the changes in this Pull Request:

1. Check out this branch
2. Visit Audience > Access control
3. Confirm that all gates have "Edit registered access layout" and "Edit paid access layout" items in the dropdown menu, separated from the other options. Confirm that these link to the correct layout posts.

4. Edit an existing gate, or create a new one and then edit it (layout buttons won't appear when creating a new gate because the gate and layout posts don't yet exist). Confirm that the Registered and Paid Access settings cards each have an "Edit layout" button in the heading that link to the correct layout post, only when the relevant Access group is enabled.

5. Also confirm that Metering options for both Registered and Paid Access settings cards now appear first.

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

Updates the Access Control (Content Gates) UI to relocate layout-edit actions into the gate actions menu and add “Edit layout” shortcuts inside the full-screen edit view, while also reordering metering settings to appear first.

Changes:

• Reorders Registered/Paid Access cards so metering options appear before other rule controls.
• Moves “edit/customize layout” actions from per-card buttons into the gate actions dropdown, and adds “Edit layout” buttons to the edit view’s settings group headers.
• Adjusts CardSettingsGroup/core card behavior and styling so headers are no longer fully clickable for toggling (toggle control only), and supports grouped menu actions + a header action button.

Reviewed changes

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

Show a summary per file

File	Description
src/wizards/audience/views/content-gates/edit/registration.tsx	Moves metering section above “Require verification” toggle.
src/wizards/audience/views/content-gates/edit/custom-access.tsx	Moves metering section above access rules UI.
src/wizards/audience/views/content-gates/edit/index.tsx	Adds “Edit layout” header actions for Registered/Paid Access settings groups and updates create flow for redirect.
src/wizards/audience/views/content-gates/content-gate-settings.tsx	Moves layout edit actions into the card dropdown menu (grouped).
packages/components/src/card/core-card.js	Adds support for grouped dropdown actions and a headerAction button in the card header.
packages/components/src/card-settings-group/index.tsx	Adds headerAction passthrough and changes toggle behavior to use onToggle (not full-header click).
packages/components/src/card/style-core.scss	Updates header layout/styling to accommodate the new header action button and non-button headers.

---

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

[Copilot]

For existing gates where registration.gate_layout_id is 0/missing, this falls back to handleCreate('registration'), which POSTs a new gate and can duplicate the gate. The server-side edit-layout handler creates a layout when it doesn’t exist, so for !isNew you should still set href to getEditGateLayoutUrl(gate.id,'registration') regardless of gate_layout_id, and only use handleCreate in the isNew case.

[Copilot]

This Paid Access headerAction is rendered even when isNewsletter is true, but the premium-newsletters wizard doesn’t localize edit_gate_layout_url, so getEditGateLayoutUrl(...) can return an empty string (and handleCreate('custom_access') can incorrectly create a new gate when editing an existing one). Consider gating this header action behind !isNewsletter, and for !isNew always use href={ getEditGateLayoutUrl(gate.id,'custom_access') } (no need to require gate_layout_id), reserving handleCreate only for new gates.

Suggested change

	customAccess?.active
	? {
	label: __( 'Edit layout', 'newspack-plugin' ),
	href: ! isNew && customAccess.gate_layout_id ? getEditGateLayoutUrl( gate.id, 'custom_access' ) : undefined,
	onClick: ! isNew && customAccess.gate_layout_id ? undefined : () => handleCreate( 'custom_access' ),
	customAccess?.active && ! isNewsletter
	? {
	label: __( 'Edit layout', 'newspack-plugin' ),
	href: ! isNew ? getEditGateLayoutUrl( gate.id, 'custom_access' ) : undefined,
	onClick: isNew ? () => handleCreate( 'custom_access' ) : undefined,