diff --git a/includes/Data/Data.php b/includes/Data/Data.php index 0bb4f5d7c..cb640b845 100644 --- a/includes/Data/Data.php +++ b/includes/Data/Data.php @@ -21,7 +21,10 @@ public static function runtime() { 'currentPlan' => self::current_plan(), 'currentFlow' => self::current_flow(), 'pluginInstallHash' => Permissions::rest_get_plugin_install_hash(), - 'previewSettings' => Preview::get_settings(), + 'previewSettings' => array( + 'settings' => Preview::get_settings(), + 'stepPreviewData' => Themes::step_preview_data(), + ), ); } @@ -105,4 +108,5 @@ public static function customer_data() { } return array(); } + } // END \NewfoldLabs\WP\Module\Onboarding\Data() diff --git a/includes/Data/Patterns.php b/includes/Data/Patterns.php index 1c3b658d7..9fb79f74e 100644 --- a/includes/Data/Patterns.php +++ b/includes/Data/Patterns.php @@ -14,7 +14,9 @@ protected static function get_theme_step_patterns() { 'active' => true, ), 'homepage-1' => array( - 'active' => true, + 'active' => true, + 'shown' => true, + 'combine' => true, ), 'site-footer' => array( 'active' => true, @@ -26,12 +28,15 @@ protected static function get_theme_step_patterns() { ), '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, @@ -42,24 +47,28 @@ protected static function get_theme_step_patterns() { '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' ), ), ), @@ -140,7 +149,7 @@ public static function get_theme_step_patterns_from_step( $step, $squash = false * * @return \WP_REST_Response|\WP_Error */ - public function set_homepage_patterns( $slug ) { + public static function set_homepage_patterns( $slug ) { if ( ! isset( $slug ) ) { return new \WP_Error( @@ -218,4 +227,29 @@ public static function set_theme_step_patterns( $step, $slug ) { ); } } + + public static function get_count_of_patterns() { + $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 ( $active_theme_patterns as $theme_step => $patterns ) { + $theme_step_count = 0; + $combine_styles = 1; + foreach ( $patterns as $pattern => $pattern_data ) { + 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' => $combine_styles * $theme_step_count, + ); + } + return $theme_pattern_count; + } } diff --git a/includes/Data/Themes.php b/includes/Data/Themes.php index f432bedb7..03a76b501 100644 --- a/includes/Data/Themes.php +++ b/includes/Data/Themes.php @@ -73,6 +73,16 @@ 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 step_preview_data() { + $theme_step_data = Patterns::get_count_of_patterns(); + return $theme_step_data; + } + /** * Get the list of initial themes to be installed for a particular hosting plan. * 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/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index db972007b..dbcd6be13 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,15 +9,20 @@ import { THEME_STATUS_ACTIVE, THEME_STATUS_NOT_ACTIVE, } from '../../../../constants'; +import { + LivePreviewSelectableCard, + LivePreviewSkeleton, +} from '../../LivePreview'; const DesignThemeStylesPreview = () => { const MAX_PREVIEWS_PER_ROW = 3; + const [ isLoaded, setIsLoaded ] = useState( false ); const [ pattern, setPattern ] = useState(); 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(), @@ -27,6 +31,7 @@ const DesignThemeStylesPreview = () => { storedPreviewSettings: select( nfdOnboardingStore ).getPreviewSettings(), themeStatus: select( nfdOnboardingStore ).getThemeStatus(), + themeVariations: select(nfdOnboardingStore).getStepPreviewData(), }; }, [] ); @@ -112,17 +117,12 @@ const DesignThemeStylesPreview = () => { return (
- { globalStyles - ? buildPreviews().slice( 0, MAX_PREVIEWS_PER_ROW ) - : '' } -
-
- { globalStyles - ? buildPreviews().slice( - MAX_PREVIEWS_PER_ROW, - globalStyles.length - ) - : '' } +
); diff --git a/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js b/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js new file mode 100644 index 000000000..037c93240 --- /dev/null +++ b/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js @@ -0,0 +1,73 @@ +import { useState, useEffect } from '@wordpress/element'; + +import { LivePreviewSelectableCard, LivePreviewSelectableCardWithInfo } 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 + * + */ +const LivePreviewSkeleton = ( { + count, + watch, + callback, + className, + viewportWidth, + isWithCard = false, +} ) => { + + const MAX_ANIMATION_TIME = 600000; + const [rerender, doRerender] = useState(0); + + useEffect(() => doRerender(1), [watch]); + + const buildDummyPreviews = () => { + const dummyPreviews = []; + + for ( let i = 0; i < count; i++ ) { + dummyPreviews.push( + + ); + } + return dummyPreviews; + }; + + const buildDummyPreviewsWithInfo = () => { + const dummyPreviews = []; + + for (let i = 0; i < count; i++) { + dummyPreviews.push( + + ); + } + return dummyPreviews; + }; + + return !watch ? (isWithCard ? buildDummyPreviewsWithInfo() : buildDummyPreviews()) : + <> + {watch ?
{rerender}
: null} + {callback()} + ; +}; + +export default LivePreviewSkeleton; diff --git a/src/OnboardingSPA/components/LivePreview/index.js b/src/OnboardingSPA/components/LivePreview/index.js index 3ed115164..e7cebd4a1 100644 --- a/src/OnboardingSPA/components/LivePreview/index.js +++ b/src/OnboardingSPA/components/LivePreview/index.js @@ -1,4 +1,5 @@ export { default as LivePreview } from './BlockPreview'; +export { default as LivePreviewSkeleton } from './LivePreviewSkeleton'; export { default as LivePreviewSelectableCard } from './SelectableCard'; export { default as LivePreviewSelectableCardWithInfo } from './SelectableCardWithInfo'; export { default as GlobalStylesProvider } from './GlobalStylesProvider'; 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/DesignColors/index.js b/src/OnboardingSPA/pages/Steps/DesignColors/index.js index e0dd2de5b..a90c7a3aa 100644 --- a/src/OnboardingSPA/pages/Steps/DesignColors/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignColors/index.js @@ -23,19 +23,25 @@ const StepDesignColors = () => { const [ pattern, setPattern ] = useState(); const isLargeViewport = useViewportMatch( 'medium' ); - const { currentStep } = useSelect( ( select ) => { - return { - currentStep: select( nfdOnboardingStore ).getStepFromPath( - location.pathname - ), - }; - }, [] ); + const { currentStep, currentData } = useSelect( + ( select ) => { + return { + currentStep: select( nfdOnboardingStore ).getStepFromPath( + location.pathname + ), + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + }; + }, + [] + ); const { setDrawerActiveView, setIsDrawerOpened, setIsSidebarOpened, setIsDrawerSuppressed, + } = useDispatch( nfdOnboardingStore ); useEffect( () => { @@ -72,6 +78,13 @@ const StepDesignColors = () => {
+ { ! pattern && ( + + ) } { pattern && ( { const isLargeViewport = useViewportMatch( 'medium' ); - const { currentStep, currentData, storedPreviewSettings, themeStatus } = + const { currentStep, currentData, storedPreviewSettings, themeStatus, themeVariations } = useSelect( ( select ) => { return { currentStep: select( nfdOnboardingStore ).getStepFromPath( @@ -57,6 +58,7 @@ const StepDesignHomepageMenu = () => { storedPreviewSettings: select( nfdOnboardingStore ).getPreviewSettings(), themeStatus: select( nfdOnboardingStore ).getThemeStatus(), + themeVariations: select(nfdOnboardingStore).getStepPreviewData(), }; }, [] ); @@ -141,18 +143,16 @@ const StepDesignHomepageMenu = () => { return homepagePattern?.map( ( homepage, idx ) => { if ( homepage ) { return ( -
- saveDataForHomepage( idx ) } - /> -
+ saveDataForHomepage( idx ) } + /> ); } return null; @@ -168,8 +168,14 @@ const StepDesignHomepageMenu = () => { title={ currentStep?.heading } subtitle={ currentStep?.subheading } /> -
- { storedPreviewSettings && 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 e0e5744c3..be6714e82 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,6 +15,10 @@ import { THEME_STATUS_NOT_ACTIVE, } from '../../../../../constants'; import { DesignStateHandler } from '../../../../components/StateHandlers'; +import { + LivePreviewSelectableCard, + LivePreviewSkeleton, +} from '../../../../components/LivePreview'; const StepDesignThemeStylesMenu = () => { const MAX_PREVIEWS_PER_ROW = 3; @@ -34,6 +37,7 @@ const StepDesignThemeStylesMenu = () => { currentData, storedPreviewSettings, themeStatus, + themeVariations, } = useSelect( ( select ) => { return { currentStep: select( nfdOnboardingStore ).getStepFromPath( @@ -45,6 +49,7 @@ const StepDesignThemeStylesMenu = () => { storedPreviewSettings: select( nfdOnboardingStore ).getPreviewSettings(), themeStatus: select( nfdOnboardingStore ).getThemeStatus(), + themeVariations: select(nfdOnboardingStore).getStepPreviewData(), }; }, [] ); @@ -128,15 +133,13 @@ const StepDesignThemeStylesMenu = () => { subtitle={ currentStep?.subheading } />
- { globalStyles && - buildPreviews().slice( 0, MAX_PREVIEWS_PER_ROW ) } -
-
- { 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; } } } diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js index fe7ab7200..b80652e39 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js @@ -190,11 +190,11 @@ const StepDesignThemeStylesPreview = () => { ) } - - } - checked={ customize } - onChange={ () => handleCheckbox( ! customize ) } - /> + + } + checked={ customize } + onChange={ () => handleCheckbox( ! customize ) } + />
@@ -204,13 +204,20 @@ const StepDesignThemeStylesPreview = () => {
- { pattern && storedPreviewSettings && ( + { ! pattern && ( + ) + } + { pattern && ( - ) } + /> ) + }
diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js index 8da31e330..b6cc57942 100644 --- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js @@ -75,12 +75,18 @@ const StepDesignTypography = () => {
+ { !pattern && ( + + ) } { pattern && ( ) }
diff --git a/src/OnboardingSPA/pages/Steps/SitePages/index.js b/src/OnboardingSPA/pages/Steps/SitePages/index.js index 1aa1934e9..194d50a5c 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,10 +26,10 @@ 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 ) => { + const { currentStep, currentData, themeStatus, themeVariations, } = useSelect( ( select ) => { return { currentStep: select( nfdOnboardingStore ).getStepFromPath( location.pathname @@ -36,6 +37,7 @@ const StepSitePages = () => { currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), themeStatus: select( nfdOnboardingStore ).getThemeStatus(), + themeVariations: select(nfdOnboardingStore).getStepPreviewData(), }; }, [] ); @@ -142,18 +144,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 { diff --git a/src/OnboardingSPA/store/actions.js b/src/OnboardingSPA/store/actions.js index 9e6258a6b..8713af4a9 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', + 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..2931d7b6a 100644 --- a/src/OnboardingSPA/store/selectors.js +++ b/src/OnboardingSPA/store/selectors.js @@ -226,21 +226,25 @@ export function getSidebars( state ) { } export function getPreviewSettings( state ) { - return state.runtime.previewSettings; + return state.runtime.previewSettings.settings; } -export function getSettings ( state ) { - return state.settings; +export function getSettings( state ) { + return state.settings; } -export function getThemeStatus ( state ) { - return state.settings.themeStatus; +export function getThemeStatus( state ) { + return state.settings.themeStatus; } -export function getPluginsStatus ( state ) { - return state.settings.pluginsStatus; +export function getPluginsStatus( state ) { + return state.settings.pluginsStatus; } export function getStoreInfoSteps( state ) { return state.flow.steps.storeInfoSteps; } + +export function getStepPreviewData(state) { + return state.runtime.previewSettings.stepPreviewData; +}