[BBT-121] Manage all styles

src/editor/components/Styles.js

@@ -1,5 +1,3 @@
-import { useContext } from '@wordpress/element';
-
 import Border from './StylesBorder';
 import Color from './StylesColor';
 import Typography from './StylesTypography';
@@ -9,9 +7,6 @@ import Dimensions from './StylesDimensions';
 import Outline from './StylesOutline';
 import Shadow from './StylesShadow';
 
-import getThemeOption from '../../utils/get-theme-option';
-import EditorContext from '../context/EditorContext';
-
 /**
  * Styles component
  *
@@ -24,69 +19,21 @@ import EditorContext from '../context/EditorContext';
  * @param {string} props.selector Selector for styles object within theme config
  */
 const Styles = ( { selector } ) => {
- const { themeConfig } = useContext( EditorContext );
-
  if ( ! selector ) {
  return;
  }
 
- const hasBorderStyles = getThemeOption(
- `${ selector }.border`,
- themeConfig
- );
- const hasColorStyles = getThemeOption( `${ selector }.color`, themeConfig );
- const hasTypographyStyles = getThemeOption(
- `${ selector }.typography`,
- themeConfig
- );
- const hasFilterStyles = getThemeOption(
- `${ selector }.filter`,
- themeConfig
- );
- const hasSpacingStyles = getThemeOption(
- `${ selector }.spacing`,
- themeConfig
- );
- const hasDimensionsStyles = getThemeOption(
- `${ selector }.dimensions`,
- themeConfig
- );
- const hasOutlineStyles = getThemeOption(
- `${ selector }.outline`,
- themeConfig
- );
- const hasShadowStyles = getThemeOption(
- `${ selector }.shadow`,
- themeConfig
- );
-
  return (
  <div className="themer--blocks-item-component">
  <div className="themer--blocks-item-component--styles">
- { hasBorderStyles && (
- <Border selector={ `${ selector }.border` } />
- ) }
- { hasColorStyles && (
- <Color selector={ `${ selector }.color` } />
- ) }
- { hasTypographyStyles && (
- <Typography selector={ `${ selector }.typography` } />
- ) }
- { hasFilterStyles && (
- <Filter selector={ `${ selector }.filter` } />
- ) }
- { hasSpacingStyles && (
- <Spacing selector={ `${ selector }.spacing` } />
- ) }
- { hasDimensionsStyles && (
- <Dimensions selector={ `${ selector }.dimensions` } />
- ) }
- { hasOutlineStyles && (
- <Outline selector={ `${ selector }.outline` } />
- ) }
- { hasShadowStyles && (
- <Shadow selector={ `${ selector }.shadow` } />
- ) }
+ <Border selector={ `${ selector }.border` } />
+ <Color selector={ `${ selector }.color` } />
+ <Typography selector={ `${ selector }.typography` } />
+ <Filter selector={ `${ selector }.filter` } />
+ <Spacing selector={ `${ selector }.spacing` } />
+ <Dimensions selector={ `${ selector }.dimensions` } />
+ <Outline selector={ `${ selector }.outline` } />
+ <Shadow selector={ `${ selector }.shadow` } />
  </div>
  </div>
  );

src/editor/components/StylesColor.js

@@ -17,7 +17,7 @@ import StylesContext from '../context/StylesContext';
 const Color = ( { selector } ) => {
  const { themeConfig } = useContext( EditorContext );
  const { setUserConfig } = useContext( StylesContext );
- const colorStyles = getThemeOption( selector, themeConfig );
+ const colorStyles = getThemeOption( selector, themeConfig ) || {};
  const themePalette = getThemeOption(
  'settings.color.palette.theme',
  themeConfig
@@ -33,7 +33,7 @@ const Color = ( { selector } ) => {
  setUserConfig( config );
  };
 
- const allPalettes = Object.keys( colorStyles ).map( ( key ) => (
+ const allPalettes = [ 'background', 'text' ].map( ( key ) => (
  <div key={ key } className="themer--blocks-item-component--column">
  <span className="themer--blocks-item-component--styles--label">
  { key }

src/editor/components/StylesDimensions.js

@@ -25,7 +25,7 @@ const SELECT_OPTIONS = [
 
 // Determines the value of the type dropdown from the minHeight value.
 const parseTypeValue = ( minHeight ) => {
- if ( minHeight.includes( 'fit-content' ) ) {
+ if ( minHeight?.includes( 'fit-content' ) ) {
  return 'fit-content';
  }
  if ( isCssLengthUnit( minHeight ) ) {
@@ -60,10 +60,10 @@ const parseUnitValue = ( minHeight, typeValue ) => {
 const Dimensions = ( { selector } ) => {
  const { themeConfig } = useContext( EditorContext );
  const { setUserConfig } = useContext( StylesContext );
- const dimensionsStyles = getThemeOption( selector, themeConfig );
+ const dimensionsStyles = getThemeOption( selector, themeConfig ) || {};
  const { minHeight } = dimensionsStyles;
- const typeValue = parseTypeValue( minHeight.trim() );
- const unitValue = parseUnitValue( minHeight.trim(), typeValue );
+ const typeValue = parseTypeValue( minHeight?.trim() );
+ const unitValue = parseUnitValue( minHeight?.trim(), typeValue );
 
  // Updates a property value in the outline object.
  const handleNewValue = ( value ) => {

src/editor/components/StylesFilter.js

@@ -43,9 +43,12 @@ const Filter = ( { selector } ) => {
  * @param {string} newVal - The new value.
  */
  const handleNewValue = ( newVal ) => {
- filterStyles.duotone = duotoneToVar( newVal, duotoneOptions );
+ const newFilterStyles = {
+ ...filterStyles,
+ duotone: duotoneToVar( newVal, duotoneOptions ),
+ };
  let config = structuredClone( themeConfig );
- config = set( config, selector, filterStyles );
+ config = set( config, selector, newFilterStyles );
  setUserConfig( config );
  };
 

src/editor/components/StylesOutline.js

@@ -57,9 +57,9 @@ const Outline = ( { selector } ) => {
 
  // Updates a property value in the outline object.
  const handleNewValue = ( value, key ) => {
- outlineStyles[ key ] = value;
+ const newOutlineStyles = { ...outlineStyles, [ key ]: value };
  let config = structuredClone( themeConfig );
- config = set( config, selector, outlineStyles );
+ config = set( config, selector, newOutlineStyles );
  setUserConfig( config );
  };
 

src/editor/components/StylesShadow.js

@@ -75,15 +75,15 @@ const Shadow = ( { selector } ) => {
  };
 
  const shadowUnitValues = shadowStyles
- .split( ' ' )
+ ?.split( ' ' )
  .filter( isCssLengthUnit );
  // Remove 'inset' and each of the unit values from the string to get the color
- let shadowColor = shadowStyles.replace( 'inset', '' ).trim();
- shadowUnitValues.forEach( ( value ) => {
+ let shadowColor = shadowStyles?.replace( 'inset', '' ).trim();
+ shadowUnitValues?.forEach( ( value ) => {
  shadowColor = shadowColor.replace( value, '' ).trim();
  } );
  const shadowObj = {
- inset: shadowStyles.includes( 'inset' ) ? 'inset' : '',
+ inset: shadowStyles?.includes( 'inset' ) ? 'inset' : '',
  offsetX: parseUserValue( shadowUnitValues?.[ 0 ] ),
  offsetY: parseUserValue( shadowUnitValues?.[ 1 ] ),
  blurRadius: parseUserValue( shadowUnitValues?.[ 2 ] )?.startsWith( '-' )

src/editor/components/StylesSpacing.js

@@ -84,8 +84,8 @@ const Spacing = ( { selector } ) => {
 
  // TODO: support shorthand CSS values in theme.json
  if (
- typeof spacingStyles.padding === 'string' ||
- typeof spacingStyles.margin === 'string'
+ typeof spacingStyles?.padding === 'string' ||
+ typeof spacingStyles?.margin === 'string'
  ) {
  return null;
  }
@@ -97,6 +97,7 @@ const Spacing = ( { selector } ) => {
  * @param {string} type - The type of spacing to update. E.g. margin.
  */
  const handleNewValue = ( newVal, type ) => {
+ let newSpacingStyles = { ...spacingStyles };
  if ( type === 'margin' || type === 'padding' ) {
  const spacingKeys = Object.keys( newVal );
  spacingKeys.forEach( ( key ) => {
@@ -108,13 +109,16 @@ const Spacing = ( { selector } ) => {
  themeSpacingSizes
  );
  } );
- spacingStyles[ type ] = { ...newVal };
+ newSpacingStyles = { ...spacingStyles, [ type ]: { ...newVal } };
  } else {
- spacingStyles[ type ] = spacingToVar( newVal, themeSpacingSizes );
+ newSpacingStyles = {
+ ...spacingStyles,
+ [ type ]: spacingToVar( newVal, themeSpacingSizes ),
+ };
  }
 
  let config = structuredClone( themeConfig );
- config = set( config, selector, spacingStyles );
+ config = set( config, selector, newSpacingStyles );
  setUserConfig( config );
  };
 

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'
  )

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 }

src/editor/components/StylesTypography/index.js

@@ -43,12 +43,11 @@ const Typography = ( { selector } ) => {
  * Updates the theme config with the new value.
  *
  * @param {string} newVal The new value.
- * @param {string} key The property to be updated.
  */
- const handleNewValue = ( newVal, key ) => {
- typographyStyles[ key ] = newVal;
+ const handleNewValue = ( newVal ) => {
+ const newTypographyStyles = { ...typographyStyles, ...newVal };
  let config = structuredClone( themeConfig );
- config = set( config, selector, typographyStyles );
+ config = set( config, selector, newTypographyStyles );
  setUserConfig( config );
  };
 
@@ -59,12 +58,12 @@ 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={
@@ -80,17 +79,14 @@ const Typography = ( { selector } ) => {
  ),
  }
  }
- onChange={ ( newVal ) => {
- handleNewValue( newVal?.fontWeight, 'fontWeight' );
- handleNewValue( newVal?.fontStyle, 'fontStyle' );
- } }
+ onChange={ handleNewValue }
  size="__unstable-large"
  __nextHasNoMarginBottom
  />
  <LineHeightControl
  value={ parseLineHeight( typographyStyles?.lineHeight ) }
- onChange={ ( newVal ) =>
- handleNewValue( newVal, 'lineHeight' )
+ onChange={ ( val ) =>
+ handleNewValue( { lineHeight: val } )
  }
  size="__unstable-large"
  __unstableInputWidth="auto"
@@ -100,11 +96,11 @@ const Typography = ( { selector } ) => {
  value={ parseLetterSpacing(
  typographyStyles?.letterSpacing
  ) }
- onChange={ ( newVal ) => {
- if ( newVal === '' ) {
- handleNewValue( '0px', 'letterSpacing' );
+ onChange={ ( val ) => {
+ if ( val === '' ) {
+ handleNewValue( { letterSpacing: '0px' } );
  } else {
- handleNewValue( newVal, 'letterSpacing' );
+ handleNewValue( { letterSpacing: val } );
  }
  } }
  size="__unstable-large"
@@ -114,8 +110,8 @@ const Typography = ( { selector } ) => {
  label={ __( 'Text columns', 'themer' ) }
  max={ MAX_TEXT_COLUMNS }
  min={ 1 }
- onChange={ ( newVal ) =>
- handleNewValue( newVal, 'textColumns' )
+ onChange={ ( val ) =>
+ handleNewValue( { textColumns: val } )
  }
  size="__unstable-large"
  spinControls="custom"
@@ -126,16 +122,16 @@ const Typography = ( { selector } ) => {
  value={ parseTextDecoration(
  typographyStyles?.textDecoration
  ) }
- onChange={ ( newVal ) =>
- handleNewValue( newVal, 'textDecoration' )
+ onChange={ ( val ) =>
+ handleNewValue( { textDecoration: val } )
  }
  />
  <TextTransformControl
  value={ parseTextTransform(
  typographyStyles?.textTransform
  ) }
- onChange={ ( newVal ) =>
- handleNewValue( newVal, 'textTransform' )
+ onChange={ ( val ) =>
+ handleNewValue( { textTransform: val } )
  }
  showNone
  />

src/utils/block-helpers.js

@@ -203,7 +203,7 @@ export const varToHex = ( cssVar, themePalette ) => {
  return cssVar;
  }
 
- const cssVarName = cssVar.replace(
+ const cssVarName = cssVar?.replace(
  /var\(--wp--preset--color--(.+?)\)/g,
  '$1'
  );