Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PRESS2 335 Fix the blank space before theme skeleton spins up #104

Merged
Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
30fc0dd
Fixed Blank Space in Theme Style selection step
officiallygod Nov 9, 2022
7d9bfea
Removed Blank Space from Preview step
officiallygod Nov 9, 2022
e176873
Refactored Code
officiallygod Nov 9, 2022
4e6cd43
New Data Structure to save data
officiallygod Nov 10, 2022
3027baa
Added Fast Loader to other pages
officiallygod Nov 10, 2022
9227507
Factored out Skeleton for Live Preview
officiallygod Nov 15, 2022
946f790
Added a few Fixes
officiallygod Nov 15, 2022
9970370
Merge branch 'release/v1.0.0' into PRESS2-335-Fix-the-Blank-Space-bef…
officiallygod Nov 15, 2022
1112399
Update Patterns.php
officiallygod Nov 16, 2022
6e052d6
Moved Style calc to Themes.php
officiallygod Nov 17, 2022
9e3c4dc
Moved Skeleton inside the LivePreview component
officiallygod Nov 17, 2022
3d090de
Review Comments
officiallygod Nov 17, 2022
8460053
Update DesignThemeStylesPreview.js
officiallygod Nov 17, 2022
c119bbf
Fix Homepage step
officiallygod Nov 17, 2022
1b81839
Combining Functions using Ternary
officiallygod Nov 17, 2022
a55546e
Combined the Theme Step data into Preview Settings
officiallygod Nov 21, 2022
c7b0955
JS Lint
officiallygod Nov 21, 2022
d7d9611
PHP Format
officiallygod Nov 21, 2022
513a054
Merge branch 'release/v1.0.0' into PRESS2-335-Fix-the-Blank-Space-bef…
officiallygod Nov 22, 2022
7f36fbb
Added support for Typography Step
officiallygod Nov 22, 2022
59db863
Added Extra checks for previews
officiallygod Nov 22, 2022
891e246
Setting a MAX Animation duration
officiallygod Nov 22, 2022
77b5b99
Update index.js
officiallygod Nov 22, 2022
428ef4c
Refactored Code
officiallygod Nov 23, 2022
ae9bc0a
Merge remote-tracking branch 'origin/release/v1.0.0' into PRESS2-335-…
officiallygod Nov 24, 2022
5452dff
Added Live Preview Skeleton for Site Pages
officiallygod Nov 24, 2022
341a32e
Code Review Comments
officiallygod Nov 29, 2022
6057961
Used store data instead of window data
officiallygod Nov 29, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 23 additions & 9 deletions includes/Data/Data.php
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
'themeStepData' => self::theme_data(),
officiallygod marked this conversation as resolved.
Show resolved Hide resolved
);
}

Expand Down Expand Up @@ -105,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()
officiallygod marked this conversation as resolved.
Show resolved Hide resolved
{
$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;
officiallygod marked this conversation as resolved.
Show resolved Hide resolved
}

officiallygod marked this conversation as resolved.
Show resolved Hide resolved
} // END \NewfoldLabs\WP\Module\Onboarding\Data()
68 changes: 59 additions & 9 deletions includes/Data/Patterns.php
Original file line number Diff line number Diff line change
Expand Up @@ -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',
arunshenoy99 marked this conversation as resolved.
Show resolved Hide resolved
'selected',
'shown'
),
'site-footer' => array(
'active',
'selected'
),
),
),
);
Expand Down Expand Up @@ -69,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);
Expand Down Expand Up @@ -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;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,11 @@ import {
THEME_STATUS_ACTIVE,
THEME_STATUS_NOT_ACTIVE,
} from '../../../../constants';
import LivePreviewSkeleton from '../../LivePreviewSkeleton';

