newspack-components 4.8.1-alpha.1 → 4.9.0

package/src/card-feature/index.test.js

@@ -61,7 +61,7 @@ describe( 'CardFeature', () => {
 		} );
 
 		it( 'names the feature in the configure state too', () => {
-			render( <CardFeature title="Content Gifting" enabled /> );
+			render( <CardFeature title="Content Gifting" enabled onConfigure={ () => {} } /> );
 			expect( screen.getByRole( 'button', { name: 'Configure Content Gifting' } ) ).toBeInTheDocument();
 		} );
 
@@ -108,6 +108,43 @@ describe( 'CardFeature', () => {
 			expect( onEnable ).not.toHaveBeenCalled();
 		} );
 
+		// A button reading Configure with nothing behind it would click to nowhere.
+		it( 'drops the primary button once enabled when there is nothing to configure', () => {
+			render(
+				<CardFeature title="Content gifting" enabled onEnable={ jest.fn() } moreControls={ [ { title: 'Disable', onClick: jest.fn() } ] } />
+			);
+			expect( screen.queryByRole( 'button', { name: /Configure/ } ) ).toBeNull();
+			expect( moreMenu() ).toBeInTheDocument();
+		} );
+
+		// Enabling removes the button that was just used; without a hand-off,
+		// keyboard focus falls to the page.
+		it( 'hands focus to the More menu when enabling removes the focused button', () => {
+			const props = { title: 'Content gifting', onEnable: jest.fn(), moreControls: [ { title: 'Disable', onClick: jest.fn() } ] };
+			const { rerender } = render( <CardFeature { ...props } /> );
+			primaryButton().focus();
+			rerender( <CardFeature { ...props } enabled /> );
+			expect( moreMenu() ).toHaveFocus();
+		} );
+
+		it( 'leaves focus alone when the removed button did not have it', () => {
+			const props = { title: 'Content gifting', onEnable: jest.fn(), moreControls: [ { title: 'Disable', onClick: jest.fn() } ] };
+			const { rerender } = render(
+				<>
+					<CardFeature { ...props } />
+					<button>Elsewhere</button>
+				</>
+			);
+			screen.getByRole( 'button', { name: 'Elsewhere' } ).focus();
+			rerender(
+				<>
+					<CardFeature { ...props } enabled />
+					<button>Elsewhere</button>
+				</>
+			);
+			expect( screen.getByRole( 'button', { name: 'Elsewhere' } ) ).toHaveFocus();
+		} );
+
 		it( 'still routes to onEnable when enabled with an unmet requirement, since the button reads Enable', () => {
 			const onEnable = jest.fn();
 			const onConfigure = jest.fn();
@@ -162,7 +199,7 @@ describe( 'CardFeature', () => {
 		} );
 
 		it( 'leaves the enabled badge unlinked, since it explains nothing about the button', () => {
-			render( <CardFeature title="Content gifting" enabled /> );
+			render( <CardFeature title="Content gifting" enabled onConfigure={ () => {} } /> );
 			expect( primaryButton() ).not.toHaveAttribute( 'aria-describedby' );
 		} );
 
@@ -180,7 +217,7 @@ describe( 'CardFeature', () => {
 		it( 'accepts custom labels for both states', () => {
 			const { rerender } = render( <CardFeature title="Apple News" enableLabel="Connect" configureLabel="Manage connection" /> );
 			expect( screen.getByRole( 'button', { name: 'Connect Apple News' } ) ).toBeInTheDocument();
-			rerender( <CardFeature title="Apple News" enabled enableLabel="Connect" configureLabel="Manage connection" /> );
+			rerender( <CardFeature title="Apple News" enabled enableLabel="Connect" configureLabel="Manage connection" onConfigure={ () => {} } /> );
 			expect( screen.getByRole( 'button', { name: 'Manage connection Apple News' } ) ).toBeInTheDocument();
 		} );
 	} );
@@ -234,16 +271,16 @@ describe( 'CardFeature', () => {
 			expect( container.querySelector( '.newspack-card-feature__icon' ) ).toBeNull();
 		} );
 
-		it( 'applies the descriptor colours inline and rounds fully on request', () => {
+		it( 'applies the descriptor colours inline and rounds a backed icon', () => {
 			const { container } = render(
 				<CardFeature
 					title="Content gifting"
-					icon={ { node: <span data-testid="descriptor-icon" />, fill: '#003da5', backgroundColor: '#dfe7f4', radius: 'full' } }
+					icon={ { node: <span data-testid="descriptor-icon" />, fill: '#003da5', backgroundColor: '#dfe7f4' } }
 				/>
 			);
 			const iconContainer = container.querySelector( '.newspack-card-feature__icon' );
 			expect( screen.getByTestId( 'descriptor-icon' ) ).toBeInTheDocument();
-			expect( iconContainer ).toHaveClass( 'newspack-card-feature__icon--radius-full' );
+			expect( iconContainer ).toHaveClass( 'newspack-card-feature__icon--has-background' );
 			expect( iconContainer ).toHaveStyle( { backgroundColor: '#dfe7f4', color: '#003da5' } );
 		} );
 
@@ -252,17 +289,10 @@ describe( 'CardFeature', () => {
 			expect( container.querySelector( '.newspack-card-feature__icon' ) ).toHaveAttribute( 'aria-hidden', 'true' );
 		} );
 
-		it( 'falls back to small corners when a background is set without a radius', () => {
-			const { container } = render( <CardFeature title="Content gifting" icon={ { node: <span />, backgroundColor: '#dfe7f4' } } /> );
-			const iconContainer = container.querySelector( '.newspack-card-feature__icon' );
-			expect( iconContainer ).toHaveClass( 'newspack-card-feature__icon--radius-small' );
-			expect( iconContainer ).not.toHaveClass( 'newspack-card-feature__icon--radius-full' );
-		} );
-
-		it( 'leaves an unbacked descriptor icon without a radius class', () => {
+		it( 'leaves an unbacked descriptor icon without the background class', () => {
 			const { container } = render( <CardFeature title="Content gifting" icon={ { node: <span />, fill: '#003da5' } } /> );
 			const iconContainer = container.querySelector( '.newspack-card-feature__icon' );
-			expect( iconContainer ).not.toHaveClass( 'newspack-card-feature__icon--radius-small' );
+			expect( iconContainer ).not.toHaveClass( 'newspack-card-feature__icon--has-background' );
 		} );
 	} );
 

package/src/card-feature/index.tsx

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __, _x, sprintf } from '@wordpress/i18n';
-import { createElement, isValidElement } from '@wordpress/element';
+import { createElement, isValidElement, useCallback, useEffect, useRef } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 import { DropdownMenu } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
@@ -25,14 +25,8 @@ type CardFeatureIcon = {
 	node: React.ReactNode;
 	/** SVG fill colour, applied via currentColor. */
 	fill?: string;
-	/** Background colour for the icon container. */
+	/** Background colour for the icon container, which is always a circle. */
 	backgroundColor?: string;
-	/**
-	 * Border-radius of the icon container.
-	 * 'small' uses $radius-small (2px), 'full' uses $radius-round (50%).
-	 * Only relevant when backgroundColor is set, where it defaults to 'small'.
-	 */
-	radius?: 'small' | 'full';
 };
 
 type MoreControl = {
@@ -77,7 +71,7 @@ type CardFeatureProps = {
 	 * where the requirement rather than the feature is what the button acts on.
 	 */
 	onEnable?: () => void;
-	/** Called when the primary button is clicked while it reads "Configure": enabled, with no unmet requirements. */
+	/** Called when the primary button is clicked while it reads "Configure": enabled, with no unmet requirements. Omit it for a feature with nothing to configure, and that state shows no primary button. */
 	onConfigure?: () => void;
 	/** Controls rendered inside the "More" dropdown, shown when enabled — including the unmet-requirements state when `requirementsActionable`. */
 	moreControls?: MoreControl[];
@@ -134,6 +128,29 @@ const CardFeature = ( {
 		title
 	);
 	const showMoreControls = enabled && !! moreControls?.length && ( ! requirements || requirementsActionable );
+	// A Configure button with nothing behind it would click to nowhere.
+	const showPrimaryButton = ! isConfigureState || !! onConfigure;
+
+	// Enabling a feature with nothing to configure removes the button that was
+	// just used, so its focus goes to the More menu instead of the page. React
+	// detaches a ref before removing the node, which is the last point the
+	// button can still be read as focused.
+	const actionsRef = useRef< HTMLDivElement >( null );
+	const primaryButtonNode = useRef< HTMLElement | null >( null );
+	const primaryButtonLeftWithFocus = useRef( false );
+	const primaryButtonRef = useCallback( ( node: HTMLElement | null ) => {
+		if ( ! node && primaryButtonNode.current ) {
+			primaryButtonLeftWithFocus.current = primaryButtonNode.current === primaryButtonNode.current.ownerDocument.activeElement;
+		}
+		primaryButtonNode.current = node;
+	}, [] );
+	useEffect( () => {
+		if ( showPrimaryButton || ! primaryButtonLeftWithFocus.current ) {
+			return;
+		}
+		primaryButtonLeftWithFocus.current = false;
+		actionsRef.current?.querySelector< HTMLElement >( '.components-dropdown-menu__toggle' )?.focus();
+	}, [ showPrimaryButton ] );
 
 	const handleButtonClick = () => {
 		if ( isConfigureState ) {
@@ -146,8 +163,7 @@ const CardFeature = ( {
 	const iconDescriptor = icon && ! isValidElement( icon ) ? ( icon as CardFeatureIcon ) : null;
 	const iconClasses = iconDescriptor
 		? classnames( 'newspack-card-feature__icon', {
-				'newspack-card-feature__icon--radius-small': !! iconDescriptor.backgroundColor && iconDescriptor.radius !== 'full',
-				'newspack-card-feature__icon--radius-full': iconDescriptor.radius === 'full',
+				'newspack-card-feature__icon--has-background': !! iconDescriptor.backgroundColor,
 		  } )
 		: undefined;
 
@@ -183,19 +199,22 @@ const CardFeature = ( {
 			</Card.Header>
 			<Card.Content className="newspack-card-feature__actions">
 				<Stack direction="row" align="center" justify="space-between" gap="sm" wrap="wrap">
-					<Stack direction="row" align="center" gap="sm">
-						<Button
-							variant={ isConfigureState ? 'tertiary' : 'secondary' }
-							accessibleWhenDisabled
-							aria-describedby={ describedById }
-							aria-label={ buttonAccessibleLabel }
-							disabled={ ( isMuted && ! requirementsActionable ) || busy }
-							isBusy={ busy }
-							onClick={ handleButtonClick }
-							size="compact"
-						>
-							{ buttonLabel }
-						</Button>
+					<Stack ref={ actionsRef } direction="row" align="center" gap="sm">
+						{ showPrimaryButton && (
+							<Button
+								ref={ primaryButtonRef }
+								variant={ isConfigureState ? 'tertiary' : 'secondary' }
+								accessibleWhenDisabled
+								aria-describedby={ describedById }
+								aria-label={ buttonAccessibleLabel }
+								disabled={ ( isMuted && ! requirementsActionable ) || busy }
+								isBusy={ busy }
+								onClick={ handleButtonClick }
+								size="compact"
+							>
+								{ buttonLabel }
+							</Button>
+						) }
 						{ showMoreControls && (
 							<DropdownMenu
 								icon={ moreVertical }

package/src/card-feature/style.scss

@@ -49,11 +49,7 @@
 			width: wp-vars.$grid-unit-30;
 		}
 
-		&--radius-small {
-			border-radius: wp-vars.$radius-small;
-		}
-
-		&--radius-full {
+		&--has-background {
 			border-radius: wp-vars.$radius-round;
 		}
 	}

package/src/integration-icon/index.tsx

@@ -6,17 +6,17 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { espProviderIcons } from '../integration-icons';
+import { providerIcons } from '../integration-icons';
 import './style.scss';
 
 /**
- * The single source for how an ESP provider is shown: brand mark plus badge
- * background. A new provider needs an icon file, an `espProviderIcons` entry,
+ * The single source for how a provider is shown: brand mark plus badge
+ * background. A new provider needs an icon file, a `providerIcons` entry,
  * and a background rule in this component's stylesheet.
  */
 const IntegrationIcon = ( { provider, className }: { provider: string; className?: string } ) => {
-	const icons: Record< string, React.ReactNode > = espProviderIcons;
-	const node = Object.prototype.hasOwnProperty.call( espProviderIcons, provider ) ? icons[ provider ] : null;
+	const icons: Record< string, React.ReactNode > = providerIcons;
+	const node = Object.prototype.hasOwnProperty.call( providerIcons, provider ) ? icons[ provider ] : null;
 	if ( ! node ) {
 		return null;
 	}

package/src/integration-icon/style.scss

@@ -21,14 +21,26 @@
 		background: #004cff;
 	}
 
-	&--mailchimp {
-		background: #ffe01b;
+	&--beehiiv {
+		background: #060419;
 	}
 
 	&--constant-contact {
 		background: wp-colors.$gray-100;
 	}
 
+	&--fundraiseup {
+		background: #2bb77b;
+	}
+
+	&--gravity-forms {
+		background: #ff4f00;
+	}
+
+	&--mailchimp {
+		background: #ffe01b;
+	}
+
 	&--manual {
 		background: wp-colors.$gray-800;
 		color: wp-colors.$white;
@@ -39,4 +51,8 @@
 			fill: currentcolor;
 		}
 	}
+
+	&--salesforce {
+		background: #0d9dda;
+	}
 }

package/src/integration-icons/active-campaign.js

@@ -1,11 +1,7 @@
 const activeCampaign = (
 	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
 		<path
-			d="M16.6934 10.5811C17.1772 10.9036 17.4355 11.4194 17.4355 11.9678C17.4355 12.516 17.1449 13.0319 16.6934 13.3545L6.56445 20V18.6133C6.56445 18.1939 6.75844 17.7746 7.14551 17.5166L15.5 11.9678L7.14551 6.38672C6.79063 6.16086 6.56445 5.74175 6.56445 5.29004V4L16.6934 10.5811Z"
-			fill="white"
-		/>
-		<path
-			d="M6.56445 8.77441C6.56445 8.35519 7.04853 8.12873 7.37109 8.35449L12.6611 11.9355L11.9512 12.4189C11.4996 12.7091 10.9193 12.7092 10.4678 12.4189L9.30664 11.6777L6.56445 9.83887V8.77441Z"
+			d="M17.28 10.4037C17.8244 10.7666 18.115 11.3468 18.115 11.9637C18.115 12.5805 17.788 13.1609 17.28 13.5238L5.88501 21V19.4399C5.88501 18.9681 6.10324 18.4965 6.5387 18.2062L15.9375 11.9637L6.5387 5.68506C6.13946 5.43097 5.88501 4.95947 5.88501 4.45129V3L17.28 10.4037ZM5.88501 8.37122C5.88501 7.89959 6.4296 7.64482 6.79248 7.8988L12.7438 11.9275L11.9451 12.4713C11.4371 12.7977 10.7842 12.7978 10.2762 12.4713L8.96997 11.6375L5.88501 9.56873V8.37122Z"
 			fill="white"
 		/>
 	</svg>

package/src/integration-icons/beehiiv.js

@@ -0,0 +1,10 @@
+const beehiiv = (
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+		<path
+			d="M18.6602 11.4894H5.35668C5.19293 11.4883 5.03627 11.4225 4.92088 11.3063C4.80549 11.1901 4.74073 11.033 4.74073 10.8692V9.92487C4.7398 9.67122 4.78886 9.41988 4.88509 9.1852C4.98132 8.95052 5.12284 8.73709 5.30157 8.55712C5.4803 8.37714 5.69274 8.23414 5.92675 8.13629C6.16076 8.03843 6.41176 7.98764 6.6654 7.9868H17.3353C17.5889 7.98754 17.8398 8.03822 18.0738 8.13595C18.3078 8.23368 18.5203 8.37654 18.6991 8.55637C18.8779 8.7362 19.0195 8.94949 19.1158 9.18406C19.2122 9.41862 19.2614 9.66987 19.2607 9.92346V10.8685C19.2638 10.9491 19.2506 11.0296 19.2218 11.1049C19.193 11.1803 19.1492 11.249 19.0931 11.307C19.0369 11.365 18.9697 11.411 18.8953 11.4422C18.8209 11.4734 18.7409 11.4899 18.6602 11.4894ZM15.8574 6.96492H8.15947C7.99191 6.96343 7.8317 6.89593 7.71361 6.77704C7.59552 6.65816 7.52908 6.4975 7.52872 6.32994C7.52872 4.74919 8.80643 3.46302 10.3773 3.46302H13.641C15.2119 3.46302 16.4896 4.74919 16.4896 6.32994C16.4907 6.41334 16.4752 6.49613 16.4439 6.57345C16.4126 6.65077 16.3662 6.72106 16.3074 6.7802C16.2486 6.83934 16.1785 6.88615 16.1014 6.91787C16.0243 6.94959 15.9416 6.96558 15.8582 6.96492H15.8574ZM19.2755 12.5113H4.74073C3.7858 12.5113 3 13.3013 3 14.2619C3 15.2225 3.7858 16.0132 4.74073 16.0132H9.89879C10.0834 15.0216 10.9453 14.2619 11.9919 14.2619C12.4923 14.2631 12.9767 14.4386 13.3618 14.7582C13.7468 15.0778 14.0085 15.5216 14.1019 16.0132H19.2607C20.2149 16.0132 21 15.2225 21 14.2619C21 13.3013 20.2304 12.5113 19.2755 12.5113ZM18.6454 17.0358H14.1336V20.537H17.5214C18.4756 20.537 19.2607 19.7477 19.2607 18.7864V17.6708C19.2636 17.5882 19.2499 17.506 19.2202 17.4289C19.1906 17.3518 19.1457 17.2816 19.0883 17.2223C19.0308 17.163 18.962 17.1159 18.8859 17.0838C18.8098 17.0518 18.728 17.0354 18.6454 17.0358ZM5.35668 17.0358C5.189 17.0371 5.02861 17.1045 4.91037 17.2234C4.79213 17.3423 4.72559 17.5031 4.72523 17.6708V18.7864C4.72523 19.747 5.51102 20.537 6.46596 20.537H9.85298V17.0358H5.35668Z"
+			fill="white"
+		/>
+	</svg>
+);
+
+export default beehiiv;

package/src/integration-icons/gravity-forms.js

@@ -0,0 +1,10 @@
+const gravityForms = (
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+		<path
+			d="M8.74072 8.98989H24V4.73383H8.77618C6.75022 4.67092 4.79489 5.46964 3.41 6.92583C0.0886559 10.4377 0 19.2696 0 19.2696H23.8818V11.2749H19.5912V15.0019H4.58018C4.67474 13.6123 5.31889 11.1296 6.53633 9.84462C7.10785 9.25496 7.91399 8.9424 8.74072 8.98989Z"
+			fill="white"
+		/>
+	</svg>
+);
+
+export default gravityForms;

package/src/integration-icons/index.js

@@ -7,23 +7,34 @@ import { atSymbol } from '@wordpress/icons';
  * Internal dependencies
  */
 import activeCampaign from './active-campaign';
+import beehiiv from './beehiiv';
 import constantContact from './constant-contact';
+import fundraiseUp from './fundraise-up';
+import gravityForms from './gravity-forms';
 import mailchimp from './mailchimp';
+import salesforce from './salesforce';
 
 export { default as activeCampaign } from './active-campaign';
+export { default as beehiiv } from './beehiiv';
 export { default as constantContact } from './constant-contact';
 export { default as fundraiseUp } from './fundraise-up';
+export { default as gravityForms } from './gravity-forms';
 export { default as mailchimp } from './mailchimp';
 export { default as salesforce } from './salesforce';
 export { default as wisepops } from './wisepops';
 
-// ESP provider brand marks keyed by the slug the backend reports
-// (`Newspack_Newsletters::service_provider()`). Rendered via IntegrationIcon.
-export const espProviderIcons = {
+// Brand marks keyed by the ESP slug the backend reports
+// (`Newspack_Newsletters::service_provider()`), by integration ID, or by the
+// brand slug an integration maps to. Rendered via IntegrationIcon.
+export const providerIcons = {
 	active_campaign: activeCampaign,
 	mailchimp,
 	constant_contact: constantContact,
 	manual: atSymbol,
+	salesforce,
+	beehiiv,
+	fundraiseup: fundraiseUp,
+	gravity_forms: gravityForms,
 };
 
 export const espProviderOrder = [ 'active_campaign', 'mailchimp', 'constant_contact', 'manual' ];

package/src/integration-icons/salesforce.js

@@ -1,8 +1,8 @@
 const salesforce = (
-	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
 		<path
-			d="M13.3173 7.24314C14.3498 6.16866 15.7848 5.50017 17.3737 5.50017C19.4877 5.50017 21.3287 6.67965 22.3122 8.42612C23.1661 8.04463 24.1111 7.83113 25.1016 7.83113C28.913 7.83113 32 10.9461 32 14.7925C32 18.639 28.9095 21.7539 25.1016 21.7539C24.6361 21.7539 24.1811 21.7084 23.7436 21.6174C22.8791 23.1574 21.2307 24.2004 19.3407 24.2004C18.5497 24.2004 17.8007 24.0184 17.1357 23.6929C16.2607 25.7543 14.2168 27.1998 11.8403 27.1998C9.46385 27.1998 7.25189 25.6319 6.4399 23.4339C6.0864 23.5074 5.71891 23.5494 5.34092 23.5494C2.39046 23.5494 0 21.1344 0 18.1525C0 16.154 1.07448 14.411 2.67046 13.4765C2.34146 12.7206 2.15947 11.8841 2.15947 11.0091C2.15947 7.57913 4.94192 4.80018 8.37537 4.80018C10.3913 4.80018 12.1833 5.75916 13.3173 7.24314Z"
-			fill="var(--integration-icon-color, #0D9DDA)"
+			d="M10.0838 5.745C10.8213 4.9775 11.8463 4.5 12.9813 4.5C14.4913 4.5 15.8063 5.3425 16.5088 6.59C17.1188 6.3175 17.7938 6.165 18.5013 6.165C21.2238 6.165 23.4288 8.39 23.4288 11.1375C23.4288 13.885 21.2213 16.11 18.5013 16.11C18.1688 16.11 17.8438 16.0775 17.5313 16.0125C16.9138 17.1125 15.7363 17.8575 14.3863 17.8575C13.8213 17.8575 13.2863 17.7275 12.8113 17.495C12.1863 18.9675 10.7263 20 9.02876 20C7.33126 20 5.75126 18.88 5.17126 17.31C4.91876 17.3625 4.65626 17.3925 4.38626 17.3925C2.27876 17.3925 0.571259 15.6675 0.571259 13.5375C0.571259 12.11 1.33876 10.865 2.47876 10.1975C2.24376 9.6575 2.11376 9.06 2.11376 8.435C2.11376 5.985 4.10126 4 6.55376 4C7.99376 4 9.27376 4.685 10.0838 5.745Z"
+			fill="white"
 		/>
 	</svg>
 );

package/src/wizard/breadcrumbs-select.js

@@ -11,12 +11,20 @@ import { matchesRoute } from '../route-match';
  * @param {string} pathname Current router pathname.
  * @return {Array} Breadcrumb items `{ label, url? }`.
  */
-export const activeBreadcrumbs = ( sections = [], pathname ) => {
+export const activeBreadcrumbs = ( sections = [], pathname ) => activeSection( sections, pathname )?.breadcrumbs || [];
+
+/**
+ * Select the section matching the current route, falling back to the first.
+ *
+ * @param {Array}  sections Wizard sections.
+ * @param {string} pathname Current router pathname.
+ * @return {Object|undefined} The active section, if any.
+ */
+export const activeSection = ( sections = [], pathname ) => {
 	if ( ! sections?.length ) {
-		return [];
+		return undefined;
 	}
-	const match = sections.find( section => matchesRoute( section, pathname ) ) || sections[ 0 ];
-	return match.breadcrumbs || [];
+	return sections.find( section => matchesRoute( section, pathname ) ) || sections[ 0 ];
 };
 
 /**

package/src/wizard/breadcrumbs-select.test.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies.
  */
-import { activeBreadcrumbs, appendSectionName } from './breadcrumbs-select';
+import { activeBreadcrumbs, activeSection, appendSectionName } from './breadcrumbs-select';
 
 const SECTIONS = [
 	{ path: '/', breadcrumbs: [ { label: 'Audience Management' }, { label: 'Configuration' } ] },
@@ -122,3 +122,17 @@ describe( 'appendSectionName', () => {
 		expect( trail ).toEqual( [ { label: 'Access Control' } ] );
 	} );
 } );
+
+describe( 'activeSection', () => {
+	const sections = [ { path: '/settings', exact: true, subHeaderText: 'Intro' }, { path: '/settings/:integrationId' } ];
+
+	it( 'returns the section matching the route', () => {
+		expect( activeSection( sections, '/settings/esp' ) ).toBe( sections[ 1 ] );
+		expect( activeSection( sections, '/settings' ).subHeaderText ).toBe( 'Intro' );
+	} );
+
+	it( 'falls back to the first section, or nothing without sections', () => {
+		expect( activeSection( sections, '/unknown' ) ).toBe( sections[ 0 ] );
+		expect( activeSection( [], '/settings' ) ).toBeUndefined();
+	} );
+} );

package/src/wizard/index.js

@@ -25,7 +25,7 @@ import { category, chevronLeft, moreVertical } from '@wordpress/icons';
  * Internal dependencies
  */
 import { Footer, DebugBadge, Button, TabbedNavigation, PluginInstaller, SectionHeader, HandoffMessage, Page, Waiting } from '../';
-import { activeBreadcrumbs, appendSectionName } from './breadcrumbs-select';
+import { activeBreadcrumbs, activeSection, appendSectionName } from './breadcrumbs-select';
 import Router from '../proxied-imports/router';
 import registerStore, { WIZARD_STORE_NAMESPACE } from './store';
 import WizardSnackbar from './components/WizardSnackbar';
@@ -54,7 +54,7 @@ const resolveIcon = icon => {
 	return icon;
 };
 
-const { HashRouter, Redirect, Route, Switch, useLocation } = Router;
+const { HashRouter, Redirect, Route, Switch, matchPath, useLocation } = Router;
 
 /**
  * Interpolate a translated message's named tags, falling back to plain text.
@@ -105,9 +105,35 @@ const ResetHeaderData = () => {
  * Wizard header + content region. Rendered inside the wizard's HashRouter so it
  * can read the current route and derive the active-tab breadcrumb.
  */
-const WizardHeaderRegion = ( { hideHeader, headerText, sections, sectionName, subTitle, actions, tabbedNavigation, children } ) => {
+const WizardHeaderRegion = ( {
+	hideHeader,
+	headerText,
+	sections,
+	sectionName,
+	subTitle,
+	actions,
+	tabbedNavigation: wizardTabbedNavigation,
+	children,
+} ) => {
 	const { pathname } = useLocation();
 
+	// A section can carry its own tabs, built from its route params, in place of
+	// the wizard's. The first match wins, as it does in the wizard's `<Switch>`.
+	let tabbedNavigation = wizardTabbedNavigation;
+	for ( const section of sections ) {
+		const match = matchPath( pathname, { path: section.path, exact: section.exact ?? false } );
+		if ( match ) {
+			if ( typeof section.tabbedNavigation === 'function' ) {
+				tabbedNavigation = (
+					<TabbedNavigation items={ section.tabbedNavigation( match.params ) }>
+						<WizardError />
+					</TabbedNavigation>
+				);
+			}
+			break;
+		}
+	}
+
 	if ( hideHeader ) {
 		// Without the Page shell the tabs still own the content: it renders
 		// inside the active tab's panel.
@@ -125,8 +151,10 @@ const WizardHeaderRegion = ( { hideHeader, headerText, sections, sectionName, su
 	// headerData.sectionName (deduped against the current trailing label).
 	breadcrumbItems = appendSectionName( breadcrumbItems, sectionName );
 
+	const sectionSubTitle = activeSection( sections, pathname )?.subHeaderText;
+
 	return (
-		<Page breadcrumbItems={ breadcrumbItems } subTitle={ subTitle } actions={ actions } tabbedNavigation={ tabbedNavigation }>
+		<Page breadcrumbItems={ breadcrumbItems } subTitle={ sectionSubTitle ?? subTitle } actions={ actions } tabbedNavigation={ tabbedNavigation }>
 			{ children }
 		</Page>
 	);
@@ -138,7 +166,8 @@ const WizardHeaderRegion = ( { hideHeader, headerText, sections, sectionName, su
  * @property {string}     [subHeaderText]           The sub-header text, optional.
  * @property {string}     [apiSlug]                 The API slug, optional.
  * @property {string}     [className]               CSS classes, optional.
- * @property {any[]}      sections                  Array of sections.
+ * @property {any[]}      sections                  Array of sections. A section's own `subHeaderText` replaces the wizard's while it is active.
+ *                                                  Its optional `tabbedNavigation( params )` returns the tab items shown while its route matches.
  * @property {boolean}    [hasSimpleFooter]         Indicates if a simple footer is used, optional.
  * @property {() => void} [renderAboveSections]     Function to render content above sections, optional.
  * @property {string[]}   [requiredPlugins]         Array of required plugin strings, optional.

package/src/wizard/index.test.js

@@ -247,3 +247,76 @@ describe( 'Wizard content width', () => {
 		expect( select( WIZARD_STORE_NAMESPACE ).getHeaderData().fullWidth ).toBe( false );
 	} );
 } );
+
+describe( 'Wizard section tabs', () => {
+	const sections = [
+		{ label: 'List', path: '/', exact: true, render: () => <div>List content</div> },
+		{
+			path: '/items/:itemId/logs/:tab?',
+			isHidden: true,
+			render: () => <div>Logs content</div>,
+			tabbedNavigation: ( { itemId } ) => [
+				{ label: 'First Tab', path: `/items/${ itemId }/logs`, exact: true },
+				{ label: 'Second Tab', path: `/items/${ itemId }/logs/second`, exact: true },
+			],
+		},
+	];
+
+	beforeEach( () => {
+		apiFetch.mockReset();
+	} );
+
+	afterEach( () => {
+		window.location.hash = '';
+	} );
+
+	it( 'shows the tabs a section builds from its route params while it matches', async () => {
+		window.location.hash = '#/items/42/logs/second';
+		render( <Wizard headerText="Test wizard" sections={ sections } /> );
+
+		expect( await screen.findByText( 'Logs content' ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'tab', { name: 'First Tab' } ) ).toHaveAttribute( 'href', '#/items/42/logs' );
+		expect( screen.getByRole( 'tab', { name: 'Second Tab' } ) ).toHaveAttribute( 'aria-selected', 'true' );
+	} );
+
+	it( 'leaves the tabs out on a route the section does not match', async () => {
+		window.location.hash = '#/';
+		render( <Wizard headerText="Test wizard" sections={ sections } /> );
+
+		expect( await screen.findByText( 'List content' ) ).toBeInTheDocument();
+		expect( screen.queryByRole( 'tab' ) ).toBeNull();
+	} );
+} );
+
+describe( 'Wizard section subtitle', () => {
+	beforeEach( () => {
+		apiFetch.mockReset();
+		apiFetch.mockResolvedValue( {} );
+	} );
+
+	it( "shows the active section's subHeaderText in the header, falling back to the wizard's", async () => {
+		window.location.hash = '#/list';
+		const { container } = render(
+			<Wizard
+				headerText="Test wizard"
+				subHeaderText="Wizard intro"
+				sections={ [
+					{ label: 'List', path: '/list', exact: true, subHeaderText: 'List intro', render: () => <div>List view</div> },
+					{ label: 'Item', path: '/list/:id', isHidden: true, render: () => <div>Item view</div> },
+				] }
+			/>
+		);
+		const subtitle = () => container.querySelector( '.newspack-page__header-subtitle' )?.textContent;
+
+		expect( await screen.findByText( 'List view' ) ).toBeInTheDocument();
+		expect( subtitle() ).toBe( 'List intro' );
+
+		act( () => {
+			window.location.hash = '#/list/esp';
+			window.dispatchEvent( new HashChangeEvent( 'hashchange' ) );
+		} );
+
+		expect( await screen.findByText( 'Item view' ) ).toBeInTheDocument();
+		expect( subtitle() ).toBe( 'Wizard intro' );
+	} );
+} );