newspack-components 4.3.0 → 4.4.0-alpha.1

package/src/section-header/index.js

@@ -7,8 +7,8 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useEffect, useRef } from '@wordpress/element';
-import { Tooltip } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
-import { Icon, chevronLeft } from '@wordpress/icons';
+import { DropdownMenu, MenuItem, Tooltip, __experimentalHStack as HStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
+import { Icon, chevronLeft, moreVertical } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -59,6 +59,7 @@ const SectionHeader = ( {
 	pageHeader = false,
 	title,
 	id = null,
+	menu,
 	primaryAction,
 	secondaryAction,
 	children = null,
@@ -86,6 +87,48 @@ const SectionHeader = ( {
 
 	const HeadingTag = pageHeader ? 'h1' : `h${ heading }`;
 
+	let titleContent = null;
+
+	if ( typeof title === 'string' ) {
+		titleContent = (
+			<div className="newspack-section-header__title-container">
+				<HeadingTag>
+					{ title }
+					{ badges?.length
+						? badges.map( ( badge, i ) => <Badge key={ i } text={ badge.label } level={ badge.level || 'default' } /> )
+						: null }
+				</HeadingTag>
+				{ menu?.length > 0 && (
+					<DropdownMenu className="newspack-section-header__menu" icon={ moreVertical } label={ __( 'More options', 'newspack-plugin' ) }>
+						{ () =>
+							menu.map( ( item, index ) => (
+								<MenuItem
+									key={ index }
+									icon={ item.icon }
+									href={ item.href }
+									onClick={ item.action }
+									disabled={ item.disabled || false }
+									isDestructive={ item.destructive || false }
+								>
+									{ item.label }
+								</MenuItem>
+							) )
+						}
+					</DropdownMenu>
+				) }
+				{ secondaryAction && (
+					<div className="newspack-section-header__secondary-action">
+						<Button variant="link" href={ secondaryAction.href } onClick={ secondaryAction.action }>
+							{ secondaryAction.label }
+						</Button>
+					</div>
+				) }
+			</div>
+		);
+	} else if ( typeof title === 'function' ) {
+		titleContent = <HeadingTag>{ title() }</HeadingTag>;
+	}
+
 	return (
 		<div
 			id={ id }
@@ -103,29 +146,18 @@ const SectionHeader = ( {
 						<Icon icon={ icon } size={ 48 } />
 					</div>
 				) }
-				{ backNav && (
-					<div className="newspack-section-header__back-nav">
-						<Tooltip text={ __( 'Go back', 'newspack-plugin' ) }>
-							<Button href={ backNav } icon={ chevronLeft } variant="tertiary" />
-						</Tooltip>
-					</div>
-				) }
-				{ typeof title === 'string' && (
-					<div className="newspack-section-header__title-container">
-						<HeadingTag>{ title }</HeadingTag>
-						{ badges?.length
-							? badges.map( ( badge, i ) => <Badge key={ i } text={ badge.label } level={ badge.level || 'default' } /> )
-							: null }
-						{ secondaryAction && (
-							<div className="newspack-section-header__secondary-action">
-								<Button variant="link" href={ secondaryAction.href } onClick={ secondaryAction.action }>
-									{ secondaryAction.label }
-								</Button>
-							</div>
-						) }
-					</div>
+				{ backNav ? (
+					<HStack alignment="left" style={ { position: 'relative' } }>
+						<div className="newspack-section-header__back-nav">
+							<Tooltip text={ __( 'Go back', 'newspack-plugin' ) }>
+								<Button href={ backNav } icon={ chevronLeft } variant="tertiary" />
+							</Tooltip>
+						</div>
+						{ titleContent }
+					</HStack>
+				) : (
+					titleContent
 				) }
-				{ typeof title === 'function' && <HeadingTag>{ title() }</HeadingTag> }
 				{ description && typeof description === 'string' && <p>{ description }</p> }
 				{ typeof description === 'function' && <p>{ description() }</p> }
 				{ description && typeof description !== 'string' && typeof description !== 'function' && <p>{ description }</p> }

package/src/section-header/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 colors;
 
 .newspack-section-header {
@@ -14,6 +15,9 @@
 		&:not(:first-child) {
 			margin-top: 48px;
 		}
+		&:has(> .newspack-section-header--no-margin) {
+			margin-top: 0;
+		}
 		&.newspack-section-header--has-primary-action {
 			display: flex;
 			flex-direction: column;
@@ -24,18 +28,22 @@
 			}
 		}
 		&.newspack-section-header--has-back-nav {
-			--back-nav-button-size: 36px;
-			margin-left: calc(var(--back-nav-button-size) + 8px);
 			@media (min-width: 782px) {
-				margin-left: 0;
+				.newspack-section-header__title-container,
+				p {
+					max-width: calc(50% - 16px);
+				}
 			}
 		}
 	}
 
 	&__back-nav {
-		left: calc((var(--back-nav-button-size) + 8px) * -1);
-		position: absolute;
-		top: calc(50% - (var(--back-nav-button-size) / 2));
+		@media (min-width: 1280px) {
+			left: 0;
+			position: absolute;
+			top: 50%;
+			transform: translate(calc(-100% - 8px), -50%);
+		}
 		a,
 		button {
 			color: inherit !important;
@@ -77,15 +85,27 @@
 	}
 
 	&__title-container {
-		align-items: baseline;
+		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 {
-			transform: translateY(-4px);
+			margin-top: 8px;
 		}
 	}
 
+	&__menu {
+		align-self: center;
+	}
+
 	&__primary-action {
 		@media (min-width: 782px) {
 			display: flex;
@@ -142,9 +162,9 @@
 			}
 		}
 		h1 {
-			font-size: 1.25rem;
-			font-weight: 500;
-			line-height: 1.5;
+			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/index.js

@@ -1,5 +1,9 @@
 /**
  * Select Control
+ *
+ * @deprecated For new features, use the core `SelectControl` (and `__experimentalToggleGroupControl` for
+ * grouped/button-style selections) from `@wordpress/components` instead of this wrapper. This component
+ * is kept only for existing usages and should not be used in new code.
  */
 
 /**

package/src/utils/editor-toolbar-back-button.tsx

@@ -0,0 +1,48 @@
+/**
+ * A utility to add a back button to the editor toolbar.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button, Tooltip } from '@wordpress/components';
+import { subscribe } from '@wordpress/data';
+import domReady from '@wordpress/dom-ready';
+import { createRoot } from '@wordpress/element';
+import { arrowUpLeft } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const WRAPPER_ID = 'newspack-editor-toolbar-wrapper';
+
+const ToolbarButton = ( { href }: { href: string } ) => (
+	<Tooltip text={ __( 'Go back', 'newspack-plugin' ) }>
+		<Button icon={ arrowUpLeft } label={ __( 'Go back', 'newspack-plugin' ) } href={ href } />
+	</Tooltip>
+);
+
+export const addToolbarBackButton = ( href: string = '' ) => {
+	const unsubscribe = subscribe( () => {
+		domReady( () => {
+			if ( document.getElementById( WRAPPER_ID ) ) {
+				return;
+			}
+			const toolbar = document.querySelector( '.editor-header__toolbar' );
+			if ( ! toolbar ) {
+				return;
+			}
+
+			const wrapper = document.createElement( 'div' );
+			wrapper.id = WRAPPER_ID;
+			toolbar.prepend( wrapper );
+
+			const root = createRoot( wrapper );
+			root.render( <ToolbarButton href={ href } /> );
+			unsubscribe();
+		} );
+	} );
+};

package/src/utils/index.js

@@ -3,6 +3,11 @@
  */
 import { ENTER } from '@wordpress/keycodes';
 
+/**
+ * Internal dependencies
+ */
+import { addToolbarBackButton } from './editor-toolbar-back-button';
+
 const InteractiveDiv = ( { style = {}, ...props } ) => (
 	<div
 		tabIndex="0"
@@ -24,4 +29,5 @@ const confirmAction = message => {
 export default {
 	InteractiveDiv,
 	confirmAction,
+	addToolbarBackButton,
 };

package/src/utils/style.scss

@@ -0,0 +1,8 @@
+@use "~@wordpress/base-styles/variables" as wp-vars;
+
+#newspack-editor-toolbar-wrapper {
+	margin-right: wp-vars.$grid-unit-10;
+	.is-fullscreen-mode & {
+		display: none;
+	}
+}

package/src/with-wizard/style.scss

@@ -51,6 +51,10 @@ body.newspack-wizard-page:not(.newspack-admin-header) {
 			padding-bottom: 136px;
 		}
 	}
+
+	.components-popover__content {
+		min-width: 192px;
+	}
 }
 
 // Styling for wizards that are admin-header-only.
@@ -81,37 +85,6 @@ svg {
 	}
 }
 
-// Blue Screen
-.newspack-wizard__blue {
-	#wpwrap {
-		background: var(--wp-admin-theme-color);
-	}
-
-	.newspack-footer {
-		background: var(--wp-admin-theme-color);
-		border-color: var(--wp-admin-theme-color);
-		justify-content: center;
-
-		&__logo {
-			background: inherit;
-		}
-	}
-
-	#wpfooter {
-		color: white;
-
-		a {
-			color: inherit;
-
-			&:active,
-			&:focus,
-			&:hover {
-				opacity: 0.75;
-			}
-		}
-	}
-}
-
 // Loading
 .newspack-wizard__is-loading {
 	background: white;
@@ -174,29 +147,6 @@ svg {
 		}
 	}
 
-	// Blue Screen
-	.newspack-wizard__blue & {
-		background: var(--wp-admin-theme-color);
-
-		&::before {
-			animation: loading-quiet 1.25s ease-in-out infinite;
-			background: white;
-			border-radius: 0;
-			box-shadow: 0;
-			height: 8px;
-			left: 0;
-			margin: 0;
-			position: absolute;
-			right: 100%;
-			top: 0;
-			width: auto;
-		}
-
-		&::after {
-			display: none;
-		}
-	}
-
 	// Quiet
 	&-quiet {
 		position: relative;

package/src/with-wizard-screen/style.scss

@@ -65,18 +65,38 @@
 			}
 		}
 		&__inner {
-			flex: 1;
+			flex: 1 1 100%;
 		}
 		&__actions {
 			align-items: center;
 			display: flex;
-			flex: 1 1 auto;
 			gap: 8px;
 			justify-content: flex-end;
 			padding: 0 24px 0 0;
+			> .newspack-wizard__header__actions__main {
+				display: none;
+			}
+			@media only screen and ( min-width: 782px ) {
+				flex: 1 1 auto;
+				> .newspack-wizard__header__actions__main {
+					display: flex;
+				}
+				&__more {
+					&--primary-only,
+					.newspack-wizard__header__actions__more__main {
+						display: none;
+					}
+				}
+			}
 		}
 	}
 
+	&__main {
+		overflow-x: hidden;
+		padding-bottom: 1px; /* Prevents borders from being cut off */
+	}
+
+
 	&__title {
 		align-items: center;
 		display: flex;
@@ -149,7 +169,15 @@
 	}
 
 	&__section-header {
-		margin-bottom: 32px;
+		margin: 0 auto 32px;
+		max-width: calc(calc(var(--newspack-wizard-section-space) * 2) + var(--newspack-wizard-section-width));
+		&:not(.newspack-section-header--has-primary-action) {
+			@media (min-width: 782px) {
+				.newspack-section-header__title-container + p {
+					max-width: 50%;
+				}
+			}
+		}
 	}
 
 	&__content {
@@ -180,6 +208,16 @@
 				margin: 64px 0;
 			}
 		}
+		&:not(.newspack-wizard__content--full-width) {
+			.newspack-dataviews {
+				margin-left: -24px;
+				margin-right: -24px;
+				@media (min-width: 380px) {
+					margin-left: -48px;
+					margin-right: -48px;
+				}
+			}
+		}
 	}
 
 	&__above-header {

package/src/wizard/index.js

@@ -10,7 +10,7 @@ import { DropdownMenu, MenuItem } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect, useState, forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { category, moreVertical } from '@wordpress/icons';
+import { category, chevronLeft, moreVertical } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -23,6 +23,19 @@ import WizardError from './components/WizardError';
 
 registerStore();
 
+/**
+ * Icon registry for resolving icon name strings passed through the data store.
+ * React elements from @wordpress/icons can't cross webpack entry point boundaries
+ * because each bundle has its own copy of the icon primitives.
+ */
+const ICON_REGISTRY = { chevronLeft, category, moreVertical };
+const resolveIcon = icon => {
+	if ( typeof icon === 'string' ) {
+		return ICON_REGISTRY[ icon ] || null;
+	}
+	return icon;
+};
+
 const { HashRouter, Redirect, Route, Switch, useLocation } = Router;
 
 /**
@@ -34,6 +47,7 @@ const ResetHeaderData = () => {
 
 	useEffect( () => {
 		resetHeaderData();
+		window.scrollTo( 0, 0 );
 	}, [ location.pathname, resetHeaderData ] );
 
 	return null;
@@ -80,7 +94,8 @@ const Wizard = (
 	const isQuietLoading = useSelect( select => select( WIZARD_STORE_NAMESPACE ).isQuietLoading() );
 	const headerData = useSelect( select => select( WIZARD_STORE_NAMESPACE ).getHeaderData() );
 	const notices = useSelect( select => select( WIZARD_STORE_NAMESPACE ).getNotices() );
-	const { actions, backNav, badges, sectionDescription, sectionName, sectionTitle, sectionPrimaryAction, sectionSecondaryAction } = headerData;
+	const { actions, backNav, badges, sectionDescription, sectionMenu, sectionName, sectionTitle, sectionPrimaryAction, sectionSecondaryAction } =
+		headerData;
 
 	const mainActions = actions?.filter( action => action.type === 'primary' || action.type === 'secondary' );
 	const moreActions = actions?.filter( action => action.type === 'more' );
@@ -104,6 +119,10 @@ const Wizard = (
 		];
 	}
 
+	// When plugins are required but not yet satisfied, `displayedSections` is replaced with
+	// the PluginInstaller. Use it for routing so the installer actually mounts and runs.
+	const routedSections = pluginRequirementsSatisfied ? sections : displayedSections;
+
 	const urlWithoutHash = window.location.href.split( '#' )[ 0 ];
 
 	return (
@@ -153,7 +172,9 @@ const Wizard = (
 								{ mainActions.map( ( action, index ) => (
 									<Button
 										key={ index }
-										icon={ action.icon }
+										className="newspack-wizard__header__actions__main"
+										href={ action.href }
+										icon={ resolveIcon( action.icon ) }
 										variant={ action.type }
 										onClick={ action.action }
 										disabled={ action.disabled || false }
@@ -162,23 +183,32 @@ const Wizard = (
 										{ action.label }
 									</Button>
 								) ) }
-								{ moreActions.length > 0 && (
-									<DropdownMenu icon={ moreVertical } label={ __( 'More', 'newspack-plugin' ) }>
-										{ () =>
-											moreActions.map( ( action, index ) => (
-												<MenuItem
-													key={ index }
-													icon={ action.icon }
-													onClick={ action.action }
-													disabled={ action.disabled || false }
-													isDestructive={ action.destructive || false }
-												>
-													{ action.label }
-												</MenuItem>
-											) )
-										}
-									</DropdownMenu>
-								) }
+								<DropdownMenu
+									className={ moreActions?.length === 0 ? 'newspack-wizard__header__actions__more--primary-only' : '' }
+									icon={ moreVertical }
+									label={ __( 'More', 'newspack-plugin' ) }
+									popoverProps={ { className: 'newspack-wizard__header__actions__more' } }
+								>
+									{ () =>
+										actions.map( ( action, index ) => (
+											<MenuItem
+												key={ index }
+												className={
+													action.type === 'primary' || action.type === 'secondary'
+														? 'newspack-wizard__header__actions__more__main'
+														: 'newspack-wizard__header__actions__more__more'
+												}
+												icon={ action.icon }
+												href={ action.href }
+												onClick={ action.action }
+												disabled={ action.disabled || false }
+												isDestructive={ action.destructive || false }
+											>
+												{ action.label }
+											</MenuItem>
+										) )
+									}
+								</DropdownMenu>
 							</div>
 						) }
 					</div>
@@ -192,39 +222,46 @@ const Wizard = (
 
 					{ sections.length > 1 && <ResetHeaderData /> }
 
-					<Switch>
-						{ sections.map( ( section, index ) => {
-							const SectionComponent = section.render;
-							const sectionProps = section.props || {};
-							return (
-								<Route
-									key={ index }
-									exact={ section.exact ?? false }
-									path={ section.path }
-									render={ routerProps => (
-										<div className={ classnames( 'newspack-wizard__content', className ) }>
-											{ 'function' === typeof renderAboveSections ? renderAboveSections() : null }
-											{ ( sectionTitle || section.title ) && (
-												<SectionHeader
-													className="newspack-wizard__section-header"
-													backNav={ backNav || section.backNav }
-													title={ sectionTitle || section.title }
-													description={ sectionDescription || section.description }
-													badges={ badges || section.badges }
-													primaryAction={ sectionPrimaryAction || section.primaryAction }
-													secondaryAction={ sectionSecondaryAction || section.secondaryAction }
-													heading={ 1 }
-													noMargin
-												/>
-											) }
-											<SectionComponent { ...routerProps } { ...sectionProps } { ...sharedProps } />
-										</div>
-									) }
-								/>
-							);
-						} ) }
-						<Redirect to={ displayedSections[ 0 ].path } />
-					</Switch>
+					<div className="newspack-wizard__main">
+						<Switch>
+							{ routedSections.map( ( section, index ) => {
+								const SectionComponent = section.render;
+								const sectionProps = section.props || {};
+								return (
+									<Route
+										key={ index }
+										exact={ section.exact ?? false }
+										path={ section.path }
+										render={ routerProps => (
+											<div
+												className={ classnames( 'newspack-wizard__content', className, {
+													'newspack-wizard__content--full-width': section.fullWidth,
+												} ) }
+											>
+												{ 'function' === typeof renderAboveSections ? renderAboveSections() : null }
+												{ ( sectionTitle || section.title ) && (
+													<SectionHeader
+														className="newspack-wizard__section-header"
+														backNav={ backNav || section.backNav }
+														title={ sectionTitle || section.title }
+														description={ sectionDescription || section.description }
+														badges={ badges || section.badges }
+														menu={ sectionMenu || section.menu }
+														primaryAction={ sectionPrimaryAction || section.primaryAction }
+														secondaryAction={ sectionSecondaryAction || section.secondaryAction }
+														heading={ 1 }
+														noMargin
+													/>
+												) }
+												<SectionComponent { ...routerProps } { ...sectionProps } { ...sharedProps } />
+											</div>
+										) }
+									/>
+								);
+							} ) }
+							<Redirect to={ displayedSections[ 0 ].path } />
+						</Switch>
+					</div>
 				</HashRouter>
 				{ notices?.length > 0 &&
 					notices.map( ( notice, index ) => (

package/src/wizard/store/index.js

@@ -52,9 +52,9 @@ const reducer = ( state = DEFAULT_STATE, { type, payload = {} } ) => {
 		case 'FINISH_LOADING_DATA':
 			return { ...state, isLoading: false, isQuietLoading: false };
 		case 'SET_API_DATA':
-			return set( clone( state ), [ 'apiData', payload.slug ], payload.data );
+			return { ...state, apiData: set( clone( state.apiData ), [ payload.slug ], payload.data ) };
 		case 'UPDATE_WIZARD_SETTINGS':
-			return set( clone( state ), [ 'apiData', payload.slug, ...payload.path ], payload.value );
+			return { ...state, apiData: set( clone( state.apiData ), [ payload.slug, ...payload.path ], payload.value ) };
 		case 'ADD_NOTICE':
 			return { ...state, notices: [ ...state.notices, payload ] };
 		case 'REMOVE_NOTICE':