UI bug fixes reported

src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js

@@ -2,7 +2,7 @@
 import { forwardRef, useImperativeHandle } from 'react';
 import { useState, useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { PanelBody, PanelRow, Button, Dashicon } from '@wordpress/components';
+import { PanelBody, PanelRow, Button } from '@wordpress/components';
 import './stylesheet.scss';
 import { store as nfdOnboardingStore } from '../../../../../store';
 import { __ } from '@wordpress/i18n';
@@ -154,17 +154,11 @@ const CustomFontsDisplay = ( {
 				role="presentation"
 				onClick={ () => handleGroupSelect( 'custom' ) }
 			>
-				<Dashicon
-					className={ `${ baseClassName }__font-group__container__button__icon` }
-					icon={ 'yes-alt' }
-					size={ 30 }
-					style={ {
-						color:
-							selectedGroup === 'custom'
-								? 'var(--nfd-onboarding-sitegen-customize-icon-selected)'
-								: 'var(--nfd-onboarding-sitegen-customize-grey-1)',
-					} }
-				/>
+				<span
+					className={ `${ baseClassName }__font-group__container__button__icon${
+						selectedGroup === 'custom' ? ` selected` : ``
+					}` }
+				></span>
 				<div
 					className={ `${ baseClassName }__font-group__container__button__font-name__container` }
 				>

src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js

@@ -1,73 +1,19 @@
 import { Icon, chevronDown, reusableBlock } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
-import { useRef } from '@wordpress/element';
+import { useRef, useState, useEffect, memo } from '@wordpress/element';
 import { ReactComponent as FavoriteIconStroked } from '../../../../static/icons/sitegen/heart-stroked.svg';
 import { ReactComponent as FavoriteFilled } from '../../../../static/icons/sitegen/heart-filled.svg';
 import { Dropdown, MenuGroup, MenuItem } from '@wordpress/components';
 
-const StepEditorHeaderCenter = ( {
-	handleFavorite,
-	handleRename,
-	handleViewAll,
-	handleRegenerate,
-	handleCustomize,
-	handleIsRenaming,
-	isRenaming,
-	homepageTitle,
-	isFavorite,
-} ) => {
-	const isLargeViewport = useViewportMatch( 'medium' );
-	const inputRef = useRef( null );
-
-	const onRegenerate = () => {
-		if ( typeof handleRegenerate === 'function' ) {
-			return handleRegenerate();
-		}
-	};
-
-	const onFavorite = () => {
-		if ( typeof onFavorite === 'function' ) {
-			return handleFavorite();
-		}
-	};
-
-	const onCustomize = () => {
-		if ( typeof handleCustomize === 'function' ) {
-			return handleCustomize();
-		}
-	};
-
-	const onViewAll = () => {
-		if ( typeof handleViewAll === 'function' ) {
-			return handleViewAll();
-		}
-	};
-
-	const onRenameItemSelect = () => {
-		if ( typeof handleIsRenaming === 'function' ) {
-			handleIsRenaming( true );
-			return inputRef.current.focus();
-		}
-	};
-
-	const onRename = () => {
-		if ( typeof handleRename === 'function' ) {
-			handleRename( inputRef.current.value );
-		}
-	};
-
-	const onTitleInputBlur = () => {
-		if ( typeof handleIsRenaming === 'function' ) {
-			return handleIsRenaming( false );
-		}
-	};
-
-	if ( isRenaming ) {
-		inputRef.current.focus();
-	}
-
-	const DropDownMenu = () => {
+const DropDownMenu = memo(
+	( {
+		onRegenerate,
+		onCustomize,
+		onRenameItemSelect,
+		onViewAll,
+		isLargeViewport,
+	} ) => {
 		return (
 			<MenuGroup className="nfd-onboarding-header__version_dropdown-menu">
 				{ ! isLargeViewport && (
@@ -91,9 +37,46 @@ const StepEditorHeaderCenter = ( {
 				</MenuItem>
 			</MenuGroup>
 		);
-	};
+	}
+);
+
+const TitleContent = memo(
+	( {
+		isFavorite,
+		homepageTitle,
+		onFavorite,
+		onRename,
+		inputRef,
+		onRegenerate,
+		onCustomize,
+		onRenameItemSelect,
+		onViewAll,
+		isLargeViewport,
+		isInputEnabled,
+		enableInput,
+	} ) => {
+		const [ renameInputValue, setRenameInputValue ] =
+			useState( homepageTitle );
+
+		const handleOnChange = () => {
+			setRenameInputValue( inputRef.current.value );
+		};
+
+		const onTitleInputBlur = () => {
+			onRename();
+			enableInput( false );
+		};
+
+		useEffect( () => {
+			if ( isInputEnabled ) {
+				inputRef.current?.focus();
+			}
+		}, [ isInputEnabled, inputRef ] );
+
+		useEffect( () => {
+			setRenameInputValue( homepageTitle );
+		}, [ homepageTitle ] );
 
-	const TitleContent = () => {
 		return (
 			<Dropdown
 				renderToggle={ ( { isOpen, onToggle } ) => (
@@ -122,12 +105,12 @@ const StepEditorHeaderCenter = ( {
 						</div>
 						<input
 							ref={ inputRef }
+							disabled={ ! isInputEnabled }
 							className="nfd-onboarding-header__center-input"
-							disabled={ ! isRenaming }
 							type="text"
-							value={ homepageTitle }
+							value={ renameInputValue }
 							onBlur={ onTitleInputBlur }
-							onChange={ onRename }
+							onChange={ handleOnChange }
 						/>
 						<Icon
 							icon={ chevronDown }
@@ -140,14 +123,89 @@ const StepEditorHeaderCenter = ( {
 						/>
 					</div>
 				) }
-				renderContent={ DropDownMenu }
+				renderContent={ () => (
+					<DropDownMenu
+						onRegenerate={ onRegenerate }
+						onCustomize={ onCustomize }
+						onRenameItemSelect={ onRenameItemSelect }
+						onViewAll={ onViewAll }
+						isLargeViewport={ isLargeViewport }
+					/>
+				) }
 			/>
 		);
+	}
+);
+
+const StepEditorHeaderCenter = ( {
+	handleFavorite,
+	handleRename,
+	handleViewAll,
+	handleRegenerate,
+	handleCustomize,
+	homepageTitle,
+	isFavorite,
+} ) => {
+	const isLargeViewport = useViewportMatch( 'medium' );
+	const inputRef = useRef( null );
+	const [ isInputEnabled, setInputEnabled ] = useState( false );
+	const enableInput = ( isEnabled ) => {
+		setInputEnabled( isEnabled );
+		if ( isEnabled ) {
+			inputRef.current?.focus();
+		}
+	};
+
+	const onRegenerate = () => {
+		if ( typeof handleRegenerate === 'function' ) {
+			return handleRegenerate();
+		}
+	};
+
+	const onFavorite = () => {
+		if ( typeof onFavorite === 'function' ) {
+			return handleFavorite();
+		}
+	};
+
+	const onCustomize = () => {
+		if ( typeof handleCustomize === 'function' ) {
+			return handleCustomize();
+		}
+	};
+
+	const onViewAll = () => {
+		if ( typeof handleViewAll === 'function' ) {
+			return handleViewAll();
+		}
+	};
+
+	const onRenameItemSelect = () => {
+		enableInput( true );
+	};
+
+	const onRename = () => {
+		if ( typeof handleRename === 'function' ) {
+			handleRename( inputRef.current.value );
+		}
 	};
 
 	return (
 		<div className="nfd-onboarding-header__step-navigation">
-			<TitleContent />
+			<TitleContent
+				isFavorite={ isFavorite }
+				homepageTitle={ homepageTitle }
+				onFavorite={ onFavorite }
+				onRename={ onRename }
+				inputRef={ inputRef }
+				onRegenerate={ onRegenerate }
+				onCustomize={ onCustomize }
+				onRenameItemSelect={ onRenameItemSelect }
+				onViewAll={ onViewAll }
+				isLargeViewport={ isLargeViewport }
+				isInputEnabled={ isInputEnabled }
+				enableInput={ enableInput }
+			/>
 		</div>
 	);
 };

src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js

@@ -24,7 +24,6 @@
 	const [ homepage, setHomepage ] = useState();
 	const [ isSaving, setIsSaving ] = useState( false );
 	const [ isRegenerating, setIsRegenerating ] = useState( false );
-	const [ isEditingTitle, setIsEditingTitle ] = useState( false );
 
 	const isLargeViewport = useViewportMatch( 'medium' );
 
@@ -126,7 +125,7 @@
 
 	useEffect( () => {
 		handleCustomize();
 	}, [] );
 
 	useEffect( () => {
 		if ( currentData?.sitegen?.homepages?.active ) {
@@ -176,13 +175,9 @@
 							handleViewAll={ handleViewAll }
 							handleCustomize={ handleCustomize }
 							handleRegenerate={ handleRegenerate }
-							handleIsRenaming={ ( isRenaming ) =>
-								setIsEditingTitle( isRenaming )
-							}
 							handleRename={ handleRename }
 							homepageTitle={ homepage.title }
 							isFavorite={ homepage.isFavorite }
-							isRenaming={ isEditingTitle }
 						/>
 					</div>
 				) }
@@ -215,9 +210,9 @@
 						>
 							{ isLargeViewport
 								? __(
-										'Save & Continue',
-										'wp-module-onboarding'
-								  )
+									'Save & Continue',
+									'wp-module-onboarding'
+								)
 								: __( 'Next', 'wp-module-onboarding' ) }
 						</div>
 						{ isSaving ? (

src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss

@@ -15,10 +15,19 @@
 		color: var(--nfd-onboarding-header-contrast);
 		background-color: var(--nfd-onboarding-header-base);
 		width: 150px;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
 
 		@media (max-width: #{ ($break-small) }) {
 			width: 80px;
 		}
+
+		&:focus {
+			overflow: visible;
+			white-space: normal;
+			text-overflow: clip;
+		}
 	}
 }
 

src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss

@@ -45,7 +45,7 @@
 
 	&__options {
 
-		@media (max-width: #{ ($break-xlarge) }) {
+		@media (max-width: #{ ($break-medium) }) {
 			flex-direction: column;
 		}
 
@@ -55,6 +55,8 @@
 		margin: 10px 10px 55px 10px;
 		flex-wrap: wrap;
 		max-width: 1440px;
+		align-items: center;
+		justify-content: center;
 	}
 
 	&__note {