From 30fc0dd45d2deee2df44a8457344581b5a536f22 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Wed, 9 Nov 2022 16:24:25 +0530 Subject: [PATCH 01/25] Fixed Blank Space in Theme Style selection step --- includes/Data/Data.php | 19 +++++----- .../Steps/DesignThemeStyles/Menu/index.js | 35 +++++++++++++++++-- src/OnboardingSPA/store/actions.js | 1 + 3 files changed, 43 insertions(+), 12 deletions(-) diff --git a/includes/Data/Data.php b/includes/Data/Data.php index 0bb4f5d7c..d7fbfb59a 100644 --- a/includes/Data/Data.php +++ b/includes/Data/Data.php @@ -13,15 +13,16 @@ final class Data { */ public static function runtime() { return array( - 'buildUrl' => \NFD_ONBOARDING_BUILD_URL, - 'siteUrl' => \get_site_url(), - 'restUrl' => \get_home_url() . '/index.php?rest_route=', - 'adminUrl' => \admin_url(), - 'currentBrand' => self::current_brand(), - 'currentPlan' => self::current_plan(), - 'currentFlow' => self::current_flow(), - 'pluginInstallHash' => Permissions::rest_get_plugin_install_hash(), - 'previewSettings' => Preview::get_settings(), + 'buildUrl' => \NFD_ONBOARDING_BUILD_URL, + 'siteUrl' => \get_site_url(), + 'restUrl' => \get_home_url() . '/index.php?rest_route=', + 'adminUrl' => \admin_url(), + 'currentBrand' => self::current_brand(), + 'currentPlan' => self::current_plan(), + 'currentFlow' => self::current_flow(), + 'pluginInstallHash' => Permissions::rest_get_plugin_install_hash(), + 'previewSettings' => Preview::get_settings(), + 'currentThemeVariations' => count(\WP_Theme_JSON_Resolver::get_style_variations()) + 1, ); } diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js index 621514018..6697f432a 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js @@ -19,6 +19,7 @@ import { DesignStateHandler } from '../../../../components/StateHandlers'; const StepDesignThemeStylesMenu = () => { const MAX_PREVIEWS_PER_ROW = 3; + const THEME_VARIATIONS = window.nfdOnboarding.currentThemeVariations; const location = useLocation(); const [ isLoaded, setIsLoaded ] = useState( false ); @@ -101,6 +102,24 @@ const StepDesignThemeStylesMenu = () => { navigate( nextStep.path ); }; + const buildDummyPreviews = () => { + let dummyPreview = []; + + for (let i = 0; i < THEME_VARIATIONS; i++) { + dummyPreview.push( + + ); + } + + return dummyPreview; + }; + const buildPreviews = () => { return globalStyles?.map( ( globalStyle, idx ) => { return ( @@ -118,7 +137,7 @@ const StepDesignThemeStylesMenu = () => { ); } ); }; - + return ( @@ -127,16 +146,26 @@ const StepDesignThemeStylesMenu = () => { title={ currentStep?.heading } subtitle={ currentStep?.subheading } /> +
+ {!globalStyles && buildDummyPreviews().slice(0, MAX_PREVIEWS_PER_ROW)} +
{ globalStyles && - buildPreviews().slice( 0, MAX_PREVIEWS_PER_ROW ) } + buildPreviews().slice( 0, MAX_PREVIEWS_PER_ROW )} +
+
+ {!globalStyles && + buildDummyPreviews().slice( + MAX_PREVIEWS_PER_ROW, + THEME_VARIATIONS + )}
{ globalStyles && buildPreviews().slice( MAX_PREVIEWS_PER_ROW, globalStyles.length - ) } + )}
diff --git a/src/OnboardingSPA/store/actions.js b/src/OnboardingSPA/store/actions.js index 9e6258a6b..bf9fe50b0 100644 --- a/src/OnboardingSPA/store/actions.js +++ b/src/OnboardingSPA/store/actions.js @@ -12,6 +12,7 @@ export function setRuntime( runtime ) { siteUrl: runtime.siteUrl, migrated: true, currentFlow: runtime.currentFlow ?? 'wp-setup', + currentThemeVariations: runtime.currentThemeVariations, }; return { type: 'SET_RUNTIME', From 7d9bfeaf64242bf4a06b2ebc79c0b5350b01cfbe Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Wed, 9 Nov 2022 16:33:53 +0530 Subject: [PATCH 02/25] Removed Blank Space from Preview step --- .../DrawerPanel/DesignThemeStylesPreview.js | 40 ++++++++++++++++--- .../Steps/DesignThemeStyles/Menu/index.js | 6 +-- .../Steps/DesignThemeStyles/Preview/index.js | 7 ++++ 3 files changed, 43 insertions(+), 10 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index fe817eec7..0fb1fc33a 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js @@ -13,6 +13,8 @@ import { const DesignThemeStylesPreview = () => { const MAX_PREVIEWS_PER_ROW = 3; + const THEME_VARIATIONS = window.nfdOnboarding.currentThemeVariations; + const [ isLoaded, setIsLoaded ] = useState( false ); const [ pattern, setPattern ] = useState(); const [ globalStyles, setGlobalStyles ] = useState(); @@ -91,6 +93,25 @@ const DesignThemeStylesPreview = () => { setCurrentOnboardingData( currentData ); }; + const buildDummyPreviews = () => { + let dummyPreview = []; + + for (let i = 0; i < THEME_VARIATIONS; i++) { + dummyPreview.push( + + ); + } + + return dummyPreview; + }; + const buildPreviews = () => { return globalStyles?.map( ( globalStyle, idx ) => { return ( @@ -111,18 +132,27 @@ const DesignThemeStylesPreview = () => { return (
+
+ {!globalStyles + && buildDummyPreviews().slice(0, MAX_PREVIEWS_PER_ROW)} +
+
+ {!globalStyles + && buildDummyPreviews().slice( + MAX_PREVIEWS_PER_ROW, + THEME_VARIATIONS + )} +
{ globalStyles - ? buildPreviews().slice( 0, MAX_PREVIEWS_PER_ROW ) - : '' } + && buildPreviews().slice( 0, MAX_PREVIEWS_PER_ROW ) }
{ globalStyles - ? buildPreviews().slice( + && buildPreviews().slice( MAX_PREVIEWS_PER_ROW, globalStyles.length - ) - : '' } + ) }
); diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js index 6697f432a..a740b976c 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js @@ -148,19 +148,15 @@ const StepDesignThemeStylesMenu = () => { />
{!globalStyles && buildDummyPreviews().slice(0, MAX_PREVIEWS_PER_ROW)} -
-
{ globalStyles && buildPreviews().slice( 0, MAX_PREVIEWS_PER_ROW )}
- {!globalStyles && + {!globalStyles && buildDummyPreviews().slice( MAX_PREVIEWS_PER_ROW, THEME_VARIATIONS )} -
-
{ globalStyles && buildPreviews().slice( MAX_PREVIEWS_PER_ROW, diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js index 6b44e9889..ee85fc7d8 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js @@ -220,6 +220,13 @@ const StepDesignThemeStylesPreview = () => {
+ { !pattern && ( + + )} { pattern && ( Date: Wed, 9 Nov 2022 18:58:00 +0530 Subject: [PATCH 03/25] Refactored Code --- .../Drawer/DrawerPanel/DesignThemeStylesPreview.js | 10 +++------- .../pages/Steps/DesignThemeStyles/Menu/index.js | 1 + 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index 0fb1fc33a..e7c7ea15b 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js @@ -104,7 +104,7 @@ const DesignThemeStylesPreview = () => { blockGrammer={''} viewportWidth={900} styling={'custom'} - skeletonLoadingTime={3000} + skeletonLoadingTime={4000} /> ); } @@ -135,6 +135,8 @@ const DesignThemeStylesPreview = () => {
{!globalStyles && buildDummyPreviews().slice(0, MAX_PREVIEWS_PER_ROW)} + { globalStyles + && buildPreviews().slice( 0, MAX_PREVIEWS_PER_ROW ) }
{!globalStyles @@ -142,12 +144,6 @@ const DesignThemeStylesPreview = () => { MAX_PREVIEWS_PER_ROW, THEME_VARIATIONS )} -
-
- { globalStyles - && buildPreviews().slice( 0, MAX_PREVIEWS_PER_ROW ) } -
-
{ globalStyles && buildPreviews().slice( MAX_PREVIEWS_PER_ROW, diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js index a740b976c..42a11a97b 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js @@ -113,6 +113,7 @@ const StepDesignThemeStylesMenu = () => { blockGrammer={''} viewportWidth={900} styling={'custom'} + skeletonLoadingTime={3000} /> ); } From 4e6cd4341f0a6a8758082768cbb0285db32f3c2e Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Thu, 10 Nov 2022 16:22:53 +0530 Subject: [PATCH 04/25] New Data Structure to save data --- includes/Data/Data.php | 33 ++++++++++----- includes/Data/Patterns.php | 66 ++++++++++++++++++++++++++---- src/OnboardingSPA/store/actions.js | 2 +- 3 files changed, 82 insertions(+), 19 deletions(-) diff --git a/includes/Data/Data.php b/includes/Data/Data.php index d7fbfb59a..5b5d699c9 100644 --- a/includes/Data/Data.php +++ b/includes/Data/Data.php @@ -13,16 +13,16 @@ final class Data { */ public static function runtime() { return array( - 'buildUrl' => \NFD_ONBOARDING_BUILD_URL, - 'siteUrl' => \get_site_url(), - 'restUrl' => \get_home_url() . '/index.php?rest_route=', - 'adminUrl' => \admin_url(), - 'currentBrand' => self::current_brand(), - 'currentPlan' => self::current_plan(), - 'currentFlow' => self::current_flow(), - 'pluginInstallHash' => Permissions::rest_get_plugin_install_hash(), - 'previewSettings' => Preview::get_settings(), - 'currentThemeVariations' => count(\WP_Theme_JSON_Resolver::get_style_variations()) + 1, + 'buildUrl' => \NFD_ONBOARDING_BUILD_URL, + 'siteUrl' => \get_site_url(), + 'restUrl' => \get_home_url() . '/index.php?rest_route=', + 'adminUrl' => \admin_url(), + 'currentBrand' => self::current_brand(), + 'currentPlan' => self::current_plan(), + 'currentFlow' => self::current_flow(), + 'pluginInstallHash' => Permissions::rest_get_plugin_install_hash(), + 'previewSettings' => Preview::get_settings(), + 'themeStepData' => self::theme_data(), ); } @@ -106,4 +106,17 @@ public static function customer_data() { } return array(); } + + /** + * Get the current theme data like the theme variations and previews per step + * + * @return array + */ + public static function theme_data() + { + $theme_step_data = Patterns::get_count_of_patterns(); + $theme_step_data["theme-styles"]["styles"] = count(\WP_Theme_JSON_Resolver::get_style_variations()) + 1; + return $theme_step_data; + } + } // END \NewfoldLabs\WP\Module\Onboarding\Data() diff --git a/includes/Data/Patterns.php b/includes/Data/Patterns.php index 286d3d344..48ae1f6a4 100644 --- a/includes/Data/Patterns.php +++ b/includes/Data/Patterns.php @@ -10,16 +10,44 @@ final class Patterns protected static $theme_step_patterns = array( 'yith-wonder' => array( 'theme-styles' => array( - 'site-header-left-logo-navigation-inline', - 'homepage-1', - 'site-footer', + 'site-header-left-logo-navigation-inline' => array( + 'active', + 'selected' + ), + 'homepage-1' => array( + 'active', + 'selected', + 'shown' + ), + 'site-footer' => array( + 'active', + 'selected' + ), ), 'homepage-styles' => array( - 'site-header-left-logo-navigation-inline', - 'homepage-1', - 'homepage-2', - 'homepage-3', - 'site-footer', + 'site-header-left-logo-navigation-inline' => array( + 'active', + 'selected', + ), + 'homepage-1' => array( + 'active', + 'selected', + 'shown' + ), + 'homepage-2' => array( + 'active', + 'selected', + 'shown' + ), + 'homepage-3' => array( + 'active', + 'selected', + 'shown' + ), + 'site-footer' => array( + 'active', + 'selected', + ), ), ), ); @@ -175,4 +203,26 @@ public static function set_theme_step_patterns($step, $slug) ); } } + + public static function get_count_of_patterns() { + + $active_theme = (\wp_get_theme())->get('TextDomain'); + $theme_steps = self::$theme_step_patterns[$active_theme]; + + $theme_pattern_count = array(); + foreach ($theme_steps as $theme_step => $patterns) { + $theme_step_count = 0; + foreach ($patterns as $pattern => $pattern_data) { + foreach ($pattern_data as $property) { + if($property === 'shown') + $theme_step_count += 1; + } + } + $theme_pattern_count[$theme_step] = array( + 'styles' => 1, + 'patterns' => $theme_step_count + ); + } + return $theme_pattern_count; + } } diff --git a/src/OnboardingSPA/store/actions.js b/src/OnboardingSPA/store/actions.js index bf9fe50b0..e94adcc27 100644 --- a/src/OnboardingSPA/store/actions.js +++ b/src/OnboardingSPA/store/actions.js @@ -12,7 +12,7 @@ export function setRuntime( runtime ) { siteUrl: runtime.siteUrl, migrated: true, currentFlow: runtime.currentFlow ?? 'wp-setup', - currentThemeVariations: runtime.currentThemeVariations, + themeStepData: runtime.themeStepData, }; return { type: 'SET_RUNTIME', From 3027baa746ededf57458fd6f74df4760334c0738 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Thu, 10 Nov 2022 16:44:36 +0530 Subject: [PATCH 05/25] Added Fast Loader to other pages --- includes/Data/Patterns.php | 6 ++--- .../DrawerPanel/DesignThemeStylesPreview.js | 5 +++- .../pages/Steps/DesignColors/index.js | 7 ++++++ .../pages/Steps/DesignHomepageMenu/index.js | 24 +++++++++++++++++++ .../Steps/DesignThemeStyles/Menu/index.js | 5 +++- 5 files changed, 42 insertions(+), 5 deletions(-) diff --git a/includes/Data/Patterns.php b/includes/Data/Patterns.php index 48ae1f6a4..93dcafd97 100644 --- a/includes/Data/Patterns.php +++ b/includes/Data/Patterns.php @@ -27,7 +27,7 @@ final class Patterns 'homepage-styles' => array( 'site-header-left-logo-navigation-inline' => array( 'active', - 'selected', + 'selected' ), 'homepage-1' => array( 'active', @@ -46,7 +46,7 @@ final class Patterns ), 'site-footer' => array( 'active', - 'selected', + 'selected' ), ), ), @@ -97,7 +97,7 @@ public static function get_theme_step_patterns_from_step($step, $squash = false) $block_patterns_registry = \WP_Block_Patterns_Registry::get_instance(); $block_patterns = array(); $block_patterns_squashed = ''; - foreach ($pattern_slugs as $pattern_slug) { + foreach ($pattern_slugs as $pattern_slug=>$i) { $pattern_name = $active_theme . '/' . $pattern_slug; if ($block_patterns_registry->is_registered($pattern_name)) { $pattern = $block_patterns_registry->get_registered($pattern_name); diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index e7c7ea15b..5b1bede86 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js @@ -13,7 +13,6 @@ import { const DesignThemeStylesPreview = () => { const MAX_PREVIEWS_PER_ROW = 3; - const THEME_VARIATIONS = window.nfdOnboarding.currentThemeVariations; const [ isLoaded, setIsLoaded ] = useState( false ); const [ pattern, setPattern ] = useState(); @@ -38,6 +37,10 @@ const DesignThemeStylesPreview = () => { updateThemeStatus, } = useDispatch( nfdOnboardingStore ); + const THEME_VARIATIONS + = window.nfdOnboarding.themeStepData[currentStep.patternId].styles + * window.nfdOnboarding.themeStepData[currentStep.patternId].patterns; + const getStylesAndPatterns = async () => { const patternResponse = await getPatterns( currentStep.patternId, diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/index.js b/src/OnboardingSPA/pages/Steps/DesignColors/index.js index 72953ddd3..7258baab7 100644 --- a/src/OnboardingSPA/pages/Steps/DesignColors/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignColors/index.js @@ -84,6 +84,13 @@ const StepDesignColors = () => {
+ {!pattern && ( + + )} {pattern && ( { updateThemeStatus, } = useDispatch( nfdOnboardingStore ); + const THEME_VARIATIONS + = window.nfdOnboarding.themeStepData[currentStep.patternId].styles + * window.nfdOnboarding.themeStepData[currentStep.patternId].patterns; + useEffect( () => { if ( isLargeViewport ) { setIsDrawerOpened( true ); @@ -156,6 +160,25 @@ const StepDesignHomepageMenu = () => { } }, [ isLoaded, themeStatus ] ); + const buildDummyPreviews = () => { + let dummyPreview = []; + + for (let i = 0; i < THEME_VARIATIONS; i++) { + dummyPreview.push( + + ); + } + + return dummyPreview; + }; + function buildHomepagePreviews() { return homepagePattern?.map( ( homepage, idx ) => { if ( homepage ) { @@ -186,6 +209,7 @@ const StepDesignHomepageMenu = () => { subtitle={ currentStep?.subheading } />
+ { !globalStyle && buildDummyPreviews() } { globalStyle && buildHomepagePreviews() }
diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js index 42a11a97b..92fb6b63e 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js @@ -19,7 +19,6 @@ import { DesignStateHandler } from '../../../../components/StateHandlers'; const StepDesignThemeStylesMenu = () => { const MAX_PREVIEWS_PER_ROW = 3; - const THEME_VARIATIONS = window.nfdOnboarding.currentThemeVariations; const location = useLocation(); const [ isLoaded, setIsLoaded ] = useState( false ); @@ -49,6 +48,10 @@ const StepDesignThemeStylesMenu = () => { }; }, [] ); + const THEME_VARIATIONS + = window.nfdOnboarding.themeStepData[currentStep.patternId].styles + * window.nfdOnboarding.themeStepData[currentStep.patternId].patterns; + const { setDrawerActiveView, setIsDrawerOpened, From 922750783824b4d0e86a0369d25b6c8f2c019ec9 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Tue, 15 Nov 2022 14:16:32 +0530 Subject: [PATCH 06/25] Factored out Skeleton for Live Preview --- .../DrawerPanel/DesignThemeStylesPreview.js | 10 ++--- .../components/LivePreviewSkeleton/index.js | 37 +++++++++++++++++++ .../pages/Steps/DesignHomepageMenu/index.js | 24 ++---------- .../Steps/DesignThemeStyles/Menu/index.js | 30 +++------------ 4 files changed, 52 insertions(+), 49 deletions(-) create mode 100644 src/OnboardingSPA/components/LivePreviewSkeleton/index.js diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index 5b1bede86..124f956e4 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js @@ -10,6 +10,7 @@ import { THEME_STATUS_ACTIVE, THEME_STATUS_NOT_ACTIVE, } from '../../../../constants'; +import LivePreviewSkeleton from '../../LivePreviewSkeleton'; const DesignThemeStylesPreview = () => { const MAX_PREVIEWS_PER_ROW = 3; @@ -137,16 +138,15 @@ const DesignThemeStylesPreview = () => {
{!globalStyles - && buildDummyPreviews().slice(0, MAX_PREVIEWS_PER_ROW)} + && } { globalStyles && buildPreviews().slice( 0, MAX_PREVIEWS_PER_ROW ) }
{!globalStyles - && buildDummyPreviews().slice( - MAX_PREVIEWS_PER_ROW, - THEME_VARIATIONS - )} + && } { globalStyles && buildPreviews().slice( MAX_PREVIEWS_PER_ROW, diff --git a/src/OnboardingSPA/components/LivePreviewSkeleton/index.js b/src/OnboardingSPA/components/LivePreviewSkeleton/index.js new file mode 100644 index 000000000..bc1952d47 --- /dev/null +++ b/src/OnboardingSPA/components/LivePreviewSkeleton/index.js @@ -0,0 +1,37 @@ +import { useSelect } from '@wordpress/data'; +import { LivePreviewSelectableCard } from '../LivePreview'; + +/** + * Renders Skeletons for Live Previews. + * + * @property {number} count The number of Live Previews to be shown + * @property {string} className The class name for the Live Preview + * @property {number} viewportWidth Viewport Width for the Live Preview + */ +const LivePreviewSkeleton = ({ count, className, viewportWidth }) => { + + const buildDummyPreviews = () => { + let dummyPreviews = []; + + for (let i = 0; i < count; i++) { + dummyPreviews.push( + + ); + } + + return dummyPreviews; + }; + + return ( + buildDummyPreviews() + ); +}; + +export default LivePreviewSkeleton; diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js index 095610d8c..7ffdaeaf9 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js @@ -16,6 +16,7 @@ import { LivePreviewSelectableCard } from '../../../components/LivePreview'; import HeadingWithSubHeading from '../../../components/HeadingWithSubHeading'; import { DesignStateHandler } from '../../../components/StateHandlers'; import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output'; +import LivePreviewSkeleton from '../../../components/LivePreviewSkeleton'; const StepDesignHomepageMenu = () => { const homepagePatternList = [ 'homepage-1', 'homepage-2', 'homepage-3' ]; @@ -160,25 +161,6 @@ const StepDesignHomepageMenu = () => { } }, [ isLoaded, themeStatus ] ); - const buildDummyPreviews = () => { - let dummyPreview = []; - - for (let i = 0; i < THEME_VARIATIONS; i++) { - dummyPreview.push( - - ); - } - - return dummyPreview; - }; - function buildHomepagePreviews() { return homepagePattern?.map( ( homepage, idx ) => { if ( homepage ) { @@ -209,7 +191,9 @@ const StepDesignHomepageMenu = () => { subtitle={ currentStep?.subheading } />
- { !globalStyle && buildDummyPreviews() } + {!globalStyle && + } { globalStyle && buildHomepagePreviews() }
diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js index 92fb6b63e..9921c0259 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js @@ -16,6 +16,7 @@ import { THEME_STATUS_NOT_ACTIVE, } from '../../../../../constants'; import { DesignStateHandler } from '../../../../components/StateHandlers'; +import LivePreviewSkeleton from '../../../../components/LivePreviewSkeleton'; const StepDesignThemeStylesMenu = () => { const MAX_PREVIEWS_PER_ROW = 3; @@ -105,25 +106,6 @@ const StepDesignThemeStylesMenu = () => { navigate( nextStep.path ); }; - const buildDummyPreviews = () => { - let dummyPreview = []; - - for (let i = 0; i < THEME_VARIATIONS; i++) { - dummyPreview.push( - - ); - } - - return dummyPreview; - }; - const buildPreviews = () => { return globalStyles?.map( ( globalStyle, idx ) => { return ( @@ -151,16 +133,16 @@ const StepDesignThemeStylesMenu = () => { subtitle={ currentStep?.subheading } />
- {!globalStyles && buildDummyPreviews().slice(0, MAX_PREVIEWS_PER_ROW)} + {!globalStyles && + } { globalStyles && buildPreviews().slice( 0, MAX_PREVIEWS_PER_ROW )}
{!globalStyles && - buildDummyPreviews().slice( - MAX_PREVIEWS_PER_ROW, - THEME_VARIATIONS - )} + } { globalStyles && buildPreviews().slice( MAX_PREVIEWS_PER_ROW, From 946f790840cb02a9130b22c520a9000152f14dbc Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Tue, 15 Nov 2022 17:43:10 +0530 Subject: [PATCH 07/25] Added a few Fixes --- .../DrawerPanel/DesignThemeStylesPreview.js | 29 ++++--------------- .../components/LivePreviewSkeleton/index.js | 5 ++-- .../pages/Steps/DesignHomepageMenu/index.js | 4 +-- .../Steps/DesignThemeStyles/Menu/index.js | 4 +-- 4 files changed, 13 insertions(+), 29 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index 124f956e4..26ca9ec1f 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js @@ -39,8 +39,8 @@ const DesignThemeStylesPreview = () => { } = useDispatch( nfdOnboardingStore ); const THEME_VARIATIONS - = window.nfdOnboarding.themeStepData[currentStep.patternId].styles - * window.nfdOnboarding.themeStepData[currentStep.patternId].patterns; + = window.nfdOnboarding?.themeStepData[currentStep?.patternId]?.styles + * window.nfdOnboarding?.themeStepData[currentStep?.patternId]?.patterns; const getStylesAndPatterns = async () => { const patternResponse = await getPatterns( @@ -97,25 +97,6 @@ const DesignThemeStylesPreview = () => { setCurrentOnboardingData( currentData ); }; - const buildDummyPreviews = () => { - let dummyPreview = []; - - for (let i = 0; i < THEME_VARIATIONS; i++) { - dummyPreview.push( - - ); - } - - return dummyPreview; - }; - const buildPreviews = () => { return globalStyles?.map( ( globalStyle, idx ) => { return ( @@ -139,14 +120,16 @@ const DesignThemeStylesPreview = () => {
{!globalStyles && } + className={'theme-styles-preview--drawer__list__item'} + viewportWidth={900} skeletonLoadingTime={4000}/>} { globalStyles && buildPreviews().slice( 0, MAX_PREVIEWS_PER_ROW ) }
{!globalStyles && } + className={'theme-styles-preview--drawer__list__item'} + viewportWidth={900} skeletonLoadingTime={4000}/>} { globalStyles && buildPreviews().slice( MAX_PREVIEWS_PER_ROW, diff --git a/src/OnboardingSPA/components/LivePreviewSkeleton/index.js b/src/OnboardingSPA/components/LivePreviewSkeleton/index.js index bc1952d47..3c0ae6074 100644 --- a/src/OnboardingSPA/components/LivePreviewSkeleton/index.js +++ b/src/OnboardingSPA/components/LivePreviewSkeleton/index.js @@ -7,8 +7,9 @@ import { LivePreviewSelectableCard } from '../LivePreview'; * @property {number} count The number of Live Previews to be shown * @property {string} className The class name for the Live Preview * @property {number} viewportWidth Viewport Width for the Live Preview + * @property {number} skeletonLoadingTime Change the Animation time for the Skeleton */ -const LivePreviewSkeleton = ({ count, className, viewportWidth }) => { +const LivePreviewSkeleton = ({ count, className, viewportWidth, skeletonLoadingTime }) => { const buildDummyPreviews = () => { let dummyPreviews = []; @@ -20,7 +21,7 @@ const LivePreviewSkeleton = ({ count, className, viewportWidth }) => { blockGrammer={''} styling={'custom'} className={className} - skeletonLoadingTime={3500} + skeletonLoadingTime={ skeletonLoadingTime ?? 3500 } viewportWidth={viewportWidth} /> ); diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js index 7ffdaeaf9..3126dc14c 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js @@ -72,8 +72,8 @@ const StepDesignHomepageMenu = () => { } = useDispatch( nfdOnboardingStore ); const THEME_VARIATIONS - = window.nfdOnboarding.themeStepData[currentStep.patternId].styles - * window.nfdOnboarding.themeStepData[currentStep.patternId].patterns; + = window.nfdOnboarding?.themeStepData[currentStep?.patternId]?.styles + * window.nfdOnboarding?.themeStepData[currentStep?.patternId]?.patterns; useEffect( () => { if ( isLargeViewport ) { diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js index 9921c0259..93b535e02 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js @@ -50,8 +50,8 @@ const StepDesignThemeStylesMenu = () => { }, [] ); const THEME_VARIATIONS - = window.nfdOnboarding.themeStepData[currentStep.patternId].styles - * window.nfdOnboarding.themeStepData[currentStep.patternId].patterns; + = window.nfdOnboarding?.themeStepData[currentStep?.patternId]?.styles + * window.nfdOnboarding?.themeStepData[currentStep?.patternId]?.patterns; const { setDrawerActiveView, From 11123993f2d2696be84572876734e3a2e71e1ef1 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Wed, 16 Nov 2022 16:58:17 +0530 Subject: [PATCH 08/25] Update Patterns.php --- includes/Data/Patterns.php | 466 +++++++++++++++++++------------------ 1 file changed, 245 insertions(+), 221 deletions(-) diff --git a/includes/Data/Patterns.php b/includes/Data/Patterns.php index 93dcafd97..3e6706351 100644 --- a/includes/Data/Patterns.php +++ b/includes/Data/Patterns.php @@ -4,225 +4,249 @@ use NewfoldLabs\WP\Module\Onboarding\Data\Options; -final class Patterns -{ - - protected static $theme_step_patterns = array( - 'yith-wonder' => array( - 'theme-styles' => array( - 'site-header-left-logo-navigation-inline' => array( - 'active', - 'selected' - ), - 'homepage-1' => array( - 'active', - 'selected', - 'shown' - ), - 'site-footer' => array( - 'active', - 'selected' - ), - ), - 'homepage-styles' => array( - 'site-header-left-logo-navigation-inline' => array( - 'active', - 'selected' - ), - 'homepage-1' => array( - 'active', - 'selected', - 'shown' - ), - 'homepage-2' => array( - 'active', - 'selected', - 'shown' - ), - 'homepage-3' => array( - 'active', - 'selected', - 'shown' - ), - 'site-footer' => array( - 'active', - 'selected' - ), - ), - ), - ); - - public static function cleanup_wp_grammar($content) - { - - // Remove template-part if that exists - $content = preg_replace('/^$/m', '', $content); - - // Create an array with the values you want to replace - $searches = array("\n", "\t"); - - // Replace the line breaks and tabs with a empty string - $content = str_replace($searches, '', $content); - - return $content; - } - - public static function get_pattern_from_slug($pattern_slug) - { - $active_theme = (\wp_get_theme())->get('TextDomain'); - $pattern_name = $active_theme . '/' . $pattern_slug; - - $block_patterns_registry = \WP_Block_Patterns_Registry::get_instance(); - if ($block_patterns_registry->is_registered($pattern_name)) { - $pattern = $block_patterns_registry->get_registered($pattern_name); - return array( - 'title' => $pattern['title'], - 'content' => self::cleanup_wp_grammar($pattern['content']), - 'name' => $pattern['name'], - ); - } - - return false; - } - - public static function get_theme_step_patterns_from_step($step, $squash = false) - { - $active_theme = (\wp_get_theme())->get('TextDomain'); - - if (!isset(self::$theme_step_patterns[$active_theme][$step])) { - return false; - } - - $pattern_slugs = self::$theme_step_patterns[$active_theme][$step]; - $block_patterns_registry = \WP_Block_Patterns_Registry::get_instance(); - $block_patterns = array(); - $block_patterns_squashed = ''; - foreach ($pattern_slugs as $pattern_slug=>$i) { - $pattern_name = $active_theme . '/' . $pattern_slug; - if ($block_patterns_registry->is_registered($pattern_name)) { - $pattern = $block_patterns_registry->get_registered($pattern_name); - if (!$squash) { - $block_patterns[] = array( - 'slug' => $pattern_slug, - 'title' => $pattern['title'], - 'content' => self::cleanup_wp_grammar($pattern['content']), - 'name' => $pattern['name'], - ); - continue; - } - $block_patterns_squashed .= self::cleanup_wp_grammar($pattern['content']); - } - } - - return $squash ? $block_patterns_squashed : $block_patterns; - } - - - /** - * Sets the Homepage selected by the user. - * - * @return \WP_REST_Response|\WP_Error - */ - public function set_homepage_patterns($slug) - { - - if (!isset($slug)) { - return new \WP_Error( - 'Slug not Provided', - 'The WordPress Grammar Slug for homepage was not provided', - array('status' => 404) - ); - } - - $pattern_data = self::get_pattern_from_slug($slug); - if (!$pattern_data) { - return new \WP_Error( - 400, - 'Failed to save Homepage, Pattern not found' - ); - } - - $show_pages_on_front = \get_option(Options::get_option_name('show_on_front', false)); - - // Check if default homepage is posts - if ($show_pages_on_front == 'posts') { - \update_option(Options::get_option_name('show_on_front', false), 'page'); - } - - $request = new \WP_REST_Request( - 'POST', - '/wp/v2/pages' - ); - - $request->set_body_params( - array( - 'title' => 'Homepage', - 'status' => 'publish', - 'template' => 'no-title', - 'content' => $pattern_data['content'], - ) - ); - - $response = \rest_do_request($request); - - if (201 === $response->status) { - $page_data = json_decode(wp_json_encode($response->data), true); - - // Set the newly added page as Homepage - if (array_key_exists('id', $page_data)) { - \update_option(Options::get_option_name('page_on_front', false), $page_data['id']); - } - - return new \WP_REST_Response( - array( - 'message' => 'Successfully set the Homepage', - 'response' => $page_data, - ), - 201 - ); - } - - return new \WP_Error( - $response->status, - 'Failed to save Homepage.' . $response - ); - } - - public static function set_theme_step_patterns($step, $slug) - { - - switch ($step) { - case 'homepage-styles': - if (isset($slug)) { - return self::set_homepage_patterns($slug); - } - default: - return new \WP_Error( - 404, - 'No Step Found with given params' - ); - } - } - - public static function get_count_of_patterns() { - - $active_theme = (\wp_get_theme())->get('TextDomain'); - $theme_steps = self::$theme_step_patterns[$active_theme]; - - $theme_pattern_count = array(); - foreach ($theme_steps as $theme_step => $patterns) { - $theme_step_count = 0; - foreach ($patterns as $pattern => $pattern_data) { - foreach ($pattern_data as $property) { - if($property === 'shown') - $theme_step_count += 1; - } - } - $theme_pattern_count[$theme_step] = array( - 'styles' => 1, - 'patterns' => $theme_step_count - ); - } - return $theme_pattern_count; - } +final class Patterns { + + protected static function get_theme_step_patterns() { + return array( + 'yith-wonder' => array( + 'theme-styles' => array( + 'site-header-left-logo-navigation-inline' => array( + 'active' => true, + ), + 'homepage-1' => array( + 'active' => true, + 'shown' => true, + ), + 'site-footer' => array( + 'active' => true, + ), + ), + 'homepage-styles' => array( + 'site-header-left-logo-navigation-inline' => array( + 'active' => true, + ), + 'homepage-1' => array( + 'active' => true, + 'shown' => true, + ), + 'homepage-2' => array( + 'active' => true, + 'shown' => true, + ), + 'homepage-3' => array( + 'active' => true, + 'shown' => true, + ), + 'site-footer' => array( + 'active' => true, + ), + ), + 'site-pages' => array( + 'company-page' => array( + 'active' => true, + 'title' => 'About', + 'selected' => true, + 'shown' => true, + 'description' => __( 'Explain your company values or the history behind your brand.', 'wp-module-onboarding' ), + ), + 'contact-us' => array( + 'active' => true, + 'selected' => true, + 'title' => 'Contact', + 'shown' => true, + 'description' => __( 'Offer visitors a single page with a contact form, your street address and social media.', 'wp-module-onboarding' ), + ), + 'testimonials-page' => array( + 'active' => true, + 'title' => 'Testimonials', + 'selected' => false, + 'shown' => true, + 'description' => __( 'Highlight your success with testimonials from your fans.', 'wp-module-onboarding' ), + ), + 'blog-page' => array( + 'active' => true, + 'selected' => true, + 'title' => 'Blog', + 'shown' => true, + 'description' => __( 'A page for periodic news, announcements and ideas.', 'wp-module-onboarding' ), + ), + ), + ), + ); + } + + public static function cleanup_wp_grammar( $content ) { + + // Remove template-part if that exists + $content = preg_replace( '/^$/m', '', $content ); + + // Create an array with the values you want to replace + $searches = array( "\n", "\t" ); + + // Replace the line breaks and tabs with a empty string + $content = str_replace( $searches, '', $content ); + + return $content; + } + + public static function get_pattern_from_slug( $pattern_slug ) { + $active_theme = ( \wp_get_theme() )->get( 'TextDomain' ); + $pattern_name = $active_theme . '/' . $pattern_slug; + + $block_patterns_registry = \WP_Block_Patterns_Registry::get_instance(); + if ( $block_patterns_registry->is_registered( $pattern_name ) ) { + $pattern = $block_patterns_registry->get_registered( $pattern_name ); + return array( + 'title' => $pattern['title'], + 'content' => self::cleanup_wp_grammar( $pattern['content'] ), + 'name' => $pattern['name'], + ); + } + + return false; + } + + public static function get_theme_step_patterns_from_step( $step, $squash = false ) { + $active_theme = ( \wp_get_theme() )->get( 'TextDomain' ); + + if ( ! isset( self::get_theme_step_patterns()[ $active_theme ][ $step ] ) ) { + return false; + } + + $pattern_slugs = self::get_theme_step_patterns()[ $active_theme ][ $step ]; + $block_patterns_registry = \WP_Block_Patterns_Registry::get_instance(); + $block_patterns = array(); + $block_patterns_squashed = ''; + foreach ( array_keys( $pattern_slugs ) as $pattern_slug ) { + if ( $pattern_slugs[ $pattern_slug ]['active'] === true ) { + $pattern_name = $active_theme . '/' . $pattern_slug; + if ( $block_patterns_registry->is_registered( $pattern_name ) ) { + $pattern = $block_patterns_registry->get_registered( $pattern_name ); + if ( ! $squash ) { + $block_patterns[] = array_merge( + array( + 'slug' => $pattern_name, + 'title' => $pattern['title'], + 'content' => self::cleanup_wp_grammar( $pattern['content'] ), + 'name' => $pattern['name'], + ), + $pattern_slugs[ $pattern_slug ] + ); + continue; + } + $block_patterns_squashed .= self::cleanup_wp_grammar( $pattern['content'] ); + } + } + } + + return $squash ? $block_patterns_squashed : $block_patterns; + } + + + /** + * Sets the Homepage selected by the user. + * + * @return \WP_REST_Response|\WP_Error + */ + public static function set_homepage_patterns( $slug ) { + + if ( ! isset( $slug ) ) { + return new \WP_Error( + 'Slug not Provided', + 'The WordPress Grammar Slug for homepage was not provided', + array( 'status' => 404 ) + ); + } + + $pattern_data = self::get_pattern_from_slug( $slug ); + if ( ! $pattern_data ) { + return new \WP_Error( + 400, + 'Failed to save Homepage, Pattern not found' + ); + } + + $show_pages_on_front = \get_option( Options::get_option_name( 'show_on_front', false ) ); + + // Check if default homepage is posts + if ( $show_pages_on_front == 'posts' ) { + \update_option( Options::get_option_name( 'show_on_front', false ), 'page' ); + } + + $request = new \WP_REST_Request( + 'POST', + '/wp/v2/pages' + ); + + $request->set_body_params( + array( + 'title' => 'Homepage', + 'status' => 'publish', + 'template' => 'no-title', + 'content' => $pattern_data['content'], + ) + ); + + $response = \rest_do_request( $request ); + + if ( 201 === $response->status ) { + $page_data = json_decode( wp_json_encode( $response->data ), true ); + + // Set the newly added page as Homepage + if ( array_key_exists( 'id', $page_data ) ) { + \update_option( Options::get_option_name( 'page_on_front', false ), $page_data['id'] ); + } + + return new \WP_REST_Response( + array( + 'message' => 'Successfully set the Homepage', + 'response' => $page_data, + ), + 201 + ); + } + + return new \WP_Error( + $response->status, + 'Failed to save Homepage.' . $response + ); + } + + public static function set_theme_step_patterns( $step, $slug ) { + + switch ( $step ) { + case 'homepage-styles': + if ( isset( $slug ) ) { + return self::set_homepage_patterns( $slug ); + } + default: + return new \WP_Error( + 404, + 'No Step Found with given params' + ); + } + } + + public static function get_count_of_patterns() { + + $active_theme = ( \wp_get_theme() )->get( 'TextDomain' ); + $theme_steps = self::get_theme_step_patterns()[ $active_theme ]; + + $theme_pattern_count = array(); + foreach ( $theme_steps as $theme_step => $patterns ) { + $theme_step_count = 0; + foreach ( $patterns as $pattern => $pattern_data ) { + foreach ( $pattern_data as $property => $value ) { + if ( $property === 'shown' && $value == true) { + $theme_step_count += 1; + } + } + } + $theme_pattern_count[ $theme_step ] = array( + 'styles' => 1, + 'patterns' => $theme_step_count, + ); + } + return $theme_pattern_count; + } } From 6e052d632bbf6fdfe0f8867a384c914c4466fc8c Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Thu, 17 Nov 2022 13:39:05 +0530 Subject: [PATCH 09/25] Moved Style calc to Themes.php --- .gitignore | 1 + includes/Data/Data.php | 14 +------------- includes/Data/Themes.php | 12 ++++++++++++ 3 files changed, 14 insertions(+), 13 deletions(-) diff --git a/.gitignore b/.gitignore index c30a19820..69e666c6d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ +build node_modules vendor .DS_Store \ No newline at end of file diff --git a/includes/Data/Data.php b/includes/Data/Data.php index 5b5d699c9..6bf8f6c02 100644 --- a/includes/Data/Data.php +++ b/includes/Data/Data.php @@ -22,7 +22,7 @@ public static function runtime() { 'currentFlow' => self::current_flow(), 'pluginInstallHash' => Permissions::rest_get_plugin_install_hash(), 'previewSettings' => Preview::get_settings(), - 'themeStepData' => self::theme_data(), + 'themeStepData' => Themes::theme_data(), ); } @@ -107,16 +107,4 @@ public static function customer_data() { return array(); } - /** - * Get the current theme data like the theme variations and previews per step - * - * @return array - */ - public static function theme_data() - { - $theme_step_data = Patterns::get_count_of_patterns(); - $theme_step_data["theme-styles"]["styles"] = count(\WP_Theme_JSON_Resolver::get_style_variations()) + 1; - return $theme_step_data; - } - } // END \NewfoldLabs\WP\Module\Onboarding\Data() diff --git a/includes/Data/Themes.php b/includes/Data/Themes.php index f432bedb7..f5067b579 100644 --- a/includes/Data/Themes.php +++ b/includes/Data/Themes.php @@ -73,6 +73,18 @@ private static function check_approved( $value ) { return $value['approved'] === true; } + /** + * Get the current theme data like the theme variations and previews per step + * + * @return array + */ + public static function theme_data() + { + $theme_step_data = Patterns::get_count_of_patterns(); + $theme_step_data["theme-styles"]["styles"] = count(\WP_Theme_JSON_Resolver::get_style_variations()) + 1; + return $theme_step_data; + } + /** * Get the list of initial themes to be installed for a particular hosting plan. * From 9e3c4dc523a83fc62d8219eb1caf7219a02add66 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Thu, 17 Nov 2022 13:43:28 +0530 Subject: [PATCH 10/25] Moved Skeleton inside the LivePreview component --- .../components/Drawer/DrawerPanel/DesignThemeStylesPreview.js | 3 +-- .../components/{ => LivePreview}/LivePreviewSkeleton/index.js | 2 +- src/OnboardingSPA/components/LivePreview/index.js | 1 + src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js | 3 +-- src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js | 3 +-- 5 files changed, 5 insertions(+), 7 deletions(-) rename src/OnboardingSPA/components/{ => LivePreview}/LivePreviewSkeleton/index.js (95%) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index 26ca9ec1f..6bcf7b84c 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js @@ -1,7 +1,6 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { useState, useEffect } from '@wordpress/element'; -import { LivePreviewSelectableCard } from '../../LivePreview'; import { store as nfdOnboardingStore } from '../../../store'; import { getPatterns } from '../../../utils/api/patterns'; import { getGlobalStyles } from '../../../utils/api/themes'; @@ -10,7 +9,7 @@ import { THEME_STATUS_ACTIVE, THEME_STATUS_NOT_ACTIVE, } from '../../../../constants'; -import LivePreviewSkeleton from '../../LivePreviewSkeleton'; +import { LivePreviewSelectableCard, LivePreviewSkeleton } from '../../LivePreview'; const DesignThemeStylesPreview = () => { const MAX_PREVIEWS_PER_ROW = 3; diff --git a/src/OnboardingSPA/components/LivePreviewSkeleton/index.js b/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js similarity index 95% rename from src/OnboardingSPA/components/LivePreviewSkeleton/index.js rename to src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js index 3c0ae6074..4cb558172 100644 --- a/src/OnboardingSPA/components/LivePreviewSkeleton/index.js +++ b/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js @@ -1,5 +1,5 @@ import { useSelect } from '@wordpress/data'; -import { LivePreviewSelectableCard } from '../LivePreview'; +import { LivePreviewSelectableCard } from '..'; /** * Renders Skeletons for Live Previews. diff --git a/src/OnboardingSPA/components/LivePreview/index.js b/src/OnboardingSPA/components/LivePreview/index.js index 545215b0a..48e4ce5cd 100644 --- a/src/OnboardingSPA/components/LivePreview/index.js +++ b/src/OnboardingSPA/components/LivePreview/index.js @@ -1,2 +1,3 @@ export { default as LivePreview } from './BlockPreview'; +export { default as LivePreviewSkeleton } from './LivePreviewSkeleton'; export { default as LivePreviewSelectableCard } from './SelectableCard'; diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js index 3126dc14c..7fbbbb841 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js @@ -12,11 +12,10 @@ import { THEME_STATUS_ACTIVE, THEME_STATUS_NOT_ACTIVE, } from '../../../../constants'; -import { LivePreviewSelectableCard } from '../../../components/LivePreview'; import HeadingWithSubHeading from '../../../components/HeadingWithSubHeading'; import { DesignStateHandler } from '../../../components/StateHandlers'; import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output'; -import LivePreviewSkeleton from '../../../components/LivePreviewSkeleton'; +import { LivePreviewSelectableCard, LivePreviewSkeleton } from '../../../components/LivePreview'; const StepDesignHomepageMenu = () => { const homepagePatternList = [ 'homepage-1', 'homepage-2', 'homepage-3' ]; diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js index 93b535e02..270dd2fc0 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js @@ -5,7 +5,6 @@ import { useViewportMatch } from '@wordpress/compose'; import { store as nfdOnboardingStore } from '../../../../store'; import CommonLayout from '../../../../components/Layouts/Common'; -import { LivePreviewSelectableCard } from '../../../../components/LivePreview'; import HeadingWithSubHeading from '../../../../components/HeadingWithSubHeading'; import { useGlobalStylesOutput } from '../../../../utils/global-styles/use-global-styles-output'; import { getPatterns } from '../../../../utils/api/patterns'; @@ -16,7 +15,7 @@ import { THEME_STATUS_NOT_ACTIVE, } from '../../../../../constants'; import { DesignStateHandler } from '../../../../components/StateHandlers'; -import LivePreviewSkeleton from '../../../../components/LivePreviewSkeleton'; +import { LivePreviewSelectableCard, LivePreviewSkeleton } from '../../../../components/LivePreview'; const StepDesignThemeStylesMenu = () => { const MAX_PREVIEWS_PER_ROW = 3; From 3d090de33472cce4706d5669d6b1b1efdc3ad8d9 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Thu, 17 Nov 2022 13:51:35 +0530 Subject: [PATCH 11/25] Review Comments --- includes/Data/Data.php | 2 +- includes/Data/Patterns.php | 19 +++++++++---------- includes/Data/Themes.php | 5 +++-- .../DrawerPanel/DesignThemeStylesPreview.js | 3 +-- .../pages/Steps/DesignHomepageMenu/index.js | 3 +-- .../Steps/DesignThemeStyles/Menu/index.js | 3 +-- 6 files changed, 16 insertions(+), 19 deletions(-) diff --git a/includes/Data/Data.php b/includes/Data/Data.php index 6bf8f6c02..61e21ff80 100644 --- a/includes/Data/Data.php +++ b/includes/Data/Data.php @@ -22,7 +22,7 @@ public static function runtime() { 'currentFlow' => self::current_flow(), 'pluginInstallHash' => Permissions::rest_get_plugin_install_hash(), 'previewSettings' => Preview::get_settings(), - 'themeStepData' => Themes::theme_data(), + 'themeStepData' => Themes::step_preview_data(), ); } diff --git a/includes/Data/Patterns.php b/includes/Data/Patterns.php index 3e6706351..56cb0cec0 100644 --- a/includes/Data/Patterns.php +++ b/includes/Data/Patterns.php @@ -15,7 +15,7 @@ protected static function get_theme_step_patterns() { ), 'homepage-1' => array( 'active' => true, - 'shown' => true, + 'shown' => true, ), 'site-footer' => array( 'active' => true, @@ -27,15 +27,15 @@ protected static function get_theme_step_patterns() { ), 'homepage-1' => array( 'active' => true, - 'shown' => true, + 'shown' => true, ), 'homepage-2' => array( 'active' => true, - 'shown' => true, + 'shown' => true, ), 'homepage-3' => array( 'active' => true, - 'shown' => true, + 'shown' => true, ), 'site-footer' => array( 'active' => true, @@ -46,28 +46,28 @@ protected static function get_theme_step_patterns() { 'active' => true, 'title' => 'About', 'selected' => true, - 'shown' => true, + 'shown' => true, 'description' => __( 'Explain your company values or the history behind your brand.', 'wp-module-onboarding' ), ), 'contact-us' => array( 'active' => true, 'selected' => true, 'title' => 'Contact', - 'shown' => true, + 'shown' => true, 'description' => __( 'Offer visitors a single page with a contact form, your street address and social media.', 'wp-module-onboarding' ), ), 'testimonials-page' => array( 'active' => true, 'title' => 'Testimonials', 'selected' => false, - 'shown' => true, + 'shown' => true, 'description' => __( 'Highlight your success with testimonials from your fans.', 'wp-module-onboarding' ), ), 'blog-page' => array( 'active' => true, 'selected' => true, 'title' => 'Blog', - 'shown' => true, + 'shown' => true, 'description' => __( 'A page for periodic news, announcements and ideas.', 'wp-module-onboarding' ), ), ), @@ -243,8 +243,7 @@ public static function get_count_of_patterns() { } } $theme_pattern_count[ $theme_step ] = array( - 'styles' => 1, - 'patterns' => $theme_step_count, + 'previewCount' => 1 * $theme_step_count, ); } return $theme_pattern_count; diff --git a/includes/Data/Themes.php b/includes/Data/Themes.php index f5067b579..f17ee86d4 100644 --- a/includes/Data/Themes.php +++ b/includes/Data/Themes.php @@ -78,10 +78,11 @@ private static function check_approved( $value ) { * * @return array */ - public static function theme_data() + public static function step_preview_data() { $theme_step_data = Patterns::get_count_of_patterns(); - $theme_step_data["theme-styles"]["styles"] = count(\WP_Theme_JSON_Resolver::get_style_variations()) + 1; + $theme_step_data["theme-styles"]["previewCount"] = $theme_step_data["theme-styles"]["previewCount"] * + count(\WP_Theme_JSON_Resolver::get_style_variations()) + 1; return $theme_step_data; } diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index 6bcf7b84c..c0bd48ed5 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js @@ -38,8 +38,7 @@ const DesignThemeStylesPreview = () => { } = useDispatch( nfdOnboardingStore ); const THEME_VARIATIONS - = window.nfdOnboarding?.themeStepData[currentStep?.patternId]?.styles - * window.nfdOnboarding?.themeStepData[currentStep?.patternId]?.patterns; + = window.nfdOnboarding?.themeStepData[currentStep?.patternId]?.previewCount; const getStylesAndPatterns = async () => { const patternResponse = await getPatterns( diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js index 7fbbbb841..e0d211f90 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js @@ -71,8 +71,7 @@ const StepDesignHomepageMenu = () => { } = useDispatch( nfdOnboardingStore ); const THEME_VARIATIONS - = window.nfdOnboarding?.themeStepData[currentStep?.patternId]?.styles - * window.nfdOnboarding?.themeStepData[currentStep?.patternId]?.patterns; + = window.nfdOnboarding?.themeStepData[currentStep?.patternId]?.previewCount; useEffect( () => { if ( isLargeViewport ) { diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js index 270dd2fc0..58372ff15 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js @@ -49,8 +49,7 @@ const StepDesignThemeStylesMenu = () => { }, [] ); const THEME_VARIATIONS - = window.nfdOnboarding?.themeStepData[currentStep?.patternId]?.styles - * window.nfdOnboarding?.themeStepData[currentStep?.patternId]?.patterns; + = window.nfdOnboarding?.themeStepData[currentStep?.patternId]?.previewCount; const { setDrawerActiveView, From 8460053c4af1887b60d3b9801dbeefa98c427912 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Thu, 17 Nov 2022 13:54:54 +0530 Subject: [PATCH 12/25] Update DesignThemeStylesPreview.js --- .../Drawer/DrawerPanel/DesignThemeStylesPreview.js | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index c0bd48ed5..6b9e1c63e 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js @@ -121,18 +121,7 @@ const DesignThemeStylesPreview = () => { className={'theme-styles-preview--drawer__list__item'} viewportWidth={900} skeletonLoadingTime={4000}/>} { globalStyles - && buildPreviews().slice( 0, MAX_PREVIEWS_PER_ROW ) } -
-
- {!globalStyles - && } - { globalStyles - && buildPreviews().slice( - MAX_PREVIEWS_PER_ROW, - globalStyles.length - ) } + && buildPreviews() }
); From c119bbf53700c8cddcc93257894a9ab226288378 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Thu, 17 Nov 2022 13:58:33 +0530 Subject: [PATCH 13/25] Fix Homepage step --- .gitignore | 1 - .../pages/Steps/DesignHomepageMenu/index.js | 19 ++++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/.gitignore b/.gitignore index 69e666c6d..c30a19820 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,3 @@ -build node_modules vendor .DS_Store \ No newline at end of file diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js index e0d211f90..f6972e538 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js @@ -22,19 +22,19 @@ const StepDesignHomepageMenu = () => { const homepagesList = { 'homepage-1': [ - 'site-header-left-logo-navigation-inline', - 'homepage-1', - 'site-footer', + 'yith-wonder/site-header-left-logo-navigation-inline', + 'yith-wonder/homepage-1', + 'yith-wonder/site-footer', ], 'homepage-2': [ - 'site-header-left-logo-navigation-inline', - 'homepage-2', - 'site-footer', + 'yith-wonder/site-header-left-logo-navigation-inline', + 'yith-wonder/homepage-2', + 'yith-wonder/site-footer', ], 'homepage-3': [ - 'site-header-left-logo-navigation-inline', - 'homepage-3', - 'site-footer', + 'yith-wonder/site-header-left-logo-navigation-inline', + 'yith-wonder/homepage-3', + 'yith-wonder/site-footer', ], }; @@ -106,6 +106,7 @@ const StepDesignHomepageMenu = () => { if ( homepagePatternData?.error ) { return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); } + console.log(homepagePatternData.body); const globalStyles = await getGlobalStyles(); if ( globalStyles?.error ) { return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); From 1b81839f7ebf61142c9fa15d8cd5339d0aa613ff Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Thu, 17 Nov 2022 14:07:48 +0530 Subject: [PATCH 14/25] Combining Functions using Ternary --- .../Drawer/DrawerPanel/DesignThemeStylesPreview.js | 9 ++++----- .../pages/Steps/DesignHomepageMenu/index.js | 9 ++++----- .../pages/Steps/DesignThemeStyles/Menu/index.js | 14 ++++++-------- 3 files changed, 14 insertions(+), 18 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index 6b9e1c63e..86d4a57ce 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js @@ -116,12 +116,11 @@ const DesignThemeStylesPreview = () => { return (
- {!globalStyles - && } - { globalStyles - && buildPreviews() } + viewportWidth={900} skeletonLoadingTime={4000}/> + : buildPreviews() }
); diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js index f6972e538..dc47e32e1 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js @@ -106,7 +106,6 @@ const StepDesignHomepageMenu = () => { if ( homepagePatternData?.error ) { return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); } - console.log(homepagePatternData.body); const globalStyles = await getGlobalStyles(); if ( globalStyles?.error ) { return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); @@ -190,10 +189,10 @@ const StepDesignHomepageMenu = () => { subtitle={ currentStep?.subheading } />
- {!globalStyle && - } - { globalStyle && buildHomepagePreviews() } + {!globalStyle ? + + : buildHomepagePreviews() }
diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js index 58372ff15..54241d04e 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js @@ -131,18 +131,16 @@ const StepDesignThemeStylesMenu = () => { subtitle={ currentStep?.subheading } />
- {!globalStyles && + {!globalStyles ? } - { globalStyles && - buildPreviews().slice( 0, MAX_PREVIEWS_PER_ROW )} + className={'theme-styles-menu__list__item'} viewportWidth={900}/> + : buildPreviews().slice( 0, MAX_PREVIEWS_PER_ROW )}
- {!globalStyles && + {!globalStyles ? } - { globalStyles && - buildPreviews().slice( + className={'theme-styles-menu__list__item'} viewportWidth={900} /> + : buildPreviews().slice( MAX_PREVIEWS_PER_ROW, globalStyles.length )} From a55546e55cc7e8fcc94f5db1ef56b5e88f01668e Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Mon, 21 Nov 2022 12:43:51 +0530 Subject: [PATCH 15/25] Combined the Theme Step data into Preview Settings --- includes/Data/Data.php | 4 ++-- .../Drawer/DrawerPanel/DesignThemeStylesPreview.js | 2 +- src/OnboardingSPA/index.js | 6 +++--- src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js | 2 +- .../pages/Steps/DesignThemeStyles/Menu/index.js | 2 +- src/OnboardingSPA/store/actions.js | 2 +- src/OnboardingSPA/store/reducer.js | 5 ++++- src/OnboardingSPA/store/selectors.js | 2 +- 8 files changed, 14 insertions(+), 11 deletions(-) diff --git a/includes/Data/Data.php b/includes/Data/Data.php index 61e21ff80..c886a877d 100644 --- a/includes/Data/Data.php +++ b/includes/Data/Data.php @@ -21,8 +21,8 @@ public static function runtime() { 'currentPlan' => self::current_plan(), 'currentFlow' => self::current_flow(), 'pluginInstallHash' => Permissions::rest_get_plugin_install_hash(), - 'previewSettings' => Preview::get_settings(), - 'themeStepData' => Themes::step_preview_data(), + 'previewSettings' => array('settings' => Preview::get_settings(), + 'stepPreviewData' => Themes::step_preview_data()), ); } diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index 86d4a57ce..776ca2b6b 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js @@ -38,7 +38,7 @@ const DesignThemeStylesPreview = () => { } = useDispatch( nfdOnboardingStore ); const THEME_VARIATIONS - = window.nfdOnboarding?.themeStepData[currentStep?.patternId]?.previewCount; + = window.nfdOnboarding?.stepPreviewData[currentStep?.patternId]?.previewCount; const getStylesAndPatterns = async () => { const patternResponse = await getPatterns( diff --git a/src/OnboardingSPA/index.js b/src/OnboardingSPA/index.js index 53790e42e..f683c4334 100644 --- a/src/OnboardingSPA/index.js +++ b/src/OnboardingSPA/index.js @@ -42,13 +42,13 @@ export async function initializeNFDOnboarding( id, runtime ) { const DOM_TARGET = document.getElementById( id ); dispatch( nfdOnboardingStore ).setRuntime( runtime ); - if ( runtime.previewSettings.preRequisites?.themes ) { + if ( runtime.previewSettings.settings.preRequisites?.themes ) { dispatch( nfdOnboardingStore ).updateThemeStatus( - runtime.previewSettings.preRequisites?.themes[ DESIGN_STEPS_THEME ] + runtime.previewSettings.settings.preRequisites?.themes[ DESIGN_STEPS_THEME ] ); } dispatch( nfdOnboardingStore ).updatePluginsStatus( - runtime.previewSettings.preRequisites?.plugins + runtime.previewSettings.settings.preRequisites?.plugins ); const currentData = await getFlow(); if ( currentData.error == null ) { diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js index dc47e32e1..45b75a520 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js @@ -71,7 +71,7 @@ const StepDesignHomepageMenu = () => { } = useDispatch( nfdOnboardingStore ); const THEME_VARIATIONS - = window.nfdOnboarding?.themeStepData[currentStep?.patternId]?.previewCount; + = window.nfdOnboarding?.stepPreviewData[currentStep?.patternId]?.previewCount; useEffect( () => { if ( isLargeViewport ) { diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js index 54241d04e..351371dae 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js @@ -49,7 +49,7 @@ const StepDesignThemeStylesMenu = () => { }, [] ); const THEME_VARIATIONS - = window.nfdOnboarding?.themeStepData[currentStep?.patternId]?.previewCount; + = window.nfdOnboarding?.stepPreviewData[currentStep?.patternId]?.previewCount; const { setDrawerActiveView, diff --git a/src/OnboardingSPA/store/actions.js b/src/OnboardingSPA/store/actions.js index e94adcc27..8713af4a9 100644 --- a/src/OnboardingSPA/store/actions.js +++ b/src/OnboardingSPA/store/actions.js @@ -12,7 +12,7 @@ export function setRuntime( runtime ) { siteUrl: runtime.siteUrl, migrated: true, currentFlow: runtime.currentFlow ?? 'wp-setup', - themeStepData: runtime.themeStepData, + stepPreviewData: runtime.previewSettings.stepPreviewData, }; return { type: 'SET_RUNTIME', diff --git a/src/OnboardingSPA/store/reducer.js b/src/OnboardingSPA/store/reducer.js index 128e35f35..d2a74e035 100644 --- a/src/OnboardingSPA/store/reducer.js +++ b/src/OnboardingSPA/store/reducer.js @@ -146,7 +146,10 @@ export function runtime( state = {}, action ) { case 'SET_PREVIEW_SETTINGS': return { ...state, - previewSettings: action.previewSettings, + previewSettings: { + ...state.previewSettings, + settings: action.previewSettings, + }, }; } diff --git a/src/OnboardingSPA/store/selectors.js b/src/OnboardingSPA/store/selectors.js index a83d985ac..b0da98e2e 100644 --- a/src/OnboardingSPA/store/selectors.js +++ b/src/OnboardingSPA/store/selectors.js @@ -226,7 +226,7 @@ export function getSidebars( state ) { } export function getPreviewSettings( state ) { - return state.runtime.previewSettings; + return state.runtime.previewSettings.settings; } export function getSettings ( state ) { From c7b09555ce6cf3c08c1a413018734be2fd479127 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Mon, 21 Nov 2022 13:38:27 +0530 Subject: [PATCH 16/25] JS Lint --- .../DrawerPanel/DesignThemeStylesPreview.js | 27 ++++-- .../LivePreview/LivePreviewSkeleton/index.js | 49 +++++----- .../pages/Steps/DesignColors/index.js | 92 +++++++++---------- .../pages/Steps/DesignHomepageMenu/index.js | 23 +++-- .../Steps/DesignThemeStyles/Menu/index.js | 42 ++++++--- .../Steps/DesignThemeStyles/Preview/index.js | 10 +- src/OnboardingSPA/store/selectors.js | 12 +-- 7 files changed, 146 insertions(+), 109 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index 776ca2b6b..e84ecedeb 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js @@ -9,7 +9,10 @@ import { THEME_STATUS_ACTIVE, THEME_STATUS_NOT_ACTIVE, } from '../../../../constants'; -import { LivePreviewSelectableCard, LivePreviewSkeleton } from '../../LivePreview'; +import { + LivePreviewSelectableCard, + LivePreviewSkeleton, +} from '../../LivePreview'; const DesignThemeStylesPreview = () => { const MAX_PREVIEWS_PER_ROW = 3; @@ -37,9 +40,10 @@ const DesignThemeStylesPreview = () => { updateThemeStatus, } = useDispatch( nfdOnboardingStore ); - const THEME_VARIATIONS - = window.nfdOnboarding?.stepPreviewData[currentStep?.patternId]?.previewCount; - + const THEME_VARIATIONS = + window.nfdOnboarding?.stepPreviewData[ currentStep?.patternId ] + ?.previewCount; + const getStylesAndPatterns = async () => { const patternResponse = await getPatterns( currentStep.patternId, @@ -116,11 +120,16 @@ const DesignThemeStylesPreview = () => { return (
- {!globalStyles ? - - : buildPreviews() } + { ! globalStyles ? ( + + ) : ( + buildPreviews() + ) }
); diff --git a/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js b/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js index 4cb558172..ddaf085d7 100644 --- a/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js +++ b/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js @@ -4,35 +4,42 @@ import { LivePreviewSelectableCard } from '..'; /** * Renders Skeletons for Live Previews. * + * @param root0 + * @param root0.count + * @param root0.className + * @param root0.viewportWidth + * @param root0.skeletonLoadingTime * @property {number} count The number of Live Previews to be shown * @property {string} className The class name for the Live Preview * @property {number} viewportWidth Viewport Width for the Live Preview * @property {number} skeletonLoadingTime Change the Animation time for the Skeleton */ -const LivePreviewSkeleton = ({ count, className, viewportWidth, skeletonLoadingTime }) => { - - const buildDummyPreviews = () => { - let dummyPreviews = []; +const LivePreviewSkeleton = ( { + count, + className, + viewportWidth, + skeletonLoadingTime, +} ) => { + const buildDummyPreviews = () => { + const dummyPreviews = []; - for (let i = 0; i < count; i++) { - dummyPreviews.push( - - ); - } + for ( let i = 0; i < count; i++ ) { + dummyPreviews.push( + + ); + } - return dummyPreviews; - }; + return dummyPreviews; + }; - return ( - buildDummyPreviews() - ); + return buildDummyPreviews(); }; export default LivePreviewSkeleton; diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/index.js b/src/OnboardingSPA/pages/Steps/DesignColors/index.js index 7258baab7..a40dc065f 100644 --- a/src/OnboardingSPA/pages/Steps/DesignColors/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignColors/index.js @@ -15,25 +15,24 @@ import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-s const StepDesignColors = () => { const location = useLocation(); - const [isLoaded, setIsLoaded] = useState(false); - const [pattern, setPattern] = useState(); + const [ isLoaded, setIsLoaded ] = useState( false ); + const [ pattern, setPattern ] = useState(); - const isLargeViewport = useViewportMatch('medium'); - const { - currentStep, - currentData, - storedPreviewSettings, - } = useSelect((select) => { - return { - currentStep: select(nfdOnboardingStore).getStepFromPath( - location.pathname - ), - currentData: - select(nfdOnboardingStore).getCurrentOnboardingData(), - storedPreviewSettings: - select(nfdOnboardingStore).getPreviewSettings(), - }; - }, []); + const isLargeViewport = useViewportMatch( 'medium' ); + const { currentStep, currentData, storedPreviewSettings } = useSelect( + ( select ) => { + return { + currentStep: select( nfdOnboardingStore ).getStepFromPath( + location.pathname + ), + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + storedPreviewSettings: + select( nfdOnboardingStore ).getPreviewSettings(), + }; + }, + [] + ); const { setDrawerActiveView, @@ -41,37 +40,36 @@ const StepDesignColors = () => { setIsSidebarOpened, setIsDrawerSuppressed, updatePreviewSettings, - } = useDispatch(nfdOnboardingStore); + } = useDispatch( nfdOnboardingStore ); - useEffect(() => { - if (isLargeViewport) { - setIsDrawerOpened(true); + useEffect( () => { + if ( isLargeViewport ) { + setIsDrawerOpened( true ); } - setIsSidebarOpened(false); - setIsDrawerSuppressed(false); - setDrawerActiveView(VIEW_DESIGN_COLORS); - }, []); + setIsSidebarOpened( false ); + setIsDrawerSuppressed( false ); + setDrawerActiveView( VIEW_DESIGN_COLORS ); + }, [] ); const getStylesAndPatterns = async () => { - const pattern = await getPatterns(currentStep.patternId, true); + const pattern = await getPatterns( currentStep.patternId, true ); const globalStyles = await getGlobalStyles(); let selectedGlobalStyle; - if (currentData.data.theme.variation) { + if ( currentData.data.theme.variation ) { selectedGlobalStyle = globalStyles.body.filter( - (globalStyle) => + ( globalStyle ) => globalStyle.title === currentData.data.theme.variation - )[0]; + )[ 0 ]; } else { - selectedGlobalStyle = globalStyles.body[0]; + selectedGlobalStyle = globalStyles.body[ 0 ]; } - setPattern(pattern?.body); - setIsLoaded(true); + setPattern( pattern?.body ); + setIsLoaded( true ); }; - - useEffect(() => { - if (!isLoaded) getStylesAndPatterns(); - }, [isLoaded]); + useEffect( () => { + if ( ! isLoaded ) getStylesAndPatterns(); + }, [ isLoaded ] ); return ( @@ -84,20 +82,20 @@ const StepDesignColors = () => {
- {!pattern && ( + { ! pattern && ( - )} - {pattern && ( + ) } + { pattern && ( - )} + ) }
diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js index 45b75a520..21ba052e9 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js @@ -15,7 +15,10 @@ import { import HeadingWithSubHeading from '../../../components/HeadingWithSubHeading'; import { DesignStateHandler } from '../../../components/StateHandlers'; import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output'; -import { LivePreviewSelectableCard, LivePreviewSkeleton } from '../../../components/LivePreview'; +import { + LivePreviewSelectableCard, + LivePreviewSkeleton, +} from '../../../components/LivePreview'; const StepDesignHomepageMenu = () => { const homepagePatternList = [ 'homepage-1', 'homepage-2', 'homepage-3' ]; @@ -70,8 +73,9 @@ const StepDesignHomepageMenu = () => { updateThemeStatus, } = useDispatch( nfdOnboardingStore ); - const THEME_VARIATIONS - = window.nfdOnboarding?.stepPreviewData[currentStep?.patternId]?.previewCount; + const THEME_VARIATIONS = + window.nfdOnboarding?.stepPreviewData[ currentStep?.patternId ] + ?.previewCount; useEffect( () => { if ( isLargeViewport ) { @@ -189,10 +193,15 @@ const StepDesignHomepageMenu = () => { subtitle={ currentStep?.subheading } />
- {!globalStyle ? - - : buildHomepagePreviews() } + { ! globalStyle ? ( + + ) : ( + buildHomepagePreviews() + ) }
diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js index 351371dae..95d758701 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js @@ -15,7 +15,10 @@ import { THEME_STATUS_NOT_ACTIVE, } from '../../../../../constants'; import { DesignStateHandler } from '../../../../components/StateHandlers'; -import { LivePreviewSelectableCard, LivePreviewSkeleton } from '../../../../components/LivePreview'; +import { + LivePreviewSelectableCard, + LivePreviewSkeleton, +} from '../../../../components/LivePreview'; const StepDesignThemeStylesMenu = () => { const MAX_PREVIEWS_PER_ROW = 3; @@ -48,9 +51,10 @@ const StepDesignThemeStylesMenu = () => { }; }, [] ); - const THEME_VARIATIONS - = window.nfdOnboarding?.stepPreviewData[currentStep?.patternId]?.previewCount; - + const THEME_VARIATIONS = + window.nfdOnboarding?.stepPreviewData[ currentStep?.patternId ] + ?.previewCount; + const { setDrawerActiveView, setIsDrawerOpened, @@ -121,7 +125,7 @@ const StepDesignThemeStylesMenu = () => { ); } ); }; - + return ( @@ -131,19 +135,29 @@ const StepDesignThemeStylesMenu = () => { subtitle={ currentStep?.subheading } />
- {!globalStyles ? - - : buildPreviews().slice( 0, MAX_PREVIEWS_PER_ROW )} + { ! globalStyles ? ( + + ) : ( + buildPreviews().slice( 0, MAX_PREVIEWS_PER_ROW ) + ) }
- {!globalStyles ? - - : buildPreviews().slice( + { ! globalStyles ? ( + + ) : ( + buildPreviews().slice( MAX_PREVIEWS_PER_ROW, globalStyles.length - )} + ) + ) }
diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js index ee85fc7d8..5aaf3a376 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js @@ -220,13 +220,13 @@ const StepDesignThemeStylesPreview = () => {
- { !pattern && ( + { ! pattern && ( - )} + ) } { pattern && ( Date: Mon, 21 Nov 2022 13:40:23 +0530 Subject: [PATCH 17/25] PHP Format --- includes/Data/Data.php | 22 ++++++++++++---------- includes/Data/Patterns.php | 6 +++--- includes/Data/Themes.php | 9 ++++----- 3 files changed, 19 insertions(+), 18 deletions(-) diff --git a/includes/Data/Data.php b/includes/Data/Data.php index c886a877d..cb640b845 100644 --- a/includes/Data/Data.php +++ b/includes/Data/Data.php @@ -13,16 +13,18 @@ final class Data { */ public static function runtime() { return array( - 'buildUrl' => \NFD_ONBOARDING_BUILD_URL, - 'siteUrl' => \get_site_url(), - 'restUrl' => \get_home_url() . '/index.php?rest_route=', - 'adminUrl' => \admin_url(), - 'currentBrand' => self::current_brand(), - 'currentPlan' => self::current_plan(), - 'currentFlow' => self::current_flow(), - 'pluginInstallHash' => Permissions::rest_get_plugin_install_hash(), - 'previewSettings' => array('settings' => Preview::get_settings(), - 'stepPreviewData' => Themes::step_preview_data()), + 'buildUrl' => \NFD_ONBOARDING_BUILD_URL, + 'siteUrl' => \get_site_url(), + 'restUrl' => \get_home_url() . '/index.php?rest_route=', + 'adminUrl' => \admin_url(), + 'currentBrand' => self::current_brand(), + 'currentPlan' => self::current_plan(), + 'currentFlow' => self::current_flow(), + 'pluginInstallHash' => Permissions::rest_get_plugin_install_hash(), + 'previewSettings' => array( + 'settings' => Preview::get_settings(), + 'stepPreviewData' => Themes::step_preview_data(), + ), ); } diff --git a/includes/Data/Patterns.php b/includes/Data/Patterns.php index 56cb0cec0..f678e799f 100644 --- a/includes/Data/Patterns.php +++ b/includes/Data/Patterns.php @@ -231,19 +231,19 @@ public static function get_count_of_patterns() { $active_theme = ( \wp_get_theme() )->get( 'TextDomain' ); $theme_steps = self::get_theme_step_patterns()[ $active_theme ]; - + $theme_pattern_count = array(); foreach ( $theme_steps as $theme_step => $patterns ) { $theme_step_count = 0; foreach ( $patterns as $pattern => $pattern_data ) { foreach ( $pattern_data as $property => $value ) { - if ( $property === 'shown' && $value == true) { + if ( $property === 'shown' && $value == true ) { $theme_step_count += 1; } } } $theme_pattern_count[ $theme_step ] = array( - 'previewCount' => 1 * $theme_step_count, + 'previewCount' => 1 * $theme_step_count, ); } return $theme_pattern_count; diff --git a/includes/Data/Themes.php b/includes/Data/Themes.php index f17ee86d4..7072e291a 100644 --- a/includes/Data/Themes.php +++ b/includes/Data/Themes.php @@ -78,11 +78,10 @@ private static function check_approved( $value ) { * * @return array */ - public static function step_preview_data() - { - $theme_step_data = Patterns::get_count_of_patterns(); - $theme_step_data["theme-styles"]["previewCount"] = $theme_step_data["theme-styles"]["previewCount"] * - count(\WP_Theme_JSON_Resolver::get_style_variations()) + 1; + public static function step_preview_data() { + $theme_step_data = Patterns::get_count_of_patterns(); + $theme_step_data['theme-styles']['previewCount'] = $theme_step_data['theme-styles']['previewCount'] * + count( \WP_Theme_JSON_Resolver::get_style_variations() ) + 1; return $theme_step_data; } From 7f36fbb500145c5b894399084ef39feb330a07c3 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Tue, 22 Nov 2022 17:29:55 +0530 Subject: [PATCH 18/25] Added support for Typography Step --- .../components/LivePreview/LivePreviewSkeleton/index.js | 6 +----- src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js | 3 +-- src/OnboardingSPA/pages/Steps/DesignTypography/index.js | 8 +++++++- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js b/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js index ddaf085d7..8fb888937 100644 --- a/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js +++ b/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js @@ -4,15 +4,11 @@ import { LivePreviewSelectableCard } from '..'; /** * Renders Skeletons for Live Previews. * - * @param root0 - * @param root0.count - * @param root0.className - * @param root0.viewportWidth - * @param root0.skeletonLoadingTime * @property {number} count The number of Live Previews to be shown * @property {string} className The class name for the Live Preview * @property {number} viewportWidth Viewport Width for the Live Preview * @property {number} skeletonLoadingTime Change the Animation time for the Skeleton + * */ const LivePreviewSkeleton = ( { count, diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js index 5320b4fce..69cfbad9a 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js @@ -6,7 +6,6 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { getPatterns } from '../../../utils/api/patterns'; import { store as nfdOnboardingStore } from '../../../store'; import CommonLayout from '../../../components/Layouts/Common'; -import { getGlobalStyles, setGlobalStyles } from '../../../utils/api/themes'; import { VIEW_DESIGN_HOMEPAGE_MENU, THEME_STATUS_ACTIVE, @@ -174,7 +173,7 @@ const StepDesignHomepageMenu = () => { subtitle={ currentStep?.subheading } />
- { ! globalStyle ? ( + { ! homepagePattern ? ( {
+ { !pattern && ( + + ) } { pattern && ( ) }
From 59db8630de76f086af84ab330529a0f5baf579db Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Tue, 22 Nov 2022 18:06:42 +0530 Subject: [PATCH 19/25] Added Extra checks for previews --- .../DrawerPanel/DesignThemeStylesPreview.js | 3 +-- .../pages/Steps/DesignThemeStyles/Menu/index.js | 4 ++-- .../Steps/DesignThemeStyles/Preview/index.js | 16 ---------------- 3 files changed, 3 insertions(+), 20 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index c68e40836..10343e872 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js @@ -120,12 +120,11 @@ const DesignThemeStylesPreview = () => { return (
- { ! globalStyles ? ( + { !globalStyles || !pattern ? ( ) : ( buildPreviews() diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js index bd090aabc..5eb5d0e89 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js @@ -135,7 +135,7 @@ const StepDesignThemeStylesMenu = () => { subtitle={ currentStep?.subheading } />
- { ! globalStyles ? ( + { !pattern || !globalStyles ? ( { ) }
- { ! globalStyles ? ( + { !pattern || !globalStyles ? ( { /> ) }
-
-
- - - -
-
-
- { pattern && storedPreviewSettings && ( - - ) } -
From 891e246e382ff19dbe509a82627ff4d44ed10e18 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Tue, 22 Nov 2022 18:13:27 +0530 Subject: [PATCH 20/25] Setting a MAX Animation duration --- .../components/LivePreview/LivePreviewSkeleton/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js b/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js index 8fb888937..ab245604f 100644 --- a/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js +++ b/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js @@ -16,6 +16,9 @@ const LivePreviewSkeleton = ( { viewportWidth, skeletonLoadingTime, } ) => { + + const MAX_INTEGER_VALUE = 600000; + const buildDummyPreviews = () => { const dummyPreviews = []; @@ -26,7 +29,7 @@ const LivePreviewSkeleton = ( { blockGrammer={ '' } styling={ 'custom' } className={ className } - skeletonLoadingTime={ skeletonLoadingTime ?? 3500 } + skeletonLoadingTime={ skeletonLoadingTime ?? MAX_INTEGER_VALUE } viewportWidth={ viewportWidth } /> ); From 77b5b9985c2fcbe1f39e1af995ba68009705b260 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Tue, 22 Nov 2022 18:13:52 +0530 Subject: [PATCH 21/25] Update index.js --- .../components/LivePreview/LivePreviewSkeleton/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js b/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js index ab245604f..4be6c32d6 100644 --- a/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js +++ b/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js @@ -17,7 +17,7 @@ const LivePreviewSkeleton = ( { skeletonLoadingTime, } ) => { - const MAX_INTEGER_VALUE = 600000; + const MAX_ANIMATION_TIME = 600000; const buildDummyPreviews = () => { const dummyPreviews = []; From 428ef4c73e255c7c8540721703aa030d73ca7768 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Wed, 23 Nov 2022 16:02:07 +0530 Subject: [PATCH 22/25] Refactored Code --- .../DrawerPanel/DesignThemeStylesPreview.js | 15 +++---- .../LivePreview/LivePreviewSkeleton/index.js | 20 +++++++--- .../pages/Steps/DesignHomepageMenu/index.js | 40 +++++++++---------- .../Steps/DesignHomepageMenu/stylesheet.scss | 3 +- .../Steps/DesignThemeStyles/Menu/index.js | 30 ++++---------- .../DesignThemeStyles/Menu/stylesheet.scss | 23 ++++++----- 6 files changed, 60 insertions(+), 71 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index 10343e872..d09f9e11e 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js @@ -120,15 +120,12 @@ const DesignThemeStylesPreview = () => { return (
- { !globalStyles || !pattern ? ( - - ) : ( - buildPreviews() - ) } +
); diff --git a/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js b/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js index 4be6c32d6..8161fd49a 100644 --- a/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js +++ b/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js @@ -1,23 +1,29 @@ -import { useSelect } from '@wordpress/data'; +import { useState, useEffect } from '@wordpress/element'; + import { LivePreviewSelectableCard } from '..'; /** * Renders Skeletons for Live Previews. * * @property {number} count The number of Live Previews to be shown + * @property {number} watch The variable to be awaited for + * @property {string} callback The Render function in parent to be called * @property {string} className The class name for the Live Preview * @property {number} viewportWidth Viewport Width for the Live Preview - * @property {number} skeletonLoadingTime Change the Animation time for the Skeleton * */ const LivePreviewSkeleton = ( { count, + watch, + callback, className, viewportWidth, - skeletonLoadingTime, } ) => { const MAX_ANIMATION_TIME = 600000; + const [rerender, doRerender] = useState(0); + + useEffect(() => doRerender(1), [watch]); const buildDummyPreviews = () => { const dummyPreviews = []; @@ -29,7 +35,7 @@ const LivePreviewSkeleton = ( { blockGrammer={ '' } styling={ 'custom' } className={ className } - skeletonLoadingTime={ skeletonLoadingTime ?? MAX_INTEGER_VALUE } + skeletonLoadingTime={ MAX_ANIMATION_TIME } viewportWidth={ viewportWidth } /> ); @@ -38,7 +44,11 @@ const LivePreviewSkeleton = ( { return dummyPreviews; }; - return buildDummyPreviews(); + return !watch ? buildDummyPreviews() : + <> + {watch ?
{rerender}
: null} + {callback()} + ; }; export default LivePreviewSkeleton; diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js index 69cfbad9a..36ed8659c 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js @@ -146,18 +146,16 @@ const StepDesignHomepageMenu = () => { return homepagePattern?.map( ( homepage, idx ) => { if ( homepage ) { return ( -
- saveDataForHomepage( idx ) } - /> -
+ saveDataForHomepage( idx ) } + /> ); } } ); @@ -172,16 +170,14 @@ const StepDesignHomepageMenu = () => { title={ currentStep?.heading } subtitle={ currentStep?.subheading } /> -
- { ! homepagePattern ? ( - - ) : ( - buildHomepagePreviews() - ) } +
+
diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/stylesheet.scss index c00966908..a2b06f5d5 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/stylesheet.scss @@ -111,7 +111,8 @@ $main-border-main: var(--nfd-onboarding-primary-alt); &-custom { width: 100%; - height: 400px; + height: 45vh; + min-height: 400px; // Enable Scrolling in Live Preview overflow-y: scroll; } diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js index 5eb5d0e89..51f07f171 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js @@ -135,29 +135,13 @@ const StepDesignThemeStylesMenu = () => { subtitle={ currentStep?.subheading } />
- { !pattern || !globalStyles ? ( - - ) : ( - buildPreviews().slice( 0, MAX_PREVIEWS_PER_ROW ) - ) } -
-
- { !pattern || !globalStyles ? ( - - ) : ( - buildPreviews().slice( - MAX_PREVIEWS_PER_ROW, - globalStyles.length - ) - ) } +
diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss index 8b89a9423..49aaa96ff 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss @@ -14,24 +14,24 @@ $main-border-main: var(--nfd-onboarding-primary-alt); &__list { width: 60vw; height: 100%; - display: flex; - align-items: center; - justify-content: center; + column-count: 3; + vertical-align: auto; - @media (max-width: #{ ($break-large) }) { + @media (max-width: #{ ($break-xlarge) }) { width: 95vw; - align-items: center; - flex-direction: column; + column-count: 2; + } + + @media (max-width: #{ ($break-small) }) { + width: 95vw; + column-count: 1; } &__item { flex: 1; width: 100%; margin: 24px; - display: flex; - align-items: center; - flex-direction: column; - justify-content: center; + display: inline-block; &__title-bar { width: 90%; @@ -94,7 +94,8 @@ $main-border-main: var(--nfd-onboarding-primary-alt); &-custom { width: 100%; overflow: hidden; - height: 300px; + height: 35vh; + min-height: 350px; } } } From 5452dfffe80127ee41d10cccafbd277a04b6a190 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Thu, 24 Nov 2022 13:19:49 +0530 Subject: [PATCH 23/25] Added Live Preview Skeleton for Site Pages --- .../LivePreview/LivePreviewSkeleton/index.js | 24 +++++++++++++++-- .../pages/Steps/SitePages/index.js | 27 ++++++++++--------- .../pages/Steps/SitePages/stylesheet.scss | 22 +++++++-------- 3 files changed, 47 insertions(+), 26 deletions(-) diff --git a/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js b/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js index 8161fd49a..7e86c4bc8 100644 --- a/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js +++ b/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js @@ -1,6 +1,6 @@ import { useState, useEffect } from '@wordpress/element'; -import { LivePreviewSelectableCard } from '..'; +import { LivePreviewSelectableCard, LivePreviewSelectableCardWithInfo } from '..'; /** * Renders Skeletons for Live Previews. @@ -18,6 +18,7 @@ const LivePreviewSkeleton = ( { callback, className, viewportWidth, + isWithCard = false, } ) => { const MAX_ANIMATION_TIME = 600000; @@ -40,11 +41,30 @@ const LivePreviewSkeleton = ( { /> ); } + return dummyPreviews; + }; + + const buildDummyPreviewsWithInfo = () => { + const dummyPreviews = []; + for (let i = 0; i < count; i++) { + dummyPreviews.push( + + ); + } + console.log(dummyPreviews); return dummyPreviews; }; - return !watch ? buildDummyPreviews() : + return !watch ? (isWithCard ? buildDummyPreviewsWithInfo() : buildDummyPreviews()) : <> {watch ?
{rerender}
: null} {callback()} diff --git a/src/OnboardingSPA/pages/Steps/SitePages/index.js b/src/OnboardingSPA/pages/Steps/SitePages/index.js index 1aa1934e9..3048af579 100644 --- a/src/OnboardingSPA/pages/Steps/SitePages/index.js +++ b/src/OnboardingSPA/pages/Steps/SitePages/index.js @@ -17,6 +17,7 @@ import { GlobalStylesProvider, LivePreviewSelectableCardWithInfo, } from '../../../components/LivePreview'; +import LivePreviewSkeleton from '../../../components/LivePreview/LivePreviewSkeleton'; const StepSitePages = () => { const isLargeViewport = useViewportMatch( 'medium' ); @@ -25,7 +26,7 @@ const StepSitePages = () => { const location = useLocation(); const [ isLoaded, setIsLoaded ] = useState( false ); - const [ sitePages, setSitePages ] = useState( [] ); + const [ sitePages, setSitePages ] = useState( ); const [ checkedPages, setCheckedPages ] = useState( [] ); const { currentStep, currentData, themeStatus } = useSelect( ( select ) => { @@ -55,6 +56,10 @@ const StepSitePages = () => { setDrawerActiveView( VIEW_NAV_PRIMARY ); }, [] ); + const THEME_VARIATIONS = + window.nfdOnboarding?.stepPreviewData[currentStep?.patternId] + ?.previewCount; + const getSitePages = async () => { const sitePagesResponse = await getPatterns( currentStep.patternId ); if ( sitePagesResponse?.error ) { @@ -142,18 +147,14 @@ const StepSitePages = () => { subtitle={ currentStep?.subheading } />
- { sitePages && - buildPreviews().slice( - 0, - MAX_PREVIEWS_PER_ROW - ) } -
-
- { sitePages && - buildPreviews().slice( - MAX_PREVIEWS_PER_ROW, - sitePages.length - ) } +
diff --git a/src/OnboardingSPA/pages/Steps/SitePages/stylesheet.scss b/src/OnboardingSPA/pages/Steps/SitePages/stylesheet.scss index 603e32038..058478de7 100644 --- a/src/OnboardingSPA/pages/Steps/SitePages/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/SitePages/stylesheet.scss @@ -8,14 +8,17 @@ &__list { width: 50vw; height: 100%; - display: flex; - align-items: flex-start; - justify-content: center; - - @media (max-width: #{ ($break-large) }) { + column-count: 2; + vertical-align: auto; + + @media (max-width: #{ ($break-xlarge) }) { + width: 95vw; + column-count: 2; + } + + @media (max-width: #{ ($break-small) }) { width: 95vw; - align-items: center; - flex-direction: column; + column-count: 1; } &__item { @@ -23,10 +26,7 @@ flex: 1; width: 100%; margin: 24px; - display: flex; - align-items: center; - flex-direction: column; - justify-content: center; + display: inline-block; border: 1px solid #e3dfdf; &__live-preview-container { From 341a32ec2cc8b75a5f1e3a33c87ac29dd1b72c46 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Tue, 29 Nov 2022 10:25:04 +0530 Subject: [PATCH 24/25] Code Review Comments --- includes/Data/Patterns.php | 32 +++++++++++-------- includes/Data/Themes.php | 4 +-- .../Themes/ThemeVariationsController.php | 3 +- .../LivePreview/LivePreviewSkeleton/index.js | 1 - 4 files changed, 21 insertions(+), 19 deletions(-) diff --git a/includes/Data/Patterns.php b/includes/Data/Patterns.php index f678e799f..a1b64f266 100644 --- a/includes/Data/Patterns.php +++ b/includes/Data/Patterns.php @@ -14,8 +14,9 @@ protected static function get_theme_step_patterns() { 'active' => true, ), 'homepage-1' => array( - 'active' => true, - 'shown' => true, + 'active' => true, + 'shown' => true, + 'combine' => true, ), 'site-footer' => array( 'active' => true, @@ -228,23 +229,26 @@ public static function set_theme_step_patterns( $step, $slug ) { } public static function get_count_of_patterns() { - - $active_theme = ( \wp_get_theme() )->get( 'TextDomain' ); - $theme_steps = self::get_theme_step_patterns()[ $active_theme ]; + $active_theme = ( \wp_get_theme() )->get( 'TextDomain' ); + $theme_step_patterns = self::get_theme_step_patterns(); + $active_theme_patterns = isset( $theme_step_patterns[ $active_theme ] ) ? $theme_step_patterns[ $active_theme ] : array(); $theme_pattern_count = array(); - foreach ( $theme_steps as $theme_step => $patterns ) { - $theme_step_count = 0; + foreach ( $active_theme_patterns as $theme_step => $patterns ) { + $theme_step_count = 0; + $combine_styles = 1; foreach ( $patterns as $pattern => $pattern_data ) { - foreach ( $pattern_data as $property => $value ) { - if ( $property === 'shown' && $value == true ) { - $theme_step_count += 1; - } + if ( isset( $pattern_data['shown'] ) && $pattern_data['shown'] === true ) { + $theme_step_count += 1; + } + if ( isset( $pattern_data['combine'] ) && $pattern_data['combine'] === true ) { + $combine_styles = count( \WP_Theme_JSON_Resolver::get_style_variations() ) + 1; } } - $theme_pattern_count[ $theme_step ] = array( - 'previewCount' => 1 * $theme_step_count, - ); + + $theme_pattern_count[ $theme_step ] = array( + 'previewCount' => $combine_styles * $theme_step_count, + ); } return $theme_pattern_count; } diff --git a/includes/Data/Themes.php b/includes/Data/Themes.php index 7072e291a..03a76b501 100644 --- a/includes/Data/Themes.php +++ b/includes/Data/Themes.php @@ -79,9 +79,7 @@ private static function check_approved( $value ) { * @return array */ public static function step_preview_data() { - $theme_step_data = Patterns::get_count_of_patterns(); - $theme_step_data['theme-styles']['previewCount'] = $theme_step_data['theme-styles']['previewCount'] * - count( \WP_Theme_JSON_Resolver::get_style_variations() ) + 1; + $theme_step_data = Patterns::get_count_of_patterns(); return $theme_step_data; } diff --git a/includes/RestApi/Themes/ThemeVariationsController.php b/includes/RestApi/Themes/ThemeVariationsController.php index 41fd89b8e..6151934ab 100644 --- a/includes/RestApi/Themes/ThemeVariationsController.php +++ b/includes/RestApi/Themes/ThemeVariationsController.php @@ -1,6 +1,7 @@ get_param( 'variations' ); // If there exists an old Custom Theme then return that - if ( 'false' === $default && false !== \get_option( Options::get_option_name( 'theme_settings' ) ) ) { + if ( false === $default && false !== \get_option( Options::get_option_name( 'theme_settings' ) ) ) { return array( \get_option( Options::get_option_name( 'theme_settings' ) ), ); diff --git a/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js b/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js index 7e86c4bc8..037c93240 100644 --- a/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js +++ b/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js @@ -60,7 +60,6 @@ const LivePreviewSkeleton = ( { /> ); } - console.log(dummyPreviews); return dummyPreviews; }; From 605796102642771ed7906627fdaf68d68100adff Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Tue, 29 Nov 2022 10:54:46 +0530 Subject: [PATCH 25/25] Used store data instead of window data --- includes/Data/Patterns.php | 2 +- .../Drawer/DrawerPanel/DesignThemeStylesPreview.js | 9 +++------ .../pages/Steps/DesignHomepageMenu/index.js | 9 +++------ .../pages/Steps/DesignThemeStyles/Menu/index.js | 8 +++----- src/OnboardingSPA/pages/Steps/SitePages/index.js | 9 +++------ src/OnboardingSPA/store/selectors.js | 4 ++++ 6 files changed, 17 insertions(+), 24 deletions(-) diff --git a/includes/Data/Patterns.php b/includes/Data/Patterns.php index a1b64f266..9fb79f74e 100644 --- a/includes/Data/Patterns.php +++ b/includes/Data/Patterns.php @@ -235,7 +235,7 @@ public static function get_count_of_patterns() { $theme_pattern_count = array(); foreach ( $active_theme_patterns as $theme_step => $patterns ) { - $theme_step_count = 0; + $theme_step_count = 0; $combine_styles = 1; foreach ( $patterns as $pattern => $pattern_data ) { if ( isset( $pattern_data['shown'] ) && $pattern_data['shown'] === true ) { diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index d09f9e11e..dbcd6be13 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js @@ -22,7 +22,7 @@ const DesignThemeStylesPreview = () => { const [ globalStyles, setGlobalStyles ] = useState(); const [ selectedStyle, setSelectedStyle ] = useState( '' ); - const { currentStep, currentData, storedPreviewSettings, themeStatus } = + const { currentStep, currentData, storedPreviewSettings, themeStatus, themeVariations, } = useSelect( ( select ) => { return { currentStep: select( nfdOnboardingStore ).getCurrentStep(), @@ -31,6 +31,7 @@ const DesignThemeStylesPreview = () => { storedPreviewSettings: select( nfdOnboardingStore ).getPreviewSettings(), themeStatus: select( nfdOnboardingStore ).getThemeStatus(), + themeVariations: select(nfdOnboardingStore).getStepPreviewData(), }; }, [] ); @@ -40,10 +41,6 @@ const DesignThemeStylesPreview = () => { updateThemeStatus, } = useDispatch( nfdOnboardingStore ); - const THEME_VARIATIONS = - window.nfdOnboarding?.stepPreviewData[ currentStep?.patternId ] - ?.previewCount; - const getStylesAndPatterns = async () => { const patternResponse = await getPatterns( currentStep.patternId, @@ -123,7 +120,7 @@ const DesignThemeStylesPreview = () => { diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js index b236d0ff8..6b2cf1893 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js @@ -47,7 +47,7 @@ const StepDesignHomepageMenu = () => { const isLargeViewport = useViewportMatch( 'medium' ); - const { currentStep, currentData, storedPreviewSettings, themeStatus } = + const { currentStep, currentData, storedPreviewSettings, themeStatus, themeVariations } = useSelect( ( select ) => { return { currentStep: select( nfdOnboardingStore ).getStepFromPath( @@ -58,6 +58,7 @@ const StepDesignHomepageMenu = () => { storedPreviewSettings: select( nfdOnboardingStore ).getPreviewSettings(), themeStatus: select( nfdOnboardingStore ).getThemeStatus(), + themeVariations: select(nfdOnboardingStore).getStepPreviewData(), }; }, [] ); @@ -71,10 +72,6 @@ const StepDesignHomepageMenu = () => { updateThemeStatus, } = useDispatch( nfdOnboardingStore ); - const THEME_VARIATIONS = - window.nfdOnboarding?.stepPreviewData[ currentStep?.patternId ] - ?.previewCount; - useEffect( () => { if ( isLargeViewport ) { setIsDrawerOpened( true ); @@ -174,7 +171,7 @@ const StepDesignHomepageMenu = () => {
{ currentData, storedPreviewSettings, themeStatus, + themeVariations, } = useSelect( ( select ) => { return { currentStep: select( nfdOnboardingStore ).getStepFromPath( @@ -48,13 +49,10 @@ const StepDesignThemeStylesMenu = () => { storedPreviewSettings: select( nfdOnboardingStore ).getPreviewSettings(), themeStatus: select( nfdOnboardingStore ).getThemeStatus(), + themeVariations: select(nfdOnboardingStore).getStepPreviewData(), }; }, [] ); - const THEME_VARIATIONS = - window.nfdOnboarding?.stepPreviewData[ currentStep?.patternId ] - ?.previewCount; - const { setDrawerActiveView, setIsDrawerOpened, @@ -137,7 +135,7 @@ const StepDesignThemeStylesMenu = () => {
{ const [ sitePages, setSitePages ] = useState( ); const [ checkedPages, setCheckedPages ] = useState( [] ); - const { currentStep, currentData, themeStatus } = useSelect( ( select ) => { + const { currentStep, currentData, themeStatus, themeVariations, } = useSelect( ( select ) => { return { currentStep: select( nfdOnboardingStore ).getStepFromPath( location.pathname @@ -37,6 +37,7 @@ const StepSitePages = () => { currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), themeStatus: select( nfdOnboardingStore ).getThemeStatus(), + themeVariations: select(nfdOnboardingStore).getStepPreviewData(), }; }, [] ); @@ -56,10 +57,6 @@ const StepSitePages = () => { setDrawerActiveView( VIEW_NAV_PRIMARY ); }, [] ); - const THEME_VARIATIONS = - window.nfdOnboarding?.stepPreviewData[currentStep?.patternId] - ?.previewCount; - const getSitePages = async () => { const sitePagesResponse = await getPatterns( currentStep.patternId ); if ( sitePagesResponse?.error ) { @@ -149,7 +146,7 @@ const StepSitePages = () => {