newspack-components 4.8.0-alpha.1 → 4.8.1-alpha.1

package/CHANGELOG.md

@@ -1,4 +1,13 @@
-# newspack-components [4.8.0-alpha.1](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.7.0...newspack-components@4.8.0-alpha.1) (2026-09-03)
+## newspack-components [4.8.1-alpha.1](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.8.0...newspack-components@4.8.1-alpha.1) (2026-09-17)
+
+
+### Bug Fixes
+
+* **components:** confirm before the footer's destructive actions ([#965](https://github.com/Automattic/newspack-workspace/issues/965)) ([e4e6676](https://github.com/Automattic/newspack-workspace/commit/e4e66763aa5ce74265689aa6fee4941f2f7348be))
+* **empty-state:** adopt the shared component on three screens ([#1035](https://github.com/Automattic/newspack-workspace/issues/1035)) ([ddfc071](https://github.com/Automattic/newspack-workspace/commit/ddfc071f905e37b20addce7a6416f22665c9042d))
+* **subscribers:** use core Notice for load-failure states ([#1029](https://github.com/Automattic/newspack-workspace/issues/1029)) ([f13281b](https://github.com/Automattic/newspack-workspace/commit/f13281b9d5a176d8beb9667aba6f8d599c6ad331))
+
+# newspack-components [4.8.0](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.7.0...newspack-components@4.8.0) (2026-09-14)
 
 
 ### Bug Fixes

package/DEVELOPMENT.md

@@ -100,7 +100,7 @@ When building a screen, use the **spacing scale** (8px unit: 16, 24, 32, 48, 64)
 
 - **`ActionCard`** – Use when one concept (e.g. a feature or setting) can be toggled on/off and may have extra content below. Internal padding (24px default; 16px/8px for isMedium/isSmall) and 24px between regions keep hierarchy clear; expandable content uses 24px top padding and 24px between siblings.
 - **`CollapsibleGroup`** / **`CollapsibleGroup.Item`** – A stack of independently collapsible items, separated by dividers and flush with the surrounding column. Not a W3C accordion: the items do not coordinate.
-- **`Notice`** – Use for outcome feedback (success/error/warning) or short contextual messages. Vertical margin is 32px so notices don’t collide with cards; keep one primary message per area when possible.
+- **`Notice`** – Being retired in favour of core’s `Notice` from `@wordpress/components`, which announces itself to assistive technology. Reach for core’s in new work; ours stays for the screens still on it. Where ours is used, vertical margin is 32px so notices don’t collide with cards, and one primary message per area reads best.
 - **`ProgressBar`** – Progress indicator.
 - **`StepsList`** / **`StepsListItem`** – Step-by-step list components.
 - **`StyleCard`** – Style preview card.
@@ -131,6 +131,7 @@ When building a screen, use the **spacing scale** (8px unit: 16, 24, 32, 48, 64)
 
 ### Utility Components
 
+- **`DebugBadge`** - Floating indicator that Newspack debug mode is on. Takes no props and renders nothing unless the site defines `WP_NEWSPACK_DEBUG`
 - **`GlobalNotices`** - Global notice system component
 - **`InfoButton`** - Reveals supplementary context from a `description` prop. Anything a reader needs in order to use a control belongs in visible help text instead
 - **`Modal`** - Modal dialog component
@@ -176,7 +177,7 @@ import {
 	ActionCard,
 	Button,
 	Card,
-	Notice,
+	SectionHeader,
 	TextControl,
 } from '../../../../../packages/components/src';
 ```
@@ -187,21 +188,21 @@ import {
 
 ```jsx
 // ✅ CORRECT - Within newspack-plugin monorepo
-import { Button, Card, Notice } from '../../../../../packages/components/src';
+import { Button, Card, SectionHeader } from '../../../../../packages/components/src';
 ```
 
 **As an npm package:** If `newspack-components` is installed as a dependency in another plugin, import from the package name:
 
 ```jsx
 // ✅ CORRECT - When installed as npm package
-import { Button, Card, Notice } from 'newspack-components';
+import { Button, Card, SectionHeader } from 'newspack-components';
 ```
 
 **Import individual components** – Import only what you need; do not import the whole namespace. List named imports **alphabetically** (e.g. from `@wordpress/components` or `newspack-components`):
 
 ```jsx
 // ✅ CORRECT – alphabetical
-import { Button, Card, Notice } from '../../../../../packages/components/src';
+import { Button, Card, SectionHeader } from '../../../../../packages/components/src';
 
 // ❌ WRONG – Don't import all
 import * as Components from '../../../../../packages/components/src';
@@ -253,7 +254,7 @@ This section shows how to use components **by context** (backend, blocks, fronte
 /**
  * WordPress dependencies
  */
-import { CheckboxControl, ExternalLink, RangeControl } from '@wordpress/components';
+import { CheckboxControl, ExternalLink, Notice, RangeControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -262,9 +263,8 @@ import {
 	ActionCard,
 	Button,
 	Card,
-	Grid,
-	Notice,
 	Divider,
+	Grid,
 	SectionHeader,
 	TextControl,
 	Waiting,
@@ -273,14 +273,13 @@ import {
 
 **Example – Audience Setup Wizard (real reference):**
 ```jsx
-import { CheckboxControl, ExternalLink, RangeControl } from '@wordpress/components';
+import { CheckboxControl, ExternalLink, Notice, RangeControl } from '@wordpress/components';
 import {
 	ActionCard,
 	Button,
 	Card,
-	Grid,
-	Notice,
 	Divider,
+	Grid,
 	PluginInstaller,
 	SectionHeader,
 	TextControl,
@@ -291,7 +290,9 @@ import {
 export default withWizardScreen( ( { config, updateConfig } ) => {
 	return (
 		<>
-			<Notice noticeText={ __( 'Audience Management is enabled.', 'newspack-plugin' ) } isSuccess />
+			<Notice status="success" isDismissible={ false }>
+				{ __( 'Audience Management is enabled.', 'newspack-plugin' ) }
+			</Notice>
 			<Card noBorder>
 				<ActionCard
 					title={ __( 'Present newsletter signup after checkout', 'newspack-plugin' ) }
@@ -374,7 +375,7 @@ import { Fragment } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { GlobalNotices, Notice, Wizard } from '../../../../../packages/components/src';
+import { GlobalNotices, Wizard } from '../../../../../packages/components/src';
 import sections from './sections';
 
 function Dashboard() {
@@ -541,7 +542,7 @@ When Newspack components don't provide what you need, use these WordPress compon
 ### Feedback and overlays
 
 - **`Spinner`** – Loading spinner
-- **`Notice`** – Inline notice (success/error/warning); prefer Newspack `Notice` in wizards when it fits
+- **`Notice`** – Inline notice (success/error/warning); prefer this over the Newspack `Notice`, which is being retired
 - **`Placeholder`** – Empty state in blocks
 - **`Modal`** – Modal dialog
 - **`Popover`** – Popover (e.g. webhooks endpoint actions, corrections modal)
@@ -622,7 +623,7 @@ Spacing is based on an **8px unit**. Use these values so new styles match existi
 | **8px** | Tight gaps, badge padding, small padding (e.g. ActionCard is-small) | Inline or dense UI |
 | **16px** | Gaps between related controls, buttons card gap, margins inside ActionCard region-children for Card/Grid/TextControl | Related items, form rows |
 | **24px** | Default ActionCard region padding, toggle/region gaps, expandable content padding and sibling spacing | Default internal padding and gaps within a card |
-| **32px** | Card vertical margin, Grid default gap and margin, SectionHeader first-child top, Notice margin, Divider margin | Section rhythm, between blocks |
+| **32px** | Card vertical margin, Grid default gap and margin, SectionHeader first-child top, Newspack Notice margin, Divider margin | Section rhythm, between blocks |
 | **48px** | SectionHeader container margin-top, Card horizontal padding (small screens) | Section separation |
 | **64px** | SectionHeader top margin, Divider margins (large breakpoint), buttons card margin, Card horizontal padding (large screens) | Major section separation |
 
@@ -693,7 +694,7 @@ Components rely on WordPress design system states where applicable; a few Newspa
 - **ActionCard (clickable)** – Hover: `box-shadow: 0 4px 8px rgba(black, 0.08)`; transition 125ms ease-in-out. Use for cards that navigate or open.
 - **Button** – Primary, secondary, disabled, and link variants follow `@wordpress/components` Button; focus and hover come from WordPress base styles.
 - **Toggle (inside ActionCard)** – Checked/unchecked and focus states from WordPress ToggleControl; label is visually hidden but available for accessibility.
-- **Notice** – Success (green), error (red), warning (yellow), info (gray) variants; use for feedback only and one primary message per area when possible.
+- **Notice** – Core's `Notice` carries the status in a tinted, bordered box (info, success, warning, error) and announces itself. The Newspack one, still in place on the screens that have not moved, tints the background and adds an icon. Either way, use notices for feedback only, and one primary message per area when possible.
 
 When adding new interactive components, preserve focus visibility and use the same state patterns (hover shadow, transition) so the UI feels consistent.
 
@@ -724,7 +725,7 @@ When adding new interactive components, preserve focus visibility and use the sa
 - **[@wordpress/components](https://www.npmjs.com/package/@wordpress/components)** – WordPress component library (fallback when Newspack components don’t exist)
 - **[@wordpress/base-styles](https://www.npmjs.com/package/@wordpress/base-styles)** – WordPress Design System styles and colors
 
-**Design resources:** For layout, components, and spacing, refer to the [WordPress Figma Library](https://www.figma.com/community/file/1149596986784498103/wordpress-design-library) and the [Block Editor Handbook](https://developer.wordpress.org/block-editor/reference-guides/components/). The **Components Demo** (`/wp-admin/admin.php?page=newspack-components-demo`) is the live reference for how Newspack components look and behave; use it to confirm spacing and hierarchy when building new screens.
+**Design resources:** For layout, components, and spacing, refer to the [WordPress Figma Library](https://www.figma.com/community/file/1149596986784498103/wordpress-design-library) and the [Block Editor Handbook](https://developer.wordpress.org/block-editor/reference-guides/components/). The **Components Demo** (`/wp-admin/admin.php?page=newspack-components-demo`) is the live reference for how Newspack components look and behave; use it to confirm spacing and hierarchy when building new screens. It no longer catalogues `Notice`; the Action Card examples are the place to see one rendered.
 
 ## Component Patterns
 

package/dist/cjs/action-card/index.js

@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _components = require("@wordpress/components");
 var _element = require("@wordpress/element");
+var _htmlEntities = require("@wordpress/html-entities");
 var _i18n = require("@wordpress/i18n");
 var _icons = require("@wordpress/icons");
 var _ui = require("@wordpress/ui");
@@ -26,8 +27,80 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Internal dependencies
  */ /**
  * External dependencies
- */ /**
+ */
+var NOTIFICATION_LEVELS = ['error', 'info', 'success', 'warning'];
+
+/**
+ * Collect a notification's text, including text nested inside React elements.
+ *
+ * Segments join with a space so that adjacent elements do not weld together: by the
+ * time speak() sees this string the markup that separated them is already gone.
+ *
+ * @param {*} value Notification content.
+ * @return {string} The collected text.
+ */
+var _getNotificationText = function getNotificationText(value) {
+  var _value$props;
+  if (typeof value === 'string') {
+    return value;
+  }
+  if (typeof value === 'number') {
+    return String(value);
+  }
+  if (value instanceof Error) {
+    return value.message;
+  }
+  if (Array.isArray(value)) {
+    return value.map(_getNotificationText).join(' ');
+  }
+  return (value === null || value === void 0 || (_value$props = value.props) === null || _value$props === void 0 ? void 0 : _value$props.children) === undefined ? '' : _getNotificationText(value.props.children);
+};
+
+/**
+ * Derive a plain-text announcement from a notification.
+ *
+ * Notice defaults spokenMessage to its children and runs renderToString over them
+ * during render, which corrupts the hook dispatcher when those children are
+ * components. A notification can be any element, so the announcement is always
+ * built from its text instead of letting that default apply. Tags in an HTML
+ * notification stay in, since speak() strips them itself. Entities are decoded so
+ * the announcement matches the text on screen, which getNotificationContent decodes
+ * for the same reason.
+ *
+ * @param {*} notification Notification content.
+ * @return {string} Message to announce.
+ */
+var getSpokenNotification = function getSpokenNotification(notification) {
+  return (0, _htmlEntities.decodeEntities)(_getNotificationText(notification)).replace(/\s+/g, ' ').trim();
+};
+
+/**
+ * Decode a notification's own text for display.
+ *
+ * React does not decode entities in text children, and notification text is often
+ * server-sourced, so a message carrying `&#8217;` would otherwise show the entity
+ * and announce the character. The HTML branch is left alone: there the browser's
+ * parser decodes as it renders.
+ *
+ * @param {*} value Notification content.
+ * @return {*} The content, with its own strings decoded.
+ */
+var _getNotificationContent = function getNotificationContent(value) {
+  if (value instanceof Error) {
+    return (0, _htmlEntities.decodeEntities)(value.message);
+  }
+  if (typeof value === 'string') {
+    return (0, _htmlEntities.decodeEntities)(value);
+  }
+  if (Array.isArray(value)) {
+    return value.map(_getNotificationContent);
+  }
+  return value;
+};
+
+/**
  * ActionCard component
+ *
  * @param {ActionCardProps} props Component props.
  * @return {JSX.Element} ActionCard component.
  */
@@ -124,6 +197,7 @@ var ActionCard = function ActionCard(_ref) {
     }
   }, [collapse]);
   var hasChildren = notification || children;
+  var notificationContent = _getNotificationContent(notification);
   var classes = (0, _classnames["default"])('newspack-action-card', simple && 'newspack-card--is-clickable', hasGreyHeader && 'newspack-card--has-grey-header', hasWhiteHeader && 'newspack-card--has-white-header', hasChildren && 'newspack-card--has-children', indent && 'newspack-card--indent', isSmall && 'is-small', isMedium && 'is-medium', checkbox && 'has-checkbox', expandable && 'is-expandable', draggable && 'is-draggable', actionContent && 'has-action-content', className);
   var backgroundImageStyles = function backgroundImageStyles(url) {
     return url ? {
@@ -247,24 +321,17 @@ var ActionCard = function ActionCard(_ref) {
           width: 24
         })
       })]
-    }), notification && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    }), notification && NOTIFICATION_LEVELS.includes(notificationLevel) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "newspack-action-card__notification newspack-action-card__region-children",
-      children: ['error' === notificationLevel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
-        noticeText: notification,
-        isError: true,
-        rawHTML: notificationHTML
-      }), 'info' === notificationLevel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
-        noticeText: notification,
-        rawHTML: notificationHTML
-      }), 'success' === notificationLevel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
-        noticeText: notification,
-        isSuccess: true,
-        rawHTML: notificationHTML
-      }), 'warning' === notificationLevel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
-        noticeText: notification,
-        isWarning: true,
-        rawHTML: notificationHTML
-      })]
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Notice, {
+        status: notificationLevel,
+        isDismissible: false,
+        spokenMessage: getSpokenNotification(notification),
+        children: notificationHTML && typeof notification === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_element.RawHTML, {
+          className: "newspack-action-card__notification-html",
+          children: notification
+        }) : notificationContent
+      })
     }), children && (expandable && expanded || !expandable) ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "newspack-action-card__region-children",
       children: children

