[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;
  }

src/editor/components/StylesTypography/index.js

@@ -46,9 +46,9 @@ const Typography = ( { selector } ) => {
  * @param {string} key The property to be updated.
  */
  const handleNewValue = ( newVal, key ) => {
- typographyStyles[ key ] = newVal;
+ const newTypographyStyles = { ...typographyStyles, [ key ]: newVal };
  let config = structuredClone( themeConfig );
- config = set( config, selector, typographyStyles );
+ config = set( config, selector, newTypographyStyles );
  setUserConfig( config );
  };
 

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