From f14e4c5e8ec24bcccbe9178caf2cf79b6cd8c5d1 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jun 2024 12:33:07 +0100 Subject: [PATCH 01/11] Global Styles: Add a typesets section to Typography Only show typesets if there are fonts --- .../global-styles/screen-typeset.js | 33 +++++++++ .../global-styles/screen-typography.js | 4 +- .../global-styles/typeset-button.js | 68 +++++++++++++++++++ .../src/components/global-styles/typeset.js | 67 ++++++++++++++++++ .../src/components/global-styles/ui.js | 5 ++ 5 files changed, 175 insertions(+), 2 deletions(-) create mode 100644 packages/edit-site/src/components/global-styles/screen-typeset.js create mode 100644 packages/edit-site/src/components/global-styles/typeset-button.js create mode 100644 packages/edit-site/src/components/global-styles/typeset.js diff --git a/packages/edit-site/src/components/global-styles/screen-typeset.js b/packages/edit-site/src/components/global-styles/screen-typeset.js new file mode 100644 index 0000000000000..f146844c1447c --- /dev/null +++ b/packages/edit-site/src/components/global-styles/screen-typeset.js @@ -0,0 +1,33 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { __experimentalVStack as VStack } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import TypographyVariations from './variations/variations-typography'; +import ScreenHeader from './header'; +import Typeset from './typeset'; + +function ScreenTypeset() { + return ( + <> + +
+ + + + +
+ + ); +} + +export default ScreenTypeset; 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 a58802a204ce3..8a008ce7bf459 100644 --- a/packages/edit-site/src/components/global-styles/screen-typography.js +++ b/packages/edit-site/src/components/global-styles/screen-typography.js @@ -10,10 +10,10 @@ import { useSelect } from '@wordpress/data'; * Internal dependencies */ import TypographyElements from './typography-elements'; -import TypographyVariations from './variations/variations-typography'; import FontFamilies from './font-families'; import ScreenHeader from './header'; import FontSizesCount from './font-sizes/font-sizes-count'; +import TypesetButton from './typeset-button'; function ScreenTypography() { const fontLibraryEnabled = useSelect( @@ -32,9 +32,9 @@ function ScreenTypography() { />
+ { fontLibraryEnabled && } -
diff --git a/packages/edit-site/src/components/global-styles/typeset-button.js b/packages/edit-site/src/components/global-styles/typeset-button.js new file mode 100644 index 0000000000000..4c08f08a411d8 --- /dev/null +++ b/packages/edit-site/src/components/global-styles/typeset-button.js @@ -0,0 +1,68 @@ +/** + * WordPress dependencies + */ +import { isRTL, __ } from '@wordpress/i18n'; +import { + __experimentalItemGroup as ItemGroup, + __experimentalVStack as VStack, + __experimentalHStack as HStack, + FlexItem, +} from '@wordpress/components'; +import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; +import { privateApis as editorPrivateApis } from '@wordpress/editor'; +import { useContext } from '@wordpress/element'; +import { Icon, chevronLeft, chevronRight } from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import FontLibraryProvider from './font-library-modal/context'; +import { getFontFamilies } from './utils'; +import { NavigationButtonAsItem } from './navigation-button'; +import Subtitle from './subtitle'; +import { unlock } from '../../lock-unlock'; + +const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); +const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis ); + +function TypesetButton() { + const { base } = useContext( GlobalStylesContext ); + const { user: userConfig } = useContext( GlobalStylesContext ); + const config = mergeBaseAndUserConfigs( base, userConfig ); + const allFontFamilies = getFontFamilies( config ); + const hasFonts = + allFontFamilies.filter( ( font ) => font !== null ).length > 0; + + return ( + hasFonts && ( + + + { __( 'Typeset' ) } + + + + + + { allFontFamilies + .map( ( font ) => font.name ) + .join( ', ' ) } + + + + + + + ) + ); +} + +export default ( { ...props } ) => ( + + + +); 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 0000000000000..f4cadf03b96ce --- /dev/null +++ b/packages/edit-site/src/components/global-styles/typeset.js @@ -0,0 +1,67 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { + __experimentalItemGroup as ItemGroup, + __experimentalVStack as VStack, + __experimentalHStack as HStack, +} from '@wordpress/components'; +import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; +import { privateApis as editorPrivateApis } from '@wordpress/editor'; +import { useContext } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import FontLibraryProvider, { + FontLibraryContext, +} from './font-library-modal/context'; +import FontLibraryModal from './font-library-modal'; +import FontFamilyItem from './font-family-item'; +import Subtitle from './subtitle'; +import { getFontFamilies } from './utils'; +import { unlock } from '../../lock-unlock'; + +const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); +const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis ); + +function Typesets() { + const { modalTabOpen, setModalTabOpen } = useContext( FontLibraryContext ); + const { base } = useContext( GlobalStylesContext ); + const { user: userConfig } = useContext( GlobalStylesContext ); + const config = mergeBaseAndUserConfigs( base, userConfig ); + const allFontFamilies = getFontFamilies( config ); + const hasFonts = + allFontFamilies.filter( ( font ) => font !== null ).length > 0; + + return ( + hasFonts && ( + <> + { !! modalTabOpen && ( + setModalTabOpen( null ) } + defaultTabId={ modalTabOpen } + /> + ) } + + + + { __( 'Typeset' ) } + + + { allFontFamilies.map( ( font ) => ( + + ) ) } + + + + ) + ); +} + +export default ( { ...props } ) => ( + + + +); diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index 40d20bc1ec86f..54bd4f97390a8 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -32,6 +32,7 @@ import { } from './screen-block-list'; import ScreenBlock from './screen-block'; import ScreenTypography from './screen-typography'; +import ScreenTypeset from './screen-typeset'; import ScreenTypographyElement from './screen-typography-element'; import FontSize from './font-sizes/font-size'; import FontSizes from './font-sizes/font-sizes'; @@ -323,6 +324,10 @@ function GlobalStylesUI() { + + + + From 4a6d43fabbb4fe968f6e1c208d581413cfbe417e Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 19 Jun 2024 12:42:00 +0100 Subject: [PATCH 02/11] update typesets to contain font families --- .../components/global-styles/screen-typeset.js | 18 ++++++++++++++---- .../global-styles/screen-typography.js | 9 --------- .../components/global-styles/typeset-button.js | 2 +- .../src/components/global-styles/typeset.js | 14 ++++++++++---- .../src/components/global-styles/utils.js | 10 +++++++++- 5 files changed, 34 insertions(+), 19 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/screen-typeset.js b/packages/edit-site/src/components/global-styles/screen-typeset.js index f146844c1447c..85cb17c819464 100644 --- a/packages/edit-site/src/components/global-styles/screen-typeset.js +++ b/packages/edit-site/src/components/global-styles/screen-typeset.js @@ -2,6 +2,8 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; +import { useSelect } from '@wordpress/data'; +import { store as editorStore } from '@wordpress/editor'; import { __experimentalVStack as VStack } from '@wordpress/components'; /** @@ -9,21 +11,29 @@ import { __experimentalVStack as VStack } from '@wordpress/components'; */ import TypographyVariations from './variations/variations-typography'; import ScreenHeader from './header'; -import Typeset from './typeset'; +import FontFamilies from './font-families'; function ScreenTypeset() { + const fontLibraryEnabled = useSelect( + ( select ) => + select( editorStore ).getEditorSettings().fontLibraryEnabled, + [] + ); + return ( <>
- - + + + { ! window.__experimentalDisableFontLibrary && + fontLibraryEnabled && }
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 8a008ce7bf459..e289a0402f645 100644 --- a/packages/edit-site/src/components/global-styles/screen-typography.js +++ b/packages/edit-site/src/components/global-styles/screen-typography.js @@ -3,25 +3,16 @@ */ import { __ } from '@wordpress/i18n'; import { __experimentalVStack as VStack } from '@wordpress/components'; -import { store as editorStore } from '@wordpress/editor'; -import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ import TypographyElements from './typography-elements'; -import FontFamilies from './font-families'; import ScreenHeader from './header'; import FontSizesCount from './font-sizes/font-sizes-count'; import TypesetButton from './typeset-button'; function ScreenTypography() { - const fontLibraryEnabled = useSelect( - ( select ) => - select( editorStore ).getEditorSettings().fontLibraryEnabled, - [] - ); - return ( <> { allFontFamilies - .map( ( font ) => font.name ) + .map( ( font ) => font?.name ) .join( ', ' ) } - { __( 'Typeset' ) } + { __( 'Fonts' ) } - { allFontFamilies.map( ( font ) => ( - - ) ) } + { allFontFamilies.map( + ( font ) => + font && ( + + ) + ) } diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js index 6096b381fb218..34d2ffe4cfb96 100644 --- a/packages/edit-site/src/components/global-styles/utils.js +++ b/packages/edit-site/src/components/global-styles/utils.js @@ -52,7 +52,15 @@ function getFontFamilyFromSetting( fontFamilies, setting ) { } export function getFontFamilies( themeJson ) { - const fontFamilies = themeJson?.settings?.typography?.fontFamilies?.theme; // TODO this could not be under theme. + const themeFontFamilies = + themeJson?.settings?.typography?.fontFamilies?.theme; + const customFontFamilies = + themeJson?.settings?.typography?.fontFamilies?.custom; + + let fontFamilies = themeFontFamilies; + if ( customFontFamilies ) { + fontFamilies = [ ...themeFontFamilies, ...customFontFamilies ]; + } const bodyFontFamilySetting = themeJson?.styles?.typography?.fontFamily; const bodyFontFamily = getFontFamilyFromSetting( fontFamilies, From e147702bbd6d24a4122ab5410ab71cdc5f2a4214 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 19 Jun 2024 15:39:18 +0100 Subject: [PATCH 03/11] add variation name to typesets --- .../global-styles/typeset-button.js | 34 +++++++++++++++---- 1 file changed, 27 insertions(+), 7 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/typeset-button.js b/packages/edit-site/src/components/global-styles/typeset-button.js index eaf0e24dfccac..d26f9307e0abc 100644 --- a/packages/edit-site/src/components/global-styles/typeset-button.js +++ b/packages/edit-site/src/components/global-styles/typeset-button.js @@ -8,9 +8,11 @@ import { __experimentalHStack as HStack, FlexItem, } from '@wordpress/components'; +import { store as coreStore } from '@wordpress/core-data'; +import { useSelect } from '@wordpress/data'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import { privateApis as editorPrivateApis } from '@wordpress/editor'; -import { useContext } from '@wordpress/element'; +import { useMemo, useContext } from '@wordpress/element'; import { Icon, chevronLeft, chevronRight } from '@wordpress/icons'; /** @@ -22,7 +24,9 @@ import { NavigationButtonAsItem } from './navigation-button'; import Subtitle from './subtitle'; import { unlock } from '../../lock-unlock'; -const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); +const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( + blockEditorPrivateApis +); const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis ); function TypesetButton() { @@ -32,6 +36,26 @@ function TypesetButton() { const allFontFamilies = getFontFamilies( config ); const hasFonts = allFontFamilies.filter( ( font ) => font !== null ).length > 0; + const variations = useSelect( ( select ) => { + return select( + coreStore + ).__experimentalGetCurrentThemeGlobalStylesVariations(); + }, [] ); + + const activeVariation = useMemo( + () => + variations.find( ( variation ) => + areGlobalStyleConfigsEqual( userConfig, variation ) + ), + [ ( userConfig, variations ) ] + ); + + let title; + if ( activeVariation ) { + title = activeVariation.title; + } else { + title = allFontFamilies.map( ( font ) => font?.name ).join( ', ' ); + } return ( hasFonts && ( @@ -45,11 +69,7 @@ function TypesetButton() { aria-label={ __( 'Typeset' ) } > - - { allFontFamilies - .map( ( font ) => font?.name ) - .join( ', ' ) } - + { title } From 79868db652e236a4e80af52c3ef5ef71ad874166 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 19 Jun 2024 15:39:49 +0100 Subject: [PATCH 04/11] add variation name to typesets --- .../edit-site/src/components/global-styles/typeset-button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/typeset-button.js b/packages/edit-site/src/components/global-styles/typeset-button.js index d26f9307e0abc..eabb6e3a5651d 100644 --- a/packages/edit-site/src/components/global-styles/typeset-button.js +++ b/packages/edit-site/src/components/global-styles/typeset-button.js @@ -47,7 +47,7 @@ function TypesetButton() { variations.find( ( variation ) => areGlobalStyleConfigsEqual( userConfig, variation ) ), - [ ( userConfig, variations ) ] + [ userConfig, variations ] ); let title; From 883f52a12d28a5d396c2b955a8a422ca40967d9c Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 19 Jun 2024 16:35:06 +0100 Subject: [PATCH 05/11] use variation titles for typeset button --- .../global-styles/typeset-button.js | 37 +++++++++++-------- 1 file changed, 21 insertions(+), 16 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/typeset-button.js b/packages/edit-site/src/components/global-styles/typeset-button.js index eabb6e3a5651d..257a32c962a57 100644 --- a/packages/edit-site/src/components/global-styles/typeset-button.js +++ b/packages/edit-site/src/components/global-styles/typeset-button.js @@ -23,10 +23,9 @@ import { getFontFamilies } from './utils'; import { NavigationButtonAsItem } from './navigation-button'; import Subtitle from './subtitle'; import { unlock } from '../../lock-unlock'; +import { filterObjectByProperty } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property'; -const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( - blockEditorPrivateApis -); +const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis ); function TypesetButton() { @@ -41,21 +40,27 @@ function TypesetButton() { coreStore ).__experimentalGetCurrentThemeGlobalStylesVariations(); }, [] ); - - const activeVariation = useMemo( - () => - variations.find( ( variation ) => - areGlobalStyleConfigsEqual( userConfig, variation ) - ), - [ userConfig, variations ] + const userTypographyConfig = filterObjectByProperty( + userConfig, + 'typography' ); - let title; - if ( activeVariation ) { - title = activeVariation.title; - } else { - title = allFontFamilies.map( ( font ) => font?.name ).join( ', ' ); - } + const title = useMemo( () => { + if ( Object.keys( userTypographyConfig ).length === 0 ) { + return __( 'Default' ); + } + const activeVariation = variations.find( ( variation ) => { + return ( + JSON.stringify( + filterObjectByProperty( variation, 'typography' ) + ) === JSON.stringify( userTypographyConfig ) + ); + } ); + if ( activeVariation ) { + return activeVariation.title; + } + return allFontFamilies.map( ( font ) => font?.name ).join( ', ' ); + }, [ userTypographyConfig, variations ] ); return ( hasFonts && ( From 31a0996a0311a54bb8736d235b50bcd50f970f1e Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 24 Jul 2024 09:12:41 +0100 Subject: [PATCH 06/11] Update packages/edit-site/src/components/global-styles/typeset-button.js Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com> --- .../edit-site/src/components/global-styles/typeset-button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/typeset-button.js b/packages/edit-site/src/components/global-styles/typeset-button.js index 257a32c962a57..667c6561222fc 100644 --- a/packages/edit-site/src/components/global-styles/typeset-button.js +++ b/packages/edit-site/src/components/global-styles/typeset-button.js @@ -52,7 +52,7 @@ function TypesetButton() { const activeVariation = variations.find( ( variation ) => { return ( JSON.stringify( - filterObjectByProperty( variation, 'typography' ) + filterObjectByProperties( variation, 'typography' ) ) === JSON.stringify( userTypographyConfig ) ); } ); From de2dd63fef0faaf10fc2de5a0489c1859523a1d9 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 24 Jul 2024 09:12:47 +0100 Subject: [PATCH 07/11] Update packages/edit-site/src/components/global-styles/typeset-button.js Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com> --- .../edit-site/src/components/global-styles/typeset-button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/typeset-button.js b/packages/edit-site/src/components/global-styles/typeset-button.js index 667c6561222fc..fc6bde24f2040 100644 --- a/packages/edit-site/src/components/global-styles/typeset-button.js +++ b/packages/edit-site/src/components/global-styles/typeset-button.js @@ -23,7 +23,7 @@ import { getFontFamilies } from './utils'; import { NavigationButtonAsItem } from './navigation-button'; import Subtitle from './subtitle'; import { unlock } from '../../lock-unlock'; -import { filterObjectByProperty } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property'; +import { filterObjectByProperties } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property'; const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis ); From 3b6000aebd53eb5ddd6933ea3511145a1b6a67a7 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 24 Jul 2024 09:12:54 +0100 Subject: [PATCH 08/11] Update packages/edit-site/src/components/global-styles/typeset-button.js Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com> --- .../edit-site/src/components/global-styles/typeset-button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/typeset-button.js b/packages/edit-site/src/components/global-styles/typeset-button.js index fc6bde24f2040..d66310f2ed8ff 100644 --- a/packages/edit-site/src/components/global-styles/typeset-button.js +++ b/packages/edit-site/src/components/global-styles/typeset-button.js @@ -40,7 +40,7 @@ function TypesetButton() { coreStore ).__experimentalGetCurrentThemeGlobalStylesVariations(); }, [] ); - const userTypographyConfig = filterObjectByProperty( + const userTypographyConfig = filterObjectByProperties( userConfig, 'typography' ); From 312dc1fb2e18b63e2a7b7abfff476cbd013d9ae7 Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Thu, 25 Jul 2024 10:29:22 +0100 Subject: [PATCH 09/11] Add fontLibraryEnabled to ScreenTypography --- .../src/components/global-styles/screen-typography.js | 9 +++++++++ 1 file changed, 9 insertions(+) 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 e289a0402f645..c23592c51a6a2 100644 --- a/packages/edit-site/src/components/global-styles/screen-typography.js +++ b/packages/edit-site/src/components/global-styles/screen-typography.js @@ -3,6 +3,8 @@ */ import { __ } from '@wordpress/i18n'; import { __experimentalVStack as VStack } from '@wordpress/components'; +import { useSelect } from '@wordpress/data'; +import { store as editorStore } from '@wordpress/editor'; /** * Internal dependencies @@ -11,8 +13,15 @@ import TypographyElements from './typography-elements'; import ScreenHeader from './header'; import FontSizesCount from './font-sizes/font-sizes-count'; import TypesetButton from './typeset-button'; +import FontFamilies from './font-families'; function ScreenTypography() { + const fontLibraryEnabled = useSelect( + ( select ) => + select( editorStore ).getEditorSettings().fontLibraryEnabled, + [] + ); + return ( <> Date: Thu, 25 Jul 2024 10:50:05 +0100 Subject: [PATCH 10/11] Remove window.__experimentalDisableFontLibrary --- .../edit-site/src/components/global-styles/screen-typeset.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/screen-typeset.js b/packages/edit-site/src/components/global-styles/screen-typeset.js index 85cb17c819464..ce754121dfe1b 100644 --- a/packages/edit-site/src/components/global-styles/screen-typeset.js +++ b/packages/edit-site/src/components/global-styles/screen-typeset.js @@ -32,8 +32,7 @@ function ScreenTypeset() { - { ! window.__experimentalDisableFontLibrary && - fontLibraryEnabled && } + { fontLibraryEnabled && } From 6d65aab8399495b2a9e30c3bc4d7247dcbd63b81 Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Thu, 25 Jul 2024 10:51:09 +0100 Subject: [PATCH 11/11] Check for themeFontFamilies and customFontFamilies --- packages/edit-site/src/components/global-styles/utils.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js index 34d2ffe4cfb96..66a25854a06fe 100644 --- a/packages/edit-site/src/components/global-styles/utils.js +++ b/packages/edit-site/src/components/global-styles/utils.js @@ -57,9 +57,13 @@ export function getFontFamilies( themeJson ) { const customFontFamilies = themeJson?.settings?.typography?.fontFamilies?.custom; - let fontFamilies = themeFontFamilies; - if ( customFontFamilies ) { + let fontFamilies = []; + if ( themeFontFamilies && customFontFamilies ) { fontFamilies = [ ...themeFontFamilies, ...customFontFamilies ]; + } else if ( themeFontFamilies ) { + fontFamilies = themeFontFamilies; + } else if ( customFontFamilies ) { + fontFamilies = customFontFamilies; } const bodyFontFamilySetting = themeJson?.styles?.typography?.fontFamily; const bodyFontFamily = getFontFamilyFromSetting(