Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add custom gradient component #17603

Merged
merged 7 commits into from
Dec 5, 2019
Merged

Add custom gradient component #17603

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d62b902
Post rebases fixes (+6 squashed commits)
jorgefilipecosta Sep 26, 2019
4a51675
Refactor to state based
jorgefilipecosta Dec 3, 2019
09a6ceb
Add tests to the gradient serializer
jorgefilipecosta Dec 4, 2019
c6d2ae7
Update packages/components/src/custom-gradient-picker/control-points.js
jorgefilipecosta Dec 5, 2019
e6e40ed
Update packages/components/src/custom-gradient-picker/control-points.js
jorgefilipecosta Dec 5, 2019
7c6c5c0
Clean up listeners on unmout
jorgefilipecosta Dec 5, 2019
dbb5f8b
Revert include custom gradient picker on gradient picker component
jorgefilipecosta Dec 5, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions lib/experiments-page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,8 @@ function gutenberg_experiments_editor_settings( $settings ) {
$experiments_settings['gradients'] = $gradient_presets;
}

$experiments_settings['disableCustomGradients'] = get_theme_support( '__experimental-disable-custom-gradients' );

return array_merge( $settings, $experiments_settings );
}
add_filter( 'block_editor_settings', 'gutenberg_experiments_editor_settings' );
6 changes: 6 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 0 additions & 4 deletions packages/block-editor/src/components/color-palette/control.scss
View file
Open in desktop

This file was deleted.

16 changes: 11 additions & 5 deletions packages/block-editor/src/components/gradient-picker/control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* External dependencies
*/
import classnames from 'classnames';
import { isEmpty } from 'lodash';
import { isEmpty, pick } from 'lodash';

/**
* WordPress dependencies
Expand All @@ -17,11 +17,14 @@ import { useSelect } from '@wordpress/data';
*/
import GradientPicker from './';