package/dist/cjs/action-card/index.test.js

@@ -1,16 +1,26 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@testing-library/react");
+var _a11y = require("@wordpress/a11y");
+var _element = require("@wordpress/element");
 var _index = _interopRequireDefault(require("./index"));
 var _jsxRuntime = require("react/jsx-runtime");
-/**
+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; } /**
  * External dependencies.
- */
-
-/**
+ */ /**
+ * WordPress dependencies.
+ */ /**
  * Internal dependencies.
  */
+jest.mock('@wordpress/a11y', function () {
+  return _objectSpread(_objectSpread({}, jest.requireActual('@wordpress/a11y')), {}, {
+    speak: jest.fn()
+  });
+});
 
 /**
  * The library Badge styles its wrapper rather than its text, so a badge with no label
@@ -18,7 +28,8 @@ var _jsxRuntime = require("react/jsx-runtime");
  * absent — a payment gateway reports no connection status until it is enabled, a prompt
  * can sit on a placement with no entry in the placement map — and an array literal is
  * always non-empty, so the component has to drop those itself.
- */describe('ActionCard badges', function () {
+ */
+describe('ActionCard badges', function () {
   var badgeText = function badgeText() {
     return _react.screen.queryAllByText(function (_, node) {
       return /__badge/.test((node === null || node === void 0 ? void 0 : node.className) || '');
@@ -88,4 +99,180 @@ var _jsxRuntime = require("react/jsx-runtime");
     // An empty array used to fall through as a literal `0` in the heading.
     expect(withEmptyArray.textContent).not.toContain('0');
   });
+});
+
+/**
+ * ActionCard derives the notice's spoken message rather than letting core default it to
+ * the children. Core runs `renderToString` over that default during render, which corrupts
+ * the hook dispatcher when the children are components — so the derivation is what keeps a
+ * notification carrying a `<Button>` from crashing the card on a later re-render.
+ */
+describe('ActionCard notifications', function () {
+  beforeEach(function () {
+    _a11y.speak.mockClear();
+  });
+  var spoken = function spoken() {
+    return _a11y.speak.mock.calls.map(function (call) {
+      return call[0];
+    });
+  };
+  it('renders a notice for a recognised level', function () {
+    var _render5 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Ad Manager",
+        notification: "Plugin cannot be installed",
+        notificationLevel: "error"
+      })),
+      container = _render5.container;
+    expect(container.querySelector('.components-notice.is-error')).toBeInTheDocument();
+  });
+  it('renders no notice for an unrecognised or absent level', function () {
+    var _render6 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Ad Manager",
+        notification: "Something happened",
+        notificationLevel: "critical"
+      })),
+      unknown = _render6.container;
+    expect(unknown.querySelector('.components-notice')).not.toBeInTheDocument();
+    var _render7 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Ad Manager",
+        notification: "Something happened"
+      })),
+      absent = _render7.container;
+    expect(absent.querySelector('.components-notice')).not.toBeInTheDocument();
+  });
+  it('announces the text inside an element-only notification', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+      title: "Ad Manager",
+      notificationLevel: "error",
+      notification: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        children: "Click here to connect your account."
+      }, "connect")]
+    }));
+    expect(spoken()).toContain('Click here to connect your account.');
+  });
+  it('announces strings and element text together', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+      title: "Ad Manager",
+      notificationLevel: "success",
+      notification: ['Created custom targeting keys: ',
+      /*#__PURE__*/
+      // eslint-disable-next-line react/jsx-indent
+      (0, _jsxRuntime.jsx)("a", {
+        href: "https://example.org",
+        children: "Visit your GAM dashboard"
+      }, "dashboard")]
+    }));
+    expect(spoken()).toContain('Created custom targeting keys: Visit your GAM dashboard');
+  });
+  it('announces an Error and renders its message rather than throwing', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+      title: "Ad Manager",
+      notificationLevel: "error",
+      notification: new Error('Network unreachable')
+    }));
+    expect(_react.screen.getByText('Network unreachable')).toBeInTheDocument();
+    expect(spoken()).toContain('Network unreachable');
+  });
+  it('renders HTML notifications in their own wrapper and hands speak() the tags to strip', function () {
+    var _render8 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Ad Manager",
+        notificationLevel: "error",
+        notification: '<p>Install failed.</p><p>Try again.</p>',
+        notificationHTML: true
+      })),
+      container = _render8.container;
+    expect(container.querySelectorAll('.newspack-action-card__notification-html > p')).toHaveLength(2);
+    expect(spoken()[0]).toContain('<p>Install failed.</p>');
+  });
+  it('decodes entities in both the announcement and the visible text', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+      title: "Ad Manager",
+      notificationLevel: "error",
+      notification: 'Plugin &#8220;Foo&#8221; could not be activated'
+    }));
+    expect(_react.screen.getByText('Plugin “Foo” could not be activated')).toBeInTheDocument();
+    expect(spoken()[0]).toContain('“Foo”');
+  });
+  it('decodes entities inside an array of notification parts', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+      title: "Ad Manager",
+      notificationLevel: "error",
+      notification: ['Could not reach the publisher&#8217;s network.', ' ']
+    }));
+    expect(_react.screen.getByText(/Could not reach the publisher’s network\./)).toBeInTheDocument();
+    expect(spoken()[0]).toContain('publisher’s');
+  });
+  it('leaves entity decoding to the browser on the HTML branch', function () {
+    var _render9 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Ad Manager",
+        notificationLevel: "error",
+        notification: 'Get it from <a href="https://example.org">the plugin&#8217;s site</a>',
+        notificationHTML: true
+      })),
+      container = _render9.container;
+    expect(container.querySelector('.newspack-action-card__notification-html a').textContent).toBe('the plugin’s site');
+    expect(spoken()[0]).toContain('plugin’s site');
+  });
+  it('renders a non-string notification as children even when notificationHTML is set', function () {
+    var _render0 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Ad Manager",
+        notificationLevel: "error",
+        notification: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: "Network unreachable"
+        }),
+        notificationHTML: true
+      })),
+      container = _render0.container;
+    expect(_react.screen.getByText('Network unreachable')).toBeInTheDocument();
+    expect(container.querySelector('.newspack-action-card__notification-html')).not.toBeInTheDocument();
+  });
+  it('keeps adjacent element texts apart in the announcement', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+      title: "Ad Manager",
+      notificationLevel: "error",
+      notification: [
+      /*#__PURE__*/
+      // eslint-disable-next-line react/jsx-indent
+      (0, _jsxRuntime.jsx)("a", {
+        href: "https://example.org",
+        children: "Visit your GAM dashboard"
+      }, "dashboard"), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        type: "button",
+        children: "Click here to connect your account."
+      }, "connect")]
+    }));
+    expect(spoken()[0]).toBe('Visit your GAM dashboard Click here to connect your account.');
+  });
+  it('survives a re-render that changes how many hooked components the notification holds', function () {
+    var HookedAction = function HookedAction(_ref) {
+      var children = _ref.children;
+      var _useState = (0, _element.useState)(children),
+        _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
+        label = _useState2[0];
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        type: "button",
+        children: label
+      });
+    };
+    var card = function card(notification) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Ad Manager",
+        notificationLevel: "error",
+        notification: notification
+      });
+    };
+    var _render1 = (0, _react.render)(card([/*#__PURE__*/(0, _jsxRuntime.jsx)(HookedAction, {
+        children: "Retry"
+      }, "retry"), /*#__PURE__*/(0, _jsxRuntime.jsx)(HookedAction, {
+        children: "Documentation"
+      }, "docs")])),
+      rerender = _render1.rerender,
+      container = _render1.container;
+    expect(function () {
+      return rerender(card([/*#__PURE__*/(0, _jsxRuntime.jsx)(HookedAction, {
+        children: "Retry"
+      }, "retry")]));
+    }).not.toThrow();
+    expect(container.querySelector('.components-notice.is-error')).toBeInTheDocument();
+  });
 });

