From 3366ecaabe13096faa4a6d88c2af15fa54ded31a Mon Sep 17 00:00:00 2001 From: scruffian Date: Tue, 28 Nov 2023 20:01:46 -0500 Subject: [PATCH 01/48] Add colors and typography to the styles tab --- .../src/components/global-styles/preview.js | 111 +++++++++------- .../style-variations-container.js | 124 ++++++++++++++++-- .../src/components/global-styles/style.scss | 4 + .../index.js | 2 +- 4 files changed, 182 insertions(+), 59 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js index 4e48c7ab76e760..0fccf53fae0764 100644 --- a/packages/edit-site/src/components/global-styles/preview.js +++ b/packages/edit-site/src/components/global-styles/preview.js @@ -71,7 +71,13 @@ const THROTTLE_OPTIONS = { trailing: true, }; -const StylesPreview = ( { label, isFocused, withHoverView } ) => { +const StylesPreview = ( { + label, + isFocused, + withHoverView, + isColor = true, + isFont = true, +} ) => { const [ fontWeight ] = useGlobalStyle( 'typography.fontWeight' ); const [ fontFamily = 'serif' ] = useGlobalStyle( 'typography.fontFamily' ); const [ headingFontFamily = fontFamily ] = useGlobalStyle( @@ -198,53 +204,62 @@ const StylesPreview = ( { label, isFocused, withHoverView } ) => { overflow: 'hidden', } } > - - Aa - - - { highlightedColors.map( - ( { slug, color }, index ) => ( - - ) - ) } - + { isFont && ( + + Aa + + ) } + { isColor && ( + + { highlightedColors.map( + ( { slug, color }, index ) => ( + + ) + ) } + + ) } { @@ -93,6 +96,8 @@ function Variation( { variation } ) { label={ variation?.title } isFocused={ isFocused } withHoverView + isColor={ isColor } + isFont={ isFont } /> @@ -122,14 +127,113 @@ export default function StyleVariationsContainer() { ]; }, [ variations ] ); + const { user } = useContext( GlobalStylesContext ); + + const filterObjectByProperty = ( object, property ) => { + const newObject = {}; + Object.keys( object ).forEach( ( key ) => { + if ( key === property ) { + newObject[ key ] = object[ key ]; + } else if ( typeof object[ key ] === 'object' ) { + const newFilter = filterObjectByProperty( + object[ key ], + property + ); + if ( Object.keys( newFilter ).length ) { + newObject[ key ] = newFilter; + } + } + } ); + return newObject; + }; + + const removePropertyFromObject = ( object, property ) => { + for ( const key in object ) { + if ( key === property ) { + delete object[ key ]; + } else if ( typeof object[ key ] === 'object' ) { + removePropertyFromObject( object[ key ], property ); + } + } + return object; + }; + + const variationsWithOnlyTypography = + variations && + variations.map( ( variation ) => { + return filterObjectByProperty( variation, 'typography' ); + } ); + + const userSettingsWithoutTypography = removePropertyFromObject( + JSON.parse( JSON.stringify( user ) ), + 'typography' + ); + + const userSettingsWithoutColor = removePropertyFromObject( + JSON.parse( JSON.stringify( user ) ), + 'color' + ); + + const typographyVariations = + variationsWithOnlyTypography && + variationsWithOnlyTypography.map( ( variation ) => + mergeBaseAndUserConfigs( userSettingsWithoutTypography, variation ) + ); + + const variationsWithOnlyColor = + variations && + variations.map( ( variation ) => { + return filterObjectByProperty( variation, 'color' ); + } ); + + const colorVariations = + variationsWithOnlyColor && + variationsWithOnlyColor.map( ( variation ) => + mergeBaseAndUserConfigs( userSettingsWithoutColor, variation ) + ); + return ( - - { withEmptyVariation.map( ( variation, index ) => ( - - ) ) } - + <> + + { withEmptyVariation.map( ( variation, index ) => ( + + ) ) } + +
+ { __( 'Colors' ) } +
+ + { colorVariations && + colorVariations.map( ( variation, index ) => ( + + ) ) } + +
+ { __( 'Typography' ) } +
+ + { typographyVariations && + typographyVariations.map( ( variation, index ) => ( + + ) ) } + + ); } diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index f53173437d47d8..b0b7d4c2ef3d32 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -199,3 +199,7 @@ .edit-site-global-styles-sidebar__panel .block-editor-block-icon svg { fill: currentColor; } + +.edit-site-global-styles-style-variations-container { + margin-bottom: $grid-unit-40; +} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js index a064e9f587853d..ba81a71ef62bb5 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js @@ -157,7 +157,7 @@ export default function SidebarNavigationScreenGlobalStyles() { return ( <> Date: Tue, 28 Nov 2023 20:12:39 -0500 Subject: [PATCH 02/48] refactor --- .../style-variations-container.js | 107 ++++++++---------- 1 file changed, 47 insertions(+), 60 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js index 6911a1afb8e663..8e5c2410c2fbd0 100644 --- a/packages/edit-site/src/components/global-styles/style-variations-container.js +++ b/packages/edit-site/src/components/global-styles/style-variations-container.js @@ -24,6 +24,51 @@ import { mergeBaseAndUserConfigs } from './global-styles-provider'; import StylesPreview from './preview'; import { unlock } from '../../lock-unlock'; +function cloneDeep( object ) { + return ! object ? {} : JSON.parse( JSON.stringify( object ) ); +} + +const filterObjectByProperty = ( object, property ) => { + const newObject = {}; + Object.keys( object ).forEach( ( key ) => { + if ( key === property ) { + newObject[ key ] = object[ key ]; + } else if ( typeof object[ key ] === 'object' ) { + const newFilter = filterObjectByProperty( object[ key ], property ); + if ( Object.keys( newFilter ).length ) { + newObject[ key ] = newFilter; + } + } + } ); + return newObject; +}; + +const removePropertyFromObject = ( object, property ) => { + for ( const key in object ) { + if ( key === property ) { + delete object[ key ]; + } else if ( typeof object[ key ] === 'object' ) { + removePropertyFromObject( object[ key ], property ); + } + } + return object; +}; + +const getVariationsByType = ( user, variations, type ) => { + const userSettingsWithoutType = removePropertyFromObject( + cloneDeep( user ), + type + ); + + const variationsWithOnlyType = variations.map( ( variation ) => { + return filterObjectByProperty( variation, type ); + } ); + + return variationsWithOnlyType.map( ( variation ) => + mergeBaseAndUserConfigs( userSettingsWithoutType, variation ) + ); +}; + const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( blockEditorPrivateApis ); @@ -129,68 +174,10 @@ export default function StyleVariationsContainer() { const { user } = useContext( GlobalStylesContext ); - const filterObjectByProperty = ( object, property ) => { - const newObject = {}; - Object.keys( object ).forEach( ( key ) => { - if ( key === property ) { - newObject[ key ] = object[ key ]; - } else if ( typeof object[ key ] === 'object' ) { - const newFilter = filterObjectByProperty( - object[ key ], - property - ); - if ( Object.keys( newFilter ).length ) { - newObject[ key ] = newFilter; - } - } - } ); - return newObject; - }; - - const removePropertyFromObject = ( object, property ) => { - for ( const key in object ) { - if ( key === property ) { - delete object[ key ]; - } else if ( typeof object[ key ] === 'object' ) { - removePropertyFromObject( object[ key ], property ); - } - } - return object; - }; - - const variationsWithOnlyTypography = - variations && - variations.map( ( variation ) => { - return filterObjectByProperty( variation, 'typography' ); - } ); - - const userSettingsWithoutTypography = removePropertyFromObject( - JSON.parse( JSON.stringify( user ) ), - 'typography' - ); - - const userSettingsWithoutColor = removePropertyFromObject( - JSON.parse( JSON.stringify( user ) ), - 'color' - ); - const typographyVariations = - variationsWithOnlyTypography && - variationsWithOnlyTypography.map( ( variation ) => - mergeBaseAndUserConfigs( userSettingsWithoutTypography, variation ) - ); - - const variationsWithOnlyColor = - variations && - variations.map( ( variation ) => { - return filterObjectByProperty( variation, 'color' ); - } ); - + variations && getVariationsByType( user, variations, 'typography' ); const colorVariations = - variationsWithOnlyColor && - variationsWithOnlyColor.map( ( variation ) => - mergeBaseAndUserConfigs( userSettingsWithoutColor, variation ) - ); + variations && getVariationsByType( user, variations, 'color' ); return ( <> From ddf005d3ae1df9721382b6fee0717d72f5e77c8e Mon Sep 17 00:00:00 2001 From: scruffian Date: Tue, 28 Nov 2023 20:28:43 -0500 Subject: [PATCH 03/48] refactor --- .../style-variations-container.js | 47 +++++++++++-------- 1 file changed, 28 insertions(+), 19 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js index 8e5c2410c2fbd0..fbab5a8d0eb50a 100644 --- a/packages/edit-site/src/components/global-styles/style-variations-container.js +++ b/packages/edit-site/src/components/global-styles/style-variations-container.js @@ -150,6 +150,33 @@ function Variation( { variation, isColor, isFont } ) { ); } +function ColorVariations( { variations } ) { + const { user } = useContext( GlobalStylesContext ); + const colorVariations = + variations && getVariationsByType( user, variations, 'color' ); + + return ( + <> +
+ { __( 'Colors' ) } +
+ + { colorVariations && + colorVariations.map( ( variation, index ) => ( + + ) ) } + + + ); +} + export default function StyleVariationsContainer() { const variations = useSelect( ( select ) => { return select( @@ -173,11 +200,8 @@ export default function StyleVariationsContainer() { }, [ variations ] ); const { user } = useContext( GlobalStylesContext ); - const typographyVariations = variations && getVariationsByType( user, variations, 'typography' ); - const colorVariations = - variations && getVariationsByType( user, variations, 'color' ); return ( <> @@ -189,22 +213,7 @@ export default function StyleVariationsContainer() { ) ) } -
- { __( 'Colors' ) } -
- - { colorVariations && - colorVariations.map( ( variation, index ) => ( - - ) ) } - +
{ __( 'Typography' ) }
From f075c7fe30b3ce0226089b092ce831074566464f Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 29 Nov 2023 18:13:43 -0500 Subject: [PATCH 04/48] Add font family names --- .../style-variations-container.js | 66 ++++++++++++++++--- 1 file changed, 58 insertions(+), 8 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js index fbab5a8d0eb50a..e1248502380775 100644 --- a/packages/edit-site/src/components/global-styles/style-variations-container.js +++ b/packages/edit-site/src/components/global-styles/style-variations-container.js @@ -73,6 +73,41 @@ const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( blockEditorPrivateApis ); +const getFontFamilyNames = ( themeJson ) => { + const headingFontFamilyCSS = + themeJson?.styles?.elements?.heading?.typography?.fontFamily; + const headingFontFamilyVariable = + headingFontFamilyCSS && + headingFontFamilyCSS.replace( 'var(', '' ).replace( ')', '' ); + const headingFontFamilySlug = headingFontFamilyVariable + ?.split( '--' ) + .slice( -1 )[ 0 ]; + + const bodyFontFamilyVariable = themeJson?.styles?.typography?.fontFamily + .replace( 'var(', '' ) + .replace( ')', '' ); + + const bodyFontFamilySlug = bodyFontFamilyVariable + ?.split( '--' ) + .slice( -1 )[ 0 ]; + + const fontFamilies = themeJson?.settings?.typography?.fontFamilies?.theme; // TODO this could not be under theme. + + const bodyFontFamily = fontFamilies.find( + ( fontFamily ) => fontFamily.slug === bodyFontFamilySlug + ); + + let headingFontFamily = fontFamilies.find( + ( fontFamily ) => fontFamily.slug === headingFontFamilySlug + ); + + if ( ! headingFontFamily ) { + headingFontFamily = bodyFontFamily; + } + + return [ bodyFontFamily?.name, headingFontFamily?.name ]; +}; + function Variation( { variation, isColor, isFont } ) { const [ isFocused, setIsFocused ] = useState( false ); const { base, user, setUserConfig } = useContext( GlobalStylesContext ); @@ -199,7 +234,8 @@ export default function StyleVariationsContainer() { ]; }, [ variations ] ); - const { user } = useContext( GlobalStylesContext ); + const { base, user } = useContext( GlobalStylesContext ); + const typographyVariations = variations && getVariationsByType( user, variations, 'typography' ); @@ -222,13 +258,27 @@ export default function StyleVariationsContainer() { className="edit-site-global-styles-style-variations-container" > { typographyVariations && - typographyVariations.map( ( variation, index ) => ( - - ) ) } + typographyVariations.map( ( variation, index ) => { + const [ bodyFontFamilyName, headingFontFamilyName ] = + getFontFamilyNames( + mergeBaseAndUserConfigs( base, variation ) + ); + return ( + <> + +
+ + { headingFontFamilyName } + +

{ bodyFontFamilyName }

+
+ + ); + } ) } ); From 92167fde6160397398098c9ac7ff25b3f05e8154 Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 30 Nov 2023 16:13:26 -0500 Subject: [PATCH 05/48] add heading and body previews --- .../style-variations-container.js | 139 +++++++++++++++--- 1 file changed, 120 insertions(+), 19 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js index e1248502380775..4d99876fd190d4 100644 --- a/packages/edit-site/src/components/global-styles/style-variations-container.js +++ b/packages/edit-site/src/components/global-styles/style-variations-container.js @@ -23,6 +23,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import { mergeBaseAndUserConfigs } from './global-styles-provider'; import StylesPreview from './preview'; import { unlock } from '../../lock-unlock'; +import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles'; function cloneDeep( object ) { return ! object ? {} : JSON.parse( JSON.stringify( object ) ); @@ -73,7 +74,7 @@ const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( blockEditorPrivateApis ); -const getFontFamilyNames = ( themeJson ) => { +const getFontFamilies = ( themeJson ) => { const headingFontFamilyCSS = themeJson?.styles?.elements?.heading?.typography?.fontFamily; const headingFontFamilyVariable = @@ -105,6 +106,10 @@ const getFontFamilyNames = ( themeJson ) => { headingFontFamily = bodyFontFamily; } + return [ bodyFontFamily, headingFontFamily ]; +}; +const getFontFamilyNames = ( themeJson ) => { + const [ bodyFontFamily, headingFontFamily ] = getFontFamilies( themeJson ); return [ bodyFontFamily?.name, headingFontFamily?.name ]; }; @@ -185,6 +190,95 @@ function Variation( { variation, isColor, isFont } ) { ); } +function TypographyVariation( { variation } ) { + const [ isFocused, setIsFocused ] = useState( false ); + const { base, user, setUserConfig } = useContext( GlobalStylesContext ); + const context = useMemo( () => { + return { + user: { + settings: variation.settings ?? {}, + styles: variation.styles ?? {}, + }, + base, + merged: mergeBaseAndUserConfigs( base, variation ), + setUserConfig: () => {}, + }; + }, [ variation, base ] ); + + const selectVariation = () => { + setUserConfig( () => { + return { + settings: variation.settings, + styles: variation.styles, + }; + } ); + }; + + const selectOnEnter = ( event ) => { + if ( event.keyCode === ENTER ) { + event.preventDefault(); + selectVariation(); + } + }; + + const isActive = useMemo( () => { + return areGlobalStyleConfigsEqual( user, variation ); + }, [ user, variation ] ); + + let label = variation?.title; + if ( variation?.description ) { + label = sprintf( + /* translators: %1$s: variation title. %2$s variation description. */ + __( '%1$s (%2$s)' ), + variation?.title, + variation?.description + ); + } + + const [ bodyFontFamilies, headingFontFamilies ] = getFontFamilies( + mergeBaseAndUserConfigs( base, variation ) + ); + + const bodyPreviewStyle = getFamilyPreviewStyle( bodyFontFamilies ); + const headingPreviewStyle = { + ...getFamilyPreviewStyle( headingFontFamilies ), + fontSize: '1.5rem', + }; + + return ( + +
setIsFocused( true ) } + onBlur={ () => setIsFocused( false ) } + > +
+
+ { headingFontFamilies.name } +
+
+ { bodyFontFamilies.name } +
+
+
+ + ); +} + function ColorVariations( { variations } ) { const { user } = useContext( GlobalStylesContext ); const colorVariations = @@ -239,6 +333,26 @@ export default function StyleVariationsContainer() { const typographyVariations = variations && getVariationsByType( user, variations, 'typography' ); + const uniqueTypographyVariations = []; + const uniqueTypographyNames = []; + const isDup = ( x, y ) => { + return uniqueTypographyNames.find( ( it ) => { + return JSON.stringify( it ) === JSON.stringify( [ x, y ] ); + } ); + }; + + typographyVariations?.forEach( ( variation ) => { + const [ bodyFontFamilyName, headingFontFamilyName ] = + getFontFamilyNames( mergeBaseAndUserConfigs( base, variation ) ); + if ( ! isDup( bodyFontFamilyName, headingFontFamilyName ) ) { + uniqueTypographyVariations.push( variation ); + uniqueTypographyNames.push( [ + bodyFontFamilyName, + headingFontFamilyName, + ] ); + } + } ); + return ( <> { __( 'Typography' ) } - - { typographyVariations && - typographyVariations.map( ( variation, index ) => { - const [ bodyFontFamilyName, headingFontFamilyName ] = - getFontFamilyNames( - mergeBaseAndUserConfigs( base, variation ) - ); +
+ { uniqueTypographyVariations && + uniqueTypographyVariations.map( ( variation, index ) => { return ( <> - -
- - { headingFontFamilyName } - -

{ bodyFontFamilyName }

-
); } ) } - +
); } From 379f62db38a894af08046ed54ca98db0d8c5fac1 Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 30 Nov 2023 16:43:40 -0500 Subject: [PATCH 06/48] use palettes --- .../style-variations-container.js | 114 ++++++++++++++++-- 1 file changed, 105 insertions(+), 9 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js index 4d99876fd190d4..ff7c615711496e 100644 --- a/packages/edit-site/src/components/global-styles/style-variations-container.js +++ b/packages/edit-site/src/components/global-styles/style-variations-container.js @@ -13,6 +13,9 @@ import { ENTER } from '@wordpress/keycodes'; import { __experimentalHeading as Heading, __experimentalGrid as Grid, + __experimentalHStack as HStack, + __experimentalZStack as ZStack, + ColorIndicator, } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; @@ -24,6 +27,7 @@ import { mergeBaseAndUserConfigs } from './global-styles-provider'; import StylesPreview from './preview'; import { unlock } from '../../lock-unlock'; import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles'; +import ColorIndicatorWrapper from './color-indicator-wrapper'; function cloneDeep( object ) { return ! object ? {} : JSON.parse( JSON.stringify( object ) ); @@ -190,6 +194,96 @@ function Variation( { variation, isColor, isFont } ) { ); } +function ColorVariation( { variation } ) { + const [ isFocused, setIsFocused ] = useState( false ); + const { base, user, setUserConfig } = useContext( GlobalStylesContext ); + const context = useMemo( () => { + return { + user: { + settings: variation.settings ?? {}, + styles: variation.styles ?? {}, + }, + base, + merged: mergeBaseAndUserConfigs( base, variation ), + setUserConfig: () => {}, + }; + }, [ variation, base ] ); + + const selectVariation = () => { + setUserConfig( () => { + return { + settings: variation.settings, + styles: variation.styles, + }; + } ); + }; + + const selectOnEnter = ( event ) => { + if ( event.keyCode === ENTER ) { + event.preventDefault(); + selectVariation(); + } + }; + + const isActive = useMemo( () => { + return areGlobalStyleConfigsEqual( user, variation ); + }, [ user, variation ] ); + + let label = variation?.title; + if ( variation?.description ) { + label = sprintf( + /* translators: %1$s: variation title. %2$s variation description. */ + __( '%1$s (%2$s)' ), + variation?.title, + variation?.description + ); + } + + const colors = variation?.settings?.color?.palette?.theme ?? []; + + return ( + +
setIsFocused( true ) } + onBlur={ () => setIsFocused( false ) } + > +
+ + + { colors + .slice( 0, 5 ) + .map( ( { color }, index ) => ( + + + + ) ) } + + +
+
+ + ); +} + function TypographyVariation( { variation } ) { const [ isFocused, setIsFocused ] = useState( false ); const { base, user, setUserConfig } = useContext( GlobalStylesContext ); @@ -294,13 +388,15 @@ function ColorVariations( { variations } ) { className="edit-site-global-styles-style-variations-container" > { colorVariations && - colorVariations.map( ( variation, index ) => ( - - ) ) } + colorVariations.map( ( variation, index ) => { + return ( + + ); + } ) } ); @@ -371,13 +467,13 @@ export default function StyleVariationsContainer() { { uniqueTypographyVariations && uniqueTypographyVariations.map( ( variation, index ) => { return ( - <> + - + ); } ) } From c62be759823f0256dc16453aa7d8d2e9613bd205 Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 30 Nov 2023 16:47:48 -0500 Subject: [PATCH 07/48] make typograpgy a grid --- .../src/components/global-styles/preview.js | 114 ++++++++---------- .../style-variations-container.js | 18 +-- 2 files changed, 60 insertions(+), 72 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js index 0fccf53fae0764..e918339b50682d 100644 --- a/packages/edit-site/src/components/global-styles/preview.js +++ b/packages/edit-site/src/components/global-styles/preview.js @@ -71,13 +71,7 @@ const THROTTLE_OPTIONS = { trailing: true, }; -const StylesPreview = ( { - label, - isFocused, - withHoverView, - isColor = true, - isFont = true, -} ) => { +const StylesPreview = ( { label, isFocused, withHoverView } ) => { const [ fontWeight ] = useGlobalStyle( 'typography.fontWeight' ); const [ fontFamily = 'serif' ] = useGlobalStyle( 'typography.fontFamily' ); const [ headingFontFamily = fontFamily ] = useGlobalStyle( @@ -204,62 +198,56 @@ const StylesPreview = ( { overflow: 'hidden', } } > - { isFont && ( - - Aa - - ) } - { isColor && ( - - { highlightedColors.map( - ( { slug, color }, index ) => ( - - ) - ) } - - ) } + + Aa + + + { highlightedColors.map( + ( { slug, color }, index ) => ( + + ) + ) } + { __( 'Typography' ) } -
+ { uniqueTypographyVariations && uniqueTypographyVariations.map( ( variation, index ) => { return ( - - - + ); } ) } -
+ ); } From 1a3dd8a14950e497569b971ad6b93ee9cf8902cf Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 30 Nov 2023 17:54:03 -0500 Subject: [PATCH 08/48] make the styles look nicer --- .../style-variations-container.js | 26 ++++++++++++------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js index 990ac9c4353783..0540789d2f06e4 100644 --- a/packages/edit-site/src/components/global-styles/style-variations-container.js +++ b/packages/edit-site/src/components/global-styles/style-variations-container.js @@ -14,6 +14,7 @@ import { __experimentalHeading as Heading, __experimentalGrid as Grid, __experimentalHStack as HStack, + __experimentalVStack as VStack, __experimentalZStack as ZStack, ColorIndicator, } from '@wordpress/components'; @@ -117,6 +118,9 @@ const getFontFamilyNames = ( themeJson ) => { return [ bodyFontFamily?.name, headingFontFamily?.name ]; }; +const normalizedHeight = 100; +const ratio = 1; + function Variation( { variation, isColor, isFont } ) { const [ isFocused, setIsFocused ] = useState( false ); const { base, user, setUserConfig } = useContext( GlobalStylesContext ); @@ -244,12 +248,9 @@ function ColorVariation( { variation } ) { return (
setIsFocused( true ) } onBlur={ () => setIsFocused( false ) } > -
{ headingFontFamilies.name } @@ -367,7 +373,7 @@ function TypographyVariation( { variation } ) {
{ bodyFontFamilies.name }
-
+
); @@ -376,7 +382,7 @@ function TypographyVariation( { variation } ) { function ColorVariations( { variations } ) { const { user } = useContext( GlobalStylesContext ); const colorVariations = - variations && getVariationsByType( user, variations, 'color' ); + variations && getVariationsByType( user, variations, 'color' ); // should also get filter? return ( <> From 5f509372f7e1ee663347484095200908891e6b16 Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 6 Dec 2023 14:23:11 +0000 Subject: [PATCH 09/48] move component to its own file --- .../global-styles/color-variations.js | 191 ++++++++++++++++++ .../style-variations-container.js | 121 +---------- 2 files changed, 192 insertions(+), 120 deletions(-) create mode 100644 packages/edit-site/src/components/global-styles/color-variations.js diff --git a/packages/edit-site/src/components/global-styles/color-variations.js b/packages/edit-site/src/components/global-styles/color-variations.js new file mode 100644 index 00000000000000..edf3eabef57cb0 --- /dev/null +++ b/packages/edit-site/src/components/global-styles/color-variations.js @@ -0,0 +1,191 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { useMemo, useContext, useState } from '@wordpress/element'; +import { ENTER } from '@wordpress/keycodes'; +import { + __experimentalHeading as Heading, + __experimentalGrid as Grid, + __experimentalHStack as HStack, + __experimentalZStack as ZStack, + ColorIndicator, +} from '@wordpress/components'; +import { __, sprintf } from '@wordpress/i18n'; +import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import { mergeBaseAndUserConfigs } from './global-styles-provider'; +import { unlock } from '../../lock-unlock'; +import ColorIndicatorWrapper from './color-indicator-wrapper'; + +const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( + blockEditorPrivateApis +); + +function cloneDeep( object ) { + return ! object ? {} : JSON.parse( JSON.stringify( object ) ); +} + +const filterObjectByProperty = ( object, property ) => { + const newObject = {}; + Object.keys( object ).forEach( ( key ) => { + if ( key === property ) { + newObject[ key ] = object[ key ]; + } else if ( typeof object[ key ] === 'object' ) { + const newFilter = filterObjectByProperty( object[ key ], property ); + if ( Object.keys( newFilter ).length ) { + newObject[ key ] = newFilter; + } + } + } ); + return newObject; +}; + +const removePropertyFromObject = ( object, property ) => { + for ( const key in object ) { + if ( key === property ) { + delete object[ key ]; + } else if ( typeof object[ key ] === 'object' ) { + removePropertyFromObject( object[ key ], property ); + } + } + return object; +}; + +const getVariationsByType = ( user, variations, type ) => { + const userSettingsWithoutType = removePropertyFromObject( + cloneDeep( user ), + type + ); + + const variationsWithOnlyType = variations.map( ( variation ) => { + return filterObjectByProperty( variation, type ); + } ); + + return variationsWithOnlyType.map( ( variation ) => + mergeBaseAndUserConfigs( userSettingsWithoutType, variation ) + ); +}; + +function ColorVariation( { variation } ) { + const [ isFocused, setIsFocused ] = useState( false ); + const { base, user, setUserConfig } = useContext( GlobalStylesContext ); + const context = useMemo( () => { + return { + user: { + settings: variation.settings ?? {}, + styles: variation.styles ?? {}, + }, + base, + merged: mergeBaseAndUserConfigs( base, variation ), + setUserConfig: () => {}, + }; + }, [ variation, base ] ); + + const selectVariation = () => { + setUserConfig( () => { + return { + settings: variation.settings, + styles: variation.styles, + }; + } ); + }; + + const selectOnEnter = ( event ) => { + if ( event.keyCode === ENTER ) { + event.preventDefault(); + selectVariation(); + } + }; + + const isActive = useMemo( () => { + return areGlobalStyleConfigsEqual( user, variation ); + }, [ user, variation ] ); + + let label = variation?.title; + if ( variation?.description ) { + label = sprintf( + /* translators: %1$s: variation title. %2$s variation description. */ + __( '%1$s (%2$s)' ), + variation?.title, + variation?.description + ); + } + + const colors = variation?.settings?.color?.palette?.theme ?? []; + + return ( + +
setIsFocused( true ) } + onBlur={ () => setIsFocused( false ) } + > +
+ + + { colors + .slice( 0, 5 ) + .map( ( { color }, index ) => ( + + + + ) ) } + + +
+
+ + ); +} + +export default function ColorVariations( { variations } ) { + const { user } = useContext( GlobalStylesContext ); + const colorVariations = + variations && getVariationsByType( user, variations, 'color' ); // should also get filter? + + return ( + <> +
+ { __( 'Colors' ) } +
+ + { colorVariations && + colorVariations.map( ( variation, index ) => { + return ( + + ); + } ) } + + + ); +} diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js index 0540789d2f06e4..a75fc0d5c845d1 100644 --- a/packages/edit-site/src/components/global-styles/style-variations-container.js +++ b/packages/edit-site/src/components/global-styles/style-variations-container.js @@ -13,10 +13,7 @@ import { ENTER } from '@wordpress/keycodes'; import { __experimentalHeading as Heading, __experimentalGrid as Grid, - __experimentalHStack as HStack, __experimentalVStack as VStack, - __experimentalZStack as ZStack, - ColorIndicator, } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; @@ -28,7 +25,7 @@ import { mergeBaseAndUserConfigs } from './global-styles-provider'; import StylesPreview from './preview'; import { unlock } from '../../lock-unlock'; import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles'; -import ColorIndicatorWrapper from './color-indicator-wrapper'; +import ColorVariations from './color-variations'; function cloneDeep( object ) { return ! object ? {} : JSON.parse( JSON.stringify( object ) ); @@ -198,93 +195,6 @@ function Variation( { variation, isColor, isFont } ) { ); } -function ColorVariation( { variation } ) { - const [ isFocused, setIsFocused ] = useState( false ); - const { base, user, setUserConfig } = useContext( GlobalStylesContext ); - const context = useMemo( () => { - return { - user: { - settings: variation.settings ?? {}, - styles: variation.styles ?? {}, - }, - base, - merged: mergeBaseAndUserConfigs( base, variation ), - setUserConfig: () => {}, - }; - }, [ variation, base ] ); - - const selectVariation = () => { - setUserConfig( () => { - return { - settings: variation.settings, - styles: variation.styles, - }; - } ); - }; - - const selectOnEnter = ( event ) => { - if ( event.keyCode === ENTER ) { - event.preventDefault(); - selectVariation(); - } - }; - - const isActive = useMemo( () => { - return areGlobalStyleConfigsEqual( user, variation ); - }, [ user, variation ] ); - - let label = variation?.title; - if ( variation?.description ) { - label = sprintf( - /* translators: %1$s: variation title. %2$s variation description. */ - __( '%1$s (%2$s)' ), - variation?.title, - variation?.description - ); - } - - const colors = variation?.settings?.color?.palette?.theme ?? []; - - return ( - -
setIsFocused( true ) } - onBlur={ () => setIsFocused( false ) } - > -
- - - { colors - .slice( 0, 5 ) - .map( ( { color }, index ) => ( - - - - ) ) } - - -
-
- - ); -} - function TypographyVariation( { variation } ) { const [ isFocused, setIsFocused ] = useState( false ); const { base, user, setUserConfig } = useContext( GlobalStylesContext ); @@ -379,35 +289,6 @@ function TypographyVariation( { variation } ) { ); } -function ColorVariations( { variations } ) { - const { user } = useContext( GlobalStylesContext ); - const colorVariations = - variations && getVariationsByType( user, variations, 'color' ); // should also get filter? - - return ( - <> -
- { __( 'Colors' ) } -
- - { colorVariations && - colorVariations.map( ( variation, index ) => { - return ( - - ); - } ) } - - - ); -} - export default function StyleVariationsContainer() { const variations = useSelect( ( select ) => { return select( From de565ad03e0a7fa31984c473a620887a8cc9865b Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 6 Dec 2023 17:54:27 +0000 Subject: [PATCH 10/48] move color and type variations to different locations in the UI --- .../global-styles/color-palette-panel.js | 2 + .../global-styles/screen-typography.js | 2 + .../style-variations-container.js | 232 +-------------- ...olor-variations.js => variations-color.js} | 16 +- .../global-styles/variations-typography.js | 266 ++++++++++++++++++ 5 files changed, 281 insertions(+), 237 deletions(-) rename packages/edit-site/src/components/global-styles/{color-variations.js => variations-color.js} (91%) create mode 100644 packages/edit-site/src/components/global-styles/variations-typography.js diff --git a/packages/edit-site/src/components/global-styles/color-palette-panel.js b/packages/edit-site/src/components/global-styles/color-palette-panel.js index 03401cab9f80b5..15b0192ae13a78 100644 --- a/packages/edit-site/src/components/global-styles/color-palette-panel.js +++ b/packages/edit-site/src/components/global-styles/color-palette-panel.js @@ -13,6 +13,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; * Internal dependencies */ import { unlock } from '../../lock-unlock'; +import ColorVariations from './variations-color'; const { useGlobalSetting } = unlock( blockEditorPrivateApis ); const mobilePopoverProps = { placement: 'bottom-start', offset: 8 }; @@ -89,6 +90,7 @@ export default function ColorPalettePanel( { name } ) { slugPrefix="custom-" popoverProps={ popoverProps } /> + ); } diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js index 40e2ab08320b75..9e4d95e587cba1 100644 --- a/packages/edit-site/src/components/global-styles/screen-typography.js +++ b/packages/edit-site/src/components/global-styles/screen-typography.js @@ -12,6 +12,7 @@ import { useSelect } from '@wordpress/data'; import TypographyElements from './typography-elements'; import FontFamilies from './font-families'; import ScreenHeader from './header'; +import TypographyVariations from './variations-typography'; function ScreenTypography() { const fontLibraryEnabled = useSelect( @@ -32,6 +33,7 @@ function ScreenTypography() { { fontLibraryEnabled && } +
diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js index a75fc0d5c845d1..3cfde21505e8d8 100644 --- a/packages/edit-site/src/components/global-styles/style-variations-container.js +++ b/packages/edit-site/src/components/global-styles/style-variations-container.js @@ -10,11 +10,7 @@ import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; import { useMemo, useContext, useState } from '@wordpress/element'; import { ENTER } from '@wordpress/keycodes'; -import { - __experimentalHeading as Heading, - __experimentalGrid as Grid, - __experimentalVStack as VStack, -} from '@wordpress/components'; +import { __experimentalGrid as Grid } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; @@ -24,100 +20,11 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import { mergeBaseAndUserConfigs } from './global-styles-provider'; import StylesPreview from './preview'; import { unlock } from '../../lock-unlock'; -import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles'; -import ColorVariations from './color-variations'; - -function cloneDeep( object ) { - return ! object ? {} : JSON.parse( JSON.stringify( object ) ); -} - -const filterObjectByProperty = ( object, property ) => { - const newObject = {}; - Object.keys( object ).forEach( ( key ) => { - if ( key === property ) { - newObject[ key ] = object[ key ]; - } else if ( typeof object[ key ] === 'object' ) { - const newFilter = filterObjectByProperty( object[ key ], property ); - if ( Object.keys( newFilter ).length ) { - newObject[ key ] = newFilter; - } - } - } ); - return newObject; -}; - -const removePropertyFromObject = ( object, property ) => { - for ( const key in object ) { - if ( key === property ) { - delete object[ key ]; - } else if ( typeof object[ key ] === 'object' ) { - removePropertyFromObject( object[ key ], property ); - } - } - return object; -}; - -const getVariationsByType = ( user, variations, type ) => { - const userSettingsWithoutType = removePropertyFromObject( - cloneDeep( user ), - type - ); - - const variationsWithOnlyType = variations.map( ( variation ) => { - return filterObjectByProperty( variation, type ); - } ); - - return variationsWithOnlyType.map( ( variation ) => - mergeBaseAndUserConfigs( userSettingsWithoutType, variation ) - ); -}; const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( blockEditorPrivateApis ); -const getFontFamilies = ( themeJson ) => { - const headingFontFamilyCSS = - themeJson?.styles?.elements?.heading?.typography?.fontFamily; - const headingFontFamilyVariable = - headingFontFamilyCSS && - headingFontFamilyCSS.replace( 'var(', '' ).replace( ')', '' ); - const headingFontFamilySlug = headingFontFamilyVariable - ?.split( '--' ) - .slice( -1 )[ 0 ]; - - const bodyFontFamilyVariable = themeJson?.styles?.typography?.fontFamily - .replace( 'var(', '' ) - .replace( ')', '' ); - - const bodyFontFamilySlug = bodyFontFamilyVariable - ?.split( '--' ) - .slice( -1 )[ 0 ]; - - const fontFamilies = themeJson?.settings?.typography?.fontFamilies?.theme; // TODO this could not be under theme. - - const bodyFontFamily = fontFamilies.find( - ( fontFamily ) => fontFamily.slug === bodyFontFamilySlug - ); - - let headingFontFamily = fontFamilies.find( - ( fontFamily ) => fontFamily.slug === headingFontFamilySlug - ); - - if ( ! headingFontFamily ) { - headingFontFamily = bodyFontFamily; - } - - return [ bodyFontFamily, headingFontFamily ]; -}; -const getFontFamilyNames = ( themeJson ) => { - const [ bodyFontFamily, headingFontFamily ] = getFontFamilies( themeJson ); - return [ bodyFontFamily?.name, headingFontFamily?.name ]; -}; - -const normalizedHeight = 100; -const ratio = 1; - function Variation( { variation, isColor, isFont } ) { const [ isFocused, setIsFocused ] = useState( false ); const { base, user, setUserConfig } = useContext( GlobalStylesContext ); @@ -195,100 +102,6 @@ function Variation( { variation, isColor, isFont } ) { ); } -function TypographyVariation( { variation } ) { - const [ isFocused, setIsFocused ] = useState( false ); - const { base, user, setUserConfig } = useContext( GlobalStylesContext ); - const context = useMemo( () => { - return { - user: { - settings: variation.settings ?? {}, - styles: variation.styles ?? {}, - }, - base, - merged: mergeBaseAndUserConfigs( base, variation ), - setUserConfig: () => {}, - }; - }, [ variation, base ] ); - - const selectVariation = () => { - setUserConfig( () => { - return { - settings: variation.settings, - styles: variation.styles, - }; - } ); - }; - - const selectOnEnter = ( event ) => { - if ( event.keyCode === ENTER ) { - event.preventDefault(); - selectVariation(); - } - }; - - const isActive = useMemo( () => { - return areGlobalStyleConfigsEqual( user, variation ); - }, [ user, variation ] ); - - let label = variation?.title; - if ( variation?.description ) { - label = sprintf( - /* translators: %1$s: variation title. %2$s variation description. */ - __( '%1$s (%2$s)' ), - variation?.title, - variation?.description - ); - } - - const [ bodyFontFamilies, headingFontFamilies ] = getFontFamilies( - mergeBaseAndUserConfigs( base, variation ) - ); - - const bodyPreviewStyle = getFamilyPreviewStyle( bodyFontFamilies ); - const headingPreviewStyle = { - ...getFamilyPreviewStyle( headingFontFamilies ), - fontSize: '1.2rem', - }; - - return ( - -
setIsFocused( true ) } - onBlur={ () => setIsFocused( false ) } - > - -
- { headingFontFamilies.name } -
-
- { bodyFontFamilies.name } -
- -
- - ); -} - export default function StyleVariationsContainer() { const variations = useSelect( ( select ) => { return select( @@ -311,31 +124,6 @@ export default function StyleVariationsContainer() { ]; }, [ variations ] ); - const { base, user } = useContext( GlobalStylesContext ); - - const typographyVariations = - variations && getVariationsByType( user, variations, 'typography' ); - - const uniqueTypographyVariations = []; - const uniqueTypographyNames = []; - const isDup = ( x, y ) => { - return uniqueTypographyNames.find( ( it ) => { - return JSON.stringify( it ) === JSON.stringify( [ x, y ] ); - } ); - }; - - typographyVariations?.forEach( ( variation ) => { - const [ bodyFontFamilyName, headingFontFamilyName ] = - getFontFamilyNames( mergeBaseAndUserConfigs( base, variation ) ); - if ( ! isDup( bodyFontFamilyName, headingFontFamilyName ) ) { - uniqueTypographyVariations.push( variation ); - uniqueTypographyNames.push( [ - bodyFontFamilyName, - headingFontFamilyName, - ] ); - } - } ); - return ( <> ) ) } - -
- { __( 'Typography' ) } -
- - { uniqueTypographyVariations && - uniqueTypographyVariations.map( ( variation, index ) => { - return ( - - ); - } ) } - ); } diff --git a/packages/edit-site/src/components/global-styles/color-variations.js b/packages/edit-site/src/components/global-styles/variations-color.js similarity index 91% rename from packages/edit-site/src/components/global-styles/color-variations.js rename to packages/edit-site/src/components/global-styles/variations-color.js index edf3eabef57cb0..1025087e7039aa 100644 --- a/packages/edit-site/src/components/global-styles/color-variations.js +++ b/packages/edit-site/src/components/global-styles/variations-color.js @@ -6,6 +6,8 @@ import classnames from 'classnames'; /** * WordPress dependencies */ +import { store as coreStore } from '@wordpress/core-data'; +import { useSelect } from '@wordpress/data'; import { useMemo, useContext, useState } from '@wordpress/element'; import { ENTER } from '@wordpress/keycodes'; import { @@ -161,19 +163,22 @@ function ColorVariation( { variation } ) { ); } -export default function ColorVariations( { variations } ) { +export default function ColorVariations() { const { user } = useContext( GlobalStylesContext ); + const variations = useSelect( ( select ) => { + return select( + coreStore + ).__experimentalGetCurrentThemeGlobalStylesVariations(); + }, [] ); const colorVariations = variations && getVariationsByType( user, variations, 'color' ); // should also get filter? return ( <> -
- { __( 'Colors' ) } -
+ { __( 'Presets' ) } { colorVariations && colorVariations.map( ( variation, index ) => { @@ -181,7 +186,6 @@ export default function ColorVariations( { variations } ) { ); } ) } diff --git a/packages/edit-site/src/components/global-styles/variations-typography.js b/packages/edit-site/src/components/global-styles/variations-typography.js new file mode 100644 index 00000000000000..db93f844165df4 --- /dev/null +++ b/packages/edit-site/src/components/global-styles/variations-typography.js @@ -0,0 +1,266 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { store as coreStore } from '@wordpress/core-data'; +import { useSelect } from '@wordpress/data'; +import { useMemo, useContext, useState } from '@wordpress/element'; +import { ENTER } from '@wordpress/keycodes'; +import { + __experimentalHeading as Heading, + __experimentalGrid as Grid, + __experimentalVStack as VStack, +} from '@wordpress/components'; +import { __, sprintf } from '@wordpress/i18n'; +import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import { mergeBaseAndUserConfigs } from './global-styles-provider'; +import { unlock } from '../../lock-unlock'; +import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles'; + +function cloneDeep( object ) { + return ! object ? {} : JSON.parse( JSON.stringify( object ) ); +} + +const filterObjectByProperty = ( object, property ) => { + const newObject = {}; + Object.keys( object ).forEach( ( key ) => { + if ( key === property ) { + newObject[ key ] = object[ key ]; + } else if ( typeof object[ key ] === 'object' ) { + const newFilter = filterObjectByProperty( object[ key ], property ); + if ( Object.keys( newFilter ).length ) { + newObject[ key ] = newFilter; + } + } + } ); + return newObject; +}; + +const removePropertyFromObject = ( object, property ) => { + for ( const key in object ) { + if ( key === property ) { + delete object[ key ]; + } else if ( typeof object[ key ] === 'object' ) { + removePropertyFromObject( object[ key ], property ); + } + } + return object; +}; + +const getVariationsByType = ( user, variations, type ) => { + const userSettingsWithoutType = removePropertyFromObject( + cloneDeep( user ), + type + ); + + const variationsWithOnlyType = variations.map( ( variation ) => { + return filterObjectByProperty( variation, type ); + } ); + + return variationsWithOnlyType.map( ( variation ) => + mergeBaseAndUserConfigs( userSettingsWithoutType, variation ) + ); +}; + +const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( + blockEditorPrivateApis +); + +const getFontFamilies = ( themeJson ) => { + const headingFontFamilyCSS = + themeJson?.styles?.elements?.heading?.typography?.fontFamily; + const headingFontFamilyVariable = + headingFontFamilyCSS && + headingFontFamilyCSS.replace( 'var(', '' ).replace( ')', '' ); + const headingFontFamilySlug = headingFontFamilyVariable + ?.split( '--' ) + .slice( -1 )[ 0 ]; + + const bodyFontFamilyVariable = themeJson?.styles?.typography?.fontFamily + .replace( 'var(', '' ) + .replace( ')', '' ); + + const bodyFontFamilySlug = bodyFontFamilyVariable + ?.split( '--' ) + .slice( -1 )[ 0 ]; + + const fontFamilies = themeJson?.settings?.typography?.fontFamilies?.theme; // TODO this could not be under theme. + + const bodyFontFamily = fontFamilies.find( + ( fontFamily ) => fontFamily.slug === bodyFontFamilySlug + ); + + let headingFontFamily = fontFamilies.find( + ( fontFamily ) => fontFamily.slug === headingFontFamilySlug + ); + + if ( ! headingFontFamily ) { + headingFontFamily = bodyFontFamily; + } + + return [ bodyFontFamily, headingFontFamily ]; +}; +const getFontFamilyNames = ( themeJson ) => { + const [ bodyFontFamily, headingFontFamily ] = getFontFamilies( themeJson ); + return [ bodyFontFamily?.name, headingFontFamily?.name ]; +}; + +const normalizedHeight = 100; +const ratio = 1; + +function TypographyVariation( { variation } ) { + const [ isFocused, setIsFocused ] = useState( false ); + const { base, user, setUserConfig } = useContext( GlobalStylesContext ); + const context = useMemo( () => { + return { + user: { + settings: variation.settings ?? {}, + styles: variation.styles ?? {}, + }, + base, + merged: mergeBaseAndUserConfigs( base, variation ), + setUserConfig: () => {}, + }; + }, [ variation, base ] ); + + const selectVariation = () => { + setUserConfig( () => { + return { + settings: variation.settings, + styles: variation.styles, + }; + } ); + }; + + const selectOnEnter = ( event ) => { + if ( event.keyCode === ENTER ) { + event.preventDefault(); + selectVariation(); + } + }; + + const isActive = useMemo( () => { + return areGlobalStyleConfigsEqual( user, variation ); + }, [ user, variation ] ); + + let label = variation?.title; + if ( variation?.description ) { + label = sprintf( + /* translators: %1$s: variation title. %2$s variation description. */ + __( '%1$s (%2$s)' ), + variation?.title, + variation?.description + ); + } + + const [ bodyFontFamilies, headingFontFamilies ] = getFontFamilies( + mergeBaseAndUserConfigs( base, variation ) + ); + + const bodyPreviewStyle = getFamilyPreviewStyle( bodyFontFamilies ); + const headingPreviewStyle = { + ...getFamilyPreviewStyle( headingFontFamilies ), + fontSize: '1.2rem', + }; + + return ( + +
setIsFocused( true ) } + onBlur={ () => setIsFocused( false ) } + > + +
+ { headingFontFamilies.name } +
+
+ { bodyFontFamilies.name } +
+ +
+ + ); +} + +export default function TypographyVariations() { + const variations = useSelect( ( select ) => { + return select( + coreStore + ).__experimentalGetCurrentThemeGlobalStylesVariations(); + }, [] ); + + const { base, user } = useContext( GlobalStylesContext ); + + const typographyVariations = + variations && getVariationsByType( user, variations, 'typography' ); + + const uniqueTypographyVariations = []; + const uniqueTypographyNames = []; + const isDup = ( x, y ) => { + return uniqueTypographyNames.find( ( it ) => { + return JSON.stringify( it ) === JSON.stringify( [ x, y ] ); + } ); + }; + + typographyVariations?.forEach( ( variation ) => { + const [ bodyFontFamilyName, headingFontFamilyName ] = + getFontFamilyNames( mergeBaseAndUserConfigs( base, variation ) ); + if ( ! isDup( bodyFontFamilyName, headingFontFamilyName ) ) { + uniqueTypographyVariations.push( variation ); + uniqueTypographyNames.push( [ + bodyFontFamilyName, + headingFontFamilyName, + ] ); + } + } ); + + return ( + <> +
+ { __( 'Typography' ) } +
+ + { uniqueTypographyVariations && + uniqueTypographyVariations.map( ( variation, index ) => { + return ( + + ); + } ) } + + + ); +} From db8fc25cbfed2a66f4780b7926ab2ef19bd23390 Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 6 Dec 2023 17:55:26 +0000 Subject: [PATCH 11/48] revert --- packages/edit-site/src/components/global-styles/preview.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js index e918339b50682d..4e48c7ab76e760 100644 --- a/packages/edit-site/src/components/global-styles/preview.js +++ b/packages/edit-site/src/components/global-styles/preview.js @@ -207,10 +207,7 @@ const StylesPreview = ( { label, isFocused, withHoverView } ) => { } } animate={ { scale: 1, opacity: 1 } } initial={ { scale: 0.1, opacity: 0 } } - transition={ { - delay: 0.3, - type: 'tween', - } } + transition={ { delay: 0.3, type: 'tween' } } > Aa From 76f9a9bd15ee55bb84d3d93fe4d52ee33026271b Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 6 Dec 2023 17:55:51 +0000 Subject: [PATCH 12/48] revert --- .../style-variations-container.js | 22 ++++++++----------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js index 3cfde21505e8d8..6cc8b53b800d3a 100644 --- a/packages/edit-site/src/components/global-styles/style-variations-container.js +++ b/packages/edit-site/src/components/global-styles/style-variations-container.js @@ -25,7 +25,7 @@ const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( blockEditorPrivateApis ); -function Variation( { variation, isColor, isFont } ) { +function Variation( { variation } ) { const [ isFocused, setIsFocused ] = useState( false ); const { base, user, setUserConfig } = useContext( GlobalStylesContext ); const context = useMemo( () => { @@ -93,8 +93,6 @@ function Variation( { variation, isColor, isFont } ) { label={ variation?.title } isFocused={ isFocused } withHoverView - isColor={ isColor } - isFont={ isFont } /> @@ -125,15 +123,13 @@ export default function StyleVariationsContainer() { }, [ variations ] ); return ( - <> - - { withEmptyVariation.map( ( variation, index ) => ( - - ) ) } - - + + { withEmptyVariation.map( ( variation, index ) => ( + + ) ) } + ); } From 8663e68d53527f696fea53e3a9746949427357e8 Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 6 Dec 2023 17:56:01 +0000 Subject: [PATCH 13/48] revert --- packages/edit-site/src/components/global-styles/style.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index b0b7d4c2ef3d32..f53173437d47d8 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -199,7 +199,3 @@ .edit-site-global-styles-sidebar__panel .block-editor-block-icon svg { fill: currentColor; } - -.edit-site-global-styles-style-variations-container { - margin-bottom: $grid-unit-40; -} From e2c18ec037131a6a4febdeba6989b063791136e3 Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 6 Dec 2023 17:56:14 +0000 Subject: [PATCH 14/48] revert --- .../components/sidebar-navigation-screen-global-styles/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js index ba81a71ef62bb5..a064e9f587853d 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js @@ -157,7 +157,7 @@ export default function SidebarNavigationScreenGlobalStyles() { return ( <> Date: Wed, 6 Dec 2023 18:18:54 +0000 Subject: [PATCH 15/48] code dedupe --- .../src/components/global-styles/utils.js | 78 +++++++++++++++++++ .../global-styles/variations-color.js | 54 +------------ .../global-styles/variations-typography.js | 48 +----------- 3 files changed, 83 insertions(+), 97 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js index 05a004b878e5f9..d238b847455cdb 100644 --- a/packages/edit-site/src/components/global-styles/utils.js +++ b/packages/edit-site/src/components/global-styles/utils.js @@ -1,3 +1,8 @@ +/** + * Internal dependencies + */ +import { mergeBaseAndUserConfigs } from './global-styles-provider'; + /** * * @param {string} variation The variation name. @@ -10,3 +15,76 @@ export function getVariationClassName( variation ) { } return `is-style-${ variation }`; } + +/** + * Makes a copy of an object without storing any references to the original object. + * @param {Object} object + * @return {Object} The cloned object. + */ +function cloneDeep( object ) { + return ! object ? {} : JSON.parse( JSON.stringify( object ) ); +} + +/** + * Returns a new object with only the properties specified in `properties`. + * + * @param {Object} object The object to filter + * @param {Object} property The property to filter by + * @return {Object} The merged object. + */ +const filterObjectByProperty = ( object, property ) => { + const newObject = {}; + Object.keys( object ).forEach( ( key ) => { + if ( key === property ) { + newObject[ key ] = object[ key ]; + } else if ( typeof object[ key ] === 'object' ) { + const newFilter = filterObjectByProperty( object[ key ], property ); + if ( Object.keys( newFilter ).length ) { + newObject[ key ] = newFilter; + } + } + } ); + return newObject; +}; + +/** + * Removes all instances of a property from an object. + * + * @param {Object} object + * @param {string} property + * @return {Object} The modified object. + */ +const removePropertyFromObject = ( object, property ) => { + for ( const key in object ) { + if ( key === property ) { + delete object[ key ]; + } else if ( typeof object[ key ] === 'object' ) { + removePropertyFromObject( object[ key ], property ); + } + } + return object; +}; + +/** + * Return style variations with all properties removed except for the one specified in `type`. + * + * @param {Object} user The user variation. + * @param {Array} variations The other style variations. + * @param {string} type The property to filter by. + * + * @return {Array} The style variation with only the specified property filtered. + */ +export const getVariationsByProperty = ( user, variations, type ) => { + const userSettingsWithoutType = removePropertyFromObject( + cloneDeep( user ), + type + ); + + const variationsWithOnlyType = variations.map( ( variation ) => { + return filterObjectByProperty( variation, type ); + } ); + + return variationsWithOnlyType.map( ( variation ) => + mergeBaseAndUserConfigs( userSettingsWithoutType, variation ) + ); +}; diff --git a/packages/edit-site/src/components/global-styles/variations-color.js b/packages/edit-site/src/components/global-styles/variations-color.js index 1025087e7039aa..73db7e37496714 100644 --- a/packages/edit-site/src/components/global-styles/variations-color.js +++ b/packages/edit-site/src/components/global-styles/variations-color.js @@ -8,7 +8,7 @@ import classnames from 'classnames'; */ import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; -import { useMemo, useContext, useState } from '@wordpress/element'; +import { useMemo, useContext } from '@wordpress/element'; import { ENTER } from '@wordpress/keycodes'; import { __experimentalHeading as Heading, @@ -26,58 +26,13 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import { mergeBaseAndUserConfigs } from './global-styles-provider'; import { unlock } from '../../lock-unlock'; import ColorIndicatorWrapper from './color-indicator-wrapper'; +import { getVariationsByProperty } from './utils'; const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( blockEditorPrivateApis ); -function cloneDeep( object ) { - return ! object ? {} : JSON.parse( JSON.stringify( object ) ); -} - -const filterObjectByProperty = ( object, property ) => { - const newObject = {}; - Object.keys( object ).forEach( ( key ) => { - if ( key === property ) { - newObject[ key ] = object[ key ]; - } else if ( typeof object[ key ] === 'object' ) { - const newFilter = filterObjectByProperty( object[ key ], property ); - if ( Object.keys( newFilter ).length ) { - newObject[ key ] = newFilter; - } - } - } ); - return newObject; -}; - -const removePropertyFromObject = ( object, property ) => { - for ( const key in object ) { - if ( key === property ) { - delete object[ key ]; - } else if ( typeof object[ key ] === 'object' ) { - removePropertyFromObject( object[ key ], property ); - } - } - return object; -}; - -const getVariationsByType = ( user, variations, type ) => { - const userSettingsWithoutType = removePropertyFromObject( - cloneDeep( user ), - type - ); - - const variationsWithOnlyType = variations.map( ( variation ) => { - return filterObjectByProperty( variation, type ); - } ); - - return variationsWithOnlyType.map( ( variation ) => - mergeBaseAndUserConfigs( userSettingsWithoutType, variation ) - ); -}; - function ColorVariation( { variation } ) { - const [ isFocused, setIsFocused ] = useState( false ); const { base, user, setUserConfig } = useContext( GlobalStylesContext ); const context = useMemo( () => { return { @@ -135,9 +90,6 @@ function ColorVariation( { variation } ) { tabIndex="0" aria-label={ label } aria-current={ isActive } - isFocused={ isFocused } - onFocus={ () => setIsFocused( true ) } - onBlur={ () => setIsFocused( false ) } >
diff --git a/packages/edit-site/src/components/global-styles/variations-typography.js b/packages/edit-site/src/components/global-styles/variations-typography.js index db93f844165df4..4902501915b731 100644 --- a/packages/edit-site/src/components/global-styles/variations-typography.js +++ b/packages/edit-site/src/components/global-styles/variations-typography.js @@ -24,51 +24,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import { mergeBaseAndUserConfigs } from './global-styles-provider'; import { unlock } from '../../lock-unlock'; import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles'; - -function cloneDeep( object ) { - return ! object ? {} : JSON.parse( JSON.stringify( object ) ); -} - -const filterObjectByProperty = ( object, property ) => { - const newObject = {}; - Object.keys( object ).forEach( ( key ) => { - if ( key === property ) { - newObject[ key ] = object[ key ]; - } else if ( typeof object[ key ] === 'object' ) { - const newFilter = filterObjectByProperty( object[ key ], property ); - if ( Object.keys( newFilter ).length ) { - newObject[ key ] = newFilter; - } - } - } ); - return newObject; -}; - -const removePropertyFromObject = ( object, property ) => { - for ( const key in object ) { - if ( key === property ) { - delete object[ key ]; - } else if ( typeof object[ key ] === 'object' ) { - removePropertyFromObject( object[ key ], property ); - } - } - return object; -}; - -const getVariationsByType = ( user, variations, type ) => { - const userSettingsWithoutType = removePropertyFromObject( - cloneDeep( user ), - type - ); - - const variationsWithOnlyType = variations.map( ( variation ) => { - return filterObjectByProperty( variation, type ); - } ); - - return variationsWithOnlyType.map( ( variation ) => - mergeBaseAndUserConfigs( userSettingsWithoutType, variation ) - ); -}; +import { getVariationsByProperty } from './utils'; const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( blockEditorPrivateApis @@ -220,7 +176,7 @@ export default function TypographyVariations() { const { base, user } = useContext( GlobalStylesContext ); const typographyVariations = - variations && getVariationsByType( user, variations, 'typography' ); + variations && getVariationsByProperty( user, variations, 'typography' ); const uniqueTypographyVariations = []; const uniqueTypographyNames = []; From baab507f0511327be996863587df463ae1d2efc0 Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 6 Dec 2023 18:31:01 +0000 Subject: [PATCH 16/48] Add typesets --- .../global-styles/screen-typography.js | 2 + .../src/components/global-styles/typeset.js | 100 ++++++++++++++++++ .../src/components/global-styles/utils.js | 16 +-- 3 files changed, 110 insertions(+), 8 deletions(-) create mode 100644 packages/edit-site/src/components/global-styles/typeset.js diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js index 9e4d95e587cba1..ea2265387c60b4 100644 --- a/packages/edit-site/src/components/global-styles/screen-typography.js +++ b/packages/edit-site/src/components/global-styles/screen-typography.js @@ -13,6 +13,7 @@ import TypographyElements from './typography-elements'; import FontFamilies from './font-families'; import ScreenHeader from './header'; import TypographyVariations from './variations-typography'; +import Typeset from './typeset'; function ScreenTypography() { const fontLibraryEnabled = useSelect( @@ -31,6 +32,7 @@ function ScreenTypography() { />
+ { fontLibraryEnabled && } diff --git a/packages/edit-site/src/components/global-styles/typeset.js b/packages/edit-site/src/components/global-styles/typeset.js new file mode 100644 index 00000000000000..6ac185511a804d --- /dev/null +++ b/packages/edit-site/src/components/global-styles/typeset.js @@ -0,0 +1,100 @@ +/** + * WordPress dependencies + */ +import { store as coreStore } from '@wordpress/core-data'; +import { useSelect } from '@wordpress/data'; +import { useContext } from '@wordpress/element'; +import { __experimentalHeading as Heading } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import { mergeBaseAndUserConfigs } from './global-styles-provider'; +import { unlock } from '../../lock-unlock'; +import { getVariationsByProperty } from './utils'; +import TypographyVariations from './variations-typography'; + +const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); + +const getFontFamilies = ( themeJson ) => { + const headingFontFamilyCSS = + themeJson?.styles?.elements?.heading?.typography?.fontFamily; + const headingFontFamilyVariable = + headingFontFamilyCSS && + headingFontFamilyCSS.replace( 'var(', '' ).replace( ')', '' ); + const headingFontFamilySlug = headingFontFamilyVariable + ?.split( '--' ) + .slice( -1 )[ 0 ]; + + const bodyFontFamilyVariable = themeJson?.styles?.typography?.fontFamily + .replace( 'var(', '' ) + .replace( ')', '' ); + + const bodyFontFamilySlug = bodyFontFamilyVariable + ?.split( '--' ) + .slice( -1 )[ 0 ]; + + const fontFamilies = themeJson?.settings?.typography?.fontFamilies?.theme; // TODO this could not be under theme. + + const bodyFontFamily = fontFamilies.find( + ( fontFamily ) => fontFamily.slug === bodyFontFamilySlug + ); + + let headingFontFamily = fontFamilies.find( + ( fontFamily ) => fontFamily.slug === headingFontFamilySlug + ); + + if ( ! headingFontFamily ) { + headingFontFamily = bodyFontFamily; + } + + return [ bodyFontFamily, headingFontFamily ]; +}; +const getFontFamilyNames = ( themeJson ) => { + const [ bodyFontFamily, headingFontFamily ] = getFontFamilies( themeJson ); + return [ bodyFontFamily?.name, headingFontFamily?.name ]; +}; + +export default function Typeset() { + const variations = useSelect( ( select ) => { + return select( + coreStore + ).__experimentalGetCurrentThemeGlobalStylesVariations(); + }, [] ); + + const { base, user } = useContext( GlobalStylesContext ); + + const typographyVariations = + variations && getVariationsByProperty( user, variations, 'typography' ); + + const uniqueTypographyVariations = []; + const uniqueTypographyNames = []; + const isDup = ( x, y ) => { + return uniqueTypographyNames.find( ( it ) => { + return JSON.stringify( it ) === JSON.stringify( [ x, y ] ); + } ); + }; + + typographyVariations?.forEach( ( variation ) => { + const [ bodyFontFamilyName, headingFontFamilyName ] = + getFontFamilyNames( mergeBaseAndUserConfigs( base, variation ) ); + if ( ! isDup( bodyFontFamilyName, headingFontFamilyName ) ) { + uniqueTypographyVariations.push( variation ); + uniqueTypographyNames.push( [ + bodyFontFamilyName, + headingFontFamilyName, + ] ); + } + } ); + + return ( + <> +
+ { __( 'Fonts' ) } +
+ + + ); +} diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js index d238b847455cdb..64ba94c1f5e10c 100644 --- a/packages/edit-site/src/components/global-styles/utils.js +++ b/packages/edit-site/src/components/global-styles/utils.js @@ -70,21 +70,21 @@ const removePropertyFromObject = ( object, property ) => { * * @param {Object} user The user variation. * @param {Array} variations The other style variations. - * @param {string} type The property to filter by. + * @param {string} property The property to filter by. * * @return {Array} The style variation with only the specified property filtered. */ -export const getVariationsByProperty = ( user, variations, type ) => { - const userSettingsWithoutType = removePropertyFromObject( +export const getVariationsByProperty = ( user, variations, property ) => { + const userSettingsWithoutProperty = removePropertyFromObject( cloneDeep( user ), - type + property ); - const variationsWithOnlyType = variations.map( ( variation ) => { - return filterObjectByProperty( variation, type ); + const variationsWithOnlyProperty = variations.map( ( variation ) => { + return filterObjectByProperty( variation, property ); } ); - return variationsWithOnlyType.map( ( variation ) => - mergeBaseAndUserConfigs( userSettingsWithoutType, variation ) + return variationsWithOnlyProperty.map( ( variation ) => + mergeBaseAndUserConfigs( userSettingsWithoutProperty, variation ) ); }; From d8ec72013697a3063e4f4624bd6df61eacf0195f Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 7 Dec 2023 11:16:56 +0000 Subject: [PATCH 17/48] reorg typogrpahy --- .../screen-typography-typesets.js | 112 ++++++++++++++++++ .../src/components/global-styles/typeset.js | 18 ++- .../src/components/global-styles/ui.js | 5 + .../global-styles/variations-typography.js | 10 +- 4 files changed, 135 insertions(+), 10 deletions(-) create mode 100644 packages/edit-site/src/components/global-styles/screen-typography-typesets.js diff --git a/packages/edit-site/src/components/global-styles/screen-typography-typesets.js b/packages/edit-site/src/components/global-styles/screen-typography-typesets.js new file mode 100644 index 00000000000000..01938552613ccf --- /dev/null +++ b/packages/edit-site/src/components/global-styles/screen-typography-typesets.js @@ -0,0 +1,112 @@ +/** + * WordPress dependencies + */ +import { store as coreStore } from '@wordpress/core-data'; +import { useSelect } from '@wordpress/data'; +import { useContext } from '@wordpress/element'; +import { __experimentalVStack as VStack } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import { mergeBaseAndUserConfigs } from './global-styles-provider'; +import { unlock } from '../../lock-unlock'; +import { getVariationsByProperty } from './utils'; +import TypographyVariations from './variations-typography'; +import FontFamilies from './font-families'; +import ScreenHeader from './header'; + +const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); + +const getFontFamilies = ( themeJson ) => { + const headingFontFamilyCSS = + themeJson?.styles?.elements?.heading?.typography?.fontFamily; + const headingFontFamilyVariable = + headingFontFamilyCSS && + headingFontFamilyCSS.replace( 'var(', '' ).replace( ')', '' ); + const headingFontFamilySlug = headingFontFamilyVariable + ?.split( '--' ) + .slice( -1 )[ 0 ]; + + const bodyFontFamilyVariable = themeJson?.styles?.typography?.fontFamily + .replace( 'var(', '' ) + .replace( ')', '' ); + + const bodyFontFamilySlug = bodyFontFamilyVariable + ?.split( '--' ) + .slice( -1 )[ 0 ]; + + const fontFamilies = themeJson?.settings?.typography?.fontFamilies?.theme; // TODO this could not be under theme. + + const bodyFontFamily = fontFamilies.find( + ( fontFamily ) => fontFamily.slug === bodyFontFamilySlug + ); + + let headingFontFamily = fontFamilies.find( + ( fontFamily ) => fontFamily.slug === headingFontFamilySlug + ); + + if ( ! headingFontFamily ) { + headingFontFamily = bodyFontFamily; + } + + return [ bodyFontFamily, headingFontFamily ]; +}; +const getFontFamilyNames = ( themeJson ) => { + const [ bodyFontFamily, headingFontFamily ] = getFontFamilies( themeJson ); + return [ bodyFontFamily?.name, headingFontFamily?.name ]; +}; + +export default function ScreenTypographyTypesets() { + const variations = useSelect( ( select ) => { + return select( + coreStore + ).__experimentalGetCurrentThemeGlobalStylesVariations(); + }, [] ); + + const { base, user } = useContext( GlobalStylesContext ); + + const typographyVariations = + variations && getVariationsByProperty( user, variations, 'typography' ); + + const uniqueTypographyVariations = []; + const uniqueTypographyNames = []; + const isDup = ( x, y ) => { + return uniqueTypographyNames.find( ( it ) => { + return JSON.stringify( it ) === JSON.stringify( [ x, y ] ); + } ); + }; + + typographyVariations?.forEach( ( variation ) => { + const [ bodyFontFamilyName, headingFontFamilyName ] = + getFontFamilyNames( mergeBaseAndUserConfigs( base, variation ) ); + if ( ! isDup( bodyFontFamilyName, headingFontFamilyName ) ) { + uniqueTypographyVariations.push( variation ); + uniqueTypographyNames.push( [ + bodyFontFamilyName, + headingFontFamilyName, + ] ); + } + } ); + + return ( + <> + +
+ + { ! window.__experimentalDisableFontLibrary && ( + + ) } + + +
+ + ); +} diff --git a/packages/edit-site/src/components/global-styles/typeset.js b/packages/edit-site/src/components/global-styles/typeset.js index 6ac185511a804d..5132dc139de534 100644 --- a/packages/edit-site/src/components/global-styles/typeset.js +++ b/packages/edit-site/src/components/global-styles/typeset.js @@ -4,7 +4,10 @@ import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; import { useContext } from '@wordpress/element'; -import { __experimentalHeading as Heading } from '@wordpress/components'; +import { + __experimentalHeading as Heading, + __experimentalItemGroup as ItemGroup, +} from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; @@ -14,7 +17,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import { mergeBaseAndUserConfigs } from './global-styles-provider'; import { unlock } from '../../lock-unlock'; import { getVariationsByProperty } from './utils'; -import TypographyVariations from './variations-typography'; +import { NavigationButtonAsItem } from './navigation-button'; const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); @@ -92,9 +95,16 @@ export default function Typeset() { return ( <>
- { __( 'Fonts' ) } + { __( 'Typeset' ) }
- + + + { __( 'Typesets' ) } + + ); } diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index cdaadb1d1acb37..d6553739f36123 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -33,6 +33,7 @@ import { import ScreenBlock from './screen-block'; import ScreenTypography from './screen-typography'; import ScreenTypographyElement from './screen-typography-element'; +import ScreenTypographyTypesets from './screen-typography-typesets'; import ScreenColors from './screen-colors'; import ScreenColorPalette from './screen-color-palette'; import ScreenLayout from './screen-layout'; @@ -328,6 +329,10 @@ function GlobalStylesUI() { + + + + diff --git a/packages/edit-site/src/components/global-styles/variations-typography.js b/packages/edit-site/src/components/global-styles/variations-typography.js index 4902501915b731..ec29b17a3e6a40 100644 --- a/packages/edit-site/src/components/global-styles/variations-typography.js +++ b/packages/edit-site/src/components/global-styles/variations-typography.js @@ -11,7 +11,6 @@ import { useSelect } from '@wordpress/data'; import { useMemo, useContext, useState } from '@wordpress/element'; import { ENTER } from '@wordpress/keycodes'; import { - __experimentalHeading as Heading, __experimentalGrid as Grid, __experimentalVStack as VStack, } from '@wordpress/components'; @@ -25,6 +24,7 @@ import { mergeBaseAndUserConfigs } from './global-styles-provider'; import { unlock } from '../../lock-unlock'; import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles'; import { getVariationsByProperty } from './utils'; +import Subtitle from './subtitle'; const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( blockEditorPrivateApis @@ -199,10 +199,8 @@ export default function TypographyVariations() { } ); return ( - <> -
- { __( 'Typography' ) } -
+ + { __( 'Presets' ) } - + ); } From 0e94cbe24aaf458fcd6915daa9e8e51345792183 Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 7 Dec 2023 12:22:04 +0000 Subject: [PATCH 18/48] tidy up --- .../src/components/global-styles/style.scss | 4 + .../src/components/global-styles/typeset.js | 73 ++++++++----------- 2 files changed, 36 insertions(+), 41 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index f53173437d47d8..9302db47e5a609 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -199,3 +199,7 @@ .edit-site-global-styles-sidebar__panel .block-editor-block-icon svg { fill: currentColor; } + +.edit-site-global-styles-screen-typography-typeset__button { + border: $gray-200 $border-width solid; +} diff --git a/packages/edit-site/src/components/global-styles/typeset.js b/packages/edit-site/src/components/global-styles/typeset.js index 5132dc139de534..8050813979c461 100644 --- a/packages/edit-site/src/components/global-styles/typeset.js +++ b/packages/edit-site/src/components/global-styles/typeset.js @@ -1,14 +1,14 @@ /** * WordPress dependencies */ -import { store as coreStore } from '@wordpress/core-data'; -import { useSelect } from '@wordpress/data'; import { useContext } from '@wordpress/element'; import { - __experimentalHeading as Heading, + FlexItem, + __experimentalHStack as HStack, __experimentalItemGroup as ItemGroup, + __experimentalVStack as VStack, } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; +import { __, _n } from '@wordpress/i18n'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; /** @@ -16,8 +16,9 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; */ import { mergeBaseAndUserConfigs } from './global-styles-provider'; import { unlock } from '../../lock-unlock'; -import { getVariationsByProperty } from './utils'; import { NavigationButtonAsItem } from './navigation-button'; +import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles'; +import Subtitle from './subtitle'; const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); @@ -61,50 +62,40 @@ const getFontFamilyNames = ( themeJson ) => { }; export default function Typeset() { - const variations = useSelect( ( select ) => { - return select( - coreStore - ).__experimentalGetCurrentThemeGlobalStylesVariations(); - }, [] ); - const { base, user } = useContext( GlobalStylesContext ); + const [ bodyFont, headingFont ] = getFontFamilies( + mergeBaseAndUserConfigs( base, user ) + ); + const [ bodyFontFamily, headingFontFamily ] = getFontFamilyNames( + mergeBaseAndUserConfigs( base, user ) + ); - const typographyVariations = - variations && getVariationsByProperty( user, variations, 'typography' ); - - const uniqueTypographyVariations = []; - const uniqueTypographyNames = []; - const isDup = ( x, y ) => { - return uniqueTypographyNames.find( ( it ) => { - return JSON.stringify( it ) === JSON.stringify( [ x, y ] ); - } ); - }; - - typographyVariations?.forEach( ( variation ) => { - const [ bodyFontFamilyName, headingFontFamilyName ] = - getFontFamilyNames( mergeBaseAndUserConfigs( base, variation ) ); - if ( ! isDup( bodyFontFamilyName, headingFontFamilyName ) ) { - uniqueTypographyVariations.push( variation ); - uniqueTypographyNames.push( [ - bodyFontFamilyName, - headingFontFamilyName, - ] ); - } - } ); - + const bodyPreviewStyle = getFamilyPreviewStyle( bodyFont ); + const headingPreviewStyle = getFamilyPreviewStyle( headingFont ); + const fontsCount = 2; // TODO return ( - <> -
- { __( 'Typeset' ) } -
- + + { __( 'Typeset' ) } + - { __( 'Typesets' ) } + + + + { headingFontFamily } + + + { bodyFontFamily } + + + + { fontsCount } { _n( 'font', 'fonts', fontsCount ) } + + - + ); } From e6d2392b782863cfaf3190bcfc0d53743670c3ef Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 7 Dec 2023 14:02:10 +0000 Subject: [PATCH 19/48] tidy up code --- .../src/components/global-styles/typeset.js | 92 ++++++++++--------- .../src/components/global-styles/utils.js | 6 +- .../global-styles/variations-typography.js | 5 +- 3 files changed, 53 insertions(+), 50 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/typeset.js b/packages/edit-site/src/components/global-styles/typeset.js index 8050813979c461..31e0ffc2c9959a 100644 --- a/packages/edit-site/src/components/global-styles/typeset.js +++ b/packages/edit-site/src/components/global-styles/typeset.js @@ -19,60 +19,56 @@ import { unlock } from '../../lock-unlock'; import { NavigationButtonAsItem } from './navigation-button'; import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles'; import Subtitle from './subtitle'; +import { filterObjectByProperty } from './utils'; const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); -const getFontFamilies = ( themeJson ) => { - const headingFontFamilyCSS = - themeJson?.styles?.elements?.heading?.typography?.fontFamily; - const headingFontFamilyVariable = - headingFontFamilyCSS && - headingFontFamilyCSS.replace( 'var(', '' ).replace( ')', '' ); - const headingFontFamilySlug = headingFontFamilyVariable - ?.split( '--' ) - .slice( -1 )[ 0 ]; - - const bodyFontFamilyVariable = themeJson?.styles?.typography?.fontFamily - .replace( 'var(', '' ) - .replace( ')', '' ); - - const bodyFontFamilySlug = bodyFontFamilyVariable - ?.split( '--' ) - .slice( -1 )[ 0 ]; +function getFontFamilyFromSetting( themeJson, setting ) { + const fontFamilyVariable = setting.replace( 'var(', '' ).replace( ')', '' ); + const fontFamilySlug = fontFamilyVariable?.split( '--' ).slice( -1 )[ 0 ]; const fontFamilies = themeJson?.settings?.typography?.fontFamilies?.theme; // TODO this could not be under theme. - const bodyFontFamily = fontFamilies.find( - ( fontFamily ) => fontFamily.slug === bodyFontFamilySlug - ); - - let headingFontFamily = fontFamilies.find( - ( fontFamily ) => fontFamily.slug === headingFontFamilySlug + return fontFamilies.find( + ( fontFamily ) => fontFamily.slug === fontFamilySlug ); +} - if ( ! headingFontFamily ) { - headingFontFamily = bodyFontFamily; +function getValuesFromObject( object, property, result = [] ) { + for ( const key in object ) { + if ( typeof object[ key ] === 'object' ) { + getValuesFromObject( object[ key ], property, result ); + } else { + result.push( object[ key ] ); + } } - - return [ bodyFontFamily, headingFontFamily ]; -}; -const getFontFamilyNames = ( themeJson ) => { - const [ bodyFontFamily, headingFontFamily ] = getFontFamilies( themeJson ); - return [ bodyFontFamily?.name, headingFontFamily?.name ]; -}; + return result; +} export default function Typeset() { const { base, user } = useContext( GlobalStylesContext ); - const [ bodyFont, headingFont ] = getFontFamilies( - mergeBaseAndUserConfigs( base, user ) + + const themeJson = mergeBaseAndUserConfigs( base, user ); + + const fontFamilySettings = filterObjectByProperty( + themeJson.styles, // Don't need the stuff in settings. + 'fontFamily' + ); + + const fontFamilyValuesFromThemeJson = getValuesFromObject( + fontFamilySettings, + 'fontFamily' ); - const [ bodyFontFamily, headingFontFamily ] = getFontFamilyNames( - mergeBaseAndUserConfigs( base, user ) + + const uniqueFontFamilies = Array.from( + new Set( fontFamilyValuesFromThemeJson ) // To remove duplicates. + ).filter( ( value ) => value !== 'inherit' ); // To remove inherit. + + const fontFamilies = uniqueFontFamilies.map( ( fontFamily ) => + getFontFamilyFromSetting( themeJson, fontFamily ) ); - const bodyPreviewStyle = getFamilyPreviewStyle( bodyFont ); - const headingPreviewStyle = getFamilyPreviewStyle( headingFont ); - const fontsCount = 2; // TODO + const fontsCount = fontFamilies.length; return ( { __( 'Typeset' ) } @@ -83,12 +79,18 @@ export default function Typeset() { > - - { headingFontFamily } - - - { bodyFontFamily } - + { fontFamilies.map( ( fontFamily ) => { + const style = + getFamilyPreviewStyle( fontFamily ); + return ( + + { fontFamily.name } + + ); + } ) } { fontsCount } { _n( 'font', 'fonts', fontsCount ) } diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js index 64ba94c1f5e10c..cab4e4cfe32e98 100644 --- a/packages/edit-site/src/components/global-styles/utils.js +++ b/packages/edit-site/src/components/global-styles/utils.js @@ -32,7 +32,11 @@ function cloneDeep( object ) { * @param {Object} property The property to filter by * @return {Object} The merged object. */ -const filterObjectByProperty = ( object, property ) => { +export const filterObjectByProperty = ( object, property ) => { + if ( ! object ) { + return {}; + } + const newObject = {}; Object.keys( object ).forEach( ( key ) => { if ( key === property ) { diff --git a/packages/edit-site/src/components/global-styles/variations-typography.js b/packages/edit-site/src/components/global-styles/variations-typography.js index ec29b17a3e6a40..3a879d00b3db55 100644 --- a/packages/edit-site/src/components/global-styles/variations-typography.js +++ b/packages/edit-site/src/components/global-styles/variations-typography.js @@ -69,9 +69,6 @@ const getFontFamilyNames = ( themeJson ) => { return [ bodyFontFamily?.name, headingFontFamily?.name ]; }; -const normalizedHeight = 100; -const ratio = 1; - function TypographyVariation( { variation } ) { const [ isFocused, setIsFocused ] = useState( false ); const { base, user, setUserConfig } = useContext( GlobalStylesContext ); @@ -149,7 +146,7 @@ function TypographyVariation( { variation } ) { className="edit-site-global-styles-variations_item-preview" isFocused={ isFocused } style={ { - height: normalizedHeight * ratio, + height: 70, lineHeight: 1.2, textAlign: 'center', } } From dcf7f891f0e802796e07260c3e837722de41f913 Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 7 Dec 2023 14:22:43 +0000 Subject: [PATCH 20/48] restyle color palettes --- .../src/components/global-styles/style.scss | 4 ++++ .../global-styles/variations-color.js | 21 ++++++++++++------- 2 files changed, 17 insertions(+), 8 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index 9302db47e5a609..14f51d533a3799 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -102,6 +102,10 @@ box-shadow: 0 0 0 $border-width $gray-200; // Shown in Windows 10 high contrast mode. outline: 1px solid transparent; + + &.is-color-variation { + padding: $grid-unit-30; + } } &.is-active .edit-site-global-styles-variations_item-preview { diff --git a/packages/edit-site/src/components/global-styles/variations-color.js b/packages/edit-site/src/components/global-styles/variations-color.js index 73db7e37496714..a262bc532ccbcf 100644 --- a/packages/edit-site/src/components/global-styles/variations-color.js +++ b/packages/edit-site/src/components/global-styles/variations-color.js @@ -11,9 +11,9 @@ import { useSelect } from '@wordpress/data'; import { useMemo, useContext } from '@wordpress/element'; import { ENTER } from '@wordpress/keycodes'; import { - __experimentalHeading as Heading, __experimentalGrid as Grid, __experimentalHStack as HStack, + __experimentalVStack as VStack, __experimentalZStack as ZStack, ColorIndicator, } from '@wordpress/components'; @@ -27,6 +27,7 @@ import { mergeBaseAndUserConfigs } from './global-styles-provider'; import { unlock } from '../../lock-unlock'; import ColorIndicatorWrapper from './color-indicator-wrapper'; import { getVariationsByProperty } from './utils'; +import Subtitle from './subtitle'; const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( blockEditorPrivateApis @@ -81,9 +82,12 @@ function ColorVariation( { variation } ) { return (
-
+
{ colors @@ -126,8 +131,8 @@ export default function ColorVariations() { variations && getVariationsByProperty( user, variations, 'color' ); // should also get filter? return ( - <> - { __( 'Presets' ) } + + { __( 'Presets' ) } - + ); } From e8033c5f6f1a4d6a377fce6a4da2c7354943759c Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 7 Dec 2023 14:24:26 +0000 Subject: [PATCH 21/48] restyle color palettes --- packages/edit-site/src/components/global-styles/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index 14f51d533a3799..fb4dd71251fa53 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -104,7 +104,7 @@ outline: 1px solid transparent; &.is-color-variation { - padding: $grid-unit-30; + padding: $grid-unit-10; } } From b4b0f80c30b02e789957735f733aca644f0e56ac Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 7 Dec 2023 16:18:57 +0000 Subject: [PATCH 22/48] remove typesets --- .../screen-typography-typesets.js | 12 +----- .../global-styles/screen-typography.js | 41 +++++++++++++++---- 2 files changed, 36 insertions(+), 17 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/screen-typography-typesets.js b/packages/edit-site/src/components/global-styles/screen-typography-typesets.js index 01938552613ccf..a9e7d027e72a89 100644 --- a/packages/edit-site/src/components/global-styles/screen-typography-typesets.js +++ b/packages/edit-site/src/components/global-styles/screen-typography-typesets.js @@ -4,7 +4,6 @@ import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; import { useContext } from '@wordpress/element'; -import { __experimentalVStack as VStack } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; @@ -15,7 +14,6 @@ import { mergeBaseAndUserConfigs } from './global-styles-provider'; import { unlock } from '../../lock-unlock'; import { getVariationsByProperty } from './utils'; import TypographyVariations from './variations-typography'; -import FontFamilies from './font-families'; import ScreenHeader from './header'; const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); @@ -99,14 +97,8 @@ export default function ScreenTypographyTypesets() { 'Manage typography of different global elements on your site.' ) } /> -
- - { ! window.__experimentalDisableFontLibrary && ( - - ) } - - -
+
+ ); } diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js index ea2265387c60b4..344e2c6ea60408 100644 --- a/packages/edit-site/src/components/global-styles/screen-typography.js +++ b/packages/edit-site/src/components/global-styles/screen-typography.js @@ -1,8 +1,14 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; -import { __experimentalVStack as VStack } from '@wordpress/components'; +import { __, isRTL } from '@wordpress/i18n'; +import { chevronLeft, chevronRight } from '@wordpress/icons'; +import { + FlexItem, + __experimentalItemGroup as ItemGroup, + __experimentalHStack as HStack, + __experimentalVStack as VStack, +} from '@wordpress/components'; import { store as editorStore } from '@wordpress/editor'; import { useSelect } from '@wordpress/data'; @@ -10,10 +16,10 @@ import { useSelect } from '@wordpress/data'; * Internal dependencies */ import TypographyElements from './typography-elements'; +import { IconWithCurrentColor } from './icon-with-current-color'; import FontFamilies from './font-families'; import ScreenHeader from './header'; -import TypographyVariations from './variations-typography'; -import Typeset from './typeset'; +import { NavigationButtonAsItem } from './navigation-button'; function ScreenTypography() { const fontLibraryEnabled = useSelect( @@ -32,10 +38,31 @@ function ScreenTypography() { />
- - { fontLibraryEnabled && } + { ! window.__experimentalDisableFontLibrary && ( + + { fontLibraryEnabled && } + + + + + { __( 'Typesets' ) } + + + + + + + ) } -
From f156dd5d978e1de3382ba99b64cb8a5d9b743f8c Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 7 Dec 2023 16:25:02 +0000 Subject: [PATCH 23/48] add padding back --- .../components/global-styles/screen-typography-typesets.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/screen-typography-typesets.js b/packages/edit-site/src/components/global-styles/screen-typography-typesets.js index a9e7d027e72a89..8491572e2d85e0 100644 --- a/packages/edit-site/src/components/global-styles/screen-typography-typesets.js +++ b/packages/edit-site/src/components/global-styles/screen-typography-typesets.js @@ -97,8 +97,9 @@ export default function ScreenTypographyTypesets() { 'Manage typography of different global elements on your site.' ) } /> -
- +
+ +
); } From 00726ba1823625066837b18f169d0a71c7768100 Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 7 Dec 2023 17:43:53 +0000 Subject: [PATCH 24/48] refactor --- .../screen-typography-typesets.js | 79 ------------------- .../global-styles/variations-typography.js | 46 +++++------ 2 files changed, 24 insertions(+), 101 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/screen-typography-typesets.js b/packages/edit-site/src/components/global-styles/screen-typography-typesets.js index 8491572e2d85e0..9e631632e9d472 100644 --- a/packages/edit-site/src/components/global-styles/screen-typography-typesets.js +++ b/packages/edit-site/src/components/global-styles/screen-typography-typesets.js @@ -1,94 +1,15 @@ /** * WordPress dependencies */ -import { store as coreStore } from '@wordpress/core-data'; -import { useSelect } from '@wordpress/data'; -import { useContext } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; /** * Internal dependencies */ -import { mergeBaseAndUserConfigs } from './global-styles-provider'; -import { unlock } from '../../lock-unlock'; -import { getVariationsByProperty } from './utils'; import TypographyVariations from './variations-typography'; import ScreenHeader from './header'; -const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); - -const getFontFamilies = ( themeJson ) => { - const headingFontFamilyCSS = - themeJson?.styles?.elements?.heading?.typography?.fontFamily; - const headingFontFamilyVariable = - headingFontFamilyCSS && - headingFontFamilyCSS.replace( 'var(', '' ).replace( ')', '' ); - const headingFontFamilySlug = headingFontFamilyVariable - ?.split( '--' ) - .slice( -1 )[ 0 ]; - - const bodyFontFamilyVariable = themeJson?.styles?.typography?.fontFamily - .replace( 'var(', '' ) - .replace( ')', '' ); - - const bodyFontFamilySlug = bodyFontFamilyVariable - ?.split( '--' ) - .slice( -1 )[ 0 ]; - - const fontFamilies = themeJson?.settings?.typography?.fontFamilies?.theme; // TODO this could not be under theme. - - const bodyFontFamily = fontFamilies.find( - ( fontFamily ) => fontFamily.slug === bodyFontFamilySlug - ); - - let headingFontFamily = fontFamilies.find( - ( fontFamily ) => fontFamily.slug === headingFontFamilySlug - ); - - if ( ! headingFontFamily ) { - headingFontFamily = bodyFontFamily; - } - - return [ bodyFontFamily, headingFontFamily ]; -}; -const getFontFamilyNames = ( themeJson ) => { - const [ bodyFontFamily, headingFontFamily ] = getFontFamilies( themeJson ); - return [ bodyFontFamily?.name, headingFontFamily?.name ]; -}; - export default function ScreenTypographyTypesets() { - const variations = useSelect( ( select ) => { - return select( - coreStore - ).__experimentalGetCurrentThemeGlobalStylesVariations(); - }, [] ); - - const { base, user } = useContext( GlobalStylesContext ); - - const typographyVariations = - variations && getVariationsByProperty( user, variations, 'typography' ); - - const uniqueTypographyVariations = []; - const uniqueTypographyNames = []; - const isDup = ( x, y ) => { - return uniqueTypographyNames.find( ( it ) => { - return JSON.stringify( it ) === JSON.stringify( [ x, y ] ); - } ); - }; - - typographyVariations?.forEach( ( variation ) => { - const [ bodyFontFamilyName, headingFontFamilyName ] = - getFontFamilyNames( mergeBaseAndUserConfigs( base, variation ) ); - if ( ! isDup( bodyFontFamilyName, headingFontFamilyName ) ) { - uniqueTypographyVariations.push( variation ); - uniqueTypographyNames.push( [ - bodyFontFamilyName, - headingFontFamilyName, - ] ); - } - } ); - return ( <> { - const headingFontFamilyCSS = - themeJson?.styles?.elements?.heading?.typography?.fontFamily; - const headingFontFamilyVariable = - headingFontFamilyCSS && - headingFontFamilyCSS.replace( 'var(', '' ).replace( ')', '' ); - const headingFontFamilySlug = headingFontFamilyVariable - ?.split( '--' ) - .slice( -1 )[ 0 ]; +function getFontFamilyFromSetting( fontFamilies, setting ) { + if ( ! setting ) { + return null; + } - const bodyFontFamilyVariable = themeJson?.styles?.typography?.fontFamily - .replace( 'var(', '' ) - .replace( ')', '' ); + const fontFamilyVariable = setting.replace( 'var(', '' ).replace( ')', '' ); + const fontFamilySlug = fontFamilyVariable?.split( '--' ).slice( -1 )[ 0 ]; - const bodyFontFamilySlug = bodyFontFamilyVariable - ?.split( '--' ) - .slice( -1 )[ 0 ]; + return fontFamilies.find( + ( fontFamily ) => fontFamily.slug === fontFamilySlug + ); +} +const getFontFamilies = ( themeJson ) => { const fontFamilies = themeJson?.settings?.typography?.fontFamilies?.theme; // TODO this could not be under theme. - - const bodyFontFamily = fontFamilies.find( - ( fontFamily ) => fontFamily.slug === bodyFontFamilySlug + const bodyFontFamilySetting = themeJson?.styles?.typography?.fontFamily; + const bodyFontFamily = getFontFamilyFromSetting( + fontFamilies, + bodyFontFamilySetting ); - let headingFontFamily = fontFamilies.find( - ( fontFamily ) => fontFamily.slug === headingFontFamilySlug - ); + const headingFontFamilySetting = + themeJson?.styles?.elements?.heading?.typography?.fontFamily; - if ( ! headingFontFamily ) { + let headingFontFamily; + if ( ! headingFontFamilySetting ) { headingFontFamily = bodyFontFamily; + } else { + headingFontFamily = getFontFamilyFromSetting( + fontFamilies, + themeJson?.styles?.elements?.heading?.typography?.fontFamily + ); } return [ bodyFontFamily, headingFontFamily ]; From f40147398763a8bd99f5c5a0ac5ddbd02359cc3c Mon Sep 17 00:00:00 2001 From: ramon Date: Mon, 5 Feb 2024 15:00:31 +1100 Subject: [PATCH 25/48] Show theme_name + style where there is no typography font family info. Remove unused file. --- .../src/components/global-styles/typeset.js | 103 ------------------ .../src/components/global-styles/utils.js | 7 +- .../global-styles/variations-typography.js | 33 +++--- 3 files changed, 23 insertions(+), 120 deletions(-) delete mode 100644 packages/edit-site/src/components/global-styles/typeset.js diff --git a/packages/edit-site/src/components/global-styles/typeset.js b/packages/edit-site/src/components/global-styles/typeset.js deleted file mode 100644 index 31e0ffc2c9959a..00000000000000 --- a/packages/edit-site/src/components/global-styles/typeset.js +++ /dev/null @@ -1,103 +0,0 @@ -/** - * WordPress dependencies - */ -import { useContext } from '@wordpress/element'; -import { - FlexItem, - __experimentalHStack as HStack, - __experimentalItemGroup as ItemGroup, - __experimentalVStack as VStack, -} from '@wordpress/components'; -import { __, _n } from '@wordpress/i18n'; -import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; - -/** - * Internal dependencies - */ -import { mergeBaseAndUserConfigs } from './global-styles-provider'; -import { unlock } from '../../lock-unlock'; -import { NavigationButtonAsItem } from './navigation-button'; -import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles'; -import Subtitle from './subtitle'; -import { filterObjectByProperty } from './utils'; - -const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); - -function getFontFamilyFromSetting( themeJson, setting ) { - const fontFamilyVariable = setting.replace( 'var(', '' ).replace( ')', '' ); - const fontFamilySlug = fontFamilyVariable?.split( '--' ).slice( -1 )[ 0 ]; - - const fontFamilies = themeJson?.settings?.typography?.fontFamilies?.theme; // TODO this could not be under theme. - - return fontFamilies.find( - ( fontFamily ) => fontFamily.slug === fontFamilySlug - ); -} - -function getValuesFromObject( object, property, result = [] ) { - for ( const key in object ) { - if ( typeof object[ key ] === 'object' ) { - getValuesFromObject( object[ key ], property, result ); - } else { - result.push( object[ key ] ); - } - } - return result; -} - -export default function Typeset() { - const { base, user } = useContext( GlobalStylesContext ); - - const themeJson = mergeBaseAndUserConfigs( base, user ); - - const fontFamilySettings = filterObjectByProperty( - themeJson.styles, // Don't need the stuff in settings. - 'fontFamily' - ); - - const fontFamilyValuesFromThemeJson = getValuesFromObject( - fontFamilySettings, - 'fontFamily' - ); - - const uniqueFontFamilies = Array.from( - new Set( fontFamilyValuesFromThemeJson ) // To remove duplicates. - ).filter( ( value ) => value !== 'inherit' ); // To remove inherit. - - const fontFamilies = uniqueFontFamilies.map( ( fontFamily ) => - getFontFamilyFromSetting( themeJson, fontFamily ) - ); - - const fontsCount = fontFamilies.length; - return ( - - { __( 'Typeset' ) } - - - - - { fontFamilies.map( ( fontFamily ) => { - const style = - getFamilyPreviewStyle( fontFamily ); - return ( - - { fontFamily.name } - - ); - } ) } - - - { fontsCount } { _n( 'font', 'fonts', fontsCount ) } - - - - - - ); -} diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js index cab4e4cfe32e98..652a1ef22896c7 100644 --- a/packages/edit-site/src/components/global-styles/utils.js +++ b/packages/edit-site/src/components/global-styles/utils.js @@ -85,7 +85,12 @@ export const getVariationsByProperty = ( user, variations, property ) => { ); const variationsWithOnlyProperty = variations.map( ( variation ) => { - return filterObjectByProperty( variation, property ); + return { + ...filterObjectByProperty( variation, property ), + // Add variation title and description to every variation item. + title: variation?.title, + description: variation?.description, + }; } ); return variationsWithOnlyProperty.map( ( variation ) => diff --git a/packages/edit-site/src/components/global-styles/variations-typography.js b/packages/edit-site/src/components/global-styles/variations-typography.js index f9fc4f667a06ec..58f8f36056c5fb 100644 --- a/packages/edit-site/src/components/global-styles/variations-typography.js +++ b/packages/edit-site/src/components/global-styles/variations-typography.js @@ -119,10 +119,12 @@ function TypographyVariation( { variation } ) { const [ bodyFontFamilies, headingFontFamilies ] = getFontFamilies( mergeBaseAndUserConfigs( base, variation ) ); - - const bodyPreviewStyle = getFamilyPreviewStyle( bodyFontFamilies ); + const bodyPreviewStyle = bodyFontFamilies + ? getFamilyPreviewStyle( bodyFontFamilies ) + : {}; const headingPreviewStyle = { - ...getFamilyPreviewStyle( headingFontFamilies ), + ...( headingFontFamilies && + getFamilyPreviewStyle( headingFontFamilies ) ), fontSize: '1.2rem', }; @@ -154,10 +156,10 @@ function TypographyVariation( { variation } ) { } } >
- { headingFontFamilies.name } + { headingFontFamilies?.name || variation?.title }
- { bodyFontFamilies.name } + { bodyFontFamilies?.name || __( 'Typeset' ) }
@@ -173,10 +175,8 @@ export default function TypographyVariations() { }, [] ); const { base, user } = useContext( GlobalStylesContext ); - const typographyVariations = variations && getVariationsByProperty( user, variations, 'typography' ); - const uniqueTypographyVariations = []; const uniqueTypographyNames = []; const isDup = ( x, y ) => { @@ -204,15 +204,16 @@ export default function TypographyVariations() { columns={ 2 } className="edit-site-global-styles-style-variations-container" > - { uniqueTypographyVariations && - uniqueTypographyVariations.map( ( variation, index ) => { - return ( - - ); - } ) } + { typographyVariations && typographyVariations.length + ? uniqueTypographyVariations.map( ( variation, index ) => { + return ( + + ); + } ) + : null } ); From c0be1635ad4a07a7d0822235255e267099c81b9c Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 6 Feb 2024 19:12:58 +1100 Subject: [PATCH 26/48] Consolidating logic into a hook phase 1 --- .../global-styles/color-palette-panel.js | 8 +- .../global-styles/screen-typography.js | 46 ++++--- .../use-theme-style-variations-by-property.js | 118 ++++++++++++++++++ .../src/components/global-styles/utils.js | 87 ------------- .../global-styles/variations-color.js | 15 +-- .../global-styles/variations-typography.js | 17 +-- 6 files changed, 159 insertions(+), 132 deletions(-) create mode 100644 packages/edit-site/src/components/global-styles/use-theme-style-variations-by-property.js diff --git a/packages/edit-site/src/components/global-styles/color-palette-panel.js b/packages/edit-site/src/components/global-styles/color-palette-panel.js index 15b0192ae13a78..5d4cfe9e007b58 100644 --- a/packages/edit-site/src/components/global-styles/color-palette-panel.js +++ b/packages/edit-site/src/components/global-styles/color-palette-panel.js @@ -14,6 +14,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; */ import { unlock } from '../../lock-unlock'; import ColorVariations from './variations-color'; +import useThemeStyleVariationsByProperty from './use-theme-style-variations-by-property'; const { useGlobalSetting } = unlock( blockEditorPrivateApis ); const mobilePopoverProps = { placement: 'bottom-start', offset: 8 }; @@ -46,7 +47,9 @@ export default function ColorPalettePanel( { name } ) { 'color.defaultPalette', name ); - + const colorVariations = useThemeStyleVariationsByProperty( { + styleProperty: 'color', + } ); const isMobileViewport = useViewportMatch( 'small', '<' ); const popoverProps = isMobileViewport ? mobilePopoverProps : undefined; @@ -90,7 +93,8 @@ export default function ColorPalettePanel( { name } ) { slugPrefix="custom-" popoverProps={ popoverProps } /> - + { /* @TODO: pass down variations to component? */ } + { !! colorVariations.length && } ); } diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js index 344e2c6ea60408..7f94a4415e4c18 100644 --- a/packages/edit-site/src/components/global-styles/screen-typography.js +++ b/packages/edit-site/src/components/global-styles/screen-typography.js @@ -20,6 +20,7 @@ import { IconWithCurrentColor } from './icon-with-current-color'; import FontFamilies from './font-families'; import ScreenHeader from './header'; import { NavigationButtonAsItem } from './navigation-button'; +import useThemeStyleVariationsByProperty from './use-theme-style-variations-by-property'; function ScreenTypography() { const fontLibraryEnabled = useSelect( @@ -27,7 +28,9 @@ function ScreenTypography() { select( editorStore ).getEditorSettings().fontLibraryEnabled, [] ); - + const typographyVariations = useThemeStyleVariationsByProperty( { + styleProperty: 'typography', + } ); return ( <> { fontLibraryEnabled && } - - - - - { __( 'Typesets' ) } - - - - - + { /* @TODO: abstract into component */ } + { !! typographyVariations.length && ( + + + + + { __( 'Typesets' ) } + + + + + + ) } ) } diff --git a/packages/edit-site/src/components/global-styles/use-theme-style-variations-by-property.js b/packages/edit-site/src/components/global-styles/use-theme-style-variations-by-property.js new file mode 100644 index 00000000000000..fdb70b2f2603fc --- /dev/null +++ b/packages/edit-site/src/components/global-styles/use-theme-style-variations-by-property.js @@ -0,0 +1,118 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; +import { store as coreStore } from '@wordpress/core-data'; +import { useContext, useMemo } from '@wordpress/element'; +import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import { unlock } from '../../lock-unlock'; +import cloneDeep from '../../utils/clone-deep'; +import { mergeBaseAndUserConfigs } from './global-styles-provider'; +/** + * Returns a new object with only the properties specified in `properties`. + * + * @param {Object} object The object to filter + * @param {Object} property The property to filter by + * @return {Object} The merged object. + */ +export const filterObjectByProperty = ( object, property ) => { + if ( ! object ) { + return {}; + } + + const newObject = {}; + Object.keys( object ).forEach( ( key ) => { + if ( key === property ) { + newObject[ key ] = object[ key ]; + } else if ( typeof object[ key ] === 'object' ) { + const newFilter = filterObjectByProperty( object[ key ], property ); + if ( Object.keys( newFilter ).length ) { + newObject[ key ] = newFilter; + } + } + } ); + return newObject; +}; + +/** + * Removes all instances of a property from an object. + * + * @param {Object} object + * @param {string} property + * @return {Object} The modified object. + */ +const removePropertyFromObject = ( object, property ) => { + for ( const key in object ) { + if ( key === property ) { + delete object[ key ]; + } else if ( typeof object[ key ] === 'object' ) { + removePropertyFromObject( object[ key ], property ); + } + } + return object; +}; + +/** + * Return style variations with all properties removed except for the one specified in `type`. + * + * @param {Object} user The user variation. + * @param {Array} variations The other style variations. + * @param {string} property The property to filter by. + * + * @return {Array} The style variation with only the specified property filtered. + */ +export const getVariationsByProperty = ( user, variations, property ) => { + const userSettingsWithoutProperty = removePropertyFromObject( + cloneDeep( user ), + property + ); + + const variationsWithOnlyProperty = variations.map( ( variation ) => { + return { + ...filterObjectByProperty( variation, property ), + // Add variation title and description to every variation item. + title: variation?.title, + description: variation?.description, + }; + } ); + + return variationsWithOnlyProperty.map( ( variation ) => + mergeBaseAndUserConfigs( userSettingsWithoutProperty, variation ) + ); +}; + +const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); + +export default function useThemeStyleVariationsByProperty( { styleProperty } ) { + const variations = useSelect( ( select ) => { + return select( + coreStore + ).__experimentalGetCurrentThemeGlobalStylesVariations(); + }, [] ); + const { user } = useContext( GlobalStylesContext ); + + return useMemo( () => { + if ( ! styleProperty || ! variations.length ) { + return []; + } + /* + @TODO: + For colors, should also get filter? + Memoize/cache all this better? + Test with empty theme + Test with 2022 - typography font families bork for some reason + + */ + const styleVariations = getVariationsByProperty( + user, + variations, + styleProperty + ); + + return styleVariations.length ? styleVariations : []; + }, [ styleProperty, variations ] ); +} diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js index 652a1ef22896c7..05a004b878e5f9 100644 --- a/packages/edit-site/src/components/global-styles/utils.js +++ b/packages/edit-site/src/components/global-styles/utils.js @@ -1,8 +1,3 @@ -/** - * Internal dependencies - */ -import { mergeBaseAndUserConfigs } from './global-styles-provider'; - /** * * @param {string} variation The variation name. @@ -15,85 +10,3 @@ export function getVariationClassName( variation ) { } return `is-style-${ variation }`; } - -/** - * Makes a copy of an object without storing any references to the original object. - * @param {Object} object - * @return {Object} The cloned object. - */ -function cloneDeep( object ) { - return ! object ? {} : JSON.parse( JSON.stringify( object ) ); -} - -/** - * Returns a new object with only the properties specified in `properties`. - * - * @param {Object} object The object to filter - * @param {Object} property The property to filter by - * @return {Object} The merged object. - */ -export const filterObjectByProperty = ( object, property ) => { - if ( ! object ) { - return {}; - } - - const newObject = {}; - Object.keys( object ).forEach( ( key ) => { - if ( key === property ) { - newObject[ key ] = object[ key ]; - } else if ( typeof object[ key ] === 'object' ) { - const newFilter = filterObjectByProperty( object[ key ], property ); - if ( Object.keys( newFilter ).length ) { - newObject[ key ] = newFilter; - } - } - } ); - return newObject; -}; - -/** - * Removes all instances of a property from an object. - * - * @param {Object} object - * @param {string} property - * @return {Object} The modified object. - */ -const removePropertyFromObject = ( object, property ) => { - for ( const key in object ) { - if ( key === property ) { - delete object[ key ]; - } else if ( typeof object[ key ] === 'object' ) { - removePropertyFromObject( object[ key ], property ); - } - } - return object; -}; - -/** - * Return style variations with all properties removed except for the one specified in `type`. - * - * @param {Object} user The user variation. - * @param {Array} variations The other style variations. - * @param {string} property The property to filter by. - * - * @return {Array} The style variation with only the specified property filtered. - */ -export const getVariationsByProperty = ( user, variations, property ) => { - const userSettingsWithoutProperty = removePropertyFromObject( - cloneDeep( user ), - property - ); - - const variationsWithOnlyProperty = variations.map( ( variation ) => { - return { - ...filterObjectByProperty( variation, property ), - // Add variation title and description to every variation item. - title: variation?.title, - description: variation?.description, - }; - } ); - - return variationsWithOnlyProperty.map( ( variation ) => - mergeBaseAndUserConfigs( userSettingsWithoutProperty, variation ) - ); -}; diff --git a/packages/edit-site/src/components/global-styles/variations-color.js b/packages/edit-site/src/components/global-styles/variations-color.js index a262bc532ccbcf..f6a04a41363af1 100644 --- a/packages/edit-site/src/components/global-styles/variations-color.js +++ b/packages/edit-site/src/components/global-styles/variations-color.js @@ -6,8 +6,6 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { store as coreStore } from '@wordpress/core-data'; -import { useSelect } from '@wordpress/data'; import { useMemo, useContext } from '@wordpress/element'; import { ENTER } from '@wordpress/keycodes'; import { @@ -26,7 +24,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import { mergeBaseAndUserConfigs } from './global-styles-provider'; import { unlock } from '../../lock-unlock'; import ColorIndicatorWrapper from './color-indicator-wrapper'; -import { getVariationsByProperty } from './utils'; +import useThemeStyleVariationsByProperty from './use-theme-style-variations-by-property'; import Subtitle from './subtitle'; const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( @@ -121,14 +119,9 @@ function ColorVariation( { variation } ) { } export default function ColorVariations() { - const { user } = useContext( GlobalStylesContext ); - const variations = useSelect( ( select ) => { - return select( - coreStore - ).__experimentalGetCurrentThemeGlobalStylesVariations(); - }, [] ); - const colorVariations = - variations && getVariationsByProperty( user, variations, 'color' ); // should also get filter? + const colorVariations = useThemeStyleVariationsByProperty( { + styleProperty: 'color', + } ); return ( diff --git a/packages/edit-site/src/components/global-styles/variations-typography.js b/packages/edit-site/src/components/global-styles/variations-typography.js index 58f8f36056c5fb..d0819c7c3ac245 100644 --- a/packages/edit-site/src/components/global-styles/variations-typography.js +++ b/packages/edit-site/src/components/global-styles/variations-typography.js @@ -6,8 +6,6 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { store as coreStore } from '@wordpress/core-data'; -import { useSelect } from '@wordpress/data'; import { useMemo, useContext, useState } from '@wordpress/element'; import { ENTER } from '@wordpress/keycodes'; import { @@ -23,7 +21,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import { mergeBaseAndUserConfigs } from './global-styles-provider'; import { unlock } from '../../lock-unlock'; import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles'; -import { getVariationsByProperty } from './utils'; +import useThemeStyleVariationsByProperty from './use-theme-style-variations-by-property'; import Subtitle from './subtitle'; const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( @@ -168,15 +166,10 @@ function TypographyVariation( { variation } ) { } export default function TypographyVariations() { - const variations = useSelect( ( select ) => { - return select( - coreStore - ).__experimentalGetCurrentThemeGlobalStylesVariations(); - }, [] ); - - const { base, user } = useContext( GlobalStylesContext ); - const typographyVariations = - variations && getVariationsByProperty( user, variations, 'typography' ); + const typographyVariations = useThemeStyleVariationsByProperty( { + styleProperty: 'typography', + } ); + const { base } = useContext( GlobalStylesContext ); const uniqueTypographyVariations = []; const uniqueTypographyNames = []; const isDup = ( x, y ) => { From 1e15d41bf395ac99c8b6aedd27bf7da4e13d4630 Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 6 Feb 2024 19:41:24 +1100 Subject: [PATCH 27/48] 2022 borks getFamilyPreviewStyle because `face.fontStyle` doesn't exist --- .../font-library-modal/utils/preview-styles.js | 3 ++- .../global-styles/screen-typography.js | 1 + .../global-styles/variations-typography.js | 17 ++++++++++++----- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/preview-styles.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/preview-styles.js index 3ab6618988c0dc..ef2b04feceb5e2 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/preview-styles.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/preview-styles.js @@ -117,7 +117,8 @@ export function getFamilyPreviewStyle( family ) { if ( family.fontFace ) { //get all the font faces with normal style const normalFaces = family.fontFace.filter( - ( face ) => face.fontStyle.toLowerCase() === 'normal' + ( face ) => + face?.fontStyle && face.fontStyle.toLowerCase() === 'normal' ); if ( normalFaces.length > 0 ) { style.fontStyle = 'normal'; diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js index 7f94a4415e4c18..c4bf3c006d7019 100644 --- a/packages/edit-site/src/components/global-styles/screen-typography.js +++ b/packages/edit-site/src/components/global-styles/screen-typography.js @@ -53,6 +53,7 @@ function ScreenTypography() { > + { /* @TODO: think about this category. Could we stress "variations" typography styles to make descriptions/labelling easier (no font-name farming) */ } { __( 'Typesets' ) }
- { bodyFontFamilies?.name || __( 'Typeset' ) } + { bodyFontFamilies?.name || __( 'Typography styles' ) }
@@ -169,6 +169,7 @@ export default function TypographyVariations() { const typographyVariations = useThemeStyleVariationsByProperty( { styleProperty: 'typography', } ); + const { base } = useContext( GlobalStylesContext ); const uniqueTypographyVariations = []; const uniqueTypographyNames = []; @@ -178,15 +179,21 @@ export default function TypographyVariations() { } ); }; + /* + @TODO: not convinced about this yet. + Maybe the first iteration is to name the variations accoroding to their titles. + */ typographyVariations?.forEach( ( variation ) => { const [ bodyFontFamilyName, headingFontFamilyName ] = getFontFamilyNames( mergeBaseAndUserConfigs( base, variation ) ); if ( ! isDup( bodyFontFamilyName, headingFontFamilyName ) ) { uniqueTypographyVariations.push( variation ); - uniqueTypographyNames.push( [ - bodyFontFamilyName, - headingFontFamilyName, - ] ); + if ( bodyFontFamilyName && headingFontFamilyName ) { + uniqueTypographyNames.push( [ + bodyFontFamilyName, + headingFontFamilyName, + ] ); + } } } ); From a23a6ca4bd07d75ea8edf1841657bc1a6268e8e2 Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 6 Feb 2024 19:53:10 +1100 Subject: [PATCH 28/48] comments --- .../global-styles/use-theme-style-variations-by-property.js | 2 +- .../src/components/global-styles/variations-typography.js | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/use-theme-style-variations-by-property.js b/packages/edit-site/src/components/global-styles/use-theme-style-variations-by-property.js index fdb70b2f2603fc..e91fa82b42803d 100644 --- a/packages/edit-site/src/components/global-styles/use-theme-style-variations-by-property.js +++ b/packages/edit-site/src/components/global-styles/use-theme-style-variations-by-property.js @@ -102,7 +102,7 @@ export default function useThemeStyleVariationsByProperty( { styleProperty } ) { /* @TODO: For colors, should also get filter? - Memoize/cache all this better? + Memoize/cache all this better? E.g., should we memoize the variations? Test with empty theme Test with 2022 - typography font families bork for some reason diff --git a/packages/edit-site/src/components/global-styles/variations-typography.js b/packages/edit-site/src/components/global-styles/variations-typography.js index e1e2d6dfff6e49..505436d6ac6e60 100644 --- a/packages/edit-site/src/components/global-styles/variations-typography.js +++ b/packages/edit-site/src/components/global-styles/variations-typography.js @@ -180,8 +180,9 @@ export default function TypographyVariations() { }; /* - @TODO: not convinced about this yet. - Maybe the first iteration is to name the variations accoroding to their titles. + @TODO: not convinced about this yet. Originally, it skipped variations that didn't have + any heading/body fonts, and therefore names. + If we want to pull all "variations", then probably the first iteration is to name the variations according to their titles. */ typographyVariations?.forEach( ( variation ) => { const [ bodyFontFamilyName, headingFontFamilyName ] = From 13bea45fe04df561caef314bc32b3b313fe70d5f Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 8 Feb 2024 15:43:21 +1100 Subject: [PATCH 29/48] Filtering results --- .../global-styles/color-palette-panel.js | 7 ++++++- .../global-styles/screen-typography.js | 4 ++++ .../use-theme-style-variations-by-property.js | 15 +++++++++---- .../global-styles/variations-color.js | 21 ++++++------------- .../global-styles/variations-typography.js | 3 +++ 5 files changed, 30 insertions(+), 20 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/color-palette-panel.js b/packages/edit-site/src/components/global-styles/color-palette-panel.js index 5d4cfe9e007b58..1a8b503581c999 100644 --- a/packages/edit-site/src/components/global-styles/color-palette-panel.js +++ b/packages/edit-site/src/components/global-styles/color-palette-panel.js @@ -49,6 +49,9 @@ export default function ColorPalettePanel( { name } ) { ); const colorVariations = useThemeStyleVariationsByProperty( { styleProperty: 'color', + filter: ( variation ) => + variation?.settings?.color && + Object.keys( variation?.settings?.color ).length, } ); const isMobileViewport = useViewportMatch( 'small', '<' ); const popoverProps = isMobileViewport ? mobilePopoverProps : undefined; @@ -94,7 +97,9 @@ export default function ColorPalettePanel( { name } ) { popoverProps={ popoverProps } /> { /* @TODO: pass down variations to component? */ } - { !! colorVariations.length && } + { !! colorVariations.length && ( + + ) } ); } diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js index c4bf3c006d7019..b580b2b18fa071 100644 --- a/packages/edit-site/src/components/global-styles/screen-typography.js +++ b/packages/edit-site/src/components/global-styles/screen-typography.js @@ -30,7 +30,11 @@ function ScreenTypography() { ); const typographyVariations = useThemeStyleVariationsByProperty( { styleProperty: 'typography', + filter: ( variation ) => + variation?.settings?.typography?.fontFamilies && + Object.keys( variation?.settings?.typography?.fontFamilies ).length, } ); + return ( <> { const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); -export default function useThemeStyleVariationsByProperty( { styleProperty } ) { +export default function useThemeStyleVariationsByProperty( { + styleProperty, + filter, +} ) { const variations = useSelect( ( select ) => { return select( coreStore @@ -107,12 +110,16 @@ export default function useThemeStyleVariationsByProperty( { styleProperty } ) { Test with 2022 - typography font families bork for some reason */ - const styleVariations = getVariationsByProperty( + let styleVariations = getVariationsByProperty( user, variations, styleProperty ); - return styleVariations.length ? styleVariations : []; - }, [ styleProperty, variations ] ); + if ( 'function' === typeof filter ) { + styleVariations = styleVariations.filter( filter ); + } + + return styleVariations; + }, [ styleProperty, variations, filter ] ); } diff --git a/packages/edit-site/src/components/global-styles/variations-color.js b/packages/edit-site/src/components/global-styles/variations-color.js index f6a04a41363af1..94c2e2c44aceae 100644 --- a/packages/edit-site/src/components/global-styles/variations-color.js +++ b/packages/edit-site/src/components/global-styles/variations-color.js @@ -24,7 +24,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import { mergeBaseAndUserConfigs } from './global-styles-provider'; import { unlock } from '../../lock-unlock'; import ColorIndicatorWrapper from './color-indicator-wrapper'; -import useThemeStyleVariationsByProperty from './use-theme-style-variations-by-property'; import Subtitle from './subtitle'; const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( @@ -118,11 +117,7 @@ function ColorVariation( { variation } ) { ); } -export default function ColorVariations() { - const colorVariations = useThemeStyleVariationsByProperty( { - styleProperty: 'color', - } ); - +export default function ColorVariations( { variations } ) { return ( { __( 'Presets' ) } @@ -130,15 +125,11 @@ export default function ColorVariations() { columns={ 2 } className="edit-site-global-styles-color-variations" > - { colorVariations && - colorVariations.map( ( variation, index ) => { - return ( - - ); - } ) } + { variations.map( ( variation, index ) => { + return ( + + ); + } ) } ); diff --git a/packages/edit-site/src/components/global-styles/variations-typography.js b/packages/edit-site/src/components/global-styles/variations-typography.js index 505436d6ac6e60..8470db2870e973 100644 --- a/packages/edit-site/src/components/global-styles/variations-typography.js +++ b/packages/edit-site/src/components/global-styles/variations-typography.js @@ -168,6 +168,9 @@ function TypographyVariation( { variation } ) { export default function TypographyVariations() { const typographyVariations = useThemeStyleVariationsByProperty( { styleProperty: 'typography', + filter: ( variation ) => + variation?.settings?.typography?.fontFamilies && + Object.keys( variation?.settings?.typography?.fontFamilies ).length, } ); const { base } = useContext( GlobalStylesContext ); From 63b85db391fdf33c6953d21c2b0b7f7329f0f6a0 Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 14 Feb 2024 12:26:31 +1100 Subject: [PATCH 30/48] Create new convenience hook `useCurrentMergeThemeStyleVariationsWithUserConfig()` Replace usage with utils created in https://github.com/WordPress/gutenberg/pull/58803 --- .../global-styles/color-palette-panel.js | 6 +- .../global-styles/screen-typography.js | 16 ++- .../use-theme-style-variations-by-property.js | 125 ------------------ .../global-styles/variations-typography.js | 16 ++- .../use-theme-style-variations-by-property.js | 36 ++++- 5 files changed, 56 insertions(+), 143 deletions(-) delete mode 100644 packages/edit-site/src/components/global-styles/use-theme-style-variations-by-property.js diff --git a/packages/edit-site/src/components/global-styles/color-palette-panel.js b/packages/edit-site/src/components/global-styles/color-palette-panel.js index 1a8b503581c999..71fe04a33baad5 100644 --- a/packages/edit-site/src/components/global-styles/color-palette-panel.js +++ b/packages/edit-site/src/components/global-styles/color-palette-panel.js @@ -14,7 +14,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; */ import { unlock } from '../../lock-unlock'; import ColorVariations from './variations-color'; -import useThemeStyleVariationsByProperty from './use-theme-style-variations-by-property'; +import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property'; const { useGlobalSetting } = unlock( blockEditorPrivateApis ); const mobilePopoverProps = { placement: 'bottom-start', offset: 8 }; @@ -47,8 +47,8 @@ export default function ColorPalettePanel( { name } ) { 'color.defaultPalette', name ); - const colorVariations = useThemeStyleVariationsByProperty( { - styleProperty: 'color', + const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( { + property: 'color', filter: ( variation ) => variation?.settings?.color && Object.keys( variation?.settings?.color ).length, diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js index b580b2b18fa071..faa2b3d20f71f4 100644 --- a/packages/edit-site/src/components/global-styles/screen-typography.js +++ b/packages/edit-site/src/components/global-styles/screen-typography.js @@ -20,7 +20,7 @@ import { IconWithCurrentColor } from './icon-with-current-color'; import FontFamilies from './font-families'; import ScreenHeader from './header'; import { NavigationButtonAsItem } from './navigation-button'; -import useThemeStyleVariationsByProperty from './use-theme-style-variations-by-property'; +import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property'; function ScreenTypography() { const fontLibraryEnabled = useSelect( @@ -28,12 +28,14 @@ function ScreenTypography() { select( editorStore ).getEditorSettings().fontLibraryEnabled, [] ); - const typographyVariations = useThemeStyleVariationsByProperty( { - styleProperty: 'typography', - filter: ( variation ) => - variation?.settings?.typography?.fontFamilies && - Object.keys( variation?.settings?.typography?.fontFamilies ).length, - } ); + const typographyVariations = + useCurrentMergeThemeStyleVariationsWithUserConfig( { + property: 'typography', + filter: ( variation ) => + variation?.settings?.typography?.fontFamilies && + Object.keys( variation?.settings?.typography?.fontFamilies ) + .length, + } ); return ( <> diff --git a/packages/edit-site/src/components/global-styles/use-theme-style-variations-by-property.js b/packages/edit-site/src/components/global-styles/use-theme-style-variations-by-property.js deleted file mode 100644 index f7305561680c1c..00000000000000 --- a/packages/edit-site/src/components/global-styles/use-theme-style-variations-by-property.js +++ /dev/null @@ -1,125 +0,0 @@ -/** - * WordPress dependencies - */ -import { useSelect } from '@wordpress/data'; -import { store as coreStore } from '@wordpress/core-data'; -import { useContext, useMemo } from '@wordpress/element'; -import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; - -/** - * Internal dependencies - */ -import { unlock } from '../../lock-unlock'; -import cloneDeep from '../../utils/clone-deep'; -import { mergeBaseAndUserConfigs } from './global-styles-provider'; -/** - * Returns a new object with only the properties specified in `properties`. - * - * @param {Object} object The object to filter - * @param {Object} property The property to filter by - * @return {Object} The merged object. - */ -export const filterObjectByProperty = ( object, property ) => { - if ( ! object ) { - return {}; - } - - const newObject = {}; - Object.keys( object ).forEach( ( key ) => { - if ( key === property ) { - newObject[ key ] = object[ key ]; - } else if ( typeof object[ key ] === 'object' ) { - const newFilter = filterObjectByProperty( object[ key ], property ); - if ( Object.keys( newFilter ).length ) { - newObject[ key ] = newFilter; - } - } - } ); - return newObject; -}; - -/** - * Removes all instances of a property from an object. - * - * @param {Object} object - * @param {string} property - * @return {Object} The modified object. - */ -const removePropertyFromObject = ( object, property ) => { - for ( const key in object ) { - if ( key === property ) { - delete object[ key ]; - } else if ( typeof object[ key ] === 'object' ) { - removePropertyFromObject( object[ key ], property ); - } - } - return object; -}; - -/** - * Return style variations with all properties removed except for the one specified in `type`. - * - * @param {Object} user The user variation. - * @param {Array} variations The other style variations. - * @param {string} property The property to filter by. - * - * @return {Array} The style variation with only the specified property filtered. - */ -export const getVariationsByProperty = ( user, variations, property ) => { - const userSettingsWithoutProperty = removePropertyFromObject( - cloneDeep( user ), - property - ); - - const variationsWithOnlyProperty = variations.map( ( variation ) => { - return { - ...filterObjectByProperty( variation, property ), - // Add variation title and description to every variation item. - title: variation?.title, - description: variation?.description, - }; - } ); - - return variationsWithOnlyProperty.map( ( variation ) => - mergeBaseAndUserConfigs( userSettingsWithoutProperty, variation ) - ); -}; - -const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); - -export default function useThemeStyleVariationsByProperty( { - styleProperty, - filter, -} ) { - const variations = useSelect( ( select ) => { - return select( - coreStore - ).__experimentalGetCurrentThemeGlobalStylesVariations(); - }, [] ); - const { user } = useContext( GlobalStylesContext ); - - return useMemo( () => { - if ( ! styleProperty || ! variations.length ) { - return []; - } - /* - @TODO: - For colors, should also get filter? - Memoize/cache all this better? E.g., should we memoize the variations? - Test with empty theme - Test with 2022 - typography font families bork for some reason - - */ - let styleVariations = getVariationsByProperty( - user, - variations, - styleProperty - ); - - if ( 'function' === typeof filter ) { - styleVariations = styleVariations.filter( filter ); - } - - return styleVariations; - }, [ styleProperty, variations, filter ] ); -} diff --git a/packages/edit-site/src/components/global-styles/variations-typography.js b/packages/edit-site/src/components/global-styles/variations-typography.js index 8470db2870e973..e845e4ac7c5c82 100644 --- a/packages/edit-site/src/components/global-styles/variations-typography.js +++ b/packages/edit-site/src/components/global-styles/variations-typography.js @@ -21,7 +21,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import { mergeBaseAndUserConfigs } from './global-styles-provider'; import { unlock } from '../../lock-unlock'; import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles'; -import useThemeStyleVariationsByProperty from './use-theme-style-variations-by-property'; +import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property'; import Subtitle from './subtitle'; const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( @@ -166,12 +166,14 @@ function TypographyVariation( { variation } ) { } export default function TypographyVariations() { - const typographyVariations = useThemeStyleVariationsByProperty( { - styleProperty: 'typography', - filter: ( variation ) => - variation?.settings?.typography?.fontFamilies && - Object.keys( variation?.settings?.typography?.fontFamilies ).length, - } ); + const typographyVariations = + useCurrentMergeThemeStyleVariationsWithUserConfig( { + property: 'typography', + filter: ( variation ) => + variation?.settings?.typography?.fontFamilies && + Object.keys( variation?.settings?.typography?.fontFamilies ) + .length, + } ); const { base } = useContext( GlobalStylesContext ); const uniqueTypographyVariations = []; diff --git a/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js b/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js index b9c1b40ec7c1d3..aff5c95ed8809d 100644 --- a/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js +++ b/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js @@ -1,13 +1,47 @@ /** * WordPress dependencies */ -import { useMemo } from '@wordpress/element'; +import { useSelect } from '@wordpress/data'; +import { store as coreStore } from '@wordpress/core-data'; +import { useContext, useMemo } from '@wordpress/element'; +import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; /** * Internal dependencies */ import { mergeBaseAndUserConfigs } from '../../components/global-styles/global-styles-provider'; import cloneDeep from '../../utils/clone-deep'; +import { unlock } from '../../lock-unlock'; + +const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); + +/** + * Fetches the current theme style variations, filters them by the provided property, + * and merges with current user-defined global style/settings object. + * + * @param {Object} props Object of hook args. + * @param {string} props.property The property to filter by. + * @param {Function} props.filter Optional. The filter function to apply to the variations. + * @return {Object[]|*} The merged object. + */ +export function useCurrentMergeThemeStyleVariationsWithUserConfig( { + property, + filter, +} ) { + const variations = useSelect( ( select ) => { + return select( + coreStore + ).__experimentalGetCurrentThemeGlobalStylesVariations(); + }, [] ); + const { user: baseVariation } = useContext( GlobalStylesContext ); + + return useThemeStyleVariationsByProperty( { + variations, + property, + filter, + baseVariation, + } ); +} /** * Returns a new object, with properties specified in `property`, From c17157a79592d2bf717480fd3b1873c843955661 Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 16 Feb 2024 16:27:16 +1100 Subject: [PATCH 31/48] add a todo --- .../src/components/global-styles/color-palette-panel.js | 1 - .../edit-site/src/components/global-styles/variations-color.js | 3 +++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/color-palette-panel.js b/packages/edit-site/src/components/global-styles/color-palette-panel.js index 71fe04a33baad5..cc95c5abf35d9e 100644 --- a/packages/edit-site/src/components/global-styles/color-palette-panel.js +++ b/packages/edit-site/src/components/global-styles/color-palette-panel.js @@ -96,7 +96,6 @@ export default function ColorPalettePanel( { name } ) { slugPrefix="custom-" popoverProps={ popoverProps } /> - { /* @TODO: pass down variations to component? */ } { !! colorVariations.length && ( ) } diff --git a/packages/edit-site/src/components/global-styles/variations-color.js b/packages/edit-site/src/components/global-styles/variations-color.js index 94c2e2c44aceae..243257008b3089 100644 --- a/packages/edit-site/src/components/global-styles/variations-color.js +++ b/packages/edit-site/src/components/global-styles/variations-color.js @@ -120,6 +120,9 @@ function ColorVariation( { variation } ) { export default function ColorVariations( { variations } ) { return ( + { /* + @TODO is there an alternative to this heading? +*/ } { __( 'Presets' ) } Date: Mon, 19 Feb 2024 15:39:55 +1100 Subject: [PATCH 32/48] A bit of clean up. Remove comments, adjust margins. --- .../components/global-styles/color-palette-panel.js | 6 +++--- .../global-styles/screen-typography-typesets.js | 2 +- .../src/components/global-styles/screen-typography.js | 2 -- .../edit-site/src/components/global-styles/style.scss | 7 +++++++ .../src/components/global-styles/variations-color.js | 11 +++-------- .../components/global-styles/variations-typography.js | 7 +------ .../use-theme-style-variations-by-property.js | 4 ++-- 7 files changed, 17 insertions(+), 22 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/color-palette-panel.js b/packages/edit-site/src/components/global-styles/color-palette-panel.js index cc95c5abf35d9e..9e6bb5dbe2c77b 100644 --- a/packages/edit-site/src/components/global-styles/color-palette-panel.js +++ b/packages/edit-site/src/components/global-styles/color-palette-panel.js @@ -85,6 +85,9 @@ export default function ColorPalettePanel( { name } ) { popoverProps={ popoverProps } /> ) } + { !! colorVariations.length && ( + + ) } - { !! colorVariations.length && ( - - ) } ); } diff --git a/packages/edit-site/src/components/global-styles/screen-typography-typesets.js b/packages/edit-site/src/components/global-styles/screen-typography-typesets.js index 9e631632e9d472..1ea5ab04eef343 100644 --- a/packages/edit-site/src/components/global-styles/screen-typography-typesets.js +++ b/packages/edit-site/src/components/global-styles/screen-typography-typesets.js @@ -15,7 +15,7 @@ export default function ScreenTypographyTypesets() {
diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js index faa2b3d20f71f4..a5d90b8340d7fe 100644 --- a/packages/edit-site/src/components/global-styles/screen-typography.js +++ b/packages/edit-site/src/components/global-styles/screen-typography.js @@ -50,7 +50,6 @@ function ScreenTypography() { { ! window.__experimentalDisableFontLibrary && ( { fontLibraryEnabled && } - { /* @TODO: abstract into component */ } { !! typographyVariations.length && ( - { /* @TODO: think about this category. Could we stress "variations" typography styles to make descriptions/labelling easier (no font-name farming) */ } { __( 'Typesets' ) } - { /* - @TODO is there an alternative to this heading? -*/ } { __( 'Presets' ) } - { variations.map( ( variation, index ) => { - return ( - - ); - } ) } + { variations.map( ( variation, index ) => ( + + ) ) } ); diff --git a/packages/edit-site/src/components/global-styles/variations-typography.js b/packages/edit-site/src/components/global-styles/variations-typography.js index e845e4ac7c5c82..13887134ec5b01 100644 --- a/packages/edit-site/src/components/global-styles/variations-typography.js +++ b/packages/edit-site/src/components/global-styles/variations-typography.js @@ -123,7 +123,7 @@ function TypographyVariation( { variation } ) { const headingPreviewStyle = { ...( headingFontFamilies && getFamilyPreviewStyle( headingFontFamilies ) ), - fontSize: '1.2rem', + fontSize: '16px', }; return ( @@ -147,11 +147,6 @@ function TypographyVariation( { variation } ) {
{ headingFontFamilies?.name || variation?.title } diff --git a/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js b/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js index aff5c95ed8809d..1023bef3b88145 100644 --- a/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js +++ b/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js @@ -16,8 +16,8 @@ import { unlock } from '../../lock-unlock'; const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); /** - * Fetches the current theme style variations, filters them by the provided property, - * and merges with current user-defined global style/settings object. + * A convenience wrapper for `useThemeStyleVariationsByProperty()` that fetches the current theme style variations, + * and user-defined global style/settings object. * * @param {Object} props Object of hook args. * @param {string} props.property The property to filter by. From f12bb720de45bf8bb7a67c7ef45b79ba23ea1535 Mon Sep 17 00:00:00 2001 From: scruffian Date: Fri, 23 Feb 2024 11:15:31 +0100 Subject: [PATCH 33/48] move variation to a new component --- .../style-variations-container.js | 94 +----------------- .../src/components/global-styles/variation.js | 98 +++++++++++++++++++ 2 files changed, 101 insertions(+), 91 deletions(-) create mode 100644 packages/edit-site/src/components/global-styles/variation.js diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js index 6cc8b53b800d3a..bf6764e6012756 100644 --- a/packages/edit-site/src/components/global-styles/style-variations-container.js +++ b/packages/edit-site/src/components/global-styles/style-variations-container.js @@ -1,104 +1,16 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - /** * WordPress dependencies */ import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; -import { useMemo, useContext, useState } from '@wordpress/element'; -import { ENTER } from '@wordpress/keycodes'; +import { useMemo } from '@wordpress/element'; import { __experimentalGrid as Grid } from '@wordpress/components'; -import { __, sprintf } from '@wordpress/i18n'; -import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { mergeBaseAndUserConfigs } from './global-styles-provider'; -import StylesPreview from './preview'; -import { unlock } from '../../lock-unlock'; - -const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( - blockEditorPrivateApis -); - -function Variation( { variation } ) { - const [ isFocused, setIsFocused ] = useState( false ); - const { base, user, setUserConfig } = useContext( GlobalStylesContext ); - const context = useMemo( () => { - return { - user: { - settings: variation.settings ?? {}, - styles: variation.styles ?? {}, - }, - base, - merged: mergeBaseAndUserConfigs( base, variation ), - setUserConfig: () => {}, - }; - }, [ variation, base ] ); - - const selectVariation = () => { - setUserConfig( () => { - return { - settings: variation.settings, - styles: variation.styles, - }; - } ); - }; - - const selectOnEnter = ( event ) => { - if ( event.keyCode === ENTER ) { - event.preventDefault(); - selectVariation(); - } - }; - - const isActive = useMemo( () => { - return areGlobalStyleConfigsEqual( user, variation ); - }, [ user, variation ] ); - - let label = variation?.title; - if ( variation?.description ) { - label = sprintf( - /* translators: %1$s: variation title. %2$s variation description. */ - __( '%1$s (%2$s)' ), - variation?.title, - variation?.description - ); - } - - return ( - -
setIsFocused( true ) } - onBlur={ () => setIsFocused( false ) } - > -
- -
-
- - ); -} +import Variation from './variation'; export default function StyleVariationsContainer() { const variations = useSelect( ( select ) => { diff --git a/packages/edit-site/src/components/global-styles/variation.js b/packages/edit-site/src/components/global-styles/variation.js new file mode 100644 index 00000000000000..b3faef58a801d8 --- /dev/null +++ b/packages/edit-site/src/components/global-styles/variation.js @@ -0,0 +1,98 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { useMemo, useContext, useState } from '@wordpress/element'; +import { ENTER } from '@wordpress/keycodes'; +import { __, sprintf } from '@wordpress/i18n'; +import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import { mergeBaseAndUserConfigs } from './global-styles-provider'; +import StylesPreview from './preview'; +import { unlock } from '../../lock-unlock'; + +const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( + blockEditorPrivateApis +); + +export default function Variation( { variation } ) { + const [ isFocused, setIsFocused ] = useState( false ); + const { base, user, setUserConfig } = useContext( GlobalStylesContext ); + const context = useMemo( () => { + return { + user: { + settings: variation.settings ?? {}, + styles: variation.styles ?? {}, + }, + base, + merged: mergeBaseAndUserConfigs( base, variation ), + setUserConfig: () => {}, + }; + }, [ variation, base ] ); + + const selectVariation = () => { + setUserConfig( () => { + return { + settings: variation.settings, + styles: variation.styles, + }; + } ); + }; + + const selectOnEnter = ( event ) => { + if ( event.keyCode === ENTER ) { + event.preventDefault(); + selectVariation(); + } + }; + + const isActive = useMemo( () => { + return areGlobalStyleConfigsEqual( user, variation ); + }, [ user, variation ] ); + + let label = variation?.title; + if ( variation?.description ) { + label = sprintf( + /* translators: %1$s: variation title. %2$s variation description. */ + __( '%1$s (%2$s)' ), + variation?.title, + variation?.description + ); + } + + return ( + +
setIsFocused( true ) } + onBlur={ () => setIsFocused( false ) } + > +
+ +
+
+ + ); +} From da353aeb3cc1617a30dbca9042cf7f09f099fd05 Mon Sep 17 00:00:00 2001 From: scruffian Date: Fri, 23 Feb 2024 16:52:55 +0100 Subject: [PATCH 34/48] make variation a composible component --- .../style-variations-container.js | 11 +- .../src/components/global-styles/style.scss | 2 +- .../src/components/global-styles/variation.js | 9 +- .../global-styles/variations-color.js | 136 +++++------------- 4 files changed, 46 insertions(+), 112 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js index bf6764e6012756..3ca856dd8fb902 100644 --- a/packages/edit-site/src/components/global-styles/style-variations-container.js +++ b/packages/edit-site/src/components/global-styles/style-variations-container.js @@ -10,6 +10,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ +import StylesPreview from './preview'; import Variation from './variation'; export default function StyleVariationsContainer() { @@ -40,7 +41,15 @@ export default function StyleVariationsContainer() { className="edit-site-global-styles-style-variations-container" > { withEmptyVariation.map( ( variation, index ) => ( - + + { ( isFocused ) => ( + + ) } + ) ) } ); diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index 3110b15064b47d..7ccf746e98ce9b 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -103,7 +103,7 @@ // Shown in Windows 10 high contrast mode. outline: 1px solid transparent; - &.is-color-variation { + .edit-site-global-styles-color-variations & { padding: $grid-unit-10; } } diff --git a/packages/edit-site/src/components/global-styles/variation.js b/packages/edit-site/src/components/global-styles/variation.js index b3faef58a801d8..67ad0cd4c0601f 100644 --- a/packages/edit-site/src/components/global-styles/variation.js +++ b/packages/edit-site/src/components/global-styles/variation.js @@ -15,14 +15,13 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; * Internal dependencies */ import { mergeBaseAndUserConfigs } from './global-styles-provider'; -import StylesPreview from './preview'; import { unlock } from '../../lock-unlock'; const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( blockEditorPrivateApis ); -export default function Variation( { variation } ) { +export default function Variation( { variation, children } ) { const [ isFocused, setIsFocused ] = useState( false ); const { base, user, setUserConfig } = useContext( GlobalStylesContext ); const context = useMemo( () => { @@ -86,11 +85,7 @@ export default function Variation( { variation } ) { onBlur={ () => setIsFocused( false ) } >
- + { children( isFocused ) }
diff --git a/packages/edit-site/src/components/global-styles/variations-color.js b/packages/edit-site/src/components/global-styles/variations-color.js index 9806e78e1b551e..b838b9b0ea79c7 100644 --- a/packages/edit-site/src/components/global-styles/variations-color.js +++ b/packages/edit-site/src/components/global-styles/variations-color.js @@ -1,13 +1,6 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - /** * WordPress dependencies */ -import { useMemo, useContext } from '@wordpress/element'; -import { ENTER } from '@wordpress/keycodes'; import { __experimentalGrid as Grid, __experimentalHStack as HStack, @@ -15,107 +8,14 @@ import { __experimentalZStack as ZStack, ColorIndicator, } from '@wordpress/components'; -import { __, sprintf } from '@wordpress/i18n'; -import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { mergeBaseAndUserConfigs } from './global-styles-provider'; -import { unlock } from '../../lock-unlock'; import ColorIndicatorWrapper from './color-indicator-wrapper'; import Subtitle from './subtitle'; - -const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( - blockEditorPrivateApis -); - -function ColorVariation( { variation } ) { - const { base, user, setUserConfig } = useContext( GlobalStylesContext ); - const context = useMemo( () => { - return { - user: { - settings: variation.settings ?? {}, - styles: variation.styles ?? {}, - }, - base, - merged: mergeBaseAndUserConfigs( base, variation ), - setUserConfig: () => {}, - }; - }, [ variation, base ] ); - - const selectVariation = () => { - setUserConfig( () => { - return { - settings: variation.settings, - styles: variation.styles, - }; - } ); - }; - - const selectOnEnter = ( event ) => { - if ( event.keyCode === ENTER ) { - event.preventDefault(); - selectVariation(); - } - }; - - const isActive = useMemo( () => { - return areGlobalStyleConfigsEqual( user, variation ); - }, [ user, variation ] ); - - let label = variation?.title; - if ( variation?.description ) { - label = sprintf( - /* translators: %1$s: variation title. %2$s variation description. */ - __( '%1$s (%2$s)' ), - variation?.title, - variation?.description - ); - } - - const colors = variation?.settings?.color?.palette?.theme ?? []; - - return ( - -
-
- - - { colors - .slice( 0, 5 ) - .map( ( { color }, index ) => ( - - - - ) ) } - - -
-
- - ); -} +import Variation from './variation'; export default function ColorVariations( { variations } ) { return ( @@ -126,7 +26,37 @@ export default function ColorVariations( { variations } ) { className="edit-site-global-styles-color-variations" > { variations.map( ( variation, index ) => ( - + + { () => { + const colors = + variation?.settings?.color?.palette?.theme ?? + []; + return ( + + + { colors + .slice( 0, 5 ) + .map( ( { color }, colorIndex ) => ( + + + + ) ) } + + + ); + } } + ) ) } From 88c8a3f90e5ee6f6459f608095472bc02cf8cb54 Mon Sep 17 00:00:00 2001 From: scruffian Date: Sat, 24 Feb 2024 08:26:24 +0100 Subject: [PATCH 35/48] use the variation component for typography --- .../global-styles/variations-typography.js | 153 ++++++------------ 1 file changed, 49 insertions(+), 104 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/variations-typography.js b/packages/edit-site/src/components/global-styles/variations-typography.js index 13887134ec5b01..f2f45d78c19b15 100644 --- a/packages/edit-site/src/components/global-styles/variations-typography.js +++ b/packages/edit-site/src/components/global-styles/variations-typography.js @@ -1,18 +1,12 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - /** * WordPress dependencies */ -import { useMemo, useContext, useState } from '@wordpress/element'; -import { ENTER } from '@wordpress/keycodes'; +import { useContext } from '@wordpress/element'; import { __experimentalGrid as Grid, __experimentalVStack as VStack, } from '@wordpress/components'; -import { __, sprintf } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; /** @@ -23,10 +17,9 @@ import { unlock } from '../../lock-unlock'; import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles'; import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property'; import Subtitle from './subtitle'; +import Variation from './variation'; -const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( - blockEditorPrivateApis -); +const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); function getFontFamilyFromSetting( fontFamilies, setting ) { if ( ! setting ) { @@ -69,97 +62,6 @@ const getFontFamilyNames = ( themeJson ) => { return [ bodyFontFamily?.name, headingFontFamily?.name ]; }; -function TypographyVariation( { variation } ) { - const [ isFocused, setIsFocused ] = useState( false ); - const { base, user, setUserConfig } = useContext( GlobalStylesContext ); - const context = useMemo( () => { - return { - user: { - settings: variation.settings ?? {}, - styles: variation.styles ?? {}, - }, - base, - merged: mergeBaseAndUserConfigs( base, variation ), - setUserConfig: () => {}, - }; - }, [ variation, base ] ); - - const selectVariation = () => { - setUserConfig( () => { - return { - settings: variation.settings, - styles: variation.styles, - }; - } ); - }; - - const selectOnEnter = ( event ) => { - if ( event.keyCode === ENTER ) { - event.preventDefault(); - selectVariation(); - } - }; - - const isActive = useMemo( () => { - return areGlobalStyleConfigsEqual( user, variation ); - }, [ user, variation ] ); - - let label = variation?.title; - if ( variation?.description ) { - label = sprintf( - /* translators: %1$s: variation title. %2$s variation description. */ - __( '%1$s (%2$s)' ), - variation?.title, - variation?.description - ); - } - - const [ bodyFontFamilies, headingFontFamilies ] = getFontFamilies( - mergeBaseAndUserConfigs( base, variation ) - ); - const bodyPreviewStyle = bodyFontFamilies - ? getFamilyPreviewStyle( bodyFontFamilies ) - : {}; - const headingPreviewStyle = { - ...( headingFontFamilies && - getFamilyPreviewStyle( headingFontFamilies ) ), - fontSize: '16px', - }; - - return ( - -
setIsFocused( true ) } - onBlur={ () => setIsFocused( false ) } - > - -
- { headingFontFamilies?.name || variation?.title } -
-
- { bodyFontFamilies?.name || __( 'Typography styles' ) } -
- -
- - ); -} - export default function TypographyVariations() { const typographyVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( { @@ -208,10 +110,53 @@ export default function TypographyVariations() { { typographyVariations && typographyVariations.length ? uniqueTypographyVariations.map( ( variation, index ) => { return ( - + > + { () => { + const [ + bodyFontFamilies, + headingFontFamilies, + ] = getFontFamilies( + mergeBaseAndUserConfigs( + base, + variation + ) + ); + const bodyPreviewStyle = + bodyFontFamilies + ? getFamilyPreviewStyle( + bodyFontFamilies + ) + : {}; + const headingPreviewStyle = { + ...( headingFontFamilies && + getFamilyPreviewStyle( + headingFontFamilies + ) ), + fontSize: '16px', + }; + return ( + +
+ { headingFontFamilies?.name || + variation?.title } +
+
+ { bodyFontFamilies?.name || + __( + 'Typography styles' + ) } +
+ + ); + } } + ); } ) : null } From 993a98e984809a9beec39b37dfd801702f22d4b2 Mon Sep 17 00:00:00 2001 From: scruffian Date: Sat, 24 Feb 2024 10:25:12 +0100 Subject: [PATCH 36/48] Update typography preview --- .../global-styles/variations-typography.js | 41 ++++++++++--------- 1 file changed, 22 insertions(+), 19 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/variations-typography.js b/packages/edit-site/src/components/global-styles/variations-typography.js index f2f45d78c19b15..0788d4706fbf30 100644 --- a/packages/edit-site/src/components/global-styles/variations-typography.js +++ b/packages/edit-site/src/components/global-styles/variations-typography.js @@ -130,30 +130,33 @@ export default function TypographyVariations() { bodyFontFamilies ) : {}; - const headingPreviewStyle = { - ...( headingFontFamilies && - getFamilyPreviewStyle( - headingFontFamilies - ) ), - fontSize: '16px', - }; + const headingPreviewStyle = + headingFontFamilies + ? getFamilyPreviewStyle( + headingFontFamilies + ) + : {}; + return ( - -
+ - { headingFontFamilies?.name || - variation?.title } -
-
- { bodyFontFamilies?.name || - __( - 'Typography styles' - ) } -
- + A + + + a + +
); } } From ecffb645406495cac46e9c2bffa3e880c606793a Mon Sep 17 00:00:00 2001 From: scruffian Date: Sat, 24 Feb 2024 10:28:31 +0100 Subject: [PATCH 37/48] Add animation --- .../global-styles/variations-typography.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/variations-typography.js b/packages/edit-site/src/components/global-styles/variations-typography.js index 0788d4706fbf30..8d97a48ed154fb 100644 --- a/packages/edit-site/src/components/global-styles/variations-typography.js +++ b/packages/edit-site/src/components/global-styles/variations-typography.js @@ -5,6 +5,7 @@ import { useContext } from '@wordpress/element'; import { __experimentalGrid as Grid, __experimentalVStack as VStack, + __unstableMotion as motion, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; @@ -138,11 +139,23 @@ export default function TypographyVariations() { : {}; return ( -
a -
+ ); } } From 9493d20041c7d9abd0a11acf1bba982b63776f2a Mon Sep 17 00:00:00 2001 From: scruffian Date: Sat, 24 Feb 2024 10:33:55 +0100 Subject: [PATCH 38/48] move variation to a component --- .../global-styles/variations-typography.js | 96 ++++++++----------- 1 file changed, 39 insertions(+), 57 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/variations-typography.js b/packages/edit-site/src/components/global-styles/variations-typography.js index 8d97a48ed154fb..06fa903e4c4cfd 100644 --- a/packages/edit-site/src/components/global-styles/variations-typography.js +++ b/packages/edit-site/src/components/global-styles/variations-typography.js @@ -63,6 +63,42 @@ const getFontFamilyNames = ( themeJson ) => { return [ bodyFontFamily?.name, headingFontFamily?.name ]; }; +const TypePreview = ( { variation } ) => { + const { base } = useContext( GlobalStylesContext ); + const [ bodyFontFamilies, headingFontFamilies ] = getFontFamilies( + mergeBaseAndUserConfigs( base, variation ) + ); + const bodyPreviewStyle = bodyFontFamilies + ? getFamilyPreviewStyle( bodyFontFamilies ) + : {}; + const headingPreviewStyle = headingFontFamilies + ? getFamilyPreviewStyle( headingFontFamilies ) + : {}; + return ( + + A + a + + ); +}; + export default function TypographyVariations() { const typographyVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( { @@ -115,63 +151,9 @@ export default function TypographyVariations() { key={ index } variation={ variation } > - { () => { - const [ - bodyFontFamilies, - headingFontFamilies, - ] = getFontFamilies( - mergeBaseAndUserConfigs( - base, - variation - ) - ); - const bodyPreviewStyle = - bodyFontFamilies - ? getFamilyPreviewStyle( - bodyFontFamilies - ) - : {}; - const headingPreviewStyle = - headingFontFamilies - ? getFamilyPreviewStyle( - headingFontFamilies - ) - : {}; - - return ( - - - A - - - a - - - ); - } } + { () => ( + + ) } ); } ) From d368393dbae67cefe316eb055cb64c927dc58586 Mon Sep 17 00:00:00 2001 From: scruffian Date: Sat, 24 Feb 2024 12:12:43 +0100 Subject: [PATCH 39/48] move preset to the higher level --- .../components/global-styles/screen-colors.js | 12 ++++++ .../screen-typography-typesets.js | 26 ------------- .../global-styles/screen-typography.js | 37 +++---------------- .../src/components/global-styles/ui.js | 5 --- .../global-styles/variations-color.js | 4 +- .../global-styles/variations-typography.js | 2 +- 6 files changed, 21 insertions(+), 65 deletions(-) delete mode 100644 packages/edit-site/src/components/global-styles/screen-typography-typesets.js diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js index a19bd16c8839f2..4ab373a3bac8e3 100644 --- a/packages/edit-site/src/components/global-styles/screen-colors.js +++ b/packages/edit-site/src/components/global-styles/screen-colors.js @@ -11,6 +11,8 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import ScreenHeader from './header'; import Palette from './palette'; import { unlock } from '../../lock-unlock'; +import ColorVariations from './variations-color'; +import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property'; const { useGlobalStyle, @@ -29,6 +31,12 @@ function ScreenColors() { const [ rawSettings ] = useGlobalSetting( '' ); const settings = useSettingsForBlockElement( rawSettings ); + const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( { + property: 'color', + filter: ( variation ) => + variation?.settings?.color && + Object.keys( variation?.settings?.color ).length, + } ); return ( <> + + { !! colorVariations.length && ( + + ) }
diff --git a/packages/edit-site/src/components/global-styles/screen-typography-typesets.js b/packages/edit-site/src/components/global-styles/screen-typography-typesets.js deleted file mode 100644 index 1ea5ab04eef343..00000000000000 --- a/packages/edit-site/src/components/global-styles/screen-typography-typesets.js +++ /dev/null @@ -1,26 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import TypographyVariations from './variations-typography'; -import ScreenHeader from './header'; - -export default function ScreenTypographyTypesets() { - return ( - <> - -
- -
- - ); -} diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js index a5d90b8340d7fe..f5f99096944358 100644 --- a/packages/edit-site/src/components/global-styles/screen-typography.js +++ b/packages/edit-site/src/components/global-styles/screen-typography.js @@ -1,14 +1,8 @@ /** * WordPress dependencies */ -import { __, isRTL } from '@wordpress/i18n'; -import { chevronLeft, chevronRight } from '@wordpress/icons'; -import { - FlexItem, - __experimentalItemGroup as ItemGroup, - __experimentalHStack as HStack, - __experimentalVStack as VStack, -} from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { __experimentalVStack as VStack } from '@wordpress/components'; import { store as editorStore } from '@wordpress/editor'; import { useSelect } from '@wordpress/data'; @@ -16,10 +10,9 @@ import { useSelect } from '@wordpress/data'; * Internal dependencies */ import TypographyElements from './typography-elements'; -import { IconWithCurrentColor } from './icon-with-current-color'; +import TypographyVariations from './variations-typography'; import FontFamilies from './font-families'; import ScreenHeader from './header'; -import { NavigationButtonAsItem } from './navigation-button'; import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property'; function ScreenTypography() { @@ -50,30 +43,12 @@ function ScreenTypography() { { ! window.__experimentalDisableFontLibrary && ( { fontLibraryEnabled && } - { !! typographyVariations.length && ( - - - - - { __( 'Typesets' ) } - - - - - - ) } ) } + { !! typographyVariations.length && ( + + ) }
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index d6553739f36123..cdaadb1d1acb37 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -33,7 +33,6 @@ import { import ScreenBlock from './screen-block'; import ScreenTypography from './screen-typography'; import ScreenTypographyElement from './screen-typography-element'; -import ScreenTypographyTypesets from './screen-typography-typesets'; import ScreenColors from './screen-colors'; import ScreenColorPalette from './screen-color-palette'; import ScreenLayout from './screen-layout'; @@ -329,10 +328,6 @@ function GlobalStylesUI() { - - - - diff --git a/packages/edit-site/src/components/global-styles/variations-color.js b/packages/edit-site/src/components/global-styles/variations-color.js index b838b9b0ea79c7..45c07d3dee8ba0 100644 --- a/packages/edit-site/src/components/global-styles/variations-color.js +++ b/packages/edit-site/src/components/global-styles/variations-color.js @@ -22,7 +22,7 @@ export default function ColorVariations( { variations } ) { { __( 'Presets' ) } { variations.map( ( variation, index ) => ( @@ -42,7 +42,7 @@ export default function ColorVariations( { variations } ) { > { colors - .slice( 0, 5 ) + .slice( 0, 2 ) .map( ( { color }, colorIndex ) => ( { __( 'Presets' ) } { typographyVariations && typographyVariations.length From 7bea0bf34c3fea53a3613257cdec587c3e79ea62 Mon Sep 17 00:00:00 2001 From: scruffian Date: Sat, 24 Feb 2024 12:23:15 +0100 Subject: [PATCH 40/48] Remove unneeded CSS --- .../edit-site/src/components/global-styles/style.scss | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index 7ccf746e98ce9b..fae3a33f4e9231 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -203,14 +203,3 @@ .edit-site-global-styles-sidebar__panel .block-editor-block-icon svg { fill: currentColor; } - -.edit-site-global-styles-screen-typography-typeset__button { - border: $gray-200 $border-width solid; -} - -.edit-site-global-styles-sidebar__panel .edit-site-global-styles-style-variations-container .edit-site-global-styles-variations_item-preview { - min-height: 70px; - line-height: 1.2; - text-align: center; - padding: $grid-unit-10 $border-width * 2; -} From 6fbd61959ddfd79d14198961dd1b1fd0efb316c9 Mon Sep 17 00:00:00 2001 From: scruffian Date: Sat, 24 Feb 2024 14:32:44 +0100 Subject: [PATCH 41/48] updawte the design --- .../global-styles/preview-colors.js | 208 ++++++++++++++++++ .../src/components/global-styles/style.scss | 11 + .../global-styles/variations-color.js | 40 +--- .../global-styles/variations-typography.js | 5 +- 4 files changed, 223 insertions(+), 41 deletions(-) create mode 100644 packages/edit-site/src/components/global-styles/preview-colors.js diff --git a/packages/edit-site/src/components/global-styles/preview-colors.js b/packages/edit-site/src/components/global-styles/preview-colors.js new file mode 100644 index 00000000000000..971ad3b2c6d9e5 --- /dev/null +++ b/packages/edit-site/src/components/global-styles/preview-colors.js @@ -0,0 +1,208 @@ +/** + * WordPress dependencies + */ +import { + __unstableIframe as Iframe, + __unstableEditorStyles as EditorStyles, + privateApis as blockEditorPrivateApis, +} from '@wordpress/block-editor'; +import { + __unstableMotion as motion, + __experimentalHStack as HStack, +} from '@wordpress/components'; +import { + useThrottle, + useReducedMotion, + useResizeObserver, +} from '@wordpress/compose'; +import { useLayoutEffect, useState, useMemo } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { unlock } from '../../lock-unlock'; +import { useStylesPreviewColors } from './hooks'; + +const { useGlobalStyle, useGlobalStylesOutput } = unlock( + blockEditorPrivateApis +); + +const firstFrame = { + start: { + scale: 1, + opacity: 1, + }, + hover: { + scale: 0, + opacity: 0, + }, +}; + +const normalizedWidth = 248; +const normalizedHeight = 152; + +const normalizedColorSwatchSize = 66; + +// Throttle options for useThrottle. Must be defined outside of the component, +// so that the object reference is the same on each render. +const THROTTLE_OPTIONS = { + leading: true, + trailing: true, +}; + +const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => { + const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' ); + const [ gradientValue ] = useGlobalStyle( 'color.gradient' ); + const [ styles ] = useGlobalStylesOutput(); + const disableMotion = useReducedMotion(); + const [ isHovered, setIsHovered ] = useState( false ); + const [ containerResizeListener, { width } ] = useResizeObserver(); + const [ throttledWidth, setThrottledWidthState ] = useState( width ); + const [ ratioState, setRatioState ] = useState(); + + const setThrottledWidth = useThrottle( + setThrottledWidthState, + 250, + THROTTLE_OPTIONS + ); + + // Must use useLayoutEffect to avoid a flash of the iframe at the wrong + // size before the width is set. + useLayoutEffect( () => { + if ( width ) { + setThrottledWidth( width ); + } + }, [ width, setThrottledWidth ] ); + + // Must use useLayoutEffect to avoid a flash of the iframe at the wrong + // size before the width is set. + useLayoutEffect( () => { + const newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1; + const ratioDiff = newRatio - ( ratioState || 0 ); + + // Only update the ratio state if the difference is big enough + // or if the ratio state is not yet set. This is to avoid an + // endless loop of updates at particular viewport heights when the + // presence of a scrollbar causes the width to change slightly. + const isRatioDiffBigEnough = Math.abs( ratioDiff ) > 0.1; + + if ( isRatioDiffBigEnough || ! ratioState ) { + setRatioState( newRatio ); + } + }, [ throttledWidth, ratioState ] ); + + // Set a fallbackRatio to use before the throttled ratio has been set. + const fallbackRatio = width ? width / normalizedWidth : 1; + // Use the throttled ratio if it has been calculated, otherwise + // use the fallback ratio. The throttled ratio is used to avoid + // an endless loop of updates at particular viewport heights. + // See: https://github.com/WordPress/gutenberg/issues/55112 + const ratio = ratioState ? ratioState : fallbackRatio; + + const { highlightedColors } = useStylesPreviewColors(); + + // Reset leaked styles from WP common.css and remove main content layout padding and border. + const editorStyles = useMemo( () => { + if ( styles ) { + return [ + ...styles, + { + css: 'html{overflow:hidden}body{min-width: 0;padding: 0;border: none;}', + isGlobalStyles: true, + }, + ]; + } + + return styles; + }, [ styles ] ); + const isReady = !! width; + + return ( + <> +
+ { containerResizeListener } +
+ { isReady && ( + + ) } + + ); +}; + +export default StylesPreviewColors; diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index fae3a33f4e9231..d4ddda7b668177 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -95,6 +95,7 @@ box-sizing: border-box; // To round the outline in Windows 10 high contrast mode. border-radius: $radius-block-ui; + cursor: pointer; .edit-site-global-styles-variations_item-preview { padding: $border-width * 2; @@ -203,3 +204,13 @@ .edit-site-global-styles-sidebar__panel .block-editor-block-icon svg { fill: currentColor; } + +.edit-site-global-styles-color-variation { + height: 28px; +} + +.edit-site-global-styles-type-preview { + font-size: 22px; + line-height: 44px; + text-align: center; +} diff --git a/packages/edit-site/src/components/global-styles/variations-color.js b/packages/edit-site/src/components/global-styles/variations-color.js index 45c07d3dee8ba0..badb07336d303f 100644 --- a/packages/edit-site/src/components/global-styles/variations-color.js +++ b/packages/edit-site/src/components/global-styles/variations-color.js @@ -3,59 +3,25 @@ */ import { __experimentalGrid as Grid, - __experimentalHStack as HStack, __experimentalVStack as VStack, - __experimentalZStack as ZStack, - ColorIndicator, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import ColorIndicatorWrapper from './color-indicator-wrapper'; import Subtitle from './subtitle'; import Variation from './variation'; +import StylesPreviewColors from './preview-colors'; export default function ColorVariations( { variations } ) { return ( { __( 'Presets' ) } - + { variations.map( ( variation, index ) => ( - { () => { - const colors = - variation?.settings?.color?.palette?.theme ?? - []; - return ( - - - { colors - .slice( 0, 2 ) - .map( ( { color }, colorIndex ) => ( - - - - ) ) } - - - ); - } } + { () => } ) ) } diff --git a/packages/edit-site/src/components/global-styles/variations-typography.js b/packages/edit-site/src/components/global-styles/variations-typography.js index 72d1a920413a04..c894f7d8ef2c94 100644 --- a/packages/edit-site/src/components/global-styles/variations-typography.js +++ b/packages/edit-site/src/components/global-styles/variations-typography.js @@ -76,10 +76,7 @@ const TypePreview = ( { variation } ) => { : {}; return ( Date: Sat, 24 Feb 2024 14:44:47 +0100 Subject: [PATCH 42/48] remove unsed css --- packages/edit-site/src/components/global-styles/style.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index d4ddda7b668177..d1e0a493847054 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -205,10 +205,6 @@ fill: currentColor; } -.edit-site-global-styles-color-variation { - height: 28px; -} - .edit-site-global-styles-type-preview { font-size: 22px; line-height: 44px; From 993c4af9e7042b50fcc95fc50b08efac012b63d0 Mon Sep 17 00:00:00 2001 From: ramon Date: Mon, 26 Feb 2024 13:57:51 +1100 Subject: [PATCH 43/48] Ensuring the cursor for the color previews is a pointer, which is the same as the typography preview Reducing the vheight of the color panel to match typography Some light refactoring --- .../global-styles/preview-colors.js | 18 ++++++++----- .../components/global-styles/screen-colors.js | 2 +- .../src/components/global-styles/variation.js | 26 +++++++++---------- 3 files changed, 26 insertions(+), 20 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/preview-colors.js b/packages/edit-site/src/components/global-styles/preview-colors.js index 971ad3b2c6d9e5..db2bc407292e4d 100644 --- a/packages/edit-site/src/components/global-styles/preview-colors.js +++ b/packages/edit-site/src/components/global-styles/preview-colors.js @@ -93,21 +93,27 @@ const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => { // Set a fallbackRatio to use before the throttled ratio has been set. const fallbackRatio = width ? width / normalizedWidth : 1; - // Use the throttled ratio if it has been calculated, otherwise - // use the fallback ratio. The throttled ratio is used to avoid - // an endless loop of updates at particular viewport heights. - // See: https://github.com/WordPress/gutenberg/issues/55112 + /* + * Use the throttled ratio if it has been calculated, otherwise + * use the fallback ratio. The throttled ratio is used to avoid + * an endless loop of updates at particular viewport heights. + * See: https://github.com/WordPress/gutenberg/issues/55112 + */ const ratio = ratioState ? ratioState : fallbackRatio; const { highlightedColors } = useStylesPreviewColors(); - // Reset leaked styles from WP common.css and remove main content layout padding and border. + /* + * Reset leaked styles from WP common.css and remove main content layout padding and border. + * Add pointer cursor to the body to indicate the iframe is interactive, + * similar to Typography variation previews. + */ const editorStyles = useMemo( () => { if ( styles ) { return [ ...styles, { - css: 'html{overflow:hidden}body{min-width: 0;padding: 0;border: none;}', + css: 'html{overflow:hidden}body{min-width: 0;padding: 0;border: none;cursor: pointer;}', isGlobalStyles: true, }, ]; diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js index 4ab373a3bac8e3..015c2ee2853206 100644 --- a/packages/edit-site/src/components/global-styles/screen-colors.js +++ b/packages/edit-site/src/components/global-styles/screen-colors.js @@ -46,7 +46,7 @@ function ScreenColors() { ) } />
- + { - return { + const context = useMemo( + () => ( { user: { settings: variation.settings ?? {}, styles: variation.styles ?? {}, @@ -33,16 +33,15 @@ export default function Variation( { variation, children } ) { base, merged: mergeBaseAndUserConfigs( base, variation ), setUserConfig: () => {}, - }; - }, [ variation, base ] ); + } ), + [ variation, base ] + ); const selectVariation = () => { - setUserConfig( () => { - return { - settings: variation.settings, - styles: variation.styles, - }; - } ); + setUserConfig( () => ( { + settings: variation.settings, + styles: variation.styles, + } ) ); }; const selectOnEnter = ( event ) => { @@ -52,9 +51,10 @@ export default function Variation( { variation, children } ) { } }; - const isActive = useMemo( () => { - return areGlobalStyleConfigsEqual( user, variation ); - }, [ user, variation ] ); + const isActive = useMemo( + () => areGlobalStyleConfigsEqual( user, variation ), + [ user, variation ] + ); let label = variation?.title; if ( variation?.description ) { From e4eedf0a4574384c4f3666bf59a12ebf66b9fe62 Mon Sep 17 00:00:00 2001 From: ramon Date: Mon, 26 Feb 2024 15:07:58 +1100 Subject: [PATCH 44/48] Reinstate removing property from user config before merging with variation. We do this in order that any user config changes with the same property don't "bleed" into variations. The variation should be "pure". For example, if the user has defined a background color, but the variation has not, we shouldn't merge the two and allow the user background color to persist. Rather the variation's color properties should take the place of all color properties. --- .../use-theme-style-variations-by-property.js | 173 ++++++++++++++++++ .../use-theme-style-variations-by-property.js | 35 +++- 2 files changed, 207 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/hooks/use-theme-style-variations/test/use-theme-style-variations-by-property.js b/packages/edit-site/src/hooks/use-theme-style-variations/test/use-theme-style-variations-by-property.js index ced849f8fb1213..23db164b24895d 100644 --- a/packages/edit-site/src/hooks/use-theme-style-variations/test/use-theme-style-variations-by-property.js +++ b/packages/edit-site/src/hooks/use-theme-style-variations/test/use-theme-style-variations-by-property.js @@ -8,6 +8,7 @@ import { renderHook } from '@testing-library/react'; */ import useThemeStyleVariationsByProperty, { filterObjectByProperty, + removePropertyFromObject, } from '../use-theme-style-variations-by-property'; describe( 'filterObjectByProperty', () => { @@ -962,3 +963,175 @@ describe( 'useThemeStyleVariationsByProperty', () => { ] ); } ); } ); + +describe( 'removePropertyFromObject', () => { + const mockBaseVariation = { + settings: { + typography: { + fontFamilies: { + custom: [ + { + name: 'ADLaM Display', + fontFamily: 'ADLaM Display, system-ui', + slug: 'adlam-display', + fontFace: [ + { + src: 'adlam.woff2', + fontWeight: '400', + fontStyle: 'normal', + fontFamily: 'ADLaM Display', + }, + ], + }, + ], + }, + fontSizes: [ + { + name: 'Base small', + slug: 'base-small', + size: '1px', + }, + { + name: 'Base medium', + slug: 'base-medium', + size: '2px', + }, + { + name: 'Base large', + slug: 'base-large', + size: '3px', + }, + ], + }, + color: { + palette: { + custom: [ + { + color: '#c42727', + name: 'Color 1', + slug: 'custom-color-1', + }, + { + color: '#3b0f0f', + name: 'Color 2', + slug: 'custom-color-2', + }, + ], + }, + }, + layout: { + wideSize: '1137px', + contentSize: '400px', + }, + }, + styles: { + typography: { + fontSize: '12px', + lineHeight: '1.5', + }, + color: { + backgroundColor: 'cheese', + color: 'lettuce', + }, + elements: { + cite: { + color: { + text: 'white', + }, + typography: { + letterSpacing: 'white', + }, + }, + }, + blocks: { + 'core/quote': { + color: { + text: 'hello', + background: 'dolly', + }, + typography: { + fontSize: '111111px', + }, + }, + 'core/group': { + typography: { + fontFamily: 'var:preset|font-family|system-sans-serif', + }, + }, + }, + }, + }; + + it( 'should return with no property', () => { + const object = { test: 'me' }; + expect( removePropertyFromObject( object, undefined ) ).toEqual( + object + ); + } ); + + it( 'should return with non-string property', () => { + const object = { test: 'you' }; + expect( removePropertyFromObject( object, true ) ).toEqual( object ); + } ); + + it( 'should return with empty object', () => { + const object = {}; + expect( removePropertyFromObject( object, 'color' ) ).toEqual( object ); + } ); + + it( 'should remove the specified property from the object', () => { + expect( + removePropertyFromObject( + { + ...mockBaseVariation, + }, + 'typography' + ) + ).toEqual( { + settings: { + color: { + palette: { + custom: [ + { + color: '#c42727', + name: 'Color 1', + slug: 'custom-color-1', + }, + { + color: '#3b0f0f', + name: 'Color 2', + slug: 'custom-color-2', + }, + ], + }, + }, + layout: { + wideSize: '1137px', + contentSize: '400px', + }, + }, + styles: { + color: { + backgroundColor: 'cheese', + color: 'lettuce', + }, + elements: { + cite: { + color: { + text: 'white', + }, + }, + }, + blocks: { + 'core/quote': { + color: { + text: 'hello', + background: 'dolly', + }, + }, + 'core/group': {}, + }, + }, + } ); + } ); +} ); diff --git a/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js b/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js index 1023bef3b88145..d15b624c9eb44e 100644 --- a/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js +++ b/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js @@ -15,6 +15,32 @@ import { unlock } from '../../lock-unlock'; const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); +/** + * Removes all instances of a property from an object. + * + * @param {Object} object The object to remove the property from. + * @param {string} property The property to remove. + * @return {Object} The modified object. + */ +export function removePropertyFromObject( object, property ) { + if ( ! property || typeof property !== 'string' ) { + return object; + } + + if ( typeof object !== 'object' || ! Object.keys( object ).length ) { + return object; + } + + for ( const key in object ) { + if ( key === property ) { + delete object[ key ]; + } else if ( typeof object[ key ] === 'object' ) { + removePropertyFromObject( object[ key ], property ); + } + } + return object; +} + /** * A convenience wrapper for `useThemeStyleVariationsByProperty()` that fetches the current theme style variations, * and user-defined global style/settings object. @@ -39,7 +65,10 @@ export function useCurrentMergeThemeStyleVariationsWithUserConfig( { variations, property, filter, - baseVariation, + baseVariation: removePropertyFromObject( + cloneDeep( baseVariation ), + property + ), } ); } @@ -74,6 +103,10 @@ export const filterObjectByProperty = ( object, property ) => { /** * Returns a new object with only the properties specified in `property`. + * Optional merges the baseVariation object with the variation object. + * Note: this function will only overwrite the specified property in baseVariation if it exists. + * The baseVariation will not be otherwise modified. To strip a property from the baseVariation object, use `removePropertyFromObject`. + * See useCurrentMergeThemeStyleVariationsWithUserConfig for an example of how to use this function. * * @param {Object} props Object of hook args. * @param {Object[]} props.variations The theme style variations to filter. From c642d19cca69079e041c848859e934226bf8b99b Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 27 Feb 2024 12:19:03 +1100 Subject: [PATCH 45/48] i18n for letters --- .../components/global-styles/variations-typography.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/variations-typography.js b/packages/edit-site/src/components/global-styles/variations-typography.js index c894f7d8ef2c94..cb95496abf6fc0 100644 --- a/packages/edit-site/src/components/global-styles/variations-typography.js +++ b/packages/edit-site/src/components/global-styles/variations-typography.js @@ -7,7 +7,7 @@ import { __experimentalVStack as VStack, __unstableMotion as motion, } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; +import { __, _x } from '@wordpress/i18n'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; /** @@ -90,8 +90,12 @@ const TypePreview = ( { variation } ) => { type: 'tween', } } > - A - a + + { _x( 'A', 'Uppercase letter A' ) } + + + { _x( 'a', 'Lowercase letter A' ) } + ); }; From e51b44fe7d359499bc3bbc203dbecd17de5220cc Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 27 Feb 2024 12:39:07 +1100 Subject: [PATCH 46/48] Refactor unique font calculation --- .../global-styles/variations-typography.js | 51 +++++++++---------- 1 file changed, 24 insertions(+), 27 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/variations-typography.js b/packages/edit-site/src/components/global-styles/variations-typography.js index cb95496abf6fc0..cd30ed0b07756e 100644 --- a/packages/edit-site/src/components/global-styles/variations-typography.js +++ b/packages/edit-site/src/components/global-styles/variations-typography.js @@ -58,10 +58,6 @@ const getFontFamilies = ( themeJson ) => { return [ bodyFontFamily, headingFontFamily ]; }; -const getFontFamilyNames = ( themeJson ) => { - const [ bodyFontFamily, headingFontFamily ] = getFontFamilies( themeJson ); - return [ bodyFontFamily?.name, headingFontFamily?.name ]; -}; const TypePreview = ( { variation } ) => { const { base } = useContext( GlobalStylesContext ); @@ -111,32 +107,33 @@ export default function TypographyVariations() { } ); const { base } = useContext( GlobalStylesContext ); - const uniqueTypographyVariations = []; - const uniqueTypographyNames = []; - const isDup = ( x, y ) => { - return uniqueTypographyNames.find( ( it ) => { - return JSON.stringify( it ) === JSON.stringify( [ x, y ] ); - } ); - }; /* - @TODO: not convinced about this yet. Originally, it skipped variations that didn't have - any heading/body fonts, and therefore names. - If we want to pull all "variations", then probably the first iteration is to name the variations according to their titles. + * Filter duplicate variations based on the font families used in the variation. */ - typographyVariations?.forEach( ( variation ) => { - const [ bodyFontFamilyName, headingFontFamilyName ] = - getFontFamilyNames( mergeBaseAndUserConfigs( base, variation ) ); - if ( ! isDup( bodyFontFamilyName, headingFontFamilyName ) ) { - uniqueTypographyVariations.push( variation ); - if ( bodyFontFamilyName && headingFontFamilyName ) { - uniqueTypographyNames.push( [ - bodyFontFamilyName, - headingFontFamilyName, - ] ); - } - } - } ); + const uniqueTypographyVariations = typographyVariations?.length + ? Object.values( + typographyVariations.reduce( ( acc, variation ) => { + const [ bodyFontFamily, headingFontFamily ] = + getFontFamilies( + mergeBaseAndUserConfigs( base, variation ) + ); + if ( + headingFontFamily?.name && + bodyFontFamily?.name && + ! acc[ + `${ headingFontFamily?.name }:${ bodyFontFamily?.name }` + ] + ) { + acc[ + `${ headingFontFamily?.name }:${ bodyFontFamily?.name }` + ] = variation; + } + + return acc; + }, {} ) + ) + : []; return ( From b23d64c4170638ffc94c89cc54e833428981cb58 Mon Sep 17 00:00:00 2001 From: scruffian Date: Tue, 27 Feb 2024 22:47:34 +0000 Subject: [PATCH 47/48] move color and type variations higher --- .../src/components/global-styles/screen-colors.js | 8 ++++---- .../src/components/global-styles/screen-typography.js | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js index 015c2ee2853206..c9ddef9c6230d1 100644 --- a/packages/edit-site/src/components/global-styles/screen-colors.js +++ b/packages/edit-site/src/components/global-styles/screen-colors.js @@ -47,6 +47,10 @@ function ScreenColors() { />
+ { !! colorVariations.length && ( + + ) } + - - { !! colorVariations.length && ( - - ) }
diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js index f5f99096944358..cb2369437058fe 100644 --- a/packages/edit-site/src/components/global-styles/screen-typography.js +++ b/packages/edit-site/src/components/global-styles/screen-typography.js @@ -40,15 +40,15 @@ function ScreenTypography() { />
+ { !! typographyVariations.length && ( + + ) } { ! window.__experimentalDisableFontLibrary && ( { fontLibraryEnabled && } ) } - { !! typographyVariations.length && ( - - ) }
From f7b735e9408c10f9600b1a0bcf2c2c0f1e827f80 Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 28 Feb 2024 12:17:53 +1100 Subject: [PATCH 48/48] Use same box shadow as ColorIndicator so that there's a border around colors This is so that theme colors that are the same value as the background are more noticeable --- .../edit-site/src/components/global-styles/preview-colors.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/edit-site/src/components/global-styles/preview-colors.js b/packages/edit-site/src/components/global-styles/preview-colors.js index db2bc407292e4d..88885baf300626 100644 --- a/packages/edit-site/src/components/global-styles/preview-colors.js +++ b/packages/edit-site/src/components/global-styles/preview-colors.js @@ -176,6 +176,8 @@ const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {