feat(web-preview): add ESC key support and dynamic titles for segments and prompts

packages/components/src/web-preview/index.js

@@ -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, title } = this.props;
+		const { beforeLoad = () => {}, url, title } = this.props;
 		const { device, loaded, isPreviewVisible } = this.state;
 
 		if ( ! this.modalDOMElement || ! isPreviewVisible ) {
@@ -83,7 +117,7 @@ class WebPreview extends Component {
 					<div className="newspack-web-preview__toolbar">
 						{ title && (
 							<div className="newspack-web-preview__toolbar-left">
-								<h2>{ title }</h2>
+								<h3>{ title }</h3>
 							</div>
 						) }
 						<div className="newspack-web-preview__toolbar-right">
@@ -126,14 +160,7 @@ class WebPreview extends Component {
 									</>
 								) }
 							</DropdownMenu>
-							<Button
-								onClick={ () => {
-									onClose();
-									this.setState( { isPreviewVisible: false, loaded: false } );
-								} }
-								icon={ close }
-								label={ __( 'Close Preview', 'newspack-plugin' ) }
-							/>
+							<Button onClick={ this.closePreview } icon={ close } label={ __( 'Close Preview', 'newspack-plugin' ) } />
 						</div>
 					</div>
 					<div className="newspack-web-preview__content">

packages/components/src/web-preview/style.scss

@@ -87,12 +87,17 @@
 		align-items: center;
 		border-bottom: 1px solid wp-colors.$gray-300;
 		display: flex;
+		gap: 16px;
 		justify-content: space-between;
-		height: 71px;
-		padding: 0 24px;
+		min-height: 71px;
+		padding: 12px 24px;
 
 		&-left {
 			display: flex;
+
+			h3 {
+				margin: 0;
+			}
 		}
 
 		&-right {

src/wizards/audience/components/segment-group/index.js

@@ -5,7 +5,7 @@
 /**
  * WordPress dependencies.
  */
-import { __ } from '@wordpress/i18n';
+import { sprintf, __ } from '@wordpress/i18n';
 import { useState, Fragment } from '@wordpress/element';
 import { blockTable, header, layout, postList } from '@wordpress/icons';
 
@@ -58,13 +58,15 @@ const SegmentGroup = props => {
 						{ id ? (
 							<Button
 								href={ `#/segments/${ id }` }
-								label={ __( 'Edit Segment ', 'newspack-plugin' ) }
+								label={ __( 'Edit Segment', 'newspack-plugin' ) }
 								isLink
 								showTooltip
 								tooltipPosition="bottom center"
 							>
-								{ __( 'Segment: ', 'newspack-plugin' ) }
-								{ label }
+								{
+									/* translators: %s: segment label */
+									sprintf( __( 'Segment: %s', 'newspack-plugin' ), label )
+								}
 							</Button>
 						) : (
 							label
@@ -84,6 +86,10 @@ const SegmentGroup = props => {
 								{ __( 'Preview Segment', 'newspack-plugin' ) }
 							</Button>
 						) }
+						title={
+							/* translators: %s: segment label */
+							sprintf( __( 'Segment: %s', 'newspack-plugin' ), label )
+						}
 					/>
 					{ 'unassigned' !== campaignId && (
 						<Fragment>

src/wizards/audience/views/campaigns/index.js

@@ -9,7 +9,7 @@ import '../../../../shared/js/public-path';
  * WordPress dependencies.
  */
 import { Component } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
 
 /**
@@ -56,6 +56,7 @@ class AudienceCampaigns extends Component {
 			segments: [],
 			settings: [],
 			previewUrl: null,
+			previewTitle: null,
 			duplicated: null,
 			inFlight: false,
 		};
@@ -212,10 +213,12 @@ class AudienceCampaigns extends Component {
 
 	render() {
 		const { pluginRequirements, setError, isLoading, wizardApiFetch, startLoading, doneLoading } = this.props;
-		const { campaigns, inFlight, prompts, segments, settings, previewUrl, duplicated } = this.state;
+		const { campaigns, inFlight, prompts, segments, settings, previewUrl, previewTitle, duplicated } = this.state;
 		return (
 			<WebPreview
 				url={ previewUrl }
+				title={ previewTitle ? /* translators: %s: prompt title */ sprintf( __( 'Prompt: %s', 'newspack-plugin' ), previewTitle ) : null }
+				onClose={ () => this.setState( { previewUrl: null, previewTitle: null } ) }
 				renderButton={ ( { showPreview } ) => {
 					const sharedProps = {
 						headerText,
@@ -238,7 +241,8 @@ class AudienceCampaigns extends Component {
 						deletePopup: this.deletePopup,
 						restorePopup: this.restorePopup,
 						duplicatePopup: this.duplicatePopup,
-						previewPopup: popup => this.setState( { previewUrl: this.previewUrlForPopup( popup ) }, () => showPreview() ),
+						previewPopup: popup =>
+							this.setState( { previewUrl: this.previewUrlForPopup( popup ), previewTitle: popup.title }, () => showPreview() ),
 						publishPopup: this.publishPopup,
 						resetDuplicated: () => this.setState( { duplicated: null } ),
 						unpublishPopup: this.unpublishPopup,