Skip to content

Commit

Permalink
Update: Key existing preset shape on theme.json
Browse files Browse the repository at this point in the history
  • Loading branch information
@jorgefilipecosta
jorgefilipecosta committed Sep 17, 2020
1 parent 50955c1 commit 1e5c527
Show file tree
Hide file tree
Showing 5 changed files with 61 additions and 70 deletions.
12 changes: 6 additions & 6 deletions docs/designers-developers/developers/themes/theme-json.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,33 +140,33 @@ For example, for this input:
"palette": [
{
"slug": "strong-magenta",
"value": "#a156b4"
"color": "#a156b4"
},
{
"slug": "very-dark-grey",
"value": "rgb(131, 12, 8)"
"color": "rgb(131, 12, 8)"
}
],
"gradients": [
{
"slug": "blush-bordeaux",
"value": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)"
"gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)"
},
{
"slug": "blush-light-purple",
"value": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)"
"gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)"
},
]
},
"typography": {
"fontSizes": [
{
"slug": "normal",
"value": 16
"size": 16
},
{
"slug": "big",
"value": 32
"size": 32
}
]
}
Expand Down
58 changes: 29 additions & 29 deletions lib/experimental-default-theme.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,101 +5,101 @@
"palette": [
{
"slug": "black",
"value": "#000000"
"color": "#000000"
},
{
"slug": "cyan-bluish-gray",
"value": "#abb8c3"
"color": "#abb8c3"
},
{
"slug": "light-green-cyan",
"value": "#7bdcb5"
"color": "#7bdcb5"
},
{
"slug": "luminous-vivid-amber",
"value": "#fcb900"
"color": "#fcb900"
},
{
"slug": "luminous-vivid-orange",
"value": "#ff6900"
"color": "#ff6900"
},
{
"slug": "pale-cyan-blue",
"value": "#8ed1fc"
"color": "#8ed1fc"
},
{
"slug": "pale-pink",
"value": "#f78da7"
"color": "#f78da7"
},
{
"slug": "vivid-cyan-blue",
"value": "#0693e3"
"color": "#0693e3"
},
{
"slug": "vivid-green-cyan",
"value": "#00d084"
"color": "#00d084"
},
{
"slug": "vivid-purple",
"value": "#9b51e0"
"color": "#9b51e0"
},
{
"slug": "vivid-red",
"value": "#cf2e2e"
"color": "#cf2e2e"
},
{
"slug": "white",
"value": "#ffffff"
"color": "#ffffff"
}
],
"gradients": [
{
"slug": "blush-bordeaux",
"value": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)"
"gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)"
},
{
"slug": "blush-light-purple",
"value": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)"
"gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)"
},
{
"slug": "cool-to-warm-spectrum",
"value": "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%)"
"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": "electric-grass",
"value": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)"
"gradient": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)"
},
{
"slug": "light-green-cyan-to-vivid-green-cyan",
"value": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)"
"gradient": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)"
},
{
"slug": "luminous-dusk",
"value": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)"
"gradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)"
},
{
"slug": "luminous-vivid-amber-to-luminous-vivid-orange",
"value": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)"
"gradient": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)"
},
{
"slug": "luminous-vivid-orange-to-vivid-red",
"value": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)"
"gradient": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)"
},
{
"slug": "midnight",
"value": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)"
"gradient": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)"
},
{
"slug": "pale-ocean",
"value": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)"
"gradient": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)"
},
{
"slug": "very-light-gray-to-cyan-bluish-gray",
"value": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)"
"gradient": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)"
},
{
"slug": "vivid-cyan-blue-to-vivid-purple",
"value": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)"
"gradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)"
}
],
"custom": true,
Expand All @@ -113,23 +113,23 @@
"fontSizes": [
{
"slug": "small",
"value": 13
"size": 13
},
{
"slug": "normal",
"value": 16
"size": 16
},
{
"slug": "medium",
"value": 20
"size": 20
},
{
"slug": "large",
"value": 36
"size": 36
},
{
"slug": "huge",
"value": 48
"size": 48
}
]
},
Expand Down
45 changes: 18 additions & 27 deletions lib/global-styles.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -253,13 +253,7 @@ function gutenberg_experimental_global_styles_get_theme_support_settings() {
$theme_settings['global']['settings']['color'] = array();
}
$theme_settings['global']['settings']['color']['palette'] = array();
foreach ( $theme_colors[0] as $color ) {
$theme_settings['global']['settings']['color']['palette'][] = array(
'name' => $color['name'],
'slug' => $color['slug'],
'value' => $color['color'],
);
}
$theme_settings['global']['settings']['color']['palette'] = $theme_colors[0];
}

