newspack-components 4.6.3 → 4.7.0-alpha.2

package/dist/esm/wizard/index.js

@@ -10,9 +10,10 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies.
  */
-import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+// Notice is aliased: `Notice` below is Newspack's own, which this file also uses.
+import { DropdownMenu, MenuGroup, MenuItem, Notice as CoreNotice, SlotFillProvider, createSlotFill } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { cloneElement, isValidElement, useEffect, useRef, useState, forwardRef } from '@wordpress/element';
+import { cloneElement, createInterpolateElement, isValidElement, useRef, useEffect, useState, forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { category, chevronLeft, moreVertical } from '@wordpress/icons';
 
@@ -28,6 +29,15 @@ import WizardError from './components/WizardError';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 registerStore();
 
+/**
+ * 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 = createSlotFill('NewspackWizardBanner'),
+  WizardBannerSlot = _createSlotFill.Slot,
+  WizardBanner = _createSlotFill.Fill;
+export { WizardBanner };
+
 /**
  * Icon registry for resolving icon name strings passed through the data store.
  * React elements from @wordpress/icons can't cross webpack entry point boundaries
@@ -50,6 +60,34 @@ var HashRouter = Router.HashRouter,
   Switch = Router.Switch,
   useLocation = Router.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 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.
  */
@@ -109,7 +147,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.
@@ -129,6 +167,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,
@@ -231,10 +270,35 @@ var Wizard = function Wizard(_ref2, ref) {
     items: displayedSections,
     children: /*#__PURE__*/_jsx(WizardError, {})
   });
+
+  // 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__*/_jsx(CoreNotice, {
+    status: "warning",
+    isDismissible: false,
+    className: "newspack-wizard__inert-gating-notice",
+    children: interpolateOrPlainText(inertGating.message, {
+      /* eslint-disable jsx-a11y/anchor-has-content */
+      accessControl: /*#__PURE__*/_jsx("a", {
+        href: inertGating.urls.accessControl
+      }),
+      audience: /*#__PURE__*/_jsx("a", {
+        href: inertGating.urls.audience
+      }),
+      /* eslint-enable jsx-a11y/anchor-has-content */
+      strong: /*#__PURE__*/_jsx("strong", {})
+    })
+  });
   var content = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(HandoffMessage, {}), sections.length > 1 && /*#__PURE__*/_jsx(ResetHeaderData, {}), /*#__PURE__*/_jsx("div", {
+    children: [/*#__PURE__*/_jsx(HandoffMessage, {}), sections.length > 1 && /*#__PURE__*/_jsx(ResetHeaderData, {}), /*#__PURE__*/_jsxs("div", {
       className: "newspack-wizard__main",
-      children: /*#__PURE__*/_jsxs(Switch, {
+      children: [inertGatingNotice, /*#__PURE__*/_jsx(WizardBannerSlot, {
+        bubblesVirtually: true
+      }), /*#__PURE__*/_jsxs(Switch, {
         children: [routedSections.map(function (section, index) {
           var _section$exact;
           var SectionComponent = section.render;
@@ -265,7 +329,7 @@ var Wizard = function Wizard(_ref2, ref) {
         }), /*#__PURE__*/_jsx(Redirect, {
           to: displayedSections[0].path
         })]
-      })
+      })]
     })]
   });
   var headerActions = (actions === null || actions === void 0 ? void 0 : actions.length) > 0 ? /*#__PURE__*/_jsxs(_Fragment, {
@@ -316,40 +380,42 @@ var Wizard = function Wizard(_ref2, ref) {
       }
     })]
   }) : undefined;
