newspack-components 4.4.0 → 4.5.0-alpha.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# newspack-components [4.5.0-alpha.1](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.4.0...newspack-components@4.5.0-alpha.1) (2026-07-10)
+
+
+### Bug Fixes
+
+* **audience:** avoid [object Object] in segment summary ([#541](https://github.com/Automattic/newspack-workspace/issues/541)) ([336e382](https://github.com/Automattic/newspack-workspace/commit/336e382e489ee65f98fb75e33dfe2517da76e78b))
+* **components:** avoid interactive nesting in CoreCard header ([#396](https://github.com/Automattic/newspack-workspace/issues/396)) ([dca53d4](https://github.com/Automattic/newspack-workspace/commit/dca53d4f1539769302158897f54d3666b6787e7a))
+
+
+### Features
+
+* **components:** standardize wp-admin snackbars, bottom-centered ([#447](https://github.com/Automattic/newspack-workspace/issues/447)) ([8c09d8b](https://github.com/Automattic/newspack-workspace/commit/8c09d8bc005d95032f04267b1bdd71df029708c5))
+* **content-gate:** add pre-save checklist and gate preferences ([#408](https://github.com/Automattic/newspack-workspace/issues/408)) ([5ef856b](https://github.com/Automattic/newspack-workspace/commit/5ef856b5355f0929aea1a83ca744a98a64b947de))
+
 # newspack-components [4.4.0](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.3.0...newspack-components@4.4.0) (2026-06-29)
 
 

package/dist/cjs/card/core-card.js

@@ -77,19 +77,24 @@ var CoreCard = function CoreCard(_ref) {
   if (noBorder) {
     otherProps.isBorderless = true;
   }
+  // A button header would nest its interactive children (toggle, header action, actions menu, or
+  // drag controls) inside a <button>, which is invalid. Only render the header as a button when a
+  // real click handler is supplied and the header has no interactive children of its own.
+  var hasInteractiveHeaderChildren = actionType === 'toggle' || !!headerAction || (actions === null || actions === void 0 ? void 0 : actions.length) > 0 || isDraggable;
+  var headerIsButton = !!onHeaderClick && !hasInteractiveHeaderChildren;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Card, _objectSpread(_objectSpread({
     as: as,
     className: classes
   }, otherProps), {}, {
     children: [(header || icon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.CardHeader, {
-      as: onHeaderClick ? 'button' : undefined,
+      as: headerIsButton ? 'button' : undefined,
       className: (0, _classnames["default"])('newspack-card--core__header', isDraggable && 'newspack-card--core__header--is-draggable', !hasHeaderBorder && 'newspack-card--core__header--no-border'),
       style: headerStyle,
       size: sizeProps,
       gap: 4,
-      onClick: disabled ? undefined : onHeaderClick,
-      disabled: onHeaderClick && disabled ? true : undefined,
-      "aria-disabled": onHeaderClick && disabled ? true : undefined,
+      onClick: headerIsButton && !disabled ? onHeaderClick : undefined,
+      disabled: headerIsButton && disabled ? true : undefined,
+      "aria-disabled": headerIsButton && disabled ? true : undefined,
       children: [isDraggable && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "newspack-card--core__header__draggable-controls",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/dist/cjs/card/core-card.test.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = require("@testing-library/react");
+var _coreCard = _interopRequireDefault(require("./core-card"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+var getHeader = function getHeader(container) {
+  return container.querySelector('.newspack-card--core__header');
+};
+describe('CoreCard', function () {
+  it('renders the header as a <button> when onHeaderClick is supplied and it has no interactive children', function () {
+    var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_coreCard["default"], {
+        header: "Settings",
+        onHeaderClick: function onHeaderClick() {}
+      })),
+      container = _render.container;
+    expect(getHeader(container).tagName).toBe('BUTTON');
+  });
+  it('renders the header as a non-button when it also has a toggle', function () {
+    var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_coreCard["default"], {
+        header: "Settings",
+        actionType: "toggle",
+        onHeaderClick: function onHeaderClick() {}
+      })),
+      container = _render2.container;
+    expect(getHeader(container).tagName).not.toBe('BUTTON');
+  });
+  it('renders the header as a non-button when it also has a header action', function () {
+    var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_coreCard["default"], {
+        header: "Settings",
+        headerAction: {
+          label: 'Edit',
+          onClick: function onClick() {}
+        },
+        onHeaderClick: function onHeaderClick() {}
+      })),
+      container = _render3.container;
+    expect(getHeader(container).tagName).not.toBe('BUTTON');
+  });
+  it('renders the header as a non-button when it also has an actions menu', function () {
+    var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_coreCard["default"], {
+        header: "Settings",
+        actions: [{
+          label: 'Delete',
+          action: function action() {}
+        }],
+        onHeaderClick: function onHeaderClick() {}
+      })),
+      container = _render4.container;
+    expect(getHeader(container).tagName).not.toBe('BUTTON');
+  });
+  it('renders the header as a non-button when it is also draggable', function () {
+    var _render5 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_coreCard["default"], {
+        header: "Settings",
+        isDraggable: true,
+        onHeaderClick: function onHeaderClick() {}
+      })),
+      container = _render5.container;
+    expect(getHeader(container).tagName).not.toBe('BUTTON');
+  });
+});

package/dist/cjs/card-settings-group/index.js

@@ -39,8 +39,7 @@ var CardSettingsGroup = function CardSettingsGroup(_ref) {
     isActive = _ref$isActive === void 0 ? false : _ref$isActive,
     _ref$onEnable = _ref.onEnable,
     onEnable = _ref$onEnable === void 0 ? function () {} : _ref$onEnable,
-    _ref$onHeaderClick = _ref.onHeaderClick,
-    onHeaderClick = _ref$onHeaderClick === void 0 ? function () {} : _ref$onHeaderClick;
+    onHeaderClick = _ref.onHeaderClick;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Card, {
     className: (0, _classnames["default"])('newspack-card--core--settings-group', className),
     actionType: actionType,

package/dist/cjs/divider/style.scss

@@ -42,7 +42,7 @@
 	}
 
 	&--variant-secondary {
-		background-color: wp-colors.$gray-900;
+		background-color: wp-colors.$gray-200;
 	}
 
 	&--variant-tertiary {

package/dist/cjs/web-preview/style.scss

@@ -103,10 +103,9 @@
 		}
 
 		&-right {
-			display: grid;
+			display: flex;
 			gap: 8px;
-			grid-template-columns: repeat(2, 1fr);
-			justify-self: end;
+			justify-content: flex-end;
 			margin-left: auto;
 		}
 	}

package/dist/cjs/wizard/components/WizardSnackbar.js

@@ -13,7 +13,7 @@ var _store = require("../store");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["children", "position", "type", "actions"];
+var _excluded = ["children", "type", "actions"];
 /**
  * Snackbar.
  */
@@ -29,26 +29,31 @@ var _excluded = ["children", "position", "type", "actions"];
 /**
  * WizardSnackbar component.
  *
+ * Wraps core's Snackbar with the wizard-store `onRemove` glue. Positioning and
+ * styling are neutral (bottom-centered via the snackbar list container). The
+ * notice `type` no longer drives any visual styling, but it still maps to the
+ * screen-reader announcement politeness: only `error` announces assertively,
+ * every other severity announces politely.
+ *
+ * Remaining props are spread onto core's Snackbar. See:
+ * https://wordpress.github.io/gutenberg/?path=/docs/components-snackbar--docs
+ *
  * @param {Object}      props          - The component props.
- * @param {Object[]}    props.actions  - The actions to display in the snackbar.
  * @param {JSX.Element} props.children - The component children.
- * @param {Object}      props.props    - The component props. See: https://wordpress.github.io/gutenberg/?path=/docs/components-snackbar--docs
- * @param {string}      props.position - The snackbar position.
- * @param {string}      props.type     - The snackbar type: 'info', 'success', 'warning', or 'error'.
+ * @param {string}      props.type     - The notice severity ('error' announces assertively, anything else politely).
+ * @param {Object[]}    props.actions  - The actions to display in the snackbar.
  * @return {JSX.Element} The component.
  */
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var WizardSnackbar = function WizardSnackbar(_ref) {
   var children = _ref.children,
-    _ref$position = _ref.position,
-    position = _ref$position === void 0 ? 'bottom-left' : _ref$position,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'info' : _ref$type,
+    type = _ref.type,
     _ref$actions = _ref.actions,
     actions = _ref$actions === void 0 ? [] : _ref$actions,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var className = (0, _classnames["default"])('newspack-wizard__snackbar', props.className, "newspack-wizard__snackbar--".concat(position), "newspack-wizard__snackbar--".concat(type));
+  var className = (0, _classnames["default"])('newspack-wizard__snackbar', props.className);
+  var politeness = 'error' === type ? 'assertive' : 'polite';
   var _useDispatch = (0, _data.useDispatch)(_store.WIZARD_STORE_NAMESPACE),
     removeNotice = _useDispatch.removeNotice,
     resetNotices = _useDispatch.resetNotices;
@@ -62,9 +67,9 @@ var WizardSnackbar = function WizardSnackbar(_ref) {
       resetNotices();
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Snackbar, _objectSpread(_objectSpread({
-    className: className
-  }, props), {}, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Snackbar, _objectSpread(_objectSpread({}, props), {}, {
+    className: className,
+    politeness: politeness,
     onRemove: onRemove,
     actions: actions,
     children: children

package/dist/cjs/wizard/components/style.scss

@@ -1,39 +1,14 @@
+@use "~@wordpress/base-styles/mixins" as wp-mixins;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+
 .newspack-wizard {
-	&__snackbar {
-		border-bottom: 2px solid transparent;
-		bottom: 16px;
-		left: 16px;
-		max-width: calc(100vw - 32px);
-		position: fixed;
+	&__snackbar-list {
+		@include wp-mixins.snackbar-container();
+		gap: wp-vars.$grid-unit-10;
 		z-index: 99999;
-		&--success {
-			border-color: var(--newspack-ui-color-success-60);
-		}
-		&--error {
-			border-color: var(--newspack-ui-color-error-60);
-		}
-		&--warning {
-			border-color: var(--newspack-ui-color-warning-40);
-		}
-		@media screen and ( min-width: 783px ) {
-			left: calc(36px + 16px); /* 36px for admin menu bar */
-		}
-		@media screen and ( min-width: 960px ) {
-			left: calc(160px + 16px); /* 160px for admin menu bar */
-		}
-		&.newspack-wizard__snackbar--bottom-right,
-		&.newspack-wizard__snackbar--top-right {
-			left: auto;
-			right: calc(16px);
-		}
-		&.newspack-wizard__snackbar--top-left,
-		&.newspack-wizard__snackbar--top-right {
-			bottom: auto;
-			top: calc(16px + 46px); /* 46px for admin bar */
-			@media screen and ( min-width: 783px ) {
-				top: calc(16px + 32px); /* 32px for admin bar */
-			}
-		}
+	}
+
+	&__snackbar {
 		a,
 		.components-button.is-link {
 			color: var(--newspack-ui-color-neutral-0);

package/dist/cjs/wizard/index.js

@@ -229,17 +229,31 @@ var Wizard = function Wizard(_ref, ref) {
                 className: 'newspack-wizard__header__actions__more'
               },
               children: function children() {
-                return actions.map(function (action, index) {
-                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
-                    className: action.type === 'primary' || action.type === 'secondary' ? 'newspack-wizard__header__actions__more__main' : 'newspack-wizard__header__actions__more__more',
-                    icon: action.icon,
-                    href: action.href,
-                    onClick: action.action,
-                    disabled: action.disabled || false,
-                    isDestructive: action.destructive || false,
-                    children: action.label
-                  }, index);
-                });
+                return (
+                  // Split actions into groups whenever an action opts in via `separator: true`.
+                  // Consecutive MenuGroups render the WordPress-standard divider between them.
+                  actions.reduce(function (groups, action) {
+                    if (action.separator || groups.length === 0) {
+                      groups.push([]);
+                    }
+                    groups[groups.length - 1].push(action);
+                    return groups;
+                  }, []).map(function (group, groupIndex) {
+                    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuGroup, {
+                      children: group.map(function (action, index) {
+                        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
+                          className: action.type === 'primary' || action.type === 'secondary' ? 'newspack-wizard__header__actions__more__main' : 'newspack-wizard__header__actions__more__more',
+                          icon: action.icon,
+                          href: action.href,
+                          onClick: action.action,
+                          disabled: action.disabled || false,
+                          isDestructive: action.destructive || false,
+                          children: action.label
+                        }, index);
+                      })
+                    }, groupIndex);
+                  })
+                );
               }
             })]
           })]
@@ -281,13 +295,16 @@ var Wizard = function Wizard(_ref, ref) {
             })]
           })
         })]
