Add: Preset gradient functionality button block

packages/block-editor/README.md

@@ -282,6 +282,14 @@ _Returns_
 
 -   `string`: String with the class corresponding to the fontSize passed. The class is generated by appending 'has-' followed by fontSizeSlug in kebabCase and ending with '-font-size'.
 
+<a name="GradientPicker" href="#GradientPicker">#</a> **GradientPicker**
+
+Undocumented declaration.
+
+<a name="GradientPickerControl" href="#GradientPickerControl">#</a> **GradientPickerControl**
+
+Undocumented declaration.
+
 <a name="InnerBlocks" href="#InnerBlocks">#</a> **InnerBlocks**
 
 _Related_

packages/block-editor/src/components/gradient-picker/control.js

@@ -0,0 +1,35 @@
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { BaseControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import GradientPicker from './';
+
+export default function( { className, ...props } ) {
+	return (
+		<BaseControl
+			className={ classnames(
+				'block-editor-gradient-picker-control',
+				className
+			) }
+		>
+			<BaseControl.VisualLabel>
+				{ __( 'Gradient Presets' ) }
+			</BaseControl.VisualLabel>
+			<GradientPicker
+				className="block-editor-gradient-picker-control__gradient-picker-presets"
+				{ ...props }
+			/>
+		</BaseControl>
+	);
+}

packages/block-editor/src/components/gradient-picker/control.scss

@@ -0,0 +1,4 @@
+.block-editor-gradient-picker-control__gradient-picker-presets {
+	display: inline-block;
+	margin-top: 0.6rem;
+}

packages/block-editor/src/components/gradient-picker/index.js

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { GradientPicker } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+
+function GradientPickerWithGradients( props ) {
+	const gradients = useSelect( ( select ) => (
+		select( 'core/block-editor' ).getSettings().gradients
+	) );
+	return (
+		<GradientPicker
+			{ ...props }
+			gradients={ gradients }
+		/>
+	);
+}
+
+export default function( props ) {
+	const ComponentToUse = props.gradients ?
+		GradientPicker :
+		GradientPickerWithGradients;
+	return ( <ComponentToUse { ...props } /> );
+}

packages/block-editor/src/components/index.js

@@ -16,6 +16,8 @@ export { default as BlockVerticalAlignmentToolbar } from './block-vertical-align
 export { default as ButtonBlockerAppender } from './button-block-appender';
 export { default as ColorPalette } from './color-palette';
 export { default as ContrastChecker } from './contrast-checker';
+export { default as GradientPicker } from './gradient-picker';
+export { default as GradientPickerControl } from './gradient-picker/control';
 export { default as InnerBlocks } from './inner-blocks';
 export { default as InspectorAdvancedControls } from './inspector-advanced-controls';
 export { default as InspectorControls } from './inspector-controls';

packages/block-editor/src/store/defaults.js

@@ -150,5 +150,31 @@ export const SETTINGS_DEFAULTS = {
 	__experimentalCanUserUseUnfilteredHTML: false,
 	__experimentalEnableLegacyWidgetBlock: false,
 	__experimentalEnableMenuBlock: false,
+	gradients: [
+		{
+			name: __( 'Radial pale pink to cyan' ),
+			gradient: 'radial-gradient(circle, rgba(247,141,167,1) 0%, rgba(6,147,227,1) 100%)',
+		},
+		{
+			name: __( 'Linear purple to amber' ),
+			gradient: 'linear-gradient(90deg, rgba(155,81,224,1) 0%, rgba(252,185,0,1) 100%)',
+		},
+		{
+			name: __( 'Linear red green blue combination' ),
+			gradient: 'linear-gradient(90deg, rgba(254,143,143,1) 7%, rgba(6,156,112,1) 53%, rgba(0,134,252,1) 99%)',
+		},
+		{
+			name: __( 'Linear diagonal pink to cyan' ),
+			gradient: 'linear-gradient(45deg, rgba(247,141,167,1) 0%, rgba(6,147,227,1) 100%)',
+		},
+		{
+			name: __( 'Vertical green and blue' ),
+			gradient: 'linear-gradient(0deg, rgba(34,87,195,1) 0%, rgba(253,187,45,1) 100%)',
+		},
+		{
+			name: __( 'Radial orange and light green' ),
+			gradient: 'radial-gradient(circle, rgba(255,105,0,1) 0%, rgba(123,220,181,1) 100%)',
+		},
+	],
 };
 

packages/block-editor/src/style.scss

@@ -18,6 +18,7 @@
 @import "./components/contrast-checker/style.scss";
 @import "./components/default-block-appender/style.scss";
 @import "./components/font-sizes/style.scss";
+@import "./components/gradient-picker/control.scss";
 @import "./components/inner-blocks/style.scss";
 @import "./components/inserter-with-shortcuts/style.scss";
 @import "./components/inserter/style.scss";

packages/block-library/src/button/block.json

@@ -45,6 +45,9 @@
 		},
 		"placeholder": {
 			"type": "string"
+		},
+		"gradient": {
+			"type": "string"
 		}
 	}
 }

packages/block-library/src/button/edit.js

@@ -28,6 +28,7 @@ import {
 	InspectorControls,
 	withColors,
 	PanelColorSettings,
+	GradientPickerControl,
 } from '@wordpress/block-editor';
 
 const { getComputedStyle } = window;
