newspack-components 4.6.2 → 4.7.0-alpha.1

package/dist/cjs/wizard/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.WizardBanner = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -26,11 +26,19 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * External dependencies.
  */ /**
  * WordPress dependencies.
- */ /**
+ */ // Notice is aliased: `Notice` below is Newspack's own, which this file also uses.
+/**
  * Internal dependencies
  */
 (0, _store["default"])();
 
+/**
+ * Renders a view's page-level banner outside the padded content column, so it sits
+ * flush beneath the header rather than indented within the section it describes.
+ */
+var _createSlotFill = (0, _components.createSlotFill)('NewspackWizardBanner'),
+  WizardBannerSlot = _createSlotFill.Slot,
+  WizardBanner = exports.WizardBanner = _createSlotFill.Fill;
 /**
  * Icon registry for resolving icon name strings passed through the data store.
  * React elements from @wordpress/icons can't cross webpack entry point boundaries
@@ -53,6 +61,34 @@ var HashRouter = _router["default"].HashRouter,
   Switch = _router["default"].Switch,
   useLocation = _router["default"].useLocation;
 
+/**
+ * Interpolate a translated message's named tags, falling back to plain text.
+ *
+ * The message is translated, so its tags are site-controlled: any .mo file under
+ * wp-content/languages/plugins, any GlotPress export, or any `gettext`-filter
+ * plugin can supply one. `createInterpolateElement` throws on an unbalanced
+ * closing tag whose name is in the conversion map - verified against core's own
+ * element.js, which is what runs here since the bundle externalizes wp-element.
+ * Nothing above this renders an error boundary, so an uncaught throw would blank
+ * the whole wizard, including the screen the inert-gating notice links to as the
+ * fix. Degraded copy is recoverable; a blank screen is not.
+ *
+ * The other malformed cases already degrade on their own and are left alone: an
+ * unclosed opener drops that tag and renders the rest as text, and a tag not in
+ * the map renders literally.
+ *
+ * @param {string} message    Translated message carrying named tags.
+ * @param {Object} conversion Conversion map for createInterpolateElement.
+ * @return {JSX.Element|string} The interpolated message, or the message with its tags stripped.
+ */
+var interpolateOrPlainText = function interpolateOrPlainText(message, conversion) {
+  try {
+    return (0, _element.createInterpolateElement)(message, conversion);
+  } catch (_unused) {
+    return message.replace(/<\/?[a-zA-Z][a-zA-Z0-9]*\s*\/?>/g, '');
+  }
+};
+
 /**
  * Reset the header data when a new section is rendered.
  */
@@ -112,7 +148,7 @@ var WizardHeaderRegion = function WizardHeaderRegion(_ref) {
 
 /**
  * @typedef  {Object}     WizardProps
- * @property {string}     headerText                The header text.
+ * @property {string}     [headerText]              Fallback heading, used only when no section declares breadcrumbs.
  * @property {string}     [subHeaderText]           The sub-header text, optional.
  * @property {string}     [apiSlug]                 The API slug, optional.
  * @property {string}     [className]               CSS classes, optional.
@@ -132,6 +168,7 @@ var WizardHeaderRegion = function WizardHeaderRegion(_ref) {
  * @return {JSX.Element} Wizard component
  */
 var Wizard = function Wizard(_ref2, ref) {
+  var _window$newspack_aux_;
   var _ref2$sections = _ref2.sections,
     sections = _ref2$sections === void 0 ? [] : _ref2$sections,
     headerText = _ref2.headerText,
@@ -211,10 +248,35 @@ var Wizard = function Wizard(_ref2, ref) {
     items: displayedSections,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardError["default"], {})
   });
