From a34142ada01ac3db446428b4a61922d8f21ca846 Mon Sep 17 00:00:00 2001 From: ajayadav09 Date: Mon, 29 Jan 2024 21:01:15 +0530 Subject: [PATCH 01/12] rename re-render issue --- .../steps/SiteGen/Editor/Header/center.js | 178 +++++++++++------- 1 file changed, 111 insertions(+), 67 deletions(-) diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js index f7bdfd9e2..b43e16d83 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js +++ b/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, 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 ( { ! isLargeViewport && ( @@ -91,9 +37,24 @@ const StepEditorHeaderCenter = ( { ); - }; + } +); - const TitleContent = () => { +const TitleContent = memo( + ( { + isFavorite, + isRenaming, + homepageTitle, + onFavorite, + onRename, + onTitleInputBlur, + inputRef, + onRegenerate, + onCustomize, + onRenameItemSelect, + onViewAll, + isLargeViewport, + } ) => { return ( ( @@ -140,14 +101,97 @@ const StepEditorHeaderCenter = ( { /> ) } - renderContent={ DropDownMenu } + renderContent={ () => ( + + ) } /> ); + } +); + +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(); + } + return (
- +
); }; From e42dad45510b2e6d56ca93af8424eeeea2fd76e4 Mon Sep 17 00:00:00 2001 From: ajayadav09 Date: Tue, 30 Jan 2024 11:48:58 +0530 Subject: [PATCH 02/12] moved the rename logic to the center component --- .../steps/SiteGen/Editor/Header/center.js | 58 +++++++++++-------- .../steps/SiteGen/Editor/Header/index.js | 5 -- 2 files changed, 34 insertions(+), 29 deletions(-) diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js index b43e16d83..08a8250ec 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js +++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js @@ -1,7 +1,7 @@ import { Icon, chevronDown, reusableBlock } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; import { useViewportMatch } from '@wordpress/compose'; -import { useRef, memo } 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'; @@ -43,18 +43,36 @@ const DropDownMenu = memo( const TitleContent = memo( ( { isFavorite, - isRenaming, homepageTitle, onFavorite, onRename, - onTitleInputBlur, 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 ] ); + return ( ( @@ -83,12 +101,12 @@ const TitleContent = memo( { 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' ) { @@ -154,10 +177,7 @@ const StepEditorHeaderCenter = ( { }; const onRenameItemSelect = () => { - if ( typeof handleIsRenaming === 'function' ) { - handleIsRenaming( true ); - return inputRef.current.focus(); - } + enableInput( true ); }; const onRename = () => { @@ -166,31 +186,21 @@ const StepEditorHeaderCenter = ( { } }; - const onTitleInputBlur = () => { - if ( typeof handleIsRenaming === 'function' ) { - return handleIsRenaming( false ); - } - }; - - if ( isRenaming ) { - inputRef.current.focus(); - } - return (
); diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js index 32e376392..454ca9838 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js @@ -24,7 +24,6 @@ const StepSiteGenEditorHeader = () => { const [ homepage, setHomepage ] = useState(); const [ isSaving, setIsSaving ] = useState( false ); const [ isRegenerating, setIsRegenerating ] = useState( false ); - const [ isEditingTitle, setIsEditingTitle ] = useState( false ); const isLargeViewport = useViewportMatch( 'medium' ); @@ -176,13 +175,9 @@ const StepSiteGenEditorHeader = () => { handleViewAll={ handleViewAll } handleCustomize={ handleCustomize } handleRegenerate={ handleRegenerate } - handleIsRenaming={ ( isRenaming ) => - setIsEditingTitle( isRenaming ) - } handleRename={ handleRename } homepageTitle={ homepage.title } isFavorite={ homepage.isFavorite } - isRenaming={ isEditingTitle } /> ) } From f49525a29dbb387de4572b1d1e7c76c6a840c72d Mon Sep 17 00:00:00 2001 From: ajayadav09 Date: Tue, 30 Jan 2024 12:15:46 +0530 Subject: [PATCH 03/12] update homepage title as editor view changes --- src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js index 08a8250ec..a2f72c4ee 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js +++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js @@ -73,6 +73,10 @@ const TitleContent = memo( } }, [ isInputEnabled, inputRef ] ); + useEffect( () => { + setRenameInputValue( homepageTitle ); + }, [ homepageTitle ] ); + return ( ( From a147a96dc3b6b2d14d59341231fc0676f84ded53 Mon Sep 17 00:00:00 2001 From: ajayadav09 Date: Tue, 30 Jan 2024 12:43:48 +0530 Subject: [PATCH 04/12] fixed linting --- src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js index 454ca9838..ac1073f4f 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js @@ -210,9 +210,9 @@ const StepSiteGenEditorHeader = () => { > { isLargeViewport ? __( - 'Save & Continue', - 'wp-module-onboarding' - ) + 'Save & Continue', + 'wp-module-onboarding' + ) : __( 'Next', 'wp-module-onboarding' ) } { isSaving ? ( From 19bdde4f72f7884403f6a2037a34426f86145f63 Mon Sep 17 00:00:00 2001 From: ajayadav09 Date: Wed, 31 Jan 2024 11:31:14 +0530 Subject: [PATCH 05/12] fixed custom fonts icon --- .../Customize/DesignFontsPanel/index.js | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js index 04b991008..25cedbe5c 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js @@ -154,17 +154,11 @@ const CustomFontsDisplay = ( { role="presentation" onClick={ () => handleGroupSelect( 'custom' ) } > - +
From 541e4aff7e0f099bdc5201fbf8b276ba13d0ca38 Mon Sep 17 00:00:00 2001 From: ajayadav09 Date: Wed, 31 Jan 2024 11:33:24 +0530 Subject: [PATCH 06/12] fixed linting --- .../Sidebar/components/Customize/DesignFontsPanel/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js index 25cedbe5c..9d211da7d 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js +++ b/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'; From c6416e0fcad928128c89ef83548d93b479315e7b Mon Sep 17 00:00:00 2001 From: ajayadav09 Date: Wed, 31 Jan 2024 12:06:51 +0530 Subject: [PATCH 07/12] added ellipses for longer version names in editor header --- src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss index 9721852bf..6a18936cb 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss +++ b/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; + } } } From 524fdd8a0b9c31d0bb35a86e3f0876b00f90be22 Mon Sep 17 00:00:00 2001 From: ajayadav09 Date: Wed, 31 Jan 2024 12:34:32 +0530 Subject: [PATCH 08/12] two previews on Ipad --- src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss index e7ffaf1b2..f26776d45 100644 --- a/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss +++ b/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 { From 971b13fd065e7649e935587df909f6df38a4687e Mon Sep 17 00:00:00 2001 From: ajayadav09 Date: Wed, 31 Jan 2024 18:59:44 +0530 Subject: [PATCH 09/12] trim whitespace and update only when needed --- src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js index a2f72c4ee..c6fe6106e 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js +++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js @@ -63,7 +63,10 @@ const TitleContent = memo( }; const onTitleInputBlur = () => { - onRename(); + const newTitleValue = inputRef.current.value.trim(); + if ( newTitleValue && newTitleValue !== homepageTitle ) { + onRename( newTitleValue ); + } enableInput( false ); }; @@ -184,9 +187,9 @@ const StepEditorHeaderCenter = ( { enableInput( true ); }; - const onRename = () => { + const onRename = ( newTitleValue ) => { if ( typeof handleRename === 'function' ) { - handleRename( inputRef.current.value ); + handleRename( newTitleValue ); } }; From 2444166a7d385a94f8f855724b56bda00d5572bb Mon Sep 17 00:00:00 2001 From: ajayadav09 Date: Wed, 31 Jan 2024 21:19:31 +0530 Subject: [PATCH 10/12] width according to device --- .../stylesheet.scss | 7 +---- .../steps/SiteGen/Preview/stylesheet.scss | 28 +++++++++++++------ 2 files changed, 21 insertions(+), 14 deletions(-) diff --git a/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss index 9bac39f2d..6148fa1de 100644 --- a/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss +++ b/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss @@ -8,14 +8,9 @@ justify-content: center; flex-wrap: wrap; - @media (min-width: #{ ($break-mobile) }) and (max-width: #{ ($break-wide) }) { - width: 340px; - padding: 15px; - } - @media (max-width: #{ ($break-mobile) }) { width: 300px; - padding: 10px; + padding: 20px 0; } &__live-preview-container { diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss index f26776d45..b8b828f7a 100644 --- a/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss +++ b/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss @@ -44,19 +44,26 @@ } &__options { - - @media (max-width: #{ ($break-medium) }) { - flex-direction: column; - } - display: flex; flex-direction: row; text-align: center; margin: 10px 10px 55px 10px; flex-wrap: wrap; - max-width: 1440px; - align-items: center; - justify-content: center; + width: 1380px; + + @media (max-width: #{ ($break-huge) }) { + width: 920px; + } + + @media (max-width: #{ ($break-large) }) { + flex-direction: column; + width: 480px; + } + + @media (max-width: #{ ($break-mobile) }) { + width: 300px; + } + } &__note { @@ -136,6 +143,11 @@ padding: 60px; box-sizing: border-box; + @media (max-width: #{ ($break-mobile) }) { + width: 300px; + } + + &__title { color: var(--nfd-onboarding-primary); } From 8a9b263c7316be0e2cd9e3dd60a5f5639f516a88 Mon Sep 17 00:00:00 2001 From: ajayadav09 Date: Wed, 31 Jan 2024 21:26:02 +0530 Subject: [PATCH 11/12] fixed lint --- src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js index ac1073f4f..454ca9838 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js @@ -210,9 +210,9 @@ const StepSiteGenEditorHeader = () => { > { isLargeViewport ? __( - 'Save & Continue', - 'wp-module-onboarding' - ) + 'Save & Continue', + 'wp-module-onboarding' + ) : __( 'Next', 'wp-module-onboarding' ) }
{ isSaving ? ( From 6aa990834712e985fbb3af92b44d2fa9a939858d Mon Sep 17 00:00:00 2001 From: ajayadav09 Date: Thu, 1 Feb 2024 11:58:59 +0530 Subject: [PATCH 12/12] fixed heart svg size on mobile --- .../steps/SiteGen/Preview/stylesheet.scss | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss index b8b828f7a..70fc27b7e 100644 --- a/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss +++ b/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss @@ -74,13 +74,17 @@ align-items: center; background: var(--nfd-onboarding-card-background); color: var(--nfd-onboarding-primary); - gap: 18px; + gap: 14px; padding: 16px; font-size: 16px; line-height: 22px; text-align: center; border-radius: 12px; margin-bottom: 70px; + + @media (max-width: #{ ($break-mobile) }) { + gap: 8px; + } } @keyframes heartBeat { @@ -101,6 +105,11 @@ .heart { stroke-width: 2px; stroke: var(--nfd-onboarding-heart-icon-stroke); + + @media (max-width: #{ ($break-mobile) }) { + width: 50px; + height: auto; + } } .heart path {