@wordpress/edit-site 4.16.0 → 4.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -0
- package/build/components/block-editor/block-inspector-button.js +1 -1
- package/build/components/block-editor/block-inspector-button.js.map +1 -1
- package/build/components/block-editor/index.js +17 -11
- package/build/components/block-editor/index.js.map +1 -1
- package/build/components/editor/index.js +5 -7
- package/build/components/editor/index.js.map +1 -1
- package/build/components/global-styles/preview.js +84 -49
- package/build/components/global-styles/preview.js.map +1 -1
- package/build/components/global-styles/screen-style-variations.js +35 -4
- package/build/components/global-styles/screen-style-variations.js.map +1 -1
- package/build/components/global-styles/typography-panel.js +15 -2
- package/build/components/global-styles/typography-panel.js.map +1 -1
- package/build/components/global-styles/typography-utils.js +39 -176
- package/build/components/global-styles/typography-utils.js.map +1 -1
- package/build/components/global-styles/use-global-styles-output.js +27 -9
- package/build/components/global-styles/use-global-styles-output.js.map +1 -1
- package/build/components/{header → header-edit-mode}/document-actions/index.js +58 -24
- package/build/components/header-edit-mode/document-actions/index.js.map +1 -0
- package/build/components/{header → header-edit-mode}/index.js +13 -49
- package/build/components/header-edit-mode/index.js.map +1 -0
- package/build/components/{header → header-edit-mode}/mode-switcher/index.js +0 -0
- package/build/components/header-edit-mode/mode-switcher/index.js.map +1 -0
- package/build/components/{header → header-edit-mode}/more-menu/copy-content-menu-item.js +0 -0
- package/build/components/header-edit-mode/more-menu/copy-content-menu-item.js.map +1 -0
- package/build/components/{header → header-edit-mode}/more-menu/index.js +0 -0
- package/build/components/header-edit-mode/more-menu/index.js.map +1 -0
- package/build/components/{header → header-edit-mode}/more-menu/site-export.js +0 -0
- package/build/components/header-edit-mode/more-menu/site-export.js.map +1 -0
- package/build/components/{header → header-edit-mode}/more-menu/welcome-guide-menu-item.js +0 -0
- package/build/components/header-edit-mode/more-menu/welcome-guide-menu-item.js.map +1 -0
- package/build/components/{header → header-edit-mode}/plugin-more-menu-item/index.js +0 -0
- package/build/components/header-edit-mode/plugin-more-menu-item/index.js.map +1 -0
- package/build/components/{header → header-edit-mode}/plugin-sidebar-more-menu-item/index.js +0 -0
- package/build/components/header-edit-mode/plugin-sidebar-more-menu-item/index.js.map +1 -0
- package/build/components/{header → header-edit-mode}/tools-more-menu-group/index.js +0 -0
- package/build/components/header-edit-mode/tools-more-menu-group/index.js.map +1 -0
- package/build/components/{header → header-edit-mode}/undo-redo/redo.js +0 -0
- package/build/components/header-edit-mode/undo-redo/redo.js.map +1 -0
- package/build/components/{header → header-edit-mode}/undo-redo/undo.js +0 -0
- package/build/components/header-edit-mode/undo-redo/undo.js.map +1 -0
- package/build/components/keyboard-shortcuts/index.js +1 -1
- package/build/components/keyboard-shortcuts/index.js.map +1 -1
- package/build/components/{sidebar → sidebar-edit-mode}/constants.js +0 -0
- package/build/components/sidebar-edit-mode/constants.js.map +1 -0
- package/build/components/{sidebar → sidebar-edit-mode}/default-sidebar.js +0 -0
- package/build/components/sidebar-edit-mode/default-sidebar.js.map +1 -0
- package/build/components/{sidebar → sidebar-edit-mode}/global-styles-sidebar.js +0 -0
- package/build/components/sidebar-edit-mode/global-styles-sidebar.js.map +1 -0
- package/build/components/{sidebar → sidebar-edit-mode}/index.js +1 -1
- package/build/components/sidebar-edit-mode/index.js.map +1 -0
- package/build/components/{sidebar → sidebar-edit-mode}/navigation-menu-sidebar/index.js +0 -0
- package/build/components/sidebar-edit-mode/navigation-menu-sidebar/index.js.map +1 -0
- package/build/components/{sidebar → sidebar-edit-mode}/navigation-menu-sidebar/navigation-inspector.js +0 -0
- package/build/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js.map +1 -0
- package/build/components/{sidebar → sidebar-edit-mode}/navigation-menu-sidebar/navigation-menu.js +0 -0
- package/build/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-menu.js.map +1 -0
- package/build/components/{sidebar → sidebar-edit-mode}/plugin-sidebar/index.js +1 -1
- package/build/components/sidebar-edit-mode/plugin-sidebar/index.js.map +1 -0
- package/build/components/{sidebar → sidebar-edit-mode}/settings-header/index.js +2 -2
- package/build/components/sidebar-edit-mode/settings-header/index.js.map +1 -0
- package/build/components/{sidebar → sidebar-edit-mode}/template-card/index.js +0 -0
- package/build/components/sidebar-edit-mode/template-card/index.js.map +1 -0
- package/build/components/{sidebar → sidebar-edit-mode}/template-card/template-actions.js +0 -0
- package/build/components/sidebar-edit-mode/template-card/template-actions.js.map +1 -0
- package/build/components/{sidebar → sidebar-edit-mode}/template-card/template-areas.js +0 -0
- package/build/components/sidebar-edit-mode/template-card/template-areas.js.map +1 -0
- package/build/index.js +3 -3
- package/build/index.js.map +1 -1
- package/build-module/components/block-editor/block-inspector-button.js +1 -1
- package/build-module/components/block-editor/block-inspector-button.js.map +1 -1
- package/build-module/components/block-editor/index.js +16 -10
- package/build-module/components/block-editor/index.js.map +1 -1
- package/build-module/components/editor/index.js +4 -6
- package/build-module/components/editor/index.js.map +1 -1
- package/build-module/components/global-styles/preview.js +84 -49
- package/build-module/components/global-styles/preview.js.map +1 -1
- package/build-module/components/global-styles/screen-style-variations.js +36 -6
- package/build-module/components/global-styles/screen-style-variations.js.map +1 -1
- package/build-module/components/global-styles/typography-panel.js +14 -2
- package/build-module/components/global-styles/typography-panel.js.map +1 -1
- package/build-module/components/global-styles/typography-utils.js +37 -169
- package/build-module/components/global-styles/typography-utils.js.map +1 -1
- package/build-module/components/global-styles/use-global-styles-output.js +26 -9
- package/build-module/components/global-styles/use-global-styles-output.js.map +1 -1
- package/build-module/components/{header → header-edit-mode}/document-actions/index.js +53 -24
- package/build-module/components/header-edit-mode/document-actions/index.js.map +1 -0
- package/build-module/components/{header → header-edit-mode}/index.js +13 -46
- package/build-module/components/header-edit-mode/index.js.map +1 -0
- package/build-module/components/{header → header-edit-mode}/mode-switcher/index.js +0 -0
- package/build-module/components/header-edit-mode/mode-switcher/index.js.map +1 -0
- package/build-module/components/{header → header-edit-mode}/more-menu/copy-content-menu-item.js +0 -0
- package/build-module/components/header-edit-mode/more-menu/copy-content-menu-item.js.map +1 -0
- package/build-module/components/{header → header-edit-mode}/more-menu/index.js +0 -0
- package/build-module/components/header-edit-mode/more-menu/index.js.map +1 -0
- package/build-module/components/{header → header-edit-mode}/more-menu/site-export.js +0 -0
- package/build-module/components/header-edit-mode/more-menu/site-export.js.map +1 -0
- package/build-module/components/{header → header-edit-mode}/more-menu/welcome-guide-menu-item.js +0 -0
- package/build-module/components/header-edit-mode/more-menu/welcome-guide-menu-item.js.map +1 -0
- package/build-module/components/{header → header-edit-mode}/plugin-more-menu-item/index.js +0 -0
- package/build-module/components/header-edit-mode/plugin-more-menu-item/index.js.map +1 -0
- package/build-module/components/{header → header-edit-mode}/plugin-sidebar-more-menu-item/index.js +0 -0
- package/build-module/components/header-edit-mode/plugin-sidebar-more-menu-item/index.js.map +1 -0
- package/build-module/components/{header → header-edit-mode}/tools-more-menu-group/index.js +0 -0
- package/build-module/components/header-edit-mode/tools-more-menu-group/index.js.map +1 -0
- package/build-module/components/{header → header-edit-mode}/undo-redo/redo.js +0 -0
- package/build-module/components/header-edit-mode/undo-redo/redo.js.map +1 -0
- package/build-module/components/{header → header-edit-mode}/undo-redo/undo.js +0 -0
- package/build-module/components/header-edit-mode/undo-redo/undo.js.map +1 -0
- package/build-module/components/keyboard-shortcuts/index.js +1 -1
- package/build-module/components/keyboard-shortcuts/index.js.map +1 -1
- package/build-module/components/{sidebar → sidebar-edit-mode}/constants.js +0 -0
- package/build-module/components/sidebar-edit-mode/constants.js.map +1 -0
- package/build-module/components/{sidebar → sidebar-edit-mode}/default-sidebar.js +0 -0
- package/build-module/components/sidebar-edit-mode/default-sidebar.js.map +1 -0
- package/build-module/components/{sidebar → sidebar-edit-mode}/global-styles-sidebar.js +0 -0
- package/build-module/components/sidebar-edit-mode/global-styles-sidebar.js.map +1 -0
- package/build-module/components/{sidebar → sidebar-edit-mode}/index.js +1 -1
- package/build-module/components/sidebar-edit-mode/index.js.map +1 -0
- package/build-module/components/{sidebar → sidebar-edit-mode}/navigation-menu-sidebar/index.js +0 -0
- package/build-module/components/sidebar-edit-mode/navigation-menu-sidebar/index.js.map +1 -0
- package/build-module/components/{sidebar → sidebar-edit-mode}/navigation-menu-sidebar/navigation-inspector.js +0 -0
- package/build-module/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js.map +1 -0
- package/build-module/components/{sidebar → sidebar-edit-mode}/navigation-menu-sidebar/navigation-menu.js +0 -0
- package/build-module/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-menu.js.map +1 -0
- package/build-module/components/{sidebar → sidebar-edit-mode}/plugin-sidebar/index.js +1 -1
- package/build-module/components/sidebar-edit-mode/plugin-sidebar/index.js.map +1 -0
- package/build-module/components/{sidebar → sidebar-edit-mode}/settings-header/index.js +2 -2
- package/build-module/components/sidebar-edit-mode/settings-header/index.js.map +1 -0
- package/build-module/components/{sidebar → sidebar-edit-mode}/template-card/index.js +0 -0
- package/build-module/components/sidebar-edit-mode/template-card/index.js.map +1 -0
- package/build-module/components/{sidebar → sidebar-edit-mode}/template-card/template-actions.js +0 -0
- package/build-module/components/sidebar-edit-mode/template-card/template-actions.js.map +1 -0
- package/build-module/components/{sidebar → sidebar-edit-mode}/template-card/template-areas.js +0 -0
- package/build-module/components/sidebar-edit-mode/template-card/template-areas.js.map +1 -0
- package/build-module/index.js +3 -3
- package/build-module/index.js.map +1 -1
- package/build-style/style-rtl.css +61 -86
- package/build-style/style.css +61 -86
- package/package.json +29 -29
- package/src/components/block-editor/block-inspector-button.js +1 -1
- package/src/components/block-editor/index.js +29 -11
- package/src/components/editor/index.js +2 -4
- package/src/components/global-styles/preview.js +80 -59
- package/src/components/global-styles/screen-style-variations.js +39 -4
- package/src/components/global-styles/test/typography-utils.js +333 -103
- package/src/components/global-styles/test/use-global-styles-output.js +57 -3
- package/src/components/global-styles/typography-panel.js +14 -1
- package/src/components/global-styles/typography-utils.js +34 -195
- package/src/components/global-styles/use-global-styles-output.js +16 -0
- package/src/components/{header → header-edit-mode}/document-actions/index.js +67 -46
- package/src/components/{header → header-edit-mode}/document-actions/style.scss +0 -0
- package/src/components/{header → header-edit-mode}/index.js +12 -44
- package/src/components/{header → header-edit-mode}/mode-switcher/index.js +0 -0
- package/src/components/{header → header-edit-mode}/more-menu/copy-content-menu-item.js +0 -0
- package/src/components/{header → header-edit-mode}/more-menu/index.js +0 -0
- package/src/components/{header → header-edit-mode}/more-menu/site-export.js +0 -0
- package/src/components/{header → header-edit-mode}/more-menu/welcome-guide-menu-item.js +0 -0
- package/src/components/{header → header-edit-mode}/plugin-more-menu-item/index.js +0 -0
- package/src/components/{header → header-edit-mode}/plugin-sidebar-more-menu-item/index.js +0 -0
- package/src/components/{header → header-edit-mode}/style.scss +20 -50
- package/src/components/{header → header-edit-mode}/tools-more-menu-group/index.js +0 -0
- package/src/components/{header → header-edit-mode}/undo-redo/redo.js +0 -0
- package/src/components/{header → header-edit-mode}/undo-redo/undo.js +0 -0
- package/src/components/keyboard-shortcuts/index.js +1 -1
- package/src/components/{sidebar → sidebar-edit-mode}/constants.js +0 -0
- package/src/components/{sidebar → sidebar-edit-mode}/default-sidebar.js +0 -0
- package/src/components/{sidebar → sidebar-edit-mode}/global-styles-sidebar.js +0 -0
- package/src/components/{sidebar → sidebar-edit-mode}/index.js +1 -1
- package/src/components/{sidebar → sidebar-edit-mode}/navigation-menu-sidebar/index.js +0 -0
- package/src/components/{sidebar → sidebar-edit-mode}/navigation-menu-sidebar/navigation-inspector.js +0 -0
- package/src/components/{sidebar → sidebar-edit-mode}/navigation-menu-sidebar/navigation-menu.js +0 -0
- package/src/components/{sidebar → sidebar-edit-mode}/navigation-menu-sidebar/style.scss +0 -0
- package/src/components/{sidebar → sidebar-edit-mode}/plugin-sidebar/index.js +1 -1
- package/src/components/{sidebar → sidebar-edit-mode}/settings-header/index.js +2 -2
- package/src/components/{sidebar → sidebar-edit-mode}/settings-header/style.scss +2 -2
- package/src/components/{sidebar → sidebar-edit-mode}/style.scss +1 -1
- package/src/components/{sidebar → sidebar-edit-mode}/template-card/index.js +0 -0
- package/src/components/{sidebar → sidebar-edit-mode}/template-card/style.scss +0 -0
- package/src/components/{sidebar → sidebar-edit-mode}/template-card/template-actions.js +0 -0
- package/src/components/{sidebar → sidebar-edit-mode}/template-card/template-areas.js +0 -0
- package/src/index.js +3 -3
- package/src/style.scss +6 -6
- package/build/components/header/document-actions/index.js.map +0 -1
- package/build/components/header/index.js.map +0 -1
- package/build/components/header/mode-switcher/index.js.map +0 -1
- package/build/components/header/more-menu/copy-content-menu-item.js.map +0 -1
- package/build/components/header/more-menu/index.js.map +0 -1
- package/build/components/header/more-menu/site-export.js.map +0 -1
- package/build/components/header/more-menu/welcome-guide-menu-item.js.map +0 -1
- package/build/components/header/plugin-more-menu-item/index.js.map +0 -1
- package/build/components/header/plugin-sidebar-more-menu-item/index.js.map +0 -1
- package/build/components/header/tools-more-menu-group/index.js.map +0 -1
- package/build/components/header/undo-redo/redo.js.map +0 -1
- package/build/components/header/undo-redo/undo.js.map +0 -1
- package/build/components/sidebar/constants.js.map +0 -1
- package/build/components/sidebar/default-sidebar.js.map +0 -1
- package/build/components/sidebar/global-styles-sidebar.js.map +0 -1
- package/build/components/sidebar/index.js.map +0 -1
- package/build/components/sidebar/navigation-menu-sidebar/index.js.map +0 -1
- package/build/components/sidebar/navigation-menu-sidebar/navigation-inspector.js.map +0 -1
- package/build/components/sidebar/navigation-menu-sidebar/navigation-menu.js.map +0 -1
- package/build/components/sidebar/plugin-sidebar/index.js.map +0 -1
- package/build/components/sidebar/settings-header/index.js.map +0 -1
- package/build/components/sidebar/template-card/index.js.map +0 -1
- package/build/components/sidebar/template-card/template-actions.js.map +0 -1
- package/build/components/sidebar/template-card/template-areas.js.map +0 -1
- package/build-module/components/header/document-actions/index.js.map +0 -1
- package/build-module/components/header/index.js.map +0 -1
- package/build-module/components/header/mode-switcher/index.js.map +0 -1
- package/build-module/components/header/more-menu/copy-content-menu-item.js.map +0 -1
- package/build-module/components/header/more-menu/index.js.map +0 -1
- package/build-module/components/header/more-menu/site-export.js.map +0 -1
- package/build-module/components/header/more-menu/welcome-guide-menu-item.js.map +0 -1
- package/build-module/components/header/plugin-more-menu-item/index.js.map +0 -1
- package/build-module/components/header/plugin-sidebar-more-menu-item/index.js.map +0 -1
- package/build-module/components/header/tools-more-menu-group/index.js.map +0 -1
- package/build-module/components/header/undo-redo/redo.js.map +0 -1
- package/build-module/components/header/undo-redo/undo.js.map +0 -1
- package/build-module/components/sidebar/constants.js.map +0 -1
- package/build-module/components/sidebar/default-sidebar.js.map +0 -1
- package/build-module/components/sidebar/global-styles-sidebar.js.map +0 -1
- package/build-module/components/sidebar/index.js.map +0 -1
- package/build-module/components/sidebar/navigation-menu-sidebar/index.js.map +0 -1
- package/build-module/components/sidebar/navigation-menu-sidebar/navigation-inspector.js.map +0 -1
- package/build-module/components/sidebar/navigation-menu-sidebar/navigation-menu.js.map +0 -1
- package/build-module/components/sidebar/plugin-sidebar/index.js.map +0 -1
- package/build-module/components/sidebar/settings-header/index.js.map +0 -1
- package/build-module/components/sidebar/template-card/index.js.map +0 -1
- package/build-module/components/sidebar/template-card/template-actions.js.map +0 -1
- package/build-module/components/sidebar/template-card/template-areas.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/preview.js"],"names":["__unstableIframe","Iframe","__unstableEditorStyles","EditorStyles","__unstableMotion","motion","__experimentalHStack","HStack","__experimentalVStack","VStack","useReducedMotion","useResizeObserver","useState","useMemo","useSetting","useStyle","useGlobalStylesOutput","firstFrame","start","opacity","display","hover","secondFrame","normalizedWidth","normalizedHeight","normalizedColorSwatchSize","StylesPreview","label","isFocused","fontWeight","fontFamily","headingFontFamily","headingFontWeight","textColor","headingColor","linkColor","backgroundColor","gradientValue","styles","disableMotion","coreColors","themeColors","customColors","isHovered","setIsHovered","containerResizeListener","width","ratio","paletteColors","concat","highlightedColors","filter","color","slice","editorStyles","css","isGlobalStyles","height","visibility","background","cursor","overflow","fontSize","map","slug","borderRadius","padding","boxSizing","lineHeight","index","flexGrow"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__unstableIframe as Iframe,\n\t__unstableEditorStyles as EditorStyles,\n} from '@wordpress/block-editor';\nimport {\n\t__unstableMotion as motion,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useReducedMotion, useResizeObserver } from '@wordpress/compose';\nimport { useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useSetting, useStyle } from './hooks';\nimport { useGlobalStylesOutput } from './use-global-styles-output';\n\nconst firstFrame = {\n\tstart: {\n\t\topacity: 1,\n\t\tdisplay: 'block',\n\t},\n\thover: {\n\t\topacity: 0,\n\t\tdisplay: 'none',\n\t},\n};\n\nconst secondFrame = {\n\thover: {\n\t\topacity: 1,\n\t\tdisplay: 'block',\n\t},\n\tstart: {\n\t\topacity: 0,\n\t\tdisplay: 'none',\n\t},\n};\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\n\nconst normalizedColorSwatchSize = 32;\n\nconst StylesPreview = ( { label, isFocused } ) => {\n\tconst [ fontWeight ] = useStyle( 'typography.fontWeight' );\n\tconst [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' );\n\tconst [ headingFontFamily = fontFamily ] = useStyle(\n\t\t'elements.h1.typography.fontFamily'\n\t);\n\tconst [ headingFontWeight = fontWeight ] = useStyle(\n\t\t'elements.h1.typography.fontWeight'\n\t);\n\tconst [ textColor = 'black' ] = useStyle( 'color.text' );\n\tconst [ headingColor = textColor ] = useStyle( 'elements.h1.color.text' );\n\tconst [ linkColor = 'blue' ] = useStyle( 'elements.link.color.text' );\n\tconst [ backgroundColor = 'white' ] = useStyle( 'color.background' );\n\tconst [ gradientValue ] = useStyle( 'color.gradient' );\n\tconst [ styles ] = useGlobalStylesOutput();\n\tconst disableMotion = useReducedMotion();\n\tconst [ coreColors ] = useSetting( 'color.palette.core' );\n\tconst [ themeColors ] = useSetting( 'color.palette.theme' );\n\tconst [ customColors ] = useSetting( 'color.palette.custom' );\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst ratio = width ? width / normalizedWidth : 1;\n\n\tconst paletteColors = ( themeColors ?? [] )\n\t\t.concat( customColors ?? [] )\n\t\t.concat( coreColors ?? [] );\n\tconst highlightedColors = paletteColors\n\t\t.filter(\n\t\t\t// we exclude these two colors because they are already visible in the preview.\n\t\t\t( { color } ) => color !== backgroundColor && color !== headingColor\n\t\t)\n\t\t.slice( 0, 2 );\n\n\t// Reset leaked styles from WP common.css and remove main content layout padding and border.\n\tconst editorStyles = useMemo( () => {\n\t\tif ( styles ) {\n\t\t\treturn [\n\t\t\t\t...styles,\n\t\t\t\t{\n\t\t\t\t\tcss: 'body{min-width: 0;padding: 0;border: none;}',\n\t\t\t\t\tisGlobalStyles: true,\n\t\t\t\t},\n\t\t\t];\n\t\t}\n\n\t\treturn styles;\n\t}, [ styles ] );\n\n\treturn (\n\t\t<Iframe\n\t\t\tclassName=\"edit-site-global-styles-preview__iframe\"\n\t\t\thead={ <EditorStyles styles={ editorStyles } /> }\n\t\t\tstyle={ {\n\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\tvisibility: ! width ? 'hidden' : 'visible',\n\t\t\t} }\n\t\t\tonMouseEnter={ () => setIsHovered( true ) }\n\t\t\tonMouseLeave={ () => setIsHovered( false ) }\n\t\t\ttabIndex={ -1 }\n\t\t>\n\t\t\t{ containerResizeListener }\n\t\t\t<motion.div\n\t\t\t\tstyle={ {\n\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t} }\n\t\t\t\tinitial=\"start\"\n\t\t\t\tanimate={\n\t\t\t\t\t( isHovered || isFocused ) && ! disableMotion\n\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t: 'start'\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<motion.div\n\t\t\t\t\tvariants={ firstFrame }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 10 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\tfontSize: 65 * ratio,\n\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tAa\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<VStack spacing={ 4 * ratio }>\n\t\t\t\t\t\t\t{ highlightedColors.map( ( { slug, color } ) => (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={ slug }\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\theight:\n\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize * ratio,\n\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize * ratio,\n\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\tborderRadius:\n\t\t\t\t\t\t\t\t\t\t\t( normalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\tratio ) /\n\t\t\t\t\t\t\t\t\t\t\t2,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t\t<motion.div\n\t\t\t\t\tvariants={ secondFrame }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tspacing={ 3 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\tpadding: 10 * ratio,\n\t\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tfontSize: 35 * ratio,\n\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\tlineHeight: '1em',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<HStack spacing={ 2 * ratio } justify=\"flex-start\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tfontFamily,\n\t\t\t\t\t\t\t\t\tfontSize: 24 * ratio,\n\t\t\t\t\t\t\t\t\tcolor: textColor,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tAa\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tfontFamily,\n\t\t\t\t\t\t\t\t\tfontSize: 24 * ratio,\n\t\t\t\t\t\t\t\t\tcolor: linkColor,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tAa\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t{ paletteColors && (\n\t\t\t\t\t\t\t<HStack spacing={ 0 }>\n\t\t\t\t\t\t\t\t{ paletteColors\n\t\t\t\t\t\t\t\t\t.slice( 0, 4 )\n\t\t\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\theight: 10 * ratio,\n\t\t\t\t\t\t\t\t\t\t\t\twidth: 30 * ratio,\n\t\t\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\t\t\tflexGrow: 1,\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t</motion.div>\n\t\t\t</motion.div>\n\t\t</Iframe>\n\t);\n};\n\nexport default StylesPreview;\n"]}
|
|
1
|
+
{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/preview.js"],"names":["__unstableIframe","Iframe","__unstableEditorStyles","EditorStyles","__unstableMotion","motion","__experimentalHStack","HStack","__experimentalVStack","VStack","useReducedMotion","useResizeObserver","useState","useMemo","useSetting","useStyle","useGlobalStylesOutput","firstFrame","start","scale","opacity","hover","midFrame","secondFrame","normalizedWidth","normalizedHeight","normalizedColorSwatchSize","StylesPreview","label","isFocused","withHoverView","fontWeight","fontFamily","headingFontFamily","headingFontWeight","textColor","headingColor","backgroundColor","gradientValue","styles","disableMotion","coreColors","themeColors","customColors","isHovered","setIsHovered","containerResizeListener","width","ratio","paletteColors","concat","highlightedColors","filter","color","slice","editorStyles","css","isGlobalStyles","height","visibility","background","cursor","overflow","fontSize","delay","type","map","index","slug","borderRadius","position","top","flexGrow","padding","boxSizing","lineHeight","textAlign"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__unstableIframe as Iframe,\n\t__unstableEditorStyles as EditorStyles,\n} from '@wordpress/block-editor';\nimport {\n\t__unstableMotion as motion,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useReducedMotion, useResizeObserver } from '@wordpress/compose';\nimport { useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useSetting, useStyle } from './hooks';\nimport { useGlobalStylesOutput } from './use-global-styles-output';\n\nconst firstFrame = {\n\tstart: {\n\t\tscale: 1,\n\t\topacity: 1,\n\t},\n\thover: {\n\t\tscale: 0,\n\t\topacity: 0,\n\t},\n};\n\nconst midFrame = {\n\thover: {\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\topacity: 0.5,\n\t},\n};\n\nconst secondFrame = {\n\thover: {\n\t\tscale: 1,\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\tscale: 0,\n\t\topacity: 0,\n\t},\n};\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\n\nconst normalizedColorSwatchSize = 32;\n\nconst StylesPreview = ( { label, isFocused, withHoverView } ) => {\n\tconst [ fontWeight ] = useStyle( 'typography.fontWeight' );\n\tconst [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' );\n\tconst [ headingFontFamily = fontFamily ] = useStyle(\n\t\t'elements.h1.typography.fontFamily'\n\t);\n\tconst [ headingFontWeight = fontWeight ] = useStyle(\n\t\t'elements.h1.typography.fontWeight'\n\t);\n\tconst [ textColor = 'black' ] = useStyle( 'color.text' );\n\tconst [ headingColor = textColor ] = useStyle( 'elements.h1.color.text' );\n\tconst [ backgroundColor = 'white' ] = useStyle( 'color.background' );\n\tconst [ gradientValue ] = useStyle( 'color.gradient' );\n\tconst [ styles ] = useGlobalStylesOutput();\n\tconst disableMotion = useReducedMotion();\n\tconst [ coreColors ] = useSetting( 'color.palette.core' );\n\tconst [ themeColors ] = useSetting( 'color.palette.theme' );\n\tconst [ customColors ] = useSetting( 'color.palette.custom' );\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst ratio = width ? width / normalizedWidth : 1;\n\n\tconst paletteColors = ( themeColors ?? [] )\n\t\t.concat( customColors ?? [] )\n\t\t.concat( coreColors ?? [] );\n\tconst highlightedColors = paletteColors\n\t\t.filter(\n\t\t\t// we exclude these two colors because they are already visible in the preview.\n\t\t\t( { color } ) => color !== backgroundColor && color !== headingColor\n\t\t)\n\t\t.slice( 0, 2 );\n\n\t// Reset leaked styles from WP common.css and remove main content layout padding and border.\n\tconst editorStyles = useMemo( () => {\n\t\tif ( styles ) {\n\t\t\treturn [\n\t\t\t\t...styles,\n\t\t\t\t{\n\t\t\t\t\tcss: 'html{overflow:hidden}body{min-width: 0;padding: 0;border: none;}',\n\t\t\t\t\tisGlobalStyles: true,\n\t\t\t\t},\n\t\t\t];\n\t\t}\n\n\t\treturn styles;\n\t}, [ styles ] );\n\n\treturn (\n\t\t<Iframe\n\t\t\tclassName=\"edit-site-global-styles-preview__iframe\"\n\t\t\thead={ <EditorStyles styles={ editorStyles } /> }\n\t\t\tstyle={ {\n\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\tvisibility: ! width ? 'hidden' : 'visible',\n\t\t\t} }\n\t\t\tonMouseEnter={ () => setIsHovered( true ) }\n\t\t\tonMouseLeave={ () => setIsHovered( false ) }\n\t\t\ttabIndex={ -1 }\n\t\t>\n\t\t\t{ containerResizeListener }\n\t\t\t<motion.div\n\t\t\t\tstyle={ {\n\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t} }\n\t\t\t\tinitial=\"start\"\n\t\t\t\tanimate={\n\t\t\t\t\t( isHovered || isFocused ) && ! disableMotion && label\n\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t: 'start'\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<motion.div\n\t\t\t\t\tvariants={ firstFrame }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 10 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\tfontSize: 65 * ratio,\n\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tanimate={ { scale: 1, opacity: 1 } }\n\t\t\t\t\t\t\tinitial={ { scale: 0.1, opacity: 0 } }\n\t\t\t\t\t\t\ttransition={ { delay: 0.3, type: 'tween' } }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tAa\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t<VStack spacing={ 4 * ratio }>\n\t\t\t\t\t\t\t{ highlightedColors.map(\n\t\t\t\t\t\t\t\t( { slug, color }, index ) => (\n\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\tkey={ slug }\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\theight:\n\t\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\tratio,\n\t\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\tratio,\n\t\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\t\tborderRadius:\n\t\t\t\t\t\t\t\t\t\t\t\t( normalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\t\tratio ) /\n\t\t\t\t\t\t\t\t\t\t\t\t2,\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tanimate={ { scale: 1, opacity: 1 } }\n\t\t\t\t\t\t\t\t\t\tinitial={ { scale: 0.1, opacity: 0 } }\n\t\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\tdelay: index === 1 ? 0.2 : 0.1,\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t\t<motion.div\n\t\t\t\t\tvariants={ withHoverView && midFrame }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tfilter: 'blur(60px)',\n\t\t\t\t\t\topacity: 0.1,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ paletteColors\n\t\t\t\t\t\t\t.slice( 0, 4 )\n\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\tflexGrow: 1,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t\t<motion.div\n\t\t\t\t\tvariants={ secondFrame }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tspacing={ 3 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\tpadding: 10 * ratio,\n\t\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tfontSize: 40 * ratio,\n\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\tlineHeight: '1em',\n\t\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t</motion.div>\n\t\t\t</motion.div>\n\t\t</Iframe>\n\t);\n};\n\nexport default StylesPreview;\n"]}
|
|
@@ -10,11 +10,12 @@ import classnames from 'classnames';
|
|
|
10
10
|
*/
|
|
11
11
|
|
|
12
12
|
import { store as coreStore } from '@wordpress/core-data';
|
|
13
|
-
import { useSelect } from '@wordpress/data';
|
|
14
|
-
import { useMemo, useContext, useState } from '@wordpress/element';
|
|
13
|
+
import { useSelect, useDispatch } from '@wordpress/data';
|
|
14
|
+
import { useMemo, useContext, useState, useEffect, useRef } from '@wordpress/element';
|
|
15
15
|
import { ENTER } from '@wordpress/keycodes';
|
|
16
16
|
import { __experimentalGrid as Grid, Card, CardBody } from '@wordpress/components';
|
|
17
17
|
import { __ } from '@wordpress/i18n';
|
|
18
|
+
import { store as blockEditorStore } from '@wordpress/block-editor';
|
|
18
19
|
/**
|
|
19
20
|
* Internal dependencies
|
|
20
21
|
*/
|
|
@@ -89,16 +90,19 @@ function Variation(_ref) {
|
|
|
89
90
|
className: "edit-site-global-styles-variations_item-preview"
|
|
90
91
|
}, createElement(StylesPreview, {
|
|
91
92
|
label: variation === null || variation === void 0 ? void 0 : variation.title,
|
|
92
|
-
isFocused: isFocused
|
|
93
|
+
isFocused: isFocused,
|
|
94
|
+
withHoverView: true
|
|
93
95
|
}))));
|
|
94
96
|
}
|
|
95
97
|
|
|
96
98
|
function ScreenStyleVariations() {
|
|
97
99
|
const {
|
|
98
|
-
variations
|
|
100
|
+
variations,
|
|
101
|
+
mode
|
|
99
102
|
} = useSelect(select => {
|
|
100
103
|
return {
|
|
101
|
-
variations: select(coreStore).__experimentalGetCurrentThemeGlobalStylesVariations()
|
|
104
|
+
variations: select(coreStore).__experimentalGetCurrentThemeGlobalStylesVariations(),
|
|
105
|
+
mode: select(blockEditorStore).__unstableGetEditorMode()
|
|
102
106
|
};
|
|
103
107
|
}, []);
|
|
104
108
|
const withEmptyVariation = useMemo(() => {
|
|
@@ -115,10 +119,36 @@ function ScreenStyleVariations() {
|
|
|
115
119
|
};
|
|
116
120
|
})];
|
|
117
121
|
}, [variations]);
|
|
122
|
+
const {
|
|
123
|
+
__unstableSetEditorMode
|
|
124
|
+
} = useDispatch(blockEditorStore);
|
|
125
|
+
const shouldRevertInitialMode = useRef(null);
|
|
126
|
+
useEffect(() => {
|
|
127
|
+
// ignore changes to zoom-out mode as we explictily change to it on mount.
|
|
128
|
+
if (mode !== 'zoom-out') {
|
|
129
|
+
shouldRevertInitialMode.current = false;
|
|
130
|
+
}
|
|
131
|
+
}, [mode]); // Intentionality left without any dependency.
|
|
132
|
+
// This effect should only run the first time the component is rendered.
|
|
133
|
+
// The effect opens the zoom-out view if it is not open before when applying a style variation.
|
|
134
|
+
|
|
135
|
+
useEffect(() => {
|
|
136
|
+
if (mode !== 'zoom-out') {
|
|
137
|
+
__unstableSetEditorMode('zoom-out');
|
|
138
|
+
|
|
139
|
+
shouldRevertInitialMode.current = true;
|
|
140
|
+
return () => {
|
|
141
|
+
// if there were not mode changes revert to the initial mode when unmounting.
|
|
142
|
+
if (shouldRevertInitialMode.current) {
|
|
143
|
+
__unstableSetEditorMode(mode);
|
|
144
|
+
}
|
|
145
|
+
};
|
|
146
|
+
}
|
|
147
|
+
}, []);
|
|
118
148
|
return createElement(Fragment, null, createElement(ScreenHeader, {
|
|
119
149
|
back: "/",
|
|
120
150
|
title: __('Browse styles'),
|
|
121
|
-
description: __('Choose a
|
|
151
|
+
description: __('Choose a variation to change the look of the site.')
|
|
122
152
|
}), createElement(Card, {
|
|
123
153
|
size: "small",
|
|
124
154
|
isBorderless: true
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-style-variations.js"],"names":["isEqual","classnames","store","coreStore","useSelect","useMemo","useContext","useState","ENTER","__experimentalGrid","Grid","Card","CardBody","__","mergeBaseAndUserConfigs","GlobalStylesContext","StylesPreview","ScreenHeader","compareVariations","a","b","styles","settings","Variation","variation","isFocused","setIsFocused","base","user","setUserConfig","context","merged","selectVariation","selectOnEnter","event","keyCode","preventDefault","isActive","title","ScreenStyleVariations","variations","select","__experimentalGetCurrentThemeGlobalStylesVariations","withEmptyVariation","map","index"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,QAAxB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,KAAK,IAAIC,SAAlB,QAAmC,sBAAnC;AACA,SAASC,SAAT,
|
|
1
|
+
{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-style-variations.js"],"names":["isEqual","classnames","store","coreStore","useSelect","useDispatch","useMemo","useContext","useState","useEffect","useRef","ENTER","__experimentalGrid","Grid","Card","CardBody","__","blockEditorStore","mergeBaseAndUserConfigs","GlobalStylesContext","StylesPreview","ScreenHeader","compareVariations","a","b","styles","settings","Variation","variation","isFocused","setIsFocused","base","user","setUserConfig","context","merged","selectVariation","selectOnEnter","event","keyCode","preventDefault","isActive","title","ScreenStyleVariations","variations","mode","select","__experimentalGetCurrentThemeGlobalStylesVariations","__unstableGetEditorMode","withEmptyVariation","map","__unstableSetEditorMode","shouldRevertInitialMode","current","index"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEqual } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tuseMemo,\n\tuseContext,\n\tuseState,\n\tuseEffect,\n\tuseRef,\n} from '@wordpress/element';\nimport { ENTER } from '@wordpress/keycodes';\nimport {\n\t__experimentalGrid as Grid,\n\tCard,\n\tCardBody,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { mergeBaseAndUserConfigs } from './global-styles-provider';\nimport { GlobalStylesContext } from './context';\nimport StylesPreview from './preview';\nimport ScreenHeader from './header';\n\nfunction compareVariations( a, b ) {\n\treturn isEqual( a.styles, b.styles ) && isEqual( a.settings, b.settings );\n}\n\nfunction Variation( { variation } ) {\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\tconst { base, user, setUserConfig } = useContext( GlobalStylesContext );\n\tconst context = useMemo( () => {\n\t\treturn {\n\t\t\tuser: {\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t},\n\t\t\tbase,\n\t\t\tmerged: mergeBaseAndUserConfigs( base, variation ),\n\t\t\tsetUserConfig: () => {},\n\t\t};\n\t}, [ variation, base ] );\n\n\tconst selectVariation = () => {\n\t\tsetUserConfig( () => {\n\t\t\treturn {\n\t\t\t\tsettings: variation.settings,\n\t\t\t\tstyles: variation.styles,\n\t\t\t};\n\t\t} );\n\t};\n\n\tconst selectOnEnter = ( event ) => {\n\t\tif ( event.keyCode === ENTER ) {\n\t\t\tevent.preventDefault();\n\t\t\tselectVariation();\n\t\t}\n\t};\n\n\tconst isActive = useMemo( () => {\n\t\treturn compareVariations( user, variation );\n\t}, [ user, variation ] );\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ context }>\n\t\t\t<div\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'edit-site-global-styles-variations_item',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isActive,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\trole=\"button\"\n\t\t\t\tonClick={ selectVariation }\n\t\t\t\tonKeyDown={ selectOnEnter }\n\t\t\t\ttabIndex=\"0\"\n\t\t\t\taria-label={ variation?.title }\n\t\t\t\taria-current={ isActive }\n\t\t\t\tonFocus={ () => setIsFocused( true ) }\n\t\t\t\tonBlur={ () => setIsFocused( false ) }\n\t\t\t>\n\t\t\t\t<div className=\"edit-site-global-styles-variations_item-preview\">\n\t\t\t\t\t<StylesPreview\n\t\t\t\t\t\tlabel={ variation?.title }\n\t\t\t\t\t\tisFocused={ isFocused }\n\t\t\t\t\t\twithHoverView\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n\nfunction ScreenStyleVariations() {\n\tconst { variations, mode } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tvariations:\n\t\t\t\tselect(\n\t\t\t\t\tcoreStore\n\t\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations(),\n\n\t\t\tmode: select( blockEditorStore ).__unstableGetEditorMode(),\n\t\t};\n\t}, [] );\n\n\tconst withEmptyVariation = useMemo( () => {\n\t\treturn [\n\t\t\t{\n\t\t\t\ttitle: __( 'Default' ),\n\t\t\t\tsettings: {},\n\t\t\t\tstyles: {},\n\t\t\t},\n\t\t\t...variations.map( ( variation ) => ( {\n\t\t\t\t...variation,\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t} ) ),\n\t\t];\n\t}, [ variations ] );\n\n\tconst { __unstableSetEditorMode } = useDispatch( blockEditorStore );\n\tconst shouldRevertInitialMode = useRef( null );\n\tuseEffect( () => {\n\t\t// ignore changes to zoom-out mode as we explictily change to it on mount.\n\t\tif ( mode !== 'zoom-out' ) {\n\t\t\tshouldRevertInitialMode.current = false;\n\t\t}\n\t}, [ mode ] );\n\n\t// Intentionality left without any dependency.\n\t// This effect should only run the first time the component is rendered.\n\t// The effect opens the zoom-out view if it is not open before when applying a style variation.\n\tuseEffect( () => {\n\t\tif ( mode !== 'zoom-out' ) {\n\t\t\t__unstableSetEditorMode( 'zoom-out' );\n\t\t\tshouldRevertInitialMode.current = true;\n\t\t\treturn () => {\n\t\t\t\t// if there were not mode changes revert to the initial mode when unmounting.\n\t\t\t\tif ( shouldRevertInitialMode.current ) {\n\t\t\t\t\t__unstableSetEditorMode( mode );\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\t}, [] );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback=\"/\"\n\t\t\t\ttitle={ __( 'Browse styles' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Choose a variation to change the look of the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<Card size=\"small\" isBorderless>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<Grid columns={ 2 }>\n\t\t\t\t\t\t{ withEmptyVariation?.map( ( variation, index ) => (\n\t\t\t\t\t\t\t<Variation key={ index } variation={ variation } />\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Grid>\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</>\n\t);\n}\n\nexport default ScreenStyleVariations;\n"]}
|
|
@@ -11,6 +11,7 @@ import { __ } from '@wordpress/i18n';
|
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';
|
|
14
|
+
import { getTypographyFontSizeValue } from './typography-utils';
|
|
14
15
|
export function useHasTypographyPanel(name) {
|
|
15
16
|
const hasFontFamily = useHasFontFamilyControl(name);
|
|
16
17
|
const hasLineHeight = useHasLineHeightControl(name);
|
|
@@ -133,7 +134,18 @@ export default function TypographyPanel(_ref) {
|
|
|
133
134
|
prefix = `elements.${element}.`;
|
|
134
135
|
}
|
|
135
136
|
|
|
136
|
-
const [
|
|
137
|
+
const [fluidTypography] = useSetting('typography.fluid', name);
|
|
138
|
+
const [fontSizes] = useSetting('typography.fontSizes', name); // Convert static font size values to fluid font sizes if fluidTypography is activated.
|
|
139
|
+
|
|
140
|
+
const fontSizesWithFluidValues = fontSizes.map(font => {
|
|
141
|
+
if (!!fluidTypography) {
|
|
142
|
+
font.size = getTypographyFontSizeValue(font, {
|
|
143
|
+
fluid: fluidTypography
|
|
144
|
+
});
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
return font;
|
|
148
|
+
});
|
|
137
149
|
const disableCustomFontSizes = !useSetting('typography.customFontSize', name)[0];
|
|
138
150
|
const [fontFamilies] = useSetting('typography.fontFamilies', name);
|
|
139
151
|
const hasFontStyles = useSetting('typography.fontStyle', name)[0] && supports.includes('fontStyle');
|
|
@@ -197,7 +209,7 @@ export default function TypographyPanel(_ref) {
|
|
|
197
209
|
}, createElement(FontSizePicker, {
|
|
198
210
|
value: fontSize,
|
|
199
211
|
onChange: setFontSize,
|
|
200
|
-
fontSizes:
|
|
212
|
+
fontSizes: fontSizesWithFluidValues,
|
|
201
213
|
disableCustomFontSizes: disableCustomFontSizes,
|
|
202
214
|
withReset: false,
|
|
203
215
|
size: "__unstable-large",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/typography-panel.js"],"names":["LineHeightControl","__experimentalFontFamilyControl","FontFamilyControl","__experimentalFontAppearanceControl","FontAppearanceControl","__experimentalLetterSpacingControl","LetterSpacingControl","__experimentalTextTransformControl","TextTransformControl","FontSizePicker","__experimentalToolsPanel","ToolsPanel","__experimentalToolsPanelItem","ToolsPanelItem","__","getSupportedGlobalStylesPanels","useSetting","useStyle","useHasTypographyPanel","name","hasFontFamily","useHasFontFamilyControl","hasLineHeight","useHasLineHeightControl","hasFontAppearance","useHasAppearanceControl","hasLetterSpacing","useHasLetterSpacingControl","supports","includes","fontFamilies","length","hasFontStyles","hasFontWeights","useAppearanceControlLabel","element","setting","useHasTextTransformControl","useStyleWithReset","path","blockName","style","setStyle","userStyle","hasStyle","resetStyle","undefined","useFontAppearance","prefix","fontStyle","setFontStyle","userFontStyle","fontWeight","setFontWeight","userFontWeight","resetFontAppearance","TypographyPanel","headingLevel","fontSizes","disableCustomFontSizes","hasFontFamilyEnabled","hasLineHeightEnabled","hasAppearanceControl","appearanceControlLabel","hasLetterSpacingControl","hasTextTransformControl","hasFontSizeEnabled","fontFamily","setFontFamily","resetFontFamily","fontSize","setFontSize","hasFontSize","resetFontSize","lineHeight","setLineHeight","resetLineHeight","letterSpacing","setLetterSpacing","resetLetterSpacing","textTransform","setTextTransform","hasTextTransform","resetTextTransform","resetAll","newFontStyle","newFontWeight"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tLineHeightControl,\n\t__experimentalFontFamilyControl as FontFamilyControl,\n\t__experimentalFontAppearanceControl as FontAppearanceControl,\n\t__experimentalLetterSpacingControl as LetterSpacingControl,\n\t__experimentalTextTransformControl as TextTransformControl,\n} from '@wordpress/block-editor';\nimport {\n\tFontSizePicker,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';\n\nexport function useHasTypographyPanel( name ) {\n\tconst hasFontFamily = useHasFontFamilyControl( name );\n\tconst hasLineHeight = useHasLineHeightControl( name );\n\tconst hasFontAppearance = useHasAppearanceControl( name );\n\tconst hasLetterSpacing = useHasLetterSpacingControl( name );\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\thasFontFamily ||\n\t\thasLineHeight ||\n\t\thasFontAppearance ||\n\t\thasLetterSpacing ||\n\t\tsupports.includes( 'fontSize' )\n\t);\n}\n\nfunction useHasFontFamilyControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ fontFamilies ] = useSetting( 'typography.fontFamilies', name );\n\treturn supports.includes( 'fontFamily' ) && !! fontFamilies?.length;\n}\n\nfunction useHasLineHeightControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'typography.lineHeight', name )[ 0 ] &&\n\t\tsupports.includes( 'lineHeight' )\n\t);\n}\n\nfunction useHasAppearanceControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasFontStyles =\n\t\tuseSetting( 'typography.fontStyle', name )[ 0 ] &&\n\t\tsupports.includes( 'fontStyle' );\n\tconst hasFontWeights =\n\t\tuseSetting( 'typography.fontWeight', name )[ 0 ] &&\n\t\tsupports.includes( 'fontWeight' );\n\treturn hasFontStyles || hasFontWeights;\n}\n\nfunction useAppearanceControlLabel( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasFontStyles =\n\t\tuseSetting( 'typography.fontStyle', name )[ 0 ] &&\n\t\tsupports.includes( 'fontStyle' );\n\tconst hasFontWeights =\n\t\tuseSetting( 'typography.fontWeight', name )[ 0 ] &&\n\t\tsupports.includes( 'fontWeight' );\n\tif ( ! hasFontStyles ) {\n\t\treturn __( 'Font weight' );\n\t}\n\tif ( ! hasFontWeights ) {\n\t\treturn __( 'Font style' );\n\t}\n\treturn __( 'Appearance' );\n}\n\nfunction useHasLetterSpacingControl( name, element ) {\n\tconst setting = useSetting( 'typography.letterSpacing', name )[ 0 ];\n\tif ( ! setting ) {\n\t\treturn false;\n\t}\n\tif ( ! name && element === 'heading' ) {\n\t\treturn true;\n\t}\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn supports.includes( 'letterSpacing' );\n}\n\nfunction useHasTextTransformControl( name, element ) {\n\tconst setting = useSetting( 'typography.textTransform', name )[ 0 ];\n\tif ( ! setting ) {\n\t\treturn false;\n\t}\n\tif ( ! name && element === 'heading' ) {\n\t\treturn true;\n\t}\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn supports.includes( 'textTransform' );\n}\n\nfunction useStyleWithReset( path, blockName ) {\n\tconst [ style, setStyle ] = useStyle( path, blockName );\n\tconst [ userStyle ] = useStyle( path, blockName, 'user' );\n\tconst hasStyle = () => !! userStyle;\n\tconst resetStyle = () => setStyle( undefined );\n\treturn [ style, setStyle, hasStyle, resetStyle ];\n}\n\nfunction useFontAppearance( prefix, name ) {\n\tconst [ fontStyle, setFontStyle ] = useStyle(\n\t\tprefix + 'typography.fontStyle',\n\t\tname\n\t);\n\tconst [ userFontStyle ] = useStyle(\n\t\tprefix + 'typography.fontStyle',\n\t\tname,\n\t\t'user'\n\t);\n\tconst [ fontWeight, setFontWeight ] = useStyle(\n\t\tprefix + 'typography.fontWeight',\n\t\tname\n\t);\n\tconst [ userFontWeight ] = useStyle(\n\t\tprefix + 'typography.fontWeight',\n\t\tname,\n\t\t'user'\n\t);\n\tconst hasFontAppearance = () => !! userFontStyle || !! userFontWeight;\n\tconst resetFontAppearance = () => {\n\t\tsetFontStyle( undefined );\n\t\tsetFontWeight( undefined );\n\t};\n\treturn {\n\t\tfontStyle,\n\t\tsetFontStyle,\n\t\tfontWeight,\n\t\tsetFontWeight,\n\t\thasFontAppearance,\n\t\tresetFontAppearance,\n\t};\n}\n\nexport default function TypographyPanel( { name, element, headingLevel } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tlet prefix = '';\n\tif ( element === 'heading' ) {\n\t\tprefix = `elements.${ headingLevel }.`;\n\t} else if ( element && element !== 'text' ) {\n\t\tprefix = `elements.${ element }.`;\n\t}\n\tconst [ fontSizes ] = useSetting( 'typography.fontSizes', name );\n\tconst disableCustomFontSizes = ! useSetting(\n\t\t'typography.customFontSize',\n\t\tname\n\t)[ 0 ];\n\tconst [ fontFamilies ] = useSetting( 'typography.fontFamilies', name );\n\tconst hasFontStyles =\n\t\tuseSetting( 'typography.fontStyle', name )[ 0 ] &&\n\t\tsupports.includes( 'fontStyle' );\n\tconst hasFontWeights =\n\t\tuseSetting( 'typography.fontWeight', name )[ 0 ] &&\n\t\tsupports.includes( 'fontWeight' );\n\tconst hasFontFamilyEnabled = useHasFontFamilyControl( name );\n\tconst hasLineHeightEnabled = useHasLineHeightControl( name );\n\tconst hasAppearanceControl = useHasAppearanceControl( name );\n\tconst appearanceControlLabel = useAppearanceControlLabel( name );\n\tconst hasLetterSpacingControl = useHasLetterSpacingControl( name, element );\n\tconst hasTextTransformControl = useHasTextTransformControl( name, element );\n\n\t/* Disable font size controls when the option to style all headings is selected. */\n\tlet hasFontSizeEnabled = supports.includes( 'fontSize' );\n\tif ( element === 'heading' && headingLevel === 'heading' ) {\n\t\thasFontSizeEnabled = false;\n\t}\n\n\tconst [ fontFamily, setFontFamily, hasFontFamily, resetFontFamily ] =\n\t\tuseStyleWithReset( prefix + 'typography.fontFamily', name );\n\tconst [ fontSize, setFontSize, hasFontSize, resetFontSize ] =\n\t\tuseStyleWithReset( prefix + 'typography.fontSize', name );\n\tconst {\n\t\tfontStyle,\n\t\tsetFontStyle,\n\t\tfontWeight,\n\t\tsetFontWeight,\n\t\thasFontAppearance,\n\t\tresetFontAppearance,\n\t} = useFontAppearance( prefix, name );\n\tconst [ lineHeight, setLineHeight, hasLineHeight, resetLineHeight ] =\n\t\tuseStyleWithReset( prefix + 'typography.lineHeight', name );\n\tconst [\n\t\tletterSpacing,\n\t\tsetLetterSpacing,\n\t\thasLetterSpacing,\n\t\tresetLetterSpacing,\n\t] = useStyleWithReset( prefix + 'typography.letterSpacing', name );\n\tconst [\n\t\ttextTransform,\n\t\tsetTextTransform,\n\t\thasTextTransform,\n\t\tresetTextTransform,\n\t] = useStyleWithReset( prefix + 'typography.textTransform', name );\n\n\tconst resetAll = () => {\n\t\tresetFontFamily();\n\t\tresetFontSize();\n\t\tresetFontAppearance();\n\t\tresetLineHeight();\n\t\tresetLetterSpacing();\n\t\tresetTextTransform();\n\t};\n\n\treturn (\n\t\t<ToolsPanel label={ __( 'Typography' ) } resetAll={ resetAll }>\n\t\t\t{ hasFontFamilyEnabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Font family' ) }\n\t\t\t\t\thasValue={ hasFontFamily }\n\t\t\t\t\tonDeselect={ resetFontFamily }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<FontFamilyControl\n\t\t\t\t\t\tfontFamilies={ fontFamilies }\n\t\t\t\t\t\tvalue={ fontFamily }\n\t\t\t\t\t\tonChange={ setFontFamily }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasFontSizeEnabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Font size' ) }\n\t\t\t\t\thasValue={ hasFontSize }\n\t\t\t\t\tonDeselect={ resetFontSize }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<FontSizePicker\n\t\t\t\t\t\tvalue={ fontSize }\n\t\t\t\t\t\tonChange={ setFontSize }\n\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\tdisableCustomFontSizes={ disableCustomFontSizes }\n\t\t\t\t\t\twithReset={ false }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasAppearanceControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ appearanceControlLabel }\n\t\t\t\t\thasValue={ hasFontAppearance }\n\t\t\t\t\tonDeselect={ resetFontAppearance }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<FontAppearanceControl\n\t\t\t\t\t\tvalue={ {\n\t\t\t\t\t\t\tfontStyle,\n\t\t\t\t\t\t\tfontWeight,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonChange={ ( {\n\t\t\t\t\t\t\tfontStyle: newFontStyle,\n\t\t\t\t\t\t\tfontWeight: newFontWeight,\n\t\t\t\t\t\t} ) => {\n\t\t\t\t\t\t\tsetFontStyle( newFontStyle );\n\t\t\t\t\t\t\tsetFontWeight( newFontWeight );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\thasFontStyles={ hasFontStyles }\n\t\t\t\t\t\thasFontWeights={ hasFontWeights }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasLineHeightEnabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ __( 'Line height' ) }\n\t\t\t\t\thasValue={ hasLineHeight }\n\t\t\t\t\tonDeselect={ resetLineHeight }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<LineHeightControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t__unstableInputWidth=\"auto\"\n\t\t\t\t\t\tvalue={ lineHeight }\n\t\t\t\t\t\tonChange={ setLineHeight }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasLetterSpacingControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ __( 'Letter spacing' ) }\n\t\t\t\t\thasValue={ hasLetterSpacing }\n\t\t\t\t\tonDeselect={ resetLetterSpacing }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<LetterSpacingControl\n\t\t\t\t\t\tvalue={ letterSpacing }\n\t\t\t\t\t\tonChange={ setLetterSpacing }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__unstableInputWidth=\"auto\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasTextTransformControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Letter case' ) }\n\t\t\t\t\thasValue={ hasTextTransform }\n\t\t\t\t\tonDeselect={ resetTextTransform }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<TextTransformControl\n\t\t\t\t\t\tvalue={ textTransform }\n\t\t\t\t\t\tonChange={ setTextTransform }\n\t\t\t\t\t\tshowNone\n\t\t\t\t\t\tisBlock\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t</ToolsPanel>\n\t);\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/typography-panel.js"],"names":["LineHeightControl","__experimentalFontFamilyControl","FontFamilyControl","__experimentalFontAppearanceControl","FontAppearanceControl","__experimentalLetterSpacingControl","LetterSpacingControl","__experimentalTextTransformControl","TextTransformControl","FontSizePicker","__experimentalToolsPanel","ToolsPanel","__experimentalToolsPanelItem","ToolsPanelItem","__","getSupportedGlobalStylesPanels","useSetting","useStyle","getTypographyFontSizeValue","useHasTypographyPanel","name","hasFontFamily","useHasFontFamilyControl","hasLineHeight","useHasLineHeightControl","hasFontAppearance","useHasAppearanceControl","hasLetterSpacing","useHasLetterSpacingControl","supports","includes","fontFamilies","length","hasFontStyles","hasFontWeights","useAppearanceControlLabel","element","setting","useHasTextTransformControl","useStyleWithReset","path","blockName","style","setStyle","userStyle","hasStyle","resetStyle","undefined","useFontAppearance","prefix","fontStyle","setFontStyle","userFontStyle","fontWeight","setFontWeight","userFontWeight","resetFontAppearance","TypographyPanel","headingLevel","fluidTypography","fontSizes","fontSizesWithFluidValues","map","font","size","fluid","disableCustomFontSizes","hasFontFamilyEnabled","hasLineHeightEnabled","hasAppearanceControl","appearanceControlLabel","hasLetterSpacingControl","hasTextTransformControl","hasFontSizeEnabled","fontFamily","setFontFamily","resetFontFamily","fontSize","setFontSize","hasFontSize","resetFontSize","lineHeight","setLineHeight","resetLineHeight","letterSpacing","setLetterSpacing","resetLetterSpacing","textTransform","setTextTransform","hasTextTransform","resetTextTransform","resetAll","newFontStyle","newFontWeight"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,iBADD,EAECC,+BAA+B,IAAIC,iBAFpC,EAGCC,mCAAmC,IAAIC,qBAHxC,EAICC,kCAAkC,IAAIC,oBAJvC,EAKCC,kCAAkC,IAAIC,oBALvC,QAMO,yBANP;AAOA,SACCC,cADD,EAECC,wBAAwB,IAAIC,UAF7B,EAGCC,4BAA4B,IAAIC,cAHjC,QAIO,uBAJP;AAKA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SAASC,8BAAT,EAAyCC,UAAzC,EAAqDC,QAArD,QAAqE,SAArE;AACA,SAASC,0BAAT,QAA2C,oBAA3C;AAEA,OAAO,SAASC,qBAAT,CAAgCC,IAAhC,EAAuC;AAC7C,QAAMC,aAAa,GAAGC,uBAAuB,CAAEF,IAAF,CAA7C;AACA,QAAMG,aAAa,GAAGC,uBAAuB,CAAEJ,IAAF,CAA7C;AACA,QAAMK,iBAAiB,GAAGC,uBAAuB,CAAEN,IAAF,CAAjD;AACA,QAAMO,gBAAgB,GAAGC,0BAA0B,CAAER,IAAF,CAAnD;AACA,QAAMS,QAAQ,GAAGd,8BAA8B,CAAEK,IAAF,CAA/C;AACA,SACCC,aAAa,IACbE,aADA,IAEAE,iBAFA,IAGAE,gBAHA,IAIAE,QAAQ,CAACC,QAAT,CAAmB,UAAnB,CALD;AAOA;;AAED,SAASR,uBAAT,CAAkCF,IAAlC,EAAyC;AACxC,QAAMS,QAAQ,GAAGd,8BAA8B,CAAEK,IAAF,CAA/C;AACA,QAAM,CAAEW,YAAF,IAAmBf,UAAU,CAAE,yBAAF,EAA6BI,IAA7B,CAAnC;AACA,SAAOS,QAAQ,CAACC,QAAT,CAAmB,YAAnB,KAAqC,CAAC,EAAEC,YAAF,aAAEA,YAAF,eAAEA,YAAY,CAAEC,MAAhB,CAA7C;AACA;;AAED,SAASR,uBAAT,CAAkCJ,IAAlC,EAAyC;AACxC,QAAMS,QAAQ,GAAGd,8BAA8B,CAAEK,IAAF,CAA/C;AACA,SACCJ,UAAU,CAAE,uBAAF,EAA2BI,IAA3B,CAAV,CAA6C,CAA7C,KACAS,QAAQ,CAACC,QAAT,CAAmB,YAAnB,CAFD;AAIA;;AAED,SAASJ,uBAAT,CAAkCN,IAAlC,EAAyC;AACxC,QAAMS,QAAQ,GAAGd,8BAA8B,CAAEK,IAAF,CAA/C;AACA,QAAMa,aAAa,GAClBjB,UAAU,CAAE,sBAAF,EAA0BI,IAA1B,CAAV,CAA4C,CAA5C,KACAS,QAAQ,CAACC,QAAT,CAAmB,WAAnB,CAFD;AAGA,QAAMI,cAAc,GACnBlB,UAAU,CAAE,uBAAF,EAA2BI,IAA3B,CAAV,CAA6C,CAA7C,KACAS,QAAQ,CAACC,QAAT,CAAmB,YAAnB,CAFD;AAGA,SAAOG,aAAa,IAAIC,cAAxB;AACA;;AAED,SAASC,yBAAT,CAAoCf,IAApC,EAA2C;AAC1C,QAAMS,QAAQ,GAAGd,8BAA8B,CAAEK,IAAF,CAA/C;AACA,QAAMa,aAAa,GAClBjB,UAAU,CAAE,sBAAF,EAA0BI,IAA1B,CAAV,CAA4C,CAA5C,KACAS,QAAQ,CAACC,QAAT,CAAmB,WAAnB,CAFD;AAGA,QAAMI,cAAc,GACnBlB,UAAU,CAAE,uBAAF,EAA2BI,IAA3B,CAAV,CAA6C,CAA7C,KACAS,QAAQ,CAACC,QAAT,CAAmB,YAAnB,CAFD;;AAGA,MAAK,CAAEG,aAAP,EAAuB;AACtB,WAAOnB,EAAE,CAAE,aAAF,CAAT;AACA;;AACD,MAAK,CAAEoB,cAAP,EAAwB;AACvB,WAAOpB,EAAE,CAAE,YAAF,CAAT;AACA;;AACD,SAAOA,EAAE,CAAE,YAAF,CAAT;AACA;;AAED,SAASc,0BAAT,CAAqCR,IAArC,EAA2CgB,OAA3C,EAAqD;AACpD,QAAMC,OAAO,GAAGrB,UAAU,CAAE,0BAAF,EAA8BI,IAA9B,CAAV,CAAgD,CAAhD,CAAhB;;AACA,MAAK,CAAEiB,OAAP,EAAiB;AAChB,WAAO,KAAP;AACA;;AACD,MAAK,CAAEjB,IAAF,IAAUgB,OAAO,KAAK,SAA3B,EAAuC;AACtC,WAAO,IAAP;AACA;;AACD,QAAMP,QAAQ,GAAGd,8BAA8B,CAAEK,IAAF,CAA/C;AACA,SAAOS,QAAQ,CAACC,QAAT,CAAmB,eAAnB,CAAP;AACA;;AAED,SAASQ,0BAAT,CAAqClB,IAArC,EAA2CgB,OAA3C,EAAqD;AACpD,QAAMC,OAAO,GAAGrB,UAAU,CAAE,0BAAF,EAA8BI,IAA9B,CAAV,CAAgD,CAAhD,CAAhB;;AACA,MAAK,CAAEiB,OAAP,EAAiB;AAChB,WAAO,KAAP;AACA;;AACD,MAAK,CAAEjB,IAAF,IAAUgB,OAAO,KAAK,SAA3B,EAAuC;AACtC,WAAO,IAAP;AACA;;AACD,QAAMP,QAAQ,GAAGd,8BAA8B,CAAEK,IAAF,CAA/C;AACA,SAAOS,QAAQ,CAACC,QAAT,CAAmB,eAAnB,CAAP;AACA;;AAED,SAASS,iBAAT,CAA4BC,IAA5B,EAAkCC,SAAlC,EAA8C;AAC7C,QAAM,CAAEC,KAAF,EAASC,QAAT,IAAsB1B,QAAQ,CAAEuB,IAAF,EAAQC,SAAR,CAApC;AACA,QAAM,CAAEG,SAAF,IAAgB3B,QAAQ,CAAEuB,IAAF,EAAQC,SAAR,EAAmB,MAAnB,CAA9B;;AACA,QAAMI,QAAQ,GAAG,MAAM,CAAC,CAAED,SAA1B;;AACA,QAAME,UAAU,GAAG,MAAMH,QAAQ,CAAEI,SAAF,CAAjC;;AACA,SAAO,CAAEL,KAAF,EAASC,QAAT,EAAmBE,QAAnB,EAA6BC,UAA7B,CAAP;AACA;;AAED,SAASE,iBAAT,CAA4BC,MAA5B,EAAoC7B,IAApC,EAA2C;AAC1C,QAAM,CAAE8B,SAAF,EAAaC,YAAb,IAA8BlC,QAAQ,CAC3CgC,MAAM,GAAG,sBADkC,EAE3C7B,IAF2C,CAA5C;AAIA,QAAM,CAAEgC,aAAF,IAAoBnC,QAAQ,CACjCgC,MAAM,GAAG,sBADwB,EAEjC7B,IAFiC,EAGjC,MAHiC,CAAlC;AAKA,QAAM,CAAEiC,UAAF,EAAcC,aAAd,IAAgCrC,QAAQ,CAC7CgC,MAAM,GAAG,uBADoC,EAE7C7B,IAF6C,CAA9C;AAIA,QAAM,CAAEmC,cAAF,IAAqBtC,QAAQ,CAClCgC,MAAM,GAAG,uBADyB,EAElC7B,IAFkC,EAGlC,MAHkC,CAAnC;;AAKA,QAAMK,iBAAiB,GAAG,MAAM,CAAC,CAAE2B,aAAH,IAAoB,CAAC,CAAEG,cAAvD;;AACA,QAAMC,mBAAmB,GAAG,MAAM;AACjCL,IAAAA,YAAY,CAAEJ,SAAF,CAAZ;AACAO,IAAAA,aAAa,CAAEP,SAAF,CAAb;AACA,GAHD;;AAIA,SAAO;AACNG,IAAAA,SADM;AAENC,IAAAA,YAFM;AAGNE,IAAAA,UAHM;AAINC,IAAAA,aAJM;AAKN7B,IAAAA,iBALM;AAMN+B,IAAAA;AANM,GAAP;AAQA;;AAED,eAAe,SAASC,eAAT,OAA4D;AAAA,MAAlC;AAAErC,IAAAA,IAAF;AAAQgB,IAAAA,OAAR;AAAiBsB,IAAAA;AAAjB,GAAkC;AAC1E,QAAM7B,QAAQ,GAAGd,8BAA8B,CAAEK,IAAF,CAA/C;AACA,MAAI6B,MAAM,GAAG,EAAb;;AACA,MAAKb,OAAO,KAAK,SAAjB,EAA6B;AAC5Ba,IAAAA,MAAM,GAAI,YAAYS,YAAc,GAApC;AACA,GAFD,MAEO,IAAKtB,OAAO,IAAIA,OAAO,KAAK,MAA5B,EAAqC;AAC3Ca,IAAAA,MAAM,GAAI,YAAYb,OAAS,GAA/B;AACA;;AACD,QAAM,CAAEuB,eAAF,IAAsB3C,UAAU,CAAE,kBAAF,EAAsBI,IAAtB,CAAtC;AACA,QAAM,CAAEwC,SAAF,IAAgB5C,UAAU,CAAE,sBAAF,EAA0BI,IAA1B,CAAhC,CAT0E,CAW1E;;AACA,QAAMyC,wBAAwB,GAAGD,SAAS,CAACE,GAAV,CAAiBC,IAAF,IAAY;AAC3D,QAAK,CAAC,CAAEJ,eAAR,EAA0B;AACzBI,MAAAA,IAAI,CAACC,IAAL,GAAY9C,0BAA0B,CAAE6C,IAAF,EAAQ;AAC7CE,QAAAA,KAAK,EAAEN;AADsC,OAAR,CAAtC;AAGA;;AACD,WAAOI,IAAP;AACA,GAPgC,CAAjC;AASA,QAAMG,sBAAsB,GAAG,CAAElD,UAAU,CAC1C,2BAD0C,EAE1CI,IAF0C,CAAV,CAG9B,CAH8B,CAAjC;AAIA,QAAM,CAAEW,YAAF,IAAmBf,UAAU,CAAE,yBAAF,EAA6BI,IAA7B,CAAnC;AACA,QAAMa,aAAa,GAClBjB,UAAU,CAAE,sBAAF,EAA0BI,IAA1B,CAAV,CAA4C,CAA5C,KACAS,QAAQ,CAACC,QAAT,CAAmB,WAAnB,CAFD;AAGA,QAAMI,cAAc,GACnBlB,UAAU,CAAE,uBAAF,EAA2BI,IAA3B,CAAV,CAA6C,CAA7C,KACAS,QAAQ,CAACC,QAAT,CAAmB,YAAnB,CAFD;AAGA,QAAMqC,oBAAoB,GAAG7C,uBAAuB,CAAEF,IAAF,CAApD;AACA,QAAMgD,oBAAoB,GAAG5C,uBAAuB,CAAEJ,IAAF,CAApD;AACA,QAAMiD,oBAAoB,GAAG3C,uBAAuB,CAAEN,IAAF,CAApD;AACA,QAAMkD,sBAAsB,GAAGnC,yBAAyB,CAAEf,IAAF,CAAxD;AACA,QAAMmD,uBAAuB,GAAG3C,0BAA0B,CAAER,IAAF,EAAQgB,OAAR,CAA1D;AACA,QAAMoC,uBAAuB,GAAGlC,0BAA0B,CAAElB,IAAF,EAAQgB,OAAR,CAA1D;AAEA;;AACA,MAAIqC,kBAAkB,GAAG5C,QAAQ,CAACC,QAAT,CAAmB,UAAnB,CAAzB;;AACA,MAAKM,OAAO,KAAK,SAAZ,IAAyBsB,YAAY,KAAK,SAA/C,EAA2D;AAC1De,IAAAA,kBAAkB,GAAG,KAArB;AACA;;AAED,QAAM,CAAEC,UAAF,EAAcC,aAAd,EAA6BtD,aAA7B,EAA4CuD,eAA5C,IACLrC,iBAAiB,CAAEU,MAAM,GAAG,uBAAX,EAAoC7B,IAApC,CADlB;AAEA,QAAM,CAAEyD,QAAF,EAAYC,WAAZ,EAAyBC,WAAzB,EAAsCC,aAAtC,IACLzC,iBAAiB,CAAEU,MAAM,GAAG,qBAAX,EAAkC7B,IAAlC,CADlB;AAEA,QAAM;AACL8B,IAAAA,SADK;AAELC,IAAAA,YAFK;AAGLE,IAAAA,UAHK;AAILC,IAAAA,aAJK;AAKL7B,IAAAA,iBALK;AAML+B,IAAAA;AANK,MAOFR,iBAAiB,CAAEC,MAAF,EAAU7B,IAAV,CAPrB;AAQA,QAAM,CAAE6D,UAAF,EAAcC,aAAd,EAA6B3D,aAA7B,EAA4C4D,eAA5C,IACL5C,iBAAiB,CAAEU,MAAM,GAAG,uBAAX,EAAoC7B,IAApC,CADlB;AAEA,QAAM,CACLgE,aADK,EAELC,gBAFK,EAGL1D,gBAHK,EAIL2D,kBAJK,IAKF/C,iBAAiB,CAAEU,MAAM,GAAG,0BAAX,EAAuC7B,IAAvC,CALrB;AAMA,QAAM,CACLmE,aADK,EAELC,gBAFK,EAGLC,gBAHK,EAILC,kBAJK,IAKFnD,iBAAiB,CAAEU,MAAM,GAAG,0BAAX,EAAuC7B,IAAvC,CALrB;;AAOA,QAAMuE,QAAQ,GAAG,MAAM;AACtBf,IAAAA,eAAe;AACfI,IAAAA,aAAa;AACbxB,IAAAA,mBAAmB;AACnB2B,IAAAA,eAAe;AACfG,IAAAA,kBAAkB;AAClBI,IAAAA,kBAAkB;AAClB,GAPD;;AASA,SACC,cAAC,UAAD;AAAY,IAAA,KAAK,EAAG5E,EAAE,CAAE,YAAF,CAAtB;AAAyC,IAAA,QAAQ,EAAG6E;AAApD,KACGxB,oBAAoB,IACrB,cAAC,cAAD;AACC,IAAA,KAAK,EAAGrD,EAAE,CAAE,aAAF,CADX;AAEC,IAAA,QAAQ,EAAGO,aAFZ;AAGC,IAAA,UAAU,EAAGuD,eAHd;AAIC,IAAA,gBAAgB;AAJjB,KAMC,cAAC,iBAAD;AACC,IAAA,YAAY,EAAG7C,YADhB;AAEC,IAAA,KAAK,EAAG2C,UAFT;AAGC,IAAA,QAAQ,EAAGC,aAHZ;AAIC,IAAA,IAAI,EAAC,kBAJN;AAKC,IAAA,uBAAuB;AALxB,IAND,CAFF,EAiBGF,kBAAkB,IACnB,cAAC,cAAD;AACC,IAAA,KAAK,EAAG3D,EAAE,CAAE,WAAF,CADX;AAEC,IAAA,QAAQ,EAAGiE,WAFZ;AAGC,IAAA,UAAU,EAAGC,aAHd;AAIC,IAAA,gBAAgB;AAJjB,KAMC,cAAC,cAAD;AACC,IAAA,KAAK,EAAGH,QADT;AAEC,IAAA,QAAQ,EAAGC,WAFZ;AAGC,IAAA,SAAS,EAAGjB,wBAHb;AAIC,IAAA,sBAAsB,EAAGK,sBAJ1B;AAKC,IAAA,SAAS,EAAG,KALb;AAMC,IAAA,IAAI,EAAC,kBANN;AAOC,IAAA,uBAAuB;AAPxB,IAND,CAlBF,EAmCGG,oBAAoB,IACrB,cAAC,cAAD;AACC,IAAA,SAAS,EAAC,eADX;AAEC,IAAA,KAAK,EAAGC,sBAFT;AAGC,IAAA,QAAQ,EAAG7C,iBAHZ;AAIC,IAAA,UAAU,EAAG+B,mBAJd;AAKC,IAAA,gBAAgB;AALjB,KAOC,cAAC,qBAAD;AACC,IAAA,KAAK,EAAG;AACPN,MAAAA,SADO;AAEPG,MAAAA;AAFO,KADT;AAKC,IAAA,QAAQ,EAAG,SAGJ;AAAA,UAHM;AACZH,QAAAA,SAAS,EAAE0C,YADC;AAEZvC,QAAAA,UAAU,EAAEwC;AAFA,OAGN;AACN1C,MAAAA,YAAY,CAAEyC,YAAF,CAAZ;AACAtC,MAAAA,aAAa,CAAEuC,aAAF,CAAb;AACA,KAXF;AAYC,IAAA,aAAa,EAAG5D,aAZjB;AAaC,IAAA,cAAc,EAAGC,cAblB;AAcC,IAAA,IAAI,EAAC,kBAdN;AAeC,IAAA,uBAAuB;AAfxB,IAPD,CApCF,EA8DGkC,oBAAoB,IACrB,cAAC,cAAD;AACC,IAAA,SAAS,EAAC,eADX;AAEC,IAAA,KAAK,EAAGtD,EAAE,CAAE,aAAF,CAFX;AAGC,IAAA,QAAQ,EAAGS,aAHZ;AAIC,IAAA,UAAU,EAAG4D,eAJd;AAKC,IAAA,gBAAgB;AALjB,KAOC,cAAC,iBAAD;AACC,IAAA,uBAAuB,MADxB;AAEC,IAAA,oBAAoB,EAAC,MAFtB;AAGC,IAAA,KAAK,EAAGF,UAHT;AAIC,IAAA,QAAQ,EAAGC,aAJZ;AAKC,IAAA,IAAI,EAAC;AALN,IAPD,CA/DF,EA+EGX,uBAAuB,IACxB,cAAC,cAAD;AACC,IAAA,SAAS,EAAC,eADX;AAEC,IAAA,KAAK,EAAGzD,EAAE,CAAE,gBAAF,CAFX;AAGC,IAAA,QAAQ,EAAGa,gBAHZ;AAIC,IAAA,UAAU,EAAG2D,kBAJd;AAKC,IAAA,gBAAgB;AALjB,KAOC,cAAC,oBAAD;AACC,IAAA,KAAK,EAAGF,aADT;AAEC,IAAA,QAAQ,EAAGC,gBAFZ;AAGC,IAAA,IAAI,EAAC,kBAHN;AAIC,IAAA,oBAAoB,EAAC;AAJtB,IAPD,CAhFF,EA+FGb,uBAAuB,IACxB,cAAC,cAAD;AACC,IAAA,KAAK,EAAG1D,EAAE,CAAE,aAAF,CADX;AAEC,IAAA,QAAQ,EAAG2E,gBAFZ;AAGC,IAAA,UAAU,EAAGC,kBAHd;AAIC,IAAA,gBAAgB;AAJjB,KAMC,cAAC,oBAAD;AACC,IAAA,KAAK,EAAGH,aADT;AAEC,IAAA,QAAQ,EAAGC,gBAFZ;AAGC,IAAA,QAAQ,MAHT;AAIC,IAAA,OAAO,MAJR;AAKC,IAAA,IAAI,EAAC,kBALN;AAMC,IAAA,uBAAuB;AANxB,IAND,CAhGF,CADD;AAmHA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tLineHeightControl,\n\t__experimentalFontFamilyControl as FontFamilyControl,\n\t__experimentalFontAppearanceControl as FontAppearanceControl,\n\t__experimentalLetterSpacingControl as LetterSpacingControl,\n\t__experimentalTextTransformControl as TextTransformControl,\n} from '@wordpress/block-editor';\nimport {\n\tFontSizePicker,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';\nimport { getTypographyFontSizeValue } from './typography-utils';\n\nexport function useHasTypographyPanel( name ) {\n\tconst hasFontFamily = useHasFontFamilyControl( name );\n\tconst hasLineHeight = useHasLineHeightControl( name );\n\tconst hasFontAppearance = useHasAppearanceControl( name );\n\tconst hasLetterSpacing = useHasLetterSpacingControl( name );\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\thasFontFamily ||\n\t\thasLineHeight ||\n\t\thasFontAppearance ||\n\t\thasLetterSpacing ||\n\t\tsupports.includes( 'fontSize' )\n\t);\n}\n\nfunction useHasFontFamilyControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ fontFamilies ] = useSetting( 'typography.fontFamilies', name );\n\treturn supports.includes( 'fontFamily' ) && !! fontFamilies?.length;\n}\n\nfunction useHasLineHeightControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'typography.lineHeight', name )[ 0 ] &&\n\t\tsupports.includes( 'lineHeight' )\n\t);\n}\n\nfunction useHasAppearanceControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasFontStyles =\n\t\tuseSetting( 'typography.fontStyle', name )[ 0 ] &&\n\t\tsupports.includes( 'fontStyle' );\n\tconst hasFontWeights =\n\t\tuseSetting( 'typography.fontWeight', name )[ 0 ] &&\n\t\tsupports.includes( 'fontWeight' );\n\treturn hasFontStyles || hasFontWeights;\n}\n\nfunction useAppearanceControlLabel( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasFontStyles =\n\t\tuseSetting( 'typography.fontStyle', name )[ 0 ] &&\n\t\tsupports.includes( 'fontStyle' );\n\tconst hasFontWeights =\n\t\tuseSetting( 'typography.fontWeight', name )[ 0 ] &&\n\t\tsupports.includes( 'fontWeight' );\n\tif ( ! hasFontStyles ) {\n\t\treturn __( 'Font weight' );\n\t}\n\tif ( ! hasFontWeights ) {\n\t\treturn __( 'Font style' );\n\t}\n\treturn __( 'Appearance' );\n}\n\nfunction useHasLetterSpacingControl( name, element ) {\n\tconst setting = useSetting( 'typography.letterSpacing', name )[ 0 ];\n\tif ( ! setting ) {\n\t\treturn false;\n\t}\n\tif ( ! name && element === 'heading' ) {\n\t\treturn true;\n\t}\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn supports.includes( 'letterSpacing' );\n}\n\nfunction useHasTextTransformControl( name, element ) {\n\tconst setting = useSetting( 'typography.textTransform', name )[ 0 ];\n\tif ( ! setting ) {\n\t\treturn false;\n\t}\n\tif ( ! name && element === 'heading' ) {\n\t\treturn true;\n\t}\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn supports.includes( 'textTransform' );\n}\n\nfunction useStyleWithReset( path, blockName ) {\n\tconst [ style, setStyle ] = useStyle( path, blockName );\n\tconst [ userStyle ] = useStyle( path, blockName, 'user' );\n\tconst hasStyle = () => !! userStyle;\n\tconst resetStyle = () => setStyle( undefined );\n\treturn [ style, setStyle, hasStyle, resetStyle ];\n}\n\nfunction useFontAppearance( prefix, name ) {\n\tconst [ fontStyle, setFontStyle ] = useStyle(\n\t\tprefix + 'typography.fontStyle',\n\t\tname\n\t);\n\tconst [ userFontStyle ] = useStyle(\n\t\tprefix + 'typography.fontStyle',\n\t\tname,\n\t\t'user'\n\t);\n\tconst [ fontWeight, setFontWeight ] = useStyle(\n\t\tprefix + 'typography.fontWeight',\n\t\tname\n\t);\n\tconst [ userFontWeight ] = useStyle(\n\t\tprefix + 'typography.fontWeight',\n\t\tname,\n\t\t'user'\n\t);\n\tconst hasFontAppearance = () => !! userFontStyle || !! userFontWeight;\n\tconst resetFontAppearance = () => {\n\t\tsetFontStyle( undefined );\n\t\tsetFontWeight( undefined );\n\t};\n\treturn {\n\t\tfontStyle,\n\t\tsetFontStyle,\n\t\tfontWeight,\n\t\tsetFontWeight,\n\t\thasFontAppearance,\n\t\tresetFontAppearance,\n\t};\n}\n\nexport default function TypographyPanel( { name, element, headingLevel } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tlet prefix = '';\n\tif ( element === 'heading' ) {\n\t\tprefix = `elements.${ headingLevel }.`;\n\t} else if ( element && element !== 'text' ) {\n\t\tprefix = `elements.${ element }.`;\n\t}\n\tconst [ fluidTypography ] = useSetting( 'typography.fluid', name );\n\tconst [ fontSizes ] = useSetting( 'typography.fontSizes', name );\n\n\t// Convert static font size values to fluid font sizes if fluidTypography is activated.\n\tconst fontSizesWithFluidValues = fontSizes.map( ( font ) => {\n\t\tif ( !! fluidTypography ) {\n\t\t\tfont.size = getTypographyFontSizeValue( font, {\n\t\t\t\tfluid: fluidTypography,\n\t\t\t} );\n\t\t}\n\t\treturn font;\n\t} );\n\n\tconst disableCustomFontSizes = ! useSetting(\n\t\t'typography.customFontSize',\n\t\tname\n\t)[ 0 ];\n\tconst [ fontFamilies ] = useSetting( 'typography.fontFamilies', name );\n\tconst hasFontStyles =\n\t\tuseSetting( 'typography.fontStyle', name )[ 0 ] &&\n\t\tsupports.includes( 'fontStyle' );\n\tconst hasFontWeights =\n\t\tuseSetting( 'typography.fontWeight', name )[ 0 ] &&\n\t\tsupports.includes( 'fontWeight' );\n\tconst hasFontFamilyEnabled = useHasFontFamilyControl( name );\n\tconst hasLineHeightEnabled = useHasLineHeightControl( name );\n\tconst hasAppearanceControl = useHasAppearanceControl( name );\n\tconst appearanceControlLabel = useAppearanceControlLabel( name );\n\tconst hasLetterSpacingControl = useHasLetterSpacingControl( name, element );\n\tconst hasTextTransformControl = useHasTextTransformControl( name, element );\n\n\t/* Disable font size controls when the option to style all headings is selected. */\n\tlet hasFontSizeEnabled = supports.includes( 'fontSize' );\n\tif ( element === 'heading' && headingLevel === 'heading' ) {\n\t\thasFontSizeEnabled = false;\n\t}\n\n\tconst [ fontFamily, setFontFamily, hasFontFamily, resetFontFamily ] =\n\t\tuseStyleWithReset( prefix + 'typography.fontFamily', name );\n\tconst [ fontSize, setFontSize, hasFontSize, resetFontSize ] =\n\t\tuseStyleWithReset( prefix + 'typography.fontSize', name );\n\tconst {\n\t\tfontStyle,\n\t\tsetFontStyle,\n\t\tfontWeight,\n\t\tsetFontWeight,\n\t\thasFontAppearance,\n\t\tresetFontAppearance,\n\t} = useFontAppearance( prefix, name );\n\tconst [ lineHeight, setLineHeight, hasLineHeight, resetLineHeight ] =\n\t\tuseStyleWithReset( prefix + 'typography.lineHeight', name );\n\tconst [\n\t\tletterSpacing,\n\t\tsetLetterSpacing,\n\t\thasLetterSpacing,\n\t\tresetLetterSpacing,\n\t] = useStyleWithReset( prefix + 'typography.letterSpacing', name );\n\tconst [\n\t\ttextTransform,\n\t\tsetTextTransform,\n\t\thasTextTransform,\n\t\tresetTextTransform,\n\t] = useStyleWithReset( prefix + 'typography.textTransform', name );\n\n\tconst resetAll = () => {\n\t\tresetFontFamily();\n\t\tresetFontSize();\n\t\tresetFontAppearance();\n\t\tresetLineHeight();\n\t\tresetLetterSpacing();\n\t\tresetTextTransform();\n\t};\n\n\treturn (\n\t\t<ToolsPanel label={ __( 'Typography' ) } resetAll={ resetAll }>\n\t\t\t{ hasFontFamilyEnabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Font family' ) }\n\t\t\t\t\thasValue={ hasFontFamily }\n\t\t\t\t\tonDeselect={ resetFontFamily }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<FontFamilyControl\n\t\t\t\t\t\tfontFamilies={ fontFamilies }\n\t\t\t\t\t\tvalue={ fontFamily }\n\t\t\t\t\t\tonChange={ setFontFamily }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasFontSizeEnabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Font size' ) }\n\t\t\t\t\thasValue={ hasFontSize }\n\t\t\t\t\tonDeselect={ resetFontSize }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<FontSizePicker\n\t\t\t\t\t\tvalue={ fontSize }\n\t\t\t\t\t\tonChange={ setFontSize }\n\t\t\t\t\t\tfontSizes={ fontSizesWithFluidValues }\n\t\t\t\t\t\tdisableCustomFontSizes={ disableCustomFontSizes }\n\t\t\t\t\t\twithReset={ false }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasAppearanceControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ appearanceControlLabel }\n\t\t\t\t\thasValue={ hasFontAppearance }\n\t\t\t\t\tonDeselect={ resetFontAppearance }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<FontAppearanceControl\n\t\t\t\t\t\tvalue={ {\n\t\t\t\t\t\t\tfontStyle,\n\t\t\t\t\t\t\tfontWeight,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonChange={ ( {\n\t\t\t\t\t\t\tfontStyle: newFontStyle,\n\t\t\t\t\t\t\tfontWeight: newFontWeight,\n\t\t\t\t\t\t} ) => {\n\t\t\t\t\t\t\tsetFontStyle( newFontStyle );\n\t\t\t\t\t\t\tsetFontWeight( newFontWeight );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\thasFontStyles={ hasFontStyles }\n\t\t\t\t\t\thasFontWeights={ hasFontWeights }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasLineHeightEnabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ __( 'Line height' ) }\n\t\t\t\t\thasValue={ hasLineHeight }\n\t\t\t\t\tonDeselect={ resetLineHeight }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<LineHeightControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t__unstableInputWidth=\"auto\"\n\t\t\t\t\t\tvalue={ lineHeight }\n\t\t\t\t\t\tonChange={ setLineHeight }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasLetterSpacingControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ __( 'Letter spacing' ) }\n\t\t\t\t\thasValue={ hasLetterSpacing }\n\t\t\t\t\tonDeselect={ resetLetterSpacing }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<LetterSpacingControl\n\t\t\t\t\t\tvalue={ letterSpacing }\n\t\t\t\t\t\tonChange={ setLetterSpacing }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__unstableInputWidth=\"auto\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasTextTransformControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Letter case' ) }\n\t\t\t\t\thasValue={ hasTextTransform }\n\t\t\t\t\tonDeselect={ resetTextTransform }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<TextTransformControl\n\t\t\t\t\t\tvalue={ textTransform }\n\t\t\t\t\t\tonChange={ setTextTransform }\n\t\t\t\t\t\tshowNone\n\t\t\t\t\t\tisBlock\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t</ToolsPanel>\n\t);\n}\n"]}
|
|
@@ -4,68 +4,63 @@
|
|
|
4
4
|
* ---------------------------------------------------------------
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
|
+
/**
|
|
8
|
+
* WordPress dependencies
|
|
9
|
+
*/
|
|
10
|
+
import { getComputedFluidTypographyValue } from '@wordpress/block-editor';
|
|
11
|
+
/**
|
|
12
|
+
* @typedef {Object} FluidPreset
|
|
13
|
+
* @property {string|undefined} max A maximum font size value.
|
|
14
|
+
* @property {?string|undefined} min A minimum font size value.
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* @typedef {Object} Preset
|
|
19
|
+
* @property {?string|?number} size A default font size.
|
|
20
|
+
* @property {string} name A font size name, displayed in the UI.
|
|
21
|
+
* @property {string} slug A font size slug
|
|
22
|
+
* @property {boolean|FluidPreset|undefined} fluid A font size slug
|
|
23
|
+
*/
|
|
24
|
+
|
|
7
25
|
/**
|
|
8
26
|
* Returns a font-size value based on a given font-size preset.
|
|
9
27
|
* Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values.
|
|
10
28
|
*
|
|
11
|
-
* @param {
|
|
12
|
-
* @param {
|
|
13
|
-
* @param {
|
|
14
|
-
* @param {string} preset.slug A font size slug.
|
|
15
|
-
* @param {Object} preset.fluid
|
|
16
|
-
* @param {string|undefined} preset.fluid.max A maximum font size value.
|
|
17
|
-
* @param {string|undefined} preset.fluid.min A minimum font size value.
|
|
18
|
-
* @param {Object} typographySettings
|
|
19
|
-
* @param {boolean} typographySettings.fluid Whether fluid typography is enabled.
|
|
29
|
+
* @param {Preset} preset
|
|
30
|
+
* @param {Object} typographySettings
|
|
31
|
+
* @param {boolean} typographySettings.fluid Whether fluid typography is enabled.
|
|
20
32
|
*
|
|
21
|
-
* @return {string}
|
|
33
|
+
* @return {string|*} A font-size value or the value of preset.size.
|
|
22
34
|
*/
|
|
35
|
+
|
|
23
36
|
export function getTypographyFontSizeValue(preset, typographySettings) {
|
|
37
|
+
var _preset$fluid, _preset$fluid2;
|
|
38
|
+
|
|
24
39
|
const {
|
|
25
40
|
size: defaultSize
|
|
26
41
|
} = preset;
|
|
42
|
+
/*
|
|
43
|
+
* Catches falsy values and 0/'0'.
|
|
44
|
+
* Fluid calculations cannot be performed on 0.
|
|
45
|
+
*/
|
|
27
46
|
|
|
28
|
-
if (
|
|
29
|
-
return defaultSize;
|
|
30
|
-
} // Defaults.
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
const DEFAULT_MAXIMUM_VIEWPORT_WIDTH = '1600px';
|
|
34
|
-
const DEFAULT_MINIMUM_VIEWPORT_WIDTH = '768px';
|
|
35
|
-
const DEFAULT_MINIMUM_FONT_SIZE_FACTOR = 0.75;
|
|
36
|
-
const DEFAULT_MAXIMUM_FONT_SIZE_FACTOR = 1.5;
|
|
37
|
-
const DEFAULT_SCALE_FACTOR = 1; // Font sizes.
|
|
38
|
-
// A font size has explicitly bypassed fluid calculations.
|
|
39
|
-
|
|
40
|
-
if (false === (preset === null || preset === void 0 ? void 0 : preset.fluid)) {
|
|
47
|
+
if (!defaultSize || '0' === defaultSize) {
|
|
41
48
|
return defaultSize;
|
|
42
49
|
}
|
|
43
50
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
let minimumFontSizeRaw = fluidFontSizeSettings === null || fluidFontSizeSettings === void 0 ? void 0 : fluidFontSizeSettings.min;
|
|
47
|
-
let maximumFontSizeRaw = fluidFontSizeSettings === null || fluidFontSizeSettings === void 0 ? void 0 : fluidFontSizeSettings.max;
|
|
48
|
-
const preferredSize = getTypographyValueAndUnit(defaultSize); // Protect against unsupported units.
|
|
49
|
-
|
|
50
|
-
if (!(preferredSize !== null && preferredSize !== void 0 && preferredSize.unit)) {
|
|
51
|
+
if (true !== (typographySettings === null || typographySettings === void 0 ? void 0 : typographySettings.fluid)) {
|
|
51
52
|
return defaultSize;
|
|
52
|
-
} //
|
|
53
|
-
|
|
53
|
+
} // A font size has explicitly bypassed fluid calculations.
|
|
54
54
|
|
|
55
|
-
if (!minimumFontSizeRaw) {
|
|
56
|
-
minimumFontSizeRaw = preferredSize.value * DEFAULT_MINIMUM_FONT_SIZE_FACTOR + preferredSize.unit;
|
|
57
|
-
}
|
|
58
55
|
|
|
59
|
-
if (
|
|
60
|
-
|
|
56
|
+
if (false === (preset === null || preset === void 0 ? void 0 : preset.fluid)) {
|
|
57
|
+
return defaultSize;
|
|
61
58
|
}
|
|
62
59
|
|
|
63
60
|
const fluidFontSizeValue = getComputedFluidTypographyValue({
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
minimumFontSize: minimumFontSizeRaw,
|
|
68
|
-
scaleFactor: DEFAULT_SCALE_FACTOR
|
|
61
|
+
minimumFontSize: preset === null || preset === void 0 ? void 0 : (_preset$fluid = preset.fluid) === null || _preset$fluid === void 0 ? void 0 : _preset$fluid.min,
|
|
62
|
+
maximumFontSize: preset === null || preset === void 0 ? void 0 : (_preset$fluid2 = preset.fluid) === null || _preset$fluid2 === void 0 ? void 0 : _preset$fluid2.max,
|
|
63
|
+
fontSize: defaultSize
|
|
69
64
|
});
|
|
70
65
|
|
|
71
66
|
if (!!fluidFontSizeValue) {
|
|
@@ -74,131 +69,4 @@ export function getTypographyFontSizeValue(preset, typographySettings) {
|
|
|
74
69
|
|
|
75
70
|
return defaultSize;
|
|
76
71
|
}
|
|
77
|
-
/**
|
|
78
|
-
* Internal implementation of clamp() based on available min/max viewport width, and min/max font sizes.
|
|
79
|
-
*
|
|
80
|
-
* @param {Object} args
|
|
81
|
-
* @param {string} args.maximumViewPortWidth Maximum size up to which type will have fluidity.
|
|
82
|
-
* @param {string} args.minimumViewPortWidth Minimum viewport size from which type will have fluidity.
|
|
83
|
-
* @param {string} args.maximumFontSize Maximum font size for any clamp() calculation.
|
|
84
|
-
* @param {string} args.minimumFontSize Minimum font size for any clamp() calculation.
|
|
85
|
-
* @param {number} args.scaleFactor A scale factor to determine how fast a font scales within boundaries.
|
|
86
|
-
*
|
|
87
|
-
* @return {string|null} A font-size value using clamp().
|
|
88
|
-
*/
|
|
89
|
-
|
|
90
|
-
export function getComputedFluidTypographyValue(_ref) {
|
|
91
|
-
let {
|
|
92
|
-
maximumViewPortWidth,
|
|
93
|
-
minimumViewPortWidth,
|
|
94
|
-
maximumFontSize,
|
|
95
|
-
minimumFontSize,
|
|
96
|
-
scaleFactor
|
|
97
|
-
} = _ref;
|
|
98
|
-
// Grab the minimum font size and normalize it in order to use the value for calculations.
|
|
99
|
-
const minimumFontSizeParsed = getTypographyValueAndUnit(minimumFontSize); // We get a 'preferred' unit to keep units consistent when calculating,
|
|
100
|
-
// otherwise the result will not be accurate.
|
|
101
|
-
|
|
102
|
-
const fontSizeUnit = (minimumFontSizeParsed === null || minimumFontSizeParsed === void 0 ? void 0 : minimumFontSizeParsed.unit) || 'rem'; // Grab the maximum font size and normalize it in order to use the value for calculations.
|
|
103
|
-
|
|
104
|
-
const maximumFontSizeParsed = getTypographyValueAndUnit(maximumFontSize, {
|
|
105
|
-
coerceTo: fontSizeUnit
|
|
106
|
-
}); // Protect against unsupported units.
|
|
107
|
-
|
|
108
|
-
if (!minimumFontSizeParsed || !maximumFontSizeParsed) {
|
|
109
|
-
return null;
|
|
110
|
-
} // Use rem for accessible fluid target font scaling.
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
const minimumFontSizeRem = getTypographyValueAndUnit(minimumFontSize, {
|
|
114
|
-
coerceTo: 'rem'
|
|
115
|
-
}); // Viewport widths defined for fluid typography. Normalize units
|
|
116
|
-
|
|
117
|
-
const maximumViewPortWidthParsed = getTypographyValueAndUnit(maximumViewPortWidth, {
|
|
118
|
-
coerceTo: fontSizeUnit
|
|
119
|
-
});
|
|
120
|
-
const minumumViewPortWidthParsed = getTypographyValueAndUnit(minimumViewPortWidth, {
|
|
121
|
-
coerceTo: fontSizeUnit
|
|
122
|
-
}); // Protect against unsupported units.
|
|
123
|
-
|
|
124
|
-
if (!maximumViewPortWidthParsed || !minumumViewPortWidthParsed || !minimumFontSizeRem) {
|
|
125
|
-
return null;
|
|
126
|
-
} // Build CSS rule.
|
|
127
|
-
// Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
const minViewPortWidthOffsetValue = roundToPrecision(minumumViewPortWidthParsed.value / 100, 3);
|
|
131
|
-
const viewPortWidthOffset = minViewPortWidthOffsetValue + fontSizeUnit;
|
|
132
|
-
let linearFactor = 100 * ((maximumFontSizeParsed.value - minimumFontSizeParsed.value) / (maximumViewPortWidthParsed.value - minumumViewPortWidthParsed.value));
|
|
133
|
-
linearFactor = roundToPrecision(linearFactor, 3) || 1;
|
|
134
|
-
const linearFactorScaled = linearFactor * scaleFactor;
|
|
135
|
-
const fluidTargetFontSize = `${minimumFontSizeRem.value}${minimumFontSizeRem.unit} + ((1vw - ${viewPortWidthOffset}) * ${linearFactorScaled})`;
|
|
136
|
-
return `clamp(${minimumFontSize}, ${fluidTargetFontSize}, ${maximumFontSize})`;
|
|
137
|
-
}
|
|
138
|
-
/**
|
|
139
|
-
*
|
|
140
|
-
* @param {string} rawValue Raw size value from theme.json.
|
|
141
|
-
* @param {Object|undefined} options Calculation options.
|
|
142
|
-
*
|
|
143
|
-
* @return {{ unit: string, value: number }|null} An object consisting of `'value'` and `'unit'` properties.
|
|
144
|
-
*/
|
|
145
|
-
|
|
146
|
-
export function getTypographyValueAndUnit(rawValue) {
|
|
147
|
-
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
148
|
-
|
|
149
|
-
if (!rawValue) {
|
|
150
|
-
return null;
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
const {
|
|
154
|
-
coerceTo,
|
|
155
|
-
rootSizeValue,
|
|
156
|
-
acceptableUnits
|
|
157
|
-
} = {
|
|
158
|
-
coerceTo: '',
|
|
159
|
-
// Default browser font size. Later we could inject some JS to compute this `getComputedStyle( document.querySelector( "html" ) ).fontSize`.
|
|
160
|
-
rootSizeValue: 16,
|
|
161
|
-
acceptableUnits: ['rem', 'px', 'em'],
|
|
162
|
-
...options
|
|
163
|
-
};
|
|
164
|
-
const acceptableUnitsGroup = acceptableUnits === null || acceptableUnits === void 0 ? void 0 : acceptableUnits.join('|');
|
|
165
|
-
const regexUnits = new RegExp(`^(\\d*\\.?\\d+)(${acceptableUnitsGroup}){1,1}$`);
|
|
166
|
-
const matches = rawValue.match(regexUnits); // We need a number value and a unit.
|
|
167
|
-
|
|
168
|
-
if (!matches || matches.length < 3) {
|
|
169
|
-
return null;
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
let [, value, unit] = matches;
|
|
173
|
-
let returnValue = parseFloat(value);
|
|
174
|
-
|
|
175
|
-
if ('px' === coerceTo && ('em' === unit || 'rem' === unit)) {
|
|
176
|
-
returnValue = returnValue * rootSizeValue;
|
|
177
|
-
unit = coerceTo;
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
if ('px' === unit && ('em' === coerceTo || 'rem' === coerceTo)) {
|
|
181
|
-
returnValue = returnValue / rootSizeValue;
|
|
182
|
-
unit = coerceTo;
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
return {
|
|
186
|
-
value: returnValue,
|
|
187
|
-
unit
|
|
188
|
-
};
|
|
189
|
-
}
|
|
190
|
-
/**
|
|
191
|
-
* Returns a value rounded to defined precision.
|
|
192
|
-
* Returns `undefined` if the value is not a valid finite number.
|
|
193
|
-
*
|
|
194
|
-
* @param {number} value Raw value.
|
|
195
|
-
* @param {number} digits The number of digits to appear after the decimal point
|
|
196
|
-
*
|
|
197
|
-
* @return {number|undefined} Value rounded to standard precision.
|
|
198
|
-
*/
|
|
199
|
-
|
|
200
|
-
export function roundToPrecision(value) {
|
|
201
|
-
let digits = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
|
|
202
|
-
return Number.isFinite(value) ? parseFloat(value.toFixed(digits)) : undefined;
|
|
203
|
-
}
|
|
204
72
|
//# sourceMappingURL=typography-utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/typography-utils.js"],"names":["getTypographyFontSizeValue","preset","typographySettings","size","defaultSize","fluid","DEFAULT_MAXIMUM_VIEWPORT_WIDTH","DEFAULT_MINIMUM_VIEWPORT_WIDTH","DEFAULT_MINIMUM_FONT_SIZE_FACTOR","DEFAULT_MAXIMUM_FONT_SIZE_FACTOR","DEFAULT_SCALE_FACTOR","fluidFontSizeSettings","minimumFontSizeRaw","min","maximumFontSizeRaw","max","preferredSize","getTypographyValueAndUnit","unit","value","fluidFontSizeValue","getComputedFluidTypographyValue","maximumViewPortWidth","minimumViewPortWidth","maximumFontSize","minimumFontSize","scaleFactor","minimumFontSizeParsed","fontSizeUnit","maximumFontSizeParsed","coerceTo","minimumFontSizeRem","maximumViewPortWidthParsed","minumumViewPortWidthParsed","minViewPortWidthOffsetValue","roundToPrecision","viewPortWidthOffset","linearFactor","linearFactorScaled","fluidTargetFontSize","rawValue","options","rootSizeValue","acceptableUnits","acceptableUnitsGroup","join","regexUnits","RegExp","matches","match","length","returnValue","parseFloat","digits","Number","isFinite","toFixed","undefined"],"mappings":"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","sourcesContent":["/**\n * The fluid utilities must match the backend equivalent.\n * See: gutenberg_get_typography_font_size_value() in lib/block-supports/typography.php\n * ---------------------------------------------------------------\n */\n\n/**\n * Returns a font-size value based on a given font-size preset.\n * Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values.\n *\n * @param {Object} preset\n * @param {string} preset.size A default font size.\n * @param {string} preset.name A font size name, displayed in the UI.\n * @param {string} preset.slug A font size slug.\n * @param {Object} preset.fluid\n * @param {string|undefined} preset.fluid.max A maximum font size value.\n * @param {string|undefined} preset.fluid.min A minimum font size value.\n * @param {Object} typographySettings\n * @param {boolean} typographySettings.fluid Whether fluid typography is enabled.\n *\n * @return {string} An font-size value\n */\nexport function getTypographyFontSizeValue( preset, typographySettings ) {\n\tconst { size: defaultSize } = preset;\n\n\tif ( true !== typographySettings?.fluid ) {\n\t\treturn defaultSize;\n\t}\n\n\t// Defaults.\n\tconst DEFAULT_MAXIMUM_VIEWPORT_WIDTH = '1600px';\n\tconst DEFAULT_MINIMUM_VIEWPORT_WIDTH = '768px';\n\tconst DEFAULT_MINIMUM_FONT_SIZE_FACTOR = 0.75;\n\tconst DEFAULT_MAXIMUM_FONT_SIZE_FACTOR = 1.5;\n\tconst DEFAULT_SCALE_FACTOR = 1;\n\n\t// Font sizes.\n\t// A font size has explicitly bypassed fluid calculations.\n\tif ( false === preset?.fluid ) {\n\t\treturn defaultSize;\n\t}\n\n\tconst fluidFontSizeSettings = preset?.fluid || {};\n\n\t// Try to grab explicit min and max fluid font sizes.\n\tlet minimumFontSizeRaw = fluidFontSizeSettings?.min;\n\tlet maximumFontSizeRaw = fluidFontSizeSettings?.max;\n\tconst preferredSize = getTypographyValueAndUnit( defaultSize );\n\n\t// Protect against unsupported units.\n\tif ( ! preferredSize?.unit ) {\n\t\treturn defaultSize;\n\t}\n\n\t// If no fluid min or max font sizes are available, create some using min/max font size factors.\n\tif ( ! minimumFontSizeRaw ) {\n\t\tminimumFontSizeRaw =\n\t\t\tpreferredSize.value * DEFAULT_MINIMUM_FONT_SIZE_FACTOR +\n\t\t\tpreferredSize.unit;\n\t}\n\n\tif ( ! maximumFontSizeRaw ) {\n\t\tmaximumFontSizeRaw =\n\t\t\tpreferredSize.value * DEFAULT_MAXIMUM_FONT_SIZE_FACTOR +\n\t\t\tpreferredSize.unit;\n\t}\n\n\tconst fluidFontSizeValue = getComputedFluidTypographyValue( {\n\t\tmaximumViewPortWidth: DEFAULT_MAXIMUM_VIEWPORT_WIDTH,\n\t\tminimumViewPortWidth: DEFAULT_MINIMUM_VIEWPORT_WIDTH,\n\t\tmaximumFontSize: maximumFontSizeRaw,\n\t\tminimumFontSize: minimumFontSizeRaw,\n\t\tscaleFactor: DEFAULT_SCALE_FACTOR,\n\t} );\n\n\tif ( !! fluidFontSizeValue ) {\n\t\treturn fluidFontSizeValue;\n\t}\n\n\treturn defaultSize;\n}\n\n/**\n * Internal implementation of clamp() based on available min/max viewport width, and min/max font sizes.\n *\n * @param {Object} args\n * @param {string} args.maximumViewPortWidth Maximum size up to which type will have fluidity.\n * @param {string} args.minimumViewPortWidth Minimum viewport size from which type will have fluidity.\n * @param {string} args.maximumFontSize Maximum font size for any clamp() calculation.\n * @param {string} args.minimumFontSize Minimum font size for any clamp() calculation.\n * @param {number} args.scaleFactor A scale factor to determine how fast a font scales within boundaries.\n *\n * @return {string|null} A font-size value using clamp().\n */\nexport function getComputedFluidTypographyValue( {\n\tmaximumViewPortWidth,\n\tminimumViewPortWidth,\n\tmaximumFontSize,\n\tminimumFontSize,\n\tscaleFactor,\n} ) {\n\t// Grab the minimum font size and normalize it in order to use the value for calculations.\n\tconst minimumFontSizeParsed = getTypographyValueAndUnit( minimumFontSize );\n\n\t// We get a 'preferred' unit to keep units consistent when calculating,\n\t// otherwise the result will not be accurate.\n\tconst fontSizeUnit = minimumFontSizeParsed?.unit || 'rem';\n\n\t// Grab the maximum font size and normalize it in order to use the value for calculations.\n\tconst maximumFontSizeParsed = getTypographyValueAndUnit( maximumFontSize, {\n\t\tcoerceTo: fontSizeUnit,\n\t} );\n\n\t// Protect against unsupported units.\n\tif ( ! minimumFontSizeParsed || ! maximumFontSizeParsed ) {\n\t\treturn null;\n\t}\n\n\t// Use rem for accessible fluid target font scaling.\n\tconst minimumFontSizeRem = getTypographyValueAndUnit( minimumFontSize, {\n\t\tcoerceTo: 'rem',\n\t} );\n\n\t// Viewport widths defined for fluid typography. Normalize units\n\tconst maximumViewPortWidthParsed = getTypographyValueAndUnit(\n\t\tmaximumViewPortWidth,\n\t\t{ coerceTo: fontSizeUnit }\n\t);\n\tconst minumumViewPortWidthParsed = getTypographyValueAndUnit(\n\t\tminimumViewPortWidth,\n\t\t{ coerceTo: fontSizeUnit }\n\t);\n\n\t// Protect against unsupported units.\n\tif (\n\t\t! maximumViewPortWidthParsed ||\n\t\t! minumumViewPortWidthParsed ||\n\t\t! minimumFontSizeRem\n\t) {\n\t\treturn null;\n\t}\n\n\t// Build CSS rule.\n\t// Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.\n\tconst minViewPortWidthOffsetValue = roundToPrecision(\n\t\tminumumViewPortWidthParsed.value / 100,\n\t\t3\n\t);\n\n\tconst viewPortWidthOffset = minViewPortWidthOffsetValue + fontSizeUnit;\n\tlet linearFactor =\n\t\t100 *\n\t\t( ( maximumFontSizeParsed.value - minimumFontSizeParsed.value ) /\n\t\t\t( maximumViewPortWidthParsed.value -\n\t\t\t\tminumumViewPortWidthParsed.value ) );\n\tlinearFactor = roundToPrecision( linearFactor, 3 ) || 1;\n\tconst linearFactorScaled = linearFactor * scaleFactor;\n\tconst fluidTargetFontSize = `${ minimumFontSizeRem.value }${ minimumFontSizeRem.unit } + ((1vw - ${ viewPortWidthOffset }) * ${ linearFactorScaled })`;\n\n\treturn `clamp(${ minimumFontSize }, ${ fluidTargetFontSize }, ${ maximumFontSize })`;\n}\n\n/**\n *\n * @param {string} rawValue Raw size value from theme.json.\n * @param {Object|undefined} options Calculation options.\n *\n * @return {{ unit: string, value: number }|null} An object consisting of `'value'` and `'unit'` properties.\n */\nexport function getTypographyValueAndUnit( rawValue, options = {} ) {\n\tif ( ! rawValue ) {\n\t\treturn null;\n\t}\n\n\tconst { coerceTo, rootSizeValue, acceptableUnits } = {\n\t\tcoerceTo: '',\n\t\t// Default browser font size. Later we could inject some JS to compute this `getComputedStyle( document.querySelector( \"html\" ) ).fontSize`.\n\t\trootSizeValue: 16,\n\t\tacceptableUnits: [ 'rem', 'px', 'em' ],\n\t\t...options,\n\t};\n\n\tconst acceptableUnitsGroup = acceptableUnits?.join( '|' );\n\tconst regexUnits = new RegExp(\n\t\t`^(\\\\d*\\\\.?\\\\d+)(${ acceptableUnitsGroup }){1,1}$`\n\t);\n\n\tconst matches = rawValue.match( regexUnits );\n\n\t// We need a number value and a unit.\n\tif ( ! matches || matches.length < 3 ) {\n\t\treturn null;\n\t}\n\n\tlet [ , value, unit ] = matches;\n\n\tlet returnValue = parseFloat( value );\n\n\tif ( 'px' === coerceTo && ( 'em' === unit || 'rem' === unit ) ) {\n\t\treturnValue = returnValue * rootSizeValue;\n\t\tunit = coerceTo;\n\t}\n\n\tif ( 'px' === unit && ( 'em' === coerceTo || 'rem' === coerceTo ) ) {\n\t\treturnValue = returnValue / rootSizeValue;\n\t\tunit = coerceTo;\n\t}\n\n\treturn {\n\t\tvalue: returnValue,\n\t\tunit,\n\t};\n}\n\n/**\n * Returns a value rounded to defined precision.\n * Returns `undefined` if the value is not a valid finite number.\n *\n * @param {number} value Raw value.\n * @param {number} digits The number of digits to appear after the decimal point\n *\n * @return {number|undefined} Value rounded to standard precision.\n */\nexport function roundToPrecision( value, digits = 3 ) {\n\treturn Number.isFinite( value )\n\t\t? parseFloat( value.toFixed( digits ) )\n\t\t: undefined;\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/typography-utils.js"],"names":["getComputedFluidTypographyValue","getTypographyFontSizeValue","preset","typographySettings","size","defaultSize","fluid","fluidFontSizeValue","minimumFontSize","min","maximumFontSize","max","fontSize"],"mappings":"AAAA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,SAASA,+BAAT,QAAgD,yBAAhD;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,0BAAT,CAAqCC,MAArC,EAA6CC,kBAA7C,EAAkE;AAAA;;AACxE,QAAM;AAAEC,IAAAA,IAAI,EAAEC;AAAR,MAAwBH,MAA9B;AAEA;AACD;AACA;AACA;;AACC,MAAK,CAAEG,WAAF,IAAiB,QAAQA,WAA9B,EAA4C;AAC3C,WAAOA,WAAP;AACA;;AAED,MAAK,UAASF,kBAAT,aAASA,kBAAT,uBAASA,kBAAkB,CAAEG,KAA7B,CAAL,EAA0C;AACzC,WAAOD,WAAP;AACA,GAbuE,CAexE;;;AACA,MAAK,WAAUH,MAAV,aAAUA,MAAV,uBAAUA,MAAM,CAAEI,KAAlB,CAAL,EAA+B;AAC9B,WAAOD,WAAP;AACA;;AAED,QAAME,kBAAkB,GAAGP,+BAA+B,CAAE;AAC3DQ,IAAAA,eAAe,EAAEN,MAAF,aAAEA,MAAF,wCAAEA,MAAM,CAAEI,KAAV,kDAAE,cAAeG,GAD2B;AAE3DC,IAAAA,eAAe,EAAER,MAAF,aAAEA,MAAF,yCAAEA,MAAM,CAAEI,KAAV,mDAAE,eAAeK,GAF2B;AAG3DC,IAAAA,QAAQ,EAAEP;AAHiD,GAAF,CAA1D;;AAMA,MAAK,CAAC,CAAEE,kBAAR,EAA6B;AAC5B,WAAOA,kBAAP;AACA;;AAED,SAAOF,WAAP;AACA","sourcesContent":["/**\n * The fluid utilities must match the backend equivalent.\n * See: gutenberg_get_typography_font_size_value() in lib/block-supports/typography.php\n * ---------------------------------------------------------------\n */\n\n/**\n * WordPress dependencies\n */\nimport { getComputedFluidTypographyValue } from '@wordpress/block-editor';\n\n/**\n * @typedef {Object} FluidPreset\n * @property {string|undefined} max A maximum font size value.\n * @property {?string|undefined} min A minimum font size value.\n */\n\n/**\n * @typedef {Object} Preset\n * @property {?string|?number} size A default font size.\n * @property {string} name A font size name, displayed in the UI.\n * @property {string} slug A font size slug\n * @property {boolean|FluidPreset|undefined} fluid A font size slug\n */\n\n/**\n * Returns a font-size value based on a given font-size preset.\n * Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values.\n *\n * @param {Preset} preset\n * @param {Object} typographySettings\n * @param {boolean} typographySettings.fluid Whether fluid typography is enabled.\n *\n * @return {string|*} A font-size value or the value of preset.size.\n */\nexport function getTypographyFontSizeValue( preset, typographySettings ) {\n\tconst { size: defaultSize } = preset;\n\n\t/*\n\t * Catches falsy values and 0/'0'.\n\t * Fluid calculations cannot be performed on 0.\n\t */\n\tif ( ! defaultSize || '0' === defaultSize ) {\n\t\treturn defaultSize;\n\t}\n\n\tif ( true !== typographySettings?.fluid ) {\n\t\treturn defaultSize;\n\t}\n\n\t// A font size has explicitly bypassed fluid calculations.\n\tif ( false === preset?.fluid ) {\n\t\treturn defaultSize;\n\t}\n\n\tconst fluidFontSizeValue = getComputedFluidTypographyValue( {\n\t\tminimumFontSize: preset?.fluid?.min,\n\t\tmaximumFontSize: preset?.fluid?.max,\n\t\tfontSize: defaultSize,\n\t} );\n\n\tif ( !! fluidFontSizeValue ) {\n\t\treturn fluidFontSizeValue;\n\t}\n\n\treturn defaultSize;\n}\n"]}
|