Duotone: fix code typo (WordPress#62953)

Co-authored-by: ellatrix <[email protected]> Co-authored-by: jsnajdr <[email protected]> Co-authored-by: andrewserong <[email protected]>
MaxMood96 · Jul 1, 2024 · 064cb24 · 064cb24
1 parent a6c599a
commit 064cb24
Showing 1 changed file with 16 additions and 12 deletions.
diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
@@ -295,26 +295,30 @@ function useDuotoneStyles( {
 			return;
 		}
 
-		// Safari does not always update the duotone filter when the duotone colors
-		// are changed. When using Safari, force the block element to be repainted by
-		// the browser to ensure any changes are reflected visually. This logic matches
-		// that used on the site frontend in `block-supports/duotone.php`.
+		// Safari does not always update the duotone filter when the duotone
+		// colors are changed. When using Safari, force the block element to be
+		// repainted by the browser to ensure any changes are reflected
+		// visually. This logic matches that used on the site frontend in
+		// `block-supports/duotone.php`.
 		if ( blockElement && isSafari ) {
 			const display = blockElement.style.display;
-			// Switch to `inline-block` to force a repaint. In the editor, `inline-block`
-			// is used instead of `none` to ensure that scroll position is not affected,
-			// as `none` results in the editor scrolling to the top of the block.
+			// Switch to `inline-block` to force a repaint. In the editor,
+			// `inline-block` is used instead of `none` to ensure that scroll
+			// position is not affected, as `none` results in the editor
+			// scrolling to the top of the block.
 			blockElement.style.display = 'inline-block';
-			// Simply accessing el.offsetHeight flushes layout and style
-			// changes in WebKit without having to wait for setTimeout.
+			// Simply accessing el.offsetHeight flushes layout and style changes
+			// in WebKit without having to wait for setTimeout.
 			// eslint-disable-next-line no-unused-expressions
 			blockElement.offsetHeight;
 			blockElement.style.display = display;
 		}
-	}, [ isValidFilter, blockElement ] );
+		// `colors` must be a dependency so this effect runs when the colors
+		// change in Safari.
+	}, [ isValidFilter, blockElement, colors ] );
 }
 
-function useBlockProps( { name, style } ) {
+function useBlockProps( { clientId, name, style } ) {
 	const id = useInstanceId( useBlockProps );
 	const selector = useMemo( () => {
 		const blockType = getBlockType( name );
@@ -362,7 +366,7 @@ function useBlockProps( { name, style } ) {
 	const shouldRender = selector && attribute;
 
 	useDuotoneStyles( {
-		clientId: id,
+		clientId,
 		id: filterClass,
 		selector,
 		attribute,