fix: handle font family and size, rename onChange prop

bigbite · Dec 5, 2023 · f0b01be · f0b01be
1 parent a69d44b
commit f0b01be
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 27 deletions.
diff --git a/src/editor/components/StylesTypography/FontFamily.js b/src/editor/components/StylesTypography/FontFamily.js
@@ -10,9 +10,9 @@ import { fontFamilyToVar, varToFontFamily } from './helpers';
  *
  * @param {Object} props Component props
  * @param {Array} props.typographyStyles Current typography styles.
- * @param {Function} props.handleNewValue Callback to update the theme config.
+ * @param {Function} props.onChange  Callback to run on change.
  */
-const FontFamily = ( { typographyStyles, handleNewValue } ) => {
+const FontFamily = ( { typographyStyles, onChange } ) => {
  const { themeConfig } = useContext( EditorContext );
  const fontFamilies = getThemeOption(
  'settings.typography.fontFamilies',
@@ -30,7 +30,7 @@ const FontFamily = ( { typographyStyles, handleNewValue } ) => {
  fontFamilies
  ) }
  onChange={ ( newVal ) =>
- handleNewValue(
+ onChange(
  fontFamilyToVar( newVal, fontFamilies ),
  'fontFamily'
  )

diff --git a/src/editor/components/StylesTypography/FontSize.js b/src/editor/components/StylesTypography/FontSize.js
@@ -10,9 +10,9 @@ import { parseFontSize, fontSizeToVar, varToFontSize } from './helpers';
  *
  * @param {Object} props Component props
  * @param {Array} props.typographyStyles Current typography styles.
- * @param {Function} props.handleNewValue Callback to update the theme config.
+ * @param {Function} props.onChange  Callback to run on change.
  */
-const FontSize = ( { typographyStyles, handleNewValue } ) => {
+const FontSize = ( { typographyStyles, onChange } ) => {
  const { themeConfig } = useContext( EditorContext );
  const fontSizes = getThemeOption(
  'settings.typography.fontSizes',
@@ -32,7 +32,7 @@ const FontSize = ( { typographyStyles, handleNewValue } ) => {
  withSlider
  fontSizes={ fontSizes }
  onChange={ ( newVal ) =>
- handleNewValue( fontSizeToVar( newVal, fontSizes ), 'fontSize' )
+ onChange( fontSizeToVar( newVal, fontSizes ), 'fontSize' )
  }
  disableCustomFontSizes={ false }
  withReset={ false }

diff --git a/src/editor/components/StylesTypography/index.js b/src/editor/components/StylesTypography/index.js
@@ -50,13 +50,6 @@ const Typography = ( { selector } ) => {
  config = set( config, selector, newTypographyStyles );
  setUserConfig( config );
  };
- const fontAppearance =
- ! typographyStyles?.fontStyle && ! typographyStyles?.fontWeight
- ? 'default'
- : {
- fontStyle: parseFontStyle( typographyStyles?.fontStyle ),
- fontWeight: parseFontWeight( typographyStyles?.fontWeight ),
- };
 
  return (
  <>
@@ -65,23 +58,35 @@ const Typography = ( { selector } ) => {
  </span>
  <FontFamily
  typographyStyles={ typographyStyles }
- handleNewValue={ handleNewValue }
+ onChange={ ( val ) => handleNewValue( { fontFamily: val } ) }
  />
  <div className="themer--blocks-item-component--columns themer--blocks-item-component--columns-2">
  <FontSize
  typographyStyles={ typographyStyles }
- handleNewValue={ handleNewValue }
+ onChange={ ( val ) => handleNewValue( { fontSize: val } ) }
  />
  <FontAppearanceControl
- value={ fontAppearance }
+ value={
+ ! typographyStyles?.fontStyle &&
+ ! typographyStyles?.fontWeight
+ ? 'default'
+ : {
+ fontStyle: parseFontStyle(
+ typographyStyles?.fontStyle
+ ),
+ fontWeight: parseFontWeight(
+ typographyStyles?.fontWeight
+ ),
+ }
+ }
  onChange={ handleNewValue }
  size="__unstable-large"
  __nextHasNoMarginBottom
  />
  <LineHeightControl
  value={ parseLineHeight( typographyStyles?.lineHeight ) }
- onChange={ ( newVal ) =>
- handleNewValue( { lineHeight: newVal } )
+ onChange={ ( val ) =>
+ handleNewValue( { lineHeight: val } )
  }
  size="__unstable-large"
  __unstableInputWidth="auto"
@@ -91,11 +96,11 @@ const Typography = ( { selector } ) => {
  value={ parseLetterSpacing(
  typographyStyles?.letterSpacing
  ) }
- onChange={ ( newVal ) => {
- if ( newVal === '' ) {
+ onChange={ ( val ) => {
+ if ( val === '' ) {
  handleNewValue( { letterSpacing: '0px' } );
  } else {
- handleNewValue( { letterSpacing: newVal } );
+ handleNewValue( { letterSpacing: val } );
  }
  } }
  size="__unstable-large"
@@ -105,8 +110,8 @@ const Typography = ( { selector } ) => {
  label={ __( 'Text columns', 'themer' ) }
  max={ MAX_TEXT_COLUMNS }
  min={ 1 }
- onChange={ ( newVal ) =>
- handleNewValue( { textColumns: newVal } )
+ onChange={ ( val ) =>
+ handleNewValue( { textColumns: val } )
  }
  size="__unstable-large"
  spinControls="custom"
@@ -117,16 +122,16 @@ const Typography = ( { selector } ) => {
  value={ parseTextDecoration(
  typographyStyles?.textDecoration
  ) }
- onChange={ ( newVal ) =>
- handleNewValue( { textDecoration: newVal } )
+ onChange={ ( val ) =>
+ handleNewValue( { textDecoration: val } )
  }
  />
  <TextTransformControl
  value={ parseTextTransform(
  typographyStyles?.textTransform
  ) }
- onChange={ ( newVal ) =>
- handleNewValue( { textTransform: newVal } )
+ onChange={ ( val ) =>
+ handleNewValue( { textTransform: val } )
  }
  showNone
  />