Add editor-gradient-presets to get_theme_support (#17841)

* Add editor-gradient-presets to get_theme_support

* Add docs.

* Fixed docs

* Document slug property; Make the API experimental.

docs/designers-developers/developers/themes/theme-support.md

@@ -134,6 +134,46 @@ 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 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(
+	'__experimental-editor-gradient-presets',
+	array(
+		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). `slug` is a unique identifier for the gradient and is used to generate the CSS classes used by the block editor.
+
+
 ### 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:

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( '__experimental-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' );

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,