Skip to content

Commit

Permalink
Do not show core colors in the UI controls
Browse files Browse the repository at this point in the history
  • Loading branch information
@oandregal
oandregal committed May 14, 2021
1 parent b683c92 commit a03cfc2
Show file tree
Hide file tree
Showing 3 changed files with 82 additions and 27 deletions.
72 changes: 48 additions & 24 deletions lib/experimental-default-theme.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,124 +6,148 @@
{
"name": "Black",
"slug": "black",
"color": "#000000"
"color": "#000000",
"origin": "core"
},
{
"name": "Cyan bluish gray",
"slug": "cyan-bluish-gray",
"color": "#abb8c3"
"color": "#abb8c3",
"origin": "core"
},
{
"name": "White",
"slug": "white",
"color": "#ffffff"
"color": "#ffffff",
"origin": "core"
},
{
"name": "Pale pink",
"slug": "pale-pink",
"color": "#f78da7"
"color": "#f78da7",
"origin": "core"
},
{
"name": "Vivid red",
"slug": "vivid-red",
"color": "#cf2e2e"
"color": "#cf2e2e",
"origin": "core"
},
{
"name": "Luminous vivid orange",
"slug": "luminous-vivid-orange",
"color": "#ff6900"
"color": "#ff6900",
"origin": "core"
},
{
"name": "Luminous vivid amber",
"slug": "luminous-vivid-amber",
"color": "#fcb900"
"color": "#fcb900",
"origin": "core"
},
{
"name": "Light green cyan",
"slug": "light-green-cyan",
"color": "#7bdcb5"
"color": "#7bdcb5",
"origin": "core"
},
{
"name": "Vivid green cyan",
"slug": "vivid-green-cyan",
"color": "#00d084"
"color": "#00d084",
"origin": "core"
},
{
"name": "Pale cyan blue",
"slug": "pale-cyan-blue",
"color": "#8ed1fc"
"color": "#8ed1fc",
"origin": "core"
},
{
"name": "Vivid cyan blue",
"slug": "vivid-cyan-blue",
"color": "#0693e3"
"color": "#0693e3",
"origin": "core"
},
{
"name": "Vivid purple",
"slug": "vivid-purple",
"color": "#9b51e0"
"color": "#9b51e0",
"origin": "core"
}
],
"gradients": [
{
"name": "Vivid cyan blue to vivid purple",
"gradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)",
"slug": "vivid-cyan-blue-to-vivid-purple"
"slug": "vivid-cyan-blue-to-vivid-purple",
"origin": "core"
},
{
"name": "Light green cyan to vivid green cyan",
"gradient": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)",
"slug": "light-green-cyan-to-vivid-green-cyan"
"slug": "light-green-cyan-to-vivid-green-cyan",
"origin": "core"
},
{
"name": "Luminous vivid amber to luminous vivid orange",
"gradient": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)",
"slug": "luminous-vivid-amber-to-luminous-vivid-orange"
"slug": "luminous-vivid-amber-to-luminous-vivid-orange",
"origin": "core"
},
{
"name": "Luminous vivid orange to vivid red",
"gradient": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)",
"slug": "luminous-vivid-orange-to-vivid-red"
"slug": "luminous-vivid-orange-to-vivid-red",
"origin": "core"
},
{
"name": "Very light gray to cyan bluish gray",
"gradient": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)",
"slug": "very-light-gray-to-cyan-bluish-gray"
"slug": "very-light-gray-to-cyan-bluish-gray",
"origin": "core"
},
{
"name": "Cool to warm spectrum",
"gradient": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)",
"slug": "cool-to-warm-spectrum"
"slug": "cool-to-warm-spectrum",
"origin": "core"
},
{
"name": "Blush light purple",
"gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)",
"slug": "blush-light-purple"
"slug": "blush-light-purple",
"origin": "core"
},
{
"name": "Blush bordeaux",
"gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)",
"slug": "blush-bordeaux"
"slug": "blush-bordeaux",
"origin": "core"
},
{
"name": "Luminous dusk",
"gradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)",
"slug": "luminous-dusk"
"slug": "luminous-dusk",
"origin": "core"
},
{
"name": "Pale ocean",
"gradient": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)",
"slug": "pale-ocean"
"slug": "pale-ocean",
"origin": "core"
},
{
"name": "Electric grass",
"gradient": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)",
"slug": "electric-grass"
"slug": "electric-grass",
"origin": "core"
},
{
"name": "Midnight",
"gradient": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)",
"slug": "midnight"
"slug": "midnight",
"origin": "core"
}
],
"duotone": [
Expand Down
22 changes: 20 additions & 2 deletions packages/block-editor/src/components/use-setting/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,18 @@ const deprecatedFlags = {
'spacing.customPadding': ( settings ) => settings.enableCustomSpacing,
};

const filterColorsFromCoreOrigin = ( path, colors ) => {
if ( path !== 'color.palette' && path !== 'color.gradients' ) {
return colors;
}

if ( ! Array.isArray( colors ) ) {
return colors;
}

return colors.filter( ( color ) => color?.origin !== 'core' );
};

/**
* Hook that retrieves the editor setting.
* It works with nested objects using by finding the value at path.
Expand Down Expand Up @@ -76,15 +88,21 @@ export default function useSetting( path ) {
const experimentalFeaturesResult =
get( settings, blockPath ) ?? get( settings, defaultsPath );
if ( experimentalFeaturesResult !== undefined ) {
return experimentalFeaturesResult;
return filterColorsFromCoreOrigin(
path,
experimentalFeaturesResult
);
}

// 2 - Use deprecated settings, otherwise.
const deprecatedSettingsValue = deprecatedFlags[ path ]
? deprecatedFlags[ path ]( settings )
: undefined;
if ( deprecatedSettingsValue !== undefined ) {
return deprecatedSettingsValue;
return filterColorsFromCoreOrigin(
path,
deprecatedSettingsValue
);
}

// 3 - Fall back for typography.dropCap:
Expand Down
15 changes: 14 additions & 1 deletion packages/edit-site/src/components/editor/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,13 +103,26 @@ function getPresetMetadataFromStyleProperty( styleProperty ) {
export const LINK_COLOR = '--wp--style--color--link';
export const LINK_COLOR_DECLARATION = `a { color: var(${ LINK_COLOR }, #00e); }`;

const filterColorsFromCoreOrigin = ( path, colors ) => {
if ( path !== 'color.palette' && path !== 'color.gradients' ) {
return colors;
}

if ( ! Array.isArray( colors ) ) {
return colors;
}

return colors.filter( ( color ) => color?.origin !== 'core' );
};

export function useSetting( path, blockName = '' ) {
const settings = useSelect( ( select ) => {
return select( editSiteStore ).getSettings();
} );
const topLevelPath = `__experimentalFeatures.${ path }`;
const blockPath = `__experimentalFeatures.blocks.${ blockName }.${ path }`;
return get( settings, blockPath ) ?? get( settings, topLevelPath );
const setting = get( settings, blockPath ) ?? get( settings, topLevelPath );
return filterColorsFromCoreOrigin( path, setting );
}

export function getPresetVariable( styles, context, propertyName, value ) {
Expand Down

0 comments on commit a03cfc2

Please sign in to comment.