newspack-components 4.2.0 → 4.4.0-epic-editor-refactor.1

package/src/section-header/style.scss

@@ -3,21 +3,66 @@
  */
 
 @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 {
+	flex: 1;
 	margin: 64px 0 32px;
 
-	&__container:not(:first-child) {
-		margin-top: 48px;
+	&__container {
+		position: relative;
+		&: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;
+			gap: 32px;
+			@media (min-width: 782px) {
+				align-items: flex-start;
+				flex-direction: row;
+			}
+		}
+		&.newspack-section-header--has-back-nav {
+			@media (min-width: 782px) {
+				.newspack-section-header__title-container,
+				p {
+					max-width: calc(50% - 16px);
+				}
+			}
+		}
+	}
+
+	&__back-nav {
+		@media (min-width: 1280px) {
+			left: 0;
+			position: absolute;
+			top: 50%;
+			transform: translate(calc(-100% - 8px), -50%);
+		}
+		a,
+		button {
+			color: inherit !important;
+		}
 	}
 
-	&--no-margin,
 	h1,
 	h2,
 	h3,
 	h4,
 	h5,
 	h6 {
+		align-items: center;
+		display: flex;
+		gap: 8px;
+		margin: 0 !important;
+	}
+
+	&--no-margin {
 		margin: 0 !important;
 	}
 
@@ -25,7 +70,7 @@
 		text-align: center;
 	}
 
-	&:not( #{&}--no-margin ) + *:not( #{&} ) {
+	&:not( #{&}--no-margin ) + *:not( #{&} ):not(.newspack-wizard__section-header):not(.newspack-section-header__primary-action) {
 		margin-top: -16px !important;
 	}
 
@@ -39,7 +84,87 @@
 		color: wp-colors.$gray-700;
 	}
 
+	&__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 {
+			margin-top: 8px;
+		}
+	}
+
+	&__menu {
+		align-self: center;
+	}
+
+	&__primary-action {
+		@media (min-width: 782px) {
+			display: flex;
+			flex: 1;
+			justify-content: flex-end;
+		}
+	}
+
+	&__secondary-action {
+		display: flex;
+		margin-left: 8px;
+	}
+
+	&__children {
+		margin-top: 32px;
+		width: 100%;
+		.newspack-button-card:not(.grouped) {
+			margin-bottom: 0;
+			& + .newspack-button-card:not(.grouped) {
+				margin-top: 16px;
+			}
+		}
+	}
+
 	.newspack-wizard__content &:first-child {
 		margin-top: 32px;
 	}
