1
+" +`; + +exports[`RichText should remove highlighting element 2`] = ` +" +1
+" +`; diff --git a/packages/e2e-tests/specs/editor/various/format-library/text-color.test.js b/packages/e2e-tests/specs/editor/various/format-library/text-color.test.js new file mode 100644 index 00000000000000..ba6a8bda061806 --- /dev/null +++ b/packages/e2e-tests/specs/editor/various/format-library/text-color.test.js @@ -0,0 +1,46 @@ +/** + * WordPress dependencies + */ +import { + createNewPost, + getEditedPostContent, + clickBlockAppender, + pressKeyWithModifier, + clickBlockToolbarButton, +} from '@wordpress/e2e-test-utils'; + +describe( 'RichText', () => { + beforeEach( async () => { + await createNewPost(); + } ); + + it( 'should remove highlighting element', async () => { + await clickBlockAppender(); + + // Add text and select to color. + await page.keyboard.type( '1' ); + await pressKeyWithModifier( 'primary', 'a' ); + await clickBlockToolbarButton( 'More' ); + + const button = await page.waitForXPath( + `//button[text()='Highlight']` + ); + // Clicks may fail if the button is out of view. Assure it is before click. + await button.evaluate( ( element ) => element.scrollIntoView() ); + await button.click(); + + // Use a color name with multiple words to ensure that it becomes + // active. Previously we had a broken regular expression. + const option = await page.waitForSelector( + '[aria-label="Color: Cyan bluish gray"]' + ); + + await option.click(); + + expect( await getEditedPostContent() ).toMatchSnapshot(); + + await option.click(); + + expect( await getEditedPostContent() ).toMatchSnapshot(); + } ); +} ); diff --git a/packages/format-library/src/text-color/index.js b/packages/format-library/src/text-color/index.js index 347b5d6662e865..a79129d1eb5545 100644 --- a/packages/format-library/src/text-color/index.js +++ b/packages/format-library/src/text-color/index.js @@ -17,6 +17,8 @@ import { removeFormat } from '@wordpress/rich-text'; */ import { default as InlineColorUI, getActiveColors } from './inline'; +export const transparentValue = 'rgba(0, 0, 0, 0)'; + const name = 'core/text-color'; const title = __( 'Highlight' ); @@ -30,7 +32,7 @@ function getComputedStyleProperty( element, property ) { if ( property === 'background-color' && - value === 'rgba(0, 0, 0, 0)' && + value === transparentValue && element.parentElement ) { return getComputedStyleProperty( element.parentElement, property ); @@ -47,7 +49,7 @@ function fillComputedColors( element, { color, backgroundColor } ) { return { color: color || getComputedStyleProperty( element, 'color' ), backgroundColor: - backgroundColor === 'rgba(0, 0, 0, 0)' + backgroundColor === transparentValue ? getComputedStyleProperty( element, 'background-color' ) : backgroundColor, }; @@ -139,7 +141,7 @@ export const textColor = { if ( key !== 'style' ) return value; // We should not add a background-color if it's already set if ( value && value.includes( 'background-color' ) ) return value; - const addedCSS = [ 'background-color', 'rgba(0, 0, 0, 0)' ].join( ':' ); + const addedCSS = [ 'background-color', transparentValue ].join( ':' ); // Prepend `addedCSS` to avoid a double `;;` as any the existing CSS // rules will already include a `;`. return value ? [ addedCSS, value ].join( ';' ) : addedCSS; diff --git a/packages/format-library/src/text-color/inline.js b/packages/format-library/src/text-color/inline.js index abe1f2162bb856..37f2d6f9401f63 100644 --- a/packages/format-library/src/text-color/inline.js +++ b/packages/format-library/src/text-color/inline.js @@ -28,14 +28,14 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { textColor as settings } from './index'; +import { textColor as settings, transparentValue } from './index'; function parseCSS( css = '' ) { return css.split( ';' ).reduce( ( accumulator, rule ) => { if ( rule ) { const [ property, value ] = rule.split( ':' ); if ( property === 'color' ) accumulator.color = value; - if ( property === 'background-color' ) + if ( property === 'background-color' && value !== transparentValue ) accumulator.backgroundColor = value; } return accumulator; @@ -44,9 +44,11 @@ function parseCSS( css = '' ) { function parseClassName( className = '', colorSettings ) { return className.split( ' ' ).reduce( ( accumulator, name ) => { - const match = name.match( /^has-([^-]+)-color$/ ); - if ( match ) { - const [ , colorSlug ] = name.match( /^has-([^-]+)-color$/ ); + // `colorSlug` could contain dashes, so simply match the start and end. + if ( name.startsWith( 'has-' ) && name.endsWith( '-color' ) ) { + const colorSlug = name + .replace( /^has-/, '' ) + .replace( /-color$/, '' ); const colorObject = getColorObjectByAttributeValues( colorSettings, colorSlug @@ -88,7 +90,7 @@ function setColors( value, name, colorSettings, colors ) { styles.push( [ 'background-color', backgroundColor ].join( ':' ) ); } else { // Override default browser color for mark element. - styles.push( [ 'background-color', 'rgba(0, 0, 0, 0)' ].join( ':' ) ); + styles.push( [ 'background-color', transparentValue ].join( ':' ) ); } if ( color ) {