newspack-components 4.9.2 → 4.10.0-alpha.1

package/dist/esm/tabbed-navigation/style.scss

@@ -54,7 +54,6 @@
 
 		&[data-disabled],
 		&[aria-disabled="true"] {
-			/* 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-interactive-neutral-disabled, #{wp-colors.$gray-600} );
 			pointer-events: none;
 		}

package/dist/esm/with-wizard-screen/style.scss

@@ -3,6 +3,7 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
 @use "../../../colors/colors.module" as np-colors;
 
 .newspack-wizard {
@@ -94,10 +95,10 @@
 			background: wp-colors.$gray-300;
 			border: 0;
 			height: 1px;
-			margin: 32px 0;
+			margin: wp-vars.$grid-unit-40 0;
 
 			@media screen and ( min-width: 744px ) {
-				margin: 64px 0;
+				margin: wp-vars.$grid-unit-60 0;
 			}
 		}
 		&:not(.newspack-wizard__content--full-width) {

package/dist/esm/wizard/index.js

@@ -405,6 +405,7 @@ var Wizard = function Wizard(_ref2, ref) {
   var headerActions = (actions === null || actions === void 0 ? void 0 : actions.length) > 0 ? /*#__PURE__*/_jsxs(_Fragment, {
     children: [mainActions.map(function (action, index) {
       return /*#__PURE__*/_jsx(Button, {
+        "aria-label": action.ariaLabel,
         className: "newspack-wizard__actions__main",
         href: action.href,
         icon: resolveIcon(action.icon),
@@ -435,6 +436,7 @@ var Wizard = function Wizard(_ref2, ref) {
             return /*#__PURE__*/_jsx(MenuGroup, {
               children: group.map(function (action, index) {
                 return /*#__PURE__*/_jsx(MenuItem, {
+                  "aria-label": action.ariaLabel,
                   className: action.type === 'primary' || action.type === 'secondary' ? 'newspack-wizard__actions__more__main' : 'newspack-wizard__actions__more__more',
                   icon: action.icon,
                   href: action.href,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "newspack-components",
-	"version": "4.9.2",
+	"version": "4.10.0-alpha.1",
 	"description": "Newspack design system components",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -23,14 +23,14 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@wordpress/admin-ui": "2.4.0",
-		"@wordpress/style-runtime": "^0.5.0",
-		"@wordpress/theme": "^0.16.0",
-		"@wordpress/ui": "^0.16.0",
+		"@wordpress/admin-ui": "2.11.0",
+		"@wordpress/style-runtime": "^0.12.0",
+		"@wordpress/theme": "^2.2.0",
+		"@wordpress/ui": "^0.23.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"moment-range": "^3.1.1",
-		"newspack-icons": "1.1.3",
+		"newspack-icons": "1.2.0-alpha.1",
 		"qs": "^6.15.2",
 		"react-router-dom": "^5.3.4",
 		"@babel/runtime": "^7.29.7",
@@ -58,7 +58,7 @@
 		"@babel/preset-env": "^7.29.7",
 		"@babel/preset-react": "^7.29.7",
 		"@babel/preset-typescript": "^7.29.7",
-		"newspack-scripts": "5.11.0",
+		"newspack-scripts": "5.12.0-alpha.1",
 		"recursive-copy": "^2.0.0"
 	},
 	"babel": {

package/src/_mixins.scss

@@ -3,11 +3,9 @@
 @use "~@wordpress/base-styles/variables" as wp-vars;
 
 @mixin text-muted {
-	/* 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, #{wp-colors.$gray-700} );
 }
 
 @mixin wpds-focus-ring {
-	/* stylelint-disable-next-line plugin-wpds/no-unknown-ds-tokens -- the plugin's token list lags the prebuilt design-tokens.css names. */
 	outline: var( --wpds-border-width-focus, var( --wp-admin-border-width-focus, #{wp-vars.$border-width-focus-fallback} ) ) solid var( --wpds-color-stroke-focus, var( --wp-admin-theme-color, #{colors.$primary-600} ) );
 }

package/src/card/core-card.js

@@ -22,6 +22,7 @@ import classNames from 'classnames';
 
 const CoreCard = ( {
 	actions,
+	actionsLabel,
 	actionType,
 	as,
 	buttonsCard,
@@ -80,6 +81,7 @@ const CoreCard = ( {
 		disabled && 'newspack-card--core__is-disabled',
 		children && 'newspack-card--core__has-children',
 		noMargin && 'newspack-card--core__no-margin',
+		( noBorder || otherProps.isBorderless ) && 'newspack-card--core__no-border',
 		hasGreyHeader && 'newspack-card--core__has-grey-header'
 	);
 	let sizeProps = isSmall ? 'small' : size;
@@ -169,7 +171,7 @@ const CoreCard = ( {
 						/>
 					) }
 					{ actions?.length > 0 && (
-						<DropdownMenu icon={ moreVertical } label={ __( 'More', 'newspack-plugin' ) }>
+						<DropdownMenu icon={ moreVertical } label={ actionsLabel || __( 'More actions', 'newspack-plugin' ) }>
 							{ () =>
 								actions.map( ( action, index ) => {
 									// Actions can be an array of sub-actions, which are rendered within a MenuGroup.
@@ -183,6 +185,7 @@ const CoreCard = ( {
 															icon={ subAction.icon }
 															onClick={ subAction.action }
 															href={ subAction.href }
+															aria-label={ subAction.ariaLabel }
 															disabled={ subAction.disabled || false }
 															isDestructive={ subAction.destructive || false }
 														>
@@ -199,6 +202,7 @@ const CoreCard = ( {
 											icon={ action.icon }
 											onClick={ action.action }
 											href={ action.href }
+											aria-label={ action.ariaLabel }
 											disabled={ action.disabled || false }
 											isDestructive={ action.destructive || false }
 										>

package/src/card/core-card.test.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies.
  */
-import { render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies.
@@ -35,6 +35,22 @@ describe( 'CoreCard', () => {
 		expect( getHeader( container ).tagName ).not.toBe( 'BUTTON' );
 	} );
 
+	it( 'names the actions menu "More actions" by default', () => {
+		render( <CoreCard header="Settings" actions={ [ { label: 'Delete', action: () => {} } ] } /> );
+		expect( screen.getByRole( 'button', { name: 'More actions' } ) ).toBeInTheDocument();
+	} );
+
+	it( 'names the actions menu with actionsLabel when supplied', () => {
+		render( <CoreCard header="Settings" actions={ [ { label: 'Delete', action: () => {} } ] } actionsLabel="Settings actions" /> );
+		expect( screen.getByRole( 'button', { name: 'Settings actions' } ) ).toBeInTheDocument();
+	} );
+
+	it( 'gives a menu item its ariaLabel as the accessible name', async () => {
+		render( <CoreCard header="Settings" actions={ [ { label: 'Delete', ariaLabel: 'Delete: Settings', action: () => {} } ] } /> );
+		fireEvent.click( screen.getByRole( 'button', { name: 'More actions' } ) );
+		expect( await screen.findByRole( 'menuitem', { name: 'Delete: Settings' } ) ).toBeInTheDocument();
+	} );
+
 	it( 'renders the header as a non-button when it is also draggable', () => {
 		const { container } = render( <CoreCard header="Settings" isDraggable onHeaderClick={ () => {} } /> );
 		expect( getHeader( container ).tagName ).not.toBe( 'BUTTON' );
@@ -58,4 +74,15 @@ describe( 'CoreCard', () => {
 		const { container: vertical } = render( <CoreCard header="Settings" isVertical /> );
 		expect( vertical.querySelector( '.newspack-card--core__is-vertical' ) ).not.toBeNull();
 	} );
+
+	it( 'marks the card borderless only when noBorder or isBorderless is passed', () => {
+		const { container: plain } = render( <CoreCard header="Settings" /> );
+		expect( plain.querySelector( '.newspack-card--core__no-border' ) ).toBeNull();
+
+		const { container: borderless } = render( <CoreCard header="Settings" noBorder /> );
+		expect( borderless.querySelector( '.newspack-card--core__no-border' ) ).not.toBeNull();
+
+		const { container: coreBorderless } = render( <CoreCard header="Settings" isBorderless /> );
+		expect( coreBorderless.querySelector( '.newspack-card--core__no-border' ) ).not.toBeNull();
+	} );
 } );

package/src/card/style-core.scss

@@ -5,6 +5,15 @@
 @use "~@wordpress/base-styles/colors" as wp-colors;
 @use "~@wordpress/base-styles/variables" as wp-vars;
 
+.newspack-card--core.components-card:where(:not(.newspack-card--core__no-border)) {
+	box-shadow: 0 0 0 1px var( --wpds-color-stroke-surface-neutral, #{wp-colors.$gray-300} );
+}
+
+.newspack-card--core .newspack-card--core__header.components-card__header,
+.newspack-card--core .components-card__footer {
+	border-color: var( --wpds-color-stroke-surface-neutral, #{wp-colors.$gray-300} );
+}
+
 .newspack-card--core,
 .newspack-wizard .newspack-card--core {
 	background: wp-colors.$white;
@@ -107,10 +116,10 @@
 		}
 		> .components-dropdown-menu {
 			aspect-ratio: 1;
-			border-left: 1px solid wp-colors.$gray-200;
+			border-left: 1px solid var( --wpds-color-stroke-surface-neutral, #{wp-colors.$gray-300} );
 			display: grid;
 			height: 100%;
-			max-width: 50px;
+			max-width: 70px;
 			padding: 4px;
 			place-items: center;
 			position: absolute;
@@ -127,7 +136,7 @@
 		padding-left: 80px !important;
 		.newspack-card--core__header__draggable-controls {
 			align-items: center;
-			border-right: 1px solid wp-colors.$gray-200;
+			border-right: 1px solid var( --wpds-color-stroke-surface-neutral, #{wp-colors.$gray-300} );
 			display: flex;
 			height: 100%;
 			justify-content: space-between;

package/src/card/style.scss

@@ -3,10 +3,11 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
 
 .newspack-card {
 	border-radius: 2px;
-	border: 1px solid wp-colors.$gray-300;
+	border: 1px solid var( --wpds-color-stroke-surface-neutral, #{wp-colors.$gray-300} );
 	color: wp-colors.$gray-900;
 	margin: 32px 0;
 	padding: 16px 48px;
@@ -101,10 +102,6 @@
 
 	// Margin
 
-	&.mt64 {
-		margin-top: 64px;
-	}
-
 	&.mt16 {
 		margin-top: 16px;
 	}
@@ -128,10 +125,10 @@
 		background: wp-colors.$gray-300;
 		border: 0;
 		height: 1px;
-		margin: 32px 0;
+		margin: wp-vars.$grid-unit-40 0;
 
 		@media screen and ( min-width: 744px ) {
-			margin: 64px 0;
+			margin: wp-vars.$grid-unit-60 0;
 		}
 	}
 

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

@@ -307,4 +307,11 @@ describe( 'CardFeature', () => {
 		rerender( <CardFeature title="Content gifting" enabled requirements="Requires metering" /> );
 		expect( container.querySelector( '.newspack-card-feature--muted' ) ).toBeInTheDocument();
 	} );
+
+	it( 'marks the card as not enabled only when enabled is false', () => {
+		const { container, rerender } = render( <CardFeature title="Content gifting" /> );
+		expect( container.querySelector( '.newspack-card-feature--not-enabled' ) ).toBeInTheDocument();
+		rerender( <CardFeature title="Content gifting" enabled /> );
+		expect( container.querySelector( '.newspack-card-feature--not-enabled' ) ).toBeNull();
+	} );
 } );

package/src/card-feature/index.tsx

@@ -110,6 +110,7 @@ const CardFeature = ( {
 	const isMuted = !! requirements;
 	const classes = classnames( 'newspack-card-feature', className, {
 		'newspack-card-feature--muted': isMuted,
+		'newspack-card-feature--not-enabled': ! enabled,
 	} );
 
 	let badge: { label: string; intent: BadgeIntent } | undefined;

package/src/card-feature/style.scss

@@ -2,6 +2,7 @@
  * CardFeature
  */
 
+@use "~@wordpress/base-styles/colors" as wp-colors;
 @use "~@wordpress/base-styles/mixins" as wp-mixins;
 @use "~@wordpress/base-styles/variables" as wp-vars;
 @use "../mixins" as np-mixins;
@@ -9,6 +10,10 @@
 .newspack-card-feature {
 	height: 100%;
 
+	&.newspack-card-feature--not-enabled {
+		border-color: var( --wpds-color-stroke-surface-neutral-weak, #{wp-colors.$gray-100} );
+	}
+
 	&__actions {
 		margin-top: auto;
 

package/src/color-picker/index.js

@@ -3,7 +3,7 @@
  */
 import { BaseControl, ColorPicker as ColorPickerComponent } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
-import { useState, useRef } from '@wordpress/element';
+import { useState, useRef, useEffect } from '@wordpress/element';
 
 /**
  * External dependencies.
@@ -31,26 +31,40 @@ const { InteractiveDiv } = utils;
  * @param {string}             [props.color]     - Default color.
  * @param {Function}           props.onChange    - Function to call when the color changes.
  * @param {string}             [props.className] - Additional class name.
+ * @param {boolean}            [props.disabled]  - Whether the color is shown but cannot be changed.
  * @return {JSX.Element} ColorPicker component.
  */
-const ColorPicker = ( { label, help, color = '#ffffff', onChange, className } ) => {
+const ColorPicker = ( { label, help, color = '#ffffff', onChange, className, disabled = false } ) => {
 	const [ isExpanded, setIsExpanded ] = useState( false );
-	const ref = useRef();
+	const ref = useRef( undefined );
 	const id = useInstanceId( ColorPicker, 'newspack-color-picker' );
 	const labelId = `${ id }-label`;
 	const colordColor = colord( color );
 	hooks.useOnClickOutside( ref, () => setIsExpanded( false ) );
+	useEffect( () => {
+		if ( disabled ) {
+			setIsExpanded( false );
+		}
+	}, [ disabled ] );
 	return (
-		<BaseControl id={ id } className={ classnames( 'newspack-color-picker', className ) } help={ help } __nextHasNoMarginBottom>
+		<BaseControl
+			id={ id }
+			className={ classnames( 'newspack-color-picker', { 'is-disabled': disabled }, className ) }
+			help={ help }
+			__nextHasNoMarginBottom
+		>
 			<BaseControl.VisualLabel id={ labelId }>{ label }</BaseControl.VisualLabel>
 			<InteractiveDiv
 				id={ id }
 				aria-labelledby={ labelId }
 				aria-describedby={ help ? `${ id }__help` : undefined }
 				aria-expanded={ isExpanded }
+				aria-disabled={ disabled || undefined }
+				tabIndex={ disabled ? -1 : 0 }
 				className={ 'newspack-color-picker__expander' }
-				onClick={ () => setIsExpanded( ! isExpanded ) }
+				onClick={ () => ! disabled && setIsExpanded( ! isExpanded ) }
 				style={ {
+					...( disabled && { cursor: 'default' } ),
 					backgroundColor: color,
 					color: colordColor.contrast() > colordColor.contrast( '#000000' ) ? '#ffffff' : '#000000',
 				} }
@@ -59,7 +73,7 @@ const ColorPicker = ( { label, help, color = '#ffffff', onChange, className } )
 			</InteractiveDiv>
 
 			<div className="newspack-color-picker__main" ref={ ref }>
-				{ isExpanded && <ColorPickerComponent color={ color } onChange={ onChange } enableAlpha={ false } /> }
+				{ isExpanded && ! disabled && <ColorPickerComponent color={ color } onChange={ onChange } enableAlpha={ false } /> }
 			</div>
 		</BaseControl>
 	);

package/src/color-picker/index.test.js

@@ -49,4 +49,29 @@ describe( 'ColorPicker', () => {
 		const { getByRole } = render( <ColorPicker label="Background color" onChange={ () => {} } /> );
 		expect( getByRole( 'button' ) ).not.toHaveAttribute( 'aria-describedby' );
 	} );
+
+	describe( 'when disabled', () => {
+		it( 'should not open on click', () => {
+			const { getByRole } = render( <ColorPicker label="Background color" disabled onChange={ () => {} } /> );
+			const expander = getByRole( 'button' );
+			fireEvent.click( expander );
+			expect( expander ).toHaveAttribute( 'aria-expanded', 'false' );
+			expect( expander ).toHaveAttribute( 'aria-disabled', 'true' );
+		} );
+
+		it( 'should not open on Enter', () => {
+			const { getByRole } = render( <ColorPicker label="Background color" disabled onChange={ () => {} } /> );
+			const expander = getByRole( 'button' );
+			fireEvent.keyDown( expander, { key: 'Enter', keyCode: 13 } );
+			expect( expander ).toHaveAttribute( 'aria-expanded', 'false' );
+		} );
+
+		it( 'should stay closed once re-enabled if it was open when disabled', () => {
+			const { getByRole, rerender } = render( <ColorPicker label="Background color" onChange={ () => {} } /> );
+			fireEvent.click( getByRole( 'button' ) );
+			rerender( <ColorPicker label="Background color" disabled onChange={ () => {} } /> );
+			rerender( <ColorPicker label="Background color" onChange={ () => {} } /> );
+			expect( getByRole( 'button' ) ).toHaveAttribute( 'aria-expanded', 'false' );
+		} );
+	} );
 } );

package/src/color-picker/style.scss

@@ -8,25 +8,28 @@
 .newspack-color-picker {
 	position: relative;
 	&__expander {
-		box-shadow: inset 0 0 0 1px rgba(wp-colors.$black, 0.54);
-		border-radius: wp-vars.$radius-small;
-		height: wp-vars.$grid-unit-80;
-		padding: wp-vars.$grid-unit-10;
-		text-align: right;
+		box-shadow: inset 0 0 0 var(--wpds-border-width-xs, #{wp-vars.$border-width}) rgba(wp-colors.$black, 0.54);
+		border-radius: var(--wpds-border-radius-sm, #{wp-vars.$radius-small});
+		height: var(--wpds-dimension-size-lg, #{wp-vars.$grid-unit-50});
+		line-height: calc(var(--wpds-dimension-size-lg, #{wp-vars.$grid-unit-50}) - var(--wpds-dimension-padding-md, #{wp-vars.$grid-unit-15}));
+		padding: calc(var(--wpds-dimension-padding-md, #{wp-vars.$grid-unit-15}) / 2) var(--wpds-dimension-padding-md, #{wp-vars.$grid-unit-15});
 		text-transform: uppercase;
 
 		&:focus-visible {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			border-color: wp-colors.$white;
+			box-shadow: 0 0 0 var(--wpds-border-width-focus, #{wp-vars.$border-width-focus-fallback}) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color));
 		}
 	}
 
+	&.is-disabled &__expander {
+		opacity: 0.5;
+	}
+
 	&__main {
-		background: wp-colors.$white;
+		background: var(--wpds-color-background-surface-neutral-strong, #{wp-colors.$white});
 		box-shadow: wp-vars.$elevation-small;
-		margin: wp-vars.$grid-unit-10 0 0;
+		margin: var(--wpds-dimension-gap-sm, #{wp-vars.$grid-unit-10}) 0 0;
 		position: absolute;
-		z-index: 2;
+		z-index: 3;
 
 		&:empty {
 			display: none;

package/src/debug-badge/style.scss

@@ -10,7 +10,7 @@
 	background: np-colors.$primary-600;
 	border-radius: wp-vars.$radius-round;
 	bottom: 0;
-	box-shadow: var(--wpds-elevation-sm, #{wp-vars.$elevation-small});
+	box-shadow: wp-vars.$elevation-small;
 	display: grid;
 	height: wp-vars.$button-size;
 	margin: 0 wp-vars.$grid-unit-30 wp-vars.$grid-unit-30;

package/src/divider/README.md

@@ -8,8 +8,8 @@ Horizontal rule component with alignment, variant, and margin options.
 |------|------|---------|-------------|
 | `alignment` | `'full-width'` \| `'none'` | `'none'` | `full-width` breaks out of the container to span the viewport; `none` stays within the container. |
 | `className` | `string` | — | Additional CSS class. |
-| `marginBottom` | `number` \| `string` | `64` | Bottom margin (e.g. `64` or `"2rem"`). Capped at 32px on viewports < 783px. |
-| `marginTop` | `number` \| `string` | `64` | Top margin (e.g. `64` or `"2rem"`). Capped at 32px on viewports < 783px. |
+| `marginBottom` | `number` \| `string` | `48` | Bottom margin (e.g. `48` or `"2rem"`). Capped at 32px on viewports < 782px. |
+| `marginTop` | `number` \| `string` | `48` | Top margin (e.g. `48` or `"2rem"`). Capped at 32px on viewports < 782px. |
 | `variant` | `'default'` \| `'primary'` \| `'secondary'` \| `'tertiary'` | `'default'` | Line color: `default` uses `$gray-300`; `primary` uses the admin theme color (`--wp-admin-theme-color`); `secondary` uses `$gray-200`; `tertiary` uses `$gray-100`. |
 
 ## Usage

package/src/divider/index.js

@@ -25,7 +25,7 @@ import classNames from 'classnames';
  * }} props - Component props: the documented options plus any `hr` attribute.
  * @return {JSX.Element} Divider component.
  */
-const Divider = ( { alignment = 'none', className = undefined, marginBottom = 64, marginTop = 64, variant = 'default', ...otherProps } ) => {
+const Divider = ( { alignment = 'none', className = undefined, marginBottom = 48, marginTop = 48, variant = 'default', ...otherProps } ) => {
 	const classes = classNames(
 		'newspack-divider',
 		className,

package/src/divider/style.scss

@@ -3,21 +3,23 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/mixins" as wp-mixins;
+@use "~@wordpress/base-styles/variables" as wp-vars;
 
 .newspack-divider {
 	background: transparent;
 	border: 0;
 	display: block;
 	height: 1px;
-	margin-bottom: min(32px, var(--divider-margin-bottom, 64px));
+	margin-bottom: min(#{wp-vars.$grid-unit-40}, var(--divider-margin-bottom, #{wp-vars.$grid-unit-60}));
 	margin-left: 0;
 	margin-right: 0;
-	margin-top: min(32px, var(--divider-margin-top, 64px));
+	margin-top: min(#{wp-vars.$grid-unit-40}, var(--divider-margin-top, #{wp-vars.$grid-unit-60}));
 	padding: 0;
 
-	@media screen and (min-width: 783px) {
-		margin-bottom: var(--divider-margin-bottom, 64px);
-		margin-top: var(--divider-margin-top, 64px);
+	@include wp-mixins.break-medium {
+		margin-bottom: var(--divider-margin-bottom, #{wp-vars.$grid-unit-60});
+		margin-top: var(--divider-margin-top, #{wp-vars.$grid-unit-60});
 	}
 
 	// Alignment

package/src/grid/style.scss

@@ -3,6 +3,7 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
 
 .newspack-grid {
 	display: grid;
@@ -41,9 +42,9 @@
 		grid-gap: 32px;
 	}
 
-	// Gutter 64
-	&__gutter-64 {
-		grid-gap: 64px;
+	// Gutter 48
+	&__gutter-48 {
+		grid-gap: wp-vars.$grid-unit-60;
 	}
 
 	// Row Gap 0
@@ -143,16 +144,6 @@
 		&__columns-12 {
 			grid-template-columns: repeat(12, 1fr);
 		}
-
-		// Gutter 48
-		&__gutter-48 {
-			grid-gap: 48px;
-		}
-
-		// Gutter 64
-		&__gutter-64 {
-			grid-gap: 64px;
-		}
 	}
 
 	// Children
@@ -194,9 +185,6 @@
 		&.newspack-grid__gutter-32 > * {
 			padding: 32px;
 		}
-		&.newspack-grid__gutter-64 > * {
-			padding: 64px;
-		}
 	}
 
 	.components-base-control {

package/src/image-upload/index.js

@@ -73,19 +73,23 @@ class ImageUpload extends Component {
 	 * Render.
 	 */
 	render = () => {
-		const { buttonLabel, className, disabled, help, image, isCovering, label, onChange, style = {} } = this.props;
+		const { buttonLabel, className, disabled, help, image, imageStyle, isCovering, label, onChange, style = {}, withMargin = true } = this.props;
 		const classes = classnames(
 			'newspack-image-upload__image',
 			{ 'newspack-image-upload__image--has-image': image },
 			{ 'newspack-image-upload__image--covering': isCovering }
 		);
 		return (
-			<BaseControl __nextHasNoMarginBottom className={ classnames( 'newspack-image-upload', className ) } help={ help }>
+			<BaseControl
+				__nextHasNoMarginBottom
+				className={ classnames( 'newspack-image-upload', { 'newspack-image-upload--no-margin': ! withMargin }, className ) }
+				help={ help }
+			>
 				{ label && <BaseControl.VisualLabel>{ label }</BaseControl.VisualLabel> }
 				<div className={ classes } style={ style }>
 					{ image?.url ? (
 						<>
-							<img data-testid="image-upload" src={ image.url } alt={ __( 'Image preview', 'newspack-plugin' ) } />
+							<img data-testid="image-upload" src={ image.url } alt={ __( 'Image preview', 'newspack-plugin' ) } style={ imageStyle } />
 							<div className="newspack-image-upload__controls">
 								<Button disabled={ disabled } onClick={ this.openModal } variant="tertiary">
 									{ __( 'Replace', 'newspack-plugin' ) }

package/src/image-upload/style.scss

@@ -7,6 +7,9 @@
 
 .newspack-image-upload {
 	margin: wp-vars.$grid-unit-40 0;
+	&--no-margin {
+		margin: 0;
+	}
 	&__image {
 		align-items: center;
 		background-position: center;

package/src/index.js

@@ -4,7 +4,6 @@ export { default as AutocompleteWithSuggestions } from './autocomplete-with-sugg
 export { default as AutocompleteWithLatestPosts } from './autocomplete-with-latest-posts';
 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';
 export { default as CardFeature } from './card-feature';
 export { default as CardForm } from './card-form';

package/src/info-button/style.scss

@@ -39,7 +39,7 @@
 .newspack-info-button__popup {
 	background-color: wp-colors.$gray-900;
 	border-radius: var(--wpds-border-radius-md, #{wp-vars.$radius-medium});
-	box-shadow: var(--wpds-elevation-sm, #{wp-vars.$elevation-small});
+	box-shadow: wp-vars.$elevation-small;
 	color: wp-colors.$white;
 	outline: 0;
 	padding: var(--wpds-dimension-padding-xs, #{wp-vars.$grid-unit-05}) var(--wpds-dimension-padding-sm, #{wp-vars.$grid-unit-10});

package/src/modal/style.scss

@@ -83,15 +83,14 @@
 		}
 	}
 
-	.components-modal__content {
-		> * {
-			&:first-child {
-				margin-top: 0;
-			}
+	.components-modal__children-container {
+		> :first-child,
+		> .screen-reader-text:first-child + * {
+			margin-top: 0;
+		}
 
-			&:last-child {
-				margin-bottom: 0;
-			}
+		> :last-child {
+			margin-bottom: 0;
 		}
 	}
 }

package/src/page/style.scss

@@ -9,10 +9,10 @@
 // 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
+// their enqueues. If upstream moves `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";
+@import "@wordpress/theme/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
@@ -51,7 +51,6 @@
 }
 
 .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);
@@ -62,7 +61,6 @@
 }
 
 .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);
 }