feat(content-gating): i3 designs for content gates list view by dkoo · Pull Request #4512 · Automattic/newspack-plugin

dkoo · 2026-02-24T20:17:19Z

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:

Implements i3 designs for the "list" view for showing existing content gates in the Access Control wizard.

Also adds a new feature that allows the Wizard component to show snackbar-style notices via its Redux store. This is done via a new WizardSnackbar component that wraps the core Snackbar component, but is aware of and interfaces the the Wizard Redux store.

This PR only covers the list view for content gates. It doesn't cover i3 designs for priority management or other global settings such as Content Gifting and Countdown Banner features—these will come in future PRs.

Related NPPD-1244.

How to test the changes in this Pull Request:

Check out this branch. Optionally delete any existing content gates to start fresh: wp post delete $(wp post list --post_type=np_content_gate --format=ids) --force and confirm that the Onboarding screen still works as described in feat(content-gating): new UI for adding/editing content gates #4474.
Create a new content gate. Try to tweak all available settings so you can see how they're represented in the list view. After editing some info, try to click the back button in the header and confirm that you're prompted about unsaved changes.

Cancel out of the prompt, then save. Confirm that you're automatically redirected to the content gates list view with a small snackbar notice stating that the new gate was created. Confirm that the snackbar notice appears with an "Edit" link that links to the edit page for the newly created gate. Confirm that the newly created gate is "Active" and has a publish status in the back-end.

View the list view here and confirm that the card element here accurately reflects the gate's settings. Also view at a mobile viewport size to ensure that the layout collapses gracefully.
Confirm that the "Customize registered/paid access layout" buttons work.
Click the three-dot dropdown menu and test each menu item:

Confirm that "Edit" navigates to the edit page for that content gate. Make some edits, save, and confirm that the list view updates to reflect any changed settings.
Confirm that the "Deactivate" button unpublishes the content gate post and that the snackbar notice accurately reflects the updated status. Confirm that the "Undo" button in the snackbar notice reverts the status change.
Confirm that the "Delete" button prompts you about permanently deleting the content gate and that confirming the prompt deletes it.

Add more more than one content gate and confirm that a "Gate priority" link appears next to the "Access control" header in the list view. (Note: this just opens the existing "Add New" modal for now, no need to test anything in here. Priority management will come in a future PR)

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 Audience → Access Control “content gates” list view to match the i3 designs, and introduces wizard-wide snackbar notices driven by the Wizard Redux store (via a new WizardSnackbar wrapper).

Changes:

Redesign content gates list view cards and their “Edit / Activate / Deactivate / Delete” actions.
Add Wizard store-backed snackbar notices (notices[]) and render them from Wizard.
Extend shared UI components (SectionHeader actions/description, Grid borders, CoreCard dropdown actions) to support the new designs.

Reviewed changes

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

Show a summary per file

File	Description
src/wizards/hooks/use-wizard-api-fetch.ts	Sync local hook error state with wizardData error.
src/wizards/componentsDemo/index.js	Demo: wrap core-card examples in VStack.
src/wizards/audience/views/content-gates/types/index.d.ts	Split gate rule props types; add `isStatic` to rule control props.
src/wizards/audience/views/content-gates/style.scss	Add list-view settings typography/button styles (currently has brace issues).
src/wizards/audience/views/content-gates/edit/style.scss	Add spacing for taxonomy token field.
src/wizards/audience/views/content-gates/edit/registration.tsx	Remove “Edit Layout” link from edit panel.
src/wizards/audience/views/content-gates/edit/index.tsx	Redirect to list after save/create; add snackbar notices; add unsaved changes prompt; refactor status changes.
src/wizards/audience/views/content-gates/edit/custom-access.tsx	Remove “Edit Layout” link from edit panel.
src/wizards/audience/views/content-gates/edit/content-rule.tsx	Use new content-rule-specific props; ensure exclusion is passed through.
src/wizards/audience/views/content-gates/edit/content-rule-control.tsx	Add static display mode and exclusion propagation for taxonomy control.
src/wizards/audience/views/content-gates/edit/content-rule-control-taxonomy.tsx	Add static display mode; parse/display selected labels.
src/wizards/audience/views/content-gates/edit/access-rule.tsx	Use new access-rule-specific props.
src/wizards/audience/views/content-gates/content-gates.tsx	Replace old expandable action-cards list with new list layout + header store usage; stub modal for “Gate priority”.
src/wizards/audience/views/content-gates/content-gate-settings.tsx	New gate “card” layout showing gate settings; add per-card actions + snackbars.
packages/components/src/wizard/store/index.js	Add `notices[]` to state plus add/remove/reset actions + selector; add `sectionDescription` to headerData defaults.
packages/components/src/wizard/index.js	Render SectionHeader with description + actions; render snackbars from notices; adjust header reset behavior.
packages/components/src/wizard/components/style.scss	Add snackbar positioning + link styling.
packages/components/src/wizard/components/WizardSnackbar.js	New wrapper around core Snackbar that removes notices from wizard store on dismiss.
packages/components/src/with-wizard-screen/style.scss	Add margin for wizard section header.
packages/components/src/section-header/style.scss	Layout updates for primary/secondary actions; adjust margin logic.
packages/components/src/section-header/index.js	Add primary/secondary actions rendering and related container classnames.
packages/components/src/grid/style.scss	Add borders variant styling and move gutter-64 definition.
packages/components/src/grid/index.tsx	Add `borders` prop to apply bordered grid styling.
packages/components/src/card/style-core.scss	Improve core-card layout (dropdown positioning, no-margin body padding, header typography).
packages/components/src/card/index.js	Add `noMargin` to core-card prop defaults.
packages/components/src/card/core-card.js	Add dropdown actions support to core-card header.
includes/content-gate/class-content-gate.php	Create gates as `publish` by default (ignores passed status).

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

