Document slug property; Make the API experimental.

WordPress · Nov 1, 2019 · 49fdd89 · 49fdd89
1 parent 104247a
commit 49fdd89
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 23 deletions.
diff --git 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
@@ -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;
 	}