newspack-components 4.5.0 → 4.6.0

package/src/breadcrumbs/index.js

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+import { Link, Stack, Text } from '@wordpress/ui';
+
+/**
+ * Internal dependencies.
+ */
+import './style.scss';
+
+/**
+ * Newspack breadcrumb trail.
+ *
+ * Data-driven: the last item is the current page (the single h1, never a link);
+ * every other item renders as a link when it has a `url`, otherwise plain text.
+ * A plain `<a href>` drives both full admin URLs and hash routes, so the
+ * component needs no router context.
+ *
+ * @param {Object} props
+ * @param {Array}  props.items Trail items: `{ label, url? }`.
+ * @return {JSX.Element|null} Breadcrumbs component.
+ */
+const Breadcrumbs = ( { items = [] } ) => {
+	if ( ! items.length ) {
+		return null;
+	}
+
+	const preceding = items.slice( 0, -1 );
+	const last = items[ items.length - 1 ];
+
+	return (
+		<nav aria-label={ __( 'Breadcrumbs', 'newspack-plugin' ) }>
+			<Stack render={ <ul /> } direction="row" align="center" className="newspack-breadcrumbs__list">
+				{ 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>
+						) : (
+							<Text variant="body-lg">{ item.label }</Text>
+						) }
+						<Text variant="body-lg" aria-hidden="true" className="newspack-breadcrumbs__separator">
+							/
+						</Text>
+					</li>
+				) ) }
+				{ last && last.label && (
+					<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 }
+						</Text>
+					</li>
+				) }
+			</Stack>
+		</nav>
+	);
+};
+
+export default Breadcrumbs;

package/src/breadcrumbs/index.test.js

