Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add color reference mechanism #21490

Closed
wants to merge 2 commits into from
Closed

Add color reference mechanism #21490

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5584117
Add color reference mechanism
jorgefilipecosta Apr 8, 2020
fddbf02
Only use new references when global styles are used. Implement global…
jorgefilipecosta Apr 9, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/block-editor/src/hooks/color-panel.js
View file
Open in desktop
Expand Up @@ -16,6 +16,7 @@ export default function ColorPanel( {
settings,
clientId,
enableContrastChecking = true,
...props
} ) {
const { getComputedStyle, Node } = window;

Expand Down Expand Up @@ -55,6 +56,7 @@ export default function ColorPanel( {
title={ __( 'Color settings' ) }
initialOpen={ false }
settings={ settings }
{ ...props }
>
{ enableContrastChecking && (
<ContrastChecker
Expand Down
45 changes: 36 additions & 9 deletions packages/block-editor/src/hooks/color.js
View file
Open in desktop
Expand Up @@ -56,6 +56,8 @@ function addAttributes( settings ) {
return settings;
}

// Todo: Color attributes are added so we can support themes that use color classes.
// If later we remove support for color classes the attributes should be removed.
// allow blocks to specify their own attribute definition with default values if needed.
if ( ! settings.attributes.backgroundColor ) {
Object.assign( settings.attributes, {
Expand Down Expand Up @@ -151,6 +153,18 @@ export function addEditProps( settings ) {
return settings;
}

const getColorFromAttributeValue = (
colors,
namedAttributeValue,
styleAttributeValue
) => {
const attributeParsed = /var:colors\|(.+)/.exec( styleAttributeValue );
return getColorObjectByAttributeValues(
colors,
namedAttributeValue || ( attributeParsed && attributeParsed[ 1 ] ),
styleAttributeValue
).color;
};
/**
* Inspector control panel containing the color related configuration
*
Expand All @@ -160,9 +174,19 @@ export function addEditProps( settings ) {
*/
export function ColorEdit( props ) {
const { name: blockName, attributes } = props;
const { colors, gradients } = useSelect( ( select ) => {
return select( 'core/block-editor' ).getSettings();
}, [] );
const { colorsSetting, colorsGlobalStyles, gradients } = useSelect(
( select ) => {
const settings = select( 'core/block-editor' ).getSettings();
return {
colorsSetting: settings.colors,
colorsGlobalStyles:
settings.__experimentalGlobalStylesBase?.colors,
gradients: settings.gradients,
};
},
[]
);
const colors = colorsGlobalStyles || colorsSetting;
// Shouldn't be needed but right now the ColorGradientsPanel
// can trigger both onChangeColor and onChangeBackground
// synchronously causing our two callbacks to override changes
Expand Down Expand Up @@ -193,14 +217,16 @@ export function ColorEdit( props ) {
...localAttributes.current.style,
color: {
...localAttributes.current?.style?.color,
[ name ]: colorObject?.slug ? undefined : value,
[ name ]: colorObject?.slug
? colorsGlobalStyles && `var:colors|${ colorObject?.slug }`
: value,
},
};

const newNamedColor = colorObject?.slug ? colorObject.slug : undefined;
const newAttributes = {
style: cleanEmptyObject( newStyle ),
[ attributeName ]: newNamedColor,
[ attributeName ]: colorsGlobalStyles ? undefined : newNamedColor,
};

props.setAttributes( newAttributes );
Expand Down Expand Up @@ -252,24 +278,25 @@ export function ColorEdit( props ) {
Platform.OS === 'web' && ! gradient && ! style?.color?.gradient
}
clientId={ props.clientId }
colors={ colors }
settings={ [
{
label: __( 'Text Color' ),
onColorChange: onChangeColor( 'text' ),
colorValue: getColorObjectByAttributeValues(
colorValue: getColorFromAttributeValue(
colors,
textColor,
style?.color?.text
).color,
),
},
{
label: __( 'Background Color' ),
onColorChange: onChangeColor( 'background' ),
colorValue: getColorObjectByAttributeValues(
colorValue: getColorFromAttributeValue(
colors,
backgroundColor,
style?.color?.background
).color,
),
gradientValue,
onGradientChange: hasGradient
? onChangeGradient
Expand Down
20 changes: 18 additions & 2 deletions packages/block-editor/src/hooks/style.js
View file
Open in desktop
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { has, get } from 'lodash';
import { has, get, startsWith } from 'lodash';

/**
* WordPress dependencies
Expand Down Expand Up @@ -35,6 +35,22 @@ const typographySupportKeys = [
const hasStyleSupport = ( blockType ) =>
styleSupportKeys.some( ( key ) => hasBlockSupport( blockType, key ) );

const VARIABLE_REFERENCE_PREFIX = 'var:';
const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
function compileStyleValue( uncompiledValue ) {
if ( startsWith( uncompiledValue, VARIABLE_REFERENCE_PREFIX ) ) {
const variable = uncompiledValue
.slice( VARIABLE_REFERENCE_PREFIX.length )
.replace(
VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE,
VARIABLE_PATH_SEPARATOR_TOKEN_STYLE
);
return `var(--wp--${ variable })`;
}
return uncompiledValue;
}

/**
* Returns the inline styles to add depending on the style object
*
Expand All @@ -53,7 +69,7 @@ export function getInlineStyles( styles = {} ) {
const output = {};
Object.entries( mappings ).forEach( ( [ styleKey, objectKey ] ) => {
if ( has( styles, objectKey ) ) {
output[ styleKey ] = get( styles, objectKey );
output[ styleKey ] = compileStyleValue( get( styles, objectKey ) );
}
} );

Expand Down
7 changes: 5 additions & 2 deletions packages/e2e-tests/fixtures/blocks/core__columns.html
View file
Open in desktop
@@ -1,20 +1,23 @@
<!-- wp:columns {"backgroundColor":"secondary"} -->
<div class="wp-block-columns has-background has-secondary-background-color">
<!-- wp:columns {"style":{"color":{"background":"var(\u002d\u002dwp\u002d\u002dcolors\u002d\u002dsecondary)"}}} -->
<div class="wp-block-columns has-background" style="background-color:var(--wp--colors--secondary)">
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:paragraph -->
<p>Column One, Paragraph One</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Column One, Paragraph Two</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:paragraph -->
<p>Column Two, Paragraph One</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Column Three, Paragraph One</p>
<!-- /wp:paragraph -->
Expand Down
12 changes: 8 additions & 4 deletions packages/e2e-tests/fixtures/blocks/core__columns.json
View file
Open in desktop
Expand Up @@ -4,7 +4,11 @@
"name": "core/columns",
"isValid": true,
"attributes": {
"backgroundColor": "secondary"
"style": {
"color": {
"background": "var(--wp--colors--secondary)"
}
}
},
"innerBlocks": [
{
Expand Down Expand Up @@ -36,7 +40,7 @@
"originalContent": "<p>Column One, Paragraph Two</p>"
}
],
"originalContent": "<div class=\"wp-block-column\">\n\t\t\n\t\t\n\t</div>"
"originalContent": "<div class=\"wp-block-column\">\n\t\t\n\n\t\t\n\t</div>"
},
{
"clientId": "_clientId_1",
Expand Down Expand Up @@ -67,9 +71,9 @@
"originalContent": "<p>Column Three, Paragraph One</p>"
}
],
"originalContent": "<div class=\"wp-block-column\">\n\t\t\n\t\t\n\t</div>"
"originalContent": "<div class=\"wp-block-column\">\n\t\t\n\n\t\t\n\t</div>"
}
],
"originalContent": "<div class=\"wp-block-columns has-background has-secondary-background-color\">\n\t\n\t\n</div>"
"originalContent": "<div class=\"wp-block-columns has-background\" style=\"background-color:var(--wp--colors--secondary)\">\n\t\n\n\t\n</div>"
}
]
20 changes: 12 additions & 8 deletions packages/e2e-tests/fixtures/blocks/core__columns.parsed.json
View file
Open in desktop
Expand Up @@ -2,7 +2,11 @@
{
"blockName": "core/columns",
"attrs": {
"backgroundColor": "secondary"
"style": {
"color": {
"background": "var(--wp--colors--secondary)"
}
}
},
"innerBlocks": [
{
Expand All @@ -28,11 +32,11 @@
]
}
],
"innerHTML": "\n\t<div class=\"wp-block-column\">\n\t\t\n\t\t\n\t</div>\n\t",
"innerHTML": "\n\t<div class=\"wp-block-column\">\n\t\t\n\n\t\t\n\t</div>\n\t",
"innerContent": [
"\n\t<div class=\"wp-block-column\">\n\t\t",
null,
"\n\t\t",
"\n\n\t\t",
null,
"\n\t</div>\n\t"
]
Expand Down Expand Up @@ -60,21 +64,21 @@
]
}
],
"innerHTML": "\n\t<div class=\"wp-block-column\">\n\t\t\n\t\t\n\t</div>\n\t",
"innerHTML": "\n\t<div class=\"wp-block-column\">\n\t\t\n\n\t\t\n\t</div>\n\t",
"innerContent": [
"\n\t<div class=\"wp-block-column\">\n\t\t",
null,
"\n\t\t",
"\n\n\t\t",
null,
"\n\t</div>\n\t"
]
}
],
"innerHTML": "\n<div class=\"wp-block-columns has-background has-secondary-background-color\">\n\t\n\t\n</div>\n",
"innerHTML": "\n<div class=\"wp-block-columns has-background\" style=\"background-color:var(--wp--colors--secondary)\">\n\t\n\n\t\n</div>\n",
"innerContent": [
"\n<div class=\"wp-block-columns has-background has-secondary-background-color\">\n\t",
"\n<div class=\"wp-block-columns has-background\" style=\"background-color:var(--wp--colors--secondary)\">\n\t",
null,
"\n\t",
"\n\n\t",
null,
"\n</div>\n"
]
Expand Down
4 changes: 2 additions & 2 deletions packages/e2e-tests/fixtures/blocks/core__columns.serialized.html
View file
Open in desktop
@@ -1,5 +1,5 @@
<!-- wp:columns {"backgroundColor":"secondary"} -->
<div class="wp-block-columns has-secondary-background-color has-background"><!-- wp:column -->
<!-- wp:columns {"style":{"color":{"background":"var(\u002d\u002dwp\u002d\u002dcolors\u002d\u002dsecondary)"}}} -->
<div class="wp-block-columns has-background" style="background-color:var(--wp--colors--secondary)"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Column One, Paragraph One</p>
<!-- /wp:paragraph -->
Expand Down
7 changes: 4 additions & 3 deletions packages/e2e-tests/fixtures/blocks/core__group.html
View file
Open in desktop
@@ -1,12 +1,13 @@
<!-- wp:group {"align":"full","backgroundColor":"secondary"} -->
<div class="wp-block-group alignfull has-secondary-background-color has-background">
<!-- wp:group {"align":"full","style":{"color":{"background":"var(\u002d\u002dwp\u002d\u002dcolors\u002d\u002dsecondary)"}}} -->
<div class="wp-block-group alignfull has-background" style="background-color:var(--wp--colors--secondary)">
<div class="wp-block-group__inner-container">
<!-- wp:paragraph -->
<p>This is a group block.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Group block content.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:paragraph -->
</div>
</div>
<!-- /wp:group -->
8 changes: 6 additions & 2 deletions packages/e2e-tests/fixtures/blocks/core__group.json
View file
Open in desktop
Expand Up @@ -6,7 +6,11 @@
"attributes": {
"tagName": "div",
"align": "full",
"backgroundColor": "secondary"
"style": {
"color": {
"background": "var(--wp--colors--secondary)"
}
}
},
"innerBlocks": [
{
Expand All @@ -32,6 +36,6 @@
"originalContent": "<p>Group block content.</p>"
}
],
"originalContent": "<div class=\"wp-block-group alignfull has-secondary-background-color has-background\">\n\t<div class=\"wp-block-group__inner-container\">\n\t\t\n\n\t\t</div>\n\t</div>"
"originalContent": "<div class=\"wp-block-group alignfull has-background\" style=\"background-color:var(--wp--colors--secondary)\">\n\t<div class=\"wp-block-group__inner-container\">\n\t\t\n\n\t\t\n\t</div>\n</div>"
}
]
12 changes: 8 additions & 4 deletions packages/e2e-tests/fixtures/blocks/core__group.parsed.json
View file
Open in desktop
Expand Up @@ -3,7 +3,11 @@
"blockName": "core/group",
"attrs": {
"align": "full",
"backgroundColor": "secondary"
"style": {
"color": {
"background": "var(--wp--colors--secondary)"
}
}
},
"innerBlocks": [
{
Expand All @@ -25,13 +29,13 @@
]
}
],
"innerHTML": "\n<div class=\"wp-block-group alignfull has-secondary-background-color has-background\">\n\t<div class=\"wp-block-group__inner-container\">\n\t\t\n\n\t\t</div>\n\t</div>\n",
"innerHTML": "\n<div class=\"wp-block-group alignfull has-background\" style=\"background-color:var(--wp--colors--secondary)\">\n\t<div class=\"wp-block-group__inner-container\">\n\t\t\n\n\t\t\n\t</div>\n</div>\n",
"innerContent": [
"\n<div class=\"wp-block-group alignfull has-secondary-background-color has-background\">\n\t<div class=\"wp-block-group__inner-container\">\n\t\t",
"\n<div class=\"wp-block-group alignfull has-background\" style=\"background-color:var(--wp--colors--secondary)\">\n\t<div class=\"wp-block-group__inner-container\">\n\t\t",
null,
"\n\n\t\t",
null,
"</div>\n\t</div>\n"
"\n\t</div>\n</div>\n"
]
},
{
Expand Down
4 changes: 2 additions & 2 deletions packages/e2e-tests/fixtures/blocks/core__group.serialized.html
View file
Open in desktop
@@ -1,5 +1,5 @@
<!-- wp:group {"align":"full","backgroundColor":"secondary"} -->
<div class="wp-block-group alignfull has-secondary-background-color has-background"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<!-- wp:group {"align":"full","style":{"color":{"background":"var(\u002d\u002dwp\u002d\u002dcolors\u002d\u002dsecondary)"}}} -->
<div class="wp-block-group alignfull has-background" style="background-color:var(--wp--colors--secondary)"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>This is a group block.</p>
<!-- /wp:paragraph -->

Expand Down
5 changes: 2 additions & 3 deletions packages/e2e-tests/fixtures/blocks/core__heading__h2-color.html
View file
Open in desktop
@@ -1,4 +1,3 @@
<!-- wp:heading {"textColor":"accent"} -->
<h2 class="has-accent-color has-text-color">Text</h2>
<!-- wp:heading {"style":{"color":{"text":"var:colors|accent"}}} -->
<h2 class="has-text-color" style="color:var(--wp--colors--accent)">Text</h2>
<!-- /wp:heading -->

8 changes: 6 additions & 2 deletions packages/e2e-tests/fixtures/blocks/core__heading__h2-color.json
View file
Open in desktop
Expand Up @@ -6,9 +6,13 @@
"attributes": {
"content": "Text",
"level": 2,
"textColor": "accent"
"style": {
"color": {
"text": "var:colors|accent"
}
}
},
"innerBlocks": [],
"originalContent": "<h2 class=\"has-accent-color has-text-color\">Text</h2>"
"originalContent": "<h2 class=\"has-text-color\" style=\"color:var(--wp--colors--accent)\">Text</h2>"
}
]