+	&.newspack-section-header--page-header {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		margin-left: auto;
+		margin-right: auto;
+		> h1,
+		> h2,
+		> h3,
+		> h4,
+		> h5,
+		> h6,
+		> p {
+			text-align: center;
+		}
+		.newspack-section-header__icon {
+			background-color: var(--wp-admin-theme-color-lighter-10);
+			border-radius: 100%;
+			display: grid;
+			height: 80px;
+			margin-bottom: 8px !important;
+			width: 80px;
+			place-items: center;
+			svg {
+				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/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/style.scss

@@ -9,6 +9,8 @@
 	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
 	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
 	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};
+	--wp-admin-theme-color-lighter-10: #{colors.$primary-000};
+	--wp-admin-theme-color-lighter-10--rgb: #{colors.$primary-000--rgb};
 }
 
 // Buttons Card

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/waiting/index.js

@@ -23,11 +23,12 @@ class Waiting extends Component {
 	 * Render
 	 */
 	render() {
-		const { className, isRight, isLeft, isCenter, ...otherProps } = this.props;
+		const { className, isRight, isLeft, isCenter, noMargin, ...otherProps } = this.props;
 		const classes = classnames( 'newspack-waiting', className, {
 			'is-right': isRight,
 			'is-left': isLeft,
 			'is-center': isCenter,
+			'no-margin': noMargin,
 		} );
 		return <Spinner className={ classes } { ...otherProps } />;
 	}

package/src/waiting/style.scss

@@ -24,4 +24,8 @@
 	&.is-center {
 		margin: auto;
 	}
+
+	&.no-margin {
+		margin: 0;
+	}
 }

package/src/web-preview/index.js

@@ -3,8 +3,8 @@
  */
 import { Component, createRef, Fragment, createPortal } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { closeSmall, desktop, mobile, tablet } from '@wordpress/icons';
-import { Button, ButtonGroup } from '@wordpress/components';
+import { close, desktop, mobile, tablet, check } from '@wordpress/icons';
+import { Button, DropdownMenu, MenuItem } from '@wordpress/components';
 
 /**
  * Internal dependencies.
@@ -48,21 +48,55 @@ class WebPreview extends Component {
 	}
 
 	/**
-	 * Add or remove applicable body classes
+	 * Add or remove applicable body classes and keyboard event listeners
 	 */
-	componentDidUpdate() {
+	componentDidUpdate( prevProps, prevState ) {
 		if ( this.state.isPreviewVisible === true ) {
 			document.body.classList.add( 'newspack-web-preview--open' );
+			if ( prevState.isPreviewVisible === false ) {
+				// Add event listener when modal opens
+				document.addEventListener( 'keydown', this.handleKeyDown );
+			}
 		} else {
 			document.body.classList.remove( 'newspack-web-preview--open' );
+			if ( prevState.isPreviewVisible === true ) {
+				// Remove event listener when modal closes
+				document.removeEventListener( 'keydown', this.handleKeyDown );
+			}
 		}
 	}
 
+	/**
+	 * Clean up event listeners on unmount
+	 */
+	componentWillUnmount() {
+		document.removeEventListener( 'keydown', this.handleKeyDown );
+		document.body.classList.remove( 'newspack-web-preview--open' );
+	}
+
+	/**
+	 * Handle keyboard events
+	 */
+	handleKeyDown = event => {
+		if ( event.key === 'Escape' && this.state.isPreviewVisible ) {
+			this.closePreview();
+		}
+	};
+
+	/**
+	 * Close the preview modal
+	 */
+	closePreview = () => {
+		const { onClose = () => {} } = this.props;
+		onClose();
+		this.setState( { isPreviewVisible: false, loaded: false } );
+	};
+
 	/**
 	 * Create JSX for the modal
 	 */
 	getWebPreviewModal = () => {
-		const { beforeLoad = () => {}, onClose = () => {}, url } = this.props;
+		const { beforeLoad = () => {}, url, title } = this.props;
 		const { device, loaded, isPreviewVisible } = this.state;
 
 		if ( ! this.modalDOMElement || ! isPreviewVisible ) {
@@ -70,42 +104,63 @@ class WebPreview extends Component {
 		}
 
 		const classes = classnames( 'newspack-web-preview', device, loaded && 'is-loaded' );
+		let icon = mobile;
+		if ( device === 'desktop' ) {
+			icon = desktop;
+		} else if ( device === 'tablet' ) {
+			icon = tablet;
+		}
 		beforeLoad();
 		return createPortal(
 			<div className={ classes }>
 				<div className="newspack-web-preview__interior">
 					<div className="newspack-web-preview__toolbar">
-						<div className="newspack-web-preview__toolbar-left">
-							<ButtonGroup>
-								<Button
-									onClick={ () => this.setState( { device: 'desktop' } ) }
-									variant={ 'desktop' === device && 'primary' }
-									icon={ desktop }
-									label={ __( 'Preview Desktop Size', 'newspack-plugin' ) }
-								/>
-								<Button
-									onClick={ () => this.setState( { device: 'tablet' } ) }
-									variant={ 'tablet' === device && 'primary' }
-									icon={ tablet }
-									label={ __( 'Preview Tablet Size', 'newspack-plugin' ) }
-								/>
-								<Button
-									onClick={ () => this.setState( { device: 'phone' } ) }
-									variant={ 'phone' === device && 'primary' }
-									icon={ mobile }
-									label={ __( 'Preview Phone Size', 'newspack-plugin' ) }
-								/>
-							</ButtonGroup>
-						</div>
+						{ title && (
+							<div className="newspack-web-preview__toolbar-left">
+								<h3>{ title }</h3>
+							</div>
+						) }
 						<div className="newspack-web-preview__toolbar-right">
-							<Button
-								onClick={ () => {
-									onClose();
-									this.setState( { isPreviewVisible: false, loaded: false } );
-								} }
-								icon={ closeSmall }
-								label={ __( 'Close Preview', 'newspack-plugin' ) }
-							/>
+							<DropdownMenu icon={ icon } label={ __( 'Preview Size', 'newspack-plugin' ) }>
+								{ ( { onClose: onDropdownClose } ) => (
+									<>
+										<MenuItem
+											icon={ device === 'desktop' ? check : null }
+											role="menuitemradio"
+											isSelected={ device === 'desktop' }
+											onClick={ () => {
+												this.setState( { device: 'desktop' } );
+												onDropdownClose();
+											} }
+										>
+											{ __( 'Desktop', 'newspack-plugin' ) }
+										</MenuItem>
+										<MenuItem
+											icon={ device === 'tablet' ? check : null }
+											role="menuitemradio"
+											isSelected={ device === 'tablet' }
+											onClick={ () => {
+												this.setState( { device: 'tablet' } );
+												onDropdownClose();
+											} }
+										>
+											{ __( 'Tablet', 'newspack-plugin' ) }
+										</MenuItem>
+										<MenuItem
+											icon={ device === 'phone' ? check : null }
+											role="menuitemradio"
+											isSelected={ device === 'phone' }
+											onClick={ () => {
+												this.setState( { device: 'phone' } );
+												onDropdownClose();
+											} }
+										>
+											{ __( 'Phone', 'newspack-plugin' ) }
+										</MenuItem>
+									</>
+								) }
+							</DropdownMenu>
+							<Button onClick={ this.closePreview } icon={ close } label={ __( 'Close Preview', 'newspack-plugin' ) } />
 						</div>
 					</div>
 					<div className="newspack-web-preview__content">

package/src/web-preview/style.scss

@@ -13,8 +13,10 @@
 	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
 	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
 	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};
+	--wp-admin-theme-color-lighter-10: #{colors.$primary-000};
+	--wp-admin-theme-color-lighter-10--rgb: #{colors.$primary-000--rgb};
 
-	background: #{colors.$neutral-700};
+	background: color-mix(in srgb, colors.$neutral-1000, transparent 65%);
 	box-sizing: border-box;
 	height: 100%;
 	left: 0;
@@ -27,11 +29,11 @@
 	z-index: 99999;
 
 	&.phone iframe {
-		max-width: 380px;
+		max-width: 360px;
 	}
 
 	&.tablet iframe {
-		max-width: 768px;
+		max-width: 780px;
 	}
 
 	&.is-loaded iframe {
@@ -46,7 +48,7 @@
 		animation: appear-animation 125ms ease-in-out;
 		animation-fill-mode: forwards;
 		background: white;
-		border-radius: 2px;
+		border-radius: 8px;
 		overflow: hidden;
 		height: 100%;
 		width: 100%;
@@ -54,19 +56,18 @@
 
 	&__content {
 		background: wp-colors.$gray-100;
-		height: calc(100% - 49px);
+		height: calc(100% - 72px);
 		-webkit-overflow-scrolling: touch;
 		overflow-x: hidden;
 		width: 100%;
 
 		iframe {
-			background: #fff;
+			background: white;
 			display: block;
 			height: 100%;
 			margin: 0 auto;
 			max-width: 100%;
 			opacity: 0;
-			outline: 1px solid wp-colors.$gray-300;
 			padding: 0;
 			pointer-events: all;
 			transition: max-width 125ms ease-in-out, opacity 250ms ease-in-out;
@@ -85,62 +86,28 @@
 	}
 
 	&__toolbar {
+		align-items: center;
 		border-bottom: 1px solid wp-colors.$gray-300;
 		display: flex;
-		padding: 6px;
+		gap: 16px;
+		justify-content: space-between;
+		min-height: 71px;
+		padding: 12px 24px;
 
 		&-left {
-			flex: 0 0 auto;
+			display: flex;
 
-			.newspack-button-group {
-				display: flex;
+			h3 {
 				margin: 0;
 			}
-
-			.newspack-button {
-				display: none;
-				padding: 0 !important;
-
-				&.is-selected {
-					background: var(--wp-admin-theme-color);
-					color: white;
-
-					&:active,
-					&:focus,
-					&:hover {
-						box-shadow: none !important;
-						color: white;
-						outline: none;
-					}
-
-					&:focus {
-						box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color), inset 0 0 0 3px white !important;
-					}
-				}
-
-				@media screen and ( min-width: 528px ) {
-					&.is-phone,
-					&.is-tablet {
-						display: flex;
-					}
-				}
-
-				@media screen and ( min-width: 816px ) {
-					&.is-desktop {
-						display: flex;
-					}
-				}
-			}
 		}
 
 		&-right {
-			display: flex;
-			flex: 1;
-			justify-content: flex-end;
-		}
-
-		.newspack-button {
-			border-radius: 0 !important;
+			display: grid;
+			gap: 8px;
+			grid-template-columns: repeat(2, 1fr);
+			justify-self: end;
+			margin-left: auto;
 		}
 	}
 }

package/src/with-wizard/index.js

@@ -279,7 +279,7 @@ export default function withWizard( WrappedComponent, requiredPlugins ) {
 			return (
 				message &&
 				callback && (
-					<Modal isNarrow hideTitle={ ! title } title={ title } onRequestClose={ () => this.setState( { confirmation: null } ) }>
+					<Modal size="small" hideTitle={ ! title } title={ title } onRequestClose={ () => this.setState( { confirmation: null } ) }>
 						<p>{ message }</p>
 						<Card buttonsCard noBorder className="justify-end">
 							<Button variant="secondary" onClick={ () => this.setState( { confirmation: null } ) }>