package/dist/cjs/action-card/style.scss

@@ -339,18 +339,12 @@
 
 	/* Notifications */
 	.newspack-action-card__notification {
-		.newspack-notice {
+		.components-notice {
 			margin: 0;
-
-			&__heading {
-				margin-top: 0;
-			}
 		}
 
-		&.newspack-action-card__region-children {
-			.newspack-notice {
-				margin-top: 32px;
-			}
+		.newspack-action-card__notification-html > * {
+			margin: 0;
 		}
 	}
 

package/dist/cjs/debug-badge/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _i18n = require("@wordpress/i18n");
+var _icons = require("@wordpress/icons");
+require("./style.scss");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Debug Badge
+ */
+
+/**
+ * WordPress dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+/**
+ * Debug Badge component.
+ *
+ * Gates itself on `window.newspack_aux_data.is_debug_mode`, so consumers render
+ * it unconditionally and it stays absent outside debug mode.
+ *
+ * @return {JSX.Element|null} Debug Badge component, or nothing outside debug mode.
+ */var DebugBadge = function DebugBadge() {
+  var _window$newspack_aux_;
+  if (!((_window$newspack_aux_ = window.newspack_aux_data) !== null && _window$newspack_aux_ !== void 0 && _window$newspack_aux_.is_debug_mode)) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "newspack-debug-badge",
+    role: "img",
+    "aria-label": (0, _i18n.__)('Debug mode', 'newspack-plugin'),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+      icon: _icons.bug
+    })
+  });
+};
+var _default = exports["default"] = DebugBadge;