thomasguillot · 2026-02-25T15:09:34Z

I really like you introduced this when we have unsaved changes. Would it be possible to use a Modal instead? And the same goes for the delete message.

thomasguillot · 2026-02-25T15:19:03Z

My previous comment shouldn't be a blocker. We can always handle it in a separate PR.

…e bg as modal

dkoo · 2026-02-26T16:15:42Z

@dkoo I pushed a small tweak to the modals: 56ce522

Essentially I changed isNarrow and isWide to a size prop.

Thanks, @thomasguillot! I was surprised to see we're not using those size props with Modal anywhere else in the codebase, so it's a clean change.

…ui-priority

miguelpeixe

🎉

dkoo · 2026-02-26T16:33:15Z

I'll keep this open so I can merge #4518 without conflicts!

…table list Add `id` field to `DraggableItem` type and use it as the React key instead of array index, preventing element mismatches on reorder. Also add a document-level dragover listener during drag to suppress the browser's snap-back animation when dropping outside the list container.

Fix/sortable list improvements

feat(content-gates): add priority management UI

github-actions · 2026-02-26T21:21:19Z

Hey @dkoo, 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! ❤️

# [6.35.0-alpha.1](v6.34.2...v6.35.0-alpha.1) (2026-03-05) ### Bug Fixes * allow deletion of payment method for Braintree ([63ceec3](63ceec3)) * apply Copilot suggestion for tests ([6133636](6133636)) * **avatar:** correct duotone selector to support custom colors ([#4513](#4513)) ([c4458d4](c4458d4)) * **byline:** update placeholder text to "Author Name" ([#4510](#4510)) ([727b1e8](727b1e8)) * **co-authors-plus:** sanitize user_login before building dummy email… ([#4520](#4520)) ([32c2602](32c2602)) * do not depend on _get() to return an array ([2816470](2816470)) * **dropdown-menu:** avoid overflow at bottom of viewport ([#4495](#4495)) ([a5ce464](a5ce464)) * enable payment method deletion for Braintree ([c50f094](c50f094)) * iframe editor compatiblity ([#4444](#4444)) ([12dfaba](12dfaba)) * **my-account:** don't show subscription payment notice in modal checkout ([#4500](#4500)) ([2cb3324](2cb3324)) * **my-account:** force white background color ([#4514](#4514)) ([02e2555](02e2555)) * **my-account:** resubscription validation in order-again template ([#4498](#4498)) ([36871fc](36871fc)) * **newspack-icon:** background color ([#4516](#4516)) ([8c5dc9c](8c5dc9c)) * **newspack-ui:** remove overflow when modal is open ([#4515](#4515)) ([0b2cbd3](0b2cbd3)) * prune read-only keys from sync queue ([bf81734](bf81734)) * remove unused 'edit' and 'save' actions from Braintree payment methods ([8f72a8d](8f72a8d)) * **snackbar:** autohide progress bar not always appearing ([#4504](#4504)) ([4eda60f](4eda60f)) ### Features * identify and enforce read-only items for Reader Data Library ([4f2ef8a](4f2ef8a)) * add featured image caption block ([#4519](#4519)) ([0b744ff](0b744ff)) * **author-profile:** avatar and social blocks for nested author profile ([#4448](#4448)) ([cff670b](cff670b)) * **content-gate:** comment restriction with metering support ([#4529](#4529)) ([714c8b7](714c8b7)) * **content-gate:** per-post access control exemption ([#4530](#4530)) ([636679b](636679b)) * **content-gate:** user access information ([#4542](#4542)) ([b49347e](b49347e)) * **content-gating:** group subscription invitations data structure + admin UI ([#4536](#4536)) ([e609e83](e609e83)) * **content-gating:** i3 designs for content gates list view ([#4512](#4512)) ([dcbb239](dcbb239)) * **corrections:** append corrections to Republication Tracker Tool content ([#4501](#4501)) ([71bd177](71bd177)) * data event handler registration and dispatching to integrations ([#4481](#4481)) ([7c79da6](7c79da6)) * **data-events:** add ActionScheduler logging and retry reason ([#4488](#4488)) ([e8af964](e8af964)) * **integrations:** make sure contact data is read from persistent data ([#4505](#4505)) ([c2ee26a](c2ee26a)) * **integrations:** start get fields abstraction and pull contact data ([#4470](#4470)) ([8ddcf23](8ddcf23)), closes [#4477](#4477) * **reader-registration-block:** password, OTP, and verification flows ([#4452](#4452)) ([fc4567e](fc4567e)) * reject changes to specific reader data keys ([fe52e12](fe52e12))