+
+  // Rendered here rather than as a core admin notice, which wizards strip at
+  // priority -9999. Sits as the first child of .newspack-wizard__main so it lands
+  // flush beneath the header region and spans the full width in every view: this
+  // describes the state of the whole site, not of the section below it, so it reads
+  // as page chrome rather than as content.
+  var inertGating = (_window$newspack_aux_ = window.newspack_aux_data) === null || _window$newspack_aux_ === void 0 ? void 0 : _window$newspack_aux_.inert_gating;
+  var inertGatingNotice = (inertGating === null || inertGating === void 0 ? void 0 : inertGating.show) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Notice, {
+    status: "warning",
+    isDismissible: false,
+    className: "newspack-wizard__inert-gating-notice",
+    children: interpolateOrPlainText(inertGating.message, {
+      /* eslint-disable jsx-a11y/anchor-has-content */
+      accessControl: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+        href: inertGating.urls.accessControl
+      }),
+      audience: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+        href: inertGating.urls.audience
+      }),
+      /* eslint-enable jsx-a11y/anchor-has-content */
+      strong: /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {})
+    })
+  });
   var content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.HandoffMessage, {}), sections.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(ResetHeaderData, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.HandoffMessage, {}), sections.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(ResetHeaderData, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "newspack-wizard__main",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Switch, {
+      children: [inertGatingNotice, /*#__PURE__*/(0, _jsxRuntime.jsx)(WizardBannerSlot, {
+        bubblesVirtually: true
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Switch, {
         children: [routedSections.map(function (section, index) {
           var _section$exact;
           var SectionComponent = section.render;
@@ -245,7 +307,7 @@ var Wizard = function Wizard(_ref2, ref) {
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Redirect, {
           to: displayedSections[0].path
         })]
-      })
+      })]
     })]
   });
   var headerActions = (actions === null || actions === void 0 ? void 0 : actions.length) > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -296,40 +358,42 @@ var Wizard = function Wizard(_ref2, ref) {
       }
     })]
   }) : undefined;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    ref: ref,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames["default"])(isLoading ? 'newspack-wizard__is-loading' : 'newspack-wizard__is-loaded', {
-        'newspack-wizard__is-loading-quiet': isQuietLoading
-      }),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(HashRouter, {
-        hashType: "slash",
-        children: [newspack_aux_data.is_debug_mode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
-          debugMode: true
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(WizardHeaderRegion, {
-          hideHeader: hideHeader,
-          headerText: headerText,
-          sections: routedSections,
-          sectionName: sectionName,
-          subTitle: subHeaderText,
-          actions: headerActions,
-          tabbedNavigation: tabbedNavigation,
-          children: content
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SlotFillProvider, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      ref: ref,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames["default"])(isLoading ? 'newspack-wizard__is-loading' : 'newspack-wizard__is-loaded', {
+          'newspack-wizard__is-loading-quiet': isQuietLoading
+        }),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(HashRouter, {
+          hashType: "slash",
+          children: [newspack_aux_data.is_debug_mode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
+            debugMode: true
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(WizardHeaderRegion, {
+            hideHeader: hideHeader,
+            headerText: headerText,
+            sections: routedSections,
+            sectionName: sectionName,
+            subTitle: subHeaderText,
+            actions: headerActions,
+            tabbedNavigation: tabbedNavigation,
+            children: content
+          })]
+        }), (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);
+          })
         })]
-      }), (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
       })]
-    }), !isLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Footer, {
-      simple: hasSimpleFooter
-    })]
+    })
   });
 };
 var _default = exports["default"] = (0, _element.forwardRef)(Wizard);

package/dist/esm/autocomplete-tokenfield/style.scss

