Merge pull request #419 from material-components/feature/354-color-palette

Core color picker

Author: Mario Aguiar

.github/workflows/lint-tests.yml

@@ -35,15 +35,16 @@ jobs:
       fail-fast: false
       matrix:
         php_versions: [7.4]
-        wp_versions: [5.7, 5.8.2]
+        wp_versions: [5.9, 6.0]
         include:
           - php_versions: 7.3
-            wp_versions: 5.6
+            wp_versions: 5.9
 
     env:
       NODE_ENV: teste2e
       WP_VERSION: ${{ matrix.wp_versions }}
       PHP_VERSION: php${{ matrix.php_versions }}-apache
+      WORDPRESS_DEBUG: 0
 
     steps:
       - uses: actions/checkout@v2

docker-compose.yml

@@ -54,7 +54,7 @@ services:
       - ./composer.lock:/var/www/html/wp-content/themes/material-design-google/composer.lock
     restart: always
     environment:
-      WORDPRESS_DEBUG: 1
+      WORDPRESS_DEBUG: ${WORDPRESS_DEBUG-1}
       WORDPRESS_DB_USER: ${WP_DB_USER}
       WORDPRESS_DB_PASSWORD: ${WP_DB_PASSWORD}
 

plugin/assets/src/block-editor/blocks/button/edit.js

@@ -47,12 +47,11 @@ import ButtonGroup from '../../components/button-group';
 import ImageRadioControl from '../../components/image-radio-control';
 import { withId } from '../../components/with-id';
 import GlobalShapeSize from '../../components/global-shape-size';
-import GlobalColor, {
-	GlobalColorContrastChecker,
-} from '../../components/global-color';
 import ToolbarUrlInputPopover from '../../components/toolbar-url-input-popover';
 import genericAttributesSetter from '../../utils/generic-attributes-setter';
 import { name as ContactFormBlockName } from '../contact-form';
+import { getColor } from '../../components/with-global-default';
+import ColorPanel from '../../components/global-color/color-panel';
 
 /**
  * @typedef MdcButtonProps
@@ -202,6 +201,26 @@ const ButtonEdit = ( {
 		}
 	}, [ isSubmitButton ] ); // eslint-disable-line
 
+	const colorSettings = {
+		text: {
+			label: __( 'Text Color', 'material-design' ),
+			colorValue: getColor( 'on_primary_color', textColor ),
+			onColorChange: setter( 'textColor' ),
+			gradients: [], // Disable gradients
+			disableCustomGradients: true,
+		},
+		container: {
+			label: __( 'Container Color', 'material-design' ),
+			colorValue: getColor( 'primary_color', backgroundColor ),
+			onColorChange: setter( 'backgroundColor' ),
+			gradients: [], // Disable gradients
+			disableCustomGradients: true,
+			globalPropName: hasBg( elevationStyle )
+				? 'on_primary_color'
+				: 'primary_color',
+		},
+	};
+
 	/**
 	 * Sets ref and linkTarget when the toggle is touched.
 	 *
@@ -332,63 +351,9 @@ const ButtonEdit = ( {
 						/>
 					) }
 				</PanelBody>
-				<PanelBody
-					title={ __( 'Colors', 'material-design' ) }
-					initialOpen={ true }
-				>
-					<div className="components-base-control">
-						{ __(
-							'Overrides will only apply to this button. Change Primary Color in ',
-							'material-design'
-						) }
-						<a
-							href={ getConfig( 'customizerUrls' ).colors }
-							target="_blank"
-							rel="noreferrer noopener"
-						>
-							{ __(
-								'Material Design Options',
-								'material-design'
-							) }
-						</a>
-						{ __( ' to update all buttons.', 'material-design' ) }
-					</div>
-
-					{ hasBg( elevationStyle ) && type === 'text' && (
-						<GlobalColor
-							label={ __( 'Container Color', 'material-design' ) }
-							value={ backgroundColor }
-							onChange={ setter( 'backgroundColor' ) }
-							globalPropName={
-								hasBg( elevationStyle )
-									? 'primary_color'
-									: 'on_primary_color'
-							}
-						/>
-					) }
-					<GlobalColor
-						label={ __(
-							'Text and icons Color',
-							'material-design'
-						) }
-						value={ textColor }
-						onChange={ setter( 'textColor' ) }
-						globalPropName={
-							hasBg( elevationStyle )
-								? 'on_primary_color'
-								: 'primary_color'
-						}
-					/>
 
-					{ hasBg( elevationStyle ) && type === 'text' && (
-						<GlobalColorContrastChecker
-							textColor={ textColor }
-							backgroundColor={ backgroundColor }
-							textProp="on_primary_color"
-							backgroundProp="primary_color"
-						/>
-					) }
-				</PanelBody>
+				<ColorPanel colors={ colorSettings } />
+
 				{ type === 'text' && (
 					<PanelBody
 						title={ __( 'Corner Styles', 'material-design' ) }

plugin/assets/src/block-editor/blocks/icon/edit.js

@@ -36,11 +36,12 @@ import { PanelBody, RangeControl } from '@wordpress/components';
  */
 import './style.css';
 import { ICON_SIZES } from './options';
