newspack-components 4.5.0 → 4.6.0

package/src/divider/style.scss

@@ -34,7 +34,7 @@
 	// Variant
 
 	&--variant-default {
-		background-color: wp-colors.$gray-300;
+		background-color: var( --wpds-color-stroke-surface-neutral, #{wp-colors.$gray-300} );
 	}
 
 	&--variant-primary {
@@ -46,6 +46,8 @@
 	}
 
 	&--variant-tertiary {
-		background-color: wp-colors.$gray-100;
+		// Fallback for consumers whose bundle doesn't carry the wpds token sheet
+		// (it ships with the Page header's stylesheet).
+		background-color: var( --wpds-color-stroke-surface-neutral-weak, #{wp-colors.$gray-100} );
 	}
 }

package/src/grid/style.scss

@@ -61,6 +61,11 @@
 		grid-row-gap: 16px;
 	}
 
+	// Row Gap 24
+	&__row-gap-24 {
+		grid-row-gap: 24px;
+	}
+
 	// Row Gap 32
 	&__row-gap-32 {
 		grid-row-gap: 32px;

package/src/handoff/index.js

@@ -7,12 +7,13 @@
  */
 import apiFetch from '@wordpress/api-fetch';
 import { Component, Fragment } from '@wordpress/element';
+import { __experimentalHStack as HStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies.
  */
-import { Button, Card, Modal, Waiting } from '../';
+import { Button, Modal, Waiting } from '../';
 
 /**
  * External dependencies.
@@ -168,14 +169,14 @@ class Handoff extends Component {
 				{ showModal && (
 					<Modal title={ modalTitle } onRequestClose={ () => this.setState( { showModal: false } ) }>
 						<p>{ modalBody }</p>
-						<Card buttonsCard noBorder className="justify-end">
+						<HStack justify="flex-end" spacing={ 4 } wrap className="newspack-modal__footer">
 							<Button variant="secondary" onClick={ () => this.setState( { showModal: false } ) }>
 								{ dismissModalButton }
 							</Button>
 							<Button variant="primary" onClick={ goTo }>
 								{ primaryModalButton }
 							</Button>
-						</Card>
+						</HStack>
 					</Modal>
 				) }
 			</Fragment>

package/src/index.js

@@ -1,9 +1,10 @@
-export { default as Accordion } from './accordion';
+export { default as Accordion, AccordionPanel } from './accordion';
 export { default as ActionCard } from './action-card';
 export { default as AutocompleteTokenField } from './autocomplete-tokenfield';
 export { default as AutocompleteWithSuggestions } from './autocomplete-with-suggestions';
 export { default as AutocompleteWithLatestPosts } from './autocomplete-with-latest-posts';
 export { default as Badge } from './badge';
+export { default as Breadcrumbs } from './breadcrumbs';
 export { default as Button } from './button';
 export { default as BoxContrast } from './box-contrast';
 export { default as Card } from './card';
@@ -11,6 +12,7 @@ export { default as CardFeature } from './card-feature';
 export { default as CardForm } from './card-form';
 export { default as CardSettingsGroup } from './card-settings-group';
 export { default as CardSortableList } from './card-sortable-list';
+export { default as IntegrationIcon } from './integration-icon';
 export { default as CategoryAutocomplete } from './category-autocomplete';
 export { default as ColorPicker } from './color-picker';
 export { default as ConfirmDialog } from './confirm-dialog';
@@ -28,6 +30,7 @@ export { default as Grid } from './grid';
 export { default as Modal } from './modal';
 export { default as NewspackIcon } from './newspack-icon';
 export { default as Notice } from './notice';
+export { default as Page } from './page';
 export { default as PluginInstaller } from './plugin-installer';
 export { default as PluginSettings } from './plugin-settings';
 export { default as PluginToggle } from './plugin-toggle';
@@ -54,6 +57,7 @@ export { default as useConfirmDialog } from './hooks/use-confirm-dialog';
 export { default as useUnsavedChangesDialog } from './hooks/use-unsaved-changes-dialog';
 import * as integrationIcons from './integration-icons';
 export { integrationIcons };
+export { espProviderOrder } from './integration-icons';
 export { default as utils } from './utils';
 
 import './style.scss';

package/src/integration-icon/index.tsx

@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { espProviderIcons } 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,
+ * 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;
+	if ( ! node ) {
+		return null;
+	}
+	// Decorative: the provider is always named in adjacent visible text (the card
+	// title), so hide the mark from assistive tech to avoid duplicate announcements.
+	return (
+		<span
+			aria-hidden="true"
+			className={ classnames( 'newspack-integration-icon', `newspack-integration-icon--${ provider.replace( /_/g, '-' ) }`, className ) }
+		>
+			{ node }
+		</span>
+	);
+};
+
+export default IntegrationIcon;

package/src/integration-icon/style.scss

@@ -0,0 +1,42 @@
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+
+.newspack-integration-icon {
+	align-items: center;
+	border-radius: wp-vars.$radius-round;
+	display: flex;
+	flex: 0 0 wp-vars.$grid-unit-50;
+	height: wp-vars.$grid-unit-50;
+	justify-content: center;
+	width: wp-vars.$grid-unit-50;
+
+	svg {
+		display: block;
+		fill: currentcolor;
+		height: wp-vars.$grid-unit-30;
+		width: wp-vars.$grid-unit-30;
+	}
+
+	&--active-campaign {
+		background: #004cff;
+	}
+
+	&--mailchimp {
+		background: #ffe01b;
+	}
+
+	&--constant-contact {
+		background: wp-colors.$gray-100;
+	}
+
+	&--manual {
+		background: wp-colors.$gray-800;
+		color: wp-colors.$white;
+
+		// Set the fill on the path directly so the card's active/hover state
+		// (which recolours header svgs) can't override the white manual mark.
+		svg path {
+			fill: currentcolor;
+		}
+	}
+}

package/src/integration-icons/index.js

@@ -1,6 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { atSymbol } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import activeCampaign from './active-campaign';
+import constantContact from './constant-contact';
+import mailchimp from './mailchimp';
+
 export { default as activeCampaign } from './active-campaign';
 export { default as constantContact } from './constant-contact';
 export { default as fundraiseUp } from './fundraise-up';
 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 = {
+	active_campaign: activeCampaign,
+	mailchimp,
+	constant_contact: constantContact,
+	manual: atSymbol,
+};
+
+export const espProviderOrder = [ 'active_campaign', 'mailchimp', 'constant_contact', 'manual' ];

package/src/modal/style.scss

@@ -99,3 +99,7 @@
 .modal-open .components-popover__content {
 	opacity: 0;
 }
+
+.newspack-modal__footer {
+	margin-top: 32px;
+}

package/src/page/index.js

@@ -0,0 +1,89 @@
+/**
+ * WordPress dependencies.
+ */
+import { NavigableRegion } from '@wordpress/admin-ui';
+import { __experimentalHStack as HStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
+import { cloneElement, isValidElement } from '@wordpress/element';
+import { Icon } from '@wordpress/icons';
+import { Stack, Text } from '@wordpress/ui';
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+import { newspack } from 'newspack-icons';
+
+/**
+ * Internal dependencies.
+ */
+import Breadcrumbs from '../breadcrumbs';
+import './style.scss';
+
+/**
+ * Newspack page region: a sticky header block (breadcrumbs, actions, optional
+ * tabbed navigation) followed by the page content.
+ *
+ * This intentionally does not use `@wordpress/admin-ui`'s `Page`: that
+ * component has no slot for content rendered between the header and the body
+ * inside the sticky region, which is exactly where the tab bar must live. Until
+ * admin-ui grows such a slot, the header markup is assembled here from the same
+ * design-system primitives and tokens, so it can be swapped back later.
+ *
+ * @param {Object} props
+ * @param {Array}  props.breadcrumbItems    Trail items: `{ label, url? }`.
+ * @param {*}      [props.badges]
+ * @param {*}      [props.subTitle]
+ * @param {*}      [props.actions]
+ * @param {*}      [props.tabbedNavigation] A `TabbedNavigation` element; its bar renders inside
+ *                                          the sticky header block and the page children render
+ *                                          inside its active tab panel — or, when no visible tab
+ *                                          owns the route, as a sibling of the panels.
+ * @param {string} [props.className]
+ * @param {*}      props.children
+ * @return {JSX.Element} Page component.
+ */
+const Page = ( { breadcrumbItems = [], badges, subTitle, actions, tabbedNavigation, className, children } ) => {
+	const currentLabel = breadcrumbItems[ breadcrumbItems.length - 1 ]?.label;
+
+	const renderShell = ( tabBar, content ) => (
+		<>
+			<Stack direction="column" className="newspack-page__header-region">
+				<Stack direction="column" className="newspack-page__header">
+					<Stack direction="row" gap="sm" justify="space-between">
+						<Stack direction="row" gap="sm" align="center" justify="start">
+							<div className="newspack-page__header-visual" aria-hidden="true">
+								<Icon icon={ newspack } />
+							</div>
+							<HStack className="newspack-page__breadcrumbs" justify="flex-start">
+								<Breadcrumbs items={ breadcrumbItems } />
+							</HStack>
+							{ badges }
+						</Stack>
+						{ actions && (
+							<Stack direction="row" gap="sm" align="center" className="newspack-page__header-actions">
+								{ actions }
+							</Stack>
+						) }
+					</Stack>
+					{ subTitle && (
+						<Text render={ <p /> } variant="body-md" className="newspack-page__header-subtitle">
+							{ subTitle }
+						</Text>
+					) }
+				</Stack>
+				{ tabBar }
+			</Stack>
+			{ content }
+		</>
+	);
+
+	return (
+		<NavigableRegion className={ classnames( 'newspack-page', className ) } ariaLabel={ currentLabel }>
+			{ isValidElement( tabbedNavigation )
+				? cloneElement( tabbedNavigation, { renderShell, content: children } )
+				: renderShell( null, children ) }
+		</NavigableRegion>
+	);
+};
+
+export default Page;

package/src/page/index.test.js

@@ -0,0 +1,43 @@
+/**
+ * External dependencies.
+ */
+import { render, screen } from '@testing-library/react';
+import { HashRouter } from 'react-router-dom';
+
+/**
+ * Internal dependencies.
+ */
+import Page from './';
+
+const renderInRouter = ui => render( <HashRouter>{ ui }</HashRouter> );
+
+describe( 'Page', () => {
+	it( 'renders the breadcrumb current item as h1 and the content', () => {
+		renderInRouter(
+			<Page breadcrumbItems={ [ { label: 'Audience', url: '/' }, { label: 'Access control' } ] }>
+				<div>Body content</div>
+			</Page>
+		);
+		expect( screen.getByRole( 'heading', { level: 1 } ) ).toHaveTextContent( 'Access control' );
+		expect( screen.getByText( 'Body content' ) ).toBeInTheDocument();
+	} );
+
+	it( 'renders actions and subtitle', () => {
+		renderInRouter(
+			<Page breadcrumbItems={ [ { label: 'Audience' } ] } subTitle="Manage readers" actions={ <button>Add new</button> }>
+				<div />
+			</Page>
+		);
+		expect( screen.getByRole( 'button', { name: 'Add new' } ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Manage readers' ) ).toBeInTheDocument();
+	} );
+
+	it( 'names the page region after the current breadcrumb item', () => {
+		renderInRouter(
+			<Page breadcrumbItems={ [ { label: 'Audience', url: '/' }, { label: 'Access control' } ] }>
+				<div />
+			</Page>
+		);
+		expect( screen.getByRole( 'region', { name: 'Access control' } ) ).toBeInTheDocument();
+	} );
+} );

package/src/page/style.scss

@@ -0,0 +1,86 @@
+@use "../../../colors/colors.module" as colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/mixins" as wp-mixins;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+
+// Design-system tokens ride with the Page header into any consuming bundle.
+// Known tech debt: this reaches past the package's public exports entry
+// (`@wordpress/theme/design-tokens.css`) into its internal layout, because
+// postcss-import cannot resolve exports maps, and resolving the public
+// specifier through sass/webpack leaks a bogus `wp-theme/design-tokens.css`
+// script dependency into consumers' asset manifests, which silently blocks
+// their enqueues. If upstream moves `src/prebuilt/`, this fails loudly at
+// build time.
+/* stylelint-disable-next-line no-invalid-position-at-import-rule -- sass @use must precede the CSS @import; postcss-import inlines it at build time. */
+@import "@wordpress/theme/src/prebuilt/css/design-tokens.css";
+
+// Newspack brand mapping: the wpds brand color tokens ship in WordPress
+// blue; remap them onto the Newspack primary scale so every design-system
+// component (focus rings, brand buttons, toggles) renders in brand colors
+// without per-component overrides.
+/* stylelint-disable plugin-wpds/no-setting-wpds-custom-properties -- deliberate Newspack brand override of the wpds brand tokens. */
+:root {
+	--wpds-color-background-interactive-brand-strong: #{colors.$primary-600};
+	--wpds-color-background-interactive-brand-strong-active: #{colors.$primary-800};
+	--wpds-color-background-interactive-brand-weak-active: #{colors.$primary-000};
+	--wpds-color-background-surface-brand: #{colors.$primary-000};
+	--wpds-color-background-thumb-brand: #{colors.$primary-600};
+	--wpds-color-background-thumb-brand-active: #{colors.$primary-600};
+	--wpds-color-foreground-interactive-brand: #{colors.$primary-600};
+	--wpds-color-foreground-interactive-brand-active: #{colors.$primary-800};
+	--wpds-color-foreground-interactive-brand-disabled: #{colors.$primary-400};
+	--wpds-color-stroke-focus: #{colors.$primary-600};
+	--wpds-color-stroke-interactive-brand: #{colors.$primary-600};
+	--wpds-color-stroke-interactive-brand-active: #{colors.$primary-800};
+	--wpds-color-stroke-interactive-brand-disabled: #{colors.$primary-100};
+	--wpds-color-stroke-surface-brand: #{colors.$primary-000};
+	--wpds-color-stroke-surface-brand-strong: #{colors.$primary-600};
+}
+/* stylelint-enable plugin-wpds/no-setting-wpds-custom-properties */
+
+[role="region"].newspack-page {
+	background-color: wp-colors.$white;
+}
+
+.newspack-page__header-region {
+	@include wp-mixins.break-medium {
+		position: sticky;
+		top: var(--wp-admin--admin-bar--height);
+		z-index: 3;
+	}
+}
+
+.newspack-page__header {
+	/* stylelint-disable-next-line plugin-wpds/no-unknown-ds-tokens -- the plugin's token list lags the prebuilt design-tokens.css names. */
+	background: var(--wpds-color-background-surface-neutral-strong);
+	border-block-end: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak);
+	padding: var(--wpds-dimension-padding-lg) var(--wpds-dimension-padding-2xl);
+}
+
+.newspack-page__header-actions {
+	flex-shrink: 0;
+}
+
+.newspack-page__header-subtitle {
+	/* stylelint-disable-next-line plugin-wpds/no-unknown-ds-tokens -- the plugin's token list lags the prebuilt design-tokens.css names. */
+	color: var(--wpds-color-foreground-content-neutral-weak);
+	padding-block-end: var(--wpds-dimension-padding-xs);
+}
+
+.newspack-page__header-visual {
+	display: grid;
+	flex-shrink: 0;
+	height: 24px;
+	place-items: center;
+	width: 24px;
+
+	svg path {
+		transform: scale(1.1111);
+		transform-box: view-box;
+		transform-origin: center;
+	}
+}
+
+.newspack-page__breadcrumbs {
+	min-height: wp-vars.$button-size;
+}

package/src/route-match.js

@@ -0,0 +1,47 @@
+/**
+ * Internal dependencies.
+ */
+import Router from './proxied-imports/router';
+
+const { matchPath } = Router;
+
+/**
+ * Whether a wildcard pattern (`'/base/*'` or `'/base*'`) matches a pathname.
+ * The wildcard is anchored at a `/` boundary: `'/segments*'` matches
+ * `/segments` and `/segments/123`, never `/segments-old`.
+ *
+ * @param {string} pattern  Pattern ending in `*`.
+ * @param {string} pathname Current router pathname.
+ * @return {boolean} Whether the pattern matches.
+ */
+const matchesWildcard = ( pattern, pathname ) => {
+	const base = pattern.slice( 0, -1 ).replace( /\/$/, '' );
+	return pathname === base || pathname.startsWith( base + '/' );
+};
+
+/**
+ * Single route matcher shared by breadcrumb selection and tabbed navigation.
+ *
+ * An item matches when one of its `activeTabPaths` hits (exact string, or a
+ * `*` wildcard anchored at a `/` boundary), or — falling through on a miss —
+ * when its `path` matches the pathname. Path matching is prefix-based except
+ * for the root path and items opting in via `exact: true`, mirroring how the
+ * wizard registers its `<Route>`s (`exact={ section.exact ?? false }`).
+ *
+ * @param {Object} item     Route item (`{ path?, exact?, activeTabPaths? }`).
+ * @param {string} pathname Current router pathname.
+ * @return {boolean} Whether the item matches the pathname.
+ */
+export const matchesRoute = ( item, pathname ) => {
+	if ( Array.isArray( item.activeTabPaths ) ) {
+		const wildcardHit = item.activeTabPaths.some( path => ( path.endsWith( '*' ) ? matchesWildcard( path, pathname ) : path === pathname ) );
+		if ( wildcardHit ) {
+			return true;
+		}
+	}
+	if ( ! item.path ) {
+		return false;
+	}
+	const exact = '/' === item.path || item.exact === true;
+	return !! matchPath( pathname, { path: item.path, exact } );
+};

package/src/route-match.test.js

@@ -0,0 +1,50 @@
+/**
+ * Internal dependencies.
+ */
+import { matchesRoute } from './route-match';
+
+describe( 'matchesRoute', () => {
+	it( 'matches the root path exactly, never as a prefix', () => {
+		expect( matchesRoute( { path: '/' }, '/' ) ).toBe( true );
+		expect( matchesRoute( { path: '/' }, '/segments' ) ).toBe( false );
+	} );
+
+	it( 'matches a path as a prefix by default, at segment boundaries', () => {
+		expect( matchesRoute( { path: '/segments' }, '/segments' ) ).toBe( true );
+		expect( matchesRoute( { path: '/segments' }, '/segments/123' ) ).toBe( true );
+		expect( matchesRoute( { path: '/segments' }, '/segments-old' ) ).toBe( false );
+		expect( matchesRoute( { path: '/segments' }, '/donations' ) ).toBe( false );
+	} );
+
+	it( 'matches exactly when the item opts in via exact', () => {
+		expect( matchesRoute( { path: '/segments', exact: true }, '/segments' ) ).toBe( true );
+		expect( matchesRoute( { path: '/segments', exact: true }, '/segments/123' ) ).toBe( false );
+	} );
+
+	it( 'matches an activeTabPaths entry exactly', () => {
+		const item = { path: '/other', activeTabPaths: [ '/segments/new' ] };
+		expect( matchesRoute( item, '/segments/new' ) ).toBe( true );
+		expect( matchesRoute( item, '/segments/123' ) ).toBe( false );
+	} );
+
+	it( 'anchors an activeTabPaths wildcard at a segment boundary', () => {
+		const item = { path: '/other', activeTabPaths: [ '/segments/*' ] };
+		expect( matchesRoute( item, '/segments' ) ).toBe( true );
+		expect( matchesRoute( item, '/segments/123' ) ).toBe( true );
+		expect( matchesRoute( item, '/segments-old' ) ).toBe( false );
+
+		const noSlash = { path: '/other', activeTabPaths: [ '/segments*' ] };
+		expect( matchesRoute( noSlash, '/segments' ) ).toBe( true );
+		expect( matchesRoute( noSlash, '/segments/123' ) ).toBe( true );
+		expect( matchesRoute( noSlash, '/segments-old' ) ).toBe( false );
+	} );
+
+	it( 'falls through to path matching when activeTabPaths misses', () => {
+		expect( matchesRoute( { path: '/segments', activeTabPaths: [ '/elsewhere' ] }, '/segments/123' ) ).toBe( true );
+	} );
+
+	it( 'never matches an item without a path when activeTabPaths misses', () => {
+		expect( matchesRoute( {}, '/segments' ) ).toBe( false );
+		expect( matchesRoute( { activeTabPaths: [ '/elsewhere' ] }, '/segments' ) ).toBe( false );
+	} );
+} );

package/src/section-header/index.js

@@ -85,14 +85,18 @@ const SectionHeader = ( {
 		pageHeader && 'newspack-section-header--page-header'
 	);
 
-	const HeadingTag = pageHeader ? 'h1' : `h${ heading }`;
+	// The breadcrumb `Page` owns the single page `<h1>`, so a `pageHeader` section
+	// is a secondary heading: its level follows `heading` (default 2). `pageHeader`
+	// controls only the enlarged, centered styling — not the tag. Pass `heading={ 1 }`
+	// on a headerless screen that needs the section header to be the page's h1.
+	const HeadingTag = `h${ heading }`;
 
 	let titleContent = null;
 
 	if ( typeof title === 'string' ) {
 		titleContent = (
 			<div className="newspack-section-header__title-container">
-				<HeadingTag>
+				<HeadingTag className="newspack-section-header__title">
 					{ title }
 					{ badges?.length
 						? badges.map( ( badge, i ) => <Badge key={ i } text={ badge.label } level={ badge.level || 'default' } /> )
@@ -126,7 +130,7 @@ const SectionHeader = ( {
 			</div>
 		);
 	} else if ( typeof title === 'function' ) {
-		titleContent = <HeadingTag>{ title() }</HeadingTag>;
+		titleContent = <HeadingTag className="newspack-section-header__title">{ title() }</HeadingTag>;
 	}
 
 	return (

package/src/section-header/style.scss

@@ -4,6 +4,7 @@
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
 @use "~@wordpress/base-styles/variables" as wp-vars;
+@use "~@wordpress/base-styles/mixins" as wp-mixins;
 @use "../../../colors/colors.module" as colors;
 
 .newspack-section-header {
@@ -12,6 +13,9 @@
 
 	&__container {
 		position: relative;
+		p {
+			text-wrap: balance;
+		}
 		&:not(:first-child) {
 			margin-top: 48px;
 		}
@@ -84,17 +88,18 @@
 		color: wp-colors.$gray-700;
 	}
 
+	// Title sizing keyed to the class, not the tag, so demoting the heading level
+	// (h1 -> h2 when the breadcrumb Page owns the page h1) never changes its look,
+	// and genuine h2s elsewhere in the header are unaffected.
+	&__title {
+		@include wp-mixins.heading-x-large();
+	}
+
 	&__title-container {
 		align-items: center;
 		display: flex;
 		gap: 8px;
 
-		h2 {
-			font-size: wp-vars.$font-size-x-large;
-			font-weight: wp-vars.$font-weight-medium;
-			line-height: wp-vars.$font-line-height-x-large;
-		}
-
 		.newspack-section-header__menu,
 		.newspack-section-header__secondary-action,
 		.newspack-badge {
@@ -161,10 +166,5 @@
 				fill: var(--wp-admin-theme-color);
 			}
 		}
-		h1 {
-			font-size: wp-vars.$font-size-x-large;
-			font-weight: wp-vars.$font-weight-medium;
-			line-height: wp-vars.$font-line-height-x-large;
-		}
 	}
 }

package/src/select-control/GroupedSelectControl.js

@@ -36,7 +36,7 @@ export default function GroupedSelectControl( { help, label, onChange, optgroups
 			help={ help }
 			className={ classnames( className, 'components-select-control' ) }
 		>
-			<div className="relative">
+			<div className="newspack-grouped-select-control__field">
 				<select
 					id={ id }
 					className="components-select-control__input"

package/src/select-control/style.scss

@@ -43,6 +43,10 @@
 .newspack-grouped-select-control {
 	position: relative;
 
+	&__field {
+		position: relative;
+	}
+
 	.components-select-control {
 		&__input {
 			appearance: none;

package/src/style.scss

@@ -35,12 +35,9 @@
 // Checkboxes
 .newspack-checkbox-control {
 	margin-top: 0 !important;
-	.components-checkbox-control__label {
-		font-weight: 600;
-	}
 
 	.components-base-control__help {
-		margin-left: 32px;
+		margin-left: calc(var(--checkbox-input-size) + var(--checkbox-input-margin));
 		margin-top: 0;
 	}
 }