Use Colors: Allow specifying a query selector for the background colo…

…r detector to start searching from.
WordPress · Nov 4, 2019 · f99d9be · f99d9be
1 parent 62392a3
commit f99d9be
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/packages/block-editor/src/components/colors/use-colors.js b/packages/block-editor/src/components/colors/use-colors.js
@@ -190,7 +190,10 @@ export default function __experimentalUseColors(
 	const detectedBackgroundColorRef = useRef();
 	const BackgroundColorDetector = useMemo(
 		() =>
-			withFallbackStyles( ( node ) => {
+			withFallbackStyles( ( node, { querySelector } ) => {
+				if ( querySelector ) {
+					node = node.parentNode.querySelector( querySelector );
+				}
 				let backgroundColor = getComputedStyle( node ).backgroundColor;
 				while ( backgroundColor === 'rgba(0, 0, 0, 0)' && node.parentNode ) {
 					node = node.parentNode;

diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js
@@ -55,8 +55,8 @@ function HeadingEdit( {
 				</PanelBody>
 			</InspectorControls>
 			{ InspectorControlsColorPanel }
-			<BackgroundColorDetector />
 			<TextColor>
+				<BackgroundColorDetector querySelector='[contenteditable="true"]' />
 				<RichText
 					identifier="content"
 					tagName={ tagName }