package/dist/cjs/debug-badge/index.test.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = require("@testing-library/react");
+var _ = _interopRequireDefault(require("."));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+describe('DebugBadge', function () {
+  afterEach(function () {
+    delete window.newspack_aux_data;
+  });
+  it('renders the badge and its glyph in debug mode', function () {
+    window.newspack_aux_data = {
+      is_debug_mode: true
+    };
+    var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {})),
+      container = _render.container;
+    expect(container.querySelector('.newspack-debug-badge')).toBeInTheDocument();
+    expect(container.querySelector('.newspack-debug-badge > svg')).toBeInTheDocument();
+  });
+  it('names itself for assistive tech', function () {
+    window.newspack_aux_data = {
+      is_debug_mode: true
+    };
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {}));
+    expect(_react.screen.getByRole('img', {
+      name: 'Debug mode'
+    })).toBeInTheDocument();
+  });
+  it('renders nothing outside debug mode', function () {
+    window.newspack_aux_data = {
+      is_debug_mode: false
+    };
+    var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {})),
+      container = _render2.container;
+    expect(container).toBeEmptyDOMElement();
+  });
+  it('renders nothing when the global is absent', function () {
+    var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {})),
+      container = _render3.container;
+    expect(container).toBeEmptyDOMElement();
+  });
+});

package/dist/cjs/debug-badge/style.scss

@@ -0,0 +1,26 @@
+/**
+ * Debug Badge
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+@use "../../../colors/colors.module" as np-colors;
+
+.newspack-debug-badge {
+	background: np-colors.$primary-600;
+	border-radius: wp-vars.$radius-round;
+	bottom: 0;
+	box-shadow: var(--wpds-elevation-sm, #{wp-vars.$elevation-small});
+	display: grid;
+	height: wp-vars.$button-size;
+	margin: 0 wp-vars.$grid-unit-30 wp-vars.$grid-unit-30;
+	place-items: center;
+	pointer-events: none;
+	position: fixed;
+	width: wp-vars.$button-size;
+	z-index: 9997;
+
+	> svg {
+		fill: wp-colors.$white;
+	}
+}