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 00000000000000..f146844c1447c2 --- /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 08472325ebc1f8..70136e68fcff43 100644 --- a/packages/edit-site/src/components/global-styles/screen-typography.js +++ b/packages/edit-site/src/components/global-styles/screen-typography.js @@ -10,9 +10,9 @@ 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 TypesetButton from './typeset-button'; function ScreenTypography() { const fontLibraryEnabled = useSelect( @@ -31,10 +31,10 @@ function ScreenTypography() { />
+ { ! window.__experimentalDisableFontLibrary && 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 00000000000000..4c08f08a411d8e --- /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 00000000000000..f4cadf03b96ce6 --- /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 08cd20e9aac6a8..6db84e248df755 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 ScreenColors from './screen-colors'; import ScreenColorPalette from './screen-color-palette'; @@ -313,6 +314,10 @@ function GlobalStylesUI() { + + + +