Skip to content

Commit

Permalink
Remove existing link color
Browse files Browse the repository at this point in the history
  • Loading branch information
@jorgefilipecosta
jorgefilipecosta committed May 5, 2021
1 parent 0343eda commit 3dd8409
Show file tree
Hide file tree
Showing 8 changed files with 23 additions and 181 deletions.
18 changes: 0 additions & 18 deletions lib/block-supports/colors.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,24 +99,6 @@ function gutenberg_apply_colors_support( $block_type, $block_attributes ) {
}
}

// Link Colors.
if ( $has_link_colors_support ) {
$has_link_color = isset( $block_attributes['style']['color']['link'] );
// Apply required class and style.
if ( $has_link_color ) {
$classes[] = 'has-link-color';
// If link is a named color.
if ( strpos( $block_attributes['style']['color']['link'], 'var:preset|color|' ) !== false ) {
// Get the name from the string and add proper styles.
$index_to_splice = strrpos( $block_attributes['style']['color']['link'], '|' ) + 1;
$link_color_name = substr( $block_attributes['style']['color']['link'], $index_to_splice );
$styles[] = sprintf( '--wp--style--color--link: var(--wp--preset--color--%s);', $link_color_name );
} else {
$styles[] = sprintf( '--wp--style--color--link: %s;', $block_attributes['style']['color']['link'] );
}
}
}