@@ -0,0 +1,59 @@
+/**
+ * External dependencies.
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies.
+ */
+import Breadcrumbs from './';
+
+describe( 'Breadcrumbs', () => {
+	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 } );
+		expect( h1s ).toHaveLength( 1 );
+		expect( h1s[ 0 ] ).toHaveTextContent( 'Settings' );
+		expect( screen.queryByRole( 'link', { name: 'Settings' } ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'renders a non-last item with a url as a link, without a url as text', () => {
+		render( <Breadcrumbs items={ [ { label: 'Advertising' }, { label: 'Sponsors', url: '/wp-admin/x' }, { label: 'All sponsors' } ] } /> );
+		const links = screen.getAllByRole( 'link' );
+		expect( links ).toHaveLength( 1 );
+		expect( links[ 0 ] ).toHaveTextContent( 'Sponsors' );
+		expect( links[ 0 ].getAttribute( 'href' ) ).toBe( '/wp-admin/x' );
+		expect( screen.getByText( 'Advertising' ) ).toBeInTheDocument();
+	} );
+
+	it( 'does not special-case the first item: it links when it has a url', () => {
+		render( <Breadcrumbs items={ [ { label: 'Audience', url: '#/' }, { label: 'Donations' } ] } /> );
+		const link = screen.getByRole( 'link', { name: 'Audience' } );
+		expect( link.getAttribute( 'href' ) ).toBe( '#/' );
+	} );
+
+	it( 'renders a single-item trail as just the h1 with no separator', () => {
+		const { container } = render( <Breadcrumbs items={ [ { label: 'Dashboard' } ] } /> );
+		expect( screen.getByRole( 'heading', { level: 1 } ) ).toHaveTextContent( 'Dashboard' );
+		expect( container.querySelector( '.newspack-breadcrumbs__separator' ) ).toBeNull();
+		expect( screen.queryByRole( 'link' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'renders a "/" separator after each preceding item', () => {
+		const { container } = render( <Breadcrumbs items={ [ { label: 'Audience' }, { label: 'Access control' } ] } /> );
+		const separators = container.querySelectorAll( '.newspack-breadcrumbs__separator' );
+		expect( separators ).toHaveLength( 1 );
+		expect( separators[ 0 ] ).toHaveTextContent( '/' );
+		expect( separators[ 0 ] ).toHaveAttribute( 'aria-hidden', 'true' );
+	} );
+
+	it( 'renders no heading when the last item has no label', () => {
+		render( <Breadcrumbs items={ [ { label: undefined } ] } /> );
+		expect( screen.queryByRole( 'heading', { level: 1 } ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'renders nothing when there are no items', () => {
+		const { container } = render( <Breadcrumbs items={ [] } /> );
+		expect( container.querySelector( 'nav' ) ).not.toBeInTheDocument();
+	} );
+} );

package/src/breadcrumbs/style.scss

@@ -0,0 +1,41 @@
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
+.newspack-breadcrumbs__list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+
+	> li {
+		flex-shrink: 0;
+		margin: 0;
+
+		a {
+			color: wp-colors.$gray-900;
+
+			&:hover,
+			&:focus,
+			&:active {
+				color: wp-colors.$gray-900;
+			}
+		}
+	}
+
+	> li:last-child {
+		flex-shrink: 1;
+		min-width: 0;
+	}
+}
+
+.newspack-breadcrumbs__separator {
+	color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
+	margin: 0 var(--wpds-dimension-gap-sm, 8px);
+	user-select: none;
+}
+
+.newspack-breadcrumbs__list h1.newspack-breadcrumbs__current {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	padding: 0;
+	line-height: normal;
+}

package/src/card/core-card.js

@@ -34,6 +34,7 @@ const CoreCard = ( {
 	footerStyle,
 	disabled,
 	icon,
+	iconElement,
 	iconBackgroundColor,
 	isActive,
 	isDraggable,
@@ -60,7 +61,7 @@ const CoreCard = ( {
 		isDraggable && 'newspack-card--core__is-draggable',
 		isNarrow && 'newspack-card--core__is-narrow',
 		isSmall && 'newspack-card--core__is-small',
-		icon && 'newspack-card--core__has-icon',
+		( icon || iconElement ) && 'newspack-card--core__has-icon',
 		iconBackgroundColor && 'newspack-card--core__has-icon-background-color',
 		isActive && 'newspack-card--core__is-active',
 		disabled && 'newspack-card--core__is-disabled',
@@ -87,7 +88,7 @@ const CoreCard = ( {
 	const headerIsButton = !! onHeaderClick && ! hasInteractiveHeaderChildren;
 	return (
 		<CardWrapper as={ as } className={ classes } { ...otherProps }>
-			{ ( header || icon ) && (
+			{ ( header || icon || iconElement ) && (
 				<CardHeader
 					as={ headerIsButton ? 'button' : undefined }
 					className={ classNames(
@@ -125,10 +126,14 @@ const CoreCard = ( {
 							</div>
 						</div>
 					) }
-					{ icon && (
-						<div className="newspack-card--core__icon">
-							<Icon icon={ icon } height={ isSmall ? 24 : 48 } width={ isSmall ? 24 : 48 } />
-						</div>
+					{ iconElement ? (
+						<div className="newspack-card--core__icon-slot">{ iconElement }</div>
+					) : (
+						icon && (
+							<div className="newspack-card--core__icon">
+								<Icon icon={ icon } height={ isSmall ? 24 : 48 } width={ isSmall ? 24 : 48 } />
+							</div>
+						)
 					) }
 					{ actions?.length > 0 && actionType === 'toggle' && (
 						<ToggleControl

package/src/card/index.js

@@ -65,7 +65,6 @@ class Card extends Component {
 		const classes = classNames(
 			'newspack-card',
 			className,
-			buttonsCard && 'newspack-card__buttons-card',
 			headerActions && 'newspack-card__header-actions',
 			isMedium && 'newspack-card__is-medium',
 			isNarrow && 'newspack-card__is-narrow',

package/src/card/style-core.scss

@@ -14,6 +14,11 @@
 	svg {
 		transition: fill 125ms ease-in-out;
 	}
+	// Slot for a pre-rendered icon element that owns its own badge.
+	&__icon-slot {
+		align-items: center;
+		display: flex;
+	}
 	&__icon {
 		border-radius: wp-vars.$radius-round;
 		display: grid;
@@ -149,6 +154,15 @@
 		border: none;
 		cursor: pointer;
 		text-align: left;
+
+		// The header becomes a real button (headerIsButton) with no border, so
+		// give keyboard focus an explicit on-brand ring. Inset so it isn't clipped
+		// by the card; the transparent outline keeps it visible under Windows High
+		// Contrast / forced-colors mode.
+		&:focus-visible {
+			box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
+			outline: 2px solid transparent;
+		}
 	}
 	&__header-content {
 		display: grid;

package/src/card/style.scss

@@ -15,15 +15,6 @@
 		padding: 32px 64px;
 	}
 
-	// Buttons Card
-
-	&__buttons-card {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 16px;
-		margin: 32px 0;
-	}
-
 	// Header Actions Card
 
 	&__header-actions {

package/src/card-feature/README.md

@@ -11,7 +11,7 @@ A card component for presenting a named feature or setting with a predictable, s
 
 | State | Condition | Button | Dropdown | Badge |
 |---|---|---|---|---|
-| **Unmet requirements** | `requirements` is set | "Enable" — disabled (clickable if `requirementsActionable`) | Hidden | Error badge with `requirements` text |
+| **Unmet requirements** | `requirements` is set | "Enable" — disabled (clickable if `requirementsActionable`) | Shown if `enabled` and `requirementsActionable` (and `moreControls` provided); otherwise hidden | Error badge with `requirements` text |
 | **Disabled** | `!enabled`, no requirements | "Enable" | Hidden | None |
 | **Enabled** | `enabled`, no requirements | "Configure" | Shown if `moreControls` provided | Success badge ("Enabled") |
 
@@ -155,12 +155,12 @@ import { __ } from '@wordpress/i18n';
 | `icon` | `CardFeatureIcon` | — | Icon displayed on the right. See `CardFeatureIcon` below. |
 | `enabled` | `boolean` | `false` | Whether the feature is currently enabled |
 | `requirements` | `string` | — | When set, enters the unmet-requirements state; value is used as the error badge text |
-| `requirementsActionable` | `boolean` | `false` | When `requirements` is set, keep the primary button clickable so it can remediate the unmet requirement |
+| `requirementsActionable` | `boolean` | `false` | When `requirements` is set, keep the primary button clickable so it can remediate the unmet requirement, and keep the "More" dropdown visible on an enabled card (degraded but still operable) |
 | `enableLabel` | `string` | `"Enable"` | Primary button label when not enabled |
 | `configureLabel` | `string` | `"Configure"` | Primary button label when enabled |
 | `onEnable` | `() => void` | — | Called when the primary button is clicked and the feature is not enabled |
 | `onConfigure` | `() => void` | — | Called when the primary button is clicked and the feature is enabled |
-| `moreControls` | `MoreControl[]` | — | Items for the "More" dropdown, shown only when enabled |
+| `moreControls` | `MoreControl[]` | — | Items for the "More" dropdown. Shown when `enabled` and either there are no `requirements` or `requirementsActionable` is set |
 | `badgeText` | `string` | `"Enabled"` | Badge text shown when enabled |
 | `badgeLevel` | `BadgeLevel` | `"success"` | Badge level shown when enabled |
 | `className` | `string` | — | Additional class name applied to the card element |

package/src/card-feature/index.tsx

@@ -7,6 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { isValidElement } from '@wordpress/element';
 import { DropdownMenu, __experimentalHStack as HStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
 import { moreVertical } from '@wordpress/icons';
 
@@ -38,14 +39,14 @@ type CardFeatureIcon = {
 type MoreControl = {
 	title: string;
 	onClick: () => void;
-	icon?: React.ReactNode;
+	icon?: JSX.Element;
 };
 
 type CardFeatureProps = {
 	title: string;
 	description?: string;
-	/** Icon displayed on the right-hand side of the title and description. */
-	icon?: CardFeatureIcon;
+	/** Icon shown beside the title: a descriptor (coloured badge) or a ready element rendered as-is. */
+	icon?: CardFeatureIcon | React.ReactElement;
 	/** Whether the feature is currently enabled. */
 	enabled?: boolean;
 	/**
@@ -57,18 +58,22 @@ type CardFeatureProps = {
 	requirements?: string;
 	/**
 	 * When `requirements` is set, keep the primary button clickable so the
-	 * user can remediate the unmet requirement from this card.
+	 * user can remediate the unmet requirement from this card, and keep the
+	 * "More" dropdown available — the feature is degraded but still operable
+	 * (e.g. can be disabled), unlike a hard-locked requirement.
 	 */
 	requirementsActionable?: boolean;
 	/** Primary button label when not enabled. Default: "Enable". */
 	enableLabel?: string;
+	/** Show the primary button as busy (spinner) and disabled while an action is in flight. */
+	busy?: boolean;
 	/** Primary button label when enabled. Default: "Configure". */
 	configureLabel?: string;
 	/** Called when the primary button is clicked and the feature is not enabled. */
 	onEnable?: () => void;
 	/** Called when the primary button is clicked and the feature is enabled. */
 	onConfigure?: () => void;
-	/** Controls rendered inside the "More" dropdown, shown only when enabled. */
+	/** Controls rendered inside the "More" dropdown, shown when enabled — including the unmet-requirements state when `requirementsActionable`. */
 	moreControls?: MoreControl[];
 	/** Badge text shown when enabled. Default: "Enabled". */
 	badgeText?: string;
@@ -92,6 +97,7 @@ const CardFeature = ( {
 	requirements,
 	requirementsActionable = false,
 	enableLabel,
+	busy = false,
 	configureLabel,
 	onEnable,
 	onConfigure,
@@ -114,6 +120,7 @@ const CardFeature = ( {
 
 	const isConfigureState = enabled && ! requirements;
 	const buttonLabel = isConfigureState ? configureLabel ?? __( 'Configure', 'newspack-plugin' ) : enableLabel ?? __( 'Enable', 'newspack-plugin' );
+	const showMoreControls = enabled && !! moreControls?.length && ( ! requirements || requirementsActionable );
 
 	const handleButtonClick = () => {
 		if ( isConfigureState ) {
@@ -123,13 +130,31 @@ const CardFeature = ( {
 		}
 	};
 
-	const iconClasses = icon
+	const iconDescriptor = icon && ! isValidElement( icon ) ? ( icon as CardFeatureIcon ) : null;
+	const iconClasses = iconDescriptor
 		? classnames( 'newspack-card-feature__icon', {
-				'newspack-card-feature__icon--radius-small': !! icon.backgroundColor && icon.radius !== 'full',
-				'newspack-card-feature__icon--radius-full': icon.radius === 'full',
+				'newspack-card-feature__icon--radius-small': !! iconDescriptor.backgroundColor && iconDescriptor.radius !== 'full',
+				'newspack-card-feature__icon--radius-full': iconDescriptor.radius === 'full',
 		  } )
 		: undefined;
 
+	let renderedIcon = null;
+	if ( isValidElement( icon ) ) {
+		renderedIcon = icon;
+	} else if ( iconDescriptor ) {
+		renderedIcon = (
+			<div
+				className={ iconClasses }
+				style={ {
+					backgroundColor: iconDescriptor.backgroundColor,
+					color: iconDescriptor.fill,
+				} }
+			>
+				{ iconDescriptor.node }
+			</div>
+		);
+	}
+
 	return (
 		<Card
 			className={ classes }
@@ -143,29 +168,20 @@ const CardFeature = ( {
 								<h2 className="newspack-card-feature__title">{ title }</h2>
 								{ description && <p className="newspack-card-feature__description">{ description }</p> }
 							</div>
-							{ icon && (
-								<div
-									className={ iconClasses }
-									style={ {
-										backgroundColor: icon.backgroundColor,
-										color: icon.fill,
-									} }
-								>
-									{ icon.node }
-								</div>
-							) }
+							{ renderedIcon }
 						</HStack>
 						<HStack alignment="edge">
 							<HStack expanded={ false } spacing="8px">
 								<Button
 									variant={ isConfigureState ? 'tertiary' : 'secondary' }
-									disabled={ isMuted && ! requirementsActionable }
+									disabled={ ( isMuted && ! requirementsActionable ) || busy }
+									isBusy={ busy }
 									onClick={ handleButtonClick }
 									size="compact"
 								>
 									{ buttonLabel }
 								</Button>
-								{ isConfigureState && !! moreControls?.length && (
+								{ showMoreControls && (
 									<DropdownMenu
 										icon={ moreVertical }
 										label={ __( 'More', 'newspack-plugin' ) }

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

@@ -19,6 +19,7 @@ const CardSettingsGroup = ( {
 	className,
 	disabled = false,
 	icon = null,
+	iconElement = null,
 	headerAction,
 	title = '',
 	description = '',
@@ -31,6 +32,8 @@ const CardSettingsGroup = ( {
 	className?: string;
 	disabled?: boolean;
 	icon?: React.ReactNode;
+	/** A ready-rendered icon element (e.g. `<IntegrationIcon>`) shown as-is, without the default icon badge. */
+	iconElement?: React.ReactNode;
 	title: string;
 	headerAction?: {
 		label: string;
@@ -65,6 +68,7 @@ const CardSettingsGroup = ( {
 				onToggle: onEnable,
 				disabled,
 				icon,
+				iconElement,
 				iconBackgroundColor: true,
 				isActive,
 				title,

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

@@ -269,7 +269,7 @@ const CardSortableList = ( {
 		return itemTops.length; // below all items
 	};
 
-	const handleDragEnd = ( event: DragEvent ) => {
+	const handleDragEnd = ( event: React.DragEvent ) => {
 		// Take a local copy of measurements before clearDragState nulls it.
 		const m = measurements;
 		const sourceIndex = draggingIndex;

package/src/confirm-dialog/index.test.js

@@ -0,0 +1,142 @@
+/**
+ * External dependencies.
+ */
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { MemoryRouter, useHistory } from 'react-router-dom';
+
+/**
+ * Internal dependencies.
+ */
+import ConfirmDialog from './';
+
+const HistoryGrabber = ( { historyRef } ) => {
+	historyRef.current = useHistory();
+	return null;
+};
+
+const renderWithHistory = ( routerProps = {} ) => {
+	const historyRef = { current: null };
+	render(
+		<MemoryRouter { ...routerProps }>
+			<HistoryGrabber historyRef={ historyRef } />
+			<ConfirmDialog when confirmButtonText="Discard changes" cancelButtonText="Keep editing">
+				Unsaved changes
+			</ConfirmDialog>
+		</MemoryRouter>
+	);
+	return historyRef.current;
+};
+
+// The modal's X close button reuses the cancel label as its aria-label, so
+// query by visible text to hit the actual footer buttons.
+const confirmNavigation = () => fireEvent.click( screen.getByText( 'Discard changes', { selector: 'button' } ) );
+const cancelNavigation = () => fireEvent.click( screen.getByText( 'Keep editing', { selector: 'button' } ) );
+const dialog = () => screen.queryByText( 'Unsaved changes' );
+
+describe( 'ConfirmDialog navigation blocking', () => {
+	it( 'blocks navigation and stays on the current page on cancel', () => {
+		const history = renderWithHistory();
+		act( () => history.push( '/next' ) );
+		expect( dialog() ).toBeInTheDocument();
+		expect( history.location.pathname ).toBe( '/' );
+
+		const replaceSpy = jest.spyOn( history, 'replace' );
+		cancelNavigation();
+		expect( dialog() ).not.toBeInTheDocument();
+		// The URL is re-synced to the page the user chose to stay on.
+		expect( replaceSpy ).toHaveBeenCalledTimes( 1 );
+		expect( history.location.pathname ).toBe( '/' );
+	} );
+
+	it( 'replays a blocked push on confirm: re-sync replace first, then push, and re-arms the blocker', () => {
+		const history = renderWithHistory();
+		const replaceSpy = jest.spyOn( history, 'replace' );
+		const pushSpy = jest.spyOn( history, 'push' );
+
+		act( () => history.push( '/next' ) );
+		expect( history.location.pathname ).toBe( '/' );
+		confirmNavigation();
+		expect( history.location.pathname ).toBe( '/next' );
+
+		// Replay order: re-sync replace fires before the target push.
+		const resyncOrder = replaceSpy.mock.invocationCallOrder[ 0 ];
+		const replayOrder = pushSpy.mock.invocationCallOrder[ 1 ];
+		expect( replaceSpy ).toHaveBeenCalledTimes( 1 );
+		expect( pushSpy ).toHaveBeenCalledTimes( 2 );
+		expect( resyncOrder ).toBeLessThan( replayOrder );
+
+		// The bypass only lets the confirmed navigation through; the next one is blocked again.
+		act( () => history.push( '/another' ) );
+		expect( history.location.pathname ).toBe( '/next' );
+		expect( dialog() ).toBeInTheDocument();
+	} );
+
+	it( 'replays a blocked REPLACE with replace, not push', () => {
+		const history = renderWithHistory();
+		const pushSpy = jest.spyOn( history, 'push' );
+
+		act( () => history.replace( '/replaced' ) );
+		expect( dialog() ).toBeInTheDocument();
+		expect( history.location.pathname ).toBe( '/' );
+
+		confirmNavigation();
+		expect( history.location.pathname ).toBe( '/replaced' );
+		expect( pushSpy ).not.toHaveBeenCalled();
+		expect( history.length ).toBe( 1 );
+	} );
+
+	it( 'replays a blocked POP (back navigation) as a push after the re-sync', () => {
+		const history = renderWithHistory( { initialEntries: [ '/start', '/current' ], initialIndex: 1 } );
+		act( () => history.goBack() );
+		expect( dialog() ).toBeInTheDocument();
+		expect( history.location.pathname ).toBe( '/current' );
+
+		confirmNavigation();
+		expect( history.location.pathname ).toBe( '/start' );
+		// Pushed rather than popped: the target becomes a new forward entry.
+		expect( history.length ).toBe( 3 );
+	} );
+
+	// React re-reports errors thrown in event handlers as uncaught window
+	// errors; swallow them so the intentional throws don't fail the test.
+	const withNavigationError = fn => {
+		const consoleError = jest.spyOn( console, 'error' ).mockImplementation( () => {} );
+		const onWindowError = event => event.preventDefault();
+		window.addEventListener( 'error', onWindowError );
+		try {
+			fn();
+		} finally {
+			window.removeEventListener( 'error', onWindowError );
+			consoleError.mockRestore();
+		}
+	};
+
+	it( 'keeps blocking after a confirmed navigation throws', () => {
+		const history = renderWithHistory();
+
+		act( () => history.push( '/next' ) );
+		jest.spyOn( history, 'push' ).mockImplementationOnce( () => {
+			throw new Error( 'nav failed' );
+		} );
+		withNavigationError( () => confirmNavigation() );
+
+		// bypassBlock was reset by the finally, so navigation is still protected.
+		act( () => history.push( '/elsewhere' ) );
+		expect( history.location.pathname ).toBe( '/' );
+		expect( dialog() ).toBeInTheDocument();
+	} );
+
+	it( 'keeps blocking after a cancel URL re-sync throws', () => {
+		const history = renderWithHistory();
+
+		act( () => history.push( '/next' ) );
+		jest.spyOn( history, 'replace' ).mockImplementationOnce( () => {
+			throw new Error( 'replace failed' );
+		} );
+		withNavigationError( () => cancelNavigation() );
+
+		act( () => history.push( '/elsewhere' ) );
+		expect( history.location.pathname ).toBe( '/' );
+		expect( dialog() ).toBeInTheDocument();
+	} );
+} );

package/src/confirm-dialog/index.tsx

@@ -58,6 +58,7 @@ function ConfirmDialog(
 		onCancel = noOp,
 		when = false,
 		isOpen = false,
+		children,
 		...otherProps
 	}: ConfirmDialogProps,
 	ref: React.Ref< HTMLDivElement >
@@ -65,6 +66,9 @@ function ConfirmDialog(
 	const [ showDialog, setShowDialog ] = useState( isOpen );
 	const history = useHistory();
 	const pendingNavigation = useRef< ( () => void ) | null >( null );
+	// While true, the blocker lets navigation through — used so the confirmed
+	// ("Discard changes") navigation isn't caught by the still-active blocker.
+	const bypassBlock = useRef( false );
 
 	const handleOnConfirm = useCallback( () => {
 		setShowDialog( false );
@@ -76,8 +80,16 @@ function ConfirmDialog(
 	const handleOnCancel = useCallback( () => {
 		setShowDialog( false );
 		pendingNavigation.current = null;
+		// A POP may have moved the URL to the target before it was blocked; put
+		// it back so the address bar matches the page the user chose to stay on.
+		bypassBlock.current = true;
+		try {
+			history.replace( history.location );
+		} finally {
+			bypassBlock.current = false;
+		}
 		onCancel();
-	}, [ onCancel, pendingNavigation ] );
+	}, [ onCancel, history ] );
 
 	// Block navigation when there are unsaved changes.
 	useEffect( () => {
@@ -85,12 +97,25 @@ function ConfirmDialog(
 			return;
 		}
 		const unblock = history.block( ( location: string, action: string ) => {
+			// Let our own confirmed navigation through instead of re-blocking it.
+			if ( bypassBlock.current ) {
+				return undefined;
+			}
 			pendingNavigation.current = () => {
-				unblock();
-				if ( action === 'REPLACE' ) {
-					history.replace( location );
-				} else {
-					history.push( location );
+				bypassBlock.current = true;
+				try {
+					// A browser/anchor POP (e.g. a breadcrumb or back link) moves the URL
+					// to the target before navigation is blocked, and v5 leaves the hash
+					// there, so pushing the target would be a no-op. Re-sync to the
+					// still-current location first so the real navigation actually fires.
+					history.replace( history.location );
+					if ( action === 'REPLACE' ) {
+						history.replace( location );
+					} else {
+						history.push( location );
+					}
+				} finally {
+					bypassBlock.current = false;
 				}
 			};
 			setShowDialog( true );
@@ -126,7 +151,9 @@ function ConfirmDialog(
 			onConfirm={ handleOnConfirm }
 			onCancel={ handleOnCancel }
 			__experimentalHideHeader={ false }
-		/>
+		>
+			{ children }
+		</BaseComponent>
 	);
 }
 export default forwardRef( ConfirmDialog );