const DesignThemeStylesPreview = () => {
const MAX_PREVIEWS_PER_ROW = 3;

const [ isLoaded, setIsLoaded ] = useState( false );
const [ pattern, setPattern ] = useState();
const [ globalStyles, setGlobalStyles ] = useState();
Expand All @@ -36,6 +38,10 @@ const DesignThemeStylesPreview = () => {
updateThemeStatus,
} = useDispatch( nfdOnboardingStore );

const THEME_VARIATIONS
= window.nfdOnboarding?.themeStepData[currentStep?.patternId]?.styles
* window.nfdOnboarding?.themeStepData[currentStep?.patternId]?.patterns;

officiallygod marked this conversation as resolved.
Show resolved Hide resolved
const getStylesAndPatterns = async () => {
const patternResponse = await getPatterns(
currentStep.patternId,
Expand Down Expand Up @@ -112,17 +118,23 @@ const DesignThemeStylesPreview = () => {
return (
<div className="theme-styles-preview--drawer">
<div className="theme-styles-preview--drawer__list">
{!globalStyles
&& <LivePreviewSkeleton count={Math.floor(THEME_VARIATIONS)}
className={'theme-styles-preview--drawer__list__item'}
viewportWidth={900} skeletonLoadingTime={4000}/>}
officiallygod marked this conversation as resolved.
Show resolved Hide resolved
{ globalStyles
? buildPreviews().slice( 0, MAX_PREVIEWS_PER_ROW )
: '' }
&& buildPreviews().slice( 0, MAX_PREVIEWS_PER_ROW ) }
</div>
<div className="theme-styles-preview--drawer__list">
{!globalStyles
&& <LivePreviewSkeleton count={Math.floor(THEME_VARIATIONS)}
className={'theme-styles-preview--drawer__list__item'}
viewportWidth={900} skeletonLoadingTime={4000}/>}
{ globalStyles
? buildPreviews().slice(
&& buildPreviews().slice(
MAX_PREVIEWS_PER_ROW,
globalStyles.length
)
: '' }
) }
officiallygod marked this conversation as resolved.
Show resolved Hide resolved
</div>
</div>
);
Expand Down
38 changes: 38 additions & 0 deletions src/OnboardingSPA/components/LivePreviewSkeleton/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { useSelect } from '@wordpress/data';
officiallygod marked this conversation as resolved.
Show resolved Hide resolved
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
* @property {number} skeletonLoadingTime Change the Animation time for the Skeleton
*/
const LivePreviewSkeleton = ({ count, className, viewportWidth, skeletonLoadingTime }) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Like we discussed can this accept a callback function and only remove the skeleton once that is complete?


const buildDummyPreviews = () => {
let dummyPreviews = [];

for (let i = 0; i < count; i++) {
dummyPreviews.push(
<LivePreviewSelectableCard
key={i}
blockGrammer={''}
styling={'custom'}
className={className}
skeletonLoadingTime={ skeletonLoadingTime ?? 3500 }
viewportWidth={viewportWidth}
/>
);
}

return dummyPreviews;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's use map here and move the code to the below return instead of a separate function

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

umm can we do a normal iteration in map?? like a for loop from 0 to X?? Lemme check

};

return (
buildDummyPreviews()
);
};

export default LivePreviewSkeleton;
7 changes: 7 additions & 0 deletions src/OnboardingSPA/pages/Steps/DesignColors/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,13 @@ const StepDesignColors = () => {
</div>
</div>
<div className="theme-colors-preview__live-preview-container">
{!pattern && (
<LivePreview
blockGrammer={''}
styling={'custom'}
viewportWidth={1300}
/>
)}
officiallygod marked this conversation as resolved.
Show resolved Hide resolved
{pattern && (
<LivePreview
blockGrammer={pattern}
Expand Down
8 changes: 8 additions & 0 deletions src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { LivePreviewSelectableCard } from '../../../components/LivePreview';
import HeadingWithSubHeading from '../../../components/HeadingWithSubHeading';
arunshenoy99 marked this conversation as resolved.
Show resolved Hide resolved
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' ];
Expand Down Expand Up @@ -70,6 +71,10 @@ const StepDesignHomepageMenu = () => {
updateThemeStatus,
} = useDispatch( nfdOnboardingStore );

const THEME_VARIATIONS
= window.nfdOnboarding?.themeStepData[currentStep?.patternId]?.styles
* window.nfdOnboarding?.themeStepData[currentStep?.patternId]?.patterns;

useEffect( () => {
if ( isLargeViewport ) {
setIsDrawerOpened( true );
Expand Down Expand Up @@ -186,6 +191,9 @@ const StepDesignHomepageMenu = () => {
subtitle={ currentStep?.subheading }
/>
<div className="theme-styles-menu__list">
{!globalStyle &&
<LivePreviewSkeleton count={Math.floor(THEME_VARIATIONS)}
className={'homepage_preview__list__item'} viewportWidth={1200} /> }
officiallygod marked this conversation as resolved.
Show resolved Hide resolved
{ globalStyle && buildHomepagePreviews() }
</div>
</div>
Expand Down
17 changes: 14 additions & 3 deletions src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -48,6 +49,10 @@ const StepDesignThemeStylesMenu = () => {
};
}, [] );

const THEME_VARIATIONS
= window.nfdOnboarding?.themeStepData[currentStep?.patternId]?.styles
* window.nfdOnboarding?.themeStepData[currentStep?.patternId]?.patterns;

const {
setDrawerActiveView,
setIsDrawerOpened,
Expand Down Expand Up @@ -118,7 +123,7 @@ const StepDesignThemeStylesMenu = () => {
);
} );
};

return (
<DesignStateHandler>
<CommonLayout>
Expand All @@ -128,15 +133,21 @@ const StepDesignThemeStylesMenu = () => {
subtitle={ currentStep?.subheading }
/>
<div className="theme-styles-menu__list">
{!globalStyles &&
<LivePreviewSkeleton count={Math.floor(THEME_VARIATIONS/2)}
className={'theme-styles-menu__list__item'} viewportWidth={900}/>}
{ globalStyles &&
buildPreviews().slice( 0, MAX_PREVIEWS_PER_ROW ) }
buildPreviews().slice( 0, MAX_PREVIEWS_PER_ROW )}
</div>
<div className="theme-styles-menu__list">
{!globalStyles &&
<LivePreviewSkeleton count={Math.floor(THEME_VARIATIONS/2)}
className={'theme-styles-menu__list__item'} viewportWidth={900} />}
officiallygod marked this conversation as resolved.
Show resolved Hide resolved
{ globalStyles &&
buildPreviews().slice(
MAX_PREVIEWS_PER_ROW,
globalStyles.length
) }
)}
</div>
</div>
</CommonLayout>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -220,6 +220,13 @@ const StepDesignThemeStylesPreview = () => {
</div>
</div>
<div className="theme-styles-preview__live-preview-container">
{ !pattern && (
<LivePreview
blockGrammer={''}
styling={'custom'}
viewportWidth={1300}
/>
)}
officiallygod marked this conversation as resolved.
Show resolved Hide resolved
{ pattern && (
<LivePreview
blockGrammer={ pattern }
Expand Down
1 change: 1 addition & 0 deletions src/OnboardingSPA/store/actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export function setRuntime( runtime ) {
siteUrl: runtime.siteUrl,
migrated: true,
currentFlow: runtime.currentFlow ?? 'wp-setup',
themeStepData: runtime.themeStepData,
};
return {
type: 'SET_RUNTIME',
Expand Down