-import { getConfig, getIconName } from '../../utils';
+import { getIconName } from '../../utils';
 import IconPicker from '../../components/icon-picker';
-import GlobalColor from '../../components/global-color';
 import genericAttributesSetter from '../../utils/generic-attributes-setter';
 import ButtonGroup from '../../components/button-group';
+import { getColor } from '../../components/with-global-default';
+import ColorPanel from '../../components/global-color/color-panel';
 
 /**
  * Material icon edit component.
@@ -68,6 +69,16 @@ const IconEdit = ( {
 		style[ 'font-size' ] = `${ customSize }px`;
 	}
 
+	const colorSettings = {
+		text: {
+			label: __( 'Text Color', 'material-design' ),
+			colorValue: getColor( 'primary_color', textColor ),
+			onColorChange: setter( 'textColor' ),
+			gradients: [], // Disable gradients
+			disableCustomGradients: true,
+		},
+	};
+
 	const blockProps = useBlockProps( {
 		className: classNames( className, {
 			[ `has-text-align-${ align }` ]: align,
@@ -104,35 +115,9 @@ const IconEdit = ( {
 						/>
 					}
 				</PanelBody>
-				<PanelBody
-					title={ __( 'Colors', 'material-design' ) }
-					initialOpen={ true }
-				>
-					<div className="components-base-control">
-						{ __(
-							'Overrides will only apply to this Icon. Change Primary Color in ',
-							'material-design'
-						) }
-						<a
-							href={ getConfig( 'customizerUrls' ).colors }
-							target="_blank"
-							rel="noreferrer noopener"
-						>
-							{ __(
-								'Material Design Options',
-								'material-design'
-							) }
-						</a>
-						{ __( ' to update all Icons.', 'material-design' ) }
-					</div>
 
-					<GlobalColor
-						label={ __( 'Icon Color', 'material-design' ) }
-						value={ textColor }
-						onChange={ setter( 'textColor' ) }
-						globalPropName={ 'primary_color' }
-					/>
-				</PanelBody>
+				<ColorPanel colors={ colorSettings } />
+
 				<PanelBody
 					title={ __( 'Size', 'material-design' ) }
 					initialOpen={ true }

plugin/assets/src/block-editor/components/global-color/color-panel.js

@@ -0,0 +1,85 @@
+/**
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+import {
+	__experimentalColorGradientSettingsDropdown as ColorGradientDropdown, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+	ContrastChecker,
+	useSetting,
+} from '@wordpress/block-editor';
+import {
+	PanelBody,
+	__experimentalSpacer as Spacer, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * @param {string} color Color input in 'var(--md-sys-color-on-primary)' format.
+ *
+ * @return {string} variable name example: '--md-sys-color-on-primary'.
+ */
+const getColorFromVarString = color => {
+	if ( color.includes( 'var(' ) ) {
+		const colorVar = color.split( '(' )[ 1 ].split( ')' )[ 0 ];
+		const style = getComputedStyle( document.body );
+		return style.getPropertyValue( colorVar );
+	}
+	return color;
+};
+
+const ColorPanel = ( { colors } ) => {
+	const { text, container } = colors;
+	const settings = [ text, container ];
+	const colorSettings = useSetting( 'color.palette' );
+	const colorPalette = [
+		{
+			name: __( 'Theme', 'material-design' ),
+			colors: colorSettings,
+		},
+	];
+
+	const colorText = text ? getColorFromVarString( text.colorValue ) : null;
+	const containerText = container
+		? getColorFromVarString( container.colorValue )
+		: null;
+
+	return (
+		<PanelBody
+			title={ __( 'Color', 'material-design' ) }
+			initialOpen={ true }
+		>
+			<ColorGradientDropdown
+				settings={ settings }
+				colors={ colorPalette }
+				__experimentalHasMultipleOrigins={ true } // Allow multiple color palettes.
+			/>
+
+			<Spacer marginY={ 4 } />
+
+			{ colorText && containerText && (
+				<ContrastChecker
+					textColor={ colorText }
+					backgroundColor={ containerText }
+				/>
+			) }
+		</PanelBody>
+	);
+};
+
+export default ColorPanel;