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

Jump to bottom

GradientPicker: Show custom picker before swatches #43577

Merged
merged 5 commits into from
Sep 1, 2022
Merged

GradientPicker: Show custom picker before swatches #43577

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3b31eff
GradientPicker: Show custom picker before swatches
mirka Aug 24, 2022
ed9c61d
Add changelog
mirka Aug 24, 2022
8ea5132
Add story for multiple origins
mirka Aug 30, 2022
66c044f
Decrease row gutters
mirka Aug 30, 2022
1b5ac9a
Remove `content` prop from subcomponents
mirka Sep 1, 2022
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
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@

### Enhancements

- `GradientPicker`: Show custom picker before swatches ([#43577](https://github.com/WordPress/gutenberg/pull/43577)).
- `CustomGradientPicker`, `GradientPicker`: Add `__nextHasNoMargin` prop for opting into the new margin-free styles ([#43387](https://github.com/WordPress/gutenberg/pull/43387)).
- `ToolsPanel`: Tighten grid gaps ([#43424](https://github.com/WordPress/gutenberg/pull/43424)).
- `ToggleGroupControl`: Improve TypeScript documentation ([#43265](https://github.com/WordPress/gutenberg/pull/43265)).
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/custom-gradient-picker/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ export default function CustomGradientPicker( {

return (
<VStack
spacing={ 5 }
spacing={ 4 }
className={ classnames( 'components-custom-gradient-picker', {
'is-next-has-no-margin': __nextHasNoMargin,
} ) }
Expand Down
88 changes: 41 additions & 47 deletions packages/components/src/gradient-picker/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ function SingleOrigin( {
onChange,
value,
actions,
content,
} ) {
const gradientOptions = useMemo( () => {
return map( gradients, ( { gradient, name } ) => (
Expand Down Expand Up @@ -60,9 +59,7 @@ function SingleOrigin( {
className={ className }
options={ gradientOptions }
actions={ actions }
>
{ content }
</CircularOptionPicker>
/>
);
}

Expand All @@ -73,7 +70,6 @@ function MultipleOrigin( {
onChange,
value,
actions,
content,
} ) {
return (
<VStack spacing={ 3 } className={ className }>
Expand All @@ -87,10 +83,7 @@ function MultipleOrigin( {
onChange={ onChange }
value={ value }
{ ...( gradients.length === index + 1
? {
actions,
content,
}
? { actions }
: {} ) }
/>
</VStack>
Expand Down Expand Up @@ -129,47 +122,48 @@ export default function GradientPicker( {
} );
}

// Can be removed when deprecation period is over
const deprecatedMarginSpacerProps = ! __nextHasNoMargin
? { marginTop: 3 }
? {
marginTop: ! gradients?.length ? 3 : undefined,
marginBottom: ! clearable ? 6 : 0,
}
: {};

return (
<Component
className={ className }
clearable={ clearable }
clearGradient={ clearGradient }
gradients={ gradients }
onChange={ onChange }
value={ value }
actions={
clearable &&
( gradients?.length || ! disableCustomGradients ) && (
<CircularOptionPicker.ButtonAction
onClick={ clearGradient }
>
{ __( 'Clear' ) }
</CircularOptionPicker.ButtonAction>
)
}
content={
mirka marked this conversation as resolved.
Show resolved Hide resolved
! disableCustomGradients && (
<Spacer
marginTop={ gradients?.length ? 3 : 0 }
marginBottom={ 0 }
{ ...deprecatedMarginSpacerProps }
>
<CustomGradientPicker
__nextHasNoMargin={ __nextHasNoMargin }
__experimentalIsRenderedInSidebar={
__experimentalIsRenderedInSidebar
}
value={ value }
onChange={ onChange }
/>
</Spacer>
)
}
/>
// Outmost Spacer wrapper can be removed when deprecation period is over
<Spacer marginBottom={ 0 } { ...deprecatedMarginSpacerProps }>
<VStack spacing={ gradients?.length ? 4 : 0 }>
{ ! disableCustomGradients && (
<CustomGradientPicker
__nextHasNoMargin
__experimentalIsRenderedInSidebar={
__experimentalIsRenderedInSidebar
}
value={ value }
onChange={ onChange }
/>
) }
{ ( gradients?.length || clearable ) && (
<Component
className={ className }
clearable={ clearable }
clearGradient={ clearGradient }
gradients={ gradients }
onChange={ onChange }
value={ value }
actions={
clearable &&
! disableCustomGradients && (
<CircularOptionPicker.ButtonAction
onClick={ clearGradient }
>
{ __( 'Clear' ) }
</CircularOptionPicker.ButtonAction>
)
}
/>
) }
</VStack>
</Spacer>
);
}
10 changes: 10 additions & 0 deletions packages/components/src/gradient-picker/stories/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,3 +83,13 @@ WithNoExistingGradients.args = {
...Default.args,
gradients: [],
};

export const MultipleOrigins = Template.bind( {} );
MultipleOrigins.args = {
...Default.args,
__experimentalHasMultipleOrigins: true,
gradients: [
{ name: 'Origin 1', gradients: GRADIENTS },
{ name: 'Origin 2', gradients: GRADIENTS },
],
};