Add color hooks for the mobile implementation. (#21257)

* Add color hooks for the mobile implementation. * Update use-color for native * Null Line Controls for native. * Fix colors for Paragraph & Heading * fix media-text and cover * Merge branch 'master' into rnmobile/fix_color_breakage # Conflicts: # packages/block-library/src/heading/edit.js Co-authored-by: Pinar Olguc <[email protected]> Co-authored-by: Dratwas <[email protected]>
WordPress · Mar 31, 2020 · ddd3fff · ddd3fff
1 parent 69057a9
commit ddd3fff
Show file tree

Hide file tree

Showing 13 changed files with 227 additions and 199 deletions.
diff --git a/packages/block-editor/src/components/colors/color-panel.js b/packages/block-editor/src/components/colors/color-panel.js
@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+import { map } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import PanelColorSettings from '../panel-color-settings';
+import ContrastChecker from '../contrast-checker';
+
+const resolveContrastCheckerColor = ( color, colorSettings, detectedColor ) => {
+	if ( typeof color === 'function' ) {
+		return color( colorSettings );
+	} else if ( color === true ) {
+		return detectedColor;
+	}
+	return color;
+};
+
+export default function ColorPanel( {
+	title,
+	colorSettings,
+	colorPanelProps,
+	contrastCheckers,
+	detectedBackgroundColor,
+	detectedColor,
+	panelChildren,
+	initialOpen,
+} ) {
+	return (
+		<PanelColorSettings
+			title={ title }
+			initialOpen={ initialOpen }
+			colorSettings={ Object.values( colorSettings ) }
+			{ ...colorPanelProps }
+		>
+			{ contrastCheckers &&
+				( Array.isArray( contrastCheckers )
+					? contrastCheckers.map(
+							( { backgroundColor, textColor, ...rest } ) => {
+								backgroundColor = resolveContrastCheckerColor(
+									backgroundColor,
+									colorSettings,
+									detectedBackgroundColor
+								);
+								textColor = resolveContrastCheckerColor(
+									textColor,
+									colorSettings,
+									detectedColor
+								);
+								return (
+									<ContrastChecker
+										key={ `${ backgroundColor }-${ textColor }` }
+										backgroundColor={ backgroundColor }
+										textColor={ textColor }
+										{ ...rest }
+									/>
+								);
+							}
+					  )
+					: map( colorSettings, ( { value } ) => {
+							let {
+								backgroundColor,
+								textColor,
+							} = contrastCheckers;
+							backgroundColor = resolveContrastCheckerColor(
+								backgroundColor || value,
+								colorSettings,
+								detectedBackgroundColor
+							);
+							textColor = resolveContrastCheckerColor(
+								textColor || value,
+								colorSettings,
+								detectedColor
+							);
+							return (
+								<ContrastChecker
+									{ ...contrastCheckers }
+									key={ `${ backgroundColor }-${ textColor }` }
+									backgroundColor={ backgroundColor }
+									textColor={ textColor }
+								/>
+							);
+					  } ) ) }
+			{ typeof panelChildren === 'function'
+				? panelChildren( colorSettings )
+				: panelChildren }
+		</PanelColorSettings>
+	);
+}
diff --git a/packages/block-editor/src/components/colors/color-panel.native.js b/packages/block-editor/src/components/colors/color-panel.native.js
@@ -0,0 +1,3 @@
+export default function ColorPanel() {
+	return null;
+}
diff --git a/packages/block-editor/src/components/colors/use-colors.js b/packages/block-editor/src/components/colors/use-colors.js
@@ -3,14 +3,7 @@
  */
 import memoize from 'memize';
 import classnames from 'classnames';
-import {
-	map,
-	kebabCase,
-	camelCase,
-	castArray,
-	startCase,
-	isFunction,
-} from 'lodash';
+import { kebabCase, camelCase, castArray, startCase, isFunction } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -29,10 +22,9 @@ import {
 /**
  * Internal dependencies
  */
-import PanelColorSettings from '../panel-color-settings';
-import ContrastChecker from '../contrast-checker';
 import InspectorControls from '../inspector-controls';
 import { useBlockEditContext } from '../block-edit';
+import ColorPanel from './color-panel';
 
 /**
  * Browser dependencies
@@ -46,81 +38,6 @@ const COMMON_COLOR_LABELS = {
 	backgroundColor: __( 'Background Color' ),
 };
 
-const resolveContrastCheckerColor = ( color, colorSettings, detectedColor ) => {
-	if ( typeof color === 'function' ) {
-		return color( colorSettings );
-	} else if ( color === true ) {
-		return detectedColor;
-	}
-	return color;
-};
-
-const ColorPanel = ( {
-	title,
-	colorSettings,
-	colorPanelProps,
-	contrastCheckers,
-	detectedBackgroundColor,
-	detectedColor,
-	panelChildren,
-	initialOpen,
-} ) => (
-	<PanelColorSettings
-		title={ title }
-		initialOpen={ initialOpen }
-		colorSettings={ Object.values( colorSettings ) }
-		{ ...colorPanelProps }
-	>
-		{ contrastCheckers &&
-			( Array.isArray( contrastCheckers )
-				? contrastCheckers.map(
-						( { backgroundColor, textColor, ...rest } ) => {
-							backgroundColor = resolveContrastCheckerColor(
-								backgroundColor,
-								colorSettings,
-								detectedBackgroundColor
-							);
-							textColor = resolveContrastCheckerColor(
-								textColor,
-								colorSettings,
-								detectedColor
-							);
-							return (
-								<ContrastChecker
-									key={ `${ backgroundColor }-${ textColor }` }
-									backgroundColor={ backgroundColor }
-									textColor={ textColor }
-									{ ...rest }
-								/>
-							);
-						}
-				  )
-				: map( colorSettings, ( { value } ) => {
-						let { backgroundColor, textColor } = contrastCheckers;
-						backgroundColor = resolveContrastCheckerColor(
-							backgroundColor || value,
-							colorSettings,
-							detectedBackgroundColor
-						);
-						textColor = resolveContrastCheckerColor(
-							textColor || value,
-							colorSettings,
-							detectedColor
-						);
-						return (
-							<ContrastChecker
-								{ ...contrastCheckers }
-								key={ `${ backgroundColor }-${ textColor }` }
-								backgroundColor={ backgroundColor }
-								textColor={ textColor }
-							/>
-						);
-				  } ) ) }
-		{ typeof panelChildren === 'function'
-			? panelChildren( colorSettings )
-			: panelChildren }
-	</PanelColorSettings>
-);
 const InspectorControlsColorPanel = ( props ) => (
 	<InspectorControls>
 		<ColorPanel { ...props } />

diff --git a/packages/block-editor/src/components/colors/use-colors.native.js b/packages/block-editor/src/components/colors/use-colors.native.js
diff --git a/packages/block-editor/src/hooks/color-panel.js b/packages/block-editor/src/hooks/color-panel.js
@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import PanelColorSettings from '../components/panel-color-settings';
+import ContrastChecker from '../components/contrast-checker';
+import InspectorControls from '../components/inspector-controls';
+import { getBlockDOMNode } from '../utils/dom';
+
+export default function ColorPanel( { colorSettings, clientId } ) {
+	const { getComputedStyle, Node } = window;
+
+	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
+	const [ detectedColor, setDetectedColor ] = useState();
+
+	useEffect( () => {
+		const colorsDetectionElement = getBlockDOMNode( clientId );
+		setDetectedColor( getComputedStyle( colorsDetectionElement ).color );
+
+		let backgroundColorNode = colorsDetectionElement;
+		let backgroundColor = getComputedStyle( backgroundColorNode )
+			.backgroundColor;
+		while (
+			backgroundColor === 'rgba(0, 0, 0, 0)' &&
+			backgroundColorNode.parentNode &&
+			backgroundColorNode.parentNode.nodeType === Node.ELEMENT_NODE
+		) {
+			backgroundColorNode = backgroundColorNode.parentNode;
+			backgroundColor = getComputedStyle( backgroundColorNode )
+				.backgroundColor;
+		}
+
+		setDetectedBackgroundColor( backgroundColor );
+	} );
+
+	return (
+		<InspectorControls>
+			<PanelColorSettings
+				title={ __( 'Color settings' ) }
+				initialOpen={ false }
+				colorSettings={ colorSettings }
+			>
+				<ContrastChecker
+					backgroundColor={ detectedBackgroundColor }
+					textColor={ detectedColor }
+				/>
+			</PanelColorSettings>
+		</InspectorControls>
+	);
+}
diff --git a/packages/block-editor/src/hooks/color-panel.native.js b/packages/block-editor/src/hooks/color-panel.native.js
@@ -0,0 +1,3 @@
+export default function ColorPanel() {
+	return null;
+}
diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
@@ -10,7 +10,6 @@ import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { useState, useEffect } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -21,11 +20,8 @@ import {
 	getColorObjectByColorValue,
 	getColorObjectByAttributeValues,
 } from '../components/colors';
-import PanelColorSettings from '../components/panel-color-settings';
-import ContrastChecker from '../components/contrast-checker';
-import InspectorControls from '../components/inspector-controls';
-import { getBlockDOMNode } from '../utils/dom';
 import { cleanEmptyObject } from './utils';
+import ColorPanel from './color-panel';
 
 export const COLOR_SUPPORT_KEY = '__experimentalColor';
 
@@ -118,51 +114,6 @@ export function addEditProps( settings ) {
 	return settings;
 }
 
-const ColorPanel = ( { colorSettings, clientId } ) => {
-	const { getComputedStyle, Node } = window;
-
-	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
-	const [ detectedColor, setDetectedColor ] = useState();
-
-	useEffect( () => {
-		const colorsDetectionElement = getBlockDOMNode( clientId );
-		if ( ! colorsDetectionElement ) {
-			return;
-		}
-		setDetectedColor( getComputedStyle( colorsDetectionElement ).color );
-
-		let backgroundColorNode = colorsDetectionElement;
-		let backgroundColor = getComputedStyle( backgroundColorNode )
-			.backgroundColor;
-		while (
-			backgroundColor === 'rgba(0, 0, 0, 0)' &&
-			backgroundColorNode.parentNode &&
-			backgroundColorNode.parentNode.nodeType === Node.ELEMENT_NODE
-		) {
-			backgroundColorNode = backgroundColorNode.parentNode;
-			backgroundColor = getComputedStyle( backgroundColorNode )
-				.backgroundColor;
-		}
-
-		setDetectedBackgroundColor( backgroundColor );
-	} );
-
-	return (
-		<InspectorControls>
-			<PanelColorSettings
-				title={ __( 'Color settings' ) }
-				initialOpen={ false }
-				colorSettings={ colorSettings }
-			>
-				<ContrastChecker
-					backgroundColor={ detectedBackgroundColor }
-					textColor={ detectedColor }
-				/>
-			</PanelColorSettings>
-		</InspectorControls>
-	);
-};
-
 /**
  * Override the default edit UI to include new inspector controls for block
  * color, if block defines support.

diff --git a/packages/block-editor/src/hooks/index.native.js b/packages/block-editor/src/hooks/index.native.js
@@ -3,3 +3,5 @@
  */
 import './custom-class-name';
 import './generated-class-name';
+import './style';
+import './color';
diff --git a/packages/block-editor/src/hooks/line-height.js b/packages/block-editor/src/hooks/line-height.js
@@ -5,6 +5,7 @@ import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { PanelBody } from '@wordpress/components';
+import { Platform } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -41,18 +42,20 @@ export const withBlockControls = createHigherOrderComponent(
 				style: cleanEmptyObject( newStyle ),
 			} );
 		};
-
-		return [
-			<BlockEdit key="edit" { ...props } />,
-			<InspectorControls key="control">
-				<PanelBody title={ __( 'Typography' ) }>
-					<LineHeightControl
-						value={ style?.typography?.lineHeight }
-						onChange={ onChange }
-					/>
-				</PanelBody>
-			</InspectorControls>,
-		];
+		const controls = Platform.select( {
+			web: (
+				<InspectorControls key="control">
+					<PanelBody title={ __( 'Typography' ) }>
+						<LineHeightControl
+							value={ style?.typography?.lineHeight }
+							onChange={ onChange }
+						/>
+					</PanelBody>
+				</InspectorControls>
+			),
+			native: null,
+		} );
+		return [ <BlockEdit key="edit" { ...props } />, controls ];
 	},
 	'withToolbarControls'
 );