-      }), (notices === null || notices === void 0 ? void 0 : notices.length) > 0 && notices.map(function (notice, index) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardSnackbar["default"], {
-          type: notice.type,
-          id: notice.id,
-          actions: notice.actions,
-          children: notice.message
-        }, notice.id || index);
+      }), (notices === null || notices === void 0 ? void 0 : notices.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "newspack-wizard__snackbar-list",
+        children: notices.map(function (notice, index) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardSnackbar["default"], {
+            id: notice.id,
+            type: notice.type,
+            actions: notice.actions,
+            children: notice.message
+          }, notice.id || index);
+        })
       })]
     }), !isLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Footer, {
       simple: hasSimpleFooter

package/dist/esm/card/core-card.js

@@ -73,19 +73,24 @@ var CoreCard = function CoreCard(_ref) {
   if (noBorder) {
     otherProps.isBorderless = true;
   }
+  // A button header would nest its interactive children (toggle, header action, actions menu, or
+  // drag controls) inside a <button>, which is invalid. Only render the header as a button when a
+  // real click handler is supplied and the header has no interactive children of its own.
+  var hasInteractiveHeaderChildren = actionType === 'toggle' || !!headerAction || (actions === null || actions === void 0 ? void 0 : actions.length) > 0 || isDraggable;
+  var headerIsButton = !!onHeaderClick && !hasInteractiveHeaderChildren;
   return /*#__PURE__*/_jsxs(CardWrapper, _objectSpread(_objectSpread({
     as: as,
     className: classes
   }, otherProps), {}, {
     children: [(header || icon) && /*#__PURE__*/_jsxs(CardHeader, {
-      as: onHeaderClick ? 'button' : undefined,
+      as: headerIsButton ? 'button' : undefined,
       className: classNames('newspack-card--core__header', isDraggable && 'newspack-card--core__header--is-draggable', !hasHeaderBorder && 'newspack-card--core__header--no-border'),
       style: headerStyle,
       size: sizeProps,
       gap: 4,
-      onClick: disabled ? undefined : onHeaderClick,
-      disabled: onHeaderClick && disabled ? true : undefined,
-      "aria-disabled": onHeaderClick && disabled ? true : undefined,
+      onClick: headerIsButton && !disabled ? onHeaderClick : undefined,
+      disabled: headerIsButton && disabled ? true : undefined,
+      "aria-disabled": headerIsButton && disabled ? true : undefined,
       children: [isDraggable && /*#__PURE__*/_jsxs("div", {
         className: "newspack-card--core__header__draggable-controls",
         children: [/*#__PURE__*/_jsx("div", {

package/dist/esm/card/core-card.test.js

@@ -0,0 +1,65 @@
+/**
+ * External dependencies.
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * Internal dependencies.
+ */
+import CoreCard from './core-card';
+import { jsx as _jsx } from "react/jsx-runtime";
+var getHeader = function getHeader(container) {
+  return container.querySelector('.newspack-card--core__header');
+};
+describe('CoreCard', function () {
+  it('renders the header as a <button> when onHeaderClick is supplied and it has no interactive children', function () {
+    var _render = render(/*#__PURE__*/_jsx(CoreCard, {
+        header: "Settings",
+        onHeaderClick: function onHeaderClick() {}
+      })),
+      container = _render.container;
+    expect(getHeader(container).tagName).toBe('BUTTON');
+  });
+  it('renders the header as a non-button when it also has a toggle', function () {
+    var _render2 = render(/*#__PURE__*/_jsx(CoreCard, {
+        header: "Settings",
+        actionType: "toggle",
+        onHeaderClick: function onHeaderClick() {}
+      })),
+      container = _render2.container;
+    expect(getHeader(container).tagName).not.toBe('BUTTON');
+  });
+  it('renders the header as a non-button when it also has a header action', function () {
+    var _render3 = render(/*#__PURE__*/_jsx(CoreCard, {
+        header: "Settings",
+        headerAction: {
+          label: 'Edit',
+          onClick: function onClick() {}
+        },
+        onHeaderClick: function onHeaderClick() {}
+      })),
+      container = _render3.container;
+    expect(getHeader(container).tagName).not.toBe('BUTTON');
+  });
+  it('renders the header as a non-button when it also has an actions menu', function () {
+    var _render4 = render(/*#__PURE__*/_jsx(CoreCard, {
+        header: "Settings",
+        actions: [{
+          label: 'Delete',
+          action: function action() {}
+        }],
+        onHeaderClick: function onHeaderClick() {}
+      })),
+      container = _render4.container;
+    expect(getHeader(container).tagName).not.toBe('BUTTON');
+  });
+  it('renders the header as a non-button when it is also draggable', function () {
+    var _render5 = render(/*#__PURE__*/_jsx(CoreCard, {
+        header: "Settings",
+        isDraggable: true,
+        onHeaderClick: function onHeaderClick() {}
+      })),
+      container = _render5.container;
+    expect(getHeader(container).tagName).not.toBe('BUTTON');
+  });
+});

package/dist/esm/card-settings-group/index.js

@@ -31,8 +31,7 @@ var CardSettingsGroup = function CardSettingsGroup(_ref) {
     isActive = _ref$isActive === void 0 ? false : _ref$isActive,
     _ref$onEnable = _ref.onEnable,
     onEnable = _ref$onEnable === void 0 ? function () {} : _ref$onEnable,
-    _ref$onHeaderClick = _ref.onHeaderClick,
-    onHeaderClick = _ref$onHeaderClick === void 0 ? function () {} : _ref$onHeaderClick;
+    onHeaderClick = _ref.onHeaderClick;
   return /*#__PURE__*/_jsx(Card, {
     className: classNames('newspack-card--core--settings-group', className),
     actionType: actionType,

package/dist/esm/divider/style.scss

@@ -42,7 +42,7 @@
 	}
 
 	&--variant-secondary {
-		background-color: wp-colors.$gray-900;
+		background-color: wp-colors.$gray-200;
 	}
 
 	&--variant-tertiary {

package/dist/esm/web-preview/style.scss

@@ -103,10 +103,9 @@
 		}
 
 		&-right {
-			display: grid;
+			display: flex;
 			gap: 8px;
-			grid-template-columns: repeat(2, 1fr);
-			justify-self: end;
+			justify-content: flex-end;
 			margin-left: auto;
 		}
 	}

package/dist/esm/wizard/components/WizardSnackbar.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "position", "type", "actions"];
+var _excluded = ["children", "type", "actions"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -27,25 +27,30 @@ import classnames from 'classnames';
 /**
  * WizardSnackbar component.
  *
+ * Wraps core's Snackbar with the wizard-store `onRemove` glue. Positioning and
+ * styling are neutral (bottom-centered via the snackbar list container). The
+ * notice `type` no longer drives any visual styling, but it still maps to the
+ * screen-reader announcement politeness: only `error` announces assertively,
+ * every other severity announces politely.
+ *
+ * Remaining props are spread onto core's Snackbar. See:
+ * https://wordpress.github.io/gutenberg/?path=/docs/components-snackbar--docs
+ *
  * @param {Object}      props          - The component props.
- * @param {Object[]}    props.actions  - The actions to display in the snackbar.
  * @param {JSX.Element} props.children - The component children.
- * @param {Object}      props.props    - The component props. See: https://wordpress.github.io/gutenberg/?path=/docs/components-snackbar--docs
- * @param {string}      props.position - The snackbar position.
- * @param {string}      props.type     - The snackbar type: 'info', 'success', 'warning', or 'error'.
+ * @param {string}      props.type     - The notice severity ('error' announces assertively, anything else politely).
+ * @param {Object[]}    props.actions  - The actions to display in the snackbar.
  * @return {JSX.Element} The component.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 var WizardSnackbar = function WizardSnackbar(_ref) {
   var children = _ref.children,
-    _ref$position = _ref.position,
-    position = _ref$position === void 0 ? 'bottom-left' : _ref$position,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'info' : _ref$type,
+    type = _ref.type,
     _ref$actions = _ref.actions,
     actions = _ref$actions === void 0 ? [] : _ref$actions,
     props = _objectWithoutProperties(_ref, _excluded);
-  var className = classnames('newspack-wizard__snackbar', props.className, "newspack-wizard__snackbar--".concat(position), "newspack-wizard__snackbar--".concat(type));
+  var className = classnames('newspack-wizard__snackbar', props.className);
+  var politeness = 'error' === type ? 'assertive' : 'polite';
   var _useDispatch = useDispatch(WIZARD_STORE_NAMESPACE),
     removeNotice = _useDispatch.removeNotice,
     resetNotices = _useDispatch.resetNotices;
@@ -59,9 +64,9 @@ var WizardSnackbar = function WizardSnackbar(_ref) {
       resetNotices();
     }
   };
-  return /*#__PURE__*/_jsx(BaseComponent, _objectSpread(_objectSpread({
-    className: className
-  }, props), {}, {
+  return /*#__PURE__*/_jsx(BaseComponent, _objectSpread(_objectSpread({}, props), {}, {
+    className: className,
+    politeness: politeness,
     onRemove: onRemove,
     actions: actions,
     children: children

package/dist/esm/wizard/components/style.scss

@@ -1,39 +1,14 @@
+@use "~@wordpress/base-styles/mixins" as wp-mixins;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+
 .newspack-wizard {
-	&__snackbar {
-		border-bottom: 2px solid transparent;
-		bottom: 16px;
-		left: 16px;
-		max-width: calc(100vw - 32px);
-		position: fixed;
+	&__snackbar-list {
+		@include wp-mixins.snackbar-container();
+		gap: wp-vars.$grid-unit-10;
 		z-index: 99999;
-		&--success {
-			border-color: var(--newspack-ui-color-success-60);
-		}
-		&--error {
-			border-color: var(--newspack-ui-color-error-60);
-		}
-		&--warning {
-			border-color: var(--newspack-ui-color-warning-40);
-		}
-		@media screen and ( min-width: 783px ) {
-			left: calc(36px + 16px); /* 36px for admin menu bar */
-		}
-		@media screen and ( min-width: 960px ) {
-			left: calc(160px + 16px); /* 160px for admin menu bar */
-		}
-		&.newspack-wizard__snackbar--bottom-right,
-		&.newspack-wizard__snackbar--top-right {
-			left: auto;
-			right: calc(16px);
-		}
-		&.newspack-wizard__snackbar--top-left,
-		&.newspack-wizard__snackbar--top-right {
-			bottom: auto;
-			top: calc(16px + 46px); /* 46px for admin bar */
-			@media screen and ( min-width: 783px ) {
-				top: calc(16px + 32px); /* 32px for admin bar */
-			}
-		}
+	}
+
+	&__snackbar {
 		a,
 		.components-button.is-link {
 			color: var(--newspack-ui-color-neutral-0);

package/dist/esm/wizard/index.js

@@ -10,7 +10,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies.
  */
-import { DropdownMenu, MenuItem } from '@wordpress/components';
+import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect, useState, forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -226,17 +226,31 @@ var Wizard = function Wizard(_ref, ref) {
                 className: 'newspack-wizard__header__actions__more'
               },
               children: function children() {
-                return actions.map(function (action, index) {
-                  return /*#__PURE__*/_jsx(MenuItem, {
-                    className: action.type === 'primary' || action.type === 'secondary' ? 'newspack-wizard__header__actions__more__main' : 'newspack-wizard__header__actions__more__more',
-                    icon: action.icon,
-                    href: action.href,
-                    onClick: action.action,
-                    disabled: action.disabled || false,
-                    isDestructive: action.destructive || false,
-                    children: action.label
-                  }, index);
-                });
+                return (
+                  // Split actions into groups whenever an action opts in via `separator: true`.
+                  // Consecutive MenuGroups render the WordPress-standard divider between them.
+                  actions.reduce(function (groups, action) {
+                    if (action.separator || groups.length === 0) {
+                      groups.push([]);
+                    }
+                    groups[groups.length - 1].push(action);
+                    return groups;
+                  }, []).map(function (group, groupIndex) {
+                    return /*#__PURE__*/_jsx(MenuGroup, {
+                      children: group.map(function (action, index) {
+                        return /*#__PURE__*/_jsx(MenuItem, {
+                          className: action.type === 'primary' || action.type === 'secondary' ? 'newspack-wizard__header__actions__more__main' : 'newspack-wizard__header__actions__more__more',
+                          icon: action.icon,
+                          href: action.href,
+                          onClick: action.action,
+                          disabled: action.disabled || false,
+                          isDestructive: action.destructive || false,
+                          children: action.label
+                        }, index);
+                      })
+                    }, groupIndex);
+                  })
+                );
               }
             })]
           })]
@@ -278,13 +292,16 @@ var Wizard = function Wizard(_ref, ref) {
             })]
           })
         })]
-      }), (notices === null || notices === void 0 ? void 0 : notices.length) > 0 && notices.map(function (notice, index) {
-        return /*#__PURE__*/_jsx(WizardSnackbar, {
-          type: notice.type,
-          id: notice.id,
-          actions: notice.actions,
-          children: notice.message
-        }, notice.id || index);
+      }), (notices === null || notices === void 0 ? void 0 : notices.length) > 0 && /*#__PURE__*/_jsx("div", {
+        className: "newspack-wizard__snackbar-list",
+        children: notices.map(function (notice, index) {
+          return /*#__PURE__*/_jsx(WizardSnackbar, {
+            id: notice.id,
+            type: notice.type,
+            actions: notice.actions,
+            children: notice.message
+          }, notice.id || index);
+        })
       })]
     }), !isLoading && /*#__PURE__*/_jsx(Footer, {
       simple: hasSimpleFooter

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "newspack-components",
-	"version": "4.4.0",
+	"version": "4.5.0-alpha.1",
 	"description": "Newspack design system components",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",

package/shared/js/cta-attribution.js

@@ -0,0 +1,77 @@
+/**
+ * CTA attribution hand-off (NPPD-1887).
+ *
+ * When a reader clicks a conversion-intent CTA inside a gate or prompt and is sent
+ * to a landing page, the surface that caused the conversion is left behind. This
+ * module persists the surface's identity so the landing page's checkout/donate form
+ * can replay it as a hidden field, letting the existing server chain
+ * (`INPUT_GET` -> cart item data -> `_gate_post_id` / `_newspack_popup_id` order meta)
+ * fire exactly as it does for a form rendered inside the gate itself.
+ *
+ * ── Storage contract ────────────────────────────────────────────────────────────
+ * This contract is DUPLICATED, by necessity, in newspack-blocks
+ * (`src/shared/js/cta-attribution.js`), which owns the checkout and donate forms and
+ * therefore owns the replay. Both plugins ship independently; there is no shared JS
+ * package between them. Change one, change the other.
+ *
+ *   sessionStorage[ 'newspack_cta_attribution' ] = JSON.stringify( {
+ *     v:    1,                   // SCHEMA — reject records written by a drifted shape
+ *     type: 'gate' | 'prompt',   // which surface
+ *     id:   '123',               // gate_post_id or newspack_popup_id
+ *     ts:   1751932800000,       // Date.now() at click
+ *   } )
+ *
+ * `sessionStorage`, not a cookie, on purpose:
+ *   - survives multi-hop navigation (gate -> /subscribe -> /plans -> convert)
+ *   - is copied into a new tab opened from `target="_blank"`
+ *   - dies with the tab, which is a naturally conservative attribution window
+ *   - cannot vary a page-cache key
+ *
+ * Last touch wins: a second CTA click overwrites the first.
+ */
+
+/** Storage key. Shared with newspack-blocks. */
+export const STORAGE_KEY = 'newspack_cta_attribution';
+
+/**
+ * Storage-record schema version. The contract is duplicated across newspack-plugin and
+ * newspack-blocks (no shared JS package), so a mismatch is a real failure mode if the
+ * two ever drift — one side bumps TTL or the record shape, the other silently honors a
+ * stale record. Stamping the version and checking it on read makes drift fail safe: a
+ * record from a different version is ignored rather than trusted. Bump on any change to
+ * the record fields, the TTL semantics, or the storage key. (dkoo review, #575.)
+ */
+export const SCHEMA = 1;
+
+/**
+ * Attribution lifetime, in milliseconds.
+ *
+ * Session-scoped AND time-bounded (product decision, NPPD-1887): a reader who clicks
+ * the CTA, wanders off, and converts two hours later in the same tab gets no credit.
+ * Kept in sync with the same constant in newspack-blocks.
+ */
+export const TTL_MS = 30 * 60 * 1000;
+
+/**
+ * Persist the surface that owns this click.
+ *
+ * Never throws: Safari private mode and storage-disabled browsers make
+ * `sessionStorage.setItem` raise. Attribution is best-effort — losing it must never
+ * break the navigation the reader actually asked for.
+ *
+ * @param {string}        type Surface type: 'gate' or 'prompt'.
+ * @param {string|number} id   The gate_post_id or newspack_popup_id.
+ *
+ * @return {boolean} Whether the value was stored.
+ */
+export function persistCtaAttribution( type, id ) {
+	if ( ! id || ( 'gate' !== type && 'prompt' !== type ) ) {
+		return false;
+	}
+	try {
+		window.sessionStorage.setItem( STORAGE_KEY, JSON.stringify( { v: SCHEMA, type, id: String( id ), ts: Date.now() } ) );
+		return true;
+	} catch ( e ) {
+		return false;
+	}
+}

package/src/card/core-card.js

@@ -80,11 +80,16 @@ const CoreCard = ( {
 	if ( noBorder ) {
 		otherProps.isBorderless = true;
 	}
+	// A button header would nest its interactive children (toggle, header action, actions menu, or
+	// drag controls) inside a <button>, which is invalid. Only render the header as a button when a
+	// real click handler is supplied and the header has no interactive children of its own.
+	const hasInteractiveHeaderChildren = actionType === 'toggle' || !! headerAction || actions?.length > 0 || isDraggable;
+	const headerIsButton = !! onHeaderClick && ! hasInteractiveHeaderChildren;
 	return (
 		<CardWrapper as={ as } className={ classes } { ...otherProps }>
 			{ ( header || icon ) && (
 				<CardHeader
-					as={ onHeaderClick ? 'button' : undefined }
+					as={ headerIsButton ? 'button' : undefined }
 					className={ classNames(
 						'newspack-card--core__header',
 						isDraggable && 'newspack-card--core__header--is-draggable',
@@ -93,9 +98,9 @@ const CoreCard = ( {
 					style={ headerStyle }
 					size={ sizeProps }
 					gap={ 4 }
-					onClick={ disabled ? undefined : onHeaderClick }
-					disabled={ onHeaderClick && disabled ? true : undefined }
-					aria-disabled={ onHeaderClick && disabled ? true : undefined }
+					onClick={ headerIsButton && ! disabled ? onHeaderClick : undefined }
+					disabled={ headerIsButton && disabled ? true : undefined }
+					aria-disabled={ headerIsButton && disabled ? true : undefined }
 				>
 					{ isDraggable && (
 						<div className="newspack-card--core__header__draggable-controls">

package/src/card/core-card.test.js

@@ -0,0 +1,42 @@
+/**
+ * External dependencies.
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * Internal dependencies.
+ */
+import CoreCard from './core-card';
+
+const getHeader = container => container.querySelector( '.newspack-card--core__header' );
+
+describe( 'CoreCard', () => {
+	it( 'renders the header as a <button> when onHeaderClick is supplied and it has no interactive children', () => {
+		const { container } = render( <CoreCard header="Settings" onHeaderClick={ () => {} } /> );
+		expect( getHeader( container ).tagName ).toBe( 'BUTTON' );
+	} );
+
+	it( 'renders the header as a non-button when it also has a toggle', () => {
+		const { container } = render( <CoreCard header="Settings" actionType="toggle" onHeaderClick={ () => {} } /> );
+		expect( getHeader( container ).tagName ).not.toBe( 'BUTTON' );
+	} );
+
+	it( 'renders the header as a non-button when it also has a header action', () => {
+		const { container } = render(
+			<CoreCard header="Settings" headerAction={ { label: 'Edit', onClick: () => {} } } onHeaderClick={ () => {} } />
+		);
+		expect( getHeader( container ).tagName ).not.toBe( 'BUTTON' );
+	} );
+
+	it( 'renders the header as a non-button when it also has an actions menu', () => {
+		const { container } = render(
+			<CoreCard header="Settings" actions={ [ { label: 'Delete', action: () => {} } ] } onHeaderClick={ () => {} } />
+		);
+		expect( getHeader( container ).tagName ).not.toBe( 'BUTTON' );
+	} );
+
+	it( 'renders the header as a non-button when it is also draggable', () => {
+		const { container } = render( <CoreCard header="Settings" isDraggable onHeaderClick={ () => {} } /> );
+		expect( getHeader( container ).tagName ).not.toBe( 'BUTTON' );
+	} );
+} );

package/src/card-settings-group/index.tsx

@@ -24,7 +24,7 @@ const CardSettingsGroup = ( {
 	description = '',
 	isActive = false,
 	onEnable = () => {},
-	onHeaderClick = () => {},
+	onHeaderClick,
 }: {
 	actionType?: 'chevron' | 'toggle' | 'button' | 'link' | 'none';
 	children?: React.ReactNode;

package/src/card-sortable-list/index.tsx

@@ -33,7 +33,7 @@ type DraggableItemAction = {
 type DraggableItem = {
 	id: string | number;
 	title: string;
-	description?: string;
+	description?: React.ReactNode;
 	badgeLevel: 'default' | 'success' | 'info' | 'warning' | 'error';
 	badgeText: string;
 	toggleChecked?: boolean;

package/src/divider/README.md

@@ -10,7 +10,7 @@ Horizontal rule component with alignment, variant, and margin options.
 | `className` | `string` | — | Additional CSS class. |
 | `marginBottom` | `number` \| `string` | `64` | Bottom margin (e.g. `64` or `"2rem"`). Capped at 32px on viewports < 783px. |
 | `marginTop` | `number` \| `string` | `64` | Top margin (e.g. `64` or `"2rem"`). Capped at 32px on viewports < 783px. |
-| `variant` | `'default'` \| `'primary'` \| `'secondary'` \| `'tertiary'` | `'default'` | Line color: `default` uses `$gray-300`; `primary` uses the admin theme color (`--wp-admin-theme-color`); `secondary` uses `$gray-900`; `tertiary` uses `$gray-100`. |
+| `variant` | `'default'` \| `'primary'` \| `'secondary'` \| `'tertiary'` | `'default'` | Line color: `default` uses `$gray-300`; `primary` uses the admin theme color (`--wp-admin-theme-color`); `secondary` uses `$gray-200`; `tertiary` uses `$gray-100`. |
 
 ## Usage
 

package/src/divider/style.scss

@@ -42,7 +42,7 @@
 	}
 
 	&--variant-secondary {
-		background-color: wp-colors.$gray-900;
+		background-color: wp-colors.$gray-200;
 	}
 
 	&--variant-tertiary {

package/src/web-preview/style.scss

@@ -103,10 +103,9 @@
 		}
 
 		&-right {
-			display: grid;
+			display: flex;
 			gap: 8px;
-			grid-template-columns: repeat(2, 1fr);
-			justify-self: end;
+			justify-content: flex-end;
 			margin-left: auto;
 		}
 	}

package/src/wizard/components/WizardSnackbar.js

@@ -22,21 +22,24 @@ import classnames from 'classnames';
 /**
  * WizardSnackbar component.
  *
+ * Wraps core's Snackbar with the wizard-store `onRemove` glue. Positioning and
+ * styling are neutral (bottom-centered via the snackbar list container). The
+ * notice `type` no longer drives any visual styling, but it still maps to the
+ * screen-reader announcement politeness: only `error` announces assertively,
+ * every other severity announces politely.
+ *
+ * Remaining props are spread onto core's Snackbar. See:
+ * https://wordpress.github.io/gutenberg/?path=/docs/components-snackbar--docs
+ *
  * @param {Object}      props          - The component props.
- * @param {Object[]}    props.actions  - The actions to display in the snackbar.
  * @param {JSX.Element} props.children - The component children.
- * @param {Object}      props.props    - The component props. See: https://wordpress.github.io/gutenberg/?path=/docs/components-snackbar--docs
- * @param {string}      props.position - The snackbar position.
- * @param {string}      props.type     - The snackbar type: 'info', 'success', 'warning', or 'error'.
+ * @param {string}      props.type     - The notice severity ('error' announces assertively, anything else politely).
+ * @param {Object[]}    props.actions  - The actions to display in the snackbar.
  * @return {JSX.Element} The component.
  */
-const WizardSnackbar = ( { children, position = 'bottom-left', type = 'info', actions = [], ...props } ) => {
-	const className = classnames(
-		'newspack-wizard__snackbar',
-		props.className,
-		`newspack-wizard__snackbar--${ position }`,
-		`newspack-wizard__snackbar--${ type }`
-	);
+const WizardSnackbar = ( { children, type, actions = [], ...props } ) => {
+	const className = classnames( 'newspack-wizard__snackbar', props.className );
+	const politeness = 'error' === type ? 'assertive' : 'polite';
 	const { removeNotice, resetNotices } = useDispatch( WIZARD_STORE_NAMESPACE );
 	const onRemove = () => {
 		if ( props.onRemove ) {
@@ -49,7 +52,7 @@ const WizardSnackbar = ( { children, position = 'bottom-left', type = 'info', ac
 		}
 	};
 	return (
-		<BaseComponent className={ className } { ...props } onRemove={ onRemove } actions={ actions }>
+		<BaseComponent { ...props } className={ className } politeness={ politeness } onRemove={ onRemove } actions={ actions }>
 			{ children }
 		</BaseComponent>
 	);

package/src/wizard/components/style.scss

@@ -1,39 +1,14 @@
+@use "~@wordpress/base-styles/mixins" as wp-mixins;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+
 .newspack-wizard {
-	&__snackbar {
-		border-bottom: 2px solid transparent;
-		bottom: 16px;
-		left: 16px;
-		max-width: calc(100vw - 32px);
-		position: fixed;
+	&__snackbar-list {
+		@include wp-mixins.snackbar-container();
+		gap: wp-vars.$grid-unit-10;
 		z-index: 99999;
-		&--success {
-			border-color: var(--newspack-ui-color-success-60);
-		}
-		&--error {
-			border-color: var(--newspack-ui-color-error-60);
-		}
-		&--warning {
-			border-color: var(--newspack-ui-color-warning-40);
-		}
-		@media screen and ( min-width: 783px ) {
-			left: calc(36px + 16px); /* 36px for admin menu bar */
-		}
-		@media screen and ( min-width: 960px ) {
-			left: calc(160px + 16px); /* 160px for admin menu bar */
-		}
-		&.newspack-wizard__snackbar--bottom-right,
-		&.newspack-wizard__snackbar--top-right {
-			left: auto;
-			right: calc(16px);
-		}
-		&.newspack-wizard__snackbar--top-left,
-		&.newspack-wizard__snackbar--top-right {
-			bottom: auto;
-			top: calc(16px + 46px); /* 46px for admin bar */
-			@media screen and ( min-width: 783px ) {
-				top: calc(16px + 32px); /* 32px for admin bar */
-			}
-		}
+	}
+
+	&__snackbar {
 		a,
 		.components-button.is-link {
 			color: var(--newspack-ui-color-neutral-0);

package/src/wizard/index.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies.
  */
-import { DropdownMenu, MenuItem } from '@wordpress/components';
+import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect, useState, forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -190,23 +190,37 @@ const Wizard = (
 									popoverProps={ { className: 'newspack-wizard__header__actions__more' } }
 								>
 									{ () =>
-										actions.map( ( action, index ) => (
-											<MenuItem
-												key={ index }
-												className={
-													action.type === 'primary' || action.type === 'secondary'
-														? 'newspack-wizard__header__actions__more__main'
-														: 'newspack-wizard__header__actions__more__more'
+										// Split actions into groups whenever an action opts in via `separator: true`.
+										// Consecutive MenuGroups render the WordPress-standard divider between them.
+										actions
+											.reduce( ( groups, action ) => {
+												if ( action.separator || groups.length === 0 ) {
+													groups.push( [] );
 												}
-												icon={ action.icon }
-												href={ action.href }
-												onClick={ action.action }
-												disabled={ action.disabled || false }
-												isDestructive={ action.destructive || false }
-											>
-												{ action.label }
-											</MenuItem>
-										) )
+												groups[ groups.length - 1 ].push( action );
+												return groups;
+											}, [] )
+											.map( ( group, groupIndex ) => (
+												<MenuGroup key={ groupIndex }>
+													{ group.map( ( action, index ) => (
+														<MenuItem
+															key={ index }
+															className={
+																action.type === 'primary' || action.type === 'secondary'
+																	? 'newspack-wizard__header__actions__more__main'
+																	: 'newspack-wizard__header__actions__more__more'
+															}
+															icon={ action.icon }
+															href={ action.href }
+															onClick={ action.action }
+															disabled={ action.disabled || false }
+															isDestructive={ action.destructive || false }
+														>
+															{ action.label }
+														</MenuItem>
+													) ) }
+												</MenuGroup>
+											) )
 									}
 								</DropdownMenu>
 							</div>
@@ -263,12 +277,15 @@ const Wizard = (
 						</Switch>
 					</div>
 				</HashRouter>
-				{ notices?.length > 0 &&
-					notices.map( ( notice, index ) => (
-						<WizardSnackbar key={ notice.id || index } type={ notice.type } id={ notice.id } actions={ notice.actions }>
-							{ notice.message }
-						</WizardSnackbar>
-					) ) }
+				{ notices?.length > 0 && (
+					<div className="newspack-wizard__snackbar-list">
+						{ notices.map( ( notice, index ) => (
+							<WizardSnackbar key={ notice.id || index } id={ notice.id } type={ notice.type } actions={ notice.actions }>
+								{ notice.message }
+							</WizardSnackbar>
+						) ) }
+					</div>
+				) }
 			</div>
 			{ ! isLoading && <Footer simple={ hasSimpleFooter } /> }
 		</div>