From 01d065df9eb4f80d28cb829dd86acdf7114522cf Mon Sep 17 00:00:00 2001 From: Jorge Date: Fri, 23 Aug 2019 15:24:00 +0100 Subject: [PATCH 1/2] 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. (+2 squashed commits) Squashed commits: [a37cac983] Add transparency indication. [f7aa9f8a7] Add: Preset gradient functionality button block --- assets/stylesheets/_z-index.scss | 3 + packages/block-editor/README.md | 8 ++ .../src/components/gradient-picker/control.js | 35 +++++++++ .../components/gradient-picker/control.scss | 4 + .../src/components/gradient-picker/index.js | 24 ++++++ packages/block-editor/src/components/index.js | 2 + packages/block-editor/src/store/defaults.js | 75 +++++++++++++++++++ packages/block-editor/src/style.scss | 1 + packages/block-library/src/button/block.json | 3 + packages/block-library/src/button/edit.js | 28 ++++++- packages/block-library/src/button/save.js | 8 +- .../src/circular-option-picker/style.scss | 15 ++++ .../components/src/gradient-picker/index.js | 66 ++++++++++++++++ packages/components/src/index.js | 1 + 14 files changed, 266 insertions(+), 7 deletions(-) create mode 100644 packages/block-editor/src/components/gradient-picker/control.js create mode 100644 packages/block-editor/src/components/gradient-picker/control.scss create mode 100644 packages/block-editor/src/components/gradient-picker/index.js create mode 100644 packages/components/src/gradient-picker/index.js diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss index 67e8396320addb..7b7e0aedd55301 100644 --- a/assets/stylesheets/_z-index.scss +++ b/assets/stylesheets/_z-index.scss @@ -115,6 +115,9 @@ $z-layers: ( // Make sure block manager sticky category titles appear above the options ".edit-post-manage-blocks-modal__category-title": 1, + // Needs to appear bellow other color circular picker related UI elements. + ".components-circular-option-picker__option-wrapper::before": -1, + ".components-circular-option-picker__option.is-active": 1, // Needs to be higher than .components-circular-option-picker__option.is-active. ".components-circular-option-picker__option.is-active + .dashicons-saved": 2 diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index d9c7818065c0b5..eb9ac89f64226f 100644 --- a/packages/block-editor/README.md +++ b/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'. +# **GradientPicker** + +Undocumented declaration. + +# **GradientPickerControl** + +Undocumented declaration. + # **InnerBlocks** _Related_ diff --git a/packages/block-editor/src/components/gradient-picker/control.js b/packages/block-editor/src/components/gradient-picker/control.js new file mode 100644 index 00000000000000..73609ffdf17e27 --- /dev/null +++ b/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 ( + + + { __( 'Gradient Presets' ) } + + + + ); +} diff --git a/packages/block-editor/src/components/gradient-picker/control.scss b/packages/block-editor/src/components/gradient-picker/control.scss new file mode 100644 index 00000000000000..e73745321e6c93 --- /dev/null +++ b/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; +} diff --git a/packages/block-editor/src/components/gradient-picker/index.js b/packages/block-editor/src/components/gradient-picker/index.js new file mode 100644 index 00000000000000..c9d0257623fd6a --- /dev/null +++ b/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 ( + + ); +} + +export default function( props ) { + const ComponentToUse = props.gradients ? + GradientPicker : + GradientPickerWithGradients; + return ( ); +} diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 84184ac70bd5bc..c3c418aaba681d 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -17,6 +17,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'; diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js index f7076f28c27570..06eabc9f6f11f4 100644 --- a/packages/block-editor/src/store/defaults.js +++ b/packages/block-editor/src/store/defaults.js @@ -152,5 +152,80 @@ export const SETTINGS_DEFAULTS = { __experimentalEnableLegacyWidgetBlock: false, __experimentalEnableMenuBlock: false, __experimentalBlockDirectory: false, + gradients: [ + { + name: __( 'Vivid cyan blue to vivid purple' ), + gradient: 'linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 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: __( 'Light green cyan to vivid green cyan' ), + gradient: 'linear-gradient(135deg, rgb(122, 220, 180) 0%, rgb(0, 208, 130) 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: __( 'Luminous vivid orange to vivid red' ), + gradient: 'linear-gradient(135deg, rgba(255, 105, 0, 1) 0%, rgb(207, 46, 46) 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: __( '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: __( 'Blush light purple' ), + gradient: 'linear-gradient(135deg, rgb(255, 206, 236), rgb(152, 150, 240)', + }, + { + name: __( 'Blush bordeaux' ), + gradient: 'linear-gradient(135deg, rgb(254, 205, 165), rgb(254, 45, 45), rgb(107, 0, 62)', + }, + { + name: __( 'Purple crush' ), + gradient: 'linear-gradient(135deg, rgb(52, 226, 228), rgb(71, 33, 251), rgb(171, 29, 254)', + }, + { + name: __( 'Luminous dusk' ), + gradient: 'linear-gradient(135deg, rgb(255, 203, 112), rgb(199, 81, 192), rgb(65, 88, 208)', + }, + { + name: __( 'Hazy dawn' ), + gradient: 'linear-gradient(135deg, rgb(250, 172, 168), rgb(218, 208, 236)', + }, + { + name: __( 'Pale ocean' ), + gradient: 'linear-gradient(135deg, rgb(255, 245, 203), rgb(182, 227, 212), rgb(51, 167, 181)', + }, + { + 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)', + }, + ], }; diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 95d7a0805873c4..8ebb2e487a4f29 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -17,6 +17,7 @@ @import "./components/color-palette/control.scss"; @import "./components/contrast-checker/style.scss"; @import "./components/default-block-appender/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"; diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index ebe5748d489e25..ff43c67db5e834 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -48,6 +48,9 @@ }, "borderRadius": { "type": "number" + }, + "customGradient": { + "type": "string" } } } diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index a57ab89ca94f6c..512a3176fd0946 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -30,6 +30,7 @@ import { InspectorControls, withColors, PanelColorSettings, + GradientPickerControl, } from '@wordpress/block-editor'; const { getComputedStyle } = window; @@ -133,6 +134,7 @@ class ButtonEdit extends Component { text, title, url, + customGradient, } = attributes; const linkId = `wp-block-button__inline-link-${ instanceId }`; @@ -146,15 +148,16 @@ class ButtonEdit extends Component { withoutInteractiveFormatting className={ classnames( 'wp-block-button__link', { - 'has-background': backgroundColor.color, - [ backgroundColor.class ]: backgroundColor.class, + 'has-background': backgroundColor.color || customGradient, + [ backgroundColor.class ]: ! customGradient && backgroundColor.class, 'has-text-color': textColor.color, [ textColor.class ]: textColor.class, 'no-border-radius': borderRadius === 0, } ) } style={ { - backgroundColor: backgroundColor.color, + backgroundColor: ! customGradient && backgroundColor.color, + background: customGradient, color: textColor.color, borderRadius: borderRadius ? borderRadius + 'px' : undefined, } } @@ -183,7 +186,10 @@ class ButtonEdit extends Component { colorSettings={ [ { value: backgroundColor.color, - onChange: setBackgroundColor, + onChange: ( newColor ) => { + setAttributes( { customGradient: undefined } ); + setBackgroundColor( newColor ); + }, label: __( 'Background Color' ), }, { @@ -205,6 +211,20 @@ class ButtonEdit extends Component { } } /> + + { + setAttributes( { + customGradient: newGradient, + backgroundColor: undefined, + customBackgroundColor: undefined, + } ); + } + } + value={ customGradient } + /> + onChange( undefined ), + [ onChange ] + ); + const gradientOptions = useMemo( + () => { + return map( gradients, ( { gradient, name } ) => ( + ( 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 ( + + { __( 'Clear' ) } + + ) } + /> + ); +} diff --git a/packages/components/src/index.js b/packages/components/src/index.js index 5ce67b968084ea..d13be6e9ac2e30 100644 --- a/packages/components/src/index.js +++ b/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'; From ecbdd51816aafc1a72a698617fbc735416b0ed99 Mon Sep 17 00:00:00 2001 From: Jorge Date: Thu, 3 Oct 2019 12:39:14 +0100 Subject: [PATCH 2/2] Mark public API's as experimental --- packages/block-editor/README.md | 8 -------- .../block-editor/src/components/gradient-picker/index.js | 6 +++--- packages/block-editor/src/components/index.js | 4 ++-- packages/block-library/src/button/edit.js | 4 ++-- packages/components/src/index.js | 2 +- 5 files changed, 8 insertions(+), 16 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index eb9ac89f64226f..d9c7818065c0b5 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -282,14 +282,6 @@ _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'. -# **GradientPicker** - -Undocumented declaration. - -# **GradientPickerControl** - -Undocumented declaration. - # **InnerBlocks** _Related_ diff --git a/packages/block-editor/src/components/gradient-picker/index.js b/packages/block-editor/src/components/gradient-picker/index.js index c9d0257623fd6a..a4b5fac2b98f7c 100644 --- a/packages/block-editor/src/components/gradient-picker/index.js +++ b/packages/block-editor/src/components/gradient-picker/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { GradientPicker } from '@wordpress/components'; +import { __experimentalGradientPicker } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; function GradientPickerWithGradients( props ) { @@ -9,7 +9,7 @@ function GradientPickerWithGradients( props ) { select( 'core/block-editor' ).getSettings().gradients ) ); return ( - @@ -18,7 +18,7 @@ function GradientPickerWithGradients( props ) { export default function( props ) { const ComponentToUse = props.gradients ? - GradientPicker : + __experimentalGradientPicker : GradientPickerWithGradients; return ( ); } diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index c3c418aaba681d..6e9bb592378678 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -17,8 +17,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 __experimentalGradientPicker } from './gradient-picker'; +export { default as __experimentalGradientPickerControl } 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'; diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 512a3176fd0946..17908484218091 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -30,7 +30,7 @@ import { InspectorControls, withColors, PanelColorSettings, - GradientPickerControl, + __experimentalGradientPickerControl, } from '@wordpress/block-editor'; const { getComputedStyle } = window; @@ -212,7 +212,7 @@ class ButtonEdit extends Component { /> - { setAttributes( { diff --git a/packages/components/src/index.js b/packages/components/src/index.js index d13be6e9ac2e30..8542a86ba9b659 100644 --- a/packages/components/src/index.js +++ b/packages/components/src/index.js @@ -25,7 +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 __experimentalGradientPicker } from './gradient-picker'; export { default as Icon } from './icon'; export { default as IconButton } from './icon-button'; export { default as KeyboardShortcuts } from './keyboard-shortcuts';