fix: cys assembler font loading optimisations (#40458)
* fix: cys assembler font loading optimisations * lint
This commit is contained in:
RJ
GitHub
parent
4ac861d94c
commit
ceb5f942ea
|
|
@ -45,6 +45,7 @@ import { addFilter } from '@wordpress/hooks';
|
|||
import { CustomizeStoreComponent } from '../types';
|
||||
import { Layout } from './layout';
|
||||
import './style.scss';
|
||||
import { PreloadFonts } from './preload-fonts';
|
||||
|
||||
const { RouterProvider } = unlock( routerPrivateApis );
|
||||
|
||||
|
|
@ -149,6 +150,7 @@ export const AssemblerHub: CustomizeStoreComponent = ( props ) => {
|
|||
<RouterProvider>
|
||||
<Layout />
|
||||
</RouterProvider>
|
||||
<PreloadFonts />
|
||||
</GlobalStylesProvider>
|
||||
</ShortcutProvider>
|
||||
</CustomizeStoreContext.Provider>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { FONT_PAIRINGS } from './sidebar/global-styles/font-pairing-variations/constants';
|
||||
import { FontFamiliesLoader } from './sidebar/global-styles/font-pairing-variations/font-families-loader';
|
||||
|
||||
export const PreloadFonts = () => {
|
||||
const allFontChoices = FONT_PAIRINGS.map(
|
||||
( fontPair ) => fontPair?.settings?.typography?.fontFamilies?.theme
|
||||
);
|
||||
const fontFamilies = allFontChoices.map( ( fontPair ) => {
|
||||
return [
|
||||
...fontPair.map( ( font ) => {
|
||||
return {
|
||||
...font,
|
||||
name: font.fontFamily,
|
||||
};
|
||||
} ),
|
||||
];
|
||||
} );
|
||||
|
||||
return (
|
||||
<>
|
||||
{ fontFamilies.map( ( fontPair ) => (
|
||||
<FontFamiliesLoader
|
||||
fontFamilies={ fontPair }
|
||||
key={ fontPair.map( ( font ) => font.slug ).join( '-' ) }
|
||||
preload
|
||||
/>
|
||||
) ) }
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -15,14 +15,21 @@ export type FontFamily = {
|
|||
type Props = {
|
||||
fontFamilies: FontFamily[];
|
||||
onLoad?: () => void;
|
||||
preload?: boolean;
|
||||
};
|
||||
|
||||
// See https://developers.google.com/fonts/docs/css2
|
||||
const FONT_API_BASE = 'https://fonts-api.wp.com/css2';
|
||||
// this is the actual host that the .woff files are at, the above is the one for the .css files with the @font-face declarations
|
||||
const FONT_HOST = 'https://fonts.wp.com'; // used for preconnecting so that fonts can get loaded faster
|
||||
|
||||
const FONT_AXIS = 'ital,wght@0,400;0,700;1,400;1,700';
|
||||
|
||||
export const FontFamiliesLoader = ( { fontFamilies, onLoad }: Props ) => {
|
||||
export const FontFamiliesLoader = ( {
|
||||
fontFamilies,
|
||||
onLoad,
|
||||
preload = false,
|
||||
}: Props ) => {
|
||||
const params = useMemo(
|
||||
() =>
|
||||
new URLSearchParams( [
|
||||
|
|
@ -31,8 +38,14 @@ export const FontFamiliesLoader = ( { fontFamilies, onLoad }: Props ) => {
|
|||
`${ fontFamily }:${ FONT_AXIS }`,
|
||||
] ),
|
||||
[ 'display', 'swap' ],
|
||||
[
|
||||
'text', // optimise the fonts fetched by subsetting to only the characters used in the display
|
||||
`${ fontFamilies
|
||||
.map( ( { fontFamily } ) => fontFamily )
|
||||
.join( ' ' ) }`,
|
||||
],
|
||||
] ),
|
||||
fontFamilies
|
||||
[ fontFamilies ]
|
||||
);
|
||||
|
||||
if ( ! params.getAll( 'family' ).length ) {
|
||||
|
|
@ -40,12 +53,16 @@ export const FontFamiliesLoader = ( { fontFamilies, onLoad }: Props ) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href={ `${ FONT_API_BASE }?${ params }` }
|
||||
onLoad={ onLoad }
|
||||
onError={ onLoad }
|
||||
/>
|
||||
<>
|
||||
{ preload ? <link rel="preconnect" href={ FONT_HOST } /> : null }
|
||||
<link
|
||||
rel={ preload ? 'preload' : 'stylesheet' }
|
||||
type="text/css"
|
||||
as={ preload ? 'style' : undefined }
|
||||
href={ `${ FONT_API_BASE }?${ params }` }
|
||||
onLoad={ onLoad }
|
||||
onError={ onLoad }
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@ export const FontPairing = () => {
|
|||
columns={ 2 }
|
||||
gap={ 3 }
|
||||
className="woocommerce-customize-store_font-pairing-container"
|
||||
style={ {
|
||||
opacity: 0,
|
||||
animation: 'containerFadeIn 1000ms ease-in-out forwards',
|
||||
} }
|
||||
>
|
||||
{ FONT_PAIRINGS.map( ( variation, index ) => (
|
||||
<VariationContainer key={ index } variation={ variation }>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import {
|
|||
__experimentalVStack as VStack,
|
||||
} from '@wordpress/components';
|
||||
import { useResizeObserver, useViewportMatch } from '@wordpress/compose';
|
||||
import { useMemo, useState } from '@wordpress/element';
|
||||
import { useMemo } from '@wordpress/element';
|
||||
import {
|
||||
privateApis as blockEditorPrivateApis,
|
||||
// @ts-ignore no types exist yet.
|
||||
|
|
@ -19,13 +19,12 @@ import {
|
|||
// @ts-ignore No types for this exist yet.
|
||||
import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
|
||||
import { GlobalStylesVariationIframe } from '../global-styles-variation-iframe';
|
||||
import { FontFamiliesLoader, FontFamily } from './font-families-loader';
|
||||
import { FontFamily } from './font-families-loader';
|
||||
import {
|
||||
FONT_PREVIEW_LARGE_WIDTH,
|
||||
FONT_PREVIEW_LARGE_HEIGHT,
|
||||
FONT_PREVIEW_WIDTH,
|
||||
FONT_PREVIEW_HEIGHT,
|
||||
SYSTEM_FONT_SLUG,
|
||||
} from './constants';
|
||||
|
||||
const { useGlobalStyle, useGlobalSetting } = unlock( blockEditorPrivateApis );
|
||||
|
|
@ -75,10 +74,6 @@ export const FontPairingVariationPreview = () => {
|
|||
: FONT_PREVIEW_HEIGHT;
|
||||
const ratio = width ? width / defaultWidth : 1;
|
||||
const normalizedHeight = Math.ceil( defaultHeight * ratio );
|
||||
const externalFontFamilies = fontFamilies.filter(
|
||||
( { slug } ) => slug !== SYSTEM_FONT_SLUG
|
||||
);
|
||||
const [ isLoaded, setIsLoaded ] = useState( ! externalFontFamilies.length );
|
||||
const getFontFamilyName = ( targetFontFamily: string ) => {
|
||||
const fontFamily = fontFamilies.find(
|
||||
( { fontFamily: _fontFamily } ) => _fontFamily === targetFontFamily
|
||||
|
|
@ -96,8 +91,6 @@ export const FontPairingVariationPreview = () => {
|
|||
[ headingFontFamily, fontFamilies ]
|
||||
);
|
||||
|
||||
const handleOnLoad = () => setIsLoaded( true );
|
||||
|
||||
return (
|
||||
<GlobalStylesVariationIframe
|
||||
width={ width }
|
||||
|
|
@ -118,7 +111,7 @@ export const FontPairingVariationPreview = () => {
|
|||
style={ {
|
||||
height: '100%',
|
||||
overflow: 'hidden',
|
||||
opacity: isLoaded ? 1 : 0,
|
||||
opacity: 1,
|
||||
} }
|
||||
>
|
||||
<HStack
|
||||
|
|
@ -166,10 +159,6 @@ export const FontPairingVariationPreview = () => {
|
|||
</HStack>
|
||||
</div>
|
||||
</div>
|
||||
<FontFamiliesLoader
|
||||
fontFamilies={ externalFontFamilies }
|
||||
onLoad={ handleOnLoad }
|
||||
/>
|
||||
</>
|
||||
</GlobalStylesVariationIframe>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -39,7 +39,13 @@ const SidebarNavigationScreenColorPaletteContent = () => {
|
|||
// rendering the iframe. Without this, the iframe previews will not render
|
||||
// in mobile viewport sizes, where the editor canvas is hidden.
|
||||
return (
|
||||
<div className="woocommerce-customize-store_sidebar-color-content">
|
||||
<div
|
||||
className="woocommerce-customize-store_sidebar-color-content"
|
||||
style={ {
|
||||
opacity: 0,
|
||||
animation: 'containerFadeIn 1000ms ease-in-out forwards',
|
||||
} }
|
||||
>
|
||||
<BlockEditorProvider
|
||||
settings={ storedSettings }
|
||||
onChange={ noop }
|
||||
|
|
|
|||
|
|
@ -43,6 +43,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes containerFadeIn {
|
||||
0%,
|
||||
80% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-profile-wizard__step-assemblerHub {
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: fix
|
||||
|
||||
CYS: Optimised loading and animation of font variation containers
|
||||
Loading…
Reference in New Issue