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..ce754121dfe1b --- /dev/null +++ b/packages/edit-site/src/components/global-styles/screen-typeset.js @@ -0,0 +1,42 @@ +/** + * 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'; + +/** + * Internal dependencies + */ +import TypographyVariations from './variations/variations-typography'; +import ScreenHeader from './header'; +import FontFamilies from './font-families'; + +function ScreenTypeset() { + const fontLibraryEnabled = useSelect( + ( select ) => + select( editorStore ).getEditorSettings().fontLibraryEnabled, + [] + ); + + return ( + <> + +
+ + + + { fontLibraryEnabled && } + +
+ + ); +} + +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..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,17 +3,17 @@ */ import { __ } from '@wordpress/i18n'; import { __experimentalVStack as VStack } from '@wordpress/components'; -import { store as editorStore } from '@wordpress/editor'; import { useSelect } from '@wordpress/data'; +import { store as editorStore } from '@wordpress/editor'; /** * 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'; +import FontFamilies from './font-families'; 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..d66310f2ed8ff --- /dev/null +++ b/packages/edit-site/src/components/global-styles/typeset-button.js @@ -0,0 +1,93 @@ +/** + * WordPress dependencies + */ +import { isRTL, __ } from '@wordpress/i18n'; +import { + __experimentalItemGroup as ItemGroup, + __experimentalVStack as VStack, + __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 { useMemo, 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'; +import { filterObjectByProperties } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property'; + +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; + const variations = useSelect( ( select ) => { + return select( + coreStore + ).__experimentalGetCurrentThemeGlobalStylesVariations(); + }, [] ); + const userTypographyConfig = filterObjectByProperties( + userConfig, + 'typography' + ); + + const title = useMemo( () => { + if ( Object.keys( userTypographyConfig ).length === 0 ) { + return __( 'Default' ); + } + const activeVariation = variations.find( ( variation ) => { + return ( + JSON.stringify( + filterObjectByProperties( variation, 'typography' ) + ) === JSON.stringify( userTypographyConfig ) + ); + } ); + if ( activeVariation ) { + return activeVariation.title; + } + return allFontFamilies.map( ( font ) => font?.name ).join( ', ' ); + }, [ userTypographyConfig, variations ] ); + + return ( + hasFonts && ( + + + { __( 'Typeset' ) } + + + + + { title } + + + + + + ) + ); +} + +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..e99e6a037500a --- /dev/null +++ b/packages/edit-site/src/components/global-styles/typeset.js @@ -0,0 +1,73 @@ +/** + * 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 } + /> + ) } + + + + { __( 'Fonts' ) } + + + { allFontFamilies.map( + ( font ) => + 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() { + + + + diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js index 6096b381fb218..66a25854a06fe 100644 --- a/packages/edit-site/src/components/global-styles/utils.js +++ b/packages/edit-site/src/components/global-styles/utils.js @@ -52,7 +52,19 @@ 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 = []; + 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( fontFamilies,