diff --git a/packages/block-editor/src/components/rich-text/native/get-format-colors.native.js b/packages/block-editor/src/components/rich-text/native/get-format-colors.native.js index a54d3e10f78a0..b68186246523f 100644 --- a/packages/block-editor/src/components/rich-text/native/get-format-colors.native.js +++ b/packages/block-editor/src/components/rich-text/native/get-format-colors.native.js @@ -5,50 +5,43 @@ import { getColorObjectByAttributeValues } from '../../../components/colors'; const FORMAT_TYPE = 'core/text-color'; const REGEX_TO_MATCH = /^has-(.*)-color$/; -const TAGS_TO_SEARCH = /\ { - format.forEach( ( currentFormat ) => { - if ( currentFormat?.type === FORMAT_TYPE ) { - const className = currentFormat?.attributes?.class; - currentFormat.attributes.style = - currentFormat.attributes.style.replace( / /g, '' ); + // We are looping through a sparse array where empty indices will be + // skipped. + newFormats.forEach( ( format ) => { + format.forEach( ( currentFormat ) => { + if ( currentFormat?.type === FORMAT_TYPE ) { + const className = currentFormat?.attributes?.class; - className?.split( ' ' ).forEach( ( currentClass ) => { - const match = currentClass.match( REGEX_TO_MATCH ); - if ( match ) { - const [ , colorSlug ] = - currentClass.match( REGEX_TO_MATCH ); - const colorObject = getColorObjectByAttributeValues( - colors, - colorSlug - ); - const currentStyles = - currentFormat?.attributes?.style; - if ( - colorObject && - ( ! currentStyles || - currentStyles?.indexOf( - colorObject.color - ) === -1 ) - ) { - currentFormat.attributes.style = [ - `color: ${ colorObject.color }`, - currentStyles, - ].join( ';' ); - } + className?.split( ' ' ).forEach( ( currentClass ) => { + const match = currentClass.match( REGEX_TO_MATCH ); + if ( match ) { + const [ , colorSlug ] = + currentClass.match( REGEX_TO_MATCH ); + const colorObject = getColorObjectByAttributeValues( + colors, + colorSlug + ); + const currentStyles = currentFormat?.attributes?.style; + if ( + colorObject && + ( ! currentStyles || + currentStyles?.indexOf( colorObject.color ) === + -1 ) + ) { + currentFormat.attributes.style = [ + `color: ${ colorObject.color }`, + currentStyles, + ].join( ';' ); } - } ); - } - } ); + } + } ); + } } ); + } ); - return newFormats; - } - - return formats; + return newFormats; } diff --git a/packages/block-editor/src/components/rich-text/native/index.native.js b/packages/block-editor/src/components/rich-text/native/index.native.js index ab465b2441154..951d52ece6d69 100644 --- a/packages/block-editor/src/components/rich-text/native/index.native.js +++ b/packages/block-editor/src/components/rich-text/native/index.native.js @@ -196,7 +196,7 @@ export class RichText extends Component { const { formats, replacements, text } = currentValue; const { activeFormats } = this.state; - const newFormats = getFormatColors( value, formats, colorPalette ); + const newFormats = getFormatColors( formats, colorPalette ); return { formats: newFormats,