-  return /*#__PURE__*/_jsxs("div", {
-    ref: ref,
-    children: [/*#__PURE__*/_jsxs("div", {
-      className: classnames(isLoading ? 'newspack-wizard__is-loading' : 'newspack-wizard__is-loaded', {
-        'newspack-wizard__is-loading-quiet': isQuietLoading
-      }),
-      children: [/*#__PURE__*/_jsxs(HashRouter, {
-        hashType: "slash",
-        children: [newspack_aux_data.is_debug_mode && /*#__PURE__*/_jsx(Notice, {
-          debugMode: true
-        }), /*#__PURE__*/_jsx(WizardHeaderRegion, {
-          hideHeader: hideHeader,
-          headerText: headerText,
-          sections: routedSections,
-          sectionName: sectionName,
-          subTitle: subHeaderText,
-          actions: headerActions,
-          tabbedNavigation: tabbedNavigation,
-          children: content
+  return /*#__PURE__*/_jsx(SlotFillProvider, {
+    children: /*#__PURE__*/_jsxs("div", {
+      ref: ref,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: classnames(isLoading ? 'newspack-wizard__is-loading' : 'newspack-wizard__is-loaded', {
+          'newspack-wizard__is-loading-quiet': isQuietLoading
+        }),
+        children: [/*#__PURE__*/_jsxs(HashRouter, {
+          hashType: "slash",
+          children: [newspack_aux_data.is_debug_mode && /*#__PURE__*/_jsx(Notice, {
+            debugMode: true
+          }), /*#__PURE__*/_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__*/_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);
+          })
         })]
-      }), (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
       })]
-    }), !isLoading && /*#__PURE__*/_jsx(Footer, {
-      simple: hasSimpleFooter
-    })]
+    })
   });
 };
 export default forwardRef(Wizard);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "newspack-components",
-	"version": "4.6.3",
+	"version": "4.7.0-alpha.2",
 	"description": "Newspack design system components",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -30,7 +30,7 @@
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"moment-range": "^3.1.1",
-		"newspack-icons": "1.1.1",
+		"newspack-icons": "1.1.2-alpha.1",
 		"qs": "^6.15.2",
 		"react-router-dom": "^5.3.4",
 		"@babel/runtime": "^7.29.7",

package/src/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/src/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 const formatCount = count => {
+	const lang = ( typeof document !== 'undefined' && document.documentElement.lang ) || '';
+	const subtags = lang.replace( /_/g, '-' ).split( '-' ).filter( Boolean );
+	while ( subtags.length ) {
+		try {
+			return Number( count ).toLocaleString( subtags.join( '-' ) );
+		} catch {
+			subtags.pop();
+		}
+	}
+	return Number( count ).toLocaleString();
+};

package/src/breadcrumbs/index.js

@@ -1,14 +1,63 @@
 /**
  * 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.
+ */
+const CrumbCount = ( { count, countLabel } ) => {
+	if ( ! Number.isFinite( count ) ) {
+		return null;
+	}
+	const formatted = formatCount( count );
+	return (
+		<span className="newspack-breadcrumbs__count">
+			<span aria-hidden="true">{ `(${ formatted })` }</span>
+			<span className="screen-reader-text">
+				{ countLabel ||
+					sprintf(
+						/* translators: %s: number of items in the current view. */
+						_n( '%s item', '%s items', count, 'newspack-plugin' ),
+						formatted
+					) }
+			</span>
+		</span>
+	);
+};
+
+/**
+ * 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.
+ */
+const CrumbLabel = ( { label, count, countLabel } ) => {
+	if ( ! Number.isFinite( count ) ) {
+		return label;
+	}
+	return (
+		<>
+			{ label } <CrumbCount count={ count } countLabel={ countLabel } />
+		</>
+	);
+};
+
 /**
  * Newspack breadcrumb trail.
  *
@@ -18,7 +67,7 @@ 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.
  */
 const Breadcrumbs = ( { items = [] } ) => {
@@ -35,12 +84,23 @@ const Breadcrumbs = ( { items = [] } ) => {
 				{ preceding.map( ( item, index ) => (
 					<li key={ item.url || index }>
 						{ item.url ? (
-							// eslint-disable-next-line jsx-a11y/anchor-has-content -- content is supplied via the Text children through @wordpress/ui's render prop.
-							<Text variant="body-lg" render={ <Link tone="neutral" render={ <a href={ item.url } /> } /> }>
-								{ item.label }
-							</Text>
+							<>
+								{ /* eslint-disable-next-line jsx-a11y/anchor-has-content -- content is supplied via the Text children through @wordpress/ui's render prop. */ }
+								<Text variant="body-lg" render={ <Link tone="neutral" render={ <a href={ item.url } /> } /> }>
+									{ item.label }
+								</Text>
+								{ /* Outside the link: the count describes the view being left, not the destination. */ }
+								{ Number.isFinite( item.count ) && (
+									<Text variant="body-lg">
+										{ ' ' }
+										<CrumbCount count={ item.count } countLabel={ item.countLabel } />
+									</Text>
+								) }
+							</>
 						) : (
-							<Text variant="body-lg">{ item.label }</Text>
+							<Text variant="body-lg">
+								<CrumbLabel { ...item } />
+							</Text>
 						) }
 						<Text variant="body-lg" aria-hidden="true" className="newspack-breadcrumbs__separator">
 							/
@@ -51,7 +111,7 @@ const Breadcrumbs = ( { items = [] } ) => {
 					<li>
 						{ /* eslint-disable-next-line jsx-a11y/heading-has-content -- content is supplied via the Text children through @wordpress/ui's render prop. */ }
 						<Text variant="heading-lg" render={ <h1 /> } className="newspack-breadcrumbs__current">
-							{ last.label }
+							<CrumbLabel { ...last } />
 						</Text>
 					</li>
 				) }

package/src/breadcrumbs/index.test.js

@@ -9,6 +9,11 @@ import { render, screen } from '@testing-library/react';
 import Breadcrumbs from './';
 
 describe( 'Breadcrumbs', () => {
+	// Unconditional, so a failing assertion cannot leak a language into later tests.
+	afterEach( () => {
+		document.documentElement.lang = '';
+	} );
+
 	it( 'renders the last item as the only h1 and never a link', () => {
 		render( <Breadcrumbs items={ [ { label: 'Newsletters' }, { label: 'Settings', url: '#/x' } ] } /> );
 		const h1s = screen.getAllByRole( 'heading', { level: 1 } );
@@ -56,4 +61,56 @@ describe( 'Breadcrumbs', () => {
 		const { container } = render( <Breadcrumbs items={ [] } /> );
 		expect( container.querySelector( 'nav' ) ).not.toBeInTheDocument();
 	} );
+
+	it( 'annotates a crumb with its count, hiding the parens from assistive tech', () => {
+		const { container } = render( <Breadcrumbs items={ [ { label: 'Plans' }, { label: 'Subscriptions', count: 33 } ] } /> );
+		const 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', () => {
+		const { container } = render( <Breadcrumbs items={ [ { label: 'Donations', count: 1 } ] } /> );
+		expect( container.querySelector( '.newspack-breadcrumbs__count .screen-reader-text' ).textContent ).toBe( '1 item' );
+	} );
+
+	it( 'renders a zero count rather than dropping the annotation', () => {
+		const { container } = render( <Breadcrumbs items={ [ { label: 'Donations', count: 0 } ] } /> );
+		expect( container.querySelector( '.newspack-breadcrumbs__count [aria-hidden="true"]' ) ).toHaveTextContent( '(0)' );
+	} );
+
+	it( 'omits the annotation when a crumb carries no usable count', () => {
+		const { container } = render( <Breadcrumbs items={ [ { label: 'Plans' }, { label: 'Bundles', count: undefined } ] } /> );
+		expect( container.querySelector( '.newspack-breadcrumbs__count' ) ).toBeNull();
+		expect( screen.getByRole( 'heading', { level: 1 } ) ).toHaveTextContent( 'Bundles' );
+	} );
+
+	it( 'prefers a supplied countLabel for the accessible phrasing', () => {
+		const { container } = render( <Breadcrumbs items={ [ { label: 'Subscribers', count: 85, countLabel: '85 subscribers total' } ] } /> );
+		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', () => {
+		const { container } = render( <Breadcrumbs items={ [ { label: 'Plans', url: '#/', count: 12 }, { label: 'Add plan' } ] } /> );
+		const link = screen.getByRole( 'link', { name: 'Plans' } );
+		expect( link.getAttribute( 'href' ) ).toBe( '#/' );
+		expect( link ).not.toHaveTextContent( '(12)' );
+		const 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', () => {
+		document.documentElement.lang = 'de-DE';
+		const { container } = render( <Breadcrumbs items={ [ { label: 'Abonnenten', count: 1234 } ] } /> );
+		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', () => {
+		document.documentElement.lang = 'pt-PT-ao90';
+		const { container } = render( <Breadcrumbs items={ [ { label: 'Planos', count: 1234 } ] } /> );
+		expect( container.querySelector( '.newspack-breadcrumbs__count [aria-hidden="true"]' ).textContent ).toMatch( /^\(1\D?234\)$/ );
+	} );
 } );

package/src/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/src/button/index.test.js

@@ -0,0 +1,143 @@
+/**
+ * External dependencies.
+ */
+import { act, render, screen } from '@testing-library/react';
+import { MemoryRouter, useHistory } from 'react-router-dom';
+
+/**
+ * Internal dependencies.
+ */
+import Button from './';
+
+const HistoryGrabber = ( { historyRef } ) => {
+	historyRef.current = useHistory();
+	return null;
+};
+
+const clickButton = async () => {
+	await act( async () => {
+		screen.getByRole( 'button', { name: 'Save' } ).click();
+	} );
+};
+
+describe( 'Button href with onClick', () => {
+	it( 'awaits the onClick, then pushes the route', async () => {
+		const historyRef = { current: null };
+		const onClick = jest.fn().mockResolvedValue( undefined );
+		render(
+			<MemoryRouter>
+				<HistoryGrabber historyRef={ historyRef } />
+				<Button href="#/next" onClick={ onClick }>
+					Save
+				</Button>
+			</MemoryRouter>
+		);
+
+		await clickButton();
+		expect( onClick ).toHaveBeenCalled();
+		// The leading '#' is stripped so the router sees a route, not a fragment.
+		expect( historyRef.current.location.pathname ).toBe( '/next' );
+	} );
+} );
+
+// `useHistory` returns undefined outside a wizard, leaving no route table for the
+// href to name.
+describe( 'Button href with onClick outside a router', () => {
+	// jsdom's real location logs "Not implemented: navigation" rather than
+	// navigating, so swap in a plain object to assert against and put the
+	// original back afterwards.
+	const withStubbedLocation = async fn => {
+		const original = window.location;
+		delete window.location;
+		window.location = { href: '' };
+		try {
+			return await fn();
+		} finally {
+			window.location = original;
+		}
+	};
+
+	it( 'awaits the onClick, then navigates to the href', async () => {
+		const onClick = jest.fn().mockResolvedValue( undefined );
+		await withStubbedLocation( async () => {
+			render(
+				<Button href="/wp-admin/admin.php?page=next" onClick={ onClick }>
+					Save
+				</Button>
+			);
+
+			await clickButton();
+			expect( onClick ).toHaveBeenCalled();
+			expect( window.location.href ).toBe( '/wp-admin/admin.php?page=next' );
+		} );
+	} );
+
+	it( 'hands the click event to a combined href and onClick handler', async () => {
+		const onClick = jest.fn();
+		await withStubbedLocation( async () => {
+			render(
+				<Button href="/wp-admin/admin.php?page=next" onClick={ onClick }>
+					Save
+				</Button>
+			);
+
+			await clickButton();
+			expect( onClick ).toHaveBeenCalledWith( expect.objectContaining( { type: 'click' } ) );
+		} );
+	} );
+
+	it( 'runs an onClick with no href without touching navigation', async () => {
+		const onClick = jest.fn();
+		await withStubbedLocation( async () => {
+			render( <Button onClick={ onClick }>Save</Button> );
+
+			await clickButton();
+			expect( onClick ).toHaveBeenCalled();
+			expect( window.location.href ).toBe( '' );
+		} );
+	} );
+
+	it( 'drops a javascript: href and still runs the onClick', async () => {
+		const warn = jest.spyOn( console, 'warn' ).mockImplementation( () => {} );
+		const onClick = jest.fn().mockResolvedValue( undefined );
+		await withStubbedLocation( async () => {
+			// eslint-disable-next-line no-script-url
+			render(
+				<Button href="javascript:alert(1)" onClick={ onClick }>
+					Save
+				</Button>
+			);
+
+			await clickButton();
+			expect( onClick ).toHaveBeenCalled();
+			expect( window.location.href ).toBe( '' );
+		} );
+		expect( warn ).toHaveBeenCalledWith( expect.stringContaining( 'javascript:' ) );
+		warn.mockRestore();
+	} );
+} );
+
+describe( 'Button with a javascript: href alone', () => {
+	const link = () => screen.getByText( 'Save' ).closest( 'a' );
+
+	it( 'renders no link', () => {
+		const warn = jest.spyOn( console, 'warn' ).mockImplementation( () => {} );
+		render( <Button href="JavaScript:alert(1)">Save</Button> );
+
+		expect( link() ).toBeNull();
+		warn.mockRestore();
+	} );
+
+	it( 'sees through interleaved control characters', () => {
+		const warn = jest.spyOn( console, 'warn' ).mockImplementation( () => {} );
+		render( <Button href={ 'java\nscript:alert(1)' }>Save</Button> );
+
+		expect( link() ).toBeNull();
+		warn.mockRestore();
+	} );
+
+	it( 'leaves an ordinary href alone', () => {
+		render( <Button href="/wp-admin/admin.php?page=next">Save</Button> );
+		expect( link() ).toHaveAttribute( 'href', '/wp-admin/admin.php?page=next' );
+	} );
+} );

package/src/button/index.tsx

@@ -6,7 +6,7 @@
  * WordPress dependencies.
  */
 import { Button as BaseComponent } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,23 +20,48 @@ type OriginalButtonProps = typeof BaseComponent.defaultProps;
 type Props = OriginalButtonProps & {
 	href?: string;
 	loading?: boolean;
-	onClick?: () => void;
+	onClick?: ( event?: React.MouseEvent< HTMLElement > ) => void;
 };
 
+// Control characters are stripped first, as browsers do, so `java\nscript:`
+// cannot slip past.
+const isJavascriptHref = ( href?: string ) =>
+	'string' === typeof href &&
+	href
+		.replace( /[\u0000-\u0020]/g, '' )
+		.toLowerCase()
+		.startsWith( 'javascript:' );
+
 const Button = ( { href, loading = undefined, onClick, ...otherProps }: Props ) => {
 	const history = useHistory();
 	const [ isAwaitingOnClick, setIsAwaitingOnClick ] = useState( false );
 
+	const isUnsafeHref = isJavascriptHref( href );
+	const safeHref = isUnsafeHref ? undefined : href;
+
+	useEffect( () => {
+		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 as Props ).onClick = async () => {
+	if ( safeHref && onClick ) {
+		( otherProps as Props ).onClick = async ( event?: React.MouseEvent< HTMLElement > ) => {
 			setIsAwaitingOnClick( true );
-			await onClick();
+			await onClick( event );
 			setIsAwaitingOnClick( false );
-			history.push( ( href || '' ).replace( '#', '' ) );
+			// Outside a Router the href can only mean a real URL.
+			if ( history ) {
+				history.push( safeHref.replace( '#', '' ) );
+			} else {
+				window.location.href = safeHref;
+			}
 		};
 	} else {
-		( otherProps as Props ).href = href;
+		( otherProps as Props ).href = safeHref;
 		( otherProps as Props ).onClick = onClick;
 	}
 	if ( isAwaitingOnClick ) {