Add a wider range of presets

This commit changes a few things. It: - Removes all duplicate presets and leaves only top left to bottom right gradients. As presets, these are arguably more dynamic when using them, compared to vertical or horizontal. - It adds a range of gradients built using the stock Gutenberg color palette colors. - It adds a couple of additional gradients using new colors. - Removes the transparent gradients for now, as they aren't useful yet on the button. We can add back later on. Will elaborate in a comment.
WordPress · Sep 25, 2019 · 39ba758 · 39ba758
1 parent 077476d
commit 39ba758
Showing 1 changed file with 45 additions and 28 deletions.
diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js
@@ -154,60 +154,77 @@ export const SETTINGS_DEFAULTS = {
 	__experimentalBlockDirectory: false,
 	gradients: [
 		{
-			name: __( 'Pale Pink to Vivid Red Left to Right' ),
-			gradient: 'linear-gradient(90deg, rgba(247,141,167,1) 0%, rgba(207,46,46,1) 100%)',
+			name: __( 'Vivid cyan blue to vivid purple' ),
+			gradient: 'linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%)',
 		},
 		{
-			name: __( 'Pale Pink to Vivid Red Top to Bottom' ),
-			gradient: 'linear-gradient(180deg, rgba(247,141,167,1) 0%, rgba(207,46,46,1) 100%)',
+			name: __( 'Vivid green cyan to vivid cyan blue' ),
+			gradient: 'linear-gradient(135deg, rgba(0, 208, 132, 1) 0%, rgba(6, 147, 227, 1) 100%)',
 		},
 		{
-			name: __( 'Pale cyan blue to Vivid cyan blue Left to Right' ),
-			gradient: 'linear-gradient(90deg, rgba(142, 209, 252, 1) 0%, rgba(6, 147, 227 , 1) 100%)',
+			name: __( 'Light green cyan to vivid green cyan' ),
+			gradient: 'linear-gradient(135deg, rgb(122, 220, 180) 0%, rgb(0, 208, 130) 100%)',
 		},
 		{
-			name: __( 'Pale cyan blue to Vivid cyan blue Top to Bottom' ),
-			gradient: 'linear-gradient(180deg, rgba(142, 209, 252, 1) 0%, rgba(6, 147, 227 , 1) 100%)',
+			name: __( 'Luminous vivid amber to luminous vivid orange' ),
+			gradient: 'linear-gradient(135deg, rgba(252, 185, 0, 1) 0%, rgba(255, 105, 0, 1) 100%)',
 		},
 		{
-			name: __( 'Vivid Green Cyan to Vivid Cyan Blue Left to Right' ),
-			gradient: 'linear-gradient(90deg, rgba(0, 208, 132, 1) 0%, rgba(6, 147, 227, 1) 100%)',
+			name: __( 'Luminous vivid orange to vivid red' ),
+			gradient: 'linear-gradient(135deg, rgba(255, 105, 0, 1) 0%, rgb(207, 46, 46) 100%)',
 		},
 		{
-			name: __( 'Vivid Green Cyan to Vivid Cyan Blue Top to Bottom' ),
-			gradient: 'linear-gradient(180deg, rgba(0, 208, 132, 1) 0%, rgba(6, 147, 227, 1) 100%)',
+			name: __( 'Very light gray to cyan bluish gray' ),
+			gradient: 'linear-gradient(135deg, rgb(238, 238, 238) 0%, rgb(169, 184, 195)',
 		},
+		// The following use new, customized colors.
 		{
-			name: __( 'Luminous Vivid Amber to Luminous Vivid Orange Left to Right' ),
-			gradient: 'linear-gradient(90deg, rgba(252, 185, 0, 1) 0%, rgba(255, 105, 0, 1) 100%)',
+			name: __( 'Cool to warm spectrum' ),
+			gradient: 'linear-gradient(135deg, rgb(74, 234, 220), rgb(151, 120, 209), rgb(207, 42, 186), rgb(238, 44, 130), rgb(251, 105, 98),rgb(254, 248, 76)',
 		},
 		{
-			name: __( 'Luminous Vivid Amber to Luminous Vivid Orange Top to Bottom' ),
-			gradient: 'linear-gradient(180deg, rgba(252, 185, 0, 1) 0%, rgba(255, 105, 0, 1) 100%)',
+			name: __( 'Blush light purple' ),
+			gradient: 'linear-gradient(135deg, rgb(255, 206, 236), rgb(152, 150, 240)',
 		},
 		{
-			name: __( 'Black to White Left to Right' ),
-			gradient: 'linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 1) 100%)',
+			name: __( 'Blush bordeaux' ),
+			gradient: 'linear-gradient(135deg, rgb(254, 205, 165), rgb(254, 45, 45), rgb(107, 0, 62)',
 		},
 		{
-			name: __( 'Black to White Top to Bottom' ),
-			gradient: 'linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 1) 100%)',
+			name: __( 'Purple crush' ),
+			gradient: 'linear-gradient(135deg, rgb(52, 226, 228), rgb(71, 33, 251), rgb(171, 29, 254)',
 		},
 		{
-			name: __( 'Black to Transparent Left to Right' ),
-			gradient: 'linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%)',
+			name: __( 'Luminous dusk' ),
+			gradient: 'linear-gradient(135deg, rgb(255, 203, 112), rgb(199, 81, 192), rgb(65, 88, 208)',
 		},
 		{
-			name: __( 'Black to Transparent Top to Bottom' ),
-			gradient: 'linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%)',
+			name: __( 'Hazy dawn' ),
+			gradient: 'linear-gradient(135deg, rgb(250, 172, 168), rgb(218, 208, 236)',
 		},
 		{
-			name: __( 'White to Transparent Left to Right' ),
-			gradient: 'linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%)',
+			name: __( 'Pale ocean' ),
+			gradient: 'linear-gradient(135deg, rgb(255, 245, 203), rgb(182, 227, 212), rgb(51, 167, 181)',
 		},
 		{
-			name: __( 'White to Transparent Top to Bottom' ),
-			gradient: 'linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%)',
+			name: __( 'Electric grass' ),
+			gradient: 'linear-gradient(135deg, rgb(202, 248, 128), rgb(113, 206, 126)',
+		},
+		{
+			name: __( 'Subdued olive' ),
+			gradient: 'linear-gradient(135deg, rgb(250, 250, 225), rgb(103, 166, 113)',
+		},
+		{
+			name: __( 'Atomic cream' ),
+			gradient: 'linear-gradient(135deg, rgb(253, 215, 154), rgb(0, 74, 89)',
+		},
+		{
+			name: __( 'Nightshade' ),
+			gradient: 'linear-gradient(135deg, rgb(51, 9, 104), rgb(49, 205, 207)',
+		},
+		{
+			name: __( 'Midnight' ),
+			gradient: 'linear-gradient(135deg, rgb(2, 3, 129), rgb(40, 116, 252)',
 		},
 	],
 };