github-actions · 2026-03-05T19:50:05Z

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

The release is available on GitHub release

Your semantic-release bot 📦🚀

# [6.35.0](v6.34.4...v6.35.0) (2026-03-16) ### Bug Fixes * allow deletion of payment method for Braintree ([63ceec3](63ceec3)) * apply Copilot suggestion for tests ([6133636](6133636)) * **avatar:** correct duotone selector to support custom colors ([#4513](#4513)) ([c4458d4](c4458d4)) * **byline:** update placeholder text to "Author Name" ([#4510](#4510)) ([727b1e8](727b1e8)) * **co-authors-plus:** sanitize user_login before building dummy email… ([#4520](#4520)) ([32c2602](32c2602)) * do not depend on _get() to return an array ([2816470](2816470)) * **dropdown-menu:** avoid overflow at bottom of viewport ([#4495](#4495)) ([a5ce464](a5ce464)) * enable payment method deletion for Braintree ([c50f094](c50f094)) * iframe editor compatiblity ([#4444](#4444)) ([12dfaba](12dfaba)) * **my-account:** don't show subscription payment notice in modal checkout ([#4500](#4500)) ([2cb3324](2cb3324)) * **my-account:** force white background color ([#4514](#4514)) ([02e2555](02e2555)) * **my-account:** resubscription validation in order-again template ([#4498](#4498)) ([36871fc](36871fc)) * **newspack-icon:** background color ([#4516](#4516)) ([8c5dc9c](8c5dc9c)) * **newspack-ui:** remove overflow when modal is open ([#4515](#4515)) ([0b2cbd3](0b2cbd3)) * prune read-only keys from sync queue ([bf81734](bf81734)) * remove unused 'edit' and 'save' actions from Braintree payment methods ([8f72a8d](8f72a8d)) * **snackbar:** autohide progress bar not always appearing ([#4504](#4504)) ([4eda60f](4eda60f)) ### Features * identify and enforce read-only items for Reader Data Library ([4f2ef8a](4f2ef8a)) * add featured image caption block ([#4519](#4519)) ([0b744ff](0b744ff)) * **author-profile:** avatar and social blocks for nested author profile ([#4448](#4448)) ([cff670b](cff670b)) * **content-gate:** comment restriction with metering support ([#4529](#4529)) ([714c8b7](714c8b7)) * **content-gate:** per-post access control exemption ([#4530](#4530)) ([636679b](636679b)) * **content-gate:** user access information ([#4542](#4542)) ([b49347e](b49347e)) * **content-gating:** group subscription invitations data structure + admin UI ([#4536](#4536)) ([e609e83](e609e83)) * **content-gating:** i3 designs for content gates list view ([#4512](#4512)) ([dcbb239](dcbb239)) * **corrections:** append corrections to Republication Tracker Tool content ([#4501](#4501)) ([71bd177](71bd177)) * data event handler registration and dispatching to integrations ([#4481](#4481)) ([7c79da6](7c79da6)) * **data-events:** add ActionScheduler logging and retry reason ([#4488](#4488)) ([e8af964](e8af964)) * **integrations:** make sure contact data is read from persistent data ([#4505](#4505)) ([c2ee26a](c2ee26a)) * **integrations:** start get fields abstraction and pull contact data ([#4470](#4470)) ([8ddcf23](8ddcf23)), closes [#4477](#4477) * **reader-registration-block:** password, OTP, and verification flows ([#4452](#4452)) ([fc4567e](fc4567e)) * reject changes to specific reader data keys ([fe52e12](fe52e12))

github-actions · 2026-03-16T18:21:29Z

🎉 This PR is included in version 6.35.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

dkoo added 10 commits February 20, 2026 15:54

