Skip to content

Global styles: convert preset font size values to CSS vars #44967

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ramonjd merged 11 commits into from
Nov 9, 2022
Merged

Global styles: convert preset font size values to CSS vars #44967

Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
6fce0f3
messing around seeing how we can use the preset slug + css var instea…
ramonjd Oct 14, 2022
45c96f7
Fixed import and formatting
ramonjd Oct 20, 2022
3795bfc
Create a new hook specifically for font size.
ramonjd Oct 21, 2022
7d73c3a
Refactor useFontSizeStyleWithReset so that it exports named methods a…
ramonjd Nov 1, 2022
6bcefe7
CHANGELOG.md update
ramonjd Nov 1, 2022
cb0b84b
Updated onChange mock arg expectations to include the second arg: fon…
ramonjd Nov 2, 2022
7d469f2
Updating tests to include explicit args for mock onChange expectations
ramonjd Nov 2, 2022
891dca4
Use find as an alternative to the deleted `getSelectedFontSize` metho…
ramonjd Nov 3, 2022
09692b7
Now that we're setting font sizes using their presets we don't have t…
ramonjd Nov 3, 2022
b5f700c
Remove confusing comment, because it had nothing to do with the code …
ramonjd Nov 8, 2022
9997012
Updating method name for clarity.
ramonjd Nov 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Now that we're setting font sizes using their presets we don't have t… 
…o clampify incoming values for the site editor font size picker
  • Loading branch information
@ramonjd
ramonjd committed Nov 8, 2022
commit 09692b7be1d271fdec2d20f134ff77f1947fb786
14 changes: 1 addition & 13 deletions packages/edit-site/src/components/global-styles/typography-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import { __ } from '@wordpress/i18n';
* Internal dependencies
*/
import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';
import { getTypographyFontSizeValue } from './typography-utils';

export function useHasTypographyPanel( name ) {
const hasFontFamily = useHasFontFamilyControl( name );
Expand Down Expand Up @@ -173,19 +172,8 @@ export default function TypographyPanel( { name, element, headingLevel } ) {
} else if ( element && element !== 'text' ) {
prefix = `elements.${ element }.`;
}
const [ fluidTypography ] = useSetting( 'typography.fluid', name );
const [ fontSizes ] = useSetting( 'typography.fontSizes', name );

// Convert static font size values to fluid font sizes if fluidTypography is activated.
const fontSizesWithFluidValues = fontSizes.map( ( font ) => {
if ( !! fluidTypography ) {
font.size = getTypographyFontSizeValue( font, {
fluid: fluidTypography,
} );
}
return font;
} );

const disableCustomFontSizes = ! useSetting(
'typography.customFontSize',
name
Expand Down Expand Up @@ -274,7 +262,7 @@ export default function TypographyPanel( { name, element, headingLevel } ) {
<FontSizePicker
value={ fontSize }
onChange={ setFontSize }
fontSizes={ fontSizesWithFluidValues }
fontSizes={ fontSizes }
disableCustomFontSizes={ disableCustomFontSizes }
withReset={ false }
withSlider
Expand Down