@@ -3,6 +3,7 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
 
 .newspack-autocomplete-tokenfield {
 	.components-spinner {
@@ -34,8 +35,9 @@
 
 	.newspack-autocomplete-tokenfield__help {
 		color: wp-colors.$gray-700;
-		font-size: inherit;
-		margin-top: 0;
+		font-size: wp-vars.$helptext-font-size;
+		line-height: wp-vars.$default-line-height;
+		margin: wp-vars.$grid-unit-10 0 0;
 	}
 
 	.components-form-token-field__suggestions-list {

package/dist/esm/breadcrumbs/format-count.js

@@ -0,0 +1,27 @@
+/**
+ * Group a number for the site's locale rather than the browser's, so a crumb's count
+ * matches both the translated phrasing beside it and every server-rendered figure on
+ * the page. Callers that build their own `countLabel` share this so the visible count
+ * and the spoken one are grouped the same way.
+ *
+ * WordPress ships locales `Intl` rejects outright — `pt_PT_ao90` yields the BCP-47
+ * tag `pt-PT-ao90`, whose four-character variant subtag must start with a digit — so
+ * the tag is shortened a subtag at a time until one is accepted. Falling straight
+ * through to the browser's locale would group `1,234` beside a server-rendered
+ * `1.234`, which is the divergence this helper exists to prevent.
+ *
+ * @param {number} count Number to format.
+ * @return {string} The grouped number.
+ */
+export var formatCount = function formatCount(count) {
+  var lang = typeof document !== 'undefined' && document.documentElement.lang || '';
+  var subtags = lang.replace(/_/g, '-').split('-').filter(Boolean);
+  while (subtags.length) {
+    try {
+      return Number(count).toLocaleString(subtags.join('-'));
+    } catch (_unused) {
+      subtags.pop();
+    }
+  }
+  return Number(count).toLocaleString();
+};

package/dist/esm/breadcrumbs/index.js

@@ -1,14 +1,71 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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; }
 /**
  * WordPress dependencies.
  */
-import { __ } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 import { Link, Stack, Text } from '@wordpress/ui';
 
 /**
  * Internal dependencies.
  */
+import { formatCount } from './format-count';
 import './style.scss';
 
+/**
+ * A crumb's count, shown in parentheses and spoken as a phrase.
+ *
+ * @param {Object} props
+ * @param {number} [props.count]      Item count.
+ * @param {string} [props.countLabel] Translated accessible phrasing for the count.
+ * @return {JSX.Element|null} The count, or null when the crumb carries none.
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var CrumbCount = function CrumbCount(_ref) {
+  var count = _ref.count,
+    countLabel = _ref.countLabel;
+  if (!Number.isFinite(count)) {
+    return null;
+  }
+  var formatted = formatCount(count);
+  return /*#__PURE__*/_jsxs("span", {
+    className: "newspack-breadcrumbs__count",
+    children: [/*#__PURE__*/_jsx("span", {
+      "aria-hidden": "true",
+      children: "(".concat(formatted, ")")
+    }), /*#__PURE__*/_jsx("span", {
+      className: "screen-reader-text",
+      children: countLabel || sprintf(/* translators: %s: number of items in the current view. */
+      _n('%s item', '%s items', count, 'newspack-plugin'), formatted)
+    })]
+  });
+};
+
+/**
+ * A crumb's label, with its count appended when the item carries one.
+ *
+ * @param {Object} props
+ * @param {string} props.label        Crumb label.
+ * @param {number} [props.count]      Item count to annotate the label with.
+ * @param {string} [props.countLabel] Translated accessible phrasing for the count.
+ * @return {JSX.Element|string} The label, annotated when a count is present.
+ */
+var CrumbLabel = function CrumbLabel(_ref2) {
+  var label = _ref2.label,
+    count = _ref2.count,
+    countLabel = _ref2.countLabel;
+  if (!Number.isFinite(count)) {
+    return label;
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [label, " ", /*#__PURE__*/_jsx(CrumbCount, {
+      count: count,
+      countLabel: countLabel
+    })]
+  });
+};
+
 /**
  * Newspack breadcrumb trail.
  *
@@ -18,13 +75,12 @@ import './style.scss';
  * component needs no router context.
  *
  * @param {Object} props
- * @param {Array}  props.items Trail items: `{ label, url? }`.
+ * @param {Array}  props.items Trail items: `{ label, url?, count?, countLabel? }`.
  * @return {JSX.Element|null} Breadcrumbs component.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var Breadcrumbs = function Breadcrumbs(_ref) {
-  var _ref$items = _ref.items,
-    items = _ref$items === void 0 ? [] : _ref$items;
+var Breadcrumbs = function Breadcrumbs(_ref3) {
+  var _ref3$items = _ref3.items,
+    items = _ref3$items === void 0 ? [] : _ref3$items;
   if (!items.length) {
     return null;
   }
@@ -39,21 +95,26 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
       className: "newspack-breadcrumbs__list",
       children: [preceding.map(function (item, index) {
         return /*#__PURE__*/_jsxs("li", {
-          children: [item.url ?
-          /*#__PURE__*/
-          // eslint-disable-next-line jsx-a11y/anchor-has-content -- content is supplied via the Text children through @wordpress/ui's render prop.
-          _jsx(Text, {
-            variant: "body-lg",
-            render: /*#__PURE__*/_jsx(Link, {
-              tone: "neutral",
-              render: /*#__PURE__*/_jsx("a", {
-                href: item.url
-              })
-            }),
-            children: item.label
+          children: [item.url ? /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Text, {
+              variant: "body-lg",
+              render: /*#__PURE__*/_jsx(Link, {
+                tone: "neutral",
+                render: /*#__PURE__*/_jsx("a", {
+                  href: item.url
+                })
+              }),
+              children: item.label
+            }), Number.isFinite(item.count) && /*#__PURE__*/_jsxs(Text, {
+              variant: "body-lg",
+              children: [' ', /*#__PURE__*/_jsx(CrumbCount, {
+                count: item.count,
+                countLabel: item.countLabel
+              })]
+            })]
           }) : /*#__PURE__*/_jsx(Text, {
             variant: "body-lg",
-            children: item.label
+            children: /*#__PURE__*/_jsx(CrumbLabel, _objectSpread({}, item))
           }), /*#__PURE__*/_jsx(Text, {
             variant: "body-lg",
             "aria-hidden": "true",
@@ -66,7 +127,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
           variant: "heading-lg",
           render: /*#__PURE__*/_jsx("h1", {}),
           className: "newspack-breadcrumbs__current",
-          children: last.label
+          children: /*#__PURE__*/_jsx(CrumbLabel, _objectSpread({}, last))
         })
       })]
     })