feat: new props for Wizard sections and SectionHeader component

1b720f0

feat: content gates as core Card components

366edb6

feat: handle status updates from list view

d27e383

feat: content gates list view

df53cdd

feat: snackbar component for Wizards

60ab183

feat: snackbar notices

cc2b8c1

fix: wrong status change message

da6f51c

fix: improved state management and actions handling for WizardSnackbar

5995791

feat: show warning before discarding unsaved changes

5615b81

fix: avoid prompt after saving

8bbcdae

dkoo requested a review from thomasguillot February 24, 2026 20:17

dkoo self-assigned this Feb 24, 2026

dkoo requested a review from a team as a code owner February 24, 2026 20:17

Copilot AI review requested due to automatic review settings February 24, 2026 20:17

dkoo added [Status] Needs Review The issue or pull request needs to be reviewed [Status] Needs Design Review labels Feb 24, 2026

Copilot started reviewing on behalf of dkoo February 24, 2026 20:17 View session

Copilot AI reviewed Feb 24, 2026

View reviewed changes

thomasguillot added 3 commits February 25, 2026 14:46

fix(waiting): component alignement

b752658

feat(section-header): increase gap when has-primary-action

9d30e14

fix(card): force dropdown menu to have aspect ratio of 1

8d0752e

thomasguillot added [Status] Design Approved and removed [Status] Needs Design Review labels Feb 25, 2026

thomasguillot removed their request for review February 25, 2026 15:19

dkoo added 4 commits February 25, 2026 09:02

fix: check for empty actions array

721ebf7

fix: deprecate isInFlight state

0c3fe0d

fix: wizard notice key

63ea194

feat: custom confirm modal instead of browser dialog

04497e1

thomasguillot and others added 2 commits February 26, 2026 15:26

feat: update modal max-height and width, update webpreview to use sam…

c66d498

…e bg as modal

fix: missing translations

675fa13

dkoo requested a review from miguelpeixe February 26, 2026 16:14

Merge branch 'feat/access-control-ui-gates' into feat/access-control-…

d75793a

…ui-priority

miguelpeixe approved these changes Feb 26, 2026

View reviewed changes

github-actions Bot added [Status] Approved The pull request has been reviewed and is ready to merge and removed [Status] Needs Review The issue or pull request needs to be reviewed [Status] Needs Changes or Feedback The issue or pull request needs action from the original creator labels Feb 26, 2026

dkoo and others added 11 commits February 26, 2026 10:06

fix: keep focus on moved item buttons

7ecdca9

fix: set isLoading prop on button during async op

1c25474

fix: prevent CardSortableList interaction in disabled state

ef38e34

fix: add snackbar notice after updating priority

749d7e5

fix: close modal if API request fails

3d3d4c8

fix: keep priorities state alive after modal closes

4fb153c

fix: clear errors when starting new request

d728032

refactor: remove unnecessary braces

2bb61e5

Merge pull request #4523 from Automattic/fix/sortable-list-improvements

88857d0

Fix/sortable list improvements

Merge pull request #4518 from Automattic/feat/access-control-ui-priority

87c6165

feat(content-gates): add priority management UI

dkoo merged commit dcbb239 into trunk Feb 26, 2026
7 checks passed

dkoo deleted the feat/access-control-ui-gates branch February 26, 2026 21:21

github-actions Bot added the needs-changelog label Feb 26, 2026

dkoo removed the needs-changelog label Feb 27, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(content-gating): i3 designs for content gates list view#4512

feat(content-gating): i3 designs for content gates list view#4512
dkoo merged 52 commits intotrunkfrom
feat/access-control-ui-gates

dkoo commented Feb 24, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

thomasguillot commented Feb 25, 2026

Uh oh!

thomasguillot commented Feb 25, 2026

Uh oh!

dkoo commented Feb 26, 2026

Uh oh!

miguelpeixe left a comment

Uh oh!

dkoo commented Feb 26, 2026

Uh oh!

Uh oh!

github-actions Bot commented Feb 26, 2026

Uh oh!

github-actions Bot commented Mar 5, 2026

Uh oh!

github-actions Bot commented Mar 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

dkoo commented Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

thomasguillot commented Feb 25, 2026

Uh oh!

thomasguillot commented Feb 25, 2026

Uh oh!

dkoo commented Feb 26, 2026

Uh oh!

miguelpeixe left a comment

Choose a reason for hiding this comment

Uh oh!

dkoo commented Feb 26, 2026

Uh oh!

Uh oh!

github-actions Bot commented Feb 26, 2026

Uh oh!

github-actions Bot commented Mar 5, 2026

Uh oh!

github-actions Bot commented Mar 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

dkoo commented Feb 24, 2026 •

edited

Loading