// Background colors.
if ( $has_background_colors_support ) {
$has_named_background_color = array_key_exists( 'backgroundColor', $block_attributes );
Expand Down
62 changes: 2 additions & 60 deletions lib/class-wp-theme-json.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,9 +199,6 @@ class WP_Theme_JSON {
* - 'value': path to the value in theme.json and block attributes.
*/
const PROPERTIES_METADATA = array(
'--wp--style--color--link' => array(
'value' => array( 'color', 'link' ),
),
'background' => array(
'value' => array( 'color', 'gradient' ),
),
Expand Down Expand Up @@ -828,7 +825,7 @@ private function get_css_variables( $nodes ) {
* @return string The new stylesheet.
*/
private function get_block_styles( $style_nodes, $setting_nodes ) {
$block_rules = self::ELEMENTS['link'] . '{color: var(--wp--style--color--link);}';
$block_rules = '';
foreach ( $style_nodes as $metadata ) {
if ( null === $metadata['selector'] ) {
continue;
Expand All @@ -837,53 +834,7 @@ private function get_block_styles( $style_nodes, $setting_nodes ) {
$node = _wp_array_get( $this->theme_json, $metadata['path'], array() );
$selector = $metadata['selector'];
$declarations = self::compute_style_properties( array(), $node );

$is_link_element = self::is_link_element( $metadata['selector'] );
if ( ! $is_link_element ) {
$block_rules .= self::to_ruleset( $selector, $declarations );
} else {
/*
* To be removed when the user provided styles for link color
* no longer use the --wp--style--link-color variable.
*
* We need to:
*
* 1. For the color property, output:
*
* $selector_without_the_link_element_selector {
* --wp--style--color--link: value
* }
*
* 2. For the rest of the properties:
*
* $selector {
* other-prop: value;
* other-prop: value;
* }
*
* The reason for 1 is that user styles are attached to the block wrapper.
* If 1 targets the a element is going to have higher specificity
* and will overwrite the user preferences.
*
* Once the user styles are updated to output an `a` element instead
* this can be removed.
*/
$declarations_color = array();
$declarations_other = array();
foreach ( $declarations as $declaration ) {
if ( 'color' === $declaration['name'] ) {
$declarations_color[] = array(
'name' => '--wp--style--color--link',
'value' => $declaration['value'],
);
} else {
$declarations_other[] = $declaration;
}
}

$block_rules .= self::to_ruleset( $selector, $declarations_other );
$block_rules .= self::to_ruleset( self::without_link_selector( $selector ), $declarations_color );
}
$block_rules .= self::to_ruleset( $selector, $declarations );
}

$preset_rules = '';
Expand Down Expand Up @@ -1222,15 +1173,6 @@ private static function remove_insecure_settings( $input ) {
private static function remove_insecure_styles( $input, $selector ) {
$output = array();
$declarations = self::compute_style_properties( array(), $input );
// To be removed once the user styles
// no longer use the --wp--style--color--link.
if ( self::is_link_element( $selector ) ) {
foreach ( $declarations as $index => $declaration ) {
if ( 'color' === $declaration['name'] ) {
$declarations[ $index ]['name'] = '--wp--style--color--link';
}
}
}

foreach ( $declarations as $declaration ) {
if ( self::is_safe_css_declaration( $declaration['name'], $declaration['value'] ) ) {
Expand Down
4 changes: 1 addition & 3 deletions lib/global-styles.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@ function gutenberg_experimental_global_styles_get_stylesheet( $tree, $type = 'al
*/
function gutenberg_experimental_global_styles_enqueue_assets() {
if (
! get_theme_support( 'experimental-link-color' ) && // link color support needs the presets CSS variables regardless of the presence of theme.json file.
! WP_Theme_JSON_Resolver::theme_has_support() ) {
return;
}
Expand Down Expand Up @@ -126,8 +125,7 @@ function_exists( 'gutenberg_is_edit_site_page' ) &&
$settings['__experimentalGlobalStylesUserEntityId'] = $user_cpt_id;
$settings['__experimentalGlobalStylesBaseStyles'] = $base_styles;
} elseif (
WP_Theme_JSON_Resolver::theme_has_support() ||
get_theme_support( 'experimental-link-color' ) // link color support needs the presets CSS variables regardless of the presence of theme.json file.
WP_Theme_JSON_Resolver::theme_has_support()
) {
// STEP 3 - ADD STYLES IF THEME HAS SUPPORT
//
Expand Down
5 changes: 0 additions & 5 deletions packages/blocks/src/api/constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,6 @@ export const DEPRECATED_ENTRY_KEYS = [
];

export const __EXPERIMENTAL_STYLE_PROPERTY = {
'--wp--style--color--link': {
valueGlobal: [ 'elements', 'link', 'color', 'text' ],
value: [ 'color', 'link' ],
support: [ 'color', 'link' ],
},
background: {
value: [ 'color', 'gradient' ],
support: [ 'color', 'gradients' ],
Expand Down
8 changes: 2 additions & 6 deletions packages/edit-site/src/components/editor/global-styles-provider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,9 +205,7 @@ export default function GlobalStylesProvider( { children, baseStyles } ) {
setContent( JSON.stringify( newContent ) );
},
getStyle: ( context, propertyName, origin = 'merged' ) => {
const propertyPath =
STYLE_PROPERTY[ propertyName ].valueGlobal ??
STYLE_PROPERTY[ propertyName ].value;
const propertyPath = STYLE_PROPERTY[ propertyName ].value;
const path =
context === ROOT_BLOCK_NAME
? propertyPath
Expand Down Expand Up @@ -237,9 +235,7 @@ export default function GlobalStylesProvider( { children, baseStyles } ) {
ROOT_BLOCK_NAME === context
? [ 'styles' ]
: [ 'styles', 'blocks', context ];
const propertyPath =
STYLE_PROPERTY[ propertyName ].valueGlobal ??
STYLE_PROPERTY[ propertyName ].value;
const propertyPath = STYLE_PROPERTY[ propertyName ].value;

let newStyles = get( newContent, path );
if ( ! newStyles ) {
Expand Down
75 changes: 4 additions & 71 deletions packages/edit-site/src/components/editor/global-styles-renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,8 +116,8 @@ function flattenTree( input = {}, prefix, token ) {
function getStylesDeclarations( blockStyles = {} ) {
return reduce(
STYLE_PROPERTY,
( declarations, { value, valueGlobal, properties }, key ) => {
const pathToValue = valueGlobal ?? value;
( declarations, { value, properties }, key ) => {
const pathToValue = value;
if ( !! properties ) {
properties.forEach( ( prop ) => {
if (
Expand Down Expand Up @@ -263,85 +263,18 @@ export const toCustomProperties = ( tree, blockSelectors ) => {
return ruleset;
};

const containsLinkElement = ( selector ) =>
selector.toLowerCase().includes( ELEMENTS.link );
const withoutLinkSelector = ( selector ) => {
const newSelector = selector
.split( ',' )
.map( ( individualSelector ) =>
individualSelector.replace( ELEMENTS.link, '' ).trim()
)
.join( ',' );

if ( '' === newSelector ) {
return ROOT_BLOCK_SELECTOR;
}

return newSelector;
};

export const toStyles = ( tree, blockSelectors ) => {
const nodesWithStyles = getNodesWithStyles( tree, blockSelectors );
const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );

let ruleset = `${ ELEMENTS.link }{color: var(--wp--style--color--link);}`;
let ruleset = '';
nodesWithStyles.forEach( ( { selector, styles } ) => {
const declarations = getStylesDeclarations( styles );

if ( declarations.length === 0 ) {
return;
}

if ( ! containsLinkElement( selector ) ) {
ruleset = ruleset + `${ selector }{${ declarations.join( ';' ) };}`;
} else {
// To be removed when the user provided styles for link color
// no longer use the --wp--style--link-color variable.
//
// We need to:
//
// 1. For the color property, output:
//
// $selector_without_the_link_element_selector {
// --wp--style--color--link: value
// }
//
// 2. For the rest of the properties:
//
// $selector {
// other-prop: value;
// other-prop: value;
// }
//
// The reason for 1 is that user styles are attached to the block wrapper.
// If 1 targets the a element is going to have higher specificity
// and will overwrite the user preferences.
//
// Once the user styles are updated to output an `a` element instead
// this can be removed.

const declarationsColor = declarations.filter(
( declaration ) => declaration.split( ':' )[ 0 ] === 'color'
);
const declarationsOther = declarations.filter(
( declaration ) => declaration.split( ':' )[ 0 ] !== 'color'
);

if ( declarationsOther.length > 0 ) {
ruleset =
ruleset +
`${ selector }{${ declarationsOther.join( ';' ) };}`;
}

if ( declarationsColor.length === 1 ) {
const value = declarationsColor[ 0 ].split( ':' )[ 1 ];
ruleset =
ruleset +
`${ withoutLinkSelector(
selector
) }{--wp--style--color--link:${ value };}`;
}
}
ruleset = ruleset + `${ selector }{${ declarations.join( ';' ) };}`;
} );

nodesWithSettings.forEach( ( { selector, presets } ) => {
Expand Down
6 changes: 1 addition & 5 deletions packages/edit-site/src/components/editor/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { store as editSiteStore } from '../../store';
export const ROOT_BLOCK_NAME = 'root';
export const ROOT_BLOCK_SELECTOR = 'body';
export const ROOT_BLOCK_SUPPORTS = [
'--wp--style--color--link',
//'--wp--style--color--link',
'background',
'backgroundColor',
'color',
Expand Down Expand Up @@ -81,7 +81,6 @@ export const PRESET_METADATA = [

const STYLE_PROPERTIES_TO_CSS_VAR_INFIX = {
backgroundColor: 'color',
LINK_COLOR: 'color',
background: 'gradient',
};

Expand All @@ -100,9 +99,6 @@ function getPresetMetadataFromStyleProperty( styleProperty ) {
return getPresetMetadataFromStyleProperty.MAP[ styleProperty ];
}

export const LINK_COLOR = '--wp--style--color--link';
export const LINK_COLOR_DECLARATION = `a { color: var(${ LINK_COLOR }, #00e); }`;

export function useEditorFeature( featurePath, blockName = '' ) {
const settings = useSelect( ( select ) => {
return select( editSiteStore ).getSettings();
Expand Down
26 changes: 13 additions & 13 deletions packages/edit-site/src/components/sidebar/color-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@ import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import { LINK_COLOR, useEditorFeature } from '../editor/utils';
import { useEditorFeature } from '../editor/utils';
import ColorPalettePanel from './color-palette-panel';

export function useHasColorPanel( { supports } ) {
return (
supports.includes( 'color' ) ||
supports.includes( 'backgroundColor' ) ||
supports.includes( 'background' ) ||
supports.includes( LINK_COLOR )
supports.includes( 'background' )
//supports.includes( LINK_COLOR )
);
}

Expand Down Expand Up @@ -87,16 +87,16 @@ export default function ColorPanel( {
} );
}

if ( supports.includes( LINK_COLOR ) ) {
const color = getStyle( name, LINK_COLOR );
const userColor = getStyle( name, LINK_COLOR, 'user' );
settings.push( {
colorValue: color,
onColorChange: ( value ) => setStyle( name, LINK_COLOR, value ),
label: __( 'Link color' ),
clearable: color === userColor,
} );
}
//if ( supports.includes( LINK_COLOR ) ) {
// const color = getStyle( name, LINK_COLOR );
// const userColor = getStyle( name, LINK_COLOR, 'user' );
// settings.push( {
// colorValue: color,
// onColorChange: ( value ) => setStyle( name, LINK_COLOR, value ),
// label: __( 'Link color' ),
// clearable: color === userColor,
// } );
//}
return (
<PanelColorGradientSettings
title={ __( 'Color' ) }
Expand Down

0 comments on commit 3dd8409

Please sign in to comment.