@@ -105,6 +106,7 @@ class ButtonEdit extends Component {
 			linkTarget,
 			rel,
 			placeholder,
+			gradient,
 		} = attributes;
 
 		const linkId = `wp-block-button__inline-link-${ instanceId }`;
@@ -118,14 +120,15 @@ class ButtonEdit extends Component {
 					withoutInteractiveFormatting
 					className={ classnames(
 						'wp-block-button__link', {
-							'has-background': backgroundColor.color,
-							[ backgroundColor.class ]: backgroundColor.class,
+							'has-background': backgroundColor.color || gradient,
+							[ backgroundColor.class ]: ! gradient && backgroundColor.class,
 							'has-text-color': textColor.color,
 							[ textColor.class ]: textColor.class,
 						}
 					) }
 					style={ {
-						backgroundColor: backgroundColor.color,
+						backgroundColor: ! gradient && backgroundColor.color,
+						background: gradient,
 						color: textColor.color,
 					} }
 				/>
@@ -153,7 +156,10 @@ class ButtonEdit extends Component {
 						colorSettings={ [
 							{
 								value: backgroundColor.color,
-								onChange: setBackgroundColor,
+								onChange: ( newColor ) => {
+									setAttributes( { gradient: undefined } );
+									setBackgroundColor( newColor );
+								},
 								label: __( 'Background Color' ),
 							},
 							{
@@ -175,6 +181,20 @@ class ButtonEdit extends Component {
 							} }
 						/>
 					</PanelColorSettings>
+					<PanelBody title={ __( 'Gradient' ) }>
+						<GradientPickerControl
+							onChange={
+								( newGradient ) => {
+									setAttributes( {
+										gradient: newGradient,
+										backgroundColor: undefined,
+										customBackgroundColor: undefined,
+									} );
+								}
+							}
+							value={ gradient }
+						/>
+					</PanelBody>
 					<PanelBody title={ __( 'Link Settings' ) }>
 						<ToggleControl
 							label={ __( 'Open in New Tab' ) }

packages/block-library/src/button/save.js

@@ -20,22 +20,24 @@ export default function save( { attributes } ) {
 		textColor,
 		customBackgroundColor,
 		customTextColor,
+		gradient,
 		linkTarget,
 		rel,
 	} = attributes;
 
 	const textClass = getColorClassName( 'color', textColor );
-	const backgroundClass = getColorClassName( 'background-color', backgroundColor );
+	const backgroundClass = ! gradient && getColorClassName( 'background-color', backgroundColor );
 
 	const buttonClasses = classnames( 'wp-block-button__link', {
 		'has-text-color': textColor || customTextColor,
 		[ textClass ]: textClass,
-		'has-background': backgroundColor || customBackgroundColor,
+		'has-background': backgroundColor || customBackgroundColor || gradient,
 		[ backgroundClass ]: backgroundClass,
 	} );
 
 	const buttonStyle = {
-		backgroundColor: backgroundClass ? undefined : customBackgroundColor,
+		backgroundColor: backgroundClass || gradient ? undefined : customBackgroundColor,
+		background: gradient ? gradient : undefined,
 		color: textClass ? undefined : customTextColor,
 	};
 

packages/components/src/gradient-picker/index.js

@@ -0,0 +1,66 @@
+/**
+ * External dependencies
+ */
+import { map } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { useCallback, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import CircularOptionPicker from '../circular-option-picker';
+
+export default function GradientPicker( {
+	className,
+	gradients,
+	onChange,
+	value,
+} ) {
+	const clearGradient = useCallback(
+		() => onChange( undefined ),
+		[ onChange ]
+	);
+	const gradientOptions = useMemo(
+		() => {
+			return map( gradients, ( { gradient, name } ) => (
+				<CircularOptionPicker.Option
+					key={ gradient }
+					value={ gradient }
+					isSelected={ value === gradient }
+					tooltipText={ name ||
+						// translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
+						sprintf( __( 'Gradient code: %s' ), gradient )
+					}
+					style={ { color: 'rgba( 0,0,0,0 )', background: gradient } }
+					onClick={
+						value === gradient ?
+							clearGradient :
+							() => ( onChange( gradient ) )
+					}
+					aria-label={ name ?
+						// translators: %s: The name of the gradient e.g: "Angular red to blue".
+						sprintf( __( 'Gradient: %s' ), name ) :
+						// translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
+						sprintf( __( 'Gradient code: %s' ), gradient )
+					}
+				/>
+			) );
+		},
+		[ gradients, value, onChange, clearGradient ]
+	);
+	return (
+		<CircularOptionPicker
+			className={ className }
+			options={ gradientOptions }
+			actions={ (
+				<CircularOptionPicker.ButtonAction onClick={ clearGradient }>
+					{ __( 'Clear' ) }
+				</CircularOptionPicker.ButtonAction>
+			) }
+		/>
+	);
+}

packages/components/src/index.js

@@ -25,6 +25,7 @@ export { default as FontSizePicker } from './font-size-picker';
 export { default as FormFileUpload } from './form-file-upload';
 export { default as FormToggle } from './form-toggle';
 export { default as FormTokenField } from './form-token-field';
+export { default as GradientPicker } from './gradient-picker';
 export { default as Icon } from './icon';
 export { default as IconButton } from './icon-button';
 export { default as KeyboardShortcuts } from './keyboard-shortcuts';