Skip to content

Commit

Permalink
Merge pull request #419 from material-components/feature/354-color-pa…
Browse files Browse the repository at this point in the history
…lette

Core color picker
  • Loading branch information
emeaguiar committed Aug 24, 2022
2 parents 9ef425e + a7f99b8 commit 7904ade
Show file tree
Hide file tree
Showing 19 changed files with 865 additions and 559 deletions.
5 changes: 3 additions & 2 deletions .github/workflows/lint-tests.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docker-compose.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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}

Expand Down
83 changes: 24 additions & 59 deletions plugin/assets/src/block-editor/blocks/button/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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.
*
Expand Down Expand Up @@ -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' ) }
Expand Down
45 changes: 15 additions & 30 deletions plugin/assets/src/block-editor/blocks/icon/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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 }
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
56 changes: 0 additions & 56 deletions plugin/assets/src/block-editor/components/global-color/index.js

This file was deleted.

Loading

0 comments on commit 7904ade

Please sign in to comment.