From c0939718aec399f05bcfb1b9156debd008db46bb Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Thu, 23 Jan 2025 18:00:50 +0400 Subject: [PATCH 1/2] Block Editor: Fix block color contrast checker (#68799) * Block Editor: Fix block color contrast checker * Use reducer hook * Add comment Co-authored-by: Mamaduka Co-authored-by: juanfra Co-authored-by: jsnajdr Co-authored-by: afercia --- .../src/hooks/contrast-checker.js | 94 +++++++++++++------ 1 file changed, 64 insertions(+), 30 deletions(-) diff --git a/packages/block-editor/src/hooks/contrast-checker.js b/packages/block-editor/src/hooks/contrast-checker.js index 368e2e75264858..7cb231110401d4 100644 --- a/packages/block-editor/src/hooks/contrast-checker.js +++ b/packages/block-editor/src/hooks/contrast-checker.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useState, useEffect } from '@wordpress/element'; +import { useLayoutEffect, useReducer } from '@wordpress/element'; /** * Internal dependencies @@ -9,52 +9,86 @@ import { useState, useEffect } from '@wordpress/element'; 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 ( ); } From 3c1bbccd16f51459d1b734c3a6923abc6411bb18 Mon Sep 17 00:00:00 2001 From: Karthick M <97787966+karthick-murugan@users.noreply.github.com> Date: Thu, 23 Jan 2025 20:39:52 +0530 Subject: [PATCH 2/2] Update text description of the "Contain text cursor inside block" preference (#68132) * Image size fix in lightbox * Revert "Image size fix in lightbox" This reverts commit 63f81c1e9cbb3b0513abca2b8cb579fef374ed7b. * Update text description * Description update * Update index.js Minor text revision --------- Co-authored-by: karthick-murugan Co-authored-by: joedolson --- packages/editor/src/components/preferences-modal/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/preferences-modal/index.js b/packages/editor/src/components/preferences-modal/index.js index fba60405e7e4b5..fcca1b00e9bb2d 100644 --- a/packages/editor/src/components/preferences-modal/index.js +++ b/packages/editor/src/components/preferences-modal/index.js @@ -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'