feat(content-gates): add priority management UI

[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:

Building on #4512, implements the new i3 designs for managing gate priorities.

• Adds a new isMedium prop to our Modal component to support an in-between width of 512px
• Adds a new CardSortableList component which uses the core-based Card component to create a draggable/sortable list of items. The items in the list move with animations, making it easier to see how the list will be reordered after dragging and dropping. This is intended to be an improvement on and eventual replacement for the existing draggable variation of ActionCard.

How to test the changes in this Pull Request:

1. Visit Audience > Access Control and add at least three content gates.
2. In the content gates list view, click the "Gate priority" link next to the page heading and confirm it shows a modal with the priority management UI:

3. Drag and drop the list items to reorder them and confirm that the UX is acceptable. Note that there's a slight delay upon dropping an item—this is from the core Draggable component that our wrapper component uses, and is currently unavoidable.
4. Click the up/down arrows next to each item and confirm that the list reorders itself as expected.
5. Click "Cancel" and confirm that the modal closes without saving any changes.
6. Repeat steps 2-4 and then click "Save". Confirm that the modal closes automatically, and after a short loading animation the list of content gates has also reordered itself. Refresh and confirm that the new order persists after the page refresh.

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 implements a priority management UI for content gates, building on PR #4512. It adds functionality for users to reorder content gates via drag-and-drop or arrow buttons, ensuring that gates are checked in the correct priority order when determining which gate applies to content.

Changes:

• Added isMedium prop to Modal component for a 512px width option
• Created CardSortableList component - a reusable draggable/sortable list using WordPress Core's Card and Draggable components with smooth animations
• Implemented ContentGatesPriority modal for managing gate priority order with save/cancel functionality
• Enhanced Card component with draggable controls including drag handle and up/down arrow buttons

Reviewed changes

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

Show a summary per file

File	Description
src/wizards/audience/views/content-gates/content-gates.tsx	Replaced placeholder modal with ContentGatesPriority component, removed unused imports
src/wizards/audience/views/content-gates/content-gates-priority.tsx	New component implementing priority management UI with drag-and-drop and API integration
packages/components/src/modal/index.js	Added isMedium prop support for 512px modal width
packages/components/src/modal/style.scss	Added CSS for medium-width modal styling
packages/components/src/index.js	Exported new CardSortableList component
packages/components/src/card-sortable-list/index.tsx	New reusable sortable list component with FLIP animations for smooth reordering
packages/components/src/card-sortable-list/style.scss	Styles for sortable list animations and drag states
packages/components/src/card/core-card.js	Added draggable controls (drag handle and arrow buttons) to Card header
packages/components/src/card/style-core.scss	Added styles for draggable card controls and positioning
packages/components/src/card/index.js	Added draggable-related default props to Card component
packages/components/src/card-settings-group/index.tsx	Fixed component description comment (minor documentation update)

---

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

[thomasguillot]

Screenshot.2026-02-26.at.14.05.00.mp4

There's something weird happening with the keyboard focus on the movers.

The focus stays on the "card level" that I want to move and not on the individual card I selected. So in the video recording above, my focus is on "Gate w/ metering" to move up. After I press enter, I'd expect to still be on "Gate w/ metering" to move up (unless it's disabled because I'm at the top in which case the focus should to move down). But instead, the focus goes to "Gate" to move up. So I end up it a loop

[thomasguillot]

We need a Snackbar to confirm it's been updated

[thomasguillot]

For the "Save" button, rather than having our loader bar at the top

Is it possible to add isBusy to the save button instead? And disable the other buttons

[thomasguillot]

Is it possible to add isBusy to the save button instead? And disable the other buttons

Looks like it's called loading now: https://wordpress.github.io/gutenberg/?path=/docs/design-system-components-button--docs

[dkoo]

@thomasguillot thanks for the feedback!

There's something weird happening with the keyboard focus on the movers.

7ecdca9 fixes this.

For the "Save" button, rather than having our loader bar at the top, is it possible to add isBusy to the save button instead? And disable the other buttons

The loader bar is the standard animation for Wizard components when an async operation is in progress—I think we should keep this consistent with the other wizard pages if possible.

ef38e34 adds a Disabled component wrapper to the sortable list so that it can't be interacted with while the wizard is in a loading state. 1c25474 disables the modal's Cancel button and adds a loading prop to the Save button while the async op is in progress, but it looks like loading was added to buttons in a more recent version of @wordpress/components (EDIT: looks like just last month, so it may be a while before this lands in WP core) so this won't have any visual effect until we update this dependency across all our repos. In the meantime we can keep the Save button disabled.

We need a Snackbar to confirm it's been updated

Added in 749d7e5. Unfortunately I can't get the "Undo" button to work, I think because when the Modal closes itself it loses the state data it would need to perform the undo action. EDIT: figured it out! 4fb153c keeps the state alive and just shows or hides the UI based on the parent state, which allows the Undo button to do its thing.

[thomasguillot]

Brilliant, thank you @dkoo.

The loader bar is the standard animation for Wizard components when an async operation is in progress—I think we should keep this consistent with the other wizard pages if possible.

👍

[miguelpeixe]

Tested well, except when dragging an item outside the list area, it hangs for a bit before dropping in position:

Gravacao.de.Tela.2026-02-26.as.17.12.41.mov

I decided to ask Claude, and it provided the solution, which I pushed to #4523. When the cursor is released outside any element with preventDefault() on its dragover, the browser doesn't recognize a valid drop target, so it animates the drag ghost back to its origin before firing dragend. The fix is to add a document-level dragover listener during the drag to suppress that behavior.

While at it, it also suggested using a stable key instead of the index for the sortable list item. I think it's a valid change.

[dkoo]

@miguelpeixe Claude's suggestions improved upon Claude's solution, love it. I merged #4523 and the feature is much smoother/more responsive feeling now.