package/dist/esm/breadcrumbs/index.test.js

@@ -9,6 +9,10 @@ import { render, screen } from '@testing-library/react';
 import Breadcrumbs from './';
 import { jsx as _jsx } from "react/jsx-runtime";
 describe('Breadcrumbs', function () {
+  // Unconditional, so a failing assertion cannot leak a language into later tests.
+  afterEach(function () {
+    document.documentElement.lang = '';
+  });
   it('renders the last item as the only h1 and never a link', function () {
     render(/*#__PURE__*/_jsx(Breadcrumbs, {
       items: [{
@@ -102,4 +106,110 @@ describe('Breadcrumbs', function () {
       container = _render3.container;
     expect(container.querySelector('nav')).not.toBeInTheDocument();
   });
+  it('annotates a crumb with its count, hiding the parens from assistive tech', function () {
+    var _render4 = render(/*#__PURE__*/_jsx(Breadcrumbs, {
+        items: [{
+          label: 'Plans'
+        }, {
+          label: 'Subscriptions',
+          count: 33
+        }]
+      })),
+      container = _render4.container;
+    var count = container.querySelector('.newspack-breadcrumbs__count');
+    expect(count).not.toBeNull();
+    expect(count.querySelector('[aria-hidden="true"]')).toHaveTextContent('(33)');
+    expect(count.querySelector('.screen-reader-text')).toHaveTextContent('33 items');
+    expect(screen.getByRole('heading', {
+      level: 1
+    })).toContainElement(count);
+  });
+  it('announces a single item in the singular', function () {
+    var _render5 = render(/*#__PURE__*/_jsx(Breadcrumbs, {
+        items: [{
+          label: 'Donations',
+          count: 1
+        }]
+      })),
+      container = _render5.container;
+    expect(container.querySelector('.newspack-breadcrumbs__count .screen-reader-text').textContent).toBe('1 item');
+  });
+  it('renders a zero count rather than dropping the annotation', function () {
+    var _render6 = render(/*#__PURE__*/_jsx(Breadcrumbs, {
+        items: [{
+          label: 'Donations',
+          count: 0
+        }]
+      })),
+      container = _render6.container;
+    expect(container.querySelector('.newspack-breadcrumbs__count [aria-hidden="true"]')).toHaveTextContent('(0)');
+  });
+  it('omits the annotation when a crumb carries no usable count', function () {
+    var _render7 = render(/*#__PURE__*/_jsx(Breadcrumbs, {
+        items: [{
+          label: 'Plans'
+        }, {
+          label: 'Bundles',
+          count: undefined
+        }]
+      })),
+      container = _render7.container;
+    expect(container.querySelector('.newspack-breadcrumbs__count')).toBeNull();
+    expect(screen.getByRole('heading', {
+      level: 1
+    })).toHaveTextContent('Bundles');
+  });
+  it('prefers a supplied countLabel for the accessible phrasing', function () {
+    var _render8 = render(/*#__PURE__*/_jsx(Breadcrumbs, {
+        items: [{
+          label: 'Subscribers',
+          count: 85,
+          countLabel: '85 subscribers total'
+        }]
+      })),
+      container = _render8.container;
+    expect(container.querySelector('.newspack-breadcrumbs__count .screen-reader-text')).toHaveTextContent('85 subscribers total');
+  });
+  it('annotates a linked crumb outside the link, so the link is named for its destination', function () {
+    var _render9 = render(/*#__PURE__*/_jsx(Breadcrumbs, {
+        items: [{
+          label: 'Plans',
+          url: '#/',
+          count: 12
+        }, {
+          label: 'Add plan'
+        }]
+      })),
+      container = _render9.container;
+    var link = screen.getByRole('link', {
+      name: 'Plans'
+    });
+    expect(link.getAttribute('href')).toBe('#/');
+    expect(link).not.toHaveTextContent('(12)');
+    var count = container.querySelector('.newspack-breadcrumbs__count');
+    expect(count.querySelector('[aria-hidden="true"]')).toHaveTextContent('(12)');
+    expect(link).not.toContainElement(count);
+  });
+  it('groups the count for the document language', function () {
+    document.documentElement.lang = 'de-DE';
+    var _render0 = render(/*#__PURE__*/_jsx(Breadcrumbs, {
+        items: [{
+          label: 'Abonnenten',
+          count: 1234
+        }]
+      })),
+      container = _render0.container;
+    expect(container.querySelector('.newspack-breadcrumbs__count [aria-hidden="true"]')).toHaveTextContent('(1.234)');
+  });
+  it('falls back to the default grouping when the document language is not a locale Intl accepts', function () {
+    document.documentElement.lang = 'pt-PT-ao90';
+    var _render1 = render(/*#__PURE__*/_jsx(Breadcrumbs, {
+        items: [{
+          label: 'Planos',
+          count: 1234
+        }]
+      })),
+      container = _render1.container;
+    expect(container.querySelector('.newspack-breadcrumbs__count [aria-hidden="true"]').textContent).toMatch(/^\(1\D?234\)$/);
+  });
 });

package/dist/esm/breadcrumbs/style.scss

@@ -1,4 +1,5 @@
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
 
 .newspack-breadcrumbs__list {
 	list-style: none;
@@ -26,6 +27,11 @@
 	}
 }
 
+.newspack-breadcrumbs__count {
+	color: var(--wpds-color-foreground-content-neutral-weak, #{wp-colors.$gray-700});
+	font-weight: wp-vars.$font-weight-regular;
+}
+
 .newspack-breadcrumbs__separator {
 	color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
 	margin: 0 var(--wpds-dimension-gap-sm, 8px);

package/dist/esm/button/index.js

@@ -15,7 +15,7 @@ function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try {
  * WordPress dependencies.
  */
 import { Button as BaseComponent } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -24,6 +24,11 @@ import Router from '../proxied-imports/router';
 import './style.scss';
 import { jsx as _jsx } from "react/jsx-runtime";
 var useHistory = Router.useHistory;
+// Control characters are stripped first, as browsers do, so `java\nscript:`
+// cannot slip past.
+var isJavascriptHref = function isJavascriptHref(href) {
+  return 'string' === typeof href && href.replace(/[\u0000-\u0020]/g, '').toLowerCase().startsWith('javascript:');
+};
 var Button = function Button(_ref) {
   var href = _ref.href,
     _ref$loading = _ref.loading,
@@ -35,26 +40,45 @@ var Button = function Button(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isAwaitingOnClick = _useState2[0],
     setIsAwaitingOnClick = _useState2[1];
+  var isUnsafeHref = isJavascriptHref(href);
+  var safeHref = isUnsafeHref ? undefined : href;
+  useEffect(function () {
+    if ('production' === process.env.NODE_ENV || !isUnsafeHref) {
+      return;
+    }
+    // eslint-disable-next-line no-console
+    console.warn('Button: a `javascript:` href is not a link and has been dropped.');
+  }, [isUnsafeHref]);
 
   // If both onClick and href are present, await the onClick action an then redirect.
-  if (href && onClick) {
-    otherProps.onClick = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
-      return _regenerator().w(function (_context) {
-        while (1) switch (_context.n) {
-          case 0:
-            setIsAwaitingOnClick(true);
-            _context.n = 1;
-            return onClick();
-          case 1:
-            setIsAwaitingOnClick(false);
-            history.push((href || '').replace('#', ''));
-          case 2:
-            return _context.a(2);
-        }
-      }, _callee);
-    }));
+  if (safeHref && onClick) {
+    otherProps.onClick = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(event) {
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.n) {
+            case 0:
+              setIsAwaitingOnClick(true);
+              _context.n = 1;
+              return onClick(event);
+            case 1:
+              setIsAwaitingOnClick(false);
+              // Outside a Router the href can only mean a real URL.
+              if (history) {
+                history.push(safeHref.replace('#', ''));
+              } else {
+                window.location.href = safeHref;
+              }
+            case 2:
+              return _context.a(2);
+          }
+        }, _callee);
+      }));
+      return function (_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
   } else {
-    otherProps.href = href;
+    otherProps.href = safeHref;
     otherProps.onClick = onClick;
   }
   if (isAwaitingOnClick) {