Add: Custom gradient component

WordPress · Oct 1, 2019 · f044457 · f044457
1 parent 39ba758
commit f044457
Show file tree

Hide file tree

Showing 9 changed files with 483 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-editor/src/components/gradient-picker/control.js b/packages/block-editor/src/components/gradient-picker/control.js
@@ -7,15 +7,15 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { BaseControl } from '@wordpress/components';
+import { BaseControl, CustomGradientPicker } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import GradientPicker from './';
 
-export default function( { className, ...props } ) {
+export default function( { className, value, onChange, ...props } ) {
 	return (
 		<BaseControl
 			className={ classnames(
@@ -27,9 +27,15 @@ export default function( { className, ...props } ) {
 				{ __( 'Gradient Presets' ) }
 			</BaseControl.VisualLabel>
 			<GradientPicker
+				value={ value }
+				onChange={ onChange }
 				className="block-editor-gradient-picker-control__gradient-picker-presets"
 				{ ...props }
 			/>
+			<CustomGradientPicker
+				value={ value }
+				onChange={ onChange }
+			/>
 		</BaseControl>
 	);
 }
diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js
@@ -175,56 +175,56 @@ export const SETTINGS_DEFAULTS = {
 		},
 		{
 			name: __( 'Very light gray to cyan bluish gray' ),
-			gradient: 'linear-gradient(135deg, rgb(238, 238, 238) 0%, rgb(169, 184, 195)',
+			gradient: 'linear-gradient(135deg, rgb(238, 238, 238) 0%, rgb(169, 184, 195)  100%)',
 		},
 		// The following use new, customized colors.
 		{
 			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)',
+			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% )',
 		},
 		{
 			name: __( 'Blush light purple' ),
-			gradient: 'linear-gradient(135deg, rgb(255, 206, 236), rgb(152, 150, 240)',
+			gradient: 'linear-gradient(135deg, rgb(255, 206, 236) 0%, rgb(152, 150, 240) 100% )',
 		},
 		{
 			name: __( 'Blush bordeaux' ),
-			gradient: 'linear-gradient(135deg, rgb(254, 205, 165), rgb(254, 45, 45), rgb(107, 0, 62)',
+			gradient: 'linear-gradient(135deg, rgb(254, 205, 165) 0%, rgb(254, 45, 45) 50%, rgb(107, 0, 62) 100% )',
 		},
 		{
 			name: __( 'Purple crush' ),
-			gradient: 'linear-gradient(135deg, rgb(52, 226, 228), rgb(71, 33, 251), rgb(171, 29, 254)',
+			gradient: 'linear-gradient(135deg, rgb(52, 226, 228) 0%, rgb(71, 33, 251) 50%, rgb(171, 29, 254) 100% )',
 		},
 		{
 			name: __( 'Luminous dusk' ),
-			gradient: 'linear-gradient(135deg, rgb(255, 203, 112), rgb(199, 81, 192), rgb(65, 88, 208)',
+			gradient: 'linear-gradient(135deg, rgb(255, 203, 112) 0%, rgb(199, 81, 192) 50%, rgb(65, 88, 208) 100% )',
 		},
 		{
 			name: __( 'Hazy dawn' ),
-			gradient: 'linear-gradient(135deg, rgb(250, 172, 168), rgb(218, 208, 236)',
+			gradient: 'linear-gradient(135deg, rgb(250, 172, 168) 0%, rgb(218, 208, 236) 100% )',
 		},
 		{
 			name: __( 'Pale ocean' ),
-			gradient: 'linear-gradient(135deg, rgb(255, 245, 203), rgb(182, 227, 212), rgb(51, 167, 181)',
+			gradient: 'linear-gradient(135deg, rgb(255, 245, 203) 0%, rgb(182, 227, 212) 50%, rgb(51, 167, 181) 100% )',
 		},
 		{
 			name: __( 'Electric grass' ),
-			gradient: 'linear-gradient(135deg, rgb(202, 248, 128), rgb(113, 206, 126)',
+			gradient: 'linear-gradient(135deg, rgb(202, 248, 128) 0%, rgb(113, 206, 126) 100% )',
 		},
 		{
 			name: __( 'Subdued olive' ),
-			gradient: 'linear-gradient(135deg, rgb(250, 250, 225), rgb(103, 166, 113)',
+			gradient: 'linear-gradient(135deg, rgb(250, 250, 225) 0%, rgb(103, 166, 113) 100% )',
 		},
 		{
 			name: __( 'Atomic cream' ),
-			gradient: 'linear-gradient(135deg, rgb(253, 215, 154), rgb(0, 74, 89)',
+			gradient: 'linear-gradient(135deg, rgb(253, 215, 154) 0%, rgb(0, 74, 89) 100% )',
 		},
 		{
 			name: __( 'Nightshade' ),
-			gradient: 'linear-gradient(135deg, rgb(51, 9, 104), rgb(49, 205, 207)',
+			gradient: 'linear-gradient(135deg, rgb(51, 9, 104) 0%, rgb(49, 205, 207) 100% )',
 		},
 		{
 			name: __( 'Midnight' ),
-			gradient: 'linear-gradient(135deg, rgb(2, 3, 129), rgb(40, 116, 252)',
+			gradient: 'linear-gradient(135deg, rgb(2, 3, 129) 0%, rgb(40, 116, 252) 100% )',
 		},
 	],
 };

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -35,6 +35,7 @@
 		"classnames": "^2.2.5",
 		"clipboard": "^2.0.1",
 		"dom-scroll-into-view": "^1.2.1",
+		"gradient-parser": "^0.1.5",
 		"lodash": "^4.17.15",
 		"memize": "^1.0.5",
 		"moment": "^2.22.1",