Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add customize store - fonts (#40082) 

* Add customize store fonts

* Add changefile(s) from automation for the following project(s): woocommerce

* Add inline comment for font-hosting note

* Update plugins/woocommerce-admin/client/customize-store/assembler-hub/auto-block-preview.tsx

Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>

* Remove duplicated External dependencies

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>
This commit is contained in:
Chi-Hsuan Huang 2023-09-13 16:01:28 +08:00 committed by GitHub
parent b37099ead3
commit 4495a6a49e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 871 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
plugins/woocommerce-admin/client/customize-store/assembler-hub/auto-block-preview.tsx
View File

@ -11,14 +11,23 @@ import { Disabled } from '@wordpress/components';
import {
__unstableEditorStyles as EditorStyles,
__unstableIframe as Iframe,
privateApis as blockEditorPrivateApis,
BlockList,
// @ts-ignore No types for this exist yet.
} from '@wordpress/block-editor';
// @ts-ignore No types for this exist yet.
import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
import { noop } from 'lodash';
/**
* Internal dependencies
*/
import { LogoBlockContext } from './logo-block-context';
import {
FontFamiliesLoader,
FontFamily,
} from './sidebar/global-styles/font-pairing-variations/font-families-loader';
import { SYSTEM_FONT_SLUG } from './sidebar/global-styles/font-pairing-variations/constants';
const MAX_HEIGHT = 2000;
// @ts-ignore No types for this exist yet.
@ -27,6 +36,8 @@ const { Provider: DisabledProvider } = Disabled.Context;
// This is used to avoid rendering the block list if the sizes change.
let MemoizedBlockList: typeof BlockList | undefined;
const { useGlobalSetting } = unlock( blockEditorPrivateApis );
export type ScaledBlockPreviewProps = {
viewportWidth?: number;
containerWidth: number;
@ -48,6 +59,13 @@ function ScaledBlockPreview( {
onClickNavigationItem,
}: ScaledBlockPreviewProps ) {
const { setLogoBlock } = useContext( LogoBlockContext );
const [ fontFamilies ] = useGlobalSetting(
'typography.fontFamilies.theme'
) as [ FontFamily[] ];
const externalFontFamilies = fontFamilies.filter(
( { slug } ) => slug !== SYSTEM_FONT_SLUG
);
if ( ! viewportWidth ) {
viewportWidth = containerWidth;
@ -254,6 +272,13 @@ function ScaledBlockPreview( {
</style>
{ contentResizeListener }
<MemoizedBlockList renderAppender={ false } />
{ /* Only load font families when there are two font families (font-paring selection). Otherwise, it is not needed. */ }
{ externalFontFamilies.length === 2 && (
<FontFamiliesLoader
fontFamilies={ externalFontFamilies }
onLoad={ noop }
/>
) }
</Iframe>
</DisabledProvider>
);

503
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/constants.ts Normal file
View File

@ -0,0 +1,503 @@
export const FONT_PREVIEW_LARGE_WIDTH = 136;
export const FONT_PREVIEW_LARGE_HEIGHT = 106;
export const FONT_PREVIEW_WIDTH = 120;
export const FONT_PREVIEW_HEIGHT = 74;
export const SYSTEM_FONT_SLUG = 'system-font';
// Generated from /wpcom/v2/sites/{site_id}/global-styles-variation/font-pairings
// TODO: Consider creating an API endpoint for this data
export const FONT_PAIRINGS = [
{
title: 'Bodoni Moda + Overpass',
version: 2,
settings: {
typography: {
fontFamilies: {
theme: [
{
fontFamily: 'Bodoni Moda',
slug: 'bodoni-moda',
},
{
fontFamily: 'Overpass',
slug: 'overpass',
},
],
},
},
},
styles: {
elements: {
button: {
typography: {
fontFamily: 'var(--wp--preset--font-family--overpass)',
fontWeight: '400',
lineHeight: '1',
},
},
heading: {
typography: {
fontFamily:
'var(--wp--preset--font-family--bodoni-moda)',
fontStyle: 'normal',
fontWeight: '400',
},
},
},
blocks: {
'core/site-title': {
typography: {
fontFamily:
'var(--wp--preset--font-family--bodoni-moda)',
},
},
'core/post-navigation-link': {
typography: {
fontFamily:
'var(--wp--preset--font-family--bodoni-moda)',
},
},
},
typography: {
fontFamily: 'var(--wp--preset--font-family--overpass)',
fontSize: 'var(--wp--preset--font-size--medium)',
fontStyle: 'normal',
fontWeight: '300',
lineHeight: '1.6',
},
},
},
{
title: 'Commissioner + Crimson Pro',
version: 2,
settings: {
typography: {
fontFamilies: {
theme: [
{
fontFamily: 'Commissioner',
slug: 'commissioner',
},
{
fontFamily: 'Crimson Pro',
slug: 'crimson-pro',
},
],
},
},
},
styles: {
elements: {
button: {
typography: {
fontFamily:
'var(--wp--preset--font-family--commissioner)',
fontWeight: '400',
lineHeight: '1',
},
},
heading: {
typography: {
fontFamily:
'var(--wp--preset--font-family--commissioner)',
fontStyle: 'normal',
fontWeight: '300',
},
},
},
blocks: {
'core/site-title': {
typography: {
fontFamily:
'var(--wp--preset--font-family--commissioner)',
fontWeight: '300',
},
},
'core/post-navigation-link': {
typography: {
fontFamily:
'var(--wp--preset--font-family--commissioner)',
},
},
},
typography: {
fontFamily: 'var(--wp--preset--font-family--crimson-pro)',
fontSize: 'var(--wp--preset--font-size--medium)',
fontStyle: 'normal',
fontWeight: '400',
lineHeight: '1.6',
},
},
},
{
title: 'Libre Baskerville + DM Sans',
version: 2,
settings: {
typography: {
fontFamilies: {
theme: [
{
fontFamily: 'Libre Baskerville',
slug: 'libre-baskerville',
},
{
fontFamily: 'DM Sans',
slug: 'dm-sans',
},
],
},
},
},
styles: {
elements: {
button: {
typography: {
fontFamily: 'var(--wp--preset--font-family--dm-sans)',
fontWeight: '400',
lineHeight: '1',
},
},
heading: {
typography: {
fontFamily:
'var(--wp--preset--font-family--libre-baskerville)',
fontStyle: 'normal',
fontWeight: '700',
},
},
},
blocks: {
'core/site-title': {
typography: {
fontFamily:
'var(--wp--preset--font-family--libre-baskerville)',
},
},
'core/post-navigation-link': {
typography: {
fontFamily:
'var(--wp--preset--font-family--libre-baskerville)',
},
},
},
typography: {
fontFamily: 'var(--wp--preset--font-family--dm-sans)',
fontSize: 'var(--wp--preset--font-size--small)',
fontStyle: 'normal',
fontWeight: '400',
lineHeight: '1.6',
},
},
},
{
title: 'Libre Franklin + EB Garamond',
version: 2,
settings: {
typography: {
fontFamilies: {
theme: [
{
fontFamily: 'Libre Franklin',
slug: 'libre-franklin',
},
{
fontFamily: 'EB Garamond',
slug: 'eb-garamond',
},
],
},
},
},
styles: {
elements: {
button: {
typography: {
fontFamily:
'var(--wp--preset--font-family--libre-franklin)',
fontSize: 'var(--wp--preset--font-size--small)',
fontWeight: '400',
lineHeight: '1',
},
},
heading: {
typography: {
fontFamily:
'var(--wp--preset--font-family--libre-franklin)',
fontStyle: 'normal',
fontWeight: '700',
},
},
},
blocks: {
'core/site-title': {
typography: {
fontFamily:
'var(--wp--preset--font-family--libre-franklin)',
fontWeight: '500',
},
},
'core/post-navigation-link': {
typography: {
fontFamily:
'var(--wp--preset--font-family--libre-franklin)',
},
},
},
typography: {
fontFamily: 'var(--wp--preset--font-family--eb-garamond)',
fontSize: 'var(--wp--preset--font-size--medium)',
fontStyle: 'normal',
fontWeight: '400',
lineHeight: '1.6',
},
},
},
{
title: 'Montserrat + Arvo',
version: 2,
settings: {
typography: {
fontFamilies: {
theme: [
{
fontFamily: 'Montserrat',
slug: 'montserrat',
},
{
fontFamily: 'Arvo',
slug: 'arvo',
},
],
},
},
},
styles: {
elements: {
button: {
typography: {
fontFamily:
'var(--wp--preset--font-family--montserrat)',
fontStyle: 'normal',
fontWeight: '500',
},
},
heading: {
typography: {
fontFamily:
'var(--wp--preset--font-family--montserrat)',
fontStyle: 'normal',
fontWeight: '700',
lineHeight: '1.4',
},
},
},
blocks: {
'core/site-title': {
typography: {
fontFamily:
'var(--wp--preset--font-family--montserrat)',
fontWeight: '700',
},
},
'core/post-navigation-link': {
typography: {
fontFamily:
'var(--wp--preset--font-family--montserrat)',
},
},
},
typography: {
fontFamily: 'var(--wp--preset--font-family--arvo)',
fontSize: 'var(--wp--preset--font-size--small)',
fontStyle: 'normal',
fontWeight: '400',
lineHeight: '1.6',
},
},
},
{
title: 'Playfair Display + Fira Sans',
version: 2,
settings: {
typography: {
fontFamilies: {
theme: [
{
fontFamily: 'Playfair Display',
slug: 'playfair-display',
},
{
fontFamily: 'Fira Sans',
slug: 'fira-sans',
},
],
},
},
},
styles: {
elements: {
button: {
typography: {
fontFamily: 'var(--wp--preset--font-family--fira-sans)',
fontWeight: '400',
lineHeight: '1',
},
},
heading: {
typography: {
fontFamily:
'var(--wp--preset--font-family--playfair-display)',
fontStyle: 'italic',
fontWeight: '400',
},
},
},
blocks: {
'core/site-title': {
typography: {
fontFamily:
'var(--wp--preset--font-family--playfair-display)',
fontStyle: 'italic',
fontWeight: '400',
},
},
'core/post-navigation-link': {
typography: {
fontFamily:
'var(--wp--preset--font-family--playfair-display)',
fontStyle: 'italic',
fontWeight: '400',
},
},
},
typography: {
fontFamily: 'var(--wp--preset--font-family--fira-sans)',
fontSize: 'var(--wp--preset--font-size--medium)',
fontStyle: 'normal',
fontWeight: '400',
lineHeight: '1.6',
},
},
},
{
title: 'Rubik + Inter',
version: 2,
settings: {
typography: {
fontFamilies: {
theme: [
{
fontFamily: 'Rubik',
slug: 'rubik',
},
{
fontFamily: 'Inter',
slug: 'inter',
},
],
},
},
},
styles: {
elements: {
button: {
typography: {
fontFamily: 'var(--wp--preset--font-family--inter)',
fontWeight: '400',
lineHeight: '1',
},
},
heading: {
typography: {
fontFamily: 'var(--wp--preset--font-family--rubik)',
fontStyle: 'normal',
fontWeight: '800',
},
},
},
blocks: {
'core/site-title': {
typography: {
fontFamily: 'var(--wp--preset--font-family--rubik)',
fontWeight: '800',
},
},
'core/post-navigation-link': {
typography: {
fontFamily: 'var(--wp--preset--font-family--rubik)',
},
},
},
typography: {
fontFamily: 'var(--wp--preset--font-family--inter)',
fontSize: 'var(--wp--preset--font-size--medium)',
fontStyle: 'normal',
fontWeight: '400',
lineHeight: '1.6',
},
},
},
{
title: 'Space Mono + Roboto',
version: 2,
settings: {
typography: {
fontFamilies: {
theme: [
{
fontFamily: 'Space Mono',
slug: 'space-mono',
},
{
fontFamily: 'Roboto',
slug: 'roboto',
},
],
},
},
},
styles: {
elements: {
button: {
typography: {
fontFamily: 'var(--wp--preset--font-family--roboto)',
fontWeight: '400',
lineHeight: '1',
},
},
heading: {
typography: {
fontFamily:
'var(--wp--preset--font-family--space-mono)',
fontStyle: 'normal',
fontWeight: '400',
lineHeight: '1.15',
},
},
},
blocks: {
'core/site-title': {
typography: {
fontFamily:
'var(--wp--preset--font-family--space-mono)',
fontStyle: 'normal',
fontWeight: '400',
},
},
'core/post-navigation-link': {
typography: {
fontFamily:
'var(--wp--preset--font-family--space-mono)',
},
},
},
typography: {
fontFamily: 'var(--wp--preset--font-family--roboto)',
fontSize: 'var(--wp--preset--font-size--small)',
fontStyle: 'normal',
fontWeight: '400',
lineHeight: '1.6',
},
},
},
];

51
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/font-families-loader.tsx Normal file
View File

@ -0,0 +1,51 @@
// TODO: We should Download webfonts and host them locally on a site before launching CYS in Core.
// Load font families from wp.com.
/**
* External dependencies
*/
import { useMemo } from '@wordpress/element';
export type FontFamily = {
fontFamily: string;
name: string;
slug: string;
};
type Props = {
fontFamilies: FontFamily[];
onLoad?: () => void;
};
// See https://developers.google.com/fonts/docs/css2
const FONT_API_BASE = 'https://fonts-api.wp.com/css2';
const FONT_AXIS = 'ital,wght@0,400;0,700;1,400;1,700';
export const FontFamiliesLoader = ( { fontFamilies, onLoad }: Props ) => {
const params = useMemo(
() =>
new URLSearchParams( [
...fontFamilies.map( ( { fontFamily } ) => [
'family',
`${ fontFamily }:${ FONT_AXIS }`,
] ),
[ 'display', 'swap' ],
] ),
fontFamilies
);
if ( ! params.getAll( 'family' ).length ) {
return null;
}
return (
<link
rel="stylesheet"
type="text/css"
href={ `${ FONT_API_BASE }?${ params }` }
onLoad={ onLoad }
onError={ onLoad }
/>
);
};

30
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/index.tsx Normal file
View File

@ -0,0 +1,30 @@
/* eslint-disable @woocommerce/dependency-group */
/* eslint-disable @typescript-eslint/ban-ts-comment */
/**
* External dependencies
*/
// @ts-ignore No types for this exist yet.
import { __experimentalGrid as Grid } from '@wordpress/components';
/**
* Internal dependencies
*/
import { FONT_PAIRINGS } from './constants';
import { VariationContainer } from '../variation-container';
import { FontPairingVariationPreview } from './preview';
export const FontPairing = () => {
return (
<Grid
columns={ 2 }
gap={ 3 }
className="woocommerce-customize-store_font-pairing-container"
>
{ FONT_PAIRINGS.map( ( variation, index ) => (
<VariationContainer key={ index } variation={ variation }>
<FontPairingVariationPreview />
</VariationContainer>
) ) }
</Grid>
);
};

176
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/preview.tsx Normal file
View File

@ -0,0 +1,176 @@
// Reference: https://github.com/Automattic/wp-calypso/blob/d3c9b16fb99ce242f61baa21119b7c20f8823be6/packages/global-styles/src/components/font-pairing-variations/preview.tsx
/* eslint-disable @woocommerce/dependency-group */
/* eslint-disable @typescript-eslint/ban-ts-comment */
/**
* External dependencies
*/
import {
// @ts-ignore No types for this exist yet.
__experimentalHStack as HStack,
// @ts-ignore No types for this exist yet.
__experimentalVStack as VStack,
} from '@wordpress/components';
import { useResizeObserver, useViewportMatch } from '@wordpress/compose';
import { useMemo, useState } from '@wordpress/element';
import {
privateApis as blockEditorPrivateApis,
// @ts-ignore no types exist yet.
} from '@wordpress/block-editor';
// @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 {
FONT_PREVIEW_LARGE_WIDTH,
FONT_PREVIEW_LARGE_HEIGHT,
FONT_PREVIEW_WIDTH,
FONT_PREVIEW_HEIGHT,
SYSTEM_FONT_SLUG,
} from './constants';
const { useGlobalStyle, useGlobalSetting } = unlock( blockEditorPrivateApis );
const DEFAULT_LARGE_FONT_STYLES: React.CSSProperties = {
fontSize: '13vw', // 18px for min-width wide breakpoint and 15px for max-width wide
lineHeight: '20px',
color: '#000000',
};
export const FontPairingVariationPreview = () => {
const [ fontFamilies ] = useGlobalSetting(
'typography.fontFamilies.theme'
) as [ FontFamily[] ];
const [ textFontFamily = 'serif' ] = useGlobalStyle(
'typography.fontFamily'
);
const [ textFontStyle = 'normal' ] = useGlobalStyle(
'typography.fontStyle'
);
const [ textLetterSpacing = '-0.15px' ] = useGlobalStyle(
'typography.letterSpacing'
);
const [ textFontWeight = 400 ] = useGlobalStyle( 'typography.fontWeight' );
const [ headingFontFamily = textFontFamily ] = useGlobalStyle(
'elements.heading.typography.fontFamily'
);
const [ headingFontStyle = textFontStyle ] = useGlobalStyle(
'elements.heading.typography.fontStyle'
);
const [ headingFontWeight = textFontWeight ] = useGlobalStyle(
'elements.heading.typography.fontWeight'
);
const [ headingLetterSpacing = textLetterSpacing ] = useGlobalStyle(
'elements.heading.typography.letterSpacing'
);
const [ containerResizeListener, { width } ] = useResizeObserver();
const isDesktop = useViewportMatch( 'large' );
const defaultWidth = isDesktop
? FONT_PREVIEW_LARGE_WIDTH
: FONT_PREVIEW_WIDTH;
const defaultHeight = isDesktop
? FONT_PREVIEW_LARGE_HEIGHT
: 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
);
return fontFamily?.name || fontFamily?.fontFamily || targetFontFamily;
};
const textFontFamilyName = useMemo(
() => getFontFamilyName( textFontFamily ),
[ textFontFamily, fontFamilies ]
);
const headingFontFamilyName = useMemo(
() => getFontFamilyName( headingFontFamily ),
[ headingFontFamily, fontFamilies ]
);
const handleOnLoad = () => setIsLoaded( true );
return (
<GlobalStylesVariationIframe
width={ width }
height={ normalizedHeight }
containerResizeListener={ containerResizeListener }
>
<>
<div
style={ {
// Apply the normalized height only when the width is available
height: width ? normalizedHeight : 0,
width: '100%',
background: 'white',
cursor: 'pointer',
} }
>
<div
style={ {
height: '100%',
overflow: 'hidden',
opacity: isLoaded ? 1 : 0,
} }
>
<HStack
spacing={ 10 * ratio }
justify="flex-start"
style={ {
height: '100%',
overflow: 'hidden',
} }
>
<VStack
spacing={ 1 }
style={ {
margin: '10px',
width: '100%',
textAlign: isDesktop ? 'center' : 'left',
} }
>
<div
aria-label={ headingFontFamilyName }
style={ {
...DEFAULT_LARGE_FONT_STYLES,
letterSpacing: headingLetterSpacing,
fontWeight: headingFontWeight,
fontFamily: headingFontFamily,
fontStyle: headingFontStyle,
} }
>
{ headingFontFamilyName }
</div>
<div
aria-label={ textFontFamilyName }
style={ {
...DEFAULT_LARGE_FONT_STYLES,
fontSize: '13px',
letterSpacing: textLetterSpacing,
fontWeight: textFontWeight,
fontFamily: textFontFamily,
fontStyle: textFontStyle,
} }
>
{ textFontFamilyName }
</div>
</VStack>
</HStack>
</div>
</div>
<FontFamiliesLoader
fontFamilies={ externalFontFamilies }
onLoad={ handleOnLoad }
/>
</>
</GlobalStylesVariationIframe>
);
};

1
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/index.ts
View File

@ -1,2 +1,3 @@
export { ColorPalette } from './color-palette-variations';
export { ColorPanel } from './color-panel';
export { FontPairing } from './font-pairing-variations';

23
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/variation-container.jsx
View File

@ -9,10 +9,9 @@ import { __, sprintf } from '@wordpress/i18n';
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
import { mergeBaseAndUserConfigs } from '@wordpress/edit-site/build-module/components/global-styles/global-styles-provider';
import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
import { isEqual } from 'lodash';
const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
blockEditorPrivateApis
);
const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
export const VariationContainer = ( { variation, children } ) => {
const { base, user, setUserConfig } = useContext( GlobalStylesContext );
@ -31,8 +30,14 @@ export const VariationContainer = ( { variation, children } ) => {
const selectVariation = () => {
setUserConfig( () => {
return {
settings: variation.settings,
styles: variation.styles,
settings: mergeBaseAndUserConfigs(
user.settings,
variation.settings
),
styles: mergeBaseAndUserConfigs(
user.styles,
variation.styles
),
};
} );
};
@ -45,7 +50,13 @@ export const VariationContainer = ( { variation, children } ) => {
};
const isActive = useMemo( () => {
return areGlobalStyleConfigsEqual( user, variation );
if ( variation.settings.color ) {
return isEqual( variation.settings.color, user.settings.color );
}
return isEqual(
variation.settings.typography,
user.settings.typography
);
}, [ user, variation ] );
let label = variation?.title;

31
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-typography.tsx
View File

@ -1,17 +1,36 @@
/* eslint-disable @woocommerce/dependency-group */
/* eslint-disable @typescript-eslint/ban-ts-comment */
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { createInterpolateElement } from '@wordpress/element';
import { Link } from '@woocommerce/components';
import { useSelect } from '@wordpress/data';
// @ts-ignore no types exist yet.
import { BlockEditorProvider } from '@wordpress/block-editor';
import { noop } from 'lodash';
// @ts-ignore No types for this exist yet.
import { store as editSiteStore } from '@wordpress/edit-site/build-module/store';
// @ts-ignore No types for this exist yet.
import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
/**
* Internal dependencies
*/
import { SidebarNavigationScreen } from './sidebar-navigation-screen';
import { ADMIN_URL } from '~/utils/admin-settings';
import { FontPairing } from './global-styles';
export const SidebarNavigationScreenTypography = () => {
const { storedSettings } = useSelect( ( select ) => {
const { getSettings } = unlock( select( editSiteStore ) );
return {
storedSettings: getSettings( false ),
};
}, [] );
return (
<SidebarNavigationScreen
title={ __( 'Change your font', 'woocommerce' ) }
@ -36,9 +55,15 @@ export const SidebarNavigationScreenTypography = () => {
}
) }
content={
<>
<div className="edit-site-sidebar-navigation-screen-patterns__group-header"></div>
</>
<div className="woocommerce-customize-store_sidebar-typography-content">
<BlockEditorProvider
settings={ storedSettings }
onChange={ noop }
onInput={ noop }
>
<FontPairing />
</BlockEditorProvider>
</div>
}
/>
);

51
plugins/woocommerce-admin/client/customize-store/assembler-hub/style.scss
View File

@ -357,6 +357,42 @@
.woocommerce-customize-store_sidebar-color-content {
width: 324px;
.woocommerce-customize-store_global-styles-variations_item {
border-radius: 2px;
padding: 2.5px;
.woocommerce-customize-store_global-styles-variations_item-preview {
border: 1px solid #dcdcde;
background: #fff;
}
&:hover,
&.is-active {
box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color), 0 0 0 2.5px #fff;
}
}
}
.woocommerce-customize-store_sidebar-typography-content {
width: 324px;
.woocommerce-customize-store_global-styles-variations_item {
border-radius: 2px;
border: 1px solid #dcdcde;
background: #fff;
&:hover,
&.is-active {
border-radius: 2px;
border: 1.5px solid var(--wp-admin-theme-color);
background: #fff;
}
}
.global-styles-variation-container__iframe {
box-shadow: none;
}
}
/* Preview Canvas */
@ -473,18 +509,3 @@
margin-left: 12px;
}
}
.woocommerce-customize-store_global-styles-variations_item {
border-radius: 2px;
padding: 2.5px;
.woocommerce-customize-store_global-styles-variations_item-preview {
border: 1px solid #dcdcde;
background: #fff;
}
&:hover,
&.is-active {
box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color), 0 0 0 2.5px #fff;
}
}

4
plugins/woocommerce/changelog/add-cys-fonts Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: add
Add customize store - fonts