export default function( { className, label = __( 'Gradient Presets' ), ...props } ) {
const gradients = useSelect( ( select ) => (
select( 'core/block-editor' ).getSettings().gradients
export default function( { className, value, onChange, label = __( 'Gradient Presets' ), ...props } ) {
const { gradients = [], disableCustomGradients } = useSelect( ( select ) => (
pick(
select( 'core/block-editor' ).getSettings(),
[ 'gradients', 'disableCustomGradients' ]
)
) );
if ( isEmpty( gradients ) ) {
if ( isEmpty( gradients ) && disableCustomGradients ) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this be an or not an and

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is supposed to be an "and". Users can not choose a gradient if there are no presets and they can not use the custom gradient picker. If there are presets, or custom gradients are enabled the component should render something.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that disableCustomGradient is set, then it should ignore defined gradients. ATM disableCustomColors has to set to true and the list of gradients has to be empty.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, I'm not managing the clarify this logic. If there are gradients available, the gradient picker should render even if custom gradients are disabled to allow the user to choose a preset gradient. If disableCustomGradients is false, the gradient picker should render even if the gradients list is empty to allow the user to create a custom gradient.

The only case where the gradient picker should not render is if the gradients list is empty and custom gradients are disabled because, in that case, the user cannot select a preset gradient or create a custom gradient.

return null;
}
return (
Expand All @@ -35,8 +38,11 @@ export default function( { className, label = __( 'Gradient Presets' ), ...props
{ label }
</BaseControl.VisualLabel>
<GradientPicker
value={ value }
onChange={ onChange }
className="block-editor-gradient-picker-control__gradient-picker-presets"
gradients={ gradients }
disableCustomGradients={ disableCustomGradients }
{ ...props }
/>
</BaseControl>
Expand Down
4 changes: 0 additions & 4 deletions packages/block-editor/src/components/gradient-picker/control.scss
View file
Open in desktop

This file was deleted.

18 changes: 14 additions & 4 deletions packages/block-editor/src/components/gradient-picker/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,33 @@

/**
* External dependencies
*/
import { pick } from 'lodash';

/**
* WordPress dependencies
*/
import { __experimentalGradientPicker } from '@wordpress/components';
import { useSelect } from '@wordpress/data';

function GradientPickerWithGradients( props ) {
const gradients = useSelect( ( select ) => (
select( 'core/block-editor' ).getSettings().gradients
const { gradients, disableCustomGradients } = useSelect( ( select ) => (
pick(
select( 'core/block-editor' ).getSettings(),
[ 'gradients', 'disableCustomGradients' ]
)
) );
return (
<__experimentalGradientPicker
gradients={ props.gradients !== undefined ? props.gradient : gradients }
disableCustomGradients={ props.disableCustomGradients !== undefined ? props.disableCustomGradients : disableCustomGradients }
{ ...props }
gradients={ gradients }
/>
);
}

export default function( props ) {
const ComponentToUse = props.gradients ?
const ComponentToUse = props.gradients !== undefined && props.disableCustomGradients !== undefined ?
__experimentalGradientPicker :
GradientPickerWithGradients;
return ( <ComponentToUse { ...props } /> );
Expand Down
2 changes: 0 additions & 2 deletions packages/block-editor/src/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,8 @@
@import "./components/block-toolbar/style.scss";
@import "./components/block-types-list/style.scss";
@import "./components/button-block-appender/style.scss";
@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/link-control/style.scss";
@import "./components/inner-blocks/style.scss";
@import "./components/inserter-with-shortcuts/style.scss";
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/cover/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -461,6 +461,7 @@ function CoverEdit( {
clearable={ false }
/>
<__experimentalGradientPicker
disableCustomGradients
onChange={
( newGradient ) => {
setGradient( newGradient );
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/cover/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@

.wp-block-cover__placeholder-background-options {
// wraps about 6 color swatches
max-width: 290px;
max-width: 260px;
margin-top: 1em;
width: 100%;
}
Expand Down
1 change: 1 addition & 0 deletions packages/components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
"clipboard": "^2.0.1",
"dom-scroll-into-view": "^1.2.1",
"downshift": "^3.3.4",
"gradient-parser": "^0.1.5",
"lodash": "^4.17.15",
"memize": "^1.0.5",
"moment": "^2.22.1",
Expand Down
2 changes: 2 additions & 0 deletions packages/components/src/circular-option-picker/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,10 +90,12 @@ export default function CircularOptionPicker( {
actions,
className,
options,
children,
} ) {
return (
<div className={ classnames( 'components-circular-option-picker', className ) }>
{ options }
{ children }
{ actions && (
<div className="components-circular-option-picker__custom-clear-wrapper">
{ actions }
Expand Down
13 changes: 9 additions & 4 deletions packages/components/src/circular-option-picker/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
$color-palette-circle-size: 28px;
$color-palette-circle-spacing: 14px;
$color-palette-circle-spacing: 12px;

.components-circular-option-picker {
margin-right: -14px;
width: calc(100% + 14px);
display: inline-block;
margin-top: 0.6rem;
width: 100%;

.components-circular-option-picker__custom-clear-wrapper {
width: calc(100% - 14px);
display: flex;
justify-content: flex-end;
}
Expand All @@ -22,6 +22,7 @@ $color-palette-circle-spacing: 14px;
transform: scale(1);
transition: 100ms transform ease;
@include reduce-motion("transition");

&:hover {
transform: scale(1.2);
}
Expand All @@ -31,6 +32,10 @@ $color-palette-circle-spacing: 14px;
height: 100%;
width: 100%;
}

&:nth-child(6n+6) {
margin-right: 0;
}
}

.components-circular-option-picker__option-wrapper::before {
Expand Down
11 changes: 11 additions & 0 deletions packages/components/src/custom-gradient-picker/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
export const INSERT_POINT_WIDTH = 23;
export const GRADIENT_MARKERS_WIDTH = 18;
export const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER = ( INSERT_POINT_WIDTH + GRADIENT_MARKERS_WIDTH ) / 2;
export const MINIMUM_ABSOLUTE_LEFT_POSITION = 5;
export const MINIMUM_DISTANCE_BETWEEN_POINTS = 9;
export const MINIMUM_SIGNIFICANT_MOVE = 5;
export const DEFAULT_GRADIENT = 'linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%)';
export const COLOR_POPOVER_PROPS = {
className: 'components-custom-gradient-picker__color-picker-popover',
position: 'top',
};
Loading