From 1e5c5277bf86b69ba564839dabc7c9b8ac804ab4 Mon Sep 17 00:00:00 2001 From: Jorge Date: Thu, 17 Sep 2020 12:01:58 +0100 Subject: [PATCH] Update: Key existing preset shape on theme.json --- .../developers/themes/theme-json.md | 12 ++-- lib/experimental-default-theme.json | 58 +++++++++---------- lib/global-styles.php | 45 ++++++-------- .../editor/global-styles-renderer.js | 10 ++-- .../edit-site/src/components/editor/utils.js | 6 +- 5 files changed, 61 insertions(+), 70 deletions(-) diff --git a/docs/designers-developers/developers/themes/theme-json.md b/docs/designers-developers/developers/themes/theme-json.md index 7752347459b6d0..6c12c93d99a737 100644 --- a/docs/designers-developers/developers/themes/theme-json.md +++ b/docs/designers-developers/developers/themes/theme-json.md @@ -140,21 +140,21 @@ 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%)" }, ] }, @@ -162,11 +162,11 @@ For example, for this input: "fontSizes": [ { "slug": "normal", - "value": 16 + "size": 16 }, { "slug": "big", - "value": 32 + "size": 32 } ] } diff --git a/lib/experimental-default-theme.json b/lib/experimental-default-theme.json index cd084378512d12..1b55fd074d4619 100644 --- a/lib/experimental-default-theme.json +++ b/lib/experimental-default-theme.json @@ -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, @@ -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 } ] }, diff --git a/lib/global-styles.php b/lib/global-styles.php index f8aff99796b731..4d2c2bb9f4ba23 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -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' ); @@ -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' ); @@ -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; @@ -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', + ), ); } @@ -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'] ]; } } } diff --git a/packages/edit-site/src/components/editor/global-styles-renderer.js b/packages/edit-site/src/components/editor/global-styles-renderer.js index 9b53ad28861e1f..ec4b6d2338beae 100644 --- a/packages/edit-site/src/components/editor/global-styles-renderer.js +++ b/packages/edit-site/src/components/editor/global-styles-renderer.js @@ -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; diff --git a/packages/edit-site/src/components/editor/utils.js b/packages/edit-site/src/components/editor/utils.js index f3c45f03b94478..2655b5f86af480 100644 --- a/packages/edit-site/src/components/editor/utils.js +++ b/packages/edit-site/src/components/editor/utils.js @@ -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); }`;