Fix button block contrast checker

projects/plugins/jetpack/changelog/fix-button-fallback-contrast-checking

@@ -0,0 +1,4 @@
+Significance: patch
+Type: bugfix
+
+Button: Fix contrast checker when comparing a user specified color with a css provided color.

projects/plugins/jetpack/extensions/blocks/button/edit.js

@@ -9,9 +9,9 @@ import { compose } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import useWidth from '../../shared/use-width';
-import applyFallbackStyles from './apply-fallback-styles';
 import { IS_GRADIENT_AVAILABLE } from './constants';
 import ButtonControls from './controls';
+import useFallbackColors from './use-fallback-colors';
 import usePassthroughAttributes from './use-passthrough-attributes';
 import './editor.scss';
 
@@ -41,6 +41,8 @@ export function ButtonEdit( props ) {
 		className: clsx( 'wp-block-button', className ),
 	} );
 
+	const [ fallbackColors, textRef ] = useFallbackColors();
+
 	const buttonClasses = clsx( 'wp-block-button__link', {
 		'has-background': backgroundColor.color || gradientValue,
 		[ backgroundColor.class ]: ! gradientValue && backgroundColor.class,
@@ -71,6 +73,7 @@ export function ButtonEdit( props ) {
 				disableLineBreaks={ 'input' === element }
 				onChange={ value => setAttributes( { text: value } ) }
 				placeholder={ placeholder || __( 'Add text…', 'jetpack' ) }
+				ref={ textRef }
 				style={ buttonStyles }
 				value={ text }
 				withoutInteractiveFormatting
@@ -81,6 +84,7 @@ export function ButtonEdit( props ) {
 						gradientValue,
 						setGradient,
 						isGradientAvailable: IS_GRADIENT_AVAILABLE,
+						...fallbackColors,
 						...props,
 					} }
 				/>
@@ -90,6 +94,5 @@ export function ButtonEdit( props ) {
 }
 
 export default compose(
-	withColors( { backgroundColor: 'background-color' }, { textColor: 'color' } ),
-	applyFallbackStyles
+	withColors( { backgroundColor: 'background-color' }, { textColor: 'color' } )
 )( ButtonEdit );

projects/plugins/jetpack/extensions/blocks/button/use-fallback-colors.js

@@ -0,0 +1,36 @@
+import { useRefEffect } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
+
+export default function useFallbackColors() {
+	const [ fallbacks, setFallbacks ] = useState();
+
+	const ref = useRefEffect( node => {
+		const observer = new MutationObserver( () => {
+			const fallbackBackgroundColor = getComputedStyle( node ).backgroundColor;
+			const fallbackTextColor = getComputedStyle( node ).color;
+
+			// Don't update the fallback colors if they haven't changed.
+			if (
+				fallbackBackgroundColor === fallbacks?.fallbackBackgroundColor &&
+				fallbackTextColor === fallbacks?.fallbackTextColor
+			) {
+				return;
+			}
+
+			setFallbacks( {
+				fallbackBackgroundColor,
+				fallbackTextColor,
+			} );
+		} );
+
+		observer.observe( node, {
+			attributeFilter: [ 'style', 'class' ],
+		} );
+
+		return () => {
+			observer.disconnect();
+		};
+	}, [] );
+
+	return [ fallbacks, ref ];
+}