Skip to content

Commit

Permalink
Merge branch 'trunk' into add/e2e-test-contrast-checker
Browse files Browse the repository at this point in the history
  • Loading branch information
himanshupathak95 committed Jan 23, 2025
2 parents a392e9a + 3c1bbcc commit 192b43b
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 31 deletions.
94 changes: 64 additions & 30 deletions packages/block-editor/src/hooks/contrast-checker.js
Original file line number Diff line number Diff line change
@@ -1,60 +1,94 @@
/**
* WordPress dependencies
*/
import { useState, useEffect } from '@wordpress/element';
import { useLayoutEffect, useReducer } from '@wordpress/element';

/**
* Internal dependencies
*/
import ContrastChecker from '../components/contrast-checker';
import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';

function getComputedStyle( node ) {
return node.ownerDocument.defaultView.getComputedStyle( node );
function getComputedValue( node, property ) {
return node.ownerDocument.defaultView
.getComputedStyle( node )
.getPropertyValue( property );
}

function getBlockElementColors( blockEl ) {
if ( ! blockEl ) {
return {};
}

const firstLinkElement = blockEl.querySelector( 'a' );
const linkColor = !! firstLinkElement?.innerText
? getComputedValue( firstLinkElement, 'color' )
: undefined;

const textColor = getComputedValue( blockEl, 'color' );

let backgroundColorNode = blockEl;
let backgroundColor = getComputedValue(
backgroundColorNode,
'background-color'
);
while (
backgroundColor === 'rgba(0, 0, 0, 0)' &&
backgroundColorNode.parentNode &&
backgroundColorNode.parentNode.nodeType ===
backgroundColorNode.parentNode.ELEMENT_NODE
) {
backgroundColorNode = backgroundColorNode.parentNode;
backgroundColor = getComputedValue(
backgroundColorNode,
'background-color'
);
}

return {
textColor,
backgroundColor,
linkColor,
};
}

function reducer( prevColors, newColors ) {
const hasChanged = Object.keys( newColors ).some(
( key ) => prevColors[ key ] !== newColors[ key ]
);

// Do not re-render if the colors have not changed.
return hasChanged ? newColors : prevColors;
}

export default function BlockColorContrastChecker( { clientId } ) {
const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
const [ detectedColor, setDetectedColor ] = useState();
const [ detectedLinkColor, setDetectedLinkColor ] = useState();
const blockEl = useBlockElement( clientId );
const [ colors, setColors ] = useReducer( reducer, {} );

// There are so many things that can change the color of a block
// So we perform this check on every render.
useEffect( () => {
useLayoutEffect( () => {
if ( ! blockEl ) {
return;
}
setDetectedColor( getComputedStyle( blockEl ).color );

const firstLinkElement = blockEl.querySelector( 'a' );
if ( firstLinkElement && !! firstLinkElement.innerText ) {
setDetectedLinkColor( getComputedStyle( firstLinkElement ).color );
}

let backgroundColorNode = blockEl;
let backgroundColor =
getComputedStyle( backgroundColorNode ).backgroundColor;
while (
backgroundColor === 'rgba(0, 0, 0, 0)' &&
backgroundColorNode.parentNode &&
backgroundColorNode.parentNode.nodeType ===
backgroundColorNode.parentNode.ELEMENT_NODE
) {
backgroundColorNode = backgroundColorNode.parentNode;
backgroundColor =
getComputedStyle( backgroundColorNode ).backgroundColor;
function updateColors() {
setColors( getBlockElementColors( blockEl ) );
}

setDetectedBackgroundColor( backgroundColor );
}, [ blockEl ] );
// Combine `useLayoutEffect` and two rAF calls to ensure that values are read
// after the current paint but before the next paint.
window.requestAnimationFrame( () =>
window.requestAnimationFrame( updateColors )
);
} );

return (
<ContrastChecker
backgroundColor={ detectedBackgroundColor }
textColor={ detectedColor }
backgroundColor={ colors.backgroundColor }
textColor={ colors.textColor }
linkColor={ colors.linkColor }
enableAlphaChecker
linkColor={ detectedLinkColor }
/>
);
}
2 changes: 1 addition & 1 deletion packages/editor/src/components/preferences-modal/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,7 @@ function PreferencesModalContents( { extraSections = {} } ) {
scope="core"
featureName="keepCaretInsideBlock"
help={ __(
'Keeps the text cursor within the block boundaries, aiding users with screen readers by preventing unintentional cursor movement outside the block.'
'Keeps the text cursor within blocks while navigating with arrow keys, preventing it from moving to other blocks and enhancing accessibility for keyboard users.'
) }
label={ __(
'Contain text cursor inside block'
Expand Down

0 comments on commit 192b43b

Please sign in to comment.