$theme_gradients = get_theme_support( 'editor-gradient-presets' );
Expand All @@ -268,13 +262,7 @@ function gutenberg_experimental_global_styles_get_theme_support_settings() {
$theme_settings['global']['settings']['color'] = array();
}
$theme_settings['global']['settings']['color']['gradients'] = array();
foreach ( $theme_gradients[0] as $gradient ) {
$theme_settings['global']['settings']['color']['gradients'][] = array(
'name' => $gradient['name'],
'slug' => $gradient['slug'],
'value' => $gradient['gradient'],
);
}
$theme_settings['global']['settings']['color']['gradients'] = $theme_gradients[0];
}

$theme_font_sizes = get_theme_support( 'editor-font-sizes' );
Expand All @@ -283,13 +271,7 @@ function gutenberg_experimental_global_styles_get_theme_support_settings() {
$theme_settings['global']['settings']['typography'] = array();
}
$theme_settings['global']['settings']['typography']['fontSizes'] = array();
foreach ( $theme_font_sizes[0] as $font_size ) {
$theme_settings['global']['settings']['typography']['fontSizes'][] = array(
'name' => $font_size['name'],
'slug' => $font_size['slug'],
'value' => $font_size['size'],
);
}
$theme_settings['global']['settings']['typography']['fontSizes'] = $theme_font_sizes[0];
}

return $theme_settings;
Expand Down Expand Up @@ -388,9 +370,18 @@ function gutenberg_experimental_global_styles_get_support_keys() {
*/
function gutenberg_experimental_global_styles_get_presets_structure() {
return array(
'color' => array( 'color', 'palette' ),
'gradient' => array( 'color', 'gradients' ),
'fontSize' => array( 'typography', 'fontSizes' ),
'color' => array(
'path' => array( 'color', 'palette' ),
'key' => 'color',
),
'gradient' => array(
'path' => array( 'color', 'gradients' ),
'key' => 'gradient',
),
'fontSize' => array(
'path' => array( 'typography', 'fontSizes' ),
'key' => 'size',
),
);
}

Expand Down Expand Up @@ -550,13 +541,13 @@ function gutenberg_experimental_global_styles_get_stylesheet( $tree ) {
$computed_presets = array();

// Extract the relevant preset info before converting them to CSS Custom Properties.
foreach ( $presets_structure as $token => $path ) {
$block_preset = gutenberg_experimental_get( $tree[ $block_name ]['settings'], $path );
foreach ( $presets_structure as $token => $preset_meta ) {
$block_preset = gutenberg_experimental_get( $tree[ $block_name ]['settings'], $preset_meta['path'] );
if ( ! empty( $block_preset ) ) {
$css_var_token = gutenberg_experimental_global_styles_get_css_property( $token );
$computed_presets[ $css_var_token ] = array();
foreach ( $block_preset as $preset_value ) {
$computed_presets[ $css_var_token ][ $preset_value['slug'] ] = $preset_value['value'];
$computed_presets[ $css_var_token ][ $preset_value['slug'] ] = $preset_value[ $preset_meta['key'] ];
}
}
}
Expand Down
10 changes: 5 additions & 5 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 @@ -85,13 +85,13 @@ export default ( blockData, baseTree, userTree ) => {
const getBlockPresetsDeclarations = ( blockPresets ) => {
return reduce(
PRESET_CATEGORIES,
( declarations, path, category ) => {
( declarations, { path, key }, category ) => {
const preset = get( blockPresets, path, [] );
preset.forEach( ( { slug, value } ) => {
preset.forEach( ( value ) => {
declarations.push(
`--wp--preset--${ kebabCase(
category
) }--${ slug }: ${ value }`
`--wp--preset--${ kebabCase( category ) }--${
value.slug
}: ${ value[ key ] }`
);
} );
return declarations;
Expand Down
6 changes: 3 additions & 3 deletions packages/edit-site/src/components/editor/utils.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
/* Supporting data */
export const GLOBAL_CONTEXT = 'global';
export const PRESET_CATEGORIES = {
color: [ 'color', 'palette' ],
gradient: [ 'color', 'gradients' ],
fontSize: [ 'typography', 'fontSizes' ],
color: { path: [ 'color', 'palette' ], key: 'color' },
gradient: { path: [ 'color', 'gradients' ], key: 'gradient' },
fontSize: { path: [ 'typography', 'fontSizes' ], key: 'size' },
};
export const LINK_COLOR = '--wp--style--color--link';
export const LINK_COLOR_DECLARATION = `a { color: var(${ LINK_COLOR }, #00e); }`;
Expand Down

0 comments on commit 1e5c527

Please sign in to comment.