From 22e19ee32afae70ea61f3fdc3320c8b79c967193 Mon Sep 17 00:00:00 2001 From: Jonny Harris Date: Tue, 8 Oct 2019 11:30:49 +0100 Subject: [PATCH 1/4] Add editor-gradient-presets to get_theme_support --- lib/experiments-page.php | 6 ++++++ packages/editor/src/components/provider/index.js | 1 + 2 files changed, 7 insertions(+) diff --git a/lib/experiments-page.php b/lib/experiments-page.php index 765e0cc5883d9..bc2507287f5af 100644 --- a/lib/experiments-page.php +++ b/lib/experiments-page.php @@ -137,6 +137,12 @@ function gutenberg_experiments_editor_settings( $settings ) { '__experimentalEnableFullSiteEditing' => gutenberg_is_experiment_enabled( 'gutenberg-full-site-editing' ), ); + + $gradient_presets = current( (array) get_theme_support( 'editor-gradient-presets' ) ); + if ( false !== $gradient_presets ) { + $experiments_settings['gradients'] = $gradient_presets; + } + return array_merge( $settings, $experiments_settings ); } add_filter( 'block_editor_settings', 'gutenberg_experiments_editor_settings' ); diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 37eb46ff235b5..fa39d3871c771 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -108,6 +108,7 @@ class EditorProvider extends Component { '__experimentalBlockDirectory', '__experimentalEnableFullSiteEditing', 'showInserterHelpPanel', + 'gradients', ] ), mediaUpload: hasUploadPermissions ? mediaUpload : undefined, __experimentalReusableBlocks: reusableBlocks, From c3dbc6d776d6b06a00c1f20c022bf8468ec1e2b9 Mon Sep 17 00:00:00 2001 From: Jonny Harris Date: Tue, 8 Oct 2019 13:43:32 +0100 Subject: [PATCH 2/4] Add docs. --- .../developers/themes/theme-support.md | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/docs/designers-developers/developers/themes/theme-support.md b/docs/designers-developers/developers/themes/theme-support.md index 210072f5d2cf0..664d4c2306faf 100644 --- a/docs/designers-developers/developers/themes/theme-support.md +++ b/docs/designers-developers/developers/themes/theme-support.md @@ -134,6 +134,38 @@ Themes are responsible for creating the classes that apply the colors in differe The class name is built appending 'has-', followed by the class name _using_ kebab case and ending with the context name. +### Block Gradient Presents + +Different blocks have the possibility of customizing gradients. The block editor provides a default gradients, but a theme can overwrite it and provide its own: + +```php +add_theme_support( 'editor-gradient-presets', array( + array( + 'name' => __( 'strong magenta', 'themeLangDomain' ), + 'slug' => 'strong-magenta', + 'color' => '#a156b4', + ), + array( + 'name' => __( 'light grayish magenta', 'themeLangDomain' ), + 'slug' => 'light-grayish-magenta', + 'color' => '#d0a5db', + ), + array( + 'name' => __( 'very light gray', 'themeLangDomain' ), + 'slug' => 'very-light-gray', + 'color' => '#eee', + ), + array( + 'name' => __( 'very dark gray', 'themeLangDomain' ), + 'slug' => 'very-dark-gray', + 'color' => '#444', + ), +) ); +``` + +`name` is a human-readable label (demonstrated above) that appears in the tooltip and provides a meaningful description of the color to users. It is especially important for those who rely on screen readers or would otherwise have difficulty perceiving the color. `slug` is a unique identifier for the color and is used to generate the CSS classes used by the block editor color palette. `color` is the hexadecimal code to specify the color. + + ### Block Font Sizes: Blocks may allow the user to configure the font sizes they use, e.g., the paragraph block. The block provides a default set of font sizes, but a theme can overwrite it and provide its own: From 104247a05a7107a9c9a4cabe5d634fcee3246424 Mon Sep 17 00:00:00 2001 From: Jonny Harris Date: Tue, 8 Oct 2019 13:46:40 +0100 Subject: [PATCH 3/4] Fixed docs --- .../developers/themes/theme-support.md | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/docs/designers-developers/developers/themes/theme-support.md b/docs/designers-developers/developers/themes/theme-support.md index 664d4c2306faf..9db310995321f 100644 --- a/docs/designers-developers/developers/themes/theme-support.md +++ b/docs/designers-developers/developers/themes/theme-support.md @@ -136,34 +136,34 @@ The class name is built appending 'has-', followed by the class name _using_ keb ### Block Gradient Presents -Different blocks have the possibility of customizing gradients. The block editor provides a default gradients, but a theme can overwrite it and provide its own: +Different blocks have the possibility of selecting from a list of predined of gradients. The block editor provides a default gradient presets, but a theme can overwrite them and provide its own: ```php add_theme_support( 'editor-gradient-presets', array( array( - 'name' => __( 'strong magenta', 'themeLangDomain' ), - 'slug' => 'strong-magenta', - 'color' => '#a156b4', + 'name' => __( 'Vivid cyan blue to vivid purple', 'themeLangDomain' ), + 'gradient' => 'linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%)', ), array( - 'name' => __( 'light grayish magenta', 'themeLangDomain' ), - 'slug' => 'light-grayish-magenta', - 'color' => '#d0a5db', + 'name' => __( 'Vivid green cyan to vivid cyan blue', 'themeLangDomain' ), + 'gradient' => 'linear-gradient(135deg, rgba(0, 208, 132, 1) 0%, rgba(6, 147, 227, 1) 100%)', ), array( - 'name' => __( 'very light gray', 'themeLangDomain' ), - 'slug' => 'very-light-gray', - 'color' => '#eee', + 'name' => __( 'Light green cyan to vivid green cyan', 'themeLangDomain' ), + 'gradient' => 'linear-gradient(135deg, rgb(122, 220, 180) 0%, rgb(0, 208, 130) 100%)', ), array( - 'name' => __( 'very dark gray', 'themeLangDomain' ), - 'slug' => 'very-dark-gray', - 'color' => '#444', + 'name' => __( 'Luminous vivid amber to luminous vivid orange', 'themeLangDomain' ), + 'gradient' => 'linear-gradient(135deg, rgba(252, 185, 0, 1) 0%, rgba(255, 105, 0, 1) 100%)', + ), + array( + 'name' => __( 'Luminous vivid orange to vivid red', 'themeLangDomain' ), + 'gradient' => 'linear-gradient(135deg, rgba(255, 105, 0, 1) 0%, rgb(207, 46, 46) 100%)', ), ) ); ``` -`name` is a human-readable label (demonstrated above) that appears in the tooltip and provides a meaningful description of the color to users. It is especially important for those who rely on screen readers or would otherwise have difficulty perceiving the color. `slug` is a unique identifier for the color and is used to generate the CSS classes used by the block editor color palette. `color` is the hexadecimal code to specify the color. +`name` is a human-readable label (demonstrated above) that appears in the tooltip and provides a meaningful description of the gradient to users. It is especially important for those who rely on screen readers or would otherwise have difficulty perceiving the color. `gradient` is a CSS value of a gradient applied to a background-image of the block. Details of valid gradient types can be found in the [mozilla documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients). ### Block Font Sizes: From 49fdd893cf889d00d03127bec547523a030e2b68 Mon Sep 17 00:00:00 2001 From: Jorge Date: Fri, 1 Nov 2019 19:31:54 +0000 Subject: [PATCH 4/4] Document slug property; Make the API experimental. --- .../developers/themes/theme-support.md | 52 +++++++++++-------- lib/experiments-page.php | 2 +- 2 files changed, 31 insertions(+), 23 deletions(-) diff --git a/docs/designers-developers/developers/themes/theme-support.md b/docs/designers-developers/developers/themes/theme-support.md index 9db310995321f..62d650eb5aa47 100644 --- a/docs/designers-developers/developers/themes/theme-support.md +++ b/docs/designers-developers/developers/themes/theme-support.md @@ -139,31 +139,39 @@ The class name is built appending 'has-', followed by the class name _using_ keb Different blocks have the possibility of selecting from a list of predined of gradients. The block editor provides a default gradient presets, but a theme can overwrite them and provide its own: ```php -add_theme_support( 'editor-gradient-presets', array( +add_theme_support( + '__experimental-editor-gradient-presets', array( - 'name' => __( 'Vivid cyan blue to vivid purple', 'themeLangDomain' ), - 'gradient' => 'linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%)', - ), - array( - 'name' => __( 'Vivid green cyan to vivid cyan blue', 'themeLangDomain' ), - 'gradient' => 'linear-gradient(135deg, rgba(0, 208, 132, 1) 0%, rgba(6, 147, 227, 1) 100%)', - ), - array( - 'name' => __( 'Light green cyan to vivid green cyan', 'themeLangDomain' ), - 'gradient' => 'linear-gradient(135deg, rgb(122, 220, 180) 0%, rgb(0, 208, 130) 100%)', - ), - array( - 'name' => __( 'Luminous vivid amber to luminous vivid orange', 'themeLangDomain' ), - 'gradient' => 'linear-gradient(135deg, rgba(252, 185, 0, 1) 0%, rgba(255, 105, 0, 1) 100%)', - ), - array( - 'name' => __( 'Luminous vivid orange to vivid red', 'themeLangDomain' ), - 'gradient' => 'linear-gradient(135deg, rgba(255, 105, 0, 1) 0%, rgb(207, 46, 46) 100%)', - ), -) ); + array( + 'name' => __( 'Vivid cyan blue to vivid purple', 'themeLangDomain' ), + 'gradient' => 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)', + 'slug' => 'vivid-cyan-blue-to-vivid-purple' + ), + array( + 'name' => __( 'Vivid green cyan to vivid cyan blue', 'themeLangDomain' ), + 'gradient' => 'linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)', + 'slug' => 'vivid-green-cyan-to-vivid-cyan-blue', + ), + array( + 'name' => __( 'Light green cyan to vivid green cyan', 'themeLangDomain' ), + 'gradient' => 'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)', + 'slug' => 'light-green-cyan-to-vivid-green-cyan', + ), + array( + 'name' => __( 'Luminous vivid amber to luminous vivid orange', 'themeLangDomain' ), + 'gradient' => 'linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)', + 'slug' => 'luminous-vivid-amber-to-luminous-vivid-orange', + ), + array( + 'name' => __( 'Luminous vivid orange to vivid red', 'themeLangDomain' ), + 'gradient' => 'linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)', + 'slug' => 'luminous-vivid-orange-to-vivid-red', + ), + ) +); ``` -`name` is a human-readable label (demonstrated above) that appears in the tooltip and provides a meaningful description of the gradient to users. It is especially important for those who rely on screen readers or would otherwise have difficulty perceiving the color. `gradient` is a CSS value of a gradient applied to a background-image of the block. Details of valid gradient types can be found in the [mozilla documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients). +`name` is a human-readable label (demonstrated above) that appears in the tooltip and provides a meaningful description of the gradient to users. It is especially important for those who rely on screen readers or would otherwise have difficulty perceiving the color. `gradient` is a CSS value of a gradient applied to a background-image of the block. Details of valid gradient types can be found in the [mozilla documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients). `slug` is a unique identifier for the gradient and is used to generate the CSS classes used by the block editor. ### Block Font Sizes: diff --git a/lib/experiments-page.php b/lib/experiments-page.php index bc2507287f5af..f88fcca5c1611 100644 --- a/lib/experiments-page.php +++ b/lib/experiments-page.php @@ -138,7 +138,7 @@ function gutenberg_experiments_editor_settings( $settings ) { ); - $gradient_presets = current( (array) get_theme_support( 'editor-gradient-presets' ) ); + $gradient_presets = current( (array) get_theme_support( '__experimental-editor-gradient-presets' ) ); if ( false !== $gradient_presets ) { $experiments_settings['gradients'] = $gradient_presets; }