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

CustomGradientPicker: Hard deprecate outer margins #58699

Merged
merged 5 commits into from Feb 6, 2024
Merged

CustomGradientPicker: Hard deprecate outer margins #58699

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
61775bd
CustomGradientPicker: Hard deprecate outer margins
mirka Feb 5, 2024
8301bce
Remove usage in GradientPicker
mirka Feb 5, 2024
e6bf7d1
Remove usage in PaletteEdit
mirka Feb 5, 2024
381db02
Update changelog
mirka Feb 5, 2024
2db4c3e
Merge branch 'trunk' into custom-gradient-picker-margin
mirka Feb 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Expand Up @@ -2,6 +2,9 @@

## Unreleased

### Breaking Changes

- `CustomGradientPicker`: Remove deprecated `__nextHasNoMargin` prop and promote to default behavior ([#58699](https://github.com/WordPress/gutenberg/pull/58699)).

### Enhancements

Expand Down
22 changes: 1 addition & 21 deletions packages/components/src/custom-gradient-picker/index.tsx
View file
Open in desktop
@@ -1,13 +1,11 @@
/**
* External dependencies
*/
import classnames from 'classnames';
import type gradientParser from 'gradient-parser';

/**
* WordPress dependencies
*/
import deprecated from '@wordpress/deprecated';
import { __ } from '@wordpress/i18n';

/**
Expand Down Expand Up @@ -141,8 +139,6 @@ const GradientTypePicker = ( {
* ```
*/
export function CustomGradientPicker( {
/** Start opting into the new margin-free styles that will become the default in a future version. */
__nextHasNoMargin = false,
value,
onChange,
__experimentalIsRenderedInSidebar = false,
Expand All @@ -166,24 +162,8 @@ export function CustomGradientPicker( {
};
} );

if ( ! __nextHasNoMargin ) {
deprecated(
'Outer margin styles for wp.components.CustomGradientPicker',
{
since: '6.1',
version: '6.4',
hint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version',
}
);
}

return (
<VStack
spacing={ 4 }
className={ classnames( 'components-custom-gradient-picker', {
'is-next-has-no-margin': __nextHasNoMargin,
} ) }
>
<VStack spacing={ 4 } className="components-custom-gradient-picker">
<CustomGradientBar
__experimentalIsRenderedInSidebar={
__experimentalIsRenderedInSidebar
Expand Down
3 changes: 0 additions & 3 deletions packages/components/src/custom-gradient-picker/stories/index.story.tsx
View file
Open in desktop
Expand Up @@ -40,6 +40,3 @@ const CustomGradientPickerWithState: StoryFn<
};

export const Default = CustomGradientPickerWithState.bind( {} );
Default.args = {
__nextHasNoMargin: true,
};
7 changes: 0 additions & 7 deletions packages/components/src/custom-gradient-picker/style.scss
View file
Open in desktop
@@ -1,12 +1,5 @@
$components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 16px handles inside, that leaves 32px padding, half of which is 1å6.

.components-custom-gradient-picker {
&:not(.is-next-has-no-margin) {
margin-top: $grid-unit-15;
margin-bottom: $grid-unit-30;
}
}

.components-custom-gradient-picker__gradient-bar {
border-radius: $radius-block-ui;
width: 100%;
Expand Down
2 changes: 2 additions & 0 deletions packages/components/src/custom-gradient-picker/types.ts
View file
Open in desktop
Expand Up @@ -10,6 +10,8 @@ export type CustomGradientPickerProps = {
* can be safely removed once this happens.)
*
* @default false
* @deprecated Default behavior since WP 6.5. Prop can be safely removed.
* @ignore
*/
__nextHasNoMargin?: boolean;
/**
Expand Down
1 change: 0 additions & 1 deletion packages/components/src/gradient-picker/index.tsx
View file
Open in desktop
Expand Up @@ -249,7 +249,6 @@ export function GradientPicker( {
<VStack spacing={ gradients.length ? 4 : 0 }>
{ ! disableCustomGradients && (
<CustomGradientPicker
__nextHasNoMargin
__experimentalIsRenderedInSidebar={
__experimentalIsRenderedInSidebar
}
Expand Down
1 change: 0 additions & 1 deletion packages/components/src/palette-edit/index.tsx
View file
Open in desktop
Expand Up @@ -152,7 +152,6 @@ function ColorPickerPopover< T extends Color | Gradient >( {
{ isGradient && (
<div className="components-palette-edit__popover-gradient-picker">
<CustomGradientPicker
__nextHasNoMargin
__experimentalIsRenderedInSidebar
value={ element.gradient }
onChange={ ( newGradient ) => {
Expand Down